@mui/material 9.0.0 → 9.1.0

package/Tooltip/Tooltip.d.ts

@@ -4,7 +4,7 @@ import { PopperProps } from "../Popper/index.js";
 import { Theme } from "../styles/index.js";
 import { InternalStandardProps as StandardProps } from "../internal/index.js";
 import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";
-import { TransitionProps } from "../transitions/transition.js";
+import { TransitionProps } from "../transitions/types.js";
 import { TooltipClasses } from "./tooltipClasses.js";
 export interface TooltipPopperSlotPropsOverrides {}
 export interface TooltipTransitionSlotPropsOverrides {}
@@ -18,7 +18,7 @@ export interface TooltipSlots {
   popper: React.ElementType;
   /**
    * 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.
+   * [Follow this guide](/material-ui/transitions/#transition-slots) to learn more about the requirements for this component.
    * @default Grow
    */
   transition: React.ElementType;

package/Tooltip/Tooltip.js

@@ -14,7 +14,6 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _useTimeout = _interopRequireWildcard(require("@mui/utils/useTimeout"));
 var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _RtlProvider = require("@mui/system/RtlProvider");
 var _isFocusVisible = _interopRequireDefault(require("@mui/utils/isFocusVisible"));
 var _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
 var _zeroStyled = require("../zero-styled");
@@ -64,17 +63,11 @@ const TooltipPopper = (0, _zeroStyled.styled)(_Popper.default, {
   pointerEvents: 'none',
   variants: [{
     props: ({
-      ownerState
-    }) => !ownerState.disableInteractive,
-    style: {
-      pointerEvents: 'auto'
-    }
-  }, {
-    props: ({
+      ownerState,
       open
-    }) => !open,
+    }) => open && !ownerState.disableInteractive,
     style: {
-      pointerEvents: 'none'
+      pointerEvents: 'auto'
     }
   }, {
     props: ({
@@ -98,6 +91,8 @@ const TooltipPopper = (0, _zeroStyled.styled)(_Popper.default, {
       [`&[data-popper-placement*="right"] .${_tooltipClasses.default.arrow}`]: {
         height: '1em',
         width: '0.71em',
+        insetInlineStart: 0,
+        marginInlineStart: '-0.71em',
         '&::before': {
           transformOrigin: '100% 100%'
         }
@@ -105,51 +100,13 @@ const TooltipPopper = (0, _zeroStyled.styled)(_Popper.default, {
       [`&[data-popper-placement*="left"] .${_tooltipClasses.default.arrow}`]: {
         height: '1em',
         width: '0.71em',
+        insetInlineEnd: 0,
+        marginInlineEnd: '-0.71em',
         '&::before': {
           transformOrigin: '0 0'
         }
       }
     }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.arrow && !ownerState.isRtl,
-    style: {
-      [`&[data-popper-placement*="right"] .${_tooltipClasses.default.arrow}`]: {
-        left: 0,
-        marginLeft: '-0.71em'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.arrow && !!ownerState.isRtl,
-    style: {
-      [`&[data-popper-placement*="right"] .${_tooltipClasses.default.arrow}`]: {
-        right: 0,
-        marginRight: '-0.71em'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.arrow && !ownerState.isRtl,
-    style: {
-      [`&[data-popper-placement*="left"] .${_tooltipClasses.default.arrow}`]: {
-        right: 0,
-        marginRight: '-0.71em'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.arrow && !!ownerState.isRtl,
-    style: {
-      [`&[data-popper-placement*="left"] .${_tooltipClasses.default.arrow}`]: {
-        left: 0,
-        marginLeft: '-0.71em'
-      }
-    }
   }]
 })));
 const TooltipTooltip = (0, _zeroStyled.styled)('div', {
@@ -175,10 +132,12 @@ const TooltipTooltip = (0, _zeroStyled.styled)('div', {
   wordWrap: 'break-word',
   fontWeight: theme.typography.fontWeightMedium,
   [`.${_tooltipClasses.default.popper}[data-popper-placement*="left"] &`]: {
-    transformOrigin: 'right center'
+    transformOrigin: 'right center',
+    marginInlineEnd: '14px'
   },
   [`.${_tooltipClasses.default.popper}[data-popper-placement*="right"] &`]: {
-    transformOrigin: 'left center'
+    transformOrigin: 'left center',
+    marginInlineStart: '14px'
   },
   [`.${_tooltipClasses.default.popper}[data-popper-placement*="top"] &`]: {
     transformOrigin: 'center bottom',
@@ -194,7 +153,7 @@ const TooltipTooltip = (0, _zeroStyled.styled)('div', {
     }) => ownerState.arrow,
     style: {
       position: 'relative',
-      margin: 0
+      marginBlock: 0
     }
   }, {
     props: ({
@@ -209,65 +168,17 @@ const TooltipTooltip = (0, _zeroStyled.styled)('div', {
   }, {
     props: ({
       ownerState
-    }) => !ownerState.isRtl,
-    style: {
-      [`.${_tooltipClasses.default.popper}[data-popper-placement*="left"] &`]: {
-        marginRight: '14px'
-      },
-      [`.${_tooltipClasses.default.popper}[data-popper-placement*="right"] &`]: {
-        marginLeft: '14px'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => !ownerState.isRtl && ownerState.touch,
-    style: {
-      [`.${_tooltipClasses.default.popper}[data-popper-placement*="left"] &`]: {
-        marginRight: '24px'
-      },
-      [`.${_tooltipClasses.default.popper}[data-popper-placement*="right"] &`]: {
-        marginLeft: '24px'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => !!ownerState.isRtl,
+    }) => ownerState.touch,
     style: {
       [`.${_tooltipClasses.default.popper}[data-popper-placement*="left"] &`]: {
-        marginLeft: '14px'
+        marginInlineEnd: '24px'
       },
       [`.${_tooltipClasses.default.popper}[data-popper-placement*="right"] &`]: {
-        marginRight: '14px'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => !!ownerState.isRtl && ownerState.touch,
-    style: {
-      [`.${_tooltipClasses.default.popper}[data-popper-placement*="left"] &`]: {
-        marginLeft: '24px'
+        marginInlineStart: '24px'
       },
-      [`.${_tooltipClasses.default.popper}[data-popper-placement*="right"] &`]: {
-        marginRight: '24px'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.touch,
-    style: {
       [`.${_tooltipClasses.default.popper}[data-popper-placement*="top"] &`]: {
         marginBottom: '24px'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.touch,
-    style: {
+      },
       [`.${_tooltipClasses.default.popper}[data-popper-placement*="bottom"] &`]: {
         marginTop: '24px'
       }
@@ -350,7 +261,6 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     children: childrenProp
   });
   const theme = (0, _zeroStyled.useTheme)();
-  const isRtl = (0, _RtlProvider.useRtl)();
   const [childNode, setChildNode] = React.useState();
   const [arrowRef, setArrowRef] = React.useState(null);
   const ignoreNonTouchEvents = React.useRef(false);
@@ -420,6 +330,9 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     });
   });
   const handleMouseOver = event => {
+    if (childNode?.disabled) {
+      return;
+    }
     if (ignoreNonTouchEvents.current && event.type !== 'touchstart') {
       return;
     }
@@ -450,7 +363,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   const handleBlur = event => {
     // Needed for https://github.com/mui/material-ui/issues/45373
     const target = event?.target ?? childNode;
-    if (!target || !(0, _isFocusVisible.default)(target)) {
+    if (!target || target.disabled || !(0, _isFocusVisible.default)(target)) {
       setChildIsFocusVisible(false);
 
       // InputBase can call onBlur() without an event when the input becomes disabled.
@@ -478,6 +391,15 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       setChildNode(event.currentTarget);
     }
     if ((0, _isFocusVisible.default)(event.target)) {
+      // Workaround for https://github.com/facebook/react/issues/9142.
+      // React does not fire blur when a focused element becomes disabled.
+      const handleNativeBlur = blurEvent => {
+        if (blurEvent.target.disabled) {
+          handleBlur(blurEvent);
+        }
+        blurEvent.target.removeEventListener('blur', handleNativeBlur);
+      };
+      event.target.addEventListener('blur', handleNativeBlur);
       setChildIsFocusVisible(true);
       handleMouseOver(event);
     }
@@ -609,7 +531,6 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   }
   const ownerState = {
     ...props,
-    isRtl,
     arrow,
     disableInteractive,
     placement,

package/Tooltip/Tooltip.mjs

@@ -6,7 +6,6 @@ import clsx from 'clsx';
 import useTimeout, { Timeout } from '@mui/utils/useTimeout';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
 import composeClasses from '@mui/utils/composeClasses';
-import { useRtl } from '@mui/system/RtlProvider';
 import isFocusVisible from '@mui/utils/isFocusVisible';
 import getReactElementRef from '@mui/utils/getReactElementRef';
 import { styled, useTheme } from "../zero-styled/index.mjs";
@@ -56,17 +55,11 @@ const TooltipPopper = styled(Popper, {
   pointerEvents: 'none',
   variants: [{
     props: ({
-      ownerState
-    }) => !ownerState.disableInteractive,
-    style: {
-      pointerEvents: 'auto'
-    }
-  }, {
-    props: ({
+      ownerState,
       open
-    }) => !open,
+    }) => open && !ownerState.disableInteractive,
     style: {
-      pointerEvents: 'none'
+      pointerEvents: 'auto'
     }
   }, {
     props: ({
@@ -90,6 +83,8 @@ const TooltipPopper = styled(Popper, {
       [`&[data-popper-placement*="right"] .${tooltipClasses.arrow}`]: {
         height: '1em',
         width: '0.71em',
+        insetInlineStart: 0,
+        marginInlineStart: '-0.71em',
         '&::before': {
           transformOrigin: '100% 100%'
         }
@@ -97,51 +92,13 @@ const TooltipPopper = styled(Popper, {
       [`&[data-popper-placement*="left"] .${tooltipClasses.arrow}`]: {
         height: '1em',
         width: '0.71em',
+        insetInlineEnd: 0,
+        marginInlineEnd: '-0.71em',
         '&::before': {
           transformOrigin: '0 0'
         }
       }
     }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.arrow && !ownerState.isRtl,
-    style: {
-      [`&[data-popper-placement*="right"] .${tooltipClasses.arrow}`]: {
-        left: 0,
-        marginLeft: '-0.71em'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.arrow && !!ownerState.isRtl,
-    style: {
-      [`&[data-popper-placement*="right"] .${tooltipClasses.arrow}`]: {
-        right: 0,
-        marginRight: '-0.71em'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.arrow && !ownerState.isRtl,
-    style: {
-      [`&[data-popper-placement*="left"] .${tooltipClasses.arrow}`]: {
-        right: 0,
-        marginRight: '-0.71em'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.arrow && !!ownerState.isRtl,
-    style: {
-      [`&[data-popper-placement*="left"] .${tooltipClasses.arrow}`]: {
-        left: 0,
-        marginLeft: '-0.71em'
-      }
-    }
   }]
 })));
 const TooltipTooltip = styled('div', {
@@ -167,10 +124,12 @@ const TooltipTooltip = styled('div', {
   wordWrap: 'break-word',
   fontWeight: theme.typography.fontWeightMedium,
   [`.${tooltipClasses.popper}[data-popper-placement*="left"] &`]: {
-    transformOrigin: 'right center'
+    transformOrigin: 'right center',
+    marginInlineEnd: '14px'
   },
   [`.${tooltipClasses.popper}[data-popper-placement*="right"] &`]: {
-    transformOrigin: 'left center'
+    transformOrigin: 'left center',
+    marginInlineStart: '14px'
   },
   [`.${tooltipClasses.popper}[data-popper-placement*="top"] &`]: {
     transformOrigin: 'center bottom',
@@ -186,7 +145,7 @@ const TooltipTooltip = styled('div', {
     }) => ownerState.arrow,
     style: {
       position: 'relative',
-      margin: 0
+      marginBlock: 0
     }
   }, {
     props: ({
@@ -201,65 +160,17 @@ const TooltipTooltip = styled('div', {
   }, {
     props: ({
       ownerState
-    }) => !ownerState.isRtl,
-    style: {
-      [`.${tooltipClasses.popper}[data-popper-placement*="left"] &`]: {
-        marginRight: '14px'
-      },
-      [`.${tooltipClasses.popper}[data-popper-placement*="right"] &`]: {
-        marginLeft: '14px'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => !ownerState.isRtl && ownerState.touch,
-    style: {
-      [`.${tooltipClasses.popper}[data-popper-placement*="left"] &`]: {
-        marginRight: '24px'
-      },
-      [`.${tooltipClasses.popper}[data-popper-placement*="right"] &`]: {
-        marginLeft: '24px'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => !!ownerState.isRtl,
+    }) => ownerState.touch,
     style: {
       [`.${tooltipClasses.popper}[data-popper-placement*="left"] &`]: {
-        marginLeft: '14px'
+        marginInlineEnd: '24px'
       },
       [`.${tooltipClasses.popper}[data-popper-placement*="right"] &`]: {
-        marginRight: '14px'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => !!ownerState.isRtl && ownerState.touch,
-    style: {
-      [`.${tooltipClasses.popper}[data-popper-placement*="left"] &`]: {
-        marginLeft: '24px'
+        marginInlineStart: '24px'
       },
-      [`.${tooltipClasses.popper}[data-popper-placement*="right"] &`]: {
-        marginRight: '24px'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.touch,
-    style: {
       [`.${tooltipClasses.popper}[data-popper-placement*="top"] &`]: {
         marginBottom: '24px'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.touch,
-    style: {
+      },
       [`.${tooltipClasses.popper}[data-popper-placement*="bottom"] &`]: {
         marginTop: '24px'
       }
@@ -342,7 +253,6 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     children: childrenProp
   });
   const theme = useTheme();
-  const isRtl = useRtl();
   const [childNode, setChildNode] = React.useState();
   const [arrowRef, setArrowRef] = React.useState(null);
   const ignoreNonTouchEvents = React.useRef(false);
@@ -412,6 +322,9 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     });
   });
   const handleMouseOver = event => {
+    if (childNode?.disabled) {
+      return;
+    }
     if (ignoreNonTouchEvents.current && event.type !== 'touchstart') {
       return;
     }
@@ -442,7 +355,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   const handleBlur = event => {
     // Needed for https://github.com/mui/material-ui/issues/45373
     const target = event?.target ?? childNode;
-    if (!target || !isFocusVisible(target)) {
+    if (!target || target.disabled || !isFocusVisible(target)) {
       setChildIsFocusVisible(false);
 
       // InputBase can call onBlur() without an event when the input becomes disabled.
@@ -470,6 +383,15 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       setChildNode(event.currentTarget);
     }
     if (isFocusVisible(event.target)) {
+      // Workaround for https://github.com/facebook/react/issues/9142.
+      // React does not fire blur when a focused element becomes disabled.
+      const handleNativeBlur = blurEvent => {
+        if (blurEvent.target.disabled) {
+          handleBlur(blurEvent);
+        }
+        blurEvent.target.removeEventListener('blur', handleNativeBlur);
+      };
+      event.target.addEventListener('blur', handleNativeBlur);
       setChildIsFocusVisible(true);
       handleMouseOver(event);
     }
@@ -601,7 +523,6 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   }
   const ownerState = {
     ...props,
-    isRtl,
     arrow,
     disableInteractive,
     placement,

package/Unstable_TrapFocus/FocusTrap.js

@@ -15,7 +15,9 @@ var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"))
 var _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
 var _exactProp = _interopRequireDefault(require("@mui/utils/exactProp"));
 var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
+var _contains = _interopRequireDefault(require("../utils/contains"));
 var _getActiveElement = _interopRequireDefault(require("../utils/getActiveElement"));
+var _focusable = require("../utils/focusable");
 var _jsxRuntime = require("react/jsx-runtime");
 // Inspired by https://github.com/focus-trap/tabbable
 const candidatesSelector = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])'].join(',');
@@ -114,34 +116,36 @@ function FocusTrap(props) {
     activated.current = !disableAutoFocus;
   }, [disableAutoFocus, open]);
   React.useEffect(() => {
+    // Reset on every mount — React 18 Strict Mode double-mounts leave this
+    // stuck at `true` after the cleanup of the previous mount set it.
+    ignoreNextEnforceFocus.current = false;
+
     // We might render an empty child.
     if (!open || !rootRef.current) {
       return;
     }
     const doc = (0, _ownerDocument.default)(rootRef.current);
     const activeElement = (0, _getActiveElement.default)(doc);
-    if (!rootRef.current.contains(activeElement)) {
-      if (!rootRef.current.hasAttribute('tabIndex')) {
+
+    // Prefer the explicitly marked focusable element. Fall back to the root
+    // element for generic FocusTrap usage.
+    const focusTarget = (0, _focusable.getFocusTarget)(rootRef.current) ?? rootRef.current;
+    if (!(0, _contains.default)(rootRef.current, activeElement)) {
+      if (!focusTarget.hasAttribute('tabIndex')) {
         if (process.env.NODE_ENV !== 'production') {
           console.error(['MUI: The modal content node does not accept focus.', 'For the benefit of assistive technologies, ' + 'the tabIndex of the node is being set to "-1".'].join('\n'));
         }
-        rootRef.current.setAttribute('tabIndex', '-1');
+        focusTarget.setAttribute('tabIndex', '-1');
       }
       if (activated.current) {
-        rootRef.current.focus();
+        focusTarget.focus();
       }
     }
     return () => {
       // restoreLastFocus()
-      if (!disableRestoreFocus) {
-        // In IE11 it is possible for document.activeElement to be null resulting
-        // in nodeToRestore.current being null.
-        // Not all elements in IE11 have a focus method.
-        // Once IE11 support is dropped the focus() call can be unconditional.
-        if (nodeToRestore.current && nodeToRestore.current.focus) {
-          ignoreNextEnforceFocus.current = true;
-          nodeToRestore.current.focus();
-        }
+      if (!disableRestoreFocus && nodeToRestore.current) {
+        ignoreNextEnforceFocus.current = true;
+        nodeToRestore.current.focus();
         nodeToRestore.current = null;
       }
     };
@@ -160,17 +164,51 @@ function FocusTrap(props) {
       if (disableEnforceFocus || !isEnabled() || nativeEvent.key !== 'Tab') {
         return;
       }
+      const rootElement = rootRef.current;
       const activeElement = (0, _getActiveElement.default)(doc);
+      if (rootElement === null) {
+        return;
+      }
+      const focusTarget = (0, _focusable.getFocusTarget)(rootElement);
+      const isFocusStart = activeElement === rootElement || activeElement === focusTarget;
 
-      // Make sure the next tab starts from the right place.
-      // activeElement refers to the origin.
-      if (activeElement === rootRef.current && nativeEvent.shiftKey) {
-        // We need to ignore the next contain as
-        // it will try to move the focus back to the rootRef element.
-        ignoreNextEnforceFocus.current = true;
-        if (sentinelEnd.current) {
-          sentinelEnd.current.focus();
+      // Marked focus targets can be non-tabbable, but should start tabbing
+      // from the first/last tabbable child.
+      if (isFocusStart) {
+        const tabbable = getTabbable(rootElement);
+        if (tabbable.length === 0) {
+          return;
+        }
+        nativeEvent.preventDefault();
+        if (nativeEvent.shiftKey) {
+          tabbable[tabbable.length - 1].focus();
+        } else {
+          tabbable[0].focus();
+        }
+        return;
+      }
+      if ((0, _contains.default)(rootElement, activeElement)) {
+        const tabbable = getTabbable(rootElement);
+        const currentIndex = tabbable.indexOf(activeElement);
+        if (currentIndex === -1) {
+          // Leave shadow-root descendants to native tab handling.
+          return;
+        }
+        const hasPositiveTabIndex = tabbable.some(node => getTabIndex(node) > 0);
+
+        // Positive tabIndex needs the computed order; regular tabIndex=0 can
+        // use native tab handling.
+        if (!hasPositiveTabIndex) {
+          return;
+        }
+        nativeEvent.preventDefault();
+        let nextIndex = 0;
+        if (nativeEvent.shiftKey) {
+          nextIndex = currentIndex <= 0 ? tabbable.length - 1 : currentIndex - 1;
+        } else {
+          nextIndex = currentIndex === tabbable.length - 1 ? 0 : currentIndex + 1;
         }
+        tabbable[nextIndex].focus();
       }
     };
     const contain = () => {
@@ -188,7 +226,7 @@ function FocusTrap(props) {
       }
 
       // The focus is already inside
-      if (rootElement.contains(activeEl)) {
+      if ((0, _contains.default)(rootElement, activeEl)) {
         return;
       }