@fluentui/react-utilities 0.0.0-nightlya9c3d10d9520220113.1 → 0.0.0-nightlyb8663b78ad20220207.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +48 -6
- package/CHANGELOG.md +11 -6
- package/dist/react-utilities.d.ts +134 -52
- package/lib/compose/getSlots.d.ts +7 -7
- package/lib/compose/getSlots.js.map +1 -1
- package/lib/compose/resolveShorthand.d.ts +5 -5
- package/lib/compose/resolveShorthand.js +3 -3
- package/lib/compose/types.d.ts +47 -25
- package/lib/compose/types.js.map +1 -1
- package/lib/hooks/index.d.ts +1 -0
- package/lib/hooks/index.js +1 -0
- package/lib/hooks/index.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/utils/applyTriggerPropsToChildren.js +19 -2
- package/lib/utils/applyTriggerPropsToChildren.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-commonjs/compose/getSlots.d.ts +7 -7
- package/lib-commonjs/compose/getSlots.js.map +1 -1
- package/lib-commonjs/compose/resolveShorthand.d.ts +5 -5
- package/lib-commonjs/compose/resolveShorthand.js +3 -3
- package/lib-commonjs/compose/types.d.ts +47 -25
- package/lib-commonjs/compose/types.js.map +1 -1
- package/lib-commonjs/hooks/index.d.ts +1 -0
- package/lib-commonjs/hooks/index.js +2 -0
- package/lib-commonjs/hooks/index.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/utils/applyTriggerPropsToChildren.js +19 -2
- package/lib-commonjs/utils/applyTriggerPropsToChildren.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 +4 -2
- 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/package.json +3 -3
- 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/utils/onlyChild.d.ts +0 -5
- package/lib-commonjs/utils/onlyChild.js +0 -23
- package/lib-commonjs/utils/onlyChild.js.map +0 -1
package/CHANGELOG.json
CHANGED
@@ -2,23 +2,53 @@
|
|
2
2
|
"name": "@fluentui/react-utilities",
|
3
3
|
"entries": [
|
4
4
|
{
|
5
|
-
"date": "
|
6
|
-
"tag": "@fluentui/react-utilities_v0.0.0-
|
7
|
-
"version": "0.0.0-
|
5
|
+
"date": "Mon, 07 Feb 2022 04:15:37 GMT",
|
6
|
+
"tag": "@fluentui/react-utilities_v0.0.0-nightlyb8663b78ad20220207.1",
|
7
|
+
"version": "0.0.0-nightlyb8663b78ad20220207.1",
|
8
8
|
"comments": {
|
9
9
|
"prerelease": [
|
10
10
|
{
|
11
11
|
"author": "email not defined",
|
12
12
|
"package": "@fluentui/react-utilities",
|
13
|
-
"commit": "
|
13
|
+
"commit": "2e460da7ff58924597e3137a784dc897fd174d71",
|
14
14
|
"comment": "Release nightly v9"
|
15
15
|
},
|
16
|
+
{
|
17
|
+
"author": "behowell@microsoft.com",
|
18
|
+
"package": "@fluentui/react-utilities",
|
19
|
+
"commit": "317209bb5cd57c40f35bc42060acb7e3cce5ec95",
|
20
|
+
"comment": "Rename component hooks add the suffix _unstable, as their API has not been finalized yet"
|
21
|
+
},
|
16
22
|
{
|
17
23
|
"author": "behowell@microsoft.com",
|
18
24
|
"package": "@fluentui/react-utilities",
|
19
25
|
"commit": "7cc28ed8320b00f42d91c63882f10316db2205c5",
|
20
26
|
"comment": "getSlots: remove slotNames param, and infer from state.components instead"
|
21
27
|
},
|
28
|
+
{
|
29
|
+
"author": "olfedias@microsoft.com",
|
30
|
+
"package": "@fluentui/react-utilities",
|
31
|
+
"commit": "d2eb57808a403b70845a732a62b55aa64d66b2a0",
|
32
|
+
"comment": "add useTriggerElement() hook"
|
33
|
+
},
|
34
|
+
{
|
35
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
36
|
+
"package": "@fluentui/react-utilities",
|
37
|
+
"commit": "0bc161458eae5ae8d387172430496ce9829b1bb1",
|
38
|
+
"comment": "Adding ComponentSlotProps to allow ref to be passed in composite components."
|
39
|
+
},
|
40
|
+
{
|
41
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
42
|
+
"package": "@fluentui/react-utilities",
|
43
|
+
"commit": "e0b8e1fa6980077e7b311fd1c72c28d3e4305db0",
|
44
|
+
"comment": "Renaming most *Shorthand* composition types to *SlotProps* so they better reflect what the types do."
|
45
|
+
},
|
46
|
+
{
|
47
|
+
"author": "behowell@microsoft.com",
|
48
|
+
"package": "@fluentui/react-utilities",
|
49
|
+
"commit": "f30e7585a8d2abd9db06c4076f39a779008b0eca",
|
50
|
+
"comment": "Update trigger utilities to handle nested triggers"
|
51
|
+
},
|
22
52
|
{
|
23
53
|
"author": "elcraig@microsoft.com",
|
24
54
|
"package": "@fluentui/react-utilities",
|
@@ -28,8 +58,8 @@
|
|
28
58
|
{
|
29
59
|
"author": "beachball",
|
30
60
|
"package": "@fluentui/react-utilities",
|
31
|
-
"comment": "Bump @fluentui/keyboard-keys to v0.0.0-
|
32
|
-
"commit": "
|
61
|
+
"comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightlyb8663b78ad20220207.1",
|
62
|
+
"commit": "2e460da7ff58924597e3137a784dc897fd174d71"
|
33
63
|
}
|
34
64
|
],
|
35
65
|
"none": [
|
@@ -39,6 +69,18 @@
|
|
39
69
|
"commit": "3360b45ec159250b1346c91afad7dce138e6bc20",
|
40
70
|
"comment": "Update API file to version generated by typescript 4.3"
|
41
71
|
},
|
72
|
+
{
|
73
|
+
"author": "olfedias@microsoft.com",
|
74
|
+
"package": "@fluentui/react-utilities",
|
75
|
+
"commit": "c061e98be4b4a718c72a144a1f60bb5515824612",
|
76
|
+
"comment": "remove inline-style-expand-shorthand from tsconfigs"
|
77
|
+
},
|
78
|
+
{
|
79
|
+
"author": "martinhochel@microsoft.com",
|
80
|
+
"package": "@fluentui/react-utilities",
|
81
|
+
"commit": "8dfa712156b70414205b87b5b6d099367b0c297d",
|
82
|
+
"comment": "chore: use storybook runner for all vNext packages"
|
83
|
+
},
|
42
84
|
{
|
43
85
|
"author": "seanmonahan@microsoft.com",
|
44
86
|
"package": "@fluentui/react-utilities",
|
package/CHANGELOG.md
CHANGED
@@ -1,20 +1,25 @@
|
|
1
1
|
# Change Log - @fluentui/react-utilities
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Mon, 07 Feb 2022 04:15:37 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
-
## [0.0.0-
|
7
|
+
## [0.0.0-nightlyb8663b78ad20220207.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v0.0.0-nightlyb8663b78ad20220207.1)
|
8
8
|
|
9
|
-
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.0.0-beta.4..@fluentui/react-utilities_v0.0.0-
|
9
|
+
Mon, 07 Feb 2022 04:15:37 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.0.0-beta.4..@fluentui/react-utilities_v0.0.0-nightlyb8663b78ad20220207.1)
|
11
11
|
|
12
12
|
### Changes
|
13
13
|
|
14
|
-
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/
|
14
|
+
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/2e460da7ff58924597e3137a784dc897fd174d71) by email not defined)
|
15
|
+
- Rename component hooks add the suffix _unstable, as their API has not been finalized yet ([PR #21365](https://github.com/microsoft/fluentui/pull/21365) by behowell@microsoft.com)
|
15
16
|
- getSlots: remove slotNames param, and infer from state.components instead ([PR #21134](https://github.com/microsoft/fluentui/pull/21134) by behowell@microsoft.com)
|
17
|
+
- add useTriggerElement() hook ([PR #21225](https://github.com/microsoft/fluentui/pull/21225) by olfedias@microsoft.com)
|
18
|
+
- Adding ComponentSlotProps to allow ref to be passed in composite components. ([PR #20890](https://github.com/microsoft/fluentui/pull/20890) by Humberto.Morimoto@microsoft.com)
|
19
|
+
- Renaming most *Shorthand* composition types to *SlotProps* so they better reflect what the types do. ([PR #20891](https://github.com/microsoft/fluentui/pull/20891) by Humberto.Morimoto@microsoft.com)
|
20
|
+
- Update trigger utilities to handle nested triggers ([PR #21495](https://github.com/microsoft/fluentui/pull/21495) by behowell@microsoft.com)
|
16
21
|
- [breaking] Remove useControllableValue hook (use useControllableState instead) ([PR #20865](https://github.com/microsoft/fluentui/pull/20865) by elcraig@microsoft.com)
|
17
|
-
- Bump @fluentui/keyboard-keys to v0.0.0-
|
22
|
+
- Bump @fluentui/keyboard-keys to v0.0.0-nightlyb8663b78ad20220207.1 ([commit](https://github.com/microsoft/fluentui/commit/2e460da7ff58924597e3137a784dc897fd174d71) by beachball)
|
18
23
|
|
19
24
|
## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.0.0-beta.4)
|
20
25
|
|
@@ -71,25 +71,39 @@ export declare const colGroupProperties: Record<string, number>;
|
|
71
71
|
|
72
72
|
export declare const colProperties: Record<string, number>;
|
73
73
|
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
export declare type
|
79
|
-
|
80
|
-
|
81
|
-
};
|
82
|
-
} & Shorthands;
|
74
|
+
/**
|
75
|
+
* Defines the Props type for a component given its slots and the definition of which one is the primary slot,
|
76
|
+
* defaulting to root if one is not provided.
|
77
|
+
*/
|
78
|
+
export declare type ComponentProps<Slots extends SlotPropsRecord, Primary extends keyof Slots = 'root'> = Omit<{
|
79
|
+
[Key in keyof Slots]?: ShorthandProps<NonNullable<Slots[Key]>>;
|
80
|
+
}, Primary & 'root'> & PropsWithoutRef<Slots[Primary]>;
|
83
81
|
|
84
82
|
/**
|
85
|
-
*
|
83
|
+
* Defines the slot props for a slot that supports a Component type.
|
86
84
|
*
|
87
|
-
*
|
88
|
-
*
|
85
|
+
* For intrinsic/native elements like 'div', use {@link IntrinsicSlotProps} instead.
|
86
|
+
*
|
87
|
+
* The generic param is the type of a control, i.e. a React component. For example:
|
88
|
+
*
|
89
|
+
* @example
|
90
|
+
* ```
|
91
|
+
* type Props = {...}
|
92
|
+
* const Button: React.FC<Props> = () => {...}
|
93
|
+
* // $ExpectType ...
|
94
|
+
* type SlotProps = ComponentSlotProps<typeof Button>
|
95
|
+
* ```
|
89
96
|
*/
|
90
|
-
export declare type
|
91
|
-
|
92
|
-
|
97
|
+
export declare type ComponentSlotProps<Component extends React_2.ComponentType> = Component extends React_2.ComponentType<infer Props> ? SlotProps<Props> : never;
|
98
|
+
|
99
|
+
/**
|
100
|
+
* Defines the State object of a component given its slots.
|
101
|
+
*/
|
102
|
+
export declare type ComponentState<Slots extends SlotPropsRecord> = {
|
103
|
+
components: {
|
104
|
+
[Key in keyof Slots]-?: React_2.ComponentType<NonNullable<Slots[Key]> extends SlotProps<infer P> ? P : NonNullable<Slots[Key]>> | (NonNullable<Slots[Key]> extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);
|
105
|
+
};
|
106
|
+
} & Slots;
|
93
107
|
|
94
108
|
/**
|
95
109
|
* Default context value to use in case there is no SSRProvider. This is fine for client-only apps.
|
@@ -105,6 +119,23 @@ export declare const defaultSSRContextValue: SSRContextValue;
|
|
105
119
|
*/
|
106
120
|
export declare const divProperties: Record<string, number>;
|
107
121
|
|
122
|
+
/**
|
123
|
+
* Allows a component to be tagged as a FluentUI trigger component.
|
124
|
+
*
|
125
|
+
* Triggers are special-case components: they attach event listeners and other props on their child,
|
126
|
+
* and use them to trigger another component to show. Examples include `MenuTrigger` and `Tooltip`.
|
127
|
+
*
|
128
|
+
* A component can be tagged as a trigger as follows:
|
129
|
+
* ```ts
|
130
|
+
* const MyComponent: React.FC<MyComponentProps> & FluentTriggerComponent = ...;
|
131
|
+
*
|
132
|
+
* MyComponent.isFluentTriggerComponent = true; // MUST also set this to true
|
133
|
+
* ```
|
134
|
+
*/
|
135
|
+
export declare type FluentTriggerComponent = {
|
136
|
+
isFluentTriggerComponent?: boolean;
|
137
|
+
};
|
138
|
+
|
108
139
|
/**
|
109
140
|
* An array of FORM tag properties and events.
|
110
141
|
*
|
@@ -187,9 +218,31 @@ export declare const getRTLSafeKey: (key: string, dir: 'ltr' | 'rtl') => string;
|
|
187
218
|
* @param state - State including slot definitions
|
188
219
|
* @returns An object containing the `slots` map and `slotProps` map.
|
189
220
|
*/
|
190
|
-
export declare function getSlots<R extends
|
221
|
+
export declare function getSlots<R extends SlotPropsRecord>(state: ComponentState<R>): {
|
191
222
|
slots: Slots<R>;
|
192
|
-
slotProps:
|
223
|
+
slotProps: ObjectSlotProps<R>;
|
224
|
+
};
|
225
|
+
|
226
|
+
/**
|
227
|
+
* Gets the trigger element of a FluentTriggerComponent (such as Tooltip or MenuTrigger).
|
228
|
+
*
|
229
|
+
* In the case where the immediate child is itself a FluentTriggerComponent and/or React Fragment,
|
230
|
+
* it returns the first descendant that is _not_ a FluentTriggerComponent or Fragment.
|
231
|
+
* This allows multiple triggers to be stacked, and still apply their props to the actual trigger element.
|
232
|
+
*
|
233
|
+
* For example, the following returns `<div id="child" />`:
|
234
|
+
* ```jsx
|
235
|
+
* getTriggerChild(
|
236
|
+
* <Tooltip>
|
237
|
+
* <MenuTrigger>
|
238
|
+
* <div id="child" />
|
239
|
+
* </MenuTrigger>
|
240
|
+
* </Tooltip>
|
241
|
+
* );
|
242
|
+
* ```
|
243
|
+
*/
|
244
|
+
export declare const getTriggerChild: (children: React_2.ReactNode) => React_2.ReactElement & {
|
245
|
+
ref?: React_2.Ref<unknown>;
|
193
246
|
};
|
194
247
|
|
195
248
|
/**
|
@@ -227,25 +280,31 @@ export declare const inputProperties: Record<string, number>;
|
|
227
280
|
|
228
281
|
/**
|
229
282
|
* Define the slot arguments for a slot that supports one or more intrinsic element types, such as 'div'.
|
230
|
-
* For slots that support custom components, use {@link
|
283
|
+
* For slots that support custom components, use {@link ComponentSlotProps} instead.
|
231
284
|
*
|
232
285
|
* The first param is the slot's default type if no `as` prop is specified.
|
233
286
|
* The second param is an optional union of alternative types that can be specified for the `as` prop.
|
234
287
|
*
|
235
288
|
* ```
|
236
|
-
*
|
237
|
-
*
|
238
|
-
*
|
289
|
+
* IntrinsicSlotProps<'div'> // Slot is always div
|
290
|
+
* IntrinsicSlotProps<'button', 'a'> // Defaults to button, but allows as="a" with anchor-specific props
|
291
|
+
* IntrinsicSlotProps<'label', 'span' | 'div'>; // Defaults to label, but allows as="span" or as="div"
|
239
292
|
* ```
|
240
293
|
*/
|
241
|
-
export declare type
|
294
|
+
export declare type IntrinsicSlotProps<DefaultAs extends keyof JSX.IntrinsicElements, AlternateAs extends keyof JSX.IntrinsicElements = never> = IsSingleton<DefaultAs> extends false ? 'Error: first parameter to IntrinsicSlotProps must be a single element type, not a union of types' : ({
|
242
295
|
as?: DefaultAs;
|
243
|
-
} &
|
296
|
+
} & SlotProps<React_2.PropsWithRef<JSX.IntrinsicElements[DefaultAs]>>) | {
|
244
297
|
[As in AlternateAs]: {
|
245
298
|
as: As;
|
246
|
-
} &
|
299
|
+
} & SlotProps<React_2.PropsWithRef<JSX.IntrinsicElements[As]>>;
|
247
300
|
}[AlternateAs];
|
248
301
|
|
302
|
+
/**
|
303
|
+
* Checks if a given element is a FluentUI trigger (e.g. `MenuTrigger` or `Tooltip`).
|
304
|
+
* See the {@link FluentTriggerComponent} type for more info.
|
305
|
+
*/
|
306
|
+
export declare const isFluentTrigger: (element: React_2.ReactElement) => boolean | undefined;
|
307
|
+
|
249
308
|
/**
|
250
309
|
* Evaluates to true if the given type contains exactly one string, or false if it is a union of strings.
|
251
310
|
*
|
@@ -277,19 +336,10 @@ export declare const liProperties: Record<string, number>;
|
|
277
336
|
*/
|
278
337
|
export declare const nullRender: () => null;
|
279
338
|
|
280
|
-
|
281
|
-
|
282
|
-
*
|
283
|
-
* For intrinsic elements like 'div', use {@link IntrinsicShorthandProps} instead.
|
284
|
-
*/
|
285
|
-
export declare type ObjectShorthandProps<Props extends {
|
286
|
-
children?: React_2.ReactNode;
|
287
|
-
} = {}> = Props & {
|
288
|
-
children?: Props['children'] | ShorthandRenderFunction<Props>;
|
339
|
+
declare type ObjectSlotProps<S extends SlotPropsRecord> = {
|
340
|
+
[K in keyof S]-?: NonNullable<S[K]> extends AsIntrinsicElement<infer As> ? UnionToIntersection<JSX.IntrinsicElements[As]> : NonNullable<S[K]> extends SlotProps<infer P> ? P : never;
|
289
341
|
};
|
290
342
|
|
291
|
-
export declare type ObjectShorthandPropsRecord = Record<string, DefaultObjectShorthandProps | undefined>;
|
292
|
-
|
293
343
|
/**
|
294
344
|
* This is part of a hack to infer the element type from a native element *props* type.
|
295
345
|
* The only place the original element is found in a native props type (at least that's workable
|
@@ -326,16 +376,11 @@ export declare const olProperties: Record<string, number>;
|
|
326
376
|
*/
|
327
377
|
export declare function omit<TObj extends Record<string, any>, Exclusions extends (keyof TObj)[]>(obj: TObj, exclusions: Exclusions): Omit<TObj, Exclusions[number]>;
|
328
378
|
|
329
|
-
/**
|
330
|
-
* Similar to React.Children.only, but drills into fragments rather than treating them as a single child
|
331
|
-
*/
|
332
|
-
export declare const onlyChild: <P>(child: boolean | React_2.ReactText | React_2.ReactFragment | React_2.ReactPortal | React_2.ReactElement<P, string | React_2.JSXElementConstructor<any>> | null | undefined) => React_2.ReactElement<P, string | React_2.JSXElementConstructor<any>>;
|
333
|
-
|
334
379
|
export declare const optionProperties: Record<string, number>;
|
335
380
|
|
336
381
|
/**
|
337
382
|
* Removes the 'ref' prop from the given Props type, leaving unions intact (such as the discriminated union created by
|
338
|
-
*
|
383
|
+
* IntrinsicSlotProps). This allows IntrinsicSlotProps to be used with React.forwardRef.
|
339
384
|
*
|
340
385
|
* The conditional "extends unknown" (always true) exploits a quirk in the way TypeScript handles conditional
|
341
386
|
* types, to prevent unions from being expanded.
|
@@ -356,12 +401,12 @@ export declare type RefObjectFunction<T> = React_2.RefObject<T> & ((value: T) =>
|
|
356
401
|
export declare function resetIdsForTests(): void;
|
357
402
|
|
358
403
|
/**
|
359
|
-
* Resolves
|
404
|
+
* Resolves shorthands into slot props, to ensure normalization of the signature
|
360
405
|
* being passed down to getSlots method
|
361
|
-
* @param value - the base
|
362
|
-
* @param options - options to resolve
|
406
|
+
* @param value - the base shorthand props
|
407
|
+
* @param options - options to resolve shorthand props
|
363
408
|
*/
|
364
|
-
export declare function resolveShorthand<Props extends
|
409
|
+
export declare function resolveShorthand<Props extends UnknownSlotProps, Required extends boolean = false>(value: ShorthandProps<Props>, options?: ResolveShorthandOptions<Props, Required>): Required extends false ? Props | undefined : Props;
|
365
410
|
|
366
411
|
export declare type ResolveShorthandOptions<Props extends Record<string, any>, Required extends boolean = false> = {
|
367
412
|
required?: Required;
|
@@ -375,9 +420,7 @@ export declare type ResolveShorthandOptions<Props extends Record<string, any>, R
|
|
375
420
|
*/
|
376
421
|
export declare const selectProperties: Record<string, number>;
|
377
422
|
|
378
|
-
export declare type ShorthandProps<Props extends
|
379
|
-
|
380
|
-
export declare type ShorthandRenderFunction<Props> = (Component: React_2.ElementType<Props>, props: Omit<Props, 'children' | 'as'>) => React_2.ReactNode;
|
423
|
+
export declare type ShorthandProps<Props extends UnknownSlotProps> = React_2.ReactChild | React_2.ReactNodeArray | React_2.ReactPortal | number | null | undefined | Props;
|
381
424
|
|
382
425
|
/**
|
383
426
|
* Checks if the keyboard event should preventDefault() for Enter and Spacebar keys
|
@@ -386,12 +429,22 @@ export declare type ShorthandRenderFunction<Props> = (Component: React_2.Element
|
|
386
429
|
*/
|
387
430
|
export declare function shouldPreventDefaultOnKeyDown(e: KeyboardEvent | React_2.KeyboardEvent): boolean;
|
388
431
|
|
389
|
-
|
390
|
-
|
432
|
+
/**
|
433
|
+
* Takes the props we want to support for a slot and adds the ability for `children` to be a render function that takes
|
434
|
+
* those props.
|
435
|
+
*/
|
436
|
+
export declare type SlotProps<Props extends {
|
437
|
+
children?: React_2.ReactNode;
|
438
|
+
} = {}> = Props & {
|
439
|
+
children?: Props['children'] | SlotRenderFunction<Props>;
|
391
440
|
};
|
392
441
|
|
393
|
-
export declare type
|
394
|
-
|
442
|
+
export declare type SlotPropsRecord = Record<string, UnknownSlotProps | undefined>;
|
443
|
+
|
444
|
+
export declare type SlotRenderFunction<Props> = (Component: React_2.ElementType<Props>, props: Omit<Props, 'children' | 'as'>) => React_2.ReactNode;
|
445
|
+
|
446
|
+
export declare type Slots<S extends SlotPropsRecord> = {
|
447
|
+
[K in keyof S]-?: NonNullable<S[K]> extends AsIntrinsicElement<infer As> ? As : S[K] extends SlotProps<infer P> ? React_2.ElementType<NonNullable<P>> : React_2.ElementType<NonNullable<S[K]>>;
|
395
448
|
};
|
396
449
|
|
397
450
|
export declare const SSRContext: React_2.Context<SSRContextValue>;
|
@@ -454,6 +507,16 @@ export declare const trProperties: Record<string, number>;
|
|
454
507
|
*/
|
455
508
|
export declare type UnionToIntersection<U> = (U extends unknown ? (x: U) => U : never) extends (x: infer I) => U ? I : never;
|
456
509
|
|
510
|
+
/**
|
511
|
+
* Matches any slot props type.
|
512
|
+
*
|
513
|
+
* This should ONLY be used in type templates as in `extends DefaultObjectSlotProps`;
|
514
|
+
* it shouldn't be used as the type of a slot.
|
515
|
+
*/
|
516
|
+
export declare type UnknownSlotProps = SlotProps<Pick<React_2.HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'> & {
|
517
|
+
as?: keyof JSX.IntrinsicElements;
|
518
|
+
}>;
|
519
|
+
|
457
520
|
/**
|
458
521
|
* Hook to store a value and generate callbacks for setting the value to true or false.
|
459
522
|
* The identity of the callbacks will always stay the same.
|
@@ -576,6 +639,25 @@ export declare const useIsomorphicLayoutEffect: typeof React_2.useEffect;
|
|
576
639
|
*/
|
577
640
|
export declare function useIsSSR(): boolean;
|
578
641
|
|
642
|
+
/**
|
643
|
+
* Combine two event callbacks into a single callback function that calls each one in order.
|
644
|
+
*
|
645
|
+
* This is useful to add an event listener to an existing element without overwriting the current listener, if any.
|
646
|
+
*
|
647
|
+
* For example:
|
648
|
+
* ```ts
|
649
|
+
* state.slot.onChange = useMergedCallbacks(state.slot.onChange, ev => {
|
650
|
+
* // Handle onChange
|
651
|
+
* });
|
652
|
+
* ```
|
653
|
+
*
|
654
|
+
* @param callback1 - The first callback to be called
|
655
|
+
* @param callback2 - The second callback to be called
|
656
|
+
*
|
657
|
+
* @returns An event callback that calls the callbacks in order, and is stable between renders
|
658
|
+
*/
|
659
|
+
export declare function useMergedEventCallbacks<Args extends unknown[]>(callback1: ((...args: Args) => void) | undefined, callback2: ((...args: Args) => void) | undefined): (...args: Args) => void;
|
660
|
+
|
579
661
|
/**
|
580
662
|
* React hook to merge multiple React refs (either MutableRefObjects or ref callbacks) into a single ref callback that
|
581
663
|
* updates all provided refs
|
@@ -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]-?: NonNullable<S[K]> extends AsIntrinsicElement<infer As> ? As : S[K] extends
|
2
|
+
import type { AsIntrinsicElement, ComponentState, SlotProps, SlotPropsRecord, UnionToIntersection } from './types';
|
3
|
+
export declare type Slots<S extends SlotPropsRecord> = {
|
4
|
+
[K in keyof S]-?: NonNullable<S[K]> extends AsIntrinsicElement<infer As> ? As : S[K] extends SlotProps<infer P> ? React.ElementType<NonNullable<P>> : React.ElementType<NonNullable<S[K]>>;
|
5
5
|
};
|
6
|
-
declare type
|
7
|
-
[K in keyof S]-?: NonNullable<S[K]> extends AsIntrinsicElement<infer As> ? UnionToIntersection<JSX.IntrinsicElements[As]> : NonNullable<S[K]> extends
|
6
|
+
declare type ObjectSlotProps<S extends SlotPropsRecord> = {
|
7
|
+
[K in keyof S]-?: NonNullable<S[K]> extends AsIntrinsicElement<infer As> ? UnionToIntersection<JSX.IntrinsicElements[As]> : NonNullable<S[K]> extends SlotProps<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`
|
@@ -23,8 +23,8 @@ declare type SlotProps<S extends ObjectShorthandPropsRecord> = {
|
|
23
23
|
* @param state - State including slot definitions
|
24
24
|
* @returns An object containing the `slots` map and `slotProps` map.
|
25
25
|
*/
|
26
|
-
export declare function getSlots<R extends
|
26
|
+
export declare function getSlots<R extends SlotPropsRecord>(state: ComponentState<R>): {
|
27
27
|
slots: Slots<R>;
|
28
|
-
slotProps:
|
28
|
+
slotProps: ObjectSlotProps<R>;
|
29
29
|
};
|
30
30
|
export {};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../src/compose/getSlots.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;
|
1
|
+
{"version":3,"sources":["../../src/compose/getSlots.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,UAAT,QAA2B,cAA3B;AACA,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,UAAD,EAAa,SAAb,CAAP;AACD;;AACD,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA,EAAE,EAAE,MAAhB;AAAwB,OAAG;AAA3B,MAAoC,KAAK,CAAC,QAAD,CAA/C;AAEA,QAAM,IAAI,GAAI,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,UAAN,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,KAAA,CAAhB,GAAgB,EAAA,CAAG,QAAH,CAAhB,MAAiC,SAAjC,IAA8C,OAAO,KAAK,CAAC,UAAN,CAAiB,QAAjB,CAAP,KAAsC,QAApF,GACV,MAAM,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","sourceRoot":""}
|
@@ -1,12 +1,12 @@
|
|
1
|
-
import type {
|
1
|
+
import type { UnknownSlotProps, ShorthandProps } from './types';
|
2
2
|
export declare type ResolveShorthandOptions<Props extends Record<string, any>, Required extends boolean = false> = {
|
3
3
|
required?: Required;
|
4
4
|
defaultProps?: Props;
|
5
5
|
};
|
6
6
|
/**
|
7
|
-
* Resolves
|
7
|
+
* Resolves shorthands into slot props, to ensure normalization of the signature
|
8
8
|
* being passed down to getSlots method
|
9
|
-
* @param value - the base
|
10
|
-
* @param options - options to resolve
|
9
|
+
* @param value - the base shorthand props
|
10
|
+
* @param options - options to resolve shorthand props
|
11
11
|
*/
|
12
|
-
export declare function resolveShorthand<Props extends
|
12
|
+
export declare function resolveShorthand<Props extends UnknownSlotProps, Required extends boolean = false>(value: ShorthandProps<Props>, options?: ResolveShorthandOptions<Props, Required>): Required extends false ? Props | undefined : Props;
|
@@ -1,9 +1,9 @@
|
|
1
1
|
import { isValidElement } from 'react';
|
2
2
|
/**
|
3
|
-
* Resolves
|
3
|
+
* Resolves shorthands into slot props, to ensure normalization of the signature
|
4
4
|
* being passed down to getSlots method
|
5
|
-
* @param value - the base
|
6
|
-
* @param options - options to resolve
|
5
|
+
* @param value - the base shorthand props
|
6
|
+
* @param options - options to resolve shorthand props
|
7
7
|
*/
|
8
8
|
|
9
9
|
export function resolveShorthand(value, options) {
|
package/lib/compose/types.d.ts
CHANGED
@@ -1,45 +1,60 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
export declare type
|
3
|
-
export declare type
|
4
|
-
export declare type ShorthandProps<Props extends
|
2
|
+
export declare type SlotRenderFunction<Props> = (Component: React.ElementType<Props>, props: Omit<Props, 'children' | 'as'>) => React.ReactNode;
|
3
|
+
export declare type SlotPropsRecord = Record<string, UnknownSlotProps | undefined>;
|
4
|
+
export declare type ShorthandProps<Props extends UnknownSlotProps> = React.ReactChild | React.ReactNodeArray | React.ReactPortal | number | null | undefined | Props;
|
5
5
|
/**
|
6
|
-
* Matches any
|
6
|
+
* Matches any slot props type.
|
7
7
|
*
|
8
|
-
* This should ONLY be used in type templates as in `extends
|
8
|
+
* This should ONLY be used in type templates as in `extends DefaultObjectSlotProps`;
|
9
9
|
* it shouldn't be used as the type of a slot.
|
10
10
|
*/
|
11
|
-
export declare type
|
11
|
+
export declare type UnknownSlotProps = SlotProps<Pick<React.HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'> & {
|
12
12
|
as?: keyof JSX.IntrinsicElements;
|
13
13
|
}>;
|
14
14
|
/**
|
15
|
-
*
|
16
|
-
*
|
17
|
-
* For intrinsic elements like 'div', use {@link IntrinsicShorthandProps} instead.
|
15
|
+
* Takes the props we want to support for a slot and adds the ability for `children` to be a render function that takes
|
16
|
+
* those props.
|
18
17
|
*/
|
19
|
-
export declare type
|
18
|
+
export declare type SlotProps<Props extends {
|
20
19
|
children?: React.ReactNode;
|
21
20
|
} = {}> = Props & {
|
22
|
-
children?: Props['children'] |
|
21
|
+
children?: Props['children'] | SlotRenderFunction<Props>;
|
23
22
|
};
|
23
|
+
/**
|
24
|
+
* Defines the slot props for a slot that supports a Component type.
|
25
|
+
*
|
26
|
+
* For intrinsic/native elements like 'div', use {@link IntrinsicSlotProps} instead.
|
27
|
+
*
|
28
|
+
* The generic param is the type of a control, i.e. a React component. For example:
|
29
|
+
*
|
30
|
+
* @example
|
31
|
+
* ```
|
32
|
+
* type Props = {...}
|
33
|
+
* const Button: React.FC<Props> = () => {...}
|
34
|
+
* // $ExpectType ...
|
35
|
+
* type SlotProps = ComponentSlotProps<typeof Button>
|
36
|
+
* ```
|
37
|
+
*/
|
38
|
+
export declare type ComponentSlotProps<Component extends React.ComponentType> = Component extends React.ComponentType<infer Props> ? SlotProps<Props> : never;
|
24
39
|
/**
|
25
40
|
* Define the slot arguments for a slot that supports one or more intrinsic element types, such as 'div'.
|
26
|
-
* For slots that support custom components, use {@link
|
41
|
+
* For slots that support custom components, use {@link ComponentSlotProps} instead.
|
27
42
|
*
|
28
43
|
* The first param is the slot's default type if no `as` prop is specified.
|
29
44
|
* The second param is an optional union of alternative types that can be specified for the `as` prop.
|
30
45
|
*
|
31
46
|
* ```
|
32
|
-
*
|
33
|
-
*
|
34
|
-
*
|
47
|
+
* IntrinsicSlotProps<'div'> // Slot is always div
|
48
|
+
* IntrinsicSlotProps<'button', 'a'> // Defaults to button, but allows as="a" with anchor-specific props
|
49
|
+
* IntrinsicSlotProps<'label', 'span' | 'div'>; // Defaults to label, but allows as="span" or as="div"
|
35
50
|
* ```
|
36
51
|
*/
|
37
|
-
export declare type
|
52
|
+
export declare type IntrinsicSlotProps<DefaultAs extends keyof JSX.IntrinsicElements, AlternateAs extends keyof JSX.IntrinsicElements = never> = IsSingleton<DefaultAs> extends false ? 'Error: first parameter to IntrinsicSlotProps must be a single element type, not a union of types' : ({
|
38
53
|
as?: DefaultAs;
|
39
|
-
} &
|
54
|
+
} & SlotProps<React.PropsWithRef<JSX.IntrinsicElements[DefaultAs]>>) | {
|
40
55
|
[As in AlternateAs]: {
|
41
56
|
as: As;
|
42
|
-
} &
|
57
|
+
} & SlotProps<React.PropsWithRef<JSX.IntrinsicElements[As]>>;
|
43
58
|
}[AlternateAs];
|
44
59
|
/**
|
45
60
|
* Evaluates to true if the given type contains exactly one string, or false if it is a union of strings.
|
@@ -69,20 +84,27 @@ export declare type AsIntrinsicElement<As extends keyof JSX.IntrinsicElements> =
|
|
69
84
|
export declare type UnionToIntersection<U> = (U extends unknown ? (x: U) => U : never) extends (x: infer I) => U ? I : never;
|
70
85
|
/**
|
71
86
|
* Removes the 'ref' prop from the given Props type, leaving unions intact (such as the discriminated union created by
|
72
|
-
*
|
87
|
+
* IntrinsicSlotProps). This allows IntrinsicSlotProps to be used with React.forwardRef.
|
73
88
|
*
|
74
89
|
* The conditional "extends unknown" (always true) exploits a quirk in the way TypeScript handles conditional
|
75
90
|
* types, to prevent unions from being expanded.
|
76
91
|
*/
|
77
92
|
export declare type PropsWithoutRef<P> = 'ref' extends keyof P ? (P extends unknown ? Omit<P, 'ref'> : P) : P;
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
93
|
+
/**
|
94
|
+
* Defines the Props type for a component given its slots and the definition of which one is the primary slot,
|
95
|
+
* defaulting to root if one is not provided.
|
96
|
+
*/
|
97
|
+
export declare type ComponentProps<Slots extends SlotPropsRecord, Primary extends keyof Slots = 'root'> = Omit<{
|
98
|
+
[Key in keyof Slots]?: ShorthandProps<NonNullable<Slots[Key]>>;
|
99
|
+
}, Primary & 'root'> & PropsWithoutRef<Slots[Primary]>;
|
100
|
+
/**
|
101
|
+
* Defines the State object of a component given its slots.
|
102
|
+
*/
|
103
|
+
export declare type ComponentState<Slots extends SlotPropsRecord> = {
|
82
104
|
components: {
|
83
|
-
[Key in keyof
|
105
|
+
[Key in keyof Slots]-?: React.ComponentType<NonNullable<Slots[Key]> extends SlotProps<infer P> ? P : NonNullable<Slots[Key]>> | (NonNullable<Slots[Key]> extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);
|
84
106
|
};
|
85
|
-
} &
|
107
|
+
} & Slots;
|
86
108
|
/**
|
87
109
|
* This is part of a hack to infer the element type from a native element *props* type.
|
88
110
|
* The only place the original element is found in a native props type (at least that's workable
|
package/lib/compose/types.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../src/compose/types.ts"],"names":[],"mappings":"
|
1
|
+
{"version":3,"sources":["../../src/compose/types.ts"],"names":[],"mappings":"WAyKA;AACA;AACA;AACA;AACA","sourceRoot":""}
|
package/lib/hooks/index.d.ts
CHANGED
@@ -5,6 +5,7 @@ export * from './useEventCallback';
|
|
5
5
|
export * from './useFirstMount';
|
6
6
|
export * from './useId';
|
7
7
|
export * from './useIsomorphicLayoutEffect';
|
8
|
+
export * from './useMergedEventCallbacks';
|
8
9
|
export * from './useMergedRefs';
|
9
10
|
export * from './useMount';
|
10
11
|
export * from './useOnClickOutside';
|
package/lib/hooks/index.js
CHANGED
@@ -5,6 +5,7 @@ export * from './useEventCallback';
|
|
5
5
|
export * from './useFirstMount';
|
6
6
|
export * from './useId';
|
7
7
|
export * from './useIsomorphicLayoutEffect';
|
8
|
+
export * from './useMergedEventCallbacks';
|
8
9
|
export * from './useMergedRefs';
|
9
10
|
export * from './useMount';
|
10
11
|
export * from './useOnClickOutside';
|
package/lib/hooks/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC"}
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,6BAA6B,CAAC;AAC5C,cAAc,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"}
|