@mui/material 7.3.10 → 7.3.11

package/Unstable_TrapFocus/FocusTrap.js

@@ -15,7 +15,9 @@ var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"))
 var _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
 var _exactProp = _interopRequireDefault(require("@mui/utils/exactProp"));
 var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
+var _contains = _interopRequireDefault(require("../utils/contains"));
 var _getActiveElement = _interopRequireDefault(require("../utils/getActiveElement"));
+var _focusable = require("../utils/focusable");
 var _jsxRuntime = require("react/jsx-runtime");
 // Inspired by https://github.com/focus-trap/tabbable
 const candidatesSelector = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])'].join(',');
@@ -114,21 +116,29 @@ function FocusTrap(props) {
     activated.current = !disableAutoFocus;
   }, [disableAutoFocus, open]);
   React.useEffect(() => {
+    // Reset on every mount — React 18 Strict Mode double-mounts leave this
+    // stuck at `true` after the cleanup of the previous mount set it.
+    ignoreNextEnforceFocus.current = false;
+
     // We might render an empty child.
     if (!open || !rootRef.current) {
       return;
     }
     const doc = (0, _ownerDocument.default)(rootRef.current);
     const activeElement = (0, _getActiveElement.default)(doc);
-    if (!rootRef.current.contains(activeElement)) {
-      if (!rootRef.current.hasAttribute('tabIndex')) {
+
+    // Prefer the explicitly marked focusable element. Fall back to the root
+    // element for generic FocusTrap usage.
+    const focusTarget = (0, _focusable.getFocusTarget)(rootRef.current) ?? rootRef.current;
+    if (!(0, _contains.default)(rootRef.current, activeElement)) {
+      if (!focusTarget.hasAttribute('tabIndex')) {
         if (process.env.NODE_ENV !== 'production') {
           console.error(['MUI: The modal content node does not accept focus.', 'For the benefit of assistive technologies, ' + 'the tabIndex of the node is being set to "-1".'].join('\n'));
         }
-        rootRef.current.setAttribute('tabIndex', '-1');
+        focusTarget.setAttribute('tabIndex', '-1');
       }
       if (activated.current) {
-        rootRef.current.focus();
+        focusTarget.focus();
       }
     }
     return () => {
@@ -188,7 +198,7 @@ function FocusTrap(props) {
       }
 
       // The focus is already inside
-      if (rootElement.contains(activeEl)) {
+      if ((0, _contains.default)(rootElement, activeEl)) {
         return;
       }
 

package/esm/Autocomplete/Autocomplete.js

@@ -6,6 +6,8 @@ import PropTypes from 'prop-types';
 import integerPropType from '@mui/utils/integerPropType';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
+import useForcedRerendering from '@mui/utils/useForcedRerendering';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useAutocomplete, { createFilterOptions } from "../useAutocomplete/index.js";
 import Popper from "../Popper/index.js";
 import ListSubheader from "../ListSubheader/index.js";
@@ -495,6 +497,46 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     ...props,
     componentName: 'Autocomplete'
   });
+
+  // Re-render when anchorEl resizes so the Popper width stays in sync.
+  // Width is always read synchronously from anchorEl.clientWidth during render
+  // (no stale cached value). The hook just triggers a re-render on resize.
+  const forceRenderOnResize = useForcedRerendering();
+  React.useEffect(() => {
+    if (!popupOpen || !anchorEl || typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+    let lastWidth = anchorEl.clientWidth;
+    const observer = new ResizeObserver(() => {
+      const newWidth = anchorEl.clientWidth;
+      if (lastWidth !== newWidth) {
+        lastWidth = newWidth;
+        forceRenderOnResize();
+      }
+    });
+    observer.observe(anchorEl);
+    return () => {
+      observer.disconnect();
+    };
+  }, [popupOpen, anchorEl, forceRenderOnResize]);
+
+  // When popupOpen becomes false, useAutocomplete returns [] for groupedOptions.
+  // Transitioned Poppers can remain mounted for their exit animation, so keep rendering
+  // the last open-state options instead of flashing "No options" or an empty Paper.
+  // These options are stale because they no longer reflect the hook's current
+  // groupedOptions, but they are non-interactive while closing and reset on next open.
+  const previousGroupedOptionsRef = React.useRef([]);
+  const prevPopupOpenRef = React.useRef(false);
+  const renderedOptions = popupOpen ? groupedOptions : previousGroupedOptionsRef.current;
+  useEnhancedEffect(() => {
+    if (popupOpen && !prevPopupOpenRef.current) {
+      previousGroupedOptionsRef.current = [];
+    }
+    prevPopupOpenRef.current = popupOpen;
+    if (popupOpen && groupedOptions.length > 0) {
+      previousGroupedOptionsRef.current = groupedOptions;
+    }
+  }, [popupOpen, groupedOptions]);
   const hasClearIcon = !disableClearable && !disabled && dirty && !readOnly;
   const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
   const {
@@ -568,13 +610,24 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     additionalProps: {
       disablePortal,
       style: {
-        width: anchorEl ? anchorEl.clientWidth : null
+        width: anchorEl ? anchorEl.clientWidth : null,
+        // Prevent interaction with stale cached options during exit transitions.
+        // The hook's filteredOptions is [] when popupOpen=false, so clicks on stale
+        // rendered options would pass undefined to selectNewValue.
+        pointerEvents: popupOpen ? undefined : 'none'
       },
       role: 'presentation',
       anchorEl,
       open: popupOpen
     }
   });
+
+  // Don't render the Popper when there's no content to show.
+  // In freeSolo mode, "No options" text is suppressed, so if there are also no
+  // matching options and loading is false, the Paper would be empty.
+  // Uses renderedOptions (not groupedOptions) so Popper stays during exit transitions.
+  // Respect keepMounted from resolved popperProps (handles both object and callback slotProps forms).
+  const hasPopupContent = renderedOptions.length > 0 || loading || !freeSolo || popperProps.keepMounted === true;
   const [ClearIndicatorSlot, clearIndicatorProps] = useSlot('clearIndicator', {
     elementType: AutocompleteClearIndicator,
     externalForwardedProps,
@@ -720,17 +773,17 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
           ...getInputProps()
         }
       })
-    }), anchorEl ? /*#__PURE__*/_jsx(AutocompletePopper, {
+    }), anchorEl && hasPopupContent ? /*#__PURE__*/_jsx(AutocompletePopper, {
       as: PopperSlot,
       ...popperProps,
       children: /*#__PURE__*/_jsxs(AutocompletePaper, {
         as: PaperSlot,
         ...paperProps,
-        children: [loading && groupedOptions.length === 0 ? /*#__PURE__*/_jsx(AutocompleteLoading, {
+        children: [loading && renderedOptions.length === 0 ? /*#__PURE__*/_jsx(AutocompleteLoading, {
           className: classes.loading,
           ownerState: ownerState,
           children: loadingText
-        }) : null, groupedOptions.length === 0 && !freeSolo && !loading ? /*#__PURE__*/_jsx(AutocompleteNoOptions, {
+        }) : null, renderedOptions.length === 0 && !freeSolo && !loading ? /*#__PURE__*/_jsx(AutocompleteNoOptions, {
           className: classes.noOptions,
           ownerState: ownerState,
           role: "presentation",
@@ -739,10 +792,9 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
             event.preventDefault();
           },
           children: noOptionsText
-        }) : null, groupedOptions.length > 0 ? /*#__PURE__*/_jsx(ListboxSlot, {
-          as: ListboxComponentProp,
+        }) : null, renderedOptions.length > 0 ? /*#__PURE__*/_jsx(ListboxSlot, {
           ...listboxProps,
-          children: groupedOptions.map((option, index) => {
+          children: renderedOptions.map((option, index) => {
             if (groupBy) {
               return renderGroup({
                 key: option.key,
@@ -775,12 +827,11 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    */
   autoHighlight: PropTypes.bool,
   /**
-   * If `true`, the selected option becomes the value of the input
-   * when the Autocomplete loses focus unless the user chooses
-   * a different option or changes the character string in the input.
+   * If `true`, the value is updated when the input loses focus under one of these conditions:
    *
-   * When using the `freeSolo` mode, the typed value will be the input value
-   * if the Autocomplete loses focus without highlighting an option.
+   * - An option highlighted via keyboard navigation or `autoHighlight` is selected.
+   *   Hover and touch highlights are ignored.
+   * - Otherwise, in `freeSolo` mode, the typed text becomes the value.
    * @default false
    */
   autoSelect: PropTypes.bool,

package/esm/Button/Button.js

@@ -102,6 +102,17 @@ const ButtonRoot = styled(ButtonBase, {
       color: (theme.vars || theme).palette.action.disabled
     },
     variants: [{
+      props: ({
+        ownerState
+      }) => ownerState.startIcon || ownerState.loading && ownerState.loadingPosition === 'start',
+      style: {
+        '&::before': {
+          content: '"\\200b"',
+          width: 0,
+          overflow: 'hidden'
+        }
+      }
+    }, {
       props: {
         variant: 'contained'
       },
@@ -551,6 +562,12 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
       children: loadingIndicator
     })
   }) : null;
+
+  // Don't forward the 'root' classes to the ButtonBase, as they will get duplicated with the one passed to the className prop.
+  const {
+    root,
+    ...forwardedClasses
+  } = classes;
   return /*#__PURE__*/_jsxs(ButtonRoot, {
     ownerState: ownerState,
     className: clsx(contextProps.className, classes.root, className, positionClassName),
@@ -562,7 +579,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     type: type,
     id: loading ? loadingId : idProp,
     ...other,
-    classes: classes,
+    classes: forwardedClasses,
     children: [startIcon, loadingPosition !== 'end' && loader, children, loadingPosition === 'end' && loader, endIcon]
   });
 });

package/esm/Checkbox/Checkbox.js

@@ -152,7 +152,8 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
       slots,
       slotProps: {
         input: mergeSlotProps(typeof externalInputProps === 'function' ? externalInputProps(ownerState) : externalInputProps, {
-          'data-indeterminate': indeterminate
+          'data-indeterminate': indeterminate,
+          'aria-checked': indeterminate ? 'mixed' : undefined
         })
       }
     }

package/esm/ClickAwayListener/ClickAwayListener.js

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import contains from '@mui/utils/contains';
 import ownerDocument from '@mui/utils/ownerDocument';
 import useForkRef from '@mui/utils/useForkRef';
 import useEventCallback from '@mui/utils/useEventCallback';
@@ -84,11 +85,7 @@ function ClickAwayListener(props) {
     if (event.composedPath) {
       insideDOM = event.composedPath().includes(nodeRef.current);
     } else {
-      insideDOM = !doc.documentElement.contains(
-      // @ts-expect-error returns `false` as intended when not dispatched from a Node
-      event.target) || nodeRef.current.contains(
-      // @ts-expect-error returns `false` as intended when not dispatched from a Node
-      event.target);
+      insideDOM = !contains(doc.documentElement, event.target) || contains(nodeRef.current, event.target);
     }
     if (!insideDOM && (disableReactTree || !insideReactTree)) {
       onClickAway(event);

package/esm/Dialog/Dialog.js

@@ -16,6 +16,7 @@ import { styled, useTheme } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import useSlot from "../utils/useSlot.js";
+import { FOCUSABLE_ATTRIBUTE } from "../utils/focusable.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const DialogBackdrop = styled(Backdrop, {
   name: 'MuiDialog',
@@ -294,7 +295,16 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
     shouldForwardComponentProp: true,
     externalForwardedProps,
     ownerState,
-    className: clsx(classes.paper, PaperProps.className)
+    className: classes.paper,
+    additionalProps: {
+      elevation: 24,
+      role,
+      'aria-describedby': ariaDescribedby,
+      'aria-labelledby': ariaLabelledby,
+      'aria-modal': ariaModal,
+      tabIndex: -1,
+      [FOCUSABLE_ATTRIBUTE]: ''
+    }
   });
   const [ContainerSlot, containerSlotProps] = useSlot('container', {
     elementType: DialogContainer,
@@ -338,11 +348,6 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
         ...containerSlotProps,
         children: /*#__PURE__*/_jsx(PaperSlot, {
           as: PaperComponent,
-          elevation: 24,
-          role: role,
-          "aria-describedby": ariaDescribedby,
-          "aria-labelledby": ariaLabelledby,
-          "aria-modal": ariaModal,
           ...paperSlotProps,
           children: /*#__PURE__*/_jsx(DialogContext.Provider, {
             value: dialogContextValue,

package/esm/Drawer/Drawer.js

@@ -14,8 +14,10 @@ import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
 import { styled, useTheme } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
+import useForkRef from "../utils/useForkRef.js";
 import { getDrawerUtilityClass } from "./drawerClasses.js";
 import useSlot from "../utils/useSlot.js";
+import { FOCUSABLE_ATTRIBUTE } from "../utils/focusable.js";
 import { mergeSlotProps } from "../utils/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const overridesResolver = (props, styles) => {
@@ -208,9 +210,15 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
   // We use this state is order to skip the appear transition during the
   // initial mount of the component.
   const mounted = React.useRef(false);
+  const rootRef = React.useRef(null);
+  const handleRef = useForkRef(ref, rootRef);
   React.useEffect(() => {
     mounted.current = true;
   }, []);
+
+  // Resolve the container lazily so Slide reads the mounted modal root
+  // after refs are assigned, rather than the initial null ref during render.
+  const resolveSlideContainer = React.useCallback(() => rootRef.current, []);
   const anchorInvariant = getAnchor({
     direction: isRtl ? 'rtl' : 'ltr'
   }, anchorProp);
@@ -242,7 +250,7 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
     }
   };
   const [RootSlot, rootSlotProps] = useSlot('root', {
-    ref,
+    ref: handleRef,
     elementType: DrawerRoot,
     className: clsx(classes.root, classes.modal, className),
     shouldForwardComponentProp: true,
@@ -253,6 +261,7 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
       ...ModalProps
     },
     additionalProps: {
+      closeAfterTransition: true,
       open,
       onClose,
       hideBackdrop,
@@ -275,13 +284,15 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
       square: true,
       ...(variant === 'temporary' && {
         role: 'dialog',
-        'aria-modal': 'true'
+        'aria-modal': 'true',
+        [FOCUSABLE_ATTRIBUTE]: '',
+        tabIndex: -1
       })
     }
   });
   const [DockedSlot, dockedSlotProps] = useSlot('docked', {
     elementType: DrawerDockedRoot,
-    ref,
+    ref: handleRef,
     className: clsx(classes.root, classes.docked, className),
     ownerState,
     externalForwardedProps,
@@ -295,7 +306,10 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
       in: open,
       direction: oppositeDirection[anchorInvariant],
       timeout: transitionDuration,
-      appear: mounted.current
+      appear: mounted.current,
+      ...(variant === 'temporary' && (slots.transition == null || slots.transition === Slide) && {
+        container: resolveSlideContainer
+      })
     }
   });
   const drawer = /*#__PURE__*/_jsx(PaperSlot, {

package/esm/Fab/Fab.js

@@ -187,6 +187,12 @@ const Fab = /*#__PURE__*/React.forwardRef(function Fab(inProps, ref) {
     variant
   };
   const classes = useUtilityClasses(ownerState);
+
+  // Don't forward the 'root' class to the ButtonBase, as it will get duplicated with the one passed to the className prop.
+  const {
+    root,
+    ...forwardedClasses
+  } = classes;
   return /*#__PURE__*/_jsx(FabRoot, {
     className: clsx(classes.root, className),
     component: component,
@@ -196,7 +202,7 @@ const Fab = /*#__PURE__*/React.forwardRef(function Fab(inProps, ref) {
     ownerState: ownerState,
     ref: ref,
     ...other,
-    classes: classes,
+    classes: forwardedClasses,
     children: children
   });
 });

package/esm/InputBase/InputBase.js

@@ -19,9 +19,13 @@ import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import capitalize from "../utils/capitalize.js";
 import useForkRef from "../utils/useForkRef.js";
 import useEnhancedEffect from "../utils/useEnhancedEffect.js";
+import ownerDocument from "../utils/ownerDocument.js";
+import getActiveElement from "../utils/getActiveElement.js";
 import { isFilled } from "./utils.js";
 import inputBaseClasses, { getInputBaseUtilityClass } from "./inputBaseClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const MUI_AUTO_FILL = 'mui-auto-fill';
+const MUI_AUTO_FILL_CANCEL = 'mui-auto-fill-cancel';
 export const rootOverridesResolver = (props, styles) => {
   const {
     ownerState
@@ -184,11 +188,11 @@ export const InputBaseInput = styled('input', {
         ownerState
       }) => !ownerState.disableInjectingGlobalStyles,
       style: {
-        animationName: 'mui-auto-fill-cancel',
+        animationName: MUI_AUTO_FILL_CANCEL,
         animationDuration: '10ms',
         '&:-webkit-autofill': {
           animationDuration: '5000s',
-          animationName: 'mui-auto-fill'
+          animationName: MUI_AUTO_FILL
         }
       }
     }, {
@@ -219,14 +223,16 @@ export const InputBaseInput = styled('input', {
   };
 }));
 const InputGlobalStyles = globalCss({
-  '@keyframes mui-auto-fill': {
+  // Keep keyframes non-empty for Emotion production builds. Animation properties are ignored
+  // inside keyframes, avoiding the visible display animation triggered by Chrome 117+.
+  [`@keyframes ${MUI_AUTO_FILL}`]: {
     from: {
-      display: 'block'
+      animationName: MUI_AUTO_FILL
     }
   },
-  '@keyframes mui-auto-fill-cancel': {
+  [`@keyframes ${MUI_AUTO_FILL_CANCEL}`]: {
     from: {
-      display: 'block'
+      animationName: MUI_AUTO_FILL_CANCEL
     }
   }
 });
@@ -342,6 +348,32 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
       });
     }
   }, [value, checkDirty, isControlled]);
+
+  // Sync focused state when autoFocus is used in SSR.
+  // If the browser focused the element before hydration, the onFocus handler never
+  // fires. If it did not, React hydration does not call focus() for autoFocus.
+  useEnhancedEffect(() => {
+    if (!autoFocus) {
+      return;
+    }
+    const input = inputRef.current;
+    if (!input) {
+      return;
+    }
+    const doc = ownerDocument(input);
+    const activeElement = getActiveElement(doc);
+    const noElementFocused = activeElement == null || activeElement === doc.body || activeElement === doc.documentElement;
+    if (input === activeElement) {
+      if (muiFormControl && muiFormControl.onFocus) {
+        muiFormControl.onFocus();
+      } else {
+        setFocused(true);
+      }
+    } else if (noElementFocused) {
+      input.focus();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [autoFocus]);
   const handleFocus = event => {
     if (onFocus) {
       onFocus(event);
@@ -430,7 +462,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
   }
   const handleAutoFill = event => {
     // Provide a fake value as Chrome might not let you access it for security reasons.
-    checkDirty(event.animationName === 'mui-auto-fill-cancel' ? inputRef.current : {
+    checkDirty(event.animationName === MUI_AUTO_FILL_CANCEL ? inputRef.current : {
       value: 'x'
     });
   };

package/esm/ListItemButton/ListItemButton.js

@@ -164,6 +164,12 @@ const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inP
     selected
   };
   const classes = useUtilityClasses(ownerState);
+
+  // Don't forward the 'root' class to the ButtonBase, as it will get duplicated with the one passed to the className prop.
+  const {
+    root,
+    ...forwardedClasses
+  } = classes;
   const handleRef = useForkRef(listItemRef, ref);
   return /*#__PURE__*/_jsx(ListContext.Provider, {
     value: childContext,
@@ -177,7 +183,7 @@ const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inP
       ownerState: ownerState,
       className: clsx(classes.root, className),
       ...other,
-      classes: classes,
+      classes: forwardedClasses,
       children: children
     })
   });

package/esm/MenuItem/MenuItem.js

@@ -207,6 +207,11 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
   };
   const classes = useUtilityClasses(props);
   const handleRef = useForkRef(menuItemRef, ref);
+  // Don't forward the 'root' class to the ButtonBase, as it will get duplicated with the one passed to the className prop.
+  const {
+    root,
+    ...forwardedClasses
+  } = classes;
   let tabIndex;
   if (!props.disabled) {
     tabIndex = tabIndexProp !== undefined ? tabIndexProp : -1;
@@ -222,7 +227,7 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
       className: clsx(classes.root, className),
       ...other,
       ownerState: ownerState,
-      classes: classes
+      classes: forwardedClasses
     })
   });
 });

package/esm/Popper/BasePopper.js

@@ -143,8 +143,30 @@ const PopperTooltip = /*#__PURE__*/React.forwardRef(function PopperTooltip(props
       modifiers: popperModifiers
     });
     handlePopperRefRef.current(popper);
+    const popperElement = tooltipRef.current;
     return () => {
-      popper.destroy();
+      // popper.destroy() clears all inline positioning via the applyStyles
+      // modifier cleanup, which causes the element to jump to its static
+      // position. Snapshot and restore only the positioning properties so the
+      // element stays in place during the destroy/recreate gap (prevents scroll
+      // jumps when a child focuses between the two).
+      // https://github.com/mui/mui-x/issues/21839
+      if (popperElement) {
+        const {
+          style
+        } = popperElement;
+        const position = style.position;
+        const top = style.top;
+        const left = style.left;
+        const transform = style.transform;
+        popper.destroy();
+        style.position = position;
+        style.top = top;
+        style.left = left;
+        style.transform = transform;
+      } else {
+        popper.destroy();
+      }
       handlePopperRefRef.current(null);
     };
   }, [resolvedAnchorElement, disablePortal, modifiers, open, popperOptions, rtlPlacement]);

package/esm/Slider/useSlider.js

@@ -11,6 +11,8 @@ import visuallyHidden from '@mui/utils/visuallyHidden';
 import clamp from '@mui/utils/clamp';
 import extractEventHandlers from '@mui/utils/extractEventHandlers';
 import areArraysEqual from "../utils/areArraysEqual.js";
+import contains from "../utils/contains.js";
+import getActiveElement from "../utils/getActiveElement.js";
 const INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
 function getNewValue(currentValue, step, direction, min, max) {
   return direction === 1 ? Math.min(currentValue + step, max) : Math.max(currentValue - step, min);
@@ -90,8 +92,8 @@ function focusThumb({
   activeIndex,
   setActive
 }) {
-  const doc = ownerDocument(sliderRef.current);
-  if (!sliderRef.current?.contains(doc.activeElement) || Number(doc?.activeElement?.getAttribute('data-index')) !== activeIndex) {
+  const activeElement = getActiveElement(ownerDocument(sliderRef.current));
+  if (!contains(sliderRef.current, activeElement) || Number(activeElement?.getAttribute('data-index')) !== activeIndex) {
     sliderRef.current?.querySelector(`[type="range"][data-index="${activeIndex}"]`).focus();
   }
   if (setActive) {
@@ -347,7 +349,8 @@ export function useSlider(parameters) {
     otherHandlers?.onKeyDown?.(event);
   };
   useEnhancedEffect(() => {
-    if (disabled && sliderRef.current.contains(document.activeElement)) {
+    const activeElement = getActiveElement(ownerDocument(sliderRef.current));
+    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

package/esm/SwipeableDrawer/SwipeableDrawer.js

@@ -6,10 +6,11 @@ import PropTypes from 'prop-types';
 import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
 import NoSsr from "../NoSsr/index.js";
 import Drawer, { getAnchor, isHorizontal } from "../Drawer/Drawer.js";
-import useForkRef from "../utils/useForkRef.js";
+import contains from "../utils/contains.js";
 import ownerDocument from "../utils/ownerDocument.js";
 import ownerWindow from "../utils/ownerWindow.js";
 import useEventCallback from "../utils/useEventCallback.js";
+import useForkRef from "../utils/useForkRef.js";
 import useEnhancedEffect from "../utils/useEnhancedEffect.js";
 import { useTheme } from "../zero-styled/index.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
@@ -292,7 +293,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     const horizontalSwipe = isHorizontal(anchor);
     const currentX = calculateCurrentX(anchorRtl, nativeEvent.touches, ownerDocument(nativeEvent.currentTarget));
     const currentY = calculateCurrentY(anchorRtl, nativeEvent.touches, ownerWindow(nativeEvent.currentTarget));
-    if (open && paperRef.current.contains(nativeEvent.target) && claimedSwipeInstance === null) {
+    if (open && contains(paperRef.current, nativeEvent.target) && claimedSwipeInstance === null) {
       const domTreeShapes = getDomTreeShapes(nativeEvent.target, paperRef.current);
       const hasNativeHandler = computeHasNativeHandler({
         domTreeShapes,
@@ -390,7 +391,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     }
 
     // At least one element clogs the drawer interaction zone.
-    if (open && (hideBackdrop || !backdropRef.current.contains(nativeEvent.target)) && !paperRef.current.contains(nativeEvent.target)) {
+    if (open && (hideBackdrop || !contains(backdropRef.current, nativeEvent.target)) && !contains(paperRef.current, nativeEvent.target)) {
       return;
     }
     const anchorRtl = getAnchor(theme, anchor);
@@ -402,7 +403,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
       // if disableSwipeToOpen
       // if target != swipeArea, and target is not a child of paper ref
       // if is a child of paper ref, and `allowSwipeInChildren` does not allow it
-      if (disableSwipeToOpen || !(nativeEvent.target === swipeAreaRef.current || paperRef.current?.contains(nativeEvent.target) && (typeof allowSwipeInChildren === 'function' ? allowSwipeInChildren(nativeEvent, swipeAreaRef.current, paperRef.current) : allowSwipeInChildren))) {
+      if (disableSwipeToOpen || !(nativeEvent.target === swipeAreaRef.current || contains(paperRef.current, nativeEvent.target) && (typeof allowSwipeInChildren === 'function' ? allowSwipeInChildren(nativeEvent, swipeAreaRef.current, paperRef.current) : allowSwipeInChildren))) {
         return;
       }
       if (horizontalSwipe) {

package/esm/Switch/Switch.js

@@ -13,6 +13,7 @@ import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import switchClasses, { getSwitchUtilityClass } from "./switchClasses.js";
+import { mergeSlotProps } from "../utils/index.js";
 import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -225,6 +226,7 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(inProps, ref) {
     size
   };
   const classes = useUtilityClasses(ownerState);
+  const externalInputProps = slotProps.input;
   const externalForwardedProps = {
     slots,
     slotProps
@@ -278,11 +280,8 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(inProps, ref) {
         ...(slotProps.switchBase && {
           root: typeof slotProps.switchBase === 'function' ? slotProps.switchBase(ownerState) : slotProps.switchBase
         }),
-        input: {
+        input: mergeSlotProps(typeof externalInputProps === 'function' ? externalInputProps(ownerState) : externalInputProps, {
           role: 'switch'
-        },
-        ...(slotProps.input && {
-          input: typeof slotProps.input === 'function' ? slotProps.input(ownerState) : slotProps.input
         })
       }
     }), /*#__PURE__*/_jsx(TrackSlot, {