@contember/react-utils 1.3.0-alpha.9 → 2.0.0-alpha.2
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/dist/development/context/createContext.cjs +10 -0
- package/dist/development/context/createContext.cjs.map +1 -0
- package/dist/development/context/createContext.js +10 -0
- package/dist/development/context/createContext.js.map +1 -0
- package/dist/development/context/{createNonNullableContextFactory.cjs → createRequiredContext.cjs} +6 -5
- package/dist/development/context/createRequiredContext.cjs.map +1 -0
- package/dist/development/context/{createNonNullableContextFactory.js → createRequiredContext.js} +6 -5
- package/dist/development/context/createRequiredContext.js.map +1 -0
- package/dist/development/hooks/useAutoHeightTextArea.cjs +1 -1
- package/dist/development/hooks/useAutoHeightTextArea.cjs.map +1 -1
- package/dist/development/hooks/useAutoHeightTextArea.js +1 -1
- package/dist/development/hooks/useAutoHeightTextArea.js.map +1 -1
- package/dist/development/hooks/useStoredState.cjs +89 -12
- package/dist/development/hooks/useStoredState.cjs.map +1 -1
- package/dist/development/hooks/useStoredState.js +91 -14
- package/dist/development/hooks/useStoredState.js.map +1 -1
- package/dist/development/index.cjs +11 -41
- package/dist/development/index.cjs.map +1 -1
- package/dist/development/index.js +12 -42
- package/dist/development/index.js.map +1 -1
- package/dist/production/context/createContext.cjs +10 -0
- package/dist/production/context/createContext.cjs.map +1 -0
- package/dist/production/context/createContext.js +10 -0
- package/dist/production/context/createContext.js.map +1 -0
- package/dist/production/context/{createNonNullableContextFactory.cjs → createRequiredContext.cjs} +6 -5
- package/dist/production/context/createRequiredContext.cjs.map +1 -0
- package/dist/production/context/{createNonNullableContextFactory.js → createRequiredContext.js} +6 -5
- package/dist/production/context/createRequiredContext.js.map +1 -0
- package/dist/production/hooks/useAutoHeightTextArea.cjs +1 -1
- package/dist/production/hooks/useAutoHeightTextArea.cjs.map +1 -1
- package/dist/production/hooks/useAutoHeightTextArea.js +1 -1
- package/dist/production/hooks/useAutoHeightTextArea.js.map +1 -1
- package/dist/production/hooks/useStoredState.cjs +89 -12
- package/dist/production/hooks/useStoredState.cjs.map +1 -1
- package/dist/production/hooks/useStoredState.js +91 -14
- package/dist/production/hooks/useStoredState.js.map +1 -1
- package/dist/production/index.cjs +11 -41
- package/dist/production/index.cjs.map +1 -1
- package/dist/production/index.js +12 -42
- package/dist/production/index.js.map +1 -1
- package/dist/types/context/createContext.d.ts +3 -0
- package/dist/types/context/createContext.d.ts.map +1 -0
- package/dist/types/context/createRequiredContext.d.ts +3 -0
- package/dist/types/context/createRequiredContext.d.ts.map +1 -0
- package/dist/types/context/index.d.ts +2 -2
- package/dist/types/context/index.d.ts.map +1 -1
- package/dist/types/hooks/index.d.ts +0 -10
- package/dist/types/hooks/index.d.ts.map +1 -1
- package/dist/types/hooks/useArrayMapMemo.d.ts.map +1 -1
- package/dist/types/hooks/useConstantLengthInvariant.d.ts.map +1 -1
- package/dist/types/hooks/useConstantValueInvariant.d.ts.map +1 -1
- package/dist/types/hooks/useDebounce.d.ts.map +1 -1
- package/dist/types/hooks/useObjectMemo.d.ts.map +1 -1
- package/dist/types/hooks/usePreviousValue.d.ts.map +1 -1
- package/dist/types/hooks/useStoredState.d.ts +14 -1
- package/dist/types/hooks/useStoredState.d.ts.map +1 -1
- package/dist/types/index.d.ts +0 -1
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/referentiallyStable/identityFunction.d.ts.map +1 -1
- package/dist/types/referentiallyStable/useReferentiallyStableCallback.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +3 -3
- package/src/context/createContext.ts +9 -0
- package/src/context/{createNonNullableContextFactory.ts → createRequiredContext.ts} +6 -4
- package/src/context/index.ts +2 -2
- package/src/hooks/index.ts +0 -10
- package/src/hooks/useAutoHeightTextArea.ts +1 -1
- package/src/hooks/useStoredState.ts +103 -14
- package/src/index.ts +0 -1
- package/dist/development/context/createNonNullableContextFactory.cjs.map +0 -1
- package/dist/development/context/createNonNullableContextFactory.js.map +0 -1
- package/dist/development/context/createOptionalContextFactory.cjs +0 -13
- package/dist/development/context/createOptionalContextFactory.cjs.map +0 -1
- package/dist/development/context/createOptionalContextFactory.js +0 -13
- package/dist/development/context/createOptionalContextFactory.js.map +0 -1
- package/dist/development/hooks/useAddClassNameDuringResize.cjs +0 -32
- package/dist/development/hooks/useAddClassNameDuringResize.cjs.map +0 -1
- package/dist/development/hooks/useAddClassNameDuringResize.js +0 -32
- package/dist/development/hooks/useAddClassNameDuringResize.js.map +0 -1
- package/dist/development/hooks/useCloseOnClickOutside.cjs +0 -25
- package/dist/development/hooks/useCloseOnClickOutside.cjs.map +0 -1
- package/dist/development/hooks/useCloseOnClickOutside.js +0 -25
- package/dist/development/hooks/useCloseOnClickOutside.js.map +0 -1
- package/dist/development/hooks/useCloseOnEscape.cjs +0 -20
- package/dist/development/hooks/useCloseOnEscape.cjs.map +0 -1
- package/dist/development/hooks/useCloseOnEscape.js +0 -20
- package/dist/development/hooks/useCloseOnEscape.js.map +0 -1
- package/dist/development/hooks/useContainerWidth.cjs +0 -14
- package/dist/development/hooks/useContainerWidth.cjs.map +0 -1
- package/dist/development/hooks/useContainerWidth.js +0 -14
- package/dist/development/hooks/useContainerWidth.js.map +0 -1
- package/dist/development/hooks/useElementSize.cjs +0 -37
- package/dist/development/hooks/useElementSize.cjs.map +0 -1
- package/dist/development/hooks/useElementSize.js +0 -37
- package/dist/development/hooks/useElementSize.js.map +0 -1
- package/dist/development/hooks/useElementTopOffset.cjs +0 -29
- package/dist/development/hooks/useElementTopOffset.cjs.map +0 -1
- package/dist/development/hooks/useElementTopOffset.js +0 -29
- package/dist/development/hooks/useElementTopOffset.js.map +0 -1
- package/dist/development/hooks/useEventHandler.cjs +0 -19
- package/dist/development/hooks/useEventHandler.cjs.map +0 -1
- package/dist/development/hooks/useEventHandler.js +0 -19
- package/dist/development/hooks/useEventHandler.js.map +0 -1
- package/dist/development/hooks/useOnElementMutation.cjs +0 -35
- package/dist/development/hooks/useOnElementMutation.cjs.map +0 -1
- package/dist/development/hooks/useOnElementMutation.js +0 -35
- package/dist/development/hooks/useOnElementMutation.js.map +0 -1
- package/dist/development/hooks/useOnScrollWithin.cjs +0 -52
- package/dist/development/hooks/useOnScrollWithin.cjs.map +0 -1
- package/dist/development/hooks/useOnScrollWithin.js +0 -52
- package/dist/development/hooks/useOnScrollWithin.js.map +0 -1
- package/dist/development/hooks/useScrollOffsets.cjs +0 -67
- package/dist/development/hooks/useScrollOffsets.cjs.map +0 -1
- package/dist/development/hooks/useScrollOffsets.js +0 -67
- package/dist/development/hooks/useScrollOffsets.js.map +0 -1
- package/dist/development/theming/ColorSchemeProvider.cjs +0 -16
- package/dist/development/theming/ColorSchemeProvider.cjs.map +0 -1
- package/dist/development/theming/ColorSchemeProvider.js +0 -16
- package/dist/development/theming/ColorSchemeProvider.js.map +0 -1
- package/dist/development/theming/GlobalClassNamePrefixContext.cjs +0 -6
- package/dist/development/theming/GlobalClassNamePrefixContext.cjs.map +0 -1
- package/dist/development/theming/GlobalClassNamePrefixContext.js +0 -6
- package/dist/development/theming/GlobalClassNamePrefixContext.js.map +0 -1
- package/dist/development/theming/contexts.cjs +0 -12
- package/dist/development/theming/contexts.cjs.map +0 -1
- package/dist/development/theming/contexts.js +0 -12
- package/dist/development/theming/contexts.js.map +0 -1
- package/dist/development/theming/useClassName.cjs +0 -17
- package/dist/development/theming/useClassName.cjs.map +0 -1
- package/dist/development/theming/useClassName.js +0 -17
- package/dist/development/theming/useClassName.js.map +0 -1
- package/dist/development/theming/useClassNameFactory.cjs +0 -22
- package/dist/development/theming/useClassNameFactory.cjs.map +0 -1
- package/dist/development/theming/useClassNameFactory.js +0 -22
- package/dist/development/theming/useClassNameFactory.js.map +0 -1
- package/dist/development/theming/useThemedClassName.cjs +0 -17
- package/dist/development/theming/useThemedClassName.cjs.map +0 -1
- package/dist/development/theming/useThemedClassName.js +0 -17
- package/dist/development/theming/useThemedClassName.js.map +0 -1
- package/dist/development/theming/useThemedClassNameFactory.cjs +0 -29
- package/dist/development/theming/useThemedClassNameFactory.cjs.map +0 -1
- package/dist/development/theming/useThemedClassNameFactory.js +0 -29
- package/dist/development/theming/useThemedClassNameFactory.js.map +0 -1
- package/dist/production/context/createNonNullableContextFactory.cjs.map +0 -1
- package/dist/production/context/createNonNullableContextFactory.js.map +0 -1
- package/dist/production/context/createOptionalContextFactory.cjs +0 -13
- package/dist/production/context/createOptionalContextFactory.cjs.map +0 -1
- package/dist/production/context/createOptionalContextFactory.js +0 -13
- package/dist/production/context/createOptionalContextFactory.js.map +0 -1
- package/dist/production/hooks/useAddClassNameDuringResize.cjs +0 -32
- package/dist/production/hooks/useAddClassNameDuringResize.cjs.map +0 -1
- package/dist/production/hooks/useAddClassNameDuringResize.js +0 -32
- package/dist/production/hooks/useAddClassNameDuringResize.js.map +0 -1
- package/dist/production/hooks/useCloseOnClickOutside.cjs +0 -25
- package/dist/production/hooks/useCloseOnClickOutside.cjs.map +0 -1
- package/dist/production/hooks/useCloseOnClickOutside.js +0 -25
- package/dist/production/hooks/useCloseOnClickOutside.js.map +0 -1
- package/dist/production/hooks/useCloseOnEscape.cjs +0 -20
- package/dist/production/hooks/useCloseOnEscape.cjs.map +0 -1
- package/dist/production/hooks/useCloseOnEscape.js +0 -20
- package/dist/production/hooks/useCloseOnEscape.js.map +0 -1
- package/dist/production/hooks/useContainerWidth.cjs +0 -14
- package/dist/production/hooks/useContainerWidth.cjs.map +0 -1
- package/dist/production/hooks/useContainerWidth.js +0 -14
- package/dist/production/hooks/useContainerWidth.js.map +0 -1
- package/dist/production/hooks/useElementSize.cjs +0 -37
- package/dist/production/hooks/useElementSize.cjs.map +0 -1
- package/dist/production/hooks/useElementSize.js +0 -37
- package/dist/production/hooks/useElementSize.js.map +0 -1
- package/dist/production/hooks/useElementTopOffset.cjs +0 -29
- package/dist/production/hooks/useElementTopOffset.cjs.map +0 -1
- package/dist/production/hooks/useElementTopOffset.js +0 -29
- package/dist/production/hooks/useElementTopOffset.js.map +0 -1
- package/dist/production/hooks/useEventHandler.cjs +0 -19
- package/dist/production/hooks/useEventHandler.cjs.map +0 -1
- package/dist/production/hooks/useEventHandler.js +0 -19
- package/dist/production/hooks/useEventHandler.js.map +0 -1
- package/dist/production/hooks/useOnElementMutation.cjs +0 -35
- package/dist/production/hooks/useOnElementMutation.cjs.map +0 -1
- package/dist/production/hooks/useOnElementMutation.js +0 -35
- package/dist/production/hooks/useOnElementMutation.js.map +0 -1
- package/dist/production/hooks/useOnScrollWithin.cjs +0 -52
- package/dist/production/hooks/useOnScrollWithin.cjs.map +0 -1
- package/dist/production/hooks/useOnScrollWithin.js +0 -52
- package/dist/production/hooks/useOnScrollWithin.js.map +0 -1
- package/dist/production/hooks/useScrollOffsets.cjs +0 -67
- package/dist/production/hooks/useScrollOffsets.cjs.map +0 -1
- package/dist/production/hooks/useScrollOffsets.js +0 -67
- package/dist/production/hooks/useScrollOffsets.js.map +0 -1
- package/dist/production/theming/ColorSchemeProvider.cjs +0 -12
- package/dist/production/theming/ColorSchemeProvider.cjs.map +0 -1
- package/dist/production/theming/ColorSchemeProvider.js +0 -12
- package/dist/production/theming/ColorSchemeProvider.js.map +0 -1
- package/dist/production/theming/GlobalClassNamePrefixContext.cjs +0 -6
- package/dist/production/theming/GlobalClassNamePrefixContext.cjs.map +0 -1
- package/dist/production/theming/GlobalClassNamePrefixContext.js +0 -6
- package/dist/production/theming/GlobalClassNamePrefixContext.js.map +0 -1
- package/dist/production/theming/contexts.cjs +0 -12
- package/dist/production/theming/contexts.cjs.map +0 -1
- package/dist/production/theming/contexts.js +0 -12
- package/dist/production/theming/contexts.js.map +0 -1
- package/dist/production/theming/useClassName.cjs +0 -17
- package/dist/production/theming/useClassName.cjs.map +0 -1
- package/dist/production/theming/useClassName.js +0 -17
- package/dist/production/theming/useClassName.js.map +0 -1
- package/dist/production/theming/useClassNameFactory.cjs +0 -22
- package/dist/production/theming/useClassNameFactory.cjs.map +0 -1
- package/dist/production/theming/useClassNameFactory.js +0 -22
- package/dist/production/theming/useClassNameFactory.js.map +0 -1
- package/dist/production/theming/useThemedClassName.cjs +0 -17
- package/dist/production/theming/useThemedClassName.cjs.map +0 -1
- package/dist/production/theming/useThemedClassName.js +0 -17
- package/dist/production/theming/useThemedClassName.js.map +0 -1
- package/dist/production/theming/useThemedClassNameFactory.cjs +0 -29
- package/dist/production/theming/useThemedClassNameFactory.cjs.map +0 -1
- package/dist/production/theming/useThemedClassNameFactory.js +0 -29
- package/dist/production/theming/useThemedClassNameFactory.js.map +0 -1
- package/dist/types/context/createNonNullableContextFactory.d.ts +0 -3
- package/dist/types/context/createNonNullableContextFactory.d.ts.map +0 -1
- package/dist/types/context/createOptionalContextFactory.d.ts +0 -3
- package/dist/types/context/createOptionalContextFactory.d.ts.map +0 -1
- package/dist/types/hooks/useAddClassNameDuringResize.d.ts +0 -13
- package/dist/types/hooks/useAddClassNameDuringResize.d.ts.map +0 -1
- package/dist/types/hooks/useCloseOnClickOutside.d.ts +0 -7
- package/dist/types/hooks/useCloseOnClickOutside.d.ts.map +0 -1
- package/dist/types/hooks/useCloseOnEscape.d.ts +0 -5
- package/dist/types/hooks/useCloseOnEscape.d.ts.map +0 -1
- package/dist/types/hooks/useContainerWidth.d.ts +0 -4
- package/dist/types/hooks/useContainerWidth.d.ts.map +0 -1
- package/dist/types/hooks/useElementSize.d.ts +0 -16
- package/dist/types/hooks/useElementSize.d.ts.map +0 -1
- package/dist/types/hooks/useElementTopOffset.d.ts +0 -3
- package/dist/types/hooks/useElementTopOffset.d.ts.map +0 -1
- package/dist/types/hooks/useEventHandler.d.ts +0 -10
- package/dist/types/hooks/useEventHandler.d.ts.map +0 -1
- package/dist/types/hooks/useOnElementMutation.d.ts +0 -3
- package/dist/types/hooks/useOnElementMutation.d.ts.map +0 -1
- package/dist/types/hooks/useOnScrollWithin.d.ts +0 -10
- package/dist/types/hooks/useOnScrollWithin.d.ts.map +0 -1
- package/dist/types/hooks/useScrollOffsets.d.ts +0 -14
- package/dist/types/hooks/useScrollOffsets.d.ts.map +0 -1
- package/dist/types/theming/ColorSchemeProvider.d.ts +0 -6
- package/dist/types/theming/ColorSchemeProvider.d.ts.map +0 -1
- package/dist/types/theming/GlobalClassNamePrefixContext.d.ts +0 -2
- package/dist/types/theming/GlobalClassNamePrefixContext.d.ts.map +0 -1
- package/dist/types/theming/contexts.d.ts +0 -12
- package/dist/types/theming/contexts.d.ts.map +0 -1
- package/dist/types/theming/index.d.ts +0 -8
- package/dist/types/theming/index.d.ts.map +0 -1
- package/dist/types/theming/useClassName.d.ts +0 -11
- package/dist/types/theming/useClassName.d.ts.map +0 -1
- package/dist/types/theming/useClassNameFactory.d.ts +0 -17
- package/dist/types/theming/useClassNameFactory.d.ts.map +0 -1
- package/dist/types/theming/useThemedClassName.d.ts +0 -39
- package/dist/types/theming/useThemedClassName.d.ts.map +0 -1
- package/dist/types/theming/useThemedClassNameFactory.d.ts +0 -3
- package/dist/types/theming/useThemedClassNameFactory.d.ts.map +0 -1
- package/src/context/createOptionalContextFactory.ts +0 -13
- package/src/hooks/useAddClassNameDuringResize.ts +0 -56
- package/src/hooks/useCloseOnClickOutside.ts +0 -27
- package/src/hooks/useCloseOnEscape.ts +0 -18
- package/src/hooks/useContainerWidth.ts +0 -13
- package/src/hooks/useElementSize.ts +0 -56
- package/src/hooks/useElementTopOffset.ts +0 -35
- package/src/hooks/useEventHandler.ts +0 -24
- package/src/hooks/useOnElementMutation.ts +0 -42
- package/src/hooks/useOnScrollWithin.ts +0 -68
- package/src/hooks/useScrollOffsets.ts +0 -87
- package/src/theming/ColorSchemeProvider.tsx +0 -16
- package/src/theming/GlobalClassNamePrefixContext.ts +0 -3
- package/src/theming/contexts.ts +0 -18
- package/src/theming/index.ts +0 -7
- package/src/theming/useClassName.ts +0 -28
- package/src/theming/useClassNameFactory.ts +0 -50
- package/src/theming/useThemedClassName.ts +0 -54
- package/src/theming/useThemedClassNameFactory.ts +0 -44
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useCloseOnClickOutside.cjs","sources":["../../../src/hooks/useCloseOnClickOutside.ts"],"sourcesContent":["import { useEffect } from 'react'\n\nexport const useCloseOnClickOutside = ({ isOpen, close, contents, outside }: { isOpen: boolean, close: () => void, contents: (Node | null)[], outside?: HTMLElement | null }) => {\n\tuseEffect(() => {\n\t\tif (isOpen) {\n\t\t\tconst closeOnClickOutside = (event: Event) => {\n\t\t\t\tconst target = event.target\n\t\t\t\tif (\n\t\t\t\t\ttarget instanceof Node &&\n\t\t\t\t\t(!document.body.contains(target) ||\n\t\t\t\t\t\ttarget === document.body ||\n\t\t\t\t\t\tcontents.some(it => it && it.contains(target)))\n\t\t\t\t) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tif (contents.every(it => it === null)) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tclose()\n\t\t\t}\n\t\t\t(outside ?? window).addEventListener('click', closeOnClickOutside)\n\t\t\treturn () => {\n\t\t\t\t(outside ?? window).removeEventListener('click', closeOnClickOutside)\n\t\t\t}\n\t\t}\n\t}, [close, isOpen, contents, outside])\n}\n"],"names":["useEffect"],"mappings":";;;AAEO,MAAM,yBAAyB,CAAC,EAAE,QAAQ,OAAO,UAAU,cAA+G;AAChLA,QAAAA,UAAU,MAAM;AACf,QAAI,QAAQ;AACL,YAAA,sBAAsB,CAAC,UAAiB;AAC7C,cAAM,SAAS,MAAM;AACrB,YACC,kBAAkB,SACjB,CAAC,SAAS,KAAK,SAAS,MAAM,KAC9B,WAAW,SAAS,QACpB,SAAS,KAAK,CAAM,OAAA,MAAM,GAAG,SAAS,MAAM,CAAC,IAC7C;AACD;AAAA,QACD;AACA,YAAI,SAAS,MAAM,CAAM,OAAA,OAAO,IAAI,GAAG;AACtC;AAAA,QACD;AACM;MAAA;AAEP,OAAC,WAAW,QAAQ,iBAAiB,SAAS,mBAAmB;AACjE,aAAO,MAAM;AACZ,SAAC,WAAW,QAAQ,oBAAoB,SAAS,mBAAmB;AAAA,MAAA;AAAA,IAEtE;AAAA,KACE,CAAC,OAAO,QAAQ,UAAU,OAAO,CAAC;AACtC;;"}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { useEffect } from "react";
|
|
2
|
-
const useCloseOnClickOutside = ({ isOpen, close, contents, outside }) => {
|
|
3
|
-
useEffect(() => {
|
|
4
|
-
if (isOpen) {
|
|
5
|
-
const closeOnClickOutside = (event) => {
|
|
6
|
-
const target = event.target;
|
|
7
|
-
if (target instanceof Node && (!document.body.contains(target) || target === document.body || contents.some((it) => it && it.contains(target)))) {
|
|
8
|
-
return;
|
|
9
|
-
}
|
|
10
|
-
if (contents.every((it) => it === null)) {
|
|
11
|
-
return;
|
|
12
|
-
}
|
|
13
|
-
close();
|
|
14
|
-
};
|
|
15
|
-
(outside ?? window).addEventListener("click", closeOnClickOutside);
|
|
16
|
-
return () => {
|
|
17
|
-
(outside ?? window).removeEventListener("click", closeOnClickOutside);
|
|
18
|
-
};
|
|
19
|
-
}
|
|
20
|
-
}, [close, isOpen, contents, outside]);
|
|
21
|
-
};
|
|
22
|
-
export {
|
|
23
|
-
useCloseOnClickOutside
|
|
24
|
-
};
|
|
25
|
-
//# sourceMappingURL=useCloseOnClickOutside.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useCloseOnClickOutside.js","sources":["../../../src/hooks/useCloseOnClickOutside.ts"],"sourcesContent":["import { useEffect } from 'react'\n\nexport const useCloseOnClickOutside = ({ isOpen, close, contents, outside }: { isOpen: boolean, close: () => void, contents: (Node | null)[], outside?: HTMLElement | null }) => {\n\tuseEffect(() => {\n\t\tif (isOpen) {\n\t\t\tconst closeOnClickOutside = (event: Event) => {\n\t\t\t\tconst target = event.target\n\t\t\t\tif (\n\t\t\t\t\ttarget instanceof Node &&\n\t\t\t\t\t(!document.body.contains(target) ||\n\t\t\t\t\t\ttarget === document.body ||\n\t\t\t\t\t\tcontents.some(it => it && it.contains(target)))\n\t\t\t\t) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tif (contents.every(it => it === null)) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tclose()\n\t\t\t}\n\t\t\t(outside ?? window).addEventListener('click', closeOnClickOutside)\n\t\t\treturn () => {\n\t\t\t\t(outside ?? window).removeEventListener('click', closeOnClickOutside)\n\t\t\t}\n\t\t}\n\t}, [close, isOpen, contents, outside])\n}\n"],"names":[],"mappings":";AAEO,MAAM,yBAAyB,CAAC,EAAE,QAAQ,OAAO,UAAU,cAA+G;AAChL,YAAU,MAAM;AACf,QAAI,QAAQ;AACL,YAAA,sBAAsB,CAAC,UAAiB;AAC7C,cAAM,SAAS,MAAM;AACrB,YACC,kBAAkB,SACjB,CAAC,SAAS,KAAK,SAAS,MAAM,KAC9B,WAAW,SAAS,QACpB,SAAS,KAAK,CAAM,OAAA,MAAM,GAAG,SAAS,MAAM,CAAC,IAC7C;AACD;AAAA,QACD;AACA,YAAI,SAAS,MAAM,CAAM,OAAA,OAAO,IAAI,GAAG;AACtC;AAAA,QACD;AACM;MAAA;AAEP,OAAC,WAAW,QAAQ,iBAAiB,SAAS,mBAAmB;AACjE,aAAO,MAAM;AACZ,SAAC,WAAW,QAAQ,oBAAoB,SAAS,mBAAmB;AAAA,MAAA;AAAA,IAEtE;AAAA,KACE,CAAC,OAAO,QAAQ,UAAU,OAAO,CAAC;AACtC;"}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const react = require("react");
|
|
4
|
-
const useCloseOnEscape = ({ isOpen, close }) => {
|
|
5
|
-
react.useEffect(() => {
|
|
6
|
-
if (isOpen) {
|
|
7
|
-
const closeOnEscapeKey = (event) => {
|
|
8
|
-
if (event.key === "Escape") {
|
|
9
|
-
close();
|
|
10
|
-
}
|
|
11
|
-
};
|
|
12
|
-
window.addEventListener("keydown", closeOnEscapeKey);
|
|
13
|
-
return () => {
|
|
14
|
-
window.removeEventListener("keydown", closeOnEscapeKey);
|
|
15
|
-
};
|
|
16
|
-
}
|
|
17
|
-
}, [close, isOpen]);
|
|
18
|
-
};
|
|
19
|
-
exports.useCloseOnEscape = useCloseOnEscape;
|
|
20
|
-
//# sourceMappingURL=useCloseOnEscape.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useCloseOnEscape.cjs","sources":["../../../src/hooks/useCloseOnEscape.ts"],"sourcesContent":["import { useEffect } from 'react'\n\nexport const useCloseOnEscape = ({ isOpen, close }: { isOpen: boolean, close: () => void }) => {\n\tuseEffect(() => {\n\t\tif (isOpen) {\n\t\t\tconst closeOnEscapeKey = (event: KeyboardEvent) => {\n\t\t\t\tif (event.key === 'Escape') {\n\t\t\t\t\tclose()\n\t\t\t\t}\n\t\t\t}\n\t\t\twindow.addEventListener('keydown', closeOnEscapeKey)\n\n\t\t\treturn () => {\n\t\t\t\twindow.removeEventListener('keydown', closeOnEscapeKey)\n\t\t\t}\n\t\t}\n\t}, [close, isOpen])\n}\n"],"names":["useEffect"],"mappings":";;;AAEO,MAAM,mBAAmB,CAAC,EAAE,QAAQ,YAAoD;AAC9FA,QAAAA,UAAU,MAAM;AACf,QAAI,QAAQ;AACL,YAAA,mBAAmB,CAAC,UAAyB;AAC9C,YAAA,MAAM,QAAQ,UAAU;AACrB;QACP;AAAA,MAAA;AAEM,aAAA,iBAAiB,WAAW,gBAAgB;AAEnD,aAAO,MAAM;AACL,eAAA,oBAAoB,WAAW,gBAAgB;AAAA,MAAA;AAAA,IAExD;AAAA,EAAA,GACE,CAAC,OAAO,MAAM,CAAC;AACnB;;"}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { useEffect } from "react";
|
|
2
|
-
const useCloseOnEscape = ({ isOpen, close }) => {
|
|
3
|
-
useEffect(() => {
|
|
4
|
-
if (isOpen) {
|
|
5
|
-
const closeOnEscapeKey = (event) => {
|
|
6
|
-
if (event.key === "Escape") {
|
|
7
|
-
close();
|
|
8
|
-
}
|
|
9
|
-
};
|
|
10
|
-
window.addEventListener("keydown", closeOnEscapeKey);
|
|
11
|
-
return () => {
|
|
12
|
-
window.removeEventListener("keydown", closeOnEscapeKey);
|
|
13
|
-
};
|
|
14
|
-
}
|
|
15
|
-
}, [close, isOpen]);
|
|
16
|
-
};
|
|
17
|
-
export {
|
|
18
|
-
useCloseOnEscape
|
|
19
|
-
};
|
|
20
|
-
//# sourceMappingURL=useCloseOnEscape.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useCloseOnEscape.js","sources":["../../../src/hooks/useCloseOnEscape.ts"],"sourcesContent":["import { useEffect } from 'react'\n\nexport const useCloseOnEscape = ({ isOpen, close }: { isOpen: boolean, close: () => void }) => {\n\tuseEffect(() => {\n\t\tif (isOpen) {\n\t\t\tconst closeOnEscapeKey = (event: KeyboardEvent) => {\n\t\t\t\tif (event.key === 'Escape') {\n\t\t\t\t\tclose()\n\t\t\t\t}\n\t\t\t}\n\t\t\twindow.addEventListener('keydown', closeOnEscapeKey)\n\n\t\t\treturn () => {\n\t\t\t\twindow.removeEventListener('keydown', closeOnEscapeKey)\n\t\t\t}\n\t\t}\n\t}, [close, isOpen])\n}\n"],"names":[],"mappings":";AAEO,MAAM,mBAAmB,CAAC,EAAE,QAAQ,YAAoD;AAC9F,YAAU,MAAM;AACf,QAAI,QAAQ;AACL,YAAA,mBAAmB,CAAC,UAAyB;AAC9C,YAAA,MAAM,QAAQ,UAAU;AACrB;QACP;AAAA,MAAA;AAEM,aAAA,iBAAiB,WAAW,gBAAgB;AAEnD,aAAO,MAAM;AACL,eAAA,oBAAoB,WAAW,gBAAgB;AAAA,MAAA;AAAA,IAExD;AAAA,EAAA,GACE,CAAC,OAAO,MAAM,CAAC;AACnB;"}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const react = require("react");
|
|
4
|
-
const useWindowSize = require("./useWindowSize.cjs");
|
|
5
|
-
const ContainerWidthContext = react.createContext(void 0);
|
|
6
|
-
ContainerWidthContext.displayName = "ContainerWidthContext";
|
|
7
|
-
function useContainerWidth() {
|
|
8
|
-
const maybeContainerWidth = react.useContext(ContainerWidthContext);
|
|
9
|
-
const { width: windowWidth } = useWindowSize.useWindowSize();
|
|
10
|
-
return maybeContainerWidth ?? windowWidth;
|
|
11
|
-
}
|
|
12
|
-
exports.ContainerWidthContext = ContainerWidthContext;
|
|
13
|
-
exports.useContainerWidth = useContainerWidth;
|
|
14
|
-
//# sourceMappingURL=useContainerWidth.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useContainerWidth.cjs","sources":["../../../src/hooks/useContainerWidth.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport { useWindowSize } from './useWindowSize'\n\nexport type ContainerWidthContextType = number\nexport const ContainerWidthContext = createContext<ContainerWidthContextType | null | undefined>(undefined)\nContainerWidthContext.displayName = 'ContainerWidthContext'\n\nexport function useContainerWidth(): number {\n\tconst maybeContainerWidth = useContext(ContainerWidthContext)\n\tconst { width: windowWidth } = useWindowSize()\n\n\treturn maybeContainerWidth ?? windowWidth\n}\n"],"names":["createContext","useContext","useWindowSize"],"mappings":";;;;AAIa,MAAA,wBAAwBA,MAAAA,cAA4D,MAAS;AAC1G,sBAAsB,cAAc;AAE7B,SAAS,oBAA4B;AACrC,QAAA,sBAAsBC,iBAAW,qBAAqB;AAC5D,QAAM,EAAE,OAAO,YAAY,IAAIC,cAAc,cAAA;AAE7C,SAAO,uBAAuB;AAC/B;;;"}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { createContext, useContext } from "react";
|
|
2
|
-
import { useWindowSize } from "./useWindowSize.js";
|
|
3
|
-
const ContainerWidthContext = createContext(void 0);
|
|
4
|
-
ContainerWidthContext.displayName = "ContainerWidthContext";
|
|
5
|
-
function useContainerWidth() {
|
|
6
|
-
const maybeContainerWidth = useContext(ContainerWidthContext);
|
|
7
|
-
const { width: windowWidth } = useWindowSize();
|
|
8
|
-
return maybeContainerWidth ?? windowWidth;
|
|
9
|
-
}
|
|
10
|
-
export {
|
|
11
|
-
ContainerWidthContext,
|
|
12
|
-
useContainerWidth
|
|
13
|
-
};
|
|
14
|
-
//# sourceMappingURL=useContainerWidth.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useContainerWidth.js","sources":["../../../src/hooks/useContainerWidth.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport { useWindowSize } from './useWindowSize'\n\nexport type ContainerWidthContextType = number\nexport const ContainerWidthContext = createContext<ContainerWidthContextType | null | undefined>(undefined)\nContainerWidthContext.displayName = 'ContainerWidthContext'\n\nexport function useContainerWidth(): number {\n\tconst maybeContainerWidth = useContext(ContainerWidthContext)\n\tconst { width: windowWidth } = useWindowSize()\n\n\treturn maybeContainerWidth ?? windowWidth\n}\n"],"names":[],"mappings":";;AAIa,MAAA,wBAAwB,cAA4D,MAAS;AAC1G,sBAAsB,cAAc;AAE7B,SAAS,oBAA4B;AACrC,QAAA,sBAAsB,WAAW,qBAAqB;AAC5D,QAAM,EAAE,OAAO,YAAY,IAAI,cAAc;AAE7C,SAAO,uBAAuB;AAC/B;"}
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const utilities = require("@contember/utilities");
|
|
4
|
-
const react = require("react");
|
|
5
|
-
const unwrapRefValue = require("./unwrapRefValue.cjs");
|
|
6
|
-
const useOnElementResize = require("./useOnElementResize.cjs");
|
|
7
|
-
const Context = require("../debug-context/Context.cjs");
|
|
8
|
-
const useReferentiallyStableCallback = require("../referentiallyStable/useReferentiallyStableCallback.cjs");
|
|
9
|
-
function useElementSize(refOrElement, options = {}, timeout = 300) {
|
|
10
|
-
const { logged } = Context.useScopedConsoleRef("useElementSize").current;
|
|
11
|
-
const { box = "border-box" } = options;
|
|
12
|
-
const getSizeFromResizeObserverEntry = react.useMemo(() => utilities.getSizeFromResizeObserverEntryFactory(box), [box]);
|
|
13
|
-
const [width, setWidth] = react.useState();
|
|
14
|
-
const [height, setHeight] = react.useState();
|
|
15
|
-
logged("dimensions", { width, height });
|
|
16
|
-
const maybeSetNewDimensions = useReferentiallyStableCallback.useReferentiallyStableCallback((dimensions) => {
|
|
17
|
-
if (width !== dimensions.width) {
|
|
18
|
-
setWidth(dimensions.width);
|
|
19
|
-
}
|
|
20
|
-
if (height !== dimensions.height) {
|
|
21
|
-
setHeight(dimensions.height);
|
|
22
|
-
}
|
|
23
|
-
});
|
|
24
|
-
useOnElementResize.useOnElementResize(refOrElement, (entry) => {
|
|
25
|
-
const dimensions = logged("useOnElementResize => entry:dimensions", getSizeFromResizeObserverEntry(entry));
|
|
26
|
-
maybeSetNewDimensions(dimensions);
|
|
27
|
-
}, { box }, timeout);
|
|
28
|
-
react.useLayoutEffect(() => {
|
|
29
|
-
const element = unwrapRefValue.unwrapRefValue(refOrElement);
|
|
30
|
-
if (element) {
|
|
31
|
-
utilities.getElementDimensionsCallback(element, (dimensions) => maybeSetNewDimensions(dimensions));
|
|
32
|
-
}
|
|
33
|
-
});
|
|
34
|
-
return { height, width };
|
|
35
|
-
}
|
|
36
|
-
exports.useElementSize = useElementSize;
|
|
37
|
-
//# sourceMappingURL=useElementSize.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useElementSize.cjs","sources":["../../../src/hooks/useElementSize.ts"],"sourcesContent":["import { getElementDimensionsCallback, getSizeFromResizeObserverEntryFactory } from '@contember/utilities'\nimport { useLayoutEffect, useMemo, useState } from 'react'\nimport { useScopedConsoleRef } from '../debug-context'\nimport { useReferentiallyStableCallback } from '../referentiallyStable'\nimport { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'\nimport { useOnElementResize } from './useOnElementResize'\n\nexport type ElementSize = {\n\theight: number\n\twidth: number\n}\n\n/**\n * Measure HTMLElement\n *\n * @param refOrElement - HTMLElement passed directly or indirectly as RefObject\n * @returns Size vector consisting of width and height properties\n */\nexport function useElementSize(\n\trefOrElement: RefObjectOrElement<HTMLElement>,\n\toptions: ResizeObserverOptions = {},\n\ttimeout: number = 300,\n): { height: number | undefined, width: number | undefined } {\n\tconst { logged } = useScopedConsoleRef('useElementSize').current\n\n\tconst { box = 'border-box' } = options\n\tconst getSizeFromResizeObserverEntry = useMemo(() => getSizeFromResizeObserverEntryFactory(box), [box])\n\n\tconst [width, setWidth] = useState<number | undefined>()\n\tconst [height, setHeight] = useState<number | undefined>()\n\n\tlogged('dimensions', { width, height })\n\n\tconst maybeSetNewDimensions = useReferentiallyStableCallback((dimensions: ElementSize) => {\n\t\tif (width !== dimensions.width) {\n\t\t\tsetWidth(dimensions.width)\n\t\t}\n\t\tif (height !== dimensions.height) {\n\t\t\tsetHeight(dimensions.height)\n\t\t}\n\t})\n\n\tuseOnElementResize(refOrElement, entry => {\n\t\tconst dimensions = logged('useOnElementResize => entry:dimensions', getSizeFromResizeObserverEntry(entry))\n\t\tmaybeSetNewDimensions(dimensions)\n\t}, { box }, timeout)\n\n\tuseLayoutEffect(() => {\n\t\tconst element = unwrapRefValue(refOrElement)\n\t\tif (element) {\n\t\t\tgetElementDimensionsCallback(element, dimensions => maybeSetNewDimensions(dimensions))\n\t\t}\n\t})\n\n\treturn { height, width }\n}\n"],"names":["useScopedConsoleRef","useMemo","getSizeFromResizeObserverEntryFactory","useState","useReferentiallyStableCallback","useOnElementResize","useLayoutEffect","unwrapRefValue","getElementDimensionsCallback"],"mappings":";;;;;;;;AAkBO,SAAS,eACf,cACA,UAAiC,CAAA,GACjC,UAAkB,KAC0C;AAC5D,QAAM,EAAE,OAAW,IAAAA,QAAA,oBAAoB,gBAAgB,EAAE;AAEnD,QAAA,EAAE,MAAM,aAAiB,IAAA;AACzB,QAAA,iCAAiCC,MAAAA,QAAQ,MAAMC,UAAAA,sCAAsC,GAAG,GAAG,CAAC,GAAG,CAAC;AAEtG,QAAM,CAAC,OAAO,QAAQ,IAAIC,MAA6B,SAAA;AACvD,QAAM,CAAC,QAAQ,SAAS,IAAIA,MAA6B,SAAA;AAEzD,SAAO,cAAc,EAAE,OAAO,OAAQ,CAAA;AAEhC,QAAA,wBAAwBC,8DAA+B,CAAC,eAA4B;AACrF,QAAA,UAAU,WAAW,OAAO;AAC/B,eAAS,WAAW,KAAK;AAAA,IAC1B;AACI,QAAA,WAAW,WAAW,QAAQ;AACjC,gBAAU,WAAW,MAAM;AAAA,IAC5B;AAAA,EAAA,CACA;AAEDC,wCAAmB,cAAc,CAAS,UAAA;AACzC,UAAM,aAAa,OAAO,0CAA0C,+BAA+B,KAAK,CAAC;AACzG,0BAAsB,UAAU;AAAA,EAAA,GAC9B,EAAE,OAAO,OAAO;AAEnBC,QAAAA,gBAAgB,MAAM;AACf,UAAA,UAAUC,8BAAe,YAAY;AAC3C,QAAI,SAAS;AACZC,gBAAA,6BAA6B,SAAS,CAAA,eAAc,sBAAsB,UAAU,CAAC;AAAA,IACtF;AAAA,EAAA,CACA;AAEM,SAAA,EAAE,QAAQ;AAClB;;"}
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import { getSizeFromResizeObserverEntryFactory, getElementDimensionsCallback } from "@contember/utilities";
|
|
2
|
-
import { useMemo, useState, useLayoutEffect } from "react";
|
|
3
|
-
import { unwrapRefValue } from "./unwrapRefValue.js";
|
|
4
|
-
import { useOnElementResize } from "./useOnElementResize.js";
|
|
5
|
-
import { useScopedConsoleRef } from "../debug-context/Context.js";
|
|
6
|
-
import { useReferentiallyStableCallback } from "../referentiallyStable/useReferentiallyStableCallback.js";
|
|
7
|
-
function useElementSize(refOrElement, options = {}, timeout = 300) {
|
|
8
|
-
const { logged } = useScopedConsoleRef("useElementSize").current;
|
|
9
|
-
const { box = "border-box" } = options;
|
|
10
|
-
const getSizeFromResizeObserverEntry = useMemo(() => getSizeFromResizeObserverEntryFactory(box), [box]);
|
|
11
|
-
const [width, setWidth] = useState();
|
|
12
|
-
const [height, setHeight] = useState();
|
|
13
|
-
logged("dimensions", { width, height });
|
|
14
|
-
const maybeSetNewDimensions = useReferentiallyStableCallback((dimensions) => {
|
|
15
|
-
if (width !== dimensions.width) {
|
|
16
|
-
setWidth(dimensions.width);
|
|
17
|
-
}
|
|
18
|
-
if (height !== dimensions.height) {
|
|
19
|
-
setHeight(dimensions.height);
|
|
20
|
-
}
|
|
21
|
-
});
|
|
22
|
-
useOnElementResize(refOrElement, (entry) => {
|
|
23
|
-
const dimensions = logged("useOnElementResize => entry:dimensions", getSizeFromResizeObserverEntry(entry));
|
|
24
|
-
maybeSetNewDimensions(dimensions);
|
|
25
|
-
}, { box }, timeout);
|
|
26
|
-
useLayoutEffect(() => {
|
|
27
|
-
const element = unwrapRefValue(refOrElement);
|
|
28
|
-
if (element) {
|
|
29
|
-
getElementDimensionsCallback(element, (dimensions) => maybeSetNewDimensions(dimensions));
|
|
30
|
-
}
|
|
31
|
-
});
|
|
32
|
-
return { height, width };
|
|
33
|
-
}
|
|
34
|
-
export {
|
|
35
|
-
useElementSize
|
|
36
|
-
};
|
|
37
|
-
//# sourceMappingURL=useElementSize.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useElementSize.js","sources":["../../../src/hooks/useElementSize.ts"],"sourcesContent":["import { getElementDimensionsCallback, getSizeFromResizeObserverEntryFactory } from '@contember/utilities'\nimport { useLayoutEffect, useMemo, useState } from 'react'\nimport { useScopedConsoleRef } from '../debug-context'\nimport { useReferentiallyStableCallback } from '../referentiallyStable'\nimport { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'\nimport { useOnElementResize } from './useOnElementResize'\n\nexport type ElementSize = {\n\theight: number\n\twidth: number\n}\n\n/**\n * Measure HTMLElement\n *\n * @param refOrElement - HTMLElement passed directly or indirectly as RefObject\n * @returns Size vector consisting of width and height properties\n */\nexport function useElementSize(\n\trefOrElement: RefObjectOrElement<HTMLElement>,\n\toptions: ResizeObserverOptions = {},\n\ttimeout: number = 300,\n): { height: number | undefined, width: number | undefined } {\n\tconst { logged } = useScopedConsoleRef('useElementSize').current\n\n\tconst { box = 'border-box' } = options\n\tconst getSizeFromResizeObserverEntry = useMemo(() => getSizeFromResizeObserverEntryFactory(box), [box])\n\n\tconst [width, setWidth] = useState<number | undefined>()\n\tconst [height, setHeight] = useState<number | undefined>()\n\n\tlogged('dimensions', { width, height })\n\n\tconst maybeSetNewDimensions = useReferentiallyStableCallback((dimensions: ElementSize) => {\n\t\tif (width !== dimensions.width) {\n\t\t\tsetWidth(dimensions.width)\n\t\t}\n\t\tif (height !== dimensions.height) {\n\t\t\tsetHeight(dimensions.height)\n\t\t}\n\t})\n\n\tuseOnElementResize(refOrElement, entry => {\n\t\tconst dimensions = logged('useOnElementResize => entry:dimensions', getSizeFromResizeObserverEntry(entry))\n\t\tmaybeSetNewDimensions(dimensions)\n\t}, { box }, timeout)\n\n\tuseLayoutEffect(() => {\n\t\tconst element = unwrapRefValue(refOrElement)\n\t\tif (element) {\n\t\t\tgetElementDimensionsCallback(element, dimensions => maybeSetNewDimensions(dimensions))\n\t\t}\n\t})\n\n\treturn { height, width }\n}\n"],"names":[],"mappings":";;;;;;AAkBO,SAAS,eACf,cACA,UAAiC,CAAA,GACjC,UAAkB,KAC0C;AAC5D,QAAM,EAAE,OAAW,IAAA,oBAAoB,gBAAgB,EAAE;AAEnD,QAAA,EAAE,MAAM,aAAiB,IAAA;AACzB,QAAA,iCAAiC,QAAQ,MAAM,sCAAsC,GAAG,GAAG,CAAC,GAAG,CAAC;AAEtG,QAAM,CAAC,OAAO,QAAQ,IAAI,SAA6B;AACvD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA6B;AAEzD,SAAO,cAAc,EAAE,OAAO,OAAQ,CAAA;AAEhC,QAAA,wBAAwB,+BAA+B,CAAC,eAA4B;AACrF,QAAA,UAAU,WAAW,OAAO;AAC/B,eAAS,WAAW,KAAK;AAAA,IAC1B;AACI,QAAA,WAAW,WAAW,QAAQ;AACjC,gBAAU,WAAW,MAAM;AAAA,IAC5B;AAAA,EAAA,CACA;AAED,qBAAmB,cAAc,CAAS,UAAA;AACzC,UAAM,aAAa,OAAO,0CAA0C,+BAA+B,KAAK,CAAC;AACzG,0BAAsB,UAAU;AAAA,EAAA,GAC9B,EAAE,OAAO,OAAO;AAEnB,kBAAgB,MAAM;AACf,UAAA,UAAU,eAAe,YAAY;AAC3C,QAAI,SAAS;AACZ,mCAA6B,SAAS,CAAA,eAAc,sBAAsB,UAAU,CAAC;AAAA,IACtF;AAAA,EAAA,CACA;AAEM,SAAA,EAAE,QAAQ;AAClB;"}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const react = require("react");
|
|
4
|
-
function useElementTopOffset(ref) {
|
|
5
|
-
const [offsetTop, setOffsetTop] = react.useState(void 0);
|
|
6
|
-
react.useLayoutEffect(() => {
|
|
7
|
-
if (!ref?.current) {
|
|
8
|
-
return;
|
|
9
|
-
}
|
|
10
|
-
const element = ref.current;
|
|
11
|
-
function updateTopOffsetCallback() {
|
|
12
|
-
setOffsetTop(element.offsetTop);
|
|
13
|
-
}
|
|
14
|
-
function updateTopOffsetHandler() {
|
|
15
|
-
requestAnimationFrame(updateTopOffsetCallback);
|
|
16
|
-
}
|
|
17
|
-
updateTopOffsetHandler();
|
|
18
|
-
const observer = new ResizeObserver(() => {
|
|
19
|
-
requestAnimationFrame(updateTopOffsetCallback);
|
|
20
|
-
});
|
|
21
|
-
observer.observe(element);
|
|
22
|
-
return () => {
|
|
23
|
-
observer.unobserve(element);
|
|
24
|
-
};
|
|
25
|
-
}, [ref]);
|
|
26
|
-
return offsetTop;
|
|
27
|
-
}
|
|
28
|
-
exports.useElementTopOffset = useElementTopOffset;
|
|
29
|
-
//# sourceMappingURL=useElementTopOffset.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useElementTopOffset.cjs","sources":["../../../src/hooks/useElementTopOffset.ts"],"sourcesContent":["import { RefObject, useLayoutEffect, useState } from 'react'\n\nexport function useElementTopOffset(ref?: RefObject<HTMLElement>): number | undefined {\n\tconst [offsetTop, setOffsetTop] = useState<number | undefined>(undefined)\n\n\tuseLayoutEffect(() => {\n\t\tif (!ref?.current) {\n\t\t\treturn\n\t\t}\n\n\t\tconst element = ref.current\n\n\t\tfunction updateTopOffsetCallback() {\n\t\t\tsetOffsetTop(element.offsetTop)\n\t\t}\n\n\t\tfunction updateTopOffsetHandler() {\n\t\t\trequestAnimationFrame(updateTopOffsetCallback)\n\t\t}\n\n\t\tupdateTopOffsetHandler()\n\n\t\tconst observer = new ResizeObserver(() => {\n\t\t\trequestAnimationFrame(updateTopOffsetCallback)\n\t\t})\n\n\t\tobserver.observe(element)\n\n\t\treturn () => {\n\t\t\tobserver.unobserve(element)\n\t\t}\n\t}, [ref])\n\n\treturn offsetTop\n}\n"],"names":["useState","useLayoutEffect"],"mappings":";;;AAEO,SAAS,oBAAoB,KAAkD;AACrF,QAAM,CAAC,WAAW,YAAY,IAAIA,MAAAA,SAA6B,MAAS;AAExEC,QAAAA,gBAAgB,MAAM;AACjB,QAAA,CAAC,KAAK,SAAS;AAClB;AAAA,IACD;AAEA,UAAM,UAAU,IAAI;AAEpB,aAAS,0BAA0B;AAClC,mBAAa,QAAQ,SAAS;AAAA,IAC/B;AAEA,aAAS,yBAAyB;AACjC,4BAAsB,uBAAuB;AAAA,IAC9C;AAEuB;AAEjB,UAAA,WAAW,IAAI,eAAe,MAAM;AACzC,4BAAsB,uBAAuB;AAAA,IAAA,CAC7C;AAED,aAAS,QAAQ,OAAO;AAExB,WAAO,MAAM;AACZ,eAAS,UAAU,OAAO;AAAA,IAAA;AAAA,EAC3B,GACE,CAAC,GAAG,CAAC;AAED,SAAA;AACR;;"}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { useState, useLayoutEffect } from "react";
|
|
2
|
-
function useElementTopOffset(ref) {
|
|
3
|
-
const [offsetTop, setOffsetTop] = useState(void 0);
|
|
4
|
-
useLayoutEffect(() => {
|
|
5
|
-
if (!ref?.current) {
|
|
6
|
-
return;
|
|
7
|
-
}
|
|
8
|
-
const element = ref.current;
|
|
9
|
-
function updateTopOffsetCallback() {
|
|
10
|
-
setOffsetTop(element.offsetTop);
|
|
11
|
-
}
|
|
12
|
-
function updateTopOffsetHandler() {
|
|
13
|
-
requestAnimationFrame(updateTopOffsetCallback);
|
|
14
|
-
}
|
|
15
|
-
updateTopOffsetHandler();
|
|
16
|
-
const observer = new ResizeObserver(() => {
|
|
17
|
-
requestAnimationFrame(updateTopOffsetCallback);
|
|
18
|
-
});
|
|
19
|
-
observer.observe(element);
|
|
20
|
-
return () => {
|
|
21
|
-
observer.unobserve(element);
|
|
22
|
-
};
|
|
23
|
-
}, [ref]);
|
|
24
|
-
return offsetTop;
|
|
25
|
-
}
|
|
26
|
-
export {
|
|
27
|
-
useElementTopOffset
|
|
28
|
-
};
|
|
29
|
-
//# sourceMappingURL=useElementTopOffset.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useElementTopOffset.js","sources":["../../../src/hooks/useElementTopOffset.ts"],"sourcesContent":["import { RefObject, useLayoutEffect, useState } from 'react'\n\nexport function useElementTopOffset(ref?: RefObject<HTMLElement>): number | undefined {\n\tconst [offsetTop, setOffsetTop] = useState<number | undefined>(undefined)\n\n\tuseLayoutEffect(() => {\n\t\tif (!ref?.current) {\n\t\t\treturn\n\t\t}\n\n\t\tconst element = ref.current\n\n\t\tfunction updateTopOffsetCallback() {\n\t\t\tsetOffsetTop(element.offsetTop)\n\t\t}\n\n\t\tfunction updateTopOffsetHandler() {\n\t\t\trequestAnimationFrame(updateTopOffsetCallback)\n\t\t}\n\n\t\tupdateTopOffsetHandler()\n\n\t\tconst observer = new ResizeObserver(() => {\n\t\t\trequestAnimationFrame(updateTopOffsetCallback)\n\t\t})\n\n\t\tobserver.observe(element)\n\n\t\treturn () => {\n\t\t\tobserver.unobserve(element)\n\t\t}\n\t}, [ref])\n\n\treturn offsetTop\n}\n"],"names":[],"mappings":";AAEO,SAAS,oBAAoB,KAAkD;AACrF,QAAM,CAAC,WAAW,YAAY,IAAI,SAA6B,MAAS;AAExE,kBAAgB,MAAM;AACjB,QAAA,CAAC,KAAK,SAAS;AAClB;AAAA,IACD;AAEA,UAAM,UAAU,IAAI;AAEpB,aAAS,0BAA0B;AAClC,mBAAa,QAAQ,SAAS;AAAA,IAC/B;AAEA,aAAS,yBAAyB;AACjC,4BAAsB,uBAAuB;AAAA,IAC9C;AAEuB;AAEjB,UAAA,WAAW,IAAI,eAAe,MAAM;AACzC,4BAAsB,uBAAuB;AAAA,IAAA,CAC7C;AAED,aAAS,QAAQ,OAAO;AAExB,WAAO,MAAM;AACZ,eAAS,UAAU,OAAO;AAAA,IAAA;AAAA,EAC3B,GACE,CAAC,GAAG,CAAC;AAED,SAAA;AACR;"}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const react = require("react");
|
|
4
|
-
function useEventHandler(type, callback) {
|
|
5
|
-
const callbackRef = react.useRef(callback);
|
|
6
|
-
callbackRef.current = callback;
|
|
7
|
-
const stableHandler = react.useRef(function(event) {
|
|
8
|
-
return callbackRef.current(event);
|
|
9
|
-
}).current;
|
|
10
|
-
react.useEffect(() => {
|
|
11
|
-
return () => {
|
|
12
|
-
callbackRef.current = () => {
|
|
13
|
-
};
|
|
14
|
-
};
|
|
15
|
-
}, []);
|
|
16
|
-
return stableHandler;
|
|
17
|
-
}
|
|
18
|
-
exports.useEventHandler = useEventHandler;
|
|
19
|
-
//# sourceMappingURL=useEventHandler.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useEventHandler.cjs","sources":["../../../src/hooks/useEventHandler.ts"],"sourcesContent":["import { EventHandler, SyntheticEvent, useEffect, useRef } from 'react'\n\n/**\n * Similar to useEvent with inferred type for the event parameter according to event type\n *\n * @param type - String, keyof DocumentEventMap, e.g. 'click', 'keydown',...\n * @param callback - EventHandler\n * @returns Stable reference callback\n */\nexport function useEventHandler<E extends SyntheticEvent<any>>(type: E['type'], callback: EventHandler<E>): EventHandler<E> {\n\tconst callbackRef = useRef(callback); callbackRef.current = callback\n\n\tconst stableHandler = useRef(function (event: any) {\n\t\treturn callbackRef.current(event)\n\t}).current\n\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tcallbackRef.current = () => { }\n\t\t}\n\t}, [])\n\n\treturn stableHandler\n}\n"],"names":["useRef","useEffect"],"mappings":";;;AASgB,SAAA,gBAA+C,MAAiB,UAA4C;AACrH,QAAA,cAAcA,aAAO,QAAQ;AAAG,cAAY,UAAU;AAEtD,QAAA,gBAAgBA,aAAO,SAAU,OAAY;AAC3C,WAAA,YAAY,QAAQ,KAAK;AAAA,EAChC,CAAA,EAAE;AAEHC,QAAAA,UAAU,MAAM;AACf,WAAO,MAAM;AACZ,kBAAY,UAAU,MAAM;AAAA,MAAA;AAAA,IAAE;AAAA,EAEhC,GAAG,CAAE,CAAA;AAEE,SAAA;AACR;;"}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { useRef, useEffect } from "react";
|
|
2
|
-
function useEventHandler(type, callback) {
|
|
3
|
-
const callbackRef = useRef(callback);
|
|
4
|
-
callbackRef.current = callback;
|
|
5
|
-
const stableHandler = useRef(function(event) {
|
|
6
|
-
return callbackRef.current(event);
|
|
7
|
-
}).current;
|
|
8
|
-
useEffect(() => {
|
|
9
|
-
return () => {
|
|
10
|
-
callbackRef.current = () => {
|
|
11
|
-
};
|
|
12
|
-
};
|
|
13
|
-
}, []);
|
|
14
|
-
return stableHandler;
|
|
15
|
-
}
|
|
16
|
-
export {
|
|
17
|
-
useEventHandler
|
|
18
|
-
};
|
|
19
|
-
//# sourceMappingURL=useEventHandler.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useEventHandler.js","sources":["../../../src/hooks/useEventHandler.ts"],"sourcesContent":["import { EventHandler, SyntheticEvent, useEffect, useRef } from 'react'\n\n/**\n * Similar to useEvent with inferred type for the event parameter according to event type\n *\n * @param type - String, keyof DocumentEventMap, e.g. 'click', 'keydown',...\n * @param callback - EventHandler\n * @returns Stable reference callback\n */\nexport function useEventHandler<E extends SyntheticEvent<any>>(type: E['type'], callback: EventHandler<E>): EventHandler<E> {\n\tconst callbackRef = useRef(callback); callbackRef.current = callback\n\n\tconst stableHandler = useRef(function (event: any) {\n\t\treturn callbackRef.current(event)\n\t}).current\n\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tcallbackRef.current = () => { }\n\t\t}\n\t}, [])\n\n\treturn stableHandler\n}\n"],"names":[],"mappings":";AASgB,SAAA,gBAA+C,MAAiB,UAA4C;AACrH,QAAA,cAAc,OAAO,QAAQ;AAAG,cAAY,UAAU;AAEtD,QAAA,gBAAgB,OAAO,SAAU,OAAY;AAC3C,WAAA,YAAY,QAAQ,KAAK;AAAA,EAChC,CAAA,EAAE;AAEH,YAAU,MAAM;AACf,WAAO,MAAM;AACZ,kBAAY,UAAU,MAAM;AAAA,MAAA;AAAA,IAAE;AAAA,EAEhC,GAAG,CAAE,CAAA;AAEE,SAAA;AACR;"}
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const deepEqual = require("fast-deep-equal/es6/index.js");
|
|
4
|
-
const react = require("react");
|
|
5
|
-
const unwrapRefValue = require("./unwrapRefValue.cjs");
|
|
6
|
-
const Context = require("../debug-context/Context.cjs");
|
|
7
|
-
function useOnElementMutation(refOrElement, callback, options = { attributes: true, childList: true, subtree: true }) {
|
|
8
|
-
const scopedConsoleRef = Context.useScopedConsoleRef("useOnElementMutation");
|
|
9
|
-
const callbackRef = react.useRef(callback);
|
|
10
|
-
callbackRef.current = callback;
|
|
11
|
-
const optionsRef = react.useRef(options);
|
|
12
|
-
optionsRef.current = options;
|
|
13
|
-
const [optionsState, setOptionsState] = react.useState(options);
|
|
14
|
-
react.useEffect(() => {
|
|
15
|
-
if (!deepEqual(optionsRef.current, options)) {
|
|
16
|
-
setOptionsState(options);
|
|
17
|
-
}
|
|
18
|
-
}, [options]);
|
|
19
|
-
react.useLayoutEffect(() => {
|
|
20
|
-
const element = unwrapRefValue.unwrapRefValue(refOrElement);
|
|
21
|
-
if (element) {
|
|
22
|
-
let handler = function(mutations, observer2) {
|
|
23
|
-
scopedConsoleRef.current.logged("element.mutations", mutations);
|
|
24
|
-
callbackRef.current(mutations, observer2);
|
|
25
|
-
};
|
|
26
|
-
const observer = new MutationObserver(handler);
|
|
27
|
-
observer.observe(element, optionsState);
|
|
28
|
-
return () => {
|
|
29
|
-
observer.disconnect();
|
|
30
|
-
};
|
|
31
|
-
}
|
|
32
|
-
}, [optionsState, refOrElement, scopedConsoleRef]);
|
|
33
|
-
}
|
|
34
|
-
exports.useOnElementMutation = useOnElementMutation;
|
|
35
|
-
//# sourceMappingURL=useOnElementMutation.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useOnElementMutation.cjs","sources":["../../../src/hooks/useOnElementMutation.ts"],"sourcesContent":["import deepEqual from 'fast-deep-equal/es6/index.js'\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport { useScopedConsoleRef } from '../debug-context'\nimport { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'\n\nexport function useOnElementMutation(\n\trefOrElement: RefObjectOrElement<HTMLElement | undefined>,\n\tcallback: MutationCallback,\n\toptions: MutationObserverInit = { attributes: true, childList: true, subtree: true },\n) {\n\tconst scopedConsoleRef = useScopedConsoleRef('useOnElementMutation')\n\n\tconst callbackRef = useRef(callback); callbackRef.current = callback\n\tconst optionsRef = useRef<MutationObserverInit>(options); optionsRef.current = options\n\n\tconst [optionsState, setOptionsState] = useState<MutationObserverInit>(options)\n\n\tuseEffect(() => {\n\t\tif (!deepEqual(optionsRef.current, options)) {\n\t\t\tsetOptionsState(options)\n\t\t}\n\t}, [options])\n\n\tuseLayoutEffect(() => {\n\t\tconst element = unwrapRefValue(refOrElement)\n\n\t\tif (element) {\n\t\t\tfunction handler(mutations: MutationRecord[], observer: MutationObserver) {\n\t\t\t\tscopedConsoleRef.current.logged('element.mutations', mutations)\n\t\t\t\tcallbackRef.current(mutations, observer)\n\t\t\t}\n\n\t\t\tconst observer = new MutationObserver(handler)\n\n\t\t\tobserver.observe(element, optionsState)\n\n\t\t\treturn () => {\n\t\t\t\tobserver.disconnect()\n\t\t\t}\n\t\t}\n\t}, [optionsState, refOrElement, scopedConsoleRef])\n}\n"],"names":["useScopedConsoleRef","useRef","useState","useEffect","useLayoutEffect","unwrapRefValue","observer"],"mappings":";;;;;;AAKgB,SAAA,qBACf,cACA,UACA,UAAgC,EAAE,YAAY,MAAM,WAAW,MAAM,SAAS,KAAA,GAC7E;AACK,QAAA,mBAAmBA,4BAAoB,sBAAsB;AAE7D,QAAA,cAAcC,aAAO,QAAQ;AAAG,cAAY,UAAU;AACtD,QAAA,aAAaA,aAA6B,OAAO;AAAG,aAAW,UAAU;AAE/E,QAAM,CAAC,cAAc,eAAe,IAAIC,eAA+B,OAAO;AAE9EC,QAAAA,UAAU,MAAM;AACf,QAAI,CAAC,UAAU,WAAW,SAAS,OAAO,GAAG;AAC5C,sBAAgB,OAAO;AAAA,IACxB;AAAA,EAAA,GACE,CAAC,OAAO,CAAC;AAEZC,QAAAA,gBAAgB,MAAM;AACf,UAAA,UAAUC,8BAAe,YAAY;AAE3C,QAAI,SAAS;AACH,UAAA,UAAT,SAAiB,WAA6BC,WAA4B;AACxD,yBAAA,QAAQ,OAAO,qBAAqB,SAAS;AAClD,oBAAA,QAAQ,WAAWA,SAAQ;AAAA,MAAA;AAGlC,YAAA,WAAW,IAAI,iBAAiB,OAAO;AAEpC,eAAA,QAAQ,SAAS,YAAY;AAEtC,aAAO,MAAM;AACZ,iBAAS,WAAW;AAAA,MAAA;AAAA,IAEtB;AAAA,EACE,GAAA,CAAC,cAAc,cAAc,gBAAgB,CAAC;AAClD;;"}
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import deepEqual from "fast-deep-equal/es6/index.js";
|
|
2
|
-
import { useRef, useState, useEffect, useLayoutEffect } from "react";
|
|
3
|
-
import { unwrapRefValue } from "./unwrapRefValue.js";
|
|
4
|
-
import { useScopedConsoleRef } from "../debug-context/Context.js";
|
|
5
|
-
function useOnElementMutation(refOrElement, callback, options = { attributes: true, childList: true, subtree: true }) {
|
|
6
|
-
const scopedConsoleRef = useScopedConsoleRef("useOnElementMutation");
|
|
7
|
-
const callbackRef = useRef(callback);
|
|
8
|
-
callbackRef.current = callback;
|
|
9
|
-
const optionsRef = useRef(options);
|
|
10
|
-
optionsRef.current = options;
|
|
11
|
-
const [optionsState, setOptionsState] = useState(options);
|
|
12
|
-
useEffect(() => {
|
|
13
|
-
if (!deepEqual(optionsRef.current, options)) {
|
|
14
|
-
setOptionsState(options);
|
|
15
|
-
}
|
|
16
|
-
}, [options]);
|
|
17
|
-
useLayoutEffect(() => {
|
|
18
|
-
const element = unwrapRefValue(refOrElement);
|
|
19
|
-
if (element) {
|
|
20
|
-
let handler = function(mutations, observer2) {
|
|
21
|
-
scopedConsoleRef.current.logged("element.mutations", mutations);
|
|
22
|
-
callbackRef.current(mutations, observer2);
|
|
23
|
-
};
|
|
24
|
-
const observer = new MutationObserver(handler);
|
|
25
|
-
observer.observe(element, optionsState);
|
|
26
|
-
return () => {
|
|
27
|
-
observer.disconnect();
|
|
28
|
-
};
|
|
29
|
-
}
|
|
30
|
-
}, [optionsState, refOrElement, scopedConsoleRef]);
|
|
31
|
-
}
|
|
32
|
-
export {
|
|
33
|
-
useOnElementMutation
|
|
34
|
-
};
|
|
35
|
-
//# sourceMappingURL=useOnElementMutation.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useOnElementMutation.js","sources":["../../../src/hooks/useOnElementMutation.ts"],"sourcesContent":["import deepEqual from 'fast-deep-equal/es6/index.js'\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport { useScopedConsoleRef } from '../debug-context'\nimport { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'\n\nexport function useOnElementMutation(\n\trefOrElement: RefObjectOrElement<HTMLElement | undefined>,\n\tcallback: MutationCallback,\n\toptions: MutationObserverInit = { attributes: true, childList: true, subtree: true },\n) {\n\tconst scopedConsoleRef = useScopedConsoleRef('useOnElementMutation')\n\n\tconst callbackRef = useRef(callback); callbackRef.current = callback\n\tconst optionsRef = useRef<MutationObserverInit>(options); optionsRef.current = options\n\n\tconst [optionsState, setOptionsState] = useState<MutationObserverInit>(options)\n\n\tuseEffect(() => {\n\t\tif (!deepEqual(optionsRef.current, options)) {\n\t\t\tsetOptionsState(options)\n\t\t}\n\t}, [options])\n\n\tuseLayoutEffect(() => {\n\t\tconst element = unwrapRefValue(refOrElement)\n\n\t\tif (element) {\n\t\t\tfunction handler(mutations: MutationRecord[], observer: MutationObserver) {\n\t\t\t\tscopedConsoleRef.current.logged('element.mutations', mutations)\n\t\t\t\tcallbackRef.current(mutations, observer)\n\t\t\t}\n\n\t\t\tconst observer = new MutationObserver(handler)\n\n\t\t\tobserver.observe(element, optionsState)\n\n\t\t\treturn () => {\n\t\t\t\tobserver.disconnect()\n\t\t\t}\n\t\t}\n\t}, [optionsState, refOrElement, scopedConsoleRef])\n}\n"],"names":["observer"],"mappings":";;;;AAKgB,SAAA,qBACf,cACA,UACA,UAAgC,EAAE,YAAY,MAAM,WAAW,MAAM,SAAS,KAAA,GAC7E;AACK,QAAA,mBAAmB,oBAAoB,sBAAsB;AAE7D,QAAA,cAAc,OAAO,QAAQ;AAAG,cAAY,UAAU;AACtD,QAAA,aAAa,OAA6B,OAAO;AAAG,aAAW,UAAU;AAE/E,QAAM,CAAC,cAAc,eAAe,IAAI,SAA+B,OAAO;AAE9E,YAAU,MAAM;AACf,QAAI,CAAC,UAAU,WAAW,SAAS,OAAO,GAAG;AAC5C,sBAAgB,OAAO;AAAA,IACxB;AAAA,EAAA,GACE,CAAC,OAAO,CAAC;AAEZ,kBAAgB,MAAM;AACf,UAAA,UAAU,eAAe,YAAY;AAE3C,QAAI,SAAS;AACH,UAAA,UAAT,SAAiB,WAA6BA,WAA4B;AACxD,yBAAA,QAAQ,OAAO,qBAAqB,SAAS;AAClD,oBAAA,QAAQ,WAAWA,SAAQ;AAAA,MAAA;AAGlC,YAAA,WAAW,IAAI,iBAAiB,OAAO;AAEpC,eAAA,QAAQ,SAAS,YAAY;AAEtC,aAAO,MAAM;AACZ,iBAAS,WAAW;AAAA,MAAA;AAAA,IAEtB;AAAA,EACE,GAAA,CAAC,cAAc,cAAc,gBAAgB,CAAC;AAClD;"}
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const react = require("react");
|
|
4
|
-
const unwrapRefValue = require("./unwrapRefValue.cjs");
|
|
5
|
-
const Context = require("../debug-context/Context.cjs");
|
|
6
|
-
function useOnScrollWithin(refOrElement, callback, interval = 1e3 / 60) {
|
|
7
|
-
const scopedConsoleRef = Context.useScopedConsoleRef("useOnScrollWithin");
|
|
8
|
-
const callbackRef = react.useRef(callback);
|
|
9
|
-
callbackRef.current = callback;
|
|
10
|
-
const lastTimeStamp = react.useRef(0);
|
|
11
|
-
react.useLayoutEffect(() => {
|
|
12
|
-
const element = unwrapRefValue.unwrapRefValue(refOrElement);
|
|
13
|
-
let timeoutID = void 0;
|
|
14
|
-
if (element) {
|
|
15
|
-
let debouncedHandler = function(event) {
|
|
16
|
-
clearTimeout(timeoutID);
|
|
17
|
-
const delta = event.timeStamp - lastTimeStamp.current;
|
|
18
|
-
scopedConsoleRef.current.logged("event:element.scroll:delta", delta);
|
|
19
|
-
if (delta > interval) {
|
|
20
|
-
scopedConsoleRef.current.warned("event:element.scroll:immediately", event);
|
|
21
|
-
callbackRef.current(event);
|
|
22
|
-
lastTimeStamp.current = event.timeStamp;
|
|
23
|
-
} else {
|
|
24
|
-
timeoutID = setTimeout(() => {
|
|
25
|
-
scopedConsoleRef.current.warned("event:element.scroll:debounced", event);
|
|
26
|
-
lastTimeStamp.current = event.timeStamp;
|
|
27
|
-
callbackRef.current(event);
|
|
28
|
-
}, interval);
|
|
29
|
-
}
|
|
30
|
-
};
|
|
31
|
-
if (element instanceof HTMLElement) {
|
|
32
|
-
if (element instanceof HTMLBodyElement || element instanceof HTMLHtmlElement) {
|
|
33
|
-
window.addEventListener("scroll", debouncedHandler, { capture: true, passive: true });
|
|
34
|
-
window.addEventListener("resize", debouncedHandler);
|
|
35
|
-
return () => {
|
|
36
|
-
window.removeEventListener("scroll", debouncedHandler);
|
|
37
|
-
window.removeEventListener("resize", debouncedHandler);
|
|
38
|
-
};
|
|
39
|
-
} else {
|
|
40
|
-
element.addEventListener("scroll", debouncedHandler, { passive: true, capture: true });
|
|
41
|
-
return () => {
|
|
42
|
-
element.removeEventListener("scroll", debouncedHandler);
|
|
43
|
-
};
|
|
44
|
-
}
|
|
45
|
-
} else {
|
|
46
|
-
throw new Error("Exhaustive error: Expecting element to be instance of HTMLElement");
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
}, [interval, refOrElement, scopedConsoleRef]);
|
|
50
|
-
}
|
|
51
|
-
exports.useOnScrollWithin = useOnScrollWithin;
|
|
52
|
-
//# sourceMappingURL=useOnScrollWithin.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useOnScrollWithin.cjs","sources":["../../../src/hooks/useOnScrollWithin.ts"],"sourcesContent":["import { useLayoutEffect, useRef } from 'react'\nimport { useScopedConsoleRef } from '../debug-context'\nimport { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'\n\n/**\n * Invokes callback on scroll event within the scroll container\n *\n * @param refOrElement - Scroll container\n * @param callback - Callback that is invoked on scroll event\n * @param interval - Specifies how often should scroll event invoke callback\n */\nexport function useOnScrollWithin(\n\trefOrElement: RefObjectOrElement<HTMLElement | null> | null,\n\tcallback: (event: Event) => void,\n\tinterval: number = 1000 / 60,\n) {\n\tconst scopedConsoleRef = useScopedConsoleRef('useOnScrollWithin')\n\n\tconst callbackRef = useRef(callback); callbackRef.current = callback\n\tconst lastTimeStamp = useRef<number>(0)\n\n\tuseLayoutEffect(() => {\n\t\tconst element = unwrapRefValue(refOrElement)\n\n\t\tlet timeoutID: number | undefined = undefined\n\n\t\tif (element) {\n\t\t\tfunction debouncedHandler(event: Event) {\n\t\t\t\tclearTimeout(timeoutID)\n\n\t\t\t\tconst delta = event.timeStamp - lastTimeStamp.current\n\t\t\t\tscopedConsoleRef.current.logged('event:element.scroll:delta', delta)\n\n\t\t\t\tif (delta > interval) {\n\t\t\t\t\tscopedConsoleRef.current.warned('event:element.scroll:immediately', event)\n\t\t\t\t\tcallbackRef.current(event)\n\t\t\t\t\tlastTimeStamp.current = event.timeStamp\n\t\t\t\t} else {\n\t\t\t\t\ttimeoutID = setTimeout(() => {\n\t\t\t\t\t\tscopedConsoleRef.current.warned('event:element.scroll:debounced', event)\n\t\t\t\t\t\tlastTimeStamp.current = event.timeStamp\n\t\t\t\t\t\tcallbackRef.current(event)\n\t\t\t\t\t}, interval)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (element instanceof HTMLElement) {\n\t\t\t\tif (element instanceof HTMLBodyElement || element instanceof HTMLHtmlElement) {\n\t\t\t\t\twindow.addEventListener('scroll', debouncedHandler, { capture: true, passive: true })\n\t\t\t\t\twindow.addEventListener('resize', debouncedHandler)\n\n\t\t\t\t\treturn () => {\n\t\t\t\t\t\twindow.removeEventListener('scroll', debouncedHandler)\n\t\t\t\t\t\twindow.removeEventListener('resize', debouncedHandler)\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\telement.addEventListener('scroll', debouncedHandler, { passive: true, capture: true })\n\n\t\t\t\t\treturn () => {\n\t\t\t\t\t\telement.removeEventListener('scroll', debouncedHandler)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tthrow new Error('Exhaustive error: Expecting element to be instance of HTMLElement')\n\t\t\t}\n\t\t}\n\t}, [interval, refOrElement, scopedConsoleRef])\n}\n"],"names":["useScopedConsoleRef","useRef","useLayoutEffect","unwrapRefValue"],"mappings":";;;;;AAWO,SAAS,kBACf,cACA,UACA,WAAmB,MAAO,IACzB;AACK,QAAA,mBAAmBA,4BAAoB,mBAAmB;AAE1D,QAAA,cAAcC,aAAO,QAAQ;AAAG,cAAY,UAAU;AACtD,QAAA,gBAAgBA,aAAe,CAAC;AAEtCC,QAAAA,gBAAgB,MAAM;AACf,UAAA,UAAUC,8BAAe,YAAY;AAE3C,QAAI,YAAgC;AAEpC,QAAI,SAAS;AACH,UAAA,mBAAT,SAA0B,OAAc;AACvC,qBAAa,SAAS;AAEhB,cAAA,QAAQ,MAAM,YAAY,cAAc;AAC7B,yBAAA,QAAQ,OAAO,8BAA8B,KAAK;AAEnE,YAAI,QAAQ,UAAU;AACJ,2BAAA,QAAQ,OAAO,oCAAoC,KAAK;AACzE,sBAAY,QAAQ,KAAK;AACzB,wBAAc,UAAU,MAAM;AAAA,QAAA,OACxB;AACN,sBAAY,WAAW,MAAM;AACX,6BAAA,QAAQ,OAAO,kCAAkC,KAAK;AACvE,0BAAc,UAAU,MAAM;AAC9B,wBAAY,QAAQ,KAAK;AAAA,aACvB,QAAQ;AAAA,QACZ;AAAA,MAAA;AAGD,UAAI,mBAAmB,aAAa;AAC/B,YAAA,mBAAmB,mBAAmB,mBAAmB,iBAAiB;AACtE,iBAAA,iBAAiB,UAAU,kBAAkB,EAAE,SAAS,MAAM,SAAS,MAAM;AAC7E,iBAAA,iBAAiB,UAAU,gBAAgB;AAElD,iBAAO,MAAM;AACL,mBAAA,oBAAoB,UAAU,gBAAgB;AAC9C,mBAAA,oBAAoB,UAAU,gBAAgB;AAAA,UAAA;AAAA,QACtD,OACM;AACE,kBAAA,iBAAiB,UAAU,kBAAkB,EAAE,SAAS,MAAM,SAAS,MAAM;AAErF,iBAAO,MAAM;AACJ,oBAAA,oBAAoB,UAAU,gBAAgB;AAAA,UAAA;AAAA,QAExD;AAAA,MAAA,OACM;AACA,cAAA,IAAI,MAAM,mEAAmE;AAAA,MACpF;AAAA,IACD;AAAA,EACE,GAAA,CAAC,UAAU,cAAc,gBAAgB,CAAC;AAC9C;;"}
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import { useRef, useLayoutEffect } from "react";
|
|
2
|
-
import { unwrapRefValue } from "./unwrapRefValue.js";
|
|
3
|
-
import { useScopedConsoleRef } from "../debug-context/Context.js";
|
|
4
|
-
function useOnScrollWithin(refOrElement, callback, interval = 1e3 / 60) {
|
|
5
|
-
const scopedConsoleRef = useScopedConsoleRef("useOnScrollWithin");
|
|
6
|
-
const callbackRef = useRef(callback);
|
|
7
|
-
callbackRef.current = callback;
|
|
8
|
-
const lastTimeStamp = useRef(0);
|
|
9
|
-
useLayoutEffect(() => {
|
|
10
|
-
const element = unwrapRefValue(refOrElement);
|
|
11
|
-
let timeoutID = void 0;
|
|
12
|
-
if (element) {
|
|
13
|
-
let debouncedHandler = function(event) {
|
|
14
|
-
clearTimeout(timeoutID);
|
|
15
|
-
const delta = event.timeStamp - lastTimeStamp.current;
|
|
16
|
-
scopedConsoleRef.current.logged("event:element.scroll:delta", delta);
|
|
17
|
-
if (delta > interval) {
|
|
18
|
-
scopedConsoleRef.current.warned("event:element.scroll:immediately", event);
|
|
19
|
-
callbackRef.current(event);
|
|
20
|
-
lastTimeStamp.current = event.timeStamp;
|
|
21
|
-
} else {
|
|
22
|
-
timeoutID = setTimeout(() => {
|
|
23
|
-
scopedConsoleRef.current.warned("event:element.scroll:debounced", event);
|
|
24
|
-
lastTimeStamp.current = event.timeStamp;
|
|
25
|
-
callbackRef.current(event);
|
|
26
|
-
}, interval);
|
|
27
|
-
}
|
|
28
|
-
};
|
|
29
|
-
if (element instanceof HTMLElement) {
|
|
30
|
-
if (element instanceof HTMLBodyElement || element instanceof HTMLHtmlElement) {
|
|
31
|
-
window.addEventListener("scroll", debouncedHandler, { capture: true, passive: true });
|
|
32
|
-
window.addEventListener("resize", debouncedHandler);
|
|
33
|
-
return () => {
|
|
34
|
-
window.removeEventListener("scroll", debouncedHandler);
|
|
35
|
-
window.removeEventListener("resize", debouncedHandler);
|
|
36
|
-
};
|
|
37
|
-
} else {
|
|
38
|
-
element.addEventListener("scroll", debouncedHandler, { passive: true, capture: true });
|
|
39
|
-
return () => {
|
|
40
|
-
element.removeEventListener("scroll", debouncedHandler);
|
|
41
|
-
};
|
|
42
|
-
}
|
|
43
|
-
} else {
|
|
44
|
-
throw new Error("Exhaustive error: Expecting element to be instance of HTMLElement");
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
}, [interval, refOrElement, scopedConsoleRef]);
|
|
48
|
-
}
|
|
49
|
-
export {
|
|
50
|
-
useOnScrollWithin
|
|
51
|
-
};
|
|
52
|
-
//# sourceMappingURL=useOnScrollWithin.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useOnScrollWithin.js","sources":["../../../src/hooks/useOnScrollWithin.ts"],"sourcesContent":["import { useLayoutEffect, useRef } from 'react'\nimport { useScopedConsoleRef } from '../debug-context'\nimport { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'\n\n/**\n * Invokes callback on scroll event within the scroll container\n *\n * @param refOrElement - Scroll container\n * @param callback - Callback that is invoked on scroll event\n * @param interval - Specifies how often should scroll event invoke callback\n */\nexport function useOnScrollWithin(\n\trefOrElement: RefObjectOrElement<HTMLElement | null> | null,\n\tcallback: (event: Event) => void,\n\tinterval: number = 1000 / 60,\n) {\n\tconst scopedConsoleRef = useScopedConsoleRef('useOnScrollWithin')\n\n\tconst callbackRef = useRef(callback); callbackRef.current = callback\n\tconst lastTimeStamp = useRef<number>(0)\n\n\tuseLayoutEffect(() => {\n\t\tconst element = unwrapRefValue(refOrElement)\n\n\t\tlet timeoutID: number | undefined = undefined\n\n\t\tif (element) {\n\t\t\tfunction debouncedHandler(event: Event) {\n\t\t\t\tclearTimeout(timeoutID)\n\n\t\t\t\tconst delta = event.timeStamp - lastTimeStamp.current\n\t\t\t\tscopedConsoleRef.current.logged('event:element.scroll:delta', delta)\n\n\t\t\t\tif (delta > interval) {\n\t\t\t\t\tscopedConsoleRef.current.warned('event:element.scroll:immediately', event)\n\t\t\t\t\tcallbackRef.current(event)\n\t\t\t\t\tlastTimeStamp.current = event.timeStamp\n\t\t\t\t} else {\n\t\t\t\t\ttimeoutID = setTimeout(() => {\n\t\t\t\t\t\tscopedConsoleRef.current.warned('event:element.scroll:debounced', event)\n\t\t\t\t\t\tlastTimeStamp.current = event.timeStamp\n\t\t\t\t\t\tcallbackRef.current(event)\n\t\t\t\t\t}, interval)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (element instanceof HTMLElement) {\n\t\t\t\tif (element instanceof HTMLBodyElement || element instanceof HTMLHtmlElement) {\n\t\t\t\t\twindow.addEventListener('scroll', debouncedHandler, { capture: true, passive: true })\n\t\t\t\t\twindow.addEventListener('resize', debouncedHandler)\n\n\t\t\t\t\treturn () => {\n\t\t\t\t\t\twindow.removeEventListener('scroll', debouncedHandler)\n\t\t\t\t\t\twindow.removeEventListener('resize', debouncedHandler)\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\telement.addEventListener('scroll', debouncedHandler, { passive: true, capture: true })\n\n\t\t\t\t\treturn () => {\n\t\t\t\t\t\telement.removeEventListener('scroll', debouncedHandler)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tthrow new Error('Exhaustive error: Expecting element to be instance of HTMLElement')\n\t\t\t}\n\t\t}\n\t}, [interval, refOrElement, scopedConsoleRef])\n}\n"],"names":[],"mappings":";;;AAWO,SAAS,kBACf,cACA,UACA,WAAmB,MAAO,IACzB;AACK,QAAA,mBAAmB,oBAAoB,mBAAmB;AAE1D,QAAA,cAAc,OAAO,QAAQ;AAAG,cAAY,UAAU;AACtD,QAAA,gBAAgB,OAAe,CAAC;AAEtC,kBAAgB,MAAM;AACf,UAAA,UAAU,eAAe,YAAY;AAE3C,QAAI,YAAgC;AAEpC,QAAI,SAAS;AACH,UAAA,mBAAT,SAA0B,OAAc;AACvC,qBAAa,SAAS;AAEhB,cAAA,QAAQ,MAAM,YAAY,cAAc;AAC7B,yBAAA,QAAQ,OAAO,8BAA8B,KAAK;AAEnE,YAAI,QAAQ,UAAU;AACJ,2BAAA,QAAQ,OAAO,oCAAoC,KAAK;AACzE,sBAAY,QAAQ,KAAK;AACzB,wBAAc,UAAU,MAAM;AAAA,QAAA,OACxB;AACN,sBAAY,WAAW,MAAM;AACX,6BAAA,QAAQ,OAAO,kCAAkC,KAAK;AACvE,0BAAc,UAAU,MAAM;AAC9B,wBAAY,QAAQ,KAAK;AAAA,aACvB,QAAQ;AAAA,QACZ;AAAA,MAAA;AAGD,UAAI,mBAAmB,aAAa;AAC/B,YAAA,mBAAmB,mBAAmB,mBAAmB,iBAAiB;AACtE,iBAAA,iBAAiB,UAAU,kBAAkB,EAAE,SAAS,MAAM,SAAS,MAAM;AAC7E,iBAAA,iBAAiB,UAAU,gBAAgB;AAElD,iBAAO,MAAM;AACL,mBAAA,oBAAoB,UAAU,gBAAgB;AAC9C,mBAAA,oBAAoB,UAAU,gBAAgB;AAAA,UAAA;AAAA,QACtD,OACM;AACE,kBAAA,iBAAiB,UAAU,kBAAkB,EAAE,SAAS,MAAM,SAAS,MAAM;AAErF,iBAAO,MAAM;AACJ,oBAAA,oBAAoB,UAAU,gBAAgB;AAAA,UAAA;AAAA,QAExD;AAAA,MAAA,OACM;AACA,cAAA,IAAI,MAAM,mEAAmE;AAAA,MACpF;AAAA,IACD;AAAA,EACE,GAAA,CAAC,UAAU,cAAc,gBAAgB,CAAC;AAC9C;"}
|