@fluentui/react-utilities 0.0.0-nightlya9c3d10d9520220113.1 → 0.0.0-nightlyb8663b78ad20220207.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 +48 -6
- package/CHANGELOG.md +11 -6
- package/dist/react-utilities.d.ts +134 -52
- package/lib/compose/getSlots.d.ts +7 -7
- 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 +47 -25
- package/lib/compose/types.js.map +1 -1
- package/lib/hooks/index.d.ts +1 -0
- package/lib/hooks/index.js +1 -0
- package/lib/hooks/index.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/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-commonjs/compose/getSlots.d.ts +7 -7
- 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 +47 -25
- package/lib-commonjs/compose/types.js.map +1 -1
- package/lib-commonjs/hooks/index.d.ts +1 -0
- package/lib-commonjs/hooks/index.js +2 -0
- package/lib-commonjs/hooks/index.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/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/package.json +3 -3
- 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/utils/onlyChild.d.ts +0 -5
- package/lib-commonjs/utils/onlyChild.js +0 -23
- package/lib-commonjs/utils/onlyChild.js.map +0 -1
@@ -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,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":""}
|
@@ -1,10 +1,10 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import { AsIntrinsicElement, ComponentState,
|
3
|
-
export declare type Slots<S extends
|
4
|
-
[K in keyof S]-?: NonNullable<S[K]> extends AsIntrinsicElement<infer As> ? As : S[K] extends
|
2
|
+
import type { AsIntrinsicElement, ComponentState, SlotProps, SlotPropsRecord, UnionToIntersection } from './types';
|
3
|
+
export declare type Slots<S extends SlotPropsRecord> = {
|
4
|
+
[K in keyof S]-?: NonNullable<S[K]> extends AsIntrinsicElement<infer As> ? As : S[K] extends SlotProps<infer P> ? React.ElementType<NonNullable<P>> : React.ElementType<NonNullable<S[K]>>;
|
5
5
|
};
|
6
|
-
declare type
|
7
|
-
[K in keyof S]-?: NonNullable<S[K]> extends AsIntrinsicElement<infer As> ? UnionToIntersection<JSX.IntrinsicElements[As]> : NonNullable<S[K]> extends
|
6
|
+
declare type ObjectSlotProps<S extends SlotPropsRecord> = {
|
7
|
+
[K in keyof S]-?: NonNullable<S[K]> extends AsIntrinsicElement<infer As> ? UnionToIntersection<JSX.IntrinsicElements[As]> : NonNullable<S[K]> extends SlotProps<infer P> ? P : never;
|
8
8
|
};
|
9
9
|
/**
|
10
10
|
* Given the state and an array of slot names, will break out `slots` and `slotProps`
|
@@ -23,8 +23,8 @@ declare type SlotProps<S extends ObjectShorthandPropsRecord> = {
|
|
23
23
|
* @param state - State including slot definitions
|
24
24
|
* @returns An object containing the `slots` map and `slotProps` map.
|
25
25
|
*/
|
26
|
-
export declare function getSlots<R extends
|
26
|
+
export declare function getSlots<R extends SlotPropsRecord>(state: ComponentState<R>): {
|
27
27
|
slots: Slots<R>;
|
28
|
-
slotProps:
|
28
|
+
slotProps: ObjectSlotProps<R>;
|
29
29
|
};
|
30
30
|
export {};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../src/compose/getSlots.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;
|
1
|
+
{"version":3,"sources":["../../src/compose/getSlots.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,MAAA,MAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;AA6BA;;;;;;;;;;;;;;;;AAgBG;;;AACH,SAAgB,QAAhB,CACE,KADF,EAC0B;AAKxB,QAAM,KAAK,GAAG,EAAd;AACA,QAAM,SAAS,GAAG,EAAlB;AAEA,QAAM,SAAS,GAAgB,MAAM,CAAC,IAAP,CAAY,KAAK,CAAC,UAAlB,CAA/B;;AACA,OAAK,MAAM,QAAX,IAAuB,SAAvB,EAAkC;AAChC,UAAM,CAAC,IAAD,EAAO,KAAP,IAAgB,OAAO,CAAC,KAAD,EAAQ,QAAR,CAA7B;AACA,IAAA,KAAK,CAAC,QAAD,CAAL,GAAkB,IAAlB;AACA,IAAA,SAAS,CAAC,QAAD,CAAT,GAAsB,KAAtB;AACD;;AACD,SAAO;AAAE,IAAA,KAAF;AAAS,IAAA,SAAS,EAAG;AAArB,GAAP;AACD;;AAhBD,OAAA,CAAA,QAAA,GAAA,QAAA;;AAkBA,SAAS,OAAT,CACE,KADF,EAEE,QAFF,EAEa;;;AAEX,MAAI,KAAK,CAAC,QAAD,CAAL,KAAoB,SAAxB,EAAmC;AACjC,WAAO,CAAC,YAAA,CAAA,UAAD,EAAa,SAAb,CAAP;AACD;;AACD,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA,EAAE,EAAE,MAAhB;AAAwB,OAAG;AAA3B,MAAoC,KAAK,CAAC,QAAD,CAA/C;AAEA,QAAM,IAAI,GAAI,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,UAAN,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,KAAA,CAAhB,GAAgB,EAAA,CAAG,QAAH,CAAhB,MAAiC,SAAjC,IAA8C,OAAO,KAAK,CAAC,UAAN,CAAiB,QAAjB,CAAP,KAAsC,QAApF,GACV,MAAM,KAAI,CAAA,EAAA,GAAA,KAAK,CAAC,UAAN,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,KAAA,CAAhB,GAAgB,EAAA,CAAG,QAAH,CAApB,CAAN,IAA0C,KADhC,GAEV,KAAK,CAAC,UAAN,CAAiB,QAAjB,CAFJ;;AAIA,MAAI,OAAO,QAAP,KAAoB,UAAxB,EAAoC;AAClC,UAAM,MAAM,GAAG,QAAf;AACA,WAAO,CACL,KAAK,CAAC,QADD,EAEJ;AACC,MAAA,QAAQ,EAAE,MAAM,CAAC,IAAD,EAAO,IAAP;AADjB,KAFI,CAAP;AAMD;;AAED,QAAM,gBAAgB,GAAG,OAAO,IAAP,KAAgB,QAAhB,KAA4B,CAAA,EAAA,GAAA,KAAK,CAAC,QAAD,CAAL,MAAe,IAAf,IAAe,EAAA,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAe,EAAA,CAAE,EAA7C,CAAzB;AACA,QAAM,SAAS,GAAI,gBAAgB,GAAG,MAAA,CAAA,IAAA,CAAK,KAAK,CAAC,QAAD,CAAV,EAAuB,CAAC,IAAD,CAAvB,CAAH,GAAoC,KAAK,CAAC,QAAD,CAA5E;AAEA,SAAO,CAAC,IAAD,EAAO,SAAP,CAAP;AACD","sourceRoot":""}
|
@@ -1,12 +1,12 @@
|
|
1
|
-
import type {
|
1
|
+
import type { UnknownSlotProps, ShorthandProps } from './types';
|
2
2
|
export declare type ResolveShorthandOptions<Props extends Record<string, any>, Required extends boolean = false> = {
|
3
3
|
required?: Required;
|
4
4
|
defaultProps?: Props;
|
5
5
|
};
|
6
6
|
/**
|
7
|
-
* Resolves
|
7
|
+
* Resolves shorthands into slot props, to ensure normalization of the signature
|
8
8
|
* being passed down to getSlots method
|
9
|
-
* @param value - the base
|
10
|
-
* @param options - options to resolve
|
9
|
+
* @param value - the base shorthand props
|
10
|
+
* @param options - options to resolve shorthand props
|
11
11
|
*/
|
12
|
-
export declare function resolveShorthand<Props extends
|
12
|
+
export declare function resolveShorthand<Props extends UnknownSlotProps, Required extends boolean = false>(value: ShorthandProps<Props>, options?: ResolveShorthandOptions<Props, Required>): Required extends false ? Props | undefined : Props;
|
@@ -7,10 +7,10 @@ exports.resolveShorthand = void 0;
|
|
7
7
|
|
8
8
|
const react_1 = /*#__PURE__*/require("react");
|
9
9
|
/**
|
10
|
-
* Resolves
|
10
|
+
* Resolves shorthands into slot props, to ensure normalization of the signature
|
11
11
|
* being passed down to getSlots method
|
12
|
-
* @param value - the base
|
13
|
-
* @param options - options to resolve
|
12
|
+
* @param value - the base shorthand props
|
13
|
+
* @param options - options to resolve shorthand props
|
14
14
|
*/
|
15
15
|
|
16
16
|
|
@@ -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
|
-
|
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> = {
|
82
104
|
components: {
|
83
|
-
[Key in keyof
|
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
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../src/compose/types.ts"],"names":[],"mappings":";;;;
|
1
|
+
{"version":3,"sources":["../../src/compose/types.ts"],"names":[],"mappings":";;;;IAyKA;AACA;AACA;AACA;AACA","sourceRoot":""}
|
@@ -5,6 +5,7 @@ export * from './useEventCallback';
|
|
5
5
|
export * from './useFirstMount';
|
6
6
|
export * from './useId';
|
7
7
|
export * from './useIsomorphicLayoutEffect';
|
8
|
+
export * from './useMergedEventCallbacks';
|
8
9
|
export * from './useMergedRefs';
|
9
10
|
export * from './useMount';
|
10
11
|
export * from './useOnClickOutside';
|
@@ -20,6 +20,8 @@ tslib_1.__exportStar(require("./useId"), exports);
|
|
20
20
|
|
21
21
|
tslib_1.__exportStar(require("./useIsomorphicLayoutEffect"), exports);
|
22
22
|
|
23
|
+
tslib_1.__exportStar(require("./useMergedEventCallbacks"), exports);
|
24
|
+
|
23
25
|
tslib_1.__exportStar(require("./useMergedRefs"), exports);
|
24
26
|
|
25
27
|
tslib_1.__exportStar(require("./useMount"), exports);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA","sourceRoot":""}
|
1
|
+
{"version":3,"sources":["../../src/hooks/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA","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,36 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.useMergedEventCallbacks = void 0;
|
7
|
+
|
8
|
+
const useEventCallback_1 = /*#__PURE__*/require("./useEventCallback");
|
9
|
+
/**
|
10
|
+
* Combine two event callbacks into a single callback function that calls each one in order.
|
11
|
+
*
|
12
|
+
* This is useful to add an event listener to an existing element without overwriting the current listener, if any.
|
13
|
+
*
|
14
|
+
* For example:
|
15
|
+
* ```ts
|
16
|
+
* state.slot.onChange = useMergedCallbacks(state.slot.onChange, ev => {
|
17
|
+
* // Handle onChange
|
18
|
+
* });
|
19
|
+
* ```
|
20
|
+
*
|
21
|
+
* @param callback1 - The first callback to be called
|
22
|
+
* @param callback2 - The second callback to be called
|
23
|
+
*
|
24
|
+
* @returns An event callback that calls the callbacks in order, and is stable between renders
|
25
|
+
*/
|
26
|
+
|
27
|
+
|
28
|
+
function useMergedEventCallbacks(callback1, callback2) {
|
29
|
+
return useEventCallback_1.useEventCallback((...args) => {
|
30
|
+
callback1 === null || callback1 === void 0 ? void 0 : callback1(...args);
|
31
|
+
callback2 === null || callback2 === void 0 ? void 0 : callback2(...args);
|
32
|
+
});
|
33
|
+
}
|
34
|
+
|
35
|
+
exports.useMergedEventCallbacks = useMergedEventCallbacks;
|
36
|
+
//# sourceMappingURL=useMergedEventCallbacks.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/useMergedEventCallbacks.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;AAEA;;;;;;;;;;;;;;;;AAgBG;;;AACH,SAAgB,uBAAhB,CACE,SADF,EAEE,SAFF,EAEkD;AAEhD,SAAO,kBAAA,CAAA,gBAAA,CAAiB,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,GAHM,CAAP;AAID;;AARD,OAAA,CAAA,uBAAA,GAAA,uBAAA","sourceRoot":""}
|
@@ -7,7 +7,7 @@ exports.applyTriggerPropsToChildren = void 0;
|
|
7
7
|
|
8
8
|
const React = /*#__PURE__*/require("react");
|
9
9
|
|
10
|
-
const
|
10
|
+
const isFluentTrigger_1 = /*#__PURE__*/require("./isFluentTrigger");
|
11
11
|
/**
|
12
12
|
* Apply the trigger props to the children, either by calling the render function, or cloning with the new props.
|
13
13
|
*/
|
@@ -17,11 +17,28 @@ const applyTriggerPropsToChildren = (children, triggerProps) => {
|
|
17
17
|
if (typeof children === 'function') {
|
18
18
|
return children(triggerProps);
|
19
19
|
} else if (children) {
|
20
|
-
return
|
20
|
+
return cloneTriggerTree(children, triggerProps);
|
21
21
|
}
|
22
22
|
|
23
23
|
return children;
|
24
24
|
};
|
25
25
|
|
26
26
|
exports.applyTriggerPropsToChildren = applyTriggerPropsToChildren;
|
27
|
+
/**
|
28
|
+
* Clones a React element tree, and applies the given props to the first grandchild that is not
|
29
|
+
* a FluentTriggerComponent or React Fragment (the same element returned by {@link getTriggerChild}).
|
30
|
+
*/
|
31
|
+
|
32
|
+
const cloneTriggerTree = (child, triggerProps) => {
|
33
|
+
if (!React.isValidElement(child) || child.type === React.Fragment) {
|
34
|
+
throw new Error('A trigger element must be a single element for this component. ' + "Please ensure that you're not using React Fragments.");
|
35
|
+
}
|
36
|
+
|
37
|
+
if (isFluentTrigger_1.isFluentTrigger(child)) {
|
38
|
+
const grandchild = cloneTriggerTree(child.props.children, triggerProps);
|
39
|
+
return React.cloneElement(child, undefined, grandchild);
|
40
|
+
} else {
|
41
|
+
return React.cloneElement(child, triggerProps);
|
42
|
+
}
|
43
|
+
};
|
27
44
|
//# sourceMappingURL=applyTriggerPropsToChildren.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../src/utils/applyTriggerPropsToChildren.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,
|
1
|
+
{"version":3,"sources":["../../src/utils/applyTriggerPropsToChildren.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAEA;;AAEG;;;AACI,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;;AAAM,OAAA,CAAA,2BAAA,GAA2B,2BAA3B;AAab;;;AAGG;;AACH,MAAM,gBAAgB,GAAG,CAAgB,KAAhB,EAAwC,YAAxC,KAA2F;AAClH,MAAI,CAAC,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,iBAAA,CAAA,eAAA,CAAgB,KAAhB,CAAJ,EAA4B;AAC1B,UAAM,UAAU,GAAG,gBAAgB,CAAC,KAAK,CAAC,KAAN,CAAY,QAAb,EAAuB,YAAvB,CAAnC;AACA,WAAO,KAAK,CAAC,YAAN,CAAmB,KAAnB,EAA0B,SAA1B,EAAqC,UAArC,CAAP;AACD,GAHD,MAGO;AACL,WAAO,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 {};
|