@mui/material 9.0.0 → 9.0.1

package/SwipeableDrawer/SwipeableDrawer.js

@@ -13,6 +13,7 @@ var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _NoSsr = _interopRequireDefault(require("../NoSsr"));
 var _Drawer = _interopRequireWildcard(require("../Drawer/Drawer"));
+var _contains = _interopRequireDefault(require("../utils/contains"));
 var _ownerDocument = _interopRequireDefault(require("../utils/ownerDocument"));
 var _ownerWindow = _interopRequireDefault(require("../utils/ownerWindow"));
 var _useEventCallback = _interopRequireDefault(require("../utils/useEventCallback"));
@@ -175,6 +176,9 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     const anchorRtl = (0, _Drawer.getAnchor)(theme, anchor);
     const rtlTranslateMultiplier = ['right', 'bottom'].includes(anchorRtl) ? 1 : -1;
     const horizontalSwipe = (0, _Drawer.isHorizontal)(anchor);
+
+    // Slide preserves this active-swipe `translate(x, y)` transform on exit.
+    // Keep this in sync with isGestureTranslate in Slide.js.
     const transform = horizontalSwipe ? `translate(${rtlTranslateMultiplier * translate}px, 0)` : `translate(0, ${rtlTranslateMultiplier * translate}px)`;
     const drawerStyle = paperRef.current.style;
     drawerStyle.transform = transform;
@@ -291,7 +295,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     const horizontalSwipe = (0, _Drawer.isHorizontal)(anchor);
     const currentX = calculateCurrentX(anchorRtl, nativeEvent.touches, (0, _ownerDocument.default)(nativeEvent.currentTarget));
     const currentY = calculateCurrentY(anchorRtl, nativeEvent.touches, (0, _ownerWindow.default)(nativeEvent.currentTarget));
