@mui/material 9.0.1 → 9.1.0

package/Select/utils/closedTypeahead.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.canCycleRepeatedCharacter = canCycleRepeatedCharacter;
+exports.getMatchingOptionIndex = getMatchingOptionIndex;
+exports.getTypeaheadOptions = getTypeaheadOptions;
+var React = _interopRequireWildcard(require("react"));
+var _areEqualValues = _interopRequireDefault(require("./areEqualValues"));
+function hasOwnValueProp(child) {
+  return Object.prototype.hasOwnProperty.call(child.props, 'value');
+}
+function getTextFromReactNode(node) {
+  if (typeof node === 'string' || typeof node === 'number') {
+    return String(node);
+  }
+  let text = '';
+  React.Children.forEach(node, child => {
+    if (typeof child === 'string' || typeof child === 'number') {
+      text += String(child);
+    } else if (/*#__PURE__*/React.isValidElement(child)) {
+      text += getTextFromReactNode(child.props.children);
+    }
+  });
+  return text;
+}
+function getMatchingOptionIndex(options, search, startIndex = 0) {
+  if (options.length === 0) {
+    return -1;
+  }
+  const normalizedStartIndex = (startIndex % options.length + options.length) % options.length;
+  for (let offset = 0; offset < options.length; offset += 1) {
+    const index = (normalizedStartIndex + offset) % options.length;
+    if (options[index].label.startsWith(search)) {
+      return index;
+    }
+  }
+  return -1;
+}
+function canCycleRepeatedCharacter(options, key) {
+  return !options.some(option => option.label[0] === key && option.label[1] === key);
+}
+function getTypeaheadOptions(childrenArray, value) {
+  const options = [];
+  let selectedIndex = -1;
+  for (let index = 0; index < childrenArray.length; index += 1) {
+    const child = childrenArray[index];
+    if (! /*#__PURE__*/React.isValidElement(child) || !hasOwnValueProp(child) || child.props.disabled) {
+      continue;
+    }
+
+    // Closed typeahead cannot exclude CSS-hidden text because no option DOM is mounted.
+    const label = getTextFromReactNode(child.props.children).trim().toLowerCase();
+    if (label === '') {
+      continue;
+    }
+    if (selectedIndex === -1 && (0, _areEqualValues.default)(value, child.props.value)) {
+      selectedIndex = options.length;
+    }
+    options.push({
+      child,
+      label,
+      value: child.props.value
+    });
+  }
+  return {
+    options,
+    selectedIndex
+  };
+}

package/Select/utils/closedTypeahead.mjs

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import areEqualValues from "./areEqualValues.mjs";
+function hasOwnValueProp(child) {
+  return Object.prototype.hasOwnProperty.call(child.props, 'value');
+}
+function getTextFromReactNode(node) {
+  if (typeof node === 'string' || typeof node === 'number') {
+    return String(node);
+  }
+  let text = '';
+  React.Children.forEach(node, child => {
+    if (typeof child === 'string' || typeof child === 'number') {
+      text += String(child);
+    } else if (/*#__PURE__*/React.isValidElement(child)) {
+      text += getTextFromReactNode(child.props.children);
+    }
+  });
+  return text;
+}
+export function getMatchingOptionIndex(options, search, startIndex = 0) {
+  if (options.length === 0) {
+    return -1;
+  }
+  const normalizedStartIndex = (startIndex % options.length + options.length) % options.length;
+  for (let offset = 0; offset < options.length; offset += 1) {
+    const index = (normalizedStartIndex + offset) % options.length;
+    if (options[index].label.startsWith(search)) {
+      return index;
+    }
+  }
+  return -1;
+}
+export function canCycleRepeatedCharacter(options, key) {
+  return !options.some(option => option.label[0] === key && option.label[1] === key);
+}
+export function getTypeaheadOptions(childrenArray, value) {
+  const options = [];
+  let selectedIndex = -1;
+  for (let index = 0; index < childrenArray.length; index += 1) {
+    const child = childrenArray[index];
+    if (! /*#__PURE__*/React.isValidElement(child) || !hasOwnValueProp(child) || child.props.disabled) {
+      continue;
+    }
+
+    // Closed typeahead cannot exclude CSS-hidden text because no option DOM is mounted.
+    const label = getTextFromReactNode(child.props.children).trim().toLowerCase();
+    if (label === '') {
+      continue;
+    }
+    if (selectedIndex === -1 && areEqualValues(value, child.props.value)) {
+      selectedIndex = options.length;
+    }
+    options.push({
+      child,
+      label,
+      value: child.props.value
+    });
+  }
+  return {
+    options,
+    selectedIndex
+  };
+}

