@mui/material 9.0.0 → 9.1.0

package/Stepper/Stepper.d.ts

@@ -15,6 +15,8 @@ export interface StepperOwnProps extends Pick<PaperProps, 'elevation' | 'square'
   /**
    * If set to 'true' and orientation is horizontal,
    * then the step label will be positioned under the icon.
+   * If set to 'true' and orientation is vertical,
+   * it reverses the position of the label and content.
    * @default false
    */
   alternativeLabel?: boolean | undefined;

package/Stepper/Stepper.js

@@ -55,6 +55,14 @@ const StepperRoot = (0, _zeroStyled.styled)('ol', {
       flexDirection: 'row',
       alignItems: 'center'
     }
+  }, {
+    props: {
+      orientation: 'horizontal',
+      alternativeLabel: false
+    },
+    style: {
+      gap: 8
+    }
   }, {
     props: {
       orientation: 'vertical'
@@ -69,6 +77,14 @@ const StepperRoot = (0, _zeroStyled.styled)('ol', {
     style: {
       alignItems: 'flex-start'
     }
+  }, {
+    props: {
+      orientation: 'vertical',
+      alternativeLabel: true
+    },
+    style: {
+      alignItems: 'flex-end'
+    }
   }]
 });
 const defaultConnector = /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepConnector.default, {});
@@ -200,6 +216,8 @@ process.env.NODE_ENV !== "production" ? Stepper.propTypes /* remove-proptypes */
   /**
    * If set to 'true' and orientation is horizontal,
    * then the step label will be positioned under the icon.
+   * If set to 'true' and orientation is vertical,
+   * it reverses the position of the label and content.
    * @default false
    */
   alternativeLabel: _propTypes.default.bool,

package/Stepper/Stepper.mjs

@@ -48,6 +48,14 @@ const StepperRoot = styled('ol', {
       flexDirection: 'row',
       alignItems: 'center'
     }
+  }, {
+    props: {
+      orientation: 'horizontal',
+      alternativeLabel: false
+    },
+    style: {
+      gap: 8
+    }
   }, {
     props: {
       orientation: 'vertical'
@@ -62,6 +70,14 @@ const StepperRoot = styled('ol', {
     style: {
       alignItems: 'flex-start'
     }
+  }, {
+    props: {
+      orientation: 'vertical',
+      alternativeLabel: true
+    },
+    style: {
+      alignItems: 'flex-end'
+    }
   }]
 });
 const defaultConnector = /*#__PURE__*/_jsx(StepConnector, {});
@@ -193,6 +209,8 @@ process.env.NODE_ENV !== "production" ? Stepper.propTypes /* remove-proptypes */
   /**
    * If set to 'true' and orientation is horizontal,
    * then the step label will be positioned under the icon.
+   * If set to 'true' and orientation is vertical,
+   * it reverses the position of the label and content.
    * @default false
    */
   alternativeLabel: PropTypes.bool,

package/SvgIcon/SvgIcon.js

