@mui/material 6.1.6 → 6.1.8

package/modern/Tooltip/Tooltip.js

@@ -9,7 +9,6 @@ import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
 import { useRtl } from '@mui/system/RtlProvider';
 import isFocusVisible from '@mui/utils/isFocusVisible';
-import appendOwnerState from '@mui/utils/appendOwnerState';
 import getReactElementRef from '@mui/utils/getReactElementRef';
 import { styled, useTheme } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
@@ -21,6 +20,7 @@ import useEventCallback from "../utils/useEventCallback.js";
 import useForkRef from "../utils/useForkRef.js";
 import useId from "../utils/useId.js";
 import useControlled from "../utils/useControlled.js";
+import useSlot from "../utils/useSlot.js";
 import tooltipClasses, { getTooltipUtilityClass } from "./tooltipClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function round(value) {
@@ -342,7 +342,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     slotProps = {},
     slots = {},
     title,
-    TransitionComponent: TransitionComponentProp = Grow,
+    TransitionComponent: TransitionComponentProp,
     TransitionProps,
     ...other
   } = props;
@@ -592,6 +592,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',
@@ -604,44 +614,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;
-  const TooltipComponent = slots.tooltip ?? components.Tooltip ?? TooltipTooltip;
-  const ArrowComponent = slots.arrow ?? components.Arrow ?? TooltipArrow;
-  const popperProps = appendOwnerState(PopperComponent, {
-    ...PopperProps,
-    ...(slotProps.popper ?? componentsProps.popper),
-    className: clsx(classes.popper, PopperProps?.className, (slotProps.popper ?? componentsProps.popper)?.className)
-  }, ownerState);
-  const transitionProps = appendOwnerState(TransitionComponent, {
-    ...TransitionProps,
-    ...(slotProps.transition ?? componentsProps.transition)
-  }, ownerState);
-  const tooltipProps = appendOwnerState(TooltipComponent, {
-    ...(slotProps.tooltip ?? componentsProps.tooltip),
-    className: clsx(classes.tooltip, (slotProps.tooltip ?? componentsProps.tooltip)?.className)
-  }, ownerState);
-  const tooltipArrowProps = appendOwnerState(ArrowComponent, {
-    ...(slotProps.arrow ?? componentsProps.arrow),
-    className: clsx(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] = useSlot('popper', {
+    elementType: TooltipPopper,
+    externalForwardedProps,
+    ownerState,
+    className: clsx(classes.popper, PopperProps?.className)
+  });
+  const [TransitionSlot, transitionSlotProps] = useSlot('transition', {
+    elementType: Grow,
+    externalForwardedProps,
+    ownerState
+  });
+  const [TooltipSlot, tooltipSlotProps] = useSlot('tooltip', {
+    elementType: TooltipTooltip,
+    className: classes.tooltip,
+    externalForwardedProps,
+    ownerState
+  });
+  const [ArrowSlot, arrowSlotProps] = useSlot('arrow', {
+    elementType: TooltipArrow,
+    className: classes.arrow,
+    externalForwardedProps,
+    ownerState,
+    ref: setArrowRef
+  });
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/React.cloneElement(children, childrenProps), /*#__PURE__*/_jsx(PopperComponent, {
+    children: [/*#__PURE__*/React.cloneElement(children, childrenProps), /*#__PURE__*/_jsx(PopperSlot, {
       as: PopperComponentProp ?? Popper,
       placement: placement,
       anchorEl: followCursor ? {
@@ -659,19 +690,18 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       id: id,
       transition: true,
       ...interactiveWrapperListeners,
-      ...popperProps,
+      ...popperSlotProps,
       popperOptions: popperOptions,
       children: ({
         TransitionProps: TransitionPropsInner
-      }) => /*#__PURE__*/_jsx(TransitionComponent, {
+      }) => /*#__PURE__*/_jsx(TransitionSlot, {
         timeout: theme.transitions.duration.shorter,
         ...TransitionPropsInner,
-        ...transitionProps,
-        children: /*#__PURE__*/_jsxs(TooltipComponent, {
-          ...tooltipProps,
-          children: [title, arrow ? /*#__PURE__*/_jsx(ArrowComponent, {
-            ...tooltipArrowProps,
-            ref: setArrowRef
+        ...transitionSlotProps,
+        children: /*#__PURE__*/_jsxs(TooltipSlot, {
+          ...tooltipSlotProps,
+          children: [title, arrow ? /*#__PURE__*/_jsx(ArrowSlot, {
+            ...arrowSlotProps
           }) : null]
         })
       })
@@ -703,7 +733,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 {}
    */
@@ -717,7 +747,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 {}
    */
@@ -814,33 +844,27 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes /* remove-proptypes */
   placement: PropTypes.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.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.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.shape({
-    arrow: PropTypes.object,
-    popper: PropTypes.object,
-    tooltip: PropTypes.object,
-    transition: PropTypes.object
+    arrow: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    popper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    tooltip: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    transition: PropTypes.oneOfType([PropTypes.func, PropTypes.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.shape({
@@ -860,12 +884,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.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.object
 } : void 0;

package/modern/index.js

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

package/modern/useMediaQuery/index.js

@@ -1 +1,6 @@
-export { default } from '@mui/system/useMediaQuery';
+import { unstable_createUseMediaQuery } from '@mui/system/useMediaQuery';
+import THEME_ID from "../styles/identifier.js";
+const useMediaQuery = unstable_createUseMediaQuery({
+  themeId: THEME_ID
+});
+export default useMediaQuery;

package/modern/version/index.js

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

package/node/Accordion/Accordion.js

@@ -310,11 +310,13 @@ process.env.NODE_ENV !== "production" ? Accordion.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.
+   * @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,
   /**
    * 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. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   TransitionProps: _propTypes.default.object
 } : void 0;

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/Grid/Grid.js

@@ -180,7 +180,7 @@ function generateRowGap({
       const themeSpacing = theme.spacing(propValue);
       if (themeSpacing !== '0px') {
         return {
-          marginTop: theme.spacing(-propValue),
+          marginTop: `-${themeSpacing}`,
           [`& > .${_gridClasses.default.item}`]: {
             paddingTop: themeSpacing
           }
@@ -225,7 +225,7 @@ function generateColumnGap({
     }, columnSpacingValues, (propValue, breakpoint) => {
       const themeSpacing = theme.spacing(propValue);
       if (themeSpacing !== '0px') {
-        const negativeValue = theme.spacing(-propValue);
+        const negativeValue = `-${themeSpacing}`;
         return {
           width: `calc(100% + ${themeSpacing})`,
           marginLeft: negativeValue,

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/Rating/Rating.js

@@ -324,6 +324,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
     props: inProps
   });
   const {
+    component = 'span',
     className,
     defaultValue = null,
     disabled = false,
@@ -464,6 +465,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
   const [emptyValueFocused, setEmptyValueFocused] = React.useState(false);
   const ownerState = {
     ...props,
+    component,
     defaultValue,
     disabled,
     emptyIcon,
@@ -480,6 +482,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
   };
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RatingRoot, {
+    as: component,
     ref: handleRef,
     onMouseMove: handleMouseMove,
     onMouseLeave: handleMouseLeave,
@@ -565,6 +568,10 @@ process.env.NODE_ENV !== "production" ? Rating.propTypes /* remove-proptypes */
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
   // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: _propTypes.default.node,
   /**
    * Override or extend the styles applied to the component.
    */
@@ -573,6 +580,11 @@ process.env.NODE_ENV !== "production" ? Rating.propTypes /* remove-proptypes */
    * @ignore
    */
   className: _propTypes.default.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: _propTypes.default.elementType,
   /**
    * The default value. Use when the component is not controlled.
    * @default null

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,
   /**