Feat/mui9

[steps371]

Summary

Rebuilds the bindings for MUI 9 and MUI X 9 on React 18 or 19, and releases all three packages as 0.1.0. It's 0.1.0 rather than 1.0.0 while the API meets its first real forms.

What changed

• Toolchain: React 19, MUI 9, MUI X 9, Vite 8 and ESLint 10. The packages are ESM only, and the tarballs ship dist only.
• Peers: react ^18.0.0 || ^19.0.0, react-hook-form >=7.62.0 <8 and @mui/material ^9.0.0, plus MUI X 9 for the pickers.
• Every component is rebuilt on a shared field controller:
  • Only React Hook Form's props go to useController.
  • disabled reaches React Hook Form.
  • A rule without a message falls back to FormErrorMessagesProvider.
• Your handlers are handleChange and handleBlur, on every component. MUI's own onChange and onBlur are no longer accepted.
  • handleChange runs after the form stores a change, and takes the MUI component's onChange arguments. The option groups pass the typed option value, and NumberField passes Base UI's (value, eventDetails).
  • handleBlur runs after the form's blur handler marks the field touched.
  • With suppressFormChange, the form stores nothing. handleChange stores the changes it keeps with setValue, so it can refuse one.
• Option-driven Select, RadioGroup, CheckboxGroup and ToggleButtonGroup, with typed values.
• Autocomplete and AsyncAutocomplete:
  • They store the selected option by default, as MUI does.
  • getOptionValue stores something else instead, such as the id.
  • Options follow MUI's conventions: strings and numbers need neither getOptionKey nor getOptionLabel, and an object's label defaults to its label.
  • Object options need getOptionKey, which can return a string or a number. Stored options are matched by it, not by reference.
  • The form field's type decides whether getOptionValue is needed, and the option type whether getOptionKey and getOptionLabel are.
• New components:
  • NumberField (Base UI).
  • AsyncAutocomplete: server-backed options, a label cache and a load-more footer.
  • DateField, TimeField and DateTimeField.
  • Pro: DateTimeRangePicker and SingleInputDateRangeField.
• Pickers:
  • They no longer use MUI X internals.
  • An error appears on the change that causes it.
  • messages sets the error text per field, and every picker takes a transform.
  • The DateRangePicker recursion is fixed.
• Helper line: an empty helper line keeps its space, as helperText=' ' did, so an error appearing doesn't move the form.
  • reserveHelperText turns this off for a field, and HelperTextProvider for a form or section.
  • The picker packages now take the core package as a peer, so the provider reaches them too.
• Storybook:
  • Every story has Controls: the form (mode, reserved line, disabled), the field (label, helper text, disabled, required message) and the component's own props.
  • Every component has a Docs page.
  • The pickers have fuller stories, Autocomplete has stories for plain strings and for objects with a label, and a "Book a trip" example uses every field.
• Releases: npm run release:version (Lerna) bumps the versions in a PR. Publishing a GitHub release runs release.yaml:
  • It publishes each new version, in dependency order, through npm trusted publishing.
  • It tags each one <package>@<version>.
  • This is the same approach as relay-network.
• CI: one check workflow on Node 24 and 26 replaces the five per-package ones. A second job runs the packages' typecheck and tests on React 18.

See CHANGELOG.md for every breaking change since 0.0.x, and MIGRATION.md for how to update, with before
and after code.

Before the first release

@cliedeman: trusted publishing needs a trusted publisher on each package on npmjs.com, set to organisation stackworx, repository react-hook-form-mui and workflow release.yaml. The packages are:

• @stackworx/react-hook-form-mui
• @stackworx/react-hook-form-mui-x-date-pickers
• @stackworx/react-hook-form-mui-x-date-pickers-pro

Once that's done, publishing a GitHub release from main publishes 0.1.0.

Reviewing

Each commit is one idea and passes npm run check on its own, so it reads well commit by commit.

Testing

• npm run check: dprint, ESLint, TypeScript, 127 Vitest tests and the library builds.
• The packages' typecheck and tests also pass on React 18.3.
• The Storybook build passes. The stories were checked in a browser before the last three commits.

Follow-ups

• The pickers should read FormErrorMessagesProvider too. Today they only use their own messages.
• required on the range pickers never fires, because an empty range is [null, null]. We need to decide whether it should mean both dates.
• With suppressFormChange, a date field keeps typed text the form refused, because MUI X keeps its own text for each part of the date. NumberField shows it until the field loses focus.
• With suppressFormChange, a picker's own error, such as minDate, only appears once the field is touched or the form is submitted.
• suppressFormBlur, if a form ever needs to skip the form's blur handler.

🤖 Generated with Claude Code

[netlify]

✅ Deploy Preview for aquamarine-choux-75c766 ready!

Name	Link
🔨 Latest commit	4cf400e
🔍 Latest deploy log	https://app.netlify.com/projects/aquamarine-choux-75c766/deploys/6abbca1b6a80d93916854804
😎 Deploy Preview	https://deploy-preview-9--aquamarine-choux-75c766.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.