@mui/material 5.10.11 → 5.10.13

package/legacy/ListItem/ListItem.js

@@ -164,14 +164,20 @@ var ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
       secondaryAction = props.secondaryAction,
       _props$selected = props.selected,
       selected = _props$selected === void 0 ? false : _props$selected,
-      other = _objectWithoutProperties(props, ["alignItems", "autoFocus", "button", "children", "className", "component", "components", "componentsProps", "ContainerComponent", "ContainerProps", "dense", "disabled", "disableGutters", "disablePadding", "divider", "focusVisibleClassName", "secondaryAction", "selected"]);
+      _props$slotProps = props.slotProps,
+      slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
+      _props$slots = props.slots,
+      slots = _props$slots === void 0 ? {} : _props$slots,
+      other = _objectWithoutProperties(props, ["alignItems", "autoFocus", "button", "children", "className", "component", "components", "componentsProps", "ContainerComponent", "ContainerProps", "dense", "disabled", "disableGutters", "disablePadding", "divider", "focusVisibleClassName", "secondaryAction", "selected", "slotProps", "slots"]);
 
   var context = React.useContext(ListContext);
-  var childContext = {
-    dense: dense || context.dense || false,
-    alignItems: alignItems,
-    disableGutters: disableGutters
-  };
+  var childContext = React.useMemo(function () {
+    return {
+      dense: dense || context.dense || false,
+      alignItems: alignItems,
+      disableGutters: disableGutters
+    };
+  }, [alignItems, context.dense, dense, disableGutters]);
   var listItemRef = React.useRef(null);
   useEnhancedEffect(function () {
     if (autoFocus) {
@@ -201,8 +207,8 @@ var ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
 
   var classes = useUtilityClasses(ownerState);
   var handleRef = useForkRef(listItemRef, ref);
-  var Root = components.Root || ListItemRoot;
-  var rootProps = componentsProps.root || {};
+  var Root = slots.root || components.Root || ListItemRoot;
+  var rootProps = slotProps.root || componentsProps.root || {};
 
   var componentProps = _extends({
     className: clsx(classes.root, rootProps.className, className),
@@ -252,8 +258,7 @@ var ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
     value: childContext,
     children: /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, {
       as: Component,
-      ref: handleRef,
-      ownerState: ownerState
+      ref: handleRef
     }, !isHostComponent(Root) && {
       ownerState: _extends({}, ownerState, rootProps.ownerState)
     }, componentProps, {
@@ -336,8 +341,11 @@ process.env.NODE_ENV !== "production" ? ListItem.propTypes
   component: PropTypes.elementType,
 
   /**
-   * The components used for each slot inside the InputBase.
-   * Either a string to use a HTML element or a component.
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
    * @default {}
    */
   components: PropTypes.shape({
@@ -345,7 +353,12 @@ process.env.NODE_ENV !== "production" ? ListItem.propTypes
   }),
 
   /**
-   * The props used for each slot inside the Input.
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
    * @default {}
    */
   componentsProps: PropTypes.shape({
@@ -415,6 +428,29 @@ process.env.NODE_ENV !== "production" ? ListItem.propTypes
    */
   selected: PropTypes.bool,
 
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    root: PropTypes.object
+  }),
+
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `components` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    root: PropTypes.elementType
+  }),
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/legacy/ListItemButton/ListItemButton.js

@@ -122,11 +122,13 @@ var ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inPro
       other = _objectWithoutProperties(props, ["alignItems", "autoFocus", "component", "children", "dense", "disableGutters", "divider", "focusVisibleClassName", "selected", "className"]);
 
   var context = React.useContext(ListContext);
-  var childContext = {
-    dense: dense || context.dense || false,
-    alignItems: alignItems,
-    disableGutters: disableGutters
-  };
+  var childContext = React.useMemo(function () {
+    return {
+      dense: dense || context.dense || false,
+      alignItems: alignItems,
+      disableGutters: disableGutters
+    };
+  }, [alignItems, context.dense, dense, disableGutters]);
   var listItemRef = React.useRef(null);
   useEnhancedEffect(function () {
     if (autoFocus) {

package/legacy/MenuItem/MenuItem.js

@@ -135,10 +135,12 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
       other = _objectWithoutProperties(props, ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex", "className"]);
 
   var context = React.useContext(ListContext);
-  var childContext = {
-    dense: dense || context.dense || false,
-    disableGutters: disableGutters
-  };
+  var childContext = React.useMemo(function () {
+    return {
+      dense: dense || context.dense || false,
+      disableGutters: disableGutters
+    };
+  }, [context.dense, dense, disableGutters]);
   var menuItemRef = React.useRef(null);
   useEnhancedEffect(function () {
     if (autoFocus) {

package/legacy/Modal/Modal.js

@@ -206,8 +206,11 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
   component: PropTypes.elementType,
 
   /**
-   * The components used for each slot inside the Modal.
-   * Either a string to use a HTML element or a component.
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
    * @default {}
    */
   components: PropTypes.shape({
@@ -216,7 +219,12 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
   }),
 
   /**
-   * The props used for each slot inside the Modal.
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
    * @default {}
    */
   componentsProps: PropTypes.shape({

package/legacy/NativeSelect/NativeSelectInput.js

@@ -41,12 +41,14 @@ export var nativeSelectSelectStyles = function nativeSelectSelectStyles(_ref) {
     borderRadius: 0,
     // Reset
     cursor: 'pointer',
-    '&:focus': {
-      // Show that it's not an text input
-      backgroundColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)',
+    '&:focus': _extends({}, theme.vars ? {
+      backgroundColor: "rgba(".concat(theme.vars.palette.common.onBackgroundChannel, " / 0.05)")
+    } : {
+      backgroundColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)'
+    }, {
       borderRadius: 0 // Reset Chrome style
 
-    },
+    }),
     // Remove IE11 arrow
     '&::-ms-expand': {
       display: 'none'
@@ -56,7 +58,7 @@ export var nativeSelectSelectStyles = function nativeSelectSelectStyles(_ref) {
   }), _defineProperty(_extends2, '&[multiple]', {
     height: 'auto'
   }), _defineProperty(_extends2, '&:not([multiple]) option, &:not([multiple]) optgroup', {
-    backgroundColor: theme.palette.background.paper
+    backgroundColor: (theme.vars || theme).palette.background.paper
   }), _defineProperty(_extends2, '&&&', {
     paddingRight: 24,
     minWidth: 16 // So it doesn't collapse.
@@ -66,9 +68,9 @@ export var nativeSelectSelectStyles = function nativeSelectSelectStyles(_ref) {
       paddingRight: 32
     }
   }, ownerState.variant === 'outlined' && {
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: (theme.vars || theme).shape.borderRadius,
     '&:focus': {
-      borderRadius: theme.shape.borderRadius // Reset the reset for Chrome style
+      borderRadius: (theme.vars || theme).shape.borderRadius // Reset the reset for Chrome style
 
     },
     '&&&': {
@@ -97,9 +99,9 @@ export var nativeSelectIconStyles = function nativeSelectIconStyles(_ref3) {
     // Center vertically, height is 1em
     pointerEvents: 'none',
     // Don't block pointer events on the select under the icon.
-    color: theme.palette.action.active
+    color: (theme.vars || theme).palette.action.active
   }, "&.".concat(nativeSelectClasses.disabled), {
-    color: theme.palette.action.disabled
+    color: (theme.vars || theme).palette.action.disabled
   }), ownerState.open && {
     transform: 'rotate(180deg)'
   }, ownerState.variant === 'filled' && {

package/legacy/OutlinedInput/OutlinedInput.js

@@ -113,7 +113,7 @@ var OutlinedInputInput = styled(InputBaseInput, {
   });
 });
 var OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps, ref) {
-  var _React$Fragment;
+  var _ref5, _slots$root, _ref6, _slots$input, _React$Fragment;
 
   var props = useThemeProps({
     props: inProps,
@@ -130,9 +130,11 @@ var OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps
       _props$multiline = props.multiline,
       multiline = _props$multiline === void 0 ? false : _props$multiline,
       notched = props.notched,
+      _props$slots = props.slots,
+      slots = _props$slots === void 0 ? {} : _props$slots,
       _props$type = props.type,
       type = _props$type === void 0 ? 'text' : _props$type,
-      other = _objectWithoutProperties(props, ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "type"]);
+      other = _objectWithoutProperties(props, ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"]);
 
   var classes = useUtilityClasses(props);
   var muiFormControl = useFormControl();
@@ -155,11 +157,13 @@ var OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps
     type: type
   });
 
+  var RootSlot = (_ref5 = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref5 : OutlinedInputRoot;
+  var InputSlot = (_ref6 = (_slots$input = slots.input) != null ? _slots$input : components.Input) != null ? _ref6 : OutlinedInputInput;
   return /*#__PURE__*/_jsx(InputBase, _extends({
-    components: _extends({
-      Root: OutlinedInputRoot,
-      Input: OutlinedInputInput
-    }, components),
+    slots: {
+      root: RootSlot,
+      input: InputSlot
+    },
     renderSuffix: function renderSuffix(state) {
       return /*#__PURE__*/_jsx(NotchedOutlineRoot, {
         ownerState: ownerState,
@@ -217,8 +221,11 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes
   .oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),
 
   /**
-   * The components used for each slot inside the InputBase.
-   * Either a string to use a HTML element or a component.
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
    * @default {}
    */
   components: PropTypes.shape({
@@ -346,6 +353,18 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes
    */
   rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `components` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    input: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
+
   /**
    * Start `InputAdornment` for this component.
    */

package/legacy/PaginationItem/PaginationItem.js

@@ -204,12 +204,7 @@ var PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inPro
       color = _props$color === void 0 ? 'standard' : _props$color,
       component = props.component,
       _props$components = props.components,
-      components = _props$components === void 0 ? {
-    first: FirstPageIcon,
-    last: LastPageIcon,
-    next: NavigateNextIcon,
-    previous: NavigateBeforeIcon
-  } : _props$components,
+      components = _props$components === void 0 ? {} : _props$components,
       _props$disabled = props.disabled,
       disabled = _props$disabled === void 0 ? false : _props$disabled,
       page = props.page,
@@ -219,11 +214,13 @@ var PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inPro
       shape = _props$shape === void 0 ? 'circular' : _props$shape,
       _props$size = props.size,
       size = _props$size === void 0 ? 'medium' : _props$size,
+      _props$slots = props.slots,
+      slots = _props$slots === void 0 ? {} : _props$slots,
       _props$type = props.type,
       type = _props$type === void 0 ? 'page' : _props$type,
       _props$variant = props.variant,
       variant = _props$variant === void 0 ? 'text' : _props$variant,
-      other = _objectWithoutProperties(props, ["className", "color", "component", "components", "disabled", "page", "selected", "shape", "size", "type", "variant"]);
+      other = _objectWithoutProperties(props, ["className", "color", "component", "components", "disabled", "page", "selected", "shape", "size", "slots", "type", "variant"]);
 
   var ownerState = _extends({}, props, {
     color: color,
@@ -238,15 +235,15 @@ var PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inPro
   var theme = useTheme();
   var classes = useUtilityClasses(ownerState);
   var normalizedIcons = theme.direction === 'rtl' ? {
-    previous: components.next || NavigateNextIcon,
-    next: components.previous || NavigateBeforeIcon,
-    last: components.first || FirstPageIcon,
-    first: components.last || LastPageIcon
+    previous: slots.next || components.next || NavigateNextIcon,
+    next: slots.previous || components.previous || NavigateBeforeIcon,
+    last: slots.first || components.first || FirstPageIcon,
+    first: slots.last || components.last || LastPageIcon
   } : {
-    previous: components.previous || NavigateBeforeIcon,
-    next: components.next || NavigateNextIcon,
-    first: components.first || FirstPageIcon,
-    last: components.last || LastPageIcon
+    previous: slots.previous || components.previous || NavigateBeforeIcon,
+    next: slots.next || components.next || NavigateNextIcon,
+    first: slots.first || components.first || FirstPageIcon,
+    last: slots.last || components.last || LastPageIcon
   };
   var Icon = normalizedIcons[type];
   return type === 'start-ellipsis' || type === 'end-ellipsis' ? /*#__PURE__*/_jsx(PaginationItemEllipsis, {
@@ -308,13 +305,12 @@ process.env.NODE_ENV !== "production" ? PaginationItem.propTypes
   component: PropTypes.elementType,
 
   /**
-   * The components used for first, last, next & previous item type
-   * @default {
-   *   first: FirstPageIcon,
-   *   last: LastPageIcon,
-   *   next: NavigateNextIcon,
-   *   previous: NavigateBeforeIcon,
-   * }
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
+   * @default {}
    */
   components: PropTypes.shape({
     first: PropTypes.elementType,
@@ -354,6 +350,20 @@ process.env.NODE_ENV !== "production" ? PaginationItem.propTypes
   /* @typescript-to-proptypes-ignore */
   .oneOfType([PropTypes.oneOf(['small', 'medium', 'large']), PropTypes.string]),
 
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `components` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    first: PropTypes.elementType,
+    last: PropTypes.elementType,
+    next: PropTypes.elementType,
+    previous: PropTypes.elementType
+  }),
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/legacy/Radio/Radio.js

@@ -41,7 +41,8 @@ var RadioRoot = styled(SwitchBase, {
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
   return _extends({
-    color: (theme.vars || theme).palette.text.secondary,
+    color: (theme.vars || theme).palette.text.secondary
+  }, !ownerState.disableRipple && {
     '&:hover': {
       backgroundColor: theme.vars ? "rgba(".concat(ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette[ownerState.color].mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity

package/legacy/RadioGroup/RadioGroup.js

@@ -14,7 +14,7 @@ var RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref) {
       children = props.children,
       defaultValue = props.defaultValue,
       nameProp = props.name,
-      onChange = props.onChange,
+      _onChange = props.onChange,
       valueProp = props.value,
       other = _objectWithoutProperties(props, ["actions", "children", "defaultValue", "name", "onChange", "value"]);
 
@@ -45,22 +45,22 @@ var RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref) {
     };
   }, []);
   var handleRef = useForkRef(ref, rootRef);
-
-  var handleChange = function handleChange(event) {
-    setValueState(event.target.value);
-
-    if (onChange) {
-      onChange(event, event.target.value);
-    }
-  };
-
   var name = useId(nameProp);
-  return /*#__PURE__*/_jsx(RadioGroupContext.Provider, {
-    value: {
+  var contextValue = React.useMemo(function () {
+    return {
       name: name,
-      onChange: handleChange,
+      onChange: function onChange(event) {
+        setValueState(event.target.value);
+
+        if (_onChange) {
+          _onChange(event, event.target.value);
+        }
+      },
       value: value
-    },
+    };
+  }, [name, _onChange, setValueState, value]);
+  return /*#__PURE__*/_jsx(RadioGroupContext.Provider, {
+    value: contextValue,
     children: /*#__PURE__*/_jsx(FormGroup, _extends({
       role: "radiogroup",
       ref: handleRef

package/legacy/Select/Select.js

@@ -251,14 +251,14 @@ process.env.NODE_ENV !== "production" ? Select.propTypes
    *
    * @param {SelectChangeEvent<T>} event The event source of the callback.
    * You can pull out the new value by accessing `event.target.value` (any).
-   * **Warning**: This is a generic event not a change event unless the change event is caused by browser autofill.
+   * **Warning**: This is a generic event, not a change event, unless the change event is caused by browser autofill.
    * @param {object} [child] The react element that was selected when `native` is `false` (default).
    */
   onChange: PropTypes.func,
 
   /**
    * Callback fired when the component requests to be closed.
-   * Use in controlled mode (see open).
+   * Use it in either controlled (see the `open` prop), or uncontrolled mode (to detect when the Select collapes).
    *
    * @param {object} event The event source of the callback.
    */
@@ -266,7 +266,7 @@ process.env.NODE_ENV !== "production" ? Select.propTypes
 
   /**
    * Callback fired when the component requests to be opened.
-   * Use in controlled mode (see open).
+   * Use it in either controlled (see the `open` prop), or uncontrolled mode (to detect when the Select expands).
    *
    * @param {object} event The event source of the callback.
    */

package/legacy/Slider/Slider.js

@@ -594,8 +594,11 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
   .oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),
 
   /**
-   * The components used for each slot inside the Slider.
-   * Either a string to use a HTML element or a component.
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
    * @default {}
    */
   components: PropTypes.shape({
@@ -610,7 +613,13 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
   }),
 
   /**
-   * @ignore
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
+   * @default {}
    */
   componentsProps: PropTypes.shape({
     input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),

package/legacy/StepLabel/StepLabel.js

@@ -113,6 +113,8 @@ var StepLabelLabelContainer = styled('span', {
   });
 });
 var StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref) {
+  var _slotProps$label;
+
   var props = useThemeProps({
     props: inProps,
     name: 'MuiStepLabel'
@@ -126,9 +128,11 @@ var StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref) {
       error = _props$error === void 0 ? false : _props$error,
       iconProp = props.icon,
       optional = props.optional,
+      _props$slotProps = props.slotProps,
+      slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
       StepIconComponentProp = props.StepIconComponent,
       StepIconProps = props.StepIconProps,
-      other = _objectWithoutProperties(props, ["children", "className", "componentsProps", "error", "icon", "optional", "StepIconComponent", "StepIconProps"]);
+      other = _objectWithoutProperties(props, ["children", "className", "componentsProps", "error", "icon", "optional", "slotProps", "StepIconComponent", "StepIconProps"]);
 
   var _React$useContext = React.useContext(StepperContext),
       alternativeLabel = _React$useContext.alternativeLabel,
@@ -157,6 +161,7 @@ var StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref) {
   });
 
   var classes = useUtilityClasses(ownerState);
+  var labelSlotProps = (_slotProps$label = slotProps.label) != null ? _slotProps$label : componentsProps.label;
   return /*#__PURE__*/_jsxs(StepLabelRoot, _extends({
     className: clsx(classes.root, className),
     ref: ref,
@@ -175,9 +180,9 @@ var StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref) {
       className: classes.labelContainer,
       ownerState: ownerState,
       children: [children ? /*#__PURE__*/_jsx(StepLabelLabel, _extends({
-        className: classes.label,
         ownerState: ownerState
-      }, componentsProps.label, {
+      }, labelSlotProps, {
+        className: clsx(classes.label, labelSlotProps == null ? void 0 : labelSlotProps.className),
         children: children
       })) : null, optional]
     })]
@@ -230,6 +235,14 @@ process.env.NODE_ENV !== "production" ? StepLabel.propTypes
    */
   optional: PropTypes.node,
 
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    label: PropTypes.object
+  }),
+
   /**
    * The component to render in place of the [`StepIcon`](/material-ui/api/step-icon/).
    */

package/legacy/SwipeableDrawer/SwipeableDrawer.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import * as React from 'react';
+import { flushSync } from 'react-dom';
 import PropTypes from 'prop-types';
 import { elementTypeAcceptingRef } from '@mui/utils';
 import { useThemeProps } from '@mui/system';
@@ -227,7 +228,9 @@ var SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(inP
 
     claimedSwipeInstance = null;
     touchDetected.current = false;
-    setMaybeSwiping(false); // The swipe wasn't started.
+    flushSync(function () {
+      setMaybeSwiping(false);
+    }); // The swipe wasn't started.
 
     if (!swipeInstance.current.isSwiping) {
       swipeInstance.current.isSwiping = null;
@@ -429,7 +432,9 @@ var SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(inP
     claimedSwipeInstance = null;
     swipeInstance.current.startX = currentX;
     swipeInstance.current.startY = currentY;
-    setMaybeSwiping(true);
+    flushSync(function () {
+      setMaybeSwiping(true);
+    });
 
     if (!open && paperRef.current) {
       // The ref may be null when a parent component updates while swiping.
@@ -487,6 +492,8 @@ var SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(inP
         BackdropProps: _extends({}, BackdropProps, {
           ref: backdropRef
         })
+      }, variant === 'temporary' && {
+        keepMounted: true
       }, ModalPropsProp),
       hideBackdrop: hideBackdrop,
       PaperProps: _extends({}, PaperProps, {