@mui/material 6.1.7 → 6.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/Accordion/Accordion.d.ts +2 -0
  2. package/Accordion/Accordion.js +2 -0
  3. package/Autocomplete/Autocomplete.d.ts +5 -0
  4. package/Autocomplete/Autocomplete.js +6 -1
  5. package/Avatar/Avatar.d.ts +1 -0
  6. package/Avatar/Avatar.js +1 -0
  7. package/Backdrop/Backdrop.d.ts +1 -0
  8. package/Backdrop/Backdrop.js +1 -0
  9. package/CHANGELOG.md +53 -0
  10. package/Grid2/grid2Classes.js +1 -1
  11. package/SpeedDial/SpeedDial.d.ts +2 -0
  12. package/SpeedDial/SpeedDial.js +2 -0
  13. package/StepIcon/StepIcon.d.ts +5 -2
  14. package/StepLabel/StepLabel.d.ts +2 -0
  15. package/StepLabel/StepLabel.js +2 -0
  16. package/Tooltip/Tooltip.d.ts +69 -36
  17. package/Tooltip/Tooltip.js +84 -58
  18. package/index.js +1 -1
  19. package/modern/Accordion/Accordion.js +2 -0
  20. package/modern/Autocomplete/Autocomplete.js +6 -1
  21. package/modern/Avatar/Avatar.js +1 -0
  22. package/modern/Backdrop/Backdrop.js +1 -0
  23. package/modern/Grid2/grid2Classes.js +1 -1
  24. package/modern/SpeedDial/SpeedDial.js +2 -0
  25. package/modern/StepLabel/StepLabel.js +2 -0
  26. package/modern/Tooltip/Tooltip.js +84 -58
  27. package/modern/index.js +1 -1
  28. package/modern/version/index.js +2 -2
  29. package/node/Accordion/Accordion.js +2 -0
  30. package/node/Autocomplete/Autocomplete.js +6 -1
  31. package/node/Avatar/Avatar.js +1 -0
  32. package/node/Backdrop/Backdrop.js +1 -0
  33. package/node/Grid2/grid2Classes.js +1 -1
  34. package/node/SpeedDial/SpeedDial.js +2 -0
  35. package/node/StepLabel/StepLabel.js +2 -0
  36. package/node/Tooltip/Tooltip.js +84 -58
  37. package/node/index.js +1 -1
  38. package/node/version/index.js +2 -2
  39. package/package.json +5 -5
  40. package/useMediaQuery/index.d.ts +3 -2
  41. package/version/index.js +2 -2
@@ -9,7 +9,6 @@ import composeClasses from '@mui/utils/composeClasses';
9
9
  import { alpha } from '@mui/system/colorManipulator';
10
10
  import { useRtl } from '@mui/system/RtlProvider';
11
11
  import isFocusVisible from '@mui/utils/isFocusVisible';
12
- import appendOwnerState from '@mui/utils/appendOwnerState';
13
12
  import getReactElementRef from '@mui/utils/getReactElementRef';
14
13
  import { styled, useTheme } from "../zero-styled/index.js";
15
14
  import memoTheme from "../utils/memoTheme.js";
@@ -21,6 +20,7 @@ import useEventCallback from "../utils/useEventCallback.js";
21
20
  import useForkRef from "../utils/useForkRef.js";
22
21
  import useId from "../utils/useId.js";
23
22
  import useControlled from "../utils/useControlled.js";
23
+ import useSlot from "../utils/useSlot.js";
24
24
  import tooltipClasses, { getTooltipUtilityClass } from "./tooltipClasses.js";
25
25
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
26
26
  function round(value) {
@@ -342,7 +342,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
342
342
  slotProps = {},
343
343
  slots = {},
344
344
  title,
345
- TransitionComponent: TransitionComponentProp = Grow,
345
+ TransitionComponent: TransitionComponentProp,
346
346
  TransitionProps,
347
347
  ...other
348
348
  } = props;
@@ -592,6 +592,16 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
592
592
  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'));
593
593
  }
594
594
  }
