@mui/material 9.0.0 → 9.1.0

package/Select/SelectInput.mjs

@@ -9,18 +9,58 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import useId from '@mui/utils/useId';
 import refType from '@mui/utils/refType';
+import useTimeout from '@mui/utils/useTimeout';
 import ownerDocument from "../utils/ownerDocument.mjs";
 import Menu from "../Menu/Menu.mjs";
 import { StyledSelectSelect, StyledSelectIcon } from "../NativeSelect/NativeSelectInput.mjs";
 import { isFilled } from "../InputBase/utils.mjs";
 import { styled } from "../zero-styled/index.mjs";
 import slotShouldForwardProp from "../styles/slotShouldForwardProp.mjs";
+import useEnhancedEffect from "../utils/useEnhancedEffect.mjs";
+import useEventCallback from "../utils/useEventCallback.mjs";
 import useForkRef from "../utils/useForkRef.mjs";
 import useControlled from "../utils/useControlled.mjs";
 import selectClasses, { getSelectUtilityClasses } from "./selectClasses.mjs";
 import { areEqualValues, isEmpty, getOpenInteractionType } from "./utils/index.mjs";
+import { canCycleRepeatedCharacter, getMatchingOptionIndex, getTypeaheadOptions } from "./utils/closedTypeahead.mjs";
 import { SelectFocusSourceProvider } from "./utils/SelectFocusSourceContext.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const OPENING_MOUSE_UP_BOUNDARY_OFFSET = 2;
+// The initial mouseup may land on an item when the menu opens over the trigger.
+const SELECTED_MOUSE_UP_DELAY = 400;
+const UNSELECTED_MOUSE_UP_DELAY = 200;
+const TYPEAHEAD_RESET_MS = 750;
+const SPACE = ' ';
+const ARROW_UP = 'ArrowUp';
+const ARROW_DOWN = 'ArrowDown';
+const ENTER = 'Enter';
+
+/**
+ * Returns true when a native mouse event should be treated as happening inside
+ * the element, even if a portal or backdrop retargeted the event away from it.
+ *
+ * Select uses this for the opening mouseup: when the menu opens over the
+ * trigger, the release can target the backdrop or portaled menu even though the
+ * pointer is still inside the trigger or menu bounds.
+ */
+function isMouseEventInsideElement(event, element) {
+  if (!element) {
+    return false;
+  }
+  const eventPath = event.composedPath();
+  if (eventPath.includes(element)) {
+    return true;
+  }
+  if (event.target?.nodeType && element.contains(event.target)) {
+    return true;
+  }
+  const rect = element.getBoundingClientRect();
+  if (rect.width === 0 && rect.height === 0) {
+    // Hidden or transition-mounted elements do not have useful bounds to hit-test.
+    return false;
+  }
+  return event.clientX >= rect.left - OPENING_MOUSE_UP_BOUNDARY_OFFSET && event.clientX <= rect.right + OPENING_MOUSE_UP_BOUNDARY_OFFSET && event.clientY >= rect.top - OPENING_MOUSE_UP_BOUNDARY_OFFSET && event.clientY <= rect.bottom + OPENING_MOUSE_UP_BOUNDARY_OFFSET;
+}
 const SelectSelect = styled(StyledSelectSelect, {
   name: 'MuiSelect',
   slot: 'Select',
@@ -147,6 +187,23 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
   });
   const inputRef = React.useRef(null);
   const displayRef = React.useRef(null);
+  const paperRef = React.useRef(null);
+  const openRef = React.useRef(false);
+  const hasSelectedItemInListRef = React.useRef(false);
+  const openingMouseUpListenerCleanupRef = React.useRef(null);
+  const didPointerDownOnItemRef = React.useRef(false);
+  const selectionRef = React.useRef({
+    allowSelectedMouseUp: false,
+    allowUnselectedMouseUp: false
+  });
+  const closedTypeaheadRef = React.useRef({
+    buffer: '',
+    previousSearchIndex: null,
+    matchedIndex: null
+  });
+  const selectedMouseUpTimer = useTimeout();
+  const unselectedMouseUpTimer = useTimeout();
+  const typeaheadResetTimer = useTimeout();
   const [displayNode, setDisplayNode] = React.useState(null);
   const {
     current: isOpenControlled
@@ -169,6 +226,52 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     value
   }), [value]);
   const open = displayNode !== null && openState;
