@fluentui/react-utilities 0.0.0-nightlyd3bf09bf8120211201.1 → 0.0.0-nightlye1926bfeca20220204.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +80 -6
- package/CHANGELOG.md +13 -6
- package/dist/react-utilities.d.ts +155 -84
- package/lib/compose/getSlots.d.ts +11 -10
- package/lib/compose/getSlots.js +6 -4
- package/lib/compose/getSlots.js.map +1 -1
- package/lib/compose/resolveShorthand.d.ts +5 -5
- package/lib/compose/resolveShorthand.js +3 -3
- package/lib/compose/types.d.ts +48 -26
- package/lib/compose/types.js.map +1 -1
- package/lib/hooks/index.d.ts +1 -1
- package/lib/hooks/index.js +1 -1
- package/lib/hooks/index.js.map +1 -1
- package/lib/hooks/useControllableState.d.ts +16 -6
- package/lib/hooks/useControllableState.js +13 -8
- package/lib/hooks/useControllableState.js.map +1 -1
- package/lib/hooks/useMergedEventCallbacks.d.ts +18 -0
- package/lib/hooks/useMergedEventCallbacks.js +26 -0
- package/lib/hooks/useMergedEventCallbacks.js.map +1 -0
- package/lib/hooks/useOnClickOutside.js.map +1 -1
- package/lib/utils/applyTriggerPropsToChildren.d.ts +1 -1
- package/lib/utils/applyTriggerPropsToChildren.js +19 -2
- package/lib/utils/applyTriggerPropsToChildren.js.map +1 -1
- package/lib/utils/getReactCallbackName.d.ts +25 -0
- package/lib/utils/getReactCallbackName.js +26 -0
- package/lib/utils/getReactCallbackName.js.map +1 -0
- package/lib/utils/getTriggerChild.d.ts +22 -0
- package/lib/utils/getTriggerChild.js +26 -0
- package/lib/utils/getTriggerChild.js.map +1 -0
- package/lib/utils/index.d.ts +2 -1
- package/lib/utils/index.js +2 -1
- package/lib/utils/index.js.map +1 -1
- package/lib/utils/isFluentTrigger.d.ts +22 -0
- package/lib/utils/isFluentTrigger.js +8 -0
- package/lib/utils/isFluentTrigger.js.map +1 -0
- package/lib/utils/properties.js +40 -20
- package/lib/utils/properties.js.map +1 -1
- package/lib-commonjs/compose/getSlots.d.ts +11 -10
- package/lib-commonjs/compose/getSlots.js +6 -4
- package/lib-commonjs/compose/getSlots.js.map +1 -1
- package/lib-commonjs/compose/resolveShorthand.d.ts +5 -5
- package/lib-commonjs/compose/resolveShorthand.js +3 -3
- package/lib-commonjs/compose/types.d.ts +48 -26
- package/lib-commonjs/compose/types.js.map +1 -1
- package/lib-commonjs/hooks/index.d.ts +1 -1
- package/lib-commonjs/hooks/index.js +2 -2
- package/lib-commonjs/hooks/index.js.map +1 -1
- package/lib-commonjs/hooks/useControllableState.d.ts +16 -6
- package/lib-commonjs/hooks/useControllableState.js +13 -8
- package/lib-commonjs/hooks/useControllableState.js.map +1 -1
- package/lib-commonjs/hooks/useMergedEventCallbacks.d.ts +18 -0
- package/lib-commonjs/hooks/useMergedEventCallbacks.js +36 -0
- package/lib-commonjs/hooks/useMergedEventCallbacks.js.map +1 -0
- package/lib-commonjs/hooks/useOnClickOutside.js.map +1 -1
- package/lib-commonjs/utils/applyTriggerPropsToChildren.d.ts +1 -1
- package/lib-commonjs/utils/applyTriggerPropsToChildren.js +19 -2
- package/lib-commonjs/utils/applyTriggerPropsToChildren.js.map +1 -1
- package/lib-commonjs/utils/getReactCallbackName.d.ts +25 -0
- package/lib-commonjs/utils/getReactCallbackName.js +35 -0
- package/lib-commonjs/utils/getReactCallbackName.js.map +1 -0
- package/lib-commonjs/utils/getTriggerChild.d.ts +22 -0
- package/lib-commonjs/utils/getTriggerChild.js +37 -0
- package/lib-commonjs/utils/getTriggerChild.js.map +1 -0
- package/lib-commonjs/utils/index.d.ts +2 -1
- package/lib-commonjs/utils/index.js +4 -2
- package/lib-commonjs/utils/index.js.map +1 -1
- package/lib-commonjs/utils/isFluentTrigger.d.ts +22 -0
- package/lib-commonjs/utils/isFluentTrigger.js +17 -0
- package/lib-commonjs/utils/isFluentTrigger.js.map +1 -0
- package/lib-commonjs/utils/properties.js +40 -20
- package/lib-commonjs/utils/properties.js.map +1 -1
- package/package.json +3 -7
- package/lib/hooks/useControllableValue.d.ts +0 -20
- package/lib/hooks/useControllableValue.js +0 -57
- package/lib/hooks/useControllableValue.js.map +0 -1
- package/lib/utils/onlyChild.d.ts +0 -5
- package/lib/utils/onlyChild.js +0 -13
- package/lib/utils/onlyChild.js.map +0 -1
- package/lib-commonjs/hooks/useControllableValue.d.ts +0 -20
- package/lib-commonjs/hooks/useControllableValue.js +0 -68
- package/lib-commonjs/hooks/useControllableValue.js.map +0 -1
- package/lib-commonjs/utils/onlyChild.d.ts +0 -5
- package/lib-commonjs/utils/onlyChild.js +0 -23
- package/lib-commonjs/utils/onlyChild.js.map +0 -1
package/lib/compose/types.d.ts
CHANGED
@@ -1,45 +1,60 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
export declare type
|
3
|
-
export declare type
|
4
|
-
export declare type ShorthandProps<Props extends
|
2
|
+
export declare type SlotRenderFunction<Props> = (Component: React.ElementType<Props>, props: Omit<Props, 'children' | 'as'>) => React.ReactNode;
|
3
|
+
export declare type SlotPropsRecord = Record<string, UnknownSlotProps | undefined>;
|
4
|
+
export declare type ShorthandProps<Props extends UnknownSlotProps> = React.ReactChild | React.ReactNodeArray | React.ReactPortal | number | null | undefined | Props;
|
5
5
|
/**
|
6
|
-
* Matches any
|
6
|
+
* Matches any slot props type.
|
7
7
|
*
|
8
|
-
* This should ONLY be used in type templates as in `extends
|
8
|
+
* This should ONLY be used in type templates as in `extends DefaultObjectSlotProps`;
|
9
9
|
* it shouldn't be used as the type of a slot.
|
10
10
|
*/
|
11
|
-
export declare type
|
11
|
+
export declare type UnknownSlotProps = SlotProps<Pick<React.HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'> & {
|
12
12
|
as?: keyof JSX.IntrinsicElements;
|
13
13
|
}>;
|
14
14
|
/**
|
15
|
-
*
|
16
|
-
*
|
17
|
-
* For intrinsic elements like 'div', use {@link IntrinsicShorthandProps} instead.
|
15
|
+
* Takes the props we want to support for a slot and adds the ability for `children` to be a render function that takes
|
16
|
+
* those props.
|
18
17
|
*/
|
19
|
-
export declare type
|
18
|
+
export declare type SlotProps<Props extends {
|
20
19
|
children?: React.ReactNode;
|
21
20
|
} = {}> = Props & {
|
22
|
-
children?: Props['children'] |
|
21
|
+
children?: Props['children'] | SlotRenderFunction<Props>;
|
23
22
|
};
|
23
|
+
/**
|
24
|
+
* Defines the slot props for a slot that supports a Component type.
|
25
|
+
*
|
26
|
+
* For intrinsic/native elements like 'div', use {@link IntrinsicSlotProps} instead.
|
27
|
+
*
|
28
|
+
* The generic param is the type of a control, i.e. a React component. For example:
|
29
|
+
*
|
30
|
+
* @example
|
31
|
+
* ```
|
32
|
+
* type Props = {...}
|
33
|
+
* const Button: React.FC<Props> = () => {...}
|
34
|
+
* // $ExpectType ...
|
35
|
+
* type SlotProps = ComponentSlotProps<typeof Button>
|
36
|
+
* ```
|
37
|
+
*/
|
38
|
+
export declare type ComponentSlotProps<Component extends React.ComponentType> = Component extends React.ComponentType<infer Props> ? SlotProps<Props> : never;
|
24
39
|
/**
|
25
40
|
* Define the slot arguments for a slot that supports one or more intrinsic element types, such as 'div'.
|
26
|
-
* For slots that support custom components, use {@link
|
41
|
+
* For slots that support custom components, use {@link ComponentSlotProps} instead.
|
27
42
|
*
|
28
43
|
* The first param is the slot's default type if no `as` prop is specified.
|
29
44
|
* The second param is an optional union of alternative types that can be specified for the `as` prop.
|
30
45
|
*
|
31
46
|
* ```
|
32
|
-
*
|
33
|
-
*
|
34
|
-
*
|
47
|
+
* IntrinsicSlotProps<'div'> // Slot is always div
|
48
|
+
* IntrinsicSlotProps<'button', 'a'> // Defaults to button, but allows as="a" with anchor-specific props
|
49
|
+
* IntrinsicSlotProps<'label', 'span' | 'div'>; // Defaults to label, but allows as="span" or as="div"
|
35
50
|
* ```
|
36
51
|
*/
|
37
|
-
export declare type
|
52
|
+
export declare type IntrinsicSlotProps<DefaultAs extends keyof JSX.IntrinsicElements, AlternateAs extends keyof JSX.IntrinsicElements = never> = IsSingleton<DefaultAs> extends false ? 'Error: first parameter to IntrinsicSlotProps must be a single element type, not a union of types' : ({
|
38
53
|
as?: DefaultAs;
|
39
|
-
} &
|
54
|
+
} & SlotProps<React.PropsWithRef<JSX.IntrinsicElements[DefaultAs]>>) | {
|
40
55
|
[As in AlternateAs]: {
|
41
56
|
as: As;
|
42
|
-
} &
|
57
|
+
} & SlotProps<React.PropsWithRef<JSX.IntrinsicElements[As]>>;
|
43
58
|
}[AlternateAs];
|
44
59
|
/**
|
45
60
|
* Evaluates to true if the given type contains exactly one string, or false if it is a union of strings.
|
@@ -69,20 +84,27 @@ export declare type AsIntrinsicElement<As extends keyof JSX.IntrinsicElements> =
|
|
69
84
|
export declare type UnionToIntersection<U> = (U extends unknown ? (x: U) => U : never) extends (x: infer I) => U ? I : never;
|
70
85
|
/**
|
71
86
|
* Removes the 'ref' prop from the given Props type, leaving unions intact (such as the discriminated union created by
|
72
|
-
*
|
87
|
+
* IntrinsicSlotProps). This allows IntrinsicSlotProps to be used with React.forwardRef.
|
73
88
|
*
|
74
89
|
* The conditional "extends unknown" (always true) exploits a quirk in the way TypeScript handles conditional
|
75
90
|
* types, to prevent unions from being expanded.
|
76
91
|
*/
|
77
92
|
export declare type PropsWithoutRef<P> = 'ref' extends keyof P ? (P extends unknown ? Omit<P, 'ref'> : P) : P;
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
93
|
+
/**
|
94
|
+
* Defines the Props type for a component given its slots and the definition of which one is the primary slot,
|
95
|
+
* defaulting to root if one is not provided.
|
96
|
+
*/
|
97
|
+
export declare type ComponentProps<Slots extends SlotPropsRecord, Primary extends keyof Slots = 'root'> = Omit<{
|
98
|
+
[Key in keyof Slots]?: ShorthandProps<NonNullable<Slots[Key]>>;
|
99
|
+
}, Primary & 'root'> & PropsWithoutRef<Slots[Primary]>;
|
100
|
+
/**
|
101
|
+
* Defines the State object of a component given its slots.
|
102
|
+
*/
|
103
|
+
export declare type ComponentState<Slots extends SlotPropsRecord> = {
|
104
|
+
components: {
|
105
|
+
[Key in keyof Slots]-?: React.ComponentType<NonNullable<Slots[Key]> extends SlotProps<infer P> ? P : NonNullable<Slots[Key]>> | (NonNullable<Slots[Key]> extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);
|
84
106
|
};
|
85
|
-
} &
|
107
|
+
} & Slots;
|
86
108
|
/**
|
87
109
|
* This is part of a hack to infer the element type from a native element *props* type.
|
88
110
|
* The only place the original element is found in a native props type (at least that's workable
|
package/lib/compose/types.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../src/compose/types.ts"],"names":[],"mappings":"
|
1
|
+
{"version":3,"sources":["../../src/compose/types.ts"],"names":[],"mappings":"WAyKA;AACA;AACA;AACA;AACA","sourceRoot":""}
|
package/lib/hooks/index.d.ts
CHANGED
@@ -1,11 +1,11 @@
|
|
1
1
|
export * from './useControllableState';
|
2
2
|
export * from './useBoolean';
|
3
3
|
export * from './useConst';
|
4
|
-
export * from './useControllableValue';
|
5
4
|
export * from './useEventCallback';
|
6
5
|
export * from './useFirstMount';
|
7
6
|
export * from './useId';
|
8
7
|
export * from './useIsomorphicLayoutEffect';
|
8
|
+
export * from './useMergedEventCallbacks';
|
9
9
|
export * from './useMergedRefs';
|
10
10
|
export * from './useMount';
|
11
11
|
export * from './useOnClickOutside';
|
package/lib/hooks/index.js
CHANGED
@@ -1,11 +1,11 @@
|
|
1
1
|
export * from './useControllableState';
|
2
2
|
export * from './useBoolean';
|
3
3
|
export * from './useConst';
|
4
|
-
export * from './useControllableValue';
|
5
4
|
export * from './useEventCallback';
|
6
5
|
export * from './useFirstMount';
|
7
6
|
export * from './useId';
|
8
7
|
export * from './useIsomorphicLayoutEffect';
|
8
|
+
export * from './useMergedEventCallbacks';
|
9
9
|
export * from './useMergedRefs';
|
10
10
|
export * from './useMount';
|
11
11
|
export * from './useOnClickOutside';
|
package/lib/hooks/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC"}
|
@@ -1,21 +1,31 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
export declare type UseControllableStateOptions<State> = {
|
3
3
|
/**
|
4
|
-
* User
|
4
|
+
* User-provided default state or initializer, for uncontrolled usage.
|
5
5
|
*/
|
6
6
|
defaultState?: State | (() => State);
|
7
7
|
/**
|
8
|
-
* User
|
8
|
+
* User-provided controlled state. `undefined` means internal state will be used.
|
9
9
|
*/
|
10
10
|
state: State | undefined;
|
11
11
|
/**
|
12
|
-
* Used
|
12
|
+
* Used as the initial state if `state` and `defaultState` are both `undefined`.
|
13
|
+
* If `undefined` is the correct initial state, pass that here.
|
13
14
|
*/
|
14
15
|
initialState: State;
|
15
16
|
};
|
16
17
|
/**
|
17
|
-
* A useState
|
18
|
-
*
|
19
|
-
*
|
18
|
+
* A `useState`-like hook to manage a value that could be either controlled or uncontrolled,
|
19
|
+
* such as a checked state or text input string.
|
20
|
+
*
|
21
|
+
* Unlike `setState`, it's okay to call the returned updater (dispatch) function for either a
|
22
|
+
* controlled or uncontrolled component. Calls will only be respected if the component is uncontrolled.
|
23
|
+
*
|
24
|
+
* @returns Same as [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate): an array
|
25
|
+
* of the current value and an updater (dispatch) function. The updater function is referentially
|
26
|
+
* stable (won't change during the component's lifecycle). It can take either a new value, or a
|
27
|
+
* function which is passed the previous value and returns the new value. Unlike `setState`, calls
|
28
|
+
* to the updater function will only be respected if the component is uncontrolled.
|
29
|
+
* @see https://reactjs.org/docs/uncontrolled-components.html
|
20
30
|
*/
|
21
31
|
export declare const useControllableState: <State>(options: UseControllableStateOptions<State>) => [State, React.Dispatch<React.SetStateAction<State>>];
|
@@ -1,23 +1,28 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import { useConst } from './useConst';
|
3
3
|
|
4
|
-
function isUndefined(state) {
|
5
|
-
return typeof state === 'undefined';
|
6
|
-
}
|
7
|
-
|
8
4
|
function isFactoryDispatch(newState) {
|
9
5
|
return typeof newState === 'function';
|
10
6
|
}
|
11
7
|
/**
|
12
|
-
* A useState
|
13
|
-
*
|
14
|
-
*
|
8
|
+
* A `useState`-like hook to manage a value that could be either controlled or uncontrolled,
|
9
|
+
* such as a checked state or text input string.
|
10
|
+
*
|
11
|
+
* Unlike `setState`, it's okay to call the returned updater (dispatch) function for either a
|
12
|
+
* controlled or uncontrolled component. Calls will only be respected if the component is uncontrolled.
|
13
|
+
*
|
14
|
+
* @returns Same as [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate): an array
|
15
|
+
* of the current value and an updater (dispatch) function. The updater function is referentially
|
16
|
+
* stable (won't change during the component's lifecycle). It can take either a new value, or a
|
17
|
+
* function which is passed the previous value and returns the new value. Unlike `setState`, calls
|
18
|
+
* to the updater function will only be respected if the component is uncontrolled.
|
19
|
+
* @see https://reactjs.org/docs/uncontrolled-components.html
|
15
20
|
*/
|
16
21
|
|
17
22
|
|
18
23
|
export const useControllableState = options => {
|
19
24
|
const isControlled = useIsControlled(options.state);
|
20
|
-
const initialState =
|
25
|
+
const initialState = typeof options.defaultState === 'undefined' ? options.initialState : options.defaultState;
|
21
26
|
const [internalState, setInternalState] = React.useState(initialState);
|
22
27
|
const state = isControlled ? options.state : internalState;
|
23
28
|
const stateRef = React.useRef(state);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/useControllableState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,YAAzB;;
|
1
|
+
{"version":3,"sources":["../../src/hooks/useControllableState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,YAAzB;;AAkBA,SAAS,iBAAT,CAAkC,QAAlC,EAAuE;AACrE,SAAO,OAAO,QAAP,KAAoB,UAA3B;AACD;AAED;;;;;;;;;;;;;AAaG;;;AACH,OAAO,MAAM,oBAAoB,GAC/B,OADkC,IAEsB;AACxD,QAAM,YAAY,GAAG,eAAe,CAAC,OAAO,CAAC,KAAT,CAApC;AACA,QAAM,YAAY,GAAG,OAAO,OAAO,CAAC,YAAf,KAAgC,WAAhC,GAA8C,OAAO,CAAC,YAAtD,GAAqE,OAAO,CAAC,YAAlG;AACA,QAAM,CAAC,aAAD,EAAgB,gBAAhB,IAAoC,KAAK,CAAC,QAAN,CAAsB,YAAtB,CAA1C;AAEA,QAAM,KAAK,GAAG,YAAY,GAAI,OAAO,CAAC,KAAZ,GAA8B,aAAxD;AAEA,QAAM,QAAQ,GAAG,KAAK,CAAC,MAAN,CAAa,KAAb,CAAjB;AACA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,IAAA,QAAQ,CAAC,OAAT,GAAmB,KAAnB;AACD,GAFD,EAEG,CAAC,KAAD,CAFH,EARwD,CAYxD;AACA;;AACA,QAAM,QAAQ,GAAG,KAAK,CAAC,WAAN,CAAmB,QAAD,IAA0C;AAC3E;AACA;AACA,QAAI,iBAAiB,CAAC,QAAD,CAArB,EAAiC;AAC/B,MAAA,QAAQ,CAAC,OAAT,GAAmB,QAAQ,CAAC,QAAQ,CAAC,OAAV,CAA3B;AACD,KAFD,MAEO;AACL,MAAA,QAAQ,CAAC,OAAT,GAAmB,QAAnB;AACD;;AAED,IAAA,gBAAgB,CAAC,QAAQ,CAAC,OAAV,CAAhB;AACD,GAVgB,EAUd,EAVc,CAAjB;AAYA,SAAO,CAAC,KAAD,EAAQ,QAAR,CAAP;AACD,CA7BM;AA+BP;;;;AAIG;;AACH,MAAM,eAAe,GAAI,eAAD,IAA6B;AACnD,QAAM,YAAY,GAAG,QAAQ,CAAU,eAAe,KAAK,SAA9B,CAA7B;;AAEA,MAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;AACzC;AACA;AACA,IAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,UAAI,YAAY,MAAM,eAAe,KAAK,SAA1B,CAAhB,EAAsD;AACpD,cAAM,KAAK,GAAG,IAAI,KAAJ,EAAd;AAEA,cAAM,cAAc,GAAG,YAAY,GAC/B,uCAD+B,GAE/B,wCAFJ;AAIA,cAAM,gBAAgB,GAAG,YAAY,GAAG,yBAAH,GAA+B,wBAApE,CAPoD,CASpD;;AACA,QAAA,OAAO,CAAC,KAAR,CACE,CACE;AACA,qCAA6B,cAA7B,GAA8C,sCAFhD,EAGE,mBAAmB,gBAAnB,GAAsC,kCAHxC,EAIE,oGAJF,EAKE,2DALF,EAME,KAAK,CAAC,KANR,EAOE,IAPF,CAOO,GAPP,CADF;AAUD;AACF,KAtBD,EAsBG,CAAC,YAAD,EAAe,eAAf,CAtBH;AAuBD;;AAED,SAAO,YAAP;AACD,CAhCD","sourceRoot":""}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
/**
|
2
|
+
* Combine two event callbacks into a single callback function that calls each one in order.
|
3
|
+
*
|
4
|
+
* This is useful to add an event listener to an existing element without overwriting the current listener, if any.
|
5
|
+
*
|
6
|
+
* For example:
|
7
|
+
* ```ts
|
8
|
+
* state.slot.onChange = useMergedCallbacks(state.slot.onChange, ev => {
|
9
|
+
* // Handle onChange
|
10
|
+
* });
|
11
|
+
* ```
|
12
|
+
*
|
13
|
+
* @param callback1 - The first callback to be called
|
14
|
+
* @param callback2 - The second callback to be called
|
15
|
+
*
|
16
|
+
* @returns An event callback that calls the callbacks in order, and is stable between renders
|
17
|
+
*/
|
18
|
+
export declare function useMergedEventCallbacks<Args extends unknown[]>(callback1: ((...args: Args) => void) | undefined, callback2: ((...args: Args) => void) | undefined): (...args: Args) => void;
|
@@ -0,0 +1,26 @@
|
|
1
|
+
import { useEventCallback } from './useEventCallback';
|
2
|
+
/**
|
3
|
+
* Combine two event callbacks into a single callback function that calls each one in order.
|
4
|
+
*
|
5
|
+
* This is useful to add an event listener to an existing element without overwriting the current listener, if any.
|
6
|
+
*
|
7
|
+
* For example:
|
8
|
+
* ```ts
|
9
|
+
* state.slot.onChange = useMergedCallbacks(state.slot.onChange, ev => {
|
10
|
+
* // Handle onChange
|
11
|
+
* });
|
12
|
+
* ```
|
13
|
+
*
|
14
|
+
* @param callback1 - The first callback to be called
|
15
|
+
* @param callback2 - The second callback to be called
|
16
|
+
*
|
17
|
+
* @returns An event callback that calls the callbacks in order, and is stable between renders
|
18
|
+
*/
|
19
|
+
|
20
|
+
export function useMergedEventCallbacks(callback1, callback2) {
|
21
|
+
return useEventCallback((...args) => {
|
22
|
+
callback1 === null || callback1 === void 0 ? void 0 : callback1(...args);
|
23
|
+
callback2 === null || callback2 === void 0 ? void 0 : callback2(...args);
|
24
|
+
});
|
25
|
+
}
|
26
|
+
//# sourceMappingURL=useMergedEventCallbacks.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/useMergedEventCallbacks.ts"],"names":[],"mappings":"AAAA,SAAS,gBAAT,QAAiC,oBAAjC;AAEA;;;;;;;;;;;;;;;;AAgBG;;AACH,OAAM,SAAU,uBAAV,CACJ,SADI,EAEJ,SAFI,EAE4C;AAEhD,SAAO,gBAAgB,CAAC,CAAC,GAAG,IAAJ,KAAkB;AACxC,IAAA,SAAS,KAAA,IAAT,IAAA,SAAS,KAAA,KAAA,CAAT,GAAS,KAAA,CAAT,GAAA,SAAS,CAAG,GAAG,IAAN,CAAT;AACA,IAAA,SAAS,KAAA,IAAT,IAAA,SAAS,KAAA,KAAA,CAAT,GAAS,KAAA,CAAT,GAAA,SAAS,CAAG,GAAG,IAAN,CAAT;AACD,GAHsB,CAAvB;AAID","sourceRoot":""}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/useOnClickOutside.ts"],"names":[],"mappings":"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
|
1
|
+
{"version":3,"sources":["../../src/hooks/useOnClickOutside.ts"],"names":[],"mappings":"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","sourceRoot":""}
|
@@ -2,4 +2,4 @@ import * as React from 'react';
|
|
2
2
|
/**
|
3
3
|
* Apply the trigger props to the children, either by calling the render function, or cloning with the new props.
|
4
4
|
*/
|
5
|
-
export declare const applyTriggerPropsToChildren: <TTriggerProps>(children: React.ReactElement<any, string |
|
5
|
+
export declare const applyTriggerPropsToChildren: <TTriggerProps>(children: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ((props: TTriggerProps) => React.ReactNode) | null | undefined, triggerProps: TTriggerProps) => React.ReactNode;
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import {
|
2
|
+
import { isFluentTrigger } from './isFluentTrigger';
|
3
3
|
/**
|
4
4
|
* Apply the trigger props to the children, either by calling the render function, or cloning with the new props.
|
5
5
|
*/
|
@@ -8,9 +8,26 @@ export const applyTriggerPropsToChildren = (children, triggerProps) => {
|
|
8
8
|
if (typeof children === 'function') {
|
9
9
|
return children(triggerProps);
|
10
10
|
} else if (children) {
|
11
|
-
return
|
11
|
+
return cloneTriggerTree(children, triggerProps);
|
12
12
|
}
|
13
13
|
|
14
14
|
return children;
|
15
15
|
};
|
16
|
+
/**
|
17
|
+
* Clones a React element tree, and applies the given props to the first grandchild that is not
|
18
|
+
* a FluentTriggerComponent or React Fragment (the same element returned by {@link getTriggerChild}).
|
19
|
+
*/
|
20
|
+
|
21
|
+
const cloneTriggerTree = (child, triggerProps) => {
|
22
|
+
if (! /*#__PURE__*/React.isValidElement(child) || child.type === React.Fragment) {
|
23
|
+
throw new Error('A trigger element must be a single element for this component. ' + "Please ensure that you're not using React Fragments.");
|
24
|
+
}
|
25
|
+
|
26
|
+
if (isFluentTrigger(child)) {
|
27
|
+
const grandchild = cloneTriggerTree(child.props.children, triggerProps);
|
28
|
+
return /*#__PURE__*/React.cloneElement(child, undefined, grandchild);
|
29
|
+
} else {
|
30
|
+
return /*#__PURE__*/React.cloneElement(child, triggerProps);
|
31
|
+
}
|
32
|
+
};
|
16
33
|
//# sourceMappingURL=applyTriggerPropsToChildren.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../src/utils/applyTriggerPropsToChildren.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,
|
1
|
+
{"version":3,"sources":["../../src/utils/applyTriggerPropsToChildren.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,eAAT,QAAgC,mBAAhC;AAEA;;AAEG;;AACH,OAAO,MAAM,2BAA2B,GAAG,CACzC,QADyC,EAEzC,YAFyC,KAGtB;AACnB,MAAI,OAAO,QAAP,KAAoB,UAAxB,EAAoC;AAClC,WAAO,QAAQ,CAAC,YAAD,CAAf;AACD,GAFD,MAEO,IAAI,QAAJ,EAAc;AACnB,WAAO,gBAAgB,CAAC,QAAD,EAAW,YAAX,CAAvB;AACD;;AAED,SAAO,QAAP;AACD,CAXM;AAaP;;;AAGG;;AACH,MAAM,gBAAgB,GAAG,CAAgB,KAAhB,EAAwC,YAAxC,KAA2F;AAClH,MAAI,eAAC,KAAK,CAAC,cAAN,CAAqB,KAArB,CAAD,IAAgC,KAAK,CAAC,IAAN,KAAe,KAAK,CAAC,QAAzD,EAAmE;AACjE,UAAM,IAAI,KAAJ,CACJ,oEACE,sDAFE,CAAN;AAID;;AAED,MAAI,eAAe,CAAC,KAAD,CAAnB,EAA4B;AAC1B,UAAM,UAAU,GAAG,gBAAgB,CAAC,KAAK,CAAC,KAAN,CAAY,QAAb,EAAuB,YAAvB,CAAnC;AACA,wBAAO,KAAK,CAAC,YAAN,CAAmB,KAAnB,EAA0B,SAA1B,EAAqC,UAArC,CAAP;AACD,GAHD,MAGO;AACL,wBAAO,KAAK,CAAC,YAAN,CAAmB,KAAnB,EAA0B,YAA1B,CAAP;AACD;AACF,CAdD","sourceRoot":""}
|
@@ -0,0 +1,25 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
interface ReactSyntheticEvent extends React.SyntheticEvent<unknown> {
|
3
|
+
_reactName?: string;
|
4
|
+
dispatchConfig?: {
|
5
|
+
registrationName: string;
|
6
|
+
phasedRegistrationNames: {
|
7
|
+
bubbled: string;
|
8
|
+
captured: string;
|
9
|
+
};
|
10
|
+
};
|
11
|
+
}
|
12
|
+
declare type NonUndefined<A> = A extends undefined ? never : A;
|
13
|
+
declare type FunctionKeys<T extends object> = {
|
14
|
+
[K in keyof T]-?: NonUndefined<T[K]> extends Function ? K : never;
|
15
|
+
}[keyof T];
|
16
|
+
export declare type ReactCallbackName = FunctionKeys<React.DOMAttributes<unknown>>;
|
17
|
+
/**
|
18
|
+
* React.SyntheticEvent contains name of a callback that should be fired, this function returns it.
|
19
|
+
*
|
20
|
+
* Ideally, it should also distinguish regular and "capture" callbacks, but it's possible only with React 17 as
|
21
|
+
* ".eventPhase" there has proper value, see https://github.com/facebook/react/pull/19244. In React 16 all events
|
22
|
+
* are handled in bubble phase.
|
23
|
+
*/
|
24
|
+
export declare function getReactCallbackName(event: ReactSyntheticEvent): ReactCallbackName | undefined;
|
25
|
+
export {};
|
@@ -0,0 +1,26 @@
|
|
1
|
+
/**
|
2
|
+
* React.SyntheticEvent contains name of a callback that should be fired, this function returns it.
|
3
|
+
*
|
4
|
+
* Ideally, it should also distinguish regular and "capture" callbacks, but it's possible only with React 17 as
|
5
|
+
* ".eventPhase" there has proper value, see https://github.com/facebook/react/pull/19244. In React 16 all events
|
6
|
+
* are handled in bubble phase.
|
7
|
+
*/
|
8
|
+
export function getReactCallbackName(event) {
|
9
|
+
if (event._reactName) {
|
10
|
+
return event._reactName;
|
11
|
+
}
|
12
|
+
|
13
|
+
if (event.dispatchConfig) {
|
14
|
+
if (event.dispatchConfig.registrationName) {
|
15
|
+
return event.dispatchConfig.registrationName;
|
16
|
+
}
|
17
|
+
|
18
|
+
return event.dispatchConfig.phasedRegistrationNames.bubbled;
|
19
|
+
}
|
20
|
+
|
21
|
+
if (process.env.NODE_ENV !== 'production') {
|
22
|
+
// eslint-disable-next-line no-console
|
23
|
+
console.error(['Passed React.SyntheticEvent does not contain ".dispatchConfig" or "._reactName".', 'This should not happen, please report it to https://github.com/microsoft/fluentui']);
|
24
|
+
}
|
25
|
+
}
|
26
|
+
//# sourceMappingURL=getReactCallbackName.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../src/utils/getReactCallbackName.ts"],"names":[],"mappings":"AAwBA;;;;;;AAMG;AACH,OAAM,SAAU,oBAAV,CAA+B,KAA/B,EAAyD;AAC7D,MAAI,KAAK,CAAC,UAAV,EAAsB;AACpB,WAAO,KAAK,CAAC,UAAb;AACD;;AAED,MAAI,KAAK,CAAC,cAAV,EAA0B;AACxB,QAAI,KAAK,CAAC,cAAN,CAAqB,gBAAzB,EAA2C;AACzC,aAAO,KAAK,CAAC,cAAN,CAAqB,gBAA5B;AACD;;AAED,WAAO,KAAK,CAAC,cAAN,CAAqB,uBAArB,CAA6C,OAApD;AACD;;AAED,MAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;AACzC;AACA,IAAA,OAAO,CAAC,KAAR,CAAc,CACZ,kFADY,EAEZ,mFAFY,CAAd;AAID;AACF","sourceRoot":""}
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
/**
|
3
|
+
* Gets the trigger element of a FluentTriggerComponent (such as Tooltip or MenuTrigger).
|
4
|
+
*
|
5
|
+
* In the case where the immediate child is itself a FluentTriggerComponent and/or React Fragment,
|
6
|
+
* it returns the first descendant that is _not_ a FluentTriggerComponent or Fragment.
|
7
|
+
* This allows multiple triggers to be stacked, and still apply their props to the actual trigger element.
|
8
|
+
*
|
9
|
+
* For example, the following returns `<div id="child" />`:
|
10
|
+
* ```jsx
|
11
|
+
* getTriggerChild(
|
12
|
+
* <Tooltip>
|
13
|
+
* <MenuTrigger>
|
14
|
+
* <div id="child" />
|
15
|
+
* </MenuTrigger>
|
16
|
+
* </Tooltip>
|
17
|
+
* );
|
18
|
+
* ```
|
19
|
+
*/
|
20
|
+
export declare const getTriggerChild: (children: React.ReactNode) => React.ReactElement & {
|
21
|
+
ref?: React.Ref<unknown>;
|
22
|
+
};
|
@@ -0,0 +1,26 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { isFluentTrigger } from './isFluentTrigger';
|
3
|
+
/**
|
4
|
+
* Gets the trigger element of a FluentTriggerComponent (such as Tooltip or MenuTrigger).
|
5
|
+
*
|
6
|
+
* In the case where the immediate child is itself a FluentTriggerComponent and/or React Fragment,
|
7
|
+
* it returns the first descendant that is _not_ a FluentTriggerComponent or Fragment.
|
8
|
+
* This allows multiple triggers to be stacked, and still apply their props to the actual trigger element.
|
9
|
+
*
|
10
|
+
* For example, the following returns `<div id="child" />`:
|
11
|
+
* ```jsx
|
12
|
+
* getTriggerChild(
|
13
|
+
* <Tooltip>
|
14
|
+
* <MenuTrigger>
|
15
|
+
* <div id="child" />
|
16
|
+
* </MenuTrigger>
|
17
|
+
* </Tooltip>
|
18
|
+
* );
|
19
|
+
* ```
|
20
|
+
*/
|
21
|
+
|
22
|
+
export const getTriggerChild = children => {
|
23
|
+
const child = React.Children.only(children);
|
24
|
+
return isFluentTrigger(child) ? getTriggerChild(child.props.children) : child;
|
25
|
+
};
|
26
|
+
//# sourceMappingURL=getTriggerChild.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../src/utils/getTriggerChild.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,eAAT,QAAgC,mBAAhC;AAEA;;;;;;;;;;;;;;;;;AAiBG;;AACH,OAAO,MAAM,eAAe,GAAI,QAAD,IAAiF;AAC9G,QAAM,KAAK,GAAG,KAAK,CAAC,QAAN,CAAe,IAAf,CAAoB,QAApB,CAAd;AACA,SAAO,eAAe,CAAC,KAAD,CAAf,GAAyB,eAAe,CAAC,KAAK,CAAC,KAAN,CAAY,QAAb,CAAxC,GAAiE,KAAxE;AACD,CAHM","sourceRoot":""}
|
package/lib/utils/index.d.ts
CHANGED
@@ -2,7 +2,8 @@ export * from './applyTriggerPropsToChildren';
|
|
2
2
|
export * from './clamp';
|
3
3
|
export * from './getNativeElementProps';
|
4
4
|
export * from './getRTLSafeKey';
|
5
|
+
export * from './getTriggerChild';
|
6
|
+
export * from './isFluentTrigger';
|
5
7
|
export * from './omit';
|
6
|
-
export * from './onlyChild';
|
7
8
|
export * from './properties';
|
8
9
|
export * from './shouldPreventDefaultOnKeyDown';
|
package/lib/utils/index.js
CHANGED
@@ -2,8 +2,9 @@ export * from './applyTriggerPropsToChildren';
|
|
2
2
|
export * from './clamp';
|
3
3
|
export * from './getNativeElementProps';
|
4
4
|
export * from './getRTLSafeKey';
|
5
|
+
export * from './getTriggerChild';
|
6
|
+
export * from './isFluentTrigger';
|
5
7
|
export * from './omit';
|
6
|
-
export * from './onlyChild';
|
7
8
|
export * from './properties';
|
8
9
|
export * from './shouldPreventDefaultOnKeyDown';
|
9
10
|
//# sourceMappingURL=index.js.map
|
package/lib/utils/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,SAAS,CAAC;AACxB,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,SAAS,CAAC;AACxB,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,iCAAiC,CAAC"}
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
/**
|
3
|
+
* Allows a component to be tagged as a FluentUI trigger component.
|
4
|
+
*
|
5
|
+
* Triggers are special-case components: they attach event listeners and other props on their child,
|
6
|
+
* and use them to trigger another component to show. Examples include `MenuTrigger` and `Tooltip`.
|
7
|
+
*
|
8
|
+
* A component can be tagged as a trigger as follows:
|
9
|
+
* ```ts
|
10
|
+
* const MyComponent: React.FC<MyComponentProps> & FluentTriggerComponent = ...;
|
11
|
+
*
|
12
|
+
* MyComponent.isFluentTriggerComponent = true; // MUST also set this to true
|
13
|
+
* ```
|
14
|
+
*/
|
15
|
+
export declare type FluentTriggerComponent = {
|
16
|
+
isFluentTriggerComponent?: boolean;
|
17
|
+
};
|
18
|
+
/**
|
19
|
+
* Checks if a given element is a FluentUI trigger (e.g. `MenuTrigger` or `Tooltip`).
|
20
|
+
* See the {@link FluentTriggerComponent} type for more info.
|
21
|
+
*/
|
22
|
+
export declare const isFluentTrigger: (element: React.ReactElement) => boolean | undefined;
|
@@ -0,0 +1,8 @@
|
|
1
|
+
/**
|
2
|
+
* Checks if a given element is a FluentUI trigger (e.g. `MenuTrigger` or `Tooltip`).
|
3
|
+
* See the {@link FluentTriggerComponent} type for more info.
|
4
|
+
*/
|
5
|
+
export const isFluentTrigger = element => {
|
6
|
+
return element.type.isFluentTriggerComponent;
|
7
|
+
};
|
8
|
+
//# sourceMappingURL=isFluentTrigger.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../src/utils/isFluentTrigger.ts"],"names":[],"mappings":"AAmBA;;;AAGG;AACH,OAAO,MAAM,eAAe,GAAI,OAAD,IAAgC;AAC7D,SAAQ,OAAO,CAAC,IAAR,CAAwC,wBAAhD;AACD,CAFM","sourceRoot":""}
|