@mui/material 9.0.0-alpha.4 → 9.0.0-beta.1

package/Drawer/Drawer.mjs

@@ -34,7 +34,7 @@ const useUtilityClasses = ownerState => {
     root: ['root', `anchor${capitalize(anchor)}`],
     docked: [(variant === 'permanent' || variant === 'persistent') && 'docked'],
     modal: ['modal'],
-    paper: ['paper', `paperAnchor${capitalize(anchor)}`, variant !== 'temporary' && `paperAnchorDocked${capitalize(anchor)}`]
+    paper: ['paper']
   };
   return composeClasses(slots, getDrawerUtilityClass, classes);
 };
@@ -60,10 +60,7 @@ const DrawerPaper = styled(Paper, {
   name: 'MuiDrawer',
   slot: 'Paper',
   overridesResolver: (props, styles) => {
-    const {
-      ownerState
-    } = props;
-    return [styles.paper, styles[`paperAnchor${capitalize(ownerState.anchor)}`], ownerState.variant !== 'temporary' && styles[`paperAnchorDocked${capitalize(ownerState.anchor)}`]];
+    return [styles.paper];
   }
 })(memoTheme(({
   theme
@@ -182,21 +179,13 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
   };
   const {
     anchor: anchorProp = 'left',
-    BackdropProps,
     children,
     className,
     elevation = 16,
     hideBackdrop = false,
-    ModalProps: {
-      BackdropProps: BackdropPropsProp,
-      ...ModalProps
-    } = {},
+    ModalProps = {},
     onClose,
     open = false,
-    PaperProps = {},
-    SlideProps,
-    // eslint-disable-next-line react/prop-types
-    TransitionComponent,
     transitionDuration = defaultTransitionDuration,
     variant = 'temporary',
     slots = {},
@@ -225,18 +214,10 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
   };
   const classes = useUtilityClasses(ownerState);
   const externalForwardedProps = {
-    slots: {
-      transition: TransitionComponent,
-      ...slots
-    },
+    slots,
     slotProps: {
-      paper: PaperProps,
-      transition: SlideProps,
       ...slotProps,
-      backdrop: mergeSlotProps(slotProps.backdrop || {
-        ...BackdropProps,
-        ...BackdropPropsProp
-      }, {
+      backdrop: mergeSlotProps(slotProps.backdrop, {
         transitionDuration
       })
     }
@@ -267,7 +248,7 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
   const [PaperSlot, paperSlotProps] = useSlot('paper', {
     elementType: DrawerPaper,
     shouldForwardComponentProp: true,
-    className: clsx(classes.paper, PaperProps.className),
+    className: classes.paper,
     ownerState,
     externalForwardedProps,
     additionalProps: {
@@ -335,10 +316,6 @@ process.env.NODE_ENV !== "production" ? Drawer.propTypes /* remove-proptypes */
    * @default 'left'
    */
   anchor: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
-  /**
-   * @ignore
-   */
-  BackdropProps: PropTypes.object,
   /**
    * The content of the component.
    */
@@ -379,17 +356,6 @@ process.env.NODE_ENV !== "production" ? Drawer.propTypes /* remove-proptypes */
    * @default false
    */
   open: PropTypes.bool,
-  /**
-   * Props applied to the [`Paper`](https://mui.com/material-ui/api/paper/) element.
-   * @deprecated use the `slotProps.paper` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   * @default {}
-   */
-  PaperProps: PropTypes.object,
-  /**
-   * Props applied to the [`Slide`](https://mui.com/material-ui/api/slide/) element.
-   * @deprecated use the `slotProps.transition` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  SlideProps: PropTypes.object,
   /**
    * The props used for each slot inside.
    * @default {}

package/Drawer/drawerClasses.d.mts

@@ -13,38 +13,6 @@ export interface DrawerClasses {
   anchorTop: string;
   /** Styles applied to the root element if `anchor="bottom"`. */
   anchorBottom: string;
-  /** Styles applied to the Paper component if `anchor="left"`.
-   *  @deprecated Combine the [.MuiDrawer-anchorLeft](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorLeft) and [.MuiDrawer-paper](/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
-   */
-  paperAnchorLeft: string;
-  /** Styles applied to the Paper component if `anchor="right"`.
-   *  @deprecated Combine the [.MuiDrawer-anchorRight](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorRight) and [.MuiDrawer-paper](/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
-   */
-  paperAnchorRight: string;
-  /** Styles applied to the Paper component if `anchor="top"`.
-   *  @deprecated Combine the [.MuiDrawer-anchorTop](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorTop) and [.MuiDrawer-paper](/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
-   */
-  paperAnchorTop: string;
-  /** Styles applied to the Paper component if `anchor="bottom"`.
-   *  @deprecated Combine the [.MuiDrawer-anchorBottom](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorBottom) and [.MuiDrawer-paper](/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
-   */
-  paperAnchorBottom: string;
-  /** Styles applied to the Paper component if `anchor="left"` and `variant` is not "temporary".
-   * @deprecated Combine the [.MuiDrawer-anchorLeft](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorLeft), [.MuiDrawer-docked](/material-ui/api/drawer/#Drawer-css-MuiDrawer-docked) and [.MuiDrawer-paper](/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
-   */
-  paperAnchorDockedLeft: string;
-  /** Styles applied to the Paper component if `anchor="top"` and `variant` is not "temporary".
-   * @deprecated Combine the [.MuiDrawer-anchorTop](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorTop), [.MuiDrawer-docked](/material-ui/api/drawer/#Drawer-css-MuiDrawer-docked) and [.MuiDrawer-paper](/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
-   */
-  paperAnchorDockedTop: string;
-  /** Styles applied to the Paper component if `anchor="right"` and `variant` is not "temporary".
-   * @deprecated Combine the [.MuiDrawer-anchorRight](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorRight), [.MuiDrawer-docked](/material-ui/api/drawer/#Drawer-css-MuiDrawer-docked) and [.MuiDrawer-paper](/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
-   */
-  paperAnchorDockedRight: string;
-  /** Styles applied to the Paper component if `anchor="bottom"` and `variant` is not "temporary".
-   * @deprecated Combine the [.MuiDrawer-anchorBottom](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorBottom), [.MuiDrawer-docked](/material-ui/api/drawer/#Drawer-css-MuiDrawer-docked) and [.MuiDrawer-paper](/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
-   */
-  paperAnchorDockedBottom: string;
   /** Styles applied to the Modal component. */
   modal: string;
 }

package/Drawer/drawerClasses.d.ts

@@ -13,38 +13,6 @@ export interface DrawerClasses {
   anchorTop: string;
   /** Styles applied to the root element if `anchor="bottom"`. */
   anchorBottom: string;
-  /** Styles applied to the Paper component if `anchor="left"`.
-   *  @deprecated Combine the [.MuiDrawer-anchorLeft](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorLeft) and [.MuiDrawer-paper](/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
-   */
-  paperAnchorLeft: string;
-  /** Styles applied to the Paper component if `anchor="right"`.
-   *  @deprecated Combine the [.MuiDrawer-anchorRight](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorRight) and [.MuiDrawer-paper](/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
-   */
-  paperAnchorRight: string;
-  /** Styles applied to the Paper component if `anchor="top"`.
-   *  @deprecated Combine the [.MuiDrawer-anchorTop](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorTop) and [.MuiDrawer-paper](/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
-   */
-  paperAnchorTop: string;
-  /** Styles applied to the Paper component if `anchor="bottom"`.
-   *  @deprecated Combine the [.MuiDrawer-anchorBottom](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorBottom) and [.MuiDrawer-paper](/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
-   */
-  paperAnchorBottom: string;
-  /** Styles applied to the Paper component if `anchor="left"` and `variant` is not "temporary".
-   * @deprecated Combine the [.MuiDrawer-anchorLeft](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorLeft), [.MuiDrawer-docked](/material-ui/api/drawer/#Drawer-css-MuiDrawer-docked) and [.MuiDrawer-paper](/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
-   */
-  paperAnchorDockedLeft: string;
-  /** Styles applied to the Paper component if `anchor="top"` and `variant` is not "temporary".
-   * @deprecated Combine the [.MuiDrawer-anchorTop](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorTop), [.MuiDrawer-docked](/material-ui/api/drawer/#Drawer-css-MuiDrawer-docked) and [.MuiDrawer-paper](/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
-   */
-  paperAnchorDockedTop: string;
-  /** Styles applied to the Paper component if `anchor="right"` and `variant` is not "temporary".
-   * @deprecated Combine the [.MuiDrawer-anchorRight](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorRight), [.MuiDrawer-docked](/material-ui/api/drawer/#Drawer-css-MuiDrawer-docked) and [.MuiDrawer-paper](/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
-   */
-  paperAnchorDockedRight: string;
-  /** Styles applied to the Paper component if `anchor="bottom"` and `variant` is not "temporary".
-   * @deprecated Combine the [.MuiDrawer-anchorBottom](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorBottom), [.MuiDrawer-docked](/material-ui/api/drawer/#Drawer-css-MuiDrawer-docked) and [.MuiDrawer-paper](/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
-   */
-  paperAnchorDockedBottom: string;
   /** Styles applied to the Modal component. */
   modal: string;
 }

package/Drawer/drawerClasses.js

@@ -11,5 +11,5 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 function getDrawerUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiDrawer', slot);
 }
-const drawerClasses = (0, _generateUtilityClasses.default)('MuiDrawer', ['root', 'docked', 'paper', 'anchorLeft', 'anchorRight', 'anchorTop', 'anchorBottom', 'paperAnchorLeft', 'paperAnchorRight', 'paperAnchorTop', 'paperAnchorBottom', 'paperAnchorDockedLeft', 'paperAnchorDockedRight', 'paperAnchorDockedTop', 'paperAnchorDockedBottom', 'modal']);
+const drawerClasses = (0, _generateUtilityClasses.default)('MuiDrawer', ['root', 'docked', 'paper', 'anchorLeft', 'anchorRight', 'anchorTop', 'anchorBottom', 'modal']);
 var _default = exports.default = drawerClasses;

package/Drawer/drawerClasses.mjs

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getDrawerUtilityClass(slot) {
   return generateUtilityClass('MuiDrawer', slot);
 }
-const drawerClasses = generateUtilityClasses('MuiDrawer', ['root', 'docked', 'paper', 'anchorLeft', 'anchorRight', 'anchorTop', 'anchorBottom', 'paperAnchorLeft', 'paperAnchorRight', 'paperAnchorTop', 'paperAnchorBottom', 'paperAnchorDockedLeft', 'paperAnchorDockedRight', 'paperAnchorDockedTop', 'paperAnchorDockedBottom', 'modal']);
+const drawerClasses = generateUtilityClasses('MuiDrawer', ['root', 'docked', 'paper', 'anchorLeft', 'anchorRight', 'anchorTop', 'anchorBottom', 'modal']);
 export default drawerClasses;

package/Fab/Fab.js

@@ -197,6 +197,7 @@ const Fab = /*#__PURE__*/React.forwardRef(function Fab(inProps, ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(FabRoot, {
     className: (0, _clsx.default)(classes.root, className),
     component: component,
+    internalNativeButton: true,
     disabled: disabled,
     focusRipple: !disableFocusRipple,
     focusVisibleClassName: (0, _clsx.default)(classes.focusVisible, focusVisibleClassName),

package/Fab/Fab.mjs

@@ -190,6 +190,7 @@ const Fab = /*#__PURE__*/React.forwardRef(function Fab(inProps, ref) {
   return /*#__PURE__*/_jsx(FabRoot, {
     className: clsx(classes.root, className),
     component: component,
+    internalNativeButton: true,
     disabled: disabled,
     focusRipple: !disableFocusRipple,
     focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),

package/FilledInput/FilledInput.js

@@ -115,7 +115,7 @@ const FilledInputRoot = (0, _zeroStyled.styled)(_InputBase2.InputBaseRoot, {
           borderBottom: `1px solid ${theme.vars ? theme.alpha(theme.vars.palette.common.onBackground, theme.vars.opacity.inputUnderline) : bottomLineColor}`,
           left: 0,
           bottom: 0,
-          content: '"\\00a0"',
+          content: '""',
           position: 'absolute',
           right: 0,
           transition: theme.transitions.create('border-bottom-color', {
@@ -280,8 +280,6 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
   });
   const {
     disableUnderline = false,
-    components = {},
-    componentsProps: componentsPropsProp,
     fullWidth = false,
     hiddenLabel,
     // declare here to prevent spreading to DOM
@@ -309,9 +307,9 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
       ownerState
     }
   };
-  const componentsProps = slotProps ?? componentsPropsProp ? (0, _deepmerge.default)(filledInputComponentsProps, slotProps ?? componentsPropsProp) : filledInputComponentsProps;
-  const RootSlot = slots.root ?? components.Root ?? FilledInputRoot;
-  const InputSlot = slots.input ?? components.Input ?? FilledInputInput;
+  const componentsProps = slotProps ? (0, _deepmerge.default)(filledInputComponentsProps, slotProps) : filledInputComponentsProps;
+  const RootSlot = slots.root ?? FilledInputRoot;
+  const InputSlot = slots.input ?? FilledInputInput;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputBase.default, {
     slots: {
       root: RootSlot,
@@ -353,29 +351,6 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes /* remove-proptype
    * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
    */
   color: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['primary', 'secondary']), _propTypes.default.string]),
-  /**
-   * The components used for each slot inside.
-   *
-   * @deprecated use the `slots` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   *
-   * @default {}
-   */
-  components: _propTypes.default.shape({
-    Input: _propTypes.default.elementType,
-    Root: _propTypes.default.elementType
-  }),
-  /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   *
-   * @default {}
-   */
-  componentsProps: _propTypes.default.shape({
-    input: _propTypes.default.object,
-    root: _propTypes.default.object
-  }),
   /**
    * The default value. Use when the component is not controlled.
    */
@@ -482,8 +457,6 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes /* remove-proptype
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
-   *
    * @default {}
    */
   slotProps: _propTypes.default.shape({
@@ -493,8 +466,6 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes /* remove-proptype
   /**
    * The components used for each slot inside.
    *
-   * This prop is an alias for the `components` prop, which will be deprecated in the future.
-   *
    * @default {}
    */
   slots: _propTypes.default.shape({

package/FilledInput/FilledInput.mjs

@@ -108,7 +108,7 @@ const FilledInputRoot = styled(InputBaseRoot, {
           borderBottom: `1px solid ${theme.vars ? theme.alpha(theme.vars.palette.common.onBackground, theme.vars.opacity.inputUnderline) : bottomLineColor}`,
           left: 0,
           bottom: 0,
-          content: '"\\00a0"',
+          content: '""',
           position: 'absolute',
           right: 0,
           transition: theme.transitions.create('border-bottom-color', {
@@ -273,8 +273,6 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
   });
   const {
     disableUnderline = false,
-    components = {},
-    componentsProps: componentsPropsProp,
     fullWidth = false,
     hiddenLabel,
     // declare here to prevent spreading to DOM
@@ -302,9 +300,9 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
       ownerState
     }
   };
-  const componentsProps = slotProps ?? componentsPropsProp ? deepmerge(filledInputComponentsProps, slotProps ?? componentsPropsProp) : filledInputComponentsProps;
-  const RootSlot = slots.root ?? components.Root ?? FilledInputRoot;
-  const InputSlot = slots.input ?? components.Input ?? FilledInputInput;
+  const componentsProps = slotProps ? deepmerge(filledInputComponentsProps, slotProps) : filledInputComponentsProps;
+  const RootSlot = slots.root ?? FilledInputRoot;
+  const InputSlot = slots.input ?? FilledInputInput;
   return /*#__PURE__*/_jsx(InputBase, {
     slots: {
       root: RootSlot,
@@ -346,29 +344,6 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes /* remove-proptype
    * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
    */
   color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),
-  /**
-   * The components used for each slot inside.
-   *
-   * @deprecated use the `slots` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   *
-   * @default {}
-   */
-  components: PropTypes.shape({
-    Input: PropTypes.elementType,
-    Root: PropTypes.elementType
-  }),
-  /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   *
-   * @default {}
-   */
-  componentsProps: PropTypes.shape({
-    input: PropTypes.object,
-    root: PropTypes.object
-  }),
   /**
    * The default value. Use when the component is not controlled.
    */
@@ -475,8 +450,6 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes /* remove-proptype
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
-   *
    * @default {}
    */
   slotProps: PropTypes.shape({
@@ -486,8 +459,6 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes /* remove-proptype
   /**
    * The components used for each slot inside.
    *
-   * This prop is an alias for the `components` prop, which will be deprecated in the future.
-   *
    * @default {}
    */
   slots: PropTypes.shape({

package/Grid/Grid.d.mts

@@ -2,7 +2,7 @@ import { SxProps } from '@mui/system';
 import { OverridableComponent, OverrideProps } from '@mui/types';
 import { Theme, Breakpoint } from "../styles/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;
@@ -29,8 +29,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/Grid.d.ts

@@ -2,7 +2,7 @@ import { SxProps } from '@mui/system';
 import { OverridableComponent, OverrideProps } from '@mui/types';
 import { Theme, Breakpoint } from "../styles/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;
@@ -29,8 +29,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/Grid.js

@@ -66,11 +66,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

@@ -60,11 +60,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/gridClasses.js

@@ -12,7 +12,7 @@ function getGridUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiGrid', slot);
 }
 const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-const DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'];
+const DIRECTIONS = ['row-reverse', 'row'];
 const WRAPS = ['nowrap', 'wrap-reverse', 'wrap'];
 const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
 const gridClasses = (0, _generateUtilityClasses.default)('MuiGrid', ['root', 'container',

package/Grid/gridClasses.mjs

@@ -4,7 +4,7 @@ export function getGridUtilityClass(slot) {
   return generateUtilityClass('MuiGrid', slot);
 }
 const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-const DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'];
+const DIRECTIONS = ['row-reverse', 'row'];
 const WRAPS = ['nowrap', 'wrap-reverse', 'wrap'];
 const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
 const gridClasses = generateUtilityClasses('MuiGrid', ['root', 'container',

package/IconButton/IconButton.js

@@ -219,6 +219,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     id: loading ? loadingId : idProp,
     className: (0, _clsx.default)(classes.root, className),
     centerRipple: true,
+    internalNativeButton: true,
     focusRipple: !disableFocusRipple,
     disabled: disabled || loading,
     ref: ref,

package/IconButton/IconButton.mjs

@@ -212,6 +212,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     id: loading ? loadingId : idProp,
     className: clsx(classes.root, className),
     centerRipple: true,
+    internalNativeButton: true,
     focusRipple: !disableFocusRipple,
     disabled: disabled || loading,
     ref: ref,

package/ImageListItemBar/ImageListItemBar.js

@@ -21,15 +21,14 @@ const useUtilityClasses = ownerState => {
   const {
     classes,
     position,
-    actionIcon,
     actionPosition
   } = ownerState;
   const slots = {
     root: ['root', `position${(0, _capitalize.default)(position)}`, `actionPosition${(0, _capitalize.default)(actionPosition)}`],
-    titleWrap: ['titleWrap', `titleWrap${(0, _capitalize.default)(position)}`, actionIcon && `titleWrapActionPos${(0, _capitalize.default)(actionPosition)}`],
+    titleWrap: ['titleWrap'],
     title: ['title'],
     subtitle: ['subtitle'],
-    actionIcon: ['actionIcon', `actionIconActionPos${(0, _capitalize.default)(actionPosition)}`]
+    actionIcon: ['actionIcon']
   };
   return (0, _composeClasses.default)(slots, _imageListItemBarClasses.getImageListItemBarUtilityClass, classes);
 };
@@ -81,13 +80,7 @@ const ImageListItemBarRoot = (0, _zeroStyled.styled)('div', {
 }));
 const ImageListItemBarTitleWrap = (0, _zeroStyled.styled)('div', {
   name: 'MuiImageListItemBar',
-  slot: 'TitleWrap',
-  overridesResolver: (props, styles) => {
-    const {
-      ownerState
-    } = props;
-    return [styles.titleWrap, styles[`titleWrap${(0, _capitalize.default)(ownerState.position)}`], ownerState.actionIcon && styles[`titleWrapActionPos${(0, _capitalize.default)(ownerState.actionPosition)}`]];
-  }
+  slot: 'TitleWrap'
 })((0, _memoTheme.default)(({
   theme
 }) => {
@@ -151,13 +144,7 @@ const ImageListItemBarSubtitle = (0, _zeroStyled.styled)('div', {
 }));
 const ImageListItemBarActionIcon = (0, _zeroStyled.styled)('div', {
   name: 'MuiImageListItemBar',
-  slot: 'ActionIcon',
-  overridesResolver: (props, styles) => {
-    const {
-      ownerState
-    } = props;
-    return [styles.actionIcon, styles[`actionIconActionPos${(0, _capitalize.default)(ownerState.actionPosition)}`]];
-  }
+  slot: 'ActionIcon'
 })({
   variants: [{
     props: {

package/ImageListItemBar/ImageListItemBar.mjs

@@ -14,15 +14,14 @@ const useUtilityClasses = ownerState => {
   const {
     classes,
     position,
-    actionIcon,
     actionPosition
   } = ownerState;
   const slots = {
     root: ['root', `position${capitalize(position)}`, `actionPosition${capitalize(actionPosition)}`],
-    titleWrap: ['titleWrap', `titleWrap${capitalize(position)}`, actionIcon && `titleWrapActionPos${capitalize(actionPosition)}`],
+    titleWrap: ['titleWrap'],
     title: ['title'],
     subtitle: ['subtitle'],
-    actionIcon: ['actionIcon', `actionIconActionPos${capitalize(actionPosition)}`]
+    actionIcon: ['actionIcon']
   };
   return composeClasses(slots, getImageListItemBarUtilityClass, classes);
 };
@@ -74,13 +73,7 @@ const ImageListItemBarRoot = styled('div', {
 }));
 const ImageListItemBarTitleWrap = styled('div', {
   name: 'MuiImageListItemBar',
-  slot: 'TitleWrap',
-  overridesResolver: (props, styles) => {
-    const {
-      ownerState
-    } = props;
-    return [styles.titleWrap, styles[`titleWrap${capitalize(ownerState.position)}`], ownerState.actionIcon && styles[`titleWrapActionPos${capitalize(ownerState.actionPosition)}`]];
-  }
+  slot: 'TitleWrap'
 })(memoTheme(({
   theme
 }) => {
@@ -144,13 +137,7 @@ const ImageListItemBarSubtitle = styled('div', {
 }));
 const ImageListItemBarActionIcon = styled('div', {
   name: 'MuiImageListItemBar',
-  slot: 'ActionIcon',
-  overridesResolver: (props, styles) => {
-    const {
-      ownerState
-    } = props;
-    return [styles.actionIcon, styles[`actionIconActionPos${capitalize(ownerState.actionPosition)}`]];
-  }
+  slot: 'ActionIcon'
 })({
   variants: [{
     props: {

package/ImageListItemBar/imageListItemBarClasses.d.mts

@@ -13,28 +13,12 @@ export interface ImageListItemBarClasses {
   actionPositionRight: string;
   /** Styles applied to the title and subtitle container element. */
   titleWrap: string;
-  /** Styles applied to the title and subtitle container element if `position="below"`.
-   * @deprecated Combine the [.MuiImageListItemBar-titleWrap](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-MuiImageListItemBar-titleWrap) and [.MuiImageListItemBar-positionBelow](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-MuiImageListItemBar-positionBelow) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  titleWrapBelow: string;
-  /** Styles applied to the container element if `actionPosition="left"`.
-   * @deprecated Combine the [.MuiImageListItemBar-titleWrap](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-MuiImageListItemBar-titleWrap) and [.MuiImageListItemBar-actionPositionLeft](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-MuiImageListItemBar-actionPositionLeft) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  titleWrapActionPosLeft: string;
-  /** Styles applied to the container element if `actionPosition="right"`.
-   * @deprecated Combine the [.MuiImageListItemBar-titleWrap](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-MuiImageListItemBar-titleWrap) and [.MuiImageListItemBar-actionPositionRight](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-MuiImageListItemBar-actionPositionRight) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  titleWrapActionPosRight: string;
   /** Styles applied to the title container element. */
   title: string;
   /** Styles applied to the subtitle container element. */
   subtitle: string;
   /** Styles applied to the actionIcon if supplied. */
   actionIcon: string;
-  /** Styles applied to the actionIcon if `actionPosition="left"`.
-   * @deprecated Combine the [.MuiImageListItemBar-actionIcon](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-MuiImageListItemBar-actionIcon) and [.MuiImageListItemBar-actionPositionLeft](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-MuiImageListItemBar-actionPositionLeft) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  actionIconActionPosLeft: string;
 }
 export type ImageListItemBarClassKey = keyof ImageListItemBarClasses;
 export declare function getImageListItemBarUtilityClass(slot: string): string;