+  const resetClosedTypeahead = React.useCallback(() => {
+    typeaheadResetTimer.clear();
+    closedTypeaheadRef.current.buffer = '';
+    closedTypeaheadRef.current.previousSearchIndex = null;
+    closedTypeaheadRef.current.matchedIndex = null;
+  }, [typeaheadResetTimer]);
+  useEnhancedEffect(() => {
+    openRef.current = open;
+    if (open) {
+      resetClosedTypeahead();
+    }
+  }, [open, resetClosedTypeahead]);
+  const clearSelectionTimers = React.useCallback(() => {
+    selectedMouseUpTimer.clear();
+    unselectedMouseUpTimer.clear();
+  }, [selectedMouseUpTimer, unselectedMouseUpTimer]);
+  const resetMouseUpSelection = React.useCallback(() => {
+    clearSelectionTimers();
+    didPointerDownOnItemRef.current = false;
+    selectionRef.current = {
+      allowSelectedMouseUp: false,
+      allowUnselectedMouseUp: false
+    };
+  }, [clearSelectionTimers]);
+  const clearOpeningMouseUpListener = React.useCallback(() => {
+    if (openingMouseUpListenerCleanupRef.current) {
+      openingMouseUpListenerCleanupRef.current();
+      openingMouseUpListenerCleanupRef.current = null;
+    }
+  }, []);
+  React.useEffect(() => {
+    if (!open) {
+      resetMouseUpSelection();
+      clearOpeningMouseUpListener();
+    }
+  }, [open, resetMouseUpSelection, clearOpeningMouseUpListener]);
+
+  // Keep unmount cleanup separate from the `open` effect. Effect cleanups also run
+  // before the next effect, which would clear the opening mouseup listener while opening.
+  React.useEffect(() => {
+    return () => {
+      resetMouseUpSelection();
+      clearOpeningMouseUpListener();
+      resetClosedTypeahead();
+    };
+  }, [resetMouseUpSelection, clearOpeningMouseUpListener, resetClosedTypeahead]);
   React.useEffect(() => {
     if (!open || !anchorElement || autoWidth) {
       return undefined;
@@ -219,8 +322,13 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     }
     return undefined;
   }, [labelId]);
-  const update = (openParam, event) => {
+  const update = useEventCallback((openParam, event) => {
+    if (!openParam) {
+      resetMouseUpSelection();
+      clearOpeningMouseUpListener();
+    }
     if (openParam) {
+      resetClosedTypeahead();
       setOpenInteractionType(getOpenInteractionType(event));
       if (onOpen) {
         onOpen(event);
@@ -232,9 +340,33 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       }
     }
     if (!isOpenControlled) {
+      openRef.current = openParam;
       setMenuMinWidthState(autoWidth ? null : anchorElement.clientWidth);
       setOpenState(openParam);
     }
+  });
+  const scheduleMouseUpSelection = () => {
+    resetMouseUpSelection();
+
+    // When there is no selected item in the list, a mousedown
+    // on the trigger followed by a quick mouseup over the first option can accidentally select
+    // within 200ms. Delay unselected mouseup to match the safer 400ms window.
+    if (!hasSelectedItemInListRef.current) {
+      selectedMouseUpTimer.start(SELECTED_MOUSE_UP_DELAY, () => {
+        selectionRef.current.allowSelectedMouseUp = true;
+        selectionRef.current.allowUnselectedMouseUp = true;
+      });
+    } else {
+      // mousedown -> move to unselected item -> mouseup should not select within 200ms.
+      unselectedMouseUpTimer.start(UNSELECTED_MOUSE_UP_DELAY, () => {
+        selectionRef.current.allowUnselectedMouseUp = true;
+
+        // mousedown -> mouseup on selected item should not select within 400ms.
+        selectedMouseUpTimer.start(UNSELECTED_MOUSE_UP_DELAY, () => {
+          selectionRef.current.allowSelectedMouseUp = true;
+        });
+      });
+    }
   };
   const handleMouseDown = event => {
     onMouseDown?.(event);
@@ -245,6 +377,29 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     // Hijack the default focus behavior.
     event.preventDefault();
     displayRef.current.focus();
+    const doc = ownerDocument(event.currentTarget);
+    scheduleMouseUpSelection();
+    clearOpeningMouseUpListener();
+    const handleMouseUp = mouseEvent => {
+      openingMouseUpListenerCleanupRef.current = null;
+      if (!displayRef.current) {
+        return;
+      }
+      if (isMouseEventInsideElement(mouseEvent, displayRef.current) || isMouseEventInsideElement(mouseEvent, paperRef.current)) {
+        return;
+      }
+      if (!openRef.current && isOpenControlled) {
+        return;
+      }
+      update(false, mouseEvent);
+    };
+    doc.addEventListener('mouseup', handleMouseUp, {
+      capture: true,
+      once: true
+    });
+    openingMouseUpListenerCleanupRef.current = () => {
+      doc.removeEventListener('mouseup', handleMouseUp, true);
+    };
     update(true, event);
   };
   const handleClose = event => {
@@ -263,7 +418,27 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       onChange(event, child);
     }
   };
