@fluentui/react-utilities 9.20.0 → 9.21.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.md +20 -2
- package/dist/index.d.ts +130 -34
- package/lib/compose/assertSlots.js +4 -0
- package/lib/compose/assertSlots.js.map +1 -1
- package/lib/compose/deprecated/getSlots.js +8 -3
- package/lib/compose/deprecated/getSlots.js.map +1 -1
- package/lib/compose/deprecated/getSlotsNext.js +8 -3
- package/lib/compose/deprecated/getSlotsNext.js.map +1 -1
- package/lib/compose/deprecated/resolveShorthand.js +1 -1
- package/lib/compose/deprecated/resolveShorthand.js.map +1 -1
- package/lib/compose/getIntrinsicElementProps.js +6 -1
- package/lib/compose/getIntrinsicElementProps.js.map +1 -1
- package/lib/compose/index.js.map +1 -1
- package/lib/compose/slot.js +3 -1
- package/lib/compose/slot.js.map +1 -1
- package/lib/compose/types.js.map +1 -1
- package/lib/hooks/useMergedRefs.js +10 -1
- package/lib/hooks/useMergedRefs.js.map +1 -1
- package/lib/trigger/applyTriggerPropsToChildren.js.map +1 -1
- package/lib/utils/types.js +1 -24
- package/lib/utils/types.js.map +1 -1
- package/lib-commonjs/compose/assertSlots.js +4 -0
- package/lib-commonjs/compose/assertSlots.js.map +1 -1
- package/lib-commonjs/compose/deprecated/getSlots.js +8 -3
- package/lib-commonjs/compose/deprecated/getSlots.js.map +1 -1
- package/lib-commonjs/compose/deprecated/getSlotsNext.js +8 -3
- package/lib-commonjs/compose/deprecated/getSlotsNext.js.map +1 -1
- package/lib-commonjs/compose/deprecated/resolveShorthand.js.map +1 -1
- package/lib-commonjs/compose/getIntrinsicElementProps.js +2 -1
- package/lib-commonjs/compose/getIntrinsicElementProps.js.map +1 -1
- package/lib-commonjs/compose/index.js.map +1 -1
- package/lib-commonjs/compose/slot.js +3 -1
- package/lib-commonjs/compose/slot.js.map +1 -1
- package/lib-commonjs/compose/types.js.map +1 -1
- package/lib-commonjs/hooks/useMergedRefs.js +8 -0
- package/lib-commonjs/hooks/useMergedRefs.js.map +1 -1
- package/lib-commonjs/trigger/applyTriggerPropsToChildren.js.map +1 -1
- package/lib-commonjs/utils/types.js +2 -20
- package/lib-commonjs/utils/types.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
@@ -1,12 +1,30 @@
|
|
1
1
|
# Change Log - @fluentui/react-utilities
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Wed, 18 Jun 2025 17:29:30 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
+
## [9.21.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.21.1)
|
8
|
+
|
9
|
+
Wed, 18 Jun 2025 17:29:30 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.21.0..@fluentui/react-utilities_v9.21.1)
|
11
|
+
|
12
|
+
### Patches
|
13
|
+
|
14
|
+
- Bump @fluentui/react-shared-contexts to v9.24.0 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
|
15
|
+
|
16
|
+
## [9.21.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.21.0)
|
17
|
+
|
18
|
+
Thu, 12 Jun 2025 09:43:33 GMT
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.20.0..@fluentui/react-utilities_v9.21.0)
|
20
|
+
|
21
|
+
### Minor changes
|
22
|
+
|
23
|
+
- feat: react 18 support for slots api ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by dmytrokirpa@microsoft.com)
|
24
|
+
|
7
25
|
## [9.20.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.20.0)
|
8
26
|
|
9
|
-
Fri, 06 Jun 2025 13:
|
27
|
+
Fri, 06 Jun 2025 13:15:17 GMT
|
10
28
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.19.0..@fluentui/react-utilities_v9.20.0)
|
11
29
|
|
12
30
|
### Minor changes
|
package/dist/index.d.ts
CHANGED
@@ -64,6 +64,14 @@ export declare function canUseDOM(): boolean;
|
|
64
64
|
*/
|
65
65
|
export declare const clamp: (value: number, min: number, max: number) => number;
|
66
66
|
|
67
|
+
/**
|
68
|
+
* @internal
|
69
|
+
* **THIS TYPE IS INTERNAL AND SHOULD NEVER BE EXPOSED**
|
70
|
+
*/
|
71
|
+
declare interface ComponentClass<P = {}, S = React_2.ComponentState> extends React_2.StaticLifecycle<P, S> {
|
72
|
+
new (props: P): React_2.Component<P, S>;
|
73
|
+
}
|
74
|
+
|
67
75
|
/**
|
68
76
|
* Defines the Props type for a component given its slots and the definition of which one is the primary slot,
|
69
77
|
* defaulting to root if one is not provided.
|
@@ -74,13 +82,29 @@ export declare type ComponentProps<Slots extends SlotPropsRecord, Primary extend
|
|
74
82
|
* Defines the State object of a component given its slots.
|
75
83
|
*/
|
76
84
|
export declare type ComponentState<Slots extends SlotPropsRecord> = {
|
85
|
+
/**
|
86
|
+
* @deprecated
|
87
|
+
* The base element type for each slot.
|
88
|
+
* This property is deprecated and will be removed in a future version.
|
89
|
+
* The slot base element type is declared through `slot.*(slotShorthand, {elementType: ElementType})` instead.
|
90
|
+
*/
|
77
91
|
components: {
|
78
|
-
[Key in keyof Slots]-?: React_2.
|
92
|
+
[Key in keyof Slots]-?: React_2.ElementType;
|
79
93
|
};
|
80
94
|
} & {
|
81
|
-
[Key in keyof Slots]: ReplaceNullWithUndefined<Exclude<Slots[Key], SlotShorthandValue | (Key extends 'root' ? null : never)
|
95
|
+
[Key in keyof Slots]: ReplaceNullWithUndefined<WithoutSlotRenderFunction<Exclude<Slots[Key], SlotShorthandValue | (Key extends 'root' ? null : never)>>>;
|
82
96
|
};
|
83
97
|
|
98
|
+
/**
|
99
|
+
* @internal
|
100
|
+
* With react 18, our `children` type starts leaking everywhere and that causes conflicts on component declaration, specially in the `propTypes` property of
|
101
|
+
* both `ComponentClass` and `FunctionComponent`.
|
102
|
+
*
|
103
|
+
* This type substitutes `React.ComponentType` only keeping the function signature, it omits `propTypes`, `displayName` and other properties that are not
|
104
|
+
* required for the inference.
|
105
|
+
*/
|
106
|
+
declare type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;
|
107
|
+
|
84
108
|
/**
|
85
109
|
* @internal
|
86
110
|
* @param compare - comparison function for items
|
@@ -144,6 +168,11 @@ export declare type EventData<Type extends string, TEvent> = {
|
|
144
168
|
*/
|
145
169
|
export declare type EventHandler<TData extends EventData<string, unknown>> = (ev: React_2.SyntheticEvent | Event, data: TData) => void;
|
146
170
|
|
171
|
+
declare interface ExoticComponent<P> {
|
172
|
+
(props: P): any;
|
173
|
+
$$typeof: symbol;
|
174
|
+
}
|
175
|
+
|
147
176
|
/**
|
148
177
|
* Removes SlotShorthandValue and null from the slot type, extracting just the slot's Props object.
|
149
178
|
*/
|
@@ -176,7 +205,28 @@ export declare type FluentTriggerComponent = {
|
|
176
205
|
* - `forwardRef` component do not support string refs.
|
177
206
|
* - uses custom `RefAttributes` which is compatible with all React versions enforcing no `string` allowance.
|
178
207
|
*/
|
179
|
-
export declare type ForwardRefComponent<Props> =
|
208
|
+
export declare type ForwardRefComponent<Props> = NamedExoticComponent<Props & RefAttributes<InferredElementRefType<Props>>>;
|
209
|
+
|
210
|
+
/**
|
211
|
+
* @internal
|
212
|
+
*
|
213
|
+
* On types/react 18 there are two types being delivered,
|
214
|
+
* 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
|
+
*
|
216
|
+
* If TS is higher than 5.0 then the `FunctionComponent` will be returning ReactNode (which we don't support)
|
217
|
+
* If TS is below or equal to 5.0 then the `FunctionComponent` will be returning ReactElement | null (which we support)
|
218
|
+
*
|
219
|
+
* Since it's not possible to have a single type that works for both cases
|
220
|
+
* (as ReactNode is more specific, and this will break while evaluating functions),
|
221
|
+
* we need to create our own `FunctionComponent` type
|
222
|
+
* that will work for both cases.
|
223
|
+
*
|
224
|
+
* **THIS TYPE IS INTERNAL AND SHOULD NEVER BE EXPOSED**
|
225
|
+
*/
|
226
|
+
declare interface FunctionComponent<P> {
|
227
|
+
(props: P): any;
|
228
|
+
displayName?: string;
|
229
|
+
}
|
180
230
|
|
181
231
|
/**
|
182
232
|
* Returns an object with clientX, clientY for TouchOrMouseEvent.
|
@@ -192,6 +242,10 @@ export declare function getEventClientCoords(event: TouchOrMouseEvent): {
|
|
192
242
|
* element type.
|
193
243
|
*
|
194
244
|
* Equivalent to {@link getNativeElementProps}, but more type-safe.
|
245
|
+
*
|
246
|
+
* @param tagName - The slot's default element type (e.g. 'div')
|
247
|
+
* @param props - The component's props object
|
248
|
+
* @param excludedPropNames - List of native props to exclude from the returned value
|
195
249
|
*/
|
196
250
|
export declare const getIntrinsicElementProps: <Props extends UnknownSlotProps, ExcludedPropKeys extends Extract<keyof Props, string> = never>(tagName: NonNullable<Props["as"]>, props: Props & React_2.RefAttributes<InferredElementRefType<Props>>, excludedPropNames?: ExcludedPropKeys[] | undefined) => DistributiveOmit<Props, ExcludedPropKeys | Exclude<keyof Props, "as" | keyof HTMLAttributes>>;
|
197
251
|
|
@@ -286,7 +340,7 @@ export declare const getSlotClassNameProp_unstable: (slot: UnknownSlotProps) =>
|
|
286
340
|
* @param state - State including slot definitions
|
287
341
|
* @returns An object containing the `slots` map and `slotProps` map.
|
288
342
|
*/
|
289
|
-
export declare function getSlots<R extends SlotPropsRecord>(state:
|
343
|
+
export declare function getSlots<R extends SlotPropsRecord>(state: unknown): {
|
290
344
|
slots: Slots<R>;
|
291
345
|
slotProps: ObjectSlotProps<R>;
|
292
346
|
};
|
@@ -301,7 +355,7 @@ export declare function getSlots<R extends SlotPropsRecord>(state: ComponentStat
|
|
301
355
|
*
|
302
356
|
* @deprecated use slot.always or slot.optional combined with assertSlots instead
|
303
357
|
*/
|
304
|
-
export declare function getSlotsNext<R extends SlotPropsRecord>(state:
|
358
|
+
export declare function getSlotsNext<R extends SlotPropsRecord>(state: unknown): {
|
305
359
|
slots: Slots<R>;
|
306
360
|
slotProps: ObjectSlotProps<R>;
|
307
361
|
};
|
@@ -474,13 +528,17 @@ export declare function isTouchEvent(event: TouchOrMouseEvent): event is TouchEv
|
|
474
528
|
*/
|
475
529
|
export declare function mergeCallbacks<Args extends unknown[]>(callback1: ((...args: Args) => void) | undefined, callback2: ((...args: Args) => void) | undefined): (...args: Args) => void;
|
476
530
|
|
531
|
+
declare interface NamedExoticComponent<P> extends ExoticComponent<P> {
|
532
|
+
displayName?: string;
|
533
|
+
}
|
534
|
+
|
477
535
|
export declare type NativeTouchOrMouseEvent = MouseEvent | TouchEvent;
|
478
536
|
|
479
537
|
/**
|
480
538
|
* @deprecated - use slot.always or slot.optional combined with assertSlots instead
|
481
539
|
*/
|
482
540
|
declare type ObjectSlotProps<S extends SlotPropsRecord> = {
|
483
|
-
[K in keyof S]-?:
|
541
|
+
[K in keyof S]-?: any;
|
484
542
|
};
|
485
543
|
|
486
544
|
/**
|
@@ -555,25 +613,45 @@ export declare interface PriorityQueue<T> {
|
|
555
613
|
declare type PriorityQueueCompareFn<T> = (a: T, b: T) => number;
|
556
614
|
|
557
615
|
/**
|
558
|
-
* Removes the '
|
616
|
+
* Removes the 'children' prop from the given Props type, leaving unions intact (such as the discriminated union created by
|
559
617
|
* IntrinsicSlotProps). This allows IntrinsicSlotProps to be used with React.forwardRef.
|
560
|
-
*
|
561
|
-
* The conditional "extends unknown" (always true) exploits a quirk in the way TypeScript handles conditional
|
562
|
-
* types, to prevent unions from being expanded.
|
563
618
|
*/
|
564
619
|
declare type PropsWithoutChildren<P> = 'children' extends keyof P ? DistributiveOmit<P, 'children'> : P;
|
565
620
|
|
566
621
|
/**
|
567
622
|
* Removes the 'ref' prop from the given Props type, leaving unions intact (such as the discriminated union created by
|
568
623
|
* IntrinsicSlotProps). This allows IntrinsicSlotProps to be used with React.forwardRef.
|
569
|
-
*
|
570
|
-
* The conditional "extends unknown" (always true) exploits a quirk in the way TypeScript handles conditional
|
571
|
-
* types, to prevent unions from being expanded.
|
572
624
|
*/
|
573
625
|
declare type PropsWithoutRef<P> = 'ref' extends keyof P ? DistributiveOmit<P, 'ref'> : P;
|
574
626
|
|
627
|
+
/**
|
628
|
+
* @internal
|
629
|
+
*
|
630
|
+
* 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.
|
631
|
+
*
|
632
|
+
* This type should only be used for inference purposes, and should never be exposed.
|
633
|
+
*
|
634
|
+
* **THIS TYPE IS INTERNAL AND SHOULD NEVER BE EXPOSED**
|
635
|
+
*
|
636
|
+
*/
|
637
|
+
declare type ReactNode = any;
|
638
|
+
|
575
639
|
export declare type ReactTouchOrMouseEvent = React_2.MouseEvent | React_2.TouchEvent;
|
576
640
|
|
641
|
+
/**
|
642
|
+
* @internal
|
643
|
+
*
|
644
|
+
* This type is used to determine if the current version of React is 18+ or not.
|
645
|
+
*
|
646
|
+
* It checks if the `React.ReactNode` has `{}` it its type.
|
647
|
+
* If it is, then it means that the current version of React is lower than 18.
|
648
|
+
* If it is not, then it means that the current version of React is 18 or higher.
|
649
|
+
* This is useful for ensuring compatibility with different versions of React.
|
650
|
+
*
|
651
|
+
* **THIS TYPE IS INTERNAL AND SHOULD NEVER BE EXPOSED**
|
652
|
+
*/
|
653
|
+
declare type ReactVersionDependent<Modern, Legacy> = {} extends React_2.ReactNode ? Legacy : Modern;
|
654
|
+
|
577
655
|
/**
|
578
656
|
* This type should be used in place of `React.RefAttributes<T>` in all components that specify `ref` prop.
|
579
657
|
*
|
@@ -619,7 +697,7 @@ export declare function resetIdsForTests(): void;
|
|
619
697
|
* @param value - the base shorthand props
|
620
698
|
* @param options - options to resolve shorthand props
|
621
699
|
*
|
622
|
-
* @deprecated use slot.always
|
700
|
+
* @deprecated use slot.always, slot.optional, slot.resolveShorthand combined with assertSlots instead
|
623
701
|
*/
|
624
702
|
export declare const resolveShorthand: ResolveShorthandFunction<UnknownSlotProps>;
|
625
703
|
|
@@ -634,8 +712,8 @@ declare function resolveShorthand_2<Props extends UnknownSlotProps | null | unde
|
|
634
712
|
* @deprecated use slot.always or slot.optional combined with assertSlots instead
|
635
713
|
*/
|
636
714
|
export declare type ResolveShorthandFunction<Props extends UnknownSlotProps = UnknownSlotProps> = {
|
637
|
-
<P extends Props>(value: P | SlotShorthandValue | undefined, options: ResolveShorthandOptions<P, true>): P
|
638
|
-
<P extends Props>(value: P | SlotShorthandValue | null | undefined, options?: ResolveShorthandOptions<P, boolean>): P | undefined;
|
715
|
+
<P extends Props>(value: P | SlotShorthandValue | undefined, options: ResolveShorthandOptions<P, true>): WithoutSlotRenderFunction<P>;
|
716
|
+
<P extends Props>(value: P | SlotShorthandValue | null | undefined, options?: ResolveShorthandOptions<P, boolean>): WithoutSlotRenderFunction<P> | undefined;
|
639
717
|
};
|
640
718
|
|
641
719
|
/**
|
@@ -710,13 +788,11 @@ export declare function setVirtualParent(child: Node, parent?: Node): void;
|
|
710
788
|
* NonNullable<Slot<typeof Label>> // Slot is a Label and will always be rendered (can't be set to null by the user)
|
711
789
|
* ```
|
712
790
|
*/
|
713
|
-
export declare type Slot<Type extends keyof JSX.IntrinsicElements |
|
791
|
+
export declare type Slot<Type extends keyof JSX.IntrinsicElements | ComponentType<any> | UnknownSlotProps, AlternateAs extends keyof JSX.IntrinsicElements = never> = IsSingleton<Extract<Type, string>> extends true ? WithSlotShorthandValue<Type extends keyof JSX.IntrinsicElements ? {
|
714
792
|
as?: Type;
|
715
|
-
} & WithSlotRenderFunction<IntrinsicElementProps<Type>> : Type extends
|
716
|
-
|
717
|
-
|
718
|
-
} & WithSlotRenderFunction<IntrinsicElementProps<As>>;
|
719
|
-
}[AlternateAs] | null : 'Error: First parameter to Slot must not be not a union of types. See documentation of Slot type.';
|
793
|
+
} & WithSlotRenderFunction<IntrinsicElementProps<Type>> : Type extends ComponentType<infer Props> ? Props extends UnknownSlotProps ? Props : WithSlotRenderFunction<Props> : Type> | (AlternateAs extends unknown ? {
|
794
|
+
as: AlternateAs;
|
795
|
+
} & WithSlotRenderFunction<IntrinsicElementProps<AlternateAs>> : never) | null : 'Error: First parameter to Slot must not be not a union of types. See documentation of Slot type.';
|
720
796
|
|
721
797
|
declare namespace slot {
|
722
798
|
export {
|
@@ -761,11 +837,9 @@ declare type SlotComponents<Slots extends SlotPropsRecord> = {
|
|
761
837
|
* A definition of a slot, as a component, very similar to how a React component is declared,
|
762
838
|
* but with some additional metadata that is used to determine how to render the slot.
|
763
839
|
*/
|
764
|
-
export declare type SlotComponentType<Props> = Props & {
|
765
|
-
|
766
|
-
|
767
|
-
*/
|
768
|
-
(props: React_2.PropsWithChildren<{}>): React_2.ReactElement | null;
|
840
|
+
export declare type SlotComponentType<Props> = WithoutSlotRenderFunction<Props> & FunctionComponent<{
|
841
|
+
children?: ReactNode;
|
842
|
+
}> & {
|
769
843
|
/**
|
770
844
|
* @internal
|
771
845
|
*/
|
@@ -773,7 +847,7 @@ export declare type SlotComponentType<Props> = Props & {
|
|
773
847
|
/**
|
774
848
|
* @internal
|
775
849
|
*/
|
776
|
-
[SLOT_ELEMENT_TYPE_SYMBOL]:
|
850
|
+
[SLOT_ELEMENT_TYPE_SYMBOL]: ComponentType<Props> | (Props extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);
|
777
851
|
/**
|
778
852
|
* @internal
|
779
853
|
* The original className prop for the slot, before being modified by the useStyles hook.
|
@@ -794,19 +868,19 @@ export declare type SlotOptions<Props extends UnknownSlotProps> = {
|
|
794
868
|
*/
|
795
869
|
export declare type SlotPropsRecord = Record<string, UnknownSlotProps | SlotShorthandValue | null | undefined>;
|
796
870
|
|
797
|
-
export declare type SlotRenderFunction<Props> = (Component: React_2.ElementType<Props>, props: Omit<Props, 'as'>) =>
|
871
|
+
export declare type SlotRenderFunction<Props> = (Component: React_2.ElementType<Props>, props: Omit<Props, 'as'>) => ReactNode;
|
798
872
|
|
799
873
|
/**
|
800
874
|
* @deprecated - use slot.always or slot.optional combined with assertSlots instead
|
801
875
|
*/
|
802
876
|
export declare type Slots<S extends SlotPropsRecord> = {
|
803
|
-
[K in keyof S]:
|
877
|
+
[K in keyof S]: React_2.ElementType<any>;
|
804
878
|
};
|
805
879
|
|
806
880
|
/**
|
807
881
|
* The shorthand value of a slot allows specifying its child
|
808
882
|
*/
|
809
|
-
export declare type SlotShorthandValue = React_2.
|
883
|
+
export declare type SlotShorthandValue = React_2.ReactElement | string | number | Iterable<ReactNode> | React_2.ReactPortal;
|
810
884
|
|
811
885
|
/**
|
812
886
|
* When using SSR with Fluent UI, applications must be wrapped in an SSRProvider. This ensures that auto generated ids
|
@@ -841,8 +915,9 @@ export declare type UnionToIntersection<U> = (U extends unknown ? (x: U) => U :
|
|
841
915
|
* This should ONLY be used in type templates as in `extends UnknownSlotProps`;
|
842
916
|
* it shouldn't be used as the type of a slot.
|
843
917
|
*/
|
844
|
-
export declare type UnknownSlotProps = Pick<React_2.HTMLAttributes<HTMLElement>, '
|
918
|
+
export declare type UnknownSlotProps = Pick<React_2.HTMLAttributes<HTMLElement>, 'className' | 'style'> & {
|
845
919
|
as?: keyof JSX.IntrinsicElements;
|
920
|
+
children?: ReactNode;
|
846
921
|
};
|
847
922
|
|
848
923
|
/**
|
@@ -1041,11 +1116,32 @@ export declare function useSelection(params: SelectionHookParams): readonly [Set
|
|
1041
1116
|
export declare function useTimeout(): readonly [(fn: () => void, delay?: number | undefined) => number, () => void];
|
1042
1117
|
|
1043
1118
|
/**
|
1119
|
+
* @internal
|
1120
|
+
*/
|
1121
|
+
declare type WithoutSlotRenderFunction<Props> = Props extends unknown ? 'children' extends keyof Props ? Omit<Props, 'children'> & {
|
1122
|
+
children?: Exclude<Props['children'], Function>;
|
1123
|
+
} : Props : never;
|
1124
|
+
|
1125
|
+
/**
|
1126
|
+
* @internal
|
1044
1127
|
* Helper type for {@link Slot}. Takes the props we want to support for a slot and adds the ability for `children`
|
1045
1128
|
* to be a render function that takes those props.
|
1129
|
+
*
|
1130
|
+
* Notes: For React 17 and earlier, `children` can be a render function that returns a ReactNode.
|
1131
|
+
* For React 18 and later, `children` can be any value, as React.ReactNode is a more strict type and does not allow functions anymore.
|
1132
|
+
* This means that the render functions need to be asserted as `SlotRenderFunction<Props>` for React 18 and later.
|
1133
|
+
*
|
1134
|
+
* @example
|
1135
|
+
* ```tsx
|
1136
|
+
* // For React 17 and earlier:
|
1137
|
+
* <Component slot={{ children: (Component, props) => <Component {...props} /> }} />
|
1138
|
+
*
|
1139
|
+
* // For React 18 and later:
|
1140
|
+
* <Component slot={{ children: (Component, props) => <Component {...props} /> as SlotRenderFunction<SlotProps> }} />
|
1141
|
+
* ```
|
1046
1142
|
*/
|
1047
|
-
declare type WithSlotRenderFunction<Props> = Props & {
|
1048
|
-
children?:
|
1143
|
+
declare type WithSlotRenderFunction<Props> = PropsWithoutChildren<Props> & {
|
1144
|
+
children?: 'children' extends keyof Props ? ReactVersionDependent<ReactNode, Props['children'] | SlotRenderFunction<Props>> : never;
|
1049
1145
|
};
|
1050
1146
|
|
1051
1147
|
/**
|
@@ -26,6 +26,7 @@ import * as slot from './slot';
|
|
26
26
|
* as we're verifying static properties that will not change between environments
|
27
27
|
*/ if (process.env.NODE_ENV !== 'production') {
|
28
28
|
const typedState = state;
|
29
|
+
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
29
30
|
for (const slotName of Object.keys(typedState.components)){
|
30
31
|
const slotElement = typedState[slotName];
|
31
32
|
if (slotElement === undefined) {
|
@@ -36,6 +37,7 @@ import * as slot from './slot';
|
|
36
37
|
// FIXME: this slot will still fail to support child render function scenario
|
37
38
|
if (!isSlot(slotElement)) {
|
38
39
|
typedState[slotName] = slot.always(slotElement, {
|
40
|
+
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
39
41
|
elementType: typedState.components[slotName]
|
40
42
|
});
|
41
43
|
// eslint-disable-next-line no-console
|
@@ -46,7 +48,9 @@ Be sure to create slots properly by using "slot.always" or "slot.optional".`);
|
|
46
48
|
// This means a slot is being declared by using resolveShorthand on the state hook,
|
47
49
|
// 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
|
48
50
|
const { [SLOT_ELEMENT_TYPE_SYMBOL]: elementType } = slotElement;
|
51
|
+
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
49
52
|
if (elementType !== typedState.components[slotName]) {
|
53
|
+
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
50
54
|
slotElement[SLOT_ELEMENT_TYPE_SYMBOL] = typedState.components[slotName];
|
51
55
|
// eslint-disable-next-line no-console
|
52
56
|
console.warn(`@fluentui/react-utilities [${assertSlots.name}]:
|
@@ -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 * @internal\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 * @example\n * ```tsx\n * export const renderInput_unstable = (state: InputState) => {\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 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 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 if (elementType !== typedState.components[slotName]) {\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} !== ${typedState.components[slotName]}.\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":["React","SLOT_ELEMENT_TYPE_SYMBOL","isSlot","slot","assertSlots","state","process","env","NODE_ENV","typedState","slotName","Object","keys","components","slotElement","undefined","always","elementType","console","warn","name"],"rangeMappings":"
|
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 * @internal\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 * @example\n * ```tsx\n * export const renderInput_unstable = (state: InputState) => {\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":["React","SLOT_ELEMENT_TYPE_SYMBOL","isSlot","slot","assertSlots","state","process","env","NODE_ENV","typedState","slotName","Object","keys","components","slotElement","undefined","always","elementType","console","warn","name"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,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"}
|
@@ -21,12 +21,14 @@ import { SLOT_RENDER_FUNCTION_SYMBOL } from '../constants';
|
|
21
21
|
* @param state - State including slot definitions
|
22
22
|
* @returns An object containing the `slots` map and `slotProps` map.
|
23
23
|
*/ export function getSlots(state) {
|
24
|
+
const typeState = state;
|
24
25
|
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
25
26
|
const slots = {};
|
26
27
|
const slotProps = {};
|
27
|
-
|
28
|
+
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
29
|
+
const slotNames = Object.keys(typeState.components);
|
28
30
|
for (const slotName of slotNames){
|
29
|
-
const [slot, props] = getSlot(
|
31
|
+
const [slot, props] = getSlot(typeState, slotName);
|
30
32
|
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
31
33
|
slots[slotName] = slot;
|
32
34
|
slotProps[slotName] = props;
|
@@ -49,7 +51,9 @@ function getSlot(state, slotName) {
|
|
49
51
|
// TS Error: Property 'as' does not exist on type 'UnknownSlotProps | undefined'.ts(2339)
|
50
52
|
const { as: asProp, children, ...rest } = props;
|
51
53
|
const renderFunction = isSlot(props) ? props[SLOT_RENDER_FUNCTION_SYMBOL] : undefined;
|
52
|
-
const slot = ((_state_components = state.components) === null || _state_components === void 0 ? void 0 : _state_components[slotName]) === undefined ||
|
54
|
+
const slot = ((_state_components = state.components) === null || _state_components === void 0 ? void 0 : _state_components[slotName]) === undefined || // eslint-disable-line @typescript-eslint/no-deprecated
|
55
|
+
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
56
|
+
typeof state.components[slotName] === 'string' ? asProp || ((_state_components1 = state.components) === null || _state_components1 === void 0 ? void 0 : _state_components1[slotName]) || 'div' : state.components[slotName];
|
53
57
|
if (renderFunction || typeof children === 'function') {
|
54
58
|
const render = renderFunction || children;
|
55
59
|
return [
|
@@ -60,6 +64,7 @@ function getSlot(state, slotName) {
|
|
60
64
|
];
|
61
65
|
}
|
62
66
|
const shouldOmitAsProp = typeof slot === 'string' && asProp;
|
67
|
+
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
63
68
|
const slotProps = shouldOmitAsProp ? omit(props, [
|
64
69
|
'as'
|
65
70
|
]) : props;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/compose/deprecated/getSlots.ts"],"sourcesContent":["import * as React from 'react';\nimport { omit } from '../../utils/omit';\nimport type {
|
1
|
+
{"version":3,"sources":["../src/compose/deprecated/getSlots.ts"],"sourcesContent":["import * as React from 'react';\nimport { omit } from '../../utils/omit';\nimport type { ComponentState, SlotPropsRecord, SlotRenderFunction, UnknownSlotProps } from '../types';\nimport { isSlot } from '../isSlot';\nimport { SLOT_RENDER_FUNCTION_SYMBOL } from '../constants';\n\n/**\n * @deprecated - use slot.always or slot.optional combined with assertSlots instead\n */\nexport type Slots<S extends SlotPropsRecord> = {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n [K in keyof S]: React.ElementType<any>;\n};\n\n/**\n * @deprecated - use slot.always or slot.optional combined with assertSlots instead\n */\nexport type ObjectSlotProps<S extends SlotPropsRecord> = {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n [K in keyof S]-?: any;\n};\n\n/**\n * Given the state and an array of slot names, will break out `slots` and `slotProps`\n * collections.\n *\n * The root is derived from a mix of `components` props and `as` prop.\n *\n * Slots will render as null if they are rendered as primitives with undefined children.\n *\n * The slotProps will always omit the `as` prop within them, and for slots that are string\n * primitives, the props will be filtered according to the slot type by the type system.\n * For example, if the slot is rendered `as: 'a'`, the props will be filtered for acceptable\n * anchor props. Note that this is only enforced at build time by Typescript -- there is no\n * runtime code filtering props in this function.\n *\n * @deprecated use slot.always or slot.optional combined with assertSlots instead\n *\n * @param state - State including slot definitions\n * @returns An object containing the `slots` map and `slotProps` map.\n */\nexport function getSlots<R extends SlotPropsRecord>(\n state: 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 typeState = 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(typeState.components);\n for (const slotName of slotNames) {\n const [slot, props] = getSlot(typeState, 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\nfunction getSlot<R extends SlotPropsRecord, K extends keyof R>(\n state: ComponentState<R>,\n slotName: K,\n): readonly [React.ElementType<R[K]> | null, R[K]] {\n 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, children, ...rest } = props as NonUndefined<typeof props>;\n\n const renderFunction = isSlot(props) ? props[SLOT_RENDER_FUNCTION_SYMBOL] : undefined;\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 if (renderFunction || typeof children === 'function') {\n const render = (renderFunction || children) as SlotRenderFunction<R[K]>;\n return [\n React.Fragment as React.ElementType<R[K]>,\n {\n children: render(slot, rest as Omit<R[K], 'as'>),\n } as unknown as R[K],\n ];\n }\n\n const shouldOmitAsProp = typeof slot === 'string' && asProp;\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n const slotProps = (shouldOmitAsProp ? omit(props, ['as']) : (props as UnknownSlotProps)) as R[K];\n return [slot, slotProps];\n}\n"],"names":["React","omit","isSlot","SLOT_RENDER_FUNCTION_SYMBOL","getSlots","state","typeState","slots","slotProps","slotNames","Object","keys","components","slotName","slot","props","getSlot","undefined","as","asProp","children","rest","renderFunction","render","Fragment","shouldOmitAsProp"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,mBAAmB;AAExC,SAASC,MAAM,QAAQ,YAAY;AACnC,SAASC,2BAA2B,QAAQ,eAAe;AAkB3D;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,SAASC,SACdC,KAAc;IAOd,MAAMC,YAAYD;IAClB,4DAA4D;IAC5D,MAAME,QAAQ,CAAC;IACf,MAAMC,YAAY,CAAC;IAEnB,4DAA4D;IAC5D,MAAMC,YAAyBC,OAAOC,IAAI,CAACL,UAAUM,UAAU;IAC/D,KAAK,MAAMC,YAAYJ,UAAW;QAChC,MAAM,CAACK,MAAMC,MAAM,GAAGC,QAAQV,WAAWO;QACzC,4DAA4D;QAC5DN,KAAK,CAACM,SAAS,GAAGC;QAClBN,SAAS,CAACK,SAAS,GAAGE;IACxB;IACA,4DAA4D;IAC5D,OAAO;QAAER;QAAOC,WAAWA;IAA2C;AACxE;AAEA,SAASQ,QACPX,KAAwB,EACxBQ,QAAW;QAeTR,mBAIcA;IAjBhB,MAAMU,QAAQV,KAAK,CAACQ,SAAS;IAE7B,IAAIE,UAAUE,WAAW;QACvB,OAAO;YAAC;YAAMA;SAAkB;IAClC;IAGA,yFAAyF;IACzF,MAAM,EAAEC,IAAIC,MAAM,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGN;IAE1C,MAAMO,iBAAiBpB,OAAOa,SAASA,KAAK,CAACZ,4BAA4B,GAAGc;IAE5E,MAAMH,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,IAAIS,kBAAkB,OAAOF,aAAa,YAAY;QACpD,MAAMG,SAAUD,kBAAkBF;QAClC,OAAO;YACLpB,MAAMwB,QAAQ;YACd;gBACEJ,UAAUG,OAAOT,MAAMO;YACzB;SACD;IACH;IAEA,MAAMI,mBAAmB,OAAOX,SAAS,YAAYK;IACrD,4DAA4D;IAC5D,MAAMX,YAAaiB,mBAAmBxB,KAAKc,OAAO;QAAC;KAAK,IAAKA;IAC7D,OAAO;QAACD;QAAMN;KAAU;AAC1B"}
|
@@ -9,13 +9,15 @@ import * as React from 'react';
|
|
9
9
|
*
|
10
10
|
* @deprecated use slot.always or slot.optional combined with assertSlots instead
|
11
11
|
*/ export function getSlotsNext(state) {
|
12
|
+
const typedState = state;
|
12
13
|
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
13
14
|
const slots = {};
|
14
15
|
const slotProps = {};
|
15
|
-
|
16
|
+
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
17
|
+
const slotNames = Object.keys(typedState.components);
|
16
18
|
for (const slotName of slotNames){
|
17
19
|
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
18
|
-
const [slot, props] = getSlotNext(
|
20
|
+
const [slot, props] = getSlotNext(typedState, slotName);
|
19
21
|
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
20
22
|
slots[slotName] = slot;
|
21
23
|
slotProps[slotName] = props;
|
@@ -39,8 +41,11 @@ import * as React from 'react';
|
|
39
41
|
}
|
40
42
|
// TS Error: Property 'as' does not exist on type 'UnknownSlotProps | undefined'.ts(2339)
|
41
43
|
const { as: asProp, ...propsWithoutAs } = props;
|
42
|
-
const slot = ((_state_components = state.components) === null || _state_components === void 0 ? void 0 : _state_components[slotName]) === undefined ||
|
44
|
+
const slot = ((_state_components = state.components) === null || _state_components === void 0 ? void 0 : _state_components[slotName]) === undefined || // eslint-disable-line @typescript-eslint/no-deprecated
|
45
|
+
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
46
|
+
typeof state.components[slotName] === 'string' ? asProp || ((_state_components1 = state.components) === null || _state_components1 === void 0 ? void 0 : _state_components1[slotName]) || 'div' : state.components[slotName];
|
43
47
|
const shouldOmitAsProp = typeof slot === 'string' && asProp;
|
48
|
+
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
44
49
|
const slotProps = shouldOmitAsProp ? propsWithoutAs : props;
|
45
50
|
return [
|
46
51
|
slot,
|
@@ -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 * @internal\n * This is an internal temporary method, this method will cease to exist eventually!\n *\n * * ❗️❗️ **DO NOT USE IT EXTERNALLY** ❗️❗️\n *\n * @deprecated use slot.always or slot.optional combined with assertSlots instead\n */\nexport function getSlotsNext<R extends SlotPropsRecord>(\n state:
|
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 * @internal\n * This is an internal temporary method, this method will cease to exist eventually!\n *\n * * ❗️❗️ **DO NOT USE IT EXTERNALLY** ❗️❗️\n *\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 // eslint-disable-next-line @typescript-eslint/no-deprecated\n const slotProps: UnknownSlotProps = shouldOmitAsProp ? propsWithoutAs : props;\n\n return [slot, slotProps as R[K]];\n}\n"],"names":["React","getSlotsNext","state","typedState","slots","slotProps","slotNames","Object","keys","components","slotName","slot","props","getSlotNext","undefined","as","asProp","propsWithoutAs","shouldOmitAsProp"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B;;;;;;;;;CASC,GACD,OAAO,SAASC,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,4DAA4D;IAC5D,MAAMX,YAA8Ba,mBAAmBD,iBAAiBL;IAExE,OAAO;QAACD;QAAMN;KAAkB;AAClC"}
|
@@ -6,7 +6,7 @@ import * as slot from '../slot';
|
|
6
6
|
* @param value - the base shorthand props
|
7
7
|
* @param options - options to resolve shorthand props
|
8
8
|
*
|
9
|
-
* @deprecated use slot.always
|
9
|
+
* @deprecated use slot.always, slot.optional, slot.resolveShorthand combined with assertSlots instead
|
10
10
|
*/ // eslint-disable-next-line @typescript-eslint/no-deprecated
|
11
11
|
export const resolveShorthand = (value, options)=>slot.optional(value, {
|
12
12
|
...options,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/compose/deprecated/resolveShorthand.ts"],"sourcesContent":["import * as slot from '../slot';\nimport type { SlotShorthandValue,
|
1
|
+
{"version":3,"sources":["../src/compose/deprecated/resolveShorthand.ts"],"sourcesContent":["import * as slot from '../slot';\nimport type { UnknownSlotProps, SlotShorthandValue, WithoutSlotRenderFunction } from '../types';\n\n/**\n * @deprecated - use slot.always or slot.optional combined with assertSlots instead\n */\nexport type ResolveShorthandOptions<Props, Required extends boolean = false> = Required extends true\n ? { required: true; defaultProps?: Props }\n : { required?: Required; defaultProps?: Props };\n\n/**\n * @deprecated use slot.always or slot.optional combined with assertSlots instead\n */\nexport type ResolveShorthandFunction<Props extends UnknownSlotProps = UnknownSlotProps> = {\n <P extends Props>(\n value: P | SlotShorthandValue | undefined,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n options: ResolveShorthandOptions<P, true>,\n ): WithoutSlotRenderFunction<P>;\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n <P extends Props>(value: P | SlotShorthandValue | null | undefined, options?: ResolveShorthandOptions<P, boolean>):\n | WithoutSlotRenderFunction<P>\n | undefined;\n};\n\n/**\n *\n * Resolves shorthands into slot props, to ensure normalization of the signature\n * being passed down to getSlots method\n * @param value - the base shorthand props\n * @param options - options to resolve shorthand props\n *\n * @deprecated use slot.always, slot.optional, slot.resolveShorthand combined with assertSlots instead\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport const resolveShorthand: ResolveShorthandFunction<UnknownSlotProps> = (value, options) =>\n slot.optional<UnknownSlotProps>(value, {\n ...options,\n renderByDefault: options?.required,\n // elementType as undefined is the way to identify between a slot and a resolveShorthand call\n // in the case elementType is undefined assertSlots will fail, ensuring it'll only work with slot method.\n elementType: undefined!,\n }) as WithoutSlotRenderFunction<UnknownSlotProps>;\n"],"names":["slot","resolveShorthand","value","options","optional","renderByDefault","required","elementType","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,UAAU,UAAU;AAyBhC;;;;;;;;CAQC,GACD,4DAA4D;AAC5D,OAAO,MAAMC,mBAA+D,CAACC,OAAOC,UAClFH,KAAKI,QAAQ,CAAmBF,OAAO;QACrC,GAAGC,OAAO;QACVE,eAAe,EAAEF,oBAAAA,8BAAAA,QAASG,QAAQ;QAClC,6FAA6F;QAC7F,yGAAyG;QACzGC,aAAaC;IACf,GAAkD"}
|
@@ -5,7 +5,12 @@ import { getNativeElementProps } from '../utils/getNativeElementProps';
|
|
5
5
|
* element type.
|
6
6
|
*
|
7
7
|
* Equivalent to {@link getNativeElementProps}, but more type-safe.
|
8
|
-
|
8
|
+
*
|
9
|
+
* @param tagName - The slot's default element type (e.g. 'div')
|
10
|
+
* @param props - The component's props object
|
11
|
+
* @param excludedPropNames - List of native props to exclude from the returned value
|
12
|
+
*/ export const getIntrinsicElementProps = (tagName, // 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
|
13
|
+
props, excludedPropNames)=>{
|
9
14
|
var _props_as;
|
10
15
|
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
11
16
|
return getNativeElementProps((_props_as = props.as) !== null && _props_as !== void 0 ? _props_as : tagName, props, excludedPropNames);
|
@@ -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 */\nexport const getIntrinsicElementProps = <\n Props extends UnknownSlotProps,\n ExcludedPropKeys extends Extract<keyof Props, string> = never,\n>(\n
|
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) => {\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":["React","getNativeElementProps","getIntrinsicElementProps","tagName","props","excludedPropNames","as"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,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"}
|
package/lib/compose/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/compose/index.ts"],"sourcesContent":["import * as slot from './slot';\n\nexport type {\n AsIntrinsicElement,\n ComponentProps,\n ComponentState,\n EventData,\n EventHandler,\n ExtractSlotProps,\n ForwardRefComponent,\n RefAttributes,\n InferredElementRefType,\n IsSingleton,\n
|
1
|
+
{"version":3,"sources":["../src/compose/index.ts"],"sourcesContent":["import * as slot from './slot';\n\nexport type {\n AsIntrinsicElement,\n ComponentProps,\n ComponentState,\n EventData,\n EventHandler,\n ExtractSlotProps,\n ForwardRefComponent,\n RefAttributes,\n InferredElementRefType,\n IsSingleton,\n Slot,\n SlotClassNames,\n SlotComponentType,\n SlotPropsRecord,\n SlotRenderFunction,\n SlotShorthandValue,\n UnknownSlotProps,\n} from './types';\n\nexport { isResolvedShorthand } from './isResolvedShorthand';\nexport { SLOT_CLASS_NAME_PROP_SYMBOL, SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from './constants';\nexport { isSlot } from './isSlot';\nexport { assertSlots } from './assertSlots';\nexport { getIntrinsicElementProps } from './getIntrinsicElementProps';\nexport { getSlotClassNameProp as getSlotClassNameProp_unstable } from './getSlotClassNameProp';\n\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport type { ObjectSlotProps, Slots } from './deprecated/getSlots';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport { getSlots } from './deprecated/getSlots';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport type { ResolveShorthandFunction, ResolveShorthandOptions } from './deprecated/resolveShorthand';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport { resolveShorthand } from './deprecated/resolveShorthand';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport { getSlotsNext } from './deprecated/getSlotsNext';\n\nexport { slot };\nexport type { SlotOptions } from './slot';\nexport type { PropsWithoutChildren, PropsWithoutRef } from '../utils/types';\n"],"names":["slot","isResolvedShorthand","SLOT_CLASS_NAME_PROP_SYMBOL","SLOT_ELEMENT_TYPE_SYMBOL","SLOT_RENDER_FUNCTION_SYMBOL","isSlot","assertSlots","getIntrinsicElementProps","getSlotClassNameProp","getSlotClassNameProp_unstable","getSlots","resolveShorthand","getSlotsNext"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,UAAU,SAAS;AAsB/B,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,2BAA2B,EAAEC,wBAAwB,EAAEC,2BAA2B,QAAQ,cAAc;AACjH,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,WAAW,QAAQ,gBAAgB;AAC5C,SAASC,wBAAwB,QAAQ,6BAA6B;AACtE,SAASC,wBAAwBC,6BAA6B,QAAQ,yBAAyB;AAI/F,4DAA4D;AAC5D,SAASC,QAAQ,QAAQ,wBAAwB;AAGjD,4DAA4D;AAC5D,SAASC,gBAAgB,QAAQ,gCAAgC;AACjE,4DAA4D;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASZ,IAAI,GAAG"}
|