@mui/material 5.15.6 → 5.15.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (79) hide show
  1. package/Accordion/index.js +0 -2
  2. package/AccordionActions/index.js +0 -2
  3. package/AccordionDetails/index.js +0 -2
  4. package/AccordionSummary/index.js +0 -2
  5. package/Avatar/Avatar.js +2 -2
  6. package/AvatarGroup/AvatarGroup.js +19 -39
  7. package/Badge/Badge.js +2 -2
  8. package/ButtonBase/TouchRipple.js +9 -14
  9. package/CHANGELOG.md +97 -3
  10. package/Collapse/Collapse.js +3 -8
  11. package/Grow/Grow.js +3 -8
  12. package/Rating/index.js +0 -2
  13. package/Select/Select.js +1 -1
  14. package/SpeedDial/SpeedDial.js +7 -12
  15. package/Toolbar/index.js +0 -2
  16. package/Tooltip/Tooltip.js +29 -40
  17. package/index.js +1 -3
  18. package/legacy/Accordion/index.js +0 -2
  19. package/legacy/AccordionActions/index.js +0 -2
  20. package/legacy/AccordionDetails/index.js +0 -2
  21. package/legacy/AccordionSummary/index.js +0 -2
  22. package/legacy/Avatar/Avatar.js +2 -2
  23. package/legacy/AvatarGroup/AvatarGroup.js +6 -31
  24. package/legacy/Badge/Badge.js +2 -2
  25. package/legacy/ButtonBase/TouchRipple.js +9 -14
  26. package/legacy/Collapse/Collapse.js +3 -8
  27. package/legacy/Grow/Grow.js +3 -8
  28. package/legacy/Rating/index.js +0 -2
  29. package/legacy/Select/Select.js +1 -1
  30. package/legacy/SpeedDial/SpeedDial.js +7 -12
  31. package/legacy/Toolbar/index.js +0 -2
  32. package/legacy/Tooltip/Tooltip.js +29 -38
  33. package/legacy/index.js +1 -3
  34. package/legacy/styles/createTheme.js +1 -13
  35. package/legacy/zero-styled/index.js +7 -2
  36. package/modern/Accordion/index.js +0 -2
  37. package/modern/AccordionActions/index.js +0 -2
  38. package/modern/AccordionDetails/index.js +0 -2
  39. package/modern/AccordionSummary/index.js +0 -2
  40. package/modern/Avatar/Avatar.js +2 -2
  41. package/modern/AvatarGroup/AvatarGroup.js +19 -39
  42. package/modern/Badge/Badge.js +2 -2
  43. package/modern/ButtonBase/TouchRipple.js +9 -14
  44. package/modern/Collapse/Collapse.js +3 -8
  45. package/modern/Grow/Grow.js +3 -8
  46. package/modern/Rating/index.js +0 -2
  47. package/modern/Select/Select.js +1 -1
  48. package/modern/SpeedDial/SpeedDial.js +7 -12
  49. package/modern/Toolbar/index.js +0 -2
  50. package/modern/Tooltip/Tooltip.js +29 -40
  51. package/modern/index.js +1 -3
  52. package/modern/styles/createTheme.js +1 -15
  53. package/modern/zero-styled/index.js +7 -2
  54. package/node/Accordion/index.js +0 -1
  55. package/node/AccordionActions/index.js +0 -1
  56. package/node/AccordionDetails/index.js +0 -1
  57. package/node/AccordionSummary/index.js +0 -1
  58. package/node/Avatar/Avatar.js +2 -2
  59. package/node/AvatarGroup/AvatarGroup.js +19 -39
  60. package/node/Badge/Badge.js +2 -2
  61. package/node/ButtonBase/TouchRipple.js +9 -14
  62. package/node/Collapse/Collapse.js +2 -7
  63. package/node/Grow/Grow.js +2 -7
  64. package/node/Rating/index.js +0 -1
  65. package/node/Select/Select.js +1 -1
  66. package/node/SpeedDial/SpeedDial.js +6 -11
  67. package/node/Toolbar/index.js +0 -1
  68. package/node/Tooltip/Tooltip.js +28 -39
  69. package/node/index.js +1 -3
  70. package/node/styles/createTheme.js +1 -15
  71. package/node/zero-styled/index.js +7 -1
  72. package/package.json +6 -6
  73. package/styles/createTheme.d.ts +0 -1
  74. package/styles/createTheme.js +1 -15
  75. package/styles/experimental_extendTheme.d.ts +3 -2
  76. package/umd/material-ui.development.js +367 -289
  77. package/umd/material-ui.production.min.js +4 -4
  78. package/zero-styled/index.d.ts +2 -1
  79. package/zero-styled/index.js +7 -2