package/Skeleton/Skeleton.js

@@ -15,6 +15,7 @@ var _styles = require("../styles");
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
+var _utils = require("../transitions/utils");
 var _skeletonClasses = require("./skeletonClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
@@ -84,6 +85,15 @@ const SkeletonRoot = (0, _zeroStyled.styled)('span', {
 }) => {
   const radiusUnit = (0, _styles.unstable_getUnit)(theme.shape.borderRadius) || 'px';
   const radiusValue = (0, _styles.unstable_toUnitless)(theme.shape.borderRadius);
+  const reducedMotionPulseStyles = (0, _utils.getReducedMotionStyles)(theme, {
+    animation: 'none'
+  });
+  const reducedMotionWaveStyles = (0, _utils.getReducedMotionStyles)(theme, {
+    '&::after': {
+      animation: 'none',
+      display: 'none'
+    }
+  });
   return {
     display: 'block',
     // Create a "on paper" color with sufficient contrast retaining the color
@@ -148,7 +158,12 @@ const SkeletonRoot = (0, _zeroStyled.styled)('span', {
       style: pulseAnimation || {
         animation: `${pulseKeyframe} 2s ease-in-out 0.5s infinite`
       }
-    }, {
+    }, ...(reducedMotionPulseStyles ? [{
+      props: {
+        animation: 'pulse'
+      },
+      style: reducedMotionPulseStyles
+    }] : []), {
       props: {
         animation: 'wave'
       },
@@ -182,7 +197,12 @@ const SkeletonRoot = (0, _zeroStyled.styled)('span', {
           animation: `${waveKeyframe} 2s linear 0.5s infinite`
         }
       }
-    }]
+    }, ...(reducedMotionWaveStyles ? [{
+      props: {
+        animation: 'wave'
+      },
+      style: reducedMotionWaveStyles
+    }] : [])]
   };
 }));
 const Skeleton = /*#__PURE__*/React.forwardRef(function Skeleton(inProps, ref) {

package/Skeleton/Skeleton.mjs

@@ -8,6 +8,7 @@ import { unstable_getUnit as getUnit, unstable_toUnitless as toUnitless } from "
 import { keyframes, css, styled } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
+import { getReducedMotionStyles } from "../transitions/utils.mjs";
 import { getSkeletonUtilityClass } from "./skeletonClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -77,6 +78,15 @@ const SkeletonRoot = styled('span', {
 }) => {
   const radiusUnit = getUnit(theme.shape.borderRadius) || 'px';
   const radiusValue = toUnitless(theme.shape.borderRadius);
+  const reducedMotionPulseStyles = getReducedMotionStyles(theme, {
+    animation: 'none'
+  });
+  const reducedMotionWaveStyles = getReducedMotionStyles(theme, {
+    '&::after': {
+      animation: 'none',
+      display: 'none'
+    }
+  });
   return {
     display: 'block',
     // Create a "on paper" color with sufficient contrast retaining the color
@@ -141,7 +151,12 @@ const SkeletonRoot = styled('span', {
       style: pulseAnimation || {
         animation: `${pulseKeyframe} 2s ease-in-out 0.5s infinite`
       }
-    }, {
+    }, ...(reducedMotionPulseStyles ? [{
+      props: {
+        animation: 'pulse'
+      },
+      style: reducedMotionPulseStyles
+    }] : []), {
       props: {
         animation: 'wave'
       },
@@ -175,7 +190,12 @@ const SkeletonRoot = styled('span', {
           animation: `${waveKeyframe} 2s linear 0.5s infinite`
         }
       }
-    }]
+    }, ...(reducedMotionWaveStyles ? [{
+      props: {
+        animation: 'wave'
+      },
+      style: reducedMotionWaveStyles
+    }] : [])]
   };
 }));
 const Skeleton = /*#__PURE__*/React.forwardRef(function Skeleton(inProps, ref) {

package/Slide/Slide.d.mts

@@ -1,6 +1,15 @@
 import * as React from 'react';
-import { TransitionProps } from "../transitions/transition.mjs";
+import { TransitionProps } from "../transitions/types.mjs";
 export interface SlideProps extends TransitionProps {
+  /**
+   * Add a custom transition end trigger.
+   * Use it when you need custom logic to decide when the transition has ended.
+   * Note: Timeouts are still used as a fallback if provided.
+   *
+   * @param {HTMLElement} node The transitioning DOM node.
+   * @param {Function} done Call this when the transition has finished.
+   */
+  addEndListener?: TransitionProps['addEndListener'] | undefined;
   /**
    * Perform the enter transition when it first mounts if `in` is also `true`.
    * Set this to `false` to disable this behavior.
@@ -16,6 +25,11 @@ export interface SlideProps extends TransitionProps {
    * It's used to set the container the Slide is transitioning from.
    */
   container?: null | Element | ((element: Element) => Element) | undefined;
+  /**
+   * If `true`, the transition ignores `theme.motion.reducedMotion` and keeps its normal timing.
+   * @default false
+   */
+  disablePrefersReducedMotion?: boolean | undefined;
   /**
    * Direction the child node will enter from.
    * @default 'down'
@@ -48,7 +62,6 @@ export interface SlideProps extends TransitionProps {
 
 /**
  * The Slide transition is used by the [Drawer](https://mui.com/material-ui/react-drawer/) component.
- * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  *
  * Demos:
  *

package/Slide/Slide.d.ts

@@ -1,6 +1,15 @@
 import * as React from 'react';
-import { TransitionProps } from "../transitions/transition.js";
+import { TransitionProps } from "../transitions/types.js";
 export interface SlideProps extends TransitionProps {
+  /**
+   * Add a custom transition end trigger.
+   * Use it when you need custom logic to decide when the transition has ended.
+   * Note: Timeouts are still used as a fallback if provided.
+   *
+   * @param {HTMLElement} node The transitioning DOM node.
+   * @param {Function} done Call this when the transition has finished.
+   */
+  addEndListener?: TransitionProps['addEndListener'] | undefined;
   /**
    * Perform the enter transition when it first mounts if `in` is also `true`.
    * Set this to `false` to disable this behavior.
@@ -16,6 +25,11 @@ export interface SlideProps extends TransitionProps {
    * It's used to set the container the Slide is transitioning from.
    */
   container?: null | Element | ((element: Element) => Element) | undefined;
+  /**
+   * If `true`, the transition ignores `theme.motion.reducedMotion` and keeps its normal timing.
+   * @default false
+   */
+  disablePrefersReducedMotion?: boolean | undefined;
   /**
    * Direction the child node will enter from.
    * @default 'down'
@@ -48,7 +62,6 @@ export interface SlideProps extends TransitionProps {
 
 /**
  * The Slide transition is used by the [Drawer](https://mui.com/material-ui/react-drawer/) component.
- * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  *
  * Demos:
  *

package/Slide/Slide.js

@@ -10,21 +10,23 @@ exports.default = void 0;
 exports.setTranslateValue = setTranslateValue;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactTransitionGroup = require("react-transition-group");
 var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
 var _HTMLElementType = _interopRequireDefault(require("@mui/utils/HTMLElementType"));
 var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
 var _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
+var _Transition = _interopRequireDefault(require("../internal/Transition"));
 var _isLayoutSupported = _interopRequireDefault(require("../utils/isLayoutSupported"));
 var _debounce = _interopRequireDefault(require("../utils/debounce"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _zeroStyled = require("../zero-styled");
+var _useReducedMotion = _interopRequireDefault(require("../transitions/useReducedMotion"));
 var _utils = require("../transitions/utils");
 var _utils2 = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const hiddenStyles = {
   visibility: 'hidden'
 };
+const DEFAULT_TRANSLATE_OPTIONS = {};
 
 /**
  * Detects SwipeableDrawer's active-swipe `translate(x, y)` transform.
@@ -34,9 +36,8 @@ function isGestureTranslate(transform) {
   return typeof transform === 'string' && /^translate\(.+,\s*.+\)$/.test(transform);
 }
 
-// Translate the node so it can't be seen on the screen.
-// Later, we're going to translate the node back to its original location with `none`.
-function getTranslateValue(direction, node, resolvedContainer, options = {}) {
+// Move the node off-screen. Later we reset transform to `none` to slide it in.
+function getTranslateValue(direction, node, resolvedContainer, options = DEFAULT_TRANSLATE_OPTIONS) {
   const {
     resetInlineTransform = true
   } = options;
@@ -45,9 +46,9 @@ function getTranslateValue(direction, node, resolvedContainer, options = {}) {
   let rect;
   let transform;
   if (resetInlineTransform) {
-    // Clear the inline transform and transition before reading layout and computed
-    // style so we compute from the element's natural position, not its previous
-    // off-screen translation.
+    // Read layout from the element's natural position, not from a previous
+    // off-screen transform. Clear transition too, or the browser may report an
+    // in-between animated value during exit.
     const previousTransform = node.style.transform;
     const previousTransition = node.style.transition;
     node.style.transition = '';
@@ -104,7 +105,6 @@ function setTranslateValue(direction, node, containerProp, options) {
 
 /**
  * The Slide transition is used by the [Drawer](/material-ui/react-drawer/) component.
- * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
   const theme = (0, _zeroStyled.useTheme)();
@@ -121,6 +121,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     appear = true,
     children,
     container: containerProp,
+    disablePrefersReducedMotion = false,
     direction = 'down',
     easing: easingProp = defaultEasing,
     in: inProp,
@@ -134,12 +135,15 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     timeout = defaultTimeout,
     ...other
   } = props;
+  const reducedMotion = (0, _useReducedMotion.default)(theme.motion.reducedMotion, disablePrefersReducedMotion);
   const childrenRef = React.useRef(null);
   const preserveInlineTransformRef = React.useRef(false);
   const handleRef = (0, _useForkRef.default)((0, _getReactElementRef.default)(children), childrenRef, ref);
   const handleEnter = (0, _utils.normalizedTransitionCallback)(childrenRef, (node, isAppearing) => {
     setTranslateValue(direction, node, containerProp);
-    (0, _utils.reflow)(node);
+    if (!reducedMotion.shouldReduceMotion) {
+      (0, _utils.reflow)(node);
+    }
     if (onEnter) {
       onEnter(node, isAppearing);
     }
@@ -152,7 +156,15 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     }, {
       mode: 'enter'
     });
-    node.style.transition = theme.transitions.create('transform', transitionProps);
+    const transitionTiming = reducedMotion.getTransitionTiming({
+      duration: transitionProps.duration,
+      delay: transitionProps.delay
+    });
+    node.style.transition = theme.transitions.create('transform', {
+      duration: transitionTiming.duration,
+      easing: transitionProps.easing,
+      delay: transitionTiming.delay
+    });
     node.style.transform = 'none';
     if (onEntering) {
       onEntering(node, isAppearing);
@@ -168,7 +180,15 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     }, {
       mode: 'exit'
     });
-    node.style.transition = theme.transitions.create('transform', transitionProps);
+    const transitionTiming = reducedMotion.getTransitionTiming({
+      duration: transitionProps.duration,
+      delay: transitionProps.delay
+    });
+    node.style.transition = theme.transitions.create('transform', {
+      duration: transitionTiming.duration,
+      easing: transitionProps.easing,
+      delay: transitionTiming.delay
+    });
     const preserveInlineTransform = isGestureTranslate(node.style.transform);
     preserveInlineTransformRef.current = preserveInlineTransform;
 
@@ -183,25 +203,22 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
   });
   const handleExited = (0, _utils.normalizedTransitionCallback)(childrenRef, node => {
     preserveInlineTransformRef.current = false;
-    // No need for transitions when the component is hidden
+    // Hidden nodes stay off-screen without animating.
     node.style.transition = '';
     if (onExited) {
       onExited(node);
     }
   });
-  const handleAddEndListener = next => {
-    if (addEndListener) {
-      // Old call signature before `react-transition-group` implemented `nodeRef`
-      addEndListener(childrenRef.current, next);
-    }
-  };
+  const handleAddEndListener = addEndListener ? next => {
+    addEndListener(childrenRef.current, next);
+  } : undefined;
   const updatePosition = React.useCallback(() => {
     if (childrenRef.current) {
       setTranslateValue(direction, childrenRef.current, containerProp);
     }
   }, [direction, containerProp]);
   React.useEffect(() => {
-    // Skip configuration where the position is screen size invariant.
+    // Skip resize listeners when the off-screen position does not depend on screen size.
     if (inProp || direction === 'down' || direction === 'right') {
       return undefined;
     }
@@ -219,12 +236,12 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
   }, [direction, inProp, containerProp]);
   React.useEffect(() => {
     if (!inProp && !preserveInlineTransformRef.current) {
-      // We need to update the position of the drawer when the direction change and
-      // when it's hidden.
+      // While hidden, keep the child at the correct off-screen position if
+      // direction or container changes.
       updatePosition();
     }
   }, [inProp, updatePosition]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.Transition, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Transition.default, {
     nodeRef: childrenRef,
     onEnter: handleEnter,
     onEntered: handleEntered,
@@ -235,12 +252,15 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     addEndListener: handleAddEndListener,
     appear: appear,
     in: inProp,
+    reduceMotion: reducedMotion.shouldReduceMotion,
     timeout: timeout,
     ...other,
     children: (state, {
       ownerState,
       ...restChildProps
     }) => {
+      // Do not pass ownerState to a DOM child. ownerState is only for
+      // Material UI styling, and React would treat it as an invalid DOM attribute.
       let childStyle;
       if (state === 'exited' && !inProp) {
         childStyle = style || children.props.style ? {
@@ -270,9 +290,12 @@ process.env.NODE_ENV !== "production" ? Slide.propTypes /* remove-proptypes */ =
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
   // └─────────────────────────────────────────────────────────────────────┘
   /**
-   * Add a custom transition end trigger. Called with the transitioning DOM
-   * node and a done callback. Allows for more fine grained transition end
-   * logic. Note: Timeouts are still used as a fallback if provided.
+   * Add a custom transition end trigger.
+   * Use it when you need custom logic to decide when the transition has ended.
+   * Note: Timeouts are still used as a fallback if provided.
+   *
+   * @param {HTMLElement} node The transitioning DOM node.
+   * @param {Function} done Call this when the transition has finished.
    */
   addEndListener: _propTypes.default.func,
   /**
@@ -310,6 +333,11 @@ process.env.NODE_ENV !== "production" ? Slide.propTypes /* remove-proptypes */ =
    * @default 'down'
    */
   direction: _propTypes.default.oneOf(['down', 'left', 'right', 'up']),
+  /**
+   * If `true`, the transition ignores `theme.motion.reducedMotion` and keeps its normal timing.
+   * @default false
+   */
+  disablePrefersReducedMotion: _propTypes.default.bool,
   /**
    * The transition timing function.
    * You may specify a single easing or a object containing enter and exit values.