@fluentui/react-utilities 0.0.0-nightlyd3bf09bf8120211201.1 → 0.0.0-nightlyebf02572f720211207.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 +20 -6
- package/CHANGELOG.md +7 -6
- package/dist/react-utilities.d.ts +20 -30
- package/lib/compose/getSlots.d.ts +4 -2
- package/lib/compose/getSlots.js +4 -2
- package/lib/compose/getSlots.js.map +1 -1
- package/lib/hooks/index.d.ts +0 -1
- package/lib/hooks/index.js +0 -1
- package/lib/hooks/index.js.map +1 -1
- package/lib/hooks/useControllableState.d.ts +16 -6
- package/lib/hooks/useControllableState.js +13 -8
- package/lib/hooks/useControllableState.js.map +1 -1
- package/lib-commonjs/compose/getSlots.d.ts +4 -2
- package/lib-commonjs/compose/getSlots.js +4 -2
- package/lib-commonjs/compose/getSlots.js.map +1 -1
- package/lib-commonjs/hooks/index.d.ts +0 -1
- package/lib-commonjs/hooks/index.js +0 -2
- package/lib-commonjs/hooks/index.js.map +1 -1
- package/lib-commonjs/hooks/useControllableState.d.ts +16 -6
- package/lib-commonjs/hooks/useControllableState.js +13 -8
- package/lib-commonjs/hooks/useControllableState.js.map +1 -1
- package/package.json +2 -2
- package/lib/hooks/useControllableValue.d.ts +0 -20
- package/lib/hooks/useControllableValue.js +0 -57
- package/lib/hooks/useControllableValue.js.map +0 -1
- package/lib-commonjs/hooks/useControllableValue.d.ts +0 -20
- package/lib-commonjs/hooks/useControllableValue.js +0 -68
- package/lib-commonjs/hooks/useControllableValue.js.map +0 -1
package/CHANGELOG.json
CHANGED
@@ -2,22 +2,36 @@
|
|
2
2
|
"name": "@fluentui/react-utilities",
|
3
3
|
"entries": [
|
4
4
|
{
|
5
|
-
"date": "
|
6
|
-
"tag": "@fluentui/react-utilities_v0.0.0-
|
7
|
-
"version": "0.0.0-
|
5
|
+
"date": "Tue, 07 Dec 2021 04:14:30 GMT",
|
6
|
+
"tag": "@fluentui/react-utilities_v0.0.0-nightlyebf02572f720211207.1",
|
7
|
+
"version": "0.0.0-nightlyebf02572f720211207.1",
|
8
8
|
"comments": {
|
9
9
|
"prerelease": [
|
10
10
|
{
|
11
11
|
"author": "email not defined",
|
12
12
|
"package": "@fluentui/react-utilities",
|
13
|
-
"commit": "
|
13
|
+
"commit": "2523b8c9da23ec860780244563814b63ba963043",
|
14
14
|
"comment": "Release nightly v9"
|
15
15
|
},
|
16
|
+
{
|
17
|
+
"author": "elcraig@microsoft.com",
|
18
|
+
"package": "@fluentui/react-utilities",
|
19
|
+
"commit": "39ce3cbcf15ce2619649e1eddccf932736ceac07",
|
20
|
+
"comment": "[breaking] Remove useControllableValue hook (use useControllableState instead)"
|
21
|
+
},
|
16
22
|
{
|
17
23
|
"author": "beachball",
|
18
24
|
"package": "@fluentui/react-utilities",
|
19
|
-
"comment": "Bump @fluentui/keyboard-keys to v0.0.0-
|
20
|
-
"commit": "
|
25
|
+
"comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightlyebf02572f720211207.1",
|
26
|
+
"commit": "2523b8c9da23ec860780244563814b63ba963043"
|
27
|
+
}
|
28
|
+
],
|
29
|
+
"none": [
|
30
|
+
{
|
31
|
+
"author": "seanmonahan@microsoft.com",
|
32
|
+
"package": "@fluentui/react-utilities",
|
33
|
+
"commit": "6404bef16cebf1f67b9b80a9f6d5f605f9873df1",
|
34
|
+
"comment": "Update getSlots() docs."
|
21
35
|
}
|
22
36
|
]
|
23
37
|
}
|
package/CHANGELOG.md
CHANGED
@@ -1,18 +1,19 @@
|
|
1
1
|
# Change Log - @fluentui/react-utilities
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Tue, 07 Dec 2021 04:14:30 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
-
## [0.0.0-
|
7
|
+
## [0.0.0-nightlyebf02572f720211207.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v0.0.0-nightlyebf02572f720211207.1)
|
8
8
|
|
9
|
-
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.0.0-beta.4..@fluentui/react-utilities_v0.0.0-
|
9
|
+
Tue, 07 Dec 2021 04:14:30 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.0.0-beta.4..@fluentui/react-utilities_v0.0.0-nightlyebf02572f720211207.1)
|
11
11
|
|
12
12
|
### Changes
|
13
13
|
|
14
|
-
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/
|
15
|
-
-
|
14
|
+
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/2523b8c9da23ec860780244563814b63ba963043) by email not defined)
|
15
|
+
- [breaking] Remove useControllableValue hook (use useControllableState instead) ([PR #20865](https://github.com/microsoft/fluentui/pull/20865) by elcraig@microsoft.com)
|
16
|
+
- Bump @fluentui/keyboard-keys to v0.0.0-nightlyebf02572f720211207.1 ([commit](https://github.com/microsoft/fluentui/commit/2523b8c9da23ec860780244563814b63ba963043) by beachball)
|
16
17
|
|
17
18
|
## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.0.0-beta.4)
|
18
19
|
|
@@ -58,8 +58,6 @@ export declare const buttonProperties: Record<string, number>;
|
|
58
58
|
*/
|
59
59
|
export declare function canUseDOM(): boolean;
|
60
60
|
|
61
|
-
export declare type ChangeCallback<TElement extends HTMLElement, TValue, TEvent extends React_2.SyntheticEvent<TElement> | undefined> = (ev: TEvent, newValue: TValue | undefined) => void;
|
62
|
-
|
63
61
|
/**
|
64
62
|
* Clamps `value` to a number between the min and max.
|
65
63
|
*
|
@@ -100,11 +98,6 @@ export declare type DefaultObjectShorthandProps = ObjectShorthandProps<Pick<Reac
|
|
100
98
|
*/
|
101
99
|
export declare const defaultSSRContextValue: SSRContextValue;
|
102
100
|
|
103
|
-
/**
|
104
|
-
* Default value can be a value or an initializer
|
105
|
-
*/
|
106
|
-
declare type DefaultValue<TValue> = TValue | (() => TValue);
|
107
|
-
|
108
101
|
/**
|
109
102
|
* An array of DIV tag properties and events.
|
110
103
|
*
|
@@ -186,8 +179,10 @@ export declare const getRTLSafeKey: (key: string, dir: 'ltr' | 'rtl') => string;
|
|
186
179
|
* Slots will render as null if they are rendered as primitives with undefined children.
|
187
180
|
*
|
188
181
|
* The slotProps will always omit the `as` prop within them, and for slots that are string
|
189
|
-
* primitives, the props will be filtered according
|
190
|
-
* slot is rendered `as: 'a'`, the props will be filtered for acceptable
|
182
|
+
* primitives, the props will be filtered according to the slot type by the type system.
|
183
|
+
* For example, if the slot is rendered `as: 'a'`, the props will be filtered for acceptable
|
184
|
+
* anchor props. Note that this is only enforced at build time by Typescript -- there is no
|
185
|
+
* runtime code filtering props in this function.
|
191
186
|
*
|
192
187
|
* @param state - State including slot definitions
|
193
188
|
* @param slotNames - Name of which props are slots
|
@@ -493,42 +488,37 @@ export declare type UseBooleanCallbacks = {
|
|
493
488
|
export declare function useConst<T>(initialValue: T | (() => T)): T;
|
494
489
|
|
495
490
|
/**
|
496
|
-
* A useState
|
497
|
-
*
|
498
|
-
*
|
491
|
+
* A `useState`-like hook to manage a value that could be either controlled or uncontrolled,
|
492
|
+
* such as a checked state or text input string.
|
493
|
+
*
|
494
|
+
* Unlike `setState`, it's okay to call the returned updater (dispatch) function for either a
|
495
|
+
* controlled or uncontrolled component. Calls will only be respected if the component is uncontrolled.
|
496
|
+
*
|
497
|
+
* @returns Same as [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate): an array
|
498
|
+
* of the current value and an updater (dispatch) function. The updater function is referentially
|
499
|
+
* stable (won't change during the component's lifecycle). It can take either a new value, or a
|
500
|
+
* function which is passed the previous value and returns the new value. Unlike `setState`, calls
|
501
|
+
* to the updater function will only be respected if the component is uncontrolled.
|
502
|
+
* @see https://reactjs.org/docs/uncontrolled-components.html
|
499
503
|
*/
|
500
504
|
export declare const useControllableState: <State>(options: UseControllableStateOptions<State>) => [State, React_2.Dispatch<React_2.SetStateAction<State>>];
|
501
505
|
|
502
506
|
export declare type UseControllableStateOptions<State> = {
|
503
507
|
/**
|
504
|
-
* User
|
508
|
+
* User-provided default state or initializer, for uncontrolled usage.
|
505
509
|
*/
|
506
510
|
defaultState?: State | (() => State);
|
507
511
|
/**
|
508
|
-
* User
|
512
|
+
* User-provided controlled state. `undefined` means internal state will be used.
|
509
513
|
*/
|
510
514
|
state: State | undefined;
|
511
515
|
/**
|
512
|
-
* Used
|
516
|
+
* Used as the initial state if `state` and `defaultState` are both `undefined`.
|
517
|
+
* If `undefined` is the correct initial state, pass that here.
|
513
518
|
*/
|
514
519
|
initialState: State;
|
515
520
|
};
|
516
521
|
|
517
|
-
/**
|
518
|
-
* Hook to manage a value that could be either controlled or uncontrolled, such as a checked state or
|
519
|
-
* text box string.
|
520
|
-
* @param controlledValue - The controlled value passed in the props. This value will always be used if provided,
|
521
|
-
* and the internal state will be updated to reflect it.
|
522
|
-
* @param defaultUncontrolledValue - Initial value for the internal state in the uncontrolled case.
|
523
|
-
* @returns An array of the current value and an updater callback. Like `React.useState`, the updater
|
524
|
-
* callback always has the same identity, and it can take either a new value, or a function which
|
525
|
-
* is passed the previous value and returns the new value.
|
526
|
-
* @see https://reactjs.org/docs/uncontrolled-components.html
|
527
|
-
*/
|
528
|
-
export declare function useControllableValue<TValue, TElement extends HTMLElement>(controlledValue: TValue, defaultUncontrolledValue: DefaultValue<TValue>): Readonly<[TValue, (update: React_2.SetStateAction<TValue>) => void]>;
|
529
|
-
|
530
|
-
export declare function useControllableValue<TValue, TElement extends HTMLElement, TEvent extends React_2.SyntheticEvent<TElement> | undefined>(controlledValue: TValue, defaultUncontrolledValue: DefaultValue<TValue>, onChange: ChangeCallback<TElement, TValue, TEvent>): Readonly<[TValue, (update: React_2.SetStateAction<TValue>, ev?: React_2.FormEvent<TElement>) => void]>;
|
531
|
-
|
532
522
|
/**
|
533
523
|
* https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback
|
534
524
|
*
|
@@ -15,8 +15,10 @@ declare type SlotProps<S extends ObjectShorthandPropsRecord> = {
|
|
15
15
|
* Slots will render as null if they are rendered as primitives with undefined children.
|
16
16
|
*
|
17
17
|
* The slotProps will always omit the `as` prop within them, and for slots that are string
|
18
|
-
* primitives, the props will be filtered according
|
19
|
-
* slot is rendered `as: 'a'`, the props will be filtered for acceptable
|
18
|
+
* primitives, the props will be filtered according to the slot type by the type system.
|
19
|
+
* For example, if the slot is rendered `as: 'a'`, the props will be filtered for acceptable
|
20
|
+
* anchor props. Note that this is only enforced at build time by Typescript -- there is no
|
21
|
+
* runtime code filtering props in this function.
|
20
22
|
*
|
21
23
|
* @param state - State including slot definitions
|
22
24
|
* @param slotNames - Name of which props are slots
|
package/lib/compose/getSlots.js
CHANGED
@@ -10,8 +10,10 @@ import { omit } from '../utils/omit';
|
|
10
10
|
* Slots will render as null if they are rendered as primitives with undefined children.
|
11
11
|
*
|
12
12
|
* The slotProps will always omit the `as` prop within them, and for slots that are string
|
13
|
-
* primitives, the props will be filtered according
|
14
|
-
* slot is rendered `as: 'a'`, the props will be filtered for acceptable
|
13
|
+
* primitives, the props will be filtered according to the slot type by the type system.
|
14
|
+
* For example, if the slot is rendered `as: 'a'`, the props will be filtered for acceptable
|
15
|
+
* anchor props. Note that this is only enforced at build time by Typescript -- there is no
|
16
|
+
* runtime code filtering props in this function.
|
15
17
|
*
|
16
18
|
* @param state - State including slot definitions
|
17
19
|
* @param slotNames - Name of which props are slots
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../src/compose/getSlots.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAUA,SAAS,UAAT,QAA2B,cAA3B;AACA,SAAS,IAAT,QAAqB,eAArB;AAqBA
|
1
|
+
{"version":3,"sources":["../../src/compose/getSlots.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAUA,SAAS,UAAT,QAA2B,cAA3B;AACA,SAAS,IAAT,QAAqB,eAArB;AAqBA;;;;;;;;;;;;;;;;;AAiBG;;AACH,OAAM,SAAU,QAAV,CACJ,KADI,EAEJ,SAAA,GAAyB,CAAC,MAAD,CAFrB,EAE6B;AAKjC,QAAM,KAAK,GAAG,EAAd;AACA,QAAM,SAAS,GAAG,EAAlB;;AAEA,OAAK,MAAM,QAAX,IAAuB,SAAvB,EAAkC;AAChC,UAAM,CAAC,IAAD,EAAO,KAAP,IAAgB,OAAO,CAAC,KAAD,EAAQ,QAAR,CAA7B;AACA,IAAA,KAAK,CAAC,QAAD,CAAL,GAAkB,IAAlB;AACA,IAAA,SAAS,CAAC,QAAD,CAAT,GAAsB,KAAtB;AACD;;AACD,SAAO;AAAE,IAAA,KAAF;AAAS,IAAA,SAAS,EAAG;AAArB,GAAP;AACD;;AAED,SAAS,OAAT,CACE,KADF,EAEE,QAFF,EAEa;;;AAEX,MAAI,KAAK,CAAC,QAAD,CAAL,KAAoB,SAAxB,EAAmC;AACjC,WAAO,CAAC,UAAD,EAAa,SAAb,CAAP;AACD;;AACD,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA,EAAE,EAAE,MAAhB;AAAwB,OAAG;AAA3B,MAAoC,KAAK,CAAC,QAAD,CAA/C;AAEA,QAAM,IAAI,GAAI,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,UAAN,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,KAAA,CAAhB,GAAgB,EAAA,CAAG,QAAH,CAAhB,MAAiC,SAAjC,IAA8C,OAAO,KAAK,CAAC,UAAN,CAAiB,QAAjB,CAAP,KAAsC,QAApF,GACV,MAAM,KAAA,CAAA,EAAA,GAAI,KAAK,CAAC,UAAV,MAAoB,IAApB,IAAoB,EAAA,KAAA,KAAA,CAApB,GAAoB,KAAA,CAApB,GAAoB,EAAA,CAAG,QAAH,CAApB,CAAN,IAA0C,KADhC,GAEV,KAAK,CAAC,UAAN,CAAiB,QAAjB,CAFJ;;AAIA,MAAI,OAAO,QAAP,KAAoB,UAAxB,EAAoC;AAClC,UAAM,MAAM,GAAG,QAAf;AACA,WAAO,CACL,KAAK,CAAC,QADD,EAEJ;AACC,MAAA,QAAQ,EAAE,MAAM,CAAC,IAAD,EAAO,IAAP;AADjB,KAFI,CAAP;AAMD;;AAED,QAAM,gBAAgB,GAAG,OAAO,IAAP,KAAgB,QAAhB,KAAwB,CAAA,EAAA,GAAI,KAAK,CAAC,QAAD,CAAT,MAAmB,IAAnB,IAAmB,EAAA,KAAA,KAAA,CAAnB,GAAmB,KAAA,CAAnB,GAAmB,EAAA,CAAE,EAA7C,CAAzB;AACA,QAAM,SAAS,GAAI,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,QAAD,CAAN,EAAmB,CAAC,IAAD,CAAnB,CAAP,GAAoC,KAAK,CAAC,QAAD,CAA5E;AAEA,SAAO,CAAC,IAAD,EAAO,SAAP,CAAP;AACD","sourceRoot":""}
|
package/lib/hooks/index.d.ts
CHANGED
package/lib/hooks/index.js
CHANGED
package/lib/hooks/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC"}
|
@@ -1,21 +1,31 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
export declare type UseControllableStateOptions<State> = {
|
3
3
|
/**
|
4
|
-
* User
|
4
|
+
* User-provided default state or initializer, for uncontrolled usage.
|
5
5
|
*/
|
6
6
|
defaultState?: State | (() => State);
|
7
7
|
/**
|
8
|
-
* User
|
8
|
+
* User-provided controlled state. `undefined` means internal state will be used.
|
9
9
|
*/
|
10
10
|
state: State | undefined;
|
11
11
|
/**
|
12
|
-
* Used
|
12
|
+
* Used as the initial state if `state` and `defaultState` are both `undefined`.
|
13
|
+
* If `undefined` is the correct initial state, pass that here.
|
13
14
|
*/
|
14
15
|
initialState: State;
|
15
16
|
};
|
16
17
|
/**
|
17
|
-
* A useState
|
18
|
-
*
|
19
|
-
*
|
18
|
+
* A `useState`-like hook to manage a value that could be either controlled or uncontrolled,
|
19
|
+
* such as a checked state or text input string.
|
20
|
+
*
|
21
|
+
* Unlike `setState`, it's okay to call the returned updater (dispatch) function for either a
|
22
|
+
* controlled or uncontrolled component. Calls will only be respected if the component is uncontrolled.
|
23
|
+
*
|
24
|
+
* @returns Same as [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate): an array
|
25
|
+
* of the current value and an updater (dispatch) function. The updater function is referentially
|
26
|
+
* stable (won't change during the component's lifecycle). It can take either a new value, or a
|
27
|
+
* function which is passed the previous value and returns the new value. Unlike `setState`, calls
|
28
|
+
* to the updater function will only be respected if the component is uncontrolled.
|
29
|
+
* @see https://reactjs.org/docs/uncontrolled-components.html
|
20
30
|
*/
|
21
31
|
export declare const useControllableState: <State>(options: UseControllableStateOptions<State>) => [State, React.Dispatch<React.SetStateAction<State>>];
|
@@ -1,23 +1,28 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import { useConst } from './useConst';
|
3
3
|
|
4
|
-
function isUndefined(state) {
|
5
|
-
return typeof state === 'undefined';
|
6
|
-
}
|
7
|
-
|
8
4
|
function isFactoryDispatch(newState) {
|
9
5
|
return typeof newState === 'function';
|
10
6
|
}
|
11
7
|
/**
|
12
|
-
* A useState
|
13
|
-
*
|
14
|
-
*
|
8
|
+
* A `useState`-like hook to manage a value that could be either controlled or uncontrolled,
|
9
|
+
* such as a checked state or text input string.
|
10
|
+
*
|
11
|
+
* Unlike `setState`, it's okay to call the returned updater (dispatch) function for either a
|
12
|
+
* controlled or uncontrolled component. Calls will only be respected if the component is uncontrolled.
|
13
|
+
*
|
14
|
+
* @returns Same as [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate): an array
|
15
|
+
* of the current value and an updater (dispatch) function. The updater function is referentially
|
16
|
+
* stable (won't change during the component's lifecycle). It can take either a new value, or a
|
17
|
+
* function which is passed the previous value and returns the new value. Unlike `setState`, calls
|
18
|
+
* to the updater function will only be respected if the component is uncontrolled.
|
19
|
+
* @see https://reactjs.org/docs/uncontrolled-components.html
|
15
20
|
*/
|
16
21
|
|
17
22
|
|
18
23
|
export const useControllableState = options => {
|
19
24
|
const isControlled = useIsControlled(options.state);
|
20
|
-
const initialState =
|
25
|
+
const initialState = typeof options.defaultState === 'undefined' ? options.initialState : options.defaultState;
|
21
26
|
const [internalState, setInternalState] = React.useState(initialState);
|
22
27
|
const state = isControlled ? options.state : internalState;
|
23
28
|
const stateRef = React.useRef(state);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/useControllableState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,YAAzB;;
|
1
|
+
{"version":3,"sources":["../../src/hooks/useControllableState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,YAAzB;;AAkBA,SAAS,iBAAT,CAAkC,QAAlC,EAAuE;AACrE,SAAO,OAAO,QAAP,KAAoB,UAA3B;AACD;AAED;;;;;;;;;;;;;AAaG;;;AACH,OAAO,MAAM,oBAAoB,GAC/B,OADkC,IAEsB;AACxD,QAAM,YAAY,GAAG,eAAe,CAAC,OAAO,CAAC,KAAT,CAApC;AACA,QAAM,YAAY,GAAG,OAAO,OAAO,CAAC,YAAf,KAAgC,WAAhC,GAA8C,OAAO,CAAC,YAAtD,GAAqE,OAAO,CAAC,YAAlG;AACA,QAAM,CAAC,aAAD,EAAgB,gBAAhB,IAAoC,KAAK,CAAC,QAAN,CAAsB,YAAtB,CAA1C;AAEA,QAAM,KAAK,GAAG,YAAY,GAAI,OAAO,CAAC,KAAZ,GAA8B,aAAxD;AAEA,QAAM,QAAQ,GAAG,KAAK,CAAC,MAAN,CAAa,KAAb,CAAjB;AACA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,IAAA,QAAQ,CAAC,OAAT,GAAmB,KAAnB;AACD,GAFD,EAEG,CAAC,KAAD,CAFH,EARwD,CAYxD;AACA;;AACA,QAAM,QAAQ,GAAG,KAAK,CAAC,WAAN,CAAmB,QAAD,IAA0C;AAC3E;AACA;AACA,QAAI,iBAAiB,CAAC,QAAD,CAArB,EAAiC;AAC/B,MAAA,QAAQ,CAAC,OAAT,GAAmB,QAAQ,CAAC,QAAQ,CAAC,OAAV,CAA3B;AACD,KAFD,MAEO;AACL,MAAA,QAAQ,CAAC,OAAT,GAAmB,QAAnB;AACD;;AAED,IAAA,gBAAgB,CAAC,QAAQ,CAAC,OAAV,CAAhB;AACD,GAVgB,EAUd,EAVc,CAAjB;AAYA,SAAO,CAAC,KAAD,EAAQ,QAAR,CAAP;AACD,CA7BM;AA+BP;;;;AAIG;;AACH,MAAM,eAAe,GAAI,eAAD,IAA6B;AACnD,QAAM,YAAY,GAAG,QAAQ,CAAU,eAAe,KAAK,SAA9B,CAA7B;;AAEA,MAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;AACzC;AACA;AACA,IAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,UAAI,YAAY,MAAM,eAAe,KAAK,SAA1B,CAAhB,EAAsD;AACpD,cAAM,KAAK,GAAG,IAAI,KAAJ,EAAd;AAEA,cAAM,cAAc,GAAG,YAAY,GAC/B,uCAD+B,GAE/B,wCAFJ;AAIA,cAAM,gBAAgB,GAAG,YAAY,GAAG,yBAAH,GAA+B,wBAApE,CAPoD,CASpD;;AACA,QAAA,OAAO,CAAC,KAAR,CACE,CACE;AACA,qCAA6B,cAA7B,GAA8C,sCAFhD,EAGE,mBAAmB,gBAAnB,GAAsC,kCAHxC,EAIE,oGAJF,EAKE,2DALF,EAME,KAAK,CAAC,KANR,EAOE,IAPF,CAOO,GAPP,CADF;AAUD;AACF,KAtBD,EAsBG,CAAC,YAAD,EAAe,eAAf,CAtBH;AAuBD;;AAED,SAAO,YAAP;AACD,CAhCD","sourceRoot":""}
|
@@ -15,8 +15,10 @@ declare type SlotProps<S extends ObjectShorthandPropsRecord> = {
|
|
15
15
|
* Slots will render as null if they are rendered as primitives with undefined children.
|
16
16
|
*
|
17
17
|
* The slotProps will always omit the `as` prop within them, and for slots that are string
|
18
|
-
* primitives, the props will be filtered according
|
19
|
-
* slot is rendered `as: 'a'`, the props will be filtered for acceptable
|
18
|
+
* primitives, the props will be filtered according to the slot type by the type system.
|
19
|
+
* For example, if the slot is rendered `as: 'a'`, the props will be filtered for acceptable
|
20
|
+
* anchor props. Note that this is only enforced at build time by Typescript -- there is no
|
21
|
+
* runtime code filtering props in this function.
|
20
22
|
*
|
21
23
|
* @param state - State including slot definitions
|
22
24
|
* @param slotNames - Name of which props are slots
|
@@ -19,8 +19,10 @@ const omit_1 = /*#__PURE__*/require("../utils/omit");
|
|
19
19
|
* Slots will render as null if they are rendered as primitives with undefined children.
|
20
20
|
*
|
21
21
|
* The slotProps will always omit the `as` prop within them, and for slots that are string
|
22
|
-
* primitives, the props will be filtered according
|
23
|
-
* slot is rendered `as: 'a'`, the props will be filtered for acceptable
|
22
|
+
* primitives, the props will be filtered according to the slot type by the type system.
|
23
|
+
* For example, if the slot is rendered `as: 'a'`, the props will be filtered for acceptable
|
24
|
+
* anchor props. Note that this is only enforced at build time by Typescript -- there is no
|
25
|
+
* runtime code filtering props in this function.
|
24
26
|
*
|
25
27
|
* @param state - State including slot definitions
|
26
28
|
* @param slotNames - Name of which props are slots
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../src/compose/getSlots.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAUA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,MAAA,MAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;AAqBA
|
1
|
+
{"version":3,"sources":["../../src/compose/getSlots.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAUA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,MAAA,MAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;AAqBA;;;;;;;;;;;;;;;;;AAiBG;;;AACH,SAAgB,QAAhB,CACE,KADF,EAEE,SAAA,GAAyB,CAAC,MAAD,CAF3B,EAEmC;AAKjC,QAAM,KAAK,GAAG,EAAd;AACA,QAAM,SAAS,GAAG,EAAlB;;AAEA,OAAK,MAAM,QAAX,IAAuB,SAAvB,EAAkC;AAChC,UAAM,CAAC,IAAD,EAAO,KAAP,IAAgB,OAAO,CAAC,KAAD,EAAQ,QAAR,CAA7B;AACA,IAAA,KAAK,CAAC,QAAD,CAAL,GAAkB,IAAlB;AACA,IAAA,SAAS,CAAC,QAAD,CAAT,GAAsB,KAAtB;AACD;;AACD,SAAO;AAAE,IAAA,KAAF;AAAS,IAAA,SAAS,EAAG;AAArB,GAAP;AACD;;AAhBD,OAAA,CAAA,QAAA,GAAA,QAAA;;AAkBA,SAAS,OAAT,CACE,KADF,EAEE,QAFF,EAEa;;;AAEX,MAAI,KAAK,CAAC,QAAD,CAAL,KAAoB,SAAxB,EAAmC;AACjC,WAAO,CAAC,YAAA,CAAA,UAAD,EAAa,SAAb,CAAP;AACD;;AACD,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA,EAAE,EAAE,MAAhB;AAAwB,OAAG;AAA3B,MAAoC,KAAK,CAAC,QAAD,CAA/C;AAEA,QAAM,IAAI,GAAI,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,UAAN,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,KAAA,CAAhB,GAAgB,EAAA,CAAG,QAAH,CAAhB,MAAiC,SAAjC,IAA8C,OAAO,KAAK,CAAC,UAAN,CAAiB,QAAjB,CAAP,KAAsC,QAApF,GACV,MAAM,KAAA,CAAA,EAAA,GAAI,KAAK,CAAC,UAAV,MAAoB,IAApB,IAAoB,EAAA,KAAA,KAAA,CAApB,GAAoB,KAAA,CAApB,GAAoB,EAAA,CAAG,QAAH,CAApB,CAAN,IAA0C,KADhC,GAEV,KAAK,CAAC,UAAN,CAAiB,QAAjB,CAFJ;;AAIA,MAAI,OAAO,QAAP,KAAoB,UAAxB,EAAoC;AAClC,UAAM,MAAM,GAAG,QAAf;AACA,WAAO,CACL,KAAK,CAAC,QADD,EAEJ;AACC,MAAA,QAAQ,EAAE,MAAM,CAAC,IAAD,EAAO,IAAP;AADjB,KAFI,CAAP;AAMD;;AAED,QAAM,gBAAgB,GAAG,OAAO,IAAP,KAAgB,QAAhB,KAAwB,CAAA,EAAA,GAAI,KAAK,CAAC,QAAD,CAAT,MAAmB,IAAnB,IAAmB,EAAA,KAAA,KAAA,CAAnB,GAAmB,KAAA,CAAnB,GAAmB,EAAA,CAAE,EAA7C,CAAzB;AACA,QAAM,SAAS,GAAI,gBAAgB,GAAG,MAAA,CAAA,IAAA,CAAK,KAAK,CAAC,QAAD,CAAV,EAAuB,CAAC,IAAD,CAAvB,CAAH,GAAoC,KAAK,CAAC,QAAD,CAA5E;AAEA,SAAO,CAAC,IAAD,EAAO,SAAP,CAAP;AACD","sourceRoot":""}
|
@@ -12,8 +12,6 @@ tslib_1.__exportStar(require("./useBoolean"), exports);
|
|
12
12
|
|
13
13
|
tslib_1.__exportStar(require("./useConst"), exports);
|
14
14
|
|
15
|
-
tslib_1.__exportStar(require("./useControllableValue"), exports);
|
16
|
-
|
17
15
|
tslib_1.__exportStar(require("./useEventCallback"), exports);
|
18
16
|
|
19
17
|
tslib_1.__exportStar(require("./useFirstMount"), exports);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,
|
1
|
+
{"version":3,"sources":["../../src/hooks/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA","sourceRoot":""}
|
@@ -1,21 +1,31 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
export declare type UseControllableStateOptions<State> = {
|
3
3
|
/**
|
4
|
-
* User
|
4
|
+
* User-provided default state or initializer, for uncontrolled usage.
|
5
5
|
*/
|
6
6
|
defaultState?: State | (() => State);
|
7
7
|
/**
|
8
|
-
* User
|
8
|
+
* User-provided controlled state. `undefined` means internal state will be used.
|
9
9
|
*/
|
10
10
|
state: State | undefined;
|
11
11
|
/**
|
12
|
-
* Used
|
12
|
+
* Used as the initial state if `state` and `defaultState` are both `undefined`.
|
13
|
+
* If `undefined` is the correct initial state, pass that here.
|
13
14
|
*/
|
14
15
|
initialState: State;
|
15
16
|
};
|
16
17
|
/**
|
17
|
-
* A useState
|
18
|
-
*
|
19
|
-
*
|
18
|
+
* A `useState`-like hook to manage a value that could be either controlled or uncontrolled,
|
19
|
+
* such as a checked state or text input string.
|
20
|
+
*
|
21
|
+
* Unlike `setState`, it's okay to call the returned updater (dispatch) function for either a
|
22
|
+
* controlled or uncontrolled component. Calls will only be respected if the component is uncontrolled.
|
23
|
+
*
|
24
|
+
* @returns Same as [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate): an array
|
25
|
+
* of the current value and an updater (dispatch) function. The updater function is referentially
|
26
|
+
* stable (won't change during the component's lifecycle). It can take either a new value, or a
|
27
|
+
* function which is passed the previous value and returns the new value. Unlike `setState`, calls
|
28
|
+
* to the updater function will only be respected if the component is uncontrolled.
|
29
|
+
* @see https://reactjs.org/docs/uncontrolled-components.html
|
20
30
|
*/
|
21
31
|
export declare const useControllableState: <State>(options: UseControllableStateOptions<State>) => [State, React.Dispatch<React.SetStateAction<State>>];
|
@@ -9,23 +9,28 @@ const React = /*#__PURE__*/require("react");
|
|
9
9
|
|
10
10
|
const useConst_1 = /*#__PURE__*/require("./useConst");
|
11
11
|
|
12
|
-
function isUndefined(state) {
|
13
|
-
return typeof state === 'undefined';
|
14
|
-
}
|
15
|
-
|
16
12
|
function isFactoryDispatch(newState) {
|
17
13
|
return typeof newState === 'function';
|
18
14
|
}
|
19
15
|
/**
|
20
|
-
* A useState
|
21
|
-
*
|
22
|
-
*
|
16
|
+
* A `useState`-like hook to manage a value that could be either controlled or uncontrolled,
|
17
|
+
* such as a checked state or text input string.
|
18
|
+
*
|
19
|
+
* Unlike `setState`, it's okay to call the returned updater (dispatch) function for either a
|
20
|
+
* controlled or uncontrolled component. Calls will only be respected if the component is uncontrolled.
|
21
|
+
*
|
22
|
+
* @returns Same as [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate): an array
|
23
|
+
* of the current value and an updater (dispatch) function. The updater function is referentially
|
24
|
+
* stable (won't change during the component's lifecycle). It can take either a new value, or a
|
25
|
+
* function which is passed the previous value and returns the new value. Unlike `setState`, calls
|
26
|
+
* to the updater function will only be respected if the component is uncontrolled.
|
27
|
+
* @see https://reactjs.org/docs/uncontrolled-components.html
|
23
28
|
*/
|
24
29
|
|
25
30
|
|
26
31
|
const useControllableState = options => {
|
27
32
|
const isControlled = useIsControlled(options.state);
|
28
|
-
const initialState =
|
33
|
+
const initialState = typeof options.defaultState === 'undefined' ? options.initialState : options.defaultState;
|
29
34
|
const [internalState, setInternalState] = React.useState(initialState);
|
30
35
|
const state = isControlled ? options.state : internalState;
|
31
36
|
const stateRef = React.useRef(state);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/useControllableState.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;
|
1
|
+
{"version":3,"sources":["../../src/hooks/useControllableState.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AAkBA,SAAS,iBAAT,CAAkC,QAAlC,EAAuE;AACrE,SAAO,OAAO,QAAP,KAAoB,UAA3B;AACD;AAED;;;;;;;;;;;;;AAaG;;;AACI,MAAM,oBAAoB,GAC/B,OADkC,IAEsB;AACxD,QAAM,YAAY,GAAG,eAAe,CAAC,OAAO,CAAC,KAAT,CAApC;AACA,QAAM,YAAY,GAAG,OAAO,OAAO,CAAC,YAAf,KAAgC,WAAhC,GAA8C,OAAO,CAAC,YAAtD,GAAqE,OAAO,CAAC,YAAlG;AACA,QAAM,CAAC,aAAD,EAAgB,gBAAhB,IAAoC,KAAK,CAAC,QAAN,CAAsB,YAAtB,CAA1C;AAEA,QAAM,KAAK,GAAG,YAAY,GAAI,OAAO,CAAC,KAAZ,GAA8B,aAAxD;AAEA,QAAM,QAAQ,GAAG,KAAK,CAAC,MAAN,CAAa,KAAb,CAAjB;AACA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,IAAA,QAAQ,CAAC,OAAT,GAAmB,KAAnB;AACD,GAFD,EAEG,CAAC,KAAD,CAFH,EARwD,CAYxD;AACA;;AACA,QAAM,QAAQ,GAAG,KAAK,CAAC,WAAN,CAAmB,QAAD,IAA0C;AAC3E;AACA;AACA,QAAI,iBAAiB,CAAC,QAAD,CAArB,EAAiC;AAC/B,MAAA,QAAQ,CAAC,OAAT,GAAmB,QAAQ,CAAC,QAAQ,CAAC,OAAV,CAA3B;AACD,KAFD,MAEO;AACL,MAAA,QAAQ,CAAC,OAAT,GAAmB,QAAnB;AACD;;AAED,IAAA,gBAAgB,CAAC,QAAQ,CAAC,OAAV,CAAhB;AACD,GAVgB,EAUd,EAVc,CAAjB;AAYA,SAAO,CAAC,KAAD,EAAQ,QAAR,CAAP;AACD,CA7BM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB;AA+Bb;;;;AAIG;;AACH,MAAM,eAAe,GAAI,eAAD,IAA6B;AACnD,QAAM,YAAY,GAAG,UAAA,CAAA,QAAA,CAAkB,eAAe,KAAK,SAAtC,CAArB;;AAEA,MAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;AACzC;AACA;AACA,IAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,UAAI,YAAY,MAAM,eAAe,KAAK,SAA1B,CAAhB,EAAsD;AACpD,cAAM,KAAK,GAAG,IAAI,KAAJ,EAAd;AAEA,cAAM,cAAc,GAAG,YAAY,GAC/B,uCAD+B,GAE/B,wCAFJ;AAIA,cAAM,gBAAgB,GAAG,YAAY,GAAG,yBAAH,GAA+B,wBAApE,CAPoD,CASpD;;AACA,QAAA,OAAO,CAAC,KAAR,CACE,CACE;AACA,qCAA6B,cAA7B,GAA8C,sCAFhD,EAGE,mBAAmB,gBAAnB,GAAsC,kCAHxC,EAIE,oGAJF,EAKE,2DALF,EAME,KAAK,CAAC,KANR,EAOE,IAPF,CAOO,GAPP,CADF;AAUD;AACF,KAtBD,EAsBG,CAAC,YAAD,EAAe,eAAf,CAtBH;AAuBD;;AAED,SAAO,YAAP;AACD,CAhCD","sourceRoot":""}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-utilities",
|
3
|
-
"version": "0.0.0-
|
3
|
+
"version": "0.0.0-nightlyebf02572f720211207.1",
|
4
4
|
"description": "A set of general React-specific utilities.",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
@@ -37,7 +37,7 @@
|
|
37
37
|
"react-test-renderer": "^16.3.0"
|
38
38
|
},
|
39
39
|
"dependencies": {
|
40
|
-
"@fluentui/keyboard-keys": "0.0.0-
|
40
|
+
"@fluentui/keyboard-keys": "0.0.0-nightlyebf02572f720211207.1",
|
41
41
|
"tslib": "^2.1.0"
|
42
42
|
},
|
43
43
|
"peerDependencies": {
|
@@ -1,20 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
export declare type ChangeCallback<TElement extends HTMLElement, TValue, TEvent extends React.SyntheticEvent<TElement> | undefined> = (ev: TEvent, newValue: TValue | undefined) => void;
|
3
|
-
/**
|
4
|
-
* Default value can be a value or an initializer
|
5
|
-
*/
|
6
|
-
declare type DefaultValue<TValue> = TValue | (() => TValue);
|
7
|
-
/**
|
8
|
-
* Hook to manage a value that could be either controlled or uncontrolled, such as a checked state or
|
9
|
-
* text box string.
|
10
|
-
* @param controlledValue - The controlled value passed in the props. This value will always be used if provided,
|
11
|
-
* and the internal state will be updated to reflect it.
|
12
|
-
* @param defaultUncontrolledValue - Initial value for the internal state in the uncontrolled case.
|
13
|
-
* @returns An array of the current value and an updater callback. Like `React.useState`, the updater
|
14
|
-
* callback always has the same identity, and it can take either a new value, or a function which
|
15
|
-
* is passed the previous value and returns the new value.
|
16
|
-
* @see https://reactjs.org/docs/uncontrolled-components.html
|
17
|
-
*/
|
18
|
-
export declare function useControllableValue<TValue, TElement extends HTMLElement>(controlledValue: TValue, defaultUncontrolledValue: DefaultValue<TValue>): Readonly<[TValue, (update: React.SetStateAction<TValue>) => void]>;
|
19
|
-
export declare function useControllableValue<TValue, TElement extends HTMLElement, TEvent extends React.SyntheticEvent<TElement> | undefined>(controlledValue: TValue, defaultUncontrolledValue: DefaultValue<TValue>, onChange: ChangeCallback<TElement, TValue, TEvent>): Readonly<[TValue, (update: React.SetStateAction<TValue>, ev?: React.FormEvent<TElement>) => void]>;
|
20
|
-
export {};
|
@@ -1,57 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import { useConst } from './useConst';
|
3
|
-
export function useControllableValue(controlledValue, defaultUncontrolledValue, onChange) {
|
4
|
-
const [value, setValue] = React.useState(defaultUncontrolledValue);
|
5
|
-
const isControlled = useIsControlled(controlledValue);
|
6
|
-
const currentValue = isControlled ? controlledValue : value; // Duplicate the current value and onChange in refs so they're accessible from
|
7
|
-
// setValueOrCallOnChange without creating a new callback every time
|
8
|
-
|
9
|
-
const valueRef = React.useRef(currentValue);
|
10
|
-
const onChangeRef = React.useRef(onChange);
|
11
|
-
React.useEffect(() => {
|
12
|
-
valueRef.current = currentValue;
|
13
|
-
onChangeRef.current = onChange;
|
14
|
-
}); // To match the behavior of the setter returned by React.useState, this callback's identity
|
15
|
-
// should never change. This means it MUST NOT directly reference variables that can change.
|
16
|
-
|
17
|
-
const setValueOrCallOnChange = useConst(() => (update, ev) => {
|
18
|
-
// Assuming here that TValue is not a function, because a controllable value will typically
|
19
|
-
// be something a user can enter as input
|
20
|
-
const newValue = typeof update === 'function' ? update(valueRef.current) : update;
|
21
|
-
|
22
|
-
if (onChangeRef.current) {
|
23
|
-
onChangeRef.current(ev, newValue);
|
24
|
-
}
|
25
|
-
|
26
|
-
if (!isControlled) {
|
27
|
-
setValue(newValue);
|
28
|
-
}
|
29
|
-
});
|
30
|
-
return [currentValue, setValueOrCallOnChange];
|
31
|
-
}
|
32
|
-
/**
|
33
|
-
* Helper hook to handle previous comparison of controlled/uncontrolled
|
34
|
-
* Prints an error when isControlled value switches between subsequent renders
|
35
|
-
*/
|
36
|
-
|
37
|
-
const useIsControlled = controlledValue => {
|
38
|
-
const isControlled = useConst(controlledValue !== undefined);
|
39
|
-
|
40
|
-
if (process.env.NODE_ENV !== 'production') {
|
41
|
-
// We don't want these warnings in production even though it is against native behaviour
|
42
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
43
|
-
React.useEffect(() => {
|
44
|
-
if (isControlled !== (controlledValue !== undefined)) {
|
45
|
-
const error = new Error();
|
46
|
-
const controlWarning = isControlled ? 'a controlled value to be uncontrolled' : 'an uncontrolled value to be controlled';
|
47
|
-
const undefinedWarning = isControlled ? 'defined to an undefined' : 'undefined to a defined'; // eslint-disable-next-line no-console
|
48
|
-
|
49
|
-
console.error([// Default react error
|
50
|
-
'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(' '));
|
51
|
-
}
|
52
|
-
}, [isControlled, controlledValue]);
|
53
|
-
}
|
54
|
-
|
55
|
-
return isControlled;
|
56
|
-
};
|
57
|
-
//# sourceMappingURL=useControllableValue.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/useControllableValue.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,YAAzB;AAqCA,OAAM,SAAU,oBAAV,CAKJ,eALI,EAMJ,wBANI,EAOJ,QAPI,EAO+C;AAEnD,QAAM,CAAC,KAAD,EAAQ,QAAR,IAAoB,KAAK,CAAC,QAAN,CAAmC,wBAAnC,CAA1B;AACA,QAAM,YAAY,GAAG,eAAe,CAAC,eAAD,CAApC;AACA,QAAM,YAAY,GAAG,YAAY,GAAG,eAAH,GAAqB,KAAtD,CAJmD,CAMnD;AACA;;AACA,QAAM,QAAQ,GAAG,KAAK,CAAC,MAAN,CAAa,YAAb,CAAjB;AACA,QAAM,WAAW,GAAG,KAAK,CAAC,MAAN,CAAa,QAAb,CAApB;AACA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,IAAA,QAAQ,CAAC,OAAT,GAAmB,YAAnB;AACA,IAAA,WAAW,CAAC,OAAZ,GAAsB,QAAtB;AACD,GAHD,EAVmD,CAenD;AACA;;AACA,QAAM,sBAAsB,GAAG,QAAQ,CAAC,MAAM,CAAC,MAAD,EAAmD,EAAnD,KAAkE;AAC9G;AACA;AACA,UAAM,QAAQ,GAAG,OAAO,MAAP,KAAkB,UAAlB,GAAgC,MAAmB,CAAC,QAAQ,CAAC,OAAV,CAAnD,GAAwE,MAAzF;;AAEA,QAAI,WAAW,CAAC,OAAhB,EAAyB;AACvB,MAAA,WAAW,CAAC,OAAZ,CAAoB,EAApB,EAAyB,QAAzB;AACD;;AAED,QAAI,CAAC,YAAL,EAAmB;AACjB,MAAA,QAAQ,CAAC,QAAD,CAAR;AACD;AACF,GAZsC,CAAvC;AAcA,SAAO,CAAC,YAAD,EAAe,sBAAf,CAAP;AACD;AAED;;;AAGG;;AACH,MAAM,eAAe,GAAY,eAAT,IAAoC;AAC1D,QAAM,YAAY,GAAG,QAAQ,CAAU,eAAe,KAAK,SAA9B,CAA7B;;AAEA,MAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;AACzC;AACA;AACA,IAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,UAAI,YAAY,MAAM,eAAe,KAAK,SAA1B,CAAhB,EAAsD;AACpD,cAAM,KAAK,GAAG,IAAI,KAAJ,EAAd;AAEA,cAAM,cAAc,GAAG,YAAY,GAC/B,uCAD+B,GAE/B,wCAFJ;AAIA,cAAM,gBAAgB,GAAG,YAAY,GAAG,yBAAH,GAA+B,wBAApE,CAPoD,CASpD;;AACA,QAAA,OAAO,CAAC,KAAR,CACE,CACE;AACA,qCAA6B,cAA7B,GAA8C,sCAFhD,EAGE,mBAAmB,gBAAnB,GAAsC,kCAHxC,EAIE,oGAJF,EAKE,2DALF,EAME,KAAK,CAAC,KANR,EAOE,IAPF,CAOO,GAPP,CADF;AAUD;AACF,KAtBD,EAsBG,CAAC,YAAD,EAAe,eAAf,CAtBH;AAuBD;;AAED,SAAO,YAAP;AACD,CAhCD","sourceRoot":""}
|
@@ -1,20 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
export declare type ChangeCallback<TElement extends HTMLElement, TValue, TEvent extends React.SyntheticEvent<TElement> | undefined> = (ev: TEvent, newValue: TValue | undefined) => void;
|
3
|
-
/**
|
4
|
-
* Default value can be a value or an initializer
|
5
|
-
*/
|
6
|
-
declare type DefaultValue<TValue> = TValue | (() => TValue);
|
7
|
-
/**
|
8
|
-
* Hook to manage a value that could be either controlled or uncontrolled, such as a checked state or
|
9
|
-
* text box string.
|
10
|
-
* @param controlledValue - The controlled value passed in the props. This value will always be used if provided,
|
11
|
-
* and the internal state will be updated to reflect it.
|
12
|
-
* @param defaultUncontrolledValue - Initial value for the internal state in the uncontrolled case.
|
13
|
-
* @returns An array of the current value and an updater callback. Like `React.useState`, the updater
|
14
|
-
* callback always has the same identity, and it can take either a new value, or a function which
|
15
|
-
* is passed the previous value and returns the new value.
|
16
|
-
* @see https://reactjs.org/docs/uncontrolled-components.html
|
17
|
-
*/
|
18
|
-
export declare function useControllableValue<TValue, TElement extends HTMLElement>(controlledValue: TValue, defaultUncontrolledValue: DefaultValue<TValue>): Readonly<[TValue, (update: React.SetStateAction<TValue>) => void]>;
|
19
|
-
export declare function useControllableValue<TValue, TElement extends HTMLElement, TEvent extends React.SyntheticEvent<TElement> | undefined>(controlledValue: TValue, defaultUncontrolledValue: DefaultValue<TValue>, onChange: ChangeCallback<TElement, TValue, TEvent>): Readonly<[TValue, (update: React.SetStateAction<TValue>, ev?: React.FormEvent<TElement>) => void]>;
|
20
|
-
export {};
|
@@ -1,68 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.useControllableValue = void 0;
|
7
|
-
|
8
|
-
const React = /*#__PURE__*/require("react");
|
9
|
-
|
10
|
-
const useConst_1 = /*#__PURE__*/require("./useConst");
|
11
|
-
|
12
|
-
function useControllableValue(controlledValue, defaultUncontrolledValue, onChange) {
|
13
|
-
const [value, setValue] = React.useState(defaultUncontrolledValue);
|
14
|
-
const isControlled = useIsControlled(controlledValue);
|
15
|
-
const currentValue = isControlled ? controlledValue : value; // Duplicate the current value and onChange in refs so they're accessible from
|
16
|
-
// setValueOrCallOnChange without creating a new callback every time
|
17
|
-
|
18
|
-
const valueRef = React.useRef(currentValue);
|
19
|
-
const onChangeRef = React.useRef(onChange);
|
20
|
-
React.useEffect(() => {
|
21
|
-
valueRef.current = currentValue;
|
22
|
-
onChangeRef.current = onChange;
|
23
|
-
}); // To match the behavior of the setter returned by React.useState, this callback's identity
|
24
|
-
// should never change. This means it MUST NOT directly reference variables that can change.
|
25
|
-
|
26
|
-
const setValueOrCallOnChange = useConst_1.useConst(() => (update, ev) => {
|
27
|
-
// Assuming here that TValue is not a function, because a controllable value will typically
|
28
|
-
// be something a user can enter as input
|
29
|
-
const newValue = typeof update === 'function' ? update(valueRef.current) : update;
|
30
|
-
|
31
|
-
if (onChangeRef.current) {
|
32
|
-
onChangeRef.current(ev, newValue);
|
33
|
-
}
|
34
|
-
|
35
|
-
if (!isControlled) {
|
36
|
-
setValue(newValue);
|
37
|
-
}
|
38
|
-
});
|
39
|
-
return [currentValue, setValueOrCallOnChange];
|
40
|
-
}
|
41
|
-
|
42
|
-
exports.useControllableValue = useControllableValue;
|
43
|
-
/**
|
44
|
-
* Helper hook to handle previous comparison of controlled/uncontrolled
|
45
|
-
* Prints an error when isControlled value switches between subsequent renders
|
46
|
-
*/
|
47
|
-
|
48
|
-
const useIsControlled = controlledValue => {
|
49
|
-
const isControlled = useConst_1.useConst(controlledValue !== undefined);
|
50
|
-
|
51
|
-
if (process.env.NODE_ENV !== 'production') {
|
52
|
-
// We don't want these warnings in production even though it is against native behaviour
|
53
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
54
|
-
React.useEffect(() => {
|
55
|
-
if (isControlled !== (controlledValue !== undefined)) {
|
56
|
-
const error = new Error();
|
57
|
-
const controlWarning = isControlled ? 'a controlled value to be uncontrolled' : 'an uncontrolled value to be controlled';
|
58
|
-
const undefinedWarning = isControlled ? 'defined to an undefined' : 'undefined to a defined'; // eslint-disable-next-line no-console
|
59
|
-
|
60
|
-
console.error([// Default react error
|
61
|
-
'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(' '));
|
62
|
-
}
|
63
|
-
}, [isControlled, controlledValue]);
|
64
|
-
}
|
65
|
-
|
66
|
-
return isControlled;
|
67
|
-
};
|
68
|
-
//# sourceMappingURL=useControllableValue.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/useControllableValue.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AAqCA,SAAgB,oBAAhB,CAKE,eALF,EAME,wBANF,EAOE,QAPF,EAOqD;AAEnD,QAAM,CAAC,KAAD,EAAQ,QAAR,IAAoB,KAAK,CAAC,QAAN,CAAmC,wBAAnC,CAA1B;AACA,QAAM,YAAY,GAAG,eAAe,CAAC,eAAD,CAApC;AACA,QAAM,YAAY,GAAG,YAAY,GAAG,eAAH,GAAqB,KAAtD,CAJmD,CAMnD;AACA;;AACA,QAAM,QAAQ,GAAG,KAAK,CAAC,MAAN,CAAa,YAAb,CAAjB;AACA,QAAM,WAAW,GAAG,KAAK,CAAC,MAAN,CAAa,QAAb,CAApB;AACA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,IAAA,QAAQ,CAAC,OAAT,GAAmB,YAAnB;AACA,IAAA,WAAW,CAAC,OAAZ,GAAsB,QAAtB;AACD,GAHD,EAVmD,CAenD;AACA;;AACA,QAAM,sBAAsB,GAAG,UAAA,CAAA,QAAA,CAAS,MAAM,CAAC,MAAD,EAAmD,EAAnD,KAAkE;AAC9G;AACA;AACA,UAAM,QAAQ,GAAG,OAAO,MAAP,KAAkB,UAAlB,GAAgC,MAAmB,CAAC,QAAQ,CAAC,OAAV,CAAnD,GAAwE,MAAzF;;AAEA,QAAI,WAAW,CAAC,OAAhB,EAAyB;AACvB,MAAA,WAAW,CAAC,OAAZ,CAAoB,EAApB,EAAyB,QAAzB;AACD;;AAED,QAAI,CAAC,YAAL,EAAmB;AACjB,MAAA,QAAQ,CAAC,QAAD,CAAR;AACD;AACF,GAZ8B,CAA/B;AAcA,SAAO,CAAC,YAAD,EAAe,sBAAf,CAAP;AACD;;AAvCD,OAAA,CAAA,oBAAA,GAAA,oBAAA;AAyCA;;;AAGG;;AACH,MAAM,eAAe,GAAY,eAAT,IAAoC;AAC1D,QAAM,YAAY,GAAG,UAAA,CAAA,QAAA,CAAkB,eAAe,KAAK,SAAtC,CAArB;;AAEA,MAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;AACzC;AACA;AACA,IAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,UAAI,YAAY,MAAM,eAAe,KAAK,SAA1B,CAAhB,EAAsD;AACpD,cAAM,KAAK,GAAG,IAAI,KAAJ,EAAd;AAEA,cAAM,cAAc,GAAG,YAAY,GAC/B,uCAD+B,GAE/B,wCAFJ;AAIA,cAAM,gBAAgB,GAAG,YAAY,GAAG,yBAAH,GAA+B,wBAApE,CAPoD,CASpD;;AACA,QAAA,OAAO,CAAC,KAAR,CACE,CACE;AACA,qCAA6B,cAA7B,GAA8C,sCAFhD,EAGE,mBAAmB,gBAAnB,GAAsC,kCAHxC,EAIE,oGAJF,EAKE,2DALF,EAME,KAAK,CAAC,KANR,EAOE,IAPF,CAOO,GAPP,CADF;AAUD;AACF,KAtBD,EAsBG,CAAC,YAAD,EAAe,eAAf,CAtBH;AAuBD;;AAED,SAAO,YAAP;AACD,CAhCD","sourceRoot":""}
|