595
+ const ownerState = {
596
+ ...props,
597
+ isRtl,
598
+ arrow,
599
+ disableInteractive,
600
+ placement,
601
+ PopperComponentProp,
602
+ touch: ignoreNonTouchEvents.current
603
+ };
604
+ const resolvedPopperProps = typeof slotProps.popper === 'function' ? slotProps.popper(ownerState) : slotProps.popper;
595
605
  const popperOptions = React.useMemo(() => {
596
606
  let tooltipModifiers = [{
597
607
  name: 'arrow',
@@ -604,44 +614,65 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
604
614
  if (PopperProps.popperOptions?.modifiers) {
605
615
  tooltipModifiers = tooltipModifiers.concat(PopperProps.popperOptions.modifiers);
606
616
  }
617
+ if (resolvedPopperProps?.popperOptions?.modifiers) {
618
+ tooltipModifiers = tooltipModifiers.concat(resolvedPopperProps.popperOptions.modifiers);
619
+ }
607
620
  return {
608
621
  ...PopperProps.popperOptions,
622
+ ...resolvedPopperProps?.popperOptions,
609
623
  modifiers: tooltipModifiers
610
624
  };
611
- }, [arrowRef, PopperProps]);
612
- const ownerState = {
613
- ...props,
614
- isRtl,
615
- arrow,
616
- disableInteractive,
617
- placement,
618
- PopperComponentProp,
619
- touch: ignoreNonTouchEvents.current
620
- };
625
+ }, [arrowRef, PopperProps.popperOptions, resolvedPopperProps?.popperOptions]);
621
626
  const classes = useUtilityClasses(ownerState);
