@mui/material 6.1.7 → 6.1.8

package/node/Autocomplete/Autocomplete.js

@@ -336,7 +336,7 @@ const AutocompleteNoOptions = (0, _zeroStyled.styled)('div', {
   color: (theme.vars || theme).palette.text.secondary,
   padding: '14px 16px'
 })));
-const AutocompleteListbox = (0, _zeroStyled.styled)('div', {
+const AutocompleteListbox = (0, _zeroStyled.styled)('ul', {
   name: 'MuiAutocomplete',
   slot: 'Listbox',
   overridesResolver: (props, styles) => styles.listbox
@@ -804,6 +804,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   blurOnSelect: _propTypes.default.oneOfType([_propTypes.default.oneOf(['mouse', 'touch']), _propTypes.default.bool]),
   /**
    * Props applied to the [`Chip`](https://mui.com/material-ui/api/chip/) element.
+   * @deprecated Use `slotProps.chip` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   ChipProps: _propTypes.default.object,
   /**
@@ -1006,10 +1007,12 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   /**
    * The component used to render the listbox.
    * @default 'ul'
+   * @deprecated Use `slotProps.listbox.component` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   ListboxComponent: _propTypes.default.elementType,
   /**
    * Props applied to the Listbox element.
+   * @deprecated Use `slotProps.listbox` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   ListboxProps: _propTypes.default.object,
   /**
@@ -1104,11 +1107,13 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   /**
    * The component used to render the body of the popup.
    * @default Paper
+   * @deprecated Use `slots.paper` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   PaperComponent: _propTypes.default.elementType,
   /**
    * The component used to position the popup.
    * @default Popper
+   * @deprecated Use `slots.popper` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   PopperComponent: _propTypes.default.elementType,
   /**

package/node/Avatar/Avatar.js

@@ -262,6 +262,7 @@ process.env.NODE_ENV !== "production" ? Avatar.propTypes /* remove-proptypes */
   /**
    * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image.
    * It can be used to listen for the loading error event.
+   * @deprecated Use `slotProps.img` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   imgProps: _propTypes.default.object,
   /**

package/node/Backdrop/Backdrop.js

@@ -204,6 +204,7 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes *
    * The component used for the transition.
    * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Fade
+   * @deprecated Use `slots.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   TransitionComponent: _propTypes.default.elementType,
   /**

package/node/Grid2/grid2Classes.js

@@ -15,7 +15,7 @@ const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 const DIRECTIONS = ['column-reverse', 'column', '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 grid2Classes = (0, _generateUtilityClasses.default)('MuiGrid2', ['root', 'container', 'item', 'zeroMinWidth',
+const grid2Classes = (0, _generateUtilityClasses.default)('MuiGrid2', ['root', 'container',
 // spacings
 ...SPACINGS.map(spacing => `spacing-xs-${spacing}`),
 // direction values

package/node/SpeedDial/SpeedDial.js

@@ -531,6 +531,7 @@ process.env.NODE_ENV !== "production" ? SpeedDial.propTypes /* remove-proptypes
    * The component used for the transition.
    * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Zoom
+   * * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
    */
   TransitionComponent: _propTypes.default.elementType,
   /**
@@ -549,6 +550,7 @@ process.env.NODE_ENV !== "production" ? SpeedDial.propTypes /* remove-proptypes
   /**
    * Props applied to the transition element.
    * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
+   * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
    */
   TransitionProps: _propTypes.default.object
 } : void 0;

package/node/StepLabel/StepLabel.js

@@ -261,10 +261,12 @@ process.env.NODE_ENV !== "production" ? StepLabel.propTypes /* remove-proptypes
   }),
   /**
    * The component to render in place of the [`StepIcon`](https://mui.com/material-ui/api/step-icon/).
+   * @deprecated Use `slots.stepIcon` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   StepIconComponent: _propTypes.default.elementType,
   /**
    * Props applied to the [`StepIcon`](https://mui.com/material-ui/api/step-icon/) element.
+   * @deprecated Use `slotProps.stepIcon` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   StepIconProps: _propTypes.default.object,
   /**

package/node/Tooltip/Tooltip.js

@@ -17,7 +17,6 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _colorManipulator = require("@mui/system/colorManipulator");
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _isFocusVisible = _interopRequireDefault(require("@mui/utils/isFocusVisible"));
-var _appendOwnerState = _interopRequireDefault(require("@mui/utils/appendOwnerState"));
 var _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
@@ -29,6 +28,7 @@ var _useEventCallback = _interopRequireDefault(require("../utils/useEventCallbac
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _useId = _interopRequireDefault(require("../utils/useId"));
 var _useControlled = _interopRequireDefault(require("../utils/useControlled"));
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _tooltipClasses = _interopRequireWildcard(require("./tooltipClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 function round(value) {
@@ -350,7 +350,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     slotProps = {},
     slots = {},
     title,
-    TransitionComponent: TransitionComponentProp = _Grow.default,
+    TransitionComponent: TransitionComponentProp,
     TransitionProps,
     ...other
   } = props;
@@ -600,6 +600,16 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       console.error(['MUI: You have provided a `title` prop to the child of <Tooltip />.', `Remove this title prop \`${children.props.title}\` or the Tooltip component.`].join('\n'));
     }
   }
+  const ownerState = {
+    ...props,
+    isRtl,
+    arrow,
+    disableInteractive,
+    placement,
+    PopperComponentProp,
+    touch: ignoreNonTouchEvents.current
+  };
+  const resolvedPopperProps = typeof slotProps.popper === 'function' ? slotProps.popper(ownerState) : slotProps.popper;
   const popperOptions = React.useMemo(() => {
     let tooltipModifiers = [{
       name: 'arrow',
@@ -612,44 +622,65 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     if (PopperProps.popperOptions?.modifiers) {
       tooltipModifiers = tooltipModifiers.concat(PopperProps.popperOptions.modifiers);
     }
+    if (resolvedPopperProps?.popperOptions?.modifiers) {
+      tooltipModifiers = tooltipModifiers.concat(resolvedPopperProps.popperOptions.modifiers);
+    }
     return {
       ...PopperProps.popperOptions,
+      ...resolvedPopperProps?.popperOptions,
       modifiers: tooltipModifiers
     };
-  }, [arrowRef, PopperProps]);
-  const ownerState = {
-    ...props,
-    isRtl,
-    arrow,
-    disableInteractive,
-    placement,
-    PopperComponentProp,
-    touch: ignoreNonTouchEvents.current
-  };
+  }, [arrowRef, PopperProps.popperOptions, resolvedPopperProps?.popperOptions]);
   const classes = useUtilityClasses(ownerState);
-  const PopperComponent = slots.popper ?? components.Popper ?? TooltipPopper;
-  const TransitionComponent = slots.transition ?? components.Transition ?? TransitionComponentProp ?? _Grow.default;
-  const TooltipComponent = slots.tooltip ?? components.Tooltip ?? TooltipTooltip;
-  const ArrowComponent = slots.arrow ?? components.Arrow ?? TooltipArrow;
-  const popperProps = (0, _appendOwnerState.default)(PopperComponent, {
-    ...PopperProps,
-    ...(slotProps.popper ?? componentsProps.popper),
-    className: (0, _clsx.default)(classes.popper, PopperProps?.className, (slotProps.popper ?? componentsProps.popper)?.className)
-  }, ownerState);
-  const transitionProps = (0, _appendOwnerState.default)(TransitionComponent, {
-    ...TransitionProps,
-    ...(slotProps.transition ?? componentsProps.transition)
-  }, ownerState);
-  const tooltipProps = (0, _appendOwnerState.default)(TooltipComponent, {
-    ...(slotProps.tooltip ?? componentsProps.tooltip),
-    className: (0, _clsx.default)(classes.tooltip, (slotProps.tooltip ?? componentsProps.tooltip)?.className)
-  }, ownerState);
-  const tooltipArrowProps = (0, _appendOwnerState.default)(ArrowComponent, {
-    ...(slotProps.arrow ?? componentsProps.arrow),
-    className: (0, _clsx.default)(classes.arrow, (slotProps.arrow ?? componentsProps.arrow)?.className)
-  }, ownerState);
+  const resolvedTransitionProps = typeof slotProps.transition === 'function' ? slotProps.transition(ownerState) : slotProps.transition;
+  const externalForwardedProps = {
+    slots: {
+      popper: components.Popper,
+      transition: components.Transition ?? TransitionComponentProp,
+      tooltip: components.Tooltip,
+      arrow: components.Arrow,
+      ...slots
+    },
+    slotProps: {
+      arrow: slotProps.arrow ?? componentsProps.arrow,
+      popper: {
+        ...PopperProps,
+        ...(resolvedPopperProps ?? componentsProps.popper)
+      },
+      // resolvedPopperProps can be spread because it's already an object
+      tooltip: slotProps.tooltip ?? componentsProps.tooltip,
+      transition: {
+        ...TransitionProps,
+        ...(resolvedTransitionProps ?? componentsProps.transition)
+      }
+    }
+  };
+  const [PopperSlot, popperSlotProps] = (0, _useSlot.default)('popper', {
+    elementType: TooltipPopper,
+    externalForwardedProps,
+    ownerState,
+    className: (0, _clsx.default)(classes.popper, PopperProps?.className)
+  });
+  const [TransitionSlot, transitionSlotProps] = (0, _useSlot.default)('transition', {
+    elementType: _Grow.default,
+    externalForwardedProps,
+    ownerState
+  });
+  const [TooltipSlot, tooltipSlotProps] = (0, _useSlot.default)('tooltip', {
+    elementType: TooltipTooltip,
+    className: classes.tooltip,
+    externalForwardedProps,
+    ownerState
+  });
+  const [ArrowSlot, arrowSlotProps] = (0, _useSlot.default)('arrow', {
+    elementType: TooltipArrow,
+    className: classes.arrow,
+    externalForwardedProps,
+    ownerState,
+    ref: setArrowRef
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [/*#__PURE__*/React.cloneElement(children, childrenProps), /*#__PURE__*/(0, _jsxRuntime.jsx)(PopperComponent, {
+    children: [/*#__PURE__*/React.cloneElement(children, childrenProps), /*#__PURE__*/(0, _jsxRuntime.jsx)(PopperSlot, {
       as: PopperComponentProp ?? _Popper.default,
       placement: placement,
       anchorEl: followCursor ? {
@@ -667,19 +698,18 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       id: id,
       transition: true,
       ...interactiveWrapperListeners,
-      ...popperProps,
+      ...popperSlotProps,
       popperOptions: popperOptions,
       children: ({
         TransitionProps: TransitionPropsInner
-      }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, {
+      }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionSlot, {
         timeout: theme.transitions.duration.shorter,
         ...TransitionPropsInner,
-        ...transitionProps,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(TooltipComponent, {
-          ...tooltipProps,
-          children: [title, arrow ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ArrowComponent, {
-            ...tooltipArrowProps,
-            ref: setArrowRef
+        ...transitionSlotProps,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(TooltipSlot, {
+          ...tooltipSlotProps,
+          children: [title, arrow ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ArrowSlot, {
+            ...arrowSlotProps
           }) : null]
         })
       })
@@ -711,7 +741,7 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes /* remove-proptypes */
   /**
    * The components used for each slot inside.
    *
-   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slots` 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 {}
    */
@@ -725,7 +755,7 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes /* remove-proptypes */
    * 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 v7. [How to migrate](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slotProps` 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 {}
    */
@@ -822,33 +852,27 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes /* remove-proptypes */
   placement: _propTypes.default.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
   /**
    * The component used for the popper.
-   * @default Popper
+   * @deprecated use the `slots.popper` 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.
    */
   PopperComponent: _propTypes.default.elementType,
   /**
    * Props applied to the [`Popper`](https://mui.com/material-ui/api/popper/) element.
+   * @deprecated use the `slotProps.popper` 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 {}
    */
   PopperProps: _propTypes.default.object,
   /**
-   * 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.
-   *
+   * The props used for each slot inside.
    * @default {}
    */
   slotProps: _propTypes.default.shape({
-    arrow: _propTypes.default.object,
-    popper: _propTypes.default.object,
-    tooltip: _propTypes.default.object,
-    transition: _propTypes.default.object
+    arrow: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    popper: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    tooltip: _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.
-   *
-   * This prop is an alias for the `components` prop, which will be deprecated in the future.
-   *
    * @default {}
    */
   slots: _propTypes.default.shape({
@@ -868,12 +892,14 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes /* remove-proptypes */
   /**
    * The component used for the transition.
    * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
-   * @default Grow
+   * @deprecated use the `slots.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.
    */
   TransitionComponent: _propTypes.default.elementType,
   /**
    * Props applied to the transition element.
    * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
+   * @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.
+   * @default {}
    */
   TransitionProps: _propTypes.default.object
 } : void 0;

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.1.7
+ * @mui/material v6.1.8
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/version/index.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.version = exports.prerelease = exports.patch = exports.minor = exports.major = exports.default = void 0;
-const version = exports.version = "6.1.7";
+const version = exports.version = "6.1.8";
 const major = exports.major = Number("6");
 const minor = exports.minor = Number("1");
-const patch = exports.patch = Number("7");
+const patch = exports.patch = Number("8");
 const prerelease = exports.prerelease = undefined;
 var _default = exports.default = version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "6.1.7",
+  "version": "6.1.8",
   "private": false,
   "author": "MUI Team",
   "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
@@ -35,10 +35,10 @@
     "prop-types": "^15.8.1",
     "react-is": "^18.3.1",
     "react-transition-group": "^4.4.5",
-    "@mui/core-downloads-tracker": "^6.1.7",
-    "@mui/system": "^6.1.7",
+    "@mui/system": "^6.1.8",
     "@mui/types": "^7.2.19",
-    "@mui/utils": "^6.1.7"
+    "@mui/core-downloads-tracker": "^6.1.8",
+    "@mui/utils": "^6.1.8"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
@@ -46,7 +46,7 @@
     "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@mui/material-pigment-css": "^6.1.7"
+    "@mui/material-pigment-css": "^6.1.8"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/useMediaQuery/index.d.ts

@@ -3,8 +3,9 @@ import { Theme } from '../styles/createTheme';
 
 export * from '@mui/system/useMediaQuery';
 
-declare function useMediaQuery(
-  queryInput: string | ((theme: Theme) => string),
+// TODO v7: remove the generic. It's only used to prevent a breaking change in v6 from system's useMediaQuery in https://github.com/mui/material-ui/pull/44339.
+declare function useMediaQuery<T = Theme>(
+  queryInput: string | ((theme: T) => string),
   options?: UseMediaQueryOptions,
 ): boolean;
 

package/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.1.7";
+export const version = "6.1.8";
 export const major = Number("6");
 export const minor = Number("1");
-export const patch = Number("7");
+export const patch = Number("8");
 export const prerelease = undefined;
 export default version;