@mui/utils 5.10.9 → 5.10.15
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 +636 -214
- package/ClassNameGenerator/ClassNameGenerator.js +0 -6
- package/ClassNameGenerator/index.js +0 -2
- package/HTMLElementType.js +0 -5
- package/capitalize.js +0 -4
- package/chainPropTypes.js +0 -2
- package/composeClasses/composeClasses.js +2 -4
- package/composeClasses/index.js +0 -2
- package/createChainedFunction.js +0 -2
- package/debounce.js +0 -5
- package/deepmerge.js +0 -7
- package/deprecatedPropType.js +0 -4
- package/elementAcceptingRef.js +2 -12
- package/elementTypeAcceptingRef.js +3 -13
- package/esm/ClassNameGenerator/ClassNameGenerator.js +0 -5
- package/esm/HTMLElementType.js +0 -4
- package/esm/capitalize.js +0 -1
- package/esm/chainPropTypes.js +0 -1
- package/esm/composeClasses/composeClasses.js +2 -3
- package/esm/createChainedFunction.js +0 -1
- package/esm/debounce.js +0 -4
- package/esm/deepmerge.js +0 -3
- package/esm/deprecatedPropType.js +0 -3
- package/esm/elementAcceptingRef.js +2 -9
- package/esm/elementTypeAcceptingRef.js +3 -9
- package/esm/exactProp.js +1 -3
- package/esm/formatMuiErrorMessage.js +0 -3
- package/esm/getDisplayName.js +6 -13
- package/esm/integerPropType.js +2 -17
- package/esm/requirePropFactory.js +2 -8
- package/esm/resolveProps.js +0 -2
- package/esm/scrollLeft.js +5 -11
- package/esm/unsupportedProp.js +0 -3
- package/esm/useControlled.js +0 -2
- package/esm/useEventCallback.js +3 -2
- package/esm/useForkRef.js +2 -2
- package/esm/useId.js +4 -7
- package/esm/useIsFocusVisible.js +10 -26
- package/esm/usePreviousProps.js +0 -2
- package/exactProp.js +1 -7
- package/formatMuiErrorMessage.js +0 -4
- package/generateUtilityClass/generateUtilityClass.js +0 -4
- package/generateUtilityClass/index.js +0 -4
- package/generateUtilityClasses/generateUtilityClasses.js +0 -3
- package/generateUtilityClasses/index.js +0 -2
- package/getDisplayName.js +3 -14
- package/getScrollbarSize.js +0 -1
- package/index.js +1 -41
- package/integerPropType.js +2 -21
- package/isMuiElement.js +0 -4
- package/legacy/ClassNameGenerator/ClassNameGenerator.js +0 -2
- package/legacy/HTMLElementType.js +0 -4
- package/legacy/capitalize.js +0 -1
- package/legacy/chainPropTypes.js +0 -1
- package/legacy/composeClasses/composeClasses.js +2 -3
- package/legacy/createChainedFunction.js +0 -3
- package/legacy/debounce.js +0 -6
- package/legacy/deepmerge.js +0 -3
- package/legacy/deprecatedPropType.js +0 -3
- package/legacy/elementAcceptingRef.js +3 -10
- package/legacy/elementTypeAcceptingRef.js +4 -10
- package/legacy/exactProp.js +1 -3
- package/legacy/formatMuiErrorMessage.js +0 -3
- package/legacy/getDisplayName.js +6 -13
- package/legacy/index.js +1 -1
- package/legacy/integerPropType.js +2 -18
- package/legacy/requirePropFactory.js +2 -9
- package/legacy/resolveProps.js +0 -2
- package/legacy/scrollLeft.js +5 -11
- package/legacy/unsupportedProp.js +0 -3
- package/legacy/useControlled.js +8 -15
- package/legacy/useEventCallback.js +3 -2
- package/legacy/useForkRef.js +2 -3
- package/legacy/useId.js +6 -10
- package/legacy/useIsFocusVisible.js +12 -28
- package/legacy/usePreviousProps.js +0 -2
- package/modern/ClassNameGenerator/ClassNameGenerator.js +0 -5
- package/modern/HTMLElementType.js +0 -4
- package/modern/capitalize.js +0 -1
- package/modern/chainPropTypes.js +0 -1
- package/modern/composeClasses/composeClasses.js +2 -3
- package/modern/createChainedFunction.js +0 -1
- package/modern/debounce.js +0 -4
- package/modern/deepmerge.js +0 -3
- package/modern/deprecatedPropType.js +0 -3
- package/modern/elementAcceptingRef.js +2 -9
- package/modern/elementTypeAcceptingRef.js +3 -9
- package/modern/exactProp.js +1 -3
- package/modern/formatMuiErrorMessage.js +0 -3
- package/modern/getDisplayName.js +6 -13
- package/modern/index.js +1 -1
- package/modern/integerPropType.js +2 -17
- package/modern/requirePropFactory.js +2 -8
- package/modern/resolveProps.js +0 -2
- package/modern/scrollLeft.js +5 -11
- package/modern/unsupportedProp.js +0 -3
- package/modern/useControlled.js +0 -2
- package/modern/useEventCallback.js +3 -2
- package/modern/useForkRef.js +2 -2
- package/modern/useId.js +4 -7
- package/modern/useIsFocusVisible.js +10 -26
- package/modern/usePreviousProps.js +0 -2
- package/ownerDocument.js +0 -1
- package/ownerWindow.js +0 -3
- package/package.json +2 -2
- package/ponyfillGlobal.js +0 -2
- package/refType.js +0 -4
- package/requirePropFactory.js +2 -11
- package/resolveProps.js +0 -3
- package/scrollLeft.js +5 -12
- package/setRef.js +0 -1
- package/unsupportedProp.js +0 -4
- package/useControlled.js +1 -6
- package/useEnhancedEffect.js +0 -4
- package/useEventCallback.js +2 -7
- package/useForkRef.js +2 -8
- package/useId.js +4 -11
- package/useIsFocusVisible.js +11 -30
- package/usePreviousProps.js +0 -5
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import PropTypes from 'prop-types';
|
|
2
2
|
import chainPropTypes from './chainPropTypes';
|
|
3
|
-
|
|
4
3
|
function isClassComponent(elementType) {
|
|
5
4
|
// elementType.prototype?.isReactComponent
|
|
6
5
|
const {
|
|
@@ -8,19 +7,17 @@ function isClassComponent(elementType) {
|
|
|
8
7
|
} = elementType;
|
|
9
8
|
return Boolean(prototype.isReactComponent);
|
|
10
9
|
}
|
|
11
|
-
|
|
12
10
|
function acceptingRef(props, propName, componentName, location, propFullName) {
|
|
13
11
|
const element = props[propName];
|
|
14
12
|
const safePropName = propFullName || propName;
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
if (element == null ||
|
|
14
|
+
// When server-side rendering React doesn't warn either.
|
|
17
15
|
// This is not an accurate check for SSR.
|
|
18
16
|
// This is only in place for Emotion compat.
|
|
19
17
|
// TODO: Revisit once https://github.com/facebook/react/issues/20047 is resolved.
|
|
20
18
|
typeof window === 'undefined') {
|
|
21
19
|
return null;
|
|
22
20
|
}
|
|
23
|
-
|
|
24
21
|
let warningHint;
|
|
25
22
|
const elementType = element.type;
|
|
26
23
|
/**
|
|
@@ -32,18 +29,14 @@ function acceptingRef(props, propName, componentName, location, propFullName) {
|
|
|
32
29
|
* or class components. "Safe" means there's no public API.
|
|
33
30
|
*
|
|
34
31
|
*/
|
|
35
|
-
|
|
36
32
|
if (typeof elementType === 'function' && !isClassComponent(elementType)) {
|
|
37
33
|
warningHint = 'Did you accidentally use a plain function component for an element instead?';
|
|
38
34
|
}
|
|
39
|
-
|
|
40
35
|
if (warningHint !== undefined) {
|
|
41
36
|
return new Error(`Invalid ${location} \`${safePropName}\` supplied to \`${componentName}\`. ` + `Expected an element that can hold a ref. ${warningHint} ` + 'For more information see https://mui.com/r/caveat-with-refs-guide');
|
|
42
37
|
}
|
|
43
|
-
|
|
44
38
|
return null;
|
|
45
39
|
}
|
|
46
|
-
|
|
47
40
|
const elementAcceptingRef = chainPropTypes(PropTypes.element, acceptingRef);
|
|
48
41
|
elementAcceptingRef.isRequired = chainPropTypes(PropTypes.element.isRequired, acceptingRef);
|
|
49
42
|
export default elementAcceptingRef;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import PropTypes from 'prop-types';
|
|
2
2
|
import chainPropTypes from './chainPropTypes';
|
|
3
|
-
|
|
4
3
|
function isClassComponent(elementType) {
|
|
5
4
|
// elementType.prototype?.isReactComponent
|
|
6
5
|
const {
|
|
@@ -8,20 +7,19 @@ function isClassComponent(elementType) {
|
|
|
8
7
|
} = elementType;
|
|
9
8
|
return Boolean(prototype.isReactComponent);
|
|
10
9
|
}
|
|
11
|
-
|
|
12
10
|
function elementTypeAcceptingRef(props, propName, componentName, location, propFullName) {
|
|
13
11
|
const propValue = props[propName];
|
|
14
12
|
const safePropName = propFullName || propName;
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
if (propValue == null ||
|
|
14
|
+
// When server-side rendering React doesn't warn either.
|
|
17
15
|
// This is not an accurate check for SSR.
|
|
18
16
|
// This is only in place for emotion compat.
|
|
19
17
|
// TODO: Revisit once https://github.com/facebook/react/issues/20047 is resolved.
|
|
20
18
|
typeof window === 'undefined') {
|
|
21
19
|
return null;
|
|
22
20
|
}
|
|
23
|
-
|
|
24
21
|
let warningHint;
|
|
22
|
+
|
|
25
23
|
/**
|
|
26
24
|
* Blacklisting instead of whitelisting
|
|
27
25
|
*
|
|
@@ -31,16 +29,12 @@ function elementTypeAcceptingRef(props, propName, componentName, location, propF
|
|
|
31
29
|
* or class components. "Safe" means there's no public API.
|
|
32
30
|
*
|
|
33
31
|
*/
|
|
34
|
-
|
|
35
32
|
if (typeof propValue === 'function' && !isClassComponent(propValue)) {
|
|
36
33
|
warningHint = 'Did you accidentally provide a plain function component instead?';
|
|
37
34
|
}
|
|
38
|
-
|
|
39
35
|
if (warningHint !== undefined) {
|
|
40
36
|
return new Error(`Invalid ${location} \`${safePropName}\` supplied to \`${componentName}\`. ` + `Expected an element type that can hold a ref. ${warningHint} ` + 'For more information see https://mui.com/r/caveat-with-refs-guide');
|
|
41
37
|
}
|
|
42
|
-
|
|
43
38
|
return null;
|
|
44
39
|
}
|
|
45
|
-
|
|
46
40
|
export default chainPropTypes(PropTypes.elementType, elementTypeAcceptingRef);
|
package/modern/exactProp.js
CHANGED
|
@@ -2,20 +2,18 @@ import _extends from "@babel/runtime/helpers/esm/extends";
|
|
|
2
2
|
// This module is based on https://github.com/airbnb/prop-types-exact repository.
|
|
3
3
|
// However, in order to reduce the number of dependencies and to remove some extra safe checks
|
|
4
4
|
// the module was forked.
|
|
5
|
+
|
|
5
6
|
const specialProperty = 'exact-prop: \u200b';
|
|
6
7
|
export default function exactProp(propTypes) {
|
|
7
8
|
if (process.env.NODE_ENV === 'production') {
|
|
8
9
|
return propTypes;
|
|
9
10
|
}
|
|
10
|
-
|
|
11
11
|
return _extends({}, propTypes, {
|
|
12
12
|
[specialProperty]: props => {
|
|
13
13
|
const unsupportedProps = Object.keys(props).filter(prop => !propTypes.hasOwnProperty(prop));
|
|
14
|
-
|
|
15
14
|
if (unsupportedProps.length > 0) {
|
|
16
15
|
return new Error(`The following props are not supported: ${unsupportedProps.map(prop => `\`${prop}\``).join(', ')}. Please remove them.`);
|
|
17
16
|
}
|
|
18
|
-
|
|
19
17
|
return null;
|
|
20
18
|
}
|
|
21
19
|
});
|
|
@@ -7,16 +7,13 @@ export default function formatMuiErrorMessage(code) {
|
|
|
7
7
|
// Apply babel-plugin-transform-template-literals in loose mode
|
|
8
8
|
// loose mode is safe iff we're concatenating primitives
|
|
9
9
|
// see https://babeljs.io/docs/en/babel-plugin-transform-template-literals#loose
|
|
10
|
-
|
|
11
10
|
/* eslint-disable prefer-template */
|
|
12
11
|
let url = 'https://mui.com/production-error/?code=' + code;
|
|
13
|
-
|
|
14
12
|
for (let i = 1; i < arguments.length; i += 1) {
|
|
15
13
|
// rest params over-transpile for this case
|
|
16
14
|
// eslint-disable-next-line prefer-rest-params
|
|
17
15
|
url += '&args[]=' + encodeURIComponent(arguments[i]);
|
|
18
16
|
}
|
|
19
|
-
|
|
20
17
|
return 'Minified MUI error #' + code + '; visit ' + url + ' for the full message.';
|
|
21
18
|
/* eslint-enable prefer-template */
|
|
22
19
|
}
|
package/modern/getDisplayName.js
CHANGED
|
@@ -1,54 +1,47 @@
|
|
|
1
|
-
import { ForwardRef, Memo } from 'react-is';
|
|
2
|
-
// https://github.com/JamesMGreene/Function.name/blob/58b314d4a983110c3682f1228f845d39ccca1817/Function.name.js#L3
|
|
1
|
+
import { ForwardRef, Memo } from 'react-is';
|
|
3
2
|
|
|
3
|
+
// Simplified polyfill for IE11 support
|
|
4
|
+
// https://github.com/JamesMGreene/Function.name/blob/58b314d4a983110c3682f1228f845d39ccca1817/Function.name.js#L3
|
|
4
5
|
const fnNameMatchRegex = /^\s*function(?:\s|\s*\/\*.*\*\/\s*)+([^(\s/]*)\s*/;
|
|
5
6
|
export function getFunctionName(fn) {
|
|
6
7
|
const match = `${fn}`.match(fnNameMatchRegex);
|
|
7
8
|
const name = match && match[1];
|
|
8
9
|
return name || '';
|
|
9
10
|
}
|
|
10
|
-
|
|
11
11
|
function getFunctionComponentName(Component, fallback = '') {
|
|
12
12
|
return Component.displayName || Component.name || getFunctionName(Component) || fallback;
|
|
13
13
|
}
|
|
14
|
-
|
|
15
14
|
function getWrappedName(outerType, innerType, wrapperName) {
|
|
16
15
|
const functionName = getFunctionComponentName(innerType);
|
|
17
16
|
return outerType.displayName || (functionName !== '' ? `${wrapperName}(${functionName})` : wrapperName);
|
|
18
17
|
}
|
|
18
|
+
|
|
19
19
|
/**
|
|
20
20
|
* cherry-pick from
|
|
21
21
|
* https://github.com/facebook/react/blob/769b1f270e1251d9dbdce0fcbd9e92e502d059b8/packages/shared/getComponentName.js
|
|
22
22
|
* originally forked from recompose/getDisplayName with added IE11 support
|
|
23
23
|
*/
|
|
24
|
-
|
|
25
|
-
|
|
26
24
|
export default function getDisplayName(Component) {
|
|
27
25
|
if (Component == null) {
|
|
28
26
|
return undefined;
|
|
29
27
|
}
|
|
30
|
-
|
|
31
28
|
if (typeof Component === 'string') {
|
|
32
29
|
return Component;
|
|
33
30
|
}
|
|
34
|
-
|
|
35
31
|
if (typeof Component === 'function') {
|
|
36
32
|
return getFunctionComponentName(Component, 'Component');
|
|
37
|
-
}
|
|
38
|
-
|
|
33
|
+
}
|
|
39
34
|
|
|
35
|
+
// TypeScript can't have components as objects but they exist in the form of `memo` or `Suspense`
|
|
40
36
|
if (typeof Component === 'object') {
|
|
41
37
|
switch (Component.$$typeof) {
|
|
42
38
|
case ForwardRef:
|
|
43
39
|
return getWrappedName(Component, Component.render, 'ForwardRef');
|
|
44
|
-
|
|
45
40
|
case Memo:
|
|
46
41
|
return getWrappedName(Component, Component.type, 'memo');
|
|
47
|
-
|
|
48
42
|
default:
|
|
49
43
|
return undefined;
|
|
50
44
|
}
|
|
51
45
|
}
|
|
52
|
-
|
|
53
46
|
return undefined;
|
|
54
47
|
}
|
package/modern/index.js
CHANGED
|
@@ -1,66 +1,51 @@
|
|
|
1
1
|
export function getTypeByValue(value) {
|
|
2
2
|
const valueType = typeof value;
|
|
3
|
-
|
|
4
3
|
switch (valueType) {
|
|
5
4
|
case 'number':
|
|
6
5
|
if (Number.isNaN(value)) {
|
|
7
6
|
return 'NaN';
|
|
8
7
|
}
|
|
9
|
-
|
|
10
8
|
if (!Number.isFinite(value)) {
|
|
11
9
|
return 'Infinity';
|
|
12
10
|
}
|
|
13
|
-
|
|
14
11
|
if (value !== Math.floor(value)) {
|
|
15
12
|
return 'float';
|
|
16
13
|
}
|
|
17
|
-
|
|
18
14
|
return 'number';
|
|
19
|
-
|
|
20
15
|
case 'object':
|
|
21
16
|
if (value === null) {
|
|
22
17
|
return 'null';
|
|
23
18
|
}
|
|
24
|
-
|
|
25
19
|
return value.constructor.name;
|
|
26
|
-
|
|
27
20
|
default:
|
|
28
21
|
return valueType;
|
|
29
22
|
}
|
|
30
|
-
}
|
|
23
|
+
}
|
|
31
24
|
|
|
25
|
+
// IE 11 support
|
|
32
26
|
function ponyfillIsInteger(x) {
|
|
33
27
|
// eslint-disable-next-line no-restricted-globals
|
|
34
28
|
return typeof x === 'number' && isFinite(x) && Math.floor(x) === x;
|
|
35
29
|
}
|
|
36
|
-
|
|
37
30
|
const isInteger = Number.isInteger || ponyfillIsInteger;
|
|
38
|
-
|
|
39
31
|
function requiredInteger(props, propName, componentName, location) {
|
|
40
32
|
const propValue = props[propName];
|
|
41
|
-
|
|
42
33
|
if (propValue == null || !isInteger(propValue)) {
|
|
43
34
|
const propType = getTypeByValue(propValue);
|
|
44
35
|
return new RangeError(`Invalid ${location} \`${propName}\` of type \`${propType}\` supplied to \`${componentName}\`, expected \`integer\`.`);
|
|
45
36
|
}
|
|
46
|
-
|
|
47
37
|
return null;
|
|
48
38
|
}
|
|
49
|
-
|
|
50
39
|
function validator(props, propName, ...other) {
|
|
51
40
|
const propValue = props[propName];
|
|
52
|
-
|
|
53
41
|
if (propValue === undefined) {
|
|
54
42
|
return null;
|
|
55
43
|
}
|
|
56
|
-
|
|
57
44
|
return requiredInteger(props, propName, ...other);
|
|
58
45
|
}
|
|
59
|
-
|
|
60
46
|
function validatorNoop() {
|
|
61
47
|
return null;
|
|
62
48
|
}
|
|
63
|
-
|
|
64
49
|
validator.isRequired = requiredInteger;
|
|
65
50
|
validatorNoop.isRequired = validatorNoop;
|
|
66
51
|
export default process.env.NODE_ENV === 'production' ? validatorNoop : validator;
|
|
@@ -2,29 +2,23 @@ import _extends from "@babel/runtime/helpers/esm/extends";
|
|
|
2
2
|
export default function requirePropFactory(componentNameInError, Component) {
|
|
3
3
|
if (process.env.NODE_ENV === 'production') {
|
|
4
4
|
return () => null;
|
|
5
|
-
}
|
|
6
|
-
|
|
5
|
+
}
|
|
7
6
|
|
|
7
|
+
// eslint-disable-next-line react/forbid-foreign-prop-types
|
|
8
8
|
const prevPropTypes = Component ? _extends({}, Component.propTypes) : null;
|
|
9
|
-
|
|
10
9
|
const requireProp = requiredProp => (props, propName, componentName, location, propFullName, ...args) => {
|
|
11
10
|
const propFullNameSafe = propFullName || propName;
|
|
12
11
|
const defaultTypeChecker = prevPropTypes?.[propFullNameSafe];
|
|
13
|
-
|
|
14
12
|
if (defaultTypeChecker) {
|
|
15
13
|
const typeCheckerResult = defaultTypeChecker(props, propName, componentName, location, propFullName, ...args);
|
|
16
|
-
|
|
17
14
|
if (typeCheckerResult) {
|
|
18
15
|
return typeCheckerResult;
|
|
19
16
|
}
|
|
20
17
|
}
|
|
21
|
-
|
|
22
18
|
if (typeof props[propName] !== 'undefined' && !props[requiredProp]) {
|
|
23
19
|
return new Error(`The prop \`${propFullNameSafe}\` of ` + `\`${componentNameInError}\` can only be used together with the \`${requiredProp}\` prop.`);
|
|
24
20
|
}
|
|
25
|
-
|
|
26
21
|
return null;
|
|
27
22
|
};
|
|
28
|
-
|
|
29
23
|
return requireProp;
|
|
30
24
|
}
|
package/modern/resolveProps.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
-
|
|
3
2
|
/**
|
|
4
3
|
* Add keys, values of `defaultProps` that does not exist in `props`
|
|
5
4
|
* @param {object} defaultProps
|
|
@@ -8,7 +7,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
|
|
|
8
7
|
*/
|
|
9
8
|
export default function resolveProps(defaultProps, props) {
|
|
10
9
|
const output = _extends({}, props);
|
|
11
|
-
|
|
12
10
|
Object.keys(defaultProps).forEach(propName => {
|
|
13
11
|
if (output[propName] === undefined) {
|
|
14
12
|
output[propName] = defaultProps[propName];
|
package/modern/scrollLeft.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
// Source from https://github.com/alitaheri/normalize-scroll-left
|
|
2
2
|
let cachedType;
|
|
3
|
+
|
|
3
4
|
/**
|
|
4
5
|
* Based on the jquery plugin https://github.com/othree/jquery.rtl-scroll-type
|
|
5
6
|
*
|
|
@@ -19,12 +20,10 @@ let cachedType;
|
|
|
19
20
|
*
|
|
20
21
|
* spec* https://drafts.csswg.org/cssom-view/#dom-window-scroll
|
|
21
22
|
*/
|
|
22
|
-
|
|
23
23
|
export function detectScrollType() {
|
|
24
24
|
if (cachedType) {
|
|
25
25
|
return cachedType;
|
|
26
26
|
}
|
|
27
|
-
|
|
28
27
|
const dummy = document.createElement('div');
|
|
29
28
|
const container = document.createElement('div');
|
|
30
29
|
container.style.width = '10px';
|
|
@@ -39,37 +38,32 @@ export function detectScrollType() {
|
|
|
39
38
|
dummy.style.overflow = 'scroll';
|
|
40
39
|
document.body.appendChild(dummy);
|
|
41
40
|
cachedType = 'reverse';
|
|
42
|
-
|
|
43
41
|
if (dummy.scrollLeft > 0) {
|
|
44
42
|
cachedType = 'default';
|
|
45
43
|
} else {
|
|
46
44
|
dummy.scrollLeft = 1;
|
|
47
|
-
|
|
48
45
|
if (dummy.scrollLeft === 0) {
|
|
49
46
|
cachedType = 'negative';
|
|
50
47
|
}
|
|
51
48
|
}
|
|
52
|
-
|
|
53
49
|
document.body.removeChild(dummy);
|
|
54
50
|
return cachedType;
|
|
55
|
-
}
|
|
51
|
+
}
|
|
56
52
|
|
|
53
|
+
// Based on https://stackoverflow.com/a/24394376
|
|
57
54
|
export function getNormalizedScrollLeft(element, direction) {
|
|
58
|
-
const scrollLeft = element.scrollLeft;
|
|
55
|
+
const scrollLeft = element.scrollLeft;
|
|
59
56
|
|
|
57
|
+
// Perform the calculations only when direction is rtl to avoid messing up the ltr behavior
|
|
60
58
|
if (direction !== 'rtl') {
|
|
61
59
|
return scrollLeft;
|
|
62
60
|
}
|
|
63
|
-
|
|
64
61
|
const type = detectScrollType();
|
|
65
|
-
|
|
66
62
|
switch (type) {
|
|
67
63
|
case 'negative':
|
|
68
64
|
return element.scrollWidth - element.clientWidth + scrollLeft;
|
|
69
|
-
|
|
70
65
|
case 'reverse':
|
|
71
66
|
return element.scrollWidth - element.clientWidth - scrollLeft;
|
|
72
|
-
|
|
73
67
|
default:
|
|
74
68
|
return scrollLeft;
|
|
75
69
|
}
|
|
@@ -2,12 +2,9 @@ export default function unsupportedProp(props, propName, componentName, location
|
|
|
2
2
|
if (process.env.NODE_ENV === 'production') {
|
|
3
3
|
return null;
|
|
4
4
|
}
|
|
5
|
-
|
|
6
5
|
const propFullNameSafe = propFullName || propName;
|
|
7
|
-
|
|
8
6
|
if (typeof props[propName] !== 'undefined') {
|
|
9
7
|
return new Error(`The prop \`${propFullNameSafe}\` is not supported. Please remove it.`);
|
|
10
8
|
}
|
|
11
|
-
|
|
12
9
|
return null;
|
|
13
10
|
}
|
package/modern/useControlled.js
CHANGED
|
@@ -12,7 +12,6 @@ export default function useControlled({
|
|
|
12
12
|
} = React.useRef(controlled !== undefined);
|
|
13
13
|
const [valueState, setValue] = React.useState(defaultProp);
|
|
14
14
|
const value = isControlled ? controlled : valueState;
|
|
15
|
-
|
|
16
15
|
if (process.env.NODE_ENV !== 'production') {
|
|
17
16
|
React.useEffect(() => {
|
|
18
17
|
if (isControlled !== (controlled !== undefined)) {
|
|
@@ -28,7 +27,6 @@ export default function useControlled({
|
|
|
28
27
|
}
|
|
29
28
|
}, [JSON.stringify(defaultProp)]);
|
|
30
29
|
}
|
|
31
|
-
|
|
32
30
|
const setValueIfUncontrolled = React.useCallback(newValue => {
|
|
33
31
|
if (!isControlled) {
|
|
34
32
|
setValue(newValue);
|
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import useEnhancedEffect from './useEnhancedEffect';
|
|
3
|
+
|
|
3
4
|
/**
|
|
4
5
|
* https://github.com/facebook/react/issues/14099#issuecomment-440013892
|
|
5
6
|
*/
|
|
6
|
-
|
|
7
7
|
export default function useEventCallback(fn) {
|
|
8
8
|
const ref = React.useRef(fn);
|
|
9
9
|
useEnhancedEffect(() => {
|
|
10
10
|
ref.current = fn;
|
|
11
11
|
});
|
|
12
|
-
return React.useCallback((...args) =>
|
|
12
|
+
return React.useCallback((...args) =>
|
|
13
|
+
// @ts-expect-error hide `this`
|
|
13
14
|
// tslint:disable-next-line:ban-comma-operator
|
|
14
15
|
(0, ref.current)(...args), []);
|
|
15
16
|
}
|
package/modern/useForkRef.js
CHANGED
|
@@ -10,11 +10,11 @@ export default function useForkRef(...refs) {
|
|
|
10
10
|
if (refs.every(ref => ref == null)) {
|
|
11
11
|
return null;
|
|
12
12
|
}
|
|
13
|
-
|
|
14
13
|
return instance => {
|
|
15
14
|
refs.forEach(ref => {
|
|
16
15
|
setRef(ref, instance);
|
|
17
16
|
});
|
|
18
|
-
};
|
|
17
|
+
};
|
|
18
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
19
19
|
}, refs);
|
|
20
20
|
}
|
package/modern/useId.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
let globalId = 0;
|
|
3
|
-
|
|
4
3
|
function useGlobalId(idOverride) {
|
|
5
4
|
const [defaultId, setDefaultId] = React.useState(idOverride);
|
|
6
5
|
const id = idOverride || defaultId;
|
|
@@ -15,9 +14,9 @@ function useGlobalId(idOverride) {
|
|
|
15
14
|
}
|
|
16
15
|
}, [defaultId]);
|
|
17
16
|
return id;
|
|
18
|
-
}
|
|
19
|
-
|
|
17
|
+
}
|
|
20
18
|
|
|
19
|
+
// eslint-disable-next-line no-useless-concat -- Workaround for https://github.com/webpack/webpack/issues/14814
|
|
21
20
|
const maybeReactUseId = React['useId' + ''];
|
|
22
21
|
/**
|
|
23
22
|
*
|
|
@@ -25,13 +24,11 @@ const maybeReactUseId = React['useId' + ''];
|
|
|
25
24
|
* @param idOverride
|
|
26
25
|
* @returns {string}
|
|
27
26
|
*/
|
|
28
|
-
|
|
29
27
|
export default function useId(idOverride) {
|
|
30
28
|
if (maybeReactUseId !== undefined) {
|
|
31
29
|
const reactId = maybeReactUseId();
|
|
32
30
|
return idOverride ?? reactId;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
|
|
31
|
+
}
|
|
32
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks -- `React.useId` is invariant at runtime.
|
|
36
33
|
return useGlobalId(idOverride);
|
|
37
34
|
}
|
|
@@ -18,6 +18,7 @@ const inputTypesWhitelist = {
|
|
|
18
18
|
datetime: true,
|
|
19
19
|
'datetime-local': true
|
|
20
20
|
};
|
|
21
|
+
|
|
21
22
|
/**
|
|
22
23
|
* Computes whether the given element should automatically trigger the
|
|
23
24
|
* `focus-visible` class being added, i.e. whether it should always match
|
|
@@ -25,27 +26,23 @@ const inputTypesWhitelist = {
|
|
|
25
26
|
* @param {Element} node
|
|
26
27
|
* @returns {boolean}
|
|
27
28
|
*/
|
|
28
|
-
|
|
29
29
|
function focusTriggersKeyboardModality(node) {
|
|
30
30
|
const {
|
|
31
31
|
type,
|
|
32
32
|
tagName
|
|
33
33
|
} = node;
|
|
34
|
-
|
|
35
34
|
if (tagName === 'INPUT' && inputTypesWhitelist[type] && !node.readOnly) {
|
|
36
35
|
return true;
|
|
37
36
|
}
|
|
38
|
-
|
|
39
37
|
if (tagName === 'TEXTAREA' && !node.readOnly) {
|
|
40
38
|
return true;
|
|
41
39
|
}
|
|
42
|
-
|
|
43
40
|
if (node.isContentEditable) {
|
|
44
41
|
return true;
|
|
45
42
|
}
|
|
46
|
-
|
|
47
43
|
return false;
|
|
48
44
|
}
|
|
45
|
+
|
|
49
46
|
/**
|
|
50
47
|
* Keep track of our keyboard modality state with `hadKeyboardEvent`.
|
|
51
48
|
* If the most recent user interaction was via the keyboard;
|
|
@@ -53,15 +50,13 @@ function focusTriggersKeyboardModality(node) {
|
|
|
53
50
|
* then the modality is keyboard. Otherwise, the modality is not keyboard.
|
|
54
51
|
* @param {KeyboardEvent} event
|
|
55
52
|
*/
|
|
56
|
-
|
|
57
|
-
|
|
58
53
|
function handleKeyDown(event) {
|
|
59
54
|
if (event.metaKey || event.altKey || event.ctrlKey) {
|
|
60
55
|
return;
|
|
61
56
|
}
|
|
62
|
-
|
|
63
57
|
hadKeyboardEvent = true;
|
|
64
58
|
}
|
|
59
|
+
|
|
65
60
|
/**
|
|
66
61
|
* If at any point a user clicks with a pointing device, ensure that we change
|
|
67
62
|
* the modality away from keyboard.
|
|
@@ -69,12 +64,9 @@ function handleKeyDown(event) {
|
|
|
69
64
|
* element, and then clicks on a different element, focusing it with a
|
|
70
65
|
* pointing device, while we still think we're in keyboard modality.
|
|
71
66
|
*/
|
|
72
|
-
|
|
73
|
-
|
|
74
67
|
function handlePointerDown() {
|
|
75
68
|
hadKeyboardEvent = false;
|
|
76
69
|
}
|
|
77
|
-
|
|
78
70
|
function handleVisibilityChange() {
|
|
79
71
|
if (this.visibilityState === 'hidden') {
|
|
80
72
|
// If the tab becomes active again, the browser will handle calling focus
|
|
@@ -86,7 +78,6 @@ function handleVisibilityChange() {
|
|
|
86
78
|
}
|
|
87
79
|
}
|
|
88
80
|
}
|
|
89
|
-
|
|
90
81
|
function prepare(doc) {
|
|
91
82
|
doc.addEventListener('keydown', handleKeyDown, true);
|
|
92
83
|
doc.addEventListener('mousedown', handlePointerDown, true);
|
|
@@ -94,7 +85,6 @@ function prepare(doc) {
|
|
|
94
85
|
doc.addEventListener('touchstart', handlePointerDown, true);
|
|
95
86
|
doc.addEventListener('visibilitychange', handleVisibilityChange, true);
|
|
96
87
|
}
|
|
97
|
-
|
|
98
88
|
export function teardown(doc) {
|
|
99
89
|
doc.removeEventListener('keydown', handleKeyDown, true);
|
|
100
90
|
doc.removeEventListener('mousedown', handlePointerDown, true);
|
|
@@ -102,25 +92,23 @@ export function teardown(doc) {
|
|
|
102
92
|
doc.removeEventListener('touchstart', handlePointerDown, true);
|
|
103
93
|
doc.removeEventListener('visibilitychange', handleVisibilityChange, true);
|
|
104
94
|
}
|
|
105
|
-
|
|
106
95
|
function isFocusVisible(event) {
|
|
107
96
|
const {
|
|
108
97
|
target
|
|
109
98
|
} = event;
|
|
110
|
-
|
|
111
99
|
try {
|
|
112
100
|
return target.matches(':focus-visible');
|
|
113
|
-
} catch (error) {
|
|
101
|
+
} catch (error) {
|
|
102
|
+
// Browsers not implementing :focus-visible will throw a SyntaxError.
|
|
114
103
|
// We use our own heuristic for those browsers.
|
|
115
104
|
// Rethrow might be better if it's not the expected error but do we really
|
|
116
105
|
// want to crash if focus-visible malfunctioned?
|
|
117
|
-
}
|
|
118
|
-
// focusable events only.
|
|
119
|
-
|
|
106
|
+
}
|
|
120
107
|
|
|
108
|
+
// No need for validFocusTarget check. The user does that by attaching it to
|
|
109
|
+
// focusable events only.
|
|
121
110
|
return hadKeyboardEvent || focusTriggersKeyboardModality(target);
|
|
122
111
|
}
|
|
123
|
-
|
|
124
112
|
export default function useIsFocusVisible() {
|
|
125
113
|
const ref = React.useCallback(node => {
|
|
126
114
|
if (node != null) {
|
|
@@ -128,10 +116,10 @@ export default function useIsFocusVisible() {
|
|
|
128
116
|
}
|
|
129
117
|
}, []);
|
|
130
118
|
const isFocusVisibleRef = React.useRef(false);
|
|
119
|
+
|
|
131
120
|
/**
|
|
132
121
|
* Should be called if a blur event is fired
|
|
133
122
|
*/
|
|
134
|
-
|
|
135
123
|
function handleBlurVisible() {
|
|
136
124
|
// checking against potential state variable does not suffice if we focus and blur synchronously.
|
|
137
125
|
// React wouldn't have time to trigger a re-render so `focusVisible` would be stale.
|
|
@@ -151,23 +139,19 @@ export default function useIsFocusVisible() {
|
|
|
151
139
|
isFocusVisibleRef.current = false;
|
|
152
140
|
return true;
|
|
153
141
|
}
|
|
154
|
-
|
|
155
142
|
return false;
|
|
156
143
|
}
|
|
144
|
+
|
|
157
145
|
/**
|
|
158
146
|
* Should be called if a blur event is fired
|
|
159
147
|
*/
|
|
160
|
-
|
|
161
|
-
|
|
162
148
|
function handleFocusVisible(event) {
|
|
163
149
|
if (isFocusVisible(event)) {
|
|
164
150
|
isFocusVisibleRef.current = true;
|
|
165
151
|
return true;
|
|
166
152
|
}
|
|
167
|
-
|
|
168
153
|
return false;
|
|
169
154
|
}
|
|
170
|
-
|
|
171
155
|
return {
|
|
172
156
|
isFocusVisibleRef,
|
|
173
157
|
onFocus: handleFocusVisible,
|
package/ownerDocument.js
CHANGED
package/ownerWindow.js
CHANGED
|
@@ -1,14 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.default = ownerWindow;
|
|
9
|
-
|
|
10
8
|
var _ownerDocument = _interopRequireDefault(require("./ownerDocument"));
|
|
11
|
-
|
|
12
9
|
function ownerWindow(node) {
|
|
13
10
|
const doc = (0, _ownerDocument.default)(node);
|
|
14
11
|
return doc.defaultView || window;
|