Skip to content

chore: upgrade MUI, MUI X to v9#12833

Open
seidior wants to merge 1 commit into
mainfrom
mui-upgrades
Open

chore: upgrade MUI, MUI X to v9#12833
seidior wants to merge 1 commit into
mainfrom
mui-upgrades

Conversation

@seidior

@seidior seidior commented Jun 5, 2026

Copy link
Copy Markdown
Member

Description

Step 3 of our never-ending React 19 upgrade: bringing MUI and MUI X up to date.

This upgrades MUI core and MUI X from v5 to v9 using a combination of automatic upgraders and adaptation to the new MUI syntax.

Removes @mui/lab and @mui/styles (both dropped in MUI 9), migrates all inputProps/InputProps usages to the slotProps API, and updates the MUI X Date Picker API. Introduces a custom TabPanel component to replace the removed @mui/lab tab primitives.

Ticket

This pull request partially resolves #16176.

Approach

Upgrades MUI core from 5.18.0 → 9.0.1 and MUI X Date Pickers from 5.0.20 → 9.4.0. Three categories of forced changes:

@mui/lab removalTabContext/TabList/TabPanel from @mui/lab no longer exist in MUI 9. Replaced with a custom TabPanel component (web/src/components/TabPanel.tsx) and MUI Tabs/Tab. Affected: LicenseTask, TwoTabDashboardLayout, ElevatorRegistrationTask, HotelMotelRegistrationTask, MultipleDwellingRegistrationTask, CrtkStatus, Xray, XrayTabZero.

@mui/styles removalmakeStyles/createStyles dropped in MUI 9. Replaced with sx prop and inline style objects. Affected: ArrowTooltip, XrayStatus, CrtkStatus, CheckLicenseStatus, AnytimeActionSearch.

inputProps/InputPropsslotProps migration — deprecated API removed in MUI 9. All TextField usages updated to slotProps={{ htmlInput: {...}, input: {...} }}. Affected: GenericTextField and ~30 component/data-field files.

MUI X Date Picker API migrationinputFormat/InputProps replaced with format/slotProps. handleTextInputChange wired to slotProps.textField.slotProps.htmlInput.onChange to preserve the name attribute on the backing input. Affected: DateOfFormation, FormationDate, EmergencyTripPermitDatePicker, CigaretteSalesStartDate.

muiTheme.ts — removed @mui/styles theme provider setup.

Test harness fixes:

  • web/setupTests.js: added addEventListener/removeEventListener to the matchMedia mock (MUI X 9 calls these during picker initialization).
  • web/cypress/support/commands.jschooseDatePicker: MUI X 9's accessible date picker renders aria-hidden backing inputs; fixed using nativeInputValueSetter pattern to trigger React's synthetic onChange.
  • web/cypress/e2e/deadlinks.spec.ts: hardcoded password replaced with Cypress.env("ADMIN_PASSWORD"); web/cypress.config.js updated to forward process.env.ADMIN_PASSWORD into the Cypress env.
  • web/cypress/support/helpers/helpers.tscompleteTaxClearanceFlow: added guard to detect and dismiss stale "Unlink Tax ID" state from prior test runs.
  • Unit test fixes for SalesInfo.test.tsx, shared-submenu-components.test.tsx, onboarding-foreign.test.tsx to match new MUI 9 DOM/interaction patterns.

Steps to Test

  1. yarn workspace @businessnjgovnavigator/web test — all Jest unit tests should pass.
  2. Start services and dev server (yarn start:dev), then run ./scripts/local-feature-tests.sh.
  3. Manual smoke: onboarding flow, date pickers (DateOfFormation, EmergencyTripPermitDatePicker), tabbed task pages (LicenseTask, ElevatorRegistrationTask, Xray), dropdown fields, navbar menus.

Code author checklist

  • I have rebased this branch from the latest main branch
  • I have performed a self-review of my code
  • My code follows the style guide
  • I have created and/or updated relevant documentation on the engineering documentation website
  • I have not used any relative imports
  • I have pruned any instances of unused code
  • I have not added any markdown to labels, titles and button text in config
  • If I added/updated any values in userData (including profileData, formationData etc), then I added a new migration file
  • I have checked for and removed instances of unused config from CMS
  • If I added any new collections to the CMS config, then I updated the search tool and cmsCollections.ts (see CMS Additions in Engineering Reference/FAQ on the engineering documentation site)
  • I have updated relevant .env values in .env-template, in Bitwarden, and in our workspaces
  • I have added the pr-show or pr-review label on GitHub to show or request reviews

@seidior seidior marked this pull request as ready for review June 26, 2026 19:44
@seidior seidior force-pushed the mui-upgrades branch 2 times, most recently from 2814893 to c10e53c Compare June 26, 2026 20:10
@seidior seidior changed the title chore: upgrade MUI to v9 and MUI X Date Pickers to v9.4.0 chore: upgrade MUI, MUI X to v9 Jun 26, 2026
@seidior seidior added the pr-review Request reviewers for a PR label Jun 26, 2026
@ooi-pull-request-app

Copy link
Copy Markdown

Pickaroo selected and notified reviewers for this PR! 🦘

message_ts:
previously_picked: aadedejifearless somabadri

@ooi-pull-request-app ooi-pull-request-app Bot removed the pr-review Request reviewers for a PR label Jun 26, 2026
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