@mui/material 5.10.10 → 5.10.12

package/esm/InputBase/inputBaseClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getInputBaseUtilityClass(slot) {
   return generateUtilityClass('MuiInputBase', slot);
 }

package/esm/InputLabel/inputLabelClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getInputLabelUtilityClasses(slot) {
   return generateUtilityClass('MuiInputLabel', slot);
 }

package/esm/LinearProgress/linearProgressClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getLinearProgressUtilityClass(slot) {
   return generateUtilityClass('MuiLinearProgress', slot);
 }

package/esm/Link/linkClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getLinkUtilityClass(slot) {
   return generateUtilityClass('MuiLink', slot);
 }

package/esm/List/listClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getListUtilityClass(slot) {
   return generateUtilityClass('MuiList', slot);
 }

package/esm/ListItem/ListItem.js

@@ -165,11 +165,11 @@ const ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
         other = _objectWithoutPropertiesLoose(props, _excluded2);
 
   const context = React.useContext(ListContext);
-  const childContext = {
+  const childContext = React.useMemo(() => ({
     dense: dense || context.dense || false,
     alignItems,
     disableGutters
-  };
+  }), [alignItems, context.dense, dense, disableGutters]);
   const listItemRef = React.useRef(null);
   useEnhancedEffect(() => {
     if (autoFocus) {

package/esm/ListItem/listItemClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getListItemUtilityClass(slot) {
   return generateUtilityClass('MuiListItem', slot);
 }

package/esm/ListItemAvatar/listItemAvatarClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getListItemAvatarUtilityClass(slot) {
   return generateUtilityClass('MuiListItemAvatar', slot);
 }

package/esm/ListItemButton/ListItemButton.js

@@ -121,11 +121,11 @@ const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inP
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const context = React.useContext(ListContext);
-  const childContext = {
+  const childContext = React.useMemo(() => ({
     dense: dense || context.dense || false,
     alignItems,
     disableGutters
-  };
+  }), [alignItems, context.dense, dense, disableGutters]);
   const listItemRef = React.useRef(null);
   useEnhancedEffect(() => {
     if (autoFocus) {

package/esm/ListItemButton/listItemButtonClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getListItemButtonUtilityClass(slot) {
   return generateUtilityClass('MuiListItemButton', slot);
 }

package/esm/ListItemIcon/listItemIconClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getListItemIconUtilityClass(slot) {
   return generateUtilityClass('MuiListItemIcon', slot);
 }

package/esm/ListItemSecondaryAction/listItemSecondaryActionClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getListItemSecondaryActionClassesUtilityClass(slot) {
   return generateUtilityClass('MuiListItemSecondaryAction', slot);
 }

package/esm/ListItemText/listItemTextClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getListItemTextUtilityClass(slot) {
   return generateUtilityClass('MuiListItemText', slot);
 }

package/esm/ListSubheader/listSubheaderClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getListSubheaderUtilityClass(slot) {
   return generateUtilityClass('MuiListSubheader', slot);
 }

package/esm/Menu/menuClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getMenuUtilityClass(slot) {
   return generateUtilityClass('MuiMenu', slot);
 }

package/esm/MenuItem/MenuItem.js

@@ -116,7 +116,7 @@ const MenuItemRoot = styled(ButtonBase, {
   }
 }, ownerState.dense && _extends({
   minHeight: 32,
-  // https://material.io/components/menus#specs > Dense
+  // https://m2.material.io/components/menus#specs > Dense
   paddingTop: 4,
   paddingBottom: 4
 }, theme.typography.body2, {
@@ -144,10 +144,10 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const context = React.useContext(ListContext);
-  const childContext = {
+  const childContext = React.useMemo(() => ({
     dense: dense || context.dense || false,
     disableGutters
-  };
+  }), [context.dense, dense, disableGutters]);
   const menuItemRef = React.useRef(null);
   useEnhancedEffect(() => {
     if (autoFocus) {

package/esm/MenuItem/menuItemClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getMenuItemUtilityClass(slot) {
   return generateUtilityClass('MuiMenuItem', slot);
 }

package/esm/MobileStepper/mobileStepperClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getMobileStepperUtilityClass(slot) {
   return generateUtilityClass('MuiMobileStepper', slot);
 }

package/esm/Modal/Modal.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["BackdropComponent", "BackdropProps", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "theme"];
+const _excluded = ["BackdropComponent", "BackdropProps", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "slotProps", "slots", "theme"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import ModalUnstyled, { modalUnstyledClasses } from '@mui/base/ModalUnstyled';
@@ -62,7 +62,7 @@ const ModalBackdrop = styled(Backdrop, {
  */
 
 const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
-  var _ref, _components$Root;
+  var _ref, _slots$root, _ref2, _slots$backdrop, _slotProps$root, _slotProps$backdrop;
 
   const props = useThemeProps({
     name: 'MuiModal',
@@ -85,6 +85,8 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     disableScrollLock = false,
     hideBackdrop = false,
     keepMounted = false,
+    slotProps,
+    slots,
     // eslint-disable-next-line react/prop-types
     theme
   } = props,
@@ -108,18 +110,21 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
   });
 
   const classes = extendUtilityClasses(ownerState);
-  const Root = (_ref = (_components$Root = components.Root) != null ? _components$Root : component) != null ? _ref : ModalRoot;
+  const RootSlot = (_ref = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref : ModalRoot;
+  const BackdropSlot = (_ref2 = (_slots$backdrop = slots == null ? void 0 : slots.backdrop) != null ? _slots$backdrop : components.Backdrop) != null ? _ref2 : BackdropComponent;
+  const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
+  const backdropSlotProps = (_slotProps$backdrop = slotProps == null ? void 0 : slotProps.backdrop) != null ? _slotProps$backdrop : componentsProps.backdrop;
   return /*#__PURE__*/_jsx(ModalUnstyled, _extends({
-    components: _extends({
-      Root,
-      Backdrop: BackdropComponent
-    }, components),
-    componentsProps: {
-      root: () => _extends({}, resolveComponentProps(componentsProps.root, ownerState), !isHostComponent(Root) && {
+    slots: {
+      root: RootSlot,
+      backdrop: BackdropSlot
+    },
+    slotProps: {
+      root: () => _extends({}, resolveComponentProps(rootSlotProps, ownerState), !isHostComponent(RootSlot) && {
         as: component,
         theme
       }),
-      backdrop: () => _extends({}, BackdropProps, resolveComponentProps(componentsProps.backdrop, ownerState))
+      backdrop: () => _extends({}, BackdropProps, resolveComponentProps(backdropSlotProps, ownerState))
     },
     onTransitionEnter: () => setExited(false),
     onTransitionExited: () => setExited(true),
@@ -140,8 +145,8 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
 
   /**
    * A backdrop component. This prop enables custom backdrop rendering.
-   * @deprecated Use `components.Backdrop` instead. While this prop currently works, it will be removed in the next major version.
-   * Use the `components.Backdrop` prop to make your application ready for the next version of Material UI.
+   * @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
+   * Use the `slots.backdrop` prop to make your application ready for the next version of Material UI.
    * @default styled(Backdrop, {
    *   name: 'MuiModal',
    *   slot: 'Backdrop',
@@ -156,7 +161,7 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
 
   /**
    * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
-   * @deprecated Use `componentsProps.backdrop` instead.
+   * @deprecated Use `slotProps.backdrop` instead.
    */
   BackdropProps: PropTypes.object,
 
@@ -291,6 +296,25 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
    */
   open: PropTypes.bool.isRequired,
 
+  /**
+   * The props used for each slot inside the Modal.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    backdrop: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+
+  /**
+   * The components used for each slot inside the Modal.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    backdrop: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/esm/NativeSelect/nativeSelectClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getNativeSelectUtilityClasses(slot) {
   return generateUtilityClass('MuiNativeSelect', slot);
 }

package/esm/OutlinedInput/outlinedInputClasses.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { generateUtilityClasses, generateUtilityClass } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 import { inputBaseClasses } from '../InputBase';
 export function getOutlinedInputUtilityClass(slot) {
   return generateUtilityClass('MuiOutlinedInput', slot);

package/esm/Pagination/paginationClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getPaginationUtilityClass(slot) {
   return generateUtilityClass('MuiPagination', slot);
 }

package/esm/PaginationItem/paginationItemClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getPaginationItemUtilityClass(slot) {
   return generateUtilityClass('MuiPaginationItem', slot);
 }

package/esm/Paper/paperClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getPaperUtilityClass(slot) {
   return generateUtilityClass('MuiPaper', slot);
 }

package/esm/Popover/popoverClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getPopoverUtilityClass(slot) {
   return generateUtilityClass('MuiPopover', slot);
 }

package/esm/Popper/Popper.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["components", "componentsProps", "slots", "slotProps"];
 import PopperUnstyled from '@mui/base/PopperUnstyled';
 import { useThemeWithoutDefault as useTheme } from '@mui/system';
 import { HTMLElementType, refType } from '@mui/utils';
@@ -25,14 +27,30 @@ const PopperRoot = styled(PopperUnstyled, {
  */
 
 const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
+  var _slots$root;
+
   const theme = useTheme();
-  const props = useThemeProps({
+
+  const _useThemeProps = useThemeProps({
     props: inProps,
     name: 'MuiPopper'
-  });
+  }),
+        {
+    components,
+    componentsProps,
+    slots,
+    slotProps
+  } = _useThemeProps,
+        other = _objectWithoutPropertiesLoose(_useThemeProps, _excluded);
+
+  const RootComponent = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components == null ? void 0 : components.Root;
   return /*#__PURE__*/_jsx(PopperRoot, _extends({
-    direction: theme == null ? void 0 : theme.direction
-  }, props, {
+    direction: theme == null ? void 0 : theme.direction,
+    slots: {
+      root: RootComponent
+    },
+    slotProps: slotProps != null ? slotProps : componentsProps
+  }, other, {
     ref: ref
   }));
 });
@@ -158,6 +176,23 @@ process.env.NODE_ENV !== "production" ? Popper.propTypes
    */
   popperRef: refType,
 
+  /**
+   * The props used for each slot inside the Popper.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+
+  /**
+   * The components used for each slot inside the Popper.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    root: PropTypes.elementType
+  }),
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/esm/Radio/Radio.js

@@ -42,7 +42,8 @@ const RadioRoot = styled(SwitchBase, {
   theme,
   ownerState
 }) => _extends({
-  color: (theme.vars || theme).palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary
+}, !ownerState.disableRipple && {
   '&:hover': {
     backgroundColor: theme.vars ? `rgba(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity

package/esm/Radio/radioClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getRadioUtilityClass(slot) {
   return generateUtilityClass('MuiRadio', slot);
 }

package/esm/RadioGroup/RadioGroup.js

@@ -42,22 +42,22 @@ const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref)
     }
   }), []);
   const handleRef = useForkRef(ref, rootRef);
+  const name = useId(nameProp);
+  const contextValue = React.useMemo(() => ({
+    name,
 
-  const handleChange = event => {
-    setValueState(event.target.value);
+    onChange(event) {
+      setValueState(event.target.value);
 
-    if (onChange) {
-      onChange(event, event.target.value);
-    }
-  };
+      if (onChange) {
+        onChange(event, event.target.value);
+      }
+    },
 
-  const name = useId(nameProp);
+    value
+  }), [name, onChange, setValueState, value]);
   return /*#__PURE__*/_jsx(RadioGroupContext.Provider, {
-    value: {
-      name,
-      onChange: handleChange,
-      value
-    },
+    value: contextValue,
     children: /*#__PURE__*/_jsx(FormGroup, _extends({
       role: "radiogroup",
       ref: handleRef

package/esm/Rating/ratingClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getRatingUtilityClass(slot) {
   return generateUtilityClass('MuiRating', slot);
 }

package/esm/ScopedCssBaseline/scopedCssBaselineClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getScopedCssBaselineUtilityClass(slot) {
   return generateUtilityClass('MuiScopedCssBaseline', slot);
 }

package/esm/Select/selectClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getSelectUtilityClasses(slot) {
   return generateUtilityClass('MuiSelect', slot);
 }

package/esm/Skeleton/skeletonClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getSkeletonUtilityClass(slot) {
   return generateUtilityClass('MuiSkeleton', slot);
 }