+  const handleValueChange = (event, child, newValue) => {
+    setValueState(newValue);
+    if (onChange) {
+      // Redefine target to allow name and value to be read.
+      // This allows seamless integration with the most popular form libraries.
+      // https://github.com/mui/material-ui/issues/13485#issuecomment-676048492
+      // Clone the event to not override `target` of the original event.
+      const nativeEvent = event.nativeEvent || event;
+      const clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
+      Object.defineProperty(clonedEvent, 'target', {
+        writable: true,
+        value: {
+          value: newValue,
+          name
+        }
+      });
+      onChange(clonedEvent, child);
+    }
+  };
   const handleItemClick = child => event => {
+    didPointerDownOnItemRef.current = false;
     let newValue;
 
     // We use the tabindex attribute to signal the available options.
@@ -285,35 +460,76 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       child.props.onClick(event);
     }
     if (value !== newValue) {
-      setValueState(newValue);
-      if (onChange) {
-        // Redefine target to allow name and value to be read.
-        // This allows seamless integration with the most popular form libraries.
-        // https://github.com/mui/material-ui/issues/13485#issuecomment-676048492
-        // Clone the event to not override `target` of the original event.
-        const nativeEvent = event.nativeEvent || event;
-        const clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
-        Object.defineProperty(clonedEvent, 'target', {
-          writable: true,
-          value: {
-            value: newValue,
-            name
-          }
-        });
-        onChange(clonedEvent, child);
-      }
+      handleValueChange(event, child, newValue);
     }
     if (!multiple) {
       update(false, event);
     }
   };
+  const handleItemMouseUp = (child, selected) => event => {
+    child.props.onMouseUp?.(event);
+    if (didPointerDownOnItemRef.current) {
+      didPointerDownOnItemRef.current = false;
+      return;
+    }
+    const disallowSelectedMouseUp = !selectionRef.current.allowSelectedMouseUp && selected;
+    const disallowUnselectedMouseUp = !selectionRef.current.allowUnselectedMouseUp && !selected;
+    if (disallowSelectedMouseUp || disallowUnselectedMouseUp) {
+      return;
+    }
+    event.currentTarget.click();
+  };
+  const handleClosedTypeahead = event => {
+    const state = closedTypeaheadRef.current;
+    const hasActiveBuffer = state.buffer !== '';
+    if (open || multiple || disabled || event.defaultPrevented || event.nativeEvent?.isComposing || event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey || event.key === SPACE && !hasActiveBuffer) {
+      return false;
+    }
+    if (event.key === SPACE) {
+      event.preventDefault();
+    }
+    const isNewSession = state.buffer === '';
+    const {
+      options: searchableOptions,
+      selectedIndex
+    } = getTypeaheadOptions(childrenArray, value);
+    if (searchableOptions.length === 0) {
+      if (event.key !== SPACE) {
+        resetClosedTypeahead();
+      }
+      return true;
+    }
+    if (isNewSession) {
+      state.previousSearchIndex = selectedIndex;
+    }
+    const key = event.key.toLowerCase();
+    if (state.buffer === key && canCycleRepeatedCharacter(searchableOptions, key)) {
+      state.buffer = '';
+      state.previousSearchIndex = state.matchedIndex;
+    }
+    state.buffer += key;
+    typeaheadResetTimer.start(TYPEAHEAD_RESET_MS, resetClosedTypeahead);
+    const matchingIndex = getMatchingOptionIndex(searchableOptions, state.buffer, (state.previousSearchIndex ?? -1) + 1);
+    if (matchingIndex !== -1) {
+      const matchedOption = searchableOptions[matchingIndex];
+      state.matchedIndex = matchingIndex;
+      if (!areEqualValues(value, matchedOption.value)) {
+        handleValueChange(event, matchedOption.child, matchedOption.value);
+      }
+      return true;
+    }
+    if (event.key !== SPACE) {
+      resetClosedTypeahead();
+    }
+    return true;
+  };
   const handleKeyDown = event => {
     if (!readOnly) {
-      const validKeys = [' ', 'ArrowUp', 'ArrowDown',
-      // The native select doesn't respond to enter on macOS, but it's recommended by
+      const isClosedTypeaheadHandled = handleClosedTypeahead(event);
+      // The native select doesn't respond to Enter on macOS, but it's recommended by
       // https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
-      'Enter'];
-      if (validKeys.includes(event.key)) {
+      const isOpenKey = event.key === SPACE || event.key === ARROW_UP || event.key === ARROW_DOWN || event.key === ENTER;
+      if (!isClosedTypeaheadHandled && isOpenKey) {
         event.preventDefault();
         update(true, event);
       }
@@ -321,6 +537,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     }
   };
   const handleBlur = event => {
+    resetClosedTypeahead();
     // if open event.stopImmediatePropagation
     if (!open && onBlur) {
       // Preact support, target is read only property on a native event.
@@ -334,6 +551,19 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       onBlur(event);
     }
   };
+  const handleItemKeyDown = child => event => {
+    child?.props?.onKeyDown?.(event);
+    if (event.key === SPACE && event.target === event.currentTarget && !event.defaultPrevented) {
+      // Prevent the browser from scrolling the page
+      event.preventDefault();
+      // Ignore auto-repeated keydowns to avoid toggling multiple times
+      if (!event.repeat) {
+        // Trigger via click so that onClick receives a click event,
+        // consistent with Enter and pointer interactions.
+        event.currentTarget.click();
+      }
+    }
+  };
   delete other['aria-invalid'];
   let display;
   let displaySingle;
@@ -380,9 +610,18 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     }
     return /*#__PURE__*/React.cloneElement(child, {
       'aria-selected': selected ? 'true' : 'false',
+      onMouseDown: event => {
+        didPointerDownOnItemRef.current = true;
+        child.props.onMouseDown?.(event);
+      },
+      onPointerDown: event => {
+        didPointerDownOnItemRef.current = true;
+        child.props.onPointerDown?.(event);
+      },
       onClick: handleItemClick(child),
+      onMouseUp: handleItemMouseUp(child, selected),
       onKeyUp: event => {
-        if (event.key === ' ') {
+        if (event.key === SPACE) {
           // otherwise our MenuItems dispatches a click event
           // it's not behavior of the native <option> and causes
           // the select to close immediately since we open on space keydown
@@ -392,6 +631,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
           child.props.onKeyUp(event);
         }
       },
+      onKeyDown: handleItemKeyDown(child),
       role: 'option',
       selected,
       value: undefined,
@@ -399,6 +639,14 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       'data-value': child.props.value // Instead, we provide it as a data attribute.
     });
   });
