Feature: upgrade mui v9

package.json

@@ -1,6 +1,6 @@
 {
     "name": "openstack-uicore-foundation",
-    "version": "5.0.22",
+    "version": "6.0.0-beta.1",
     "description": "ui reactjs components for openstack marketing site",
     "main": "lib/openstack-uicore-foundation.js",
     "scripts": {
@@ -20,18 +20,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,13 +72,13 @@
         "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",
@@ -112,11 +112,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",
@@ -139,13 +139,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

@@ -136,7 +136,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

@@ -22,7 +22,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 './index.less';

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/__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-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>

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

@@ -36,23 +36,23 @@ const TableCard = ({ title, rows = [], columns = [] }) => (
         <ListItem sx={{ display: "flex", height: 50, gap: 2 }}>
           {columns.map((col, i) => (
             // eslint-disable-next-line react/no-array-index-key
-            <Heading key={`col-${col.key}-${i}`}>{col.label}</Heading>
+            (<Heading key={`col-${col.key}-${i}`}>{col.label}</Heading>)
           ))}
         </ListItem>
         <Divider component="li" role="presentation" />
         {rows.map((row, i) => (
           // eslint-disable-next-line react/no-array-index-key
-          <React.Fragment key={`row-${i}`}>
+          (<React.Fragment key={`row-${i}`}>
             <ListItem sx={{ display: "flex", minHeight: 60, gap: 2 }}>
               {columns.map((col, j) => (
                 // eslint-disable-next-line react/no-array-index-key
-                <Value key={`col-val-${col.key}-${j}`}>{row[col.key]}</Value>
+                (<Value key={`col-val-${col.key}-${j}`}>{row[col.key]}</Value>)
               ))}
             </ListItem>
             {i < rows.length - 1 && (
               <Divider component="li" role="presentation" />
             )}
-          </React.Fragment>
+          </React.Fragment>)
         ))}
       </List>
     </CardContent>