@fluentui/react-utilities 0.0.0-nightly-20230425-0423.1 → 0.0.0-nightly-20230427-0418.1
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.json +5 -5
- package/CHANGELOG.md +5 -5
- package/lib/hooks/useControllableState.js +3 -22
- package/lib/hooks/useControllableState.js.map +1 -1
- package/lib-commonjs/hooks/useControllableState.js +8 -26
- package/lib-commonjs/hooks/useControllableState.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.json
CHANGED
@@ -2,9 +2,9 @@
|
|
2
2
|
"name": "@fluentui/react-utilities",
|
3
3
|
"entries": [
|
4
4
|
{
|
5
|
-
"date": "
|
6
|
-
"tag": "@fluentui/react-utilities_v0.0.0-nightly-
|
7
|
-
"version": "0.0.0-nightly-
|
5
|
+
"date": "Thu, 27 Apr 2023 04:23:18 GMT",
|
6
|
+
"tag": "@fluentui/react-utilities_v0.0.0-nightly-20230427-0418.1",
|
7
|
+
"version": "0.0.0-nightly-20230427-0418.1",
|
8
8
|
"comments": {
|
9
9
|
"prerelease": [
|
10
10
|
{
|
@@ -16,8 +16,8 @@
|
|
16
16
|
{
|
17
17
|
"author": "beachball",
|
18
18
|
"package": "@fluentui/react-utilities",
|
19
|
-
"comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-
|
20
|
-
"commit": "
|
19
|
+
"comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230427-0418.1",
|
20
|
+
"commit": "a9e0a4f587386948c891437cdbe3b10437aa9485"
|
21
21
|
}
|
22
22
|
]
|
23
23
|
}
|
package/CHANGELOG.md
CHANGED
@@ -1,18 +1,18 @@
|
|
1
1
|
# Change Log - @fluentui/react-utilities
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Thu, 27 Apr 2023 04:23:18 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
-
## [0.0.0-nightly-
|
7
|
+
## [0.0.0-nightly-20230427-0418.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v0.0.0-nightly-20230427-0418.1)
|
8
8
|
|
9
|
-
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.8.0..@fluentui/react-utilities_v0.0.0-nightly-
|
9
|
+
Thu, 27 Apr 2023 04:23:18 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.8.0..@fluentui/react-utilities_v0.0.0-nightly-20230427-0418.1)
|
11
11
|
|
12
12
|
### Changes
|
13
13
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
15
|
-
- Bump @fluentui/keyboard-keys to v0.0.0-nightly-
|
15
|
+
- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230427-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/a9e0a4f587386948c891437cdbe3b10437aa9485) by beachball)
|
16
16
|
|
17
17
|
## [9.8.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.8.0)
|
18
18
|
|
@@ -1,7 +1,4 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
function isFactoryDispatch(newState) {
|
3
|
-
return typeof newState === 'function';
|
4
|
-
}
|
5
2
|
/**
|
6
3
|
* @internal
|
7
4
|
*
|
@@ -19,28 +16,12 @@ function isFactoryDispatch(newState) {
|
|
19
16
|
* @see https://reactjs.org/docs/uncontrolled-components.html
|
20
17
|
*/
|
21
18
|
export const useControllableState = options => {
|
22
|
-
const isControlled = useIsControlled(options.state);
|
23
19
|
const initialState = typeof options.defaultState === 'undefined' ? options.initialState : options.defaultState;
|
24
20
|
const [internalState, setInternalState] = React.useState(initialState);
|
25
|
-
|
26
|
-
const stateRef = React.useRef(state);
|
27
|
-
React.useEffect(() => {
|
28
|
-
stateRef.current = state;
|
29
|
-
}, [state]);
|
30
|
-
// To match the behavior of the setter returned by React.useState, this callback's identity
|
31
|
-
// should never change. This means it MUST NOT directly reference variables that can change.
|
32
|
-
const setState = React.useCallback(newState => {
|
33
|
-
// React dispatch can use a factory
|
34
|
-
// https://reactjs.org/docs/hooks-reference.html#functional-updates
|
35
|
-
if (isFactoryDispatch(newState)) {
|
36
|
-
stateRef.current = newState(stateRef.current);
|
37
|
-
} else {
|
38
|
-
stateRef.current = newState;
|
39
|
-
}
|
40
|
-
setInternalState(stateRef.current);
|
41
|
-
}, []);
|
42
|
-
return [state, setState];
|
21
|
+
return useIsControlled(options.state) ? [options.state, noop] : [internalState, setInternalState];
|
43
22
|
};
|
23
|
+
function noop() {
|
24
|
+
/* noop */}
|
44
25
|
/**
|
45
26
|
* Helper hook to handle previous comparison of controlled/uncontrolled
|
46
27
|
* Prints an error when isControlled value switches between subsequent renders
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["React","
|
1
|
+
{"version":3,"names":["React","useControllableState","options","initialState","defaultState","internalState","setInternalState","useState","useIsControlled","state","noop","controlledValue","isControlled","undefined","process","env","NODE_ENV","useEffect","error","Error","controlWarning","undefinedWarning","console","stack","join"],"sources":["../../src/hooks/useControllableState.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * @internal\n */\nexport type UseControllableStateOptions<State> = {\n /**\n * User-provided default state or initializer, for uncontrolled usage.\n */\n defaultState?: State | (() => State);\n /**\n * User-provided controlled state. `undefined` means internal state will be used.\n */\n state: State | undefined;\n /**\n * Used as the initial state if `state` and `defaultState` are both `undefined`.\n * If `undefined` is the correct initial state, pass that here.\n */\n initialState: State;\n};\n\n/**\n * @internal\n *\n * A `useState`-like hook to manage a value that could be either controlled or uncontrolled,\n * such as a checked state or text input string.\n *\n * Unlike `setState`, it's okay to call the returned updater (dispatch) function for either a\n * controlled or uncontrolled component. Calls will only be respected if the component is uncontrolled.\n *\n * @returns Same as [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate): an array\n * of the current value and an updater (dispatch) function. The updater function is referentially\n * stable (won't change during the component's lifecycle). It can take either a new value, or a\n * function which is passed the previous value and returns the new value. Unlike `setState`, calls\n * to the updater function will only be respected if the component is uncontrolled.\n * @see https://reactjs.org/docs/uncontrolled-components.html\n */\nexport const useControllableState = <State>(\n options: UseControllableStateOptions<State>,\n): [State, React.Dispatch<React.SetStateAction<State>>] => {\n const initialState = typeof options.defaultState === 'undefined' ? options.initialState : options.defaultState;\n const [internalState, setInternalState] = React.useState<State>(initialState);\n return useIsControlled(options.state) ? [options.state, noop] : [internalState, setInternalState];\n};\n\nfunction noop() {\n /* noop */\n}\n\n/**\n * Helper hook to handle previous comparison of controlled/uncontrolled\n * Prints an error when isControlled value switches between subsequent renders\n * @returns - whether the value is controlled\n */\nconst useIsControlled = <V>(controlledValue?: V): controlledValue is V => {\n const [isControlled] = React.useState<boolean>(() => controlledValue !== undefined);\n\n if (process.env.NODE_ENV !== 'production') {\n // We don't want these warnings in production even though it is against native behaviour\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (isControlled !== (controlledValue !== undefined)) {\n const error = new Error();\n\n const controlWarning = isControlled\n ? 'a controlled value to be uncontrolled'\n : 'an uncontrolled value to be controlled';\n\n const undefinedWarning = isControlled ? 'defined to an undefined' : 'undefined to a defined';\n\n // eslint-disable-next-line no-console\n console.error(\n [\n // Default react error\n 'A component is changing ' + controlWarning + '. This is likely caused by the value',\n 'changing from ' + undefinedWarning + ' value, which should not happen.',\n 'Decide between using a controlled or uncontrolled input element for the lifetime of the component.',\n 'More info: https://reactjs.org/link/controlled-components',\n error.stack,\n ].join(' '),\n );\n }\n }, [isControlled, controlledValue]);\n }\n\n return isControlled;\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAqBvB;;;;;;;;;;;;;;;;AAgBA,OAAO,MAAMC,oBAAA,GACXC,OAAA,IACyD;EACzD,MAAMC,YAAA,GAAe,OAAOD,OAAA,CAAQE,YAAY,KAAK,cAAcF,OAAA,CAAQC,YAAY,GAAGD,OAAA,CAAQE,YAAY;EAC9G,MAAM,CAACC,aAAA,EAAeC,gBAAA,CAAiB,GAAGN,KAAA,CAAMO,QAAQ,CAAQJ,YAAA;EAChE,OAAOK,eAAA,CAAgBN,OAAA,CAAQO,KAAK,IAAI,CAACP,OAAA,CAAQO,KAAK,EAAEC,IAAA,CAAK,GAAG,CAACL,aAAA,EAAeC,gBAAA,CAAiB;AACnG;AAEA,SAASI,KAAA,EAAO;EACd;AAGF;;;;;AAKA,MAAMF,eAAA,GAAsBG,eAAA,IAA8C;EACxE,MAAM,CAACC,YAAA,CAAa,GAAGZ,KAAA,CAAMO,QAAQ,CAAU,MAAMI,eAAA,KAAoBE,SAAA;EAEzE,IAAIC,OAAA,CAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzC;IACA;IACAhB,KAAA,CAAMiB,SAAS,CAAC,MAAM;MACpB,IAAIL,YAAA,MAAkBD,eAAA,KAAoBE,SAAQ,GAAI;QACpD,MAAMK,KAAA,GAAQ,IAAIC,KAAA;QAElB,MAAMC,cAAA,GAAiBR,YAAA,GACnB,0CACA,wCAAwC;QAE5C,MAAMS,gBAAA,GAAmBT,YAAA,GAAe,4BAA4B,wBAAwB;QAE5F;QACAU,OAAA,CAAQJ,KAAK,CACX;QACE;QACA,6BAA6BE,cAAA,GAAiB,wCAC9C,mBAAmBC,gBAAA,GAAmB,oCACtC,sGACA,6DACAH,KAAA,CAAMK,KAAK,CACZ,CAACC,IAAI,CAAC;MAEX;IACF,GAAG,CAACZ,YAAA,EAAcD,eAAA,CAAgB;EACpC;EAEA,OAAOC,YAAA;AACT"}
|
@@ -8,37 +8,19 @@ Object.defineProperty(exports, "useControllableState", {
|
|
8
8
|
});
|
9
9
|
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
10
10
|
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
11
|
-
function isFactoryDispatch(newState) {
|
12
|
-
return typeof newState === 'function';
|
13
|
-
}
|
14
11
|
const useControllableState = (options)=>{
|
15
|
-
const isControlled = useIsControlled(options.state);
|
16
12
|
const initialState = typeof options.defaultState === 'undefined' ? options.initialState : options.defaultState;
|
17
13
|
const [internalState, setInternalState] = _react.useState(initialState);
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
]);
|
25
|
-
// To match the behavior of the setter returned by React.useState, this callback's identity
|
26
|
-
// should never change. This means it MUST NOT directly reference variables that can change.
|
27
|
-
const setState = _react.useCallback((newState)=>{
|
28
|
-
// React dispatch can use a factory
|
29
|
-
// https://reactjs.org/docs/hooks-reference.html#functional-updates
|
30
|
-
if (isFactoryDispatch(newState)) {
|
31
|
-
stateRef.current = newState(stateRef.current);
|
32
|
-
} else {
|
33
|
-
stateRef.current = newState;
|
34
|
-
}
|
35
|
-
setInternalState(stateRef.current);
|
36
|
-
}, []);
|
37
|
-
return [
|
38
|
-
state,
|
39
|
-
setState
|
14
|
+
return useIsControlled(options.state) ? [
|
15
|
+
options.state,
|
16
|
+
noop
|
17
|
+
] : [
|
18
|
+
internalState,
|
19
|
+
setInternalState
|
40
20
|
];
|
41
21
|
};
|
22
|
+
function noop() {
|
23
|
+
/* noop */ }
|
42
24
|
/**
|
43
25
|
* Helper hook to handle previous comparison of controlled/uncontrolled
|
44
26
|
* Prints an error when isControlled value switches between subsequent renders
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../lib/hooks/useControllableState.js"],"sourcesContent":["import * as React from 'react';\
|
1
|
+
{"version":3,"sources":["../../lib/hooks/useControllableState.js"],"sourcesContent":["import * as React from 'react';\n/**\n * @internal\n *\n * A `useState`-like hook to manage a value that could be either controlled or uncontrolled,\n * such as a checked state or text input string.\n *\n * Unlike `setState`, it's okay to call the returned updater (dispatch) function for either a\n * controlled or uncontrolled component. Calls will only be respected if the component is uncontrolled.\n *\n * @returns Same as [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate): an array\n * of the current value and an updater (dispatch) function. The updater function is referentially\n * stable (won't change during the component's lifecycle). It can take either a new value, or a\n * function which is passed the previous value and returns the new value. Unlike `setState`, calls\n * to the updater function will only be respected if the component is uncontrolled.\n * @see https://reactjs.org/docs/uncontrolled-components.html\n */\nexport const useControllableState = options => {\n const initialState = typeof options.defaultState === 'undefined' ? options.initialState : options.defaultState;\n const [internalState, setInternalState] = React.useState(initialState);\n return useIsControlled(options.state) ? [options.state, noop] : [internalState, setInternalState];\n};\nfunction noop() {\n /* noop */}\n/**\n * Helper hook to handle previous comparison of controlled/uncontrolled\n * Prints an error when isControlled value switches between subsequent renders\n * @returns - whether the value is controlled\n */\nconst useIsControlled = controlledValue => {\n const [isControlled] = React.useState(() => controlledValue !== undefined);\n if (process.env.NODE_ENV !== 'production') {\n // We don't want these warnings in production even though it is against native behaviour\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (isControlled !== (controlledValue !== undefined)) {\n const error = new Error();\n const controlWarning = isControlled ? 'a controlled value to be uncontrolled' : 'an uncontrolled value to be controlled';\n const undefinedWarning = isControlled ? 'defined to an undefined' : 'undefined to a defined';\n // eslint-disable-next-line no-console\n console.error([\n // Default react error\n 'A component is changing ' + controlWarning + '. This is likely caused by the value', 'changing from ' + undefinedWarning + ' value, which should not happen.', 'Decide between using a controlled or uncontrolled input element for the lifetime of the component.', 'More info: https://reactjs.org/link/controlled-components', error.stack].join(' '));\n }\n }, [isControlled, controlledValue]);\n }\n return isControlled;\n};\n//# sourceMappingURL=useControllableState.js.map"],"names":["useControllableState","options","initialState","defaultState","internalState","setInternalState","React","useState","useIsControlled","state","noop","controlledValue","isControlled","undefined","process","env","NODE_ENV","useEffect","error","Error","controlWarning","undefinedWarning","console","stack","join"],"mappings":";;;;+BAiBaA;;aAAAA;;;6DAjBU;AAiBhB,MAAMA,uBAAuBC,CAAAA,UAAW;IAC7C,MAAMC,eAAe,OAAOD,QAAQE,YAAY,KAAK,cAAcF,QAAQC,YAAY,GAAGD,QAAQE,YAAY;IAC9G,MAAM,CAACC,eAAeC,iBAAiB,GAAGC,OAAMC,QAAQ,CAACL;IACzD,OAAOM,gBAAgBP,QAAQQ,KAAK,IAAI;QAACR,QAAQQ,KAAK;QAAEC;KAAK,GAAG;QAACN;QAAeC;KAAiB;AACnG;AACA,SAASK,OAAO;AACd,QAAQ,GAAE;AACZ;;;;CAIC,GACD,MAAMF,kBAAkBG,CAAAA,kBAAmB;IACzC,MAAM,CAACC,aAAa,GAAGN,OAAMC,QAAQ,CAAC,IAAMI,oBAAoBE;IAChE,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,wFAAwF;QACxF,sDAAsD;QACtDV,OAAMW,SAAS,CAAC,IAAM;YACpB,IAAIL,iBAAkBD,CAAAA,oBAAoBE,SAAQ,GAAI;gBACpD,MAAMK,QAAQ,IAAIC;gBAClB,MAAMC,iBAAiBR,eAAe,0CAA0C,wCAAwC;gBACxH,MAAMS,mBAAmBT,eAAe,4BAA4B,wBAAwB;gBAC5F,sCAAsC;gBACtCU,QAAQJ,KAAK,CAAC;oBACd,sBAAsB;oBACtB,6BAA6BE,iBAAiB;oBAAwC,mBAAmBC,mBAAmB;oBAAoC;oBAAsG;oBAA6DH,MAAMK,KAAK;iBAAC,CAACC,IAAI,CAAC;YACvV,CAAC;QACH,GAAG;YAACZ;YAAcD;SAAgB;IACpC,CAAC;IACD,OAAOC;AACT,GACA,gDAAgD"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-utilities",
|
3
|
-
"version": "0.0.0-nightly-
|
3
|
+
"version": "0.0.0-nightly-20230427-0418.1",
|
4
4
|
"description": "A set of general React-specific utilities.",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
@@ -28,7 +28,7 @@
|
|
28
28
|
"@fluentui/scripts-tasks": "*"
|
29
29
|
},
|
30
30
|
"dependencies": {
|
31
|
-
"@fluentui/keyboard-keys": "0.0.0-nightly-
|
31
|
+
"@fluentui/keyboard-keys": "0.0.0-nightly-20230427-0418.1",
|
32
32
|
"@swc/helpers": "^0.4.14"
|
33
33
|
},
|
34
34
|
"peerDependencies": {
|