@fluentui/react-utilities 0.0.0-nightlyd3bf09bf8120211201.1 → 0.0.0-nightlye1926bfeca20220204.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 +80 -6
- package/CHANGELOG.md +13 -6
- package/dist/react-utilities.d.ts +155 -84
- package/lib/compose/getSlots.d.ts +11 -10
- package/lib/compose/getSlots.js +6 -4
- 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 +48 -26
- 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/useControllableState.d.ts +16 -6
- package/lib/hooks/useControllableState.js +13 -8
- package/lib/hooks/useControllableState.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/useOnClickOutside.js.map +1 -1
- package/lib/utils/applyTriggerPropsToChildren.d.ts +1 -1
- 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/utils/properties.js +40 -20
- package/lib/utils/properties.js.map +1 -1
- package/lib-commonjs/compose/getSlots.d.ts +11 -10
- package/lib-commonjs/compose/getSlots.js +6 -4
- 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 +48 -26
- package/lib-commonjs/compose/types.js.map +1 -1
- package/lib-commonjs/hooks/index.d.ts +1 -1
- package/lib-commonjs/hooks/index.js +2 -2
- package/lib-commonjs/hooks/index.js.map +1 -1
- package/lib-commonjs/hooks/useControllableState.d.ts +16 -6
- package/lib-commonjs/hooks/useControllableState.js +13 -8
- package/lib-commonjs/hooks/useControllableState.js.map +1 -1
- package/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/useOnClickOutside.js.map +1 -1
- package/lib-commonjs/utils/applyTriggerPropsToChildren.d.ts +1 -1
- 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/lib-commonjs/utils/properties.js +40 -20
- package/lib-commonjs/utils/properties.js.map +1 -1
- package/package.json +3 -7
- package/lib/hooks/useControllableValue.d.ts +0 -20
- package/lib/hooks/useControllableValue.js +0 -57
- package/lib/hooks/useControllableValue.js.map +0 -1
- package/lib/utils/onlyChild.d.ts +0 -5
- package/lib/utils/onlyChild.js +0 -13
- package/lib/utils/onlyChild.js.map +0 -1
- package/lib-commonjs/hooks/useControllableValue.d.ts +0 -20
- package/lib-commonjs/hooks/useControllableValue.js +0 -68
- package/lib-commonjs/hooks/useControllableValue.js.map +0 -1
- package/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,22 +2,96 @@
|
|
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": "Fri, 04 Feb 2022 04:13:21 GMT",
|
6
|
+
"tag": "@fluentui/react-utilities_v0.0.0-nightlye1926bfeca20220204.1",
|
7
|
+
"version": "0.0.0-nightlye1926bfeca20220204.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": "448766390ca759acf60ffccef08e4c3ffe41f4f6",
|
14
14
|
"comment": "Release nightly v9"
|
15
15
|
},
|
16
|
+
{
|
17
|
+
"author": "behowell@microsoft.com",
|
18
|
+
"package": "@fluentui/react-utilities",
|
19
|
+
"commit": "f30e7585a8d2abd9db06c4076f39a779008b0eca",
|
20
|
+
"comment": "Update trigger utilities to handle nested triggers"
|
21
|
+
},
|
22
|
+
{
|
23
|
+
"author": "elcraig@microsoft.com",
|
24
|
+
"package": "@fluentui/react-utilities",
|
25
|
+
"commit": "39ce3cbcf15ce2619649e1eddccf932736ceac07",
|
26
|
+
"comment": "[breaking] Remove useControllableValue hook (use useControllableState instead)"
|
27
|
+
},
|
28
|
+
{
|
29
|
+
"author": "behowell@microsoft.com",
|
30
|
+
"package": "@fluentui/react-utilities",
|
31
|
+
"commit": "317209bb5cd57c40f35bc42060acb7e3cce5ec95",
|
32
|
+
"comment": "Rename component hooks add the suffix _unstable, as their API has not been finalized yet"
|
33
|
+
},
|
34
|
+
{
|
35
|
+
"author": "behowell@microsoft.com",
|
36
|
+
"package": "@fluentui/react-utilities",
|
37
|
+
"commit": "7cc28ed8320b00f42d91c63882f10316db2205c5",
|
38
|
+
"comment": "getSlots: remove slotNames param, and infer from state.components instead"
|
39
|
+
},
|
40
|
+
{
|
41
|
+
"author": "olfedias@microsoft.com",
|
42
|
+
"package": "@fluentui/react-utilities",
|
43
|
+
"commit": "d2eb57808a403b70845a732a62b55aa64d66b2a0",
|
44
|
+
"comment": "add useTriggerElement() hook"
|
45
|
+
},
|
46
|
+
{
|
47
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
48
|
+
"package": "@fluentui/react-utilities",
|
49
|
+
"commit": "0bc161458eae5ae8d387172430496ce9829b1bb1",
|
50
|
+
"comment": "Adding ComponentSlotProps to allow ref to be passed in composite components."
|
51
|
+
},
|
52
|
+
{
|
53
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
54
|
+
"package": "@fluentui/react-utilities",
|
55
|
+
"commit": "e0b8e1fa6980077e7b311fd1c72c28d3e4305db0",
|
56
|
+
"comment": "Renaming most *Shorthand* composition types to *SlotProps* so they better reflect what the types do."
|
57
|
+
},
|
16
58
|
{
|
17
59
|
"author": "beachball",
|
18
60
|
"package": "@fluentui/react-utilities",
|
19
|
-
"comment": "Bump @fluentui/keyboard-keys to v0.0.0-
|
20
|
-
"commit": "
|
61
|
+
"comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightlye1926bfeca20220204.1",
|
62
|
+
"commit": "448766390ca759acf60ffccef08e4c3ffe41f4f6"
|
63
|
+
}
|
64
|
+
],
|
65
|
+
"none": [
|
66
|
+
{
|
67
|
+
"author": "martinhochel@microsoft.com",
|
68
|
+
"package": "@fluentui/react-utilities",
|
69
|
+
"commit": "8dfa712156b70414205b87b5b6d099367b0c297d",
|
70
|
+
"comment": "chore: use storybook runner for all vNext packages"
|
71
|
+
},
|
72
|
+
{
|
73
|
+
"author": "seanmonahan@microsoft.com",
|
74
|
+
"package": "@fluentui/react-utilities",
|
75
|
+
"commit": "6404bef16cebf1f67b9b80a9f6d5f605f9873df1",
|
76
|
+
"comment": "Update getSlots() docs."
|
77
|
+
},
|
78
|
+
{
|
79
|
+
"author": "lingfangao@hotmail.com",
|
80
|
+
"package": "@fluentui/react-utilities",
|
81
|
+
"commit": "a4e048a0e03ddd676670da516e3a6612b26ea500",
|
82
|
+
"comment": "chore: Remove enzyme from react-utilities tests"
|
83
|
+
},
|
84
|
+
{
|
85
|
+
"author": "elcraig@microsoft.com",
|
86
|
+
"package": "@fluentui/react-utilities",
|
87
|
+
"commit": "3360b45ec159250b1346c91afad7dce138e6bc20",
|
88
|
+
"comment": "Update API file to version generated by typescript 4.3"
|
89
|
+
},
|
90
|
+
{
|
91
|
+
"author": "olfedias@microsoft.com",
|
92
|
+
"package": "@fluentui/react-utilities",
|
93
|
+
"commit": "c061e98be4b4a718c72a144a1f60bb5515824612",
|
94
|
+
"comment": "remove inline-style-expand-shorthand from tsconfigs"
|
21
95
|
}
|
22
96
|
]
|
23
97
|
}
|
package/CHANGELOG.md
CHANGED
@@ -1,18 +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 Fri, 04 Feb 2022 04:13:21 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
-
## [0.0.0-
|
7
|
+
## [0.0.0-nightlye1926bfeca20220204.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v0.0.0-nightlye1926bfeca20220204.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
|
+
Fri, 04 Feb 2022 04:13:21 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.0.0-beta.4..@fluentui/react-utilities_v0.0.0-nightlye1926bfeca20220204.1)
|
11
11
|
|
12
12
|
### Changes
|
13
13
|
|
14
|
-
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/
|
15
|
-
-
|
14
|
+
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/448766390ca759acf60ffccef08e4c3ffe41f4f6) by email not defined)
|
15
|
+
- Update trigger utilities to handle nested triggers ([PR #21495](https://github.com/microsoft/fluentui/pull/21495) by behowell@microsoft.com)
|
16
|
+
- [breaking] Remove useControllableValue hook (use useControllableState instead) ([PR #20865](https://github.com/microsoft/fluentui/pull/20865) by elcraig@microsoft.com)
|
17
|
+
- 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)
|
18
|
+
- getSlots: remove slotNames param, and infer from state.components instead ([PR #21134](https://github.com/microsoft/fluentui/pull/21134) by behowell@microsoft.com)
|
19
|
+
- add useTriggerElement() hook ([PR #21225](https://github.com/microsoft/fluentui/pull/21225) by olfedias@microsoft.com)
|
20
|
+
- 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)
|
21
|
+
- 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)
|
22
|
+
- Bump @fluentui/keyboard-keys to v0.0.0-nightlye1926bfeca20220204.1 ([commit](https://github.com/microsoft/fluentui/commit/448766390ca759acf60ffccef08e4c3ffe41f4f6) by beachball)
|
16
23
|
|
17
24
|
## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.0.0-beta.4)
|
18
25
|
|
@@ -11,7 +11,7 @@ export declare const anchorProperties: Record<string, number>;
|
|
11
11
|
/**
|
12
12
|
* Apply the trigger props to the children, either by calling the render function, or cloning with the new props.
|
13
13
|
*/
|
14
|
-
export declare const applyTriggerPropsToChildren: <TTriggerProps>(children: React_2.ReactElement<any, string |
|
14
|
+
export declare const applyTriggerPropsToChildren: <TTriggerProps>(children: React_2.ReactElement<any, string | React_2.JSXElementConstructor<any>> | ((props: TTriggerProps) => React_2.ReactNode) | null | undefined, triggerProps: TTriggerProps) => React_2.ReactNode;
|
15
15
|
|
16
16
|
/**
|
17
17
|
* Helper type for inferring the type of the as prop from a Props type.
|
@@ -58,8 +58,6 @@ export declare const buttonProperties: Record<string, number>;
|
|
58
58
|
*/
|
59
59
|
export declare function canUseDOM(): boolean;
|
60
60
|
|
61
|
-
export declare type ChangeCallback<TElement extends HTMLElement, TValue, TEvent extends React_2.SyntheticEvent<TElement> | undefined> = (ev: TEvent, newValue: TValue | undefined) => void;
|
62
|
-
|
63
61
|
/**
|
64
62
|
* Clamps `value` to a number between the min and max.
|
65
63
|
*
|
@@ -73,25 +71,39 @@ export declare const colGroupProperties: Record<string, number>;
|
|
73
71
|
|
74
72
|
export declare const colProperties: Record<string, number>;
|
75
73
|
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
export declare type
|
81
|
-
|
82
|
-
|
83
|
-
};
|
84
|
-
} & 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]>;
|
85
81
|
|
86
82
|
/**
|
87
|
-
*
|
83
|
+
* Defines the slot props for a slot that supports a Component type.
|
88
84
|
*
|
89
|
-
*
|
90
|
-
*
|
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
|
+
* ```
|
91
96
|
*/
|
92
|
-
export declare type
|
93
|
-
|
94
|
-
|
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;
|
95
107
|
|
96
108
|
/**
|
97
109
|
* Default context value to use in case there is no SSRProvider. This is fine for client-only apps.
|
@@ -100,11 +112,6 @@ export declare type DefaultObjectShorthandProps = ObjectShorthandProps<Pick<Reac
|
|
100
112
|
*/
|
101
113
|
export declare const defaultSSRContextValue: SSRContextValue;
|
102
114
|
|
103
|
-
/**
|
104
|
-
* Default value can be a value or an initializer
|
105
|
-
*/
|
106
|
-
declare type DefaultValue<TValue> = TValue | (() => TValue);
|
107
|
-
|
108
115
|
/**
|
109
116
|
* An array of DIV tag properties and events.
|
110
117
|
*
|
@@ -112,6 +119,23 @@ declare type DefaultValue<TValue> = TValue | (() => TValue);
|
|
112
119
|
*/
|
113
120
|
export declare const divProperties: Record<string, number>;
|
114
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
|
+
|
115
139
|
/**
|
116
140
|
* An array of FORM tag properties and events.
|
117
141
|
*
|
@@ -186,16 +210,39 @@ export declare const getRTLSafeKey: (key: string, dir: 'ltr' | 'rtl') => string;
|
|
186
210
|
* Slots will render as null if they are rendered as primitives with undefined children.
|
187
211
|
*
|
188
212
|
* The slotProps will always omit the `as` prop within them, and for slots that are string
|
189
|
-
* primitives, the props will be filtered according
|
190
|
-
* slot is rendered `as: 'a'`, the props will be filtered for acceptable
|
213
|
+
* primitives, the props will be filtered according to the slot type by the type system.
|
214
|
+
* For example, if the slot is rendered `as: 'a'`, the props will be filtered for acceptable
|
215
|
+
* anchor props. Note that this is only enforced at build time by Typescript -- there is no
|
216
|
+
* runtime code filtering props in this function.
|
191
217
|
*
|
192
218
|
* @param state - State including slot definitions
|
193
|
-
* @param slotNames - Name of which props are slots
|
194
219
|
* @returns An object containing the `slots` map and `slotProps` map.
|
195
220
|
*/
|
196
|
-
export declare function getSlots<R extends
|
221
|
+
export declare function getSlots<R extends SlotPropsRecord>(state: ComponentState<R>): {
|
197
222
|
slots: Slots<R>;
|
198
|
-
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>;
|
199
246
|
};
|
200
247
|
|
201
248
|
/**
|
@@ -233,25 +280,31 @@ export declare const inputProperties: Record<string, number>;
|
|
233
280
|
|
234
281
|
/**
|
235
282
|
* Define the slot arguments for a slot that supports one or more intrinsic element types, such as 'div'.
|
236
|
-
* For slots that support custom components, use {@link
|
283
|
+
* For slots that support custom components, use {@link ComponentSlotProps} instead.
|
237
284
|
*
|
238
285
|
* The first param is the slot's default type if no `as` prop is specified.
|
239
286
|
* The second param is an optional union of alternative types that can be specified for the `as` prop.
|
240
287
|
*
|
241
288
|
* ```
|
242
|
-
*
|
243
|
-
*
|
244
|
-
*
|
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"
|
245
292
|
* ```
|
246
293
|
*/
|
247
|
-
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' : ({
|
248
295
|
as?: DefaultAs;
|
249
|
-
} &
|
296
|
+
} & SlotProps<React_2.PropsWithRef<JSX.IntrinsicElements[DefaultAs]>>) | {
|
250
297
|
[As in AlternateAs]: {
|
251
298
|
as: As;
|
252
|
-
} &
|
299
|
+
} & SlotProps<React_2.PropsWithRef<JSX.IntrinsicElements[As]>>;
|
253
300
|
}[AlternateAs];
|
254
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
|
+
|
255
308
|
/**
|
256
309
|
* Evaluates to true if the given type contains exactly one string, or false if it is a union of strings.
|
257
310
|
*
|
@@ -283,19 +336,10 @@ export declare const liProperties: Record<string, number>;
|
|
283
336
|
*/
|
284
337
|
export declare const nullRender: () => null;
|
285
338
|
|
286
|
-
|
287
|
-
|
288
|
-
*
|
289
|
-
* For intrinsic elements like 'div', use {@link IntrinsicShorthandProps} instead.
|
290
|
-
*/
|
291
|
-
export declare type ObjectShorthandProps<Props extends {
|
292
|
-
children?: React_2.ReactNode;
|
293
|
-
} = {}> = Props & {
|
294
|
-
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;
|
295
341
|
};
|
296
342
|
|
297
|
-
export declare type ObjectShorthandPropsRecord = Record<string, DefaultObjectShorthandProps | undefined>;
|
298
|
-
|
299
343
|
/**
|
300
344
|
* This is part of a hack to infer the element type from a native element *props* type.
|
301
345
|
* The only place the original element is found in a native props type (at least that's workable
|
@@ -332,16 +376,11 @@ export declare const olProperties: Record<string, number>;
|
|
332
376
|
*/
|
333
377
|
export declare function omit<TObj extends Record<string, any>, Exclusions extends (keyof TObj)[]>(obj: TObj, exclusions: Exclusions): Omit<TObj, Exclusions[number]>;
|
334
378
|
|
335
|
-
/**
|
336
|
-
* Similar to React.Children.only, but drills into fragments rather than treating them as a single child
|
337
|
-
*/
|
338
|
-
export declare const onlyChild: <P>(child: string | number | boolean | {} | React_2.ReactNodeArray | React_2.ReactPortal | React_2.ReactElement<P, string | ((props: any) => React_2.ReactElement<any, string | any | (new (props: any) => React_2.Component<any, any, any>)> | null) | (new (props: any) => React_2.Component<any, any, any>)> | null | undefined) => React_2.ReactElement<P, string | ((props: any) => React_2.ReactElement<any, string | any | (new (props: any) => React_2.Component<any, any, any>)> | null) | (new (props: any) => React_2.Component<any, any, any>)>;
|
339
|
-
|
340
379
|
export declare const optionProperties: Record<string, number>;
|
341
380
|
|
342
381
|
/**
|
343
382
|
* Removes the 'ref' prop from the given Props type, leaving unions intact (such as the discriminated union created by
|
344
|
-
*
|
383
|
+
* IntrinsicSlotProps). This allows IntrinsicSlotProps to be used with React.forwardRef.
|
345
384
|
*
|
346
385
|
* The conditional "extends unknown" (always true) exploits a quirk in the way TypeScript handles conditional
|
347
386
|
* types, to prevent unions from being expanded.
|
@@ -362,12 +401,12 @@ export declare type RefObjectFunction<T> = React_2.RefObject<T> & ((value: T) =>
|
|
362
401
|
export declare function resetIdsForTests(): void;
|
363
402
|
|
364
403
|
/**
|
365
|
-
* Resolves
|
404
|
+
* Resolves shorthands into slot props, to ensure normalization of the signature
|
366
405
|
* being passed down to getSlots method
|
367
|
-
* @param value - the base
|
368
|
-
* @param options - options to resolve
|
406
|
+
* @param value - the base shorthand props
|
407
|
+
* @param options - options to resolve shorthand props
|
369
408
|
*/
|
370
|
-
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;
|
371
410
|
|
372
411
|
export declare type ResolveShorthandOptions<Props extends Record<string, any>, Required extends boolean = false> = {
|
373
412
|
required?: Required;
|
@@ -381,9 +420,7 @@ export declare type ResolveShorthandOptions<Props extends Record<string, any>, R
|
|
381
420
|
*/
|
382
421
|
export declare const selectProperties: Record<string, number>;
|
383
422
|
|
384
|
-
export declare type ShorthandProps<Props extends
|
385
|
-
|
386
|
-
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;
|
387
424
|
|
388
425
|
/**
|
389
426
|
* Checks if the keyboard event should preventDefault() for Enter and Spacebar keys
|
@@ -392,12 +429,22 @@ export declare type ShorthandRenderFunction<Props> = (Component: React_2.Element
|
|
392
429
|
*/
|
393
430
|
export declare function shouldPreventDefaultOnKeyDown(e: KeyboardEvent | React_2.KeyboardEvent): boolean;
|
394
431
|
|
395
|
-
|
396
|
-
|
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>;
|
397
440
|
};
|
398
441
|
|
399
|
-
export declare type
|
400
|
-
|
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]>>;
|
401
448
|
};
|
402
449
|
|
403
450
|
export declare const SSRContext: React_2.Context<SSRContextValue>;
|
@@ -460,6 +507,16 @@ export declare const trProperties: Record<string, number>;
|
|
460
507
|
*/
|
461
508
|
export declare type UnionToIntersection<U> = (U extends unknown ? (x: U) => U : never) extends (x: infer I) => U ? I : never;
|
462
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
|
+
|
463
520
|
/**
|
464
521
|
* Hook to store a value and generate callbacks for setting the value to true or false.
|
465
522
|
* The identity of the callbacks will always stay the same.
|
@@ -493,42 +550,37 @@ export declare type UseBooleanCallbacks = {
|
|
493
550
|
export declare function useConst<T>(initialValue: T | (() => T)): T;
|
494
551
|
|
495
552
|
/**
|
496
|
-
* A useState
|
497
|
-
*
|
498
|
-
*
|
553
|
+
* A `useState`-like hook to manage a value that could be either controlled or uncontrolled,
|
554
|
+
* such as a checked state or text input string.
|
555
|
+
*
|
556
|
+
* Unlike `setState`, it's okay to call the returned updater (dispatch) function for either a
|
557
|
+
* controlled or uncontrolled component. Calls will only be respected if the component is uncontrolled.
|
558
|
+
*
|
559
|
+
* @returns Same as [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate): an array
|
560
|
+
* of the current value and an updater (dispatch) function. The updater function is referentially
|
561
|
+
* stable (won't change during the component's lifecycle). It can take either a new value, or a
|
562
|
+
* function which is passed the previous value and returns the new value. Unlike `setState`, calls
|
563
|
+
* to the updater function will only be respected if the component is uncontrolled.
|
564
|
+
* @see https://reactjs.org/docs/uncontrolled-components.html
|
499
565
|
*/
|
500
566
|
export declare const useControllableState: <State>(options: UseControllableStateOptions<State>) => [State, React_2.Dispatch<React_2.SetStateAction<State>>];
|
501
567
|
|
502
568
|
export declare type UseControllableStateOptions<State> = {
|
503
569
|
/**
|
504
|
-
* User
|
570
|
+
* User-provided default state or initializer, for uncontrolled usage.
|
505
571
|
*/
|
506
572
|
defaultState?: State | (() => State);
|
507
573
|
/**
|
508
|
-
* User
|
574
|
+
* User-provided controlled state. `undefined` means internal state will be used.
|
509
575
|
*/
|
510
576
|
state: State | undefined;
|
511
577
|
/**
|
512
|
-
* Used
|
578
|
+
* Used as the initial state if `state` and `defaultState` are both `undefined`.
|
579
|
+
* If `undefined` is the correct initial state, pass that here.
|
513
580
|
*/
|
514
581
|
initialState: State;
|
515
582
|
};
|
516
583
|
|
517
|
-
/**
|
518
|
-
* Hook to manage a value that could be either controlled or uncontrolled, such as a checked state or
|
519
|
-
* text box string.
|
520
|
-
* @param controlledValue - The controlled value passed in the props. This value will always be used if provided,
|
521
|
-
* and the internal state will be updated to reflect it.
|
522
|
-
* @param defaultUncontrolledValue - Initial value for the internal state in the uncontrolled case.
|
523
|
-
* @returns An array of the current value and an updater callback. Like `React.useState`, the updater
|
524
|
-
* callback always has the same identity, and it can take either a new value, or a function which
|
525
|
-
* is passed the previous value and returns the new value.
|
526
|
-
* @see https://reactjs.org/docs/uncontrolled-components.html
|
527
|
-
*/
|
528
|
-
export declare function useControllableValue<TValue, TElement extends HTMLElement>(controlledValue: TValue, defaultUncontrolledValue: DefaultValue<TValue>): Readonly<[TValue, (update: React_2.SetStateAction<TValue>) => void]>;
|
529
|
-
|
530
|
-
export declare function useControllableValue<TValue, TElement extends HTMLElement, TEvent extends React_2.SyntheticEvent<TElement> | undefined>(controlledValue: TValue, defaultUncontrolledValue: DefaultValue<TValue>, onChange: ChangeCallback<TElement, TValue, TEvent>): Readonly<[TValue, (update: React_2.SetStateAction<TValue>, ev?: React_2.FormEvent<TElement>) => void]>;
|
531
|
-
|
532
584
|
/**
|
533
585
|
* https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback
|
534
586
|
*
|
@@ -587,6 +639,25 @@ export declare const useIsomorphicLayoutEffect: typeof React_2.useEffect;
|
|
587
639
|
*/
|
588
640
|
export declare function useIsSSR(): boolean;
|
589
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
|
+
|
590
661
|
/**
|
591
662
|
* React hook to merge multiple React refs (either MutableRefObjects or ref callbacks) into a single ref callback that
|
592
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`
|
@@ -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
@@ -10,17 +10,19 @@ import { omit } from '../utils/omit';
|
|
10
10
|
* Slots will render as null if they are rendered as primitives with undefined children.
|
11
11
|
*
|
12
12
|
* The slotProps will always omit the `as` prop within them, and for slots that are string
|
13
|
-
* primitives, the props will be filtered according
|
14
|
-
* slot is rendered `as: 'a'`, the props will be filtered for acceptable
|
13
|
+
* primitives, the props will be filtered according to the slot type by the type system.
|
14
|
+
* For example, if the slot is rendered `as: 'a'`, the props will be filtered for acceptable
|
15
|
+
* anchor props. Note that this is only enforced at build time by Typescript -- there is no
|
16
|
+
* runtime code filtering props in this function.
|
15
17
|
*
|
16
18
|
* @param state - State including slot definitions
|
17
|
-
* @param slotNames - Name of which props are slots
|
18
19
|
* @returns An object containing the `slots` map and `slotProps` map.
|
19
20
|
*/
|
20
21
|
|
21
|
-
export function getSlots(state
|
22
|
+
export function getSlots(state) {
|
22
23
|
const slots = {};
|
23
24
|
const slotProps = {};
|
25
|
+
const slotNames = Object.keys(state.components);
|
24
26
|
|
25
27
|
for (const slotName of slotNames) {
|
26
28
|
const [slot, props] = getSlot(state, slotName);
|
@@ -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) {
|