@fluentui/react-utilities 9.3.0 → 9.4.0
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 +45 -1
- package/CHANGELOG.md +20 -2
- package/dist/index.d.ts +18 -2
- package/lib/compose/getSlots.js +0 -8
- package/lib/compose/getSlots.js.map +1 -1
- package/lib/compose/isResolvedShorthand.js +0 -1
- package/lib/compose/isResolvedShorthand.js.map +1 -1
- package/lib/compose/resolveShorthand.js +2 -6
- package/lib/compose/resolveShorthand.js.map +1 -1
- package/lib/hooks/index.js +1 -0
- package/lib/hooks/index.js.map +1 -1
- package/lib/hooks/useControllableState.js +6 -12
- package/lib/hooks/useControllableState.js.map +1 -1
- package/lib/hooks/useEventCallback.js +0 -1
- package/lib/hooks/useEventCallback.js.map +1 -1
- package/lib/hooks/useFirstMount.js +0 -3
- package/lib/hooks/useFirstMount.js.map +1 -1
- package/lib/hooks/useForceUpdate.js +0 -1
- package/lib/hooks/useForceUpdate.js.map +1 -1
- package/lib/hooks/useId.js +0 -3
- package/lib/hooks/useId.js.map +1 -1
- package/lib/hooks/useIsomorphicLayoutEffect.js +0 -1
- package/lib/hooks/useIsomorphicLayoutEffect.js.map +1 -1
- package/lib/hooks/useMergedRefs.js +2 -3
- package/lib/hooks/useMergedRefs.js.map +1 -1
- package/lib/hooks/useOnClickOutside.js +8 -26
- package/lib/hooks/useOnClickOutside.js.map +1 -1
- package/lib/hooks/useOnScrollOutside.js +0 -4
- package/lib/hooks/useOnScrollOutside.js.map +1 -1
- package/lib/hooks/usePrevious.js +0 -1
- package/lib/hooks/usePrevious.js.map +1 -1
- package/lib/hooks/useScrollbarWidth.js +30 -0
- package/lib/hooks/useScrollbarWidth.js.map +1 -0
- package/lib/hooks/useTimeout.js +2 -3
- package/lib/hooks/useTimeout.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib/ssr/SSRContext.js +4 -11
- package/lib/ssr/SSRContext.js.map +1 -1
- package/lib/ssr/canUseDOM.js +2 -1
- package/lib/ssr/canUseDOM.js.map +1 -1
- package/lib/trigger/applyTriggerPropsToChildren.js +2 -6
- package/lib/trigger/applyTriggerPropsToChildren.js.map +1 -1
- package/lib/trigger/getTriggerChild.js +2 -3
- package/lib/trigger/getTriggerChild.js.map +1 -1
- package/lib/trigger/isFluentTrigger.js.map +1 -1
- package/lib/utils/getNativeElementProps.js +0 -2
- package/lib/utils/getNativeElementProps.js.map +1 -1
- package/lib/utils/getRTLSafeKey.js +0 -2
- package/lib/utils/getRTLSafeKey.js.map +1 -1
- package/lib/utils/getReactCallbackName.js +0 -3
- package/lib/utils/getReactCallbackName.js.map +1 -1
- package/lib/utils/isHTMLElement.js +2 -2
- package/lib/utils/isHTMLElement.js.map +1 -1
- package/lib/utils/isInteractiveHTMLElement.js +0 -4
- package/lib/utils/isInteractiveHTMLElement.js.map +1 -1
- package/lib/utils/mergeCallbacks.js.map +1 -1
- package/lib/utils/omit.js +0 -2
- package/lib/utils/omit.js.map +1 -1
- package/lib/utils/properties.js +7 -36
- package/lib/utils/properties.js.map +1 -1
- package/lib-amd/hooks/index.js +2 -1
- package/lib-amd/hooks/index.js.map +1 -1
- package/lib-amd/hooks/useScrollbarWidth.js +32 -0
- package/lib-amd/hooks/useScrollbarWidth.js.map +1 -0
- package/lib-amd/index.js +2 -1
- package/lib-amd/index.js.map +1 -1
- package/lib-amd/utils/isHTMLElement.js +4 -3
- package/lib-amd/utils/isHTMLElement.js.map +1 -1
- package/lib-amd/utils/isInteractiveHTMLElement.js.map +1 -1
- package/lib-commonjs/compose/getSlots.js +0 -12
- package/lib-commonjs/compose/getSlots.js.map +1 -1
- package/lib-commonjs/compose/index.js +0 -5
- package/lib-commonjs/compose/index.js.map +1 -1
- package/lib-commonjs/compose/isResolvedShorthand.js +0 -4
- package/lib-commonjs/compose/isResolvedShorthand.js.map +1 -1
- package/lib-commonjs/compose/resolveShorthand.js +2 -9
- package/lib-commonjs/compose/resolveShorthand.js.map +1 -1
- package/lib-commonjs/compose/types.js.map +1 -1
- package/lib-commonjs/hooks/index.js +1 -12
- package/lib-commonjs/hooks/index.js.map +1 -1
- package/lib-commonjs/hooks/useControllableState.js +6 -14
- package/lib-commonjs/hooks/useControllableState.js.map +1 -1
- package/lib-commonjs/hooks/useEventCallback.js +0 -5
- package/lib-commonjs/hooks/useEventCallback.js.map +1 -1
- package/lib-commonjs/hooks/useFirstMount.js +0 -6
- package/lib-commonjs/hooks/useFirstMount.js.map +1 -1
- package/lib-commonjs/hooks/useForceUpdate.js +0 -4
- package/lib-commonjs/hooks/useForceUpdate.js.map +1 -1
- package/lib-commonjs/hooks/useId.js +0 -8
- package/lib-commonjs/hooks/useId.js.map +1 -1
- package/lib-commonjs/hooks/useIsomorphicLayoutEffect.js +0 -4
- package/lib-commonjs/hooks/useIsomorphicLayoutEffect.js.map +1 -1
- package/lib-commonjs/hooks/useMergedRefs.js +2 -6
- package/lib-commonjs/hooks/useMergedRefs.js.map +1 -1
- package/lib-commonjs/hooks/useOnClickOutside.js +8 -30
- package/lib-commonjs/hooks/useOnClickOutside.js.map +1 -1
- package/lib-commonjs/hooks/useOnScrollOutside.js +0 -8
- package/lib-commonjs/hooks/useOnScrollOutside.js.map +1 -1
- package/lib-commonjs/hooks/usePrevious.js +0 -4
- package/lib-commonjs/hooks/usePrevious.js.map +1 -1
- package/lib-commonjs/hooks/useScrollbarWidth.js +37 -0
- package/lib-commonjs/hooks/useScrollbarWidth.js.map +1 -0
- package/lib-commonjs/hooks/useTimeout.js +2 -6
- package/lib-commonjs/hooks/useTimeout.js.map +1 -1
- package/lib-commonjs/index.js +7 -11
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/ssr/SSRContext.js +4 -17
- package/lib-commonjs/ssr/SSRContext.js.map +1 -1
- package/lib-commonjs/ssr/canUseDOM.js +2 -3
- package/lib-commonjs/ssr/canUseDOM.js.map +1 -1
- package/lib-commonjs/ssr/index.js +0 -3
- package/lib-commonjs/ssr/index.js.map +1 -1
- package/lib-commonjs/trigger/applyTriggerPropsToChildren.js +2 -10
- package/lib-commonjs/trigger/applyTriggerPropsToChildren.js.map +1 -1
- package/lib-commonjs/trigger/getTriggerChild.js +2 -7
- package/lib-commonjs/trigger/getTriggerChild.js.map +1 -1
- package/lib-commonjs/trigger/index.js +0 -5
- package/lib-commonjs/trigger/index.js.map +1 -1
- package/lib-commonjs/trigger/isFluentTrigger.js +0 -2
- package/lib-commonjs/trigger/isFluentTrigger.js.map +1 -1
- package/lib-commonjs/trigger/types.js.map +1 -1
- package/lib-commonjs/utils/clamp.js +0 -2
- package/lib-commonjs/utils/clamp.js.map +1 -1
- package/lib-commonjs/utils/getNativeElementProps.js +0 -6
- package/lib-commonjs/utils/getNativeElementProps.js.map +1 -1
- package/lib-commonjs/utils/getRTLSafeKey.js +0 -4
- package/lib-commonjs/utils/getRTLSafeKey.js.map +1 -1
- package/lib-commonjs/utils/getReactCallbackName.js +0 -5
- package/lib-commonjs/utils/getReactCallbackName.js.map +1 -1
- package/lib-commonjs/utils/index.js +0 -9
- package/lib-commonjs/utils/index.js.map +1 -1
- package/lib-commonjs/utils/isHTMLElement.js +2 -4
- package/lib-commonjs/utils/isHTMLElement.js.map +1 -1
- package/lib-commonjs/utils/isInteractiveHTMLElement.js +0 -7
- package/lib-commonjs/utils/isInteractiveHTMLElement.js.map +1 -1
- package/lib-commonjs/utils/mergeCallbacks.js +0 -2
- package/lib-commonjs/utils/mergeCallbacks.js.map +1 -1
- package/lib-commonjs/utils/omit.js +0 -4
- package/lib-commonjs/utils/omit.js.map +1 -1
- package/lib-commonjs/utils/properties.js +7 -38
- package/lib-commonjs/utils/properties.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.json
CHANGED
@@ -2,7 +2,51 @@
|
|
2
2
|
"name": "@fluentui/react-utilities",
|
3
3
|
"entries": [
|
4
4
|
{
|
5
|
-
"date": "
|
5
|
+
"date": "Mon, 09 Jan 2023 14:31:49 GMT",
|
6
|
+
"tag": "@fluentui/react-utilities_v9.4.0",
|
7
|
+
"version": "9.4.0",
|
8
|
+
"comments": {
|
9
|
+
"minor": [
|
10
|
+
{
|
11
|
+
"author": "lingfangao@hotmail.com",
|
12
|
+
"package": "@fluentui/react-utilities",
|
13
|
+
"commit": "3c3291c008824d45e18580d51b6eb1526ea3792d",
|
14
|
+
"comment": "feat: implement `useScrollbarWidth` utility hook"
|
15
|
+
}
|
16
|
+
]
|
17
|
+
}
|
18
|
+
},
|
19
|
+
{
|
20
|
+
"date": "Wed, 04 Jan 2023 01:40:43 GMT",
|
21
|
+
"tag": "@fluentui/react-utilities_v9.3.1",
|
22
|
+
"version": "9.3.1",
|
23
|
+
"comments": {
|
24
|
+
"none": [
|
25
|
+
{
|
26
|
+
"author": "martinhochel@microsoft.com",
|
27
|
+
"package": "@fluentui/react-utilities",
|
28
|
+
"commit": "194b0cf0cc27c1c1233aa945f09b3ad29778d8ca",
|
29
|
+
"comment": "chore(scripts): use for @fluentui/scripts version within all package.json"
|
30
|
+
},
|
31
|
+
{
|
32
|
+
"author": "martinhochel@microsoft.com",
|
33
|
+
"package": "@fluentui/react-utilities",
|
34
|
+
"commit": "4ec2b998b294d6d9c3196d3d82893bdd97d0c105",
|
35
|
+
"comment": "chore(scripts): move index.ts to to follow sub-folder domain packaging"
|
36
|
+
}
|
37
|
+
],
|
38
|
+
"patch": [
|
39
|
+
{
|
40
|
+
"author": "bernardo.sunderhus@gmail.com",
|
41
|
+
"package": "@fluentui/react-utilities",
|
42
|
+
"commit": "2d76331327dc83bd7117e61e075a016e33b26731",
|
43
|
+
"comment": "feat: generalize is HTMLElement attribute to unknown"
|
44
|
+
}
|
45
|
+
]
|
46
|
+
}
|
47
|
+
},
|
48
|
+
{
|
49
|
+
"date": "Tue, 20 Dec 2022 14:59:33 GMT",
|
6
50
|
"tag": "@fluentui/react-utilities_v9.3.0",
|
7
51
|
"version": "9.3.0",
|
8
52
|
"comments": {
|
package/CHANGELOG.md
CHANGED
@@ -1,12 +1,30 @@
|
|
1
1
|
# Change Log - @fluentui/react-utilities
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Mon, 09 Jan 2023 14:31:49 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
+
## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.4.0)
|
8
|
+
|
9
|
+
Mon, 09 Jan 2023 14:31:49 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.3.1..@fluentui/react-utilities_v9.4.0)
|
11
|
+
|
12
|
+
### Minor changes
|
13
|
+
|
14
|
+
- feat: implement `useScrollbarWidth` utility hook ([PR #26144](https://github.com/microsoft/fluentui/pull/26144) by lingfangao@hotmail.com)
|
15
|
+
|
16
|
+
## [9.3.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.3.1)
|
17
|
+
|
18
|
+
Wed, 04 Jan 2023 01:40:43 GMT
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.3.0..@fluentui/react-utilities_v9.3.1)
|
20
|
+
|
21
|
+
### Patches
|
22
|
+
|
23
|
+
- feat: generalize is HTMLElement attribute to unknown ([PR #25991](https://github.com/microsoft/fluentui/pull/25991) by bernardo.sunderhus@gmail.com)
|
24
|
+
|
7
25
|
## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.3.0)
|
8
26
|
|
9
|
-
Tue, 20 Dec 2022 14:
|
27
|
+
Tue, 20 Dec 2022 14:59:33 GMT
|
10
28
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.2.2..@fluentui/react-utilities_v9.3.0)
|
11
29
|
|
12
30
|
### Minor changes
|
package/dist/index.d.ts
CHANGED
@@ -197,13 +197,13 @@ export declare function isFluentTrigger(element: React_2.ReactElement): element
|
|
197
197
|
* might be problematic while operating with [multiple realms](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof#instanceof_and_multiple_realms)
|
198
198
|
*
|
199
199
|
*/
|
200
|
-
export declare function isHTMLElement(element?:
|
200
|
+
export declare function isHTMLElement(element?: unknown): element is HTMLElement;
|
201
201
|
|
202
202
|
/**
|
203
203
|
* @internal
|
204
204
|
* Checks that the element has default behaviour from user input on click or 'Enter'/'Space' keys
|
205
205
|
*/
|
206
|
-
export declare function isInteractiveHTMLElement(element:
|
206
|
+
export declare function isInteractiveHTMLElement(element: unknown): boolean;
|
207
207
|
|
208
208
|
/**
|
209
209
|
* Guard method that validates if a shorthand is a slot
|
@@ -575,6 +575,22 @@ export declare const useOnScrollOutside: (options: UseOnClickOrScrollOutsideOpti
|
|
575
575
|
*/
|
576
576
|
export declare const usePrevious: <ValueType = unknown>(value: ValueType) => ValueType | null;
|
577
577
|
|
578
|
+
/**
|
579
|
+
* @returns The width in pixels of the scrollbar in the user agent
|
580
|
+
*/
|
581
|
+
export declare function useScrollbarWidth(options: UseScrollbarWidthOptions): number | undefined;
|
582
|
+
|
583
|
+
declare interface UseScrollbarWidthOptions {
|
584
|
+
/**
|
585
|
+
* Reference document to measure the scrollbar width
|
586
|
+
*/
|
587
|
+
targetDocument: Document | null | undefined;
|
588
|
+
/**
|
589
|
+
* Does not use the cache and recalculates the scrollbar width
|
590
|
+
*/
|
591
|
+
force?: boolean;
|
592
|
+
}
|
593
|
+
|
578
594
|
/**
|
579
595
|
* @internal
|
580
596
|
* Helper to manage a browser timeout.
|
package/lib/compose/getSlots.js
CHANGED
@@ -17,45 +17,37 @@ import { omit } from '../utils/omit';
|
|
17
17
|
* @param state - State including slot definitions
|
18
18
|
* @returns An object containing the `slots` map and `slotProps` map.
|
19
19
|
*/
|
20
|
-
|
21
20
|
export function getSlots(state) {
|
22
21
|
const slots = {};
|
23
22
|
const slotProps = {};
|
24
23
|
const slotNames = Object.keys(state.components);
|
25
|
-
|
26
24
|
for (const slotName of slotNames) {
|
27
25
|
const [slot, props] = getSlot(state, slotName);
|
28
26
|
slots[slotName] = slot;
|
29
27
|
slotProps[slotName] = props;
|
30
28
|
}
|
31
|
-
|
32
29
|
return {
|
33
30
|
slots,
|
34
31
|
slotProps: slotProps
|
35
32
|
};
|
36
33
|
}
|
37
|
-
|
38
34
|
function getSlot(state, slotName) {
|
39
35
|
var _a, _b, _c;
|
40
|
-
|
41
36
|
if (state[slotName] === undefined) {
|
42
37
|
return [null, undefined];
|
43
38
|
}
|
44
|
-
|
45
39
|
const {
|
46
40
|
children,
|
47
41
|
as: asProp,
|
48
42
|
...rest
|
49
43
|
} = state[slotName];
|
50
44
|
const slot = ((_a = state.components) === null || _a === void 0 ? void 0 : _a[slotName]) === undefined || typeof state.components[slotName] === 'string' ? asProp || ((_b = state.components) === null || _b === void 0 ? void 0 : _b[slotName]) || 'div' : state.components[slotName];
|
51
|
-
|
52
45
|
if (typeof children === 'function') {
|
53
46
|
const render = children;
|
54
47
|
return [React.Fragment, {
|
55
48
|
children: render(slot, rest)
|
56
49
|
}];
|
57
50
|
}
|
58
|
-
|
59
51
|
const shouldOmitAsProp = typeof slot === 'string' && ((_c = state[slotName]) === null || _c === void 0 ? void 0 : _c.as);
|
60
52
|
const slotProps = shouldOmitAsProp ? omit(state[slotName], ['as']) : state[slotName];
|
61
53
|
return [slot, slotProps];
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,IAAI,QAAQ,eAAe;AA6BpC;;;;;;;;;;;;;;;;;AAiBA,OAAM,SAAUC,QAAQ,CACtBC,KAAwB;EAKxB,MAAMC,KAAK,GAAG,EAAc;EAC5B,MAAMC,SAAS,GAAG,EAAO;EAEzB,MAAMC,SAAS,GAAgBC,MAAM,CAACC,IAAI,CAACL,KAAK,CAACM,UAAU,CAAC;EAC5D,KAAK,MAAMC,QAAQ,IAAIJ,SAAS,EAAE;IAChC,MAAM,CAACK,IAAI,EAAEC,KAAK,CAAC,GAAGC,OAAO,CAACV,KAAK,EAAEO,QAAQ,CAAC;IAC9CN,KAAK,CAACM,QAAQ,CAAC,GAAGC,IAAiC;IACnDN,SAAS,CAACK,QAAQ,CAAC,GAAGE,KAAK;;EAE7B,OAAO;IAAER,KAAK;IAAEC,SAAS,EAAGA;EAA2C,CAAE;AAC3E;AAEA,SAASQ,OAAO,CACdV,KAAwB,EACxBO,QAAW;;EAEX,IAAIP,KAAK,CAACO,QAAQ,CAAC,KAAKI,SAAS,EAAE;IACjC,OAAO,CAAC,IAAI,EAAEA,SAAiB,CAAC;;EAElC,MAAM;IAAEC,QAAQ;IAAEC,EAAE,EAAEC,MAAM;IAAE,GAAGC;EAAI,CAAE,GAAGf,KAAK,CAACO,QAAQ,CAAE;EAE1D,MAAMC,IAAI,GAAI,YAAK,CAACF,UAAU,0CAAGC,QAAQ,CAAC,MAAKI,SAAS,IAAI,OAAOX,KAAK,CAACM,UAAU,CAACC,QAAQ,CAAC,KAAK,QAAQ,GACtGO,MAAM,KAAI,WAAK,CAACR,UAAU,0CAAGC,QAAQ,CAAC,KAAI,KAAK,GAC/CP,KAAK,CAACM,UAAU,CAACC,QAAQ,CAA6B;EAE1D,IAAI,OAAOK,QAAQ,KAAK,UAAU,EAAE;IAClC,MAAMI,MAAM,GAAGJ,QAAoC;IACnD,OAAO,CACLf,KAAK,CAACoB,QAAQ,EACb;MACCL,QAAQ,EAAEI,MAAM,CAACR,IAAI,EAAEO,IAAqC;KACzC,CACtB;;EAGH,MAAMG,gBAAgB,GAAG,OAAOV,IAAI,KAAK,QAAQ,KAAI,WAAK,CAACD,QAAQ,CAAC,0CAAEM,EAAE;EACxE,MAAMX,SAAS,GAAIgB,gBAAgB,GAAGpB,IAAI,CAACE,KAAK,CAACO,QAAQ,CAAE,EAAE,CAAC,IAAI,CAAC,CAAC,GAAGP,KAAK,CAACO,QAAQ,CAAU;EAE/F,OAAO,CAACC,IAAI,EAAEN,SAAS,CAAC;AAC1B","names":["React","omit","getSlots","state","slots","slotProps","slotNames","Object","keys","components","slotName","slot","props","getSlot","undefined","children","as","asProp","rest","render","Fragment","shouldOmitAsProp"],"sourceRoot":"../src/","sources":["packages/react-components/react-utilities/src/compose/getSlots.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { omit } from '../utils/omit';\nimport type {\n AsIntrinsicElement,\n ComponentState,\n ExtractSlotProps,\n SlotPropsRecord,\n SlotRenderFunction,\n UnionToIntersection,\n} from './types';\n\nexport type Slots<S extends SlotPropsRecord> = {\n [K in keyof S]: ExtractSlotProps<S[K]> extends AsIntrinsicElement<infer As>\n ? // for slots with an `as` prop, the slot will be any one of the possible values of `as`\n As\n : ExtractSlotProps<S[K]> extends React.ComponentType<infer P>\n ? React.ElementType<NonNullable<P>>\n : React.ElementType<ExtractSlotProps<S[K]>>;\n};\n\ntype ObjectSlotProps<S extends SlotPropsRecord> = {\n [K in keyof S]-?: ExtractSlotProps<S[K]> extends AsIntrinsicElement<infer As>\n ? // For intrinsic element types, return the intersection of all possible\n // element's props, to be compatible with the As type returned by Slots<>\n UnionToIntersection<JSX.IntrinsicElements[As]>\n : ExtractSlotProps<S[K]> extends React.ComponentType<infer P>\n ? P\n : never;\n};\n\n/**\n * Given the state and an array of slot names, will break out `slots` and `slotProps`\n * collections.\n *\n * The root is derived from a mix of `components` props and `as` prop.\n *\n * Slots will render as null if they are rendered as primitives with undefined children.\n *\n * The slotProps will always omit the `as` prop within them, and for slots that are string\n * primitives, the props will be filtered according to the slot type by the type system.\n * For example, if the slot is rendered `as: 'a'`, the props will be filtered for acceptable\n * anchor props. Note that this is only enforced at build time by Typescript -- there is no\n * runtime code filtering props in this function.\n *\n * @param state - State including slot definitions\n * @returns An object containing the `slots` map and `slotProps` map.\n */\nexport function getSlots<R extends SlotPropsRecord>(\n state: ComponentState<R>,\n): {\n slots: Slots<R>;\n slotProps: ObjectSlotProps<R>;\n} {\n const slots = {} as Slots<R>;\n const slotProps = {} as R;\n\n const slotNames: (keyof R)[] = Object.keys(state.components);\n for (const slotName of slotNames) {\n const [slot, props] = getSlot(state, slotName);\n slots[slotName] = slot as Slots<R>[typeof slotName];\n slotProps[slotName] = props;\n }\n return { slots, slotProps: (slotProps as unknown) as ObjectSlotProps<R> };\n}\n\nfunction getSlot<R extends SlotPropsRecord, K extends keyof R>(\n state: ComponentState<R>,\n slotName: K,\n): readonly [React.ElementType<R[K]> | null, R[K]] {\n if (state[slotName] === undefined) {\n return [null, undefined as R[K]];\n }\n const { children, as: asProp, ...rest } = state[slotName]!;\n\n const slot = (state.components?.[slotName] === undefined || typeof state.components[slotName] === 'string'\n ? asProp || state.components?.[slotName] || 'div'\n : state.components[slotName]) as React.ElementType<R[K]>;\n\n if (typeof children === 'function') {\n const render = children as SlotRenderFunction<R[K]>;\n return [\n React.Fragment,\n ({\n children: render(slot, rest as Omit<R[K], 'children' | 'as'>),\n } as unknown) as R[K],\n ];\n }\n\n const shouldOmitAsProp = typeof slot === 'string' && state[slotName]?.as;\n const slotProps = (shouldOmitAsProp ? omit(state[slotName]!, ['as']) : state[slotName]) as R[K];\n\n return [slot, slotProps];\n}\n"]}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"AAAA,SAASA,cAAc,QAAQ,OAAO;AAGtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,OAAM,SAAUC,mBAAmB,CACjCC,SAAqB;EAErB,OAAOA,SAAS,KAAK,IAAI,IAAI,OAAOA,SAAS,KAAK,QAAQ,IAAI,CAACC,KAAK,CAACC,OAAO,CAACF,SAAS,CAAC,IAAI,eAACF,cAAc,CAACE,SAAS,CAAC;AACvH","names":["isValidElement","isResolvedShorthand","shorthand","Array","isArray"],"sourceRoot":"../src/","sources":["packages/react-components/react-utilities/src/compose/isResolvedShorthand.ts"],"sourcesContent":["import { isValidElement } from 'react';\nimport type { ExtractSlotProps, Slot, UnknownSlotProps } from './types';\n\n/**\n * Guard method that validates if a shorthand is a slot\n * can be used to extends properties provided by a slot\n *\n * @example\n * ```\n * const backdropSlot = resolveShorthand(backdrop, {\n * defaultProps: {\n * onClick: useEventCallback(event => {\n * if (isResolvedShorthand(backdrop)) {\n * backdrop.onClick?.(event)\n * }\n * // do something after passing click down the line\n * }),\n * },\n * })\n * ```\n * @example\n * ```\n * const handleBackDropClick = (event) => {\n * // do your thing\n * }\n * const backdropSlot = resolveShorthand(backdrop, {\n * defaultProps: {\n * onClick: useEventCallback(\n * mergeCallbacks(isResolvedShorthand(backdrop) ? backdrop.onClick : undefined, handleBackdropClick)\n * )\n * })\n * ```\n */\nexport function isResolvedShorthand<Shorthand extends Slot<UnknownSlotProps>>(\n shorthand?: Shorthand,\n): shorthand is ExtractSlotProps<Shorthand> {\n return shorthand !== null && typeof shorthand === 'object' && !Array.isArray(shorthand) && !isValidElement(shorthand);\n}\n"]}
|
@@ -5,26 +5,22 @@ import { isValidElement } from 'react';
|
|
5
5
|
* @param value - the base shorthand props
|
6
6
|
* @param options - options to resolve shorthand props
|
7
7
|
*/
|
8
|
-
|
9
8
|
export const resolveShorthand = (value, options) => {
|
10
9
|
const {
|
11
10
|
required = false,
|
12
11
|
defaultProps
|
13
12
|
} = options || {};
|
14
|
-
|
15
13
|
if (value === null || value === undefined && !required) {
|
16
14
|
return undefined;
|
17
15
|
}
|
18
|
-
|
19
16
|
let resolvedShorthand = {};
|
20
|
-
|
21
17
|
if (typeof value === 'string' || typeof value === 'number' || Array.isArray(value) || /*#__PURE__*/isValidElement(value)) {
|
22
18
|
resolvedShorthand.children = value;
|
23
19
|
} else if (typeof value === 'object') {
|
24
20
|
resolvedShorthand = value;
|
25
21
|
}
|
26
|
-
|
27
|
-
|
22
|
+
return defaultProps ? {
|
23
|
+
...defaultProps,
|
28
24
|
...resolvedShorthand
|
29
25
|
} : resolvedShorthand;
|
30
26
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"AAAA,SAASA,cAAc,QAAQ,OAAO;AAkBtC;;;;;;AAMA,OAAO,MAAMC,gBAAgB,GAA6B,CAACC,KAAK,EAAEC,OAAO,KAAI;EAC3E,MAAM;IAAEC,QAAQ,GAAG,KAAK;IAAEC;EAAY,CAAE,GAAGF,OAAO,IAAI,EAAE;EACxD,IAAID,KAAK,KAAK,IAAI,IAAKA,KAAK,KAAKI,SAAS,IAAI,CAACF,QAAS,EAAE;IACxD,OAAOE,SAAS;;EAGlB,IAAIC,iBAAiB,GAAG,EAAsB;EAE9C,IAAI,OAAOL,KAAK,KAAK,QAAQ,IAAI,OAAOA,KAAK,KAAK,QAAQ,IAAIM,KAAK,CAACC,OAAO,CAACP,KAAK,CAAC,iBAAIF,cAAc,CAACE,KAAK,CAAC,EAAE;IAC3GK,iBAAiB,CAACG,QAAQ,GAAGR,KAAK;GACnC,MAAM,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;IACpCK,iBAAiB,GAAGL,KAAK;;EAG3B,OAAOG,YAAY,GAAG;IAAE,GAAGA,YAAY;IAAE,GAAGE;EAAiB,CAAE,GAAGA,iBAAiB;AACrF,CAAC","names":["isValidElement","resolveShorthand","value","options","required","defaultProps","undefined","resolvedShorthand","Array","isArray","children"],"sourceRoot":"../src/","sources":["packages/react-components/react-utilities/src/compose/resolveShorthand.ts"],"sourcesContent":["import { isValidElement } from 'react';\nimport type { ReplaceNullWithUndefined, SlotShorthandValue, UnknownSlotProps } from './types';\n\nexport type ResolveShorthandOptions<Props, Required extends boolean = false> = {\n required?: Required;\n defaultProps?: Props;\n};\n\nexport type ResolveShorthandFunction<Props extends UnknownSlotProps = UnknownSlotProps> = {\n <P extends Props | null>(\n value: P | SlotShorthandValue | undefined,\n options?: ResolveShorthandOptions<P, true>,\n ): ReplaceNullWithUndefined<P>;\n <P extends Props | null>(value: P | SlotShorthandValue | undefined, options?: ResolveShorthandOptions<P, boolean>):\n | ReplaceNullWithUndefined<P>\n | undefined;\n};\n\n/**\n * Resolves shorthands into slot props, to ensure normalization of the signature\n * being passed down to getSlots method\n * @param value - the base shorthand props\n * @param options - options to resolve shorthand props\n */\nexport const resolveShorthand: ResolveShorthandFunction = (value, options) => {\n const { required = false, defaultProps } = options || {};\n if (value === null || (value === undefined && !required)) {\n return undefined;\n }\n\n let resolvedShorthand = {} as UnknownSlotProps;\n\n if (typeof value === 'string' || typeof value === 'number' || Array.isArray(value) || isValidElement(value)) {\n resolvedShorthand.children = value;\n } else if (typeof value === 'object') {\n resolvedShorthand = value;\n }\n\n return defaultProps ? { ...defaultProps, ...resolvedShorthand } : resolvedShorthand;\n};\n"]}
|
package/lib/hooks/index.js
CHANGED
package/lib/hooks/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-utilities/src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC","sourcesContent":["export * from './useControllableState';\nexport * from './useEventCallback';\nexport * from './useFirstMount';\nexport * from './useForceUpdate';\nexport * from './useId';\nexport * from './useIsomorphicLayoutEffect';\nexport * from './useMergedRefs';\nexport * from './useOnClickOutside';\nexport * from './useOnScrollOutside';\nexport * from './usePrevious';\nexport * from './useTimeout';\n"]}
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-utilities/src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC","sourcesContent":["export * from './useControllableState';\nexport * from './useEventCallback';\nexport * from './useFirstMount';\nexport * from './useForceUpdate';\nexport * from './useId';\nexport * from './useIsomorphicLayoutEffect';\nexport * from './useMergedRefs';\nexport * from './useOnClickOutside';\nexport * from './useOnScrollOutside';\nexport * from './usePrevious';\nexport * from './useScrollbarWidth';\nexport * from './useTimeout';\n"]}
|
@@ -1,5 +1,4 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
|
3
2
|
function isFactoryDispatch(newState) {
|
4
3
|
return typeof newState === 'function';
|
5
4
|
}
|
@@ -19,8 +18,6 @@ function isFactoryDispatch(newState) {
|
|
19
18
|
* to the updater function will only be respected if the component is uncontrolled.
|
20
19
|
* @see https://reactjs.org/docs/uncontrolled-components.html
|
21
20
|
*/
|
22
|
-
|
23
|
-
|
24
21
|
export const useControllableState = options => {
|
25
22
|
const isControlled = useIsControlled(options.state);
|
26
23
|
const initialState = typeof options.defaultState === 'undefined' ? options.initialState : options.defaultState;
|
@@ -29,9 +26,9 @@ export const useControllableState = options => {
|
|
29
26
|
const stateRef = React.useRef(state);
|
30
27
|
React.useEffect(() => {
|
31
28
|
stateRef.current = state;
|
32
|
-
}, [state]);
|
29
|
+
}, [state]);
|
30
|
+
// To match the behavior of the setter returned by React.useState, this callback's identity
|
33
31
|
// should never change. This means it MUST NOT directly reference variables that can change.
|
34
|
-
|
35
32
|
const setState = React.useCallback(newState => {
|
36
33
|
// React dispatch can use a factory
|
37
34
|
// https://reactjs.org/docs/hooks-reference.html#functional-updates
|
@@ -40,7 +37,6 @@ export const useControllableState = options => {
|
|
40
37
|
} else {
|
41
38
|
stateRef.current = newState;
|
42
39
|
}
|
43
|
-
|
44
40
|
setInternalState(stateRef.current);
|
45
41
|
}, []);
|
46
42
|
return [state, setState];
|
@@ -50,10 +46,8 @@ export const useControllableState = options => {
|
|
50
46
|
* Prints an error when isControlled value switches between subsequent renders
|
51
47
|
* @returns - whether the value is controlled
|
52
48
|
*/
|
53
|
-
|
54
49
|
const useIsControlled = controlledValue => {
|
55
50
|
const [isControlled] = React.useState(() => controlledValue !== undefined);
|
56
|
-
|
57
51
|
if (process.env.NODE_ENV !== 'production') {
|
58
52
|
// We don't want these warnings in production even though it is against native behaviour
|
59
53
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
@@ -61,14 +55,14 @@ const useIsControlled = controlledValue => {
|
|
61
55
|
if (isControlled !== (controlledValue !== undefined)) {
|
62
56
|
const error = new Error();
|
63
57
|
const controlWarning = isControlled ? 'a controlled value to be uncontrolled' : 'an uncontrolled value to be controlled';
|
64
|
-
const undefinedWarning = isControlled ? 'defined to an undefined' : 'undefined to a defined';
|
65
|
-
|
66
|
-
console.error([
|
58
|
+
const undefinedWarning = isControlled ? 'defined to an undefined' : 'undefined to a defined';
|
59
|
+
// eslint-disable-next-line no-console
|
60
|
+
console.error([
|
61
|
+
// Default react error
|
67
62
|
'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(' '));
|
68
63
|
}
|
69
64
|
}, [isControlled, controlledValue]);
|
70
65
|
}
|
71
|
-
|
72
66
|
return isControlled;
|
73
67
|
};
|
74
68
|
//# sourceMappingURL=useControllableState.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAqB9B,SAASC,iBAAiB,CAAQC,QAAqC;EACrE,OAAO,OAAOA,QAAQ,KAAK,UAAU;AACvC;AAEA;;;;;;;;;;;;;;;;AAgBA,OAAO,MAAMC,oBAAoB,GAC/BC,OAA2C,IACa;EACxD,MAAMC,YAAY,GAAGC,eAAe,CAACF,OAAO,CAACG,KAAK,CAAC;EACnD,MAAMC,YAAY,GAAG,OAAOJ,OAAO,CAACK,YAAY,KAAK,WAAW,GAAGL,OAAO,CAACI,YAAY,GAAGJ,OAAO,CAACK,YAAY;EAC9G,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGX,KAAK,CAACY,QAAQ,CAAQJ,YAAY,CAAC;EAE7E,MAAMD,KAAK,GAAGF,YAAY,GAAID,OAAO,CAACG,KAAe,GAAGG,aAAa;EAErE,MAAMG,QAAQ,GAAGb,KAAK,CAACc,MAAM,CAACP,KAAK,CAAC;EACpCP,KAAK,CAACe,SAAS,CAAC,MAAK;IACnBF,QAAQ,CAACG,OAAO,GAAGT,KAAK;EAC1B,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX;EACA;EACA,MAAMU,QAAQ,GAAGjB,KAAK,CAACkB,WAAW,CAAEhB,QAAqC,IAAI;IAC3E;IACA;IACA,IAAID,iBAAiB,CAACC,QAAQ,CAAC,EAAE;MAC/BW,QAAQ,CAACG,OAAO,GAAGd,QAAQ,CAACW,QAAQ,CAACG,OAAO,CAAC;KAC9C,MAAM;MACLH,QAAQ,CAACG,OAAO,GAAGd,QAAQ;;IAG7BS,gBAAgB,CAACE,QAAQ,CAACG,OAAO,CAAC;EACpC,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,CAACT,KAAK,EAAEU,QAAQ,CAAC;AAC1B,CAAC;AAED;;;;;AAKA,MAAMX,eAAe,GAAIa,eAAwB,IAAI;EACnD,MAAM,CAACd,YAAY,CAAC,GAAGL,KAAK,CAACY,QAAQ,CAAU,MAAMO,eAAe,KAAKC,SAAS,CAAC;EAEnF,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;IACzC;IACA;IACAvB,KAAK,CAACe,SAAS,CAAC,MAAK;MACnB,IAAIV,YAAY,MAAMc,eAAe,KAAKC,SAAS,CAAC,EAAE;QACpD,MAAMI,KAAK,GAAG,IAAIC,KAAK,EAAE;QAEzB,MAAMC,cAAc,GAAGrB,YAAY,GAC/B,uCAAuC,GACvC,wCAAwC;QAE5C,MAAMsB,gBAAgB,GAAGtB,YAAY,GAAG,yBAAyB,GAAG,wBAAwB;QAE5F;QACAuB,OAAO,CAACJ,KAAK,CACX;QACE;QACA,0BAA0B,GAAGE,cAAc,GAAG,sCAAsC,EACpF,gBAAgB,GAAGC,gBAAgB,GAAG,kCAAkC,EACxE,oGAAoG,EACpG,2DAA2D,EAC3DH,KAAK,CAACK,KAAK,CACZ,CAACC,IAAI,CAAC,GAAG,CAAC,CACZ;;IAEL,CAAC,EAAE,CAACzB,YAAY,EAAEc,eAAe,CAAC,CAAC;;EAGrC,OAAOd,YAAY;AACrB,CAAC","names":["React","isFactoryDispatch","newState","useControllableState","options","isControlled","useIsControlled","state","initialState","defaultState","internalState","setInternalState","useState","stateRef","useRef","useEffect","current","setState","useCallback","controlledValue","undefined","process","env","NODE_ENV","error","Error","controlWarning","undefinedWarning","console","stack","join"],"sourceRoot":"../src/","sources":["packages/react-components/react-utilities/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\nfunction isFactoryDispatch<State>(newState: React.SetStateAction<State>): newState is (prevState: State) => State {\n return typeof newState === 'function';\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 isControlled = useIsControlled(options.state);\n const initialState = typeof options.defaultState === 'undefined' ? options.initialState : options.defaultState;\n const [internalState, setInternalState] = React.useState<State>(initialState);\n\n const state = isControlled ? (options.state as State) : internalState;\n\n const stateRef = React.useRef(state);\n React.useEffect(() => {\n stateRef.current = state;\n }, [state]);\n\n // To match the behavior of the setter returned by React.useState, this callback's identity\n // should never change. This means it MUST NOT directly reference variables that can change.\n const setState = React.useCallback((newState: React.SetStateAction<State>) => {\n // React dispatch can use a factory\n // https://reactjs.org/docs/hooks-reference.html#functional-updates\n if (isFactoryDispatch(newState)) {\n stateRef.current = newState(stateRef.current);\n } else {\n stateRef.current = newState;\n }\n\n setInternalState(stateRef.current);\n }, []);\n\n return [state, setState];\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 = (controlledValue: unknown) => {\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"]}
|
@@ -13,7 +13,6 @@ import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
|
|
13
13
|
*
|
14
14
|
* @param fn - The callback function that will be used
|
15
15
|
*/
|
16
|
-
|
17
16
|
export const useEventCallback = fn => {
|
18
17
|
const callbackRef = React.useRef(() => {
|
19
18
|
throw new Error('Cannot call an event handler while rendering');
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,yBAAyB,QAAQ,6BAA6B;AAEvE;;;;;;;;;;;;;AAaA,OAAO,MAAMC,gBAAgB,GAAoCC,EAA6B,IAAI;EAChG,MAAMC,WAAW,GAAGJ,KAAK,CAACK,MAAM,CAAY,MAAK;IAC/C,MAAM,IAAIC,KAAK,CAAC,8CAA8C,CAAC;EACjE,CAAC,CAAC;EAEFL,yBAAyB,CAAC,MAAK;IAC7BG,WAAW,CAACG,OAAO,GAAGJ,EAAE;EAC1B,CAAC,EAAE,CAACA,EAAE,CAAC,CAAC;EAER,OAAOH,KAAK,CAACQ,WAAW,CACtB,CAAC,GAAGC,IAAU,KAAI;IAChB,MAAMC,QAAQ,GAAGN,WAAW,CAACG,OAAO;IACpC,OAAOG,QAAQ,CAAC,GAAGD,IAAI,CAAC;EAC1B,CAAC,EACD,CAACL,WAAW,CAAC,CACd;AACH,CAAC","names":["React","useIsomorphicLayoutEffect","useEventCallback","fn","callbackRef","useRef","Error","current","useCallback","args","callback"],"sourceRoot":"../src/","sources":["packages/react-components/react-utilities/src/hooks/useEventCallback.ts"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\n\n/**\n * @internal\n * https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback\n *\n * Modified `useCallback` that can be used when dependencies change too frequently. Can occur when\n * e.g. user props are dependencies which could change on every render\n * e.g. volatile values (i.e. useState/useDispatch) are dependencies which could change frequently\n *\n * This should not be used often, but can be a useful re-render optimization since the callback is a ref and\n * will not be invalidated between re-renders\n *\n * @param fn - The callback function that will be used\n */\nexport const useEventCallback = <Args extends unknown[], Return>(fn: (...args: Args) => Return) => {\n const callbackRef = React.useRef<typeof fn>(() => {\n throw new Error('Cannot call an event handler while rendering');\n });\n\n useIsomorphicLayoutEffect(() => {\n callbackRef.current = fn;\n }, [fn]);\n\n return React.useCallback(\n (...args: Args) => {\n const callback = callbackRef.current;\n return callback(...args);\n },\n [callbackRef],\n );\n};\n"]}
|
@@ -10,15 +10,12 @@ import * as React from 'react';
|
|
10
10
|
* @example
|
11
11
|
* const isFirstMount = useFirstMount();
|
12
12
|
*/
|
13
|
-
|
14
13
|
export function useFirstMount() {
|
15
14
|
const isFirst = React.useRef(true);
|
16
|
-
|
17
15
|
if (isFirst.current) {
|
18
16
|
isFirst.current = false;
|
19
17
|
return true;
|
20
18
|
}
|
21
|
-
|
22
19
|
return isFirst.current;
|
23
20
|
}
|
24
21
|
//# sourceMappingURL=useFirstMount.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B;;;;;;;;;;;AAWA,OAAM,SAAUC,aAAa;EAC3B,MAAMC,OAAO,GAAGF,KAAK,CAACG,MAAM,CAAC,IAAI,CAAC;EAElC,IAAID,OAAO,CAACE,OAAO,EAAE;IACnBF,OAAO,CAACE,OAAO,GAAG,KAAK;IACvB,OAAO,IAAI;;EAGb,OAAOF,OAAO,CAACE,OAAO;AACxB","names":["React","useFirstMount","isFirst","useRef","current"],"sourceRoot":"../src/","sources":["packages/react-components/react-utilities/src/hooks/useFirstMount.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * @internal\n * Checks if components was mounted the first time.\n * Since concurrent mode will be released in the future this needs to be verified\n * Currently (React 17) will always render the initial mount once\n * https://codesandbox.io/s/heuristic-brook-s4w0q?file=/src/App.jsx\n * https://codesandbox.io/s/holy-grass-8nieu?file=/src/App.jsx\n *\n * @example\n * const isFirstMount = useFirstMount();\n */\nexport function useFirstMount(): boolean {\n const isFirst = React.useRef(true);\n\n if (isFirst.current) {\n isFirst.current = false;\n return true;\n }\n\n return isFirst.current;\n}\n"]}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"AAAA,SAASA,UAAU,QAAQ,OAAO;AAElC;;;;AAIA,OAAM,SAAUC,cAAc;EAC5B,OAAOD,UAAU,CAACE,CAAC,IAAIA,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AACrC","names":["useReducer","useForceUpdate","x"],"sourceRoot":"../src/","sources":["packages/react-components/react-utilities/src/hooks/useForceUpdate.ts"],"sourcesContent":["import { useReducer } from 'react';\n\n/**\n * @internal\n * Forces a re-render, similar to `forceUpdate` in class components.\n */\nexport function useForceUpdate() {\n return useReducer(x => x + 1, 0)[1];\n}\n"]}
|
package/lib/hooks/useId.js
CHANGED
@@ -3,7 +3,6 @@ import { defaultSSRContextValue, useSSRContext } from '../ssr/index';
|
|
3
3
|
/**
|
4
4
|
* Resets generated IDs, should be used only in tests.
|
5
5
|
*/
|
6
|
-
|
7
6
|
export function resetIdsForTests() {
|
8
7
|
defaultSSRContextValue.current = 0;
|
9
8
|
}
|
@@ -15,14 +14,12 @@ export function resetIdsForTests() {
|
|
15
14
|
* without conditioning the hook call
|
16
15
|
* @returns The ID
|
17
16
|
*/
|
18
|
-
|
19
17
|
export function useId(prefix = 'fui-', providedId) {
|
20
18
|
const contextValue = useSSRContext();
|
21
19
|
return React.useMemo(() => {
|
22
20
|
if (providedId) {
|
23
21
|
return providedId;
|
24
22
|
}
|
25
|
-
|
26
23
|
return `${prefix}${++contextValue.current}`;
|
27
24
|
}, [prefix, providedId, contextValue]);
|
28
25
|
}
|
package/lib/hooks/useId.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,sBAAsB,EAAEC,aAAa,QAAQ,cAAc;AAEpE;;;AAGA,OAAM,SAAUC,gBAAgB;EAC9BF,sBAAsB,CAACG,OAAO,GAAG,CAAC;AACpC;AAEA;;;;;;;;AAQA,OAAM,SAAUC,KAAK,CAACC,SAAiB,MAAM,EAAEC,UAAmB;EAChE,MAAMC,YAAY,GAAGN,aAAa,EAAE;EAEpC,OAAOF,KAAK,CAACS,OAAO,CAAC,MAAK;IACxB,IAAIF,UAAU,EAAE;MACd,OAAOA,UAAU;;IAGnB,OAAO,GAAGD,MAAM,GAAG,EAAEE,YAAY,CAACJ,OAAO,EAAE;EAC7C,CAAC,EAAE,CAACE,MAAM,EAAEC,UAAU,EAAEC,YAAY,CAAC,CAAC;AACxC","names":["React","defaultSSRContextValue","useSSRContext","resetIdsForTests","current","useId","prefix","providedId","contextValue","useMemo"],"sourceRoot":"../src/","sources":["packages/react-components/react-utilities/src/hooks/useId.ts"],"sourcesContent":["import * as React from 'react';\nimport { defaultSSRContextValue, useSSRContext } from '../ssr/index';\n\n/**\n * Resets generated IDs, should be used only in tests.\n */\nexport function resetIdsForTests(): void {\n defaultSSRContextValue.current = 0;\n}\n\n/**\n * Hook to generate a unique ID.\n *\n * @param prefix - Optional prefix for the ID. Defaults to 'fui-'.\n * @param providedId - Optional id provided by a parent component. Defaults to the provided value if present,\n * without conditioning the hook call\n * @returns The ID\n */\nexport function useId(prefix: string = 'fui-', providedId?: string): string {\n const contextValue = useSSRContext();\n\n return React.useMemo(() => {\n if (providedId) {\n return providedId;\n }\n\n return `${prefix}${++contextValue.current}`;\n }, [prefix, providedId, contextValue]);\n}\n"]}
|
@@ -10,6 +10,5 @@ import { canUseDOM } from '../ssr/index';
|
|
10
10
|
* https://github.com/reduxjs/react-redux/blob/master/src/utils/useIsomorphicLayoutEffect.js
|
11
11
|
*/
|
12
12
|
// eslint-disable-next-line no-restricted-properties
|
13
|
-
|
14
13
|
export const useIsomorphicLayoutEffect = /*#__PURE__*/canUseDOM() ? React.useLayoutEffect : React.useEffect;
|
15
14
|
//# sourceMappingURL=useIsomorphicLayoutEffect.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,SAAS,QAAQ,cAAc;AAExC;;;;;;;;;AASA;AACA,OAAO,MAAMC,yBAAyB,GAA2B,sBAAS,EAAE,GAAGF,KAAK,CAACG,eAAe,GAAGH,KAAK,CAACI,SAAS","names":["React","canUseDOM","useIsomorphicLayoutEffect","useLayoutEffect","useEffect"],"sourceRoot":"../src/","sources":["packages/react-components/react-utilities/src/hooks/useIsomorphicLayoutEffect.ts"],"sourcesContent":["import * as React from 'react';\nimport { canUseDOM } from '../ssr/index';\n\n/**\n * React currently throws a warning when using useLayoutEffect on the server. To get around it, we can conditionally\n * useEffect on the server (no-op) and useLayoutEffect in the browser. We occasionally need useLayoutEffect to\n * ensure we don't get a render flash for certain operations, but we may also need affected components to render on\n * the server.\n *\n * https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\n * https://github.com/reduxjs/react-redux/blob/master/src/utils/useIsomorphicLayoutEffect.js\n */\n// eslint-disable-next-line no-restricted-properties\nexport const useIsomorphicLayoutEffect: typeof React.useEffect = canUseDOM() ? React.useLayoutEffect : React.useEffect;\n"]}
|
@@ -5,12 +5,10 @@ import * as React from 'react';
|
|
5
5
|
* @param refs - Refs to collectively update with one ref value.
|
6
6
|
* @returns A function with an attached "current" prop, so that it can be treated like a RefObject.
|
7
7
|
*/
|
8
|
-
|
9
8
|
export function useMergedRefs(...refs) {
|
10
9
|
const mergedCallback = React.useCallback(value => {
|
11
10
|
// Update the "current" prop hanging on the function.
|
12
11
|
mergedCallback.current = value;
|
13
|
-
|
14
12
|
for (const ref of refs) {
|
15
13
|
if (typeof ref === 'function') {
|
16
14
|
ref(value);
|
@@ -19,7 +17,8 @@ export function useMergedRefs(...refs) {
|
|
19
17
|
ref.current = value;
|
20
18
|
}
|
21
19
|
}
|
22
|
-
},
|
20
|
+
},
|
21
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps -- already exhaustive
|
23
22
|
[...refs]);
|
24
23
|
return mergedCallback;
|
25
24
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAQ9B;;;;;;AAMA,OAAM,SAAUC,aAAa,CAAI,GAAGC,IAAkC;EACpE,MAAMC,cAAc,GAA0BH,KAAK,CAACI,WAAW,CAC5DC,KAAQ,IAAI;IACX;IACEF,cAAwD,CAACG,OAAO,GAAGD,KAAK;IAE1E,KAAK,MAAME,GAAG,IAAIL,IAAI,EAAE;MACtB,IAAI,OAAOK,GAAG,KAAK,UAAU,EAAE;QAC7BA,GAAG,CAACF,KAAK,CAAC;OACX,MAAM,IAAIE,GAAG,EAAE;QACd;QACEA,GAA6C,CAACD,OAAO,GAAGD,KAAK;;;EAGrE,CAAC;EACD;EACA,CAAC,GAAGH,IAAI,CAAC,CAC0B;EAErC,OAAOC,cAAc;AACvB","names":["React","useMergedRefs","refs","mergedCallback","useCallback","value","current","ref"],"sourceRoot":"../src/","sources":["packages/react-components/react-utilities/src/hooks/useMergedRefs.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * A Ref function which can be treated like a ref object in that it has an attached\n * current property, which will be updated as the ref is evaluated.\n */\nexport type RefObjectFunction<T> = React.RefObject<T> & ((value: T) => void);\n\n/**\n * React hook to merge multiple React refs (either MutableRefObjects or ref callbacks) into a single ref callback that\n * updates all provided refs\n * @param refs - Refs to collectively update with one ref value.\n * @returns A function with an attached \"current\" prop, so that it can be treated like a RefObject.\n */\nexport function useMergedRefs<T>(...refs: (React.Ref<T> | undefined)[]): RefObjectFunction<T> {\n const mergedCallback: RefObjectFunction<T> = (React.useCallback(\n (value: T) => {\n // Update the \"current\" prop hanging on the function.\n ((mergedCallback as unknown) as React.MutableRefObject<T>).current = value;\n\n for (const ref of refs) {\n if (typeof ref === 'function') {\n ref(value);\n } else if (ref) {\n // work around the immutability of the React.Ref type\n ((ref as unknown) as React.MutableRefObject<T>).current = value;\n }\n }\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps -- already exhaustive\n [...refs],\n ) as unknown) as RefObjectFunction<T>;\n\n return mergedCallback;\n}\n"]}
|