Material UI v9

Material UI v9.0 がリリースされた。アクセシビリティの既定値やキーボードナビゲーションを前面に出しつつ、Base UI を組み合わせたレシピとして NumberField と Menubar が新たに用意されている。個々の変更は GitHub の Material UI releases で時系列に追える。

https://mui.com/blog/introducing-material-ui-v9/

NumberField は数値入力用のコントロールで、Material Design に沿った見た目に整えた構成要素として提供される。利用には Base UI パッケージの導入が前提になる。

https://mui.com/material-ui/react-number-field/

npm install @base-ui/react

Menubar は横並びのメニューバー向けで、サブメニューを含む階層メニューとキーボード操作を想定した設計になっている。

https://mui.com/material-ui/react-menubar/

テーマまわりでは、既定テーマの CSS 変数を基に color-mix() で色を派生させる拡張が入り、オーバーレイやサーフェス色の制御を変数側に寄せやすくなった。Tooltip のドキュメント整理や、CSS 変数と nativeColor を併用したときの境界色の扱いも調整されている。

コンポーネント挙動では、Backdrop の既定から aria-hidden を外して支援技術から隠しすぎないようにしたほか、Autocomplete で右クリック時に候補リストが開かないようにするなど、小さな挙動修正がまとまっている。Stepper・Tabs・MenuList ではロービング tabindex を改善した。

プラットフォーム面では sx を多用するケースで最大約 30% の性能向上を狙った変更が入り、バンドル縮小も進められている。リポジトリから Joy UI のコードとドキュメントが削除された。破壊的変更には非推奨だった component や componentsProps の削除、レイアウト系から非推奨システム props の削除、Tabs と Menu のアクセシビリティ強化、Dialog と Modal から disableEscapeKeyDown の削除などが含まれ、v7 と比べてバンドルサイズは約 3% 縮小した。v7 からの移行手順は専用ガイドにまとまっている。

https://mui.com/material-ui/migration/upgrade-to-v9/