@fluentui/react-utilities 9.0.0-nightly.f81b28ceb3.1 → 9.0.0-rc.4
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 +209 -8
- package/CHANGELOG.md +64 -6
- package/dist/react-utilities.d.ts +225 -198
- package/lib/compose/getSlots.d.ts +11 -10
- package/lib/compose/getSlots.js +21 -30
- package/lib/compose/getSlots.js.map +1 -1
- package/lib/compose/index.d.ts +0 -5
- package/lib/compose/index.js +0 -5
- package/lib/compose/index.js.map +1 -1
- package/lib/compose/resolveShorthand.d.ts +10 -6
- package/lib/compose/resolveShorthand.js +13 -12
- package/lib/compose/resolveShorthand.js.map +1 -1
- package/lib/compose/types.d.ts +86 -76
- package/lib/compose/types.js +5 -1
- package/lib/compose/types.js.map +1 -1
- package/lib/hooks/index.d.ts +1 -1
- package/lib/hooks/index.js +1 -1
- package/lib/hooks/index.js.map +1 -1
- package/lib/hooks/useBoolean.js +10 -21
- package/lib/hooks/useBoolean.js.map +1 -1
- package/lib/hooks/useConst.js +1 -1
- package/lib/hooks/useConst.js.map +1 -1
- package/lib/hooks/useControllableState.d.ts +16 -6
- package/lib/hooks/useControllableState.js +26 -25
- package/lib/hooks/useControllableState.js.map +1 -1
- package/lib/hooks/useEventCallback.js +6 -12
- package/lib/hooks/useEventCallback.js.map +1 -1
- package/lib/hooks/useFirstMount.js +1 -1
- package/lib/hooks/useFirstMount.js.map +1 -1
- package/lib/hooks/useForceUpdate.js +1 -3
- package/lib/hooks/useForceUpdate.js.map +1 -1
- package/lib/hooks/useId.d.ts +1 -1
- package/lib/hooks/useId.js +9 -5
- package/lib/hooks/useId.js.map +1 -1
- package/lib/hooks/useIsomorphicLayoutEffect.js +1 -1
- package/lib/hooks/useIsomorphicLayoutEffect.js.map +1 -1
- package/lib/hooks/useMergedEventCallbacks.d.ts +18 -0
- package/lib/hooks/useMergedEventCallbacks.js +26 -0
- package/lib/hooks/useMergedEventCallbacks.js.map +1 -0
- package/lib/hooks/useMergedRefs.js +5 -13
- package/lib/hooks/useMergedRefs.js.map +1 -1
- package/lib/hooks/useMount.js +3 -3
- package/lib/hooks/useMount.js.map +1 -1
- package/lib/hooks/useOnClickOutside.js +30 -36
- package/lib/hooks/useOnClickOutside.js.map +1 -1
- package/lib/hooks/useOnScrollOutside.js +13 -15
- package/lib/hooks/useOnScrollOutside.js.map +1 -1
- package/lib/hooks/usePrevious.js +3 -3
- package/lib/hooks/usePrevious.js.map +1 -1
- package/lib/hooks/useTimeout.js +13 -17
- package/lib/hooks/useTimeout.js.map +1 -1
- package/lib/hooks/useUnmount.js +5 -7
- package/lib/hooks/useUnmount.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib/ssr/SSRContext.js +9 -15
- package/lib/ssr/SSRContext.js.map +1 -1
- package/lib/ssr/canUseDOM.js.map +1 -1
- package/lib/ssr/index.js.map +1 -1
- package/lib/utils/applyTriggerPropsToChildren.d.ts +1 -1
- package/lib/utils/applyTriggerPropsToChildren.js +24 -4
- package/lib/utils/applyTriggerPropsToChildren.js.map +1 -1
- package/lib/utils/clamp.js +1 -3
- package/lib/utils/clamp.js.map +1 -1
- package/lib/utils/getNativeElementProps.d.ts +22 -0
- package/lib/utils/getNativeElementProps.js +26 -3
- package/lib/utils/getNativeElementProps.js.map +1 -1
- package/lib/utils/getRTLSafeKey.js +1 -1
- package/lib/utils/getRTLSafeKey.js.map +1 -1
- package/lib/utils/getReactCallbackName.d.ts +25 -0
- package/lib/utils/getReactCallbackName.js +26 -0
- package/lib/utils/getReactCallbackName.js.map +1 -0
- package/lib/utils/getTriggerChild.d.ts +22 -0
- package/lib/utils/getTriggerChild.js +26 -0
- package/lib/utils/getTriggerChild.js.map +1 -0
- package/lib/utils/index.d.ts +2 -1
- package/lib/utils/index.js +2 -1
- package/lib/utils/index.js.map +1 -1
- package/lib/utils/isFluentTrigger.d.ts +22 -0
- package/lib/utils/isFluentTrigger.js +8 -0
- package/lib/utils/isFluentTrigger.js.map +1 -0
- package/lib/utils/omit.js +2 -2
- package/lib/utils/omit.js.map +1 -1
- package/lib/utils/properties.d.ts +6 -0
- package/lib/utils/properties.js +63 -44
- package/lib/utils/properties.js.map +1 -1
- package/lib/utils/shouldPreventDefaultOnKeyDown.js +4 -4
- package/lib/utils/shouldPreventDefaultOnKeyDown.js.map +1 -1
- package/lib-commonjs/compose/getSlots.d.ts +11 -10
- package/lib-commonjs/compose/getSlots.js +23 -34
- package/lib-commonjs/compose/getSlots.js.map +1 -1
- package/lib-commonjs/compose/index.d.ts +0 -5
- package/lib-commonjs/compose/index.js +1 -11
- package/lib-commonjs/compose/index.js.map +1 -1
- package/lib-commonjs/compose/resolveShorthand.d.ts +10 -6
- package/lib-commonjs/compose/resolveShorthand.js +14 -14
- package/lib-commonjs/compose/resolveShorthand.js.map +1 -1
- package/lib-commonjs/compose/types.d.ts +86 -76
- package/lib-commonjs/compose/types.js +5 -1
- package/lib-commonjs/compose/types.js.map +1 -1
- package/lib-commonjs/hooks/index.d.ts +1 -1
- package/lib-commonjs/hooks/index.js +3 -3
- package/lib-commonjs/hooks/index.js.map +1 -1
- package/lib-commonjs/hooks/useBoolean.js +12 -23
- package/lib-commonjs/hooks/useBoolean.js.map +1 -1
- package/lib-commonjs/hooks/useConst.js +2 -2
- package/lib-commonjs/hooks/useConst.js.map +1 -1
- package/lib-commonjs/hooks/useControllableState.d.ts +16 -6
- package/lib-commonjs/hooks/useControllableState.js +28 -27
- package/lib-commonjs/hooks/useControllableState.js.map +1 -1
- package/lib-commonjs/hooks/useEventCallback.js +8 -14
- package/lib-commonjs/hooks/useEventCallback.js.map +1 -1
- package/lib-commonjs/hooks/useFirstMount.js +2 -2
- package/lib-commonjs/hooks/useFirstMount.js.map +1 -1
- package/lib-commonjs/hooks/useForceUpdate.js +2 -4
- package/lib-commonjs/hooks/useForceUpdate.js.map +1 -1
- package/lib-commonjs/hooks/useId.d.ts +1 -1
- package/lib-commonjs/hooks/useId.js +11 -7
- package/lib-commonjs/hooks/useId.js.map +1 -1
- package/lib-commonjs/hooks/useIsomorphicLayoutEffect.js +2 -2
- package/lib-commonjs/hooks/useIsomorphicLayoutEffect.js.map +1 -1
- package/lib-commonjs/hooks/useMergedEventCallbacks.d.ts +18 -0
- package/lib-commonjs/hooks/useMergedEventCallbacks.js +36 -0
- package/lib-commonjs/hooks/useMergedEventCallbacks.js.map +1 -0
- package/lib-commonjs/hooks/useMergedRefs.js +6 -15
- package/lib-commonjs/hooks/useMergedRefs.js.map +1 -1
- package/lib-commonjs/hooks/useMount.js +4 -4
- package/lib-commonjs/hooks/useMount.js.map +1 -1
- package/lib-commonjs/hooks/useOnClickOutside.js +32 -38
- package/lib-commonjs/hooks/useOnClickOutside.js.map +1 -1
- package/lib-commonjs/hooks/useOnScrollOutside.js +15 -17
- package/lib-commonjs/hooks/useOnScrollOutside.js.map +1 -1
- package/lib-commonjs/hooks/usePrevious.js +4 -4
- package/lib-commonjs/hooks/usePrevious.js.map +1 -1
- package/lib-commonjs/hooks/useTimeout.js +15 -19
- package/lib-commonjs/hooks/useTimeout.js.map +1 -1
- package/lib-commonjs/hooks/useUnmount.js +6 -8
- package/lib-commonjs/hooks/useUnmount.js.map +1 -1
- package/lib-commonjs/index.js +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/ssr/SSRContext.js +9 -15
- package/lib-commonjs/ssr/SSRContext.js.map +1 -1
- package/lib-commonjs/ssr/canUseDOM.js.map +1 -1
- package/lib-commonjs/ssr/index.js +1 -1
- package/lib-commonjs/ssr/index.js.map +1 -1
- package/lib-commonjs/utils/applyTriggerPropsToChildren.d.ts +1 -1
- package/lib-commonjs/utils/applyTriggerPropsToChildren.js +26 -6
- package/lib-commonjs/utils/applyTriggerPropsToChildren.js.map +1 -1
- package/lib-commonjs/utils/clamp.js +1 -3
- package/lib-commonjs/utils/clamp.js.map +1 -1
- package/lib-commonjs/utils/getNativeElementProps.d.ts +22 -0
- package/lib-commonjs/utils/getNativeElementProps.js +29 -4
- package/lib-commonjs/utils/getNativeElementProps.js.map +1 -1
- package/lib-commonjs/utils/getRTLSafeKey.js +1 -1
- package/lib-commonjs/utils/getRTLSafeKey.js.map +1 -1
- package/lib-commonjs/utils/getReactCallbackName.d.ts +25 -0
- package/lib-commonjs/utils/getReactCallbackName.js +35 -0
- package/lib-commonjs/utils/getReactCallbackName.js.map +1 -0
- package/lib-commonjs/utils/getTriggerChild.d.ts +22 -0
- package/lib-commonjs/utils/getTriggerChild.js +37 -0
- package/lib-commonjs/utils/getTriggerChild.js.map +1 -0
- package/lib-commonjs/utils/index.d.ts +2 -1
- package/lib-commonjs/utils/index.js +5 -3
- package/lib-commonjs/utils/index.js.map +1 -1
- package/lib-commonjs/utils/isFluentTrigger.d.ts +22 -0
- package/lib-commonjs/utils/isFluentTrigger.js +17 -0
- package/lib-commonjs/utils/isFluentTrigger.js.map +1 -0
- package/lib-commonjs/utils/omit.js +2 -2
- package/lib-commonjs/utils/omit.js.map +1 -1
- package/lib-commonjs/utils/properties.d.ts +6 -0
- package/lib-commonjs/utils/properties.js +60 -41
- package/lib-commonjs/utils/properties.js.map +1 -1
- package/lib-commonjs/utils/shouldPreventDefaultOnKeyDown.js +5 -5
- package/lib-commonjs/utils/shouldPreventDefaultOnKeyDown.js.map +1 -1
- package/package.json +6 -11
- package/lib/compose/getSlotsCompat.d.ts +0 -22
- package/lib/compose/getSlotsCompat.js +0 -56
- package/lib/compose/getSlotsCompat.js.map +0 -1
- package/lib/compose/makeMergeProps.d.ts +0 -15
- package/lib/compose/makeMergeProps.js +0 -106
- package/lib/compose/makeMergeProps.js.map +0 -1
- package/lib/compose/makeMergePropsCompat.d.ts +0 -9
- package/lib/compose/makeMergePropsCompat.js +0 -9
- package/lib/compose/makeMergePropsCompat.js.map +0 -1
- package/lib/compose/nullRender.d.ts +0 -4
- package/lib/compose/nullRender.js +0 -7
- package/lib/compose/nullRender.js.map +0 -1
- package/lib/compose/resolveShorthandProps.d.ts +0 -8
- package/lib/compose/resolveShorthandProps.js +0 -30
- package/lib/compose/resolveShorthandProps.js.map +0 -1
- package/lib/hooks/useControllableValue.d.ts +0 -20
- package/lib/hooks/useControllableValue.js +0 -62
- package/lib/hooks/useControllableValue.js.map +0 -1
- package/lib/utils/onlyChild.d.ts +0 -5
- package/lib/utils/onlyChild.js +0 -13
- package/lib/utils/onlyChild.js.map +0 -1
- package/lib-commonjs/compose/getSlotsCompat.d.ts +0 -22
- package/lib-commonjs/compose/getSlotsCompat.js +0 -68
- package/lib-commonjs/compose/getSlotsCompat.js.map +0 -1
- package/lib-commonjs/compose/makeMergeProps.d.ts +0 -15
- package/lib-commonjs/compose/makeMergeProps.js +0 -117
- package/lib-commonjs/compose/makeMergeProps.js.map +0 -1
- package/lib-commonjs/compose/makeMergePropsCompat.d.ts +0 -9
- package/lib-commonjs/compose/makeMergePropsCompat.js +0 -17
- package/lib-commonjs/compose/makeMergePropsCompat.js.map +0 -1
- package/lib-commonjs/compose/nullRender.d.ts +0 -4
- package/lib-commonjs/compose/nullRender.js +0 -16
- package/lib-commonjs/compose/nullRender.js.map +0 -1
- package/lib-commonjs/compose/resolveShorthandProps.d.ts +0 -8
- package/lib-commonjs/compose/resolveShorthandProps.js +0 -41
- package/lib-commonjs/compose/resolveShorthandProps.js.map +0 -1
- package/lib-commonjs/hooks/useControllableValue.d.ts +0 -20
- package/lib-commonjs/hooks/useControllableValue.js +0 -73
- package/lib-commonjs/hooks/useControllableValue.js.map +0 -1
- package/lib-commonjs/utils/onlyChild.d.ts +0 -5
- package/lib-commonjs/utils/onlyChild.js +0 -23
- package/lib-commonjs/utils/onlyChild.js.map +0 -1
@@ -1,10 +1,10 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import { AsIntrinsicElement, ComponentState,
|
3
|
-
export declare type Slots<S extends
|
4
|
-
[K in keyof S]
|
2
|
+
import type { AsIntrinsicElement, ComponentState, ExtractSlotProps, SlotPropsRecord, UnionToIntersection } from './types';
|
3
|
+
export declare type Slots<S extends SlotPropsRecord> = {
|
4
|
+
[K in keyof S]: ExtractSlotProps<S[K]> extends AsIntrinsicElement<infer As> ? As : ExtractSlotProps<S[K]> extends React.ComponentType<infer P> ? React.ElementType<NonNullable<P>> : React.ElementType<ExtractSlotProps<S[K]>>;
|
5
5
|
};
|
6
|
-
declare type
|
7
|
-
[K in keyof S]-?:
|
6
|
+
declare type ObjectSlotProps<S extends SlotPropsRecord> = {
|
7
|
+
[K in keyof S]-?: ExtractSlotProps<S[K]> extends AsIntrinsicElement<infer As> ? UnionToIntersection<JSX.IntrinsicElements[As]> : ExtractSlotProps<S[K]> extends React.ComponentType<infer P> ? P : never;
|
8
8
|
};
|
9
9
|
/**
|
10
10
|
* Given the state and an array of slot names, will break out `slots` and `slotProps`
|
@@ -15,15 +15,16 @@ 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
|
-
* @param slotNames - Name of which props are slots
|
23
24
|
* @returns An object containing the `slots` map and `slotProps` map.
|
24
25
|
*/
|
25
|
-
export declare function getSlots<R extends
|
26
|
+
export declare function getSlots<R extends SlotPropsRecord>(state: ComponentState<R>): {
|
26
27
|
slots: Slots<R>;
|
27
|
-
slotProps:
|
28
|
+
slotProps: ObjectSlotProps<R>;
|
28
29
|
};
|
29
30
|
export {};
|
package/lib/compose/getSlots.js
CHANGED
@@ -1,6 +1,4 @@
|
|
1
|
-
import { __rest } from "tslib";
|
2
1
|
import * as React from 'react';
|
3
|
-
import { nullRender } from './nullRender';
|
4
2
|
import { omit } from '../utils/omit';
|
5
3
|
/**
|
6
4
|
* Given the state and an array of slot names, will break out `slots` and `slotProps`
|
@@ -11,35 +9,28 @@ import { omit } from '../utils/omit';
|
|
11
9
|
* Slots will render as null if they are rendered as primitives with undefined children.
|
12
10
|
*
|
13
11
|
* The slotProps will always omit the `as` prop within them, and for slots that are string
|
14
|
-
* primitives, the props will be filtered according
|
15
|
-
* slot is rendered `as: 'a'`, the props will be filtered for acceptable
|
12
|
+
* primitives, the props will be filtered according to the slot type by the type system.
|
13
|
+
* For example, if the slot is rendered `as: 'a'`, the props will be filtered for acceptable
|
14
|
+
* anchor props. Note that this is only enforced at build time by Typescript -- there is no
|
15
|
+
* runtime code filtering props in this function.
|
16
16
|
*
|
17
17
|
* @param state - State including slot definitions
|
18
|
-
* @param slotNames - Name of which props are slots
|
19
18
|
* @returns An object containing the `slots` map and `slotProps` map.
|
20
19
|
*/
|
21
20
|
|
22
|
-
export function getSlots(state
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
var slots = {};
|
28
|
-
var slotProps = {};
|
29
|
-
|
30
|
-
for (var _i = 0, slotNames_1 = slotNames; _i < slotNames_1.length; _i++) {
|
31
|
-
var slotName = slotNames_1[_i];
|
32
|
-
|
33
|
-
var _a = getSlot(state, slotName),
|
34
|
-
slot = _a[0],
|
35
|
-
props = _a[1];
|
21
|
+
export function getSlots(state) {
|
22
|
+
const slots = {};
|
23
|
+
const slotProps = {};
|
24
|
+
const slotNames = Object.keys(state.components);
|
36
25
|
|
26
|
+
for (const slotName of slotNames) {
|
27
|
+
const [slot, props] = getSlot(state, slotName);
|
37
28
|
slots[slotName] = slot;
|
38
29
|
slotProps[slotName] = props;
|
39
30
|
}
|
40
31
|
|
41
32
|
return {
|
42
|
-
slots
|
33
|
+
slots,
|
43
34
|
slotProps: slotProps
|
44
35
|
};
|
45
36
|
}
|
@@ -48,25 +39,25 @@ function getSlot(state, slotName) {
|
|
48
39
|
var _a, _b, _c;
|
49
40
|
|
50
41
|
if (state[slotName] === undefined) {
|
51
|
-
return [
|
42
|
+
return [null, undefined];
|
52
43
|
}
|
53
44
|
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
45
|
+
const {
|
46
|
+
children,
|
47
|
+
as: asProp,
|
48
|
+
...rest
|
49
|
+
} = state[slotName];
|
50
|
+
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];
|
60
51
|
|
61
52
|
if (typeof children === 'function') {
|
62
|
-
|
53
|
+
const render = children;
|
63
54
|
return [React.Fragment, {
|
64
55
|
children: render(slot, rest)
|
65
56
|
}];
|
66
57
|
}
|
67
58
|
|
68
|
-
|
69
|
-
|
59
|
+
const shouldOmitAsProp = typeof slot === 'string' && ((_c = state[slotName]) === null || _c === void 0 ? void 0 : _c.as);
|
60
|
+
const slotProps = shouldOmitAsProp ? omit(state[slotName], ['as']) : state[slotName];
|
70
61
|
return [slot, slotProps];
|
71
62
|
}
|
72
63
|
//# sourceMappingURL=getSlots.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["compose/getSlots.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,IAAT,QAAqB,eAArB;AA6BA;;;;;;;;;;;;;;;;AAgBG;;AACH,OAAM,SAAU,QAAV,CACJ,KADI,EACoB;AAKxB,QAAM,KAAK,GAAG,EAAd;AACA,QAAM,SAAS,GAAG,EAAlB;AAEA,QAAM,SAAS,GAAgB,MAAM,CAAC,IAAP,CAAY,KAAK,CAAC,UAAlB,CAA/B;;AACA,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,IAAD,EAAO,SAAP,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,KAAI,CAAA,EAAA,GAAA,KAAK,CAAC,UAAN,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,KAAA,CAAhB,GAAgB,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,KAA4B,CAAA,EAAA,GAAA,KAAK,CAAC,QAAD,CAAL,MAAe,IAAf,IAAe,EAAA,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAe,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","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"],"sourceRoot":"../src/"}
|
package/lib/compose/index.d.ts
CHANGED
@@ -1,8 +1,3 @@
|
|
1
1
|
export * from './getSlots';
|
2
|
-
export * from './getSlotsCompat';
|
3
|
-
export * from './makeMergeProps';
|
4
|
-
export * from './makeMergePropsCompat';
|
5
|
-
export * from './nullRender';
|
6
2
|
export * from './resolveShorthand';
|
7
|
-
export * from './resolveShorthandProps';
|
8
3
|
export * from './types';
|
package/lib/compose/index.js
CHANGED
@@ -1,9 +1,4 @@
|
|
1
1
|
export * from './getSlots';
|
2
|
-
export * from './getSlotsCompat';
|
3
|
-
export * from './makeMergeProps';
|
4
|
-
export * from './makeMergePropsCompat';
|
5
|
-
export * from './nullRender';
|
6
2
|
export * from './resolveShorthand';
|
7
|
-
export * from './resolveShorthandProps';
|
8
3
|
export * from './types';
|
9
4
|
//# sourceMappingURL=index.js.map
|
package/lib/compose/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["compose/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC","sourcesContent":["export * from './getSlots';\nexport * from './resolveShorthand';\nexport * from './types';\n"]}
|
@@ -1,12 +1,16 @@
|
|
1
|
-
import type {
|
2
|
-
export declare type ResolveShorthandOptions<Props
|
1
|
+
import type { ReplaceNullWithUndefined, SlotShorthandValue, UnknownSlotProps } from './types';
|
2
|
+
export declare type ResolveShorthandOptions<Props, Required extends boolean = false> = {
|
3
3
|
required?: Required;
|
4
4
|
defaultProps?: Props;
|
5
5
|
};
|
6
|
+
export declare type ResolveShorthandFunction<Props extends UnknownSlotProps = UnknownSlotProps> = {
|
7
|
+
<P extends Props | null>(value: P | SlotShorthandValue | undefined, options?: ResolveShorthandOptions<P, true>): ReplaceNullWithUndefined<P>;
|
8
|
+
<P extends Props | null>(value: P | SlotShorthandValue | undefined, options?: ResolveShorthandOptions<P, boolean>): ReplaceNullWithUndefined<P> | undefined;
|
9
|
+
};
|
6
10
|
/**
|
7
|
-
* Resolves
|
11
|
+
* Resolves shorthands into slot props, to ensure normalization of the signature
|
8
12
|
* being passed down to getSlots method
|
9
|
-
* @param value - the base
|
10
|
-
* @param options - options to resolve
|
13
|
+
* @param value - the base shorthand props
|
14
|
+
* @param options - options to resolve shorthand props
|
11
15
|
*/
|
12
|
-
export declare
|
16
|
+
export declare const resolveShorthand: ResolveShorthandFunction;
|
@@ -1,23 +1,22 @@
|
|
1
|
-
import { __assign } from "tslib";
|
2
1
|
import { isValidElement } from 'react';
|
3
2
|
/**
|
4
|
-
* Resolves
|
3
|
+
* Resolves shorthands into slot props, to ensure normalization of the signature
|
5
4
|
* being passed down to getSlots method
|
6
|
-
* @param value - the base
|
7
|
-
* @param options - options to resolve
|
5
|
+
* @param value - the base shorthand props
|
6
|
+
* @param options - options to resolve shorthand props
|
8
7
|
*/
|
9
8
|
|
10
|
-
export
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
9
|
+
export const resolveShorthand = (value, options) => {
|
10
|
+
const {
|
11
|
+
required = false,
|
12
|
+
defaultProps
|
13
|
+
} = options || {};
|
15
14
|
|
16
15
|
if (value === null || value === undefined && !required) {
|
17
16
|
return undefined;
|
18
17
|
}
|
19
18
|
|
20
|
-
|
19
|
+
let resolvedShorthand = {};
|
21
20
|
|
22
21
|
if (typeof value === 'string' || typeof value === 'number' || Array.isArray(value) || /*#__PURE__*/isValidElement(value)) {
|
23
22
|
resolvedShorthand.children = value;
|
@@ -25,6 +24,8 @@ export function resolveShorthand(value, options) {
|
|
25
24
|
resolvedShorthand = value;
|
26
25
|
}
|
27
26
|
|
28
|
-
return defaultProps ?
|
29
|
-
|
27
|
+
return defaultProps ? { ...defaultProps,
|
28
|
+
...resolvedShorthand
|
29
|
+
} : resolvedShorthand;
|
30
|
+
};
|
30
31
|
//# sourceMappingURL=resolveShorthand.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["compose/resolveShorthand.ts"],"names":[],"mappings":"AAAA,SAAS,cAAT,QAA+B,OAA/B;AAkBA;;;;;AAKG;;AACH,OAAO,MAAM,gBAAgB,GAA6B,CAAC,KAAD,EAAQ,OAAR,KAAmB;AAC3E,QAAM;AAAE,IAAA,QAAQ,GAAG,KAAb;AAAoB,IAAA;AAApB,MAAqC,OAAO,IAAI,EAAtD;;AACA,MAAI,KAAK,KAAK,IAAV,IAAmB,KAAK,KAAK,SAAV,IAAuB,CAAC,QAA/C,EAA0D;AACxD,WAAO,SAAP;AACD;;AAED,MAAI,iBAAiB,GAAG,EAAxB;;AAEA,MAAI,OAAO,KAAP,KAAiB,QAAjB,IAA6B,OAAO,KAAP,KAAiB,QAA9C,IAA0D,KAAK,CAAC,OAAN,CAAc,KAAd,CAA1D,iBAAkF,cAAc,CAAC,KAAD,CAApG,EAA6G;AAC3G,IAAA,iBAAiB,CAAC,QAAlB,GAA6B,KAA7B;AACD,GAFD,MAEO,IAAI,OAAO,KAAP,KAAiB,QAArB,EAA+B;AACpC,IAAA,iBAAiB,GAAG,KAApB;AACD;;AAED,SAAO,YAAY,GAAG,EAAE,GAAG,YAAL;AAAmB,OAAG;AAAtB,GAAH,GAA+C,iBAAlE;AACD,CAfM","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"],"sourceRoot":"../src/"}
|
package/lib/compose/types.d.ts
CHANGED
@@ -1,47 +1,83 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
export declare type
|
3
|
-
export declare type ObjectShorthandPropsRecord = Record<string, DefaultObjectShorthandProps | undefined>;
|
4
|
-
export declare type ShorthandProps<Props extends DefaultObjectShorthandProps> = React.ReactChild | React.ReactNodeArray | React.ReactPortal | number | null | undefined | Props;
|
2
|
+
export declare type SlotRenderFunction<Props> = (Component: React.ElementType<Props>, props: Omit<Props, 'children' | 'as'>) => React.ReactNode;
|
5
3
|
/**
|
6
|
-
* Matches any
|
4
|
+
* Matches any component's Slots type (such as ButtonSlots).
|
7
5
|
*
|
8
|
-
* This should ONLY be used in type templates as in `extends
|
6
|
+
* This should ONLY be used in type templates as in `extends SlotPropsRecord`;
|
7
|
+
* it shouldn't be used as a component's Slots type.
|
8
|
+
*/
|
9
|
+
export declare type SlotPropsRecord = Record<string, UnknownSlotProps | SlotShorthandValue | null | undefined>;
|
10
|
+
/**
|
11
|
+
* The shorthand value of a slot allows specifying its child
|
12
|
+
*/
|
13
|
+
export declare type SlotShorthandValue = React.ReactChild | React.ReactNodeArray | React.ReactPortal;
|
14
|
+
/**
|
15
|
+
* Matches any slot props type.
|
16
|
+
*
|
17
|
+
* This should ONLY be used in type templates as in `extends UnknownSlotProps`;
|
9
18
|
* it shouldn't be used as the type of a slot.
|
10
19
|
*/
|
11
|
-
export declare type
|
12
|
-
children?: React.ReactNode;
|
20
|
+
export declare type UnknownSlotProps = Pick<React.HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'> & {
|
13
21
|
as?: keyof JSX.IntrinsicElements;
|
14
|
-
}
|
22
|
+
};
|
15
23
|
/**
|
16
|
-
*
|
17
|
-
*
|
18
|
-
* For intrinsic elements like 'div', use {@link IntrinsicShorthandProps} instead.
|
24
|
+
* Helper type for {@link Slot}. Adds shorthand types that are assignable to the slot's `children`.
|
19
25
|
*/
|
20
|
-
|
21
|
-
children?:
|
22
|
-
}
|
23
|
-
|
26
|
+
declare type WithSlotShorthandValue<Props extends {
|
27
|
+
children?: unknown;
|
28
|
+
}> = Props | Extract<SlotShorthandValue, Props['children']>;
|
29
|
+
/**
|
30
|
+
* Helper type for {@link Slot}. Takes the props we want to support for a slot and adds the ability for `children`
|
31
|
+
* to be a render function that takes those props.
|
32
|
+
*/
|
33
|
+
declare type WithSlotRenderFunction<Props extends {
|
34
|
+
children?: unknown;
|
35
|
+
}> = Props & {
|
36
|
+
children?: Props['children'] | SlotRenderFunction<Props>;
|
24
37
|
};
|
25
38
|
/**
|
26
|
-
*
|
27
|
-
*
|
39
|
+
* HTML element types that are not allowed to have children.
|
40
|
+
*
|
41
|
+
* Reference: https://developer.mozilla.org/en-US/docs/Glossary/Empty_element
|
42
|
+
*/
|
43
|
+
declare type EmptyIntrisicElements = 'area' | 'base' | 'br' | 'col' | 'embed' | 'hr' | 'img' | 'input' | 'link' | 'meta' | 'param' | 'source' | 'track' | 'wbr';
|
44
|
+
/**
|
45
|
+
* Helper type for {@link Slot}. Modifies `JSX.IntrinsicElements[Type]`:
|
46
|
+
* * Removes legacy string ref.
|
47
|
+
* * Disallows children for empty tags like 'img'.
|
48
|
+
*/
|
49
|
+
declare type IntrisicElementProps<Type extends keyof JSX.IntrinsicElements> = React.PropsWithRef<JSX.IntrinsicElements[Type]> & (Type extends EmptyIntrisicElements ? {
|
50
|
+
children?: never;
|
51
|
+
} : {});
|
52
|
+
/**
|
53
|
+
* The props type and shorthand value for a slot. Type is either a single intrinsic element like `'div'`,
|
54
|
+
* or a component like `typeof Button`.
|
55
|
+
*
|
56
|
+
* If a slot needs to support multiple intrinsic element types, use the `AlternateAs` param (see examples below).
|
28
57
|
*
|
29
|
-
*
|
30
|
-
*
|
58
|
+
* By default, slots can be set to `null` to prevent them from being rendered. If a slot must always be rendered,
|
59
|
+
* wrap with `NonNullable` (see examples below).
|
31
60
|
*
|
61
|
+
* @example
|
32
62
|
* ```
|
33
|
-
*
|
34
|
-
*
|
35
|
-
*
|
63
|
+
* // Intrinsic element examples:
|
64
|
+
* Slot<'div'> // Slot is always div
|
65
|
+
* Slot<'button', 'a'> // Defaults to button, but allows as="a" with anchor-specific props
|
66
|
+
* Slot<'span', 'div' | 'pre'> // Defaults to span, but allows as="div" or as="pre"
|
67
|
+
* NonNullable<Slot<'div'>> // Slot that will always be rendered (can't be set to null by the user)
|
68
|
+
*
|
69
|
+
* // Component examples:
|
70
|
+
* Slot<typeof Button> // Slot is always a Button, and accepts all of Button's Props
|
71
|
+
* NonNullable<Slot<typeof Label>> // Slot is a Label and will always be rendered (can't be set to null by the user)
|
36
72
|
* ```
|
37
73
|
*/
|
38
|
-
export declare type
|
39
|
-
as?:
|
40
|
-
} &
|
74
|
+
export declare type Slot<Type extends keyof JSX.IntrinsicElements | React.ComponentType | UnknownSlotProps, AlternateAs extends keyof JSX.IntrinsicElements = never> = IsSingleton<Extract<Type, string>> extends true ? WithSlotShorthandValue<Type extends keyof JSX.IntrinsicElements ? {
|
75
|
+
as?: Type;
|
76
|
+
} & WithSlotRenderFunction<IntrisicElementProps<Type>> : Type extends React.ComponentType<infer Props> ? WithSlotRenderFunction<Props> : Type> | {
|
41
77
|
[As in AlternateAs]: {
|
42
78
|
as: As;
|
43
|
-
} &
|
44
|
-
}[AlternateAs];
|
79
|
+
} & WithSlotRenderFunction<IntrisicElementProps<As>>;
|
80
|
+
}[AlternateAs] | null : 'Error: First parameter to Slot must not be not a union of types. See documentation of Slot type.';
|
45
81
|
/**
|
46
82
|
* Evaluates to true if the given type contains exactly one string, or false if it is a union of strings.
|
47
83
|
*
|
@@ -70,20 +106,35 @@ export declare type AsIntrinsicElement<As extends keyof JSX.IntrinsicElements> =
|
|
70
106
|
export declare type UnionToIntersection<U> = (U extends unknown ? (x: U) => U : never) extends (x: infer I) => U ? I : never;
|
71
107
|
/**
|
72
108
|
* Removes the 'ref' prop from the given Props type, leaving unions intact (such as the discriminated union created by
|
73
|
-
*
|
109
|
+
* IntrinsicSlotProps). This allows IntrinsicSlotProps to be used with React.forwardRef.
|
74
110
|
*
|
75
111
|
* The conditional "extends unknown" (always true) exploits a quirk in the way TypeScript handles conditional
|
76
112
|
* types, to prevent unions from being expanded.
|
77
113
|
*/
|
78
114
|
export declare type PropsWithoutRef<P> = 'ref' extends keyof P ? (P extends unknown ? Omit<P, 'ref'> : P) : P;
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
export declare type
|
83
|
-
|
84
|
-
|
115
|
+
/**
|
116
|
+
* Removes SlotShorthandValue and null from the slot type, extracting just the slot's Props object.
|
117
|
+
*/
|
118
|
+
export declare type ExtractSlotProps<S> = Exclude<S, SlotShorthandValue | null | undefined>;
|
119
|
+
/**
|
120
|
+
* Defines the Props type for a component given its slots and the definition of which one is the primary slot,
|
121
|
+
* defaulting to root if one is not provided.
|
122
|
+
*/
|
123
|
+
export declare type ComponentProps<Slots extends SlotPropsRecord, Primary extends keyof Slots = 'root'> = Omit<Slots, Primary & 'root'> & PropsWithoutRef<ExtractSlotProps<Slots[Primary]>>;
|
124
|
+
/**
|
125
|
+
* If type T includes `null`, remove it and add `undefined` instead.
|
126
|
+
*/
|
127
|
+
export declare type ReplaceNullWithUndefined<T> = T extends null ? Exclude<T, null> | undefined : T;
|
128
|
+
/**
|
129
|
+
* Defines the State object of a component given its slots.
|
130
|
+
*/
|
131
|
+
export declare type ComponentState<Slots extends SlotPropsRecord> = {
|
132
|
+
components: {
|
133
|
+
[Key in keyof Slots]-?: React.ComponentType<ExtractSlotProps<Slots[Key]>> | (ExtractSlotProps<Slots[Key]> extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);
|
85
134
|
};
|
86
|
-
} &
|
135
|
+
} & {
|
136
|
+
[Key in keyof Slots]: ReplaceNullWithUndefined<Exclude<Slots[Key], SlotShorthandValue | (Key extends 'root' ? null : never)>>;
|
137
|
+
};
|
87
138
|
/**
|
88
139
|
* This is part of a hack to infer the element type from a native element *props* type.
|
89
140
|
* The only place the original element is found in a native props type (at least that's workable
|
@@ -101,45 +152,4 @@ declare type ObscureEventName = 'onLostPointerCaptureCapture';
|
|
101
152
|
* Return type for `React.forwardRef`, including inference of the proper typing for the ref.
|
102
153
|
*/
|
103
154
|
export declare type ForwardRefComponent<Props> = ObscureEventName extends keyof Props ? Required<Props>[ObscureEventName] extends React.PointerEventHandler<infer Element> ? React.ForwardRefExoticComponent<Props & React.RefAttributes<Element>> : never : never;
|
104
|
-
export declare type ComponentPropsCompat = {
|
105
|
-
as?: React.ElementType;
|
106
|
-
className?: string;
|
107
|
-
children?: React.ReactNode;
|
108
|
-
};
|
109
|
-
export declare type ShorthandRenderFunctionCompat<TProps> = (Component: React.ElementType<TProps>, props: TProps) => React.ReactNode;
|
110
|
-
export declare type ShorthandPropsCompat<TProps extends ComponentPropsCompat = {}> = React.ReactChild | React.ReactNodeArray | React.ReactPortal | number | null | undefined | ObjectShorthandPropsCompat<TProps>;
|
111
|
-
export declare type ObjectShorthandPropsCompat<TProps extends ComponentPropsCompat = {}> = TProps & Omit<ComponentPropsCompat, 'children'> & {
|
112
|
-
children?: TProps['children'] | ShorthandRenderFunctionCompat<TProps>;
|
113
|
-
};
|
114
|
-
export declare type BaseSlotsCompat = {
|
115
|
-
root: React.ElementType;
|
116
|
-
};
|
117
|
-
export declare type SlotPropsCompat<TSlots extends BaseSlotsCompat, TProps, TRootProps extends React.HTMLAttributes<HTMLElement>> = {
|
118
|
-
[key in keyof Omit<TSlots, 'root'>]: key extends keyof TProps ? TProps[key] : any;
|
119
|
-
} & {
|
120
|
-
root: TRootProps;
|
121
|
-
};
|
122
|
-
/**
|
123
|
-
* Helper type to convert the given props of type ShorthandProps into ObjectShorthandProps
|
124
|
-
*/
|
125
|
-
export declare type ResolvedShorthandPropsCompat<T, K extends keyof T> = Omit<T, K> & {
|
126
|
-
[P in K]: T[P] extends ShorthandPropsCompat<infer U> ? ObjectShorthandPropsCompat<U> : T[P];
|
127
|
-
};
|
128
|
-
/**
|
129
|
-
* Helper type to mark the given props as required.
|
130
|
-
* Similar to Required<T> except it only requires a subset of the props.
|
131
|
-
*/
|
132
|
-
export declare type RequiredPropsCompat<T, K extends keyof T> = Omit<T, K> & {
|
133
|
-
[P in K]-?: T[P];
|
134
|
-
};
|
135
|
-
/**
|
136
|
-
* Converts a components Props type to a State type:
|
137
|
-
* * Ensures the specified ShorthandProps are of type ObjectShorthandProps<T>
|
138
|
-
* * Marks the given defaulted props as required (-?)
|
139
|
-
*
|
140
|
-
* @template Props - The component's Props type
|
141
|
-
* @template ShorthandPropNames - The keys of Props that correspond to ShorthandProps
|
142
|
-
* @template DefaultedPropNames - The keys of Props that will always have a default value provided
|
143
|
-
*/
|
144
|
-
export declare type ComponentStateCompat<Props, ShorthandPropNames extends keyof Props = never, DefaultedPropNames extends keyof ResolvedShorthandPropsCompat<Props, ShorthandPropNames> = never> = RequiredPropsCompat<ResolvedShorthandPropsCompat<Props, ShorthandPropNames>, DefaultedPropNames>;
|
145
155
|
export {};
|
package/lib/compose/types.js
CHANGED
@@ -1,2 +1,6 @@
|
|
1
|
-
export {};
|
1
|
+
export {}; // A definition like this would also work, but typescript is more likely to unnecessarily expand
|
2
|
+
// the props type with this version (and it's likely much more expensive to evaluate)
|
3
|
+
// export type ForwardRefComponent<Props> = Props extends React.DOMAttributes<infer Element>
|
4
|
+
// ? React.ForwardRefExoticComponent<Props> & React.RefAttributes<Element>
|
5
|
+
// : never;
|
2
6
|
//# sourceMappingURL=types.js.map
|
package/lib/compose/types.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["compose/types.ts"],"names":[],"mappings":"WAqNA;AACA;AACA;AACA;AACA","sourcesContent":["import * as React from 'react';\n\nexport type SlotRenderFunction<Props> = (\n Component: React.ElementType<Props>,\n props: Omit<Props, 'children' | 'as'>,\n) => React.ReactNode;\n\n/**\n * Matches any component's Slots type (such as ButtonSlots).\n *\n * This should ONLY be used in type templates as in `extends SlotPropsRecord`;\n * it shouldn't be used as a component's Slots type.\n */\nexport type SlotPropsRecord = Record<string, UnknownSlotProps | SlotShorthandValue | null | undefined>;\n\n/**\n * The shorthand value of a slot allows specifying its child\n */\nexport type SlotShorthandValue = React.ReactChild | React.ReactNodeArray | React.ReactPortal;\n\n/**\n * Matches any slot props type.\n *\n * This should ONLY be used in type templates as in `extends UnknownSlotProps`;\n * it shouldn't be used as the type of a slot.\n */\nexport type UnknownSlotProps = Pick<React.HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'> & {\n as?: keyof JSX.IntrinsicElements;\n};\n\n/**\n * Helper type for {@link Slot}. Adds shorthand types that are assignable to the slot's `children`.\n */\ntype WithSlotShorthandValue<Props extends { children?: unknown }> =\n | Props\n | Extract<SlotShorthandValue, Props['children']>;\n\n/**\n * Helper type for {@link Slot}. Takes the props we want to support for a slot and adds the ability for `children`\n * to be a render function that takes those props.\n */\ntype WithSlotRenderFunction<Props extends { children?: unknown }> = Props & {\n children?: Props['children'] | SlotRenderFunction<Props>;\n};\n\n/**\n * HTML element types that are not allowed to have children.\n *\n * Reference: https://developer.mozilla.org/en-US/docs/Glossary/Empty_element\n */\ntype EmptyIntrisicElements =\n | 'area'\n | 'base'\n | 'br'\n | 'col'\n | 'embed'\n | 'hr'\n | 'img'\n | 'input'\n | 'link'\n | 'meta'\n | 'param'\n | 'source'\n | 'track'\n | 'wbr';\n\n/**\n * Helper type for {@link Slot}. Modifies `JSX.IntrinsicElements[Type]`:\n * * Removes legacy string ref.\n * * Disallows children for empty tags like 'img'.\n */\ntype IntrisicElementProps<Type extends keyof JSX.IntrinsicElements> = React.PropsWithRef<JSX.IntrinsicElements[Type]> &\n (Type extends EmptyIntrisicElements ? { children?: never } : {});\n\n/**\n * The props type and shorthand value for a slot. Type is either a single intrinsic element like `'div'`,\n * or a component like `typeof Button`.\n *\n * If a slot needs to support multiple intrinsic element types, use the `AlternateAs` param (see examples below).\n *\n * By default, slots can be set to `null` to prevent them from being rendered. If a slot must always be rendered,\n * wrap with `NonNullable` (see examples below).\n *\n * @example\n * ```\n * // Intrinsic element examples:\n * Slot<'div'> // Slot is always div\n * Slot<'button', 'a'> // Defaults to button, but allows as=\"a\" with anchor-specific props\n * Slot<'span', 'div' | 'pre'> // Defaults to span, but allows as=\"div\" or as=\"pre\"\n * NonNullable<Slot<'div'>> // Slot that will always be rendered (can't be set to null by the user)\n *\n * // Component examples:\n * Slot<typeof Button> // Slot is always a Button, and accepts all of Button's Props\n * NonNullable<Slot<typeof Label>> // Slot is a Label and will always be rendered (can't be set to null by the user)\n * ```\n */\nexport type Slot<\n Type extends keyof JSX.IntrinsicElements | React.ComponentType | UnknownSlotProps,\n AlternateAs extends keyof JSX.IntrinsicElements = never\n> = IsSingleton<Extract<Type, string>> extends true\n ?\n | WithSlotShorthandValue<\n Type extends keyof JSX.IntrinsicElements // Intrinsic elements like `div`\n ? { as?: Type } & WithSlotRenderFunction<IntrisicElementProps<Type>>\n : Type extends React.ComponentType<infer Props> // Component types like `typeof Button`\n ? WithSlotRenderFunction<Props>\n : Type // Props types like `ButtonProps`\n >\n | {\n [As in AlternateAs]: { as: As } & WithSlotRenderFunction<IntrisicElementProps<As>>;\n }[AlternateAs]\n | null\n : 'Error: First parameter to Slot must not be not a union of types. See documentation of Slot type.';\n\n/**\n * Evaluates to true if the given type contains exactly one string, or false if it is a union of strings.\n *\n * ```\n * IsSingleton<'a'> // true\n * IsSingleton<'a' | 'b' | 'c'> // false\n * ```\n */\nexport type IsSingleton<T extends string> = { [K in T]: Exclude<T, K> extends never ? true : false }[T];\n\n/**\n * Helper type for inferring the type of the as prop from a Props type.\n *\n * For example:\n * ```\n * type Example<T> = T extends AsIntrinsicElement<infer As> ? As : never;\n * ```\n */\nexport type AsIntrinsicElement<As extends keyof JSX.IntrinsicElements> = { as?: As };\n\n/**\n * Converts a union type (`A | B | C`) to an intersection type (`A & B & C`)\n */\nexport type UnionToIntersection<U> = (U extends unknown ? (x: U) => U : never) extends (x: infer I) => U ? I : never;\n\n/**\n * Removes the 'ref' prop from the given Props type, leaving unions intact (such as the discriminated union created by\n * IntrinsicSlotProps). This allows IntrinsicSlotProps to be used with React.forwardRef.\n *\n * The conditional \"extends unknown\" (always true) exploits a quirk in the way TypeScript handles conditional\n * types, to prevent unions from being expanded.\n */\nexport type PropsWithoutRef<P> = 'ref' extends keyof P ? (P extends unknown ? Omit<P, 'ref'> : P) : P;\n\n/**\n * Removes SlotShorthandValue and null from the slot type, extracting just the slot's Props object.\n */\nexport type ExtractSlotProps<S> = Exclude<S, SlotShorthandValue | null | undefined>;\n\n/**\n * Defines the Props type for a component given its slots and the definition of which one is the primary slot,\n * defaulting to root if one is not provided.\n */\nexport type ComponentProps<Slots extends SlotPropsRecord, Primary extends keyof Slots = 'root'> =\n // Include a prop for each slot (see note below about the Omit)\n Omit<Slots, Primary & 'root'> &\n // Include all of the props of the primary slot inline in the component's props\n PropsWithoutRef<ExtractSlotProps<Slots[Primary]>>;\n\n// Note: the `Omit<Slots, Primary & 'root'>` above is a little tricky. Here's what it's doing:\n// * If the Primary slot is 'root', then omit the `root` slot prop.\n// * Otherwise, don't omit any props: include *both* the Primary and `root` props.\n// We need both props to allow the user to specify native props for either slot because the `root` slot is\n// special and always gets className and style props, per RFC https://github.com/microsoft/fluentui/pull/18983\n\n/**\n * If type T includes `null`, remove it and add `undefined` instead.\n */\nexport type ReplaceNullWithUndefined<T> = T extends null ? Exclude<T, null> | undefined : T;\n\n/**\n * Defines the State object of a component given its slots.\n */\nexport type ComponentState<Slots extends SlotPropsRecord> = {\n components: {\n [Key in keyof Slots]-?:\n | React.ComponentType<ExtractSlotProps<Slots[Key]>>\n | (ExtractSlotProps<Slots[Key]> extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);\n };\n} & {\n // Include a prop for each slot, with the shorthand resolved to a props object\n // The root slot can never be null, so also exclude null from it\n [Key in keyof Slots]: ReplaceNullWithUndefined<\n Exclude<Slots[Key], SlotShorthandValue | (Key extends 'root' ? null : never)>\n >;\n};\n\n/**\n * This is part of a hack to infer the element type from a native element *props* type.\n * The only place the original element is found in a native props type (at least that's workable\n * for inference) is in the event handlers, so some of the helper types use this event handler\n * name to infer the original element type.\n *\n * Notes:\n * - Using an extremely obscure event handler reduces the likelihood that its signature will be\n * modified in any component's props.\n * - Inferring based on a single prop name instead of a larger type like `DOMAttributes<T>` should be\n * less expensive for typescript to evaluate and is less likely to result in type expansion in .d.ts.\n */\ntype ObscureEventName = 'onLostPointerCaptureCapture';\n\n/**\n * Return type for `React.forwardRef`, including inference of the proper typing for the ref.\n */\nexport type ForwardRefComponent<Props> = ObscureEventName extends keyof Props\n ? Required<Props>[ObscureEventName] extends React.PointerEventHandler<infer Element>\n ? React.ForwardRefExoticComponent<Props & React.RefAttributes<Element>>\n : never\n : never;\n// A definition like this would also work, but typescript is more likely to unnecessarily expand\n// the props type with this version (and it's likely much more expensive to evaluate)\n// export type ForwardRefComponent<Props> = Props extends React.DOMAttributes<infer Element>\n// ? React.ForwardRefExoticComponent<Props> & React.RefAttributes<Element>\n// : never;\n"],"sourceRoot":"../src/"}
|
package/lib/hooks/index.d.ts
CHANGED
@@ -1,11 +1,11 @@
|
|
1
1
|
export * from './useControllableState';
|
2
2
|
export * from './useBoolean';
|
3
3
|
export * from './useConst';
|
4
|
-
export * from './useControllableValue';
|
5
4
|
export * from './useEventCallback';
|
6
5
|
export * from './useFirstMount';
|
7
6
|
export * from './useId';
|
8
7
|
export * from './useIsomorphicLayoutEffect';
|
8
|
+
export * from './useMergedEventCallbacks';
|
9
9
|
export * from './useMergedRefs';
|
10
10
|
export * from './useMount';
|
11
11
|
export * from './useOnClickOutside';
|
package/lib/hooks/index.js
CHANGED
@@ -1,11 +1,11 @@
|
|
1
1
|
export * from './useControllableState';
|
2
2
|
export * from './useBoolean';
|
3
3
|
export * from './useConst';
|
4
|
-
export * from './useControllableValue';
|
5
4
|
export * from './useEventCallback';
|
6
5
|
export * from './useFirstMount';
|
7
6
|
export * from './useId';
|
8
7
|
export * from './useIsomorphicLayoutEffect';
|
8
|
+
export * from './useMergedEventCallbacks';
|
9
9
|
export * from './useMergedRefs';
|
10
10
|
export * from './useMount';
|
11
11
|
export * from './useOnClickOutside';
|
package/lib/hooks/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["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,2BAA2B,CAAC;AAC1C,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","sourcesContent":["export * from './useControllableState';\nexport * from './useBoolean';\nexport * from './useConst';\nexport * from './useEventCallback';\nexport * from './useFirstMount';\nexport * from './useId';\nexport * from './useIsomorphicLayoutEffect';\nexport * from './useMergedEventCallbacks';\nexport * from './useMergedRefs';\nexport * from './useMount';\nexport * from './useOnClickOutside';\nexport * from './useOnScrollOutside';\nexport * from './usePrevious';\nexport * from './useTimeout';\nexport * from './useUnmount';\nexport * from './useForceUpdate';\n"]}
|
package/lib/hooks/useBoolean.js
CHANGED
@@ -9,31 +9,20 @@ import { useConst } from './useConst';
|
|
9
9
|
*/
|
10
10
|
|
11
11
|
export function useBoolean(initialState) {
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
var setTrue = useConst(function () {
|
17
|
-
return function () {
|
18
|
-
setValue(true);
|
19
|
-
};
|
12
|
+
const [value, setValue] = React.useState(initialState);
|
13
|
+
const setTrue = useConst(() => () => {
|
14
|
+
setValue(true);
|
20
15
|
});
|
21
|
-
|
22
|
-
|
23
|
-
setValue(false);
|
24
|
-
};
|
16
|
+
const setFalse = useConst(() => () => {
|
17
|
+
setValue(false);
|
25
18
|
});
|
26
|
-
|
27
|
-
|
28
|
-
setValue(function (currentValue) {
|
29
|
-
return !currentValue;
|
30
|
-
});
|
31
|
-
};
|
19
|
+
const toggle = useConst(() => () => {
|
20
|
+
setValue(currentValue => !currentValue);
|
32
21
|
});
|
33
22
|
return [value, {
|
34
|
-
setTrue
|
35
|
-
setFalse
|
36
|
-
toggle
|
23
|
+
setTrue,
|
24
|
+
setFalse,
|
25
|
+
toggle
|
37
26
|
}];
|
38
27
|
}
|
39
28
|
//# sourceMappingURL=useBoolean.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["hooks/useBoolean.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,YAAzB;AAYA;;;;;;AAMG;;AACH,OAAM,SAAU,UAAV,CAAqB,YAArB,EAA0C;AAC9C,QAAM,CAAC,KAAD,EAAQ,QAAR,IAAoB,KAAK,CAAC,QAAN,CAAe,YAAf,CAA1B;AAEA,QAAM,OAAO,GAAG,QAAQ,CAAC,MAAM,MAAK;AAClC,IAAA,QAAQ,CAAC,IAAD,CAAR;AACD,GAFuB,CAAxB;AAGA,QAAM,QAAQ,GAAG,QAAQ,CAAC,MAAM,MAAK;AACnC,IAAA,QAAQ,CAAC,KAAD,CAAR;AACD,GAFwB,CAAzB;AAGA,QAAM,MAAM,GAAG,QAAQ,CAAC,MAAM,MAAK;AACjC,IAAA,QAAQ,CAAC,YAAY,IAAI,CAAC,YAAlB,CAAR;AACD,GAFsB,CAAvB;AAIA,SAAO,CAAC,KAAD,EAAQ;AAAE,IAAA,OAAF;AAAW,IAAA,QAAX;AAAqB,IAAA;AAArB,GAAR,CAAP;AACD","sourcesContent":["import * as React from 'react';\nimport { useConst } from './useConst';\n\n/** Updater callbacks returned by `useBoolean`. */\nexport type UseBooleanCallbacks = {\n /** Set the value to true. Always has the same identity. */\n setTrue: () => void;\n /** Set the value to false. Always has the same identity. */\n setFalse: () => void;\n /** Toggle the value. Always has the same identity. */\n toggle: () => void;\n};\n\n/**\n * Hook to store a value and generate callbacks for setting the value to true or false.\n * The identity of the callbacks will always stay the same.\n *\n * @param initialState - Initial value\n * @returns Array with the current value and an object containing the updater callbacks.\n */\nexport function useBoolean(initialState: boolean): [boolean, UseBooleanCallbacks] {\n const [value, setValue] = React.useState(initialState);\n\n const setTrue = useConst(() => () => {\n setValue(true);\n });\n const setFalse = useConst(() => () => {\n setValue(false);\n });\n const toggle = useConst(() => () => {\n setValue(currentValue => !currentValue);\n });\n\n return [value, { setTrue, setFalse, toggle }];\n}\n"],"sourceRoot":"../src/"}
|
package/lib/hooks/useConst.js
CHANGED
@@ -15,7 +15,7 @@ export function useConst(initialValue) {
|
|
15
15
|
// Use useRef to store the value because it's the least expensive built-in hook that works here
|
16
16
|
// (we could also use `const [value] = React.useState(initialValue)` but that's more expensive
|
17
17
|
// internally due to reducer handling which we don't need)
|
18
|
-
|
18
|
+
const ref = React.useRef();
|
19
19
|
|
20
20
|
if (ref.current === undefined) {
|
21
21
|
// Box the value in an object so we can tell if it's initialized even if the initializer
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["hooks/useConst.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA;;;;;;;;;;AAUG;;AACH,OAAM,SAAU,QAAV,CAAsB,YAAtB,EAAiD;AACrD;AACA;AACA;AACA,QAAM,GAAG,GAAG,KAAK,CAAC,MAAN,EAAZ;;AACA,MAAI,GAAG,CAAC,OAAJ,KAAgB,SAApB,EAA+B;AAC7B;AACA;AACA,IAAA,GAAG,CAAC,OAAJ,GAAc;AACZ,MAAA,KAAK,EAAE,OAAO,YAAP,KAAwB,UAAxB,GAAsC,YAAyB,EAA/D,GAAoE;AAD/D,KAAd;AAGD;;AACD,SAAO,GAAG,CAAC,OAAJ,CAAY,KAAnB;AACD","sourcesContent":["import * as React from 'react';\n\n/**\n * Hook to initialize and return a constant value. Unlike `React.useMemo`, this is guaranteed to\n * always return the same value (and if the initializer is a function, only call it once).\n * This is similar to setting a private member in a class constructor.\n *\n * If the value should ever change based on dependencies, use `React.useMemo` instead.\n *\n * @param initialValue - Initial value, or function to get the initial value. Similar to `useState`,\n * only the value/function passed in the first time this is called is respected.\n * @returns The value. The identity of this value will always be the same.\n */\nexport function useConst<T>(initialValue: T | (() => T)): T {\n // Use useRef to store the value because it's the least expensive built-in hook that works here\n // (we could also use `const [value] = React.useState(initialValue)` but that's more expensive\n // internally due to reducer handling which we don't need)\n const ref = React.useRef<{ value: T }>();\n if (ref.current === undefined) {\n // Box the value in an object so we can tell if it's initialized even if the initializer\n // returns/is undefined\n ref.current = {\n value: typeof initialValue === 'function' ? (initialValue as Function)() : initialValue,\n };\n }\n return ref.current.value;\n}\n"],"sourceRoot":"../src/"}
|