Material UI 9
Material UI 9.0 がリリースされた。アクセシビリティの既定値、キーボード操作の信頼性、CSS 変数と統合しやすいテーマ基盤が主な焦点である。
NumberField と Menubar
Base UI を組み合わせたレシピとして NumberField と Menubar が追加された。NumberField は数値入力の制御とアクセシビリティ、スタイル用フックを揃えたプリミティブである。Menubar は横型のメニューバーとサブメニューに対応し、キーボード操作を重視したパターンである。
いずれも利用前に @base-ui/react を追加する。
npm install @base-ui/reactAPI とデモは各コンポーネントのドキュメントにまとまっている。
テーマと CSS 変数
テーマの CSS 変数まわりは、既定の Material UI テーマ変数を土台に color-mix() で派生色を生成できるよう拡張された。オーバーレイやサーフェスを、既に color-mix() に依存するデザインシステムへ近づけやすい。
Tooltip の説明は表示テキストのトリガーとして何が想定されるかを明確化し、nativeColor の記述も CSS 変数との併用に沿うよう直された。
操作性・アクセシビリティとキーボード
Autocomplete は右クリックでオプション一覧が開かないようにされ、コンテキストメニューと干渉しにくくなった。Backdrop は既定で aria-hidden を付けず、背後のコンテンツが支援技術から不必要に隠れないようにした。ButtonBase は非ネイティブのボタン要素をクリックしたときに onClick が伝播するよう修正された。
Dialog と Modal から disableEscapeKeyDown が削除された。nativeColor と cssVariables を併用する TableCell の下罫線は、色の混色の前にアルファを適用する。テーマのコンポーネント型から MuiTouchRipple が除かれた。Tooltip は無効化された input にフォーカスがあるとエラーになる問題を修正した。useAutocomplete の型も改善された。
Stepper・Tabs・MenuList では Roving TabIndex を中心にキーボード操作とアクセシビリティが改善された。Autocomplete には root Slot が追加され、clearIndicator と popupIndicator にフル Slot 対応が入った。ウィンドウが再びフォーカスを得たときに openOnFocus 条件下でポップアップが再オープンする問題も修正された。
パフォーマンスとリポジトリ
重複した CSS ルールの整理やバンドルサイズの改善に加え、負荷の高い sx 利用では最大約 30% の性能改善がうたわれている。System 層ではコンテナクエリまわりの正規表現がリファクタされた。リポジトリから Joy UI のコードとドキュメントが取り除かれた。
破壊的変更と移行
主な破壊的変更は、ライブラリ全体で非推奨だった component や componentsProps の削除、レイアウト系コンポーネントから非推奨 system props を削除すること、Tabs と Menu のアクセシビリティ向け変更である。v7 と比べてバンドルサイズは約 3% 縮小し、性能も向上する。
Emotion への依存を減らすこと、性能とアクセシビリティの継続改善、Base UI 由来コンポーネントの追加が今後の方向として挙げられている。