@fluentui/react-utilities 9.26.1 → 9.26.3
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.md +21 -2
- package/dist/index.d.ts +56 -43
- package/lib/compose/assertSlots.js +10 -11
- package/lib/compose/assertSlots.js.map +1 -1
- package/lib/compose/constants.js +6 -3
- package/lib/compose/constants.js.map +1 -1
- package/lib/compose/deprecated/getSlotsNext.js +1 -2
- package/lib/compose/deprecated/getSlotsNext.js.map +1 -1
- package/lib/compose/getIntrinsicElementProps.js +0 -1
- package/lib/compose/getIntrinsicElementProps.js.map +1 -1
- package/lib/compose/isSlot.js.map +1 -1
- package/lib/compose/types.js +17 -1
- package/lib/compose/types.js.map +1 -1
- package/lib/events/mouseTouchHelpers.js +0 -1
- package/lib/events/mouseTouchHelpers.js.map +1 -1
- package/lib/hooks/useAnimationFrame.js +1 -1
- package/lib/hooks/useAnimationFrame.js.map +1 -1
- package/lib/hooks/useBrowserTimer.js +1 -1
- package/lib/hooks/useBrowserTimer.js.map +1 -1
- package/lib/hooks/useControllableState.js +1 -3
- package/lib/hooks/useControllableState.js.map +1 -1
- package/lib/hooks/useEventCallback.js +1 -1
- 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 +2 -1
- package/lib/hooks/useForceUpdate.js.map +1 -1
- package/lib/hooks/useIsomorphicLayoutEffect.js +1 -0
- package/lib/hooks/useIsomorphicLayoutEffect.js.map +1 -1
- package/lib/hooks/useOnClickOutside.js +2 -1
- package/lib/hooks/useOnClickOutside.js.map +1 -1
- package/lib/hooks/useOnScrollOutside.js +2 -1
- package/lib/hooks/useOnScrollOutside.js.map +1 -1
- package/lib/hooks/useTimeout.js +1 -1
- package/lib/hooks/useTimeout.js.map +1 -1
- package/lib/selection/types.js +1 -1
- package/lib/selection/types.js.map +1 -1
- package/lib/selection/useSelection.js.map +1 -1
- package/lib/ssr/canUseDOM.js +2 -2
- package/lib/ssr/canUseDOM.js.map +1 -1
- package/lib/trigger/applyTriggerPropsToChildren.js +2 -1
- package/lib/trigger/applyTriggerPropsToChildren.js.map +1 -1
- package/lib/trigger/getTriggerChild.js +2 -1
- package/lib/trigger/getTriggerChild.js.map +1 -1
- package/lib/trigger/isFluentTrigger.js +2 -2
- package/lib/trigger/isFluentTrigger.js.map +1 -1
- package/lib/trigger/types.js +6 -1
- package/lib/trigger/types.js.map +1 -1
- package/lib/utils/clamp.js +1 -1
- package/lib/utils/clamp.js.map +1 -1
- package/lib/utils/getNativeElementProps.js +0 -1
- package/lib/utils/getNativeElementProps.js.map +1 -1
- package/lib/utils/getRTLSafeKey.js +2 -1
- package/lib/utils/getRTLSafeKey.js.map +1 -1
- package/lib/utils/getReactCallbackName.js +0 -1
- package/lib/utils/getReactCallbackName.js.map +1 -1
- package/lib/utils/isInteractiveHTMLElement.js +2 -1
- package/lib/utils/isInteractiveHTMLElement.js.map +1 -1
- package/lib/utils/mergeCallbacks.js +1 -1
- package/lib/utils/mergeCallbacks.js.map +1 -1
- package/lib/utils/properties.js +1 -0
- package/lib/utils/properties.js.map +1 -1
- package/lib/utils/types.js +4 -1
- package/lib/utils/types.js.map +1 -1
- package/lib-commonjs/compose/assertSlots.js +0 -1
- package/lib-commonjs/compose/assertSlots.js.map +1 -1
- package/lib-commonjs/compose/constants.js +2 -1
- package/lib-commonjs/compose/constants.js.map +1 -1
- package/lib-commonjs/compose/deprecated/getSlotsNext.js +0 -2
- package/lib-commonjs/compose/deprecated/getSlotsNext.js.map +1 -1
- package/lib-commonjs/compose/getIntrinsicElementProps.js +0 -2
- package/lib-commonjs/compose/getIntrinsicElementProps.js.map +1 -1
- package/lib-commonjs/compose/isSlot.js.map +1 -1
- package/lib-commonjs/compose/types.js +0 -2
- package/lib-commonjs/compose/types.js.map +1 -1
- package/lib-commonjs/events/mouseTouchHelpers.js +0 -2
- package/lib-commonjs/events/mouseTouchHelpers.js.map +1 -1
- package/lib-commonjs/hooks/useAnimationFrame.js.map +1 -1
- package/lib-commonjs/hooks/useBrowserTimer.js.map +1 -1
- package/lib-commonjs/hooks/useControllableState.js.map +1 -1
- package/lib-commonjs/hooks/useEventCallback.js.map +1 -1
- package/lib-commonjs/hooks/useFirstMount.js.map +1 -1
- package/lib-commonjs/hooks/useForceUpdate.js.map +1 -1
- package/lib-commonjs/hooks/useIsomorphicLayoutEffect.js +1 -0
- package/lib-commonjs/hooks/useIsomorphicLayoutEffect.js.map +1 -1
- package/lib-commonjs/hooks/useOnClickOutside.js.map +1 -1
- package/lib-commonjs/hooks/useOnScrollOutside.js.map +1 -1
- package/lib-commonjs/hooks/useTimeout.js.map +1 -1
- package/lib-commonjs/selection/types.js +0 -2
- package/lib-commonjs/selection/types.js.map +1 -1
- package/lib-commonjs/selection/useSelection.js.map +1 -1
- package/lib-commonjs/ssr/canUseDOM.js +1 -3
- package/lib-commonjs/ssr/canUseDOM.js.map +1 -1
- package/lib-commonjs/trigger/applyTriggerPropsToChildren.js.map +1 -1
- package/lib-commonjs/trigger/getTriggerChild.js.map +1 -1
- package/lib-commonjs/trigger/isFluentTrigger.js +0 -2
- package/lib-commonjs/trigger/isFluentTrigger.js.map +1 -1
- package/lib-commonjs/trigger/types.js +0 -2
- package/lib-commonjs/trigger/types.js.map +1 -1
- package/lib-commonjs/utils/clamp.js +1 -1
- package/lib-commonjs/utils/clamp.js.map +1 -1
- package/lib-commonjs/utils/getNativeElementProps.js +0 -2
- package/lib-commonjs/utils/getNativeElementProps.js.map +1 -1
- package/lib-commonjs/utils/getRTLSafeKey.js +2 -1
- package/lib-commonjs/utils/getRTLSafeKey.js.map +1 -1
- package/lib-commonjs/utils/getReactCallbackName.js +0 -2
- package/lib-commonjs/utils/getReactCallbackName.js.map +1 -1
- package/lib-commonjs/utils/isInteractiveHTMLElement.js.map +1 -1
- package/lib-commonjs/utils/mergeCallbacks.js +1 -1
- package/lib-commonjs/utils/mergeCallbacks.js.map +1 -1
- package/lib-commonjs/utils/properties.js +1 -0
- package/lib-commonjs/utils/properties.js.map +1 -1
- package/lib-commonjs/utils/types.js +0 -2
- package/lib-commonjs/utils/types.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,31 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-utilities
|
|
2
2
|
|
|
3
|
-
This log was last generated on Thu,
|
|
3
|
+
This log was last generated on Thu, 23 Apr 2026 11:59:37 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.26.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.26.3)
|
|
8
|
+
|
|
9
|
+
Thu, 23 Apr 2026 11:59:37 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.26.2..@fluentui/react-utilities_v9.26.3)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: add focusgroupstart property to baseElementProperties ([PR #36020](https://github.com/microsoft/fluentui/pull/36020) by dmytrokirpa@microsoft.com)
|
|
15
|
+
|
|
16
|
+
## [9.26.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.26.2)
|
|
17
|
+
|
|
18
|
+
Wed, 25 Feb 2026 13:32:28 GMT
|
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.26.1..@fluentui/react-utilities_v9.26.2)
|
|
20
|
+
|
|
21
|
+
### Patches
|
|
22
|
+
|
|
23
|
+
- fix: add missing "use client" directive to client components and styles ([PR #35719](https://github.com/microsoft/fluentui/pull/35719) by dmytrokirpa@microsoft.com)
|
|
24
|
+
- Bump @fluentui/react-shared-contexts to v9.26.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
|
|
25
|
+
|
|
7
26
|
## [9.26.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.26.1)
|
|
8
27
|
|
|
9
|
-
Thu, 22 Jan 2026 17:
|
|
28
|
+
Thu, 22 Jan 2026 17:06:29 GMT
|
|
10
29
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.26.0..@fluentui/react-utilities_v9.26.1)
|
|
11
30
|
|
|
12
31
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -11,8 +11,9 @@ import * as React_2 from 'react';
|
|
|
11
11
|
declare function always<Props extends UnknownSlotProps>(value: Props | SlotShorthandValue | undefined, options: SlotOptions<Props>): SlotComponentType<Props>;
|
|
12
12
|
|
|
13
13
|
/**
|
|
14
|
-
* @internal
|
|
15
14
|
* resolve the trigger props to the children, either by calling the render function, or cloning with the new props.
|
|
15
|
+
*
|
|
16
|
+
* @internal
|
|
16
17
|
*/
|
|
17
18
|
export declare function applyTriggerPropsToChildren<TriggerChildProps>(children: TriggerProps<TriggerChildProps>['children'], triggerChildProps: TriggerChildProps): React_2.ReactElement | null;
|
|
18
19
|
|
|
@@ -29,22 +30,22 @@ declare type AsIntrinsicElement<As extends JSXIntrinsicElementKeys> = {
|
|
|
29
30
|
};
|
|
30
31
|
|
|
31
32
|
/**
|
|
32
|
-
* @internal
|
|
33
33
|
* Assertion method to ensure state slots properties are properly declared.
|
|
34
34
|
* A properly declared slot must be declared by using the `slot` method.
|
|
35
35
|
*
|
|
36
|
+
* @internal
|
|
36
37
|
* @example
|
|
37
38
|
* ```tsx
|
|
38
39
|
* export const renderInput_unstable = (state: InputState): JSXElement => {
|
|
39
|
-
assertSlots<InputSlots>(state);
|
|
40
|
-
return (
|
|
41
|
-
<state.root>
|
|
42
|
-
{state.contentBefore && <state.contentBefore />}
|
|
43
|
-
<state.input />
|
|
44
|
-
{state.contentAfter && <state.contentAfter />}
|
|
45
|
-
</state.root>
|
|
46
|
-
);
|
|
47
|
-
};
|
|
40
|
+
* assertSlots<InputSlots>(state);
|
|
41
|
+
* return (
|
|
42
|
+
* <state.root>
|
|
43
|
+
* {state.contentBefore && <state.contentBefore />}
|
|
44
|
+
* <state.input />
|
|
45
|
+
* {state.contentAfter && <state.contentAfter />}
|
|
46
|
+
* </state.root>
|
|
47
|
+
* );
|
|
48
|
+
* };
|
|
48
49
|
* ```
|
|
49
50
|
*/
|
|
50
51
|
export declare function assertSlots<Slots extends SlotPropsRecord>(state: unknown): asserts state is SlotComponents<Slots>;
|
|
@@ -55,9 +56,9 @@ export declare function assertSlots<Slots extends SlotPropsRecord>(state: unknow
|
|
|
55
56
|
export declare function canUseDOM(): boolean;
|
|
56
57
|
|
|
57
58
|
/**
|
|
58
|
-
* @internal
|
|
59
59
|
* Clamps `value` to a number between the min and max.
|
|
60
60
|
*
|
|
61
|
+
* @internal
|
|
61
62
|
* @param value - the value to be clamped
|
|
62
63
|
* @param min - the lowest valid value
|
|
63
64
|
* @param max - the highest valid value
|
|
@@ -65,8 +66,9 @@ export declare function canUseDOM(): boolean;
|
|
|
65
66
|
export declare const clamp: (value: number, min: number, max: number) => number;
|
|
66
67
|
|
|
67
68
|
/**
|
|
68
|
-
* @internal
|
|
69
69
|
* **THIS TYPE IS INTERNAL AND SHOULD NEVER BE EXPOSED**
|
|
70
|
+
*
|
|
71
|
+
* @internal
|
|
70
72
|
*/
|
|
71
73
|
declare interface ComponentClass<P = {}, S = React_2.ComponentState> extends React_2.StaticLifecycle<P, S> {
|
|
72
74
|
new (props: P): React_2.Component<P, S>;
|
|
@@ -96,12 +98,13 @@ export declare type ComponentState<Slots extends SlotPropsRecord> = {
|
|
|
96
98
|
};
|
|
97
99
|
|
|
98
100
|
/**
|
|
99
|
-
* @internal
|
|
100
101
|
* With react 18, our `children` type starts leaking everywhere and that causes conflicts on component declaration, specially in the `propTypes` property of
|
|
101
102
|
* both `ComponentClass` and `FunctionComponent`.
|
|
102
103
|
*
|
|
103
104
|
* This type substitutes `React.ComponentType` only keeping the function signature, it omits `propTypes`, `displayName` and other properties that are not
|
|
104
105
|
* required for the inference.
|
|
106
|
+
*
|
|
107
|
+
* @internal
|
|
105
108
|
*/
|
|
106
109
|
declare type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;
|
|
107
110
|
|
|
@@ -179,7 +182,6 @@ declare interface ExoticComponent<P> {
|
|
|
179
182
|
export declare type ExtractSlotProps<S> = Exclude<S, SlotShorthandValue | null | undefined>;
|
|
180
183
|
|
|
181
184
|
/**
|
|
182
|
-
* @internal
|
|
183
185
|
* Allows a component to be tagged as a FluentUI trigger component.
|
|
184
186
|
*
|
|
185
187
|
* Triggers are special-case components: they attach event listeners and other props on their child,
|
|
@@ -191,6 +193,8 @@ export declare type ExtractSlotProps<S> = Exclude<S, SlotShorthandValue | null |
|
|
|
191
193
|
*
|
|
192
194
|
* MyComponent.isFluentTriggerComponent = true; // MUST also set this to true
|
|
193
195
|
* ```
|
|
196
|
+
*
|
|
197
|
+
* @internal
|
|
194
198
|
*/
|
|
195
199
|
export declare type FluentTriggerComponent = {
|
|
196
200
|
isFluentTriggerComponent?: boolean;
|
|
@@ -208,8 +212,6 @@ export declare type FluentTriggerComponent = {
|
|
|
208
212
|
export declare type ForwardRefComponent<Props> = NamedExoticComponent<Props & RefAttributes<InferredElementRefType<Props>>>;
|
|
209
213
|
|
|
210
214
|
/**
|
|
211
|
-
* @internal
|
|
212
|
-
*
|
|
213
215
|
* On types/react 18 there are two types being delivered,
|
|
214
216
|
* they rely on the typescript version to decide which will be consumed {@link https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b59dc3ac1e2770fbd6cdbb90ba52abe04c168196/types/react/package.json#L10}
|
|
215
217
|
*
|
|
@@ -222,6 +224,8 @@ export declare type ForwardRefComponent<Props> = NamedExoticComponent<Props & Re
|
|
|
222
224
|
* that will work for both cases.
|
|
223
225
|
*
|
|
224
226
|
* **THIS TYPE IS INTERNAL AND SHOULD NEVER BE EXPOSED**
|
|
227
|
+
*
|
|
228
|
+
* @internal
|
|
225
229
|
*/
|
|
226
230
|
declare interface FunctionComponent<P> {
|
|
227
231
|
(props: P): any;
|
|
@@ -307,8 +311,9 @@ export declare const getPartitionedNativeProps: <Props extends Pick<React_2.HTML
|
|
|
307
311
|
export declare function getReactElementRef<T>(element: React_2.ReactElement | null | undefined): React_2.Ref<T> | undefined;
|
|
308
312
|
|
|
309
313
|
/**
|
|
310
|
-
* @internal
|
|
311
314
|
* Finds and swaps a provided key for it's right to left format.
|
|
315
|
+
*
|
|
316
|
+
* @internal
|
|
312
317
|
*/
|
|
313
318
|
export declare const getRTLSafeKey: (key: string, dir: "ltr" | "rtl") => string;
|
|
314
319
|
|
|
@@ -356,11 +361,11 @@ export declare function getSlots<R extends SlotPropsRecord>(state: unknown): {
|
|
|
356
361
|
/**
|
|
357
362
|
* Similar to `getSlots`, main difference is that it's compatible with new custom jsx pragma
|
|
358
363
|
*
|
|
359
|
-
* @internal
|
|
360
364
|
* This is an internal temporary method, this method will cease to exist eventually!
|
|
361
365
|
*
|
|
362
366
|
* * ❗️❗️ **DO NOT USE IT EXTERNALLY** ❗️❗️
|
|
363
367
|
*
|
|
368
|
+
* @internal
|
|
364
369
|
* @deprecated use slot.always or slot.optional combined with assertSlots instead
|
|
365
370
|
*/
|
|
366
371
|
export declare function getSlotsNext<R extends SlotPropsRecord>(state: unknown): {
|
|
@@ -369,7 +374,6 @@ export declare function getSlotsNext<R extends SlotPropsRecord>(state: unknown):
|
|
|
369
374
|
};
|
|
370
375
|
|
|
371
376
|
/**
|
|
372
|
-
* @internal
|
|
373
377
|
* Gets the trigger element of a FluentTriggerComponent (such as Tooltip or MenuTrigger).
|
|
374
378
|
*
|
|
375
379
|
* In the case where the immediate child is itself a FluentTriggerComponent and/or React Fragment,
|
|
@@ -389,6 +393,8 @@ export declare function getSlotsNext<R extends SlotPropsRecord>(state: unknown):
|
|
|
389
393
|
*
|
|
390
394
|
* In the case where the immediate child is not a valid element,
|
|
391
395
|
* null is returned
|
|
396
|
+
*
|
|
397
|
+
* @internal
|
|
392
398
|
*/
|
|
393
399
|
export declare function getTriggerChild<TriggerChildProps>(children: TriggerProps<TriggerChildProps>['children']): (React_2.ReactElement<Partial<TriggerChildProps>> & {
|
|
394
400
|
ref?: React_2.Ref<any>;
|
|
@@ -417,9 +423,10 @@ export declare type InferredElementRefType<Props> = ObscureEventName extends key
|
|
|
417
423
|
declare type IntrinsicElementProps<Type extends JSXIntrinsicElementKeys> = Type extends EmptyIntrinsicElements ? PropsWithoutChildren<React_2.PropsWithRef<JSXIntrinsicElement<Type>>> : React_2.PropsWithRef<JSXIntrinsicElement<Type>>;
|
|
418
424
|
|
|
419
425
|
/**
|
|
420
|
-
* @internal
|
|
421
426
|
* Checks if a given element is a FluentUI trigger (e.g. `MenuTrigger` or `Tooltip`).
|
|
422
427
|
* See the {@link FluentTriggerComponent} type for more info.
|
|
428
|
+
*
|
|
429
|
+
* @internal
|
|
423
430
|
*/
|
|
424
431
|
export declare function isFluentTrigger(element: React_2.ReactElement): element is React_2.ReactElement<TriggerProps>;
|
|
425
432
|
|
|
@@ -446,8 +453,9 @@ export declare function isHTMLElement<ConstructorName extends HTMLElementConstru
|
|
|
446
453
|
}): element is InstanceType<(typeof globalThis)[ConstructorName]>;
|
|
447
454
|
|
|
448
455
|
/**
|
|
449
|
-
* @internal
|
|
450
456
|
* Checks that the element has default behaviour from user input on click or 'Enter'/'Space' keys
|
|
457
|
+
*
|
|
458
|
+
* @internal
|
|
451
459
|
*/
|
|
452
460
|
export declare function isInteractiveHTMLElement(element: unknown): boolean;
|
|
453
461
|
|
|
@@ -562,7 +570,6 @@ export declare type JSXIntrinsicElement<Element extends JSXIntrinsicElementKeys>
|
|
|
562
570
|
export declare type JSXIntrinsicElementKeys = Exclude<React_2.ElementType, React_2.ComponentType>;
|
|
563
571
|
|
|
564
572
|
/**
|
|
565
|
-
* @internal
|
|
566
573
|
* Combine two event callbacks into a single callback function that calls each one in order.
|
|
567
574
|
*
|
|
568
575
|
* Usage example:
|
|
@@ -579,6 +586,7 @@ export declare type JSXIntrinsicElementKeys = Exclude<React_2.ElementType, React
|
|
|
579
586
|
*
|
|
580
587
|
* If you need a callback that is stable between renders, wrap the result in {@link useEventCallback}.
|
|
581
588
|
*
|
|
589
|
+
* @internal
|
|
582
590
|
* @param callback1 - The first callback to be called, or undefined
|
|
583
591
|
* @param callback2 - The second callback to be called, or undefined
|
|
584
592
|
*
|
|
@@ -683,22 +691,19 @@ declare type PropsWithoutChildren<P> = 'children' extends keyof P ? Distributive
|
|
|
683
691
|
declare type PropsWithoutRef<P> = 'ref' extends keyof P ? DistributiveOmit<P, 'ref'> : P;
|
|
684
692
|
|
|
685
693
|
/**
|
|
686
|
-
* @internal
|
|
687
|
-
*
|
|
688
694
|
* on types/react 18 ReactNode becomes a more strict type, which is not compatible with our current implementation. to avoid any issues we are creating our own ReactNode type which allows anything.
|
|
689
695
|
*
|
|
690
696
|
* This type should only be used for inference purposes, and should never be exposed.
|
|
691
697
|
*
|
|
692
698
|
* **THIS TYPE IS INTERNAL AND SHOULD NEVER BE EXPOSED**
|
|
693
699
|
*
|
|
700
|
+
* @internal
|
|
694
701
|
*/
|
|
695
702
|
declare type ReactNode = any;
|
|
696
703
|
|
|
697
704
|
export declare type ReactTouchOrMouseEvent = React_2.MouseEvent | React_2.TouchEvent;
|
|
698
705
|
|
|
699
706
|
/**
|
|
700
|
-
* @internal
|
|
701
|
-
*
|
|
702
707
|
* This type is used to determine if the current version of React is 18+ or not.
|
|
703
708
|
*
|
|
704
709
|
* It checks if the `React.ReactNode` has `{}` it its type.
|
|
@@ -707,6 +712,8 @@ export declare type ReactTouchOrMouseEvent = React_2.MouseEvent | React_2.TouchE
|
|
|
707
712
|
* This is useful for ensuring compatibility with different versions of React.
|
|
708
713
|
*
|
|
709
714
|
* **THIS TYPE IS INTERNAL AND SHOULD NEVER BE EXPOSED**
|
|
715
|
+
*
|
|
716
|
+
* @internal
|
|
710
717
|
*/
|
|
711
718
|
declare type ReactVersionDependent<Modern, Legacy> = {} extends React_2.ReactNode ? Legacy : Modern;
|
|
712
719
|
|
|
@@ -738,8 +745,9 @@ export declare interface RefAttributes<T> extends React_2.Attributes {
|
|
|
738
745
|
export declare type RefObjectFunction<T> = React_2.RefObject<T | null> & ((value: T | null) => void);
|
|
739
746
|
|
|
740
747
|
/**
|
|
741
|
-
* @internal
|
|
742
748
|
* If type T includes `null`, remove it and add `undefined` instead.
|
|
749
|
+
*
|
|
750
|
+
* @internal
|
|
743
751
|
*/
|
|
744
752
|
declare type ReplaceNullWithUndefined<T> = T extends null ? Exclude<T, null> | undefined : T;
|
|
745
753
|
|
|
@@ -863,20 +871,23 @@ declare namespace slot {
|
|
|
863
871
|
export { slot }
|
|
864
872
|
|
|
865
873
|
/**
|
|
866
|
-
* @internal
|
|
867
874
|
* Internal cache of the original className prop for the slot, before being modified by the useStyles hook.
|
|
875
|
+
*
|
|
876
|
+
* @internal
|
|
868
877
|
*/
|
|
869
878
|
export declare const SLOT_CLASS_NAME_PROP_SYMBOL: unique symbol;
|
|
870
879
|
|
|
871
880
|
/**
|
|
872
|
-
* @internal
|
|
873
881
|
* Internal reference for the render function
|
|
882
|
+
*
|
|
883
|
+
* @internal
|
|
874
884
|
*/
|
|
875
885
|
export declare const SLOT_ELEMENT_TYPE_SYMBOL: unique symbol;
|
|
876
886
|
|
|
877
887
|
/**
|
|
878
|
-
* @internal
|
|
879
888
|
* Internal reference for the render function
|
|
889
|
+
*
|
|
890
|
+
* @internal
|
|
880
891
|
*/
|
|
881
892
|
export declare const SLOT_RENDER_FUNCTION_SYMBOL: unique symbol;
|
|
882
893
|
|
|
@@ -907,8 +918,9 @@ export declare type SlotComponentType<Props> = WithoutSlotRenderFunction<Props>
|
|
|
907
918
|
*/
|
|
908
919
|
[SLOT_ELEMENT_TYPE_SYMBOL]: ComponentType<Props> | (Props extends AsIntrinsicElement<infer As> ? As : JSXIntrinsicElementKeys);
|
|
909
920
|
/**
|
|
910
|
-
* @internal
|
|
911
921
|
* The original className prop for the slot, before being modified by the useStyles hook.
|
|
922
|
+
*
|
|
923
|
+
* @internal
|
|
912
924
|
*/
|
|
913
925
|
[SLOT_CLASS_NAME_PROP_SYMBOL]?: string;
|
|
914
926
|
};
|
|
@@ -979,11 +991,11 @@ export declare type UnknownSlotProps = Pick<React_2.HTMLAttributes<HTMLElement>,
|
|
|
979
991
|
};
|
|
980
992
|
|
|
981
993
|
/**
|
|
982
|
-
* @internal
|
|
983
994
|
* Helper to manage a browser requestAnimationFrame.
|
|
984
995
|
* Ensures that the requestAnimationFrame isn't set multiple times at once and is cleaned up
|
|
985
996
|
* when the component is unloaded.
|
|
986
997
|
*
|
|
998
|
+
* @internal
|
|
987
999
|
* @returns A pair of [requestAnimationFrame, cancelAnimationFrame] that are stable between renders.
|
|
988
1000
|
*/
|
|
989
1001
|
export declare function useAnimationFrame(): readonly [(fn: FrameRequestCallback) => number, () => void];
|
|
@@ -1016,12 +1028,11 @@ declare interface UseApplyScrollbarWidthOptions {
|
|
|
1016
1028
|
}
|
|
1017
1029
|
|
|
1018
1030
|
/**
|
|
1019
|
-
* @internal
|
|
1020
|
-
*
|
|
1021
1031
|
* A [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate)-like hook
|
|
1022
1032
|
* to manage a value that could be either `controlled` or `uncontrolled`,
|
|
1023
1033
|
* such as a checked state or text input string.
|
|
1024
1034
|
*
|
|
1035
|
+
* @internal
|
|
1025
1036
|
* @see https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components for more details on `controlled`/`uncontrolled`
|
|
1026
1037
|
*
|
|
1027
1038
|
* @returns an array of the current value and an updater (dispatcher) function.
|
|
@@ -1030,7 +1041,6 @@ declare interface UseApplyScrollbarWidthOptions {
|
|
|
1030
1041
|
*
|
|
1031
1042
|
* ❗️❗️ Calls to the dispatcher will only modify the state if the state is `uncontrolled`.
|
|
1032
1043
|
* Meaning that if a state is `controlled`, calls to the dispatcher do not modify the state.
|
|
1033
|
-
*
|
|
1034
1044
|
*/
|
|
1035
1045
|
export declare const useControllableState: <State>(options: UseControllableStateOptions<State>) => [State, React_2.Dispatch<React_2.SetStateAction<State>>];
|
|
1036
1046
|
|
|
@@ -1054,7 +1064,6 @@ export declare type UseControllableStateOptions<State> = {
|
|
|
1054
1064
|
};
|
|
1055
1065
|
|
|
1056
1066
|
/**
|
|
1057
|
-
* @internal
|
|
1058
1067
|
* https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback
|
|
1059
1068
|
*
|
|
1060
1069
|
* Modified `useCallback` that can be used when dependencies change too frequently. Can occur when
|
|
@@ -1064,24 +1073,26 @@ export declare type UseControllableStateOptions<State> = {
|
|
|
1064
1073
|
* This should not be used often, but can be a useful re-render optimization since the callback is a ref and
|
|
1065
1074
|
* will not be invalidated between re-renders
|
|
1066
1075
|
*
|
|
1076
|
+
* @internal
|
|
1067
1077
|
* @param fn - The callback function that will be used
|
|
1068
1078
|
*/
|
|
1069
1079
|
export declare const useEventCallback: <Args extends unknown[], Return>(fn: (...args: Args) => Return) => ((...args: Args) => Return);
|
|
1070
1080
|
|
|
1071
1081
|
/**
|
|
1072
|
-
* @internal
|
|
1073
1082
|
* Checks if components was mounted the first time.
|
|
1074
1083
|
* Supports React concurrent/strict mode by using `useEffect`
|
|
1075
1084
|
* to track the first mount instead of mutating refs during render.
|
|
1076
1085
|
*
|
|
1086
|
+
* @internal
|
|
1077
1087
|
* @example
|
|
1078
1088
|
* const isFirstMount = useFirstMount();
|
|
1079
1089
|
*/
|
|
1080
1090
|
export declare function useFirstMount(): boolean;
|
|
1081
1091
|
|
|
1082
1092
|
/**
|
|
1083
|
-
* @internal
|
|
1084
1093
|
* Forces a re-render, similar to `forceUpdate` in class components.
|
|
1094
|
+
*
|
|
1095
|
+
* @internal
|
|
1085
1096
|
*/
|
|
1086
1097
|
export declare function useForceUpdate(): React_2.DispatchWithoutAction;
|
|
1087
1098
|
|
|
@@ -1154,14 +1165,16 @@ export declare type UseOnClickOrScrollOutsideOptions = {
|
|
|
1154
1165
|
};
|
|
1155
1166
|
|
|
1156
1167
|
/**
|
|
1157
|
-
* @internal
|
|
1158
1168
|
* Utility to perform checks where a click/touch event was made outside a component
|
|
1169
|
+
*
|
|
1170
|
+
* @internal
|
|
1159
1171
|
*/
|
|
1160
1172
|
export declare const useOnClickOutside: (options: UseOnClickOrScrollOutsideOptions) => void;
|
|
1161
1173
|
|
|
1162
1174
|
/**
|
|
1163
|
-
* @internal
|
|
1164
1175
|
* Utility to perform checks where a click/touch event was made outside a component
|
|
1176
|
+
*
|
|
1177
|
+
* @internal
|
|
1165
1178
|
*/
|
|
1166
1179
|
export declare const useOnScrollOutside: (options: UseOnClickOrScrollOutsideOptions) => void;
|
|
1167
1180
|
|
|
@@ -1190,11 +1203,11 @@ declare interface UseScrollbarWidthOptions {
|
|
|
1190
1203
|
export declare function useSelection(params: SelectionHookParams): readonly [Set<SelectionItemId>, SelectionMethods];
|
|
1191
1204
|
|
|
1192
1205
|
/**
|
|
1193
|
-
* @internal
|
|
1194
1206
|
* Helper to manage a browser timeout.
|
|
1195
1207
|
* Ensures that the timeout isn't set multiple times at once and is cleaned up
|
|
1196
1208
|
* when the component is unloaded.
|
|
1197
1209
|
*
|
|
1210
|
+
* @internal
|
|
1198
1211
|
* @returns A pair of [setTimeout, clearTimeout] that are stable between renders.
|
|
1199
1212
|
*/
|
|
1200
1213
|
export declare function useTimeout(): readonly [(fn: () => void, delay?: number) => number, () => void];
|
|
@@ -1207,7 +1220,6 @@ declare type WithoutSlotRenderFunction<Props> = Props extends unknown ? 'childre
|
|
|
1207
1220
|
} : Props : never;
|
|
1208
1221
|
|
|
1209
1222
|
/**
|
|
1210
|
-
* @internal
|
|
1211
1223
|
* Helper type for {@link Slot}. Takes the props we want to support for a slot and adds the ability for `children`
|
|
1212
1224
|
* to be a render function that takes those props.
|
|
1213
1225
|
*
|
|
@@ -1215,6 +1227,7 @@ declare type WithoutSlotRenderFunction<Props> = Props extends unknown ? 'childre
|
|
|
1215
1227
|
* For React 18 and later, `children` can be any value, as React.ReactNode is a more strict type and does not allow functions anymore.
|
|
1216
1228
|
* This means that the render functions need to be asserted as `SlotRenderFunction<Props>` for React 18 and later.
|
|
1217
1229
|
*
|
|
1230
|
+
* @internal
|
|
1218
1231
|
* @example
|
|
1219
1232
|
* ```tsx
|
|
1220
1233
|
* // For React 17 and earlier:
|
|
@@ -1,24 +1,23 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
1
|
import { SLOT_ELEMENT_TYPE_SYMBOL } from './constants';
|
|
3
2
|
import { isSlot } from './isSlot';
|
|
4
3
|
import * as slot from './slot';
|
|
5
4
|
/**
|
|
6
|
-
* @internal
|
|
7
5
|
* Assertion method to ensure state slots properties are properly declared.
|
|
8
6
|
* A properly declared slot must be declared by using the `slot` method.
|
|
9
7
|
*
|
|
8
|
+
* @internal
|
|
10
9
|
* @example
|
|
11
10
|
* ```tsx
|
|
12
11
|
* export const renderInput_unstable = (state: InputState): JSXElement => {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
12
|
+
* assertSlots<InputSlots>(state);
|
|
13
|
+
* return (
|
|
14
|
+
* <state.root>
|
|
15
|
+
* {state.contentBefore && <state.contentBefore />}
|
|
16
|
+
* <state.input />
|
|
17
|
+
* {state.contentAfter && <state.contentAfter />}
|
|
18
|
+
* </state.root>
|
|
19
|
+
* );
|
|
20
|
+
* };
|
|
22
21
|
* ```
|
|
23
22
|
*/ export function assertSlots(state) {
|
|
24
23
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/compose/assertSlots.ts"],"sourcesContent":["import * as React from 'react';\nimport { SLOT_ELEMENT_TYPE_SYMBOL } from './constants';\nimport { isSlot } from './isSlot';\nimport { ComponentState, ExtractSlotProps, SlotComponentType, SlotPropsRecord } from './types';\nimport * as slot from './slot';\n\ntype SlotComponents<Slots extends SlotPropsRecord> = {\n [K in keyof Slots]: SlotComponentType<ExtractSlotProps<Slots[K]>> | (null extends Slots[K] ? undefined : never);\n};\n\n/**\n *
|
|
1
|
+
{"version":3,"sources":["../src/compose/assertSlots.ts"],"sourcesContent":["import type * as React from 'react';\nimport { SLOT_ELEMENT_TYPE_SYMBOL } from './constants';\nimport { isSlot } from './isSlot';\nimport type { ComponentState, ExtractSlotProps, SlotComponentType, SlotPropsRecord } from './types';\nimport * as slot from './slot';\n\ntype SlotComponents<Slots extends SlotPropsRecord> = {\n [K in keyof Slots]: SlotComponentType<ExtractSlotProps<Slots[K]>> | (null extends Slots[K] ? undefined : never);\n};\n\n/**\n * Assertion method to ensure state slots properties are properly declared.\n * A properly declared slot must be declared by using the `slot` method.\n *\n * @internal\n * @example\n * ```tsx\n * export const renderInput_unstable = (state: InputState): JSXElement => {\n * assertSlots<InputSlots>(state);\n * return (\n * <state.root>\n * {state.contentBefore && <state.contentBefore />}\n * <state.input />\n * {state.contentAfter && <state.contentAfter />}\n * </state.root>\n * );\n * };\n * ```\n */\nexport function assertSlots<Slots extends SlotPropsRecord>(state: unknown): asserts state is SlotComponents<Slots> {\n /**\n * This verification is not necessary in production\n * as we're verifying static properties that will not change between environments\n */\n if (process.env.NODE_ENV !== 'production') {\n const typedState = state as ComponentState<Slots>;\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n for (const slotName of Object.keys(typedState.components)) {\n const slotElement = typedState[slotName];\n if (slotElement === undefined) {\n continue;\n }\n // this means a slot is being declared without using, slot.always or slot.optional or even resolveShorthand on the state hook,\n // but the render method is using the new `assertSlots` method. That scenario can be solved by simply updating the slot element with the proper element type\n // FIXME: this slot will still fail to support child render function scenario\n if (!isSlot(slotElement)) {\n typedState[slotName as keyof ComponentState<Slots>] = slot.always(slotElement, {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n elementType: typedState.components[slotName] as React.ComponentType<{}>,\n }) as ComponentState<Slots>[keyof ComponentState<Slots>];\n // eslint-disable-next-line no-console\n console.warn(/** #__DE-INDENT__ */ `\n @fluentui/react-utilities [${assertSlots.name}]:\n \"state.${slotName}\" is not a slot!\n Be sure to create slots properly by using \"slot.always\" or \"slot.optional\".\n `);\n } else {\n // This means a slot is being declared by using resolveShorthand on the state hook,\n // but the render method is using the new `assertSlots` method. That scenario can be solved by simply updating the slot element with the proper element type\n const { [SLOT_ELEMENT_TYPE_SYMBOL]: elementType } = slotElement;\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n if (elementType !== typedState.components[slotName]) {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n slotElement[SLOT_ELEMENT_TYPE_SYMBOL] = typedState.components[slotName] as React.ComponentType<{}>;\n // eslint-disable-next-line no-console\n console.warn(/** #__DE-INDENT__ */ `\n @fluentui/react-utilities [${assertSlots.name}]:\n \"state.${slotName}\" element type differs from \"state.components.${slotName}\",\n ${elementType} !== ${\n typedState.components[slotName] /* eslint-disable-line @typescript-eslint/no-deprecated */\n }.\n Be sure to create slots properly by using \"slot.always\" or \"slot.optional\" with the correct elementType.\n `);\n }\n }\n }\n }\n}\n"],"names":["SLOT_ELEMENT_TYPE_SYMBOL","isSlot","slot","assertSlots","state","process","env","NODE_ENV","typedState","slotName","Object","keys","components","slotElement","undefined","always","elementType","console","warn","name"],"mappings":"AACA,SAASA,wBAAwB,QAAQ,cAAc;AACvD,SAASC,MAAM,QAAQ,WAAW;AAElC,YAAYC,UAAU,SAAS;AAM/B;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,SAASC,YAA2CC,KAAc;IACvE;;;GAGC,GACD,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,MAAMC,aAAaJ;QACnB,4DAA4D;QAC5D,KAAK,MAAMK,YAAYC,OAAOC,IAAI,CAACH,WAAWI,UAAU,EAAG;YACzD,MAAMC,cAAcL,UAAU,CAACC,SAAS;YACxC,IAAII,gBAAgBC,WAAW;gBAC7B;YACF;YACA,8HAA8H;YAC9H,4JAA4J;YAC5J,6EAA6E;YAC7E,IAAI,CAACb,OAAOY,cAAc;gBACxBL,UAAU,CAACC,SAAwC,GAAGP,KAAKa,MAAM,CAACF,aAAa;oBAC7E,4DAA4D;oBAC5DG,aAAaR,WAAWI,UAAU,CAACH,SAAS;gBAC9C;gBACA,sCAAsC;gBACtCQ,QAAQC,IAAI,CAAuB,CAAC,2BACP,EAAEf,YAAYgB,IAAI,CAAC;OACvC,EAAEV,SAAS;2EAEpB,CAAC;YACH,OAAO;gBACL,mFAAmF;gBACnF,4JAA4J;gBAC5J,MAAM,EAAE,CAACT,yBAAyB,EAAEgB,WAAW,EAAE,GAAGH;gBACpD,4DAA4D;gBAC5D,IAAIG,gBAAgBR,WAAWI,UAAU,CAACH,SAAS,EAAE;oBACnD,4DAA4D;oBAC5DI,WAAW,CAACb,yBAAyB,GAAGQ,WAAWI,UAAU,CAACH,SAAS;oBACvE,sCAAsC;oBACtCQ,QAAQC,IAAI,CAAuB,CAAC,2BACP,EAAEf,YAAYgB,IAAI,CAAC;OACvC,EAAEV,SAAS,8CAA8C,EAAEA,SAAS;AAC3E,EAAEO,YAAY,KAAK,EACnBR,WAAWI,UAAU,CAACH,SAAS,CAChC;wGAED,CAAC;gBACH;YACF;QACF;IACF;AACF"}
|
package/lib/compose/constants.js
CHANGED
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @internal
|
|
3
2
|
* Internal reference for the render function
|
|
3
|
+
*
|
|
4
|
+
* @internal
|
|
4
5
|
*/ export const SLOT_RENDER_FUNCTION_SYMBOL = Symbol.for('fui.slotRenderFunction');
|
|
5
6
|
/**
|
|
6
|
-
* @internal
|
|
7
7
|
* Internal reference for the render function
|
|
8
|
+
*
|
|
9
|
+
* @internal
|
|
8
10
|
*/ export const SLOT_ELEMENT_TYPE_SYMBOL = Symbol.for('fui.slotElementType');
|
|
9
11
|
/**
|
|
10
|
-
* @internal
|
|
11
12
|
* Internal cache of the original className prop for the slot, before being modified by the useStyles hook.
|
|
13
|
+
*
|
|
14
|
+
* @internal
|
|
12
15
|
*/ export const SLOT_CLASS_NAME_PROP_SYMBOL = Symbol.for('fui.slotClassNameProp');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/compose/constants.ts"],"sourcesContent":["/**\n *
|
|
1
|
+
{"version":3,"sources":["../src/compose/constants.ts"],"sourcesContent":["/**\n * Internal reference for the render function\n *\n * @internal\n */\nexport const SLOT_RENDER_FUNCTION_SYMBOL = Symbol.for('fui.slotRenderFunction');\n/**\n * Internal reference for the render function\n *\n * @internal\n */\nexport const SLOT_ELEMENT_TYPE_SYMBOL = Symbol.for('fui.slotElementType');\n/**\n * Internal cache of the original className prop for the slot, before being modified by the useStyles hook.\n *\n * @internal\n */\nexport const SLOT_CLASS_NAME_PROP_SYMBOL = Symbol.for('fui.slotClassNameProp');\n"],"names":["SLOT_RENDER_FUNCTION_SYMBOL","Symbol","for","SLOT_ELEMENT_TYPE_SYMBOL","SLOT_CLASS_NAME_PROP_SYMBOL"],"mappings":"AAAA;;;;CAIC,GACD,OAAO,MAAMA,8BAA8BC,OAAOC,GAAG,CAAC,0BAA0B;AAChF;;;;CAIC,GACD,OAAO,MAAMC,2BAA2BF,OAAOC,GAAG,CAAC,uBAAuB;AAC1E;;;;CAIC,GACD,OAAO,MAAME,8BAA8BH,OAAOC,GAAG,CAAC,yBAAyB"}
|
|
@@ -1,12 +1,11 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
1
|
/**
|
|
3
2
|
* Similar to `getSlots`, main difference is that it's compatible with new custom jsx pragma
|
|
4
3
|
*
|
|
5
|
-
* @internal
|
|
6
4
|
* This is an internal temporary method, this method will cease to exist eventually!
|
|
7
5
|
*
|
|
8
6
|
* * ❗️❗️ **DO NOT USE IT EXTERNALLY** ❗️❗️
|
|
9
7
|
*
|
|
8
|
+
* @internal
|
|
10
9
|
* @deprecated use slot.always or slot.optional combined with assertSlots instead
|
|
11
10
|
*/ export function getSlotsNext(state) {
|
|
12
11
|
const typedState = state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/compose/deprecated/getSlotsNext.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentState, SlotPropsRecord, UnknownSlotProps } from '../types';\nimport { ObjectSlotProps, Slots } from './getSlots';\n\n/**\n * Similar to `getSlots`, main difference is that it's compatible with new custom jsx pragma\n *\n *
|
|
1
|
+
{"version":3,"sources":["../src/compose/deprecated/getSlotsNext.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentState, SlotPropsRecord, UnknownSlotProps } from '../types';\nimport type { ObjectSlotProps, Slots } from './getSlots';\n\n/**\n * Similar to `getSlots`, main difference is that it's compatible with new custom jsx pragma\n *\n * This is an internal temporary method, this method will cease to exist eventually!\n *\n * * ❗️❗️ **DO NOT USE IT EXTERNALLY** ❗️❗️\n *\n * @internal\n * @deprecated use slot.always or slot.optional combined with assertSlots instead\n */\nexport function getSlotsNext<R extends SlotPropsRecord>(\n state: unknown,\n): {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n slots: Slots<R>;\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n slotProps: ObjectSlotProps<R>;\n} {\n const typedState = state as ComponentState<R>;\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n const slots = {} as Slots<R>;\n const slotProps = {} as R;\n\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n const slotNames: (keyof R)[] = Object.keys(typedState.components);\n for (const slotName of slotNames) {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n const [slot, props] = getSlotNext(typedState, slotName);\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n slots[slotName] = slot as Slots<R>[typeof slotName];\n slotProps[slotName] = props;\n }\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n return { slots, slotProps: slotProps as unknown as ObjectSlotProps<R> };\n}\n\n/**\n * @deprecated use slot.always or slot.optional combined with assertSlots instead\n */\nfunction getSlotNext<R extends SlotPropsRecord, K extends keyof R>(\n state: ComponentState<R>,\n slotName: K,\n): readonly [React.ElementType<R[K]> | null, R[K]] {\n const props = state[slotName];\n\n if (props === undefined) {\n return [null, undefined as R[K]];\n }\n\n type NonUndefined<T> = T extends undefined ? never : T;\n // TS Error: Property 'as' does not exist on type 'UnknownSlotProps | undefined'.ts(2339)\n const { as: asProp, ...propsWithoutAs } = props as NonUndefined<typeof props>;\n\n const slot = (\n state.components?.[slotName] === undefined || // eslint-disable-line @typescript-eslint/no-deprecated\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n typeof state.components[slotName] === 'string'\n ? // eslint-disable-next-line @typescript-eslint/no-deprecated\n asProp || state.components?.[slotName] || 'div'\n : // eslint-disable-next-line @typescript-eslint/no-deprecated\n state.components[slotName]\n ) as React.ElementType<R[K]>;\n\n const shouldOmitAsProp = typeof slot === 'string' && asProp;\n const slotProps: UnknownSlotProps = shouldOmitAsProp ? propsWithoutAs : props;\n\n return [slot as React.ElementType<R[K]>, slotProps as R[K]];\n}\n"],"names":["getSlotsNext","state","typedState","slots","slotProps","slotNames","Object","keys","components","slotName","slot","props","getSlotNext","undefined","as","asProp","propsWithoutAs","shouldOmitAsProp"],"mappings":"AAIA;;;;;;;;;CASC,GACD,OAAO,SAASA,aACdC,KAAc;IAOd,MAAMC,aAAaD;IACnB,4DAA4D;IAC5D,MAAME,QAAQ,CAAC;IACf,MAAMC,YAAY,CAAC;IAEnB,4DAA4D;IAC5D,MAAMC,YAAyBC,OAAOC,IAAI,CAACL,WAAWM,UAAU;IAChE,KAAK,MAAMC,YAAYJ,UAAW;QAChC,4DAA4D;QAC5D,MAAM,CAACK,MAAMC,MAAM,GAAGC,YAAYV,YAAYO;QAC9C,4DAA4D;QAC5DN,KAAK,CAACM,SAAS,GAAGC;QAClBN,SAAS,CAACK,SAAS,GAAGE;IACxB;IACA,4DAA4D;IAC5D,OAAO;QAAER;QAAOC,WAAWA;IAA2C;AACxE;AAEA;;CAEC,GACD,SAASQ,YACPX,KAAwB,EACxBQ,QAAW;QAaTR,mBAIcA;IAfhB,MAAMU,QAAQV,KAAK,CAACQ,SAAS;IAE7B,IAAIE,UAAUE,WAAW;QACvB,OAAO;YAAC;YAAMA;SAAkB;IAClC;IAGA,yFAAyF;IACzF,MAAM,EAAEC,IAAIC,MAAM,EAAE,GAAGC,gBAAgB,GAAGL;IAE1C,MAAMD,OACJT,EAAAA,oBAAAA,MAAMO,UAAU,cAAhBP,wCAAAA,iBAAkB,CAACQ,SAAS,MAAKI,aAAa,uDAAuD;IACrG,4DAA4D;IAC5D,OAAOZ,MAAMO,UAAU,CAACC,SAAS,KAAK,WAElCM,YAAUd,qBAAAA,MAAMO,UAAU,cAAhBP,yCAAAA,kBAAkB,CAACQ,SAAS,KAAI,QAE1CR,MAAMO,UAAU,CAACC,SAAS;IAGhC,MAAMQ,mBAAmB,OAAOP,SAAS,YAAYK;IACrD,MAAMX,YAA8Ba,mBAAmBD,iBAAiBL;IAExE,OAAO;QAACD;QAAiCN;KAAkB;AAC7D"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/compose/getIntrinsicElementProps.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '../utils/getNativeElementProps';\nimport type { InferredElementRefType, UnknownSlotProps } from './types';\nimport type { DistributiveOmit } from '../utils/types';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype HTMLAttributes = React.HTMLAttributes<any>;\n\n/**\n * Given an element tagname and user props, filters the props to only allowed props for the given\n * element type.\n *\n * Equivalent to {@link getNativeElementProps}, but more type-safe.\n *\n * @param tagName - The slot's default element type (e.g. 'div')\n * @param props - The component's props object\n * @param excludedPropNames - List of native props to exclude from the returned value\n */\nexport const getIntrinsicElementProps = <\n Props extends UnknownSlotProps,\n ExcludedPropKeys extends Extract<keyof Props, string> = never,\n>(\n tagName: NonNullable<Props['as']>,\n // eslint-disable-next-line @typescript-eslint/no-restricted-types -- in order to not introduce Type Restriction CHANGe which is kinda \"breaking change from Types POV\", we don't enforce our custom `RefAttributes` in this API, to be compatible with scenarios where non v9 interfaces might be used. This may/will change with React 19\n props: Props & React.RefAttributes<InferredElementRefType<Props>>,\n excludedPropNames?: ExcludedPropKeys[],\n): DistributiveOmit<Props, ExcludedPropKeys | Exclude<keyof Props, 'as' | keyof HTMLAttributes>> => {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n return getNativeElementProps<\n DistributiveOmit<Props, Exclude<keyof Props, keyof HTMLAttributes | keyof UnknownSlotProps> | ExcludedPropKeys>\n >(props.as ?? tagName, props, excludedPropNames);\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/compose/getIntrinsicElementProps.ts"],"sourcesContent":["import type * as React from 'react';\nimport { getNativeElementProps } from '../utils/getNativeElementProps';\nimport type { InferredElementRefType, UnknownSlotProps } from './types';\nimport type { DistributiveOmit } from '../utils/types';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype HTMLAttributes = React.HTMLAttributes<any>;\n\n/**\n * Given an element tagname and user props, filters the props to only allowed props for the given\n * element type.\n *\n * Equivalent to {@link getNativeElementProps}, but more type-safe.\n *\n * @param tagName - The slot's default element type (e.g. 'div')\n * @param props - The component's props object\n * @param excludedPropNames - List of native props to exclude from the returned value\n */\nexport const getIntrinsicElementProps = <\n Props extends UnknownSlotProps,\n ExcludedPropKeys extends Extract<keyof Props, string> = never,\n>(\n tagName: NonNullable<Props['as']>,\n // eslint-disable-next-line @typescript-eslint/no-restricted-types -- in order to not introduce Type Restriction CHANGe which is kinda \"breaking change from Types POV\", we don't enforce our custom `RefAttributes` in this API, to be compatible with scenarios where non v9 interfaces might be used. This may/will change with React 19\n props: Props & React.RefAttributes<InferredElementRefType<Props>>,\n excludedPropNames?: ExcludedPropKeys[],\n): DistributiveOmit<Props, ExcludedPropKeys | Exclude<keyof Props, 'as' | keyof HTMLAttributes>> => {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n return getNativeElementProps<\n DistributiveOmit<Props, Exclude<keyof Props, keyof HTMLAttributes | keyof UnknownSlotProps> | ExcludedPropKeys>\n >(props.as ?? tagName, props, excludedPropNames);\n};\n"],"names":["getNativeElementProps","getIntrinsicElementProps","tagName","props","excludedPropNames","as"],"mappings":"AACA,SAASA,qBAAqB,QAAQ,iCAAiC;AAOvE;;;;;;;;;CASC,GACD,OAAO,MAAMC,2BAA2B,CAItCC,SACA,2UAA2U;AAC3UC,OACAC;QAKED;IAHF,4DAA4D;IAC5D,OAAOH,sBAELG,CAAAA,YAAAA,MAAME,EAAE,cAARF,uBAAAA,YAAYD,SAASC,OAAOC;AAChC,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/compose/isSlot.ts"],"sourcesContent":["import { SLOT_ELEMENT_TYPE_SYMBOL } from './constants';\nimport { SlotComponentType } from './types';\n\n/**\n * Guard method to ensure a given element is a slot.\n * This is mainly used internally to ensure a slot is being used as a component.\n */\nexport function isSlot<Props extends {}>(element: unknown): element is SlotComponentType<Props> {\n return Boolean((element as {} | undefined)?.hasOwnProperty(SLOT_ELEMENT_TYPE_SYMBOL));\n}\n"],"names":["SLOT_ELEMENT_TYPE_SYMBOL","isSlot","element","Boolean","hasOwnProperty"],"mappings":"AAAA,SAASA,wBAAwB,QAAQ,cAAc;AAGvD;;;CAGC,GACD,OAAO,SAASC,OAAyBC,OAAgB;IACvD,OAAOC,QAASD,oBAAAA,8BAAD,AAACA,QAA4BE,cAAc,CAACJ;AAC7D"}
|
|
1
|
+
{"version":3,"sources":["../src/compose/isSlot.ts"],"sourcesContent":["import { SLOT_ELEMENT_TYPE_SYMBOL } from './constants';\nimport type { SlotComponentType } from './types';\n\n/**\n * Guard method to ensure a given element is a slot.\n * This is mainly used internally to ensure a slot is being used as a component.\n */\nexport function isSlot<Props extends {}>(element: unknown): element is SlotComponentType<Props> {\n return Boolean((element as {} | undefined)?.hasOwnProperty(SLOT_ELEMENT_TYPE_SYMBOL));\n}\n"],"names":["SLOT_ELEMENT_TYPE_SYMBOL","isSlot","element","Boolean","hasOwnProperty"],"mappings":"AAAA,SAASA,wBAAwB,QAAQ,cAAc;AAGvD;;;CAGC,GACD,OAAO,SAASC,OAAyBC,OAAgB;IACvD,OAAOC,QAASD,oBAAAA,8BAAD,AAACA,QAA4BE,cAAc,CAACJ;AAC7D"}
|
package/lib/compose/types.js
CHANGED
|
@@ -1 +1,17 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* This type should be used in place of `React.RefAttributes<T>` in all components that specify `ref` prop.
|
|
3
|
+
*
|
|
4
|
+
* If user is using React 18 types `>=18.2.61`, they will run into type issues of incompatible refs, using this type mitigates this issues across react type versions.
|
|
5
|
+
*
|
|
6
|
+
* @remarks
|
|
7
|
+
*
|
|
8
|
+
* React 18 types introduced Type Expansion Change to the `RefAttributes` interface as patch release.
|
|
9
|
+
* These changes were released in `@types/react@18.2.61` (replacing ref with `LegacyRef`, which leaks `string` into the union type, causing breaking changes between v8/v9 libraries):
|
|
10
|
+
* - {@link https://github.com/DefinitelyTyped/DefinitelyTyped/pull/68720 | PR }
|
|
11
|
+
* - {@link https://app.unpkg.com/@types/react@18.2.61/files/index.d.ts | shipped definitions }
|
|
12
|
+
*
|
|
13
|
+
*
|
|
14
|
+
* In React 19 types this was "reverted" back to the original `Ref<T>` type.
|
|
15
|
+
* In order to maintain compatibility with React 17,18,19, we are forced to use our own version of `RefAttributes`.
|
|
16
|
+
*
|
|
17
|
+
*/ export { };
|