Skip to content

Feature: upgrade mui v9#249

Open
santipalenque wants to merge 9 commits into
mainfrom
feature/upgrade-mui-v9
Open

Feature: upgrade mui v9#249
santipalenque wants to merge 9 commits into
mainfrom
feature/upgrade-mui-v9

Conversation

@santipalenque
Copy link
Copy Markdown
Contributor

@santipalenque santipalenque commented May 21, 2026

https://app.clickup.com/t/86ba1zv3c

Summary by CodeRabbit

  • New Features

    • Expanded React peer dependency support to include React 19
  • Chores

    • Bumped version to 6.0.0-beta.1
    • Upgraded Material-UI components to v9.0.0
    • Updated testing libraries and development dependencies for React 18 compatibility
    • Refactored component layouts and styling configurations for latest Material-UI standards

Review Change Stack

santipalenque and others added 9 commits May 21, 2026 13:12
- @mui/material: ^6.4.3 → ^9.0.0
- @mui/icons-material: ^6.4.3 → ^9.0.0
- @mui/x-date-pickers: ^7.26.0 → ^9.0.0 (v9 targets MUI v9)
- @emotion/react: ^11.11.4 → ^11.14.0
- @emotion/styled: ^11.11.5 → ^11.14.0
- react / react-dom: ^17.0.0 → ^18.0.0 (MUI v9 dropped React 17)
- @testing-library/react: 12.1.5 → ^14.0.0 (RTL 12 supports React 17 only)

