@fluentui/react-utilities 9.11.1 → 9.12.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.json +39 -1
- package/CHANGELOG.md +24 -2
- package/dist/index.d.ts +13 -3
- package/lib/compose/assertSlots.js +15 -2
- package/lib/compose/assertSlots.js.map +1 -1
- package/lib/hooks/index.js +1 -0
- package/lib/hooks/index.js.map +1 -1
- package/lib/hooks/useAnimationFrame.js +12 -0
- package/lib/hooks/useAnimationFrame.js.map +1 -0
- package/lib/hooks/useBrowserTimer.js +45 -0
- package/lib/hooks/useBrowserTimer.js.map +1 -0
- package/lib/hooks/useOnClickOutside.js +18 -4
- package/lib/hooks/useOnClickOutside.js.map +1 -1
- package/lib/hooks/useTimeout.js +5 -24
- package/lib/hooks/useTimeout.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/compose/assertSlots.js +16 -2
- package/lib-commonjs/compose/assertSlots.js.map +1 -1
- package/lib-commonjs/hooks/index.js +1 -0
- package/lib-commonjs/hooks/index.js.map +1 -1
- package/lib-commonjs/hooks/useAnimationFrame.js +13 -0
- package/lib-commonjs/hooks/useAnimationFrame.js.map +1 -0
- package/lib-commonjs/hooks/useBrowserTimer.js +39 -0
- package/lib-commonjs/hooks/useBrowserTimer.js.map +1 -0
- package/lib-commonjs/hooks/useOnClickOutside.js +18 -4
- package/lib-commonjs/hooks/useOnClickOutside.js.map +1 -1
- package/lib-commonjs/hooks/useTimeout.js +3 -23
- package/lib-commonjs/hooks/useTimeout.js.map +1 -1
- package/lib-commonjs/index.js +1 -0
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.json
CHANGED
@@ -2,7 +2,45 @@
|
|
2
2
|
"name": "@fluentui/react-utilities",
|
3
3
|
"entries": [
|
4
4
|
{
|
5
|
-
"date": "
|
5
|
+
"date": "Thu, 24 Aug 2023 10:23:07 GMT",
|
6
|
+
"tag": "@fluentui/react-utilities_v9.12.0",
|
7
|
+
"version": "9.12.0",
|
8
|
+
"comments": {
|
9
|
+
"patch": [
|
10
|
+
{
|
11
|
+
"author": "yuanboxue@microsoft.com",
|
12
|
+
"package": "@fluentui/react-utilities",
|
13
|
+
"commit": "192b74335ed4d99dbcbeeab5aa2075409e911e1a",
|
14
|
+
"comment": "fix: `useOnClickOutside` should consider text selection starting inside and finishing outside as an inside click"
|
15
|
+
}
|
16
|
+
],
|
17
|
+
"minor": [
|
18
|
+
{
|
19
|
+
"author": "marcosvmmoura@gmail.com",
|
20
|
+
"package": "@fluentui/react-utilities",
|
21
|
+
"commit": "148d5fa771ea9eb1f5a96f817782e76484070ec3",
|
22
|
+
"comment": "feat: create a new useAnimationFrame hook"
|
23
|
+
}
|
24
|
+
]
|
25
|
+
}
|
26
|
+
},
|
27
|
+
{
|
28
|
+
"date": "Wed, 23 Aug 2023 12:01:49 GMT",
|
29
|
+
"tag": "@fluentui/react-utilities_v9.11.2",
|
30
|
+
"version": "9.11.2",
|
31
|
+
"comments": {
|
32
|
+
"patch": [
|
33
|
+
{
|
34
|
+
"author": "bernardo.sunderhus@gmail.com",
|
35
|
+
"package": "@fluentui/react-utilities",
|
36
|
+
"commit": "f94b6d05d7642563cb96e2718402fbbbab65cbbc",
|
37
|
+
"comment": "bugfix: ensure interop between assertSlots and old API"
|
38
|
+
}
|
39
|
+
]
|
40
|
+
}
|
41
|
+
},
|
42
|
+
{
|
43
|
+
"date": "Fri, 11 Aug 2023 12:14:25 GMT",
|
6
44
|
"tag": "@fluentui/react-utilities_v9.11.1",
|
7
45
|
"version": "9.11.1",
|
8
46
|
"comments": {
|
package/CHANGELOG.md
CHANGED
@@ -1,12 +1,34 @@
|
|
1
1
|
# Change Log - @fluentui/react-utilities
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Thu, 24 Aug 2023 10:23:07 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
+
## [9.12.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.12.0)
|
8
|
+
|
9
|
+
Thu, 24 Aug 2023 10:23:07 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.11.2..@fluentui/react-utilities_v9.12.0)
|
11
|
+
|
12
|
+
### Minor changes
|
13
|
+
|
14
|
+
- feat: create a new useAnimationFrame hook ([PR #28948](https://github.com/microsoft/fluentui/pull/28948) by marcosvmmoura@gmail.com)
|
15
|
+
|
16
|
+
### Patches
|
17
|
+
|
18
|
+
- fix: `useOnClickOutside` should consider text selection starting inside and finishing outside as an inside click ([PR #28765](https://github.com/microsoft/fluentui/pull/28765) by yuanboxue@microsoft.com)
|
19
|
+
|
20
|
+
## [9.11.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.11.2)
|
21
|
+
|
22
|
+
Wed, 23 Aug 2023 12:01:49 GMT
|
23
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.11.1..@fluentui/react-utilities_v9.11.2)
|
24
|
+
|
25
|
+
### Patches
|
26
|
+
|
27
|
+
- bugfix: ensure interop between assertSlots and old API ([PR #28957](https://github.com/microsoft/fluentui/pull/28957) by bernardo.sunderhus@gmail.com)
|
28
|
+
|
7
29
|
## [9.11.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.11.1)
|
8
30
|
|
9
|
-
Fri, 11 Aug 2023 12:
|
31
|
+
Fri, 11 Aug 2023 12:14:25 GMT
|
10
32
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.11.0..@fluentui/react-utilities_v9.11.1)
|
11
33
|
|
12
34
|
### Patches
|
package/dist/index.d.ts
CHANGED
@@ -684,6 +684,16 @@ export declare type UnknownSlotProps = Pick<React_2.HTMLAttributes<HTMLElement>,
|
|
684
684
|
as?: keyof JSX.IntrinsicElements;
|
685
685
|
};
|
686
686
|
|
687
|
+
/**
|
688
|
+
* @internal
|
689
|
+
* Helper to manage a browser requestAnimationFrame.
|
690
|
+
* Ensures that the requestAnimationFrame isn't set multiple times at once and is cleaned up
|
691
|
+
* when the component is unloaded.
|
692
|
+
*
|
693
|
+
* @returns A pair of [requestAnimationFrame, cancelAnimationFrame] that are stable between renders.
|
694
|
+
*/
|
695
|
+
export declare function useAnimationFrame(): readonly [(fn: () => void, delay?: number | undefined) => number, () => void];
|
696
|
+
|
687
697
|
/**
|
688
698
|
* @internal
|
689
699
|
*
|
@@ -858,12 +868,12 @@ export declare function useSelection(params: SelectionHookParams): readonly [Set
|
|
858
868
|
/**
|
859
869
|
* @internal
|
860
870
|
* Helper to manage a browser timeout.
|
861
|
-
* Ensures that the timeout isn't set multiple times at once
|
862
|
-
*
|
871
|
+
* Ensures that the timeout isn't set multiple times at once and is cleaned up
|
872
|
+
* when the component is unloaded.
|
863
873
|
*
|
864
874
|
* @returns A pair of [setTimeout, clearTimeout] that are stable between renders.
|
865
875
|
*/
|
866
|
-
export declare function useTimeout(): readonly [(fn: () => void, delay
|
876
|
+
export declare function useTimeout(): readonly [(fn: () => void, delay?: number | undefined) => number, () => void];
|
867
877
|
|
868
878
|
/**
|
869
879
|
* Helper type for {@link Slot}. Takes the props we want to support for a slot and adds the ability for `children`
|
@@ -1,5 +1,7 @@
|
|
1
|
+
import * as React from 'react';
|
1
2
|
import { SLOT_ELEMENT_TYPE_SYMBOL } from './constants';
|
2
3
|
import { isSlot } from './isSlot';
|
4
|
+
import { slot } from './index';
|
3
5
|
/**
|
4
6
|
* @internal
|
5
7
|
* Assertion method to ensure state slots properties are properly declared.
|
@@ -29,12 +31,23 @@ import { isSlot } from './isSlot';
|
|
29
31
|
if (slotElement === undefined) {
|
30
32
|
continue;
|
31
33
|
}
|
34
|
+
// this means a slot is being declared without using, slot.always or slot.optional or even resolveShorthand on the state hook,
|
35
|
+
// but the render method is using the new `assertSlots` method. That scenario can be solved by simply updating the slot element with the proper element type
|
36
|
+
// FIXME: this slot will still fail to support child render function scenario
|
32
37
|
if (!isSlot(slotElement)) {
|
33
|
-
|
38
|
+
typedState[slotName] = slot.always(slotElement, {
|
39
|
+
elementType: typedState.components[slotName]
|
40
|
+
});
|
41
|
+
// eslint-disable-next-line no-console
|
42
|
+
console.warn(`${assertSlots.name} warning: state.${slotName} is not a slot.\n` + `Be sure to create slots properly by using 'slot.always' or 'slot.optional'.`);
|
34
43
|
} else {
|
44
|
+
// This means a slot is being declared by using resolveShorthand on the state hook,
|
45
|
+
// but the render method is using the new `assertSlots` method. That scenario can be solved by simply updating the slot element with the proper element type
|
35
46
|
const { [SLOT_ELEMENT_TYPE_SYMBOL]: elementType } = slotElement;
|
36
47
|
if (elementType !== typedState.components[slotName]) {
|
37
|
-
|
48
|
+
slotElement[SLOT_ELEMENT_TYPE_SYMBOL] = typedState.components[slotName];
|
49
|
+
// eslint-disable-next-line no-console
|
50
|
+
console.warn(`${assertSlots.name} warning: state.${slotName} element type differs from state.components.${slotName}, ${elementType} !== ${typedState.components[slotName]}. \n` + `Be sure to create slots properly by using 'slot.always' or 'slot.optional' with the correct elementType`);
|
38
51
|
}
|
39
52
|
}
|
40
53
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["assertSlots.ts"],"sourcesContent":["import { SLOT_ELEMENT_TYPE_SYMBOL } from './constants';\nimport { isSlot } from './isSlot';\nimport { ComponentState, ExtractSlotProps, SlotComponentType, SlotPropsRecord } from './types';\n\ntype SlotComponents<Slots extends SlotPropsRecord> = {\n [K in keyof Slots]: SlotComponentType<ExtractSlotProps<Slots[K]>>;\n};\n\n/**\n * @internal\n * Assertion method to ensure state slots properties are properly declared.\n * A properly declared slot must be declared by using the `slot` method.\n *\n * @example\n * ```tsx\n * export const renderInput_unstable = (state: InputState) => {\n assertSlots<InputSlots>(state);\n return (\n <state.root>\n {state.contentBefore && <state.contentBefore />}\n <state.input />\n {state.contentAfter && <state.contentAfter />}\n </state.root>\n );\n };\n * ```\n */\nexport function assertSlots<Slots extends SlotPropsRecord>(state: unknown): asserts state is SlotComponents<Slots> {\n /**\n * This verification is not necessary in production\n * as we're verifying static properties that will not change between environments\n */\n if (process.env.NODE_ENV !== 'production') {\n const typedState = state as ComponentState<Slots>;\n for (const slotName of Object.keys(typedState.components)) {\n const slotElement = typedState[slotName];\n if (slotElement === undefined) {\n continue;\n }\n if (!isSlot(slotElement)) {\n
|
1
|
+
{"version":3,"sources":["assertSlots.ts"],"sourcesContent":["import * as React from 'react';\nimport { SLOT_ELEMENT_TYPE_SYMBOL } from './constants';\nimport { isSlot } from './isSlot';\nimport { ComponentState, ExtractSlotProps, SlotComponentType, SlotPropsRecord } from './types';\nimport { slot } from './index';\n\ntype SlotComponents<Slots extends SlotPropsRecord> = {\n [K in keyof Slots]: SlotComponentType<ExtractSlotProps<Slots[K]>>;\n};\n\n/**\n * @internal\n * Assertion method to ensure state slots properties are properly declared.\n * A properly declared slot must be declared by using the `slot` method.\n *\n * @example\n * ```tsx\n * export const renderInput_unstable = (state: InputState) => {\n assertSlots<InputSlots>(state);\n return (\n <state.root>\n {state.contentBefore && <state.contentBefore />}\n <state.input />\n {state.contentAfter && <state.contentAfter />}\n </state.root>\n );\n };\n * ```\n */\nexport function assertSlots<Slots extends SlotPropsRecord>(state: unknown): asserts state is SlotComponents<Slots> {\n /**\n * This verification is not necessary in production\n * as we're verifying static properties that will not change between environments\n */\n if (process.env.NODE_ENV !== 'production') {\n const typedState = state as ComponentState<Slots>;\n for (const slotName of Object.keys(typedState.components)) {\n const slotElement = typedState[slotName];\n if (slotElement === undefined) {\n continue;\n }\n // this means a slot is being declared without using, slot.always or slot.optional or even resolveShorthand on the state hook,\n // but the render method is using the new `assertSlots` method. That scenario can be solved by simply updating the slot element with the proper element type\n // FIXME: this slot will still fail to support child render function scenario\n if (!isSlot(slotElement)) {\n typedState[slotName as keyof ComponentState<Slots>] = slot.always(slotElement, {\n elementType: typedState.components[slotName] as React.ComponentType<{}>,\n }) as ComponentState<Slots>[keyof ComponentState<Slots>];\n // eslint-disable-next-line no-console\n console.warn(\n `${assertSlots.name} warning: state.${slotName} is not a slot.\\n` +\n `Be sure to create slots properly by using 'slot.always' or 'slot.optional'.`,\n );\n } else {\n // This means a slot is being declared by using resolveShorthand on the state hook,\n // but the render method is using the new `assertSlots` method. That scenario can be solved by simply updating the slot element with the proper element type\n const { [SLOT_ELEMENT_TYPE_SYMBOL]: elementType } = slotElement;\n if (elementType !== typedState.components[slotName]) {\n slotElement[SLOT_ELEMENT_TYPE_SYMBOL] = typedState.components[slotName] as React.ComponentType<{}>;\n // eslint-disable-next-line no-console\n console.warn(\n `${assertSlots.name} warning: state.${slotName} element type differs from state.components.${slotName}, ${elementType} !== ${typedState.components[slotName]}. \\n` +\n `Be sure to create slots properly by using 'slot.always' or 'slot.optional' with the correct elementType`,\n );\n }\n }\n }\n }\n}\n"],"names":["React","SLOT_ELEMENT_TYPE_SYMBOL","isSlot","slot","assertSlots","state","process","env","NODE_ENV","typedState","slotName","Object","keys","components","slotElement","undefined","always","elementType","console","warn","name"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,cAAc;AACvD,SAASC,MAAM,QAAQ,WAAW;AAElC,SAASC,IAAI,QAAQ,UAAU;AAM/B;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,SAASC,YAA2CC,KAAc,EAA0C;IACjH;;;GAGC,GACD,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,MAAMC,aAAaJ;QACnB,KAAK,MAAMK,YAAYC,OAAOC,IAAI,CAACH,WAAWI,UAAU,EAAG;YACzD,MAAMC,cAAcL,UAAU,CAACC,SAAS;YACxC,IAAII,gBAAgBC,WAAW;gBAC7B,QAAS;YACX,CAAC;YACD,8HAA8H;YAC9H,4JAA4J;YAC5J,6EAA6E;YAC7E,IAAI,CAACb,OAAOY,cAAc;gBACxBL,UAAU,CAACC,SAAwC,GAAGP,KAAKa,MAAM,CAACF,aAAa;oBAC7EG,aAAaR,WAAWI,UAAU,CAACH,SAAS;gBAC9C;gBACA,sCAAsC;gBACtCQ,QAAQC,IAAI,CACV,CAAC,EAAEf,YAAYgB,IAAI,CAAC,gBAAgB,EAAEV,SAAS,iBAAiB,CAAC,GAC/D,CAAC,2EAA2E,CAAC;YAEnF,OAAO;gBACL,mFAAmF;gBACnF,4JAA4J;gBAC5J,MAAM,EAAE,CAACT,yBAAyB,EAAEgB,YAAW,EAAE,GAAGH;gBACpD,IAAIG,gBAAgBR,WAAWI,UAAU,CAACH,SAAS,EAAE;oBACnDI,WAAW,CAACb,yBAAyB,GAAGQ,WAAWI,UAAU,CAACH,SAAS;oBACvE,sCAAsC;oBACtCQ,QAAQC,IAAI,CACV,CAAC,EAAEf,YAAYgB,IAAI,CAAC,gBAAgB,EAAEV,SAAS,4CAA4C,EAAEA,SAAS,EAAE,EAAEO,YAAY,KAAK,EAAER,WAAWI,UAAU,CAACH,SAAS,CAAC,IAAI,CAAC,GAChK,CAAC,uGAAuG,CAAC;gBAE/G,CAAC;YACH,CAAC;QACH;IACF,CAAC;AACH,CAAC"}
|
package/lib/hooks/index.js
CHANGED
package/lib/hooks/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './useControllableState';\nexport * from './useEventCallback';\nexport * from './useFirstMount';\nexport * from './useForceUpdate';\nexport * from './useId';\nexport * from './useIsomorphicLayoutEffect';\nexport * from './useMergedRefs';\nexport * from './useOnClickOutside';\nexport * from './useOnScrollOutside';\nexport * from './usePrevious';\nexport * from './useScrollbarWidth';\nexport * from './useTimeout';\n"],"names":[],"mappings":"AAAA,cAAc,yBAAyB;AACvC,cAAc,qBAAqB;AACnC,cAAc,kBAAkB;AAChC,cAAc,mBAAmB;AACjC,cAAc,UAAU;AACxB,cAAc,8BAA8B;AAC5C,cAAc,kBAAkB;AAChC,cAAc,sBAAsB;AACpC,cAAc,uBAAuB;AACrC,cAAc,gBAAgB;AAC9B,cAAc,sBAAsB;AACpC,cAAc,eAAe"}
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './useAnimationFrame';\nexport * from './useControllableState';\nexport * from './useEventCallback';\nexport * from './useFirstMount';\nexport * from './useForceUpdate';\nexport * from './useId';\nexport * from './useIsomorphicLayoutEffect';\nexport * from './useMergedRefs';\nexport * from './useOnClickOutside';\nexport * from './useOnScrollOutside';\nexport * from './usePrevious';\nexport * from './useScrollbarWidth';\nexport * from './useTimeout';\n"],"names":[],"mappings":"AAAA,cAAc,sBAAsB;AACpC,cAAc,yBAAyB;AACvC,cAAc,qBAAqB;AACnC,cAAc,kBAAkB;AAChC,cAAc,mBAAmB;AACjC,cAAc,UAAU;AACxB,cAAc,8BAA8B;AAC5C,cAAc,kBAAkB;AAChC,cAAc,sBAAsB;AACpC,cAAc,uBAAuB;AACrC,cAAc,gBAAgB;AAC9B,cAAc,sBAAsB;AACpC,cAAc,eAAe"}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
import { useBrowserTimer } from './useBrowserTimer';
|
2
|
+
/**
|
3
|
+
* @internal
|
4
|
+
* Helper to manage a browser requestAnimationFrame.
|
5
|
+
* Ensures that the requestAnimationFrame isn't set multiple times at once and is cleaned up
|
6
|
+
* when the component is unloaded.
|
7
|
+
*
|
8
|
+
* @returns A pair of [requestAnimationFrame, cancelAnimationFrame] that are stable between renders.
|
9
|
+
*/ export function useAnimationFrame() {
|
10
|
+
// TODO: figure it out a way to not call global.requestAnimationFrame and instead infer window from some context
|
11
|
+
return useBrowserTimer(requestAnimationFrame, cancelAnimationFrame);
|
12
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["useAnimationFrame.ts"],"sourcesContent":["import { useBrowserTimer } from './useBrowserTimer';\n\n/**\n * @internal\n * Helper to manage a browser requestAnimationFrame.\n * Ensures that the requestAnimationFrame isn't set multiple times at once and is cleaned up\n * when the component is unloaded.\n *\n * @returns A pair of [requestAnimationFrame, cancelAnimationFrame] that are stable between renders.\n */\nexport function useAnimationFrame() {\n // TODO: figure it out a way to not call global.requestAnimationFrame and instead infer window from some context\n return useBrowserTimer(requestAnimationFrame, cancelAnimationFrame);\n}\n"],"names":["useBrowserTimer","useAnimationFrame","requestAnimationFrame","cancelAnimationFrame"],"mappings":"AAAA,SAASA,eAAe,QAAQ,oBAAoB;AAEpD;;;;;;;CAOC,GACD,OAAO,SAASC,oBAAoB;IAClC,gHAAgH;IAChH,OAAOD,gBAAgBE,uBAAuBC;AAChD,CAAC"}
|
@@ -0,0 +1,45 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
/**
|
3
|
+
* @internal
|
4
|
+
* Helper to manage a browser timer.
|
5
|
+
* Ensures that the timer isn't set multiple times at once,
|
6
|
+
* and is cleaned up when the component is unloaded.
|
7
|
+
*
|
8
|
+
* @param setTimer - The timer setter function
|
9
|
+
* @param cancelTimer - The timer cancel function
|
10
|
+
* @returns A pair of [setTimer, cancelTimer] that are stable between renders.
|
11
|
+
*
|
12
|
+
* @example
|
13
|
+
* const [setTimer, cancelTimer] = useBrowserTimer(setTimeout, cancelTimeout);
|
14
|
+
*
|
15
|
+
* setTimer(() => console.log('Hello world!'), 1000);
|
16
|
+
* cancelTimer();
|
17
|
+
*/ export function useBrowserTimer(setTimer, cancelTimer) {
|
18
|
+
const id = React.useRef(undefined);
|
19
|
+
const set = React.useCallback((fn, delay)=>{
|
20
|
+
if (id.current !== undefined) {
|
21
|
+
cancelTimer(id.current);
|
22
|
+
}
|
23
|
+
id.current = setTimer(fn, delay);
|
24
|
+
return id.current;
|
25
|
+
}, [
|
26
|
+
cancelTimer,
|
27
|
+
setTimer
|
28
|
+
]);
|
29
|
+
const cancel = React.useCallback(()=>{
|
30
|
+
if (id.current !== undefined) {
|
31
|
+
cancelTimer(id.current);
|
32
|
+
id.current = undefined;
|
33
|
+
}
|
34
|
+
}, [
|
35
|
+
cancelTimer
|
36
|
+
]);
|
37
|
+
// Clean up the timeout when the component is unloaded
|
38
|
+
React.useEffect(()=>cancel, [
|
39
|
+
cancel
|
40
|
+
]);
|
41
|
+
return [
|
42
|
+
set,
|
43
|
+
cancel
|
44
|
+
];
|
45
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["useBrowserTimer.ts"],"sourcesContent":["import * as React from 'react';\n\ntype BrowserTimerSetter =\n | ((fn: () => void, duration?: number, ...args: Record<string, unknown>[]) => number)\n | ((fn: () => void) => number);\n\n/**\n * @internal\n * Helper to manage a browser timer.\n * Ensures that the timer isn't set multiple times at once,\n * and is cleaned up when the component is unloaded.\n *\n * @param setTimer - The timer setter function\n * @param cancelTimer - The timer cancel function\n * @returns A pair of [setTimer, cancelTimer] that are stable between renders.\n *\n * @example\n * const [setTimer, cancelTimer] = useBrowserTimer(setTimeout, cancelTimeout);\n *\n * setTimer(() => console.log('Hello world!'), 1000);\n * cancelTimer();\n */\nexport function useBrowserTimer(setTimer: BrowserTimerSetter, cancelTimer: (id: number) => void) {\n const id = React.useRef<number | undefined>(undefined);\n\n const set = React.useCallback(\n (fn: () => void, delay?: number) => {\n if (id.current !== undefined) {\n cancelTimer(id.current);\n }\n\n id.current = setTimer(fn, delay);\n return id.current;\n },\n [cancelTimer, setTimer],\n );\n\n const cancel = React.useCallback(() => {\n if (id.current !== undefined) {\n cancelTimer(id.current);\n id.current = undefined;\n }\n }, [cancelTimer]);\n\n // Clean up the timeout when the component is unloaded\n React.useEffect(() => cancel, [cancel]);\n\n return [set, cancel] as const;\n}\n"],"names":["React","useBrowserTimer","setTimer","cancelTimer","id","useRef","undefined","set","useCallback","fn","delay","current","cancel","useEffect"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAM/B;;;;;;;;;;;;;;;CAeC,GACD,OAAO,SAASC,gBAAgBC,QAA4B,EAAEC,WAAiC,EAAE;IAC/F,MAAMC,KAAKJ,MAAMK,MAAM,CAAqBC;IAE5C,MAAMC,MAAMP,MAAMQ,WAAW,CAC3B,CAACC,IAAgBC,QAAmB;QAClC,IAAIN,GAAGO,OAAO,KAAKL,WAAW;YAC5BH,YAAYC,GAAGO,OAAO;QACxB,CAAC;QAEDP,GAAGO,OAAO,GAAGT,SAASO,IAAIC;QAC1B,OAAON,GAAGO,OAAO;IACnB,GACA;QAACR;QAAaD;KAAS;IAGzB,MAAMU,SAASZ,MAAMQ,WAAW,CAAC,IAAM;QACrC,IAAIJ,GAAGO,OAAO,KAAKL,WAAW;YAC5BH,YAAYC,GAAGO,OAAO;YACtBP,GAAGO,OAAO,GAAGL;QACf,CAAC;IACH,GAAG;QAACH;KAAY;IAEhB,sDAAsD;IACtDH,MAAMa,SAAS,CAAC,IAAMD,QAAQ;QAACA;KAAO;IAEtC,OAAO;QAACL;QAAKK;KAAO;AACtB,CAAC"}
|
@@ -7,16 +7,27 @@ import { useEventCallback } from './useEventCallback';
|
|
7
7
|
const { refs , callback , element , disabled , contains: containsProp } = options;
|
8
8
|
const timeoutId = React.useRef(undefined);
|
9
9
|
useIFrameFocus(options);
|
10
|
+
const isMouseDownInsideRef = React.useRef(false);
|
11
|
+
const contains = containsProp || ((parent, child)=>{
|
12
|
+
return !!(parent === null || parent === void 0 ? void 0 : parent.contains(child));
|
13
|
+
});
|
10
14
|
const listener = useEventCallback((ev)=>{
|
11
|
-
|
12
|
-
|
13
|
-
|
15
|
+
if (isMouseDownInsideRef.current) {
|
16
|
+
isMouseDownInsideRef.current = false;
|
17
|
+
return;
|
18
|
+
}
|
14
19
|
const target = ev.composedPath()[0];
|
15
20
|
const isOutside = refs.every((ref)=>!contains(ref.current || null, target));
|
16
21
|
if (isOutside && !disabled) {
|
17
22
|
callback(ev);
|
18
23
|
}
|
19
24
|
});
|
25
|
+
const handleMouseDown = useEventCallback((ev)=>{
|
26
|
+
// Selecting text from inside to outside will rigger click event.
|
27
|
+
// In this case click event target is outside but mouse down event target is inside.
|
28
|
+
// And this click event should be considered as inside click.
|
29
|
+
isMouseDownInsideRef.current = refs.some((ref)=>contains(ref.current || null, ev.target));
|
30
|
+
});
|
20
31
|
React.useEffect(()=>{
|
21
32
|
if (disabled) {
|
22
33
|
return;
|
@@ -37,6 +48,7 @@ import { useEventCallback } from './useEventCallback';
|
|
37
48
|
element === null || element === void 0 ? void 0 : element.addEventListener('click', conditionalHandler, true);
|
38
49
|
element === null || element === void 0 ? void 0 : element.addEventListener('touchstart', conditionalHandler, true);
|
39
50
|
element === null || element === void 0 ? void 0 : element.addEventListener('contextmenu', conditionalHandler, true);
|
51
|
+
element === null || element === void 0 ? void 0 : element.addEventListener('mousedown', handleMouseDown, true);
|
40
52
|
// Garbage collect this event after it's no longer useful to avoid memory leaks
|
41
53
|
timeoutId.current = window.setTimeout(()=>{
|
42
54
|
currentEvent = undefined;
|
@@ -45,13 +57,15 @@ import { useEventCallback } from './useEventCallback';
|
|
45
57
|
element === null || element === void 0 ? void 0 : element.removeEventListener('click', conditionalHandler, true);
|
46
58
|
element === null || element === void 0 ? void 0 : element.removeEventListener('touchstart', conditionalHandler, true);
|
47
59
|
element === null || element === void 0 ? void 0 : element.removeEventListener('contextmenu', conditionalHandler, true);
|
60
|
+
element === null || element === void 0 ? void 0 : element.removeEventListener('mousedown', handleMouseDown, true);
|
48
61
|
clearTimeout(timeoutId.current);
|
49
62
|
currentEvent = undefined;
|
50
63
|
};
|
51
64
|
}, [
|
52
65
|
listener,
|
53
66
|
element,
|
54
|
-
disabled
|
67
|
+
disabled,
|
68
|
+
handleMouseDown
|
55
69
|
]);
|
56
70
|
};
|
57
71
|
const getWindowEvent = (target)=>{
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useOnClickOutside.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from './useEventCallback';\n\n/**\n * @internal\n */\nexport type UseOnClickOrScrollOutsideOptions = {\n /**\n * The element to listen for the click event\n */\n element: Document | undefined;\n /**\n * Refs to elements that check if the click is outside\n */\n refs: React.MutableRefObject<HTMLElement | undefined | null>[];\n\n /**\n * By default uses element.contains, but custom contain function can be provided\n *\n * @param parent - provided parent element\n * @param child - event target element\n */\n contains?(parent: HTMLElement | null, child: HTMLElement): boolean;\n\n /**\n * Disables event listeners\n */\n disabled?: boolean;\n\n /**\n * Called if the click is outside the element refs\n */\n callback: (ev: MouseEvent | TouchEvent) => void;\n};\n\n/**\n * @internal\n * Utility to perform checks where a click/touch event was made outside a component\n */\nexport const useOnClickOutside = (options: UseOnClickOrScrollOutsideOptions) => {\n const { refs, callback, element, disabled, contains: containsProp } = options;\n const timeoutId = React.useRef<number | undefined>(undefined);\n useIFrameFocus(options);\n\n const listener = useEventCallback((ev: MouseEvent | TouchEvent) => {\n const contains: UseOnClickOrScrollOutsideOptions['contains'] =\n containsProp || ((parent, child) => !!parent?.contains(child));\n\n const target = ev.composedPath()[0] as HTMLElement;\n const isOutside = refs.every(ref => !contains(ref.current || null, target));\n\n if (isOutside && !disabled) {\n callback(ev);\n }\n });\n\n React.useEffect(() => {\n if (disabled) {\n return;\n }\n\n // Store the current event to avoid triggering handlers immediately\n // Note this depends on a deprecated but extremely well supported quirk of the web platform\n // https://github.com/facebook/react/issues/20074\n let currentEvent = getWindowEvent(window);\n\n const conditionalHandler = (event: MouseEvent | TouchEvent) => {\n // Skip if this event is the same as the one running when we added the handlers\n if (event === currentEvent) {\n currentEvent = undefined;\n return;\n }\n\n listener(event);\n };\n\n // use capture phase because React can update DOM before the event bubbles to the document\n element?.addEventListener('click', conditionalHandler, true);\n element?.addEventListener('touchstart', conditionalHandler, true);\n element?.addEventListener('contextmenu', conditionalHandler, true);\n\n // Garbage collect this event after it's no longer useful to avoid memory leaks\n timeoutId.current = window.setTimeout(() => {\n currentEvent = undefined;\n }, 1);\n\n return () => {\n element?.removeEventListener('click', conditionalHandler, true);\n element?.removeEventListener('touchstart', conditionalHandler, true);\n element?.removeEventListener('contextmenu', conditionalHandler, true);\n\n clearTimeout(timeoutId.current);\n currentEvent = undefined;\n };\n }, [listener, element, disabled]);\n};\n\nconst getWindowEvent = (target: Node | Window): Event | undefined => {\n if (target) {\n if (typeof (target as Window).window === 'object' && (target as Window).window === target) {\n // eslint-disable-next-line deprecation/deprecation\n return target.event;\n }\n\n // eslint-disable-next-line deprecation/deprecation\n return (target as Node).ownerDocument?.defaultView?.event ?? undefined;\n }\n\n return undefined;\n};\n\nconst FUI_FRAME_EVENT = 'fuiframefocus';\n\ninterface UseIFrameFocusOptions extends UseOnClickOrScrollOutsideOptions {\n /**\n * Millisecond duration to poll\n */\n pollDuration?: number;\n}\n\n/**\n * Since click events do not propagate past iframes, we use focus to detect if a\n * click has happened inside an iframe, since the only ways of focusing inside an\n * iframe are:\n * - clicking inside\n * - tabbing inside\n *\n * Polls the value of `document.activeElement`. If it is an iframe, then dispatch\n * a custom DOM event. When the custom event is received call the provided callback\n */\nconst useIFrameFocus = (options: UseIFrameFocusOptions) => {\n const {\n disabled,\n element: targetDocument,\n callback,\n contains: containsProp = (parent, child) => !!parent?.contains(child),\n pollDuration = 1000,\n refs,\n } = options;\n const timeoutRef = React.useRef<number>();\n\n const listener = useEventCallback((e: Event) => {\n const contains = containsProp || ((parent, child) => !!parent?.contains(child));\n\n const isOutside = refs.every(ref => !contains(ref.current || null, e.target as HTMLElement));\n if (isOutside && !disabled) {\n callback(e as MouseEvent);\n }\n });\n\n // Adds listener to the custom iframe focus event\n React.useEffect(() => {\n if (disabled) {\n return;\n }\n\n targetDocument?.addEventListener(FUI_FRAME_EVENT, listener, true);\n\n return () => {\n targetDocument?.removeEventListener(FUI_FRAME_EVENT, listener, true);\n };\n }, [targetDocument, disabled, listener]);\n\n // Starts polling for the active element\n React.useEffect(() => {\n if (disabled) {\n return;\n }\n\n timeoutRef.current = targetDocument?.defaultView?.setInterval(() => {\n const activeElement = targetDocument?.activeElement;\n\n if (activeElement?.tagName === 'IFRAME' || activeElement?.tagName === 'WEBVIEW') {\n const event = new CustomEvent(FUI_FRAME_EVENT, { bubbles: true });\n activeElement.dispatchEvent(event);\n }\n }, pollDuration);\n\n return () => {\n targetDocument?.defaultView?.clearTimeout(timeoutRef.current);\n };\n }, [targetDocument, disabled, pollDuration]);\n};\n"],"names":["React","useEventCallback","useOnClickOutside","options","refs","callback","element","disabled","contains","containsProp","timeoutId","useRef","undefined","useIFrameFocus","listener","ev","parent","child","target","composedPath","isOutside","every","ref","current","useEffect","currentEvent","getWindowEvent","window","conditionalHandler","event","addEventListener","setTimeout","removeEventListener","clearTimeout","ownerDocument","defaultView","FUI_FRAME_EVENT","targetDocument","pollDuration","timeoutRef","e","setInterval","activeElement","tagName","CustomEvent","bubbles","dispatchEvent"],"mappings":"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"}
|
1
|
+
{"version":3,"sources":["useOnClickOutside.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from './useEventCallback';\n\n/**\n * @internal\n */\nexport type UseOnClickOrScrollOutsideOptions = {\n /**\n * The element to listen for the click event\n */\n element: Document | undefined;\n /**\n * Refs to elements that check if the click is outside\n */\n refs: React.MutableRefObject<HTMLElement | undefined | null>[];\n\n /**\n * By default uses element.contains, but custom contain function can be provided\n *\n * @param parent - provided parent element\n * @param child - event target element\n */\n contains?(parent: HTMLElement | null, child: HTMLElement): boolean;\n\n /**\n * Disables event listeners\n */\n disabled?: boolean;\n\n /**\n * Called if the click is outside the element refs\n */\n callback: (ev: MouseEvent | TouchEvent) => void;\n};\n\n/**\n * @internal\n * Utility to perform checks where a click/touch event was made outside a component\n */\nexport const useOnClickOutside = (options: UseOnClickOrScrollOutsideOptions) => {\n const { refs, callback, element, disabled, contains: containsProp } = options;\n const timeoutId = React.useRef<number | undefined>(undefined);\n useIFrameFocus(options);\n\n const isMouseDownInsideRef = React.useRef(false);\n\n const contains: UseOnClickOrScrollOutsideOptions['contains'] =\n containsProp || ((parent, child) => !!parent?.contains(child));\n\n const listener = useEventCallback((ev: MouseEvent | TouchEvent) => {\n if (isMouseDownInsideRef.current) {\n isMouseDownInsideRef.current = false;\n return;\n }\n\n const target = ev.composedPath()[0] as HTMLElement;\n const isOutside = refs.every(ref => !contains(ref.current || null, target));\n\n if (isOutside && !disabled) {\n callback(ev);\n }\n });\n\n const handleMouseDown = useEventCallback((ev: MouseEvent) => {\n // Selecting text from inside to outside will rigger click event.\n // In this case click event target is outside but mouse down event target is inside.\n // And this click event should be considered as inside click.\n isMouseDownInsideRef.current = refs.some(ref => contains(ref.current || null, ev.target as HTMLElement));\n });\n\n React.useEffect(() => {\n if (disabled) {\n return;\n }\n\n // Store the current event to avoid triggering handlers immediately\n // Note this depends on a deprecated but extremely well supported quirk of the web platform\n // https://github.com/facebook/react/issues/20074\n let currentEvent = getWindowEvent(window);\n\n const conditionalHandler = (event: MouseEvent | TouchEvent) => {\n // Skip if this event is the same as the one running when we added the handlers\n if (event === currentEvent) {\n currentEvent = undefined;\n return;\n }\n\n listener(event);\n };\n\n // use capture phase because React can update DOM before the event bubbles to the document\n element?.addEventListener('click', conditionalHandler, true);\n element?.addEventListener('touchstart', conditionalHandler, true);\n element?.addEventListener('contextmenu', conditionalHandler, true);\n element?.addEventListener('mousedown', handleMouseDown, true);\n\n // Garbage collect this event after it's no longer useful to avoid memory leaks\n timeoutId.current = window.setTimeout(() => {\n currentEvent = undefined;\n }, 1);\n\n return () => {\n element?.removeEventListener('click', conditionalHandler, true);\n element?.removeEventListener('touchstart', conditionalHandler, true);\n element?.removeEventListener('contextmenu', conditionalHandler, true);\n element?.removeEventListener('mousedown', handleMouseDown, true);\n\n clearTimeout(timeoutId.current);\n currentEvent = undefined;\n };\n }, [listener, element, disabled, handleMouseDown]);\n};\n\nconst getWindowEvent = (target: Node | Window): Event | undefined => {\n if (target) {\n if (typeof (target as Window).window === 'object' && (target as Window).window === target) {\n // eslint-disable-next-line deprecation/deprecation\n return target.event;\n }\n\n // eslint-disable-next-line deprecation/deprecation\n return (target as Node).ownerDocument?.defaultView?.event ?? undefined;\n }\n\n return undefined;\n};\n\nconst FUI_FRAME_EVENT = 'fuiframefocus';\n\ninterface UseIFrameFocusOptions extends UseOnClickOrScrollOutsideOptions {\n /**\n * Millisecond duration to poll\n */\n pollDuration?: number;\n}\n\n/**\n * Since click events do not propagate past iframes, we use focus to detect if a\n * click has happened inside an iframe, since the only ways of focusing inside an\n * iframe are:\n * - clicking inside\n * - tabbing inside\n *\n * Polls the value of `document.activeElement`. If it is an iframe, then dispatch\n * a custom DOM event. When the custom event is received call the provided callback\n */\nconst useIFrameFocus = (options: UseIFrameFocusOptions) => {\n const {\n disabled,\n element: targetDocument,\n callback,\n contains: containsProp = (parent, child) => !!parent?.contains(child),\n pollDuration = 1000,\n refs,\n } = options;\n const timeoutRef = React.useRef<number>();\n\n const listener = useEventCallback((e: Event) => {\n const contains = containsProp || ((parent, child) => !!parent?.contains(child));\n\n const isOutside = refs.every(ref => !contains(ref.current || null, e.target as HTMLElement));\n if (isOutside && !disabled) {\n callback(e as MouseEvent);\n }\n });\n\n // Adds listener to the custom iframe focus event\n React.useEffect(() => {\n if (disabled) {\n return;\n }\n\n targetDocument?.addEventListener(FUI_FRAME_EVENT, listener, true);\n\n return () => {\n targetDocument?.removeEventListener(FUI_FRAME_EVENT, listener, true);\n };\n }, [targetDocument, disabled, listener]);\n\n // Starts polling for the active element\n React.useEffect(() => {\n if (disabled) {\n return;\n }\n\n timeoutRef.current = targetDocument?.defaultView?.setInterval(() => {\n const activeElement = targetDocument?.activeElement;\n\n if (activeElement?.tagName === 'IFRAME' || activeElement?.tagName === 'WEBVIEW') {\n const event = new CustomEvent(FUI_FRAME_EVENT, { bubbles: true });\n activeElement.dispatchEvent(event);\n }\n }, pollDuration);\n\n return () => {\n targetDocument?.defaultView?.clearTimeout(timeoutRef.current);\n };\n }, [targetDocument, disabled, pollDuration]);\n};\n"],"names":["React","useEventCallback","useOnClickOutside","options","refs","callback","element","disabled","contains","containsProp","timeoutId","useRef","undefined","useIFrameFocus","isMouseDownInsideRef","parent","child","listener","ev","current","target","composedPath","isOutside","every","ref","handleMouseDown","some","useEffect","currentEvent","getWindowEvent","window","conditionalHandler","event","addEventListener","setTimeout","removeEventListener","clearTimeout","ownerDocument","defaultView","FUI_FRAME_EVENT","targetDocument","pollDuration","timeoutRef","e","setInterval","activeElement","tagName","CustomEvent","bubbles","dispatchEvent"],"mappings":"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"}
|
package/lib/hooks/useTimeout.js
CHANGED
@@ -1,31 +1,12 @@
|
|
1
|
-
import
|
1
|
+
import { useBrowserTimer } from './useBrowserTimer';
|
2
2
|
/**
|
3
3
|
* @internal
|
4
4
|
* Helper to manage a browser timeout.
|
5
|
-
* Ensures that the timeout isn't set multiple times at once
|
6
|
-
*
|
5
|
+
* Ensures that the timeout isn't set multiple times at once and is cleaned up
|
6
|
+
* when the component is unloaded.
|
7
7
|
*
|
8
8
|
* @returns A pair of [setTimeout, clearTimeout] that are stable between renders.
|
9
9
|
*/ export function useTimeout() {
|
10
|
-
|
11
|
-
|
12
|
-
set: (fn, delay)=>{
|
13
|
-
timeout.clear();
|
14
|
-
timeout.id = setTimeout(fn, delay);
|
15
|
-
},
|
16
|
-
clear: ()=>{
|
17
|
-
if (timeout.id !== undefined) {
|
18
|
-
clearTimeout(timeout.id);
|
19
|
-
timeout.id = undefined;
|
20
|
-
}
|
21
|
-
}
|
22
|
-
}));
|
23
|
-
// Clean up the timeout when the component is unloaded
|
24
|
-
React.useEffect(()=>timeout.clear, [
|
25
|
-
timeout
|
26
|
-
]);
|
27
|
-
return [
|
28
|
-
timeout.set,
|
29
|
-
timeout.clear
|
30
|
-
];
|
10
|
+
// TODO: figure it out a way to not call global.setTimeout and instead infer window from some context
|
11
|
+
return useBrowserTimer(setTimeout, clearTimeout);
|
31
12
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useTimeout.ts"],"sourcesContent":["import
|
1
|
+
{"version":3,"sources":["useTimeout.ts"],"sourcesContent":["import { useBrowserTimer } from './useBrowserTimer';\n\n/**\n * @internal\n * Helper to manage a browser timeout.\n * Ensures that the timeout isn't set multiple times at once and is cleaned up\n * when the component is unloaded.\n *\n * @returns A pair of [setTimeout, clearTimeout] that are stable between renders.\n */\nexport function useTimeout() {\n // TODO: figure it out a way to not call global.setTimeout and instead infer window from some context\n return useBrowserTimer(setTimeout, clearTimeout);\n}\n"],"names":["useBrowserTimer","useTimeout","setTimeout","clearTimeout"],"mappings":"AAAA,SAASA,eAAe,QAAQ,oBAAoB;AAEpD;;;;;;;CAOC,GACD,OAAO,SAASC,aAAa;IAC3B,qGAAqG;IACrG,OAAOD,gBAAgBE,YAAYC;AACrC,CAAC"}
|
package/lib/index.js
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
export { slot, isSlot, getSlots, getSlotsNext, assertSlots, resolveShorthand, isResolvedShorthand, SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from './compose/index';
|
2
|
-
export { IdPrefixProvider, resetIdsForTests, useControllableState, useEventCallback, useFirstMount, useForceUpdate, useId, useIsomorphicLayoutEffect, useMergedRefs, useOnClickOutside, useOnScrollOutside, usePrevious, useScrollbarWidth, useTimeout } from './hooks/index';
|
2
|
+
export { IdPrefixProvider, resetIdsForTests, useAnimationFrame, useControllableState, useEventCallback, useFirstMount, useForceUpdate, useId, useIsomorphicLayoutEffect, useMergedRefs, useOnClickOutside, useOnScrollOutside, usePrevious, useScrollbarWidth, useTimeout } from './hooks/index';
|
3
3
|
export { canUseDOM, useIsSSR, SSRProvider } from './ssr/index';
|
4
4
|
export { clamp, getNativeElementProps, getPartitionedNativeProps, getRTLSafeKey, mergeCallbacks, isHTMLElement, isInteractiveHTMLElement, omit, createPriorityQueue } from './utils/index';
|
5
5
|
export { applyTriggerPropsToChildren, getTriggerChild, isFluentTrigger } from './trigger/index';
|
package/lib/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n slot,\n isSlot,\n getSlots,\n getSlotsNext,\n assertSlots,\n resolveShorthand,\n isResolvedShorthand,\n SLOT_ELEMENT_TYPE_SYMBOL,\n SLOT_RENDER_FUNCTION_SYMBOL,\n} from './compose/index';\nexport type {\n ExtractSlotProps,\n ComponentProps,\n ComponentState,\n ForwardRefComponent,\n ResolveShorthandFunction,\n ResolveShorthandOptions,\n Slot,\n Slots,\n SlotClassNames,\n SlotPropsRecord,\n SlotRenderFunction,\n SlotShorthandValue,\n UnknownSlotProps,\n SlotComponentType,\n SlotOptions,\n} from './compose/index';\n\nexport {\n IdPrefixProvider,\n resetIdsForTests,\n useControllableState,\n useEventCallback,\n useFirstMount,\n useForceUpdate,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n useOnClickOutside,\n useOnScrollOutside,\n usePrevious,\n useScrollbarWidth,\n useTimeout,\n} from './hooks/index';\nexport type { RefObjectFunction, UseControllableStateOptions, UseOnClickOrScrollOutsideOptions } from './hooks/index';\n\nexport { canUseDOM, useIsSSR, SSRProvider } from './ssr/index';\n\nexport {\n clamp,\n getNativeElementProps,\n getPartitionedNativeProps,\n getRTLSafeKey,\n mergeCallbacks,\n isHTMLElement,\n isInteractiveHTMLElement,\n omit,\n createPriorityQueue,\n} from './utils/index';\n\nexport type { PriorityQueue } from './utils/priorityQueue';\n\nexport { applyTriggerPropsToChildren, getTriggerChild, isFluentTrigger } from './trigger/index';\n\nexport type { FluentTriggerComponent, TriggerProps } from './trigger/index';\n\n/**\n * Event utils\n */\nexport type { NativeTouchOrMouseEvent, ReactTouchOrMouseEvent, TouchOrMouseEvent } from './events/index';\nexport { isTouchEvent, isMouseEvent, getEventClientCoords } from './events/index';\n\nexport type {\n SelectionMode,\n OnSelectionChangeCallback,\n OnSelectionChangeData,\n SelectionItemId,\n SelectionHookParams,\n SelectionMethods,\n} from './selection/index';\nexport { useSelection } from './selection/index';\n"],"names":["slot","isSlot","getSlots","getSlotsNext","assertSlots","resolveShorthand","isResolvedShorthand","SLOT_ELEMENT_TYPE_SYMBOL","SLOT_RENDER_FUNCTION_SYMBOL","IdPrefixProvider","resetIdsForTests","useControllableState","useEventCallback","useFirstMount","useForceUpdate","useId","useIsomorphicLayoutEffect","useMergedRefs","useOnClickOutside","useOnScrollOutside","usePrevious","useScrollbarWidth","useTimeout","canUseDOM","useIsSSR","SSRProvider","clamp","getNativeElementProps","getPartitionedNativeProps","getRTLSafeKey","mergeCallbacks","isHTMLElement","isInteractiveHTMLElement","omit","createPriorityQueue","applyTriggerPropsToChildren","getTriggerChild","isFluentTrigger","isTouchEvent","isMouseEvent","getEventClientCoords","useSelection"],"mappings":"AAAA,SACEA,IAAI,EACJC,MAAM,EACNC,QAAQ,EACRC,YAAY,EACZC,WAAW,EACXC,gBAAgB,EAChBC,mBAAmB,EACnBC,wBAAwB,EACxBC,2BAA2B,QACtB,kBAAkB;AAmBzB,SACEC,gBAAgB,EAChBC,gBAAgB,EAChBC,oBAAoB,EACpBC,gBAAgB,EAChBC,aAAa,EACbC,cAAc,EACdC,KAAK,EACLC,yBAAyB,EACzBC,aAAa,EACbC,iBAAiB,EACjBC,kBAAkB,EAClBC,WAAW,EACXC,iBAAiB,EACjBC,UAAU,QACL,gBAAgB;AAGvB,SAASC,SAAS,EAAEC,QAAQ,EAAEC,WAAW,QAAQ,cAAc;AAE/D,SACEC,KAAK,EACLC,qBAAqB,EACrBC,yBAAyB,EACzBC,aAAa,EACbC,cAAc,EACdC,aAAa,EACbC,wBAAwB,EACxBC,IAAI,EACJC,mBAAmB,QACd,gBAAgB;AAIvB,SAASC,2BAA2B,EAAEC,eAAe,EAAEC,eAAe,QAAQ,kBAAkB;AAQhG,SAASC,YAAY,EAAEC,YAAY,EAAEC,oBAAoB,QAAQ,iBAAiB;AAUlF,SAASC,YAAY,QAAQ,oBAAoB"}
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n slot,\n isSlot,\n getSlots,\n getSlotsNext,\n assertSlots,\n resolveShorthand,\n isResolvedShorthand,\n SLOT_ELEMENT_TYPE_SYMBOL,\n SLOT_RENDER_FUNCTION_SYMBOL,\n} from './compose/index';\nexport type {\n ExtractSlotProps,\n ComponentProps,\n ComponentState,\n ForwardRefComponent,\n ResolveShorthandFunction,\n ResolveShorthandOptions,\n Slot,\n Slots,\n SlotClassNames,\n SlotPropsRecord,\n SlotRenderFunction,\n SlotShorthandValue,\n UnknownSlotProps,\n SlotComponentType,\n SlotOptions,\n} from './compose/index';\n\nexport {\n IdPrefixProvider,\n resetIdsForTests,\n useAnimationFrame,\n useControllableState,\n useEventCallback,\n useFirstMount,\n useForceUpdate,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n useOnClickOutside,\n useOnScrollOutside,\n usePrevious,\n useScrollbarWidth,\n useTimeout,\n} from './hooks/index';\nexport type { RefObjectFunction, UseControllableStateOptions, UseOnClickOrScrollOutsideOptions } from './hooks/index';\n\nexport { canUseDOM, useIsSSR, SSRProvider } from './ssr/index';\n\nexport {\n clamp,\n getNativeElementProps,\n getPartitionedNativeProps,\n getRTLSafeKey,\n mergeCallbacks,\n isHTMLElement,\n isInteractiveHTMLElement,\n omit,\n createPriorityQueue,\n} from './utils/index';\n\nexport type { PriorityQueue } from './utils/priorityQueue';\n\nexport { applyTriggerPropsToChildren, getTriggerChild, isFluentTrigger } from './trigger/index';\n\nexport type { FluentTriggerComponent, TriggerProps } from './trigger/index';\n\n/**\n * Event utils\n */\nexport type { NativeTouchOrMouseEvent, ReactTouchOrMouseEvent, TouchOrMouseEvent } from './events/index';\nexport { isTouchEvent, isMouseEvent, getEventClientCoords } from './events/index';\n\nexport type {\n SelectionMode,\n OnSelectionChangeCallback,\n OnSelectionChangeData,\n SelectionItemId,\n SelectionHookParams,\n SelectionMethods,\n} from './selection/index';\nexport { useSelection } from './selection/index';\n"],"names":["slot","isSlot","getSlots","getSlotsNext","assertSlots","resolveShorthand","isResolvedShorthand","SLOT_ELEMENT_TYPE_SYMBOL","SLOT_RENDER_FUNCTION_SYMBOL","IdPrefixProvider","resetIdsForTests","useAnimationFrame","useControllableState","useEventCallback","useFirstMount","useForceUpdate","useId","useIsomorphicLayoutEffect","useMergedRefs","useOnClickOutside","useOnScrollOutside","usePrevious","useScrollbarWidth","useTimeout","canUseDOM","useIsSSR","SSRProvider","clamp","getNativeElementProps","getPartitionedNativeProps","getRTLSafeKey","mergeCallbacks","isHTMLElement","isInteractiveHTMLElement","omit","createPriorityQueue","applyTriggerPropsToChildren","getTriggerChild","isFluentTrigger","isTouchEvent","isMouseEvent","getEventClientCoords","useSelection"],"mappings":"AAAA,SACEA,IAAI,EACJC,MAAM,EACNC,QAAQ,EACRC,YAAY,EACZC,WAAW,EACXC,gBAAgB,EAChBC,mBAAmB,EACnBC,wBAAwB,EACxBC,2BAA2B,QACtB,kBAAkB;AAmBzB,SACEC,gBAAgB,EAChBC,gBAAgB,EAChBC,iBAAiB,EACjBC,oBAAoB,EACpBC,gBAAgB,EAChBC,aAAa,EACbC,cAAc,EACdC,KAAK,EACLC,yBAAyB,EACzBC,aAAa,EACbC,iBAAiB,EACjBC,kBAAkB,EAClBC,WAAW,EACXC,iBAAiB,EACjBC,UAAU,QACL,gBAAgB;AAGvB,SAASC,SAAS,EAAEC,QAAQ,EAAEC,WAAW,QAAQ,cAAc;AAE/D,SACEC,KAAK,EACLC,qBAAqB,EACrBC,yBAAyB,EACzBC,aAAa,EACbC,cAAc,EACdC,aAAa,EACbC,wBAAwB,EACxBC,IAAI,EACJC,mBAAmB,QACd,gBAAgB;AAIvB,SAASC,2BAA2B,EAAEC,eAAe,EAAEC,eAAe,QAAQ,kBAAkB;AAQhG,SAASC,YAAY,EAAEC,YAAY,EAAEC,oBAAoB,QAAQ,iBAAiB;AAUlF,SAASC,YAAY,QAAQ,oBAAoB"}
|
@@ -6,8 +6,11 @@ Object.defineProperty(exports, "assertSlots", {
|
|
6
6
|
enumerable: true,
|
7
7
|
get: ()=>assertSlots
|
8
8
|
});
|
9
|
+
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
10
|
+
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
9
11
|
const _constants = require("./constants");
|
10
12
|
const _isSlot = require("./isSlot");
|
13
|
+
const _index = require("./index");
|
11
14
|
function assertSlots(state) {
|
12
15
|
/**
|
13
16
|
* This verification is not necessary in production
|
@@ -19,12 +22,23 @@ function assertSlots(state) {
|
|
19
22
|
if (slotElement === undefined) {
|
20
23
|
continue;
|
21
24
|
}
|
25
|
+
// this means a slot is being declared without using, slot.always or slot.optional or even resolveShorthand on the state hook,
|
26
|
+
// but the render method is using the new `assertSlots` method. That scenario can be solved by simply updating the slot element with the proper element type
|
27
|
+
// FIXME: this slot will still fail to support child render function scenario
|
22
28
|
if (!(0, _isSlot.isSlot)(slotElement)) {
|
23
|
-
|
29
|
+
typedState[slotName] = _index.slot.always(slotElement, {
|
30
|
+
elementType: typedState.components[slotName]
|
31
|
+
});
|
32
|
+
// eslint-disable-next-line no-console
|
33
|
+
console.warn(`${assertSlots.name} warning: state.${slotName} is not a slot.\n` + `Be sure to create slots properly by using 'slot.always' or 'slot.optional'.`);
|
24
34
|
} else {
|
35
|
+
// This means a slot is being declared by using resolveShorthand on the state hook,
|
36
|
+
// but the render method is using the new `assertSlots` method. That scenario can be solved by simply updating the slot element with the proper element type
|
25
37
|
const { [_constants.SLOT_ELEMENT_TYPE_SYMBOL]: elementType } = slotElement;
|
26
38
|
if (elementType !== typedState.components[slotName]) {
|
27
|
-
|
39
|
+
slotElement[_constants.SLOT_ELEMENT_TYPE_SYMBOL] = typedState.components[slotName];
|
40
|
+
// eslint-disable-next-line no-console
|
41
|
+
console.warn(`${assertSlots.name} warning: state.${slotName} element type differs from state.components.${slotName}, ${elementType} !== ${typedState.components[slotName]}. \n` + `Be sure to create slots properly by using 'slot.always' or 'slot.optional' with the correct elementType`);
|
28
42
|
}
|
29
43
|
}
|
30
44
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["assertSlots.js"],"sourcesContent":["import { SLOT_ELEMENT_TYPE_SYMBOL } from './constants';\nimport { isSlot } from './isSlot';\n/**\n * @internal\n * Assertion method to ensure state slots properties are properly declared.\n * A properly declared slot must be declared by using the `slot` method.\n *\n * @example\n * ```tsx\n * export const renderInput_unstable = (state: InputState) => {\n assertSlots<InputSlots>(state);\n return (\n <state.root>\n {state.contentBefore && <state.contentBefore />}\n <state.input />\n {state.contentAfter && <state.contentAfter />}\n </state.root>\n );\n };\n * ```\n */ export function assertSlots(state) {\n /**\n * This verification is not necessary in production\n * as we're verifying static properties that will not change between environments\n */ if (process.env.NODE_ENV !== 'production') {\n const typedState = state;\n for (const slotName of Object.keys(typedState.components)){\n const slotElement = typedState[slotName];\n if (slotElement === undefined) {\n continue;\n }\n if (!isSlot(slotElement)) {\n
|
1
|
+
{"version":3,"sources":["assertSlots.js"],"sourcesContent":["import * as React from 'react';\nimport { SLOT_ELEMENT_TYPE_SYMBOL } from './constants';\nimport { isSlot } from './isSlot';\nimport { slot } from './index';\n/**\n * @internal\n * Assertion method to ensure state slots properties are properly declared.\n * A properly declared slot must be declared by using the `slot` method.\n *\n * @example\n * ```tsx\n * export const renderInput_unstable = (state: InputState) => {\n assertSlots<InputSlots>(state);\n return (\n <state.root>\n {state.contentBefore && <state.contentBefore />}\n <state.input />\n {state.contentAfter && <state.contentAfter />}\n </state.root>\n );\n };\n * ```\n */ export function assertSlots(state) {\n /**\n * This verification is not necessary in production\n * as we're verifying static properties that will not change between environments\n */ if (process.env.NODE_ENV !== 'production') {\n const typedState = state;\n for (const slotName of Object.keys(typedState.components)){\n const slotElement = typedState[slotName];\n if (slotElement === undefined) {\n continue;\n }\n // this means a slot is being declared without using, slot.always or slot.optional or even resolveShorthand on the state hook,\n // but the render method is using the new `assertSlots` method. That scenario can be solved by simply updating the slot element with the proper element type\n // FIXME: this slot will still fail to support child render function scenario\n if (!isSlot(slotElement)) {\n typedState[slotName] = slot.always(slotElement, {\n elementType: typedState.components[slotName]\n });\n // eslint-disable-next-line no-console\n console.warn(`${assertSlots.name} warning: state.${slotName} is not a slot.\\n` + `Be sure to create slots properly by using 'slot.always' or 'slot.optional'.`);\n } else {\n // This means a slot is being declared by using resolveShorthand on the state hook,\n // but the render method is using the new `assertSlots` method. That scenario can be solved by simply updating the slot element with the proper element type\n const { [SLOT_ELEMENT_TYPE_SYMBOL]: elementType } = slotElement;\n if (elementType !== typedState.components[slotName]) {\n slotElement[SLOT_ELEMENT_TYPE_SYMBOL] = typedState.components[slotName];\n // eslint-disable-next-line no-console\n console.warn(`${assertSlots.name} warning: state.${slotName} element type differs from state.components.${slotName}, ${elementType} !== ${typedState.components[slotName]}. \\n` + `Be sure to create slots properly by using 'slot.always' or 'slot.optional' with the correct elementType`);\n }\n }\n }\n }\n}\n"],"names":["assertSlots","state","process","env","NODE_ENV","typedState","slotName","Object","keys","components","slotElement","undefined","isSlot","slot","always","elementType","console","warn","name","SLOT_ELEMENT_TYPE_SYMBOL"],"mappings":";;;;+BAsBoBA;;aAAAA;;;6DAtBG;2BACkB;wBAClB;uBACF;AAmBV,SAASA,YAAYC,KAAK,EAAE;IACnC;;;GAGD,GAAG,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,MAAMC,aAAaJ;QACnB,KAAK,MAAMK,YAAYC,OAAOC,IAAI,CAACH,WAAWI,UAAU,EAAE;YACtD,MAAMC,cAAcL,UAAU,CAACC,SAAS;YACxC,IAAII,gBAAgBC,WAAW;gBAC3B,QAAS;YACb,CAAC;YACD,8HAA8H;YAC9H,4JAA4J;YAC5J,6EAA6E;YAC7E,IAAI,CAACC,IAAAA,cAAM,EAACF,cAAc;gBACtBL,UAAU,CAACC,SAAS,GAAGO,WAAI,CAACC,MAAM,CAACJ,aAAa;oBAC5CK,aAAaV,WAAWI,UAAU,CAACH,SAAS;gBAChD;gBACA,sCAAsC;gBACtCU,QAAQC,IAAI,CAAC,CAAC,EAAEjB,YAAYkB,IAAI,CAAC,gBAAgB,EAAEZ,SAAS,iBAAiB,CAAC,GAAG,CAAC,2EAA2E,CAAC;YAClK,OAAO;gBACH,mFAAmF;gBACnF,4JAA4J;gBAC5J,MAAM,EAAE,CAACa,mCAAwB,CAAC,EAAEJ,YAAW,EAAG,GAAGL;gBACrD,IAAIK,gBAAgBV,WAAWI,UAAU,CAACH,SAAS,EAAE;oBACjDI,WAAW,CAACS,mCAAwB,CAAC,GAAGd,WAAWI,UAAU,CAACH,SAAS;oBACvE,sCAAsC;oBACtCU,QAAQC,IAAI,CAAC,CAAC,EAAEjB,YAAYkB,IAAI,CAAC,gBAAgB,EAAEZ,SAAS,4CAA4C,EAAEA,SAAS,EAAE,EAAES,YAAY,KAAK,EAAEV,WAAWI,UAAU,CAACH,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,uGAAuG,CAAC;gBAC/R,CAAC;YACL,CAAC;QACL;IACJ,CAAC;AACL"}
|
@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
3
3
|
value: true
|
4
4
|
});
|
5
5
|
const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
6
|
+
_exportStar(require("./useAnimationFrame"), exports);
|
6
7
|
_exportStar(require("./useControllableState"), exports);
|
7
8
|
_exportStar(require("./useEventCallback"), exports);
|
8
9
|
_exportStar(require("./useFirstMount"), exports);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["index.js"],"sourcesContent":["export * from './useControllableState';\nexport * from './useEventCallback';\nexport * from './useFirstMount';\nexport * from './useForceUpdate';\nexport * from './useId';\nexport * from './useIsomorphicLayoutEffect';\nexport * from './useMergedRefs';\nexport * from './useOnClickOutside';\nexport * from './useOnScrollOutside';\nexport * from './usePrevious';\nexport * from './useScrollbarWidth';\nexport * from './useTimeout';\n"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA"}
|
1
|
+
{"version":3,"sources":["index.js"],"sourcesContent":["export * from './useAnimationFrame';\nexport * from './useControllableState';\nexport * from './useEventCallback';\nexport * from './useFirstMount';\nexport * from './useForceUpdate';\nexport * from './useId';\nexport * from './useIsomorphicLayoutEffect';\nexport * from './useMergedRefs';\nexport * from './useOnClickOutside';\nexport * from './useOnScrollOutside';\nexport * from './usePrevious';\nexport * from './useScrollbarWidth';\nexport * from './useTimeout';\n"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA"}
|
@@ -0,0 +1,13 @@
|
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
Object.defineProperty(exports, "useAnimationFrame", {
|
6
|
+
enumerable: true,
|
7
|
+
get: ()=>useAnimationFrame
|
8
|
+
});
|
9
|
+
const _useBrowserTimer = require("./useBrowserTimer");
|
10
|
+
function useAnimationFrame() {
|
11
|
+
// TODO: figure it out a way to not call global.requestAnimationFrame and instead infer window from some context
|
12
|
+
return (0, _useBrowserTimer.useBrowserTimer)(requestAnimationFrame, cancelAnimationFrame);
|
13
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["useAnimationFrame.js"],"sourcesContent":["import { useBrowserTimer } from './useBrowserTimer';\n/**\n * @internal\n * Helper to manage a browser requestAnimationFrame.\n * Ensures that the requestAnimationFrame isn't set multiple times at once and is cleaned up\n * when the component is unloaded.\n *\n * @returns A pair of [requestAnimationFrame, cancelAnimationFrame] that are stable between renders.\n */ export function useAnimationFrame() {\n // TODO: figure it out a way to not call global.requestAnimationFrame and instead infer window from some context\n return useBrowserTimer(requestAnimationFrame, cancelAnimationFrame);\n}\n"],"names":["useAnimationFrame","useBrowserTimer","requestAnimationFrame","cancelAnimationFrame"],"mappings":";;;;+BAQoBA;;aAAAA;;iCARY;AAQrB,SAASA,oBAAoB;IACpC,gHAAgH;IAChH,OAAOC,IAAAA,gCAAe,EAACC,uBAAuBC;AAClD"}
|
@@ -0,0 +1,39 @@
|
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
Object.defineProperty(exports, "useBrowserTimer", {
|
6
|
+
enumerable: true,
|
7
|
+
get: ()=>useBrowserTimer
|
8
|
+
});
|
9
|
+
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
10
|
+
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
11
|
+
function useBrowserTimer(setTimer, cancelTimer) {
|
12
|
+
const id = _react.useRef(undefined);
|
13
|
+
const set = _react.useCallback((fn, delay)=>{
|
14
|
+
if (id.current !== undefined) {
|
15
|
+
cancelTimer(id.current);
|
16
|
+
}
|
17
|
+
id.current = setTimer(fn, delay);
|
18
|
+
return id.current;
|
19
|
+
}, [
|
20
|
+
cancelTimer,
|
21
|
+
setTimer
|
22
|
+
]);
|
23
|
+
const cancel = _react.useCallback(()=>{
|
24
|
+
if (id.current !== undefined) {
|
25
|
+
cancelTimer(id.current);
|
26
|
+
id.current = undefined;
|
27
|
+
}
|
28
|
+
}, [
|
29
|
+
cancelTimer
|
30
|
+
]);
|
31
|
+
// Clean up the timeout when the component is unloaded
|
32
|
+
_react.useEffect(()=>cancel, [
|
33
|
+
cancel
|
34
|
+
]);
|
35
|
+
return [
|
36
|
+
set,
|
37
|
+
cancel
|
38
|
+
];
|
39
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["useBrowserTimer.js"],"sourcesContent":["import * as React from 'react';\n/**\n * @internal\n * Helper to manage a browser timer.\n * Ensures that the timer isn't set multiple times at once,\n * and is cleaned up when the component is unloaded.\n *\n * @param setTimer - The timer setter function\n * @param cancelTimer - The timer cancel function\n * @returns A pair of [setTimer, cancelTimer] that are stable between renders.\n *\n * @example\n * const [setTimer, cancelTimer] = useBrowserTimer(setTimeout, cancelTimeout);\n *\n * setTimer(() => console.log('Hello world!'), 1000);\n * cancelTimer();\n */ export function useBrowserTimer(setTimer, cancelTimer) {\n const id = React.useRef(undefined);\n const set = React.useCallback((fn, delay)=>{\n if (id.current !== undefined) {\n cancelTimer(id.current);\n }\n id.current = setTimer(fn, delay);\n return id.current;\n }, [\n cancelTimer,\n setTimer\n ]);\n const cancel = React.useCallback(()=>{\n if (id.current !== undefined) {\n cancelTimer(id.current);\n id.current = undefined;\n }\n }, [\n cancelTimer\n ]);\n // Clean up the timeout when the component is unloaded\n React.useEffect(()=>cancel, [\n cancel\n ]);\n return [\n set,\n cancel\n ];\n}\n"],"names":["useBrowserTimer","setTimer","cancelTimer","id","React","useRef","undefined","set","useCallback","fn","delay","current","cancel","useEffect"],"mappings":";;;;+BAgBoBA;;aAAAA;;;6DAhBG;AAgBZ,SAASA,gBAAgBC,QAAQ,EAAEC,WAAW,EAAE;IACvD,MAAMC,KAAKC,OAAMC,MAAM,CAACC;IACxB,MAAMC,MAAMH,OAAMI,WAAW,CAAC,CAACC,IAAIC,QAAQ;QACvC,IAAIP,GAAGQ,OAAO,KAAKL,WAAW;YAC1BJ,YAAYC,GAAGQ,OAAO;QAC1B,CAAC;QACDR,GAAGQ,OAAO,GAAGV,SAASQ,IAAIC;QAC1B,OAAOP,GAAGQ,OAAO;IACrB,GAAG;QACCT;QACAD;KACH;IACD,MAAMW,SAASR,OAAMI,WAAW,CAAC,IAAI;QACjC,IAAIL,GAAGQ,OAAO,KAAKL,WAAW;YAC1BJ,YAAYC,GAAGQ,OAAO;YACtBR,GAAGQ,OAAO,GAAGL;QACjB,CAAC;IACL,GAAG;QACCJ;KACH;IACD,sDAAsD;IACtDE,OAAMS,SAAS,CAAC,IAAID,QAAQ;QACxBA;KACH;IACD,OAAO;QACHL;QACAK;KACH;AACL"}
|
@@ -13,16 +13,27 @@ const useOnClickOutside = (options)=>{
|
|
13
13
|
const { refs , callback , element , disabled , contains: containsProp } = options;
|
14
14
|
const timeoutId = _react.useRef(undefined);
|
15
15
|
useIFrameFocus(options);
|
16
|
+
const isMouseDownInsideRef = _react.useRef(false);
|
17
|
+
const contains = containsProp || ((parent, child)=>{
|
18
|
+
return !!(parent === null || parent === void 0 ? void 0 : parent.contains(child));
|
19
|
+
});
|
16
20
|
const listener = (0, _useEventCallback.useEventCallback)((ev)=>{
|
17
|
-
|
18
|
-
|
19
|
-
|
21
|
+
if (isMouseDownInsideRef.current) {
|
22
|
+
isMouseDownInsideRef.current = false;
|
23
|
+
return;
|
24
|
+
}
|
20
25
|
const target = ev.composedPath()[0];
|
21
26
|
const isOutside = refs.every((ref)=>!contains(ref.current || null, target));
|
22
27
|
if (isOutside && !disabled) {
|
23
28
|
callback(ev);
|
24
29
|
}
|
25
30
|
});
|
31
|
+
const handleMouseDown = (0, _useEventCallback.useEventCallback)((ev)=>{
|
32
|
+
// Selecting text from inside to outside will rigger click event.
|
33
|
+
// In this case click event target is outside but mouse down event target is inside.
|
34
|
+
// And this click event should be considered as inside click.
|
35
|
+
isMouseDownInsideRef.current = refs.some((ref)=>contains(ref.current || null, ev.target));
|
36
|
+
});
|
26
37
|
_react.useEffect(()=>{
|
27
38
|
if (disabled) {
|
28
39
|
return;
|
@@ -43,6 +54,7 @@ const useOnClickOutside = (options)=>{
|
|
43
54
|
element === null || element === void 0 ? void 0 : element.addEventListener('click', conditionalHandler, true);
|
44
55
|
element === null || element === void 0 ? void 0 : element.addEventListener('touchstart', conditionalHandler, true);
|
45
56
|
element === null || element === void 0 ? void 0 : element.addEventListener('contextmenu', conditionalHandler, true);
|
57
|
+
element === null || element === void 0 ? void 0 : element.addEventListener('mousedown', handleMouseDown, true);
|
46
58
|
// Garbage collect this event after it's no longer useful to avoid memory leaks
|
47
59
|
timeoutId.current = window.setTimeout(()=>{
|
48
60
|
currentEvent = undefined;
|
@@ -51,13 +63,15 @@ const useOnClickOutside = (options)=>{
|
|
51
63
|
element === null || element === void 0 ? void 0 : element.removeEventListener('click', conditionalHandler, true);
|
52
64
|
element === null || element === void 0 ? void 0 : element.removeEventListener('touchstart', conditionalHandler, true);
|
53
65
|
element === null || element === void 0 ? void 0 : element.removeEventListener('contextmenu', conditionalHandler, true);
|
66
|
+
element === null || element === void 0 ? void 0 : element.removeEventListener('mousedown', handleMouseDown, true);
|
54
67
|
clearTimeout(timeoutId.current);
|
55
68
|
currentEvent = undefined;
|
56
69
|
};
|
57
70
|
}, [
|
58
71
|
listener,
|
59
72
|
element,
|
60
|
-
disabled
|
73
|
+
disabled,
|
74
|
+
handleMouseDown
|
61
75
|
]);
|
62
76
|
};
|
63
77
|
const getWindowEvent = (target)=>{
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useOnClickOutside.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from './useEventCallback';\n/**\n * @internal\n * Utility to perform checks where a click/touch event was made outside a component\n */ export const useOnClickOutside = (options)=>{\n const { refs , callback , element , disabled , contains: containsProp } = options;\n const timeoutId = React.useRef(undefined);\n useIFrameFocus(options);\n const listener = useEventCallback((ev)=>{\n const contains = containsProp || ((parent, child)=>{\n return !!(parent === null || parent === void 0 ? void 0 : parent.contains(child));\n });\n const target = ev.composedPath()[0];\n const isOutside = refs.every((ref)=>!contains(ref.current || null, target));\n if (isOutside && !disabled) {\n callback(ev);\n }\n });\n React.useEffect(()=>{\n if (disabled) {\n return;\n }\n // Store the current event to avoid triggering handlers immediately\n // Note this depends on a deprecated but extremely well supported quirk of the web platform\n // https://github.com/facebook/react/issues/20074\n let currentEvent = getWindowEvent(window);\n const conditionalHandler = (event)=>{\n // Skip if this event is the same as the one running when we added the handlers\n if (event === currentEvent) {\n currentEvent = undefined;\n return;\n }\n listener(event);\n };\n // use capture phase because React can update DOM before the event bubbles to the document\n element === null || element === void 0 ? void 0 : element.addEventListener('click', conditionalHandler, true);\n element === null || element === void 0 ? void 0 : element.addEventListener('touchstart', conditionalHandler, true);\n element === null || element === void 0 ? void 0 : element.addEventListener('contextmenu', conditionalHandler, true);\n // Garbage collect this event after it's no longer useful to avoid memory leaks\n timeoutId.current = window.setTimeout(()=>{\n currentEvent = undefined;\n }, 1);\n return ()=>{\n element === null || element === void 0 ? void 0 : element.removeEventListener('click', conditionalHandler, true);\n element === null || element === void 0 ? void 0 : element.removeEventListener('touchstart', conditionalHandler, true);\n element === null || element === void 0 ? void 0 : element.removeEventListener('contextmenu', conditionalHandler, true);\n clearTimeout(timeoutId.current);\n currentEvent = undefined;\n };\n }, [\n listener,\n element,\n disabled\n ]);\n};\nconst getWindowEvent = (target)=>{\n if (target) {\n var _target_ownerDocument, _target_ownerDocument_defaultView;\n if (typeof target.window === 'object' && target.window === target) {\n // eslint-disable-next-line deprecation/deprecation\n return target.event;\n }\n var _target_ownerDocument_defaultView_event;\n // eslint-disable-next-line deprecation/deprecation\n return (_target_ownerDocument_defaultView_event = (_target_ownerDocument = target.ownerDocument) === null || _target_ownerDocument === void 0 ? void 0 : (_target_ownerDocument_defaultView = _target_ownerDocument.defaultView) === null || _target_ownerDocument_defaultView === void 0 ? void 0 : _target_ownerDocument_defaultView.event) !== null && _target_ownerDocument_defaultView_event !== void 0 ? _target_ownerDocument_defaultView_event : undefined;\n }\n return undefined;\n};\nconst FUI_FRAME_EVENT = 'fuiframefocus';\n/**\n * Since click events do not propagate past iframes, we use focus to detect if a\n * click has happened inside an iframe, since the only ways of focusing inside an\n * iframe are:\n * - clicking inside\n * - tabbing inside\n *\n * Polls the value of `document.activeElement`. If it is an iframe, then dispatch\n * a custom DOM event. When the custom event is received call the provided callback\n */ const useIFrameFocus = (options)=>{\n const { disabled , element: targetDocument , callback , contains: containsProp = (parent, child)=>{\n return !!(parent === null || parent === void 0 ? void 0 : parent.contains(child));\n } , pollDuration =1000 , refs } = options;\n const timeoutRef = React.useRef();\n const listener = useEventCallback((e)=>{\n const contains = containsProp || ((parent, child)=>{\n return !!(parent === null || parent === void 0 ? void 0 : parent.contains(child));\n });\n const isOutside = refs.every((ref)=>!contains(ref.current || null, e.target));\n if (isOutside && !disabled) {\n callback(e);\n }\n });\n // Adds listener to the custom iframe focus event\n React.useEffect(()=>{\n if (disabled) {\n return;\n }\n targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener(FUI_FRAME_EVENT, listener, true);\n return ()=>{\n targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener(FUI_FRAME_EVENT, listener, true);\n };\n }, [\n targetDocument,\n disabled,\n listener\n ]);\n // Starts polling for the active element\n React.useEffect(()=>{\n var _targetDocument_defaultView;\n if (disabled) {\n return;\n }\n timeoutRef.current = targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.setInterval(()=>{\n const activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement;\n if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.tagName) === 'IFRAME' || (activeElement === null || activeElement === void 0 ? void 0 : activeElement.tagName) === 'WEBVIEW') {\n const event = new CustomEvent(FUI_FRAME_EVENT, {\n bubbles: true\n });\n activeElement.dispatchEvent(event);\n }\n }, pollDuration);\n return ()=>{\n var _targetDocument_defaultView;\n targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.clearTimeout(timeoutRef.current);\n };\n }, [\n targetDocument,\n disabled,\n pollDuration\n ]);\n};\n"],"names":["useOnClickOutside","options","refs","callback","element","disabled","contains","containsProp","timeoutId","React","useRef","undefined","useIFrameFocus","listener","useEventCallback","ev","parent","child","target","composedPath","isOutside","every","ref","current","useEffect","currentEvent","getWindowEvent","window","conditionalHandler","event","addEventListener","setTimeout","removeEventListener","clearTimeout","_target_ownerDocument","_target_ownerDocument_defaultView","_target_ownerDocument_defaultView_event","ownerDocument","defaultView","FUI_FRAME_EVENT","targetDocument","pollDuration","timeoutRef","e","_targetDocument_defaultView","setInterval","activeElement","tagName","CustomEvent","bubbles","dispatchEvent"],"mappings":";;;;+BAKiBA;;aAAAA;;;6DALM;kCACU;AAItB,MAAMA,oBAAoB,CAACC,UAAU;IAC5C,MAAM,EAAEC,KAAI,EAAGC,SAAQ,EAAGC,QAAO,EAAGC,SAAQ,EAAGC,UAAUC,aAAY,EAAG,GAAGN;IAC3E,MAAMO,YAAYC,OAAMC,MAAM,CAACC;IAC/BC,eAAeX;IACf,MAAMY,WAAWC,IAAAA,kCAAgB,EAAC,CAACC,KAAK;QACpC,MAAMT,WAAWC,gBAAiB,CAAA,CAACS,QAAQC,QAAQ;YAC/C,OAAO,CAAC,CAAED,CAAAA,WAAW,IAAI,IAAIA,WAAW,KAAK,IAAI,KAAK,IAAIA,OAAOV,QAAQ,CAACW,MAAM,AAAD;QACnF,CAAA;QACA,MAAMC,SAASH,GAAGI,YAAY,EAAE,CAAC,EAAE;QACnC,MAAMC,YAAYlB,KAAKmB,KAAK,CAAC,CAACC,MAAM,CAAChB,SAASgB,IAAIC,OAAO,IAAI,IAAI,EAAEL;QACnE,IAAIE,aAAa,CAACf,UAAU;YACxBF,SAASY;QACb,CAAC;IACL;IACAN,OAAMe,SAAS,CAAC,IAAI;QAChB,IAAInB,UAAU;YACV;QACJ,CAAC;QACD,mEAAmE;QACnE,2FAA2F;QAC3F,iDAAiD;QACjD,IAAIoB,eAAeC,eAAeC;QAClC,MAAMC,qBAAqB,CAACC,QAAQ;YAChC,+EAA+E;YAC/E,IAAIA,UAAUJ,cAAc;gBACxBA,eAAed;gBACf;YACJ,CAAC;YACDE,SAASgB;QACb;QACA,0FAA0F;QAC1FzB,YAAY,IAAI,IAAIA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQ0B,gBAAgB,CAAC,SAASF,oBAAoB,IAAI,CAAC;QAC7GxB,YAAY,IAAI,IAAIA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQ0B,gBAAgB,CAAC,cAAcF,oBAAoB,IAAI,CAAC;QAClHxB,YAAY,IAAI,IAAIA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQ0B,gBAAgB,CAAC,eAAeF,oBAAoB,IAAI,CAAC;QACnH,+EAA+E;QAC/EpB,UAAUe,OAAO,GAAGI,OAAOI,UAAU,CAAC,IAAI;YACtCN,eAAed;QACnB,GAAG;QACH,OAAO,IAAI;YACPP,YAAY,IAAI,IAAIA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQ4B,mBAAmB,CAAC,SAASJ,oBAAoB,IAAI,CAAC;YAChHxB,YAAY,IAAI,IAAIA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQ4B,mBAAmB,CAAC,cAAcJ,oBAAoB,IAAI,CAAC;YACrHxB,YAAY,IAAI,IAAIA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQ4B,mBAAmB,CAAC,eAAeJ,oBAAoB,IAAI,CAAC;YACtHK,aAAazB,UAAUe,OAAO;YAC9BE,eAAed;QACnB;IACJ,GAAG;QACCE;QACAT;QACAC;KACH;AACL;AACA,MAAMqB,iBAAiB,CAACR,SAAS;IAC7B,IAAIA,QAAQ;QACR,IAAIgB,uBAAuBC;QAC3B,IAAI,OAAOjB,OAAOS,MAAM,KAAK,YAAYT,OAAOS,MAAM,KAAKT,QAAQ;YAC/D,mDAAmD;YACnD,OAAOA,OAAOW,KAAK;QACvB,CAAC;QACD,IAAIO;QACJ,mDAAmD;QACnD,OAAO,AAACA,CAAAA,0CAA0C,AAACF,CAAAA,wBAAwBhB,OAAOmB,aAAa,AAAD,MAAO,IAAI,IAAIH,0BAA0B,KAAK,IAAI,KAAK,IAAI,AAACC,CAAAA,oCAAoCD,sBAAsBI,WAAW,AAAD,MAAO,IAAI,IAAIH,sCAAsC,KAAK,IAAI,KAAK,IAAIA,kCAAkCN,KAAK,AAAD,MAAO,IAAI,IAAIO,4CAA4C,KAAK,IAAIA,0CAA0CzB,SAAS;IACtc,CAAC;IACD,OAAOA;AACX;AACA,MAAM4B,kBAAkB;AACxB;;;;;;;;;CASC,GAAG,MAAM3B,iBAAiB,CAACX,UAAU;IAClC,MAAM,EAAEI,SAAQ,EAAGD,SAASoC,eAAc,EAAGrC,SAAQ,EAAGG,UAAUC,eAAe,CAACS,QAAQC,QAAQ;QAC9F,OAAO,CAAC,CAAED,CAAAA,WAAW,IAAI,IAAIA,WAAW,KAAK,IAAI,KAAK,IAAIA,OAAOV,QAAQ,CAACW,MAAM,AAAD;IACnF,CAAC,CAAA,EAAGwB,cAAc,KAAI,EAAGvC,KAAI,EAAG,GAAGD;IACnC,MAAMyC,aAAajC,OAAMC,MAAM;IAC/B,MAAMG,WAAWC,IAAAA,kCAAgB,EAAC,CAAC6B,IAAI;QACnC,MAAMrC,WAAWC,gBAAiB,CAAA,CAACS,QAAQC,QAAQ;YAC/C,OAAO,CAAC,CAAED,CAAAA,WAAW,IAAI,IAAIA,WAAW,KAAK,IAAI,KAAK,IAAIA,OAAOV,QAAQ,CAACW,MAAM,AAAD;QACnF,CAAA;QACA,MAAMG,YAAYlB,KAAKmB,KAAK,CAAC,CAACC,MAAM,CAAChB,SAASgB,IAAIC,OAAO,IAAI,IAAI,EAAEoB,EAAEzB,MAAM;QAC3E,IAAIE,aAAa,CAACf,UAAU;YACxBF,SAASwC;QACb,CAAC;IACL;IACA,iDAAiD;IACjDlC,OAAMe,SAAS,CAAC,IAAI;QAChB,IAAInB,UAAU;YACV;QACJ,CAAC;QACDmC,mBAAmB,IAAI,IAAIA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeV,gBAAgB,CAACS,iBAAiB1B,UAAU,IAAI,CAAC;QAChI,OAAO,IAAI;YACP2B,mBAAmB,IAAI,IAAIA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeR,mBAAmB,CAACO,iBAAiB1B,UAAU,IAAI,CAAC;QACvI;IACJ,GAAG;QACC2B;QACAnC;QACAQ;KACH;IACD,wCAAwC;IACxCJ,OAAMe,SAAS,CAAC,IAAI;QAChB,IAAIoB;QACJ,IAAIvC,UAAU;YACV;QACJ,CAAC;QACDqC,WAAWnB,OAAO,GAAGiB,mBAAmB,IAAI,IAAIA,mBAAmB,KAAK,IAAI,KAAK,IAAI,AAACI,CAAAA,8BAA8BJ,eAAeF,WAAW,AAAD,MAAO,IAAI,IAAIM,gCAAgC,KAAK,IAAI,KAAK,IAAIA,4BAA4BC,WAAW,CAAC,IAAI;YACtP,MAAMC,gBAAgBN,mBAAmB,IAAI,IAAIA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeM,aAAa;YAClH,IAAI,AAACA,CAAAA,kBAAkB,IAAI,IAAIA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAcC,OAAO,AAAD,MAAO,YAAY,AAACD,CAAAA,kBAAkB,IAAI,IAAIA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAcC,OAAO,AAAD,MAAO,WAAW;gBAC3M,MAAMlB,QAAQ,IAAImB,YAAYT,iBAAiB;oBAC3CU,SAAS,IAAI;gBACjB;gBACAH,cAAcI,aAAa,CAACrB;YAChC,CAAC;QACL,GAAGY,aAAa;QAChB,OAAO,IAAI;YACP,IAAIG;YACJJ,mBAAmB,IAAI,IAAIA,mBAAmB,KAAK,IAAI,KAAK,IAAI,AAACI,CAAAA,8BAA8BJ,eAAeF,WAAW,AAAD,MAAO,IAAI,IAAIM,gCAAgC,KAAK,IAAI,KAAK,IAAIA,4BAA4BX,YAAY,CAACS,WAAWnB,OAAO,CAAC;QACzP;IACJ,GAAG;QACCiB;QACAnC;QACAoC;KACH;AACL"}
|
1
|
+
{"version":3,"sources":["useOnClickOutside.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from './useEventCallback';\n/**\n * @internal\n * Utility to perform checks where a click/touch event was made outside a component\n */ export const useOnClickOutside = (options)=>{\n const { refs , callback , element , disabled , contains: containsProp } = options;\n const timeoutId = React.useRef(undefined);\n useIFrameFocus(options);\n const isMouseDownInsideRef = React.useRef(false);\n const contains = containsProp || ((parent, child)=>{\n return !!(parent === null || parent === void 0 ? void 0 : parent.contains(child));\n });\n const listener = useEventCallback((ev)=>{\n if (isMouseDownInsideRef.current) {\n isMouseDownInsideRef.current = false;\n return;\n }\n const target = ev.composedPath()[0];\n const isOutside = refs.every((ref)=>!contains(ref.current || null, target));\n if (isOutside && !disabled) {\n callback(ev);\n }\n });\n const handleMouseDown = useEventCallback((ev)=>{\n // Selecting text from inside to outside will rigger click event.\n // In this case click event target is outside but mouse down event target is inside.\n // And this click event should be considered as inside click.\n isMouseDownInsideRef.current = refs.some((ref)=>contains(ref.current || null, ev.target));\n });\n React.useEffect(()=>{\n if (disabled) {\n return;\n }\n // Store the current event to avoid triggering handlers immediately\n // Note this depends on a deprecated but extremely well supported quirk of the web platform\n // https://github.com/facebook/react/issues/20074\n let currentEvent = getWindowEvent(window);\n const conditionalHandler = (event)=>{\n // Skip if this event is the same as the one running when we added the handlers\n if (event === currentEvent) {\n currentEvent = undefined;\n return;\n }\n listener(event);\n };\n // use capture phase because React can update DOM before the event bubbles to the document\n element === null || element === void 0 ? void 0 : element.addEventListener('click', conditionalHandler, true);\n element === null || element === void 0 ? void 0 : element.addEventListener('touchstart', conditionalHandler, true);\n element === null || element === void 0 ? void 0 : element.addEventListener('contextmenu', conditionalHandler, true);\n element === null || element === void 0 ? void 0 : element.addEventListener('mousedown', handleMouseDown, true);\n // Garbage collect this event after it's no longer useful to avoid memory leaks\n timeoutId.current = window.setTimeout(()=>{\n currentEvent = undefined;\n }, 1);\n return ()=>{\n element === null || element === void 0 ? void 0 : element.removeEventListener('click', conditionalHandler, true);\n element === null || element === void 0 ? void 0 : element.removeEventListener('touchstart', conditionalHandler, true);\n element === null || element === void 0 ? void 0 : element.removeEventListener('contextmenu', conditionalHandler, true);\n element === null || element === void 0 ? void 0 : element.removeEventListener('mousedown', handleMouseDown, true);\n clearTimeout(timeoutId.current);\n currentEvent = undefined;\n };\n }, [\n listener,\n element,\n disabled,\n handleMouseDown\n ]);\n};\nconst getWindowEvent = (target)=>{\n if (target) {\n var _target_ownerDocument, _target_ownerDocument_defaultView;\n if (typeof target.window === 'object' && target.window === target) {\n // eslint-disable-next-line deprecation/deprecation\n return target.event;\n }\n var _target_ownerDocument_defaultView_event;\n // eslint-disable-next-line deprecation/deprecation\n return (_target_ownerDocument_defaultView_event = (_target_ownerDocument = target.ownerDocument) === null || _target_ownerDocument === void 0 ? void 0 : (_target_ownerDocument_defaultView = _target_ownerDocument.defaultView) === null || _target_ownerDocument_defaultView === void 0 ? void 0 : _target_ownerDocument_defaultView.event) !== null && _target_ownerDocument_defaultView_event !== void 0 ? _target_ownerDocument_defaultView_event : undefined;\n }\n return undefined;\n};\nconst FUI_FRAME_EVENT = 'fuiframefocus';\n/**\n * Since click events do not propagate past iframes, we use focus to detect if a\n * click has happened inside an iframe, since the only ways of focusing inside an\n * iframe are:\n * - clicking inside\n * - tabbing inside\n *\n * Polls the value of `document.activeElement`. If it is an iframe, then dispatch\n * a custom DOM event. When the custom event is received call the provided callback\n */ const useIFrameFocus = (options)=>{\n const { disabled , element: targetDocument , callback , contains: containsProp = (parent, child)=>{\n return !!(parent === null || parent === void 0 ? void 0 : parent.contains(child));\n } , pollDuration =1000 , refs } = options;\n const timeoutRef = React.useRef();\n const listener = useEventCallback((e)=>{\n const contains = containsProp || ((parent, child)=>{\n return !!(parent === null || parent === void 0 ? void 0 : parent.contains(child));\n });\n const isOutside = refs.every((ref)=>!contains(ref.current || null, e.target));\n if (isOutside && !disabled) {\n callback(e);\n }\n });\n // Adds listener to the custom iframe focus event\n React.useEffect(()=>{\n if (disabled) {\n return;\n }\n targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener(FUI_FRAME_EVENT, listener, true);\n return ()=>{\n targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener(FUI_FRAME_EVENT, listener, true);\n };\n }, [\n targetDocument,\n disabled,\n listener\n ]);\n // Starts polling for the active element\n React.useEffect(()=>{\n var _targetDocument_defaultView;\n if (disabled) {\n return;\n }\n timeoutRef.current = targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.setInterval(()=>{\n const activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement;\n if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.tagName) === 'IFRAME' || (activeElement === null || activeElement === void 0 ? void 0 : activeElement.tagName) === 'WEBVIEW') {\n const event = new CustomEvent(FUI_FRAME_EVENT, {\n bubbles: true\n });\n activeElement.dispatchEvent(event);\n }\n }, pollDuration);\n return ()=>{\n var _targetDocument_defaultView;\n targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.clearTimeout(timeoutRef.current);\n };\n }, [\n targetDocument,\n disabled,\n pollDuration\n ]);\n};\n"],"names":["useOnClickOutside","options","refs","callback","element","disabled","contains","containsProp","timeoutId","React","useRef","undefined","useIFrameFocus","isMouseDownInsideRef","parent","child","listener","useEventCallback","ev","current","target","composedPath","isOutside","every","ref","handleMouseDown","some","useEffect","currentEvent","getWindowEvent","window","conditionalHandler","event","addEventListener","setTimeout","removeEventListener","clearTimeout","_target_ownerDocument","_target_ownerDocument_defaultView","_target_ownerDocument_defaultView_event","ownerDocument","defaultView","FUI_FRAME_EVENT","targetDocument","pollDuration","timeoutRef","e","_targetDocument_defaultView","setInterval","activeElement","tagName","CustomEvent","bubbles","dispatchEvent"],"mappings":"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"}
|
@@ -6,28 +6,8 @@ Object.defineProperty(exports, "useTimeout", {
|
|
6
6
|
enumerable: true,
|
7
7
|
get: ()=>useTimeout
|
8
8
|
});
|
9
|
-
const
|
10
|
-
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
9
|
+
const _useBrowserTimer = require("./useBrowserTimer");
|
11
10
|
function useTimeout() {
|
12
|
-
|
13
|
-
|
14
|
-
set: (fn, delay)=>{
|
15
|
-
timeout.clear();
|
16
|
-
timeout.id = setTimeout(fn, delay);
|
17
|
-
},
|
18
|
-
clear: ()=>{
|
19
|
-
if (timeout.id !== undefined) {
|
20
|
-
clearTimeout(timeout.id);
|
21
|
-
timeout.id = undefined;
|
22
|
-
}
|
23
|
-
}
|
24
|
-
}));
|
25
|
-
// Clean up the timeout when the component is unloaded
|
26
|
-
_react.useEffect(()=>timeout.clear, [
|
27
|
-
timeout
|
28
|
-
]);
|
29
|
-
return [
|
30
|
-
timeout.set,
|
31
|
-
timeout.clear
|
32
|
-
];
|
11
|
+
// TODO: figure it out a way to not call global.setTimeout and instead infer window from some context
|
12
|
+
return (0, _useBrowserTimer.useBrowserTimer)(setTimeout, clearTimeout);
|
33
13
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useTimeout.js"],"sourcesContent":["import
|
1
|
+
{"version":3,"sources":["useTimeout.js"],"sourcesContent":["import { useBrowserTimer } from './useBrowserTimer';\n/**\n * @internal\n * Helper to manage a browser timeout.\n * Ensures that the timeout isn't set multiple times at once and is cleaned up\n * when the component is unloaded.\n *\n * @returns A pair of [setTimeout, clearTimeout] that are stable between renders.\n */ export function useTimeout() {\n // TODO: figure it out a way to not call global.setTimeout and instead infer window from some context\n return useBrowserTimer(setTimeout, clearTimeout);\n}\n"],"names":["useTimeout","useBrowserTimer","setTimeout","clearTimeout"],"mappings":";;;;+BAQoBA;;aAAAA;;iCARY;AAQrB,SAASA,aAAa;IAC7B,qGAAqG;IACrG,OAAOC,IAAAA,gCAAe,EAACC,YAAYC;AACvC"}
|
package/lib-commonjs/index.js
CHANGED
@@ -20,6 +20,7 @@ _export(exports, {
|
|
20
20
|
SLOT_RENDER_FUNCTION_SYMBOL: ()=>_index.SLOT_RENDER_FUNCTION_SYMBOL,
|
21
21
|
IdPrefixProvider: ()=>_index1.IdPrefixProvider,
|
22
22
|
resetIdsForTests: ()=>_index1.resetIdsForTests,
|
23
|
+
useAnimationFrame: ()=>_index1.useAnimationFrame,
|
23
24
|
useControllableState: ()=>_index1.useControllableState,
|
24
25
|
useEventCallback: ()=>_index1.useEventCallback,
|
25
26
|
useFirstMount: ()=>_index1.useFirstMount,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["index.js"],"sourcesContent":["export { slot, isSlot, getSlots, getSlotsNext, assertSlots, resolveShorthand, isResolvedShorthand, SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from './compose/index';\nexport { IdPrefixProvider, resetIdsForTests, useControllableState, useEventCallback, useFirstMount, useForceUpdate, useId, useIsomorphicLayoutEffect, useMergedRefs, useOnClickOutside, useOnScrollOutside, usePrevious, useScrollbarWidth, useTimeout } from './hooks/index';\nexport { canUseDOM, useIsSSR, SSRProvider } from './ssr/index';\nexport { clamp, getNativeElementProps, getPartitionedNativeProps, getRTLSafeKey, mergeCallbacks, isHTMLElement, isInteractiveHTMLElement, omit, createPriorityQueue } from './utils/index';\nexport { applyTriggerPropsToChildren, getTriggerChild, isFluentTrigger } from './trigger/index';\nexport { isTouchEvent, isMouseEvent, getEventClientCoords } from './events/index';\nexport { useSelection } from './selection/index';\n"],"names":["slot","isSlot","getSlots","getSlotsNext","assertSlots","resolveShorthand","isResolvedShorthand","SLOT_ELEMENT_TYPE_SYMBOL","SLOT_RENDER_FUNCTION_SYMBOL","IdPrefixProvider","resetIdsForTests","useControllableState","useEventCallback","useFirstMount","useForceUpdate","useId","useIsomorphicLayoutEffect","useMergedRefs","useOnClickOutside","useOnScrollOutside","usePrevious","useScrollbarWidth","useTimeout","canUseDOM","useIsSSR","SSRProvider","clamp","getNativeElementProps","getPartitionedNativeProps","getRTLSafeKey","mergeCallbacks","isHTMLElement","isInteractiveHTMLElement","omit","createPriorityQueue","applyTriggerPropsToChildren","getTriggerChild","isFluentTrigger","isTouchEvent","isMouseEvent","getEventClientCoords","useSelection"],"mappings":";;;;;;;;;;;IAASA,IAAI,MAAJA,WAAI;IAAEC,MAAM,MAANA,aAAM;IAAEC,QAAQ,MAARA,eAAQ;IAAEC,YAAY,MAAZA,mBAAY;IAAEC,WAAW,MAAXA,kBAAW;IAAEC,gBAAgB,MAAhBA,uBAAgB;IAAEC,mBAAmB,MAAnBA,0BAAmB;IAAEC,wBAAwB,MAAxBA,+BAAwB;IAAEC,2BAA2B,MAA3BA,kCAA2B;IAC/IC,gBAAgB,MAAhBA,wBAAgB;IAAEC,gBAAgB,MAAhBA,wBAAgB;IAAEC,oBAAoB,MAApBA,4BAAoB;IAAEC,gBAAgB,MAAhBA,wBAAgB;IAAEC,aAAa,MAAbA,qBAAa;IAAEC,cAAc,MAAdA,sBAAc;IAAEC,KAAK,MAALA,aAAK;IAAEC,yBAAyB,MAAzBA,iCAAyB;IAAEC,aAAa,MAAbA,qBAAa;IAAEC,iBAAiB,MAAjBA,yBAAiB;IAAEC,kBAAkB,MAAlBA,0BAAkB;IAAEC,WAAW,MAAXA,mBAAW;IAAEC,iBAAiB,MAAjBA,yBAAiB;IAAEC,UAAU,MAAVA,kBAAU;
|
1
|
+
{"version":3,"sources":["index.js"],"sourcesContent":["export { slot, isSlot, getSlots, getSlotsNext, assertSlots, resolveShorthand, isResolvedShorthand, SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from './compose/index';\nexport { IdPrefixProvider, resetIdsForTests, useAnimationFrame, useControllableState, useEventCallback, useFirstMount, useForceUpdate, useId, useIsomorphicLayoutEffect, useMergedRefs, useOnClickOutside, useOnScrollOutside, usePrevious, useScrollbarWidth, useTimeout } from './hooks/index';\nexport { canUseDOM, useIsSSR, SSRProvider } from './ssr/index';\nexport { clamp, getNativeElementProps, getPartitionedNativeProps, getRTLSafeKey, mergeCallbacks, isHTMLElement, isInteractiveHTMLElement, omit, createPriorityQueue } from './utils/index';\nexport { applyTriggerPropsToChildren, getTriggerChild, isFluentTrigger } from './trigger/index';\nexport { isTouchEvent, isMouseEvent, getEventClientCoords } from './events/index';\nexport { useSelection } from './selection/index';\n"],"names":["slot","isSlot","getSlots","getSlotsNext","assertSlots","resolveShorthand","isResolvedShorthand","SLOT_ELEMENT_TYPE_SYMBOL","SLOT_RENDER_FUNCTION_SYMBOL","IdPrefixProvider","resetIdsForTests","useAnimationFrame","useControllableState","useEventCallback","useFirstMount","useForceUpdate","useId","useIsomorphicLayoutEffect","useMergedRefs","useOnClickOutside","useOnScrollOutside","usePrevious","useScrollbarWidth","useTimeout","canUseDOM","useIsSSR","SSRProvider","clamp","getNativeElementProps","getPartitionedNativeProps","getRTLSafeKey","mergeCallbacks","isHTMLElement","isInteractiveHTMLElement","omit","createPriorityQueue","applyTriggerPropsToChildren","getTriggerChild","isFluentTrigger","isTouchEvent","isMouseEvent","getEventClientCoords","useSelection"],"mappings":";;;;;;;;;;;IAASA,IAAI,MAAJA,WAAI;IAAEC,MAAM,MAANA,aAAM;IAAEC,QAAQ,MAARA,eAAQ;IAAEC,YAAY,MAAZA,mBAAY;IAAEC,WAAW,MAAXA,kBAAW;IAAEC,gBAAgB,MAAhBA,uBAAgB;IAAEC,mBAAmB,MAAnBA,0BAAmB;IAAEC,wBAAwB,MAAxBA,+BAAwB;IAAEC,2BAA2B,MAA3BA,kCAA2B;IAC/IC,gBAAgB,MAAhBA,wBAAgB;IAAEC,gBAAgB,MAAhBA,wBAAgB;IAAEC,iBAAiB,MAAjBA,yBAAiB;IAAEC,oBAAoB,MAApBA,4BAAoB;IAAEC,gBAAgB,MAAhBA,wBAAgB;IAAEC,aAAa,MAAbA,qBAAa;IAAEC,cAAc,MAAdA,sBAAc;IAAEC,KAAK,MAALA,aAAK;IAAEC,yBAAyB,MAAzBA,iCAAyB;IAAEC,aAAa,MAAbA,qBAAa;IAAEC,iBAAiB,MAAjBA,yBAAiB;IAAEC,kBAAkB,MAAlBA,0BAAkB;IAAEC,WAAW,MAAXA,mBAAW;IAAEC,iBAAiB,MAAjBA,yBAAiB;IAAEC,UAAU,MAAVA,kBAAU;IAChQC,SAAS,MAATA,iBAAS;IAAEC,QAAQ,MAARA,gBAAQ;IAAEC,WAAW,MAAXA,mBAAW;IAChCC,KAAK,MAALA,aAAK;IAAEC,qBAAqB,MAArBA,6BAAqB;IAAEC,yBAAyB,MAAzBA,iCAAyB;IAAEC,aAAa,MAAbA,qBAAa;IAAEC,cAAc,MAAdA,sBAAc;IAAEC,aAAa,MAAbA,qBAAa;IAAEC,wBAAwB,MAAxBA,gCAAwB;IAAEC,IAAI,MAAJA,YAAI;IAAEC,mBAAmB,MAAnBA,2BAAmB;IAC1JC,2BAA2B,MAA3BA,mCAA2B;IAAEC,eAAe,MAAfA,uBAAe;IAAEC,eAAe,MAAfA,uBAAe;IAC7DC,YAAY,MAAZA,oBAAY;IAAEC,YAAY,MAAZA,oBAAY;IAAEC,oBAAoB,MAApBA,4BAAoB;IAChDC,YAAY,MAAZA,oBAAY;;uBAN2I;wBACiH;wBAChO;wBAC0H;wBAC7F;wBACb;wBACpC"}
|