Update peerDependencies to include MUI v6 and React 19

Also updates dev dependencies.
jonatanklosko · Jan 13, 2025 · c687ae4 · c687ae4
1 parent ae765ce
commit c687ae4
Show file tree

Hide file tree

Showing 7 changed files with 7,713 additions and 28,083 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,7 +1,10 @@
 /** @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)"],
+  stories: [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
   addons: [
     "@storybook/addon-webpack5-compiler-swc",
     "@storybook/addon-onboarding",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,41 +35,41 @@
     "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": "^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",
+    "@babel/core": "^7.26.0",
+    "@babel/plugin-transform-runtime": "^7.25.9",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.26.3",
+    "@chromatic-com/storybook": "^3.2.3",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/material": "^6.3.1",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@storybook/addon-actions": "^8.4.7",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-onboarding": "^8.4.7",
+    "@storybook/addon-webpack5-compiler-swc": "^2.0.0",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-webpack5": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@testing-library/react": "^16.1.0",
+    "babel-loader": "^9.2.1",
     "coveralls": "^3.1.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "prettier": "^3.2.5",
+    "prettier": "^3.4.2",
     "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",
-    "storybook": "^8.1.4"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "rollup": "^4.30.1",
+    "rollup-plugin-copy": "^3.5.0",
+    "storybook": "^8.4.7"
   },
   "peerDependencies": {
     "@mui/material": ">= 5.0.0",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   }
 }
diff --git a/rollup.config.js → rollup.config.mjs b/rollup.config.js → rollup.config.mjs
@@ -1,5 +1,5 @@
-import pkg from "./package.json";
-import babel from "rollup-plugin-babel";
+import pkg from "./package.json" with { type: "json" };
+import babel from "@rollup/plugin-babel";
 import copy from "rollup-plugin-copy";
 
 export default {
@@ -8,9 +8,9 @@ export default {
     { file: pkg.main, format: "cjs" },
     { file: pkg.module, format: "esm" },
   ],
-  external: ["react", "@mui/material"],
+  external: ["react", /^@mui\/material*/],
   plugins: [
-    babel({ exclude: "node_modules/**" }),
+    babel({ exclude: "node_modules/**", babelHelpers: "bundled" }),
     copy({
       targets: [{ src: "src/index.d.ts", dest: "dist" }],
     }),

diff --git a/src/ConfirmProvider.js b/src/ConfirmProvider.js
@@ -98,7 +98,7 @@ const ConfirmProvider = ({ children, defaultOptions = {} }) => {
     return new Promise((resolve, reject) => {
       setKey((key) => key + 1);
       setOptions(options);
-      setState({resolve, reject, parentId});
+      setState({ resolve, reject, parentId });
     });
   }, []);
 

diff --git a/stories/index.stories.js b/stories/index.stories.js
@@ -15,66 +15,64 @@ const ConfirmationDialog = (options) => {
   return (
     <Button
       onClick={() => {
-        confirm(options)
-          .then(confirmationAction)
-          .catch(cancellationAction);
+        confirm(options).then(confirmationAction).catch(cancellationAction);
       }}
     >
       Click
     </Button>
-  );  
-}
+  );
+};
 
 export default {
   title: "Confirmation dialog",
   decorators: [(getStory) => <ConfirmProvider>{getStory()}</ConfirmProvider>],
-  component: ConfirmationDialog
+  component: ConfirmationDialog,
 };
 
 export const Basic = {
-  args: {}
-}
+  args: {},
+};
 
 export const StaticMethod = {
   render: () => {
     return (
       <Button onClick={() => staticConfirm().then(confirmationAction)}>
-          Click
+        Click
       </Button>
-    )
-  }
-}
+    );
+  },
+};
 
 export const WithDescription = {
-  args: { description: "This action is permanent!" }
-}
+  args: { description: "This action is permanent!" },
+};
 
 export const WithCustomText = {
   args: {
     title: "Reset setting?",
     description: "This will reset your device to its factory settings.",
     confirmationText: "Accept",
     cancellationText: "Cancel",
-  }
+  },
 };
 
 export const WithDialogProps = {
   args: {
     dialogProps: { fullWidth: false, disableEscapeKeyDown: true },
-  }
+  },
 };
 
 export const WithDialogActionsProps = {
   args: {
     dialogActionsProps: { sx: { justifyContent: "flex-start" } },
-  }
+  },
 };
 
 export const WithCustomButtonProps = {
   args: {
     confirmationButtonProps: { color: "secondary", variant: "outlined" },
     cancellationButtonProps: { variant: "outlined" },
-  }
+  },
 };
 
 // You can't just inline this into the render proeprty, it needs to be a JSX