peerDependencies updated to match:
- react / react-dom: ^18.0.0 || ^19.0.0
- @emotion/*: ^11.0.0 (broader range for consumers)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Grid2 → Grid in item-price-tiers, additional-input, meta-field-values
- InputProps → slotProps.input in meta-field-values (TextField endAdornment)
- inputProps → slotProps.htmlInput in mui-formik-pricefield, mui-formik-quantity-field, item-price-tiers (Checkbox)
- Autocomplete renderInput: params.InputProps → params.slotProps in company-input-mui, sponsorship-input-mui, mui-sponsor-input
- MuiFormikTextField: deep-merge external slotProps.htmlInput with internal maxLength
- MenuListProps → slotProps.list in menu-button
- ErrorOutline → ErrorOutlined in upload-input-v3

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- MuiFormikSwitch: getByRole("checkbox") → getByRole("switch") (MUI v9 uses role=switch)
- MuiFormikDatepicker: getByLabelText → getByRole("group")/getByRole("spinbutton")
  (x-date-pickers v9 renders spinbutton sections, not a plain input)
- FormItemTable: drop MUI MenuItem children from select mock (MenuItem now requires
  MenuListContext; rendering it inside native <select> crashes in v9)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Skips 5.x series to signal breaking peer-dep change (@mui/material ^9.0.0,
react ^18||^19). Consumers must upgrade MUI and React before installing this version.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 21, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: b3453573-632e-4bc9-b3a7-1aa3ebf59ec4

📥 Commits

Reviewing files that changed from the base of the PR and between 1ea9d93 and 54e6f6e.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (28)
  • package.json
  • src/components/inputs/company-input-v2.js
  • src/components/inputs/upload-input-v3/index.js
  • src/components/mui/FormItemTable/__tests__/FormItemTable.test.js
  • src/components/mui/__tests__/additional-input-list.test.js
  • src/components/mui/__tests__/additional-input.test.js
  • src/components/mui/__tests__/meta-field-values.test.js
  • src/components/mui/__tests__/mui-formik-datepicker.test.js
  • src/components/mui/__tests__/mui-formik-switch.test.js
  • src/components/mui/cards/InlineCard/index.js
  • src/components/mui/cards/TableCard/index.js
  • src/components/mui/formik-inputs/additional-input/additional-input.js
  • src/components/mui/formik-inputs/additional-input/meta-field-values.js
  • src/components/mui/formik-inputs/company-input-mui.js
  • src/components/mui/formik-inputs/item-price-tiers.js
  • src/components/mui/formik-inputs/mui-formik-async-select.js
  • src/components/mui/formik-inputs/mui-formik-pricefield.js
  • src/components/mui/formik-inputs/mui-formik-quantity-field.js
  • src/components/mui/formik-inputs/mui-formik-textfield.js
  • src/components/mui/formik-inputs/mui-sponsor-input.js
  • src/components/mui/formik-inputs/sponsorship-input-mui.js
  • src/components/mui/menu-button.js
  • src/components/mui/table/extra-rows/DiscountRow.jsx
  • src/components/mui/table/extra-rows/FeeRow.jsx
  • src/components/mui/table/extra-rows/PaymentRow.jsx
  • src/components/mui/table/extra-rows/RefundRow.jsx
  • src/components/mui/table/extra-rows/TotalRow.jsx
  • src/utils/methods.js

📝 Walkthrough

Walkthrough

This PR upgrades the library to MUI 9 and React 18 by updating dependencies, refactoring input components to use slot-based props instead of deprecated InputProps/InputLabelProps patterns, migrating Grid2 to Grid layouts, updating menu accessibility wiring, and aligning test assertions with ARIA roles.

Changes

MUI 9 & React 18 Platform Upgrade

Layer / File(s) Summary
Version and dependency updates
package.json
Package version bumped to 6.0.0-beta.1. React peer range expanded to `^18.0.0
Input component slotProps migration
src/components/inputs/company-input-v2.js, src/components/mui/formik-inputs/mui-formik-textfield.js, src/components/mui/formik-inputs/mui-formik-pricefield.js, src/components/mui/formik-inputs/mui-formik-quantity-field.js, src/components/mui/formik-inputs/mui-formik-async-select.js, src/components/mui/formik-inputs/company-input-mui.js, src/components/mui/formik-inputs/mui-sponsor-input.js, src/components/mui/formik-inputs/sponsorship-input-mui.js
Text field end-adornments (loading spinners, icons), label shrinking, and HTML input constraints migrate from InputProps/InputLabelProps to MUI's slotProps pattern. Wrapping components properly merge external slot props while injecting/overriding local configuration.
Grid2 to Grid layout refactoring
src/components/mui/formik-inputs/additional-input/additional-input.js, src/components/mui/formik-inputs/additional-input/meta-field-values.js, src/components/mui/formik-inputs/item-price-tiers.js
Grid layout components replaced with Grid throughout form inputs and tier displays. Container/column JSX structure and size attributes updated to Grid API. Grid2-dependent layout logic removed.
Menu accessibility slot migration
src/components/mui/menu-button.js
MenuListProps replaced with slotProps.list for applying aria-labelledby accessibility attribute to menu list.
Test suite ARIA role and mock updates
src/components/mui/__tests__/mui-formik-switch.test.js, src/components/mui/__tests__/mui-formik-datepicker.test.js, src/components/mui/__tests__/additional-input-list.test.js, src/components/mui/__tests__/additional-input.test.js, src/components/mui/__tests__/meta-field-values.test.js, src/components/mui/FormItemTable/__tests__/FormItemTable.test.js
Component queries switch from text/label lookup to ARIA role-based (getByRole("switch"), getByRole("group")). Jest mocks refactored with parenthesized function expressions and named wrappers for clarity.
JSX and import formatting cleanup
src/components/inputs/upload-input-v3/index.js, src/components/mui/cards/InlineCard/index.js, src/components/mui/cards/TableCard/index.js, src/components/mui/table/extra-rows/*.jsx, src/utils/methods.js
JSX elements wrapped in parentheses within map callbacks for consistency. Import statement reordered. Base64 method formatting adjusted. All changes are cosmetic.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~50 minutes

Possibly related PRs

Suggested reviewers

  • smarcet

Poem

🐰 Hops through slots and grids with glee,
React eighteen blooms on every tree,
MUI nine brings props anew,
No more InputProps—slotProps true,
Grid2 fades as Grid takes flight,
ARIA roles shine clear and bright!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'Feature: upgrade mui v9' directly and clearly describes the main objective of the pull request—upgrading the Material-UI library to version 9. It aligns with the extensive package updates, API migrations, and test adjustments throughout the changeset.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/upgrade-mui-v9

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@santipalenque santipalenque requested a review from smarcet May 21, 2026 17:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant