@mui/material 6.4.4 → 6.4.6

package/modern/internal/SwitchBase.js

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
 import refType from '@mui/utils/refType';
 import composeClasses from '@mui/utils/composeClasses';
 import capitalize from "../utils/capitalize.js";
@@ -12,6 +11,7 @@ import useControlled from "../utils/useControlled.js";
 import useFormControl from "../FormControl/useFormControl.js";
 import ButtonBase from "../ButtonBase/index.js";
 import { getSwitchBaseUtilityClass } from "./switchBaseClasses.js";
+import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -86,7 +86,6 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     autoFocus,
     checked: checkedProp,
     checkedIcon,
-    className,
     defaultChecked,
     disabled: disabledProp,
     disableFocusRipple = false,
@@ -104,6 +103,8 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     tabIndex,
     type,
     value,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const [checked, setCheckedState] = useControlled({
@@ -156,38 +157,75 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     edge
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsxs(SwitchBaseRoot, {
-    component: "span",
-    className: clsx(classes.root, className),
-    centerRipple: true,
-    focusRipple: !disableFocusRipple,
-    disabled: disabled,
-    tabIndex: null,
-    role: undefined,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    ownerState: ownerState,
-    ref: ref,
-    ...other,
-    children: [/*#__PURE__*/_jsx(SwitchBaseInput, {
-      autoFocus: autoFocus,
+  const externalForwardedProps = {
+    slots,
+    slotProps: {
+      input: inputProps,
+      ...slotProps
+    }
+  };
+  const [RootSlot, rootSlotProps] = useSlot('root', {
+    ref,
+    elementType: SwitchBaseRoot,
+    className: classes.root,
+    shouldForwardComponentProp: true,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      component: 'span',
+      ...other
+    },
+    getSlotProps: handlers => ({
+      ...handlers,
+      onFocus: event => {
+        handlers.onFocus?.(event);
+        handleFocus(event);
+      },
+      onBlur: event => {
+        handlers.onBlur?.(event);
+        handleBlur(event);
+      }
+    }),
+    ownerState,
+    additionalProps: {
+      centerRipple: true,
+      focusRipple: !disableFocusRipple,
+      disabled,
+      role: undefined,
+      tabIndex: null
+    }
+  });
+  const [InputSlot, inputSlotProps] = useSlot('input', {
+    ref: inputRef,
+    elementType: SwitchBaseInput,
+    className: classes.input,
+    externalForwardedProps,
+    getSlotProps: handlers => ({
+      onChange: event => {
+        handlers.onChange?.(event);
+        handleInputChange(event);
+      }
+    }),
+    ownerState,
+    additionalProps: {
+      autoFocus,
       checked: checkedProp,
-      defaultChecked: defaultChecked,
-      className: classes.input,
-      disabled: disabled,
+      defaultChecked,
+      disabled,
       id: hasLabelFor ? id : undefined,
-      name: name,
-      onChange: handleInputChange,
-      readOnly: readOnly,
-      ref: inputRef,
-      required: required,
-      ownerState: ownerState,
-      tabIndex: tabIndex,
-      type: type,
+      name,
+      readOnly,
+      required,
+      tabIndex,
+      type,
       ...(type === 'checkbox' && value === undefined ? {} : {
         value
-      }),
-      ...inputProps
+      })
+    }
+  });
+  return /*#__PURE__*/_jsxs(RootSlot, {
+    ...rootSlotProps,
+    children: [/*#__PURE__*/_jsx(InputSlot, {
+      ...inputSlotProps
     }), checked ? checkedIcon : icon]
   });
 });
@@ -280,6 +318,22 @@ process.env.NODE_ENV !== "production" ? SwitchBase.propTypes = {
    * If `true`, the `input` element is required.
    */
   required: PropTypes.bool,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    input: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/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);

package/modern/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/modern/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.4.4";
+export const version = "6.4.6";
 export const major = Number("6");
 export const minor = Number("4");
-export const patch = Number("4");
+export const patch = Number("6");
 export const prerelease = undefined;
 export default version;

package/node/Button/Button.js

@@ -508,9 +508,9 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     variant = 'text',
     ...other
   } = props;
-  const id = (0, _utils.unstable_useId)(idProp);
+  const loadingId = (0, _utils.unstable_useId)(idProp);
   const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
-    "aria-labelledby": id,
+    "aria-labelledby": loadingId,
     color: "inherit",
     size: 16
   });
@@ -570,7 +570,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     focusVisibleClassName: (0, _clsx.default)(classes.focusVisible, focusVisibleClassName),
     ref: ref,
     type: type,
-    id: id,
+    id: loading ? loadingId : idProp,
     ...other,
     classes: classes,
     children: [startIcon, loadingPosition !== 'end' && loader, children, loadingPosition === 'end' && loader, endIcon]

package/node/Checkbox/Checkbox.js

@@ -10,7 +10,6 @@ exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _refType = _interopRequireDefault(require("@mui/utils/refType"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _colorManipulator = require("@mui/system/colorManipulator");
 var _SwitchBase = _interopRequireDefault(require("../internal/SwitchBase"));
@@ -24,6 +23,8 @@ var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
+var _utils = require("../utils");
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -121,6 +122,8 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
     size = 'medium',
     disableRipple = false,
     className,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const icon = indeterminate ? indeterminateIconProp : iconProp;
@@ -133,23 +136,37 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
     size
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckboxRoot, {
-    type: "checkbox",
-    inputProps: {
-      'data-indeterminate': indeterminate,
-      ...inputProps
-    },
-    icon: /*#__PURE__*/React.cloneElement(icon, {
-      fontSize: icon.props.fontSize ?? size
-    }),
-    checkedIcon: /*#__PURE__*/React.cloneElement(indeterminateIcon, {
-      fontSize: indeterminateIcon.props.fontSize ?? size
-    }),
-    ownerState: ownerState,
-    ref: ref,
+  const externalInputProps = slotProps.input ?? inputProps;
+  const [RootSlot, rootSlotProps] = (0, _useSlot.default)('root', {
+    ref,
+    elementType: CheckboxRoot,
     className: (0, _clsx.default)(classes.root, className),
-    disableRipple: disableRipple,
-    ...other,
+    shouldForwardComponentProp: true,
+    externalForwardedProps: {
+      slots,
+      slotProps,
+      ...other
+    },
+    ownerState,
+    additionalProps: {
+      type: 'checkbox',
+      icon: /*#__PURE__*/React.cloneElement(icon, {
+        fontSize: icon.props.fontSize ?? size
+      }),
+      checkedIcon: /*#__PURE__*/React.cloneElement(indeterminateIcon, {
+        fontSize: indeterminateIcon.props.fontSize ?? size
+      }),
+      disableRipple,
+      slots,
+      slotProps: {
+        input: (0, _utils.mergeSlotProps)(typeof externalInputProps === 'function' ? externalInputProps(ownerState) : externalInputProps, {
+          'data-indeterminate': indeterminate
+        })
+      }
+    }
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RootSlot, {
+    ...rootSlotProps,
     classes: classes
   });
 });
@@ -220,12 +237,9 @@ process.env.NODE_ENV !== "production" ? Checkbox.propTypes /* remove-proptypes *
   indeterminateIcon: _propTypes.default.node,
   /**
    * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
+   * @deprecated Use `slotProps.input` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   inputProps: _propTypes.default.object,
-  /**
-   * Pass a ref to the `input` element.
-   */
-  inputRef: _refType.default,
   /**
    * Callback fired when the state is changed.
    *
@@ -244,6 +258,22 @@ process.env.NODE_ENV !== "production" ? Checkbox.propTypes /* remove-proptypes *
    * @default 'medium'
    */
   size: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['medium', 'small']), _propTypes.default.string]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: _propTypes.default.shape({
+    input: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: _propTypes.default.shape({
+    input: _propTypes.default.elementType,
+    root: _propTypes.default.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/node/Drawer/Drawer.js

@@ -24,6 +24,8 @@ var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _drawerClasses = require("./drawerClasses");
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
+var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const overridesResolver = (props, styles) => {
   const {
@@ -203,9 +205,11 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
     PaperProps = {},
     SlideProps,
     // eslint-disable-next-line react/prop-types
-    TransitionComponent = _Slide.default,
+    TransitionComponent,
     transitionDuration = defaultTransitionDuration,
     variant = 'temporary',
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
 
@@ -229,56 +233,100 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
     ...other
   };
   const classes = useUtilityClasses(ownerState);
-  const drawer = /*#__PURE__*/(0, _jsxRuntime.jsx)(DrawerPaper, {
-    elevation: variant === 'temporary' ? elevation : 0,
-    square: true,
-    ...PaperProps,
+  const externalForwardedProps = {
+    slots: {
+      transition: TransitionComponent,
+      ...slots
+    },
+    slotProps: {
+      paper: PaperProps,
+      transition: SlideProps,
+      ...slotProps,
+      backdrop: (0, _utils.mergeSlotProps)(slotProps.backdrop || {
+        ...BackdropProps,
+        ...BackdropPropsProp
+      }, {
+        transitionDuration
+      })
+    }
+  };
+  const [RootSlot, rootSlotProps] = (0, _useSlot.default)('root', {
+    ref,
+    elementType: DrawerRoot,
+    className: (0, _clsx.default)(classes.root, classes.modal, className),
+    shouldForwardComponentProp: true,
+    ownerState,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other,
+      ...ModalProps
+    },
+    additionalProps: {
+      open,
+      onClose,
+      hideBackdrop,
+      slots: {
+        backdrop: externalForwardedProps.slots.backdrop
+      },
+      slotProps: {
+        backdrop: externalForwardedProps.slotProps.backdrop
+      }
+    }
+  });
+  const [PaperSlot, paperSlotProps] = (0, _useSlot.default)('paper', {
+    elementType: DrawerPaper,
+    shouldForwardComponentProp: true,
     className: (0, _clsx.default)(classes.paper, PaperProps.className),
-    ownerState: ownerState,
+    ownerState,
+    externalForwardedProps,
+    additionalProps: {
+      elevation: variant === 'temporary' ? elevation : 0,
+      square: true
+    }
+  });
+  const [DockedSlot, dockedSlotProps] = (0, _useSlot.default)('docked', {
+    elementType: DrawerDockedRoot,
+    ref,
+    className: (0, _clsx.default)(classes.root, classes.docked, className),
+    ownerState,
+    externalForwardedProps,
+    additionalProps: other // pass `other` here because `DockedSlot` is also a root slot for some variants
+  });
+  const [TransitionSlot, transitionSlotProps] = (0, _useSlot.default)('transition', {
+    elementType: _Slide.default,
+    ownerState,
+    externalForwardedProps,
+    additionalProps: {
+      in: open,
+      direction: oppositeDirection[anchorInvariant],
+      timeout: transitionDuration,
+      appear: mounted.current
+    }
+  });
+  const drawer = /*#__PURE__*/(0, _jsxRuntime.jsx)(PaperSlot, {
+    ...paperSlotProps,
     children: children
   });
   if (variant === 'permanent') {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(DrawerDockedRoot, {
-      className: (0, _clsx.default)(classes.root, classes.docked, className),
-      ownerState: ownerState,
-      ref: ref,
-      ...other,
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(DockedSlot, {
+      ...dockedSlotProps,
       children: drawer
     });
   }
-  const slidingDrawer = /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, {
-    in: open,
-    direction: oppositeDirection[anchorInvariant],
-    timeout: transitionDuration,
-    appear: mounted.current,
-    ...SlideProps,
+  const slidingDrawer = /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionSlot, {
+    ...transitionSlotProps,
     children: drawer
   });
   if (variant === 'persistent') {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(DrawerDockedRoot, {
-      className: (0, _clsx.default)(classes.root, classes.docked, className),
-      ownerState: ownerState,
-      ref: ref,
-      ...other,
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(DockedSlot, {
+      ...dockedSlotProps,
       children: slidingDrawer
     });
   }
 
   // variant === temporary
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DrawerRoot, {
-    BackdropProps: {
-      ...BackdropProps,
-      ...BackdropPropsProp,
-      transitionDuration
-    },
-    className: (0, _clsx.default)(classes.root, classes.modal, className),
-    open: open,
-    ownerState: ownerState,
-    onClose: onClose,
-    hideBackdrop: hideBackdrop,
-    ref: ref,
-    ...other,
-    ...ModalProps,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RootSlot, {
+    ...rootSlotProps,
     children: slidingDrawer
   });
 });
@@ -338,13 +386,37 @@ process.env.NODE_ENV !== "production" ? Drawer.propTypes /* remove-proptypes */
   open: _propTypes.default.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 v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default {}
    */
   PaperProps: _propTypes.default.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 v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   SlideProps: _propTypes.default.object,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: _propTypes.default.shape({
+    backdrop: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    docked: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    paper: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    transition: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: _propTypes.default.shape({
+    backdrop: _propTypes.default.elementType,
+    docked: _propTypes.default.elementType,
+    paper: _propTypes.default.elementType,
+    root: _propTypes.default.elementType,
+    transition: _propTypes.default.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/node/IconButton/IconButton.js

@@ -200,9 +200,9 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     loadingIndicator: loadingIndicatorProp,
     ...other
   } = props;
-  const id = (0, _utils.unstable_useId)(idProp);
+  const loadingId = (0, _utils.unstable_useId)(idProp);
   const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
-    "aria-labelledby": id,
+    "aria-labelledby": loadingId,
     color: "inherit",
     size: 16
   });
@@ -218,7 +218,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
   };
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(IconButtonRoot, {
-    id: id,
+    id: loading ? loadingId : idProp,
     className: (0, _clsx.default)(classes.root, className),
     centerRipple: true,
     focusRipple: !disableFocusRipple,