@@ -6,7 +6,7 @@ const _excluded = ["arrow", "children", "classes", "components", "componentsProp
6
6
  import * as React from 'react';
7
7
  import PropTypes from 'prop-types';
8
8
  import clsx from 'clsx';
9
- import { elementAcceptingRef } from '@mui/utils';
9
+ import { elementAcceptingRef, unstable_useTimeout as useTimeout, unstable_Timeout as Timeout } from '@mui/utils';
10
10
  import { unstable_composeClasses as composeClasses, appendOwnerState } from '@mui/base';
11
11
  import { alpha } from '@mui/system';
12
12
  import styled from '../styles/styled';
@@ -194,14 +194,14 @@ const TooltipArrow = styled('span', {
194
194
  }
195
195
  }));
196
196
  let hystersisOpen = false;
197
- let hystersisTimer = null;
197
+ const hystersisTimer = new Timeout();
198
198
  let cursorPosition = {
199
199
  x: 0,
200
200
  y: 0
201
201
  };
202
202
  export function testReset() {
203
203
  hystersisOpen = false;
204
- clearTimeout(hystersisTimer);
204
+ hystersisTimer.clear();
205
205
  }
206
206
  function composeEventHandler(handler, eventHandler) {
207
207
  return event => {
@@ -259,10 +259,10 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
259
259
  const [arrowRef, setArrowRef] = React.useState(null);
260
260
  const ignoreNonTouchEvents = React.useRef(false);
261
261
  const disableInteractive = disableInteractiveProp || followCursor;
262
- const closeTimer = React.useRef();
263
- const enterTimer = React.useRef();
264
- const leaveTimer = React.useRef();
265
- const touchTimer = React.useRef();
262
+ const closeTimer = useTimeout();
263
+ const enterTimer = useTimeout();
264
+ const leaveTimer = useTimeout();
265
+ const touchTimer = useTimeout();
266
266
  const [openState, setOpenState] = useControlled({
267
267
  controlled: openProp,
268
268
  default: false,
@@ -285,23 +285,16 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
285
285
  }
286
286
  const id = useId(idProp);
287
287
  const prevUserSelect = React.useRef();
288
- const stopTouchInteraction = React.useCallback(() => {
288
+ const stopTouchInteraction = useEventCallback(() => {
289
289
  if (prevUserSelect.current !== undefined) {
290
290
  document.body.style.WebkitUserSelect = prevUserSelect.current;
291
291
  prevUserSelect.current = undefined;
292
292
  }
293
- clearTimeout(touchTimer.current);
294
- }, []);
295
- React.useEffect(() => {
296
- return () => {
297
- clearTimeout(closeTimer.current);
298
- clearTimeout(enterTimer.current);
299
- clearTimeout(leaveTimer.current);
300
- stopTouchInteraction();
301
- };
302
- }, [stopTouchInteraction]);
293
+ touchTimer.clear();
294
+ });
295
+ React.useEffect(() => stopTouchInteraction, [stopTouchInteraction]);
303
296
  const handleOpen = event => {
304
- clearTimeout(hystersisTimer);
297
+ hystersisTimer.clear();
305
298
  hystersisOpen = true;
306
299
 
307
300
  // 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) {
317
310
  * @param {React.SyntheticEvent | Event} event
318
311
  */
319
312
  event => {
320
- clearTimeout(hystersisTimer);
321
- hystersisTimer = setTimeout(() => {
313
+ hystersisTimer.start(800 + leaveDelay, () => {
322
314
  hystersisOpen = false;
323
- }, 800 + leaveDelay);
315
+ });
324
316
  setOpenState(false);
325
317
  if (onClose && open) {
326
318
  onClose(event);
327
319
  }
328
- clearTimeout(closeTimer.current);
329
- closeTimer.current = setTimeout(() => {
320
+ closeTimer.start(theme.transitions.duration.shortest, () => {
330
321
  ignoreNonTouchEvents.current = false;
331
- }, theme.transitions.duration.shortest);
322
+ });
332
323
  });
333
324
  const handleEnter = event => {
334
325
  if (ignoreNonTouchEvents.current && event.type !== 'touchstart') {
@@ -341,22 +332,21 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
341
332
  if (childNode) {
342
333
  childNode.removeAttribute('title');
343
334
  }
344
- clearTimeout(enterTimer.current);
345
- clearTimeout(leaveTimer.current);
335
+ enterTimer.clear();
336
+ leaveTimer.clear();
346
337
  if (enterDelay || hystersisOpen && enterNextDelay) {
347
- enterTimer.current = setTimeout(() => {
338
+ enterTimer.start(hystersisOpen ? enterNextDelay : enterDelay, () => {
348
339
  handleOpen(event);
349
- }, hystersisOpen ? enterNextDelay : enterDelay);
340
+ });
350
341
  } else {
351
342
  handleOpen(event);
352
343
  }
353
344
  };
354
345
  const handleLeave = event => {
355
- clearTimeout(enterTimer.current);
356
- clearTimeout(leaveTimer.current);
357
- leaveTimer.current = setTimeout(() => {
346
+ enterTimer.clear();
347
+ leaveTimer.start(leaveDelay, () => {
358
348
  handleClose(event);
359
- }, leaveDelay);
349
+ });
360
350
  };
361
351
  const {
362
352
  isFocusVisibleRef,
@@ -398,26 +388,25 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
398
388
  const handleMouseLeave = handleLeave;
399
389
  const handleTouchStart = event => {
400
390
  detectTouchStart(event);
401
- clearTimeout(leaveTimer.current);
402
- clearTimeout(closeTimer.current);
391
+ leaveTimer.clear();
392
+ closeTimer.clear();
403
393
  stopTouchInteraction();
404
394
  prevUserSelect.current = document.body.style.WebkitUserSelect;
405
395
  // Prevent iOS text selection on long-tap.
406
396
  document.body.style.WebkitUserSelect = 'none';
407
- touchTimer.current = setTimeout(() => {
397
+ touchTimer.start(enterTouchDelay, () => {
408
398
  document.body.style.WebkitUserSelect = prevUserSelect.current;
409
399
  handleEnter(event);
410
- }, enterTouchDelay);
400
+ });
411
401
  };
412
402
  const handleTouchEnd = event => {
413
403
  if (children.props.onTouchEnd) {
414
404
  children.props.onTouchEnd(event);
415
405
  }
416
406
  stopTouchInteraction();
417
- clearTimeout(leaveTimer.current);
418
- leaveTimer.current = setTimeout(() => {
407
+ leaveTimer.start(leaveTouchDelay, () => {
419
408
  handleClose(event);
420
- }, leaveTouchDelay);
409
+ });
421
410
  };
422
411
  React.useEffect(() => {
423
412
  if (!open) {
package/modern/index.js CHANGED
@@ -1,12 +1,10 @@
1
1
  /**
2
- * @mui/material v5.15.6
2
+ * @mui/material v5.15.7
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
6
6
  * LICENSE file in the root directory of this source tree.
7
7
  */
8
- 'use client';
9
-
10
8
  /* eslint-disable import/export */
11
9
  import * as colors from './colors';
12
10
  export { colors };
@@ -32,21 +32,7 @@ Please use another name.` : _formatMuiErrorMessage(18));
32
32
  shadows: shadows.slice(),
33
33
  typography: createTypography(palette, typographyInput),
34
34
  transitions: createTransitions(transitionsInput),
35
- zIndex: _extends({}, zIndex),
36
- applyDarkStyles(css) {
37
- if (this.vars) {
38
- // If CssVarsProvider is used as a provider,
39
- // returns ':where([data-mui-color-scheme="light|dark"]) &'
40
- const selector = this.getColorSchemeSelector('dark').replace(/(\[[^\]]+\])/, ':where($1)');
41
- return {
42
- [selector]: css
43
- };
44
- }
45
- if (this.palette.mode === 'dark') {
46
- return css;
47
- }
48
- return {};
49
- }
35
+ zIndex: _extends({}, zIndex)
50
36
  });
51
37
  muiTheme = deepmerge(muiTheme, other);
52
38
  muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
@@ -1,2 +1,7 @@
1
- // eslint-disable-next-line import/prefer-default-export
2
- export { default as styled } from '../styles/styled';
1
+ import useThemeProps from '../styles/useThemeProps';
2
+ export { default as styled } from '../styles/styled';
3
+
4
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
5
+ export function createUseThemeProps(name) {
6
+ return useThemeProps;
7
+ }
@@ -1,5 +1,4 @@
1
1
  "use strict";
2
- 'use client';
3
2
 
4
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
4
  Object.defineProperty(exports, "__esModule", {
@@ -1,5 +1,4 @@
1
1
  "use strict";
2
- 'use client';
3
2
 
4
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
4
  Object.defineProperty(exports, "__esModule", {
@@ -1,5 +1,4 @@
1
1
  "use strict";
2
- 'use client';
3
2
 
4
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
4
  Object.defineProperty(exports, "__esModule", {
@@ -1,5 +1,4 @@
1
1
  "use strict";
2
- 'use client';
3
2
 
4
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
4
  Object.defineProperty(exports, "__esModule", {
@@ -82,7 +82,7 @@ const AvatarRoot = (0, _styled.default)('div', {
82
82
  backgroundColor: theme.vars.palette.Avatar.defaultBg
83
83
  } : (0, _extends2.default)({
84
84
  backgroundColor: theme.palette.grey[400]
85
- }, theme.applyDarkStyles({
85
+ }, theme.applyStyles('dark', {
86
86
  backgroundColor: theme.palette.grey[600]
87
87
  })))
88
88
  }]
@@ -189,7 +189,7 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
189
189
  ownerState: ownerState,
190
190
  className: classes.img
191
191
  }, imgProps));
192
- } else if (childrenProp != null) {
192
+ } else if (childrenProp != null && childrenProp !== '' && typeof childrenProp !== 'boolean') {
193
193
  children = childrenProp;
194
194
  } else if (hasImg && alt) {
195
195
  children = alt[0];
@@ -43,33 +43,23 @@ const AvatarGroupRoot = (0, _styled.default)('div', {
43
43
  [`& .${_avatarGroupClasses.default.avatar}`]: styles.avatar
44
44
  }, styles.root)
45
45
  })(({
46
- theme
47
- }) => ({
48
- [`& .${_Avatar.avatarClasses.root}`]: {
49
- border: `2px solid ${(theme.vars || theme).palette.background.default}`,
50
- boxSizing: 'content-box',
51
- marginLeft: -8,
52
- '&:last-child': {
53
- marginLeft: 0
54
- }
55
- },
56
- display: 'flex',
57
- flexDirection: 'row-reverse'
58
- }));
59
- const AvatarGroupAvatar = (0, _styled.default)(_Avatar.default, {
60
- name: 'MuiAvatarGroup',
61
- slot: 'Avatar',
62
- overridesResolver: (props, styles) => styles.avatar
63
- })(({
64
- theme
65
- }) => ({
66
- border: `2px solid ${(theme.vars || theme).palette.background.default}`,
67
- boxSizing: 'content-box',
68
- marginLeft: -8,
69
- '&:last-child': {
70
- marginLeft: 0
71
- }
72
- }));
46
+ theme,
47
+ ownerState
48
+ }) => {
49
+ const marginValue = ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined ? SPACINGS[ownerState.spacing] : -ownerState.spacing;
50
+ return {
51
+ [`& .${_Avatar.avatarClasses.root}`]: {
52
+ border: `2px solid ${(theme.vars || theme).palette.background.default}`,
53
+ boxSizing: 'content-box',
54
+ marginLeft: marginValue != null ? marginValue : -8,
55
+ '&:last-child': {
56
+ marginLeft: 0
57
+ }
58
+ },
59
+ display: 'flex',
60
+ flexDirection: 'row-reverse'
61
+ };
62
+ });
73
63
  const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, ref) {
74
64
  var _slotProps$additional;
75
65
  const props = (0, _useThemeProps.default)({
@@ -113,7 +103,6 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
113
103
  const maxAvatars = Math.min(children.length, clampedMax - 1);
114
104
  const extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
115
105
  const extraAvatarsElement = renderSurplus ? renderSurplus(extraAvatars) : `+${extraAvatars}`;
116
- const marginLeft = spacing && SPACINGS[spacing] !== undefined ? SPACINGS[spacing] : -spacing;
117
106
  const additionalAvatarSlotProps = (_slotProps$additional = slotProps.additionalAvatar) != null ? _slotProps$additional : componentsProps.additionalAvatar;
118
107
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AvatarGroupRoot, (0, _extends2.default)({
119
108
  as: component,
@@ -121,23 +110,14 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
121
110
  className: (0, _clsx.default)(classes.root, className),
122
111
  ref: ref
123
112
  }, other, {
124
- children: [extraAvatars ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarGroupAvatar, (0, _extends2.default)({
125
- ownerState: ownerState,
113
+ children: [extraAvatars ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, (0, _extends2.default)({
126
114
  variant: variant
127
115
  }, additionalAvatarSlotProps, {
128
116
  className: (0, _clsx.default)(classes.avatar, additionalAvatarSlotProps == null ? void 0 : additionalAvatarSlotProps.className),
129
- style: (0, _extends2.default)({
130
- marginLeft
131
- }, additionalAvatarSlotProps == null ? void 0 : additionalAvatarSlotProps.style),
132
117
  children: extraAvatarsElement
133
- })) : null, children.slice(0, maxAvatars).reverse().map((child, index) => {
118
+ })) : null, children.slice(0, maxAvatars).reverse().map(child => {
134
119
  return /*#__PURE__*/React.cloneElement(child, {
135
120
  className: (0, _clsx.default)(child.props.className, classes.avatar),
136
- style: (0, _extends2.default)({
137
- // Consistent with "&:last-child" styling for the default spacing,
138
- // we do not apply custom marginLeft spacing on the last child
139
- marginLeft: index === maxAvatars - 1 ? undefined : marginLeft
140
- }, child.props.style),
141
121
  variant: child.props.variant || variant
142
122
  });
143
123
  })]
@@ -16,7 +16,6 @@ var _composeClasses = require("@mui/base/composeClasses");
16
16
  var _useBadge = require("@mui/base/useBadge");
17
17
  var _base = require("@mui/base");
18
18
  var _zeroStyled = require("../zero-styled");
19
- var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
20
19
  var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
21
20
  var _badgeClasses = _interopRequireWildcard(require("./badgeClasses"));
22
21
  var _jsxRuntime = require("react/jsx-runtime");
@@ -25,6 +24,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
25
24
  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; }
26
25
  const RADIUS_STANDARD = 10;
27
26
  const RADIUS_DOT = 4;
27
+ const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiBadge');
28
28
  const useUtilityClasses = ownerState => {
29
29
  const {
30
30
  color,
@@ -227,7 +227,7 @@ const BadgeBadge = (0, _zeroStyled.styled)('span', {
227
227
  });
228
228
  const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
229
229
  var _ref, _slots$root, _ref2, _slots$badge, _slotProps$root, _slotProps$badge;
230
- const props = (0, _useThemeProps.default)({
230
+ const props = useThemeProps({
231
231
  props: inProps,
232
232
  name: 'MuiBadge'
233
233
  });
@@ -13,6 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
13
13
  var _reactTransitionGroup = require("react-transition-group");
14
14
  var _clsx = _interopRequireDefault(require("clsx"));
15
15
  var _system = require("@mui/system");
16
+ var _utils = require("@mui/utils");
16
17
  var _styled = _interopRequireDefault(require("../styles/styled"));
17
18
  var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
18
19
  var _Ripple = _interopRequireDefault(require("./Ripple"));
@@ -159,18 +160,11 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
159
160
  const ignoringMouseDown = React.useRef(false);
160
161
  // We use a timer in order to only show the ripples for touch "click" like events.
161
162
  // We don't want to display the ripple for touch scroll events.
162
- const startTimer = React.useRef(0);
163
+ const startTimer = (0, _utils.unstable_useTimeout)();
163
164
 
164
165
  // This is the hook called once the previous timeout is ready.
165
166
  const startTimerCommit = React.useRef(null);
166
167
  const container = React.useRef(null);
167
- React.useEffect(() => {
168
- return () => {
169
- if (startTimer.current) {
170
- clearTimeout(startTimer.current);
171
- }
172
- };
173
- }, []);
174
168
  const startCommit = React.useCallback(params => {
175
169
  const {
176
170
  pulsate,
@@ -263,12 +257,13 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
263
257
  });
264
258
  };
265
259
  // Delay the execution of the ripple effect.
266
- startTimer.current = setTimeout(() => {
260
+ // We have to make a tradeoff with this delay value.
261
+ startTimer.start(DELAY_RIPPLE, () => {
267
262
  if (startTimerCommit.current) {
268
263
  startTimerCommit.current();
269
264
  startTimerCommit.current = null;
270
265
  }
271
- }, DELAY_RIPPLE); // We have to make a tradeoff with this value.
266
+ });
272
267
  }
273
268
  } else {
274
269
  startCommit({
@@ -279,21 +274,21 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
279
274
  cb
280
275
  });
281
276
  }
282
- }, [centerProp, startCommit]);
277
+ }, [centerProp, startCommit, startTimer]);
283
278
  const pulsate = React.useCallback(() => {
284
279
  start({}, {
285
280
  pulsate: true
286
281
  });
287
282
  }, [start]);
288
283
  const stop = React.useCallback((event, cb) => {
289
- clearTimeout(startTimer.current);
284
+ startTimer.clear();
290
285
 
291
286
  // The touch interaction occurs too quickly.
292
287
  // We still want to show ripple effect.
293
288
  if ((event == null ? void 0 : event.type) === 'touchend' && startTimerCommit.current) {
294
289
  startTimerCommit.current();
295
290
  startTimerCommit.current = null;
296
- startTimer.current = setTimeout(() => {
291
+ startTimer.start(0, () => {
297
292
  stop(event, cb);
298
293
  });
299
294
  return;
@@ -306,7 +301,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
306
301
  return oldRipples;
307
302
  });
308
303
  rippleCallback.current = cb;
309
- }, []);
304
+ }, [startTimer]);
310
305
  React.useImperativeHandle(ref, () => ({
311
306
  pulsate,
312
307
  start,
@@ -131,17 +131,12 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
131
131
  });
132
132
  const classes = useUtilityClasses(ownerState);
133
133
  const theme = (0, _useTheme.default)();
134
- const timer = React.useRef();
134
+ const timer = (0, _utils.unstable_useTimeout)();
135
135
  const wrapperRef = React.useRef(null);
136
136
  const autoTransitionDuration = React.useRef();
137
137
  const collapsedSize = typeof collapsedSizeProp === 'number' ? `${collapsedSizeProp}px` : collapsedSizeProp;
138
138
  const isHorizontal = orientation === 'horizontal';
139
139
  const size = isHorizontal ? 'width' : 'height';
140
- React.useEffect(() => {
141
- return () => {
142
- clearTimeout(timer.current);
143
- };
144
- }, []);
145
140
  const nodeRef = React.useRef(null);
146
141
  const handleRef = (0, _utils3.useForkRef)(ref, nodeRef);
147
142
  const normalizedTransitionCallback = callback => maybeIsAppearing => {
@@ -238,7 +233,7 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
238
233
  });
239
234
  const handleAddEndListener = next => {
240
235
  if (timeout === 'auto') {
241
- timer.current = setTimeout(next, autoTransitionDuration.current || 0);
236
+ timer.start(autoTransitionDuration.current || 0, next);
242
237
  }
243
238
  if (addEndListener) {
244
239
  // Old call signature before `react-transition-group` implemented `nodeRef`
package/node/Grow/Grow.js CHANGED
@@ -63,7 +63,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
63
63
  TransitionComponent = _reactTransitionGroup.Transition
64
64
  } = props,
65
65
  other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
66
- const timer = React.useRef();
66
+ const timer = (0, _utils.unstable_useTimeout)();
67
67
  const autoTimeout = React.useRef();
68
68
  const theme = (0, _useTheme.default)();
69
69
  const nodeRef = React.useRef(null);
@@ -152,18 +152,13 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
152
152
  const handleExited = normalizedTransitionCallback(onExited);
153
153
  const handleAddEndListener = next => {
154
154
  if (timeout === 'auto') {
155
- timer.current = setTimeout(next, autoTimeout.current || 0);
155
+ timer.start(autoTimeout.current || 0, next);
156
156
  }
157
157
  if (addEndListener) {
158
158
  // Old call signature before `react-transition-group` implemented `nodeRef`
159
159
  addEndListener(nodeRef.current, next);
160
160
  }
161
161
  };
162
- React.useEffect(() => {
163
- return () => {
164
- clearTimeout(timer.current);
165
- };
166
- }, []);
167
162
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, (0, _extends2.default)({
168
163
  appear: appear,
169
164
  in: inProp,
@@ -1,5 +1,4 @@
1
1
  "use strict";
2
- 'use client';
3
2
 
4
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
4
  Object.defineProperty(exports, "__esModule", {
@@ -130,7 +130,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
130
130
  }, inputProps, {
131
131
  classes: inputProps ? (0, _utils.deepmerge)(restOfClasses, inputProps.classes) : restOfClasses
132
132
  }, input ? input.props.inputProps : {})
133
- }, multiple && native && variant === 'outlined' ? {
133
+ }, (multiple && native || displayEmpty) && variant === 'outlined' ? {
134
134
  notched: true
135
135
  } : {}, {
136
136
  ref: inputComponentRef,
@@ -170,12 +170,7 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
170
170
  direction
171
171
  });
172
172
  const classes = useUtilityClasses(ownerState);
173
- const eventTimer = React.useRef();
174
- React.useEffect(() => {
175
- return () => {
176
- clearTimeout(eventTimer.current);
177
- };
178
- }, []);
173
+ const eventTimer = (0, _utils.unstable_useTimeout)();
179
174
 
180
175
  /**
181
176
  * an index in actions.current
@@ -259,9 +254,9 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
259
254
  if (event.type === 'blur' && onBlur) {
260
255
  onBlur(event);
261
256
  }
262
- clearTimeout(eventTimer.current);
257
+ eventTimer.clear();
263
258
  if (event.type === 'blur') {
264
- eventTimer.current = setTimeout(() => {
259
+ eventTimer.start(0, () => {
265
260
  setOpenState(false);
266
261
  if (onClose) {
267
262
  onClose(event, 'blur');
@@ -278,7 +273,7 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
278
273
  if (FabProps.onClick) {
279
274
  FabProps.onClick(event);
280
275
  }
281
- clearTimeout(eventTimer.current);
276
+ eventTimer.clear();
282
277
  if (open) {
283
278
  setOpenState(false);
284
279
  if (onClose) {
@@ -302,10 +297,10 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
302
297
  // When moving the focus between two items,
303
298
  // a chain if blur and focus event is triggered.
304
299
  // We only handle the last event.
305
- clearTimeout(eventTimer.current);
300
+ eventTimer.clear();
306
301
  if (!open) {
307
302
  // Wait for a future focus or click event
308
- eventTimer.current = setTimeout(() => {
303
+ eventTimer.start(0, () => {
309
304
  setOpenState(true);
310
305
  if (onOpen) {
311
306
  const eventMap = {
@@ -1,5 +1,4 @@
1
1
  "use strict";
2
- 'use client';
3
2
 
4
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
4
  Object.defineProperty(exports, "__esModule", {