@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.
- package/Accordion/index.js +0 -2
- package/AccordionActions/index.js +0 -2
- package/AccordionDetails/index.js +0 -2
- package/AccordionSummary/index.js +0 -2
- package/Avatar/Avatar.js +2 -2
- package/AvatarGroup/AvatarGroup.js +19 -39
- package/Badge/Badge.js +2 -2
- package/ButtonBase/TouchRipple.js +9 -14
- package/CHANGELOG.md +97 -3
- package/Collapse/Collapse.js +3 -8
- package/Grow/Grow.js +3 -8
- package/Rating/index.js +0 -2
- package/Select/Select.js +1 -1
- package/SpeedDial/SpeedDial.js +7 -12
- package/Toolbar/index.js +0 -2
- package/Tooltip/Tooltip.js +29 -40
- package/index.js +1 -3
- package/legacy/Accordion/index.js +0 -2
- package/legacy/AccordionActions/index.js +0 -2
- package/legacy/AccordionDetails/index.js +0 -2
- package/legacy/AccordionSummary/index.js +0 -2
- package/legacy/Avatar/Avatar.js +2 -2
- package/legacy/AvatarGroup/AvatarGroup.js +6 -31
- package/legacy/Badge/Badge.js +2 -2
- package/legacy/ButtonBase/TouchRipple.js +9 -14
- package/legacy/Collapse/Collapse.js +3 -8
- package/legacy/Grow/Grow.js +3 -8
- package/legacy/Rating/index.js +0 -2
- package/legacy/Select/Select.js +1 -1
- package/legacy/SpeedDial/SpeedDial.js +7 -12
- package/legacy/Toolbar/index.js +0 -2
- package/legacy/Tooltip/Tooltip.js +29 -38
- package/legacy/index.js +1 -3
- package/legacy/styles/createTheme.js +1 -13
- package/legacy/zero-styled/index.js +7 -2
- package/modern/Accordion/index.js +0 -2
- package/modern/AccordionActions/index.js +0 -2
- package/modern/AccordionDetails/index.js +0 -2
- package/modern/AccordionSummary/index.js +0 -2
- package/modern/Avatar/Avatar.js +2 -2
- package/modern/AvatarGroup/AvatarGroup.js +19 -39
- package/modern/Badge/Badge.js +2 -2
- package/modern/ButtonBase/TouchRipple.js +9 -14
- package/modern/Collapse/Collapse.js +3 -8
- package/modern/Grow/Grow.js +3 -8
- package/modern/Rating/index.js +0 -2
- package/modern/Select/Select.js +1 -1
- package/modern/SpeedDial/SpeedDial.js +7 -12
- package/modern/Toolbar/index.js +0 -2
- package/modern/Tooltip/Tooltip.js +29 -40
- package/modern/index.js +1 -3
- package/modern/styles/createTheme.js +1 -15
- package/modern/zero-styled/index.js +7 -2
- package/node/Accordion/index.js +0 -1
- package/node/AccordionActions/index.js +0 -1
- package/node/AccordionDetails/index.js +0 -1
- package/node/AccordionSummary/index.js +0 -1
- package/node/Avatar/Avatar.js +2 -2
- package/node/AvatarGroup/AvatarGroup.js +19 -39
- package/node/Badge/Badge.js +2 -2
- package/node/ButtonBase/TouchRipple.js +9 -14
- package/node/Collapse/Collapse.js +2 -7
- package/node/Grow/Grow.js +2 -7
- package/node/Rating/index.js +0 -1
- package/node/Select/Select.js +1 -1
- package/node/SpeedDial/SpeedDial.js +6 -11
- package/node/Toolbar/index.js +0 -1
- package/node/Tooltip/Tooltip.js +28 -39
- package/node/index.js +1 -3
- package/node/styles/createTheme.js +1 -15
- package/node/zero-styled/index.js +7 -1
- package/package.json +6 -6
- package/styles/createTheme.d.ts +0 -1
- package/styles/createTheme.js +1 -15
- package/styles/experimental_extendTheme.d.ts +3 -2
- package/umd/material-ui.development.js +367 -289
- package/umd/material-ui.production.min.js +4 -4
- package/zero-styled/index.d.ts +2 -1
- 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
|
-
|
|
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
|
-
|
|
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 =
|
|
263
|
-
const enterTimer =
|
|
264
|
-
const leaveTimer =
|
|
265
|
-
const touchTimer =
|
|
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 =
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
321
|
-
hystersisTimer = setTimeout(() => {
|
|
313
|
+
hystersisTimer.start(800 + leaveDelay, () => {
|
|
322
314
|
hystersisOpen = false;
|
|
323
|
-
}
|
|
315
|
+
});
|
|
324
316
|
setOpenState(false);
|
|
325
317
|
if (onClose && open) {
|
|
326
318
|
onClose(event);
|
|
327
319
|
}
|
|
328
|
-
|
|
329
|
-
closeTimer.current = setTimeout(() => {
|
|
320
|
+
closeTimer.start(theme.transitions.duration.shortest, () => {
|
|
330
321
|
ignoreNonTouchEvents.current = false;
|
|
331
|
-
}
|
|
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
|
-
|
|
345
|
-
|
|
335
|
+
enterTimer.clear();
|
|
336
|
+
leaveTimer.clear();
|
|
346
337
|
if (enterDelay || hystersisOpen && enterNextDelay) {
|
|
347
|
-
enterTimer.
|
|
338
|
+
enterTimer.start(hystersisOpen ? enterNextDelay : enterDelay, () => {
|
|
348
339
|
handleOpen(event);
|
|
349
|
-
}
|
|
340
|
+
});
|
|
350
341
|
} else {
|
|
351
342
|
handleOpen(event);
|
|
352
343
|
}
|
|
353
344
|
};
|
|
354
345
|
const handleLeave = event => {
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
leaveTimer.current = setTimeout(() => {
|
|
346
|
+
enterTimer.clear();
|
|
347
|
+
leaveTimer.start(leaveDelay, () => {
|
|
358
348
|
handleClose(event);
|
|
359
|
-
}
|
|
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
|
-
|
|
402
|
-
|
|
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.
|
|
397
|
+
touchTimer.start(enterTouchDelay, () => {
|
|
408
398
|
document.body.style.WebkitUserSelect = prevUserSelect.current;
|
|
409
399
|
handleEnter(event);
|
|
410
|
-
}
|
|
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
|
-
|
|
418
|
-
leaveTimer.current = setTimeout(() => {
|
|
407
|
+
leaveTimer.start(leaveTouchDelay, () => {
|
|
419
408
|
handleClose(event);
|
|
420
|
-
}
|
|
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.
|
|
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
|
-
|
|
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
|
+
}
|
package/node/Accordion/index.js
CHANGED
package/node/Avatar/Avatar.js
CHANGED
|
@@ -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.
|
|
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
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
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)(
|
|
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(
|
|
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
|
})]
|
package/node/Badge/Badge.js
CHANGED
|
@@ -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 = (
|
|
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 =
|
|
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
|
-
|
|
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
|
-
}
|
|
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
|
-
|
|
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.
|
|
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 =
|
|
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.
|
|
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 =
|
|
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.
|
|
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,
|
package/node/Rating/index.js
CHANGED
package/node/Select/Select.js
CHANGED
|
@@ -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 =
|
|
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
|
-
|
|
257
|
+
eventTimer.clear();
|
|
263
258
|
if (event.type === 'blur') {
|
|
264
|
-
eventTimer.
|
|
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
|
-
|
|
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
|
-
|
|
300
|
+
eventTimer.clear();
|
|
306
301
|
if (!open) {
|
|
307
302
|
// Wait for a future focus or click event
|
|
308
|
-
eventTimer.
|
|
303
|
+
eventTimer.start(0, () => {
|
|
309
304
|
setOpenState(true);
|
|
310
305
|
if (onOpen) {
|
|
311
306
|
const eventMap = {
|