@mui/material 9.0.0 → 9.0.1

package/Select/SelectInput.mjs

@@ -9,18 +9,52 @@ 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 { 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;
+
+/**
+ * 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 +181,17 @@ 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 selectedMouseUpTimer = useTimeout();
+  const unselectedMouseUpTimer = useTimeout();
   const [displayNode, setDisplayNode] = React.useState(null);
   const {
     current: isOpenControlled
@@ -169,6 +214,42 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     value
   }), [value]);
   const open = displayNode !== null && openState;
+  useEnhancedEffect(() => {
+    openRef.current = open;
+  }, [open]);
+  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();
+    };
+  }, [resetMouseUpSelection, clearOpeningMouseUpListener]);
   React.useEffect(() => {
     if (!open || !anchorElement || autoWidth) {
       return undefined;
@@ -219,7 +300,11 @@ 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) {
       setOpenInteractionType(getOpenInteractionType(event));
       if (onOpen) {
@@ -232,9 +317,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 +354,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 => {
@@ -264,6 +396,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     }
   };
   const handleItemClick = child => event => {
+    didPointerDownOnItemRef.current = false;
     let newValue;
 
     // We use the tabindex attribute to signal the available options.
@@ -307,6 +440,19 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       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 handleKeyDown = event => {
     if (!readOnly) {
       const validKeys = [' ', 'ArrowUp', 'ArrowDown',
@@ -380,7 +526,16 @@ 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 === ' ') {
           // otherwise our MenuItems dispatches a click event
@@ -399,6 +554,11 @@ 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;
+  }, [foundMatch]);
   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 +608,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();
@@ -462,7 +623,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       "aria-expanded": open ? 'true' : 'false',
       "aria-haspopup": "listbox",
       "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,
@@ -529,6 +690,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
           },
           paper: {
             ...menuPaperSlotProps,
+            ref: handlePaperRef,
             style: {
               minWidth: menuMinWidth,
               ...menuPaperSlotProps?.style

package/Slide/Slide.js

@@ -26,33 +26,46 @@ const hiddenStyles = {
   visibility: 'hidden'
 };
 
+/**
+ * Detects SwipeableDrawer's active-swipe `translate(x, y)` transform.
+ * Keep this in sync with SwipeableDrawer.setPosition.
+ */
+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) {
+function getTranslateValue(direction, node, resolvedContainer, options = {}) {
+  const {
+    resetInlineTransform = true
+  } = options;
   const containerRect = resolvedContainer && resolvedContainer.getBoundingClientRect();
   const containerWindow = (0, _utils2.ownerWindow)(node);
-
-  // 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. The transition must also be cleared, otherwise the
-  // browser may report an animated intermediate value from a still-running
-  // enter transition when reading getComputedStyle during exit.
-  const previousTransform = node.style.transform;
-  const previousTransition = node.style.transition;
-  node.style.transition = '';
-  node.style.transform = '';
-  const rect = node.getBoundingClientRect();
-  const computedStyle = containerWindow.getComputedStyle(node);
-  const transform = computedStyle.getPropertyValue('transform');
-  node.style.transform = previousTransform;
-  node.style.transition = previousTransition;
-  let offsetX = 0;
-  let offsetY = 0;
-  if (transform && transform !== 'none' && typeof transform === 'string') {
-    const transformValues = transform.split('(')[1].split(')')[0].split(',');
-    offsetX = parseInt(transformValues[4], 10);
-    offsetY = parseInt(transformValues[5], 10);
+  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.
+    const previousTransform = node.style.transform;
+    const previousTransition = node.style.transition;
+    node.style.transition = '';
+    node.style.transform = '';
+    rect = node.getBoundingClientRect();
+    const computedStyle = containerWindow.getComputedStyle(node);
+    transform = computedStyle.getPropertyValue('transform');
+    node.style.transform = previousTransform;
+    node.style.transition = previousTransition;
+  } else {
+    rect = node.getBoundingClientRect();
+    const computedStyle = containerWindow.getComputedStyle(node);
+    transform = computedStyle.getPropertyValue('transform');
   }
+  const {
+    offsetX,
+    offsetY
+  } = (0, _utils.getTranslateOffsets)(transform);
   if (direction === 'left') {
     if (containerRect) {
       return `translateX(${containerRect.right + offsetX - rect.left}px)`;
@@ -81,9 +94,9 @@ function getTranslateValue(direction, node, resolvedContainer) {
 function resolveContainer(containerPropProp) {
   return typeof containerPropProp === 'function' ? containerPropProp() : containerPropProp;
 }
-function setTranslateValue(direction, node, containerProp) {
+function setTranslateValue(direction, node, containerProp, options) {
   const resolvedContainer = resolveContainer(containerProp);
-  const transform = getTranslateValue(direction, node, resolvedContainer);
+  const transform = getTranslateValue(direction, node, resolvedContainer, options);
   if (transform) {
     node.style.transform = transform;
   }
@@ -122,6 +135,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     ...other
   } = props;
   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);
@@ -155,12 +169,20 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
       mode: 'exit'
     });
     node.style.transition = theme.transitions.create('transform', transitionProps);
-    setTranslateValue(direction, node, containerProp);
+    const preserveInlineTransform = isGestureTranslate(node.style.transform);
+    preserveInlineTransformRef.current = preserveInlineTransform;
+
+    // Preserve SwipeableDrawer's inline gesture transform during exit. Slide's
+    // own off-screen translateX/Y transforms still use the reset path.
+    setTranslateValue(direction, node, containerProp, {
+      resetInlineTransform: !preserveInlineTransform
+    });
     if (onExit) {
       onExit(node);
     }
   });
   const handleExited = (0, _utils.normalizedTransitionCallback)(childrenRef, node => {
+    preserveInlineTransformRef.current = false;
     // No need for transitions when the component is hidden
     node.style.transition = '';
     if (onExited) {
@@ -196,7 +218,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     };
   }, [direction, inProp, containerProp]);
   React.useEffect(() => {
-    if (!inProp) {
+    if (!inProp && !preserveInlineTransformRef.current) {
       // We need to update the position of the drawer when the direction change and
       // when it's hidden.
       updatePosition();

package/Slide/Slide.mjs

@@ -11,40 +11,53 @@ import isLayoutSupported from "../utils/isLayoutSupported.mjs";
 import debounce from "../utils/debounce.mjs";
 import useForkRef from "../utils/useForkRef.mjs";
 import { useTheme } from "../zero-styled/index.mjs";
-import { normalizedTransitionCallback, reflow, getTransitionProps } from "../transitions/utils.mjs";
+import { normalizedTransitionCallback, reflow, getTransitionProps, getTranslateOffsets } from "../transitions/utils.mjs";
 import { ownerWindow } from "../utils/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const hiddenStyles = {
   visibility: 'hidden'
 };
 
+/**
+ * Detects SwipeableDrawer's active-swipe `translate(x, y)` transform.
+ * Keep this in sync with SwipeableDrawer.setPosition.
+ */
+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) {
+function getTranslateValue(direction, node, resolvedContainer, options = {}) {
+  const {
+    resetInlineTransform = true
+  } = options;
   const containerRect = resolvedContainer && resolvedContainer.getBoundingClientRect();
   const containerWindow = ownerWindow(node);
-
-  // 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. The transition must also be cleared, otherwise the
-  // browser may report an animated intermediate value from a still-running
-  // enter transition when reading getComputedStyle during exit.
-  const previousTransform = node.style.transform;
-  const previousTransition = node.style.transition;
-  node.style.transition = '';
-  node.style.transform = '';
-  const rect = node.getBoundingClientRect();
-  const computedStyle = containerWindow.getComputedStyle(node);
-  const transform = computedStyle.getPropertyValue('transform');
-  node.style.transform = previousTransform;
-  node.style.transition = previousTransition;
-  let offsetX = 0;
-  let offsetY = 0;
-  if (transform && transform !== 'none' && typeof transform === 'string') {
-    const transformValues = transform.split('(')[1].split(')')[0].split(',');
-    offsetX = parseInt(transformValues[4], 10);
-    offsetY = parseInt(transformValues[5], 10);
+  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.
+    const previousTransform = node.style.transform;
+    const previousTransition = node.style.transition;
+    node.style.transition = '';
+    node.style.transform = '';
+    rect = node.getBoundingClientRect();
+    const computedStyle = containerWindow.getComputedStyle(node);
+    transform = computedStyle.getPropertyValue('transform');
+    node.style.transform = previousTransform;
+    node.style.transition = previousTransition;
+  } else {
+    rect = node.getBoundingClientRect();
+    const computedStyle = containerWindow.getComputedStyle(node);
+    transform = computedStyle.getPropertyValue('transform');
   }
+  const {
+    offsetX,
+    offsetY
+  } = getTranslateOffsets(transform);
   if (direction === 'left') {
     if (containerRect) {
       return `translateX(${containerRect.right + offsetX - rect.left}px)`;
@@ -73,9 +86,9 @@ function getTranslateValue(direction, node, resolvedContainer) {
 function resolveContainer(containerPropProp) {
   return typeof containerPropProp === 'function' ? containerPropProp() : containerPropProp;
 }
-export function setTranslateValue(direction, node, containerProp) {
+export function setTranslateValue(direction, node, containerProp, options) {
   const resolvedContainer = resolveContainer(containerProp);
-  const transform = getTranslateValue(direction, node, resolvedContainer);
+  const transform = getTranslateValue(direction, node, resolvedContainer, options);
   if (transform) {
     node.style.transform = transform;
   }
@@ -114,6 +127,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     ...other
   } = props;
   const childrenRef = React.useRef(null);
+  const preserveInlineTransformRef = React.useRef(false);
   const handleRef = useForkRef(getReactElementRef(children), childrenRef, ref);
   const handleEnter = normalizedTransitionCallback(childrenRef, (node, isAppearing) => {
     setTranslateValue(direction, node, containerProp);
@@ -147,12 +161,20 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
       mode: 'exit'
     });
     node.style.transition = theme.transitions.create('transform', transitionProps);
-    setTranslateValue(direction, node, containerProp);
+    const preserveInlineTransform = isGestureTranslate(node.style.transform);
+    preserveInlineTransformRef.current = preserveInlineTransform;
+
+    // Preserve SwipeableDrawer's inline gesture transform during exit. Slide's
+    // own off-screen translateX/Y transforms still use the reset path.
+    setTranslateValue(direction, node, containerProp, {
+      resetInlineTransform: !preserveInlineTransform
+    });
     if (onExit) {
       onExit(node);
     }
   });
   const handleExited = normalizedTransitionCallback(childrenRef, node => {
+    preserveInlineTransformRef.current = false;
     // No need for transitions when the component is hidden
     node.style.transition = '';
     if (onExited) {
@@ -188,7 +210,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     };
   }, [direction, inProp, containerProp]);
   React.useEffect(() => {
-    if (!inProp) {
+    if (!inProp && !preserveInlineTransformRef.current) {
       // We need to update the position of the drawer when the direction change and
       // when it's hidden.
       updatePosition();

package/Slider/Slider.js

@@ -138,6 +138,10 @@ const SliderRail = exports.SliderRail = (0, _zeroStyled.styled)('span', {
   borderRadius: 'inherit',
   backgroundColor: 'currentColor',
   opacity: 0.38,
+  '@media (forced-colors: active)': {
+    border: '1px solid transparent',
+    boxSizing: 'border-box'
+  },
   variants: [{
     props: {
       orientation: 'horizontal'
@@ -187,7 +191,9 @@ const SliderTrack = exports.SliderTrack = (0, _zeroStyled.styled)('span', {
         size: 'small'
       },
       style: {
-        border: 'none'
+        '@media (forced-colors: none)': {
+          border: 'none'
+        }
       }
     }, {
       props: {
@@ -256,6 +262,9 @@ const SliderThumb = exports.SliderThumb = (0, _zeroStyled.styled)('span', {
   transition: theme.transitions.create(['box-shadow', 'left', 'bottom'], {
     duration: theme.transitions.duration.shortest
   }),
+  '@media (forced-colors: active)': {
+    border: '1px solid ButtonBorder'
+  },
   '&::before': {
     position: 'absolute',
     content: '""',

package/Slider/Slider.mjs

@@ -131,6 +131,10 @@ export const SliderRail = styled('span', {
   borderRadius: 'inherit',
   backgroundColor: 'currentColor',
   opacity: 0.38,
+  '@media (forced-colors: active)': {
+    border: '1px solid transparent',
+    boxSizing: 'border-box'
+  },
   variants: [{
     props: {
       orientation: 'horizontal'
@@ -180,7 +184,9 @@ export const SliderTrack = styled('span', {
         size: 'small'
       },
       style: {
-        border: 'none'
+        '@media (forced-colors: none)': {
+          border: 'none'
+        }
       }
     }, {
       props: {
@@ -249,6 +255,9 @@ export const SliderThumb = styled('span', {
   transition: theme.transitions.create(['box-shadow', 'left', 'bottom'], {
     duration: theme.transitions.duration.shortest
   }),
+  '@media (forced-colors: active)': {
+    border: '1px solid ButtonBorder'
+  },
   '&::before': {
     position: 'absolute',
     content: '""',

package/Slider/useSlider.js

@@ -20,6 +20,7 @@ var _visuallyHidden = _interopRequireDefault(require("@mui/utils/visuallyHidden"
 var _clamp = _interopRequireDefault(require("@mui/utils/clamp"));
 var _extractEventHandlers = _interopRequireDefault(require("@mui/utils/extractEventHandlers"));
 var _areArraysEqual = _interopRequireDefault(require("../utils/areArraysEqual"));
+var _contains = _interopRequireDefault(require("../utils/contains"));
 var _getActiveElement = _interopRequireDefault(require("../utils/getActiveElement"));
 const INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
 const EMPTY_MARKS = [];
@@ -103,7 +104,7 @@ function setValueIndex(values, newValue, index) {
 function focusThumb(sliderRef, activeIndex, setActive, focusVisible) {
   const doc = (0, _ownerDocument.default)(sliderRef.current);
   const activeElement = (0, _getActiveElement.default)(doc);
-  if (!sliderRef.current?.contains(activeElement) || Number(activeElement?.getAttribute('data-index')) !== activeIndex) {
+  if (!(0, _contains.default)(sliderRef.current, activeElement) || Number(activeElement?.getAttribute('data-index')) !== activeIndex) {
     const input = sliderRef.current?.querySelector(`[type="range"][data-index="${activeIndex}"]`);
     if (input != null) {
       if (focusVisible == null) {
@@ -388,7 +389,7 @@ function useSlider(parameters) {
   };
   (0, _useEnhancedEffect.default)(() => {
     const activeElement = (0, _getActiveElement.default)((0, _ownerDocument.default)(sliderRef.current));
-    if (disabled && sliderRef.current?.contains(activeElement)) {
+    if (disabled && (0, _contains.default)(sliderRef.current, activeElement)) {
       // This is necessary because Firefox and Safari will keep focus
       // on a disabled element:
       // https://codesandbox.io/p/sandbox/mui-pr-22247-forked-h151h?file=/src/App.js

package/Slider/useSlider.mjs

@@ -11,6 +11,7 @@ import visuallyHidden from '@mui/utils/visuallyHidden';
 import clamp from '@mui/utils/clamp';
 import extractEventHandlers from '@mui/utils/extractEventHandlers';
 import areArraysEqual from "../utils/areArraysEqual.mjs";
+import contains from "../utils/contains.mjs";
 import getActiveElement from "../utils/getActiveElement.mjs";
 const INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
 const EMPTY_MARKS = [];
@@ -94,7 +95,7 @@ function setValueIndex(values, newValue, index) {
 function focusThumb(sliderRef, activeIndex, setActive, focusVisible) {
   const doc = ownerDocument(sliderRef.current);
   const activeElement = getActiveElement(doc);
-  if (!sliderRef.current?.contains(activeElement) || Number(activeElement?.getAttribute('data-index')) !== activeIndex) {
+  if (!contains(sliderRef.current, activeElement) || Number(activeElement?.getAttribute('data-index')) !== activeIndex) {
     const input = sliderRef.current?.querySelector(`[type="range"][data-index="${activeIndex}"]`);
     if (input != null) {
       if (focusVisible == null) {
@@ -378,7 +379,7 @@ export function useSlider(parameters) {
   };
   useEnhancedEffect(() => {
     const activeElement = getActiveElement(ownerDocument(sliderRef.current));
-    if (disabled && sliderRef.current?.contains(activeElement)) {
+    if (disabled && contains(sliderRef.current, activeElement)) {
       // This is necessary because Firefox and Safari will keep focus
       // on a disabled element:
       // https://codesandbox.io/p/sandbox/mui-pr-22247-forked-h151h?file=/src/App.js