@mui/system 9.0.0-beta.0 → 9.0.0

package/CHANGELOG.md

@@ -1,5 +1,81 @@
 # [Versions](https://mui.com/versions/)
 
+## 9.0.0
+
+<!-- generated comparing v9.0.0-beta.1..master -->
+
+_Apr 7, 2026_
+
+A big thanks to the 7 contributors who made this release possible.
+
+🥳 We're excited to announce the stable release of Material UI v9! This major release focus on accessibility improvements, sx prop performance, and cleanup of deprecated APIs.
+
+For more details, check out the [upgrade guide](https://mui.com/material-ui/migration/upgrade-to-v9/).
+
+### `@mui/material@9.0.0`
+
+- [slider] Use pointer events instead of mouse events (#48164) @mj12albert
+- [switch] Add border to make it visible in high contrast mode (#48180) @silviuaavram
+- [transitions] Performance improvements & misc fixes (#48151) @mj12albert
+- Remove unnecessary overridesResolvers from styled components (#48204) @sai6855
+
+### Core
+
+- [code-infra] Setup workflow to publish internal packages (#47952) @brijeshb42
+- [core-docs] Add `x-scheduler` to `MuiProductId` type (#48185) @rita-codes
+- [docs-infra] Add scheduler to product switcher (#48208) @rita-codes
+- [internal] Prepare libraries for v9 stable release (#48206) @siriwatknp
+
+All contributors of this release in alphabetical order: @brijeshb42, @mj12albert, @noraleonte, @rita-codes, @sai6855, @silviuaavram, @siriwatknp
+
+## 9.0.0-beta.1
+
+<!-- generated comparing v9.0.0-beta.0..master -->
+
+_Apr 2, 2026_
+
+A big thanks to the 11 contributors who made this release possible.
+
+### `@mui/material@9.0.0-beta.1`
+
+#### Breaking Changes
+
+- [grid] Remove 'column' and 'column-reverse' options from `direction` prop (#47564) @sai6855
+- [icons] Remove legacy `*Outline` icons (#48116) @mj12albert
+- [list-item-icon] Use theme spacing instead of hardcoded minWidth (#46597) @adiitxa
+
+#### Changes
+
+- [all components] Fix `slotProps.transition` types (#48153) @mj12albert
+- [alert][dialog] Accessibility improvements (#48113) @silviuaavram
+- [autocomplete] Fix helper text focusing input when clicked (#48156) @mj12albert
+- [button-base] Add `nativeButton` prop (#47989) @mj12albert
+- [input] Fix high contrast cutoff on first character (#48150) @silviuaavram
+- [menu] Fix empty roving focus container (#48114) @mj12albert
+- [utils] Explicitly register roving tab items with parent (#48122) @mj12albert
+
+### Docs
+
+- Fix HTML validation errors (#48107) @Janpot
+- Fix duplicate IDs and HTML validation issues (#48095) @Janpot
+- Fix the dark mode footer row shadow for the Data Grid on the advanced components page (#48149) @arminmeh
+- Improve jsdom section (#48098) @oliviertassinari
+- Update "Deprecated APIs removed" section to h2 in "Upgrade to v9" docs (#48115) @ZeeshanTamboli
+- [docs][progress] Label all demo components (#48143) @mj12albert
+- [docs-infra] Add x-scheduler to component API URL resolver (#48097) @rita-codes
+- [docs-infra] Resolve some redirects (#48165) @Janpot
+- [docs-infra] Update v9 Search Index (#48028) @dav-is
+
+### Core
+
+- [code-infra] Discover exports for bundle size report (#48170) @Janpot
+- [internal] Fix use of ellipsis (#48096) @oliviertassinari
+- [test] Add screenshot test for Virtualized Table (#47947) @mnajdova
+- [test] Remove `componentsProp` from `describeConformance` tests (#48142) @ZeeshanTamboli
+- [theme] Do not create channel tokens for custom colors when `nativeColor` is used (#47765) @ZeeshanTamboli
+
+All contributors of this release in alphabetical order: @adiitxa, @arminmeh, @dav-is, @Janpot, @mj12albert, @mnajdova, @oliviertassinari, @rita-codes, @sai6855, @silviuaavram, @ZeeshanTamboli
+
 ## 9.0.0-beta.0
 
 <!-- generated comparing v9.0.0-alpha.4..master -->

package/Grid/Grid.js

@@ -45,11 +45,16 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes /* remove-proptypes */ =
    */
   container: _propTypes.default.bool,
   /**
-   * Defines the `flex-direction` style property.
-   * It is applied for all screen sizes.
+   * Defines the `flex-direction` style property for the container.
+   *
+   * ⚠️ Only `row` and `row-reverse` are supported. `column` and `column-reverse` are not supported,
+   * because the Grid component is designed to subdivide layouts into **columns**, not rows.
+   *
+   * For vertical layouts, use `Stack` instead.
+   *
    * @default 'row'
    */
-  direction: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), _propTypes.default.arrayOf(_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), _propTypes.default.object]),
+  direction: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['row-reverse', 'row']), _propTypes.default.arrayOf(_propTypes.default.oneOf(['row-reverse', 'row'])), _propTypes.default.object]),
   /**
    * Defines the offset value for the type `item` components.
    */

package/Grid/Grid.mjs

@@ -39,11 +39,16 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes /* remove-proptypes */ =
    */
   container: PropTypes.bool,
   /**
-   * Defines the `flex-direction` style property.
-   * It is applied for all screen sizes.
+   * Defines the `flex-direction` style property for the container.
+   *
+   * ⚠️ Only `row` and `row-reverse` are supported. `column` and `column-reverse` are not supported,
+   * because the Grid component is designed to subdivide layouts into **columns**, not rows.
+   *
+   * For vertical layouts, use `Stack` instead.
+   *
    * @default 'row'
    */
-  direction: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+  direction: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['row-reverse', 'row'])), PropTypes.object]),
   /**
    * Defines the offset value for the type `item` components.
    */

package/Grid/GridProps.d.mts

@@ -3,7 +3,7 @@ import { OverrideProps, PartiallyRequired } from '@mui/types';
 import { SxProps } from "../styleFunctionSx/index.mjs";
 import { Theme, Breakpoint } from "../createTheme/index.mjs";
 type ResponsiveStyleValue<T> = T | Array<T | null> | { [key in Breakpoint]?: T | null };
-export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+export type GridDirection = 'row' | 'row-reverse';
 export type GridSpacing = number | string;
 export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type GridSize = 'auto' | 'grow' | number | false;
@@ -30,8 +30,13 @@ export interface GridBaseProps {
    */
   container?: boolean | undefined;
   /**
-   * Defines the `flex-direction` style property.
-   * It is applied for all screen sizes.
+   * Defines the `flex-direction` style property for the container.
+   *
+   * ⚠️ Only `row` and `row-reverse` are supported. `column` and `column-reverse` are not supported,
+   * because the Grid component is designed to subdivide layouts into **columns**, not rows.
+   *
+   * For vertical layouts, use `Stack` instead.
+   *
    * @default 'row'
    */
   direction?: ResponsiveStyleValue<GridDirection> | undefined;

package/Grid/GridProps.d.ts

@@ -3,7 +3,7 @@ import { OverrideProps, PartiallyRequired } from '@mui/types';
 import { SxProps } from "../styleFunctionSx/index.js";
 import { Theme, Breakpoint } from "../createTheme/index.js";
 type ResponsiveStyleValue<T> = T | Array<T | null> | { [key in Breakpoint]?: T | null };
-export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+export type GridDirection = 'row' | 'row-reverse';
 export type GridSpacing = number | string;
 export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type GridSize = 'auto' | 'grow' | number | false;
@@ -30,8 +30,13 @@ export interface GridBaseProps {
    */
   container?: boolean | undefined;
   /**
-   * Defines the `flex-direction` style property.
-   * It is applied for all screen sizes.
+   * Defines the `flex-direction` style property for the container.
+   *
+   * ⚠️ Only `row` and `row-reverse` are supported. `column` and `column-reverse` are not supported,
+   * because the Grid component is designed to subdivide layouts into **columns**, not rows.
+   *
+   * For vertical layouts, use `Stack` instead.
+   *
    * @default 'row'
    */
   direction?: ResponsiveStyleValue<GridDirection> | undefined;

package/README.md

@@ -9,11 +9,11 @@ Install the package in your project directory with:
 <!-- #npm-tag-reference -->
 
 ```bash
-npm install @mui/system@next @emotion/react @emotion/styled
+npm install @mui/system @emotion/react @emotion/styled
 ```
 
 ## Documentation
 
 <!-- #host-reference -->
 
-Visit [https://next.mui.com/system/getting-started/](https://next.mui.com/system/getting-started/) to view the full documentation.
+Visit [https://mui.com/system/getting-started/](https://mui.com/system/getting-started/) to view the full documentation.

package/createBreakpoints/createBreakpoints.d.mts

@@ -26,13 +26,13 @@ export interface Breakpoints {
   /**
    * @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
    * @returns A media query string ready to be used with most styling solutions, which matches screen widths greater than the screen size given by the breakpoint key (inclusive).
-   * @see [API documentation](https://next.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-up-key-media-query)
+   * @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-up-key-media-query)
    */
   up: (key: Breakpoint | number) => string;
   /**
    * @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
    * @returns A media query string ready to be used with most styling solutions, which matches screen widths less than the screen size given by the breakpoint key (exclusive).
-   * @see [API documentation](https://next.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-down-key-media-query)
+   * @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-down-key-media-query)
    */
   down: (key: Breakpoint | number) => string;
   /**
@@ -40,14 +40,14 @@ export interface Breakpoints {
    * @param end - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
    * @returns A media query string ready to be used with most styling solutions, which matches screen widths greater than
    *          the screen size given by the breakpoint key in the first argument (inclusive) and less than the screen size given by the breakpoint key in the second argument (exclusive).
-   * @see [API documentation](https://next.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-between-start-end-media-query)
+   * @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-between-start-end-media-query)
    */
   between: (start: Breakpoint | number, end: Breakpoint | number) => string;
   /**
    * @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
    * @returns A media query string ready to be used with most styling solutions, which matches screen widths starting from
    *          the screen size given by the breakpoint key (inclusive) and stopping at the screen size given by the next breakpoint key (exclusive).
-   * @see [API documentation](https://next.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-only-key-media-query)
+   * @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-only-key-media-query)
    */
   only: (key: Breakpoint) => string;
   /**

package/createBreakpoints/createBreakpoints.d.ts

@@ -26,13 +26,13 @@ export interface Breakpoints {
   /**
    * @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
    * @returns A media query string ready to be used with most styling solutions, which matches screen widths greater than the screen size given by the breakpoint key (inclusive).
-   * @see [API documentation](https://next.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-up-key-media-query)
+   * @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-up-key-media-query)
    */
   up: (key: Breakpoint | number) => string;
   /**
    * @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
    * @returns A media query string ready to be used with most styling solutions, which matches screen widths less than the screen size given by the breakpoint key (exclusive).
-   * @see [API documentation](https://next.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-down-key-media-query)
+   * @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-down-key-media-query)
    */
   down: (key: Breakpoint | number) => string;
   /**
@@ -40,14 +40,14 @@ export interface Breakpoints {
    * @param end - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
    * @returns A media query string ready to be used with most styling solutions, which matches screen widths greater than
    *          the screen size given by the breakpoint key in the first argument (inclusive) and less than the screen size given by the breakpoint key in the second argument (exclusive).
-   * @see [API documentation](https://next.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-between-start-end-media-query)
+   * @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-between-start-end-media-query)
    */
   between: (start: Breakpoint | number, end: Breakpoint | number) => string;
   /**
    * @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
    * @returns A media query string ready to be used with most styling solutions, which matches screen widths starting from
    *          the screen size given by the breakpoint key (inclusive) and stopping at the screen size given by the next breakpoint key (exclusive).
-   * @see [API documentation](https://next.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-only-key-media-query)
+   * @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-only-key-media-query)
    */
   only: (key: Breakpoint) => string;
   /**

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v9.0.0-beta.0
+ * @mui/system v9.0.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/system v9.0.0-beta.0
+ * @mui/system v9.0.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@mui/system",
-  "version": "9.0.0-beta.0",
+  "version": "9.0.0",
   "author": "MUI Team",
   "description": "MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.",
+  "license": "MIT",
   "keywords": [
     "react",
     "react-component",
@@ -14,7 +15,6 @@
     "url": "git+https://github.com/mui/material-ui.git",
     "directory": "packages/mui-system"
   },
-  "license": "MIT",
   "bugs": {
     "url": "https://github.com/mui/material-ui/issues"
   },
@@ -28,10 +28,10 @@
     "clsx": "^2.1.1",
     "csstype": "^3.2.3",
     "prop-types": "^15.8.1",
-    "@mui/private-theming": "9.0.0-beta.0",
-    "@mui/styled-engine": "9.0.0-beta.0",
-    "@mui/types": "^9.0.0-beta.0",
-    "@mui/utils": "9.0.0-beta.0"
+    "@mui/private-theming": "^9.0.0",
+    "@mui/styled-engine": "^9.0.0",
+    "@mui/utils": "^9.0.0",
+    "@mui/types": "^9.0.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

package/version/index.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.version = exports.prerelease = exports.patch = exports.minor = exports.major = exports.default = void 0;
-const version = exports.version = "9.0.0-beta.0";
+const version = exports.version = "9.0.0";
 const major = exports.major = Number("9");
 const minor = exports.minor = Number("0");
 const patch = exports.patch = Number("0");
-const prerelease = exports.prerelease = "beta.0";
+const prerelease = exports.prerelease = undefined;
 var _default = exports.default = version;

package/version/index.mjs

@@ -1,6 +1,6 @@
-export const version = "9.0.0-beta.0";
+export const version = "9.0.0";
 export const major = Number("9");
 export const minor = Number("0");
 export const patch = Number("0");
-export const prerelease = "beta.0";
+export const prerelease = undefined;
 export default version;