@mui/material 6.1.6 → 6.1.8

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.6
+ * @mui/material v6.1.8
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/useMediaQuery/index.js

@@ -4,10 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _useMediaQuery.default;
-  }
+exports.default = void 0;
+var _useMediaQuery = require("@mui/system/useMediaQuery");
+var _identifier = _interopRequireDefault(require("../styles/identifier"));
+const useMediaQuery = (0, _useMediaQuery.unstable_createUseMediaQuery)({
+  themeId: _identifier.default
 });
-var _useMediaQuery = _interopRequireDefault(require("@mui/system/useMediaQuery"));
+var _default = exports.default = useMediaQuery;

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.6";
+const version = exports.version = "6.1.8";
 const major = exports.major = Number("6");
 const minor = exports.minor = Number("1");
-const patch = exports.patch = Number("6");
+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.6",
+  "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/system": "^6.1.6",
+    "@mui/system": "^6.1.8",
     "@mui/types": "^7.2.19",
-    "@mui/core-downloads-tracker": "^6.1.6",
-    "@mui/utils": "^6.1.6"
+    "@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.6"
+    "@mui/material-pigment-css": "^6.1.8"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/useMediaQuery/index.d.ts

@@ -1,2 +1,12 @@
-export { default } from '@mui/system/useMediaQuery';
+import { UseMediaQueryOptions } from '@mui/system/useMediaQuery';
+import { Theme } from '../styles/createTheme';
+
 export * from '@mui/system/useMediaQuery';
+
+// 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;
+
+export default useMediaQuery;

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