@mui/utils 6.0.0-alpha.1 → 6.0.0-alpha.11
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/CHANGELOG.md +538 -4
- package/deepmerge/deepmerge.js +5 -6
- package/exactProp/exactProp.js +3 -3
- package/getDisplayName/getDisplayName.d.ts +0 -1
- package/getDisplayName/getDisplayName.js +1 -10
- package/getDisplayName/index.d.ts +0 -1
- package/getDisplayName/index.js +1 -2
- package/index.js +1 -1
- package/integerPropType/integerPropType.js +1 -8
- package/modern/deepmerge/deepmerge.js +5 -6
- package/modern/exactProp/exactProp.js +3 -3
- package/modern/getDisplayName/getDisplayName.js +1 -10
- package/modern/getDisplayName/index.js +1 -2
- package/modern/index.js +1 -1
- package/modern/integerPropType/integerPropType.js +1 -8
- package/modern/requirePropFactory/requirePropFactory.js +3 -2
- package/modern/resolveProps/resolveProps.js +10 -4
- package/modern/useControlled/useControlled.js +3 -1
- package/modern/useTimeout/useTimeout.js +11 -12
- package/node/deepmerge/deepmerge.js +5 -7
- package/node/exactProp/exactProp.js +3 -4
- package/node/getDisplayName/getDisplayName.js +1 -10
- package/node/getDisplayName/index.js +2 -15
- package/node/index.js +1 -1
- package/node/integerPropType/integerPropType.js +1 -8
- package/node/requirePropFactory/requirePropFactory.js +3 -3
- package/node/resolveProps/resolveProps.js +10 -5
- package/node/useControlled/useControlled.js +3 -1
- package/node/useTimeout/useTimeout.js +11 -12
- package/package.json +2 -2
- package/requirePropFactory/requirePropFactory.js +3 -2
- package/resolveProps/resolveProps.js +10 -4
- package/useControlled/useControlled.js +3 -1
- package/useTimeout/useTimeout.js +11 -12
- package/legacy/ClassNameGenerator/ClassNameGenerator.js +0 -19
- package/legacy/ClassNameGenerator/index.js +0 -1
- package/legacy/HTMLElementType/HTMLElementType.js +0 -14
- package/legacy/HTMLElementType/index.js +0 -1
- package/legacy/capitalize/capitalize.js +0 -11
- package/legacy/capitalize/index.js +0 -1
- package/legacy/chainPropTypes/chainPropTypes.js +0 -10
- package/legacy/chainPropTypes/index.js +0 -1
- package/legacy/clamp/clamp.js +0 -6
- package/legacy/clamp/index.js +0 -1
- package/legacy/composeClasses/composeClasses.js +0 -22
- package/legacy/composeClasses/index.js +0 -1
- package/legacy/createChainedFunction/createChainedFunction.js +0 -23
- package/legacy/createChainedFunction/index.js +0 -1
- package/legacy/debounce/debounce.js +0 -22
- package/legacy/debounce/index.js +0 -2
- package/legacy/deepmerge/deepmerge.js +0 -43
- package/legacy/deepmerge/index.js +0 -2
- package/legacy/deprecatedPropType/deprecatedPropType.js +0 -15
- package/legacy/deprecatedPropType/index.js +0 -1
- package/legacy/elementAcceptingRef/elementAcceptingRef.js +0 -41
- package/legacy/elementAcceptingRef/index.js +0 -1
- package/legacy/elementTypeAcceptingRef/elementTypeAcceptingRef.js +0 -39
- package/legacy/elementTypeAcceptingRef/index.js +0 -1
- package/legacy/exactProp/exactProp.js +0 -23
- package/legacy/exactProp/index.js +0 -1
- package/legacy/formatMuiErrorMessage/formatMuiErrorMessage.js +0 -19
- package/legacy/formatMuiErrorMessage/index.js +0 -1
- package/legacy/generateUtilityClass/generateUtilityClass.js +0 -23
- package/legacy/generateUtilityClass/index.js +0 -2
- package/legacy/generateUtilityClasses/generateUtilityClasses.js +0 -9
- package/legacy/generateUtilityClasses/index.js +0 -1
- package/legacy/getDisplayName/getDisplayName.js +0 -49
- package/legacy/getDisplayName/index.js +0 -2
- package/legacy/getScrollbarSize/getScrollbarSize.js +0 -7
- package/legacy/getScrollbarSize/index.js +0 -1
- package/legacy/getValidReactChildren/getValidReactChildren.js +0 -13
- package/legacy/getValidReactChildren/index.js +0 -1
- package/legacy/index.js +0 -51
- package/legacy/integerPropType/index.js +0 -2
- package/legacy/integerPropType/integerPropType.js +0 -55
- package/legacy/isMuiElement/index.js +0 -1
- package/legacy/isMuiElement/isMuiElement.js +0 -8
- package/legacy/ownerDocument/index.js +0 -1
- package/legacy/ownerDocument/ownerDocument.js +0 -3
- package/legacy/ownerWindow/index.js +0 -1
- package/legacy/ownerWindow/ownerWindow.js +0 -5
- package/legacy/ponyfillGlobal/index.js +0 -1
- package/legacy/ponyfillGlobal/ponyfillGlobal.js +0 -3
- package/legacy/refType/index.js +0 -1
- package/legacy/refType/refType.js +0 -3
- package/legacy/requirePropFactory/index.js +0 -1
- package/legacy/requirePropFactory/requirePropFactory.js +0 -31
- package/legacy/resolveProps/index.js +0 -1
- package/legacy/resolveProps/resolveProps.js +0 -34
- package/legacy/scrollLeft/index.js +0 -1
- package/legacy/scrollLeft/scrollLeft.js +0 -70
- package/legacy/setRef/index.js +0 -1
- package/legacy/setRef/setRef.js +0 -20
- package/legacy/unsupportedProp/index.js +0 -1
- package/legacy/unsupportedProp/unsupportedProp.js +0 -10
- package/legacy/useControlled/index.js +0 -1
- package/legacy/useControlled/useControlled.js +0 -38
- package/legacy/useEnhancedEffect/index.js +0 -1
- package/legacy/useEnhancedEffect/useEnhancedEffect.js +0 -13
- package/legacy/useEventCallback/index.js +0 -1
- package/legacy/useEventCallback/useEventCallback.js +0 -23
- package/legacy/useForkRef/index.js +0 -1
- package/legacy/useForkRef/useForkRef.js +0 -27
- package/legacy/useId/index.js +0 -1
- package/legacy/useId/useId.js +0 -38
- package/legacy/useIsFocusVisible/index.js +0 -2
- package/legacy/useIsFocusVisible/useIsFocusVisible.js +0 -160
- package/legacy/useLazyRef/index.js +0 -1
- package/legacy/useLazyRef/useLazyRef.js +0 -19
- package/legacy/useLocalStorageState/index.js +0 -1
- package/legacy/useLocalStorageState/useLocalStorageState.js +0 -121
- package/legacy/useOnMount/index.js +0 -1
- package/legacy/useOnMount/useOnMount.js +0 -13
- package/legacy/usePreviousProps/index.js +0 -1
- package/legacy/usePreviousProps/usePreviousProps.js +0 -11
- package/legacy/useTimeout/index.js +0 -2
- package/legacy/useTimeout/useTimeout.js +0 -47
- package/legacy/visuallyHidden/index.js +0 -1
- package/legacy/visuallyHidden/visuallyHidden.js +0 -12
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './resolveProps';
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
-
/**
|
|
3
|
-
* Add keys, values of `defaultProps` that does not exist in `props`
|
|
4
|
-
* @param {object} defaultProps
|
|
5
|
-
* @param {object} props
|
|
6
|
-
* @returns {object} resolved props
|
|
7
|
-
*/
|
|
8
|
-
export default function resolveProps(defaultProps, props) {
|
|
9
|
-
var output = _extends({}, props);
|
|
10
|
-
Object.keys(defaultProps).forEach(function (propName) {
|
|
11
|
-
if (propName.toString().match(/^(components|slots)$/)) {
|
|
12
|
-
output[propName] = _extends({}, defaultProps[propName], output[propName]);
|
|
13
|
-
} else if (propName.toString().match(/^(componentsProps|slotProps)$/)) {
|
|
14
|
-
var defaultSlotProps = defaultProps[propName] || {};
|
|
15
|
-
var slotProps = props[propName];
|
|
16
|
-
output[propName] = {};
|
|
17
|
-
if (!slotProps || !Object.keys(slotProps)) {
|
|
18
|
-
// Reduce the iteration if the slot props is empty
|
|
19
|
-
output[propName] = defaultSlotProps;
|
|
20
|
-
} else if (!defaultSlotProps || !Object.keys(defaultSlotProps)) {
|
|
21
|
-
// Reduce the iteration if the default slot props is empty
|
|
22
|
-
output[propName] = slotProps;
|
|
23
|
-
} else {
|
|
24
|
-
output[propName] = _extends({}, slotProps);
|
|
25
|
-
Object.keys(defaultSlotProps).forEach(function (slotPropName) {
|
|
26
|
-
output[propName][slotPropName] = resolveProps(defaultSlotProps[slotPropName], slotProps[slotPropName]);
|
|
27
|
-
});
|
|
28
|
-
}
|
|
29
|
-
} else if (output[propName] === undefined) {
|
|
30
|
-
output[propName] = defaultProps[propName];
|
|
31
|
-
}
|
|
32
|
-
});
|
|
33
|
-
return output;
|
|
34
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './scrollLeft';
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
// Source from https://github.com/alitaheri/normalize-scroll-left
|
|
2
|
-
var cachedType;
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Based on the jquery plugin https://github.com/othree/jquery.rtl-scroll-type
|
|
6
|
-
*
|
|
7
|
-
* Types of scrollLeft, assuming scrollWidth=100 and direction is rtl.
|
|
8
|
-
*
|
|
9
|
-
* Type | <- Most Left | Most Right -> | Initial
|
|
10
|
-
* ---------------- | ------------ | ------------- | -------
|
|
11
|
-
* default | 0 | 100 | 100
|
|
12
|
-
* negative (spec*) | -100 | 0 | 0
|
|
13
|
-
* reverse | 100 | 0 | 0
|
|
14
|
-
*
|
|
15
|
-
* Edge 85: default
|
|
16
|
-
* Safari 14: negative
|
|
17
|
-
* Chrome 85: negative
|
|
18
|
-
* Firefox 81: negative
|
|
19
|
-
* IE11: reverse
|
|
20
|
-
*
|
|
21
|
-
* spec* https://drafts.csswg.org/cssom-view/#dom-window-scroll
|
|
22
|
-
*/
|
|
23
|
-
export function detectScrollType() {
|
|
24
|
-
if (cachedType) {
|
|
25
|
-
return cachedType;
|
|
26
|
-
}
|
|
27
|
-
var dummy = document.createElement('div');
|
|
28
|
-
var container = document.createElement('div');
|
|
29
|
-
container.style.width = '10px';
|
|
30
|
-
container.style.height = '1px';
|
|
31
|
-
dummy.appendChild(container);
|
|
32
|
-
dummy.dir = 'rtl';
|
|
33
|
-
dummy.style.fontSize = '14px';
|
|
34
|
-
dummy.style.width = '4px';
|
|
35
|
-
dummy.style.height = '1px';
|
|
36
|
-
dummy.style.position = 'absolute';
|
|
37
|
-
dummy.style.top = '-1000px';
|
|
38
|
-
dummy.style.overflow = 'scroll';
|
|
39
|
-
document.body.appendChild(dummy);
|
|
40
|
-
cachedType = 'reverse';
|
|
41
|
-
if (dummy.scrollLeft > 0) {
|
|
42
|
-
cachedType = 'default';
|
|
43
|
-
} else {
|
|
44
|
-
dummy.scrollLeft = 1;
|
|
45
|
-
if (dummy.scrollLeft === 0) {
|
|
46
|
-
cachedType = 'negative';
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
document.body.removeChild(dummy);
|
|
50
|
-
return cachedType;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
// Based on https://stackoverflow.com/a/24394376
|
|
54
|
-
export function getNormalizedScrollLeft(element, direction) {
|
|
55
|
-
var scrollLeft = element.scrollLeft;
|
|
56
|
-
|
|
57
|
-
// Perform the calculations only when direction is rtl to avoid messing up the ltr behavior
|
|
58
|
-
if (direction !== 'rtl') {
|
|
59
|
-
return scrollLeft;
|
|
60
|
-
}
|
|
61
|
-
var type = detectScrollType();
|
|
62
|
-
switch (type) {
|
|
63
|
-
case 'negative':
|
|
64
|
-
return element.scrollWidth - element.clientWidth + scrollLeft;
|
|
65
|
-
case 'reverse':
|
|
66
|
-
return element.scrollWidth - element.clientWidth - scrollLeft;
|
|
67
|
-
default:
|
|
68
|
-
return scrollLeft;
|
|
69
|
-
}
|
|
70
|
-
}
|
package/legacy/setRef/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './setRef';
|
package/legacy/setRef/setRef.js
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* TODO v5: consider making it private
|
|
3
|
-
*
|
|
4
|
-
* passes {value} to {ref}
|
|
5
|
-
*
|
|
6
|
-
* WARNING: Be sure to only call this inside a callback that is passed as a ref.
|
|
7
|
-
* Otherwise, make sure to cleanup the previous {ref} if it changes. See
|
|
8
|
-
* https://github.com/mui/material-ui/issues/13539
|
|
9
|
-
*
|
|
10
|
-
* Useful if you want to expose the ref of an inner component to the public API
|
|
11
|
-
* while still using it inside the component.
|
|
12
|
-
* @param ref A ref callback or ref object. If anything falsy, this is a no-op.
|
|
13
|
-
*/
|
|
14
|
-
export default function setRef(ref, value) {
|
|
15
|
-
if (typeof ref === 'function') {
|
|
16
|
-
ref(value);
|
|
17
|
-
} else if (ref) {
|
|
18
|
-
ref.current = value;
|
|
19
|
-
}
|
|
20
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './unsupportedProp';
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
export default function unsupportedProp(props, propName, componentName, location, propFullName) {
|
|
2
|
-
if (process.env.NODE_ENV === 'production') {
|
|
3
|
-
return null;
|
|
4
|
-
}
|
|
5
|
-
var propFullNameSafe = propFullName || propName;
|
|
6
|
-
if (typeof props[propName] !== 'undefined') {
|
|
7
|
-
return new Error("The prop `".concat(propFullNameSafe, "` is not supported. Please remove it."));
|
|
8
|
-
}
|
|
9
|
-
return null;
|
|
10
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './useControlled';
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
/* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
|
|
4
|
-
import * as React from 'react';
|
|
5
|
-
export default function useControlled(_ref) {
|
|
6
|
-
var controlled = _ref.controlled,
|
|
7
|
-
defaultProp = _ref.default,
|
|
8
|
-
name = _ref.name,
|
|
9
|
-
_ref$state = _ref.state,
|
|
10
|
-
state = _ref$state === void 0 ? 'value' : _ref$state;
|
|
11
|
-
// isControlled is ignored in the hook dependency lists as it should never change.
|
|
12
|
-
var _React$useRef = React.useRef(controlled !== undefined),
|
|
13
|
-
isControlled = _React$useRef.current;
|
|
14
|
-
var _React$useState = React.useState(defaultProp),
|
|
15
|
-
valueState = _React$useState[0],
|
|
16
|
-
setValue = _React$useState[1];
|
|
17
|
-
var value = isControlled ? controlled : valueState;
|
|
18
|
-
if (process.env.NODE_ENV !== 'production') {
|
|
19
|
-
React.useEffect(function () {
|
|
20
|
-
if (isControlled !== (controlled !== undefined)) {
|
|
21
|
-
console.error(["MUI: A component is changing the ".concat(isControlled ? '' : 'un', "controlled ").concat(state, " state of ").concat(name, " to be ").concat(isControlled ? 'un' : '', "controlled."), 'Elements should not switch from uncontrolled to controlled (or vice versa).', "Decide between using a controlled or uncontrolled ".concat(name, " ") + 'element for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
|
|
22
|
-
}
|
|
23
|
-
}, [state, name, controlled]);
|
|
24
|
-
var _React$useRef2 = React.useRef(defaultProp),
|
|
25
|
-
defaultValue = _React$useRef2.current;
|
|
26
|
-
React.useEffect(function () {
|
|
27
|
-
if (!isControlled && defaultValue !== defaultProp) {
|
|
28
|
-
console.error(["MUI: A component is changing the default ".concat(state, " state of an uncontrolled ").concat(name, " after being initialized. ") + "To suppress this warning opt to use a controlled ".concat(name, ".")].join('\n'));
|
|
29
|
-
}
|
|
30
|
-
}, [JSON.stringify(defaultProp)]);
|
|
31
|
-
}
|
|
32
|
-
var setValueIfUncontrolled = React.useCallback(function (newValue) {
|
|
33
|
-
if (!isControlled) {
|
|
34
|
-
setValue(newValue);
|
|
35
|
-
}
|
|
36
|
-
}, []);
|
|
37
|
-
return [value, setValueIfUncontrolled];
|
|
38
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './useEnhancedEffect';
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* A version of `React.useLayoutEffect` that does not show a warning when server-side rendering.
|
|
7
|
-
* This is useful for effects that are only needed for client-side rendering but not for SSR.
|
|
8
|
-
*
|
|
9
|
-
* Before you use this hook, make sure to read https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
|
|
10
|
-
* and confirm it doesn't apply to your use-case.
|
|
11
|
-
*/
|
|
12
|
-
var useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
|
|
13
|
-
export default useEnhancedEffect;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './useEventCallback';
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import useEnhancedEffect from '../useEnhancedEffect';
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* Inspired by https://github.com/facebook/react/issues/14099#issuecomment-440013892
|
|
8
|
-
* See RFC in https://github.com/reactjs/rfcs/pull/220
|
|
9
|
-
*/
|
|
10
|
-
|
|
11
|
-
function useEventCallback(fn) {
|
|
12
|
-
var ref = React.useRef(fn);
|
|
13
|
-
useEnhancedEffect(function () {
|
|
14
|
-
ref.current = fn;
|
|
15
|
-
});
|
|
16
|
-
return React.useRef(function () {
|
|
17
|
-
return (
|
|
18
|
-
// @ts-expect-error hide `this`
|
|
19
|
-
(0, ref.current).apply(void 0, arguments)
|
|
20
|
-
);
|
|
21
|
-
}).current;
|
|
22
|
-
}
|
|
23
|
-
export default useEventCallback;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './useForkRef';
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import setRef from '../setRef';
|
|
5
|
-
export default function useForkRef() {
|
|
6
|
-
for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
7
|
-
refs[_key] = arguments[_key];
|
|
8
|
-
}
|
|
9
|
-
/**
|
|
10
|
-
* This will create a new function if the refs passed to this hook change and are all defined.
|
|
11
|
-
* This means react will call the old forkRef with `null` and the new forkRef
|
|
12
|
-
* with the ref. Cleanup naturally emerges from this behavior.
|
|
13
|
-
*/
|
|
14
|
-
return React.useMemo(function () {
|
|
15
|
-
if (refs.every(function (ref) {
|
|
16
|
-
return ref == null;
|
|
17
|
-
})) {
|
|
18
|
-
return null;
|
|
19
|
-
}
|
|
20
|
-
return function (instance) {
|
|
21
|
-
refs.forEach(function (ref) {
|
|
22
|
-
setRef(ref, instance);
|
|
23
|
-
});
|
|
24
|
-
};
|
|
25
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
26
|
-
}, refs);
|
|
27
|
-
}
|
package/legacy/useId/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './useId';
|
package/legacy/useId/useId.js
DELETED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
var globalId = 0;
|
|
5
|
-
function useGlobalId(idOverride) {
|
|
6
|
-
var _React$useState = React.useState(idOverride),
|
|
7
|
-
defaultId = _React$useState[0],
|
|
8
|
-
setDefaultId = _React$useState[1];
|
|
9
|
-
var id = idOverride || defaultId;
|
|
10
|
-
React.useEffect(function () {
|
|
11
|
-
if (defaultId == null) {
|
|
12
|
-
// Fallback to this default id when possible.
|
|
13
|
-
// Use the incrementing value for client-side rendering only.
|
|
14
|
-
// We can't use it server-side.
|
|
15
|
-
// If you want to use random values please consider the Birthday Problem: https://en.wikipedia.org/wiki/Birthday_problem
|
|
16
|
-
globalId += 1;
|
|
17
|
-
setDefaultId("mui-".concat(globalId));
|
|
18
|
-
}
|
|
19
|
-
}, [defaultId]);
|
|
20
|
-
return id;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
// downstream bundlers may remove unnecessary concatenation, but won't remove toString call -- Workaround for https://github.com/webpack/webpack/issues/14814
|
|
24
|
-
var maybeReactUseId = React['useId'.toString()];
|
|
25
|
-
/**
|
|
26
|
-
*
|
|
27
|
-
* @example <div id={useId()} />
|
|
28
|
-
* @param idOverride
|
|
29
|
-
* @returns {string}
|
|
30
|
-
*/
|
|
31
|
-
export default function useId(idOverride) {
|
|
32
|
-
if (maybeReactUseId !== undefined) {
|
|
33
|
-
var reactId = maybeReactUseId();
|
|
34
|
-
return idOverride != null ? idOverride : reactId;
|
|
35
|
-
}
|
|
36
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks -- `React.useId` is invariant at runtime.
|
|
37
|
-
return useGlobalId(idOverride);
|
|
38
|
-
}
|
|
@@ -1,160 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
// based on https://github.com/WICG/focus-visible/blob/v4.1.5/src/focus-visible.js
|
|
4
|
-
import * as React from 'react';
|
|
5
|
-
import { Timeout } from '../useTimeout/useTimeout';
|
|
6
|
-
var hadKeyboardEvent = true;
|
|
7
|
-
var hadFocusVisibleRecently = false;
|
|
8
|
-
var hadFocusVisibleRecentlyTimeout = new Timeout();
|
|
9
|
-
var inputTypesWhitelist = {
|
|
10
|
-
text: true,
|
|
11
|
-
search: true,
|
|
12
|
-
url: true,
|
|
13
|
-
tel: true,
|
|
14
|
-
email: true,
|
|
15
|
-
password: true,
|
|
16
|
-
number: true,
|
|
17
|
-
date: true,
|
|
18
|
-
month: true,
|
|
19
|
-
week: true,
|
|
20
|
-
time: true,
|
|
21
|
-
datetime: true,
|
|
22
|
-
'datetime-local': true
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
/**
|
|
26
|
-
* Computes whether the given element should automatically trigger the
|
|
27
|
-
* `focus-visible` class being added, i.e. whether it should always match
|
|
28
|
-
* `:focus-visible` when focused.
|
|
29
|
-
* @param {Element} node
|
|
30
|
-
* @returns {boolean}
|
|
31
|
-
*/
|
|
32
|
-
function focusTriggersKeyboardModality(node) {
|
|
33
|
-
var _ref = node,
|
|
34
|
-
type = _ref.type,
|
|
35
|
-
tagName = _ref.tagName;
|
|
36
|
-
if (tagName === 'INPUT' && inputTypesWhitelist[type] && !node.readOnly) {
|
|
37
|
-
return true;
|
|
38
|
-
}
|
|
39
|
-
if (tagName === 'TEXTAREA' && !node.readOnly) {
|
|
40
|
-
return true;
|
|
41
|
-
}
|
|
42
|
-
if (node.isContentEditable) {
|
|
43
|
-
return true;
|
|
44
|
-
}
|
|
45
|
-
return false;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
/**
|
|
49
|
-
* Keep track of our keyboard modality state with `hadKeyboardEvent`.
|
|
50
|
-
* If the most recent user interaction was via the keyboard;
|
|
51
|
-
* and the key press did not include a meta, alt/option, or control key;
|
|
52
|
-
* then the modality is keyboard. Otherwise, the modality is not keyboard.
|
|
53
|
-
* @param {KeyboardEvent} event
|
|
54
|
-
*/
|
|
55
|
-
function handleKeyDown(event) {
|
|
56
|
-
if (event.metaKey || event.altKey || event.ctrlKey) {
|
|
57
|
-
return;
|
|
58
|
-
}
|
|
59
|
-
hadKeyboardEvent = true;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
/**
|
|
63
|
-
* If at any point a user clicks with a pointing device, ensure that we change
|
|
64
|
-
* the modality away from keyboard.
|
|
65
|
-
* This avoids the situation where a user presses a key on an already focused
|
|
66
|
-
* element, and then clicks on a different element, focusing it with a
|
|
67
|
-
* pointing device, while we still think we're in keyboard modality.
|
|
68
|
-
*/
|
|
69
|
-
function handlePointerDown() {
|
|
70
|
-
hadKeyboardEvent = false;
|
|
71
|
-
}
|
|
72
|
-
function handleVisibilityChange() {
|
|
73
|
-
if (this.visibilityState === 'hidden') {
|
|
74
|
-
// If the tab becomes active again, the browser will handle calling focus
|
|
75
|
-
// on the element (Safari actually calls it twice).
|
|
76
|
-
// If this tab change caused a blur on an element with focus-visible,
|
|
77
|
-
// re-apply the class when the user switches back to the tab.
|
|
78
|
-
if (hadFocusVisibleRecently) {
|
|
79
|
-
hadKeyboardEvent = true;
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
function prepare(doc) {
|
|
84
|
-
doc.addEventListener('keydown', handleKeyDown, true);
|
|
85
|
-
doc.addEventListener('mousedown', handlePointerDown, true);
|
|
86
|
-
doc.addEventListener('pointerdown', handlePointerDown, true);
|
|
87
|
-
doc.addEventListener('touchstart', handlePointerDown, true);
|
|
88
|
-
doc.addEventListener('visibilitychange', handleVisibilityChange, true);
|
|
89
|
-
}
|
|
90
|
-
export function teardown(doc) {
|
|
91
|
-
doc.removeEventListener('keydown', handleKeyDown, true);
|
|
92
|
-
doc.removeEventListener('mousedown', handlePointerDown, true);
|
|
93
|
-
doc.removeEventListener('pointerdown', handlePointerDown, true);
|
|
94
|
-
doc.removeEventListener('touchstart', handlePointerDown, true);
|
|
95
|
-
doc.removeEventListener('visibilitychange', handleVisibilityChange, true);
|
|
96
|
-
}
|
|
97
|
-
function isFocusVisible(event) {
|
|
98
|
-
var target = event.target;
|
|
99
|
-
try {
|
|
100
|
-
return target.matches(':focus-visible');
|
|
101
|
-
} catch (error) {
|
|
102
|
-
// Browsers not implementing :focus-visible will throw a SyntaxError.
|
|
103
|
-
// We use our own heuristic for those browsers.
|
|
104
|
-
// Rethrow might be better if it's not the expected error but do we really
|
|
105
|
-
// want to crash if focus-visible malfunctioned?
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
// No need for validFocusTarget check. The user does that by attaching it to
|
|
109
|
-
// focusable events only.
|
|
110
|
-
return hadKeyboardEvent || focusTriggersKeyboardModality(target);
|
|
111
|
-
}
|
|
112
|
-
export default function useIsFocusVisible() {
|
|
113
|
-
var ref = React.useCallback(function (node) {
|
|
114
|
-
if (node != null) {
|
|
115
|
-
prepare(node.ownerDocument);
|
|
116
|
-
}
|
|
117
|
-
}, []);
|
|
118
|
-
var isFocusVisibleRef = React.useRef(false);
|
|
119
|
-
|
|
120
|
-
/**
|
|
121
|
-
* Should be called if a blur event is fired
|
|
122
|
-
*/
|
|
123
|
-
function handleBlurVisible() {
|
|
124
|
-
// checking against potential state variable does not suffice if we focus and blur synchronously.
|
|
125
|
-
// React wouldn't have time to trigger a re-render so `focusVisible` would be stale.
|
|
126
|
-
// Ideally we would adjust `isFocusVisible(event)` to look at `relatedTarget` for blur events.
|
|
127
|
-
// This doesn't work in IE11 due to https://github.com/facebook/react/issues/3751
|
|
128
|
-
// TODO: check again if React releases their internal changes to focus event handling (https://github.com/facebook/react/pull/19186).
|
|
129
|
-
if (isFocusVisibleRef.current) {
|
|
130
|
-
// To detect a tab/window switch, we look for a blur event followed
|
|
131
|
-
// rapidly by a visibility change.
|
|
132
|
-
// If we don't see a visibility change within 100ms, it's probably a
|
|
133
|
-
// regular focus change.
|
|
134
|
-
hadFocusVisibleRecently = true;
|
|
135
|
-
hadFocusVisibleRecentlyTimeout.start(100, function () {
|
|
136
|
-
hadFocusVisibleRecently = false;
|
|
137
|
-
});
|
|
138
|
-
isFocusVisibleRef.current = false;
|
|
139
|
-
return true;
|
|
140
|
-
}
|
|
141
|
-
return false;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
/**
|
|
145
|
-
* Should be called if a blur event is fired
|
|
146
|
-
*/
|
|
147
|
-
function handleFocusVisible(event) {
|
|
148
|
-
if (isFocusVisible(event)) {
|
|
149
|
-
isFocusVisibleRef.current = true;
|
|
150
|
-
return true;
|
|
151
|
-
}
|
|
152
|
-
return false;
|
|
153
|
-
}
|
|
154
|
-
return {
|
|
155
|
-
isFocusVisibleRef: isFocusVisibleRef,
|
|
156
|
-
onFocus: handleFocusVisible,
|
|
157
|
-
onBlur: handleBlurVisible,
|
|
158
|
-
ref: ref
|
|
159
|
-
};
|
|
160
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './useLazyRef';
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
var UNINITIALIZED = {};
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* A React.useRef() that is initialized lazily with a function. Note that it accepts an optional
|
|
8
|
-
* initialization argument, so the initialization function doesn't need to be an inline closure.
|
|
9
|
-
*
|
|
10
|
-
* @usage
|
|
11
|
-
* const ref = useLazyRef(sortColumns, columns)
|
|
12
|
-
*/
|
|
13
|
-
export default function useLazyRef(init, initArg) {
|
|
14
|
-
var ref = React.useRef(UNINITIALIZED);
|
|
15
|
-
if (ref.current === UNINITIALIZED) {
|
|
16
|
-
ref.current = init(initArg);
|
|
17
|
-
}
|
|
18
|
-
return ref;
|
|
19
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './useLocalStorageState';
|
|
@@ -1,121 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
|
|
5
|
-
// storage events only work across tabs, we'll use an event emitter to announce within the current tab
|
|
6
|
-
var currentTabChangeListeners = new Map();
|
|
7
|
-
function onCurrentTabStorageChange(key, handler) {
|
|
8
|
-
var listeners = currentTabChangeListeners.get(key);
|
|
9
|
-
if (!listeners) {
|
|
10
|
-
listeners = new Set();
|
|
11
|
-
currentTabChangeListeners.set(key, listeners);
|
|
12
|
-
}
|
|
13
|
-
listeners.add(handler);
|
|
14
|
-
}
|
|
15
|
-
function offCurrentTabStorageChange(key, handler) {
|
|
16
|
-
var listeners = currentTabChangeListeners.get(key);
|
|
17
|
-
if (!listeners) {
|
|
18
|
-
return;
|
|
19
|
-
}
|
|
20
|
-
listeners.delete(handler);
|
|
21
|
-
if (listeners.size === 0) {
|
|
22
|
-
currentTabChangeListeners.delete(key);
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
function emitCurrentTabStorageChange(key) {
|
|
26
|
-
var listeners = currentTabChangeListeners.get(key);
|
|
27
|
-
if (listeners) {
|
|
28
|
-
listeners.forEach(function (listener) {
|
|
29
|
-
return listener();
|
|
30
|
-
});
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
function subscribe(area, key, callbark) {
|
|
34
|
-
if (!key) {
|
|
35
|
-
return function () {};
|
|
36
|
-
}
|
|
37
|
-
var storageHandler = function storageHandler(event) {
|
|
38
|
-
if (event.storageArea === area && event.key === key) {
|
|
39
|
-
callbark();
|
|
40
|
-
}
|
|
41
|
-
};
|
|
42
|
-
window.addEventListener('storage', storageHandler);
|
|
43
|
-
onCurrentTabStorageChange(key, callbark);
|
|
44
|
-
return function () {
|
|
45
|
-
window.removeEventListener('storage', storageHandler);
|
|
46
|
-
offCurrentTabStorageChange(key, callbark);
|
|
47
|
-
};
|
|
48
|
-
}
|
|
49
|
-
function getSnapshot(area, key) {
|
|
50
|
-
if (!key) {
|
|
51
|
-
return null;
|
|
52
|
-
}
|
|
53
|
-
try {
|
|
54
|
-
return area.getItem(key);
|
|
55
|
-
} catch (_unused) {
|
|
56
|
-
// ignore
|
|
57
|
-
// See https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API#feature-detecting_localstorage
|
|
58
|
-
return null;
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
function setValue(area, key, value) {
|
|
62
|
-
if (!key) {
|
|
63
|
-
return;
|
|
64
|
-
}
|
|
65
|
-
try {
|
|
66
|
-
if (value === null) {
|
|
67
|
-
area.removeItem(key);
|
|
68
|
-
} else {
|
|
69
|
-
area.setItem(key, String(value));
|
|
70
|
-
}
|
|
71
|
-
} catch (_unused2) {
|
|
72
|
-
// ignore
|
|
73
|
-
// See https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API#feature-detecting_localstorage
|
|
74
|
-
return;
|
|
75
|
-
}
|
|
76
|
-
emitCurrentTabStorageChange(key);
|
|
77
|
-
}
|
|
78
|
-
var serverValue = [null, function () {}];
|
|
79
|
-
function useLocalStorageStateServer() {
|
|
80
|
-
return serverValue;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
/**
|
|
84
|
-
* Sync state to local storage so that it persists through a page refresh. Usage is
|
|
85
|
-
* similar to useState except we pass in a storage key so that we can default
|
|
86
|
-
* to that value on page load instead of the specified initial value.
|
|
87
|
-
*
|
|
88
|
-
* Since the storage API isn't available in server-rendering environments, we
|
|
89
|
-
* return null during SSR and hydration.
|
|
90
|
-
*/
|
|
91
|
-
function useLocalStorageStateBrowser(key) {
|
|
92
|
-
var initializer = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
93
|
-
var _React$useState = React.useState(initializer),
|
|
94
|
-
initialValue = _React$useState[0];
|
|
95
|
-
var area = window.localStorage;
|
|
96
|
-
var subscribeKey = React.useCallback(function (callbark) {
|
|
97
|
-
return subscribe(area, key, callbark);
|
|
98
|
-
}, [area, key]);
|
|
99
|
-
var getKeySnapshot = React.useCallback(function () {
|
|
100
|
-
var _getSnapshot;
|
|
101
|
-
return (_getSnapshot = getSnapshot(area, key)) != null ? _getSnapshot : initialValue;
|
|
102
|
-
}, [area, initialValue, key]);
|
|
103
|
-
|
|
104
|
-
// Start with null for the hydration, and then switch to the actual value.
|
|
105
|
-
var getKeyServerSnapshot = function getKeyServerSnapshot() {
|
|
106
|
-
return null;
|
|
107
|
-
};
|
|
108
|
-
var storedValue = React.useSyncExternalStore(subscribeKey, getKeySnapshot, getKeyServerSnapshot);
|
|
109
|
-
var setStoredValue = React.useCallback(function (value) {
|
|
110
|
-
var valueToStore = value instanceof Function ? value(storedValue) : value;
|
|
111
|
-
setValue(area, key, valueToStore);
|
|
112
|
-
}, [area, key, storedValue]);
|
|
113
|
-
var _React$useState2 = React.useState(initialValue),
|
|
114
|
-
nonStoredValue = _React$useState2[0],
|
|
115
|
-
setNonStoredValue = _React$useState2[1];
|
|
116
|
-
if (!key) {
|
|
117
|
-
return [nonStoredValue, setNonStoredValue];
|
|
118
|
-
}
|
|
119
|
-
return [storedValue, setStoredValue];
|
|
120
|
-
}
|
|
121
|
-
export default typeof window === 'undefined' ? useLocalStorageStateServer : useLocalStorageStateBrowser;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './useOnMount';
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
var EMPTY = [];
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* A React.useEffect equivalent that runs once, when the component is mounted.
|
|
8
|
-
*/
|
|
9
|
-
export default function useOnMount(fn) {
|
|
10
|
-
/* eslint-disable react-hooks/exhaustive-deps */
|
|
11
|
-
React.useEffect(fn, EMPTY);
|
|
12
|
-
/* eslint-enable react-hooks/exhaustive-deps */
|
|
13
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './usePreviousProps';
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
var usePreviousProps = function usePreviousProps(value) {
|
|
5
|
-
var ref = React.useRef({});
|
|
6
|
-
React.useEffect(function () {
|
|
7
|
-
ref.current = value;
|
|
8
|
-
});
|
|
9
|
-
return ref.current;
|
|
10
|
-
};
|
|
11
|
-
export default usePreviousProps;
|