Feature: upgrade mui v9

.github/workflows/build_test.yml

@@ -10,6 +10,6 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 22
       - run: yarn install
       - run: yarn build

.github/workflows/jest.yml

@@ -10,6 +10,6 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 22
       - run: yarn install
       - run: yarn test

.nvmrc

@@ -1 +1 @@
-18.15.0
+22.22.1

package.json

@@ -1,6 +1,6 @@
 {
     "name": "openstack-uicore-foundation",
-    "version": "5.0.34",
+    "version": "6.0.0-beta.4",
     "description": "ui reactjs components for openstack marketing site",
     "main": "lib/openstack-uicore-foundation.js",
     "scripts": {
@@ -23,18 +23,18 @@
         "@babel/preset-flow": "^7.7.4",
         "@babel/preset-react": "^7.7.4",
         "@babel/runtime": "^7.20.7",
-        "@emotion/react": "^11.11.4",
-        "@emotion/styled": "^11.11.5",
-        "@mui/icons-material": "^6.4.3",
-        "@mui/material": "^6.4.3",
-        "@mui/x-date-pickers": "^7.26.0",
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.0",
+        "@mui/icons-material": "^9.0.0",
+        "@mui/material": "^9.0.0",
+        "@mui/x-date-pickers": "^9.0.0",
         "@react-pdf/renderer": "^3.1.11",
         "@sentry/react": "^8.54.0",
         "@sentry/webpack-plugin": "^3.1.2",
         "@stripe/react-stripe-js": "^5.4.1",
         "@stripe/stripe-js": "^8.5.3",
         "@testing-library/jest-dom": "5.17.0",
-        "@testing-library/react": "12.1.5",
+        "@testing-library/react": "^14.0.0",
         "@testing-library/user-event": "14.5.2",
         "awesome-bootstrap-checkbox": "^1.0.1",
         "babel-cli": "^6.26.0",
@@ -72,16 +72,15 @@
         "mini-css-extract-plugin": "^2.6.0",
         "moment": "^2.22.2",
         "moment-timezone": "^0.5.21",
-        "node-sass": "^7.0.1",
         "path": "^0.12.7",
         "postcss-loader": "^6.2.1",
-        "react": "^17.0.0",
+        "react": "^18.0.0",
         "react-beautiful-dnd": "^13.1.1",
         "react-bootstrap": "^0.31.5",
         "react-datetime": "^2.16.2",
         "react-dnd": "^16.0.0",
         "react-dnd-html5-backend": "^16.0.0",
-        "react-dom": "^17.0.0",
+        "react-dom": "^18.0.0",
         "react-dropzone": "^4.2.9",
         "react-final-form": "^6.5.9",
         "react-google-maps": "^9.4.5",
@@ -95,7 +94,8 @@
         "redux-persist": "^5.10.0",
         "redux-thunk": "^2.3.0",
         "regenerator-runtime": "^0.13.11",
-        "sass-loader": "^12.6.0",
+        "sass": "^1.77.0",
+        "sass-loader": "^14.0.0",
         "spark-md5": "^3.0.2",
         "style-loader": "^3.3.1",
         "superagent": "8.0.9",
@@ -115,11 +115,11 @@
         "cheerio": "1.0.0-rc.10"
     },
     "peerDependencies": {
-        "@emotion/react": "^11.11.4",
-        "@emotion/styled": "^11.11.5",
-        "@mui/icons-material": "^6.4.3",
-        "@mui/material": "^6.4.3",
-        "@mui/x-date-pickers": "^7.26.0",
+        "@emotion/react": "^11.0.0",
+        "@emotion/styled": "^11.0.0",
+        "@mui/icons-material": "^9.0.0",
+        "@mui/material": "^9.0.0",
+        "@mui/x-date-pickers": "^9.0.0",
         "@react-pdf/renderer": "^3.1.11",
         "@sentry/react": "^8.54.0",
         "@stripe/react-stripe-js": "^5.4.1",
@@ -142,13 +142,13 @@
         "moment": "^2.22.2",
         "moment-timezone": "^0.5.21",
         "prop-types": "^15.8.1",
-        "react": "^17.0.0",
+        "react": "^18.0.0 || ^19.0.0",
         "react-beautiful-dnd": "^13.1.1",
         "react-bootstrap": "^0.31.5",
         "react-datetime": "^2.16.2",
         "react-dnd": "^16.0.0",
         "react-dnd-html5-backend": "^16.0.0",
-        "react-dom": "^17.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0",
         "react-dropzone": "^4.2.9",
         "react-final-form": "^6.5.9",
         "react-google-maps": "^9.4.5",

src/components/inputs/company-input-v2.js

@@ -161,7 +161,10 @@ const CompanyInputV2 = ({ summitId, isRequired, sx, onChange, id, name, label, v
           helperText={helperText}
           error={error}
           margin="normal"
-          InputLabelProps={disableShrink ? { shrink: false } : undefined}
+          slotProps={{
+            ...params.slotProps,
+            inputLabel: disableShrink ? { shrink: false } : undefined
+          }}
         />
       )}
       renderOption={(props, option) => {

src/components/inputs/upload-input-v3/index.js

@@ -23,7 +23,7 @@ import {
 import UploadFileIcon from "@mui/icons-material/UploadFile";
 import DeleteIcon from "@mui/icons-material/Delete";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
-import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+import ErrorOutlineIcon from "@mui/icons-material/ErrorOutlined";
 import CloseIcon from "@mui/icons-material/Close";
 import { DropzoneV3 } from './dropzone-v3';
 import ProgressiveImg from '../../progressive-img';

src/components/mui/FormItemTable/__tests__/FormItemTable.test.js

@@ -218,7 +218,7 @@ jest.mock("../../formik-inputs/mui-formik-datepicker", () => ({
 
 jest.mock("../../formik-inputs/mui-formik-select", () => ({
   __esModule: true,
-  default: ({ name, label, options, children }) => (
+  default: ({ name, label, options }) => (
     <select data-testid={`select-${name}`} name={name}>
       <option value="">{label}</option>
       {options &&
@@ -227,7 +227,6 @@ jest.mock("../../formik-inputs/mui-formik-select", () => ({
             {opt.label}
           </option>
         ))}
-      {children}
     </select>
   )
 }));
@@ -267,10 +266,10 @@ jest.mock("../../formik-inputs/mui-formik-dropdown-checkbox", () => ({
       {options &&
         options.map((opt) => (
           // eslint-disable-next-line jsx-a11y/label-has-associated-control
-          <label key={opt.value}>
+          (<label key={opt.value}>
             <input type="checkbox" value={opt.value} />
             {opt.label}
-          </label>
+          </label>)
         ))}
     </div>
   )
@@ -284,10 +283,10 @@ jest.mock("../../formik-inputs/mui-formik-dropdown-radio", () => ({
       {options &&
         options.map((opt) => (
           // eslint-disable-next-line jsx-a11y/label-has-associated-control
-          <label key={opt.value}>
+          (<label key={opt.value}>
             <input type="radio" name={name} value={opt.value} />
             {opt.label}
-          </label>
+          </label>)
         ))}
     </div>
   )

src/components/mui/FormItemTable/index.js

@@ -181,7 +181,7 @@ const FormItemTable = ({
                   label=""
                   size="small"
                   inCents
-                  inputProps={{ step: 0.01 }}
+                  slotProps={{ htmlInput: { step: 0.01 } }}
                 />
               </TableCell>
               <TableCell

src/components/mui/GridFilter/components/Filter.jsx

@@ -13,7 +13,7 @@
 
 import React, { useEffect } from "react";
 import T from "i18n-react/dist/i18n-react";
-import { Box, Grid2, IconButton } from "@mui/material";
+import { Box, Grid, IconButton } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import AddIcon from "@mui/icons-material/Add";
 import PropTypes from "prop-types";
@@ -80,8 +80,8 @@ const Filter = ({ id, value, criterias, onChange, onAdd, onDelete }) => {
   };
 
   return (
-    <Grid2 container spacing={2} sx={{ alignItems: "center", mb: 2 }}>
-      <Grid2 size={11}>
+    <Grid container spacing={2} sx={{ alignItems: "center", mb: 2 }}>
+      <Grid size={11}>
         <Box sx={{ display: "flex", alignItems: "center", gap: "14px" }}>
           <Dropdown
             id={`${id}-column`}
@@ -110,8 +110,8 @@ const Filter = ({ id, value, criterias, onChange, onAdd, onDelete }) => {
             onChange={handleChangeValue}
           />
         </Box>
-      </Grid2>
-      <Grid2 size={1}>
+      </Grid>
+      <Grid size={1}>
         {value?.id !== "new" ? (
           <IconButton
             aria-label="delete-filter"
@@ -131,8 +131,8 @@ const Filter = ({ id, value, criterias, onChange, onAdd, onDelete }) => {
             <AddIcon fontSize="large" />
           </RoundButton>
         )}
-      </Grid2>
-    </Grid2>
+      </Grid>
+    </Grid>
   );
 };
 

src/components/mui/__tests__/additional-input-list.test.js

@@ -25,13 +25,15 @@ jest.mock("../showConfirmDialog", () => jest.fn());
 jest.mock(
   "../formik-inputs/additional-input/additional-input",
   () =>
-    function MockAdditionalInput({
-      item,
-      itemIdx,
-      onAdd,
-      onDelete,
-      isAddDisabled
-    }) {
+    (function MockAdditionalInput(
+      {
+        item,
+        itemIdx,
+        onAdd,
+        onDelete,
+        isAddDisabled
+      }
+    ) {
       return (
         <div data-testid={`additional-input-${itemIdx}`}>
           <span data-testid={`item-name-${itemIdx}`}>{item.name}</span>
@@ -51,7 +53,7 @@ jest.mock(
           </button>
         </div>
       );
-    }
+    })
 );
 
 // Helper function to render the component with Formik

src/components/mui/__tests__/additional-input.test.js

@@ -22,9 +22,9 @@ import AdditionalInput from "../formik-inputs/additional-input/additional-input"
 jest.mock(
   "../formik-inputs/additional-input/meta-field-values",
   () =>
-    function MockMetaFieldValues() {
+    (function MockMetaFieldValues() {
       return <div data-testid="meta-field-values">MetaFieldValues</div>;
-    }
+    })
 );
 
 // Helper function to render the component with Formik

src/components/mui/__tests__/meta-field-values.test.js

@@ -25,7 +25,7 @@ jest.mock("../showConfirmDialog", () => jest.fn());
 jest.mock(
   "../dnd-list",
   () =>
-    function MockDragAndDropList({ items, renderItem }) {
+    (function MockDragAndDropList({ items, renderItem }) {
       return (
         <div data-testid="dnd-list">
           {items.map((item, index) => (
@@ -35,7 +35,7 @@ jest.mock(
           ))}
         </div>
       );
-    }
+    })
 );
 
 // Helper function to render the component with Formik

src/components/mui/__tests__/mui-formik-datepicker.test.js

@@ -42,7 +42,7 @@ describe("MuiFormikDatepicker", () => {
   test("shows required marker in label", () => {
     renderWithFormik({ required: true });
 
-    expect(screen.getByLabelText("Test Date *")).toBeInTheDocument();
+    expect(screen.getByRole("group", { name: "Test Date *" })).toBeInTheDocument();
   });
 
   test("shows validation error on submit without value", async () => {
@@ -62,16 +62,14 @@ describe("MuiFormikDatepicker", () => {
     const user = userEvent.setup();
     renderWithFormik({ required: true });
 
-    await user.click(screen.getByLabelText("Test Date *"));
     await user.click(screen.getByRole("button", { name: "Choose date" }));
 
     const today = await screen.findByRole("gridcell", {
       name: String(new Date().getDate())
     });
     await user.click(today);
 
-    const input = screen.getByLabelText("Test Date *");
-    expect(input).not.toHaveValue("");
-    expect(input).not.toHaveValue("MM/DD/YYYY");
+    const monthSpinbutton = screen.getByRole("spinbutton", { name: "Month" });
+    expect(monthSpinbutton).not.toHaveTextContent("MM");
   });
 });

src/components/mui/__tests__/mui-formik-summit-addon-select.test.js

@@ -15,12 +15,13 @@ jest.mock("../summit-addon-select", () => {
   const React = require("react");
   return {
     __esModule: true,
-    default: ({ value, placeholder, inputProps }) => (
+    default: ({ value, placeholder, error, helperText }) => (
       <div
         data-testid="summit-addon-select"
         data-value={value}
         data-placeholder={placeholder}
-        data-error={inputProps?.error ? "true" : "false"}
+        data-error={error ? "true" : "false"}
+        data-helper-text={helperText}
       >
         {placeholder}
       </div>

src/components/mui/__tests__/mui-formik-switch.test.js

@@ -33,24 +33,24 @@ describe("MuiFormikSwitch", () => {
     expect(screen.getByText("Enable Feature")).toBeInTheDocument();
   });
 
-  test("renders a switch (checkbox role)", () => {
+  test("renders a switch (switch role)", () => {
     renderWithFormik({});
-    expect(screen.getByRole("checkbox")).toBeInTheDocument();
+    expect(screen.getByRole("switch")).toBeInTheDocument();
   });
 
   test("is off when initial value is false", () => {
     renderWithFormik({});
-    expect(screen.getByRole("checkbox")).not.toBeChecked();
+    expect(screen.getByRole("switch")).not.toBeChecked();
   });
 
   test("is on when initial value is true", () => {
     renderWithFormik({}, { enabled: true });
-    expect(screen.getByRole("checkbox")).toBeChecked();
+    expect(screen.getByRole("switch")).toBeChecked();
   });
 
   test("toggles on click", async () => {
     renderWithFormik({});
-    const toggle = screen.getByRole("checkbox");
+    const toggle = screen.getByRole("switch");
     await userEvent.click(toggle);
     expect(toggle).toBeChecked();
   });

src/components/mui/cards/InlineCard/index.js

@@ -35,15 +35,15 @@ const InlineCard = ({ title, rows }) => (
       <List sx={{ display: "flex", marginTop: "20px" }}>
         {(rows ?? []).map((row, i) => (
           // eslint-disable-next-line react/no-array-index-key
-          <React.Fragment key={`row-${row.label}-${i}`}>
+          (<React.Fragment key={`row-${row.label}-${i}`}>
             <ListItem
               sx={{ display: "flex", flexDirection: "column", height: 50 }}
             >
               <Heading>{row.label}</Heading>
               <Value>{row.value}</Value>
             </ListItem>
             {i < rows.length - 1 && <Divider orientation="vertical" flexItem />}
-          </React.Fragment>
+          </React.Fragment>)
         ))}
       </List>
     </CardContent>