@@ -96,7 +94,7 @@ function CustomCallbacksComponent() {
 }
 
 export const WithCustomCallbacks = {
-  render: () => <CustomCallbacksComponent/>
+  render: () => <CustomCallbacksComponent />,
 };
 
 export const WithCustomElements = {
@@ -109,7 +107,7 @@ export const WithCustomElements = {
     description: <LinearProgress />,
     confirmationText: "Accept",
     cancellationText: "Cancel",
-  }
+  },
 };
 
 export const WithCustomContent = {
@@ -120,21 +118,21 @@ export const WithCustomContent = {
         <Box p={2}>This isn't wrapped in DialogContentText.</Box>
       </div>
     ),
-  }
+  },
 };
 
 export const WithNaturalCloseDisabled = {
   args: {
     allowClose: false,
-  }
+  },
 };
 
 export const WithConfirmationKeyword = {
   args: {
     description:
       'This action is permanent. Please enter "DELETE" to confirm the action.',
     confirmationKeyword: "DELETE",
-  }
+  },
 };
 
 export const WithConfirmationKeywordAndCustomTextFieldProps = {
@@ -144,19 +142,19 @@ export const WithConfirmationKeywordAndCustomTextFieldProps = {
       label: "Enter DELETE",
       variant: "standard",
     },
-  }
+  },
 };
 
 export const WithReversedButtons = {
   args: {
-    buttonOrder: ["confirm", "cancel"]
-  }
+    buttonOrder: ["confirm", "cancel"],
+  },
 };
 
 export const WithCustomLabelAcknowledgeCheckbox = {
   args: {
     acknowledgement: "I confirm and understand the risk",
-  }
+  },
 };
 
 export const WithEnabledAcknowledgeCheckboxAndCustomFormControlLabelProps = {
@@ -165,7 +163,7 @@ export const WithEnabledAcknowledgeCheckboxAndCustomFormControlLabelProps = {
     acknowledgementFormControlLabelProps: {
       color: "warning",
     },
-  }
+  },
 };
 
 export const WithEnabledAcknowledgeCheckboxAndCustomCheckboxProps = {
@@ -174,31 +172,25 @@ export const WithEnabledAcknowledgeCheckboxAndCustomCheckboxProps = {
     acknowledgementCheckboxProps: {
       disableRipple: true,
     },
-  }
+  },
 };
 
-
 function ParentUnmountComponent() {
   const [flip, setFlip] = React.useState(false);
-  React.useEffect(() =>
-    {
-      const interval = setInterval(
-        () => setFlip((flip) => !flip),
-        2000
-      );
-      return () => {
-        clearInterval(interval);
-      }
-    }
-  );
+  React.useEffect(() => {
+    const interval = setInterval(() => setFlip((flip) => !flip), 2000);
+    return () => {
+      clearInterval(interval);
+    };
+  });
   return (
     <Fragment>
-      {flip && <ConfirmationDialog title="Dialog A"/>}
-      {!flip && <ConfirmationDialog title="Dialog B"/>}
+      {flip && <ConfirmationDialog title="Dialog A" />}
+      {!flip && <ConfirmationDialog title="Dialog B" />}
     </Fragment>
-  )
+  );
 }
 
 export const WithParentUnmount = {
-  render: () => <ParentUnmountComponent/>
-}
+  render: () => <ParentUnmountComponent />,
+};
diff --git a/test/useConfirm.test.js b/test/useConfirm.test.js
@@ -99,7 +99,7 @@ describe("useConfirm", () => {
       expect(queryByText("Remove this item?")).toBeTruthy();
       fireEvent.click(getByText("Ok"));
       expect(queryByText("Remove this item?")).toBeTruthy();
-    });    
+    });
   });
 
   test("honours default options passed to the provider", () => {