@mui/system 9.0.0-beta.0 → 9.0.0-beta.1

package/CHANGELOG.md

@@ -1,5 +1,53 @@
 # [Versions](https://mui.com/versions/)
 
+## 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/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v9.0.0-beta.0
+ * @mui/system v9.0.0-beta.1
  *
  * @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-beta.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "9.0.0-beta.0",
+  "version": "9.0.0-beta.1",
   "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.",
   "keywords": [
@@ -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/private-theming": "9.0.0-beta.1",
     "@mui/types": "^9.0.0-beta.0",
-    "@mui/utils": "9.0.0-beta.0"
+    "@mui/styled-engine": "9.0.0-beta.0",
+    "@mui/utils": "9.0.0-beta.1"
   },
   "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-beta.1";
 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 = "beta.1";
 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-beta.1";
 export const major = Number("9");
 export const minor = Number("0");
 export const patch = Number("0");
-export const prerelease = "beta.0";
+export const prerelease = "beta.1";
 export default version;