622
- const PopperComponent = slots.popper ?? components.Popper ?? TooltipPopper;
623
- const TransitionComponent = slots.transition ?? components.Transition ?? TransitionComponentProp ?? Grow;
624
- const TooltipComponent = slots.tooltip ?? components.Tooltip ?? TooltipTooltip;
625
- const ArrowComponent = slots.arrow ?? components.Arrow ?? TooltipArrow;
626
- const popperProps = appendOwnerState(PopperComponent, {
627
- ...PopperProps,
628
- ...(slotProps.popper ?? componentsProps.popper),
629
- className: clsx(classes.popper, PopperProps?.className, (slotProps.popper ?? componentsProps.popper)?.className)
630
- }, ownerState);
631
- const transitionProps = appendOwnerState(TransitionComponent, {
632
- ...TransitionProps,
633
- ...(slotProps.transition ?? componentsProps.transition)
634
- }, ownerState);
635
- const tooltipProps = appendOwnerState(TooltipComponent, {
636
- ...(slotProps.tooltip ?? componentsProps.tooltip),
637
- className: clsx(classes.tooltip, (slotProps.tooltip ?? componentsProps.tooltip)?.className)
638
- }, ownerState);
639
- const tooltipArrowProps = appendOwnerState(ArrowComponent, {
640
- ...(slotProps.arrow ?? componentsProps.arrow),
641
- className: clsx(classes.arrow, (slotProps.arrow ?? componentsProps.arrow)?.className)
642
- }, ownerState);
627
+ const resolvedTransitionProps = typeof slotProps.transition === 'function' ? slotProps.transition(ownerState) : slotProps.transition;
628
+ const externalForwardedProps = {
629
+ slots: {
630
+ popper: components.Popper,
631
+ transition: components.Transition ?? TransitionComponentProp,
632
+ tooltip: components.Tooltip,
633
+ arrow: components.Arrow,
634
+ ...slots
635
+ },
636
+ slotProps: {
637
+ arrow: slotProps.arrow ?? componentsProps.arrow,
638
+ popper: {
639
+ ...PopperProps,
640
+ ...(resolvedPopperProps ?? componentsProps.popper)
641
+ },
642
+ // resolvedPopperProps can be spread because it's already an object
643
+ tooltip: slotProps.tooltip ?? componentsProps.tooltip,
644
+ transition: {
645
+ ...TransitionProps,
646
+ ...(resolvedTransitionProps ?? componentsProps.transition)
647
+ }
648
+ }
649
+ };
650
+ const [PopperSlot, popperSlotProps] = useSlot('popper', {
651
+ elementType: TooltipPopper,
652
+ externalForwardedProps,
653
+ ownerState,
654
+ className: clsx(classes.popper, PopperProps?.className)
655
+ });
656
+ const [TransitionSlot, transitionSlotProps] = useSlot('transition', {
657
+ elementType: Grow,
658
+ externalForwardedProps,
659
+ ownerState
660
+ });
661
+ const [TooltipSlot, tooltipSlotProps] = useSlot('tooltip', {
662
+ elementType: TooltipTooltip,
663
+ className: classes.tooltip,
664
+ externalForwardedProps,
665
+ ownerState
666
+ });
667
+ const [ArrowSlot, arrowSlotProps] = useSlot('arrow', {
668
+ elementType: TooltipArrow,
669
+ className: classes.arrow,
670
+ externalForwardedProps,
671
+ ownerState,
672
+ ref: setArrowRef
673
+ });
643
674
  return /*#__PURE__*/_jsxs(React.Fragment, {
644
- children: [/*#__PURE__*/React.cloneElement(children, childrenProps), /*#__PURE__*/_jsx(PopperComponent, {
675
+ children: [/*#__PURE__*/React.cloneElement(children, childrenProps), /*#__PURE__*/_jsx(PopperSlot, {
645
676
  as: PopperComponentProp ?? Popper,
646
677
  placement: placement,
647
678
  anchorEl: followCursor ? {
@@ -659,19 +690,18 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
659
690
  id: id,
660
691
  transition: true,
661
692
  ...interactiveWrapperListeners,
662
- ...popperProps,
693
+ ...popperSlotProps,
663
694
  popperOptions: popperOptions,
664
695
  children: ({
665
696
  TransitionProps: TransitionPropsInner
666
- }) => /*#__PURE__*/_jsx(TransitionComponent, {
697
+ }) => /*#__PURE__*/_jsx(TransitionSlot, {
667
698
  timeout: theme.transitions.duration.shorter,
668
699
  ...TransitionPropsInner,
669
- ...transitionProps,
670
- children: /*#__PURE__*/_jsxs(TooltipComponent, {
671
- ...tooltipProps,
672
- children: [title, arrow ? /*#__PURE__*/_jsx(ArrowComponent, {
673
- ...tooltipArrowProps,
674
- ref: setArrowRef
700
+ ...transitionSlotProps,
701
+ children: /*#__PURE__*/_jsxs(TooltipSlot, {
702
+ ...tooltipSlotProps,
703
+ children: [title, arrow ? /*#__PURE__*/_jsx(ArrowSlot, {
704
+ ...arrowSlotProps
675
705
  }) : null]
676
706
  })
677
707
  })
@@ -703,7 +733,7 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes /* remove-proptypes */
703
733
  /**
704
734
  * The components used for each slot inside.
705
735
  *
706
- * @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/).
736
+ * @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.
707
737
  *
708
738
  * @default {}
709
739
  */
@@ -717,7 +747,7 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes /* remove-proptypes */
717
747
  * The extra props for the slot components.
718
748
  * You can override the existing props or add new ones.
719
749
  *
720
- * @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/).
750
+ * @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.
721
751
  *
722
752
  * @default {}
723
753
  */
@@ -814,33 +844,27 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes /* remove-proptypes */
814
844
  placement: PropTypes.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
815
845
  /**
816
846
  * The component used for the popper.
817
- * @default Popper
847
+ * @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.
818
848
  */
819
849
  PopperComponent: PropTypes.elementType,
820
850
  /**
821
851
  * Props applied to the [`Popper`](https://mui.com/material-ui/api/popper/) element.
852
+ * @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.
822
853
  * @default {}
823
854
  */
824
855
  PopperProps: PropTypes.object,
825
856
  /**
826
- * The extra props for the slot components.
827
- * You can override the existing props or add new ones.
828
- *
829
- * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
830
- *
857
+ * The props used for each slot inside.
831
858
  * @default {}
832
859
  */
833
860
  slotProps: PropTypes.shape({
834
- arrow: PropTypes.object,
835
- popper: PropTypes.object,
836
- tooltip: PropTypes.object,
837
- transition: PropTypes.object
861
+ arrow: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
862
+ popper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
863
+ tooltip: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
864
+ transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
838
865
  }),
839
866
  /**
840
867
  * The components used for each slot inside.
841
- *
842
- * This prop is an alias for the `components` prop, which will be deprecated in the future.
843
- *
844
868
  * @default {}
845
869
  */
846
870
  slots: PropTypes.shape({
@@ -860,12 +884,14 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes /* remove-proptypes */
860
884
  /**
861
885
  * The component used for the transition.
862
886
  * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
863
- * @default Grow
887
+ * @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.
864
888
  */
865
889
  TransitionComponent: PropTypes.elementType,
866
890
  /**
867
891
  * Props applied to the transition element.
868
892
  * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
893
+ * @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.
894
+ * @default {}
869
895
  */
870
896
  TransitionProps: PropTypes.object
871
897
  } : void 0;
package/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/material v6.1.7
2
+ * @mui/material v6.1.8
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -303,11 +303,13 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes
303
303
  /**
304
304
  * The component used for the transition.
305
305
  * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
306
+ * @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.
306
307
  */
307
308
  TransitionComponent: PropTypes.elementType,
308
309
  /**
309
310
  * Props applied to the transition element.
310
311
  * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
312
+ * @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.
311
313
  */
312
314
  TransitionProps: PropTypes.object
313
315
  } : void 0;
@@ -323,7 +323,7 @@ const AutocompleteNoOptions = styled('div', {
323
323
  color: (theme.vars || theme).palette.text.secondary,
324
324
  padding: '14px 16px'
325
325
  })));
326
- const AutocompleteListbox = styled('div', {
326
+ const AutocompleteListbox = styled('ul', {
327
327
  name: 'MuiAutocomplete',
328
328
  slot: 'Listbox',
329
329
  overridesResolver: (props, styles) => styles.listbox
@@ -792,6 +792,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
792
792
  blurOnSelect: PropTypes.oneOfType([PropTypes.oneOf(['mouse', 'touch']), PropTypes.bool]),
793
793
  /**
794
794
  * Props applied to the [`Chip`](https://mui.com/material-ui/api/chip/) element.
795
+ * @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.
795
796
  */
796
797
  ChipProps: PropTypes.object,
797
798
  /**
@@ -994,10 +995,12 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
994
995
  /**
995
996
  * The component used to render the listbox.
996
997
  * @default 'ul'
998
+ * @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.
997
999
  */
998
1000
  ListboxComponent: PropTypes.elementType,
999
1001
  /**
1000
1002
  * Props applied to the Listbox element.
1003
+ * @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.
1001
1004
  */
1002
1005
  ListboxProps: PropTypes.object,
1003
1006
  /**
@@ -1092,11 +1095,13 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
1092
1095
  /**
1093
1096
  * The component used to render the body of the popup.
1094
1097
  * @default Paper
1098
+ * @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.
1095
1099
  */
1096
1100
  PaperComponent: PropTypes.elementType,
1097
1101
  /**
1098
1102
  * The component used to position the popup.
1099
1103
  * @default Popper
1104
+ * @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.
1100
1105
  */
1101
1106
  PopperComponent: PropTypes.elementType,
1102
1107
  /**
@@ -255,6 +255,7 @@ process.env.NODE_ENV !== "production" ? Avatar.propTypes /* remove-proptypes */
255
255
  /**
256
256
  * [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.
257
257
  * It can be used to listen for the loading error event.
258
+ * @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.
258
259
  */
259
260
  imgProps: PropTypes.object,
260
261
  /**
@@ -197,6 +197,7 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes *
197
197
  * The component used for the transition.
198
198
  * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
199
199
  * @default Fade
200
+ * @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.
200
201
  */
201
202
  TransitionComponent: PropTypes.elementType,
202
203
  /**
@@ -7,7 +7,7 @@ const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
7
7
  const DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'];
8
8
  const WRAPS = ['nowrap', 'wrap-reverse', 'wrap'];
9
9
  const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
10
- const grid2Classes = generateUtilityClasses('MuiGrid2', ['root', 'container', 'item', 'zeroMinWidth',
10
+ const grid2Classes = generateUtilityClasses('MuiGrid2', ['root', 'container',
11
11
  // spacings
12
12
  ...SPACINGS.map(spacing => `spacing-xs-${spacing}`),
13
13
  // direction values
@@ -524,6 +524,7 @@ process.env.NODE_ENV !== "production" ? SpeedDial.propTypes /* remove-proptypes
524
524
  * The component used for the transition.
525
525
  * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
526
526
  * @default Zoom
527
+ * * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
527
528
  */
528
529
  TransitionComponent: PropTypes.elementType,
529
530
  /**
@@ -542,6 +543,7 @@ process.env.NODE_ENV !== "production" ? SpeedDial.propTypes /* remove-proptypes
542
543
  /**
543
544
  * Props applied to the transition element.
544
545
  * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
546
+ * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
545
547
  */
546
548
  TransitionProps: PropTypes.object
547
549
  } : void 0;
@@ -254,10 +254,12 @@ process.env.NODE_ENV !== "production" ? StepLabel.propTypes /* remove-proptypes
254
254
  }),
255
255
  /**
256
256
  * The component to render in place of the [`StepIcon`](https://mui.com/material-ui/api/step-icon/).
257
+ * @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.
257
258
  */
258
259
  StepIconComponent: PropTypes.elementType,
259
260
  /**
260
261
  * Props applied to the [`StepIcon`](https://mui.com/material-ui/api/step-icon/) element.
262
+ * @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.
261
263
  */
262
264
  StepIconProps: PropTypes.object,
263
265
  /**
@@ -9,7 +9,6 @@ import composeClasses from '@mui/utils/composeClasses';
9
9
  import { alpha } from '@mui/system/colorManipulator';
10
10
  import { useRtl } from '@mui/system/RtlProvider';
11
11
  import isFocusVisible from '@mui/utils/isFocusVisible';
12
- import appendOwnerState from '@mui/utils/appendOwnerState';
13
12
  import getReactElementRef from '@mui/utils/getReactElementRef';
14
13
  import { styled, useTheme } from "../zero-styled/index.js";
15
14
  import memoTheme from "../utils/memoTheme.js";
@@ -21,6 +20,7 @@ import useEventCallback from "../utils/useEventCallback.js";
21
20
  import useForkRef from "../utils/useForkRef.js";
22
21
  import useId from "../utils/useId.js";
23
22
  import useControlled from "../utils/useControlled.js";
23
+ import useSlot from "../utils/useSlot.js";
24
24
  import tooltipClasses, { getTooltipUtilityClass } from "./tooltipClasses.js";
25
25
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
26
26
  function round(value) {
@@ -342,7 +342,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
342
342
  slotProps = {},
343
343
  slots = {},
344
344
  title,
345
- TransitionComponent: TransitionComponentProp = Grow,
345
+ TransitionComponent: TransitionComponentProp,
346
346
  TransitionProps,
347
347
  ...other
348
348
  } = props;
@@ -592,6 +592,16 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
592
592
  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'));
593
593
  }
594
594
  }
595
+ const ownerState = {
596
+ ...props,
597
+ isRtl,
598
+ arrow,
599
+ disableInteractive,
600
+ placement,
601
+ PopperComponentProp,
602
+ touch: ignoreNonTouchEvents.current
603
+ };
604
+ const resolvedPopperProps = typeof slotProps.popper === 'function' ? slotProps.popper(ownerState) : slotProps.popper;
595
605
  const popperOptions = React.useMemo(() => {
596
606
  let tooltipModifiers = [{
597
607
  name: 'arrow',
@@ -604,44 +614,65 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
604
614
  if (PopperProps.popperOptions?.modifiers) {
605
615
  tooltipModifiers = tooltipModifiers.concat(PopperProps.popperOptions.modifiers);
606
616
  }
617
+ if (resolvedPopperProps?.popperOptions?.modifiers) {
618
+ tooltipModifiers = tooltipModifiers.concat(resolvedPopperProps.popperOptions.modifiers);
619
+ }
607
620
  return {
608
621
  ...PopperProps.popperOptions,
622
+ ...resolvedPopperProps?.popperOptions,
609
623
  modifiers: tooltipModifiers
610
624
  };
611
- }, [arrowRef, PopperProps]);
612
- const ownerState = {
613
- ...props,
614
- isRtl,
615
- arrow,
616
- disableInteractive,
617
- placement,
618
- PopperComponentProp,
619
- touch: ignoreNonTouchEvents.current
620
- };
625
+ }, [arrowRef, PopperProps.popperOptions, resolvedPopperProps?.popperOptions]);
621
626
  const classes = useUtilityClasses(ownerState);
622
- const PopperComponent = slots.popper ?? components.Popper ?? TooltipPopper;
623
- const TransitionComponent = slots.transition ?? components.Transition ?? TransitionComponentProp ?? Grow;
624
- const TooltipComponent = slots.tooltip ?? components.Tooltip ?? TooltipTooltip;
625
- const ArrowComponent = slots.arrow ?? components.Arrow ?? TooltipArrow;
626
- const popperProps = appendOwnerState(PopperComponent, {
627
- ...PopperProps,
628
- ...(slotProps.popper ?? componentsProps.popper),
629
- className: clsx(classes.popper, PopperProps?.className, (slotProps.popper ?? componentsProps.popper)?.className)
630
- }, ownerState);
631
- const transitionProps = appendOwnerState(TransitionComponent, {
632
- ...TransitionProps,
633
- ...(slotProps.transition ?? componentsProps.transition)
634
- }, ownerState);
635
- const tooltipProps = appendOwnerState(TooltipComponent, {
636
- ...(slotProps.tooltip ?? componentsProps.tooltip),
637
- className: clsx(classes.tooltip, (slotProps.tooltip ?? componentsProps.tooltip)?.className)
638
- }, ownerState);
639
- const tooltipArrowProps = appendOwnerState(ArrowComponent, {
640
- ...(slotProps.arrow ?? componentsProps.arrow),
641
- className: clsx(classes.arrow, (slotProps.arrow ?? componentsProps.arrow)?.className)
642
- }, ownerState);
627
+ const resolvedTransitionProps = typeof slotProps.transition === 'function' ? slotProps.transition(ownerState) : slotProps.transition;
628
+ const externalForwardedProps = {
629
+ slots: {
630
+ popper: components.Popper,
631
+ transition: components.Transition ?? TransitionComponentProp,
632
+ tooltip: components.Tooltip,
633
+ arrow: components.Arrow,
634
+ ...slots
635
+ },
636
+ slotProps: {
637
+ arrow: slotProps.arrow ?? componentsProps.arrow,
638
+ popper: {
639
+ ...PopperProps,
640
+ ...(resolvedPopperProps ?? componentsProps.popper)
641
+ },
642
+ // resolvedPopperProps can be spread because it's already an object
643
+ tooltip: slotProps.tooltip ?? componentsProps.tooltip,
644
+ transition: {
645
+ ...TransitionProps,
646
+ ...(resolvedTransitionProps ?? componentsProps.transition)
647
+ }
648
+ }
649
+ };
650
+ const [PopperSlot, popperSlotProps] = useSlot('popper', {
651
+ elementType: TooltipPopper,
652
+ externalForwardedProps,
653
+ ownerState,
654
+ className: clsx(classes.popper, PopperProps?.className)
655
+ });
656
+ const [TransitionSlot, transitionSlotProps] = useSlot('transition', {
657
+ elementType: Grow,
658
+ externalForwardedProps,
659
+ ownerState
660
+ });
661
+ const [TooltipSlot, tooltipSlotProps] = useSlot('tooltip', {
662
+ elementType: TooltipTooltip,
663
+ className: classes.tooltip,
664
+ externalForwardedProps,
665
+ ownerState
666
+ });
667
+ const [ArrowSlot, arrowSlotProps] = useSlot('arrow', {
668
+ elementType: TooltipArrow,
669
+ className: classes.arrow,
670
+ externalForwardedProps,
671
+ ownerState,
672
+ ref: setArrowRef
673
+ });
643
674
  return /*#__PURE__*/_jsxs(React.Fragment, {
644
- children: [/*#__PURE__*/React.cloneElement(children, childrenProps), /*#__PURE__*/_jsx(PopperComponent, {
675
+ children: [/*#__PURE__*/React.cloneElement(children, childrenProps), /*#__PURE__*/_jsx(PopperSlot, {
645
676
  as: PopperComponentProp ?? Popper,
646
677
  placement: placement,
647
678
  anchorEl: followCursor ? {
@@ -659,19 +690,18 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
659
690
  id: id,
660
691
  transition: true,
661
692
  ...interactiveWrapperListeners,
662
- ...popperProps,
693
+ ...popperSlotProps,
663
694
  popperOptions: popperOptions,
664
695
  children: ({
665
696
  TransitionProps: TransitionPropsInner
666
- }) => /*#__PURE__*/_jsx(TransitionComponent, {
697
+ }) => /*#__PURE__*/_jsx(TransitionSlot, {
667
698
  timeout: theme.transitions.duration.shorter,
668
699
  ...TransitionPropsInner,
669
- ...transitionProps,
670
- children: /*#__PURE__*/_jsxs(TooltipComponent, {
671
- ...tooltipProps,
672
- children: [title, arrow ? /*#__PURE__*/_jsx(ArrowComponent, {
673
- ...tooltipArrowProps,
674
- ref: setArrowRef
700
+ ...transitionSlotProps,
701
+ children: /*#__PURE__*/_jsxs(TooltipSlot, {
702
+ ...tooltipSlotProps,
703
+ children: [title, arrow ? /*#__PURE__*/_jsx(ArrowSlot, {
704
+ ...arrowSlotProps
675
705
  }) : null]
676
706
  })
677
707
  })
@@ -703,7 +733,7 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes /* remove-proptypes */
703
733
  /**
704
734
  * The components used for each slot inside.
705
735
  *
706
- * @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/).
736
+ * @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.
707
737
  *
708
738
  * @default {}
709
739
  */
@@ -717,7 +747,7 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes /* remove-proptypes */
717
747
  * The extra props for the slot components.
718
748
  * You can override the existing props or add new ones.
719
749
  *
720
- * @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/).
750
+ * @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.
721
751
  *
722
752
  * @default {}
723
753
  */
@@ -814,33 +844,27 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes /* remove-proptypes */
814
844
  placement: PropTypes.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
815
845
  /**
816
846
  * The component used for the popper.
817
- * @default Popper
847
+ * @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.
818
848
  */
819
849
  PopperComponent: PropTypes.elementType,
820
850
  /**
821
851
  * Props applied to the [`Popper`](https://mui.com/material-ui/api/popper/) element.
852
+ * @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.
822
853
  * @default {}
823
854
  */
824
855
  PopperProps: PropTypes.object,
825
856
  /**
826
- * The extra props for the slot components.
827
- * You can override the existing props or add new ones.
828
- *
829
- * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
830
- *
857
+ * The props used for each slot inside.
831
858
  * @default {}
832
859
  */
833
860
  slotProps: PropTypes.shape({
834
- arrow: PropTypes.object,
835
- popper: PropTypes.object,
836
- tooltip: PropTypes.object,
837
- transition: PropTypes.object
861
+ arrow: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
862
+ popper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
863
+ tooltip: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
864
+ transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
838
865
  }),
839
866
  /**
840
867
  * The components used for each slot inside.
841
- *
842
- * This prop is an alias for the `components` prop, which will be deprecated in the future.
843
- *
844
868
  * @default {}
845
869
  */
846
870
  slots: PropTypes.shape({
@@ -860,12 +884,14 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes /* remove-proptypes */
860
884
  /**
861
885
  * The component used for the transition.
862
886
  * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
863
- * @default Grow
887
+ * @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.
864
888
  */
865
889
  TransitionComponent: PropTypes.elementType,
866
890
  /**
867
891
  * Props applied to the transition element.
868
892
  * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
893
+ * @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.
894
+ * @default {}
869
895
  */
870
896
  TransitionProps: PropTypes.object
871
897
  } : void 0;
package/modern/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/material v6.1.7
2
+ * @mui/material v6.1.8
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -1,6 +1,6 @@
1
- export const version = "6.1.7";
1
+ export const version = "6.1.8";
2
2
  export const major = Number("6");
3
3
  export const minor = Number("1");
4
- export const patch = Number("7");
4
+ export const patch = Number("8");
5
5
  export const prerelease = undefined;
6
6
  export default version;
@@ -310,11 +310,13 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes
310
310
  /**
311
311
  * The component used for the transition.
312
312
  * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
313
+ * @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.
313
314
  */
314
315
  TransitionComponent: _propTypes.default.elementType,
315
316
  /**
316
317
  * Props applied to the transition element.
317
318
  * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
319
+ * @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.
318
320
  */
319
321
  TransitionProps: _propTypes.default.object
320
322
  } : void 0;