@mui/material 7.0.0-alpha.1 → 7.0.0-beta.0

package/esm/Rating/Rating.js

@@ -17,7 +17,9 @@ import memoTheme from "../utils/memoTheme.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import slotShouldForwardProp from "../styles/slotShouldForwardProp.js";
 import ratingClasses, { getRatingUtilityClass } from "./ratingClasses.js";
+import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 function getDecimalPrecision(num) {
   const decimalPart = num.toString().split('.')[1];
   return decimalPart ? decimalPart.length : 0;
@@ -220,7 +222,9 @@ function RatingItem(props) {
     readOnly,
     ownerState,
     ratingValue,
-    ratingValueRounded
+    ratingValueRounded,
+    slots = {},
+    slotProps = {}
   } = props;
   const isFilled = highlightSelectedOnly ? itemValue === ratingValue : itemValue <= ratingValue;
   const isHovered = itemValue <= hover;
@@ -232,10 +236,14 @@ function RatingItem(props) {
   // Update to const id = useId(); when React 17 support is dropped.
   // More details: https://github.com/mui/material-ui/issues/40997
   const id = `${name}-${useId()}`;
-  const container = /*#__PURE__*/_jsx(RatingIcon, {
-    as: IconContainerComponent,
-    value: itemValue,
+  const externalForwardedProps = {
+    slots,
+    slotProps
+  };
+  const [IconSlot, iconSlotProps] = useSlot('icon', {
+    elementType: RatingIcon,
     className: clsx(classes.icon, isFilled ? classes.iconFilled : classes.iconEmpty, isHovered && classes.iconHover, isFocused && classes.iconFocus, isActive && classes.iconActive),
+    externalForwardedProps,
     ownerState: {
       ...ownerState,
       iconEmpty: !isFilled,
@@ -244,6 +252,29 @@ function RatingItem(props) {
       iconFocus: isFocused,
       iconActive: isActive
     },
+    additionalProps: {
+      value: itemValue
+    },
+    internalForwardedProps: {
+      // TODO: remove this in v7 because `IconContainerComponent` is deprecated
+      // only forward if `slots.icon` is NOT provided
+      as: IconContainerComponent
+    }
+  });
+  const [LabelSlot, labelSlotProps] = useSlot('label', {
+    elementType: RatingLabel,
+    externalForwardedProps,
+    ownerState: {
+      ...ownerState,
+      emptyValueFocused: undefined
+    },
+    additionalProps: {
+      style: labelProps?.style,
+      htmlFor: id
+    }
+  });
+  const container = /*#__PURE__*/_jsx(IconSlot, {
+    ...iconSlotProps,
     children: emptyIcon && !isFilled ? emptyIcon : icon
   });
   if (readOnly) {
@@ -253,13 +284,8 @@ function RatingItem(props) {
     });
   }
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsxs(RatingLabel, {
-      ownerState: {
-        ...ownerState,
-        emptyValueFocused: undefined
-      },
-      htmlFor: id,
-      ...labelProps,
+    children: [/*#__PURE__*/_jsxs(LabelSlot, {
+      ...labelSlotProps,
       children: [container, /*#__PURE__*/_jsx("span", {
         className: classes.visuallyHidden,
         children: getLabelText(itemValue)
@@ -300,7 +326,9 @@ process.env.NODE_ENV !== "production" ? RatingItem.propTypes = {
   ownerState: PropTypes.object.isRequired,
   ratingValue: PropTypes.number,
   ratingValueRounded: PropTypes.number,
-  readOnly: PropTypes.bool.isRequired
+  readOnly: PropTypes.bool.isRequired,
+  slotProps: PropTypes.object,
+  slots: PropTypes.object
 } : void 0;
 const defaultIcon = /*#__PURE__*/_jsx(Star, {
   fontSize: "inherit"
@@ -337,6 +365,8 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
     readOnly = false,
     size = 'medium',
     value: valueProp,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const name = useId(nameProp);
@@ -474,16 +504,50 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
     size
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsxs(RatingRoot, {
-    as: component,
+  const externalForwardedProps = {
+    slots,
+    slotProps
+  };
+  const [RootSlot, rootSlotProps] = useSlot('root', {
     ref: handleRef,
-    onMouseMove: handleMouseMove,
-    onMouseLeave: handleMouseLeave,
-    className: clsx(classes.root, className, readOnly && 'MuiRating-readOnly'),
-    ownerState: ownerState,
-    role: readOnly ? 'img' : null,
-    "aria-label": readOnly ? getLabelText(value) : null,
-    ...other,
+    className: clsx(classes.root, className),
+    elementType: RatingRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other,
+      component
+    },
+    getSlotProps: handlers => ({
+      ...handlers,
+      onMouseMove: event => {
+        handleMouseMove(event);
+        handlers.onMouseMove?.(event);
+      },
+      onMouseLeave: event => {
+        handleMouseLeave(event);
+        handlers.onMouseLeave?.(event);
+      }
+    }),
+    ownerState,
+    additionalProps: {
+      role: readOnly ? 'img' : null,
+      'aria-label': readOnly ? getLabelText(value) : null
+    }
+  });
+  const [LabelSlot, labelSlotProps] = useSlot('label', {
+    className: clsx(classes.label, classes.labelEmptyValue),
+    elementType: RatingLabel,
+    externalForwardedProps,
+    ownerState
+  });
+  const [DecimalSlot, decimalSlotProps] = useSlot('decimal', {
+    className: classes.decimal,
+    elementType: RatingDecimal,
+    externalForwardedProps,
+    ownerState
+  });
+  return /*#__PURE__*/_jsxs(RootSlot, {
+    ...rootSlotProps,
     children: [Array.from(new Array(max)).map((_, index) => {
       const itemValue = index + 1;
       const ratingItemProps = {
@@ -504,41 +568,42 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
         ratingValue: value,
         ratingValueRounded: valueRounded,
         readOnly,
-        ownerState
+        ownerState,
+        slots,
+        slotProps
       };
       const isActive = itemValue === Math.ceil(value) && (hover !== -1 || focus !== -1);
       if (precision < 1) {
         const items = Array.from(new Array(1 / precision));
-        return /*#__PURE__*/_jsx(RatingDecimal, {
-          className: clsx(classes.decimal, isActive && classes.iconActive),
-          ownerState: ownerState,
-          iconActive: isActive,
-          children: items.map(($, indexDecimal) => {
-            const itemDecimalValue = roundValueToPrecision(itemValue - 1 + (indexDecimal + 1) * precision, precision);
-            return /*#__PURE__*/_jsx(RatingItem, {
-              ...ratingItemProps,
-              // The icon is already displayed as active
-              isActive: false,
-              itemValue: itemDecimalValue,
-              labelProps: {
-                style: items.length - 1 === indexDecimal ? {} : {
-                  width: itemDecimalValue === value ? `${(indexDecimal + 1) * precision * 100}%` : '0%',
-                  overflow: 'hidden',
-                  position: 'absolute'
-                }
+        return /*#__PURE__*/_createElement(DecimalSlot, {
+          ...decimalSlotProps,
+          key: itemValue,
+          className: clsx(decimalSlotProps.className, isActive && classes.iconActive),
+          iconActive: isActive
+        }, items.map(($, indexDecimal) => {
+          const itemDecimalValue = roundValueToPrecision(itemValue - 1 + (indexDecimal + 1) * precision, precision);
+          return /*#__PURE__*/_jsx(RatingItem, {
+            ...ratingItemProps,
+            // The icon is already displayed as active
+            isActive: false,
+            itemValue: itemDecimalValue,
+            labelProps: {
+              style: items.length - 1 === indexDecimal ? {} : {
+                width: itemDecimalValue === value ? `${(indexDecimal + 1) * precision * 100}%` : '0%',
+                overflow: 'hidden',
+                position: 'absolute'
               }
-            }, itemDecimalValue);
-          })
-        }, itemValue);
+            }
+          }, itemDecimalValue);
+        }));
       }
       return /*#__PURE__*/_jsx(RatingItem, {
         ...ratingItemProps,
         isActive: isActive,
         itemValue: itemValue
       }, itemValue);
-    }), !readOnly && !disabled && /*#__PURE__*/_jsxs(RatingLabel, {
-      className: clsx(classes.label, classes.labelEmptyValue),
-      ownerState: ownerState,
+    }), !readOnly && !disabled && /*#__PURE__*/_jsxs(LabelSlot, {
+      ...labelSlotProps,
       children: [/*#__PURE__*/_jsx("input", {
         className: classes.visuallyHidden,
         value: "",
@@ -622,6 +687,7 @@ process.env.NODE_ENV !== "production" ? Rating.propTypes /* remove-proptypes */
   icon: PropTypes.node,
   /**
    * The component containing the icon.
+   * @deprecated Use `slotProps.icon.component` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default function IconContainer(props) {
    *   const { value, ...other } = props;
    *   return <span {...other} />;
@@ -679,6 +745,26 @@ process.env.NODE_ENV !== "production" ? Rating.propTypes /* remove-proptypes */
    * @default 'medium'
    */
   size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['small', 'medium', 'large']), PropTypes.string]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    decimal: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    label: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    decimal: PropTypes.elementType,
+    icon: PropTypes.elementType,
+    label: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/esm/Select/SelectInput.js

@@ -500,16 +500,16 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
         horizontal: 'center'
       },
       ...MenuProps,
-      MenuListProps: {
-        'aria-labelledby': labelId,
-        role: 'listbox',
-        'aria-multiselectable': multiple ? 'true' : undefined,
-        disableListWrap: true,
-        id: listboxId,
-        ...MenuProps.MenuListProps
-      },
       slotProps: {
         ...MenuProps.slotProps,
+        list: {
+          'aria-labelledby': labelId,
+          role: 'listbox',
+          'aria-multiselectable': multiple ? 'true' : undefined,
+          disableListWrap: true,
+          id: listboxId,
+          ...MenuProps.MenuListProps
+        },
         paper: {
           ...paperProps,
           style: {

package/esm/Snackbar/Snackbar.d.ts

@@ -52,9 +52,9 @@ export type SnackbarSlotsAndSlotProps = CreateSlotsAndSlotProps<SnackbarSlots, {
   clickAwayListener: SlotComponentProps<typeof ClickAwayListener, SnackbarClickAwayListenerSlotPropsOverrides, SnackbarOwnerState>;
   /**
    * Props applied to the transition element.
-   * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
+   * By default, the element is based on the [Grow](https://mui.com/material-ui/api/grow/#props) component.
    */
-  transition: SlotComponentProps<React.ElementType<TransitionProps>, SnackbarTransitionSlotPropsOverrides, SnackbarOwnerState>;
+  transition: SlotComponentProps<React.ElementType, TransitionProps & SnackbarTransitionSlotPropsOverrides, SnackbarOwnerState>;
 }>;
 export interface SnackbarOrigin {
   vertical: 'top' | 'bottom';

package/esm/SpeedDial/SpeedDial.d.ts

@@ -5,21 +5,23 @@ import { InternalStandardProps as StandardProps } from "../index.js";
 import { FabProps } from "../Fab/index.js";
 import { TransitionProps } from "../transitions/index.js";
 import { SpeedDialClasses } from "./speedDialClasses.js";
-import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";
+import { CreateSlotsAndSlotProps, SlotComponentProps } from "../utils/types.js";
 export type CloseReason = 'toggle' | 'blur' | 'mouseLeave' | 'escapeKeyDown';
 export type OpenReason = 'toggle' | 'focus' | 'mouseEnter';
 export interface SpeedDialSlots {
   /**
    * The component that renders the transition.
    * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
-   * @default {}
+   * @default Zoom
    */
-  transition: React.JSXElementConstructor<TransitionProps & {
-    children: React.ReactElement<unknown, any>;
-  }>;
+  transition: React.ElementType;
 }
 export type SpeedDialSlotsAndSlotProps = CreateSlotsAndSlotProps<SpeedDialSlots, {
-  transition: SlotProps<React.JSXElementConstructor<TransitionProps>, {}, SpeedDialOwnerState>;
+  /**
+   * Props forwarded to the transition slot.
+   * By default, the avaible props are based on the [Zoom](https://mui.com/material-ui/api/zoom/#props) component.
+   */
+  transition: SlotComponentProps<React.ElementType, TransitionProps, SpeedDialOwnerState>;
 }>;
 export interface SpeedDialProps extends Omit<StandardProps<React.HTMLAttributes<HTMLDivElement>, 'children'>, 'slots' | 'slotProps'>, SpeedDialSlotsAndSlotProps {
   /**

package/esm/StepButton/StepButton.d.ts

@@ -4,11 +4,6 @@ import { ButtonBaseTypeMap, ExtendButtonBase, ExtendButtonBaseTypeMap } from "..
 import { OverrideProps } from "../OverridableComponent/index.js";
 import { Theme } from "../styles/index.js";
 import { StepButtonClasses } from "./stepButtonClasses.js";
-
-/**
- * @deprecated use `StepButtonProps['icon']` instead.
- */
-export type StepButtonIcon = React.ReactNode;
 export interface StepButtonOwnProps {
   /**
    * Can be a `StepLabel` or a node to place inside `StepLabel` as children.

package/esm/StepContent/StepContent.d.ts

@@ -4,7 +4,7 @@ import { CollapseProps, InternalStandardProps as StandardProps } from "../index.
 import { Theme } from "../styles/index.js";
 import { TransitionProps } from "../transitions/transition.js";
 import { StepContentClasses } from "./stepContentClasses.js";
-import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";
+import { CreateSlotsAndSlotProps, SlotComponentProps } from "../utils/types.js";
 export interface StepContentSlots {
   /**
    * The component that renders the transition slot.
@@ -20,7 +20,7 @@ export type StepContentSlotsAndSlotProps = CreateSlotsAndSlotProps<StepContentSl
    * Props forwared to the transition slot.
    * By default, the available props are based on the [Collapse](https://mui.com/material-ui/api/collapse/#props) component
    */
-  transition: SlotProps<React.ElementType<CollapseProps>, {}, StepContentOwnerState>;
+  transition: SlotComponentProps<React.ElementType, CollapseProps, StepContentOwnerState>;
 }>;
 export interface StepContentOwnerState extends StepContentProps {}
 export interface StepContentProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>>, StepContentSlotsAndSlotProps {

package/esm/Tooltip/Tooltip.d.ts

@@ -32,10 +32,26 @@ export interface TooltipSlots {
   arrow: React.ElementType;
 }
 export type TooltipSlotsAndSlotProps = CreateSlotsAndSlotProps<TooltipSlots, {
+  /**
+   * Props forwarded to the popper slot.
+   * By default, the avaible props are based on the [Popper](https://mui.com/material-ui/api/popper/#props) component.
+   */
   popper: SlotProps<React.ElementType<PopperProps>, TooltipPopperSlotPropsOverrides, TooltipOwnerState>;
-  transition: SlotProps<React.ElementType<TransitionProps>, TooltipTransitionSlotPropsOverrides, TooltipOwnerState>;
-  tooltip: SlotProps<React.ElementType<React.HTMLProps<HTMLDivElement>>, TooltipTooltipSlotPropsOverrides, TooltipOwnerState>;
-  arrow: SlotProps<React.ElementType<React.HTMLProps<HTMLSpanElement>>, TooltipArrowSlotPropsOverrides, TooltipOwnerState>;
+  /**
+   * Props forwarded to the transition slot.
+   * By default, the avaible props are based on the [Grow](https://mui.com/material-ui/api/grow/#props) component.
+   */
+  transition: SlotProps<React.ElementType, TransitionProps & TooltipTransitionSlotPropsOverrides, TooltipOwnerState>;
+  /**
+   * Props forwarded to the tooltip slot.
+   * By default, the avaible props are based on the div element.
+   */
+  tooltip: SlotProps<'div', TooltipTooltipSlotPropsOverrides, TooltipOwnerState>;
+  /**
+   * Props forwarded to the tooltip slot.
+   * By default, the avaible props are based on the span element.
+   */
+  arrow: SlotProps<'span', TooltipArrowSlotPropsOverrides, TooltipOwnerState>;
 }>;
 export interface TooltipProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, 'title'>, TooltipSlotsAndSlotProps {
   /**

package/esm/index.d.ts

@@ -147,14 +147,12 @@ export { default as FormHelperText } from "./FormHelperText/index.js";
 export * from "./FormHelperText/index.js";
 export { default as FormLabel } from "./FormLabel/index.js";
 export * from "./FormLabel/index.js";
+export { default as GridLegacy } from "./GridLegacy/index.js";
+export { GridLegacyProps, GridLegacyTypeMap } from "./GridLegacy/index.js";
 export { default as Grid } from "./Grid/index.js";
-export { GridProps, GridTypeMap } from "./Grid/index.js";
-export { default as Grid2 } from "./Grid2/index.js";
-export * from "./Grid2/index.js";
+export * from "./Grid/index.js";
 export { default as Grow } from "./Grow/index.js";
 export * from "./Grow/index.js";
-export { default as Hidden } from "./Hidden/index.js";
-export * from "./Hidden/index.js";
 export { default as Icon } from "./Icon/index.js";
 export * from "./Icon/index.js";
 export { default as IconButton } from "./IconButton/index.js";
@@ -318,11 +316,6 @@ export * from "./useAutocomplete/index.js";
 export { default as GlobalStyles } from "./GlobalStyles/index.js";
 export * from "./GlobalStyles/index.js";
 export * from "./version/index.js";
-
-/**
- * @deprecated will be removed in v5.beta, please use StyledEngineProvider from @mui/material/styles instead
- */
-export { StyledEngineProvider } from "./styles/index.js";
 export { unstable_composeClasses } from '@mui/utils';
 export { default as generateUtilityClass } from "./generateUtilityClass/index.js";
 export * from "./generateUtilityClass/index.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v7.0.0-alpha.1
+ * @mui/material v7.0.0-beta.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -108,13 +108,11 @@ export { default as FormHelperText } from "./FormHelperText/index.js";
 export * from "./FormHelperText/index.js";
 export { default as FormLabel } from "./FormLabel/index.js";
 export * from "./FormLabel/index.js";
+export { default as GridLegacy } from "./GridLegacy/index.js";
 export { default as Grid } from "./Grid/index.js";
-export { default as Grid2 } from "./Grid2/index.js";
-export * from "./Grid2/index.js";
+export * from "./Grid/index.js";
 export { default as Grow } from "./Grow/index.js";
 export * from "./Grow/index.js";
-export { default as Hidden } from "./Hidden/index.js";
-export * from "./Hidden/index.js";
 export { default as Icon } from "./Icon/index.js";
 export * from "./Icon/index.js";
 export { default as IconButton } from "./IconButton/index.js";

package/esm/styles/components.d.ts

@@ -222,16 +222,16 @@ export interface Components<Theme = unknown> {
     styleOverrides?: ComponentsOverrides<Theme>['MuiFormLabel'];
     variants?: ComponentsVariants<Theme>['MuiFormLabel'];
   };
+  MuiGridLegacy?: {
+    defaultProps?: ComponentsProps['MuiGridLegacy'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiGridLegacy'];
+    variants?: ComponentsVariants<Theme>['MuiGridLegacy'];
+  };
   MuiGrid?: {
     defaultProps?: ComponentsProps['MuiGrid'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiGrid'];
     variants?: ComponentsVariants<Theme>['MuiGrid'];
   };
-  MuiGrid2?: {
-    defaultProps?: ComponentsProps['MuiGrid2'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiGrid2'];
-    variants?: ComponentsVariants<Theme>['MuiGrid2'];
-  };
   MuiImageList?: {
     defaultProps?: ComponentsProps['MuiImageList'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiImageList'];

package/esm/styles/createTheme.d.ts

@@ -1,6 +1,5 @@
 import { CssVarsThemeOptions } from "./createThemeWithVars.js";
 import { Theme, ThemeOptions } from "./createThemeNoVars.js";
-export { createMuiTheme } from "./createThemeNoVars.js";
 export type { ThemeOptions, Theme, CssThemeVariables } from "./createThemeNoVars.js";
 /**
  * Generate a theme base on the options received.

package/esm/styles/createTheme.js

@@ -1,7 +1,6 @@
 import createPalette from "./createPalette.js";
 import createThemeWithVars from "./createThemeWithVars.js";
 import createThemeNoVars from "./createThemeNoVars.js";
-export { createMuiTheme } from "./createThemeNoVars.js";
 // eslint-disable-next-line consistent-return
 function attachColorScheme(theme, scheme, colorScheme) {
   if (!theme.colorSchemes) {

package/esm/styles/createThemeNoVars.d.ts

@@ -61,12 +61,6 @@ export interface Theme extends BaseTheme, CssVarsProperties {
   unstable_sxConfig: SxConfig;
 }
 
-/**
- * @deprecated
- * Use `import { createTheme } from '@mui/material/styles'` instead.
- */
-export function createMuiTheme(options?: ThemeOptions, ...args: object[]): Theme;
-
 /**
  * Generate a theme base on the options received.
  * @param options Takes an incomplete theme object and adds the missing parts.

package/esm/styles/createThemeNoVars.js

@@ -21,8 +21,13 @@ function createThemeNoVars(options = {}, ...args) {
     shape: shapeInput,
     ...other
   } = options;
-  if (options.vars) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: `vars` is a private field used for CSS variables support.\n' + 'Please use another name.' : _formatMuiErrorMessage(20));
+  if (options.vars &&
+  // The error should throw only for the root theme creation because user is not allowed to use a custom node `vars`.
+  // `generateThemeVars` is the closest identifier for checking that the `options` is a result of `createTheme` with CSS variables so that user can create new theme for nested ThemeProvider.
+  options.generateThemeVars === undefined) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: `vars` is a private field used for CSS variables support.\n' +
+    // #host-reference
+    'Please use another name or follow the [docs](https://mui.com/material-ui/customization/css-theme-variables/usage/) to enable the feature.' : _formatMuiErrorMessage(20));
   }
   const palette = createPalette(paletteInput);
   const systemTheme = systemCreateTheme(options);
@@ -83,14 +88,4 @@ function createThemeNoVars(options = {}, ...args) {
 
   return muiTheme;
 }
-let warnedOnce = false;
-export function createMuiTheme(...args) {
-  if (process.env.NODE_ENV !== 'production') {
-    if (!warnedOnce) {
-      warnedOnce = true;
-      console.error(['MUI: the createMuiTheme function was renamed to createTheme.', '', "You should use `import { createTheme } from '@mui/material/styles'`"].join('\n'));
-    }
-  }
-  return createThemeNoVars(...args);
-}
 export default createThemeNoVars;

package/esm/styles/index.d.ts

@@ -1,5 +1,5 @@
 export { default as THEME_ID } from "./identifier.js";
-export { default as createTheme, default as unstable_createMuiStrictModeTheme, createMuiTheme, ThemeOptions, Theme, CssThemeVariables } from "./createTheme.js";
+export { default as createTheme, default as unstable_createMuiStrictModeTheme, ThemeOptions, Theme, CssThemeVariables } from "./createTheme.js";
 export { default as adaptV4Theme, DeprecatedThemeOptions } from "./adaptV4Theme.js";
 export { Shadows } from "./shadows.js";
 export { ZIndex } from "./zIndex.js";
@@ -21,10 +21,6 @@ export { default as useTheme } from "./useTheme.js";
 export { default as useThemeProps } from "./useThemeProps.js";
 export * from "./useThemeProps.js";
 export { default as styled } from "./styled.js";
-/**
- * @deprecated will be removed in v5.beta, please use styled from @mui/material/styles instead
- */
-export { default as experimentalStyled } from "./styled.js";
 export { default as ThemeProvider } from "./ThemeProvider.js";
 export { ComponentsProps, ComponentsPropsList } from "./props.js";
 export { ComponentsVariants } from "./variants.js";

package/esm/styles/index.js

@@ -8,7 +8,7 @@ export { unstable_createBreakpoints } from '@mui/system/createBreakpoints';
 export function experimental_sx() {
   throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: The `experimental_sx` has been moved to `theme.unstable_sx`.' + 'For more details, see https://github.com/mui/material-ui/pull/35150.' : _formatMuiErrorMessage(19));
 }
-export { default as createTheme, createMuiTheme } from "./createTheme.js";
+export { default as createTheme } from "./createTheme.js";
 export { default as unstable_createMuiStrictModeTheme } from "./createMuiStrictModeTheme.js";
 export { default as createStyles } from "./createStyles.js";
 export { getUnit as unstable_getUnit, toUnitless as unstable_toUnitless } from "./cssUtils.js";
@@ -18,7 +18,6 @@ export { default as createColorScheme } from "./createColorScheme.js";
 export { default as useTheme } from "./useTheme.js";
 export { default as useThemeProps } from "./useThemeProps.js";
 export { default as styled } from "./styled.js";
-export { default as experimentalStyled } from "./styled.js";
 export { default as ThemeProvider } from "./ThemeProvider.js";
 export { StyledEngineProvider } from '@mui/system';
 // The legacy utilities from @mui/styles

package/esm/styles/overrides.d.ts

@@ -44,8 +44,8 @@ import { FormControlLabelClassKey } from "../FormControlLabel/index.js";
 import { FormGroupClassKey } from "../FormGroup/index.js";
 import { FormHelperTextClassKey } from "../FormHelperText/index.js";
 import { FormLabelClassKey } from "../FormLabel/index.js";
+import { GridLegacyClassKey } from "../GridLegacy/index.js";
 import { GridClassKey } from "../Grid/index.js";
-import { Grid2ClassKey } from "../Grid2/index.js";
 import { IconButtonClassKey } from "../IconButton/index.js";
 import { IconClassKey } from "../Icon/index.js";
 import { ImageListClassKey } from "../ImageList/index.js";
@@ -168,8 +168,8 @@ export interface ComponentNameToClassKey {
   MuiFormGroup: FormGroupClassKey;
   MuiFormHelperText: FormHelperTextClassKey;
   MuiFormLabel: FormLabelClassKey;
+  MuiGridLegacy: GridLegacyClassKey;
   MuiGrid: GridClassKey;
-  MuiGrid2: Grid2ClassKey;
   MuiIcon: IconClassKey;
   MuiIconButton: IconButtonClassKey;
   MuiImageList: ImageListClassKey;

package/esm/styles/props.d.ts

@@ -42,8 +42,8 @@ import { FormControlProps } from "../FormControl/index.js";
 import { FormGroupProps } from "../FormGroup/index.js";
 import { FormHelperTextProps } from "../FormHelperText/index.js";
 import { FormLabelProps } from "../FormLabel/index.js";
+import { GridLegacyProps } from "../GridLegacy/index.js";
 import { GridProps } from "../Grid/index.js";
-import { Grid2Props } from "../Grid2/index.js";
 import { IconButtonProps } from "../IconButton/index.js";
 import { IconProps } from "../Icon/index.js";
 import { ImageListProps } from "../ImageList/index.js";
@@ -163,8 +163,8 @@ export interface ComponentsPropsList {
   MuiFormGroup: FormGroupProps;
   MuiFormHelperText: FormHelperTextProps;
   MuiFormLabel: FormLabelProps;
+  MuiGridLegacy: GridLegacyProps;
   MuiGrid: GridProps;
-  MuiGrid2: Grid2Props;
   MuiImageList: ImageListProps;
   MuiImageListItem: ImageListItemProps;
   MuiImageListItemBar: ImageListItemBarProps;

package/esm/useAutocomplete/useAutocomplete.js

@@ -877,7 +877,6 @@ function useAutocomplete(props) {
   }
   return {
     getRootProps: (other = {}) => ({
-      'aria-owns': listboxAvailable ? `${id}-listbox` : null,
       ...other,
       onKeyDown: handleKeyDown(other),
       onMouseDown: handleMouseDown,

package/esm/utils/createSvgIcon.d.ts

@@ -1,2 +1,2 @@
-import SvgIcon from '@mui/material/SvgIcon';
+import SvgIcon from "../SvgIcon/index.js";
 export default function createSvgIcon(path: React.ReactNode, displayName: string): typeof SvgIcon;

package/esm/utils/createSvgIcon.js

@@ -10,7 +10,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export default function createSvgIcon(path, displayName) {
   function Component(props, ref) {
     return /*#__PURE__*/_jsx(SvgIcon, {
-      "data-testid": `${displayName}Icon`,
+      "data-testid": process.env.NODE_ENV !== 'production' ? `${displayName}Icon` : undefined,
       ref: ref,
       ...props,
       children: path

package/esm/utils/mergeSlotProps.d.ts

@@ -1,2 +1,2 @@
 import { SlotComponentProps } from '@mui/utils';
-export default function mergeSlotProps<T extends SlotComponentProps<React.ElementType, {}, {}>, K = T, U = T extends Function ? T : K extends Function ? K : T extends undefined ? K : T>(externalSlotProps: T | undefined, defaultSlotProps: K): U;
+export default function mergeSlotProps<T extends SlotComponentProps<React.ElementType, {}, {}>, K = T, U = (T extends Function ? T : K extends Function ? K : T extends undefined ? K : T)>(externalSlotProps: T | undefined, defaultSlotProps: K): U;