+
+  // Keep the opening mouseup guard current without mutating refs during render.
+  useEnhancedEffect(() => {
+    hasSelectedItemInListRef.current = foundMatch;
+    if (!open && !multiple && !foundMatch) {
+      resetClosedTypeahead();
+    }
+  }, [foundMatch, multiple, open, resetClosedTypeahead]);
   if (process.env.NODE_ENV !== 'production') {
     // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -448,6 +696,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
   };
   const classes = useUtilityClasses(ownerState);
   const menuPaperSlotProps = typeof MenuProps.slotProps?.paper === 'function' ? MenuProps.slotProps.paper(ownerState) : MenuProps.slotProps?.paper;
+  const handlePaperRef = useForkRef(menuPaperSlotProps?.ref, paperRef);
   const menuListSlotProps = typeof MenuProps.slotProps?.list === 'function' ? MenuProps.slotProps.list(ownerState) : MenuProps.slotProps?.list;
   const listboxId = useId();
   const nativeInputId = useId();
@@ -461,8 +710,9 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       "aria-disabled": disabled ? 'true' : undefined,
       "aria-expanded": open ? 'true' : 'false',
       "aria-haspopup": "listbox",
+      "aria-readonly": readOnly ? 'true' : undefined,
       "aria-label": ariaLabel,
-      "aria-labelledby": [labelId, buttonId].filter(Boolean).join(' ') || undefined,
+      "aria-labelledby": labelId,
       "aria-describedby": ariaDescribedby,
       "aria-required": required ? 'true' : undefined,
       "aria-invalid": error ? 'true' : undefined,
@@ -491,6 +741,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       onChange: handleChange,
       tabIndex: -1,
       disabled: disabled,
+      readOnly: readOnly,
       className: classes.nativeInput,
       autoFocus: autoFocus,
       required: required,
@@ -529,6 +780,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
           },
           paper: {
             ...menuPaperSlotProps,
+            ref: handlePaperRef,
             style: {
               minWidth: menuMinWidth,
               ...menuPaperSlotProps?.style

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) {