@mui/material 5.15.6 → 5.15.7

package/Accordion/index.js

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

package/AccordionActions/index.js

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

package/AccordionDetails/index.js

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

package/AccordionSummary/index.js

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

package/Avatar/Avatar.js

@@ -74,7 +74,7 @@ const AvatarRoot = styled('div', {
       backgroundColor: theme.vars.palette.Avatar.defaultBg
     } : _extends({
       backgroundColor: theme.palette.grey[400]
-    }, theme.applyDarkStyles({
+    }, theme.applyStyles('dark', {
       backgroundColor: theme.palette.grey[600]
     })))
   }]
@@ -181,7 +181,7 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
       ownerState: ownerState,
       className: classes.img
     }, imgProps));
-  } else if (childrenProp != null) {
+  } else if (childrenProp != null && childrenProp !== '' && typeof childrenProp !== 'boolean') {
     children = childrenProp;
   } else if (hasImg && alt) {
     children = alt[0];

package/AvatarGroup/AvatarGroup.js

@@ -36,33 +36,23 @@ const AvatarGroupRoot = styled('div', {
     [`& .${avatarGroupClasses.avatar}`]: styles.avatar
   }, styles.root)
 })(({
-  theme
-}) => ({
-  [`& .${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 = styled(Avatar, {
-  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 {
+    [`& .${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 = useThemeProps({
@@ -106,7 +96,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__*/_jsxs(AvatarGroupRoot, _extends({
     as: component,
@@ -114,23 +103,14 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     className: clsx(classes.root, className),
     ref: ref
   }, other, {
-    children: [extraAvatars ? /*#__PURE__*/_jsx(AvatarGroupAvatar, _extends({
-      ownerState: ownerState,
+    children: [extraAvatars ? /*#__PURE__*/_jsx(Avatar, _extends({
       variant: variant
     }, additionalAvatarSlotProps, {
       className: clsx(classes.avatar, additionalAvatarSlotProps == null ? void 0 : additionalAvatarSlotProps.className),
-      style: _extends({
-        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: clsx(child.props.className, classes.avatar),
-        style: _extends({
-          // 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/Badge/Badge.js

@@ -10,14 +10,14 @@ import { usePreviousProps } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import { useBadge } from '@mui/base/useBadge';
 import { useSlotProps } from '@mui/base';
-import { styled } from '../zero-styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import capitalize from '../utils/capitalize';
 import badgeClasses, { getBadgeUtilityClass } from './badgeClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const RADIUS_STANDARD = 10;
 const RADIUS_DOT = 4;
+const useThemeProps = createUseThemeProps('MuiBadge');
 const useUtilityClasses = ownerState => {
   const {
     color,

package/ButtonBase/TouchRipple.js

@@ -13,6 +13,7 @@ import PropTypes from 'prop-types';
 import { TransitionGroup } from 'react-transition-group';
 import clsx from 'clsx';
 import { keyframes } from '@mui/system';
+import { unstable_useTimeout as useTimeout } from '@mui/utils';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Ripple from './Ripple';
@@ -156,18 +157,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 = 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,
@@ -260,12 +254,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({
@@ -276,21 +271,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;
@@ -303,7 +298,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
       return oldRipples;
     });
     rippleCallback.current = cb;
-  }, []);
+  }, [startTimer]);
   React.useImperativeHandle(ref, () => ({
     pulsate,
     start,

package/CHANGELOG.md

@@ -1,5 +1,99 @@
 # [Versions](https://mui.com/versions/)
 
+## v5.15.7
+
+<!-- generated comparing v5.15.6..master -->
+
+_Jan 31, 2024_
+
+A big thanks to the 21 contributors who made this release possible.
+This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.15.7`
+
+- &#8203;<!-- 55 -->[Select] Fix to show notched outline when `displayEmpty` (#40865) @ZeeshanTamboli
+- &#8203;<!-- 51 -->[Avatar] Improve fallback when `children` is empty string or boolean (#40766) @mirus-ua
+- &#8203;<!-- 50 -->[AvatarGroup] Refactor component thereby fixing custom spacing logic (#40686) @ZeeshanTamboli
+
+### `@mui/codemod@5.15.7`
+
+- &#8203;<!-- 38 -->Add accordion props deprecation (#40771) @siriwatknp
+
+### `@mui/system@5.15.7`
+
+- &#8203;<!-- 56 -->[zero-runtime] Use lodash instead of its subpackages (#40868) @michaldudak
+- &#8203;<!-- 19 -->Add `applyStyles()` to theme (#40667) @siriwatknp
+- &#8203;<!-- 02 -->[zero] Use `theme.applyStyles` in the demo app (#40787) @siriwatknp
+- &#8203;<!-- 01 -->[zero] Add `useThemeProps` processor (#40648) @siriwatknp
+
+### `@mui/utils@5.15.7`
+
+- &#8203;<!-- 16 -->[core] Remove unnecessary default export (#40788) @siriwatknp
+- &#8203;<!-- 15 -->[core] Convert all exports to modules (#39882) @mnajdova
+- &#8203;<!-- 20 -->[perf] Prevent unneeded `clearTimeout` calls (#39060) @romgrk
+
+### `@mui/base@5.0.0-beta.34`
+
+- &#8203;<!-- 48 -->[Input] Add OTP input demo (#40539) @sai6855
+- &#8203;<!-- 47 -->[Menu] Focus last item after opening a menu using up arrow (#40764) @Jaswanth-Sriram-Veturi
+- &#8203;<!-- 46 -->[Menu] Focus Menu Items on hover (#40755) @michaldudak
+
+### `@mui/joy@5.0.0-beta.25`
+
+- &#8203;<!-- 22 -->Change the color scheme type to `SupportedColorScheme` (#40776) @Nikhilh26
+
+### `@mui/lab@5.0.0-alpha.163`
+
+- &#8203;<!-- 21 -->[TabContext] Support number type in `value` (#40829) @srinidhi9831
+
+### Docs
+
+- &#8203;<!-- 53 -->[material-ui] Fix typo on styled-components guide (#40858) @dancielos
+- &#8203;<!-- 49 -->[base-ui] Fix CSS vars from the plain CSS theme stylesheet (#40762) @zanivan
+- &#8203;<!-- 31 -->[material-ui][Divider] Remove light prop references from docs (#40782) @sai6855
+- &#8203;<!-- 30 -->Fix build @oliviertassinari
+- &#8203;<!-- 29 -->Add support pages for each product @oliviertassinari
+- &#8203;<!-- 28 -->Add survey banner to docs and website (#40553) @joserodolfofreitas
+- &#8203;<!-- 24 -->[Menu] Fix hydration mismatch error on Base UI's Menu docs (#40758) @michaldudak
+- &#8203;<!-- 25 -->[material-nextjs] Add theming and configuration content to the page (#40626) @siriwatknp
+
+### Core
+
+- &#8203;<!-- 54 -->[website] Move `React Engineer - X` into the future roles section (#40867) @DanailH
+- &#8203;<!-- 52 -->[material-ui][test][Alert] Add action, icon, and iconMapping tests (#40682) @DiegoAndai
+- &#8203;<!-- 45 -->[blog] Lint duplicate h1 on the page (#40835) @oliviertassinari
+- &#8203;<!-- 44 -->[blog] MUI X v7 beta announcement blogpost (#40784) @joserodolfofreitas
+- &#8203;<!-- 43 -->[code-infra] Remove custom TS installation script (#40636) @michaldudak
+- &#8203;<!-- 42 -->[code-infra] Correct API Docs Builder dependencies (#40775) @michaldudak
+- &#8203;<!-- 41 -->[code-infra] Migrate to prettier async APIs (#40668) @Janpot
+- &#8203;<!-- 40 -->[code-infra] Refined docs generation (#40603) @alexfauquette
+- &#8203;<!-- 39 -->[code-infra] Explain how to install the browsers (#40474) @oliviertassinari
+- &#8203;<!-- 37 -->`missingKeyGenerator` do no longer exist (#40830) @oliviertassinari
+- &#8203;<!-- 36 -->Rely on immutable ref when possible (#40831) @oliviertassinari
+- &#8203;<!-- 35 -->Remove deprecated `@types/markdown-to-jsx` package from docs (#40828) @ZeeshanTamboli
+- &#8203;<!-- 34 -->Remove unneeded `@slack/web-api` package (#40840) @ZeeshanTamboli
+- &#8203;<!-- 33 -->Clarify TODO instruction @oliviertassinari
+- &#8203;<!-- 32 -->Remove unneeded use-clients (#40663) @oliviertassinari
+- &#8203;<!-- 27 -->[docs-infra] Fix anchor link hook (#40836) @oliviertassinari
+- &#8203;<!-- 26 -->[docs-infra] Avoid layout shift on docs-pages (#40749) @oliviertassinari
+- &#8203;<!-- 23 -->[examples] Fix build on Next.js Pages Router examples (#40665) @oliviertassinari
+- &#8203;<!-- 18 -->[test] Speed up the envinfo test (#40669) @michaldudak
+- &#8203;<!-- 17 -->[typescript-to-proptypes] Allow to represent dates as `PropTypes.object` (#40774) @flaviendelangle
+- &#8203;<!-- 14 -->[website] Add new Base UI role (#40773) @colmtuite
+- &#8203;<!-- 13 -->[website] Fix a couple of rough edges (#40849) @danilo-leal
+- &#8203;<!-- 12 -->[website] Small polishing after latest changes to the theme (#40846) @zanivan
+- &#8203;<!-- 11 -->[website] Polish some pages and stray components (#40797) @danilo-leal
+- &#8203;<!-- 10 -->[website] Refine the careers page slightly (#40793) @danilo-leal
+- &#8203;<!-- 09 -->[website] Fix missing key on the Testimonials section (#40791) @Janpot
+- &#8203;<!-- 08 -->[website] Fix Footer layout shift (#40786) @oliviertassinari
+- &#8203;<!-- 07 -->[website] Revamp the testimonial section in the homepage (#40752) @danilo-leal
+- &#8203;<!-- 06 -->[website] Fix pricing license model toggle style (#40747) @oliviertassinari
+- &#8203;<!-- 05 -->[website] Fine-tune colors and styles on the branding theme (#40751) @danilo-leal
+- &#8203;<!-- 04 -->[website] Fix Toggle Button styles in the homepage demos (#40744) @mohamedsaiedd
+- &#8203;<!-- 03 -->[website] Update stats on the testimonials section (#40769) @EyaOuenniche
+
+All contributors of this release in alphabetical order: @alexfauquette, @colmtuite, @danilo-leal, @DiegoAndai, @EyaOuenniche, @flaviendelangle, @Janpot, @Jaswanth-Sriram-Veturi, @joserodolfofreitas, @michaldudak, @mirus-ua, @mnajdova, @mohamedsaiedd, @Nikhilh26, @oliviertassinari, @romgrk, @sai6855, @siriwatknp, @srinidhi9831, @zanivan, @ZeeshanTamboli
+
 ## v5.15.6
 
 <!-- generated comparing v5.15.5..master -->
@@ -3712,7 +3806,7 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements
 
 ### Core
 
-- [core] Close 2022 developer survey @oliviertassinari
+- [core] Close 2022 Developer Survey @oliviertassinari
 - [core] Fix the product license reference name (#35703) @oliviertassinari
 - [core] Use TypeScript AST instead of TTP for component doc building (#35379) @flaviendelangle
 - [test] Always use & for nesting styles (#35702) @oliviertassinari
@@ -3946,7 +4040,7 @@ A big thanks to the 19 contributors who made this release possible. Here are som
 - [docs] Fix typo in FormControl API docs (#35449) @Spanishiwa
 - [docs] Update callouts design (#35390) @danilo-leal
 - [website] New wave of open roles (#35240) @mnajdova
-- [website] Developer survey 2022 (#35407) @joserodolfofreitas
+- [website] Developer Survey 2022 (#35407) @joserodolfofreitas
 
 ### Core
 
@@ -7469,7 +7563,7 @@ This is an early release to fix `export 'useId' (imported as 'React') was not fo
 - &#8203;<!-- 9 -->[core] Fix PR run detection in test_bundle_size_monitor (#29879) @eps1lon
 - &#8203;<!-- 8 -->[core] Move bundle size monitoring to CircleCI (#29876) @eps1lon
 - &#8203;<!-- 7 -->[docs] Add keys to Responsive AppBar demo (#29884) @mbrookes
-- &#8203;<!-- 6 -->[docs] MUI's 2021 Developer survey (#29765) @prakhargupta1
+- &#8203;<!-- 6 -->[docs] MUI's 2021 Developer Survey (#29765) @prakhargupta1
 - &#8203;<!-- 5 -->[docs] Smoother image loading UX (#29858) @oliviertassinari
 - &#8203;<!-- 4 -->[Select] Fix select display value with React Nodes (#29836) @kegi
 - &#8203;<!-- 3 -->[system] Add `experimental_sx` utility (#29833) @mnajdova

package/Collapse/Collapse.js

@@ -7,7 +7,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
-import { elementTypeAcceptingRef } from '@mui/utils';
+import { elementTypeAcceptingRef, unstable_useTimeout as useTimeout } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
@@ -123,17 +123,12 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
   });
   const classes = useUtilityClasses(ownerState);
   const theme = useTheme();
-  const timer = React.useRef();
+  const timer = 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 = useForkRef(ref, nodeRef);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
@@ -230,7 +225,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/Grow/Grow.js

@@ -5,7 +5,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { elementAcceptingRef } from '@mui/utils';
+import { elementAcceptingRef, unstable_useTimeout as useTimeout } from '@mui/utils';
 import { Transition } from 'react-transition-group';
 import useTheme from '../styles/useTheme';
 import { getTransitionProps, reflow } from '../transitions/utils';
@@ -55,7 +55,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       TransitionComponent = Transition
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const timer = React.useRef();
+  const timer = useTimeout();
   const autoTimeout = React.useRef();
   const theme = useTheme();
   const nodeRef = React.useRef(null);
@@ -144,18 +144,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__*/_jsx(TransitionComponent, _extends({
     appear: appear,
     in: inProp,

package/Rating/index.js

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

package/Select/Select.js

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

package/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/Toolbar/index.js

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