@mui/material 5.15.6 → 5.15.8

package/modern/SpeedDial/SpeedDial.js

@@ -10,7 +10,7 @@ import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
-import { clamp } from '@mui/utils';
+import { clamp, unstable_useTimeout as useTimeout } from '@mui/utils';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import useTheme from '../styles/useTheme';
@@ -163,12 +163,7 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
     direction
   });
   const classes = useUtilityClasses(ownerState);
-  const eventTimer = React.useRef();
-  React.useEffect(() => {
-    return () => {
-      clearTimeout(eventTimer.current);
-    };
-  }, []);
+  const eventTimer = useTimeout();
 
   /**
    * an index in actions.current
@@ -252,9 +247,9 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
     if (event.type === 'blur' && onBlur) {
       onBlur(event);
     }
-    clearTimeout(eventTimer.current);
+    eventTimer.clear();
     if (event.type === 'blur') {
-      eventTimer.current = setTimeout(() => {
+      eventTimer.start(0, () => {
         setOpenState(false);
         if (onClose) {
           onClose(event, 'blur');
@@ -271,7 +266,7 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
     if (FabProps.onClick) {
       FabProps.onClick(event);
     }
-    clearTimeout(eventTimer.current);
+    eventTimer.clear();
     if (open) {
       setOpenState(false);
       if (onClose) {
@@ -295,10 +290,10 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
     // When moving the focus between two items,
     // a chain if blur and focus event is triggered.
     // We only handle the last event.
-    clearTimeout(eventTimer.current);
+    eventTimer.clear();
     if (!open) {
       // Wait for a future focus or click event
-      eventTimer.current = setTimeout(() => {
+      eventTimer.start(0, () => {
         setOpenState(true);
         if (onOpen) {
           const eventMap = {

package/modern/Toolbar/index.js

@@ -1,5 +1,3 @@
-'use client';
-
 export { default } from './Toolbar';
 export { default as toolbarClasses } from './toolbarClasses';
 export * from './toolbarClasses';

package/modern/Tooltip/Tooltip.js

@@ -6,7 +6,7 @@ const _excluded = ["arrow", "children", "classes", "components", "componentsProp
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { elementAcceptingRef } from '@mui/utils';
+import { elementAcceptingRef, unstable_useTimeout as useTimeout, unstable_Timeout as Timeout } from '@mui/utils';
 import { unstable_composeClasses as composeClasses, appendOwnerState } from '@mui/base';
 import { alpha } from '@mui/system';
 import styled from '../styles/styled';
@@ -194,14 +194,14 @@ const TooltipArrow = styled('span', {
   }
 }));
 let hystersisOpen = false;
-let hystersisTimer = null;
+const hystersisTimer = new Timeout();
 let cursorPosition = {
   x: 0,
   y: 0
 };
 export function testReset() {
   hystersisOpen = false;
-  clearTimeout(hystersisTimer);
+  hystersisTimer.clear();
 }
 function composeEventHandler(handler, eventHandler) {
   return event => {
@@ -259,10 +259,10 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   const [arrowRef, setArrowRef] = React.useState(null);
   const ignoreNonTouchEvents = React.useRef(false);
   const disableInteractive = disableInteractiveProp || followCursor;
-  const closeTimer = React.useRef();
-  const enterTimer = React.useRef();
-  const leaveTimer = React.useRef();
-  const touchTimer = React.useRef();
+  const closeTimer = useTimeout();
+  const enterTimer = useTimeout();
+  const leaveTimer = useTimeout();
+  const touchTimer = useTimeout();
   const [openState, setOpenState] = useControlled({
     controlled: openProp,
     default: false,
@@ -285,23 +285,16 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   }
   const id = useId(idProp);
   const prevUserSelect = React.useRef();
-  const stopTouchInteraction = React.useCallback(() => {
+  const stopTouchInteraction = useEventCallback(() => {
     if (prevUserSelect.current !== undefined) {
       document.body.style.WebkitUserSelect = prevUserSelect.current;
       prevUserSelect.current = undefined;
     }
-    clearTimeout(touchTimer.current);
-  }, []);
-  React.useEffect(() => {
-    return () => {
-      clearTimeout(closeTimer.current);
-      clearTimeout(enterTimer.current);
-      clearTimeout(leaveTimer.current);
-      stopTouchInteraction();
-    };
-  }, [stopTouchInteraction]);
+    touchTimer.clear();
+  });
+  React.useEffect(() => stopTouchInteraction, [stopTouchInteraction]);
   const handleOpen = event => {
-    clearTimeout(hystersisTimer);
+    hystersisTimer.clear();
     hystersisOpen = true;
 
     // The mouseover event will trigger for every nested element in the tooltip.
@@ -317,18 +310,16 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
    * @param {React.SyntheticEvent | Event} event
    */
   event => {
-    clearTimeout(hystersisTimer);
-    hystersisTimer = setTimeout(() => {
+    hystersisTimer.start(800 + leaveDelay, () => {
       hystersisOpen = false;
-    }, 800 + leaveDelay);
+    });
     setOpenState(false);
     if (onClose && open) {
       onClose(event);
     }
-    clearTimeout(closeTimer.current);
-    closeTimer.current = setTimeout(() => {
+    closeTimer.start(theme.transitions.duration.shortest, () => {
       ignoreNonTouchEvents.current = false;
-    }, theme.transitions.duration.shortest);
+    });
   });
   const handleEnter = event => {
     if (ignoreNonTouchEvents.current && event.type !== 'touchstart') {
@@ -341,22 +332,21 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     if (childNode) {
       childNode.removeAttribute('title');
     }
-    clearTimeout(enterTimer.current);
-    clearTimeout(leaveTimer.current);
+    enterTimer.clear();
+    leaveTimer.clear();
     if (enterDelay || hystersisOpen && enterNextDelay) {
-      enterTimer.current = setTimeout(() => {
+      enterTimer.start(hystersisOpen ? enterNextDelay : enterDelay, () => {
         handleOpen(event);
-      }, hystersisOpen ? enterNextDelay : enterDelay);
+      });
     } else {
       handleOpen(event);
     }
   };
   const handleLeave = event => {
-    clearTimeout(enterTimer.current);
-    clearTimeout(leaveTimer.current);
-    leaveTimer.current = setTimeout(() => {
+    enterTimer.clear();
+    leaveTimer.start(leaveDelay, () => {
       handleClose(event);
-    }, leaveDelay);
+    });
   };
   const {
     isFocusVisibleRef,
@@ -398,26 +388,25 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   const handleMouseLeave = handleLeave;
   const handleTouchStart = event => {
     detectTouchStart(event);
-    clearTimeout(leaveTimer.current);
-    clearTimeout(closeTimer.current);
+    leaveTimer.clear();
+    closeTimer.clear();
     stopTouchInteraction();
     prevUserSelect.current = document.body.style.WebkitUserSelect;
     // Prevent iOS text selection on long-tap.
     document.body.style.WebkitUserSelect = 'none';
-    touchTimer.current = setTimeout(() => {
+    touchTimer.start(enterTouchDelay, () => {
       document.body.style.WebkitUserSelect = prevUserSelect.current;
       handleEnter(event);
-    }, enterTouchDelay);
+    });
   };
   const handleTouchEnd = event => {
     if (children.props.onTouchEnd) {
       children.props.onTouchEnd(event);
     }
     stopTouchInteraction();
-    clearTimeout(leaveTimer.current);
-    leaveTimer.current = setTimeout(() => {
+    leaveTimer.start(leaveTouchDelay, () => {
       handleClose(event);
-    }, leaveTouchDelay);
+    });
   };
   React.useEffect(() => {
     if (!open) {
@@ -441,6 +430,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   const handleRef = useForkRef(children.ref, focusVisibleRef, setChildNode, ref);
 
   // There is no point in displaying an empty tooltip.
+  // So we exclude all falsy values, except 0, which is valid.
   if (!title && title !== 0) {
     open = false;
   }

package/modern/index.js

@@ -1,12 +1,10 @@
 /**
- * @mui/material v5.15.6
+ * @mui/material v5.15.8
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-'use client';
-
 /* eslint-disable import/export */
 import * as colors from './colors';
 export { colors };

package/modern/styles/createTheme.js

@@ -32,21 +32,7 @@ Please use another name.` : _formatMuiErrorMessage(18));
     shadows: shadows.slice(),
     typography: createTypography(palette, typographyInput),
     transitions: createTransitions(transitionsInput),
-    zIndex: _extends({}, zIndex),
-    applyDarkStyles(css) {
-      if (this.vars) {
-        // If CssVarsProvider is used as a provider,
-        // returns ':where([data-mui-color-scheme="light|dark"]) &'
-        const selector = this.getColorSchemeSelector('dark').replace(/(\[[^\]]+\])/, ':where($1)');
-        return {
-          [selector]: css
-        };
-      }
-      if (this.palette.mode === 'dark') {
-        return css;
-      }
-      return {};
-    }
+    zIndex: _extends({}, zIndex)
   });
   muiTheme = deepmerge(muiTheme, other);
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);

package/modern/zero-styled/index.js

@@ -1,2 +1,7 @@
-// eslint-disable-next-line import/prefer-default-export
-export { default as styled } from '../styles/styled';
+import useThemeProps from '../styles/useThemeProps';
+export { default as styled } from '../styles/styled';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function createUseThemeProps(name) {
+  return useThemeProps;
+}

package/node/Accordion/Accordion.js

@@ -284,13 +284,13 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes
   /**
    * The component used for the transition.
    * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
-   * @deprecated Use `slots.transition` instead. This prop will be removed in v7.
+   * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   TransitionComponent: _propTypes.default.elementType,
   /**
    * Props applied to the transition element.
    * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
-   * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7.
+   * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   TransitionProps: _propTypes.default.object
 } : void 0;

package/node/Accordion/index.js

@@ -1,5 +1,4 @@
 "use strict";
-'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {

package/node/AccordionActions/index.js

@@ -1,5 +1,4 @@
 "use strict";
-'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {

package/node/AccordionDetails/index.js

@@ -1,5 +1,4 @@
 "use strict";
-'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {

package/node/AccordionSummary/index.js

@@ -1,5 +1,4 @@
 "use strict";
-'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {

package/node/Avatar/Avatar.js

@@ -82,7 +82,7 @@ const AvatarRoot = (0, _styled.default)('div', {
       backgroundColor: theme.vars.palette.Avatar.defaultBg
     } : (0, _extends2.default)({
       backgroundColor: theme.palette.grey[400]
-    }, theme.applyDarkStyles({
+    }, theme.applyStyles('dark', {
       backgroundColor: theme.palette.grey[600]
     })))
   }]
@@ -189,7 +189,10 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
       ownerState: ownerState,
       className: classes.img
     }, imgProps));
-  } else if (childrenProp != null) {
+
+    // We only render valid children, non valid children are rendered with a fallback
+    // We consider that invalid children are all falsy values, except 0, which is valid.
+  } else if (!!childrenProp || childrenProp === 0) {
     children = childrenProp;
   } else if (hasImg && alt) {
     children = alt[0];

package/node/AvatarGroup/AvatarGroup.js

@@ -43,33 +43,23 @@ const AvatarGroupRoot = (0, _styled.default)('div', {
     [`& .${_avatarGroupClasses.default.avatar}`]: styles.avatar
   }, styles.root)
 })(({
-  theme
-}) => ({
-  [`& .${_Avatar.avatarClasses.root}`]: {
-    border: `2px solid ${(theme.vars || theme).palette.background.default}`,
-    boxSizing: 'content-box',
-    marginLeft: -8,
-    '&:last-child': {
-      marginLeft: 0
-    }
-  },
-  display: 'flex',
-  flexDirection: 'row-reverse'
-}));
-const AvatarGroupAvatar = (0, _styled.default)(_Avatar.default, {
-  name: 'MuiAvatarGroup',
-  slot: 'Avatar',
-  overridesResolver: (props, styles) => styles.avatar
-})(({
-  theme
-}) => ({
-  border: `2px solid ${(theme.vars || theme).palette.background.default}`,
-  boxSizing: 'content-box',
-  marginLeft: -8,
-  '&:last-child': {
-    marginLeft: 0
-  }
-}));
+  theme,
+  ownerState
+}) => {
+  const marginValue = ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined ? SPACINGS[ownerState.spacing] : -ownerState.spacing;
+  return {
+    [`& .${_Avatar.avatarClasses.root}`]: {
+      border: `2px solid ${(theme.vars || theme).palette.background.default}`,
+      boxSizing: 'content-box',
+      marginLeft: marginValue != null ? marginValue : -8,
+      '&:last-child': {
+        marginLeft: 0
+      }
+    },
+    display: 'flex',
+    flexDirection: 'row-reverse'
+  };
+});
 const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, ref) {
   var _slotProps$additional;
   const props = (0, _useThemeProps.default)({
@@ -113,7 +103,6 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
   const maxAvatars = Math.min(children.length, clampedMax - 1);
   const extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
   const extraAvatarsElement = renderSurplus ? renderSurplus(extraAvatars) : `+${extraAvatars}`;
-  const marginLeft = spacing && SPACINGS[spacing] !== undefined ? SPACINGS[spacing] : -spacing;
   const additionalAvatarSlotProps = (_slotProps$additional = slotProps.additionalAvatar) != null ? _slotProps$additional : componentsProps.additionalAvatar;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AvatarGroupRoot, (0, _extends2.default)({
     as: component,
@@ -121,23 +110,14 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     className: (0, _clsx.default)(classes.root, className),
     ref: ref
   }, other, {
-    children: [extraAvatars ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarGroupAvatar, (0, _extends2.default)({
-      ownerState: ownerState,
+    children: [extraAvatars ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, (0, _extends2.default)({
       variant: variant
     }, additionalAvatarSlotProps, {
       className: (0, _clsx.default)(classes.avatar, additionalAvatarSlotProps == null ? void 0 : additionalAvatarSlotProps.className),
-      style: (0, _extends2.default)({
-        marginLeft
-      }, additionalAvatarSlotProps == null ? void 0 : additionalAvatarSlotProps.style),
       children: extraAvatarsElement
-    })) : null, children.slice(0, maxAvatars).reverse().map((child, index) => {
+    })) : null, children.slice(0, maxAvatars).reverse().map(child => {
       return /*#__PURE__*/React.cloneElement(child, {
         className: (0, _clsx.default)(child.props.className, classes.avatar),
-        style: (0, _extends2.default)({
-          // Consistent with "&:last-child" styling for the default spacing,
-          // we do not apply custom marginLeft spacing on the last child
-          marginLeft: index === maxAvatars - 1 ? undefined : marginLeft
-        }, child.props.style),
         variant: child.props.variant || variant
       });
     })]

package/node/Badge/Badge.js

@@ -16,7 +16,6 @@ var _composeClasses = require("@mui/base/composeClasses");
 var _useBadge = require("@mui/base/useBadge");
 var _base = require("@mui/base");
 var _zeroStyled = require("../zero-styled");
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _badgeClasses = _interopRequireWildcard(require("./badgeClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -25,6 +24,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const RADIUS_STANDARD = 10;
 const RADIUS_DOT = 4;
+const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiBadge');
 const useUtilityClasses = ownerState => {
   const {
     color,
@@ -227,7 +227,7 @@ const BadgeBadge = (0, _zeroStyled.styled)('span', {
 });
 const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   var _ref, _slots$root, _ref2, _slots$badge, _slotProps$root, _slotProps$badge;
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiBadge'
   });

package/node/ButtonBase/TouchRipple.js

@@ -13,6 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactTransitionGroup = require("react-transition-group");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _system = require("@mui/system");
+var _utils = require("@mui/utils");
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _Ripple = _interopRequireDefault(require("./Ripple"));
@@ -159,18 +160,11 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
   const ignoringMouseDown = React.useRef(false);
   // We use a timer in order to only show the ripples for touch "click" like events.
   // We don't want to display the ripple for touch scroll events.
-  const startTimer = React.useRef(0);
+  const startTimer = (0, _utils.unstable_useTimeout)();
 
   // This is the hook called once the previous timeout is ready.
   const startTimerCommit = React.useRef(null);
   const container = React.useRef(null);
-  React.useEffect(() => {
-    return () => {
-      if (startTimer.current) {
-        clearTimeout(startTimer.current);
-      }
-    };
-  }, []);
   const startCommit = React.useCallback(params => {
     const {
       pulsate,
@@ -263,12 +257,13 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
           });
         };
         // Delay the execution of the ripple effect.
-        startTimer.current = setTimeout(() => {
+        // We have to make a tradeoff with this delay value.
+        startTimer.start(DELAY_RIPPLE, () => {
           if (startTimerCommit.current) {
             startTimerCommit.current();
             startTimerCommit.current = null;
           }
-        }, DELAY_RIPPLE); // We have to make a tradeoff with this value.
+        });
       }
     } else {
       startCommit({
@@ -279,21 +274,21 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
         cb
       });
     }
-  }, [centerProp, startCommit]);
+  }, [centerProp, startCommit, startTimer]);
   const pulsate = React.useCallback(() => {
     start({}, {
       pulsate: true
     });
   }, [start]);
   const stop = React.useCallback((event, cb) => {
-    clearTimeout(startTimer.current);
+    startTimer.clear();
 
     // The touch interaction occurs too quickly.
     // We still want to show ripple effect.
     if ((event == null ? void 0 : event.type) === 'touchend' && startTimerCommit.current) {
       startTimerCommit.current();
       startTimerCommit.current = null;
-      startTimer.current = setTimeout(() => {
+      startTimer.start(0, () => {
         stop(event, cb);
       });
       return;
@@ -306,7 +301,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
       return oldRipples;
     });
     rippleCallback.current = cb;
-  }, []);
+  }, [startTimer]);
   React.useImperativeHandle(ref, () => ({
     pulsate,
     start,

package/node/Collapse/Collapse.js

@@ -131,17 +131,12 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
   });
   const classes = useUtilityClasses(ownerState);
   const theme = (0, _useTheme.default)();
-  const timer = React.useRef();
+  const timer = (0, _utils.unstable_useTimeout)();
   const wrapperRef = React.useRef(null);
   const autoTransitionDuration = React.useRef();
   const collapsedSize = typeof collapsedSizeProp === 'number' ? `${collapsedSizeProp}px` : collapsedSizeProp;
   const isHorizontal = orientation === 'horizontal';
   const size = isHorizontal ? 'width' : 'height';
-  React.useEffect(() => {
-    return () => {
-      clearTimeout(timer.current);
-    };
-  }, []);
   const nodeRef = React.useRef(null);
   const handleRef = (0, _utils3.useForkRef)(ref, nodeRef);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
@@ -238,7 +233,7 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
   });
   const handleAddEndListener = next => {
     if (timeout === 'auto') {
-      timer.current = setTimeout(next, autoTransitionDuration.current || 0);
+      timer.start(autoTransitionDuration.current || 0, next);
     }
     if (addEndListener) {
       // Old call signature before `react-transition-group` implemented `nodeRef`

package/node/Grow/Grow.js

@@ -63,7 +63,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       TransitionComponent = _reactTransitionGroup.Transition
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const timer = React.useRef();
+  const timer = (0, _utils.unstable_useTimeout)();
   const autoTimeout = React.useRef();
   const theme = (0, _useTheme.default)();
   const nodeRef = React.useRef(null);
@@ -152,18 +152,13 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
   const handleExited = normalizedTransitionCallback(onExited);
   const handleAddEndListener = next => {
     if (timeout === 'auto') {
-      timer.current = setTimeout(next, autoTimeout.current || 0);
+      timer.start(autoTimeout.current || 0, next);
     }
     if (addEndListener) {
       // Old call signature before `react-transition-group` implemented `nodeRef`
       addEndListener(nodeRef.current, next);
     }
   };
-  React.useEffect(() => {
-    return () => {
-      clearTimeout(timer.current);
-    };
-  }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, (0, _extends2.default)({
     appear: appear,
     in: inProp,

package/node/Rating/index.js

@@ -1,5 +1,4 @@
 "use strict";
-'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {

package/node/Select/Select.js

@@ -130,7 +130,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
       }, inputProps, {
         classes: inputProps ? (0, _utils.deepmerge)(restOfClasses, inputProps.classes) : restOfClasses
       }, input ? input.props.inputProps : {})
-    }, multiple && native && variant === 'outlined' ? {
+    }, (multiple && native || displayEmpty) && variant === 'outlined' ? {
       notched: true
     } : {}, {
       ref: inputComponentRef,

package/node/Slider/Slider.js

@@ -23,7 +23,7 @@ var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _SliderValueLabel = _interopRequireDefault(require("./SliderValueLabel"));
 var _sliderClasses = _interopRequireWildcard(require("./sliderClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["aria-label", "aria-valuetext", "aria-labelledby", "component", "components", "componentsProps", "color", "classes", "className", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "orientation", "size", "step", "scale", "slotProps", "slots", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat"];
+const _excluded = ["aria-label", "aria-valuetext", "aria-labelledby", "component", "components", "componentsProps", "color", "classes", "className", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "orientation", "shiftStep", "size", "step", "scale", "slotProps", "slots", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function Identity(x) {
@@ -398,6 +398,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
       max = 100,
       min = 0,
       orientation = 'horizontal',
+      shiftStep = 10,
       size = 'medium',
       step = 1,
       scale = Identity,
@@ -420,6 +421,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     color,
     size,
     step,
+    shiftStep,
     scale,
     track,
     valueLabelDisplay,
@@ -764,6 +766,11 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
    * }
    */
   scale: _propTypes.default.func,
+  /**
+   * The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down.
+   * @default 10
+   */
+  shiftStep: _propTypes.default.number,
   /**
    * The size of the slider.
    * @default 'medium'