-    if (open && paperRef.current.contains(nativeEvent.target) && claimedSwipeInstance === null) {
+    if (open && (0, _contains.default)(paperRef.current, nativeEvent.target) && claimedSwipeInstance === null) {
       const domTreeShapes = getDomTreeShapes(nativeEvent.target, paperRef.current);
       const hasNativeHandler = computeHasNativeHandler({
         domTreeShapes,
@@ -389,7 +393,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     }
 
     // At least one element clogs the drawer interaction zone.
-    if (open && (hideBackdrop || !backdropRef.current.contains(nativeEvent.target)) && !paperRef.current.contains(nativeEvent.target)) {
+    if (open && (hideBackdrop || !(0, _contains.default)(backdropRef.current, nativeEvent.target)) && !(0, _contains.default)(paperRef.current, nativeEvent.target)) {
       return;
     }
     const anchorRtl = (0, _Drawer.getAnchor)(theme, anchor);
@@ -401,7 +405,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
       // if disableSwipeToOpen
       // if target != swipeArea, and target is not a child of paper ref
       // if is a child of paper ref, and `allowSwipeInChildren` does not allow it
-      if (disableSwipeToOpen || !(nativeEvent.target === swipeAreaRef.current || paperRef.current?.contains(nativeEvent.target) && (typeof allowSwipeInChildren === 'function' ? allowSwipeInChildren(nativeEvent, swipeAreaRef.current, paperRef.current) : allowSwipeInChildren))) {
+      if (disableSwipeToOpen || !(nativeEvent.target === swipeAreaRef.current || (0, _contains.default)(paperRef.current, nativeEvent.target) && (typeof allowSwipeInChildren === 'function' ? allowSwipeInChildren(nativeEvent, swipeAreaRef.current, paperRef.current) : allowSwipeInChildren))) {
         return;
       }
       if (horizontalSwipe) {

package/SwipeableDrawer/SwipeableDrawer.mjs

@@ -5,6 +5,7 @@ import * as ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import NoSsr from "../NoSsr/index.mjs";
 import Drawer, { getAnchor, isHorizontal } from "../Drawer/Drawer.mjs";
+import contains from "../utils/contains.mjs";
 import ownerDocument from "../utils/ownerDocument.mjs";
 import ownerWindow from "../utils/ownerWindow.mjs";
 import useEventCallback from "../utils/useEventCallback.mjs";
@@ -168,6 +169,9 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     const anchorRtl = getAnchor(theme, anchor);
     const rtlTranslateMultiplier = ['right', 'bottom'].includes(anchorRtl) ? 1 : -1;
     const horizontalSwipe = isHorizontal(anchor);
+
+    // Slide preserves this active-swipe `translate(x, y)` transform on exit.
+    // Keep this in sync with isGestureTranslate in Slide.js.
     const transform = horizontalSwipe ? `translate(${rtlTranslateMultiplier * translate}px, 0)` : `translate(0, ${rtlTranslateMultiplier * translate}px)`;
     const drawerStyle = paperRef.current.style;
     drawerStyle.transform = transform;
@@ -284,7 +288,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     const horizontalSwipe = isHorizontal(anchor);
     const currentX = calculateCurrentX(anchorRtl, nativeEvent.touches, ownerDocument(nativeEvent.currentTarget));
     const currentY = calculateCurrentY(anchorRtl, nativeEvent.touches, ownerWindow(nativeEvent.currentTarget));
-    if (open && paperRef.current.contains(nativeEvent.target) && claimedSwipeInstance === null) {
+    if (open && contains(paperRef.current, nativeEvent.target) && claimedSwipeInstance === null) {
       const domTreeShapes = getDomTreeShapes(nativeEvent.target, paperRef.current);
       const hasNativeHandler = computeHasNativeHandler({
         domTreeShapes,
@@ -382,7 +386,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     }
 
     // At least one element clogs the drawer interaction zone.
-    if (open && (hideBackdrop || !backdropRef.current.contains(nativeEvent.target)) && !paperRef.current.contains(nativeEvent.target)) {
+    if (open && (hideBackdrop || !contains(backdropRef.current, nativeEvent.target)) && !contains(paperRef.current, nativeEvent.target)) {
       return;
     }
     const anchorRtl = getAnchor(theme, anchor);
@@ -394,7 +398,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
       // if disableSwipeToOpen
       // if target != swipeArea, and target is not a child of paper ref
       // if is a child of paper ref, and `allowSwipeInChildren` does not allow it
-      if (disableSwipeToOpen || !(nativeEvent.target === swipeAreaRef.current || paperRef.current?.contains(nativeEvent.target) && (typeof allowSwipeInChildren === 'function' ? allowSwipeInChildren(nativeEvent, swipeAreaRef.current, paperRef.current) : allowSwipeInChildren))) {
+      if (disableSwipeToOpen || !(nativeEvent.target === swipeAreaRef.current || contains(paperRef.current, nativeEvent.target) && (typeof allowSwipeInChildren === 'function' ? allowSwipeInChildren(nativeEvent, swipeAreaRef.current, paperRef.current) : allowSwipeInChildren))) {
         return;
       }
       if (horizontalSwipe) {

package/Switch/Switch.js

@@ -19,6 +19,7 @@ var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _switchClasses = _interopRequireWildcard(require("./switchClasses"));
+var _utils = require("../utils");
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
@@ -186,12 +187,14 @@ const SwitchTrack = (0, _zeroStyled.styled)('span', {
   height: '100%',
   width: '100%',
   borderRadius: 14 / 2,
-  boxSizing: 'border-box',
-  border: '1px solid transparent',
   zIndex: -1,
   transition: theme.transitions.create(['opacity', 'background-color'], {
     duration: theme.transitions.duration.shortest
   }),
+  '@media (forced-colors: active)': {
+    boxSizing: 'border-box',
+    border: '1px solid ButtonBorder'
+  },
   backgroundColor: theme.vars ? theme.vars.palette.common.onBackground : `${theme.palette.mode === 'light' ? theme.palette.common.black : theme.palette.common.white}`,
   opacity: theme.vars ? theme.vars.opacity.switchTrack : `${theme.palette.mode === 'light' ? 0.38 : 0.3}`
 })));
@@ -231,6 +234,7 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(inProps, ref) {
     size
   };
   const classes = useUtilityClasses(ownerState);
+  const externalInputProps = slotProps.input;
   const externalForwardedProps = {
     slots,
     slotProps
@@ -284,11 +288,8 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(inProps, ref) {
         ...(slotProps.switchBase && {
           root: typeof slotProps.switchBase === 'function' ? slotProps.switchBase(ownerState) : slotProps.switchBase
         }),
-        input: {
+        input: (0, _utils.mergeSlotProps)(typeof externalInputProps === 'function' ? externalInputProps(ownerState) : externalInputProps, {
           role: 'switch'
-        },
-        ...(slotProps.input && {
-          input: typeof slotProps.input === 'function' ? slotProps.input(ownerState) : slotProps.input
         })
       }
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TrackSlot, {

package/Switch/Switch.mjs

@@ -12,6 +12,7 @@ import { styled } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import switchClasses, { getSwitchUtilityClass } from "./switchClasses.mjs";
+import { mergeSlotProps } from "../utils/index.mjs";
 import useSlot from "../utils/useSlot.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -179,12 +180,14 @@ const SwitchTrack = styled('span', {
   height: '100%',
   width: '100%',
   borderRadius: 14 / 2,
-  boxSizing: 'border-box',
-  border: '1px solid transparent',
   zIndex: -1,
   transition: theme.transitions.create(['opacity', 'background-color'], {
     duration: theme.transitions.duration.shortest
   }),
+  '@media (forced-colors: active)': {
+    boxSizing: 'border-box',
+    border: '1px solid ButtonBorder'
+  },
   backgroundColor: theme.vars ? theme.vars.palette.common.onBackground : `${theme.palette.mode === 'light' ? theme.palette.common.black : theme.palette.common.white}`,
   opacity: theme.vars ? theme.vars.opacity.switchTrack : `${theme.palette.mode === 'light' ? 0.38 : 0.3}`
 })));
@@ -224,6 +227,7 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(inProps, ref) {
     size
   };
   const classes = useUtilityClasses(ownerState);
+  const externalInputProps = slotProps.input;
   const externalForwardedProps = {
     slots,
     slotProps
@@ -277,11 +281,8 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(inProps, ref) {
         ...(slotProps.switchBase && {
           root: typeof slotProps.switchBase === 'function' ? slotProps.switchBase(ownerState) : slotProps.switchBase
         }),
-        input: {
+        input: mergeSlotProps(typeof externalInputProps === 'function' ? externalInputProps(ownerState) : externalInputProps, {
           role: 'switch'
-        },
-        ...(slotProps.input && {
-          input: typeof slotProps.input === 'function' ? slotProps.input(ownerState) : slotProps.input
         })
       }
     }), /*#__PURE__*/_jsx(TrackSlot, {

package/Tabs/ScrollbarSize.js

@@ -17,7 +17,8 @@ const styles = {
   height: 99,
   position: 'absolute',
   top: -9999,
-  overflow: 'scroll'
+  overflow: 'scroll',
+  pointerEvents: 'none'
 };
 
 /**

package/Tabs/ScrollbarSize.mjs

@@ -10,7 +10,8 @@ const styles = {
   height: 99,
   position: 'absolute',
   top: -9999,
-  overflow: 'scroll'
+  overflow: 'scroll',
+  pointerEvents: 'none'
 };
 
 /**

package/Tabs/Tabs.js

@@ -27,6 +27,7 @@ var _tabsClasses = _interopRequireWildcard(require("./tabsClasses"));
 var _ownerWindow = _interopRequireDefault(require("../utils/ownerWindow"));
 var _isLayoutSupported = _interopRequireDefault(require("../utils/isLayoutSupported"));
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
+var _contains = _interopRequireDefault(require("../utils/contains"));
 var _getActiveElement = _interopRequireDefault(require("../utils/getActiveElement"));
 var _ownerDocument = _interopRequireDefault(require("../utils/ownerDocument"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
@@ -710,7 +711,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     getSlotProps: handlers => ({
       ...handlers,
       onBlur: event => {
-        if (!event.currentTarget.contains(event.relatedTarget)) {
+        if (!(0, _contains.default)(event.currentTarget, event.relatedTarget)) {
           setIsFocusWithinList(false);
         }
         handlers.onBlur?.(event);

package/Tabs/Tabs.mjs

@@ -20,6 +20,7 @@ import tabsClasses, { getTabsUtilityClass } from "./tabsClasses.mjs";
 import ownerWindow from "../utils/ownerWindow.mjs";
 import isLayoutSupported from "../utils/isLayoutSupported.mjs";
 import useSlot from "../utils/useSlot.mjs";
+import contains from "../utils/contains.mjs";
 import getActiveElement from "../utils/getActiveElement.mjs";
 import ownerDocument from "../utils/ownerDocument.mjs";
 import useForkRef from "../utils/useForkRef.mjs";
@@ -703,7 +704,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     getSlotProps: handlers => ({
       ...handlers,
       onBlur: event => {
-        if (!event.currentTarget.contains(event.relatedTarget)) {
+        if (!contains(event.currentTarget, event.relatedTarget)) {
           setIsFocusWithinList(false);
         }
         handlers.onBlur?.(event);

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,
+    }) => ownerState.touch,
     style: {
       [`.${_tooltipClasses.default.popper}[data-popper-placement*="left"] &`]: {
-        marginRight: '24px'
+        marginInlineEnd: '24px'
       },
       [`.${_tooltipClasses.default.popper}[data-popper-placement*="right"] &`]: {
-        marginLeft: '24px'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => !!ownerState.isRtl,
-    style: {
-      [`.${_tooltipClasses.default.popper}[data-popper-placement*="left"] &`]: {
-        marginLeft: '14px'
+        marginInlineStart: '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'
-      },
-      [`.${_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);
@@ -450,7 +360,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 +388,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 +528,6 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   }
   const ownerState = {
     ...props,
-    isRtl,
     arrow,
     disableInteractive,
     placement,