@fluentui/react-utilities 0.0.0-nightly-20240606-0726.1 → 0.0.0-nightly-20240607-1142.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 +16 -6
- package/dist/index.d.ts +93 -42
- package/lib/compose/assertSlots.js +4 -0
- package/lib/compose/assertSlots.js.map +1 -1
- package/lib/compose/deprecated/getSlots.js +9 -7
- package/lib/compose/deprecated/getSlots.js.map +1 -1
- package/lib/compose/deprecated/getSlotsNext.js +9 -7
- package/lib/compose/deprecated/getSlotsNext.js.map +1 -1
- package/lib/compose/deprecated/resolveShorthand.js +2 -3
- package/lib/compose/deprecated/resolveShorthand.js.map +1 -1
- package/lib/compose/getIntrinsicElementProps.js.map +1 -1
- package/lib/compose/slot.js.map +1 -1
- package/lib/compose/types.js.map +1 -1
- package/lib/hooks/useControllableState.js +11 -1
- package/lib/hooks/useControllableState.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib/utils/types.js +1 -21
- 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 +7 -3
- package/lib-commonjs/compose/deprecated/getSlots.js.map +1 -1
- package/lib-commonjs/compose/deprecated/getSlotsNext.js +7 -3
- package/lib-commonjs/compose/deprecated/getSlotsNext.js.map +1 -1
- package/lib-commonjs/compose/deprecated/resolveShorthand.js.map +1 -1
- package/lib-commonjs/hooks/useControllableState.js +11 -1
- package/lib-commonjs/hooks/useControllableState.js.map +1 -1
- package/lib-commonjs/utils/types.js +2 -20
- package/lib-commonjs/utils/types.js.map +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
@@ -1,19 +1,29 @@
|
|
1
1
|
# Change Log - @fluentui/react-utilities
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Fri, 07 Jun 2024 12:00:01 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
-
## [0.0.0-nightly-
|
7
|
+
## [0.0.0-nightly-20240607-1142.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v0.0.0-nightly-20240607-1142.1)
|
8
8
|
|
9
|
-
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.18.
|
9
|
+
Fri, 07 Jun 2024 12:00:01 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.18.10..@fluentui/react-utilities_v0.0.0-nightly-20240607-1142.1)
|
11
11
|
|
12
12
|
### Changes
|
13
13
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
15
|
-
- Bump @fluentui/keyboard-keys to v0.0.0-nightly-
|
16
|
-
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
15
|
+
- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20240607-1142.1 ([commit](https://github.com/microsoft/fluentui/commit/40da052540066d9cb9e19ae1127d52eeccb7a699) by beachball)
|
16
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240607-1142.1 ([commit](https://github.com/microsoft/fluentui/commit/40da052540066d9cb9e19ae1127d52eeccb7a699) by beachball)
|
17
|
+
|
18
|
+
## [9.18.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.18.10)
|
19
|
+
|
20
|
+
Thu, 06 Jun 2024 15:26:43 GMT
|
21
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.18.9..@fluentui/react-utilities_v9.18.10)
|
22
|
+
|
23
|
+
### Patches
|
24
|
+
|
25
|
+
- chore: useControllableState warns if controlled and uncontrolled at the same time ([PR #31461](https://github.com/microsoft/fluentui/pull/31461) by bernardo.sunderhus@gmail.com)
|
26
|
+
- fix: use globals from Fluent context. ([PR #30967](https://github.com/microsoft/fluentui/pull/30967) by seanmonahan@microsoft.com)
|
17
27
|
|
18
28
|
## [9.18.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.18.9)
|
19
29
|
|
package/dist/index.d.ts
CHANGED
@@ -65,6 +65,14 @@ export declare function canUseDOM(): boolean;
|
|
65
65
|
*/
|
66
66
|
export declare const clamp: (value: number, min: number, max: number) => number;
|
67
67
|
|
68
|
+
/**
|
69
|
+
* @internal
|
70
|
+
* **THIS TYPE IS INTERNAL AND SHOULD NEVER BE EXPOSED**
|
71
|
+
*/
|
72
|
+
declare interface ComponentClass<P = {}, S = React_2.ComponentState> extends React_2.StaticLifecycle<P, S> {
|
73
|
+
new (props: P): React_2.Component<P, S>;
|
74
|
+
}
|
75
|
+
|
68
76
|
/**
|
69
77
|
* Defines the Props type for a component given its slots and the definition of which one is the primary slot,
|
70
78
|
* defaulting to root if one is not provided.
|
@@ -75,13 +83,29 @@ export declare type ComponentProps<Slots extends SlotPropsRecord, Primary extend
|
|
75
83
|
* Defines the State object of a component given its slots.
|
76
84
|
*/
|
77
85
|
export declare type ComponentState<Slots extends SlotPropsRecord> = {
|
86
|
+
/**
|
87
|
+
* @deprecated
|
88
|
+
* The base element type for each slot.
|
89
|
+
* This property is deprecated and will be removed in a future version.
|
90
|
+
* The slot base element type is declared through `slot.*(slotShorthand, {elementType: ElementType})` instead.
|
91
|
+
*/
|
78
92
|
components: {
|
79
|
-
[Key in keyof Slots]-?: React_2.
|
93
|
+
[Key in keyof Slots]-?: React_2.ElementType;
|
80
94
|
};
|
81
95
|
} & {
|
82
96
|
[Key in keyof Slots]: ReplaceNullWithUndefined<WithoutSlotRenderFunction<Exclude<Slots[Key], SlotShorthandValue | (Key extends 'root' ? null : never)>>>;
|
83
97
|
};
|
84
98
|
|
99
|
+
/**
|
100
|
+
* @internal
|
101
|
+
* With react 18, our `children` type starts leaking everywhere and that causes conflicts on component declaration, specially in the `propTypes` property of
|
102
|
+
* both `ComponentClass` and `FunctionComponent`.
|
103
|
+
*
|
104
|
+
* This type substitutes `React.ComponentType` only keeping the function signature, it omits `propTypes`, `displayName` and other properties that are not
|
105
|
+
* required for the inference.
|
106
|
+
*/
|
107
|
+
declare type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;
|
108
|
+
|
85
109
|
/**
|
86
110
|
* @internal
|
87
111
|
* @param compare - comparison function for items
|
@@ -170,10 +194,32 @@ export declare type FluentTriggerComponent = {
|
|
170
194
|
|
171
195
|
/**
|
172
196
|
* Return type for `React.forwardRef`, including inference of the proper typing for the ref.
|
197
|
+
*
|
198
|
+
* Note: {@link React.RefAttributes} is {@link https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/69756 | leaking string references} into forwardRef components, forwardRef component do not support string refs.
|
173
199
|
*/
|
174
|
-
export declare type ForwardRefComponent<Props> =
|
175
|
-
|
176
|
-
|
200
|
+
export declare type ForwardRefComponent<Props> = FunctionComponent<Props & React_2.RefAttributes<InferredElementRefType<Props>>>;
|
201
|
+
|
202
|
+
/**
|
203
|
+
* @internal
|
204
|
+
*
|
205
|
+
* On types/react 18 there are two types being delivered,
|
206
|
+
* 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}
|
207
|
+
*
|
208
|
+
* If TS is higher than 5.0 then the `FunctionComponent` will be returning ReactNode (which we don't support)
|
209
|
+
* If TS is below or equal to 5.0 then the `FunctionComponent` will be returning ReactElement | null (which we support)
|
210
|
+
*
|
211
|
+
* Since it's not possible to have a single type that works for both cases
|
212
|
+
* (as ReactNode is more specific, and this will break while evaluating functions),
|
213
|
+
* we need to create our own `FunctionComponent` type
|
214
|
+
* that will work for both cases.
|
215
|
+
*
|
216
|
+
* **THIS TYPE IS INTERNAL AND SHOULD NEVER BE EXPOSED**
|
217
|
+
*/
|
218
|
+
declare interface FunctionComponent<P> {
|
219
|
+
(props: P): any;
|
220
|
+
defaultProps?: Partial<P>;
|
221
|
+
displayName?: string;
|
222
|
+
}
|
177
223
|
|
178
224
|
/**
|
179
225
|
* Returns an object with clientX, clientY for TouchOrMouseEvent.
|
@@ -190,9 +236,7 @@ export declare function getEventClientCoords(event: TouchOrMouseEvent): {
|
|
190
236
|
*
|
191
237
|
* Equivalent to {@link getNativeElementProps}, but more type-safe.
|
192
238
|
*/
|
193
|
-
export declare const getIntrinsicElementProps: <Props extends SlotPropsDataType, ExcludedPropKeys extends Extract<keyof Props, string> = never>(tagName: NonNullable<Props["as"]>, props: Props &
|
194
|
-
ref?: React_2.Ref<InferredElementRefType<Props>> | undefined;
|
195
|
-
}, excludedPropNames?: ExcludedPropKeys[] | undefined) => DistributiveOmit<Props, ExcludedPropKeys | Exclude<keyof Props, "slot" | "style" | "title" | "as" | "children" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">>;
|
239
|
+
export declare const getIntrinsicElementProps: <Props extends SlotPropsDataType, 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, "slot" | "style" | "title" | "as" | "children" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">>;
|
196
240
|
|
197
241
|
/**
|
198
242
|
* Given an element tagname and user props, filters the props to only allowed props for the given
|
@@ -268,7 +312,7 @@ export declare const getRTLSafeKey: (key: string, dir: 'ltr' | 'rtl') => string;
|
|
268
312
|
* @param state - State including slot definitions
|
269
313
|
* @returns An object containing the `slots` map and `slotProps` map.
|
270
314
|
*/
|
271
|
-
export declare function getSlots<R extends SlotPropsRecord>(state:
|
315
|
+
export declare function getSlots<R extends SlotPropsRecord>(state: unknown): {
|
272
316
|
slots: Slots<R>;
|
273
317
|
slotProps: ObjectSlotProps<R>;
|
274
318
|
};
|
@@ -283,7 +327,7 @@ export declare function getSlots<R extends SlotPropsRecord>(state: LegacyCompone
|
|
283
327
|
*
|
284
328
|
* @deprecated use slot.always or slot.optional combined with assertSlots instead
|
285
329
|
*/
|
286
|
-
export declare function getSlotsNext<R extends SlotPropsRecord>(state:
|
330
|
+
export declare function getSlotsNext<R extends SlotPropsRecord>(state: unknown): {
|
287
331
|
slots: Slots<R>;
|
288
332
|
slotProps: ObjectSlotProps<R>;
|
289
333
|
};
|
@@ -432,21 +476,6 @@ export declare function isSlot<Props extends {}>(element: unknown): element is S
|
|
432
476
|
*/
|
433
477
|
export declare function isTouchEvent(event: TouchOrMouseEvent): event is TouchEvent | React_2.TouchEvent;
|
434
478
|
|
435
|
-
/**
|
436
|
-
* @deprecated
|
437
|
-
*
|
438
|
-
* on the new API, the `ComponentState` expects to be used together with `slot.always` or `slot.optional` to define the slot's declaration on the state. Those methods ensure that the slot is properly defined.
|
439
|
-
*
|
440
|
-
* This is not true for the legacy API, where the slots are defined directly on the state object. This type is used to define the state object for the legacy API.
|
441
|
-
*/
|
442
|
-
export declare type LegacyComponentState<Slots extends SlotPropsRecord> = {
|
443
|
-
components: {
|
444
|
-
[Key in keyof Slots]-?: React_2.ComponentType<WithoutSlotRenderFunction<ExtractSlotProps<Slots[Key]>>> | (ExtractSlotProps<Slots[Key]> extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);
|
445
|
-
};
|
446
|
-
} & {
|
447
|
-
[Key in keyof Slots]: ReplaceNullWithUndefined<Exclude<Slots[Key], SlotShorthandValue | (Key extends 'root' ? null : never)>>;
|
448
|
-
};
|
449
|
-
|
450
479
|
/**
|
451
480
|
* @internal
|
452
481
|
* Combine two event callbacks into a single callback function that calls each one in order.
|
@@ -570,6 +599,18 @@ declare type PropsWithoutChildren<P> = 'children' extends keyof P ? Distributive
|
|
570
599
|
*/
|
571
600
|
declare type PropsWithoutRef<P> = 'ref' extends keyof P ? DistributiveOmit<P, 'ref'> : P;
|
572
601
|
|
602
|
+
/**
|
603
|
+
* @internal
|
604
|
+
*
|
605
|
+
* 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.
|
606
|
+
*
|
607
|
+
* This type should only be used for inference purposes, and should never be exposed.
|
608
|
+
*
|
609
|
+
* **THIS TYPE IS INTERNAL AND SHOULD NEVER BE EXPOSED**
|
610
|
+
*
|
611
|
+
*/
|
612
|
+
declare type ReactNode = any;
|
613
|
+
|
573
614
|
export declare type ReactTouchOrMouseEvent = React_2.MouseEvent | React_2.TouchEvent;
|
574
615
|
|
575
616
|
/**
|
@@ -596,9 +637,9 @@ export declare function resetIdsForTests(): void;
|
|
596
637
|
* @param value - the base shorthand props
|
597
638
|
* @param options - options to resolve shorthand props
|
598
639
|
*
|
599
|
-
* @deprecated use slot.always
|
640
|
+
* @deprecated use slot.always, slot.optional, slot.resolveShorthand combined with assertSlots instead
|
600
641
|
*/
|
601
|
-
export declare const resolveShorthand: ResolveShorthandFunction<
|
642
|
+
export declare const resolveShorthand: ResolveShorthandFunction<SlotPropsDataType>;
|
602
643
|
|
603
644
|
/**
|
604
645
|
* Helper function that converts a slot shorthand or properties to a slot properties object
|
@@ -610,9 +651,9 @@ declare function resolveShorthand_2<Props extends SlotPropsDataType | null | und
|
|
610
651
|
/**
|
611
652
|
* @deprecated use slot.always or slot.optional combined with assertSlots instead
|
612
653
|
*/
|
613
|
-
export declare type ResolveShorthandFunction<Props extends
|
614
|
-
<P extends Props>(value: P | SlotShorthandValue | undefined, options: ResolveShorthandOptions<P, true>): P
|
615
|
-
<P extends Props>(value: P | SlotShorthandValue | null | undefined, options?: ResolveShorthandOptions<P, boolean>): P | undefined;
|
654
|
+
export declare type ResolveShorthandFunction<Props extends SlotPropsDataType = SlotPropsDataType> = {
|
655
|
+
<P extends Props>(value: P | SlotShorthandValue | undefined, options: ResolveShorthandOptions<P, true>): WithoutSlotRenderFunction<P>;
|
656
|
+
<P extends Props>(value: P | SlotShorthandValue | null | undefined, options?: ResolveShorthandOptions<P, boolean>): WithoutSlotRenderFunction<P> | undefined;
|
616
657
|
};
|
617
658
|
|
618
659
|
/**
|
@@ -687,9 +728,9 @@ export declare function setVirtualParent(child: Node, parent?: Node): void;
|
|
687
728
|
* NonNullable<Slot<typeof Label>> // Slot is a Label and will always be rendered (can't be set to null by the user)
|
688
729
|
* ```
|
689
730
|
*/
|
690
|
-
export declare type Slot<Type extends keyof JSX.IntrinsicElements |
|
731
|
+
export declare type Slot<Type extends keyof JSX.IntrinsicElements | ComponentType<any> | SlotPropsDataType, AlternateAs extends keyof JSX.IntrinsicElements = never> = IsSingleton<Extract<Type, string>> extends true ? WithSlotShorthandValue<Type extends keyof JSX.IntrinsicElements ? {
|
691
732
|
as?: Type;
|
692
|
-
} & WithSlotRenderFunction<IntrinsicElementProps<Type>> : Type extends
|
733
|
+
} & WithSlotRenderFunction<IntrinsicElementProps<Type>> : Type extends ComponentType<infer Props> ? Props extends SlotPropsDataType ? Props : WithSlotRenderFunction<Props> : Type> | (AlternateAs extends unknown ? {
|
693
734
|
as: AlternateAs;
|
694
735
|
} & WithSlotRenderFunction<IntrinsicElementProps<AlternateAs>> : never) | null : 'Error: First parameter to Slot must not be not a union of types. See documentation of Slot type.';
|
695
736
|
|
@@ -730,11 +771,9 @@ declare type SlotComponents<Slots extends SlotPropsRecord> = {
|
|
730
771
|
* A definition of a slot, as a component, very similar to how a React component is declared,
|
731
772
|
* but with some additional metadata that is used to determine how to render the slot.
|
732
773
|
*/
|
733
|
-
export declare type SlotComponentType<Props extends SlotPropsDataType> = WithoutSlotRenderFunction<Props> & {
|
734
|
-
|
735
|
-
|
736
|
-
*/
|
737
|
-
(props: React_2.PropsWithChildren<{}>): React_2.ReactElement | null;
|
774
|
+
export declare type SlotComponentType<Props extends SlotPropsDataType> = WithoutSlotRenderFunction<Props> & FunctionComponent<{
|
775
|
+
children?: ReactNode;
|
776
|
+
}> & {
|
738
777
|
/**
|
739
778
|
* @internal
|
740
779
|
*/
|
@@ -742,17 +781,25 @@ export declare type SlotComponentType<Props extends SlotPropsDataType> = Without
|
|
742
781
|
/**
|
743
782
|
* @internal
|
744
783
|
*/
|
745
|
-
[SLOT_ELEMENT_TYPE_SYMBOL]:
|
784
|
+
[SLOT_ELEMENT_TYPE_SYMBOL]: ComponentType<Props> | (Props extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);
|
746
785
|
};
|
747
786
|
|
748
787
|
export declare type SlotOptions<Props extends SlotPropsDataType> = {
|
749
788
|
elementType: React_2.ComponentType<Props> | (Props extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);
|
750
|
-
defaultProps?: Partial<Props
|
789
|
+
defaultProps?: Partial<Props & {
|
790
|
+
ref?: React_2.Ref<InferredElementRefType<Props>>;
|
791
|
+
}>;
|
751
792
|
};
|
752
793
|
|
753
|
-
|
794
|
+
/**
|
795
|
+
* @internal
|
796
|
+
*
|
797
|
+
* This should ONLY be used in type templates as in `extends SlotPropsDataType`;
|
798
|
+
* it shouldn't be used as a component's Slot props type.
|
799
|
+
*/
|
800
|
+
declare type SlotPropsDataType = {
|
754
801
|
as?: keyof JSX.IntrinsicElements;
|
755
|
-
children?:
|
802
|
+
children?: ReactNode;
|
756
803
|
};
|
757
804
|
|
758
805
|
/**
|
@@ -763,7 +810,7 @@ export declare type SlotPropsDataType = {
|
|
763
810
|
*/
|
764
811
|
export declare type SlotPropsRecord = Record<string, SlotPropsDataType | SlotShorthandValue | null | undefined>;
|
765
812
|
|
766
|
-
export declare type SlotRenderFunction<Props> = (Component: React_2.ElementType<Props>, props: Omit<Props, 'as'>) =>
|
813
|
+
export declare type SlotRenderFunction<Props> = (Component: React_2.ElementType<Props>, props: Omit<Props, 'as'>) => ReactNode;
|
767
814
|
|
768
815
|
/**
|
769
816
|
* @deprecated - use slot.always or slot.optional combined with assertSlots instead
|
@@ -775,7 +822,7 @@ export declare type Slots<S extends SlotPropsRecord> = {
|
|
775
822
|
/**
|
776
823
|
* The shorthand value of a slot allows specifying its child
|
777
824
|
*/
|
778
|
-
export declare type SlotShorthandValue = React_2.ReactElement | string | number | Iterable<
|
825
|
+
export declare type SlotShorthandValue = React_2.ReactElement | string | number | Iterable<ReactNode> | React_2.ReactPortal;
|
779
826
|
|
780
827
|
/**
|
781
828
|
* When using SSR with Fluent UI, applications must be wrapped in an SSRProvider. This ensures that auto generated ids
|
@@ -1010,11 +1057,15 @@ export declare function useSelection(params: SelectionHookParams): readonly [Set
|
|
1010
1057
|
*/
|
1011
1058
|
export declare function useTimeout(): readonly [(fn: () => void, delay?: number | undefined) => number, () => void];
|
1012
1059
|
|
1060
|
+
/**
|
1061
|
+
* @internal
|
1062
|
+
*/
|
1013
1063
|
declare type WithoutSlotRenderFunction<Props> = Props extends unknown ? 'children' extends keyof Props ? Omit<Props, 'children'> & {
|
1014
1064
|
children?: Exclude<Props['children'], Function>;
|
1015
1065
|
} : Props : never;
|
1016
1066
|
|
1017
1067
|
/**
|
1068
|
+
* @internal
|
1018
1069
|
* Helper type for {@link Slot}. Takes the props we want to support for a slot and adds the ability for `children`
|
1019
1070
|
* to be a render function that takes those props.
|
1020
1071
|
*/
|
@@ -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 deprecation/deprecation
|
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 deprecation/deprecation
|
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 deprecation/deprecation
|
49
52
|
if (elementType !== typedState.components[slotName]) {
|
53
|
+
// eslint-disable-next-line deprecation/deprecation
|
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":["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]>>;\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"],"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,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;
|
1
|
+
{"version":3,"sources":["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]>>;\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 deprecation/deprecation\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 deprecation/deprecation\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 deprecation/deprecation\n if (elementType !== typedState.components[slotName]) {\n // eslint-disable-next-line deprecation/deprecation\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] /* eslint-disable-line deprecation/deprecation */}.\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"],"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,mDAAmD;QACnD,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,mDAAmD;oBACnDG,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,mDAAmD;gBACnD,IAAIG,gBAAgBR,WAAWI,UAAU,CAACH,SAAS,EAAE;oBACnD,mDAAmD;oBACnDI,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,EAAER,WAAWI,UAAU,CAACH,SAAS,CAAmD;wGAEzG,CAAC;gBACH;YACF;QACF;IACF;AACF"}
|
@@ -20,14 +20,15 @@ import { SLOT_RENDER_FUNCTION_SYMBOL } from '../constants';
|
|
20
20
|
*
|
21
21
|
* @param state - State including slot definitions
|
22
22
|
* @returns An object containing the `slots` map and `slotProps` map.
|
23
|
-
*/ export function getSlots(
|
24
|
-
state
|
23
|
+
*/ export function getSlots(state) {
|
24
|
+
const typeState = state;
|
25
25
|
// eslint-disable-next-line deprecation/deprecation
|
26
26
|
const slots = {};
|
27
27
|
const slotProps = {};
|
28
|
-
|
28
|
+
// eslint-disable-next-line deprecation/deprecation
|
29
|
+
const slotNames = Object.keys(typeState.components);
|
29
30
|
for (const slotName of slotNames){
|
30
|
-
const [slot, props] = getSlot(
|
31
|
+
const [slot, props] = getSlot(typeState, slotName);
|
31
32
|
// eslint-disable-next-line deprecation/deprecation
|
32
33
|
slots[slotName] = slot;
|
33
34
|
slotProps[slotName] = props;
|
@@ -38,8 +39,7 @@ state) {
|
|
38
39
|
slotProps: slotProps
|
39
40
|
};
|
40
41
|
}
|
41
|
-
function getSlot(
|
42
|
-
state, slotName) {
|
42
|
+
function getSlot(state, slotName) {
|
43
43
|
var _state_components, _state_components1;
|
44
44
|
const props = state[slotName];
|
45
45
|
if (props === undefined) {
|
@@ -51,7 +51,9 @@ state, slotName) {
|
|
51
51
|
// TS Error: Property 'as' does not exist on type 'UnknownSlotProps | undefined'.ts(2339)
|
52
52
|
const { as: asProp, children, ...rest } = props;
|
53
53
|
const renderFunction = isSlot(props) ? props[SLOT_RENDER_FUNCTION_SYMBOL] : undefined;
|
54
|
-
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 deprecation/deprecation
|
55
|
+
// eslint-disable-next-line deprecation/deprecation
|
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];
|
55
57
|
if (renderFunction || typeof children === 'function') {
|
56
58
|
const render = renderFunction || children;
|
57
59
|
return [
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["getSlots.ts"],"sourcesContent":["import * as React from 'react';\nimport { omit } from '../../utils/omit';\nimport type {\n AsIntrinsicElement,\n
|
1
|
+
{"version":3,"sources":["getSlots.ts"],"sourcesContent":["import * as React from 'react';\nimport { omit } from '../../utils/omit';\nimport type {\n AsIntrinsicElement,\n ComponentState,\n ExtractSlotProps,\n SlotPropsRecord,\n SlotRenderFunction,\n UnknownSlotProps,\n} from '../types';\nimport { isSlot } from '../isSlot';\nimport { SLOT_RENDER_FUNCTION_SYMBOL } from '../constants';\nimport { UnionToIntersection } from '../../utils/types';\n\n/**\n * @deprecated - use slot.always or slot.optional combined with assertSlots instead\n */\nexport type Slots<S extends SlotPropsRecord> = {\n [K in keyof S]: ExtractSlotProps<S[K]> extends AsIntrinsicElement<infer As>\n ? // for slots with an `as` prop, the slot will be any one of the possible values of `as`\n As\n : ExtractSlotProps<S[K]> extends React.ComponentType<infer P>\n ? React.ElementType<NonNullable<P>>\n : React.ElementType<ExtractSlotProps<S[K]>>;\n};\n\n/**\n * @deprecated - use slot.always or slot.optional combined with assertSlots instead\n */\nexport type ObjectSlotProps<S extends SlotPropsRecord> = {\n [K in keyof S]-?: ExtractSlotProps<S[K]> extends AsIntrinsicElement<infer As>\n ? // For intrinsic element types, return the intersection of all possible\n // element's props, to be compatible with the As type returned by Slots<>\n UnionToIntersection<JSX.IntrinsicElements[As]> // Slot<'div', 'span'>\n : ExtractSlotProps<S[K]> extends React.ComponentType<infer P>\n ? P // Slot<typeof Button>\n : ExtractSlotProps<S[K]>; // Slot<ButtonProps>\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 deprecation/deprecation\n slots: Slots<R>;\n // eslint-disable-next-line deprecation/deprecation\n slotProps: ObjectSlotProps<R>;\n} {\n const typeState = state as ComponentState<R>;\n // eslint-disable-next-line deprecation/deprecation\n const slots = {} as Slots<R>;\n const slotProps = {} as R;\n\n // eslint-disable-next-line deprecation/deprecation\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 deprecation/deprecation\n slots[slotName] = slot as Slots<R>[typeof slotName];\n slotProps[slotName] = props;\n }\n // eslint-disable-next-line deprecation/deprecation\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 deprecation/deprecation\n // eslint-disable-next-line deprecation/deprecation\n typeof state.components[slotName] === 'string'\n ? // eslint-disable-next-line deprecation/deprecation\n asProp || state.components?.[slotName] || 'div'\n : // eslint-disable-next-line deprecation/deprecation\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,\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 deprecation/deprecation\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"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,mBAAmB;AASxC,SAASC,MAAM,QAAQ,YAAY;AACnC,SAASC,2BAA2B,QAAQ,eAAe;AA4B3D;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,SAASC,SACdC,KAAc;IAOd,MAAMC,YAAYD;IAClB,mDAAmD;IACnD,MAAME,QAAQ,CAAC;IACf,MAAMC,YAAY,CAAC;IAEnB,mDAAmD;IACnD,MAAMC,YAAyBC,OAAOC,IAAI,CAACL,UAAUM,UAAU;IAC/D,KAAK,MAAMC,YAAYJ,UAAW;QAChC,MAAM,CAACK,MAAMC,MAAM,GAAGC,QAAQV,WAAWO;QACzC,mDAAmD;QACnDN,KAAK,CAACM,SAAS,GAAGC;QAClBN,SAAS,CAACK,SAAS,GAAGE;IACxB;IACA,mDAAmD;IACnD,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,8CAA8C;IAC5F,mDAAmD;IACnD,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,mDAAmD;IACnD,MAAMX,YAAaiB,mBAAmBxB,KAAKc,OAAO;QAAC;KAAK,IAAKA;IAC7D,OAAO;QAACD;QAAMN;KAAU;AAC1B"}
|
@@ -8,15 +8,16 @@ import * as React from 'react';
|
|
8
8
|
* * ❗️❗️ **DO NOT USE IT EXTERNALLY** ❗️❗️
|
9
9
|
*
|
10
10
|
* @deprecated use slot.always or slot.optional combined with assertSlots instead
|
11
|
-
*/ export function getSlotsNext(
|
12
|
-
state
|
11
|
+
*/ export function getSlotsNext(state) {
|
12
|
+
const typedState = state;
|
13
13
|
// eslint-disable-next-line deprecation/deprecation
|
14
14
|
const slots = {};
|
15
15
|
const slotProps = {};
|
16
|
-
|
16
|
+
// eslint-disable-next-line deprecation/deprecation
|
17
|
+
const slotNames = Object.keys(typedState.components);
|
17
18
|
for (const slotName of slotNames){
|
18
19
|
// eslint-disable-next-line deprecation/deprecation
|
19
|
-
const [slot, props] = getSlotNext(
|
20
|
+
const [slot, props] = getSlotNext(typedState, slotName);
|
20
21
|
// eslint-disable-next-line deprecation/deprecation
|
21
22
|
slots[slotName] = slot;
|
22
23
|
slotProps[slotName] = props;
|
@@ -29,8 +30,7 @@ state) {
|
|
29
30
|
}
|
30
31
|
/**
|
31
32
|
* @deprecated use slot.always or slot.optional combined with assertSlots instead
|
32
|
-
*/ function getSlotNext(
|
33
|
-
state, slotName) {
|
33
|
+
*/ function getSlotNext(state, slotName) {
|
34
34
|
var _state_components, _state_components1;
|
35
35
|
const props = state[slotName];
|
36
36
|
if (props === undefined) {
|
@@ -41,7 +41,9 @@ state, slotName) {
|
|
41
41
|
}
|
42
42
|
// TS Error: Property 'as' does not exist on type 'UnknownSlotProps | undefined'.ts(2339)
|
43
43
|
const { as: asProp, ...propsWithoutAs } = props;
|
44
|
-
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 deprecation/deprecation
|
45
|
+
// eslint-disable-next-line deprecation/deprecation
|
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];
|
45
47
|
const shouldOmitAsProp = typeof slot === 'string' && asProp;
|
46
48
|
// eslint-disable-next-line deprecation/deprecation
|
47
49
|
const slotProps = shouldOmitAsProp ? propsWithoutAs : props;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["getSlotsNext.ts"],"sourcesContent":["import * as React from 'react';\nimport type {
|
1
|
+
{"version":3,"sources":["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 deprecation/deprecation\n slots: Slots<R>;\n // eslint-disable-next-line deprecation/deprecation\n slotProps: ObjectSlotProps<R>;\n} {\n const typedState = state as ComponentState<R>;\n // eslint-disable-next-line deprecation/deprecation\n const slots = {} as Slots<R>;\n const slotProps = {} as R;\n\n // eslint-disable-next-line deprecation/deprecation\n const slotNames: (keyof R)[] = Object.keys(typedState.components);\n for (const slotName of slotNames) {\n // eslint-disable-next-line deprecation/deprecation\n const [slot, props] = getSlotNext(typedState, slotName);\n // eslint-disable-next-line deprecation/deprecation\n slots[slotName] = slot as Slots<R>[typeof slotName];\n slotProps[slotName] = props;\n }\n // eslint-disable-next-line deprecation/deprecation\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 deprecation/deprecation\n // eslint-disable-next-line deprecation/deprecation\n typeof state.components[slotName] === 'string'\n ? // eslint-disable-next-line deprecation/deprecation\n asProp || state.components?.[slotName] || 'div'\n : // eslint-disable-next-line deprecation/deprecation\n state.components[slotName]\n ) as React.ElementType<R[K]>;\n\n const shouldOmitAsProp = typeof slot === 'string' && asProp;\n // eslint-disable-next-line deprecation/deprecation\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"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B;;;;;;;;;CASC,GACD,OAAO,SAASC,aACdC,KAAc;IAOd,MAAMC,aAAaD;IACnB,mDAAmD;IACnD,MAAME,QAAQ,CAAC;IACf,MAAMC,YAAY,CAAC;IAEnB,mDAAmD;IACnD,MAAMC,YAAyBC,OAAOC,IAAI,CAACL,WAAWM,UAAU;IAChE,KAAK,MAAMC,YAAYJ,UAAW;QAChC,mDAAmD;QACnD,MAAM,CAACK,MAAMC,MAAM,GAAGC,YAAYV,YAAYO;QAC9C,mDAAmD;QACnDN,KAAK,CAACM,SAAS,GAAGC;QAClBN,SAAS,CAACK,SAAS,GAAGE;IACxB;IACA,mDAAmD;IACnD,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,8CAA8C;IAC5F,mDAAmD;IACnD,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,mDAAmD;IACnD,MAAMX,YAA8Ba,mBAAmBD,iBAAiBL;IAExE,OAAO;QAACD;QAAMN;KAAkB;AAClC"}
|
@@ -6,10 +6,9 @@ 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 deprecation/deprecation
|
11
|
-
export const resolveShorthand = (value, options)
|
12
|
-
slot.optional(value, {
|
11
|
+
export const resolveShorthand = (value, options)=>slot.optional(value, {
|
13
12
|
...options,
|
14
13
|
renderByDefault: options === null || options === void 0 ? void 0 : options.required,
|
15
14
|
// elementType as undefined is the way to identify between a slot and a resolveShorthand call
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["resolveShorthand.ts"],"sourcesContent":["import * as slot from '../slot';\nimport type { SlotShorthandValue,
|
1
|
+
{"version":3,"sources":["resolveShorthand.ts"],"sourcesContent":["import * as slot from '../slot';\nimport type { SlotPropsDataType, 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 SlotPropsDataType = SlotPropsDataType> = {\n <P extends Props>(\n value: P | SlotShorthandValue | undefined,\n // eslint-disable-next-line deprecation/deprecation\n options: ResolveShorthandOptions<P, true>,\n ): WithoutSlotRenderFunction<P>;\n // eslint-disable-next-line deprecation/deprecation\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 deprecation/deprecation\nexport const resolveShorthand: ResolveShorthandFunction<SlotPropsDataType> = (value, options) =>\n slot.optional<SlotPropsDataType>(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<SlotPropsDataType>;\n"],"names":["slot","resolveShorthand","value","options","optional","renderByDefault","required","elementType","undefined"],"mappings":"AAAA,YAAYA,UAAU,UAAU;AAyBhC;;;;;;;;CAQC,GACD,mDAAmD;AACnD,OAAO,MAAMC,mBAAgE,CAACC,OAAOC,UACnFH,KAAKI,QAAQ,CAAoBF,OAAO;QACtC,GAAGC,OAAO;QACVE,eAAe,EAAEF,oBAAAA,8BAAAA,QAASG,QAAQ;QAClC,6FAA6F;QAC7F,yGAAyG;QACzGC,aAAaC;IACf,GAAmD"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["getIntrinsicElementProps.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '../utils/getNativeElementProps';\nimport type { InferredElementRefType, SlotPropsDataType } 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 SlotPropsDataType,\n ExcludedPropKeys extends Extract<keyof Props, string> = never,\n>(\n /** The slot's default element type (e.g. 'div') */\n tagName: NonNullable<Props['as']>,\n /** The component's props object */\n props: Props &
|
1
|
+
{"version":3,"sources":["getIntrinsicElementProps.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '../utils/getNativeElementProps';\nimport type { InferredElementRefType, SlotPropsDataType } 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 SlotPropsDataType,\n ExcludedPropKeys extends Extract<keyof Props, string> = never,\n>(\n /** The slot's default element type (e.g. 'div') */\n tagName: NonNullable<Props['as']>,\n /** The component's props object */\n props: Props & React.RefAttributes<InferredElementRefType<Props>>,\n /** List of native props to exclude from the returned value */\n excludedPropNames?: ExcludedPropKeys[],\n) => {\n // eslint-disable-next-line deprecation/deprecation\n return getNativeElementProps<\n DistributiveOmit<Props, Exclude<keyof Props, keyof HTMLAttributes | keyof SlotPropsDataType> | ExcludedPropKeys>\n >(props.as ?? tagName, props, excludedPropNames);\n};\n"],"names":["React","getNativeElementProps","getIntrinsicElementProps","tagName","props","excludedPropNames","as"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,iCAAiC;AAOvE;;;;;CAKC,GACD,OAAO,MAAMC,2BAA2B,CAItC,iDAAiD,GACjDC,SACA,iCAAiC,GACjCC,OACA,4DAA4D,GAC5DC;QAKED;IAHF,mDAAmD;IACnD,OAAOH,sBAELG,CAAAA,YAAAA,MAAME,EAAE,cAARF,uBAAAA,YAAYD,SAASC,OAAOC;AAChC,EAAE"}
|
package/lib/compose/slot.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["slot.ts"],"sourcesContent":["import type {\n AsIntrinsicElement,\n SlotComponentType,\n SlotRenderFunction,\n SlotShorthandValue,\n SlotPropsDataType,\n} from './types';\nimport * as React from 'react';\nimport { SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from './constants';\n\nexport type SlotOptions<Props extends SlotPropsDataType> = {\n elementType:\n | React.ComponentType<Props>\n | (Props extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);\n defaultProps?: Partial<Props>;\n};\n\n/**\n * Creates a slot from a slot shorthand or properties (`props.SLOT_NAME` or `props` itself)\n * @param value - the value of the slot, it can be a slot shorthand, a slot component or a slot properties\n * @param options - values you can pass to alter the signature of a slot, those values are:\n *\n * * `elementType` - the base element type of a slot, defaults to `'div'`\n * * `defaultProps` - similar to a React component declaration, you can provide a slot default properties to be merged with the shorthand/properties provided.\n */\nexport function always<Props extends SlotPropsDataType>(\n value: Props | SlotShorthandValue | undefined,\n options: SlotOptions<Props>,\n): SlotComponentType<Props> {\n const { defaultProps, elementType } = options;\n\n const props = resolveShorthand(value);\n\n /**\n * Casting is required here as SlotComponentType is a function, not an object.\n * Although SlotComponentType has a function signature, it is still just an object.\n * This is required to make a slot callable (JSX compatible), this is the exact same approach\n * that is used on `@types/react` components\n */\n const propsWithMetadata = {\n ...defaultProps,\n ...props,\n [SLOT_ELEMENT_TYPE_SYMBOL]: elementType,\n } as SlotComponentType<Props>;\n\n if (props && typeof props.children === 'function') {\n propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = props.children as SlotRenderFunction<Props>;\n propsWithMetadata.children = defaultProps?.children;\n }\n\n return propsWithMetadata;\n}\n\n/**\n * Creates a slot from a slot shorthand or properties (`props.SLOT_NAME` or `props` itself)\n * @param value - the value of the slot, it can be a slot shorthand, a slot component or a slot properties\n * @param options - values you can pass to alter the signature of a slot, those values are:\n *\n * * `elementType` - the base element type of a slot, defaults to `'div'`\n * * `defaultProps` - similar to a React component declaration, you can provide a slot default properties to be merged with the shorthand/properties provided\n * * `renderByDefault` - a boolean that indicates if a slot will be rendered even if it's base value is `undefined`.\n * By default if `props.SLOT_NAME` is `undefined` then `state.SLOT_NAME` becomes `undefined`\n * and nothing will be rendered, but if `renderByDefault = true` then `state.SLOT_NAME` becomes an object\n * with the values provided by `options.defaultProps` (or `{}`). This is useful for cases such as providing a default content\n * in case no shorthand is provided, like the case of the `expandIcon` slot for the `AccordionHeader`\n */\nexport function optional<Props extends SlotPropsDataType>(\n value: Props | SlotShorthandValue | undefined | null,\n options: { renderByDefault?: boolean } & SlotOptions<Props>,\n): SlotComponentType<Props> | undefined {\n if (value === null || (value === undefined && !options.renderByDefault)) {\n return undefined;\n }\n return always(value, options);\n}\n\n/**\n * Helper function that converts a slot shorthand or properties to a slot properties object\n * The main difference between this function and `slot` is that this function does not return the metadata required for a slot to be considered a properly renderable slot, it only converts the value to a slot properties object\n * @param value - the value of the slot, it can be a slot shorthand or a slot properties object\n */\nexport function resolveShorthand<Props extends SlotPropsDataType | null | undefined>(\n value: Props | SlotShorthandValue,\n): Props {\n if (\n typeof value === 'string' ||\n typeof value === 'number' ||\n isIterable(value) ||\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n React.isValidElement<any>(value)\n ) {\n return { children: value } as Props;\n }\n if (value && typeof value !== 'object' && process.env.NODE_ENV !== 'production') {\n // TODO: would be nice to have a link to slot documentation in this error message\n // eslint-disable-next-line no-console\n console.error(/** #__DE-INDENT__ */ `\n @fluentui/react-utilities [slot.${resolveShorthand.name}]:\n A slot got an invalid value \"${value}\" (${typeof value}).\n A valid value for a slot is a slot shorthand or slot properties object.\n Slot shorthands can be strings, numbers, arrays or JSX elements\n `);\n }\n\n return value;\n}\n\nconst isIterable = (value: unknown): value is Iterable<unknown> =>\n typeof value === 'object' && value !== null && Symbol.iterator in value;\n"],"names":["React","SLOT_ELEMENT_TYPE_SYMBOL","SLOT_RENDER_FUNCTION_SYMBOL","always","value","options","defaultProps","elementType","props","resolveShorthand","propsWithMetadata","children","optional","undefined","renderByDefault","isIterable","isValidElement","process","env","NODE_ENV","console","error","name","Symbol","iterator"],"mappings":"
|
1
|
+
{"version":3,"sources":["slot.ts"],"sourcesContent":["import type {\n AsIntrinsicElement,\n SlotComponentType,\n SlotRenderFunction,\n SlotShorthandValue,\n SlotPropsDataType,\n InferredElementRefType,\n} from './types';\nimport * as React from 'react';\nimport { SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from './constants';\n\nexport type SlotOptions<Props extends SlotPropsDataType> = {\n elementType:\n | React.ComponentType<Props>\n | (Props extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);\n defaultProps?: Partial<Props & { ref?: React.Ref<InferredElementRefType<Props>> }>;\n};\n\n/**\n * Creates a slot from a slot shorthand or properties (`props.SLOT_NAME` or `props` itself)\n * @param value - the value of the slot, it can be a slot shorthand, a slot component or a slot properties\n * @param options - values you can pass to alter the signature of a slot, those values are:\n *\n * * `elementType` - the base element type of a slot, defaults to `'div'`\n * * `defaultProps` - similar to a React component declaration, you can provide a slot default properties to be merged with the shorthand/properties provided.\n */\nexport function always<Props extends SlotPropsDataType>(\n value: Props | SlotShorthandValue | undefined,\n options: SlotOptions<Props>,\n): SlotComponentType<Props> {\n const { defaultProps, elementType } = options;\n\n const props = resolveShorthand(value);\n\n /**\n * Casting is required here as SlotComponentType is a function, not an object.\n * Although SlotComponentType has a function signature, it is still just an object.\n * This is required to make a slot callable (JSX compatible), this is the exact same approach\n * that is used on `@types/react` components\n */\n const propsWithMetadata = {\n ...defaultProps,\n ...props,\n [SLOT_ELEMENT_TYPE_SYMBOL]: elementType,\n } as SlotComponentType<Props>;\n\n if (props && typeof props.children === 'function') {\n propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = props.children as SlotRenderFunction<Props>;\n propsWithMetadata.children = defaultProps?.children;\n }\n\n return propsWithMetadata;\n}\n\n/**\n * Creates a slot from a slot shorthand or properties (`props.SLOT_NAME` or `props` itself)\n * @param value - the value of the slot, it can be a slot shorthand, a slot component or a slot properties\n * @param options - values you can pass to alter the signature of a slot, those values are:\n *\n * * `elementType` - the base element type of a slot, defaults to `'div'`\n * * `defaultProps` - similar to a React component declaration, you can provide a slot default properties to be merged with the shorthand/properties provided\n * * `renderByDefault` - a boolean that indicates if a slot will be rendered even if it's base value is `undefined`.\n * By default if `props.SLOT_NAME` is `undefined` then `state.SLOT_NAME` becomes `undefined`\n * and nothing will be rendered, but if `renderByDefault = true` then `state.SLOT_NAME` becomes an object\n * with the values provided by `options.defaultProps` (or `{}`). This is useful for cases such as providing a default content\n * in case no shorthand is provided, like the case of the `expandIcon` slot for the `AccordionHeader`\n */\nexport function optional<Props extends SlotPropsDataType>(\n value: Props | SlotShorthandValue | undefined | null,\n options: { renderByDefault?: boolean } & SlotOptions<Props>,\n): SlotComponentType<Props> | undefined {\n if (value === null || (value === undefined && !options.renderByDefault)) {\n return undefined;\n }\n return always(value, options);\n}\n\n/**\n * Helper function that converts a slot shorthand or properties to a slot properties object\n * The main difference between this function and `slot` is that this function does not return the metadata required for a slot to be considered a properly renderable slot, it only converts the value to a slot properties object\n * @param value - the value of the slot, it can be a slot shorthand or a slot properties object\n */\nexport function resolveShorthand<Props extends SlotPropsDataType | null | undefined>(\n value: Props | SlotShorthandValue,\n): Props {\n if (\n typeof value === 'string' ||\n typeof value === 'number' ||\n isIterable(value) ||\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n React.isValidElement<any>(value)\n ) {\n return { children: value } as Props;\n }\n if (value && typeof value !== 'object' && process.env.NODE_ENV !== 'production') {\n // TODO: would be nice to have a link to slot documentation in this error message\n // eslint-disable-next-line no-console\n console.error(/** #__DE-INDENT__ */ `\n @fluentui/react-utilities [slot.${resolveShorthand.name}]:\n A slot got an invalid value \"${value}\" (${typeof value}).\n A valid value for a slot is a slot shorthand or slot properties object.\n Slot shorthands can be strings, numbers, arrays or JSX elements\n `);\n }\n\n return value;\n}\n\nconst isIterable = (value: unknown): value is Iterable<unknown> =>\n typeof value === 'object' && value !== null && Symbol.iterator in value;\n"],"names":["React","SLOT_ELEMENT_TYPE_SYMBOL","SLOT_RENDER_FUNCTION_SYMBOL","always","value","options","defaultProps","elementType","props","resolveShorthand","propsWithMetadata","children","optional","undefined","renderByDefault","isIterable","isValidElement","process","env","NODE_ENV","console","error","name","Symbol","iterator"],"mappings":"AAQA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,2BAA2B,QAAQ,cAAc;AASpF;;;;;;;CAOC,GACD,OAAO,SAASC,OACdC,KAA6C,EAC7CC,OAA2B;IAE3B,MAAM,EAAEC,YAAY,EAAEC,WAAW,EAAE,GAAGF;IAEtC,MAAMG,QAAQC,iBAAiBL;IAE/B;;;;;GAKC,GACD,MAAMM,oBAAoB;QACxB,GAAGJ,YAAY;QACf,GAAGE,KAAK;QACR,CAACP,yBAAyB,EAAEM;IAC9B;IAEA,IAAIC,SAAS,OAAOA,MAAMG,QAAQ,KAAK,YAAY;QACjDD,iBAAiB,CAACR,4BAA4B,GAAGM,MAAMG,QAAQ;QAC/DD,kBAAkBC,QAAQ,GAAGL,yBAAAA,mCAAAA,aAAcK,QAAQ;IACrD;IAEA,OAAOD;AACT;AAEA;;;;;;;;;;;;CAYC,GACD,OAAO,SAASE,SACdR,KAAoD,EACpDC,OAA2D;IAE3D,IAAID,UAAU,QAASA,UAAUS,aAAa,CAACR,QAAQS,eAAe,EAAG;QACvE,OAAOD;IACT;IACA,OAAOV,OAAOC,OAAOC;AACvB;AAEA;;;;CAIC,GACD,OAAO,SAASI,iBACdL,KAAiC;IAEjC,IACE,OAAOA,UAAU,YACjB,OAAOA,UAAU,YACjBW,WAAWX,UACX,8DAA8D;IAC9DJ,MAAMgB,cAAc,CAAMZ,QAC1B;QACA,OAAO;YAAEO,UAAUP;QAAM;IAC3B;IACA,IAAIA,SAAS,OAAOA,UAAU,YAAYa,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QAC/E,iFAAiF;QACjF,sCAAsC;QACtCC,QAAQC,KAAK,CAAuB,CAAC,gCACH,EAAEZ,iBAAiBa,IAAI,CAAC;6BAC3B,EAAElB,MAAM,GAAG,EAAE,OAAOA,MAAM;;+DAGzD,CAAC;IACH;IAEA,OAAOA;AACT;AAEA,MAAMW,aAAa,CAACX,QAClB,OAAOA,UAAU,YAAYA,UAAU,QAAQmB,OAAOC,QAAQ,IAAIpB"}
|
package/lib/compose/types.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["types.ts"],"sourcesContent":["import * as React from 'react';\nimport { SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from './constants';\nimport { DistributiveOmit, ReplaceNullWithUndefined } from '../utils/types';\n\nexport type SlotPropsDataType = {\n as?: keyof JSX.IntrinsicElements;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n children?: any;\n};\n\nexport type SlotRenderFunction<Props> = (\n Component: React.ElementType<Props>,\n props: Omit<Props, 'as'>,\n) => React.ReactNode;\n\n/**\n * Matches any component's Slots type (such as ButtonSlots).\n *\n * This should ONLY be used in type templates as in `extends SlotPropsRecord`;\n * it shouldn't be used as a component's Slots type.\n */\nexport type SlotPropsRecord = Record<string, SlotPropsDataType | SlotShorthandValue | null | undefined>;\n\n/**\n * The shorthand value of a slot allows specifying its child\n */\nexport type SlotShorthandValue = React.ReactElement | string | number | Iterable<React.ReactNode> | React.ReactPortal;\n\n/**\n * @deprecated - SlotPropsDataType instead\n * Matches any slot props type.\n *\n * This should ONLY be used in type templates as in `extends UnknownSlotProps`;\n * it shouldn't be used as the type of a slot.\n */\nexport type UnknownSlotProps = Pick<React.HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'> & {\n as?: keyof JSX.IntrinsicElements;\n};\n\n/**\n * Helper type for {@link Slot}. Adds shorthand types that are assignable to the slot's `children`.\n */\ntype WithSlotShorthandValue<Props extends { children?: unknown }> =\n | Props\n | Extract<SlotShorthandValue, Props['children']>;\n\n/**\n * Helper type for {@link Slot}. Takes the props we want to support for a slot and adds the ability for `children`\n * to be a render function that takes those props.\n */\ntype WithSlotRenderFunction<Props> = Omit<Props, 'children'> & {\n children?: ('children' extends keyof Props ? Props['children'] : never) | SlotRenderFunction<Props>;\n};\n\ntype WithoutSlotRenderFunction<Props> = Props extends unknown\n ? 'children' extends keyof Props\n ? Omit<Props, 'children'> & { children?: Exclude<Props['children'], Function> }\n : Props\n : never;\n\n/**\n * HTML element types that are not allowed to have children.\n *\n * Reference: https://developer.mozilla.org/en-US/docs/Glossary/Empty_element\n */\ntype EmptyIntrinsicElements =\n | 'area'\n | 'base'\n | 'br'\n | 'col'\n | 'embed'\n | 'hr'\n | 'img'\n | 'input'\n | 'link'\n | 'meta'\n | 'param'\n | 'source'\n | 'track'\n | 'wbr';\n\n/**\n * Helper type for {@link Slot}. Modifies `JSX.IntrinsicElements[Type]`:\n * * Removes legacy string ref.\n * * Disallows children for empty tags like 'img'.\n */\ntype IntrinsicElementProps<Type extends keyof JSX.IntrinsicElements> = Type extends EmptyIntrinsicElements\n ? PropsWithoutChildren<React.PropsWithRef<JSX.IntrinsicElements[Type]>>\n : React.PropsWithRef<JSX.IntrinsicElements[Type]>;\n\n/**\n * The props type and shorthand value for a slot. Type is either a single intrinsic element like `'div'`,\n * or a component like `typeof Button`.\n *\n * If a slot needs to support multiple intrinsic element types, use the `AlternateAs` param (see examples below).\n *\n * By default, slots can be set to `null` to prevent them from being rendered. If a slot must always be rendered,\n * wrap with `NonNullable` (see examples below).\n *\n * @example\n * ```\n * // Intrinsic element examples:\n * Slot<'div'> // Slot is always div\n * Slot<'button', 'a'> // Defaults to button, but allows as=\"a\" with anchor-specific props\n * Slot<'span', 'div' | 'pre'> // Defaults to span, but allows as=\"div\" or as=\"pre\"\n * NonNullable<Slot<'div'>> // Slot that will always be rendered (can't be set to null by the user)\n *\n * // Component examples:\n * Slot<typeof Button> // Slot is always a Button, and accepts all of Button's Props\n * NonNullable<Slot<typeof Label>> // Slot is a Label and will always be rendered (can't be set to null by the user)\n * ```\n */\nexport type Slot<\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n Type extends keyof JSX.IntrinsicElements | React.ComponentType<any> | SlotPropsDataType,\n AlternateAs extends keyof JSX.IntrinsicElements = never,\n> = IsSingleton<Extract<Type, string>> extends true\n ?\n | WithSlotShorthandValue<\n Type extends keyof JSX.IntrinsicElements // Intrinsic elements like `div`\n ? { as?: Type } & WithSlotRenderFunction<IntrinsicElementProps<Type>>\n : Type extends React.ComponentType<infer Props> // Component types like `typeof Button`\n ? Props extends SlotPropsDataType\n ? Props\n : WithSlotRenderFunction<Props>\n : Type // Props types like `ButtonProps`\n >\n | (AlternateAs extends unknown\n ? { as: AlternateAs } & WithSlotRenderFunction<IntrinsicElementProps<AlternateAs>>\n : never)\n | null\n : 'Error: First parameter to Slot must not be not a union of types. See documentation of Slot type.';\n\n/**\n * Evaluates to true if the given type contains exactly one string, or false if it is a union of strings.\n *\n * ```\n * IsSingleton<'a'> // true\n * IsSingleton<'a' | 'b' | 'c'> // false\n * ```\n */\nexport type IsSingleton<T extends string> = { [K in T]: Exclude<T, K> extends never ? true : false }[T];\n\n/**\n * Helper type for inferring the type of the as prop from a Props type.\n *\n * For example:\n * ```\n * type Example<T> = T extends AsIntrinsicElement<infer As> ? As : never;\n * ```\n */\nexport type AsIntrinsicElement<As extends keyof JSX.IntrinsicElements> = { as?: As };\n\n/**\n * Removes the 'ref' prop from the given Props type, leaving unions intact (such as the discriminated union created by\n * IntrinsicSlotProps). This allows IntrinsicSlotProps to be used with React.forwardRef.\n *\n * The conditional \"extends unknown\" (always true) exploits a quirk in the way TypeScript handles conditional\n * types, to prevent unions from being expanded.\n */\nexport type PropsWithoutRef<P> = 'ref' extends keyof P ? DistributiveOmit<P, 'ref'> : P;\n\n/**\n * Removes the 'ref' prop from the given Props type, leaving unions intact (such as the discriminated union created by\n * IntrinsicSlotProps). This allows IntrinsicSlotProps to be used with React.forwardRef.\n *\n * The conditional \"extends unknown\" (always true) exploits a quirk in the way TypeScript handles conditional\n * types, to prevent unions from being expanded.\n */\nexport type PropsWithoutChildren<P> = 'children' extends keyof P ? DistributiveOmit<P, 'children'> : P;\n\n/**\n * Removes SlotShorthandValue and null from the slot type, extracting just the slot's Props object.\n */\nexport type ExtractSlotProps<S> = Exclude<S, SlotShorthandValue | null | undefined>;\n\n/**\n * Defines the Props type for a component given its slots and the definition of which one is the primary slot,\n * defaulting to root if one is not provided.\n */\nexport type ComponentProps<Slots extends SlotPropsRecord, Primary extends keyof Slots = 'root'> =\n // Include a prop for each slot (see note below about the Omit)\n Omit<Slots, Primary & 'root'> &\n // Include all of the props of the primary slot inline in the component's props\n PropsWithoutRef<WithoutSlotRenderFunction<ExtractSlotProps<Slots[Primary]>>>;\n\n// Note: the `Omit<Slots, Primary & 'root'>` above is a little tricky. Here's what it's doing:\n// * If the Primary slot is 'root', then omit the `root` slot prop.\n// * Otherwise, don't omit any props: include *both* the Primary and `root` props.\n// We need both props to allow the user to specify native props for either slot because the `root` slot is\n// special and always gets className and style props, per RFC https://github.com/microsoft/fluentui/pull/18983\n\n/**\n * Defines the State object of a component given its slots.\n */\nexport type ComponentState<Slots extends SlotPropsRecord> = {\n components: {\n [Key in keyof Slots]-?:\n | React.ComponentType<ExtractSlotProps<Slots[Key]>>\n | (ExtractSlotProps<Slots[Key]> extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);\n };\n} & {\n // Include a prop for each slot, with the shorthand resolved to a props object\n // The root slot can never be null, so also exclude null from it\n [Key in keyof Slots]: ReplaceNullWithUndefined<\n WithoutSlotRenderFunction<Exclude<Slots[Key], SlotShorthandValue | (Key extends 'root' ? null : never)>>\n >;\n};\n\n/**\n * @deprecated\n *\n * on the new API, the `ComponentState` expects to be used together with `slot.always` or `slot.optional` to define the slot's declaration on the state. Those methods ensure that the slot is properly defined.\n *\n * This is not true for the legacy API, where the slots are defined directly on the state object. This type is used to define the state object for the legacy API.\n */\nexport type LegacyComponentState<Slots extends SlotPropsRecord> = {\n components: {\n [Key in keyof Slots]-?:\n | React.ComponentType<WithoutSlotRenderFunction<ExtractSlotProps<Slots[Key]>>>\n | (ExtractSlotProps<Slots[Key]> extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);\n };\n} & {\n // Include a prop for each slot, with the shorthand resolved to a props object\n // The root slot can never be null, so also exclude null from it\n [Key in keyof Slots]: ReplaceNullWithUndefined<\n Exclude<Slots[Key], SlotShorthandValue | (Key extends 'root' ? null : never)>\n >;\n};\n\n/**\n * This is part of a hack to infer the element type from a native element *props* type.\n * The only place the original element is found in a native props type (at least that's workable\n * for inference) is in the event handlers, so some of the helper types use this event handler\n * name to infer the original element type.\n *\n * Notes:\n * - Using an extremely obscure event handler reduces the likelihood that its signature will be\n * modified in any component's props.\n * - Inferring based on a single prop name instead of a larger type like `DOMAttributes<T>` should be\n * less expensive for typescript to evaluate and is less likely to result in type expansion in .d.ts.\n */\ntype ObscureEventName = 'onLostPointerCaptureCapture';\n\n/**\n * Infers the element type from props that are declared using ComponentProps.\n */\nexport type InferredElementRefType<Props> = ObscureEventName extends keyof Props\n ? Required<Props>[ObscureEventName] extends React.PointerEventHandler<infer Element>\n ? Element\n : never\n : never;\n\n/**\n * Return type for `React.forwardRef`, including inference of the proper typing for the ref.\n */\nexport type ForwardRefComponent<Props> = React.ForwardRefExoticComponent<\n Props & { ref?: React.Ref<InferredElementRefType<Props>> }\n>;\n// A definition like this would also work, but typescript is more likely to unnecessarily expand\n// the props type with this version (and it's likely much more expensive to evaluate)\n// export type ForwardRefComponent<Props> = Props extends React.DOMAttributes<infer Element>\n// ? React.ForwardRefExoticComponent<Props> & React.RefAttributes<Element>\n// : never;\n\n/**\n * Helper type to correctly define the slot class names object.\n */\nexport type SlotClassNames<Slots> = {\n [SlotName in keyof Slots]-?: string;\n};\n\n/**\n * A definition of a slot, as a component, very similar to how a React component is declared,\n * but with some additional metadata that is used to determine how to render the slot.\n */\nexport type SlotComponentType<Props extends SlotPropsDataType> = WithoutSlotRenderFunction<Props> & {\n /**\n * **NOTE**: Slot components are not callable.\n */\n (props: React.PropsWithChildren<{}>): React.ReactElement | null;\n /**\n * @internal\n */\n [SLOT_RENDER_FUNCTION_SYMBOL]?: SlotRenderFunction<Props>;\n /**\n * @internal\n */\n [SLOT_ELEMENT_TYPE_SYMBOL]:\n | React.ComponentType<Props>\n | (Props extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);\n};\n\n/**\n * Data type for event handlers. It makes data a discriminated union, where each object requires `event` and `type` property.\n * - `event` is the specific event type\n * - `type` is a string literal. It serves as a clear identifier of the event type that reflects the component's state when the event occurred.\n * For example, the Tree component's `onNavigation` event handler has different `type` for different key presses: `{ event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight } | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }`.\n * Developers can use the `type` property to identify and filter events of interest.\n * See RFC event-handlers-event-type.md for more details.\n *\n * Example usage:\n * type OnOpenChangeData = (\n * | EventData\\<'click', React.MouseEvent\\<MyComponentElement\\>\\>\n * | EventData\\<'keydown', React.KeyboardEvent\\<MyComponentElement\\>\\>\n * ) & \\{ open: boolean; \\};\n */\nexport type EventData<Type extends string, TEvent> =\n | { type: undefined; event: React.SyntheticEvent | Event }\n | { type: Type; event: TEvent };\n\n/**\n * Type for props that are event handlers.\n * See RFC event-handlers-event-type.md for more details.\n *\n * Example usage:\n * type OnSomeEventData = EventData\\<'click', React.MouseEvent\\<MyComponentElement\\>\\> & \\{ open: boolean; \\};\n * type SomeProps = \\{ onSomeEvent?: EventHandler\\<OnSomeEventData\\>; \\};\n */\nexport type EventHandler<TData extends EventData<string, unknown>> = (\n ev: React.SyntheticEvent | Event,\n data: TData,\n) => void;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
|
1
|
+
{"version":3,"sources":["types.ts"],"sourcesContent":["import * as React from 'react';\nimport { SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from './constants';\nimport {\n ComponentType,\n DistributiveOmit,\n FunctionComponent,\n ReactNode,\n ReplaceNullWithUndefined,\n} from '../utils/types';\n\n/**\n * @internal\n *\n * This should ONLY be used in type templates as in `extends SlotPropsDataType`;\n * it shouldn't be used as a component's Slot props type.\n */\nexport type SlotPropsDataType = {\n as?: keyof JSX.IntrinsicElements;\n children?: ReactNode;\n};\n\nexport type SlotRenderFunction<Props> = (Component: React.ElementType<Props>, props: Omit<Props, 'as'>) => ReactNode;\n\n/**\n * Matches any component's Slots type (such as ButtonSlots).\n *\n * This should ONLY be used in type templates as in `extends SlotPropsRecord`;\n * it shouldn't be used as a component's Slots type.\n */\nexport type SlotPropsRecord = Record<string, SlotPropsDataType | SlotShorthandValue | null | undefined>;\n\n/**\n * The shorthand value of a slot allows specifying its child\n */\nexport type SlotShorthandValue = React.ReactElement | string | number | Iterable<ReactNode> | React.ReactPortal;\n\n/**\n * @deprecated - SlotPropsDataType instead\n * Matches any slot props type.\n *\n * This should ONLY be used in type templates as in `extends UnknownSlotProps`;\n * it shouldn't be used as the type of a slot.\n */\nexport type UnknownSlotProps = Pick<React.HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'> & {\n as?: keyof JSX.IntrinsicElements;\n};\n\n/**\n * Helper type for {@link Slot}. Adds shorthand types that are assignable to the slot's `children`.\n */\ntype WithSlotShorthandValue<Props extends { children?: unknown }> =\n | Props\n | Extract<SlotShorthandValue, Props['children']>;\n\n/**\n * @internal\n * Helper type for {@link Slot}. Takes the props we want to support for a slot and adds the ability for `children`\n * to be a render function that takes those props.\n */\nexport type WithSlotRenderFunction<Props> = Omit<Props, 'children'> & {\n children?: ('children' extends keyof Props ? Props['children'] : never) | SlotRenderFunction<Props>;\n};\n\n/**\n * @internal\n */\nexport type WithoutSlotRenderFunction<Props> = Props extends unknown\n ? 'children' extends keyof Props\n ? Omit<Props, 'children'> & { children?: Exclude<Props['children'], Function> }\n : Props\n : never;\n\n/**\n * HTML element types that are not allowed to have children.\n *\n * Reference: https://developer.mozilla.org/en-US/docs/Glossary/Empty_element\n */\ntype EmptyIntrinsicElements =\n | 'area'\n | 'base'\n | 'br'\n | 'col'\n | 'embed'\n | 'hr'\n | 'img'\n | 'input'\n | 'link'\n | 'meta'\n | 'param'\n | 'source'\n | 'track'\n | 'wbr';\n\n/**\n * Helper type for {@link Slot}. Modifies `JSX.IntrinsicElements[Type]`:\n * * Removes legacy string ref.\n * * Disallows children for empty tags like 'img'.\n */\ntype IntrinsicElementProps<Type extends keyof JSX.IntrinsicElements> = Type extends EmptyIntrinsicElements\n ? PropsWithoutChildren<React.PropsWithRef<JSX.IntrinsicElements[Type]>>\n : React.PropsWithRef<JSX.IntrinsicElements[Type]>;\n\n/**\n * The props type and shorthand value for a slot. Type is either a single intrinsic element like `'div'`,\n * or a component like `typeof Button`.\n *\n * If a slot needs to support multiple intrinsic element types, use the `AlternateAs` param (see examples below).\n *\n * By default, slots can be set to `null` to prevent them from being rendered. If a slot must always be rendered,\n * wrap with `NonNullable` (see examples below).\n *\n * @example\n * ```\n * // Intrinsic element examples:\n * Slot<'div'> // Slot is always div\n * Slot<'button', 'a'> // Defaults to button, but allows as=\"a\" with anchor-specific props\n * Slot<'span', 'div' | 'pre'> // Defaults to span, but allows as=\"div\" or as=\"pre\"\n * NonNullable<Slot<'div'>> // Slot that will always be rendered (can't be set to null by the user)\n *\n * // Component examples:\n * Slot<typeof Button> // Slot is always a Button, and accepts all of Button's Props\n * NonNullable<Slot<typeof Label>> // Slot is a Label and will always be rendered (can't be set to null by the user)\n * ```\n */\nexport type Slot<\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n Type extends keyof JSX.IntrinsicElements | ComponentType<any> | SlotPropsDataType,\n AlternateAs extends keyof JSX.IntrinsicElements = never,\n> = IsSingleton<Extract<Type, string>> extends true\n ?\n | WithSlotShorthandValue<\n Type extends keyof JSX.IntrinsicElements // Intrinsic elements like `div`\n ? { as?: Type } & WithSlotRenderFunction<IntrinsicElementProps<Type>>\n : Type extends ComponentType<infer Props> // Component types like `typeof Button`\n ? Props extends SlotPropsDataType\n ? Props\n : WithSlotRenderFunction<Props>\n : Type // Props types like `ButtonProps`\n >\n | (AlternateAs extends unknown\n ? { as: AlternateAs } & WithSlotRenderFunction<IntrinsicElementProps<AlternateAs>>\n : never)\n | null\n : 'Error: First parameter to Slot must not be not a union of types. See documentation of Slot type.';\n\n/**\n * Evaluates to true if the given type contains exactly one string, or false if it is a union of strings.\n *\n * ```\n * IsSingleton<'a'> // true\n * IsSingleton<'a' | 'b' | 'c'> // false\n * ```\n */\nexport type IsSingleton<T extends string> = { [K in T]: Exclude<T, K> extends never ? true : false }[T];\n\n/**\n * Helper type for inferring the type of the as prop from a Props type.\n *\n * For example:\n * ```\n * type Example<T> = T extends AsIntrinsicElement<infer As> ? As : never;\n * ```\n */\nexport type AsIntrinsicElement<As extends keyof JSX.IntrinsicElements> = { as?: As };\n\n/**\n * Removes the 'ref' prop from the given Props type, leaving unions intact (such as the discriminated union created by\n * IntrinsicSlotProps). This allows IntrinsicSlotProps to be used with React.forwardRef.\n *\n * The conditional \"extends unknown\" (always true) exploits a quirk in the way TypeScript handles conditional\n * types, to prevent unions from being expanded.\n */\nexport type PropsWithoutRef<P> = 'ref' extends keyof P ? DistributiveOmit<P, 'ref'> : P;\n\n/**\n * Removes the 'ref' prop from the given Props type, leaving unions intact (such as the discriminated union created by\n * IntrinsicSlotProps). This allows IntrinsicSlotProps to be used with React.forwardRef.\n *\n * The conditional \"extends unknown\" (always true) exploits a quirk in the way TypeScript handles conditional\n * types, to prevent unions from being expanded.\n */\nexport type PropsWithoutChildren<P> = 'children' extends keyof P ? DistributiveOmit<P, 'children'> : P;\n\n/**\n * Removes SlotShorthandValue and null from the slot type, extracting just the slot's Props object.\n */\nexport type ExtractSlotProps<S> = Exclude<S, SlotShorthandValue | null | undefined>;\n\n/**\n * Defines the Props type for a component given its slots and the definition of which one is the primary slot,\n * defaulting to root if one is not provided.\n */\nexport type ComponentProps<Slots extends SlotPropsRecord, Primary extends keyof Slots = 'root'> =\n // Include a prop for each slot (see note below about the Omit)\n // Note: the `Omit<Slots, Primary & 'root'>` here is a little tricky. Here's what it's doing:\n // * If the Primary slot is 'root', then omit the `root` slot prop.\n // * Otherwise, don't omit any props: include *both* the Primary and `root` props.\n // We need both props to allow the user to specify native props for either slot because the `root` slot is\n // special and always gets className and style props, per RFC https://github.com/microsoft/fluentui/pull/18983\n Omit<Slots, Primary & 'root'> &\n // Include all of the props of the primary slot inline in the component's props\n PropsWithoutRef<WithoutSlotRenderFunction<ExtractSlotProps<Slots[Primary]>>>;\n\n/**\n * Defines the State object of a component given its slots.\n */\nexport type ComponentState<Slots extends SlotPropsRecord> = {\n /**\n * @deprecated\n * The base element type for each slot.\n * This property is deprecated and will be removed in a future version.\n * The slot base element type is declared through `slot.*(slotShorthand, {elementType: ElementType})` instead.\n */\n components: {\n [Key in keyof Slots]-?: React.ElementType;\n };\n} & {\n // Include a prop for each slot, with the shorthand resolved to a props object\n // The root slot can never be null, so also exclude null from it\n [Key in keyof Slots]: ReplaceNullWithUndefined<\n WithoutSlotRenderFunction<Exclude<Slots[Key], SlotShorthandValue | (Key extends 'root' ? null : never)>>\n >;\n};\n\n/**\n * This is part of a hack to infer the element type from a native element *props* type.\n * The only place the original element is found in a native props type (at least that's workable\n * for inference) is in the event handlers, so some of the helper types use this event handler\n * name to infer the original element type.\n *\n * Notes:\n * - Using an extremely obscure event handler reduces the likelihood that its signature will be\n * modified in any component's props.\n * - Inferring based on a single prop name instead of a larger type like `DOMAttributes<T>` should be\n * less expensive for typescript to evaluate and is less likely to result in type expansion in .d.ts.\n */\ntype ObscureEventName = 'onLostPointerCaptureCapture';\n\n/**\n * Infers the element type from props that are declared using ComponentProps.\n */\nexport type InferredElementRefType<Props> = ObscureEventName extends keyof Props\n ? Required<Props>[ObscureEventName] extends React.PointerEventHandler<infer Element>\n ? Element\n : never\n : never;\n\n/**\n * Return type for `React.forwardRef`, including inference of the proper typing for the ref.\n *\n * Note: {@link React.RefAttributes} is {@link https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/69756 | leaking string references} into forwardRef components, forwardRef component do not support string refs.\n */\nexport type ForwardRefComponent<Props> = FunctionComponent<Props & React.RefAttributes<InferredElementRefType<Props>>>;\n\n/**\n * Helper type to correctly define the slot class names object.\n */\nexport type SlotClassNames<Slots> = {\n [SlotName in keyof Slots]-?: string;\n};\n\n/**\n * A definition of a slot, as a component, very similar to how a React component is declared,\n * but with some additional metadata that is used to determine how to render the slot.\n */\nexport type SlotComponentType<Props extends SlotPropsDataType> = WithoutSlotRenderFunction<Props> &\n FunctionComponent<{ children?: ReactNode }> & {\n /**\n * @internal\n */\n [SLOT_RENDER_FUNCTION_SYMBOL]?: SlotRenderFunction<Props>;\n /**\n * @internal\n */\n [SLOT_ELEMENT_TYPE_SYMBOL]:\n | ComponentType<Props>\n | (Props extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);\n };\n\n/**\n * Data type for event handlers. It makes data a discriminated union, where each object requires `event` and `type` property.\n * - `event` is the specific event type\n * - `type` is a string literal. It serves as a clear identifier of the event type that reflects the component's state when the event occurred.\n * For example, the Tree component's `onNavigation` event handler has different `type` for different key presses: `{ event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight } | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }`.\n * Developers can use the `type` property to identify and filter events of interest.\n * See RFC event-handlers-event-type.md for more details.\n *\n * Example usage:\n * type OnOpenChangeData = (\n * | EventData\\<'click', React.MouseEvent\\<MyComponentElement\\>\\>\n * | EventData\\<'keydown', React.KeyboardEvent\\<MyComponentElement\\>\\>\n * ) & \\{ open: boolean; \\};\n */\nexport type EventData<Type extends string, TEvent> =\n | { type: undefined; event: React.SyntheticEvent | Event }\n | { type: Type; event: TEvent };\n\n/**\n * Type for props that are event handlers.\n * See RFC event-handlers-event-type.md for more details.\n *\n * Example usage:\n * type OnSomeEventData = EventData\\<'click', React.MouseEvent\\<MyComponentElement\\>\\> & \\{ open: boolean; \\};\n * type SomeProps = \\{ onSomeEvent?: EventHandler\\<OnSomeEventData\\>; \\};\n */\nexport type EventHandler<TData extends EventData<string, unknown>> = (\n ev: React.SyntheticEvent | Event,\n data: TData,\n) => void;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
|
@@ -19,6 +19,16 @@ function isFactoryDispatch(newState) {
|
|
19
19
|
* Meaning that if a state is `controlled`, calls to the dispatcher do not modify the state.
|
20
20
|
*
|
21
21
|
*/ export const useControllableState = (options)=>{
|
22
|
+
if (process.env.NODE_ENV !== 'production') {
|
23
|
+
if (options.state !== undefined && options.defaultState !== undefined) {
|
24
|
+
// eslint-disable-next-line no-console
|
25
|
+
console.error(`@fluentui/react-utilities [useControllableState]:
|
26
|
+
A component must be either controlled or uncontrolled (specify either the state or the defaultState, but not both).
|
27
|
+
Decide between using a controlled or uncontrolled component and remove one of this props.
|
28
|
+
More info: https://reactjs.org/link/controlled-components
|
29
|
+
${new Error().stack}`);
|
30
|
+
}
|
31
|
+
}
|
22
32
|
const [internalState, setInternalState] = React.useState(()=>{
|
23
33
|
if (options.defaultState === undefined) {
|
24
34
|
return options.initialState;
|
@@ -64,7 +74,7 @@ function isInitializer(value) {
|
|
64
74
|
const controlWarning = isControlled ? 'a controlled value to be uncontrolled' : 'an uncontrolled value to be controlled';
|
65
75
|
const undefinedWarning = isControlled ? 'defined to an undefined' : 'undefined to a defined';
|
66
76
|
// eslint-disable-next-line no-console
|
67
|
-
console.error(`@fluentui/react-utilities [
|
77
|
+
console.error(`@fluentui/react-utilities [useControllableState]:
|
68
78
|
A component is changing ${controlWarning}. This is likely caused by the value changing from ${undefinedWarning} value, which should not happen.
|
69
79
|
Decide between using a controlled or uncontrolled input element for the lifetime of the component.
|
70
80
|
More info: https://reactjs.org/link/controlled-components
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useControllableState.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * @internal\n */\nexport type UseControllableStateOptions<State> = {\n /**\n * User-provided default state or initializer, for uncontrolled usage.\n */\n defaultState?: State | (() => State);\n /**\n * User-provided controlled state. `undefined` means internal state will be used.\n */\n state: State | undefined;\n /**\n * Used as the initial state if `state` and `defaultState` are both `undefined`.\n * If `undefined` is the correct initial state, pass that here.\n */\n initialState: State;\n};\n\nfunction isFactoryDispatch<State>(newState: React.SetStateAction<State>): newState is (prevState: State) => State {\n return typeof newState === 'function';\n}\n\n/**\n * @internal\n *\n * A [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate)-like hook\n * to manage a value that could be either `controlled` or `uncontrolled`,\n * such as a checked state or text input string.\n *\n * @see https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components for more details on `controlled`/`uncontrolled`\n *\n * @returns an array of the current value and an updater (dispatcher) function.\n * The updater function is referentially stable (won't change during the component's lifecycle).\n * It can take either a new value, or a function which is passed the previous value and returns the new value.\n *\n * ❗️❗️ Calls to the dispatcher will only modify the state if the state is `uncontrolled`.\n * Meaning that if a state is `controlled`, calls to the dispatcher do not modify the state.\n *\n */\nexport const useControllableState = <State>(\n options: UseControllableStateOptions<State>,\n): [State, React.Dispatch<React.SetStateAction<State>>] => {\n const [internalState, setInternalState] = React.useState<State>(() => {\n if (options.defaultState === undefined) {\n return options.initialState;\n }\n return isInitializer(options.defaultState) ? options.defaultState() : options.defaultState;\n });\n\n // Heads up!\n // This part is specific for controlled mode and mocks behavior of React dispatcher function.\n\n const stateValueRef = React.useRef<State | undefined>(options.state);\n\n React.useEffect(() => {\n stateValueRef.current = options.state;\n }, [options.state]);\n\n const setControlledState = React.useCallback((newState: React.SetStateAction<State>) => {\n if (isFactoryDispatch(newState)) {\n newState(stateValueRef.current as State);\n }\n }, []);\n\n return useIsControlled(options.state) ? [options.state, setControlledState] : [internalState, setInternalState];\n};\n\nfunction isInitializer<State>(value: State | (() => State)): value is () => State {\n return typeof value === 'function';\n}\n\n/**\n * Helper hook to handle previous comparison of controlled/uncontrolled\n * Prints an error when isControlled value switches between subsequent renders\n * @returns - whether the value is controlled\n */\nconst useIsControlled = <V>(controlledValue: V | undefined): controlledValue is V => {\n const [isControlled] = React.useState<boolean>(() => controlledValue !== undefined);\n\n if (process.env.NODE_ENV !== 'production') {\n // We don't want these warnings in production even though it is against native behaviour\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (isControlled !== (controlledValue !== undefined)) {\n const error = new Error();\n\n const controlWarning = isControlled\n ? 'a controlled value to be uncontrolled'\n : 'an uncontrolled value to be controlled';\n\n const undefinedWarning = isControlled ? 'defined to an undefined' : 'undefined to a defined';\n\n // eslint-disable-next-line no-console\n console.error(/** #__DE-INDENT__ */ `\n @fluentui/react-utilities [
|
1
|
+
{"version":3,"sources":["useControllableState.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * @internal\n */\nexport type UseControllableStateOptions<State> = {\n /**\n * User-provided default state or initializer, for uncontrolled usage.\n */\n defaultState?: State | (() => State);\n /**\n * User-provided controlled state. `undefined` means internal state will be used.\n */\n state: State | undefined;\n /**\n * Used as the initial state if `state` and `defaultState` are both `undefined`.\n * If `undefined` is the correct initial state, pass that here.\n */\n initialState: State;\n};\n\nfunction isFactoryDispatch<State>(newState: React.SetStateAction<State>): newState is (prevState: State) => State {\n return typeof newState === 'function';\n}\n\n/**\n * @internal\n *\n * A [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate)-like hook\n * to manage a value that could be either `controlled` or `uncontrolled`,\n * such as a checked state or text input string.\n *\n * @see https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components for more details on `controlled`/`uncontrolled`\n *\n * @returns an array of the current value and an updater (dispatcher) function.\n * The updater function is referentially stable (won't change during the component's lifecycle).\n * It can take either a new value, or a function which is passed the previous value and returns the new value.\n *\n * ❗️❗️ Calls to the dispatcher will only modify the state if the state is `uncontrolled`.\n * Meaning that if a state is `controlled`, calls to the dispatcher do not modify the state.\n *\n */\nexport const useControllableState = <State>(\n options: UseControllableStateOptions<State>,\n): [State, React.Dispatch<React.SetStateAction<State>>] => {\n if (process.env.NODE_ENV !== 'production') {\n if (options.state !== undefined && options.defaultState !== undefined) {\n // eslint-disable-next-line no-console\n console.error(/** #__DE-INDENT__ */ `\n @fluentui/react-utilities [useControllableState]:\n A component must be either controlled or uncontrolled (specify either the state or the defaultState, but not both).\n Decide between using a controlled or uncontrolled component and remove one of this props.\n More info: https://reactjs.org/link/controlled-components\n ${new Error().stack}\n `);\n }\n }\n const [internalState, setInternalState] = React.useState<State>(() => {\n if (options.defaultState === undefined) {\n return options.initialState;\n }\n return isInitializer(options.defaultState) ? options.defaultState() : options.defaultState;\n });\n\n // Heads up!\n // This part is specific for controlled mode and mocks behavior of React dispatcher function.\n\n const stateValueRef = React.useRef<State | undefined>(options.state);\n\n React.useEffect(() => {\n stateValueRef.current = options.state;\n }, [options.state]);\n\n const setControlledState = React.useCallback((newState: React.SetStateAction<State>) => {\n if (isFactoryDispatch(newState)) {\n newState(stateValueRef.current as State);\n }\n }, []);\n\n return useIsControlled(options.state) ? [options.state, setControlledState] : [internalState, setInternalState];\n};\n\nfunction isInitializer<State>(value: State | (() => State)): value is () => State {\n return typeof value === 'function';\n}\n\n/**\n * Helper hook to handle previous comparison of controlled/uncontrolled\n * Prints an error when isControlled value switches between subsequent renders\n * @returns - whether the value is controlled\n */\nconst useIsControlled = <V>(controlledValue: V | undefined): controlledValue is V => {\n const [isControlled] = React.useState<boolean>(() => controlledValue !== undefined);\n\n if (process.env.NODE_ENV !== 'production') {\n // We don't want these warnings in production even though it is against native behaviour\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (isControlled !== (controlledValue !== undefined)) {\n const error = new Error();\n\n const controlWarning = isControlled\n ? 'a controlled value to be uncontrolled'\n : 'an uncontrolled value to be controlled';\n\n const undefinedWarning = isControlled ? 'defined to an undefined' : 'undefined to a defined';\n\n // eslint-disable-next-line no-console\n console.error(/** #__DE-INDENT__ */ `\n @fluentui/react-utilities [useControllableState]:\n A component is changing ${controlWarning}. This is likely caused by the value changing from ${undefinedWarning} value, which should not happen.\n Decide between using a controlled or uncontrolled input element for the lifetime of the component.\n More info: https://reactjs.org/link/controlled-components\n ${error.stack}\n `);\n }\n }, [isControlled, controlledValue]);\n }\n\n return isControlled;\n};\n"],"names":["React","isFactoryDispatch","newState","useControllableState","options","process","env","NODE_ENV","state","undefined","defaultState","console","error","Error","stack","internalState","setInternalState","useState","initialState","isInitializer","stateValueRef","useRef","useEffect","current","setControlledState","useCallback","useIsControlled","value","controlledValue","isControlled","controlWarning","undefinedWarning"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAqB/B,SAASC,kBAAyBC,QAAqC;IACrE,OAAO,OAAOA,aAAa;AAC7B;AAEA;;;;;;;;;;;;;;;;CAgBC,GACD,OAAO,MAAMC,uBAAuB,CAClCC;IAEA,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAIH,QAAQI,KAAK,KAAKC,aAAaL,QAAQM,YAAY,KAAKD,WAAW;YACrE,sCAAsC;YACtCE,QAAQC,KAAK,CAAuB,CAAC;;;;AAKrC,EAAE,IAAIC,QAAQC,KAAK,CAAC,AACtB,CAAC;QACD;IACF;IACA,MAAM,CAACC,eAAeC,iBAAiB,GAAGhB,MAAMiB,QAAQ,CAAQ;QAC9D,IAAIb,QAAQM,YAAY,KAAKD,WAAW;YACtC,OAAOL,QAAQc,YAAY;QAC7B;QACA,OAAOC,cAAcf,QAAQM,YAAY,IAAIN,QAAQM,YAAY,KAAKN,QAAQM,YAAY;IAC5F;IAEA,YAAY;IACZ,6FAA6F;IAE7F,MAAMU,gBAAgBpB,MAAMqB,MAAM,CAAoBjB,QAAQI,KAAK;IAEnER,MAAMsB,SAAS,CAAC;QACdF,cAAcG,OAAO,GAAGnB,QAAQI,KAAK;IACvC,GAAG;QAACJ,QAAQI,KAAK;KAAC;IAElB,MAAMgB,qBAAqBxB,MAAMyB,WAAW,CAAC,CAACvB;QAC5C,IAAID,kBAAkBC,WAAW;YAC/BA,SAASkB,cAAcG,OAAO;QAChC;IACF,GAAG,EAAE;IAEL,OAAOG,gBAAgBtB,QAAQI,KAAK,IAAI;QAACJ,QAAQI,KAAK;QAAEgB;KAAmB,GAAG;QAACT;QAAeC;KAAiB;AACjH,EAAE;AAEF,SAASG,cAAqBQ,KAA4B;IACxD,OAAO,OAAOA,UAAU;AAC1B;AAEA;;;;CAIC,GACD,MAAMD,kBAAkB,CAAIE;IAC1B,MAAM,CAACC,aAAa,GAAG7B,MAAMiB,QAAQ,CAAU,IAAMW,oBAAoBnB;IAEzE,IAAIJ,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,wFAAwF;QACxF,sDAAsD;QACtDP,MAAMsB,SAAS,CAAC;YACd,IAAIO,iBAAkBD,CAAAA,oBAAoBnB,SAAQ,GAAI;gBACpD,MAAMG,QAAQ,IAAIC;gBAElB,MAAMiB,iBAAiBD,eACnB,0CACA;gBAEJ,MAAME,mBAAmBF,eAAe,4BAA4B;gBAEpE,sCAAsC;gBACtClB,QAAQC,KAAK,CAAuB,CAAC;wBAEX,EAAEkB,eAAe,mDAAmD,EAAEC,iBAAiB;;;AAG/G,EAAEnB,MAAME,KAAK,CAAC,AAChB,CAAC;YACH;QACF,GAAG;YAACe;YAAcD;SAAgB;IACpC;IAEA,OAAOC;AACT"}
|
package/lib/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n slot,\n isSlot,\n // eslint-disable-next-line deprecation/deprecation\n getSlots,\n // eslint-disable-next-line deprecation/deprecation\n getSlotsNext,\n assertSlots,\n // eslint-disable-next-line deprecation/deprecation\n resolveShorthand,\n isResolvedShorthand,\n getIntrinsicElementProps,\n SLOT_ELEMENT_TYPE_SYMBOL,\n SLOT_RENDER_FUNCTION_SYMBOL,\n} from './compose/index';\nexport type {\n ExtractSlotProps,\n ComponentProps,\n ComponentState,\n
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n slot,\n isSlot,\n // eslint-disable-next-line deprecation/deprecation\n getSlots,\n // eslint-disable-next-line deprecation/deprecation\n getSlotsNext,\n assertSlots,\n // eslint-disable-next-line deprecation/deprecation\n resolveShorthand,\n isResolvedShorthand,\n getIntrinsicElementProps,\n SLOT_ELEMENT_TYPE_SYMBOL,\n SLOT_RENDER_FUNCTION_SYMBOL,\n} from './compose/index';\nexport type {\n ExtractSlotProps,\n ComponentProps,\n ComponentState,\n ForwardRefComponent,\n // eslint-disable-next-line deprecation/deprecation\n ResolveShorthandFunction,\n // eslint-disable-next-line deprecation/deprecation\n ResolveShorthandOptions,\n Slot,\n // eslint-disable-next-line deprecation/deprecation\n Slots,\n SlotClassNames,\n SlotPropsRecord,\n SlotRenderFunction,\n SlotShorthandValue,\n // eslint-disable-next-line deprecation/deprecation\n UnknownSlotProps,\n SlotComponentType,\n SlotOptions,\n InferredElementRefType,\n EventData,\n EventHandler,\n} from './compose/index';\n\nexport {\n IdPrefixProvider,\n resetIdsForTests,\n useAnimationFrame,\n useControllableState,\n useEventCallback,\n useFirstMount,\n useForceUpdate,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n useOnClickOutside,\n useOnScrollOutside,\n usePrevious,\n useScrollbarWidth,\n useTimeout,\n} from './hooks/index';\nexport type { RefObjectFunction, UseControllableStateOptions, UseOnClickOrScrollOutsideOptions } from './hooks/index';\n\nexport { canUseDOM, useIsSSR, SSRProvider } from './ssr/index';\n\nexport {\n clamp,\n // eslint-disable-next-line deprecation/deprecation\n getNativeElementProps,\n getPartitionedNativeProps,\n getRTLSafeKey,\n mergeCallbacks,\n isHTMLElement,\n isInteractiveHTMLElement,\n omit,\n createPriorityQueue,\n} from './utils/index';\n\nexport type { DistributiveOmit, UnionToIntersection } from './utils/types';\n\nexport type { PriorityQueue } from './utils/priorityQueue';\n\nexport { applyTriggerPropsToChildren, getTriggerChild, isFluentTrigger } from './trigger/index';\n\nexport type { FluentTriggerComponent, TriggerProps } from './trigger/index';\n\n/**\n * Event utils\n */\nexport type { NativeTouchOrMouseEvent, ReactTouchOrMouseEvent, TouchOrMouseEvent } from './events/index';\nexport { isTouchEvent, isMouseEvent, getEventClientCoords } from './events/index';\n\nexport type {\n SelectionMode,\n OnSelectionChangeCallback,\n OnSelectionChangeData,\n SelectionItemId,\n SelectionHookParams,\n SelectionMethods,\n} from './selection/index';\nexport { useSelection } from './selection/index';\n\nexport { elementContains, setVirtualParent, getParent } from './virtualParent/index';\n"],"names":["slot","isSlot","getSlots","getSlotsNext","assertSlots","resolveShorthand","isResolvedShorthand","getIntrinsicElementProps","SLOT_ELEMENT_TYPE_SYMBOL","SLOT_RENDER_FUNCTION_SYMBOL","IdPrefixProvider","resetIdsForTests","useAnimationFrame","useControllableState","useEventCallback","useFirstMount","useForceUpdate","useId","useIsomorphicLayoutEffect","useMergedRefs","useOnClickOutside","useOnScrollOutside","usePrevious","useScrollbarWidth","useTimeout","canUseDOM","useIsSSR","SSRProvider","clamp","getNativeElementProps","getPartitionedNativeProps","getRTLSafeKey","mergeCallbacks","isHTMLElement","isInteractiveHTMLElement","omit","createPriorityQueue","applyTriggerPropsToChildren","getTriggerChild","isFluentTrigger","isTouchEvent","isMouseEvent","getEventClientCoords","useSelection","elementContains","setVirtualParent","getParent"],"mappings":"AAAA,SACEA,IAAI,EACJC,MAAM,EACN,mDAAmD;AACnDC,QAAQ,EACR,mDAAmD;AACnDC,YAAY,EACZC,WAAW,EACX,mDAAmD;AACnDC,gBAAgB,EAChBC,mBAAmB,EACnBC,wBAAwB,EACxBC,wBAAwB,EACxBC,2BAA2B,QACtB,kBAAkB;AA0BzB,SACEC,gBAAgB,EAChBC,gBAAgB,EAChBC,iBAAiB,EACjBC,oBAAoB,EACpBC,gBAAgB,EAChBC,aAAa,EACbC,cAAc,EACdC,KAAK,EACLC,yBAAyB,EACzBC,aAAa,EACbC,iBAAiB,EACjBC,kBAAkB,EAClBC,WAAW,EACXC,iBAAiB,EACjBC,UAAU,QACL,gBAAgB;AAGvB,SAASC,SAAS,EAAEC,QAAQ,EAAEC,WAAW,QAAQ,cAAc;AAE/D,SACEC,KAAK,EACL,mDAAmD;AACnDC,qBAAqB,EACrBC,yBAAyB,EACzBC,aAAa,EACbC,cAAc,EACdC,aAAa,EACbC,wBAAwB,EACxBC,IAAI,EACJC,mBAAmB,QACd,gBAAgB;AAMvB,SAASC,2BAA2B,EAAEC,eAAe,EAAEC,eAAe,QAAQ,kBAAkB;AAQhG,SAASC,YAAY,EAAEC,YAAY,EAAEC,oBAAoB,QAAQ,iBAAiB;AAUlF,SAASC,YAAY,QAAQ,oBAAoB;AAEjD,SAASC,eAAe,EAAEC,gBAAgB,EAAEC,SAAS,QAAQ,wBAAwB"}
|
package/lib/utils/types.js
CHANGED
@@ -1,21 +1 @@
|
|
1
|
-
|
2
|
-
* Helper type that works similar to Omit,
|
3
|
-
* but when modifying an union type it will distribute the omission to all the union members.
|
4
|
-
*
|
5
|
-
* See [distributive conditional types](https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#distributive-conditional-types) for more information
|
6
|
-
*/ // Traditional Omit is basically equivalent to => Pick<T, Exclude<keyof T, K>>
|
7
|
-
//
|
8
|
-
// let's say we have Omit<{ a: string } | { b: string }, 'a'>
|
9
|
-
// equivalent to: Pick<{ a: string } | { b: string }, Exclude<keyof ({ a: string } | { b: string }), 'a'>>
|
10
|
-
// The expected result would be {} | { b: string }, the omission of 'a' from all the union members,
|
11
|
-
// but keyof ({ a: string } | { b: string }) is never as they don't share common keys
|
12
|
-
// so Exclude<never, 'a'> is never,
|
13
|
-
// and Pick<{ a: string } | { b: string }, never> is {}.
|
14
|
-
//
|
15
|
-
// With DistributiveOmit on the other hand it becomes like this:
|
16
|
-
// DistributiveOmit<{ a: string } | { b: string }, 'a'>
|
17
|
-
// equivalent to: Omit<{ a: string }, 'a'> | Omit<{ b: string }, 'a'>
|
18
|
-
// Since every single Omit clause in this case is being applied to a single union member there's no conflicts on keyof evaluation and in the second clause Omit<{ b: string }, 'a'> becomes { b: string },
|
19
|
-
// so the result is {} | { b: string }, as expected.
|
20
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
21
|
-
export { };
|
1
|
+
import * as React from 'react';
|
package/lib/utils/types.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["types.ts"],"sourcesContent":["/**\n * Helper type that works similar to Omit,\n * but when modifying an union type it will distribute the omission to all the union members.\n *\n * See [distributive conditional types](https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#distributive-conditional-types) for more information\n */\n// Traditional Omit is basically equivalent to => Pick<T, Exclude<keyof T, K>>\n//\n// let's say we have Omit<{ a: string } | { b: string }, 'a'>\n// equivalent to: Pick<{ a: string } | { b: string }, Exclude<keyof ({ a: string } | { b: string }), 'a'>>\n// The expected result would be {} | { b: string }, the omission of 'a' from all the union members,\n// but keyof ({ a: string } | { b: string }) is never as they don't share common keys\n// so Exclude<never, 'a'> is never,\n// and Pick<{ a: string } | { b: string }, never> is {}.\n//\n// With DistributiveOmit on the other hand it becomes like this:\n// DistributiveOmit<{ a: string } | { b: string }, 'a'>\n// equivalent to: Omit<{ a: string }, 'a'> | Omit<{ b: string }, 'a'>\n// Since every single Omit clause in this case is being applied to a single union member there's no conflicts on keyof evaluation and in the second clause Omit<{ b: string }, 'a'> becomes { b: string },\n// so the result is {} | { b: string }, as expected.\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit<T, K> : T;\n\n/**\n * Converts a union type (`A | B | C`) to an intersection type (`A & B & C`)\n */\nexport type UnionToIntersection<U> = (U extends unknown ? (x: U) => U : never) extends (x: infer I) => U ? I : never;\n\n/**\n * @internal\n * If type T includes `null`, remove it and add `undefined` instead.\n */\nexport type ReplaceNullWithUndefined<T> = T extends null ? Exclude<T, null> | undefined : T;\n"],"names":[],"mappings":"AAAA
|
1
|
+
{"version":3,"sources":["types.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * Helper type that works similar to Omit,\n * but when modifying an union type it will distribute the omission to all the union members.\n *\n * See [distributive conditional types](https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#distributive-conditional-types) for more information\n */\n// Traditional Omit is basically equivalent to => Pick<T, Exclude<keyof T, K>>\n//\n// let's say we have Omit<{ a: string } | { b: string }, 'a'>\n// equivalent to: Pick<{ a: string } | { b: string }, Exclude<keyof ({ a: string } | { b: string }), 'a'>>\n// The expected result would be {} | { b: string }, the omission of 'a' from all the union members,\n// but keyof ({ a: string } | { b: string }) is never as they don't share common keys\n// so Exclude<never, 'a'> is never,\n// and Pick<{ a: string } | { b: string }, never> is {}.\n//\n// With DistributiveOmit on the other hand it becomes like this:\n// DistributiveOmit<{ a: string } | { b: string }, 'a'>\n// equivalent to: Omit<{ a: string }, 'a'> | Omit<{ b: string }, 'a'>\n// Since every single Omit clause in this case is being applied to a single union member there's no conflicts on keyof evaluation and in the second clause Omit<{ b: string }, 'a'> becomes { b: string },\n// so the result is {} | { b: string }, as expected.\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit<T, K> : T;\n\n/**\n * Converts a union type (`A | B | C`) to an intersection type (`A & B & C`)\n */\nexport type UnionToIntersection<U> = (U extends unknown ? (x: U) => U : never) extends (x: infer I) => U ? I : never;\n\n/**\n * @internal\n * If type T includes `null`, remove it and add `undefined` instead.\n */\nexport type ReplaceNullWithUndefined<T> = T extends null ? Exclude<T, null> | undefined : T;\n\n/**\n * @internal\n * With react 18, our `children` type starts leaking everywhere and that causes conflicts on component declaration, specially in the `propTypes` property of\n * both `ComponentClass` and `FunctionComponent`.\n *\n * This type substitutes `React.ComponentType` only keeping the function signature, it omits `propTypes`, `displayName` and other properties that are not\n * required for the inference.\n */\nexport type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;\n\n/**\n * @internal\n *\n * On types/react 18 there are two types being delivered,\n * 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}\n *\n * If TS is higher than 5.0 then the `FunctionComponent` will be returning ReactNode (which we don't support)\n * If TS is below or equal to 5.0 then the `FunctionComponent` will be returning ReactElement | null (which we support)\n *\n * Since it's not possible to have a single type that works for both cases\n * (as ReactNode is more specific, and this will break while evaluating functions),\n * we need to create our own `FunctionComponent` type\n * that will work for both cases.\n *\n * **THIS TYPE IS INTERNAL AND SHOULD NEVER BE EXPOSED**\n */\nexport interface FunctionComponent<P> {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (props: P): any;\n defaultProps?: Partial<P>;\n displayName?: string;\n}\n\n/**\n * @internal\n * **THIS TYPE IS INTERNAL AND SHOULD NEVER BE EXPOSED**\n */\nexport interface ComponentClass<P = {}, S = React.ComponentState> extends React.StaticLifecycle<P, S> {\n new (props: P): React.Component<P, S>;\n}\n\n/**\n * @internal\n *\n * 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.\n *\n * This type should only be used for inference purposes, and should never be exposed.\n *\n * **THIS TYPE IS INTERNAL AND SHOULD NEVER BE EXPOSED**\n *\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type ReactNode = any;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
|
@@ -19,6 +19,7 @@ function assertSlots(state) {
|
|
19
19
|
* as we're verifying static properties that will not change between environments
|
20
20
|
*/ if (process.env.NODE_ENV !== 'production') {
|
21
21
|
const typedState = state;
|
22
|
+
// eslint-disable-next-line deprecation/deprecation
|
22
23
|
for (const slotName of Object.keys(typedState.components)){
|
23
24
|
const slotElement = typedState[slotName];
|
24
25
|
if (slotElement === undefined) {
|
@@ -29,6 +30,7 @@ function assertSlots(state) {
|
|
29
30
|
// FIXME: this slot will still fail to support child render function scenario
|
30
31
|
if (!(0, _isSlot.isSlot)(slotElement)) {
|
31
32
|
typedState[slotName] = _slot.always(slotElement, {
|
33
|
+
// eslint-disable-next-line deprecation/deprecation
|
32
34
|
elementType: typedState.components[slotName]
|
33
35
|
});
|
34
36
|
// eslint-disable-next-line no-console
|
@@ -39,7 +41,9 @@ Be sure to create slots properly by using "slot.always" or "slot.optional".`);
|
|
39
41
|
// This means a slot is being declared by using resolveShorthand on the state hook,
|
40
42
|
// 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
|
41
43
|
const { [_constants.SLOT_ELEMENT_TYPE_SYMBOL]: elementType } = slotElement;
|
44
|
+
// eslint-disable-next-line deprecation/deprecation
|
42
45
|
if (elementType !== typedState.components[slotName]) {
|
46
|
+
// eslint-disable-next-line deprecation/deprecation
|
43
47
|
slotElement[_constants.SLOT_ELEMENT_TYPE_SYMBOL] = typedState.components[slotName];
|
44
48
|
// eslint-disable-next-line no-console
|
45
49
|
console.warn(`@fluentui/react-utilities [${assertSlots.name}]:
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["assertSlots.js"],"sourcesContent":["import * as React from 'react';\nimport { SLOT_ELEMENT_TYPE_SYMBOL } from './constants';\nimport { isSlot } from './isSlot';\nimport * as slot from './slot';\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 */ export function assertSlots(state) {\n /**\n * This verification is not necessary in production\n * as we're verifying static properties that will not change between environments\n */ if (process.env.NODE_ENV !== 'production') {\n const typedState = state;\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] = slot.always(slotElement, {\n elementType: typedState.components[slotName]\n });\n // eslint-disable-next-line no-console\n console.warn(`@fluentui/react-utilities [${assertSlots.name}]:\n\"state.${slotName}\" is not a slot!\nBe sure to create slots properly by using \"slot.always\" or \"slot.optional\".`);\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];\n // eslint-disable-next-line no-console\n console.warn(`@fluentui/react-utilities [${assertSlots.name}]:\n\"state.${slotName}\" element type differs from \"state.components.${slotName}\",\n${elementType} !== ${typedState.components[slotName]}.\nBe sure to create slots properly by using \"slot.always\" or \"slot.optional\" with the correct elementType.`);\n }\n }\n }\n }\n}\n"],"names":["assertSlots","state","process","env","NODE_ENV","typedState","slotName","Object","keys","components","slotElement","undefined","isSlot","slot","always","elementType","console","warn","name","SLOT_ELEMENT_TYPE_SYMBOL"],"mappings":";;;;+BAsBoBA;;;eAAAA;;;;iEAtBG;2BACkB;wBAClB;gEACD;AAmBX,SAASA,YAAYC,KAAK;IACjC;;;GAGD,GAAG,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,MAAMC,aAAaJ;QACnB,KAAK,MAAMK,YAAYC,OAAOC,IAAI,CAACH,WAAWI,UAAU,EAAE;YACtD,MAAMC,cAAcL,UAAU,CAACC,SAAS;YACxC,IAAII,gBAAgBC,WAAW;gBAC3B;YACJ;YACA,8HAA8H;YAC9H,4JAA4J;YAC5J,6EAA6E;YAC7E,IAAI,CAACC,IAAAA,cAAM,EAACF,cAAc;gBACtBL,UAAU,CAACC,SAAS,GAAGO,MAAKC,MAAM,CAACJ,aAAa;
|
1
|
+
{"version":3,"sources":["assertSlots.js"],"sourcesContent":["import * as React from 'react';\nimport { SLOT_ELEMENT_TYPE_SYMBOL } from './constants';\nimport { isSlot } from './isSlot';\nimport * as slot from './slot';\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 */ export function assertSlots(state) {\n /**\n * This verification is not necessary in production\n * as we're verifying static properties that will not change between environments\n */ if (process.env.NODE_ENV !== 'production') {\n const typedState = state;\n // eslint-disable-next-line deprecation/deprecation\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] = slot.always(slotElement, {\n // eslint-disable-next-line deprecation/deprecation\n elementType: typedState.components[slotName]\n });\n // eslint-disable-next-line no-console\n console.warn(`@fluentui/react-utilities [${assertSlots.name}]:\n\"state.${slotName}\" is not a slot!\nBe sure to create slots properly by using \"slot.always\" or \"slot.optional\".`);\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 deprecation/deprecation\n if (elementType !== typedState.components[slotName]) {\n // eslint-disable-next-line deprecation/deprecation\n slotElement[SLOT_ELEMENT_TYPE_SYMBOL] = typedState.components[slotName];\n // eslint-disable-next-line no-console\n console.warn(`@fluentui/react-utilities [${assertSlots.name}]:\n\"state.${slotName}\" element type differs from \"state.components.${slotName}\",\n${elementType} !== ${typedState.components[slotName]}.\nBe sure to create slots properly by using \"slot.always\" or \"slot.optional\" with the correct elementType.`);\n }\n }\n }\n }\n}\n"],"names":["assertSlots","state","process","env","NODE_ENV","typedState","slotName","Object","keys","components","slotElement","undefined","isSlot","slot","always","elementType","console","warn","name","SLOT_ELEMENT_TYPE_SYMBOL"],"mappings":";;;;+BAsBoBA;;;eAAAA;;;;iEAtBG;2BACkB;wBAClB;gEACD;AAmBX,SAASA,YAAYC,KAAK;IACjC;;;GAGD,GAAG,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,MAAMC,aAAaJ;QACnB,mDAAmD;QACnD,KAAK,MAAMK,YAAYC,OAAOC,IAAI,CAACH,WAAWI,UAAU,EAAE;YACtD,MAAMC,cAAcL,UAAU,CAACC,SAAS;YACxC,IAAII,gBAAgBC,WAAW;gBAC3B;YACJ;YACA,8HAA8H;YAC9H,4JAA4J;YAC5J,6EAA6E;YAC7E,IAAI,CAACC,IAAAA,cAAM,EAACF,cAAc;gBACtBL,UAAU,CAACC,SAAS,GAAGO,MAAKC,MAAM,CAACJ,aAAa;oBAC5C,mDAAmD;oBACnDK,aAAaV,WAAWI,UAAU,CAACH,SAAS;gBAChD;gBACA,sCAAsC;gBACtCU,QAAQC,IAAI,CAAC,CAAC,2BAA2B,EAAEjB,YAAYkB,IAAI,CAAC;OACrE,EAAEZ,SAAS;2EACyD,CAAC;YAChE,OAAO;gBACH,mFAAmF;gBACnF,4JAA4J;gBAC5J,MAAM,EAAE,CAACa,mCAAwB,CAAC,EAAEJ,WAAW,EAAE,GAAGL;gBACpD,mDAAmD;gBACnD,IAAIK,gBAAgBV,WAAWI,UAAU,CAACH,SAAS,EAAE;oBACjD,mDAAmD;oBACnDI,WAAW,CAACS,mCAAwB,CAAC,GAAGd,WAAWI,UAAU,CAACH,SAAS;oBACvE,sCAAsC;oBACtCU,QAAQC,IAAI,CAAC,CAAC,2BAA2B,EAAEjB,YAAYkB,IAAI,CAAC;OACzE,EAAEZ,SAAS,8CAA8C,EAAEA,SAAS;AAC3E,EAAES,YAAY,KAAK,EAAEV,WAAWI,UAAU,CAACH,SAAS,CAAC;wGACmD,CAAC;gBACzF;YACJ;QACJ;IACJ;AACJ"}
|
@@ -14,12 +14,14 @@ const _omit = require("../../utils/omit");
|
|
14
14
|
const _isSlot = require("../isSlot");
|
15
15
|
const _constants = require("../constants");
|
16
16
|
function getSlots(state) {
|
17
|
+
const typeState = state;
|
17
18
|
// eslint-disable-next-line deprecation/deprecation
|
18
19
|
const slots = {};
|
19
20
|
const slotProps = {};
|
20
|
-
|
21
|
+
// eslint-disable-next-line deprecation/deprecation
|
22
|
+
const slotNames = Object.keys(typeState.components);
|
21
23
|
for (const slotName of slotNames){
|
22
|
-
const [slot, props] = getSlot(
|
24
|
+
const [slot, props] = getSlot(typeState, slotName);
|
23
25
|
// eslint-disable-next-line deprecation/deprecation
|
24
26
|
slots[slotName] = slot;
|
25
27
|
slotProps[slotName] = props;
|
@@ -42,7 +44,9 @@ function getSlot(state, slotName) {
|
|
42
44
|
// TS Error: Property 'as' does not exist on type 'UnknownSlotProps | undefined'.ts(2339)
|
43
45
|
const { as: asProp, children, ...rest } = props;
|
44
46
|
const renderFunction = (0, _isSlot.isSlot)(props) ? props[_constants.SLOT_RENDER_FUNCTION_SYMBOL] : undefined;
|
45
|
-
const slot = ((_state_components = state.components) === null || _state_components === void 0 ? void 0 : _state_components[slotName]) === undefined ||
|
47
|
+
const slot = ((_state_components = state.components) === null || _state_components === void 0 ? void 0 : _state_components[slotName]) === undefined || // eslint-disable-line deprecation/deprecation
|
48
|
+
// eslint-disable-next-line deprecation/deprecation
|
49
|
+
typeof state.components[slotName] === 'string' ? asProp || ((_state_components1 = state.components) === null || _state_components1 === void 0 ? void 0 : _state_components1[slotName]) || 'div' : state.components[slotName];
|
46
50
|
if (renderFunction || typeof children === 'function') {
|
47
51
|
const render = renderFunction || children;
|
48
52
|
return [
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["getSlots.js"],"sourcesContent":["import * as React from 'react';\nimport { omit } from '../../utils/omit';\nimport { isSlot } from '../isSlot';\nimport { SLOT_RENDER_FUNCTION_SYMBOL } from '../constants';\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 */ export function getSlots(
|
1
|
+
{"version":3,"sources":["getSlots.js"],"sourcesContent":["import * as React from 'react';\nimport { omit } from '../../utils/omit';\nimport { isSlot } from '../isSlot';\nimport { SLOT_RENDER_FUNCTION_SYMBOL } from '../constants';\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 */ export function getSlots(state) {\n const typeState = state;\n // eslint-disable-next-line deprecation/deprecation\n const slots = {};\n const slotProps = {};\n // eslint-disable-next-line deprecation/deprecation\n const slotNames = Object.keys(typeState.components);\n for (const slotName of slotNames){\n const [slot, props] = getSlot(typeState, slotName);\n // eslint-disable-next-line deprecation/deprecation\n slots[slotName] = slot;\n slotProps[slotName] = props;\n }\n // eslint-disable-next-line deprecation/deprecation\n return {\n slots,\n slotProps: slotProps\n };\n}\nfunction getSlot(state, slotName) {\n var _state_components, _state_components1;\n const props = state[slotName];\n if (props === undefined) {\n return [\n null,\n undefined\n ];\n }\n // TS Error: Property 'as' does not exist on type 'UnknownSlotProps | undefined'.ts(2339)\n const { as: asProp, children, ...rest } = props;\n const renderFunction = isSlot(props) ? props[SLOT_RENDER_FUNCTION_SYMBOL] : undefined;\n const slot = ((_state_components = state.components) === null || _state_components === void 0 ? void 0 : _state_components[slotName]) === undefined || // eslint-disable-line deprecation/deprecation\n // eslint-disable-next-line deprecation/deprecation\n typeof state.components[slotName] === 'string' ? asProp || ((_state_components1 = state.components) === null || _state_components1 === void 0 ? void 0 : _state_components1[slotName]) || 'div' : state.components[slotName];\n if (renderFunction || typeof children === 'function') {\n const render = renderFunction || children;\n return [\n React.Fragment,\n {\n children: render(slot, rest)\n }\n ];\n }\n const shouldOmitAsProp = typeof slot === 'string' && asProp;\n // eslint-disable-next-line deprecation/deprecation\n const slotProps = shouldOmitAsProp ? omit(props, [\n 'as'\n ]) : props;\n return [\n slot,\n slotProps\n ];\n}\n"],"names":["getSlots","state","typeState","slots","slotProps","slotNames","Object","keys","components","slotName","slot","props","getSlot","_state_components","_state_components1","undefined","as","asProp","children","rest","renderFunction","isSlot","SLOT_RENDER_FUNCTION_SYMBOL","render","React","Fragment","shouldOmitAsProp","omit"],"mappings":";;;;+BAsBoBA;;;eAAAA;;;;iEAtBG;sBACF;wBACE;2BACqB;AAmBjC,SAASA,SAASC,KAAK;IAC9B,MAAMC,YAAYD;IAClB,mDAAmD;IACnD,MAAME,QAAQ,CAAC;IACf,MAAMC,YAAY,CAAC;IACnB,mDAAmD;IACnD,MAAMC,YAAYC,OAAOC,IAAI,CAACL,UAAUM,UAAU;IAClD,KAAK,MAAMC,YAAYJ,UAAU;QAC7B,MAAM,CAACK,MAAMC,MAAM,GAAGC,QAAQV,WAAWO;QACzC,mDAAmD;QACnDN,KAAK,CAACM,SAAS,GAAGC;QAClBN,SAAS,CAACK,SAAS,GAAGE;IAC1B;IACA,mDAAmD;IACnD,OAAO;QACHR;QACAC,WAAWA;IACf;AACJ;AACA,SAASQ,QAAQX,KAAK,EAAEQ,QAAQ;IAC5B,IAAII,mBAAmBC;IACvB,MAAMH,QAAQV,KAAK,CAACQ,SAAS;IAC7B,IAAIE,UAAUI,WAAW;QACrB,OAAO;YACH;YACAA;SACH;IACL;IACA,yFAAyF;IACzF,MAAM,EAAEC,IAAIC,MAAM,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGR;IAC1C,MAAMS,iBAAiBC,IAAAA,cAAM,EAACV,SAASA,KAAK,CAACW,sCAA2B,CAAC,GAAGP;IAC5E,MAAML,OAAO,AAAC,CAAA,AAACG,CAAAA,oBAAoBZ,MAAMO,UAAU,AAAD,MAAO,QAAQK,sBAAsB,KAAK,IAAI,KAAK,IAAIA,iBAAiB,CAACJ,SAAS,AAAD,MAAOM,aAAa,8CAA8C;IACrM,mDAAmD;IACnD,OAAOd,MAAMO,UAAU,CAACC,SAAS,KAAK,WAAWQ,UAAW,CAAA,AAACH,CAAAA,qBAAqBb,MAAMO,UAAU,AAAD,MAAO,QAAQM,uBAAuB,KAAK,IAAI,KAAK,IAAIA,kBAAkB,CAACL,SAAS,AAAD,KAAM,QAAQR,MAAMO,UAAU,CAACC,SAAS;IAC5N,IAAIW,kBAAkB,OAAOF,aAAa,YAAY;QAClD,MAAMK,SAASH,kBAAkBF;QACjC,OAAO;YACHM,OAAMC,QAAQ;YACd;gBACIP,UAAUK,OAAOb,MAAMS;YAC3B;SACH;IACL;IACA,MAAMO,mBAAmB,OAAOhB,SAAS,YAAYO;IACrD,mDAAmD;IACnD,MAAMb,YAAYsB,mBAAmBC,IAAAA,UAAI,EAAChB,OAAO;QAC7C;KACH,IAAIA;IACL,OAAO;QACHD;QACAN;KACH;AACL"}
|
@@ -11,13 +11,15 @@ Object.defineProperty(exports, "getSlotsNext", {
|
|
11
11
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
12
12
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
13
13
|
function getSlotsNext(state) {
|
14
|
+
const typedState = state;
|
14
15
|
// eslint-disable-next-line deprecation/deprecation
|
15
16
|
const slots = {};
|
16
17
|
const slotProps = {};
|
17
|
-
|
18
|
+
// eslint-disable-next-line deprecation/deprecation
|
19
|
+
const slotNames = Object.keys(typedState.components);
|
18
20
|
for (const slotName of slotNames){
|
19
21
|
// eslint-disable-next-line deprecation/deprecation
|
20
|
-
const [slot, props] = getSlotNext(
|
22
|
+
const [slot, props] = getSlotNext(typedState, slotName);
|
21
23
|
// eslint-disable-next-line deprecation/deprecation
|
22
24
|
slots[slotName] = slot;
|
23
25
|
slotProps[slotName] = props;
|
@@ -41,7 +43,9 @@ function getSlotsNext(state) {
|
|
41
43
|
}
|
42
44
|
// TS Error: Property 'as' does not exist on type 'UnknownSlotProps | undefined'.ts(2339)
|
43
45
|
const { as: asProp, ...propsWithoutAs } = props;
|
44
|
-
const slot = ((_state_components = state.components) === null || _state_components === void 0 ? void 0 : _state_components[slotName]) === undefined ||
|
46
|
+
const slot = ((_state_components = state.components) === null || _state_components === void 0 ? void 0 : _state_components[slotName]) === undefined || // eslint-disable-line deprecation/deprecation
|
47
|
+
// eslint-disable-next-line deprecation/deprecation
|
48
|
+
typeof state.components[slotName] === 'string' ? asProp || ((_state_components1 = state.components) === null || _state_components1 === void 0 ? void 0 : _state_components1[slotName]) || 'div' : state.components[slotName];
|
45
49
|
const shouldOmitAsProp = typeof slot === 'string' && asProp;
|
46
50
|
// eslint-disable-next-line deprecation/deprecation
|
47
51
|
const slotProps = shouldOmitAsProp ? propsWithoutAs : props;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["getSlotsNext.js"],"sourcesContent":["import * as React from 'react';\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 */ export function getSlotsNext(
|
1
|
+
{"version":3,"sources":["getSlotsNext.js"],"sourcesContent":["import * as React from 'react';\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 */ export function getSlotsNext(state) {\n const typedState = state;\n // eslint-disable-next-line deprecation/deprecation\n const slots = {};\n const slotProps = {};\n // eslint-disable-next-line deprecation/deprecation\n const slotNames = Object.keys(typedState.components);\n for (const slotName of slotNames){\n // eslint-disable-next-line deprecation/deprecation\n const [slot, props] = getSlotNext(typedState, slotName);\n // eslint-disable-next-line deprecation/deprecation\n slots[slotName] = slot;\n slotProps[slotName] = props;\n }\n // eslint-disable-next-line deprecation/deprecation\n return {\n slots,\n slotProps: slotProps\n };\n}\n/**\n * @deprecated use slot.always or slot.optional combined with assertSlots instead\n */ function getSlotNext(state, slotName) {\n var _state_components, _state_components1;\n const props = state[slotName];\n if (props === undefined) {\n return [\n null,\n undefined\n ];\n }\n // TS Error: Property 'as' does not exist on type 'UnknownSlotProps | undefined'.ts(2339)\n const { as: asProp, ...propsWithoutAs } = props;\n const slot = ((_state_components = state.components) === null || _state_components === void 0 ? void 0 : _state_components[slotName]) === undefined || // eslint-disable-line deprecation/deprecation\n // eslint-disable-next-line deprecation/deprecation\n typeof state.components[slotName] === 'string' ? asProp || ((_state_components1 = state.components) === null || _state_components1 === void 0 ? void 0 : _state_components1[slotName]) || 'div' : state.components[slotName];\n const shouldOmitAsProp = typeof slot === 'string' && asProp;\n // eslint-disable-next-line deprecation/deprecation\n const slotProps = shouldOmitAsProp ? propsWithoutAs : props;\n return [\n slot,\n slotProps\n ];\n}\n"],"names":["getSlotsNext","state","typedState","slots","slotProps","slotNames","Object","keys","components","slotName","slot","props","getSlotNext","_state_components","_state_components1","undefined","as","asProp","propsWithoutAs","shouldOmitAsProp"],"mappings":";;;;+BAUoBA;;;eAAAA;;;;iEAVG;AAUZ,SAASA,aAAaC,KAAK;IAClC,MAAMC,aAAaD;IACnB,mDAAmD;IACnD,MAAME,QAAQ,CAAC;IACf,MAAMC,YAAY,CAAC;IACnB,mDAAmD;IACnD,MAAMC,YAAYC,OAAOC,IAAI,CAACL,WAAWM,UAAU;IACnD,KAAK,MAAMC,YAAYJ,UAAU;QAC7B,mDAAmD;QACnD,MAAM,CAACK,MAAMC,MAAM,GAAGC,YAAYV,YAAYO;QAC9C,mDAAmD;QACnDN,KAAK,CAACM,SAAS,GAAGC;QAClBN,SAAS,CAACK,SAAS,GAAGE;IAC1B;IACA,mDAAmD;IACnD,OAAO;QACHR;QACAC,WAAWA;IACf;AACJ;AACA;;CAEC,GAAG,SAASQ,YAAYX,KAAK,EAAEQ,QAAQ;IACpC,IAAII,mBAAmBC;IACvB,MAAMH,QAAQV,KAAK,CAACQ,SAAS;IAC7B,IAAIE,UAAUI,WAAW;QACrB,OAAO;YACH;YACAA;SACH;IACL;IACA,yFAAyF;IACzF,MAAM,EAAEC,IAAIC,MAAM,EAAE,GAAGC,gBAAgB,GAAGP;IAC1C,MAAMD,OAAO,AAAC,CAAA,AAACG,CAAAA,oBAAoBZ,MAAMO,UAAU,AAAD,MAAO,QAAQK,sBAAsB,KAAK,IAAI,KAAK,IAAIA,iBAAiB,CAACJ,SAAS,AAAD,MAAOM,aAAa,8CAA8C;IACrM,mDAAmD;IACnD,OAAOd,MAAMO,UAAU,CAACC,SAAS,KAAK,WAAWQ,UAAW,CAAA,AAACH,CAAAA,qBAAqBb,MAAMO,UAAU,AAAD,MAAO,QAAQM,uBAAuB,KAAK,IAAI,KAAK,IAAIA,kBAAkB,CAACL,SAAS,AAAD,KAAM,QAAQR,MAAMO,UAAU,CAACC,SAAS;IAC5N,MAAMU,mBAAmB,OAAOT,SAAS,YAAYO;IACrD,mDAAmD;IACnD,MAAMb,YAAYe,mBAAmBD,iBAAiBP;IACtD,OAAO;QACHD;QACAN;KACH;AACL"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["resolveShorthand.js"],"sourcesContent":["import * as slot from '../slot';\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
|
1
|
+
{"version":3,"sources":["resolveShorthand.js"],"sourcesContent":["import * as slot from '../slot';\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 */ // eslint-disable-next-line deprecation/deprecation\nexport const resolveShorthand = (value, options)=>slot.optional(value, {\n ...options,\n renderByDefault: options === null || options === void 0 ? void 0 : 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 });\n"],"names":["resolveShorthand","value","options","slot","optional","renderByDefault","required","elementType","undefined"],"mappings":";;;;+BAUaA;;;eAAAA;;;;gEAVS;AAUf,MAAMA,mBAAmB,CAACC,OAAOC,UAAUC,MAAKC,QAAQ,CAACH,OAAO;QAC/D,GAAGC,OAAO;QACVG,iBAAiBH,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQI,QAAQ;QACnF,6FAA6F;QAC7F,yGAAyG;QACzGC,aAAaC;IACjB"}
|
@@ -14,6 +14,16 @@ function isFactoryDispatch(newState) {
|
|
14
14
|
return typeof newState === 'function';
|
15
15
|
}
|
16
16
|
const useControllableState = (options)=>{
|
17
|
+
if (process.env.NODE_ENV !== 'production') {
|
18
|
+
if (options.state !== undefined && options.defaultState !== undefined) {
|
19
|
+
// eslint-disable-next-line no-console
|
20
|
+
console.error(`@fluentui/react-utilities [useControllableState]:
|
21
|
+
A component must be either controlled or uncontrolled (specify either the state or the defaultState, but not both).
|
22
|
+
Decide between using a controlled or uncontrolled component and remove one of this props.
|
23
|
+
More info: https://reactjs.org/link/controlled-components
|
24
|
+
${new Error().stack}`);
|
25
|
+
}
|
26
|
+
}
|
17
27
|
const [internalState, setInternalState] = _react.useState(()=>{
|
18
28
|
if (options.defaultState === undefined) {
|
19
29
|
return options.initialState;
|
@@ -59,7 +69,7 @@ function isInitializer(value) {
|
|
59
69
|
const controlWarning = isControlled ? 'a controlled value to be uncontrolled' : 'an uncontrolled value to be controlled';
|
60
70
|
const undefinedWarning = isControlled ? 'defined to an undefined' : 'undefined to a defined';
|
61
71
|
// eslint-disable-next-line no-console
|
62
|
-
console.error(`@fluentui/react-utilities [
|
72
|
+
console.error(`@fluentui/react-utilities [useControllableState]:
|
63
73
|
A component is changing ${controlWarning}. This is likely caused by the value changing from ${undefinedWarning} value, which should not happen.
|
64
74
|
Decide between using a controlled or uncontrolled input element for the lifetime of the component.
|
65
75
|
More info: https://reactjs.org/link/controlled-components
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useControllableState.js"],"sourcesContent":["import * as React from 'react';\nfunction isFactoryDispatch(newState) {\n return typeof newState === 'function';\n}\n/**\n * @internal\n *\n * A [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate)-like hook\n * to manage a value that could be either `controlled` or `uncontrolled`,\n * such as a checked state or text input string.\n *\n * @see https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components for more details on `controlled`/`uncontrolled`\n *\n * @returns an array of the current value and an updater (dispatcher) function.\n * The updater function is referentially stable (won't change during the component's lifecycle).\n * It can take either a new value, or a function which is passed the previous value and returns the new value.\n *\n * ❗️❗️ Calls to the dispatcher will only modify the state if the state is `uncontrolled`.\n * Meaning that if a state is `controlled`, calls to the dispatcher do not modify the state.\n *\n */ export const useControllableState = (options)=>{\n const [internalState, setInternalState] = React.useState(()=>{\n if (options.defaultState === undefined) {\n return options.initialState;\n }\n return isInitializer(options.defaultState) ? options.defaultState() : options.defaultState;\n });\n // Heads up!\n // This part is specific for controlled mode and mocks behavior of React dispatcher function.\n const stateValueRef = React.useRef(options.state);\n React.useEffect(()=>{\n stateValueRef.current = options.state;\n }, [\n options.state\n ]);\n const setControlledState = React.useCallback((newState)=>{\n if (isFactoryDispatch(newState)) {\n newState(stateValueRef.current);\n }\n }, []);\n return useIsControlled(options.state) ? [\n options.state,\n setControlledState\n ] : [\n internalState,\n setInternalState\n ];\n};\nfunction isInitializer(value) {\n return typeof value === 'function';\n}\n/**\n * Helper hook to handle previous comparison of controlled/uncontrolled\n * Prints an error when isControlled value switches between subsequent renders\n * @returns - whether the value is controlled\n */ const useIsControlled = (controlledValue)=>{\n const [isControlled] = React.useState(()=>controlledValue !== undefined);\n if (process.env.NODE_ENV !== 'production') {\n // We don't want these warnings in production even though it is against native behaviour\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(()=>{\n if (isControlled !== (controlledValue !== undefined)) {\n const error = new Error();\n const controlWarning = isControlled ? 'a controlled value to be uncontrolled' : 'an uncontrolled value to be controlled';\n const undefinedWarning = isControlled ? 'defined to an undefined' : 'undefined to a defined';\n // eslint-disable-next-line no-console\n console.error(`@fluentui/react-utilities [
|
1
|
+
{"version":3,"sources":["useControllableState.js"],"sourcesContent":["import * as React from 'react';\nfunction isFactoryDispatch(newState) {\n return typeof newState === 'function';\n}\n/**\n * @internal\n *\n * A [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate)-like hook\n * to manage a value that could be either `controlled` or `uncontrolled`,\n * such as a checked state or text input string.\n *\n * @see https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components for more details on `controlled`/`uncontrolled`\n *\n * @returns an array of the current value and an updater (dispatcher) function.\n * The updater function is referentially stable (won't change during the component's lifecycle).\n * It can take either a new value, or a function which is passed the previous value and returns the new value.\n *\n * ❗️❗️ Calls to the dispatcher will only modify the state if the state is `uncontrolled`.\n * Meaning that if a state is `controlled`, calls to the dispatcher do not modify the state.\n *\n */ export const useControllableState = (options)=>{\n if (process.env.NODE_ENV !== 'production') {\n if (options.state !== undefined && options.defaultState !== undefined) {\n // eslint-disable-next-line no-console\n console.error(`@fluentui/react-utilities [useControllableState]:\nA component must be either controlled or uncontrolled (specify either the state or the defaultState, but not both).\nDecide between using a controlled or uncontrolled component and remove one of this props.\nMore info: https://reactjs.org/link/controlled-components\n${new Error().stack}`);\n }\n }\n const [internalState, setInternalState] = React.useState(()=>{\n if (options.defaultState === undefined) {\n return options.initialState;\n }\n return isInitializer(options.defaultState) ? options.defaultState() : options.defaultState;\n });\n // Heads up!\n // This part is specific for controlled mode and mocks behavior of React dispatcher function.\n const stateValueRef = React.useRef(options.state);\n React.useEffect(()=>{\n stateValueRef.current = options.state;\n }, [\n options.state\n ]);\n const setControlledState = React.useCallback((newState)=>{\n if (isFactoryDispatch(newState)) {\n newState(stateValueRef.current);\n }\n }, []);\n return useIsControlled(options.state) ? [\n options.state,\n setControlledState\n ] : [\n internalState,\n setInternalState\n ];\n};\nfunction isInitializer(value) {\n return typeof value === 'function';\n}\n/**\n * Helper hook to handle previous comparison of controlled/uncontrolled\n * Prints an error when isControlled value switches between subsequent renders\n * @returns - whether the value is controlled\n */ const useIsControlled = (controlledValue)=>{\n const [isControlled] = React.useState(()=>controlledValue !== undefined);\n if (process.env.NODE_ENV !== 'production') {\n // We don't want these warnings in production even though it is against native behaviour\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(()=>{\n if (isControlled !== (controlledValue !== undefined)) {\n const error = new Error();\n const controlWarning = isControlled ? 'a controlled value to be uncontrolled' : 'an uncontrolled value to be controlled';\n const undefinedWarning = isControlled ? 'defined to an undefined' : 'undefined to a defined';\n // eslint-disable-next-line no-console\n console.error(`@fluentui/react-utilities [useControllableState]:\nA component is changing ${controlWarning}. This is likely caused by the value changing from ${undefinedWarning} value, which should not happen.\nDecide between using a controlled or uncontrolled input element for the lifetime of the component.\nMore info: https://reactjs.org/link/controlled-components\n${error.stack}`);\n }\n }, [\n isControlled,\n controlledValue\n ]);\n }\n return isControlled;\n};\n"],"names":["useControllableState","isFactoryDispatch","newState","options","process","env","NODE_ENV","state","undefined","defaultState","console","error","Error","stack","internalState","setInternalState","React","useState","initialState","isInitializer","stateValueRef","useRef","useEffect","current","setControlledState","useCallback","useIsControlled","value","controlledValue","isControlled","controlWarning","undefinedWarning"],"mappings":";;;;+BAoBiBA;;;eAAAA;;;;iEApBM;AACvB,SAASC,kBAAkBC,QAAQ;IAC/B,OAAO,OAAOA,aAAa;AAC/B;AAiBW,MAAMF,uBAAuB,CAACG;IACrC,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACvC,IAAIH,QAAQI,KAAK,KAAKC,aAAaL,QAAQM,YAAY,KAAKD,WAAW;YACnE,sCAAsC;YACtCE,QAAQC,KAAK,CAAC,CAAC;;;;AAI3B,EAAE,IAAIC,QAAQC,KAAK,CAAC,CAAC;QACb;IACJ;IACA,MAAM,CAACC,eAAeC,iBAAiB,GAAGC,OAAMC,QAAQ,CAAC;QACrD,IAAId,QAAQM,YAAY,KAAKD,WAAW;YACpC,OAAOL,QAAQe,YAAY;QAC/B;QACA,OAAOC,cAAchB,QAAQM,YAAY,IAAIN,QAAQM,YAAY,KAAKN,QAAQM,YAAY;IAC9F;IACA,YAAY;IACZ,6FAA6F;IAC7F,MAAMW,gBAAgBJ,OAAMK,MAAM,CAAClB,QAAQI,KAAK;IAChDS,OAAMM,SAAS,CAAC;QACZF,cAAcG,OAAO,GAAGpB,QAAQI,KAAK;IACzC,GAAG;QACCJ,QAAQI,KAAK;KAChB;IACD,MAAMiB,qBAAqBR,OAAMS,WAAW,CAAC,CAACvB;QAC1C,IAAID,kBAAkBC,WAAW;YAC7BA,SAASkB,cAAcG,OAAO;QAClC;IACJ,GAAG,EAAE;IACL,OAAOG,gBAAgBvB,QAAQI,KAAK,IAAI;QACpCJ,QAAQI,KAAK;QACbiB;KACH,GAAG;QACAV;QACAC;KACH;AACL;AACA,SAASI,cAAcQ,KAAK;IACxB,OAAO,OAAOA,UAAU;AAC5B;AACA;;;;CAIC,GAAG,MAAMD,kBAAkB,CAACE;IACzB,MAAM,CAACC,aAAa,GAAGb,OAAMC,QAAQ,CAAC,IAAIW,oBAAoBpB;IAC9D,IAAIJ,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACvC,wFAAwF;QACxF,sDAAsD;QACtDU,OAAMM,SAAS,CAAC;YACZ,IAAIO,iBAAkBD,CAAAA,oBAAoBpB,SAAQ,GAAI;gBAClD,MAAMG,QAAQ,IAAIC;gBAClB,MAAMkB,iBAAiBD,eAAe,0CAA0C;gBAChF,MAAME,mBAAmBF,eAAe,4BAA4B;gBACpE,sCAAsC;gBACtCnB,QAAQC,KAAK,CAAC,CAAC;wBACP,EAAEmB,eAAe,mDAAmD,EAAEC,iBAAiB;;;AAG/G,EAAEpB,MAAME,KAAK,CAAC,CAAC;YACH;QACJ,GAAG;YACCgB;YACAD;SACH;IACL;IACA,OAAOC;AACX"}
|
@@ -1,24 +1,6 @@
|
|
1
|
-
/**
|
2
|
-
* Helper type that works similar to Omit,
|
3
|
-
* but when modifying an union type it will distribute the omission to all the union members.
|
4
|
-
*
|
5
|
-
* See [distributive conditional types](https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#distributive-conditional-types) for more information
|
6
|
-
*/ // Traditional Omit is basically equivalent to => Pick<T, Exclude<keyof T, K>>
|
7
|
-
//
|
8
|
-
// let's say we have Omit<{ a: string } | { b: string }, 'a'>
|
9
|
-
// equivalent to: Pick<{ a: string } | { b: string }, Exclude<keyof ({ a: string } | { b: string }), 'a'>>
|
10
|
-
// The expected result would be {} | { b: string }, the omission of 'a' from all the union members,
|
11
|
-
// but keyof ({ a: string } | { b: string }) is never as they don't share common keys
|
12
|
-
// so Exclude<never, 'a'> is never,
|
13
|
-
// and Pick<{ a: string } | { b: string }, never> is {}.
|
14
|
-
//
|
15
|
-
// With DistributiveOmit on the other hand it becomes like this:
|
16
|
-
// DistributiveOmit<{ a: string } | { b: string }, 'a'>
|
17
|
-
// equivalent to: Omit<{ a: string }, 'a'> | Omit<{ b: string }, 'a'>
|
18
|
-
// Since every single Omit clause in this case is being applied to a single union member there's no conflicts on keyof evaluation and in the second clause Omit<{ b: string }, 'a'> becomes { b: string },
|
19
|
-
// so the result is {} | { b: string }, as expected.
|
20
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
21
1
|
"use strict";
|
22
2
|
Object.defineProperty(exports, "__esModule", {
|
23
3
|
value: true
|
24
4
|
});
|
5
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
6
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["types.js"],"sourcesContent":["
|
1
|
+
{"version":3,"sources":["types.js"],"sourcesContent":["import * as React from 'react';\n"],"names":[],"mappings":";;;;;iEAAuB"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-utilities",
|
3
|
-
"version": "0.0.0-nightly-
|
3
|
+
"version": "0.0.0-nightly-20240607-1142.1",
|
4
4
|
"description": "A set of general React-specific utilities.",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
@@ -31,8 +31,8 @@
|
|
31
31
|
"@fluentui/scripts-tasks": "*"
|
32
32
|
},
|
33
33
|
"dependencies": {
|
34
|
-
"@fluentui/keyboard-keys": "0.0.0-nightly-
|
35
|
-
"@fluentui/react-shared-contexts": "0.0.0-nightly-
|
34
|
+
"@fluentui/keyboard-keys": "0.0.0-nightly-20240607-1142.1",
|
35
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly-20240607-1142.1",
|
36
36
|
"@swc/helpers": "^0.5.1"
|
37
37
|
},
|
38
38
|
"peerDependencies": {
|