@fluentui/react-utilities 9.26.5 → 9.74.3-experimental.esm.20260709-49ee7a20cf.0
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 +13 -2
- package/dist/index.d.cts +1249 -0
- package/lib/compose/assertSlots.js +3 -3
- package/lib/compose/assertSlots.js.map +1 -1
- package/lib/compose/deprecated/getSlots.js +4 -4
- package/lib/compose/deprecated/getSlots.js.map +1 -1
- package/lib/compose/deprecated/resolveShorthand.js +1 -1
- package/lib/compose/deprecated/resolveShorthand.js.map +1 -1
- package/lib/compose/getIntrinsicElementProps.js +1 -1
- package/lib/compose/getIntrinsicElementProps.js.map +1 -1
- package/lib/compose/getSlotClassNameProp.js +1 -1
- package/lib/compose/getSlotClassNameProp.js.map +1 -1
- package/lib/compose/index.js +10 -10
- package/lib/compose/index.js.map +1 -1
- package/lib/compose/isResolvedShorthand.js +1 -1
- package/lib/compose/isSlot.js +1 -1
- package/lib/compose/isSlot.js.map +1 -1
- package/lib/compose/slot.js +2 -2
- package/lib/compose/slot.js.map +1 -1
- package/lib/events/index.js +1 -1
- package/lib/events/index.js.map +1 -1
- package/lib/hooks/index.js +14 -14
- package/lib/hooks/index.js.map +1 -1
- package/lib/hooks/useAnimationFrame.js +2 -2
- package/lib/hooks/useAnimationFrame.js.map +1 -1
- package/lib/hooks/useApplyScrollbarWidth.js +2 -2
- package/lib/hooks/useApplyScrollbarWidth.js.map +1 -1
- package/lib/hooks/useBrowserTimer.js +1 -1
- package/lib/hooks/useControllableState.js +1 -1
- package/lib/hooks/useEventCallback.js +2 -2
- package/lib/hooks/useEventCallback.js.map +1 -1
- package/lib/hooks/useFirstMount.js +1 -1
- package/lib/hooks/useForceUpdate.js +1 -1
- package/lib/hooks/useId.js +2 -2
- package/lib/hooks/useId.js.map +1 -1
- package/lib/hooks/useIsomorphicLayoutEffect.js +2 -2
- package/lib/hooks/useIsomorphicLayoutEffect.js.map +1 -1
- package/lib/hooks/useMergedRefs.js +1 -1
- package/lib/hooks/useOnClickOutside.js +3 -3
- package/lib/hooks/useOnClickOutside.js.map +1 -1
- package/lib/hooks/useOnScrollOutside.js +2 -2
- package/lib/hooks/useOnScrollOutside.js.map +1 -1
- package/lib/hooks/usePrevious.js +1 -1
- package/lib/hooks/useScrollbarWidth.js +2 -2
- package/lib/hooks/useScrollbarWidth.js.map +1 -1
- package/lib/hooks/useTimeout.js +2 -2
- package/lib/hooks/useTimeout.js.map +1 -1
- package/lib/index.js +8 -8
- package/lib/index.js.map +1 -1
- package/lib/selection/index.js +1 -1
- package/lib/selection/index.js.map +1 -1
- package/lib/selection/useSelection.js +3 -3
- package/lib/selection/useSelection.js.map +1 -1
- package/lib/ssr/SSRContext.js +2 -2
- package/lib/ssr/SSRContext.js.map +1 -1
- package/lib/ssr/index.js +2 -2
- package/lib/ssr/index.js.map +1 -1
- package/lib/trigger/applyTriggerPropsToChildren.js +2 -2
- package/lib/trigger/applyTriggerPropsToChildren.js.map +1 -1
- package/lib/trigger/getTriggerChild.js +2 -2
- package/lib/trigger/getTriggerChild.js.map +1 -1
- package/lib/trigger/index.js +3 -3
- package/lib/trigger/index.js.map +1 -1
- package/lib/utils/getNativeElementProps.js +1 -1
- package/lib/utils/getNativeElementProps.js.map +1 -1
- package/lib/utils/getReactElementRef.js +1 -1
- package/lib/utils/index.js +11 -11
- package/lib/utils/index.js.map +1 -1
- package/lib/utils/isInteractiveHTMLElement.js +1 -1
- package/lib/utils/isInteractiveHTMLElement.js.map +1 -1
- package/lib/virtualParent/elementContains.js +1 -1
- package/lib/virtualParent/elementContains.js.map +1 -1
- package/lib/virtualParent/getParent.js +1 -1
- package/lib/virtualParent/getParent.js.map +1 -1
- package/lib/virtualParent/index.js +3 -3
- package/lib/virtualParent/index.js.map +1 -1
- package/lib-commonjs/compose/{assertSlots.js → assertSlots.cjs} +3 -3
- package/lib-commonjs/compose/deprecated/{getSlots.js → getSlots.cjs} +3 -3
- package/lib-commonjs/compose/deprecated/{resolveShorthand.js → resolveShorthand.cjs} +1 -1
- package/lib-commonjs/compose/{getIntrinsicElementProps.js → getIntrinsicElementProps.cjs} +1 -1
- package/lib-commonjs/compose/{getSlotClassNameProp.js → getSlotClassNameProp.cjs} +1 -1
- package/lib-commonjs/compose/{index.js → index.cjs} +10 -10
- package/lib-commonjs/compose/{isSlot.js → isSlot.cjs} +1 -1
- package/lib-commonjs/compose/{slot.js → slot.cjs} +1 -1
- package/lib-commonjs/events/{index.js → index.cjs} +1 -1
- package/lib-commonjs/hooks/{index.js → index.cjs} +14 -14
- package/lib-commonjs/hooks/{useAnimationFrame.js → useAnimationFrame.cjs} +1 -1
- package/lib-commonjs/hooks/{useApplyScrollbarWidth.js → useApplyScrollbarWidth.cjs} +1 -1
- package/lib-commonjs/hooks/{useEventCallback.js → useEventCallback.cjs} +1 -1
- package/lib-commonjs/hooks/{useId.js → useId.cjs} +1 -1
- package/lib-commonjs/hooks/{useIsomorphicLayoutEffect.js → useIsomorphicLayoutEffect.cjs} +1 -1
- package/lib-commonjs/hooks/{useOnClickOutside.js → useOnClickOutside.cjs} +1 -1
- package/lib-commonjs/hooks/{useOnScrollOutside.js → useOnScrollOutside.cjs} +1 -1
- package/lib-commonjs/hooks/{useScrollbarWidth.js → useScrollbarWidth.cjs} +1 -1
- package/lib-commonjs/hooks/{useTimeout.js → useTimeout.cjs} +1 -1
- package/lib-commonjs/{index.js → index.cjs} +8 -8
- package/lib-commonjs/selection/{index.js → index.cjs} +1 -1
- package/lib-commonjs/selection/{useSelection.js → useSelection.cjs} +2 -2
- package/lib-commonjs/ssr/{SSRContext.js → SSRContext.cjs} +1 -1
- package/lib-commonjs/ssr/{index.js → index.cjs} +2 -2
- package/lib-commonjs/trigger/{applyTriggerPropsToChildren.js → applyTriggerPropsToChildren.cjs} +1 -1
- package/lib-commonjs/trigger/{getTriggerChild.js → getTriggerChild.cjs} +1 -1
- package/lib-commonjs/trigger/{index.js → index.cjs} +3 -3
- package/lib-commonjs/utils/{getNativeElementProps.js → getNativeElementProps.cjs} +1 -1
- package/lib-commonjs/utils/{index.js → index.cjs} +11 -11
- package/lib-commonjs/utils/{isInteractiveHTMLElement.js → isInteractiveHTMLElement.cjs} +1 -1
- package/lib-commonjs/virtualParent/{elementContains.js → elementContains.cjs} +1 -1
- package/lib-commonjs/virtualParent/{getParent.js → getParent.cjs} +1 -1
- package/lib-commonjs/virtualParent/{index.js → index.cjs} +3 -3
- package/package.json +16 -15
- /package/lib-commonjs/compose/{assertSlots.js.map → assertSlots.cjs.map} +0 -0
- /package/lib-commonjs/compose/{constants.js → constants.cjs} +0 -0
- /package/lib-commonjs/compose/{constants.js.map → constants.cjs.map} +0 -0
- /package/lib-commonjs/compose/deprecated/{getSlots.js.map → getSlots.cjs.map} +0 -0
- /package/lib-commonjs/compose/deprecated/{getSlotsNext.js → getSlotsNext.cjs} +0 -0
- /package/lib-commonjs/compose/deprecated/{getSlotsNext.js.map → getSlotsNext.cjs.map} +0 -0
- /package/lib-commonjs/compose/deprecated/{resolveShorthand.js.map → resolveShorthand.cjs.map} +0 -0
- /package/lib-commonjs/compose/{getIntrinsicElementProps.js.map → getIntrinsicElementProps.cjs.map} +0 -0
- /package/lib-commonjs/compose/{getSlotClassNameProp.js.map → getSlotClassNameProp.cjs.map} +0 -0
- /package/lib-commonjs/compose/{index.js.map → index.cjs.map} +0 -0
- /package/lib-commonjs/compose/{isResolvedShorthand.js → isResolvedShorthand.cjs} +0 -0
- /package/lib-commonjs/compose/{isResolvedShorthand.js.map → isResolvedShorthand.cjs.map} +0 -0
- /package/lib-commonjs/compose/{isSlot.js.map → isSlot.cjs.map} +0 -0
- /package/lib-commonjs/compose/{slot.js.map → slot.cjs.map} +0 -0
- /package/lib-commonjs/compose/{types.js → types.cjs} +0 -0
- /package/lib-commonjs/compose/{types.js.map → types.cjs.map} +0 -0
- /package/lib-commonjs/events/{index.js.map → index.cjs.map} +0 -0
- /package/lib-commonjs/events/{mouseTouchHelpers.js → mouseTouchHelpers.cjs} +0 -0
- /package/lib-commonjs/events/{mouseTouchHelpers.js.map → mouseTouchHelpers.cjs.map} +0 -0
- /package/lib-commonjs/hooks/{index.js.map → index.cjs.map} +0 -0
- /package/lib-commonjs/hooks/{useAnimationFrame.js.map → useAnimationFrame.cjs.map} +0 -0
- /package/lib-commonjs/hooks/{useApplyScrollbarWidth.js.map → useApplyScrollbarWidth.cjs.map} +0 -0
- /package/lib-commonjs/hooks/{useBrowserTimer.js → useBrowserTimer.cjs} +0 -0
- /package/lib-commonjs/hooks/{useBrowserTimer.js.map → useBrowserTimer.cjs.map} +0 -0
- /package/lib-commonjs/hooks/{useControllableState.js → useControllableState.cjs} +0 -0
- /package/lib-commonjs/hooks/{useControllableState.js.map → useControllableState.cjs.map} +0 -0
- /package/lib-commonjs/hooks/{useEventCallback.js.map → useEventCallback.cjs.map} +0 -0
- /package/lib-commonjs/hooks/{useFirstMount.js → useFirstMount.cjs} +0 -0
- /package/lib-commonjs/hooks/{useFirstMount.js.map → useFirstMount.cjs.map} +0 -0
- /package/lib-commonjs/hooks/{useForceUpdate.js → useForceUpdate.cjs} +0 -0
- /package/lib-commonjs/hooks/{useForceUpdate.js.map → useForceUpdate.cjs.map} +0 -0
- /package/lib-commonjs/hooks/{useId.js.map → useId.cjs.map} +0 -0
- /package/lib-commonjs/hooks/{useIsomorphicLayoutEffect.js.map → useIsomorphicLayoutEffect.cjs.map} +0 -0
- /package/lib-commonjs/hooks/{useMergedRefs.js → useMergedRefs.cjs} +0 -0
- /package/lib-commonjs/hooks/{useMergedRefs.js.map → useMergedRefs.cjs.map} +0 -0
- /package/lib-commonjs/hooks/{useOnClickOutside.js.map → useOnClickOutside.cjs.map} +0 -0
- /package/lib-commonjs/hooks/{useOnScrollOutside.js.map → useOnScrollOutside.cjs.map} +0 -0
- /package/lib-commonjs/hooks/{usePrevious.js → usePrevious.cjs} +0 -0
- /package/lib-commonjs/hooks/{usePrevious.js.map → usePrevious.cjs.map} +0 -0
- /package/lib-commonjs/hooks/{useScrollbarWidth.js.map → useScrollbarWidth.cjs.map} +0 -0
- /package/lib-commonjs/hooks/{useTimeout.js.map → useTimeout.cjs.map} +0 -0
- /package/lib-commonjs/{index.js.map → index.cjs.map} +0 -0
- /package/lib-commonjs/selection/{index.js.map → index.cjs.map} +0 -0
- /package/lib-commonjs/selection/{types.js → types.cjs} +0 -0
- /package/lib-commonjs/selection/{types.js.map → types.cjs.map} +0 -0
- /package/lib-commonjs/selection/{useSelection.js.map → useSelection.cjs.map} +0 -0
- /package/lib-commonjs/ssr/{SSRContext.js.map → SSRContext.cjs.map} +0 -0
- /package/lib-commonjs/ssr/{canUseDOM.js → canUseDOM.cjs} +0 -0
- /package/lib-commonjs/ssr/{canUseDOM.js.map → canUseDOM.cjs.map} +0 -0
- /package/lib-commonjs/ssr/{index.js.map → index.cjs.map} +0 -0
- /package/lib-commonjs/trigger/{applyTriggerPropsToChildren.js.map → applyTriggerPropsToChildren.cjs.map} +0 -0
- /package/lib-commonjs/trigger/{getTriggerChild.js.map → getTriggerChild.cjs.map} +0 -0
- /package/lib-commonjs/trigger/{index.js.map → index.cjs.map} +0 -0
- /package/lib-commonjs/trigger/{isFluentTrigger.js → isFluentTrigger.cjs} +0 -0
- /package/lib-commonjs/trigger/{isFluentTrigger.js.map → isFluentTrigger.cjs.map} +0 -0
- /package/lib-commonjs/trigger/{types.js → types.cjs} +0 -0
- /package/lib-commonjs/trigger/{types.js.map → types.cjs.map} +0 -0
- /package/lib-commonjs/utils/{clamp.js → clamp.cjs} +0 -0
- /package/lib-commonjs/utils/{clamp.js.map → clamp.cjs.map} +0 -0
- /package/lib-commonjs/utils/{createSetFromIterable.js → createSetFromIterable.cjs} +0 -0
- /package/lib-commonjs/utils/{createSetFromIterable.js.map → createSetFromIterable.cjs.map} +0 -0
- /package/lib-commonjs/utils/{getNativeElementProps.js.map → getNativeElementProps.cjs.map} +0 -0
- /package/lib-commonjs/utils/{getRTLSafeKey.js → getRTLSafeKey.cjs} +0 -0
- /package/lib-commonjs/utils/{getRTLSafeKey.js.map → getRTLSafeKey.cjs.map} +0 -0
- /package/lib-commonjs/utils/{getReactCallbackName.js → getReactCallbackName.cjs} +0 -0
- /package/lib-commonjs/utils/{getReactCallbackName.js.map → getReactCallbackName.cjs.map} +0 -0
- /package/lib-commonjs/utils/{getReactElementRef.js → getReactElementRef.cjs} +0 -0
- /package/lib-commonjs/utils/{getReactElementRef.js.map → getReactElementRef.cjs.map} +0 -0
- /package/lib-commonjs/utils/{index.js.map → index.cjs.map} +0 -0
- /package/lib-commonjs/utils/{isHTMLElement.js → isHTMLElement.cjs} +0 -0
- /package/lib-commonjs/utils/{isHTMLElement.js.map → isHTMLElement.cjs.map} +0 -0
- /package/lib-commonjs/utils/{isInteractiveHTMLElement.js.map → isInteractiveHTMLElement.cjs.map} +0 -0
- /package/lib-commonjs/utils/{measureScrollBarWidth.js → measureScrollBarWidth.cjs} +0 -0
- /package/lib-commonjs/utils/{measureScrollBarWidth.js.map → measureScrollBarWidth.cjs.map} +0 -0
- /package/lib-commonjs/utils/{mergeCallbacks.js → mergeCallbacks.cjs} +0 -0
- /package/lib-commonjs/utils/{mergeCallbacks.js.map → mergeCallbacks.cjs.map} +0 -0
- /package/lib-commonjs/utils/{omit.js → omit.cjs} +0 -0
- /package/lib-commonjs/utils/{omit.js.map → omit.cjs.map} +0 -0
- /package/lib-commonjs/utils/{priorityQueue.js → priorityQueue.cjs} +0 -0
- /package/lib-commonjs/utils/{priorityQueue.js.map → priorityQueue.cjs.map} +0 -0
- /package/lib-commonjs/utils/{properties.js → properties.cjs} +0 -0
- /package/lib-commonjs/utils/{properties.js.map → properties.cjs.map} +0 -0
- /package/lib-commonjs/utils/{types.js → types.cjs} +0 -0
- /package/lib-commonjs/utils/{types.js.map → types.cjs.map} +0 -0
- /package/lib-commonjs/virtualParent/{elementContains.js.map → elementContains.cjs.map} +0 -0
- /package/lib-commonjs/virtualParent/{getParent.js.map → getParent.cjs.map} +0 -0
- /package/lib-commonjs/virtualParent/{index.js.map → index.cjs.map} +0 -0
- /package/lib-commonjs/virtualParent/{isVirtualElement.js → isVirtualElement.cjs} +0 -0
- /package/lib-commonjs/virtualParent/{isVirtualElement.js.map → isVirtualElement.cjs.map} +0 -0
- /package/lib-commonjs/virtualParent/{setVirtualParent.js → setVirtualParent.cjs} +0 -0
- /package/lib-commonjs/virtualParent/{setVirtualParent.js.map → setVirtualParent.cjs.map} +0 -0
- /package/lib-commonjs/virtualParent/{types.js → types.cjs} +0 -0
- /package/lib-commonjs/virtualParent/{types.js.map → types.cjs.map} +0 -0
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,1249 @@
|
|
|
1
|
+
import * as React_2 from 'react';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Creates a slot from a slot shorthand or properties (`props.SLOT_NAME` or `props` itself)
|
|
5
|
+
* @param value - the value of the slot, it can be a slot shorthand, a slot component or a slot properties
|
|
6
|
+
* @param options - values you can pass to alter the signature of a slot, those values are:
|
|
7
|
+
*
|
|
8
|
+
* * `elementType` - the base element type of a slot, defaults to `'div'`
|
|
9
|
+
* * `defaultProps` - similar to a React component declaration, you can provide a slot default properties to be merged with the shorthand/properties provided.
|
|
10
|
+
*/
|
|
11
|
+
declare function always<Props extends UnknownSlotProps>(value: Props | SlotShorthandValue | undefined, options: SlotOptions<Props>): SlotComponentType<Props>;
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* resolve the trigger props to the children, either by calling the render function, or cloning with the new props.
|
|
15
|
+
*
|
|
16
|
+
* @internal
|
|
17
|
+
*/
|
|
18
|
+
export declare function applyTriggerPropsToChildren<TriggerChildProps>(children: TriggerProps<TriggerChildProps>['children'], triggerChildProps: TriggerChildProps): React_2.ReactElement | null;
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Helper type for inferring the type of the as prop from a Props type.
|
|
22
|
+
*
|
|
23
|
+
* For example:
|
|
24
|
+
* ```
|
|
25
|
+
* type Example<T> = T extends AsIntrinsicElement<infer As> ? As : never;
|
|
26
|
+
* ```
|
|
27
|
+
*/
|
|
28
|
+
declare type AsIntrinsicElement<As extends JSXIntrinsicElementKeys> = {
|
|
29
|
+
as?: As;
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* Assertion method to ensure state slots properties are properly declared.
|
|
34
|
+
* A properly declared slot must be declared by using the `slot` method.
|
|
35
|
+
*
|
|
36
|
+
* @internal
|
|
37
|
+
* @example
|
|
38
|
+
* ```tsx
|
|
39
|
+
* export const renderInput_unstable = (state: InputState): JSXElement => {
|
|
40
|
+
* assertSlots<InputSlots>(state);
|
|
41
|
+
* return (
|
|
42
|
+
* <state.root>
|
|
43
|
+
* {state.contentBefore && <state.contentBefore />}
|
|
44
|
+
* <state.input />
|
|
45
|
+
* {state.contentAfter && <state.contentAfter />}
|
|
46
|
+
* </state.root>
|
|
47
|
+
* );
|
|
48
|
+
* };
|
|
49
|
+
* ```
|
|
50
|
+
*/
|
|
51
|
+
export declare function assertSlots<Slots extends SlotPropsRecord>(state: unknown): asserts state is SlotComponents<Slots>;
|
|
52
|
+
|
|
53
|
+
/**
|
|
54
|
+
* Verifies if an application can use DOM.
|
|
55
|
+
*/
|
|
56
|
+
export declare function canUseDOM(): boolean;
|
|
57
|
+
|
|
58
|
+
/**
|
|
59
|
+
* Clamps `value` to a number between the min and max.
|
|
60
|
+
*
|
|
61
|
+
* @internal
|
|
62
|
+
* @param value - the value to be clamped
|
|
63
|
+
* @param min - the lowest valid value
|
|
64
|
+
* @param max - the highest valid value
|
|
65
|
+
*/
|
|
66
|
+
export declare const clamp: (value: number, min: number, max: number) => number;
|
|
67
|
+
|
|
68
|
+
/**
|
|
69
|
+
* **THIS TYPE IS INTERNAL AND SHOULD NEVER BE EXPOSED**
|
|
70
|
+
*
|
|
71
|
+
* @internal
|
|
72
|
+
*/
|
|
73
|
+
declare interface ComponentClass<P = {}, S = React_2.ComponentState> extends React_2.StaticLifecycle<P, S> {
|
|
74
|
+
new (props: P): React_2.Component<P, S>;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/**
|
|
78
|
+
* Defines the Props type for a component given its slots and the definition of which one is the primary slot,
|
|
79
|
+
* defaulting to root if one is not provided.
|
|
80
|
+
*/
|
|
81
|
+
export declare type ComponentProps<Slots extends SlotPropsRecord, Primary extends keyof Slots = 'root'> = Omit<Slots, Primary & 'root'> & PropsWithoutRef<ExtractSlotProps<Slots[Primary]>>;
|
|
82
|
+
|
|
83
|
+
/**
|
|
84
|
+
* Defines the State object of a component given its slots.
|
|
85
|
+
*/
|
|
86
|
+
export declare type ComponentState<Slots extends SlotPropsRecord> = {
|
|
87
|
+
/**
|
|
88
|
+
* @deprecated
|
|
89
|
+
* The base element type for each slot.
|
|
90
|
+
* This property is deprecated and will be removed in a future version.
|
|
91
|
+
* The slot base element type is declared through `slot.*(slotShorthand, {elementType: ElementType})` instead.
|
|
92
|
+
*/
|
|
93
|
+
components: {
|
|
94
|
+
[Key in keyof Slots]-?: React_2.ElementType;
|
|
95
|
+
};
|
|
96
|
+
} & {
|
|
97
|
+
[Key in keyof Slots]: ReplaceNullWithUndefined<WithoutSlotRenderFunction<Exclude<Slots[Key], SlotShorthandValue | (Key extends 'root' ? null : never)>>>;
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
/**
|
|
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
|
+
* @internal
|
|
108
|
+
*/
|
|
109
|
+
declare type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;
|
|
110
|
+
|
|
111
|
+
/**
|
|
112
|
+
* @internal
|
|
113
|
+
* @param compare - comparison function for items
|
|
114
|
+
* @returns Priority queue implemented with a min heap
|
|
115
|
+
*/
|
|
116
|
+
export declare function createPriorityQueue<T>(compare: PriorityQueueCompareFn<T>): PriorityQueue<T>;
|
|
117
|
+
|
|
118
|
+
/**
|
|
119
|
+
* Helper type that works similar to Omit,
|
|
120
|
+
* but when modifying an union type it will distribute the omission to all the union members.
|
|
121
|
+
*
|
|
122
|
+
* See [distributive conditional types](https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#distributive-conditional-types) for more information
|
|
123
|
+
*/
|
|
124
|
+
export declare type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit<T, K> : T;
|
|
125
|
+
|
|
126
|
+
/**
|
|
127
|
+
* Similar functionality to `element.contains` DOM API for use without of order DOM elements that
|
|
128
|
+
* checks the virtual parent hierarchy. If a virtual parents exists, it is chosen over the actual parent
|
|
129
|
+
*
|
|
130
|
+
* @internal
|
|
131
|
+
* @returns true if the child can find the parent in its virtual hierarchy
|
|
132
|
+
*/
|
|
133
|
+
export declare function elementContains(parent: Node | null, child: Node | null): boolean;
|
|
134
|
+
|
|
135
|
+
/**
|
|
136
|
+
* HTML element types that are not allowed to have children.
|
|
137
|
+
*
|
|
138
|
+
* Reference: https://developer.mozilla.org/en-US/docs/Glossary/Empty_element
|
|
139
|
+
*/
|
|
140
|
+
declare type EmptyIntrinsicElements = 'area' | 'base' | 'br' | 'col' | 'embed' | 'hr' | 'img' | 'input' | 'link' | 'meta' | 'param' | 'source' | 'track' | 'wbr';
|
|
141
|
+
|
|
142
|
+
/**
|
|
143
|
+
* Data type for event handlers. It makes data a discriminated union, where each object requires `event` and `type` property.
|
|
144
|
+
* - `event` is the specific event type
|
|
145
|
+
* - `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.
|
|
146
|
+
* 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 }`.
|
|
147
|
+
* Developers can use the `type` property to identify and filter events of interest.
|
|
148
|
+
* See RFC event-handlers-event-type.md for more details.
|
|
149
|
+
*
|
|
150
|
+
* Example usage:
|
|
151
|
+
* type OnOpenChangeData = (
|
|
152
|
+
* | EventData\<'click', React.MouseEvent\<MyComponentElement\>\>
|
|
153
|
+
* | EventData\<'keydown', React.KeyboardEvent\<MyComponentElement\>\>
|
|
154
|
+
* ) & \{ open: boolean; \};
|
|
155
|
+
*/
|
|
156
|
+
export declare type EventData<Type extends string, TEvent> = {
|
|
157
|
+
type: undefined;
|
|
158
|
+
event: React_2.SyntheticEvent | Event;
|
|
159
|
+
} | {
|
|
160
|
+
type: Type;
|
|
161
|
+
event: TEvent;
|
|
162
|
+
};
|
|
163
|
+
|
|
164
|
+
/**
|
|
165
|
+
* Type for props that are event handlers.
|
|
166
|
+
* See RFC event-handlers-event-type.md for more details.
|
|
167
|
+
*
|
|
168
|
+
* Example usage:
|
|
169
|
+
* type OnSomeEventData = EventData\<'click', React.MouseEvent\<MyComponentElement\>\> & \{ open: boolean; \};
|
|
170
|
+
* type SomeProps = \{ onSomeEvent?: EventHandler\<OnSomeEventData\>; \};
|
|
171
|
+
*/
|
|
172
|
+
export declare type EventHandler<TData extends EventData<string, unknown>> = (ev: React_2.SyntheticEvent | Event, data: TData) => void;
|
|
173
|
+
|
|
174
|
+
declare interface ExoticComponent<P> {
|
|
175
|
+
(props: P): any;
|
|
176
|
+
$$typeof: symbol;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
/**
|
|
180
|
+
* Removes SlotShorthandValue and null from the slot type, extracting just the slot's Props object.
|
|
181
|
+
*/
|
|
182
|
+
export declare type ExtractSlotProps<S> = Exclude<S, SlotShorthandValue | null | undefined>;
|
|
183
|
+
|
|
184
|
+
/**
|
|
185
|
+
* Allows a component to be tagged as a FluentUI trigger component.
|
|
186
|
+
*
|
|
187
|
+
* Triggers are special-case components: they attach event listeners and other props on their child,
|
|
188
|
+
* and use them to trigger another component to show. Examples include `MenuTrigger` and `Tooltip`.
|
|
189
|
+
*
|
|
190
|
+
* A component can be tagged as a trigger as follows:
|
|
191
|
+
* ```ts
|
|
192
|
+
* const MyComponent: React.FC<MyComponentProps> & FluentTriggerComponent = ...;
|
|
193
|
+
*
|
|
194
|
+
* MyComponent.isFluentTriggerComponent = true; // MUST also set this to true
|
|
195
|
+
* ```
|
|
196
|
+
*
|
|
197
|
+
* @internal
|
|
198
|
+
*/
|
|
199
|
+
export declare type FluentTriggerComponent = {
|
|
200
|
+
isFluentTriggerComponent?: boolean;
|
|
201
|
+
};
|
|
202
|
+
|
|
203
|
+
/**
|
|
204
|
+
* Return type for `React.forwardRef`, including inference of the proper typing for the ref.
|
|
205
|
+
*
|
|
206
|
+
* @remarks
|
|
207
|
+
* {@link React.RefAttributes} is {@link https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/69756 | leaking string references} into `forwardRef` components
|
|
208
|
+
* after introducing {@link https://github.com/DefinitelyTyped/DefinitelyTyped/pull/68720 | RefAttributes Type Extension}, which shipped in `@types/react@18.2.61`
|
|
209
|
+
* - `forwardRef` component do not support string refs.
|
|
210
|
+
* - uses custom `RefAttributes` which is compatible with all React versions enforcing no `string` allowance.
|
|
211
|
+
*/
|
|
212
|
+
export declare type ForwardRefComponent<Props> = NamedExoticComponent<Props & RefAttributes<InferredElementRefType<Props>>>;
|
|
213
|
+
|
|
214
|
+
/**
|
|
215
|
+
* On types/react 18 there are two types being delivered,
|
|
216
|
+
* they rely on the typescript version to decide which will be consumed {@link https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b59dc3ac1e2770fbd6cdbb90ba52abe04c168196/types/react/package.json#L10}
|
|
217
|
+
*
|
|
218
|
+
* If TS is higher than 5.0 then the `FunctionComponent` will be returning ReactNode (which we don't support)
|
|
219
|
+
* If TS is below or equal to 5.0 then the `FunctionComponent` will be returning ReactElement | null (which we support)
|
|
220
|
+
*
|
|
221
|
+
* Since it's not possible to have a single type that works for both cases
|
|
222
|
+
* (as ReactNode is more specific, and this will break while evaluating functions),
|
|
223
|
+
* we need to create our own `FunctionComponent` type
|
|
224
|
+
* that will work for both cases.
|
|
225
|
+
*
|
|
226
|
+
* **THIS TYPE IS INTERNAL AND SHOULD NEVER BE EXPOSED**
|
|
227
|
+
*
|
|
228
|
+
* @internal
|
|
229
|
+
*/
|
|
230
|
+
declare interface FunctionComponent<P> {
|
|
231
|
+
(props: P): any;
|
|
232
|
+
displayName?: string;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
/**
|
|
236
|
+
* Returns an object with clientX, clientY for TouchOrMouseEvent.
|
|
237
|
+
* Returns zeros in case the event is not a mouse or a touch event.
|
|
238
|
+
*/
|
|
239
|
+
export declare function getEventClientCoords(event: TouchOrMouseEvent): {
|
|
240
|
+
clientX: number;
|
|
241
|
+
clientY: number;
|
|
242
|
+
};
|
|
243
|
+
|
|
244
|
+
/**
|
|
245
|
+
* Given an element tagname and user props, filters the props to only allowed props for the given
|
|
246
|
+
* element type.
|
|
247
|
+
*
|
|
248
|
+
* Equivalent to {@link getNativeElementProps}, but more type-safe.
|
|
249
|
+
*
|
|
250
|
+
* @param tagName - The slot's default element type (e.g. 'div')
|
|
251
|
+
* @param props - The component's props object
|
|
252
|
+
* @param excludedPropNames - List of native props to exclude from the returned value
|
|
253
|
+
*/
|
|
254
|
+
export declare const getIntrinsicElementProps: <Props extends UnknownSlotProps, ExcludedPropKeys extends Extract<keyof Props, string> = never>(tagName: NonNullable<Props["as"]>, props: Props & React_2.RefAttributes<InferredElementRefType<Props>>, excludedPropNames?: ExcludedPropKeys[]) => DistributiveOmit<Props, ExcludedPropKeys | Exclude<keyof Props, "as" | keyof HTMLAttributes>>;
|
|
255
|
+
|
|
256
|
+
/**
|
|
257
|
+
* Given an element tagname and user props, filters the props to only allowed props for the given
|
|
258
|
+
* element type.
|
|
259
|
+
* @param tagName - Tag name (e.g. "div")
|
|
260
|
+
* @param props - Props object
|
|
261
|
+
* @param excludedPropNames - List of props to disallow
|
|
262
|
+
*
|
|
263
|
+
* @deprecated use getIntrinsicElementProps instead, it is a type-safe version of this method
|
|
264
|
+
*/
|
|
265
|
+
export declare function getNativeElementProps<TAttributes extends React_2.HTMLAttributes<any>>(tagName: string, props: {}, excludedPropNames?: string[]): TAttributes;
|
|
266
|
+
|
|
267
|
+
/**
|
|
268
|
+
* Gets the element which is the parent of a given element.
|
|
269
|
+
* This method prefers the virtual parent over real DOM parent when present.
|
|
270
|
+
* @internal
|
|
271
|
+
*/
|
|
272
|
+
export declare function getParent(child: Node | null, options?: GetParentOptions): Node | null;
|
|
273
|
+
|
|
274
|
+
declare type GetParentOptions = {
|
|
275
|
+
/**
|
|
276
|
+
* Indicates if getParent() should ignore a virtual parent.
|
|
277
|
+
* @internal
|
|
278
|
+
*/
|
|
279
|
+
skipVirtual?: boolean;
|
|
280
|
+
};
|
|
281
|
+
|
|
282
|
+
/**
|
|
283
|
+
* Splits the native props into ones that go to the `root` slot, and ones that go to the primary slot.
|
|
284
|
+
*
|
|
285
|
+
* This function is only for use with components that have a primary slot other than `root`.
|
|
286
|
+
* Most components should use {@link getNativeElementProps} for their root slot if it is the primary slot.
|
|
287
|
+
*
|
|
288
|
+
* @returns An object containing the native props for the `root` and primary slots.
|
|
289
|
+
*/
|
|
290
|
+
export declare const getPartitionedNativeProps: <Props extends Pick<React_2.HTMLAttributes<HTMLElement>, "style" | "className">, ExcludedPropKeys extends Extract<keyof Props, string> = never>({ primarySlotTagName, props, excludedPropNames, }: {
|
|
291
|
+
/** The primary slot's element type (e.g. 'div') */
|
|
292
|
+
primarySlotTagName: JSXIntrinsicElementKeys;
|
|
293
|
+
/** The component's props object */
|
|
294
|
+
props: Props;
|
|
295
|
+
/** List of native props to exclude from the returned value */
|
|
296
|
+
excludedPropNames?: ExcludedPropKeys[];
|
|
297
|
+
}) => {
|
|
298
|
+
root: {
|
|
299
|
+
style: React_2.CSSProperties | undefined;
|
|
300
|
+
className: string | undefined;
|
|
301
|
+
};
|
|
302
|
+
primary: Omit<Props, ExcludedPropKeys>;
|
|
303
|
+
};
|
|
304
|
+
|
|
305
|
+
/**
|
|
306
|
+
* Returns a ref for the React element in a backwards-compatible way.
|
|
307
|
+
*
|
|
308
|
+
* @param element - The element to get the ref for.
|
|
309
|
+
* @returns The ref for the element.
|
|
310
|
+
*/
|
|
311
|
+
export declare function getReactElementRef<T>(element: React_2.ReactElement | null | undefined): React_2.Ref<T> | undefined;
|
|
312
|
+
|
|
313
|
+
/**
|
|
314
|
+
* Finds and swaps a provided key for it's right to left format.
|
|
315
|
+
*
|
|
316
|
+
* @internal
|
|
317
|
+
*/
|
|
318
|
+
export declare const getRTLSafeKey: (key: string, dir: "ltr" | "rtl") => string;
|
|
319
|
+
|
|
320
|
+
/**
|
|
321
|
+
* Get the className prop set on the slot by the user, without including the default classes added by the component.
|
|
322
|
+
* Custom style hooks should merge this className _after_ any additional classes added by the hook, to ensure that
|
|
323
|
+
* classes added by the user take precedence over the custom style hook.
|
|
324
|
+
*
|
|
325
|
+
* Example usage in a custom style hook:
|
|
326
|
+
* ```ts
|
|
327
|
+
* state.root.className = mergeClasses(
|
|
328
|
+
* state.root.className,
|
|
329
|
+
* customStyles.root,
|
|
330
|
+
* getSlotClassNameProp_unstable(state.root));
|
|
331
|
+
* ```
|
|
332
|
+
*
|
|
333
|
+
* @returns The className prop set on the slot by the user, or undefined if not set.
|
|
334
|
+
*/
|
|
335
|
+
export declare const getSlotClassNameProp_unstable: (slot: UnknownSlotProps) => string | undefined;
|
|
336
|
+
|
|
337
|
+
/**
|
|
338
|
+
* Given the state and an array of slot names, will break out `slots` and `slotProps`
|
|
339
|
+
* collections.
|
|
340
|
+
*
|
|
341
|
+
* The root is derived from a mix of `components` props and `as` prop.
|
|
342
|
+
*
|
|
343
|
+
* Slots will render as null if they are rendered as primitives with undefined children.
|
|
344
|
+
*
|
|
345
|
+
* The slotProps will always omit the `as` prop within them, and for slots that are string
|
|
346
|
+
* primitives, the props will be filtered according to the slot type by the type system.
|
|
347
|
+
* For example, if the slot is rendered `as: 'a'`, the props will be filtered for acceptable
|
|
348
|
+
* anchor props. Note that this is only enforced at build time by Typescript -- there is no
|
|
349
|
+
* runtime code filtering props in this function.
|
|
350
|
+
*
|
|
351
|
+
* @deprecated use slot.always or slot.optional combined with assertSlots instead
|
|
352
|
+
*
|
|
353
|
+
* @param state - State including slot definitions
|
|
354
|
+
* @returns An object containing the `slots` map and `slotProps` map.
|
|
355
|
+
*/
|
|
356
|
+
export declare function getSlots<R extends SlotPropsRecord>(state: unknown): {
|
|
357
|
+
slots: Slots<R>;
|
|
358
|
+
slotProps: ObjectSlotProps<R>;
|
|
359
|
+
};
|
|
360
|
+
|
|
361
|
+
/**
|
|
362
|
+
* Similar to `getSlots`, main difference is that it's compatible with new custom jsx pragma
|
|
363
|
+
*
|
|
364
|
+
* This is an internal temporary method, this method will cease to exist eventually!
|
|
365
|
+
*
|
|
366
|
+
* * ❗️❗️ **DO NOT USE IT EXTERNALLY** ❗️❗️
|
|
367
|
+
*
|
|
368
|
+
* @internal
|
|
369
|
+
* @deprecated use slot.always or slot.optional combined with assertSlots instead
|
|
370
|
+
*/
|
|
371
|
+
export declare function getSlotsNext<R extends SlotPropsRecord>(state: unknown): {
|
|
372
|
+
slots: Slots<R>;
|
|
373
|
+
slotProps: ObjectSlotProps<R>;
|
|
374
|
+
};
|
|
375
|
+
|
|
376
|
+
/**
|
|
377
|
+
* Gets the trigger element of a FluentTriggerComponent (such as Tooltip or MenuTrigger).
|
|
378
|
+
*
|
|
379
|
+
* In the case where the immediate child is itself a FluentTriggerComponent and/or React Fragment,
|
|
380
|
+
* it returns the first descendant that is _not_ a FluentTriggerComponent or Fragment.
|
|
381
|
+
* This allows multiple triggers to be stacked, and still apply their props to the actual trigger element.
|
|
382
|
+
*
|
|
383
|
+
* For example, the following returns `<div id="child" />`:
|
|
384
|
+
* ```jsx
|
|
385
|
+
* getTriggerChild(
|
|
386
|
+
* <Tooltip>
|
|
387
|
+
* <MenuTrigger>
|
|
388
|
+
* <div id="child" />
|
|
389
|
+
* </MenuTrigger>
|
|
390
|
+
* </Tooltip>
|
|
391
|
+
* );
|
|
392
|
+
* ```
|
|
393
|
+
*
|
|
394
|
+
* In the case where the immediate child is not a valid element,
|
|
395
|
+
* null is returned
|
|
396
|
+
*
|
|
397
|
+
* @internal
|
|
398
|
+
*/
|
|
399
|
+
export declare function getTriggerChild<TriggerChildProps>(children: TriggerProps<TriggerChildProps>['children']): (React_2.ReactElement<Partial<TriggerChildProps>> & {
|
|
400
|
+
ref?: React_2.Ref<any>;
|
|
401
|
+
}) | null;
|
|
402
|
+
|
|
403
|
+
declare type HTMLAttributes = React_2.HTMLAttributes<any>;
|
|
404
|
+
|
|
405
|
+
declare type HTMLElementConstructorName = 'HTMLElement' | 'HTMLAnchorElement' | 'HTMLAreaElement' | 'HTMLAudioElement' | 'HTMLBaseElement' | 'HTMLBodyElement' | 'HTMLBRElement' | 'HTMLButtonElement' | 'HTMLCanvasElement' | 'HTMLDataElement' | 'HTMLDataListElement' | 'HTMLDetailsElement' | 'HTMLDivElement' | 'HTMLDListElement' | 'HTMLEmbedElement' | 'HTMLFieldSetElement' | 'HTMLFormElement' | 'HTMLHeadingElement' | 'HTMLHeadElement' | 'HTMLHRElement' | 'HTMLHtmlElement' | 'HTMLIFrameElement' | 'HTMLImageElement' | 'HTMLInputElement' | 'HTMLModElement' | 'HTMLLabelElement' | 'HTMLLegendElement' | 'HTMLLIElement' | 'HTMLLinkElement' | 'HTMLMapElement' | 'HTMLMetaElement' | 'HTMLMeterElement' | 'HTMLObjectElement' | 'HTMLOListElement' | 'HTMLOptGroupElement' | 'HTMLOptionElement' | 'HTMLOutputElement' | 'HTMLParagraphElement' | 'HTMLParamElement' | 'HTMLPreElement' | 'HTMLProgressElement' | 'HTMLQuoteElement' | 'HTMLSlotElement' | 'HTMLScriptElement' | 'HTMLSelectElement' | 'HTMLSourceElement' | 'HTMLSpanElement' | 'HTMLStyleElement' | 'HTMLTableElement' | 'HTMLTableColElement' | 'HTMLTableRowElement' | 'HTMLTableSectionElement' | 'HTMLTemplateElement' | 'HTMLTextAreaElement' | 'HTMLTimeElement' | 'HTMLTitleElement' | 'HTMLTrackElement' | 'HTMLUListElement' | 'HTMLVideoElement';
|
|
406
|
+
|
|
407
|
+
/**
|
|
408
|
+
* Allows to define a prefix that will be used for all IDs generated by useId() hook. It's useful to avoid collisions
|
|
409
|
+
* between different bundles.
|
|
410
|
+
*/
|
|
411
|
+
export declare const IdPrefixProvider: React_2.Provider<string | undefined>;
|
|
412
|
+
|
|
413
|
+
/**
|
|
414
|
+
* Infers the element type from props that are declared using ComponentProps.
|
|
415
|
+
*/
|
|
416
|
+
export declare type InferredElementRefType<Props> = ObscureEventName extends keyof Props ? Required<Props>[ObscureEventName] extends React_2.PointerEventHandler<infer Element> ? Element : never : never;
|
|
417
|
+
|
|
418
|
+
/**
|
|
419
|
+
* Helper type for {@link Slot}. Modifies `JSXIntrinsicElements<Type>`:
|
|
420
|
+
* * Removes legacy string ref.
|
|
421
|
+
* * Disallows children for empty tags like 'img'.
|
|
422
|
+
*/
|
|
423
|
+
declare type IntrinsicElementProps<Type extends JSXIntrinsicElementKeys> = Type extends EmptyIntrinsicElements ? PropsWithoutChildren<React_2.PropsWithRef<JSXIntrinsicElement<Type>>> : React_2.PropsWithRef<JSXIntrinsicElement<Type>>;
|
|
424
|
+
|
|
425
|
+
/**
|
|
426
|
+
* Checks if a given element is a FluentUI trigger (e.g. `MenuTrigger` or `Tooltip`).
|
|
427
|
+
* See the {@link FluentTriggerComponent} type for more info.
|
|
428
|
+
*
|
|
429
|
+
* @internal
|
|
430
|
+
*/
|
|
431
|
+
export declare function isFluentTrigger(element: React_2.ReactElement): element is React_2.ReactElement<TriggerProps>;
|
|
432
|
+
|
|
433
|
+
/**
|
|
434
|
+
* Verifies if a given node is an HTMLElement,
|
|
435
|
+
* this method works seamlessly with frames and elements from different documents
|
|
436
|
+
*
|
|
437
|
+
* This is preferred over simply using `instanceof`.
|
|
438
|
+
* Since `instanceof` might be problematic while operating with [multiple realms](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof#instanceof_and_multiple_realms)
|
|
439
|
+
*
|
|
440
|
+
* @example
|
|
441
|
+
* ```ts
|
|
442
|
+
* isHTMLElement(event.target) && event.target.focus()
|
|
443
|
+
* isHTMLElement(event.target, {constructorName: 'HTMLInputElement'}) && event.target.value // some value
|
|
444
|
+
* ```
|
|
445
|
+
*
|
|
446
|
+
*/
|
|
447
|
+
export declare function isHTMLElement<ConstructorName extends HTMLElementConstructorName = 'HTMLElement'>(element?: unknown, options?: {
|
|
448
|
+
/**
|
|
449
|
+
* Can be used to provide a custom constructor instead of `HTMLElement`,
|
|
450
|
+
* Like `HTMLInputElement` for example.
|
|
451
|
+
*/
|
|
452
|
+
constructorName?: ConstructorName;
|
|
453
|
+
}): element is InstanceType<(typeof globalThis)[ConstructorName]>;
|
|
454
|
+
|
|
455
|
+
/**
|
|
456
|
+
* Checks that the element has default behaviour from user input on click or 'Enter'/'Space' keys
|
|
457
|
+
*
|
|
458
|
+
* @internal
|
|
459
|
+
*/
|
|
460
|
+
export declare function isInteractiveHTMLElement(element: unknown): boolean;
|
|
461
|
+
|
|
462
|
+
/**
|
|
463
|
+
* Returns true if event is a mouse event. Useful when sharing logic between touch and mouse interactions.
|
|
464
|
+
*/
|
|
465
|
+
export declare function isMouseEvent(event: TouchOrMouseEvent): event is MouseEvent | React_2.MouseEvent;
|
|
466
|
+
|
|
467
|
+
/**
|
|
468
|
+
* Guard method that validates if a shorthand is a slot
|
|
469
|
+
* can be used to extends properties provided by a slot
|
|
470
|
+
*
|
|
471
|
+
* @example
|
|
472
|
+
* ```
|
|
473
|
+
* const backdropSlot = resolveShorthand(backdrop, {
|
|
474
|
+
* defaultProps: {
|
|
475
|
+
* onClick: useEventCallback(event => {
|
|
476
|
+
* if (isResolvedShorthand(backdrop)) {
|
|
477
|
+
* backdrop.onClick?.(event)
|
|
478
|
+
* }
|
|
479
|
+
* // do something after passing click down the line
|
|
480
|
+
* }),
|
|
481
|
+
* },
|
|
482
|
+
* })
|
|
483
|
+
* ```
|
|
484
|
+
* @example
|
|
485
|
+
* ```
|
|
486
|
+
* const handleBackDropClick = (event) => {
|
|
487
|
+
* // do your thing
|
|
488
|
+
* }
|
|
489
|
+
* const backdropSlot = resolveShorthand(backdrop, {
|
|
490
|
+
* defaultProps: {
|
|
491
|
+
* onClick: useEventCallback(
|
|
492
|
+
* mergeCallbacks(isResolvedShorthand(backdrop) ? backdrop.onClick : undefined, handleBackdropClick)
|
|
493
|
+
* )
|
|
494
|
+
* })
|
|
495
|
+
* ```
|
|
496
|
+
*/
|
|
497
|
+
export declare function isResolvedShorthand<Shorthand extends Slot<UnknownSlotProps>>(shorthand?: Shorthand): shorthand is ExtractSlotProps<Shorthand>;
|
|
498
|
+
|
|
499
|
+
/**
|
|
500
|
+
* Evaluates to true if the given type contains exactly one string, or false if it is a union of strings.
|
|
501
|
+
*
|
|
502
|
+
* ```
|
|
503
|
+
* IsSingleton<'a'> // true
|
|
504
|
+
* IsSingleton<'a' | 'b' | 'c'> // false
|
|
505
|
+
* ```
|
|
506
|
+
*/
|
|
507
|
+
declare type IsSingleton<T extends string> = {
|
|
508
|
+
[K in T]: Exclude<T, K> extends never ? true : false;
|
|
509
|
+
}[T];
|
|
510
|
+
|
|
511
|
+
/**
|
|
512
|
+
* Guard method to ensure a given element is a slot.
|
|
513
|
+
* This is mainly used internally to ensure a slot is being used as a component.
|
|
514
|
+
*/
|
|
515
|
+
export declare function isSlot<Props extends {}>(element: unknown): element is SlotComponentType<Props>;
|
|
516
|
+
|
|
517
|
+
/**
|
|
518
|
+
* Returns true if event is a touch event. Useful when sharing logic between touch and mouse interactions.
|
|
519
|
+
*/
|
|
520
|
+
export declare function isTouchEvent(event: TouchOrMouseEvent): event is TouchEvent | React_2.TouchEvent;
|
|
521
|
+
|
|
522
|
+
/**
|
|
523
|
+
* Our own alias for `JSX.Element` type that is compatible with both React 17 and React 18+.
|
|
524
|
+
* Use this type when annotating JSX markup in all our code in order to avoid issues between different React versions.
|
|
525
|
+
*
|
|
526
|
+
* Example usage:
|
|
527
|
+
*
|
|
528
|
+
* BAD:
|
|
529
|
+
* ```tsx
|
|
530
|
+
* const renderFoo = (state: FooState) = <div {...props}>Hello World</div>;
|
|
531
|
+
* // infers
|
|
532
|
+
* // R17: declare const renderFoo: (state: FooState) => JSX.Element;
|
|
533
|
+
* // R18+: declare const renderFoo: (state: FooState) => React.JSX.Element;
|
|
534
|
+
* ```
|
|
535
|
+
*
|
|
536
|
+
* GOOD:
|
|
537
|
+
* ```tsx
|
|
538
|
+
* import type { JSXElement } from '@fluentui/react-utilities';
|
|
539
|
+
* const renderFoo = (state: FooState): JSXElement = <div {...props}>Hello World</div>;
|
|
540
|
+
* ```
|
|
541
|
+
*/
|
|
542
|
+
export declare type JSXElement = React_2.ReactElement<any, any>;
|
|
543
|
+
|
|
544
|
+
/**
|
|
545
|
+
* Our own alias for `JSX.IntrinsicElements` type that is compatible with both React 17 and React 18+.
|
|
546
|
+
* Use this type to get the intrinsic elements from React types in order to avoid issues between different React versions.
|
|
547
|
+
*/
|
|
548
|
+
export declare type JSXIntrinsicElement<Element extends JSXIntrinsicElementKeys> = React_2.ComponentProps<Element>;
|
|
549
|
+
|
|
550
|
+
/**
|
|
551
|
+
* Type representing all valid JSX intrinsic element names (e.g., 'div', 'button', 'input').
|
|
552
|
+
* It's derived from `React.ElementType` by excluding all custom component types (`React.ComponentType`), ensuring it only includes standard HTML and SVG elements.
|
|
553
|
+
*
|
|
554
|
+
* Use this type when you need to restrict a type to only valid intrinsic element names.
|
|
555
|
+
*
|
|
556
|
+
* @example
|
|
557
|
+
* ```tsx
|
|
558
|
+
* import * as React from 'react';
|
|
559
|
+
* import type { JSXIntrinsicElementKeys } from '@fluentui/react-utilities';
|
|
560
|
+
*
|
|
561
|
+
* const createElement = (tag: JSXIntrinsicElementKeys) => React.createElement(tag, {});
|
|
562
|
+
*
|
|
563
|
+
* createElement('div'); // Valid
|
|
564
|
+
* createElement('span'); // Valid
|
|
565
|
+
* createElement('unknown'); // Error: Argument of type '"unknown"' is not assignable to parameter of type 'JSXIntrinsicElementKeys'.
|
|
566
|
+
* ```
|
|
567
|
+
*
|
|
568
|
+
* This type helps ensure that only valid intrinsic elements are used in scenarios where custom components are not allowed.
|
|
569
|
+
*/
|
|
570
|
+
export declare type JSXIntrinsicElementKeys = Exclude<React_2.ElementType, React_2.ComponentType>;
|
|
571
|
+
|
|
572
|
+
/**
|
|
573
|
+
* Combine two event callbacks into a single callback function that calls each one in order.
|
|
574
|
+
*
|
|
575
|
+
* Usage example:
|
|
576
|
+
* ```ts
|
|
577
|
+
* state.slot.onChange = mergeCallbacks(state.slot.onChange, ev => {
|
|
578
|
+
* // Handle onChange
|
|
579
|
+
* });
|
|
580
|
+
* ```
|
|
581
|
+
*
|
|
582
|
+
* The primary use is to avoid the need to capture an existing callback (`state.slot.onChange` in the example) to a
|
|
583
|
+
* local variable before replacing with a new listener that calls the existing one. This helps avoid bugs like:
|
|
584
|
+
* * Infinite recursion by calling the re-assigned state.slot.onChange if it's not captured to a local variable.
|
|
585
|
+
* * Missing a call to the original onChange due to an early return or other conditional.
|
|
586
|
+
*
|
|
587
|
+
* If you need a callback that is stable between renders, wrap the result in {@link useEventCallback}.
|
|
588
|
+
*
|
|
589
|
+
* @internal
|
|
590
|
+
* @param callback1 - The first callback to be called, or undefined
|
|
591
|
+
* @param callback2 - The second callback to be called, or undefined
|
|
592
|
+
*
|
|
593
|
+
* @returns A function that that calls the provided functions in order
|
|
594
|
+
*/
|
|
595
|
+
export declare function mergeCallbacks<Args extends unknown[]>(callback1: ((...args: Args) => void) | undefined, callback2: ((...args: Args) => void) | undefined): (...args: Args) => void;
|
|
596
|
+
|
|
597
|
+
declare interface NamedExoticComponent<P> extends ExoticComponent<P> {
|
|
598
|
+
displayName?: string;
|
|
599
|
+
}
|
|
600
|
+
|
|
601
|
+
export declare type NativeTouchOrMouseEvent = MouseEvent | TouchEvent;
|
|
602
|
+
|
|
603
|
+
/**
|
|
604
|
+
* @deprecated - use slot.always or slot.optional combined with assertSlots instead
|
|
605
|
+
*/
|
|
606
|
+
declare type ObjectSlotProps<S extends SlotPropsRecord> = {
|
|
607
|
+
[K in keyof S]-?: any;
|
|
608
|
+
};
|
|
609
|
+
|
|
610
|
+
/**
|
|
611
|
+
* This is part of a hack to infer the element type from a native element *props* type.
|
|
612
|
+
* The only place the original element is found in a native props type (at least that's workable
|
|
613
|
+
* for inference) is in the event handlers, so some of the helper types use this event handler
|
|
614
|
+
* name to infer the original element type.
|
|
615
|
+
*
|
|
616
|
+
* Notes:
|
|
617
|
+
* - Using an extremely obscure event handler reduces the likelihood that its signature will be
|
|
618
|
+
* modified in any component's props.
|
|
619
|
+
* - Inferring based on a single prop name instead of a larger type like `DOMAttributes<T>` should be
|
|
620
|
+
* less expensive for typescript to evaluate and is less likely to result in type expansion in .d.ts.
|
|
621
|
+
*/
|
|
622
|
+
declare type ObscureEventName = 'onLostPointerCaptureCapture';
|
|
623
|
+
|
|
624
|
+
/**
|
|
625
|
+
* Tiny helper to do the minimal amount of work in duplicating an object but omitting some
|
|
626
|
+
* props. This ends up faster than using object ...rest or reduce to filter.
|
|
627
|
+
*
|
|
628
|
+
* This behaves very much like filteredAssign, but does not merge many objects together,
|
|
629
|
+
* uses an exclusion object map, and avoids spreads all for optimal performance.
|
|
630
|
+
*
|
|
631
|
+
* See perf test for background:
|
|
632
|
+
* https://jsperf.com/omit-vs-rest-vs-reduce/1
|
|
633
|
+
*
|
|
634
|
+
* @param obj - The object to clone
|
|
635
|
+
* @param exclusions - The array of keys to exclude
|
|
636
|
+
*/
|
|
637
|
+
export declare function omit<TObj extends Record<string, any>, Exclusions extends (keyof TObj)[]>(obj: TObj, exclusions: Exclusions): Omit<TObj, Exclusions[number]>;
|
|
638
|
+
|
|
639
|
+
export declare type OnSelectionChangeCallback = (event: React_2.SyntheticEvent, selectedItems: Set<SelectionItemId>) => void;
|
|
640
|
+
|
|
641
|
+
export declare type OnSelectionChangeData = {
|
|
642
|
+
selectedItems: Set<SelectionItemId>;
|
|
643
|
+
};
|
|
644
|
+
|
|
645
|
+
/**
|
|
646
|
+
* Creates a slot from a slot shorthand or properties (`props.SLOT_NAME` or `props` itself)
|
|
647
|
+
* @param value - the value of the slot, it can be a slot shorthand, a slot component or a slot properties
|
|
648
|
+
* @param options - values you can pass to alter the signature of a slot, those values are:
|
|
649
|
+
*
|
|
650
|
+
* * `elementType` - the base element type of a slot, defaults to `'div'`
|
|
651
|
+
* * `defaultProps` - similar to a React component declaration, you can provide a slot default properties to be merged with the shorthand/properties provided
|
|
652
|
+
* * `renderByDefault` - a boolean that indicates if a slot will be rendered even if it's base value is `undefined`.
|
|
653
|
+
* By default if `props.SLOT_NAME` is `undefined` then `state.SLOT_NAME` becomes `undefined`
|
|
654
|
+
* and nothing will be rendered, but if `renderByDefault = true` then `state.SLOT_NAME` becomes an object
|
|
655
|
+
* with the values provided by `options.defaultProps` (or `{}`). This is useful for cases such as providing a default content
|
|
656
|
+
* in case no shorthand is provided, like the case of the `expandIcon` slot for the `AccordionHeader`
|
|
657
|
+
*/
|
|
658
|
+
declare function optional<Props extends UnknownSlotProps>(value: Props | SlotShorthandValue | undefined | null, options: {
|
|
659
|
+
renderByDefault?: boolean;
|
|
660
|
+
} & SlotOptions<Props>): SlotComponentType<Props> | undefined;
|
|
661
|
+
|
|
662
|
+
/**
|
|
663
|
+
* @internal
|
|
664
|
+
*/
|
|
665
|
+
export declare interface PriorityQueue<T> {
|
|
666
|
+
all: () => T[];
|
|
667
|
+
clear: () => void;
|
|
668
|
+
contains: (item: T) => boolean;
|
|
669
|
+
dequeue: () => T;
|
|
670
|
+
enqueue: (item: T) => void;
|
|
671
|
+
peek: () => T | null;
|
|
672
|
+
remove: (item: T) => void;
|
|
673
|
+
size: () => number;
|
|
674
|
+
}
|
|
675
|
+
|
|
676
|
+
/**
|
|
677
|
+
* @internal
|
|
678
|
+
*/
|
|
679
|
+
declare type PriorityQueueCompareFn<T> = (a: T, b: T) => number;
|
|
680
|
+
|
|
681
|
+
/**
|
|
682
|
+
* Removes the 'children' prop from the given Props type, leaving unions intact (such as the discriminated union created by
|
|
683
|
+
* IntrinsicSlotProps). This allows IntrinsicSlotProps to be used with React.forwardRef.
|
|
684
|
+
*/
|
|
685
|
+
declare type PropsWithoutChildren<P> = 'children' extends keyof P ? DistributiveOmit<P, 'children'> : P;
|
|
686
|
+
|
|
687
|
+
/**
|
|
688
|
+
* Removes the 'ref' prop from the given Props type, leaving unions intact (such as the discriminated union created by
|
|
689
|
+
* IntrinsicSlotProps). This allows IntrinsicSlotProps to be used with React.forwardRef.
|
|
690
|
+
*/
|
|
691
|
+
declare type PropsWithoutRef<P> = 'ref' extends keyof P ? DistributiveOmit<P, 'ref'> : P;
|
|
692
|
+
|
|
693
|
+
/**
|
|
694
|
+
* on types/react 18 ReactNode becomes a more strict type, which is not compatible with our current implementation. to avoid any issues we are creating our own ReactNode type which allows anything.
|
|
695
|
+
*
|
|
696
|
+
* This type should only be used for inference purposes, and should never be exposed.
|
|
697
|
+
*
|
|
698
|
+
* **THIS TYPE IS INTERNAL AND SHOULD NEVER BE EXPOSED**
|
|
699
|
+
*
|
|
700
|
+
* @internal
|
|
701
|
+
*/
|
|
702
|
+
declare type ReactNode = any;
|
|
703
|
+
|
|
704
|
+
export declare type ReactTouchOrMouseEvent = React_2.MouseEvent | React_2.TouchEvent;
|
|
705
|
+
|
|
706
|
+
/**
|
|
707
|
+
* This type is used to determine if the current version of React is 18+ or not.
|
|
708
|
+
*
|
|
709
|
+
* It checks if the `React.ReactNode` has `{}` it its type.
|
|
710
|
+
* If it is, then it means that the current version of React is lower than 18.
|
|
711
|
+
* If it is not, then it means that the current version of React is 18 or higher.
|
|
712
|
+
* This is useful for ensuring compatibility with different versions of React.
|
|
713
|
+
*
|
|
714
|
+
* **THIS TYPE IS INTERNAL AND SHOULD NEVER BE EXPOSED**
|
|
715
|
+
*
|
|
716
|
+
* @internal
|
|
717
|
+
*/
|
|
718
|
+
declare type ReactVersionDependent<Modern, Legacy> = {} extends React_2.ReactNode ? Legacy : Modern;
|
|
719
|
+
|
|
720
|
+
/**
|
|
721
|
+
* This type should be used in place of `React.RefAttributes<T>` in all components that specify `ref` prop.
|
|
722
|
+
*
|
|
723
|
+
* If user is using React 18 types `>=18.2.61`, they will run into type issues of incompatible refs, using this type mitigates this issues across react type versions.
|
|
724
|
+
*
|
|
725
|
+
* @remarks
|
|
726
|
+
*
|
|
727
|
+
* React 18 types introduced Type Expansion Change to the `RefAttributes` interface as patch release.
|
|
728
|
+
* These changes were released in `@types/react@18.2.61` (replacing ref with `LegacyRef`, which leaks `string` into the union type, causing breaking changes between v8/v9 libraries):
|
|
729
|
+
* - {@link https://github.com/DefinitelyTyped/DefinitelyTyped/pull/68720 | PR }
|
|
730
|
+
* - {@link https://app.unpkg.com/@types/react@18.2.61/files/index.d.ts | shipped definitions }
|
|
731
|
+
*
|
|
732
|
+
*
|
|
733
|
+
* In React 19 types this was "reverted" back to the original `Ref<T>` type.
|
|
734
|
+
* In order to maintain compatibility with React 17,18,19, we are forced to use our own version of `RefAttributes`.
|
|
735
|
+
*
|
|
736
|
+
*/
|
|
737
|
+
export declare interface RefAttributes<T> extends React_2.Attributes {
|
|
738
|
+
ref?: React_2.Ref<T> | undefined;
|
|
739
|
+
}
|
|
740
|
+
|
|
741
|
+
/**
|
|
742
|
+
* A Ref function which can be treated like a ref object in that it has an attached
|
|
743
|
+
* current property, which will be updated as the ref is evaluated.
|
|
744
|
+
*/
|
|
745
|
+
export declare type RefObjectFunction<T> = React_2.RefObject<T | null> & ((value: T | null) => void);
|
|
746
|
+
|
|
747
|
+
/**
|
|
748
|
+
* If type T includes `null`, remove it and add `undefined` instead.
|
|
749
|
+
*
|
|
750
|
+
* @internal
|
|
751
|
+
*/
|
|
752
|
+
declare type ReplaceNullWithUndefined<T> = T extends null ? Exclude<T, null> | undefined : T;
|
|
753
|
+
|
|
754
|
+
/**
|
|
755
|
+
* Resets generated IDs, should be used only in tests.
|
|
756
|
+
*/
|
|
757
|
+
export declare function resetIdsForTests(): void;
|
|
758
|
+
|
|
759
|
+
/**
|
|
760
|
+
*
|
|
761
|
+
* Resolves shorthands into slot props, to ensure normalization of the signature
|
|
762
|
+
* being passed down to getSlots method
|
|
763
|
+
* @param value - the base shorthand props
|
|
764
|
+
* @param options - options to resolve shorthand props
|
|
765
|
+
*
|
|
766
|
+
* @deprecated use slot.always, slot.optional, slot.resolveShorthand combined with assertSlots instead
|
|
767
|
+
*/
|
|
768
|
+
export declare const resolveShorthand: ResolveShorthandFunction<UnknownSlotProps>;
|
|
769
|
+
|
|
770
|
+
/**
|
|
771
|
+
* Helper function that converts a slot shorthand or properties to a slot properties object
|
|
772
|
+
* 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
|
|
773
|
+
* @param value - the value of the slot, it can be a slot shorthand or a slot properties object
|
|
774
|
+
*/
|
|
775
|
+
declare function resolveShorthand_2<Props extends UnknownSlotProps | null | undefined>(value: Props | SlotShorthandValue): Props;
|
|
776
|
+
|
|
777
|
+
/**
|
|
778
|
+
* @deprecated use slot.always or slot.optional combined with assertSlots instead
|
|
779
|
+
*/
|
|
780
|
+
export declare type ResolveShorthandFunction<Props extends UnknownSlotProps = UnknownSlotProps> = {
|
|
781
|
+
<P extends Props>(value: P | SlotShorthandValue | undefined, options: ResolveShorthandOptions<P, true>): WithoutSlotRenderFunction<P>;
|
|
782
|
+
<P extends Props>(value: P | SlotShorthandValue | null | undefined, options?: ResolveShorthandOptions<P, boolean>): WithoutSlotRenderFunction<P> | undefined;
|
|
783
|
+
};
|
|
784
|
+
|
|
785
|
+
/**
|
|
786
|
+
* @deprecated - use slot.always or slot.optional combined with assertSlots instead
|
|
787
|
+
*/
|
|
788
|
+
export declare type ResolveShorthandOptions<Props, Required extends boolean = false> = Required extends true ? {
|
|
789
|
+
required: true;
|
|
790
|
+
defaultProps?: Props;
|
|
791
|
+
} : {
|
|
792
|
+
required?: Required;
|
|
793
|
+
defaultProps?: Props;
|
|
794
|
+
};
|
|
795
|
+
|
|
796
|
+
export declare type SelectionHookParams = {
|
|
797
|
+
selectionMode: SelectionMode_2;
|
|
798
|
+
/**
|
|
799
|
+
* Used in uncontrolled mode to set initial selected items on mount
|
|
800
|
+
*/
|
|
801
|
+
defaultSelectedItems?: Iterable<SelectionItemId>;
|
|
802
|
+
/**
|
|
803
|
+
* Used to control selected items
|
|
804
|
+
*/
|
|
805
|
+
selectedItems?: Iterable<SelectionItemId>;
|
|
806
|
+
/**
|
|
807
|
+
* Called when selection changes
|
|
808
|
+
*/
|
|
809
|
+
onSelectionChange?(event: React_2.SyntheticEvent, data: OnSelectionChangeData): void;
|
|
810
|
+
};
|
|
811
|
+
|
|
812
|
+
export declare type SelectionItemId = string | number;
|
|
813
|
+
|
|
814
|
+
export declare interface SelectionMethods {
|
|
815
|
+
toggleItem(event: React_2.SyntheticEvent, id: SelectionItemId): void;
|
|
816
|
+
selectItem(event: React_2.SyntheticEvent, id: SelectionItemId): void;
|
|
817
|
+
deselectItem(event: React_2.SyntheticEvent, id: SelectionItemId): void;
|
|
818
|
+
clearItems(event: React_2.SyntheticEvent): void;
|
|
819
|
+
isSelected(id: SelectionItemId): boolean;
|
|
820
|
+
toggleAllItems(event: React_2.SyntheticEvent, itemIds: SelectionItemId[]): void;
|
|
821
|
+
}
|
|
822
|
+
|
|
823
|
+
declare type SelectionMode_2 = 'single' | 'multiselect';
|
|
824
|
+
export { SelectionMode_2 as SelectionMode }
|
|
825
|
+
|
|
826
|
+
/**
|
|
827
|
+
* Sets the virtual parent of an element.
|
|
828
|
+
*
|
|
829
|
+
* @internal
|
|
830
|
+
* @param child - Theme element to set the virtual parent
|
|
831
|
+
* @param parent - The virtual parent, use `undefined` to remove a virtual parent relationship
|
|
832
|
+
*/
|
|
833
|
+
export declare function setVirtualParent(child: Node, parent?: Node): void;
|
|
834
|
+
|
|
835
|
+
/**
|
|
836
|
+
* The props type and shorthand value for a slot. Type is either a single intrinsic element like `'div'`,
|
|
837
|
+
* or a component like `typeof Button`.
|
|
838
|
+
*
|
|
839
|
+
* If a slot needs to support multiple intrinsic element types, use the `AlternateAs` param (see examples below).
|
|
840
|
+
*
|
|
841
|
+
* By default, slots can be set to `null` to prevent them from being rendered. If a slot must always be rendered,
|
|
842
|
+
* wrap with `NonNullable` (see examples below).
|
|
843
|
+
*
|
|
844
|
+
* @example
|
|
845
|
+
* ```
|
|
846
|
+
* // Intrinsic element examples:
|
|
847
|
+
* Slot<'div'> // Slot is always div
|
|
848
|
+
* Slot<'button', 'a'> // Defaults to button, but allows as="a" with anchor-specific props
|
|
849
|
+
* Slot<'span', 'div' | 'pre'> // Defaults to span, but allows as="div" or as="pre"
|
|
850
|
+
* NonNullable<Slot<'div'>> // Slot that will always be rendered (can't be set to null by the user)
|
|
851
|
+
*
|
|
852
|
+
* // Component examples:
|
|
853
|
+
* Slot<typeof Button> // Slot is always a Button, and accepts all of Button's Props
|
|
854
|
+
* NonNullable<Slot<typeof Label>> // Slot is a Label and will always be rendered (can't be set to null by the user)
|
|
855
|
+
* ```
|
|
856
|
+
*/
|
|
857
|
+
export declare type Slot<Type extends JSXIntrinsicElementKeys | ComponentType<any> | UnknownSlotProps, AlternateAs extends JSXIntrinsicElementKeys = never> = IsSingleton<Extract<Type, string>> extends true ? WithSlotShorthandValue<Type extends JSXIntrinsicElementKeys ? {
|
|
858
|
+
as?: Type;
|
|
859
|
+
} & WithSlotRenderFunction<IntrinsicElementProps<Type>> : Type extends ComponentType<infer Props> ? Props extends UnknownSlotProps ? Props : WithSlotRenderFunction<Props> : Type> | (AlternateAs extends unknown ? {
|
|
860
|
+
as: AlternateAs;
|
|
861
|
+
} & WithSlotRenderFunction<IntrinsicElementProps<AlternateAs>> : never) | null : 'Error: First parameter to Slot must not be not a union of types. See documentation of Slot type.';
|
|
862
|
+
|
|
863
|
+
declare namespace slot {
|
|
864
|
+
export {
|
|
865
|
+
always,
|
|
866
|
+
optional,
|
|
867
|
+
resolveShorthand_2 as resolveShorthand,
|
|
868
|
+
SlotOptions
|
|
869
|
+
}
|
|
870
|
+
}
|
|
871
|
+
export { slot }
|
|
872
|
+
|
|
873
|
+
/**
|
|
874
|
+
* Internal cache of the original className prop for the slot, before being modified by the useStyles hook.
|
|
875
|
+
*
|
|
876
|
+
* @internal
|
|
877
|
+
*/
|
|
878
|
+
export declare const SLOT_CLASS_NAME_PROP_SYMBOL: unique symbol;
|
|
879
|
+
|
|
880
|
+
/**
|
|
881
|
+
* Internal reference for the render function
|
|
882
|
+
*
|
|
883
|
+
* @internal
|
|
884
|
+
*/
|
|
885
|
+
export declare const SLOT_ELEMENT_TYPE_SYMBOL: unique symbol;
|
|
886
|
+
|
|
887
|
+
/**
|
|
888
|
+
* Internal reference for the render function
|
|
889
|
+
*
|
|
890
|
+
* @internal
|
|
891
|
+
*/
|
|
892
|
+
export declare const SLOT_RENDER_FUNCTION_SYMBOL: unique symbol;
|
|
893
|
+
|
|
894
|
+
/**
|
|
895
|
+
* Helper type to correctly define the slot class names object.
|
|
896
|
+
*/
|
|
897
|
+
export declare type SlotClassNames<Slots> = {
|
|
898
|
+
[SlotName in keyof Slots]-?: string;
|
|
899
|
+
};
|
|
900
|
+
|
|
901
|
+
declare type SlotComponents<Slots extends SlotPropsRecord> = {
|
|
902
|
+
[K in keyof Slots]: SlotComponentType<ExtractSlotProps<Slots[K]>> | (null extends Slots[K] ? undefined : never);
|
|
903
|
+
};
|
|
904
|
+
|
|
905
|
+
/**
|
|
906
|
+
* A definition of a slot, as a component, very similar to how a React component is declared,
|
|
907
|
+
* but with some additional metadata that is used to determine how to render the slot.
|
|
908
|
+
*/
|
|
909
|
+
export declare type SlotComponentType<Props> = WithoutSlotRenderFunction<Props> & FunctionComponent<{
|
|
910
|
+
children?: ReactNode;
|
|
911
|
+
}> & {
|
|
912
|
+
/**
|
|
913
|
+
* @internal
|
|
914
|
+
*/
|
|
915
|
+
[SLOT_RENDER_FUNCTION_SYMBOL]?: SlotRenderFunction<Props>;
|
|
916
|
+
/**
|
|
917
|
+
* @internal
|
|
918
|
+
*/
|
|
919
|
+
[SLOT_ELEMENT_TYPE_SYMBOL]: ComponentType<Props> | (Props extends AsIntrinsicElement<infer As> ? As : JSXIntrinsicElementKeys);
|
|
920
|
+
/**
|
|
921
|
+
* The original className prop for the slot, before being modified by the useStyles hook.
|
|
922
|
+
*
|
|
923
|
+
* @internal
|
|
924
|
+
*/
|
|
925
|
+
[SLOT_CLASS_NAME_PROP_SYMBOL]?: string;
|
|
926
|
+
};
|
|
927
|
+
|
|
928
|
+
export declare type SlotOptions<Props extends UnknownSlotProps> = {
|
|
929
|
+
elementType: React_2.ComponentType<Props> | (Props extends AsIntrinsicElement<infer As> ? As : JSXIntrinsicElementKeys);
|
|
930
|
+
defaultProps?: Partial<Props>;
|
|
931
|
+
};
|
|
932
|
+
|
|
933
|
+
/**
|
|
934
|
+
* Matches any component's Slots type (such as ButtonSlots).
|
|
935
|
+
*
|
|
936
|
+
* This should ONLY be used in type templates as in `extends SlotPropsRecord`;
|
|
937
|
+
* it shouldn't be used as a component's Slots type.
|
|
938
|
+
*/
|
|
939
|
+
export declare type SlotPropsRecord = Record<string, UnknownSlotProps | SlotShorthandValue | null | undefined>;
|
|
940
|
+
|
|
941
|
+
export declare type SlotRenderFunction<Props> = (Component: React_2.ElementType<Props>, props: Omit<Props, 'as'>) => ReactNode;
|
|
942
|
+
|
|
943
|
+
/**
|
|
944
|
+
* @deprecated - use slot.always or slot.optional combined with assertSlots instead
|
|
945
|
+
*/
|
|
946
|
+
export declare type Slots<S extends SlotPropsRecord> = {
|
|
947
|
+
[K in keyof S]: React_2.ElementType<any>;
|
|
948
|
+
};
|
|
949
|
+
|
|
950
|
+
/**
|
|
951
|
+
* The shorthand value of a slot allows specifying its child
|
|
952
|
+
*/
|
|
953
|
+
export declare type SlotShorthandValue = React_2.ReactElement | string | number | Iterable<ReactNode> | React_2.ReactPortal;
|
|
954
|
+
|
|
955
|
+
/**
|
|
956
|
+
* When using SSR with Fluent UI, applications must be wrapped in an SSRProvider. This ensures that auto generated ids
|
|
957
|
+
* are consistent between the client and server.
|
|
958
|
+
*
|
|
959
|
+
* @public
|
|
960
|
+
*/
|
|
961
|
+
export declare const SSRProvider: React_2.FC<{
|
|
962
|
+
children: React_2.ReactNode;
|
|
963
|
+
}>;
|
|
964
|
+
|
|
965
|
+
export declare type TouchOrMouseEvent = NativeTouchOrMouseEvent | ReactTouchOrMouseEvent;
|
|
966
|
+
|
|
967
|
+
/**
|
|
968
|
+
* A trigger may have a children that could be either:
|
|
969
|
+
* 1. A single element
|
|
970
|
+
* 2. A render function that will receive properties and must return a valid element or null
|
|
971
|
+
* 3. null or undefined
|
|
972
|
+
*/
|
|
973
|
+
export declare type TriggerProps<TriggerChildProps = unknown> = {
|
|
974
|
+
children?: React_2.ReactElement | ((props: TriggerChildProps) => React_2.ReactElement | null) | null;
|
|
975
|
+
};
|
|
976
|
+
|
|
977
|
+
/**
|
|
978
|
+
* Converts a union type (`A | B | C`) to an intersection type (`A & B & C`)
|
|
979
|
+
*/
|
|
980
|
+
export declare type UnionToIntersection<U> = (U extends unknown ? (x: U) => U : never) extends (x: infer I) => U ? I : never;
|
|
981
|
+
|
|
982
|
+
/**
|
|
983
|
+
* Matches any slot props type.
|
|
984
|
+
*
|
|
985
|
+
* This should ONLY be used in type templates as in `extends UnknownSlotProps`;
|
|
986
|
+
* it shouldn't be used as the type of a slot.
|
|
987
|
+
*/
|
|
988
|
+
export declare type UnknownSlotProps = Pick<React_2.HTMLAttributes<HTMLElement>, 'className' | 'style'> & {
|
|
989
|
+
as?: JSXIntrinsicElementKeys;
|
|
990
|
+
children?: ReactNode;
|
|
991
|
+
};
|
|
992
|
+
|
|
993
|
+
/**
|
|
994
|
+
* Helper to manage a browser requestAnimationFrame.
|
|
995
|
+
* Ensures that the requestAnimationFrame isn't set multiple times at once and is cleaned up
|
|
996
|
+
* when the component is unloaded.
|
|
997
|
+
*
|
|
998
|
+
* @internal
|
|
999
|
+
* @returns A pair of [requestAnimationFrame, cancelAnimationFrame] that are stable between renders.
|
|
1000
|
+
*/
|
|
1001
|
+
export declare function useAnimationFrame(): readonly [(fn: FrameRequestCallback) => number, () => void];
|
|
1002
|
+
|
|
1003
|
+
/**
|
|
1004
|
+
* A React hook that provides a ref for applying the browser's scrollbar width as a CSS property.
|
|
1005
|
+
*
|
|
1006
|
+
* This hook is SSR-safe and caches measurements per document to avoid redundant calculations.
|
|
1007
|
+
* When the ref is attached to an element, the hook automatically applies the measured scrollbar
|
|
1008
|
+
* width to the specified CSS property (defaults to 'width').
|
|
1009
|
+
*
|
|
1010
|
+
* @example
|
|
1011
|
+
* ```tsx
|
|
1012
|
+
* const scrollbarRef = useApplyScrollbarWidth({ targetDocument: document });
|
|
1013
|
+
* return <div ref={scrollbarRef} />;
|
|
1014
|
+
* ```
|
|
1015
|
+
*/
|
|
1016
|
+
export declare function useApplyScrollbarWidth<T extends HTMLElement>(options?: UseApplyScrollbarWidthOptions): React_2.RefCallback<T>;
|
|
1017
|
+
|
|
1018
|
+
declare interface UseApplyScrollbarWidthOptions {
|
|
1019
|
+
/**
|
|
1020
|
+
* Does not use the cache and recalculates the scrollbar width
|
|
1021
|
+
*/
|
|
1022
|
+
force?: boolean;
|
|
1023
|
+
/**
|
|
1024
|
+
* CSS property to apply the scrollbar width to.
|
|
1025
|
+
* @default 'width'
|
|
1026
|
+
*/
|
|
1027
|
+
property?: string;
|
|
1028
|
+
}
|
|
1029
|
+
|
|
1030
|
+
/**
|
|
1031
|
+
* A [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate)-like hook
|
|
1032
|
+
* to manage a value that could be either `controlled` or `uncontrolled`,
|
|
1033
|
+
* such as a checked state or text input string.
|
|
1034
|
+
*
|
|
1035
|
+
* @internal
|
|
1036
|
+
* @see https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components for more details on `controlled`/`uncontrolled`
|
|
1037
|
+
*
|
|
1038
|
+
* @returns an array of the current value and an updater (dispatcher) function.
|
|
1039
|
+
* The updater function is referentially stable (won't change during the component's lifecycle).
|
|
1040
|
+
* It can take either a new value, or a function which is passed the previous value and returns the new value.
|
|
1041
|
+
*
|
|
1042
|
+
* ❗️❗️ Calls to the dispatcher will only modify the state if the state is `uncontrolled`.
|
|
1043
|
+
* Meaning that if a state is `controlled`, calls to the dispatcher do not modify the state.
|
|
1044
|
+
*/
|
|
1045
|
+
export declare const useControllableState: <State>(options: UseControllableStateOptions<State>) => [State, React_2.Dispatch<React_2.SetStateAction<State>>];
|
|
1046
|
+
|
|
1047
|
+
/**
|
|
1048
|
+
* @internal
|
|
1049
|
+
*/
|
|
1050
|
+
export declare type UseControllableStateOptions<State> = {
|
|
1051
|
+
/**
|
|
1052
|
+
* User-provided default state or initializer, for uncontrolled usage.
|
|
1053
|
+
*/
|
|
1054
|
+
defaultState?: State | (() => State);
|
|
1055
|
+
/**
|
|
1056
|
+
* User-provided controlled state. `undefined` means internal state will be used.
|
|
1057
|
+
*/
|
|
1058
|
+
state: State | undefined;
|
|
1059
|
+
/**
|
|
1060
|
+
* Used as the initial state if `state` and `defaultState` are both `undefined`.
|
|
1061
|
+
* If `undefined` is the correct initial state, pass that here.
|
|
1062
|
+
*/
|
|
1063
|
+
initialState: State;
|
|
1064
|
+
};
|
|
1065
|
+
|
|
1066
|
+
/**
|
|
1067
|
+
* https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback
|
|
1068
|
+
*
|
|
1069
|
+
* Modified `useCallback` that can be used when dependencies change too frequently. Can occur when
|
|
1070
|
+
* e.g. user props are dependencies which could change on every render
|
|
1071
|
+
* e.g. volatile values (i.e. useState/useDispatch) are dependencies which could change frequently
|
|
1072
|
+
*
|
|
1073
|
+
* This should not be used often, but can be a useful re-render optimization since the callback is a ref and
|
|
1074
|
+
* will not be invalidated between re-renders
|
|
1075
|
+
*
|
|
1076
|
+
* @internal
|
|
1077
|
+
* @param fn - The callback function that will be used
|
|
1078
|
+
*/
|
|
1079
|
+
export declare const useEventCallback: <Args extends unknown[], Return>(fn: (...args: Args) => Return) => ((...args: Args) => Return);
|
|
1080
|
+
|
|
1081
|
+
/**
|
|
1082
|
+
* Checks if components was mounted the first time.
|
|
1083
|
+
* Supports React concurrent/strict mode by using `useEffect`
|
|
1084
|
+
* to track the first mount instead of mutating refs during render.
|
|
1085
|
+
*
|
|
1086
|
+
* @internal
|
|
1087
|
+
* @example
|
|
1088
|
+
* const isFirstMount = useFirstMount();
|
|
1089
|
+
*/
|
|
1090
|
+
export declare function useFirstMount(): boolean;
|
|
1091
|
+
|
|
1092
|
+
/**
|
|
1093
|
+
* Forces a re-render, similar to `forceUpdate` in class components.
|
|
1094
|
+
*
|
|
1095
|
+
* @internal
|
|
1096
|
+
*/
|
|
1097
|
+
export declare function useForceUpdate(): React_2.DispatchWithoutAction;
|
|
1098
|
+
|
|
1099
|
+
/**
|
|
1100
|
+
* Hook to generate a unique ID.
|
|
1101
|
+
*
|
|
1102
|
+
* @param prefix - Optional prefix for the ID. Defaults to 'fui-'.
|
|
1103
|
+
* @param providedId - Optional id provided by a parent component. Defaults to the provided value if present,
|
|
1104
|
+
* without conditioning the hook call
|
|
1105
|
+
* @returns The ID
|
|
1106
|
+
*/
|
|
1107
|
+
export declare function useId(prefix?: string, providedId?: string): string;
|
|
1108
|
+
|
|
1109
|
+
/**
|
|
1110
|
+
* React currently throws a warning when using useLayoutEffect on the server. To get around it, we can conditionally
|
|
1111
|
+
* useEffect on the server (no-op) and useLayoutEffect in the browser. We occasionally need useLayoutEffect to
|
|
1112
|
+
* ensure we don't get a render flash for certain operations, but we may also need affected components to render on
|
|
1113
|
+
* the server.
|
|
1114
|
+
*
|
|
1115
|
+
* https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
|
|
1116
|
+
* https://github.com/reduxjs/react-redux/blob/master/src/utils/useIsomorphicLayoutEffect.js
|
|
1117
|
+
*/
|
|
1118
|
+
export declare const useIsomorphicLayoutEffect: typeof React_2.useEffect;
|
|
1119
|
+
|
|
1120
|
+
/**
|
|
1121
|
+
* Returns whether the component is currently being server side rendered or hydrated on the client. Can be used to delay
|
|
1122
|
+
* browser-specific rendering until after hydration. May cause re-renders on a client when is used within SSRProvider.
|
|
1123
|
+
*/
|
|
1124
|
+
export declare function useIsSSR(): boolean;
|
|
1125
|
+
|
|
1126
|
+
/**
|
|
1127
|
+
* React hook to merge multiple React refs (either MutableRefObjects or ref callbacks) into a single ref callback that
|
|
1128
|
+
* updates all provided refs
|
|
1129
|
+
* @param refs - Refs to collectively update with one ref value.
|
|
1130
|
+
* @returns A function with an attached "current" prop, so that it can be treated like a RefObject.
|
|
1131
|
+
*/
|
|
1132
|
+
export declare function useMergedRefs<T>(...refs: (React_2.Ref<T> | undefined)[]): RefObjectFunction<T>;
|
|
1133
|
+
|
|
1134
|
+
/**
|
|
1135
|
+
* @internal
|
|
1136
|
+
*/
|
|
1137
|
+
export declare type UseOnClickOrScrollOutsideOptions = {
|
|
1138
|
+
/**
|
|
1139
|
+
* The element to listen for the click event
|
|
1140
|
+
*/
|
|
1141
|
+
element: Document | undefined;
|
|
1142
|
+
/**
|
|
1143
|
+
* Refs to elements that check if the click is outside
|
|
1144
|
+
*/
|
|
1145
|
+
refs: React_2.MutableRefObject<HTMLElement | undefined | null>[];
|
|
1146
|
+
/**
|
|
1147
|
+
* By default uses element.contains, but custom contain function can be provided
|
|
1148
|
+
*
|
|
1149
|
+
* @param parent - provided parent element
|
|
1150
|
+
* @param child - event target element
|
|
1151
|
+
*/
|
|
1152
|
+
contains?(parent: HTMLElement | null, child: HTMLElement): boolean;
|
|
1153
|
+
/**
|
|
1154
|
+
* Disables event listeners
|
|
1155
|
+
*/
|
|
1156
|
+
disabled?: boolean;
|
|
1157
|
+
/**
|
|
1158
|
+
* Disables custom focus event listeners for iframes
|
|
1159
|
+
*/
|
|
1160
|
+
disabledFocusOnIframe?: boolean;
|
|
1161
|
+
/**
|
|
1162
|
+
* Called if the click is outside the element refs
|
|
1163
|
+
*/
|
|
1164
|
+
callback: (ev: MouseEvent | TouchEvent) => void;
|
|
1165
|
+
};
|
|
1166
|
+
|
|
1167
|
+
/**
|
|
1168
|
+
* Utility to perform checks where a click/touch event was made outside a component
|
|
1169
|
+
*
|
|
1170
|
+
* @internal
|
|
1171
|
+
*/
|
|
1172
|
+
export declare const useOnClickOutside: (options: UseOnClickOrScrollOutsideOptions) => void;
|
|
1173
|
+
|
|
1174
|
+
/**
|
|
1175
|
+
* Utility to perform checks where a click/touch event was made outside a component
|
|
1176
|
+
*
|
|
1177
|
+
* @internal
|
|
1178
|
+
*/
|
|
1179
|
+
export declare const useOnScrollOutside: (options: UseOnClickOrScrollOutsideOptions) => void;
|
|
1180
|
+
|
|
1181
|
+
/**
|
|
1182
|
+
* @internal
|
|
1183
|
+
*/
|
|
1184
|
+
export declare const usePrevious: <ValueType = unknown>(value: ValueType) => ValueType | null;
|
|
1185
|
+
|
|
1186
|
+
/**
|
|
1187
|
+
* @returns The width in pixels of the scrollbar in the user agent
|
|
1188
|
+
* @remarks This hook is not SSR-safe. For SSR-safe scrollbar width application, use the `useApplyScrollbarWidth` from {@link file://./useApplyScrollbarWidth.ts} instead.
|
|
1189
|
+
*/
|
|
1190
|
+
export declare function useScrollbarWidth(options: UseScrollbarWidthOptions): number | undefined;
|
|
1191
|
+
|
|
1192
|
+
declare interface UseScrollbarWidthOptions {
|
|
1193
|
+
/**
|
|
1194
|
+
* Reference document to measure the scrollbar width
|
|
1195
|
+
*/
|
|
1196
|
+
targetDocument: Document | null | undefined;
|
|
1197
|
+
/**
|
|
1198
|
+
* Does not use the cache and recalculates the scrollbar width
|
|
1199
|
+
*/
|
|
1200
|
+
force?: boolean;
|
|
1201
|
+
}
|
|
1202
|
+
|
|
1203
|
+
export declare function useSelection(params: SelectionHookParams): readonly [Set<SelectionItemId>, SelectionMethods];
|
|
1204
|
+
|
|
1205
|
+
/**
|
|
1206
|
+
* Helper to manage a browser timeout.
|
|
1207
|
+
* Ensures that the timeout isn't set multiple times at once and is cleaned up
|
|
1208
|
+
* when the component is unloaded.
|
|
1209
|
+
*
|
|
1210
|
+
* @internal
|
|
1211
|
+
* @returns A pair of [setTimeout, clearTimeout] that are stable between renders.
|
|
1212
|
+
*/
|
|
1213
|
+
export declare function useTimeout(): readonly [(fn: () => void, delay?: number) => number, () => void];
|
|
1214
|
+
|
|
1215
|
+
/**
|
|
1216
|
+
* @internal
|
|
1217
|
+
*/
|
|
1218
|
+
declare type WithoutSlotRenderFunction<Props> = Props extends unknown ? 'children' extends keyof Props ? Omit<Props, 'children'> & {
|
|
1219
|
+
children?: Exclude<Props['children'], Function>;
|
|
1220
|
+
} : Props : never;
|
|
1221
|
+
|
|
1222
|
+
/**
|
|
1223
|
+
* Helper type for {@link Slot}. Takes the props we want to support for a slot and adds the ability for `children`
|
|
1224
|
+
* to be a render function that takes those props.
|
|
1225
|
+
*
|
|
1226
|
+
* Notes: For React 17 and earlier, `children` can be a render function that returns a ReactNode.
|
|
1227
|
+
* For React 18 and later, `children` can be any value, as React.ReactNode is a more strict type and does not allow functions anymore.
|
|
1228
|
+
* This means that the render functions need to be asserted as `SlotRenderFunction<Props>` for React 18 and later.
|
|
1229
|
+
*
|
|
1230
|
+
* @internal
|
|
1231
|
+
* @example
|
|
1232
|
+
* ```tsx
|
|
1233
|
+
* // For React 17 and earlier:
|
|
1234
|
+
* <Component slot={{ children: (Component, props) => <Component {...props} /> }} />
|
|
1235
|
+
*
|
|
1236
|
+
* // For React 18 and later:
|
|
1237
|
+
* <Component slot={{ children: (Component, props) => <Component {...props} /> as SlotRenderFunction<SlotProps> }} />
|
|
1238
|
+
* ```
|
|
1239
|
+
*/
|
|
1240
|
+
declare type WithSlotRenderFunction<Props> = PropsWithoutChildren<Props> & {
|
|
1241
|
+
children?: 'children' extends keyof Props ? ReactVersionDependent<ReactNode, Props['children'] | SlotRenderFunction<Props>> : never;
|
|
1242
|
+
};
|
|
1243
|
+
|
|
1244
|
+
/**
|
|
1245
|
+
* Helper type for {@link Slot}. Adds shorthand types that are assignable to the slot's `children`.
|
|
1246
|
+
*/
|
|
1247
|
+
declare type WithSlotShorthandValue<Props> = Props | ('children' extends keyof Props ? Extract<SlotShorthandValue, Props['children']> : never);
|
|
1248
|
+
|
|
1249
|
+
export { }
|