Keep the modal state unchanged during the close animation (#100)

.gitignore

@@ -9,3 +9,5 @@
 
 npm-debug.log*
 
+
+*storybook.log

.storybook/main.js

@@ -0,0 +1,18 @@
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+  // stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-webpack5-compiler-swc",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+};
+export default config;

.storybook/preview.js

@@ -0,0 +1,13 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package.json

@@ -30,33 +30,42 @@
     "test:coverage": "jest --coverage",
     "postversion": "git push && git push --tags",
     "prepublishOnly": "npm run build",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "format": "prettier --write {src,stories,test,.storybook}/**/*.{js,md,yml,json} --no-error-on-unmatched-pattern"
   },
   "devDependencies": {
     "@babel/core": "^7.17.9",
     "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
+    "@chromatic-com/storybook": "^1.4.0",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/material": "^5.6.1",
-    "@storybook/addon-actions": "^6.5.0-alpha.62",
-    "@storybook/addon-links": "^6.5.0-alpha.62",
-    "@storybook/addons": "^6.5.0-alpha.62",
-    "@storybook/react": "^6.5.0-alpha.62",
+    "@storybook/addon-actions": "^8.1.4",
+    "@storybook/addon-essentials": "^8.1.4",
+    "@storybook/addon-interactions": "^8.1.4",
+    "@storybook/addon-links": "^8.1.4",
+    "@storybook/addon-onboarding": "^8.1.4",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
+    "@storybook/blocks": "^8.1.4",
+    "@storybook/react": "^8.1.4",
+    "@storybook/react-webpack5": "^8.1.4",
+    "@storybook/test": "^8.1.4",
     "@testing-library/react": "^13.0.1",
     "babel-loader": "^8.2.4",
     "coveralls": "^3.1.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "prettier": "^3.2.5",
+    "prop-types": "^15.8.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "rollup": "^2.70.1",
     "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-copy": "^3.4.0"
+    "rollup-plugin-copy": "^3.4.0",
+    "storybook": "^8.1.4"
   },
   "peerDependencies": {
     "@mui/material": ">= 5.0.0",

src/ConfirmProvider.js

@@ -86,13 +86,19 @@ const buildOptions = (defaultOptions, options) => {
 let confirmGlobal;
 
 const ConfirmProvider = ({ children, defaultOptions = {} }) => {
+  // State that we clear on close (to avoid dangling references to resolve and
+  // reject). If this is null, the dialog is closed.
   const [state, setState] = useState(null);
+  // Options for rendering the dialog, which aren't reset on close so that we
+  // keep rendering the same modal during close animation
+  const [options, setOptions] = useState({});
   const [key, setKey] = useState(0);
 
   const confirmBase = useCallback((parentId, options = {}) => {
     return new Promise((resolve, reject) => {
       setKey((key) => key + 1);
-      setState({ options, resolve, reject, parentId });
+      setOptions(options);
+      setState({resolve, reject, parentId});
     });
   }, []);
 
@@ -136,7 +142,7 @@ const ConfirmProvider = ({ children, defaultOptions = {} }) => {
       <ConfirmationDialog
         key={key}
         open={state !== null}
-        options={buildOptions(defaultOptions, state ? state.options : {})}
+        options={buildOptions(defaultOptions, options ?? {})}
         onClose={handleClose}
         onCancel={handleCancel}
         onConfirm={handleConfirm}