@@ -16,6 +16,7 @@ var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _svgIconClasses = require("./svgIconClasses");
+var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -45,7 +46,7 @@ const SvgIconRoot = (0, _zeroStyled.styled)('svg', {
   height: '1em',
   display: 'inline-block',
   flexShrink: 0,
-  transition: theme.transitions?.create?.('fill', {
+  ...(0, _utils.getTransitionStyles)(theme, 'fill', {
     duration: (theme.vars ?? theme).transitions?.duration?.shorter
   }),
   variants: [{

package/SvgIcon/SvgIcon.mjs

@@ -9,6 +9,7 @@ import { styled } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import { getSvgIconUtilityClass } from "./svgIconClasses.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -38,7 +39,7 @@ const SvgIconRoot = styled('svg', {
   height: '1em',
   display: 'inline-block',
   flexShrink: 0,
-  transition: theme.transitions?.create?.('fill', {
+  ...getTransitionStyles(theme, 'fill', {
     duration: (theme.vars ?? theme).transitions?.duration?.shorter
   }),
   variants: [{

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"));
@@ -20,6 +21,7 @@ var _useEnhancedEffect = _interopRequireDefault(require("../utils/useEnhancedEff
 var _zeroStyled = require("../zero-styled");
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _utils = require("../transitions/utils");
+var _useReducedMotion = _interopRequireDefault(require("../transitions/useReducedMotion"));
 var _utils2 = require("../utils");
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _SwipeArea = _interopRequireDefault(require("./SwipeArea"));
@@ -151,6 +153,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     slotProps = {},
     ...other
   } = props;
+  const reducedMotion = (0, _useReducedMotion.default)(theme.motion.reducedMotion, false);
   const [maybeSwiping, setMaybeSwiping] = React.useState(false);
   const swipeInstance = React.useRef({
     isSwiping: null
@@ -175,18 +178,30 @@ 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;
     let transition = '';
     if (mode) {
-      transition = theme.transitions.create('all', (0, _utils.getTransitionProps)({
+      const transitionProps = (0, _utils.getTransitionProps)({
         easing: undefined,
         style: undefined,
         timeout: transitionDuration
       }, {
         mode
-      }));
+      });
+      const transitionTiming = reducedMotion.getTransitionTiming({
+        duration: transitionProps.duration,
+        delay: transitionProps.delay
+      });
+      transition = theme.transitions.create('all', {
+        ...transitionProps,
+        duration: transitionTiming.duration,
+        delay: transitionTiming.delay
+      });
     }
     if (changeTransition) {
       drawerStyle.transition = transition;
@@ -198,7 +213,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
         backdropStyle.transition = transition;
       }
     }
-  }, [anchor, disableBackdropTransition, hideBackdrop, theme, transitionDuration]);
+  }, [anchor, disableBackdropTransition, hideBackdrop, reducedMotion, theme, transitionDuration]);
   const handleBodyTouchEnd = (0, _useEventCallback.default)(nativeEvent => {
     if (!touchDetected.current) {
       return;
@@ -291,7 +306,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 +404,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 +416,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";
@@ -12,6 +13,7 @@ import useEnhancedEffect from "../utils/useEnhancedEffect.mjs";
 import { useTheme } from "../zero-styled/index.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import { getTransitionProps } from "../transitions/utils.mjs";
+import useReducedMotion from "../transitions/useReducedMotion.mjs";
 import { mergeSlotProps } from "../utils/index.mjs";
 import useSlot from "../utils/useSlot.mjs";
 import SwipeArea from "./SwipeArea.mjs";
@@ -144,6 +146,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     slotProps = {},
     ...other
   } = props;
+  const reducedMotion = useReducedMotion(theme.motion.reducedMotion, false);
   const [maybeSwiping, setMaybeSwiping] = React.useState(false);
   const swipeInstance = React.useRef({
     isSwiping: null
@@ -168,18 +171,30 @@ 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;
     let transition = '';
     if (mode) {
-      transition = theme.transitions.create('all', getTransitionProps({
+      const transitionProps = getTransitionProps({
         easing: undefined,
         style: undefined,
         timeout: transitionDuration
       }, {
         mode
-      }));
+      });
+      const transitionTiming = reducedMotion.getTransitionTiming({
+        duration: transitionProps.duration,
+        delay: transitionProps.delay
+      });
+      transition = theme.transitions.create('all', {
+        ...transitionProps,
+        duration: transitionTiming.duration,
+        delay: transitionTiming.delay
+      });
     }
     if (changeTransition) {
       drawerStyle.transition = transition;
@@ -191,7 +206,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
         backdropStyle.transition = transition;
       }
     }
-  }, [anchor, disableBackdropTransition, hideBackdrop, theme, transitionDuration]);
+  }, [anchor, disableBackdropTransition, hideBackdrop, reducedMotion, theme, transitionDuration]);
   const handleBodyTouchEnd = useEventCallback(nativeEvent => {
     if (!touchDetected.current) {
       return;
@@ -284,7 +299,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 +397,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 +409,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,7 +19,9 @@ 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 _utils2 = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -124,7 +126,7 @@ const SwitchSwitchBase = (0, _zeroStyled.styled)(_SwitchBase.default, {
   zIndex: 1,
   // Render above the focus ripple.
   color: theme.vars ? theme.vars.palette.Switch.defaultColor : `${theme.palette.mode === 'light' ? theme.palette.common.white : theme.palette.grey[300]}`,
-  transition: theme.transitions.create(['left', 'transform'], {
+  ...(0, _utils2.getTransitionStyles)(theme, ['left', 'transform'], {
     duration: theme.transitions.duration.shortest
   }),
   [`&.${_switchClasses.default.checked}`]: {
@@ -186,12 +188,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'], {
+  ...(0, _utils2.getTransitionStyles)(theme, ['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 +235,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 +289,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,7 +12,9 @@ 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 { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -117,7 +119,7 @@ const SwitchSwitchBase = styled(SwitchBase, {
   zIndex: 1,
   // Render above the focus ripple.
   color: theme.vars ? theme.vars.palette.Switch.defaultColor : `${theme.palette.mode === 'light' ? theme.palette.common.white : theme.palette.grey[300]}`,
-  transition: theme.transitions.create(['left', 'transform'], {
+  ...getTransitionStyles(theme, ['left', 'transform'], {
     duration: theme.transitions.duration.shortest
   }),
   [`&.${switchClasses.checked}`]: {
@@ -179,12 +181,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'], {
+  ...getTransitionStyles(theme, ['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 +228,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 +282,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/TableSortLabel/TableSortLabel.js

@@ -19,6 +19,7 @@ var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _tableSortLabelClasses = _interopRequireWildcard(require("./tableSortLabelClasses"));
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
+var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -76,7 +77,7 @@ const TableSortLabelIcon = (0, _zeroStyled.styled)('span', {
   marginRight: 4,
   marginLeft: 4,
   opacity: 0,
-  transition: theme.transitions.create(['opacity', 'transform'], {
+  ...(0, _utils.getTransitionStyles)(theme, ['opacity', 'transform'], {
     duration: theme.transitions.duration.shorter
   }),
   userSelect: 'none',

package/TableSortLabel/TableSortLabel.mjs

@@ -12,6 +12,7 @@ import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import capitalize from "../utils/capitalize.mjs";
 import tableSortLabelClasses, { getTableSortLabelUtilityClass } from "./tableSortLabelClasses.mjs";
 import useSlot from "../utils/useSlot.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -69,7 +70,7 @@ const TableSortLabelIcon = styled('span', {
   marginRight: 4,
   marginLeft: 4,
   opacity: 0,
-  transition: theme.transitions.create(['opacity', 'transform'], {
+  ...getTransitionStyles(theme, ['opacity', 'transform'], {
     duration: theme.transitions.duration.shorter
   }),
   userSelect: 'none',

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

@@ -20,6 +20,7 @@ var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _debounce = _interopRequireDefault(require("../utils/debounce"));
 var _animate = _interopRequireDefault(require("../internal/animate"));
+var _useReducedMotion = _interopRequireDefault(require("../transitions/useReducedMotion"));
 var _ScrollbarSize = _interopRequireDefault(require("./ScrollbarSize"));
 var _TabScrollButton = _interopRequireDefault(require("../TabScrollButton"));
 var _useEventCallback = _interopRequireDefault(require("../utils/useEventCallback"));
@@ -27,10 +28,12 @@ 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"));
 var _useRovingTabIndex = require("../utils/useRovingTabIndex");
+var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -184,7 +187,7 @@ const TabsIndicator = (0, _zeroStyled.styled)('span', {
   height: 2,
   bottom: 0,
   width: '100%',
-  transition: theme.transitions.create(),
+  ...(0, _utils.getTransitionStyles)(theme),
   variants: [{
     props: {
       indicatorColor: 'primary'
@@ -221,6 +224,12 @@ const TabsScrollbarSize = (0, _zeroStyled.styled)(_ScrollbarSize.default)({
   }
 });
 const defaultIndicatorStyle = {};
+
+// Dev-only: tracks per-`Tabs` instance (keyed by its ref) whether the invalid-value warning was
+// already logged, so it isn't repeated across the several effects that call `getTabsMeta`.
+// Only referenced from `process.env.NODE_ENV !== 'production'` blocks; the `@__PURE__` annotation
+// lets minifiers drop it (and the `WeakMap` allocation) entirely from production builds.
+const warnedTabValueInvalid = /* @__PURE__ */new WeakMap();
 let warnedOnceTabPresent = false;
 const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   const props = (0, _DefaultPropsProvider.useDefaultProps)({
@@ -229,6 +238,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   });
   const theme = (0, _zeroStyled.useTheme)();
   const isRtl = (0, _RtlProvider.useRtl)();
+  const reducedMotion = (0, _useReducedMotion.default)(theme.motion.reducedMotion, false);
   const {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
@@ -335,7 +345,9 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       if (children.length > 0) {
         const tab = children[valueToIndex.get(value)];
         if (process.env.NODE_ENV !== 'production') {
-          if (!tab) {
+          // `getTabsMeta` runs from several effects, so guard against logging the warning repeatedly.
+          if (!tab && !warnedTabValueInvalid.has(tabsRef)) {
+            warnedTabValueInvalid.set(tabsRef, true);
             console.error([`MUI: The \`value\` provided to the Tabs component is invalid.`, `None of the Tabs' children match with "${value}".`, valueToIndex.keys ? `You can provide one of the following values: ${Array.from(valueToIndex.keys()).join(', ')}.` : null].join('\n'));
           }
         }
@@ -392,7 +404,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   const scroll = (scrollValue, {
     animation = true
   } = {}) => {
-    if (animation) {
+    if (animation && !reducedMotion.shouldReduceMotion) {
       (0, _animate.default)(scrollStart, tabsRef.current, scrollValue, {
         duration: theme.transitions.duration.standard
       });
@@ -710,7 +722,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

@@ -13,6 +13,7 @@ import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import debounce from "../utils/debounce.mjs";
 import animate from "../internal/animate.mjs";
+import useReducedMotion from "../transitions/useReducedMotion.mjs";
 import ScrollbarSize from "./ScrollbarSize.mjs";
 import TabScrollButton from "../TabScrollButton/index.mjs";
 import useEventCallback from "../utils/useEventCallback.mjs";
@@ -20,10 +21,12 @@ 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";
 import { RovingTabIndexContext, useRovingTabIndexRoot } from "../utils/useRovingTabIndex.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -177,7 +180,7 @@ const TabsIndicator = styled('span', {
   height: 2,
   bottom: 0,
   width: '100%',
-  transition: theme.transitions.create(),
+  ...getTransitionStyles(theme),
   variants: [{
     props: {
       indicatorColor: 'primary'
@@ -214,6 +217,12 @@ const TabsScrollbarSize = styled(ScrollbarSize)({
   }
 });
 const defaultIndicatorStyle = {};
+
+// Dev-only: tracks per-`Tabs` instance (keyed by its ref) whether the invalid-value warning was
+// already logged, so it isn't repeated across the several effects that call `getTabsMeta`.
+// Only referenced from `process.env.NODE_ENV !== 'production'` blocks; the `@__PURE__` annotation
+// lets minifiers drop it (and the `WeakMap` allocation) entirely from production builds.
+const warnedTabValueInvalid = /* @__PURE__ */new WeakMap();
 let warnedOnceTabPresent = false;
 const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   const props = useDefaultProps({
@@ -222,6 +231,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   });
   const theme = useTheme();
   const isRtl = useRtl();
+  const reducedMotion = useReducedMotion(theme.motion.reducedMotion, false);
   const {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
@@ -328,7 +338,9 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       if (children.length > 0) {
         const tab = children[valueToIndex.get(value)];
         if (process.env.NODE_ENV !== 'production') {
-          if (!tab) {
+          // `getTabsMeta` runs from several effects, so guard against logging the warning repeatedly.
+          if (!tab && !warnedTabValueInvalid.has(tabsRef)) {
+            warnedTabValueInvalid.set(tabsRef, true);
             console.error([`MUI: The \`value\` provided to the Tabs component is invalid.`, `None of the Tabs' children match with "${value}".`, valueToIndex.keys ? `You can provide one of the following values: ${Array.from(valueToIndex.keys()).join(', ')}.` : null].join('\n'));
           }
         }
@@ -385,7 +397,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   const scroll = (scrollValue, {
     animation = true
   } = {}) => {
-    if (animation) {
+    if (animation && !reducedMotion.shouldReduceMotion) {
       animate(scrollStart, tabsRef.current, scrollValue, {
         duration: theme.transitions.duration.standard
       });
@@ -703,7 +715,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.d.mts

@@ -4,7 +4,7 @@ import { PopperProps } from "../Popper/index.mjs";
 import { Theme } from "../styles/index.mjs";
 import { InternalStandardProps as StandardProps } from "../internal/index.mjs";
 import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.mjs";
-import { TransitionProps } from "../transitions/transition.mjs";
+import { TransitionProps } from "../transitions/types.mjs";
 import { TooltipClasses } from "./tooltipClasses.mjs";
 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;