@mui/material 5.10.11 → 5.10.12

package/esm/FormControl/FormControl.js

@@ -182,35 +182,35 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
     };
   }
 
-  const onFilled = React.useCallback(() => {
-    setFilled(true);
-  }, []);
-  const onEmpty = React.useCallback(() => {
-    setFilled(false);
-  }, []);
-  const childContext = {
-    adornedStart,
-    setAdornedStart,
-    color,
-    disabled,
-    error,
-    filled,
-    focused,
-    fullWidth,
-    hiddenLabel,
-    size,
-    onBlur: () => {
-      setFocused(false);
-    },
-    onEmpty,
-    onFilled,
-    onFocus: () => {
-      setFocused(true);
-    },
-    registerEffect,
-    required,
-    variant
-  };
+  const childContext = React.useMemo(() => {
+    return {
+      adornedStart,
+      setAdornedStart,
+      color,
+      disabled,
+      error,
+      filled,
+      focused,
+      fullWidth,
+      hiddenLabel,
+      size,
+      onBlur: () => {
+        setFocused(false);
+      },
+      onEmpty: () => {
+        setFilled(false);
+      },
+      onFilled: () => {
+        setFilled(true);
+      },
+      onFocus: () => {
+        setFocused(true);
+      },
+      registerEffect,
+      required,
+      variant
+    };
+  }, [adornedStart, color, disabled, error, filled, focused, fullWidth, hiddenLabel, registerEffect, required, size, variant]);
   return /*#__PURE__*/_jsx(FormControlContext.Provider, {
     value: childContext,
     children: /*#__PURE__*/_jsx(FormControlRoot, _extends({

package/esm/ListItem/ListItem.js

@@ -165,11 +165,11 @@ const ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
         other = _objectWithoutPropertiesLoose(props, _excluded2);
 
   const context = React.useContext(ListContext);
-  const childContext = {
+  const childContext = React.useMemo(() => ({
     dense: dense || context.dense || false,
     alignItems,
     disableGutters
-  };
+  }), [alignItems, context.dense, dense, disableGutters]);
   const listItemRef = React.useRef(null);
   useEnhancedEffect(() => {
     if (autoFocus) {

package/esm/ListItemButton/ListItemButton.js

@@ -121,11 +121,11 @@ const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inP
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const context = React.useContext(ListContext);
-  const childContext = {
+  const childContext = React.useMemo(() => ({
     dense: dense || context.dense || false,
     alignItems,
     disableGutters
-  };
+  }), [alignItems, context.dense, dense, disableGutters]);
   const listItemRef = React.useRef(null);
   useEnhancedEffect(() => {
     if (autoFocus) {

package/esm/MenuItem/MenuItem.js

@@ -144,10 +144,10 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const context = React.useContext(ListContext);
-  const childContext = {
+  const childContext = React.useMemo(() => ({
     dense: dense || context.dense || false,
     disableGutters
-  };
+  }), [context.dense, dense, disableGutters]);
   const menuItemRef = React.useRef(null);
   useEnhancedEffect(() => {
     if (autoFocus) {

package/esm/Radio/Radio.js

@@ -42,7 +42,8 @@ const RadioRoot = styled(SwitchBase, {
   theme,
   ownerState
 }) => _extends({
-  color: (theme.vars || theme).palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary
+}, !ownerState.disableRipple && {
   '&:hover': {
     backgroundColor: theme.vars ? `rgba(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette[ownerState.color].mainChannel} / ${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/esm/RadioGroup/RadioGroup.js

@@ -42,22 +42,22 @@ const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref)
     }
   }), []);
   const handleRef = useForkRef(ref, rootRef);
+  const name = useId(nameProp);
+  const contextValue = React.useMemo(() => ({
+    name,
 
-  const handleChange = event => {
-    setValueState(event.target.value);
+    onChange(event) {
+      setValueState(event.target.value);
 
-    if (onChange) {
-      onChange(event, event.target.value);
-    }
-  };
+      if (onChange) {
+        onChange(event, event.target.value);
+      }
+    },
 
-  const name = useId(nameProp);
+    value
+  }), [name, onChange, setValueState, value]);
   return /*#__PURE__*/_jsx(RadioGroupContext.Provider, {
-    value: {
-      name,
-      onChange: handleChange,
-      value
-    },
+    value: contextValue,
     children: /*#__PURE__*/_jsx(FormGroup, _extends({
       role: "radiogroup",
       ref: handleRef

package/esm/SwipeableDrawer/SwipeableDrawer.js

@@ -3,6 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["BackdropProps"],
       _excluded2 = ["anchor", "disableBackdropTransition", "disableDiscovery", "disableSwipeToOpen", "hideBackdrop", "hysteresis", "minFlingVelocity", "ModalProps", "onClose", "onOpen", "open", "PaperProps", "SwipeAreaProps", "swipeAreaWidth", "transitionDuration", "variant"];
 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';
@@ -218,7 +219,9 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
 
     claimedSwipeInstance = null;
     touchDetected.current = false;
-    setMaybeSwiping(false); // The swipe wasn't started.
+    flushSync(() => {
+      setMaybeSwiping(false);
+    }); // The swipe wasn't started.
 
     if (!swipeInstance.current.isSwiping) {
       swipeInstance.current.isSwiping = null;
@@ -420,7 +423,9 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     claimedSwipeInstance = null;
     swipeInstance.current.startX = currentX;
     swipeInstance.current.startY = currentY;
-    setMaybeSwiping(true);
+    flushSync(() => {
+      setMaybeSwiping(true);
+    });
 
     if (!open && paperRef.current) {
       // The ref may be null when a parent component updates while swiping.
@@ -476,6 +481,8 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
         BackdropProps: _extends({}, BackdropProps, {
           ref: backdropRef
         })
+      }, variant === 'temporary' && {
+        keepMounted: true
       }, ModalPropsProp),
       hideBackdrop: hideBackdrop,
       PaperProps: _extends({}, PaperProps, {

package/esm/Tooltip/Tooltip.js

@@ -463,7 +463,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   }, [handleClose, open]);
   const handleRef = useForkRef(children.ref, focusVisibleRef, setChildNode, ref); // There is no point in displaying an empty tooltip.
 
-  if (typeof title !== 'number' && !title) {
+  if (!title && title !== 0) {
     open = false;
   }
 

package/generateUtilityClass/index.d.ts

@@ -1,2 +1,2 @@
-export { unstable_generateUtilityClass as default } from '@mui/utils';
-export type { GlobalStateSlot } from '@mui/utils';
+export { unstable_generateUtilityClass as default } from '@mui/utils';
+export type { GlobalStateSlot } from '@mui/utils';

package/generateUtilityClasses/index.d.ts

@@ -1 +1 @@
-export { unstable_generateUtilityClasses as default } from '@mui/utils';
+export { unstable_generateUtilityClasses as default } from '@mui/utils';

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.11
+/** @license MUI v5.10.12
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/internal/switchBaseClasses.d.ts

@@ -1,12 +1,12 @@
-export interface SwitchBaseClasses {
-    root: string;
-    checked: string;
-    disabled: string;
-    input: string;
-    edgeStart: string;
-    edgeEnd: string;
-}
-export declare type SwitchBaseClassKey = keyof SwitchBaseClasses;
-export declare function getSwitchBaseUtilityClass(slot: string): string;
-declare const switchBaseClasses: SwitchBaseClasses;
-export default switchBaseClasses;
+export interface SwitchBaseClasses {
+    root: string;
+    checked: string;
+    disabled: string;
+    input: string;
+    edgeStart: string;
+    edgeEnd: string;
+}
+export declare type SwitchBaseClassKey = keyof SwitchBaseClasses;
+export declare function getSwitchBaseUtilityClass(slot: string): string;
+declare const switchBaseClasses: SwitchBaseClasses;
+export default switchBaseClasses;

package/legacy/ButtonBase/TouchRipple.js

@@ -125,7 +125,7 @@ var TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps, re
   var start = React.useCallback(function () {
     var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    var cb = arguments.length > 2 ? arguments[2] : undefined;
+    var cb = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {};
     var _options$pulsate = options.pulsate,
         pulsate = _options$pulsate === void 0 ? false : _options$pulsate,
         _options$center = options.center,

package/legacy/Chip/Chip.js

@@ -22,6 +22,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
       disabled = ownerState.disabled,
       size = ownerState.size,
       color = ownerState.color,
+      iconColor = ownerState.iconColor,
       onDelete = ownerState.onDelete,
       clickable = ownerState.clickable,
       variant = ownerState.variant;
@@ -29,7 +30,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
     root: ['root', variant, disabled && 'disabled', "size".concat(capitalize(size)), "color".concat(capitalize(color)), clickable && 'clickable', clickable && "clickableColor".concat(capitalize(color)), onDelete && 'deletable', onDelete && "deletableColor".concat(capitalize(color)), "".concat(variant).concat(capitalize(color))],
     label: ['label', "label".concat(capitalize(size))],
     avatar: ['avatar', "avatar".concat(capitalize(size)), "avatarColor".concat(capitalize(color))],
-    icon: ['icon', "icon".concat(capitalize(size)), "iconColor".concat(capitalize(color))],
+    icon: ['icon', "icon".concat(capitalize(size)), "iconColor".concat(capitalize(iconColor))],
     deleteIcon: ['deleteIcon', "deleteIcon".concat(capitalize(size)), "deleteIconColor".concat(capitalize(color)), "deleteIcon".concat(capitalize(variant), "Color").concat(capitalize(color))]
   };
   return composeClasses(slots, getChipUtilityClass, classes);
@@ -41,11 +42,12 @@ var ChipRoot = styled('div', {
   overridesResolver: function overridesResolver(props, styles) {
     var ownerState = props.ownerState;
     var color = ownerState.color,
+        iconColor = ownerState.iconColor,
         clickable = ownerState.clickable,
         onDelete = ownerState.onDelete,
         size = ownerState.size,
         variant = ownerState.variant;
-    return [_defineProperty({}, "& .".concat(chipClasses.avatar), styles.avatar), _defineProperty({}, "& .".concat(chipClasses.avatar), styles["avatar".concat(capitalize(size))]), _defineProperty({}, "& .".concat(chipClasses.avatar), styles["avatarColor".concat(capitalize(color))]), _defineProperty({}, "& .".concat(chipClasses.icon), styles.icon), _defineProperty({}, "& .".concat(chipClasses.icon), styles["icon".concat(capitalize(size))]), _defineProperty({}, "& .".concat(chipClasses.icon), styles["iconColor".concat(capitalize(color))]), _defineProperty({}, "& .".concat(chipClasses.deleteIcon), styles.deleteIcon), _defineProperty({}, "& .".concat(chipClasses.deleteIcon), styles["deleteIcon".concat(capitalize(size))]), _defineProperty({}, "& .".concat(chipClasses.deleteIcon), styles["deleteIconColor".concat(capitalize(color))]), _defineProperty({}, "& .".concat(chipClasses.deleteIcon), styles["deleteIcon".concat(capitalize(variant), "Color").concat(capitalize(color))]), styles.root, styles["size".concat(capitalize(size))], styles["color".concat(capitalize(color))], clickable && styles.clickable, clickable && color !== 'default' && styles["clickableColor".concat(capitalize(color), ")")], onDelete && styles.deletable, onDelete && color !== 'default' && styles["deletableColor".concat(capitalize(color))], styles[variant], styles["".concat(variant).concat(capitalize(color))]];
+    return [_defineProperty({}, "& .".concat(chipClasses.avatar), styles.avatar), _defineProperty({}, "& .".concat(chipClasses.avatar), styles["avatar".concat(capitalize(size))]), _defineProperty({}, "& .".concat(chipClasses.avatar), styles["avatarColor".concat(capitalize(color))]), _defineProperty({}, "& .".concat(chipClasses.icon), styles.icon), _defineProperty({}, "& .".concat(chipClasses.icon), styles["icon".concat(capitalize(size))]), _defineProperty({}, "& .".concat(chipClasses.icon), styles["iconColor".concat(capitalize(iconColor))]), _defineProperty({}, "& .".concat(chipClasses.deleteIcon), styles.deleteIcon), _defineProperty({}, "& .".concat(chipClasses.deleteIcon), styles["deleteIcon".concat(capitalize(size))]), _defineProperty({}, "& .".concat(chipClasses.deleteIcon), styles["deleteIconColor".concat(capitalize(color))]), _defineProperty({}, "& .".concat(chipClasses.deleteIcon), styles["deleteIcon".concat(capitalize(variant), "Color").concat(capitalize(color))]), styles.root, styles["size".concat(capitalize(size))], styles["color".concat(capitalize(color))], clickable && styles.clickable, clickable && color !== 'default' && styles["clickableColor".concat(capitalize(color), ")")], onDelete && styles.deletable, onDelete && color !== 'default' && styles["deletableColor".concat(capitalize(color))], styles[variant], styles["".concat(variant).concat(capitalize(color))]];
   }
 })(function (_ref11) {
   var _extends2;
@@ -101,16 +103,17 @@ var ChipRoot = styled('div', {
     height: 18,
     fontSize: theme.typography.pxToRem(10)
   }), _defineProperty(_extends2, "& .".concat(chipClasses.icon), _extends({
-    color: theme.vars ? theme.vars.palette.Chip.defaultIconColor : textColor,
     marginLeft: 5,
     marginRight: -6
   }, ownerState.size === 'small' && {
     fontSize: 18,
     marginLeft: 4,
     marginRight: -4
+  }, ownerState.iconColor === ownerState.color && _extends({
+    color: theme.vars ? theme.vars.palette.Chip.defaultIconColor : textColor
   }, ownerState.color !== 'default' && {
     color: 'inherit'
-  })), _defineProperty(_extends2, "& .".concat(chipClasses.deleteIcon), _extends({
+  }))), _defineProperty(_extends2, "& .".concat(chipClasses.deleteIcon), _extends({
     WebkitTapHighlightColor: 'transparent',
     color: theme.vars ? "rgba(".concat(theme.vars.palette.text.primaryChannel, " / 0.26)") : deleteIconColor,
     fontSize: 22,
@@ -300,6 +303,7 @@ var Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
     disabled: disabled,
     size: size,
     color: color,
+    iconColor: /*#__PURE__*/React.isValidElement(iconProp) ? iconProp.props.color || color : color,
     onDelete: !!onDelete,
     clickable: clickable,
     variant: variant

package/legacy/FormControl/FormControl.js

@@ -196,35 +196,35 @@ var FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps, re
     };
   }
 
-  var onFilled = React.useCallback(function () {
-    setFilled(true);
-  }, []);
-  var onEmpty = React.useCallback(function () {
-    setFilled(false);
-  }, []);
-  var childContext = {
-    adornedStart: adornedStart,
-    setAdornedStart: setAdornedStart,
-    color: color,
-    disabled: disabled,
-    error: error,
-    filled: filled,
-    focused: focused,
-    fullWidth: fullWidth,
-    hiddenLabel: hiddenLabel,
-    size: size,
-    onBlur: function onBlur() {
-      setFocused(false);
-    },
-    onEmpty: onEmpty,
-    onFilled: onFilled,
-    onFocus: function onFocus() {
-      setFocused(true);
-    },
-    registerEffect: registerEffect,
-    required: required,
-    variant: variant
-  };
+  var childContext = React.useMemo(function () {
+    return {
+      adornedStart: adornedStart,
+      setAdornedStart: setAdornedStart,
+      color: color,
+      disabled: disabled,
+      error: error,
+      filled: filled,
+      focused: focused,
+      fullWidth: fullWidth,
+      hiddenLabel: hiddenLabel,
+      size: size,
+      onBlur: function onBlur() {
+        setFocused(false);
+      },
+      onEmpty: function onEmpty() {
+        setFilled(false);
+      },
+      onFilled: function onFilled() {
+        setFilled(true);
+      },
+      onFocus: function onFocus() {
+        setFocused(true);
+      },
+      registerEffect: registerEffect,
+      required: required,
+      variant: variant
+    };
+  }, [adornedStart, color, disabled, error, filled, focused, fullWidth, hiddenLabel, registerEffect, required, size, variant]);
   return /*#__PURE__*/_jsx(FormControlContext.Provider, {
     value: childContext,
     children: /*#__PURE__*/_jsx(FormControlRoot, _extends({

package/legacy/ListItem/ListItem.js

@@ -167,11 +167,13 @@ var ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
       other = _objectWithoutProperties(props, ["alignItems", "autoFocus", "button", "children", "className", "component", "components", "componentsProps", "ContainerComponent", "ContainerProps", "dense", "disabled", "disableGutters", "disablePadding", "divider", "focusVisibleClassName", "secondaryAction", "selected"]);
 
   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/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/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/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, {

package/legacy/Tooltip/Tooltip.js

@@ -486,7 +486,7 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   }, [handleClose, open]);
   var handleRef = useForkRef(children.ref, focusVisibleRef, setChildNode, ref); // There is no point in displaying an empty tooltip.
 
-  if (typeof title !== 'number' && !title) {
+  if (!title && title !== 0) {
     open = false;
   }
 

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.11
+/** @license MUI v5.10.12
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.