@mui/material 9.0.1 → 9.1.0

package/StepLabel/StepLabel.mjs

@@ -12,6 +12,7 @@ import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import stepLabelClasses, { getStepLabelUtilityClass } from "./stepLabelClasses.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 {
@@ -43,9 +44,6 @@ const StepLabelRoot = styled('span', {
 })({
   display: 'flex',
   alignItems: 'center',
-  [`&.${stepLabelClasses.alternativeLabel}`]: {
-    flexDirection: 'column'
-  },
   [`&.${stepLabelClasses.disabled}`]: {
     cursor: 'default'
   },
@@ -57,6 +55,21 @@ const StepLabelRoot = styled('span', {
       textAlign: 'left',
       padding: '8px 0'
     }
+  }, {
+    props: {
+      alternativeLabel: true
+    },
+    style: {
+      flexDirection: 'column'
+    }
+  }, {
+    props: {
+      orientation: 'vertical',
+      alternativeLabel: true
+    },
+    style: {
+      flexDirection: 'row-reverse'
+    }
   }]
 });
 const StepLabelLabel = styled('span', {
@@ -67,7 +80,7 @@ const StepLabelLabel = styled('span', {
 }) => ({
   ...theme.typography.body2,
   display: 'block',
-  transition: theme.transitions.create('color', {
+  ...getTransitionStyles(theme, 'color', {
     duration: theme.transitions.duration.shortest
   }),
   [`&.${stepLabelClasses.active}, &.${stepLabelClasses.completed}`]: {
@@ -79,7 +92,18 @@ const StepLabelLabel = styled('span', {
   },
   [`&.${stepLabelClasses.error}`]: {
     color: (theme.vars || theme).palette.error.main
-  }
+  },
+  variants: [{
+    props: {
+      orientation: 'vertical',
+      alternativeLabel: true
+    },
+    style: {
+      [`&.${stepLabelClasses.alternativeLabel}`]: {
+        marginTop: 0
+      }
+    }
+  }]
 })));
 const StepLabelIconContainer = styled('span', {
   name: 'MuiStepLabel',
@@ -90,7 +114,17 @@ const StepLabelIconContainer = styled('span', {
   paddingRight: 8,
   [`&.${stepLabelClasses.alternativeLabel}`]: {
     paddingRight: 0
-  }
+  },
+  variants: [{
+    props: {
+      orientation: 'vertical',
+      alternativeLabel: true
+    },
+    style: {
+      paddingRight: 0,
+      paddingLeft: 8
+    }
+  }]
 });
 const StepLabelLabelContainer = styled('span', {
   name: 'MuiStepLabel',
@@ -102,7 +136,18 @@ const StepLabelLabelContainer = styled('span', {
   color: (theme.vars || theme).palette.text.secondary,
   [`&.${stepLabelClasses.alternativeLabel}`]: {
     textAlign: 'center'
-  }
+  },
+  variants: [{
+    props: {
+      orientation: 'vertical',
+      alternativeLabel: true
+    },
+    style: {
+      [`&.${stepLabelClasses.alternativeLabel}`]: {
+        textAlign: 'right'
+      }
+    }
+  }]
 })));
 const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref) {
   const props = useDefaultProps({

package/Stepper/Stepper.d.mts

@@ -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.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

@@ -21,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"));
@@ -152,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
@@ -184,13 +186,22 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     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;
@@ -202,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;

package/SwipeableDrawer/SwipeableDrawer.mjs

@@ -13,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";
@@ -145,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
@@ -177,13 +179,22 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     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;
@@ -195,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;

package/Switch/Switch.js

@@ -21,6 +21,7 @@ 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 {
@@ -125,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}`]: {
@@ -188,7 +189,7 @@ const SwitchTrack = (0, _zeroStyled.styled)('span', {
   width: '100%',
   borderRadius: 14 / 2,
   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)': {

package/Switch/Switch.mjs

@@ -14,6 +14,7 @@ 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 {
@@ -118,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}`]: {
@@ -181,7 +182,7 @@ const SwitchTrack = styled('span', {
   width: '100%',
   borderRadius: 14 / 2,
   zIndex: -1,
-  transition: theme.transitions.create(['opacity', 'background-color'], {
+  ...getTransitionStyles(theme, ['opacity', 'background-color'], {
     duration: theme.transitions.duration.shortest
   }),
   '@media (forced-colors: active)': {

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/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"));
@@ -32,6 +33,7 @@ var _getActiveElement = _interopRequireDefault(require("../utils/getActiveElemen
 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 {
@@ -185,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'
@@ -222,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)({
@@ -230,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,
@@ -336,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'));
           }
         }
@@ -393,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
       });

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";
@@ -25,6 +26,7 @@ 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 {
@@ -178,7 +180,7 @@ const TabsIndicator = styled('span', {
   height: 2,
   bottom: 0,
   width: '100%',
-  transition: theme.transitions.create(),
+  ...getTransitionStyles(theme),
   variants: [{
     props: {
       indicatorColor: 'primary'
@@ -215,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({
@@ -223,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,
@@ -329,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'));
           }
         }
@@ -386,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
       });

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;

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

@@ -330,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;
     }

package/Tooltip/Tooltip.mjs

@@ -322,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;
     }