@siberiacancode/reactuse 0.3.3 → 0.3.5
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/cjs/hooks/useActiveElement/useActiveElement.cjs +1 -1
- package/dist/cjs/hooks/useActiveElement/useActiveElement.cjs.map +1 -1
- package/dist/cjs/hooks/useAutoScroll/useAutoScroll.cjs +1 -1
- package/dist/cjs/hooks/useAutoScroll/useAutoScroll.cjs.map +1 -1
- package/dist/cjs/hooks/useBreakpoints/useBreakpoints.cjs +1 -1
- package/dist/cjs/hooks/useBreakpoints/useBreakpoints.cjs.map +1 -1
- package/dist/cjs/hooks/useClickOutside/useClickOutside.cjs +1 -1
- package/dist/cjs/hooks/useClickOutside/useClickOutside.cjs.map +1 -1
- package/dist/cjs/hooks/useCookie/useCookie.cjs +1 -1
- package/dist/cjs/hooks/useCookie/useCookie.cjs.map +1 -1
- package/dist/cjs/hooks/useCounter/useCounter.cjs +1 -1
- package/dist/cjs/hooks/useCounter/useCounter.cjs.map +1 -1
- package/dist/cjs/hooks/useCssVar/useCssVar.cjs +1 -1
- package/dist/cjs/hooks/useCssVar/useCssVar.cjs.map +1 -1
- package/dist/cjs/hooks/useDeviceMotion/useDeviceMotion.cjs +1 -1
- package/dist/cjs/hooks/useDeviceMotion/useDeviceMotion.cjs.map +1 -1
- package/dist/cjs/hooks/useDisplayMedia/useDisplayMedia.cjs +1 -1
- package/dist/cjs/hooks/useDisplayMedia/useDisplayMedia.cjs.map +1 -1
- package/dist/cjs/hooks/useDoubleClick/useDoubleClick.cjs +1 -1
- package/dist/cjs/hooks/useDoubleClick/useDoubleClick.cjs.map +1 -1
- package/dist/cjs/hooks/useDropZone/useDropZone.cjs +1 -1
- package/dist/cjs/hooks/useDropZone/useDropZone.cjs.map +1 -1
- package/dist/cjs/hooks/useElementSize/useElementSize.cjs +1 -1
- package/dist/cjs/hooks/useElementSize/useElementSize.cjs.map +1 -1
- package/dist/cjs/hooks/useEventListener/useEventListener.cjs +1 -1
- package/dist/cjs/hooks/useEventListener/useEventListener.cjs.map +1 -1
- package/dist/cjs/hooks/useEventSource/useEventSource.cjs +1 -1
- package/dist/cjs/hooks/useEventSource/useEventSource.cjs.map +1 -1
- package/dist/cjs/hooks/useField/useField.cjs +1 -1
- package/dist/cjs/hooks/useField/useField.cjs.map +1 -1
- package/dist/cjs/hooks/useFileDialog/useFileDialog.cjs +1 -1
- package/dist/cjs/hooks/useFileDialog/useFileDialog.cjs.map +1 -1
- package/dist/cjs/hooks/useFocus/useFocus.cjs +1 -1
- package/dist/cjs/hooks/useFocus/useFocus.cjs.map +1 -1
- package/dist/cjs/hooks/useFocusTrap/useFocusTrap.cjs +1 -1
- package/dist/cjs/hooks/useFocusTrap/useFocusTrap.cjs.map +1 -1
- package/dist/cjs/hooks/useFullscreen/useFullscreen.cjs +1 -1
- package/dist/cjs/hooks/useFullscreen/useFullscreen.cjs.map +1 -1
- package/dist/cjs/hooks/useHash/useHash.cjs +1 -1
- package/dist/cjs/hooks/useHash/useHash.cjs.map +1 -1
- package/dist/cjs/hooks/useHotkeys/useHotkeys.cjs +1 -1
- package/dist/cjs/hooks/useHotkeys/useHotkeys.cjs.map +1 -1
- package/dist/cjs/hooks/useHover/useHover.cjs +1 -1
- package/dist/cjs/hooks/useHover/useHover.cjs.map +1 -1
- package/dist/cjs/hooks/useInfiniteScroll/useInfiniteScroll.cjs +1 -1
- package/dist/cjs/hooks/useInfiniteScroll/useInfiniteScroll.cjs.map +1 -1
- package/dist/cjs/hooks/useIntersectionObserver/useIntersectionObserver.cjs +1 -1
- package/dist/cjs/hooks/useIntersectionObserver/useIntersectionObserver.cjs.map +1 -1
- package/dist/cjs/hooks/useInterval/useInterval.cjs +1 -1
- package/dist/cjs/hooks/useInterval/useInterval.cjs.map +1 -1
- package/dist/cjs/hooks/useKeyPress/useKeyPress.cjs +1 -1
- package/dist/cjs/hooks/useKeyPress/useKeyPress.cjs.map +1 -1
- package/dist/cjs/hooks/useKeyPressEvent/useKeyPressEvent.cjs +1 -1
- package/dist/cjs/hooks/useKeyPressEvent/useKeyPressEvent.cjs.map +1 -1
- package/dist/cjs/hooks/useKeyboard/useKeyboard.cjs +1 -1
- package/dist/cjs/hooks/useKeyboard/useKeyboard.cjs.map +1 -1
- package/dist/cjs/hooks/useKeysPressed/useKeysPressed.cjs +1 -1
- package/dist/cjs/hooks/useKeysPressed/useKeysPressed.cjs.map +1 -1
- package/dist/cjs/hooks/useLockScroll/useLockScroll.cjs +1 -1
- package/dist/cjs/hooks/useLockScroll/useLockScroll.cjs.map +1 -1
- package/dist/cjs/hooks/useLongPress/useLongPress.cjs +1 -1
- package/dist/cjs/hooks/useLongPress/useLongPress.cjs.map +1 -1
- package/dist/cjs/hooks/useMeasure/useMeasure.cjs +1 -1
- package/dist/cjs/hooks/useMeasure/useMeasure.cjs.map +1 -1
- package/dist/cjs/hooks/useMediaControls/useMediaControls.cjs +1 -1
- package/dist/cjs/hooks/useMediaControls/useMediaControls.cjs.map +1 -1
- package/dist/cjs/hooks/useMouse/useMouse.cjs +1 -1
- package/dist/cjs/hooks/useMouse/useMouse.cjs.map +1 -1
- package/dist/cjs/hooks/useMutationObserver/useMutationObserver.cjs +1 -1
- package/dist/cjs/hooks/useMutationObserver/useMutationObserver.cjs.map +1 -1
- package/dist/cjs/hooks/useOtpCredential/useOtpCredential.cjs +1 -1
- package/dist/cjs/hooks/useOtpCredential/useOtpCredential.cjs.map +1 -1
- package/dist/cjs/hooks/usePaint/usePaint.cjs +1 -1
- package/dist/cjs/hooks/usePaint/usePaint.cjs.map +1 -1
- package/dist/cjs/hooks/useParallax/useParallax.cjs +1 -1
- package/dist/cjs/hooks/useParallax/useParallax.cjs.map +1 -1
- package/dist/cjs/hooks/usePictureInPicture/usePictureInPicture.cjs +1 -1
- package/dist/cjs/hooks/usePictureInPicture/usePictureInPicture.cjs.map +1 -1
- package/dist/cjs/hooks/useRefState/useRefState.cjs +1 -1
- package/dist/cjs/hooks/useRefState/useRefState.cjs.map +1 -1
- package/dist/cjs/hooks/useResizeObserver/useResizeObserver.cjs +1 -1
- package/dist/cjs/hooks/useResizeObserver/useResizeObserver.cjs.map +1 -1
- package/dist/cjs/hooks/useRightClick/useRightClick.cjs +1 -1
- package/dist/cjs/hooks/useRightClick/useRightClick.cjs.map +1 -1
- package/dist/cjs/hooks/useScroll/useScroll.cjs +1 -1
- package/dist/cjs/hooks/useScroll/useScroll.cjs.map +1 -1
- package/dist/cjs/hooks/useScrollIntoView/useScrollIntoView.cjs +1 -1
- package/dist/cjs/hooks/useScrollIntoView/useScrollIntoView.cjs.map +1 -1
- package/dist/cjs/hooks/useScrollTo/useScrollTo.cjs +1 -1
- package/dist/cjs/hooks/useScrollTo/useScrollTo.cjs.map +1 -1
- package/dist/cjs/hooks/useSpeechRecognition/useSpeechRecognition.cjs +1 -1
- package/dist/cjs/hooks/useSpeechRecognition/useSpeechRecognition.cjs.map +1 -1
- package/dist/cjs/hooks/useSpeechSynthesis/useSpeechSynthesis.cjs +1 -1
- package/dist/cjs/hooks/useSpeechSynthesis/useSpeechSynthesis.cjs.map +1 -1
- package/dist/cjs/hooks/useSticky/useSticky.cjs +1 -1
- package/dist/cjs/hooks/useSticky/useSticky.cjs.map +1 -1
- package/dist/cjs/hooks/useStopwatch/useStopwatch.cjs +1 -1
- package/dist/cjs/hooks/useStopwatch/useStopwatch.cjs.map +1 -1
- package/dist/cjs/hooks/useStorage/useStorage.cjs +1 -1
- package/dist/cjs/hooks/useStorage/useStorage.cjs.map +1 -1
- package/dist/cjs/hooks/useTextDirection/useTextDirection.cjs +1 -1
- package/dist/cjs/hooks/useTextDirection/useTextDirection.cjs.map +1 -1
- package/dist/cjs/hooks/useTextareaAutosize/useTextareaAutosize.cjs +1 -1
- package/dist/cjs/hooks/useTextareaAutosize/useTextareaAutosize.cjs.map +1 -1
- package/dist/cjs/hooks/useTimer/useTimer.cjs +1 -1
- package/dist/cjs/hooks/useTimer/useTimer.cjs.map +1 -1
- package/dist/cjs/hooks/useUrlSearchParam/useUrlSearchParam.cjs +1 -1
- package/dist/cjs/hooks/useUrlSearchParam/useUrlSearchParam.cjs.map +1 -1
- package/dist/cjs/hooks/useUrlSearchParams/useUrlSearchParams.cjs +1 -1
- package/dist/cjs/hooks/useUrlSearchParams/useUrlSearchParams.cjs.map +1 -1
- package/dist/cjs/hooks/useVisibility/useVisibility.cjs +1 -1
- package/dist/cjs/hooks/useVisibility/useVisibility.cjs.map +1 -1
- package/dist/cjs/hooks/useWindowFocus/useWindowFocus.cjs +1 -1
- package/dist/cjs/hooks/useWindowFocus/useWindowFocus.cjs.map +1 -1
- package/dist/cjs/index.cjs +1 -1
- package/dist/cjs/utils/helpers/isTarget.cjs +1 -1
- package/dist/cjs/utils/helpers/isTarget.cjs.map +1 -1
- package/dist/esm/hooks/useActiveElement/useActiveElement.mjs +13 -13
- package/dist/esm/hooks/useActiveElement/useActiveElement.mjs.map +1 -1
- package/dist/esm/hooks/useAutoScroll/useAutoScroll.mjs +24 -24
- package/dist/esm/hooks/useAutoScroll/useAutoScroll.mjs.map +1 -1
- package/dist/esm/hooks/useBreakpoints/useBreakpoints.mjs +30 -35
- package/dist/esm/hooks/useBreakpoints/useBreakpoints.mjs.map +1 -1
- package/dist/esm/hooks/useClickOutside/useClickOutside.mjs +15 -14
- package/dist/esm/hooks/useClickOutside/useClickOutside.mjs.map +1 -1
- package/dist/esm/hooks/useCookie/useCookie.mjs +2 -2
- package/dist/esm/hooks/useCookie/useCookie.mjs.map +1 -1
- package/dist/esm/hooks/useCounter/useCounter.mjs +2 -2
- package/dist/esm/hooks/useCounter/useCounter.mjs.map +1 -1
- package/dist/esm/hooks/useCssVar/useCssVar.mjs +8 -8
- package/dist/esm/hooks/useCssVar/useCssVar.mjs.map +1 -1
- package/dist/esm/hooks/useDeviceMotion/useDeviceMotion.mjs +2 -2
- package/dist/esm/hooks/useDeviceMotion/useDeviceMotion.mjs.map +1 -1
- package/dist/esm/hooks/useDisplayMedia/useDisplayMedia.mjs +17 -17
- package/dist/esm/hooks/useDisplayMedia/useDisplayMedia.mjs.map +1 -1
- package/dist/esm/hooks/useDoubleClick/useDoubleClick.mjs +14 -14
- package/dist/esm/hooks/useDoubleClick/useDoubleClick.mjs.map +1 -1
- package/dist/esm/hooks/useDropZone/useDropZone.mjs +23 -23
- package/dist/esm/hooks/useDropZone/useDropZone.mjs.map +1 -1
- package/dist/esm/hooks/useElementSize/useElementSize.mjs +14 -14
- package/dist/esm/hooks/useElementSize/useElementSize.mjs.map +1 -1
- package/dist/esm/hooks/useEventListener/useEventListener.mjs +14 -14
- package/dist/esm/hooks/useEventListener/useEventListener.mjs.map +1 -1
- package/dist/esm/hooks/useEventSource/useEventSource.mjs +33 -34
- package/dist/esm/hooks/useEventSource/useEventSource.mjs.map +1 -1
- package/dist/esm/hooks/useField/useField.mjs +2 -1
- package/dist/esm/hooks/useField/useField.mjs.map +1 -1
- package/dist/esm/hooks/useFileDialog/useFileDialog.mjs +2 -2
- package/dist/esm/hooks/useFileDialog/useFileDialog.mjs.map +1 -1
- package/dist/esm/hooks/useFocus/useFocus.mjs +20 -20
- package/dist/esm/hooks/useFocus/useFocus.mjs.map +1 -1
- package/dist/esm/hooks/useFocusTrap/useFocusTrap.mjs +21 -21
- package/dist/esm/hooks/useFocusTrap/useFocusTrap.mjs.map +1 -1
- package/dist/esm/hooks/useFullscreen/useFullscreen.mjs +2 -2
- package/dist/esm/hooks/useFullscreen/useFullscreen.mjs.map +1 -1
- package/dist/esm/hooks/useHash/useHash.mjs +2 -2
- package/dist/esm/hooks/useHash/useHash.mjs.map +1 -1
- package/dist/esm/hooks/useHotkeys/useHotkeys.mjs +24 -16
- package/dist/esm/hooks/useHotkeys/useHotkeys.mjs.map +1 -1
- package/dist/esm/hooks/useHover/useHover.mjs +16 -16
- package/dist/esm/hooks/useHover/useHover.mjs.map +1 -1
- package/dist/esm/hooks/useInfiniteScroll/useInfiniteScroll.mjs +16 -16
- package/dist/esm/hooks/useInfiniteScroll/useInfiniteScroll.mjs.map +1 -1
- package/dist/esm/hooks/useIntersectionObserver/useIntersectionObserver.mjs +26 -18
- package/dist/esm/hooks/useIntersectionObserver/useIntersectionObserver.mjs.map +1 -1
- package/dist/esm/hooks/useInterval/useInterval.mjs +2 -2
- package/dist/esm/hooks/useInterval/useInterval.mjs.map +1 -1
- package/dist/esm/hooks/useKeyPress/useKeyPress.mjs +15 -15
- package/dist/esm/hooks/useKeyPress/useKeyPress.mjs.map +1 -1
- package/dist/esm/hooks/useKeyPressEvent/useKeyPressEvent.mjs +22 -15
- package/dist/esm/hooks/useKeyPressEvent/useKeyPressEvent.mjs.map +1 -1
- package/dist/esm/hooks/useKeyboard/useKeyboard.mjs +10 -10
- package/dist/esm/hooks/useKeyboard/useKeyboard.mjs.map +1 -1
- package/dist/esm/hooks/useKeysPressed/useKeysPressed.mjs +12 -12
- package/dist/esm/hooks/useKeysPressed/useKeysPressed.mjs.map +1 -1
- package/dist/esm/hooks/useLockScroll/useLockScroll.mjs +23 -23
- package/dist/esm/hooks/useLockScroll/useLockScroll.mjs.map +1 -1
- package/dist/esm/hooks/useLongPress/useLongPress.mjs +22 -22
- package/dist/esm/hooks/useLongPress/useLongPress.mjs.map +1 -1
- package/dist/esm/hooks/useMeasure/useMeasure.mjs +15 -15
- package/dist/esm/hooks/useMeasure/useMeasure.mjs.map +1 -1
- package/dist/esm/hooks/useMediaControls/useMediaControls.mjs +28 -28
- package/dist/esm/hooks/useMediaControls/useMediaControls.mjs.map +1 -1
- package/dist/esm/hooks/useMouse/useMouse.mjs +17 -17
- package/dist/esm/hooks/useMouse/useMouse.mjs.map +1 -1
- package/dist/esm/hooks/useMutationObserver/useMutationObserver.mjs +17 -16
- package/dist/esm/hooks/useMutationObserver/useMutationObserver.mjs.map +1 -1
- package/dist/esm/hooks/useOtpCredential/useOtpCredential.mjs +2 -2
- package/dist/esm/hooks/useOtpCredential/useOtpCredential.mjs.map +1 -1
- package/dist/esm/hooks/usePaint/usePaint.mjs +31 -31
- package/dist/esm/hooks/usePaint/usePaint.mjs.map +1 -1
- package/dist/esm/hooks/useParallax/useParallax.mjs +24 -23
- package/dist/esm/hooks/useParallax/useParallax.mjs.map +1 -1
- package/dist/esm/hooks/usePictureInPicture/usePictureInPicture.mjs +25 -25
- package/dist/esm/hooks/usePictureInPicture/usePictureInPicture.mjs.map +1 -1
- package/dist/esm/hooks/useRefState/useRefState.mjs +1 -0
- package/dist/esm/hooks/useRefState/useRefState.mjs.map +1 -1
- package/dist/esm/hooks/useResizeObserver/useResizeObserver.mjs +16 -16
- package/dist/esm/hooks/useResizeObserver/useResizeObserver.mjs.map +1 -1
- package/dist/esm/hooks/useRightClick/useRightClick.mjs +14 -14
- package/dist/esm/hooks/useRightClick/useRightClick.mjs.map +1 -1
- package/dist/esm/hooks/useScroll/useScroll.mjs +22 -22
- package/dist/esm/hooks/useScroll/useScroll.mjs.map +1 -1
- package/dist/esm/hooks/useScrollIntoView/useScrollIntoView.mjs +16 -16
- package/dist/esm/hooks/useScrollIntoView/useScrollIntoView.mjs.map +1 -1
- package/dist/esm/hooks/useScrollTo/useScrollTo.mjs +10 -10
- package/dist/esm/hooks/useScrollTo/useScrollTo.mjs.map +1 -1
- package/dist/esm/hooks/useSpeechRecognition/useSpeechRecognition.mjs +20 -21
- package/dist/esm/hooks/useSpeechRecognition/useSpeechRecognition.mjs.map +1 -1
- package/dist/esm/hooks/useSpeechSynthesis/useSpeechSynthesis.mjs +51 -36
- package/dist/esm/hooks/useSpeechSynthesis/useSpeechSynthesis.mjs.map +1 -1
- package/dist/esm/hooks/useSticky/useSticky.mjs +17 -17
- package/dist/esm/hooks/useSticky/useSticky.mjs.map +1 -1
- package/dist/esm/hooks/useStopwatch/useStopwatch.mjs +4 -4
- package/dist/esm/hooks/useStopwatch/useStopwatch.mjs.map +1 -1
- package/dist/esm/hooks/useStorage/useStorage.mjs +40 -37
- package/dist/esm/hooks/useStorage/useStorage.mjs.map +1 -1
- package/dist/esm/hooks/useTextDirection/useTextDirection.mjs +12 -12
- package/dist/esm/hooks/useTextDirection/useTextDirection.mjs.map +1 -1
- package/dist/esm/hooks/useTextareaAutosize/useTextareaAutosize.mjs +20 -20
- package/dist/esm/hooks/useTextareaAutosize/useTextareaAutosize.mjs.map +1 -1
- package/dist/esm/hooks/useTimer/useTimer.mjs +3 -3
- package/dist/esm/hooks/useTimer/useTimer.mjs.map +1 -1
- package/dist/esm/hooks/useUrlSearchParam/useUrlSearchParam.mjs +2 -2
- package/dist/esm/hooks/useUrlSearchParam/useUrlSearchParam.mjs.map +1 -1
- package/dist/esm/hooks/useUrlSearchParams/useUrlSearchParams.mjs +2 -2
- package/dist/esm/hooks/useUrlSearchParams/useUrlSearchParams.mjs.map +1 -1
- package/dist/esm/hooks/useVisibility/useVisibility.mjs +25 -17
- package/dist/esm/hooks/useVisibility/useVisibility.mjs.map +1 -1
- package/dist/esm/hooks/useWindowFocus/useWindowFocus.mjs +1 -1
- package/dist/esm/hooks/useWindowFocus/useWindowFocus.mjs.map +1 -1
- package/dist/esm/index.mjs +98 -96
- package/dist/esm/utils/helpers/isTarget.mjs +10 -8
- package/dist/esm/utils/helpers/isTarget.mjs.map +1 -1
- package/dist/types/hooks/useBreakpoints/useBreakpoints.d.ts +1 -11
- package/dist/types/hooks/useClickOutside/useClickOutside.d.ts +1 -1
- package/dist/types/hooks/useEventSource/useEventSource.d.ts +2 -2
- package/dist/types/hooks/useField/useField.d.ts +3 -0
- package/dist/types/hooks/useHover/useHover.d.ts +6 -6
- package/dist/types/hooks/useRefState/useRefState.d.ts +1 -0
- package/dist/types/hooks/useSpeechSynthesis/useSpeechSynthesis.d.ts +1 -1
- package/dist/types/utils/helpers/isTarget.d.ts +9 -1
- package/package.json +89 -89
|
@@ -1,51 +1,50 @@
|
|
|
1
|
-
import { useState as c, useRef as
|
|
2
|
-
import { getRetry as
|
|
3
|
-
const
|
|
4
|
-
const [C,
|
|
5
|
-
n.current && (
|
|
6
|
-
|
|
1
|
+
import { useState as c, useRef as d, useEffect as L } from "react";
|
|
2
|
+
import { getRetry as g } from "../../utils/helpers/getRetry.mjs";
|
|
3
|
+
const M = (h, y = [], e = {}) => {
|
|
4
|
+
const [C, a] = c(!1), [R, f] = c(!1), [S, i] = c(!1), s = d(e?.retry ? g(e.retry) : 0), [w, E] = c(void 0), [I, m] = c(e?.placeholderData), n = d(void 0), v = e.immediately ?? !0, D = d((r) => m(r.data)), l = () => {
|
|
5
|
+
n.current && (f(!1), a(!1), i(!1), y.forEach(
|
|
6
|
+
(r) => n.current.removeEventListener(r, D.current)
|
|
7
|
+
), n.current.close(), n.current = void 0);
|
|
8
|
+
}, u = () => {
|
|
7
9
|
l();
|
|
8
|
-
const
|
|
10
|
+
const r = new EventSource(h, {
|
|
9
11
|
withCredentials: e.withCredentials ?? !1
|
|
10
12
|
});
|
|
11
|
-
n.current =
|
|
12
|
-
f(!0),
|
|
13
|
-
},
|
|
14
|
-
if (f(!1),
|
|
15
|
-
|
|
16
|
-
const
|
|
17
|
-
if (
|
|
18
|
-
setTimeout(
|
|
13
|
+
n.current = r, a(!0), r.onopen = () => {
|
|
14
|
+
f(!0), a(!1), E(void 0), e?.onOpen?.();
|
|
15
|
+
}, r.onerror = (t) => {
|
|
16
|
+
if (f(!1), a(!1), i(!0), E(t), e?.onError?.(t), s.current > 0) {
|
|
17
|
+
s.current -= 1;
|
|
18
|
+
const o = typeof e?.retryDelay == "function" ? e?.retryDelay(s.current, t) : e?.retryDelay;
|
|
19
|
+
if (o) {
|
|
20
|
+
setTimeout(u, o);
|
|
19
21
|
return;
|
|
20
22
|
}
|
|
23
|
+
return u();
|
|
21
24
|
}
|
|
22
|
-
|
|
23
|
-
},
|
|
24
|
-
const
|
|
25
|
-
|
|
26
|
-
},
|
|
27
|
-
a.addEventListener(r, (t) => {
|
|
28
|
-
i(t.data);
|
|
29
|
-
});
|
|
30
|
-
});
|
|
25
|
+
s.current = e?.retry ? g(e.retry) : 0;
|
|
26
|
+
}, r.onmessage = (t) => {
|
|
27
|
+
const o = e?.select ? e?.select(t.data) : t.data;
|
|
28
|
+
m(o), e?.onMessage?.(t);
|
|
29
|
+
}, y.forEach((t) => r.addEventListener(t, D.current));
|
|
31
30
|
};
|
|
32
|
-
return
|
|
33
|
-
if (
|
|
34
|
-
return
|
|
31
|
+
return L(() => {
|
|
32
|
+
if (v)
|
|
33
|
+
return u(), () => {
|
|
35
34
|
l();
|
|
36
35
|
};
|
|
37
|
-
}, [
|
|
36
|
+
}, [v]), {
|
|
38
37
|
instance: n.current,
|
|
39
|
-
data:
|
|
40
|
-
error:
|
|
38
|
+
data: I,
|
|
39
|
+
error: w,
|
|
41
40
|
isConnecting: C,
|
|
42
|
-
|
|
43
|
-
isError:
|
|
41
|
+
opened: R,
|
|
42
|
+
isError: S,
|
|
44
43
|
close: l,
|
|
45
|
-
open:
|
|
44
|
+
open: u
|
|
46
45
|
};
|
|
47
46
|
};
|
|
48
47
|
export {
|
|
49
|
-
|
|
48
|
+
M as useEventSource
|
|
50
49
|
};
|
|
51
50
|
//# sourceMappingURL=useEventSource.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useEventSource.mjs","sources":["../../../../src/hooks/useEventSource/useEventSource.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport { getRetry } from '@/utils/helpers';\n\n/** The use event source options type */\nexport interface UseEventSourceOptions<QueryData, Data> extends EventSourceInit {\n /** Immediately open the connection when calling this hook */\n immediately?: boolean;\n /* The placeholder data for the hook */\n placeholderData?: (() => Data) | Data;\n /* The retry count of requests */\n retry?: boolean | number;\n /* The retry delay of requests */\n retryDelay?: ((retry: number, event: Event) => number) | number;\n /* The onError function to be invoked */\n onError?: (error: Event) => void;\n /* The onMessage function to be invoked */\n onMessage?: (event: Event & { data?: Data }) => void;\n /* The onOpen function to be invoked */\n onOpen?: () => void;\n /* The select function to be invoked */\n select?: (data: QueryData) => Data;\n}\n\n/** The use event source return type */\ninterface UseEventSourceReturn<Data = any> {\n /** The latest data received via the EventSource */\n data?: Data;\n /** The current error */\n error?: Event;\n /** The instance of the EventSource */\n instance?: EventSource;\n /* The connecting state of the query */\n isConnecting: boolean;\n /* The error state of the query */\n isError: boolean;\n /* The open state of the query */\n
|
|
1
|
+
{"version":3,"file":"useEventSource.mjs","sources":["../../../../src/hooks/useEventSource/useEventSource.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport { getRetry } from '@/utils/helpers';\n\n/** The use event source options type */\nexport interface UseEventSourceOptions<QueryData, Data> extends EventSourceInit {\n /** Immediately open the connection when calling this hook */\n immediately?: boolean;\n /* The placeholder data for the hook */\n placeholderData?: (() => Data) | Data;\n /* The retry count of requests */\n retry?: boolean | number;\n /* The retry delay of requests */\n retryDelay?: ((retry: number, event: Event) => number) | number;\n /* The onError function to be invoked */\n onError?: (error: Event) => void;\n /* The onMessage function to be invoked */\n onMessage?: (event: Event & { data?: Data }) => void;\n /* The onOpen function to be invoked */\n onOpen?: () => void;\n /* The select function to be invoked */\n select?: (data: QueryData) => Data;\n}\n\n/** The use event source return type */\ninterface UseEventSourceReturn<Data = any> {\n /** The latest data received via the EventSource */\n data?: Data;\n /** The current error */\n error?: Event;\n /** The instance of the EventSource */\n instance?: EventSource;\n /* The connecting state of the query */\n isConnecting: boolean;\n /* The error state of the query */\n isError: boolean;\n /* The open state of the query */\n opened: boolean;\n /** Closes the EventSource connection gracefully */\n close: () => void;\n /** Reopen the EventSource connection */\n open: () => void;\n}\n\n/**\n * @name useEventSource\n * @description - Hook that provides a reactive wrapper for event source\n * @category Browser\n * @usage low\n *\n * @browserapi EventSource https://developer.mozilla.org/en-US/docs/Web/API/EventSource\n *\n * @param {string | URL} url The URL of the EventSource\n * @param {string[]} [events=[]] List of events to listen to\n * @param {UseEventSourceOptions} [options={}] Configuration options\n * @returns {UseEventSourceReturn<Data>} The EventSource state and controls\n *\n * @example\n * const { instance, data, connecting, opened, isError, close, open } = useEventSource('url', ['message']);\n */\nexport const useEventSource = <QueryData = any, Data = QueryData>(\n url: string | URL,\n events: string[] = [],\n options: UseEventSourceOptions<QueryData, Data> = {}\n): UseEventSourceReturn<Data> => {\n const [isConnecting, setIsConnecting] = useState(false);\n const [opened, setOpened] = useState(false);\n const [isError, setIsError] = useState(false);\n\n const retryCountRef = useRef(options?.retry ? getRetry(options.retry) : 0);\n const [error, setError] = useState<Event | undefined>(undefined);\n const [data, setData] = useState<Data | undefined>(options?.placeholderData);\n\n const eventSourceRef = useRef<EventSource>(undefined);\n\n const immediately = options.immediately ?? true;\n\n const onEventRef = useRef((event: Event & { data?: Data }) => setData(event.data));\n\n const close = () => {\n if (!eventSourceRef.current) return;\n\n setOpened(false);\n setIsConnecting(false);\n setIsError(false);\n\n events.forEach((eventName) =>\n eventSourceRef.current!.removeEventListener(eventName, onEventRef.current)\n );\n\n eventSourceRef.current.close();\n eventSourceRef.current = undefined;\n };\n\n const open = () => {\n close();\n\n const eventSource = new EventSource(url, {\n withCredentials: options.withCredentials ?? false\n });\n eventSourceRef.current = eventSource;\n\n setIsConnecting(true);\n\n eventSource.onopen = () => {\n setOpened(true);\n setIsConnecting(false);\n setError(undefined);\n options?.onOpen?.();\n };\n\n eventSource.onerror = (event) => {\n setOpened(false);\n setIsConnecting(false);\n setIsError(true);\n setError(event);\n options?.onError?.(event);\n\n if (retryCountRef.current > 0) {\n retryCountRef.current -= 1;\n\n const retryDelay =\n typeof options?.retryDelay === 'function'\n ? options?.retryDelay(retryCountRef.current, event)\n : options?.retryDelay;\n\n if (retryDelay) {\n setTimeout(open, retryDelay);\n return;\n }\n\n return open();\n }\n\n retryCountRef.current = options?.retry ? getRetry(options.retry) : 0;\n };\n\n eventSource.onmessage = (event) => {\n const data = options?.select ? options?.select(event.data) : event.data;\n setData(data);\n options?.onMessage?.(event);\n };\n\n events.forEach((eventName) => eventSource.addEventListener(eventName, onEventRef.current));\n };\n\n useEffect(() => {\n if (!immediately) return;\n\n open();\n return () => {\n close();\n };\n }, [immediately]);\n\n return {\n instance: eventSourceRef.current,\n data,\n error,\n isConnecting,\n opened,\n isError,\n close,\n open\n };\n};\n"],"names":["useEventSource","url","events","options","isConnecting","setIsConnecting","useState","opened","setOpened","isError","setIsError","retryCountRef","useRef","getRetry","error","setError","data","setData","eventSourceRef","immediately","onEventRef","event","close","eventName","open","eventSource","retryDelay","useEffect"],"mappings":";;AA4DO,MAAMA,IAAiB,CAC5BC,GACAC,IAAmB,CAAA,GACnBC,IAAkD,CAAA,MACnB;AAC/B,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAS,EAAK,GAChD,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK,GACpC,CAACG,GAASC,CAAU,IAAIJ,EAAS,EAAK,GAEtCK,IAAgBC,EAAOT,GAAS,QAAQU,EAASV,EAAQ,KAAK,IAAI,CAAC,GACnE,CAACW,GAAOC,CAAQ,IAAIT,EAA4B,MAAS,GACzD,CAACU,GAAMC,CAAO,IAAIX,EAA2BH,GAAS,eAAe,GAErEe,IAAiBN,EAAoB,MAAS,GAE9CO,IAAchB,EAAQ,eAAe,IAErCiB,IAAaR,EAAO,CAACS,MAAmCJ,EAAQI,EAAM,IAAI,CAAC,GAE3EC,IAAQ,MAAM;AAClB,IAAKJ,EAAe,YAEpBV,EAAU,EAAK,GACfH,EAAgB,EAAK,GACrBK,EAAW,EAAK,GAEhBR,EAAO;AAAA,MAAQ,CAACqB,MACdL,EAAe,QAAS,oBAAoBK,GAAWH,EAAW,OAAO;AAAA,IAAA,GAG3EF,EAAe,QAAQ,MAAA,GACvBA,EAAe,UAAU;AAAA,EAAA,GAGrBM,IAAO,MAAM;AACjB,IAAAF,EAAA;AAEA,UAAMG,IAAc,IAAI,YAAYxB,GAAK;AAAA,MACvC,iBAAiBE,EAAQ,mBAAmB;AAAA,IAAA,CAC7C;AACD,IAAAe,EAAe,UAAUO,GAEzBpB,EAAgB,EAAI,GAEpBoB,EAAY,SAAS,MAAM;AACzB,MAAAjB,EAAU,EAAI,GACdH,EAAgB,EAAK,GACrBU,EAAS,MAAS,GAClBZ,GAAS,SAAA;AAAA,IAAS,GAGpBsB,EAAY,UAAU,CAACJ,MAAU;AAO/B,UANAb,EAAU,EAAK,GACfH,EAAgB,EAAK,GACrBK,EAAW,EAAI,GACfK,EAASM,CAAK,GACdlB,GAAS,UAAUkB,CAAK,GAEpBV,EAAc,UAAU,GAAG;AAC7B,QAAAA,EAAc,WAAW;AAEzB,cAAMe,IACJ,OAAOvB,GAAS,cAAe,aAC3BA,GAAS,WAAWQ,EAAc,SAASU,CAAK,IAChDlB,GAAS;AAEf,YAAIuB,GAAY;AACd,qBAAWF,GAAME,CAAU;AAC3B;AAAA,QAAA;AAGF,eAAOF,EAAA;AAAA,MAAK;AAGd,MAAAb,EAAc,UAAUR,GAAS,QAAQU,EAASV,EAAQ,KAAK,IAAI;AAAA,IAAA,GAGrEsB,EAAY,YAAY,CAACJ,MAAU;AACjC,YAAML,IAAOb,GAAS,SAASA,GAAS,OAAOkB,EAAM,IAAI,IAAIA,EAAM;AACnE,MAAAJ,EAAQD,CAAI,GACZb,GAAS,YAAYkB,CAAK;AAAA,IAAA,GAG5BnB,EAAO,QAAQ,CAACqB,MAAcE,EAAY,iBAAiBF,GAAWH,EAAW,OAAO,CAAC;AAAA,EAAA;AAG3F,SAAAO,EAAU,MAAM;AACd,QAAKR;AAEL,aAAAK,EAAA,GACO,MAAM;AACX,QAAAF,EAAA;AAAA,MAAM;AAAA,EACR,GACC,CAACH,CAAW,CAAC,GAET;AAAA,IACL,UAAUD,EAAe;AAAA,IACzB,MAAAF;AAAA,IACA,OAAAF;AAAA,IACA,cAAAV;AAAA,IACA,QAAAG;AAAA,IACA,SAAAE;AAAA,IACA,OAAAa;AAAA,IACA,MAAAE;AAAA,EAAA;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useField.mjs","sources":["../../../../src/hooks/useField/useField.ts"],"sourcesContent":["import { useRef, useState } from 'react';\n\nimport { useRerender } from '../useRerender/useRerender';\n\n/** The use field params type */\nexport interface UseFieldParams<Value> {\n /** The auto focus */\n autoFocus?: boolean;\n /** The initial touched */\n initialTouched?: boolean;\n /** The initial value */\n initialValue?: Value;\n /** The validate on blur */\n validateOnBlur?: boolean;\n /** The validate on mount */\n validateOnChange?: boolean;\n /** The validate on mount */\n validateOnMount?: boolean;\n}\n\n/** The use field register params type */\nexport interface UseFieldRegisterParams {\n /** The required validation */\n required?: string;\n /** The custom validation */\n validate?: (value: string) => Promise<string | true>;\n /** The min value validation */\n max?: {\n value: number;\n message: string;\n };\n /** The max length validation */\n maxLength?: {\n value: number;\n message: string;\n };\n /** The max value validation */\n min?: {\n value: number;\n message: string;\n };\n /** The min length validation */\n minLength?: {\n value: number;\n message: string;\n };\n /** The pattern validation */\n pattern?: {\n value: RegExp;\n message: string;\n };\n}\n\n/** The use field return type */\nexport interface UseFieldReturn<Value> {\n /** The dirty state */\n dirty: boolean;\n /** The error state */\n error?: string;\n /** The set error function */\n touched: boolean;\n /** The set error function */\n clearError: () => void;\n /** The focus function */\n focus: () => void;\n /** The get value function */\n getValue: () => Value;\n /** The register function */\n register: (params?: UseFieldRegisterParams) => {\n onBlur: () => void;\n onChange: () => void;\n ref: (\n node: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null | undefined\n ) => void;\n };\n /** The reset function */\n reset: () => void;\n /** The set error function */\n setError: (error: string) => void;\n /** The set value function */\n setValue: (value: Value) => void;\n /** The watch function */\n watch: () => Value;\n}\n\n/**\n * @name useField\n * @description - Hook to manage a form field\n * @category State\n * @usage medium\n *\n * @template Value The input value\n * @template Type The input value type\n * @param {Value} [params.initialValue] Initial value\n * @param {boolean} [params.initialTouched=false] Initial touched state\n * @param {boolean} [params.autoFocus=false] Auto focus\n * @param {boolean} [params.validateOnChange=false] Validate on change\n * @param {boolean} [params.validateOnBlur=false] Validate on blur\n * @param {boolean} [params.validateOnMount=false] Validate on mount\n * @returns {UseFieldReturn<Value>} An object containing input information\n *\n * @example\n * const { register, getValue, setValue, reset, dirty, error, setError, clearError, touched, focus, watch } = useField();\n */\nexport const useField = <\n Value extends boolean | number | string = string,\n Type = Value extends string ? string : Value extends boolean ? boolean : number\n>(\n params?: UseFieldParams<Value>\n): UseFieldReturn<Type> => {\n const initialValue = (params?.initialValue ?? '') as Value;\n\n const inputRef = useRef<HTMLInputElement | null>(null);\n const watchingRef = useRef(false);\n const rerender = useRerender();\n\n const [dirty, setDirty] = useState(false);\n const [touched, setTouched] = useState(params?.initialTouched ?? false);\n const [error, setError] = useState<string | undefined>(undefined);\n\n const getValue = () => {\n if (inputRef.current?.type === 'radio' || inputRef.current?.type === 'checkbox')\n return inputRef.current.checked as Type;\n return (inputRef.current?.value ?? initialValue) as Type;\n };\n\n const setValue = (value: Type) => {\n if (inputRef.current?.type === 'radio' || inputRef.current?.type === 'checkbox') {\n inputRef.current.checked = value as boolean;\n if (watchingRef.current) return rerender();\n return;\n }\n\n inputRef.current!.value = value as string;\n if (watchingRef.current) return rerender();\n };\n\n const reset = () => {\n setValue(initialValue as unknown as Type);\n setDirty(false);\n setTouched(false);\n setError(undefined);\n };\n\n const focus = () => inputRef.current!.focus();\n\n const validate = (params: UseFieldRegisterParams) => {\n if (params.required && !inputRef.current!.value) {\n return setError(params.required);\n }\n\n if (params.minLength && inputRef.current!.value.length < params.minLength.value) {\n return setError(params.minLength.message);\n }\n\n if (params.maxLength && inputRef.current!.value.length > params.maxLength.value) {\n return setError(params.maxLength.message);\n }\n\n if (params.min && Number(inputRef.current!.value) < params.min.value) {\n return setError(params.min.message);\n }\n\n if (params.max && Number(inputRef.current!.value) > params.max.value) {\n return setError(params.max.message);\n }\n\n if (params.pattern && !params.pattern.value.test(inputRef.current!.value)) {\n return setError(params.pattern.message);\n }\n\n if (params.validate) {\n const error = params.validate(inputRef.current!.value);\n if (typeof error === 'string') return setError(error);\n }\n\n setError(undefined);\n };\n\n const register = (registerParams?: UseFieldRegisterParams) => ({\n ref: (node: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null | undefined) => {\n if (!inputRef.current && node) {\n if (params?.autoFocus) node.focus();\n inputRef.current = node as HTMLInputElement;\n if (inputRef.current.type === 'radio') {\n inputRef.current.defaultChecked = params?.initialValue === node.value;\n return;\n }\n if (inputRef.current.type === 'checkbox') {\n inputRef.current.defaultChecked = !!params?.initialValue;\n return;\n }\n inputRef.current.defaultValue = String(initialValue);\n\n if (registerParams && params?.validateOnMount) validate(registerParams);\n }\n },\n onChange: async () => {\n if (watchingRef.current) return rerender();\n if (inputRef.current!.value !== initialValue) setDirty(true);\n if (dirty && inputRef.current!.value === initialValue) setDirty(false);\n if (registerParams && params?.validateOnChange) await validate(registerParams);\n if (registerParams && params?.validateOnBlur) setError(undefined);\n },\n onBlur: async () => {\n if (registerParams && params?.validateOnBlur) await validate(registerParams);\n setTouched(true);\n }\n });\n\n const watch = () => {\n watchingRef.current = true;\n return getValue();\n };\n\n const clearError = () => setError(undefined);\n\n return {\n register,\n dirty,\n touched,\n error,\n setError,\n clearError,\n getValue,\n setValue,\n reset,\n watch,\n focus\n };\n};\n"],"names":["useField","params","initialValue","inputRef","useRef","watchingRef","rerender","useRerender","dirty","setDirty","useState","touched","setTouched","error","setError","getValue","setValue","value","reset","focus","validate","registerParams","node"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useField.mjs","sources":["../../../../src/hooks/useField/useField.ts"],"sourcesContent":["import type { RefObject } from 'react';\n\nimport { useRef, useState } from 'react';\n\nimport { useRerender } from '../useRerender/useRerender';\n\n/** The use field params type */\nexport interface UseFieldParams<Value> {\n /** The auto focus */\n autoFocus?: boolean;\n /** The initial touched */\n initialTouched?: boolean;\n /** The initial value */\n initialValue?: Value;\n /** The validate on blur */\n validateOnBlur?: boolean;\n /** The validate on mount */\n validateOnChange?: boolean;\n /** The validate on mount */\n validateOnMount?: boolean;\n}\n\n/** The use field register params type */\nexport interface UseFieldRegisterParams {\n /** The required validation */\n required?: string;\n /** The custom validation */\n validate?: (value: string) => Promise<string | true>;\n /** The min value validation */\n max?: {\n value: number;\n message: string;\n };\n /** The max length validation */\n maxLength?: {\n value: number;\n message: string;\n };\n /** The max value validation */\n min?: {\n value: number;\n message: string;\n };\n /** The min length validation */\n minLength?: {\n value: number;\n message: string;\n };\n /** The pattern validation */\n pattern?: {\n value: RegExp;\n message: string;\n };\n}\n\n/** The use field return type */\nexport interface UseFieldReturn<Value> {\n /** The dirty state */\n dirty: boolean;\n /** The error state */\n error?: string;\n /** The input ref */\n ref: RefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null>;\n /** The set error function */\n touched: boolean;\n /** The set error function */\n clearError: () => void;\n /** The focus function */\n focus: () => void;\n /** The get value function */\n getValue: () => Value;\n /** The register function */\n register: (params?: UseFieldRegisterParams) => {\n onBlur: () => void;\n onChange: () => void;\n ref: (\n node: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null | undefined\n ) => void;\n };\n /** The reset function */\n reset: () => void;\n /** The set error function */\n setError: (error: string) => void;\n /** The set value function */\n setValue: (value: Value) => void;\n /** The watch function */\n watch: () => Value;\n}\n\n/**\n * @name useField\n * @description - Hook to manage a form field\n * @category State\n * @usage medium\n *\n * @template Value The input value\n * @template Type The input value type\n * @param {Value} [params.initialValue] Initial value\n * @param {boolean} [params.initialTouched=false] Initial touched state\n * @param {boolean} [params.autoFocus=false] Auto focus\n * @param {boolean} [params.validateOnChange=false] Validate on change\n * @param {boolean} [params.validateOnBlur=false] Validate on blur\n * @param {boolean} [params.validateOnMount=false] Validate on mount\n * @returns {UseFieldReturn<Value>} An object containing input information\n *\n * @example\n * const { register, getValue, setValue, reset, dirty, error, setError, clearError, touched, focus, watch } = useField();\n */\nexport const useField = <\n Value extends boolean | number | string = string,\n Type = Value extends string ? string : Value extends boolean ? boolean : number\n>(\n params?: UseFieldParams<Value>\n): UseFieldReturn<Type> => {\n const initialValue = (params?.initialValue ?? '') as Value;\n\n const inputRef = useRef<HTMLInputElement | null>(null);\n const watchingRef = useRef(false);\n const rerender = useRerender();\n\n const [dirty, setDirty] = useState(false);\n const [touched, setTouched] = useState(params?.initialTouched ?? false);\n const [error, setError] = useState<string | undefined>(undefined);\n\n const getValue = () => {\n if (inputRef.current?.type === 'radio' || inputRef.current?.type === 'checkbox')\n return inputRef.current.checked as Type;\n return (inputRef.current?.value ?? initialValue) as Type;\n };\n\n const setValue = (value: Type) => {\n if (inputRef.current?.type === 'radio' || inputRef.current?.type === 'checkbox') {\n inputRef.current.checked = value as boolean;\n if (watchingRef.current) return rerender();\n return;\n }\n\n inputRef.current!.value = value as string;\n if (watchingRef.current) return rerender();\n };\n\n const reset = () => {\n setValue(initialValue as unknown as Type);\n setDirty(false);\n setTouched(false);\n setError(undefined);\n };\n\n const focus = () => inputRef.current!.focus();\n\n const validate = (params: UseFieldRegisterParams) => {\n if (params.required && !inputRef.current!.value) {\n return setError(params.required);\n }\n\n if (params.minLength && inputRef.current!.value.length < params.minLength.value) {\n return setError(params.minLength.message);\n }\n\n if (params.maxLength && inputRef.current!.value.length > params.maxLength.value) {\n return setError(params.maxLength.message);\n }\n\n if (params.min && Number(inputRef.current!.value) < params.min.value) {\n return setError(params.min.message);\n }\n\n if (params.max && Number(inputRef.current!.value) > params.max.value) {\n return setError(params.max.message);\n }\n\n if (params.pattern && !params.pattern.value.test(inputRef.current!.value)) {\n return setError(params.pattern.message);\n }\n\n if (params.validate) {\n const error = params.validate(inputRef.current!.value);\n if (typeof error === 'string') return setError(error);\n }\n\n setError(undefined);\n };\n\n const register = (registerParams?: UseFieldRegisterParams) => ({\n ref: (node: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null | undefined) => {\n if (!inputRef.current && node) {\n if (params?.autoFocus) node.focus();\n inputRef.current = node as HTMLInputElement;\n if (inputRef.current.type === 'radio') {\n inputRef.current.defaultChecked = params?.initialValue === node.value;\n return;\n }\n if (inputRef.current.type === 'checkbox') {\n inputRef.current.defaultChecked = !!params?.initialValue;\n return;\n }\n inputRef.current.defaultValue = String(initialValue);\n\n if (registerParams && params?.validateOnMount) validate(registerParams);\n }\n },\n onChange: async () => {\n if (watchingRef.current) return rerender();\n if (inputRef.current!.value !== initialValue) setDirty(true);\n if (dirty && inputRef.current!.value === initialValue) setDirty(false);\n if (registerParams && params?.validateOnChange) await validate(registerParams);\n if (registerParams && params?.validateOnBlur) setError(undefined);\n },\n onBlur: async () => {\n if (registerParams && params?.validateOnBlur) await validate(registerParams);\n setTouched(true);\n }\n });\n\n const watch = () => {\n watchingRef.current = true;\n return getValue();\n };\n\n const clearError = () => setError(undefined);\n\n return {\n register,\n dirty,\n touched,\n error,\n setError,\n clearError,\n getValue,\n setValue,\n reset,\n watch,\n focus,\n ref: inputRef\n };\n};\n"],"names":["useField","params","initialValue","inputRef","useRef","watchingRef","rerender","useRerender","dirty","setDirty","useState","touched","setTouched","error","setError","getValue","setValue","value","reset","focus","validate","registerParams","node"],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@ const i = {
|
|
|
3
3
|
multiple: !0,
|
|
4
4
|
accept: "*",
|
|
5
5
|
reset: !1
|
|
6
|
-
}, R = (...r) => {
|
|
6
|
+
}, R = ((...r) => {
|
|
7
7
|
const u = typeof r[0] == "function" ? r[0] : void 0, n = u ? r[0] : r[1], [a, o] = g(null), e = f(null), l = f(u);
|
|
8
8
|
l.current = u;
|
|
9
9
|
const s = () => {
|
|
@@ -26,7 +26,7 @@ const i = {
|
|
|
26
26
|
e.current && e.current.remove();
|
|
27
27
|
};
|
|
28
28
|
}, []), { value: a, open: m, reset: s };
|
|
29
|
-
};
|
|
29
|
+
});
|
|
30
30
|
export {
|
|
31
31
|
R as useFileDialog
|
|
32
32
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFileDialog.mjs","sources":["../../../../src/hooks/useFileDialog/useFileDialog.ts"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { useEffect, useRef, useState } from 'react';\n\n/* The use file dialog options */\nexport interface UseFileDialogOptions extends Pick<ComponentProps<'input'>, 'accept' | 'multiple'> {\n /** The capture value */\n capture?: string;\n /** The reset value */\n reset?: boolean;\n}\n\nconst DEFAULT_OPTIONS = {\n multiple: true,\n accept: '*',\n reset: false\n} satisfies UseFileDialogOptions;\n\n/* The use file dialog return type */\nexport interface UseFileDialogReturn {\n /** The selected files */\n value: FileList | null;\n /** The open function */\n open: (openParams?: UseFileDialogOptions) => void;\n /** The reset function */\n reset: () => void;\n}\n\nexport interface UseFileDialog {\n (\n callback?: (value: FileList | null) => void,\n options?: UseFileDialogOptions\n ): UseFileDialogReturn;\n\n (options?: UseFileDialogOptions, callback?: never): UseFileDialogReturn;\n}\n\n/**\n * @name useFileDialog\n * @description - Hook to handle file input\n * @category Elements\n * @usage low\n *\n * @overload\n * @param {(value: FileList | null) => void} callback The callback to execute when a file is selected\n * @param {boolean} [options.multiple=true] Whether multiple files can be selected\n * @param {string} [options.accept='*'] The accepted file types\n * @param {boolean} [options.reset=false] Whether the input should be reset when the callback is called\n * @param {string} [options.capture] The capture value\n * @returns {UseFileDialogReturn} An object containing the selected files\n *\n * @example\n * const { values, open, reset } = useFileDialog((value) => console.log(value));\n *\n * @overload\n * @param {boolean} [options.multiple=true] Whether multiple files can be selected\n * @param {string} [options.accept='*'] The accepted file types\n * @param {boolean} [options.reset=false] Whether the input should be reset when the callback is called\n * @param {string} [options.capture] The capture value\n * @returns {UseFileDialogReturn} An object containing the selected files\n *\n * @example\n * const { values, open, reset } = useFileDialog({ accept: 'image/*' });\n */\nexport const useFileDialog = ((...params: any[]) => {\n const callback = (typeof params[0] === 'function' ? params[0] : undefined) as\n | ((value: FileList | null) => void)\n | undefined;\n const options = (callback ? params[0] : params[1]) as UseFileDialogOptions | undefined;\n\n const [value, setValue] = useState<FileList | null>(null);\n const inputRef = useRef<HTMLInputElement | null>(null);\n const internalCallbackRef = useRef(callback);\n internalCallbackRef.current = callback;\n\n const reset = () => {\n setValue(null);\n internalCallbackRef.current?.(null);\n if (inputRef.current) inputRef.current.value = '';\n };\n\n const open = (openParams?: UseFileDialogOptions) => {\n if (!inputRef.current) return;\n\n inputRef.current.multiple =\n openParams?.multiple ?? options?.multiple ?? DEFAULT_OPTIONS.multiple;\n inputRef.current.accept = openParams?.accept ?? options?.accept ?? DEFAULT_OPTIONS.accept;\n\n const capture = openParams?.capture ?? options?.capture;\n if (capture) inputRef.current.capture = capture;\n\n if (openParams?.reset ?? options?.reset ?? DEFAULT_OPTIONS.reset) reset();\n\n inputRef.current.click();\n };\n\n useEffect(() => {\n const init = () => {\n const input = document.createElement('input');\n input.type = 'file';\n\n input.onchange = (event: Event) => {\n const { files } = event.target as HTMLInputElement;\n setValue(files);\n internalCallbackRef.current?.(files);\n };\n return input;\n };\n\n inputRef.current = init();\n return () => {\n if (!inputRef.current) return;\n inputRef.current.remove();\n };\n }, []);\n\n return { value, open, reset };\n}) as UseFileDialog;\n"],"names":["DEFAULT_OPTIONS","useFileDialog","params","callback","options","value","setValue","useState","inputRef","useRef","internalCallbackRef","reset","open","openParams","capture","useEffect","init","input","event","files"],"mappings":";AAYA,MAAMA,IAAkB;AAAA,EACtB,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAO;AACT,GAgDaC,
|
|
1
|
+
{"version":3,"file":"useFileDialog.mjs","sources":["../../../../src/hooks/useFileDialog/useFileDialog.ts"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { useEffect, useRef, useState } from 'react';\n\n/* The use file dialog options */\nexport interface UseFileDialogOptions extends Pick<ComponentProps<'input'>, 'accept' | 'multiple'> {\n /** The capture value */\n capture?: string;\n /** The reset value */\n reset?: boolean;\n}\n\nconst DEFAULT_OPTIONS = {\n multiple: true,\n accept: '*',\n reset: false\n} satisfies UseFileDialogOptions;\n\n/* The use file dialog return type */\nexport interface UseFileDialogReturn {\n /** The selected files */\n value: FileList | null;\n /** The open function */\n open: (openParams?: UseFileDialogOptions) => void;\n /** The reset function */\n reset: () => void;\n}\n\nexport interface UseFileDialog {\n (\n callback?: (value: FileList | null) => void,\n options?: UseFileDialogOptions\n ): UseFileDialogReturn;\n\n (options?: UseFileDialogOptions, callback?: never): UseFileDialogReturn;\n}\n\n/**\n * @name useFileDialog\n * @description - Hook to handle file input\n * @category Elements\n * @usage low\n *\n * @overload\n * @param {(value: FileList | null) => void} callback The callback to execute when a file is selected\n * @param {boolean} [options.multiple=true] Whether multiple files can be selected\n * @param {string} [options.accept='*'] The accepted file types\n * @param {boolean} [options.reset=false] Whether the input should be reset when the callback is called\n * @param {string} [options.capture] The capture value\n * @returns {UseFileDialogReturn} An object containing the selected files\n *\n * @example\n * const { values, open, reset } = useFileDialog((value) => console.log(value));\n *\n * @overload\n * @param {boolean} [options.multiple=true] Whether multiple files can be selected\n * @param {string} [options.accept='*'] The accepted file types\n * @param {boolean} [options.reset=false] Whether the input should be reset when the callback is called\n * @param {string} [options.capture] The capture value\n * @returns {UseFileDialogReturn} An object containing the selected files\n *\n * @example\n * const { values, open, reset } = useFileDialog({ accept: 'image/*' });\n */\nexport const useFileDialog = ((...params: any[]) => {\n const callback = (typeof params[0] === 'function' ? params[0] : undefined) as\n | ((value: FileList | null) => void)\n | undefined;\n const options = (callback ? params[0] : params[1]) as UseFileDialogOptions | undefined;\n\n const [value, setValue] = useState<FileList | null>(null);\n const inputRef = useRef<HTMLInputElement | null>(null);\n const internalCallbackRef = useRef(callback);\n internalCallbackRef.current = callback;\n\n const reset = () => {\n setValue(null);\n internalCallbackRef.current?.(null);\n if (inputRef.current) inputRef.current.value = '';\n };\n\n const open = (openParams?: UseFileDialogOptions) => {\n if (!inputRef.current) return;\n\n inputRef.current.multiple =\n openParams?.multiple ?? options?.multiple ?? DEFAULT_OPTIONS.multiple;\n inputRef.current.accept = openParams?.accept ?? options?.accept ?? DEFAULT_OPTIONS.accept;\n\n const capture = openParams?.capture ?? options?.capture;\n if (capture) inputRef.current.capture = capture;\n\n if (openParams?.reset ?? options?.reset ?? DEFAULT_OPTIONS.reset) reset();\n\n inputRef.current.click();\n };\n\n useEffect(() => {\n const init = () => {\n const input = document.createElement('input');\n input.type = 'file';\n\n input.onchange = (event: Event) => {\n const { files } = event.target as HTMLInputElement;\n setValue(files);\n internalCallbackRef.current?.(files);\n };\n return input;\n };\n\n inputRef.current = init();\n return () => {\n if (!inputRef.current) return;\n inputRef.current.remove();\n };\n }, []);\n\n return { value, open, reset };\n}) as UseFileDialog;\n"],"names":["DEFAULT_OPTIONS","useFileDialog","params","callback","options","value","setValue","useState","inputRef","useRef","internalCallbackRef","reset","open","openParams","capture","useEffect","init","input","event","files"],"mappings":";AAYA,MAAMA,IAAkB;AAAA,EACtB,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAO;AACT,GAgDaC,KAAiB,IAAIC,MAAkB;AAClD,QAAMC,IAAY,OAAOD,EAAO,CAAC,KAAM,aAAaA,EAAO,CAAC,IAAI,QAG1DE,IAAWD,IAAWD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAE1C,CAACG,GAAOC,CAAQ,IAAIC,EAA0B,IAAI,GAClDC,IAAWC,EAAgC,IAAI,GAC/CC,IAAsBD,EAAON,CAAQ;AAC3C,EAAAO,EAAoB,UAAUP;AAE9B,QAAMQ,IAAQ,MAAM;AAClB,IAAAL,EAAS,IAAI,GACbI,EAAoB,UAAU,IAAI,GAC9BF,EAAS,YAASA,EAAS,QAAQ,QAAQ;AAAA,EAAA,GAG3CI,IAAO,CAACC,MAAsC;AAClD,QAAI,CAACL,EAAS,QAAS;AAEvB,IAAAA,EAAS,QAAQ,WACfK,GAAY,YAAYT,GAAS,YAAYJ,EAAgB,UAC/DQ,EAAS,QAAQ,SAASK,GAAY,UAAUT,GAAS,UAAUJ,EAAgB;AAEnF,UAAMc,IAAUD,GAAY,WAAWT,GAAS;AAChD,IAAIU,MAASN,EAAS,QAAQ,UAAUM,KAEpCD,GAAY,SAAST,GAAS,SAASJ,EAAgB,UAAOW,EAAA,GAElEH,EAAS,QAAQ,MAAA;AAAA,EAAM;AAGzB,SAAAO,EAAU,MAAM;AACd,UAAMC,IAAO,MAAM;AACjB,YAAMC,IAAQ,SAAS,cAAc,OAAO;AAC5C,aAAAA,EAAM,OAAO,QAEbA,EAAM,WAAW,CAACC,MAAiB;AACjC,cAAM,EAAE,OAAAC,MAAUD,EAAM;AACxB,QAAAZ,EAASa,CAAK,GACdT,EAAoB,UAAUS,CAAK;AAAA,MAAA,GAE9BF;AAAA,IAAA;AAGT,WAAAT,EAAS,UAAUQ,EAAA,GACZ,MAAM;AACX,MAAKR,EAAS,WACdA,EAAS,QAAQ,OAAA;AAAA,IAAO;AAAA,EAC1B,GACC,EAAE,GAEE,EAAE,OAAAH,GAAO,MAAAO,GAAM,OAAAD,EAAA;AACxB;"}
|
|
@@ -1,35 +1,35 @@
|
|
|
1
|
-
import { useState as
|
|
1
|
+
import { useState as g, useRef as R, useEffect as m } from "react";
|
|
2
2
|
import { useRefState as L } from "../useRefState/useRefState.mjs";
|
|
3
|
-
import { isTarget as
|
|
4
|
-
const
|
|
5
|
-
const
|
|
3
|
+
import { isTarget as l } from "../../utils/helpers/isTarget.mjs";
|
|
4
|
+
const B = ((...e) => {
|
|
5
|
+
const t = l(e[0]) ? e[0] : void 0, o = t ? typeof e[1] == "object" ? e[1] : { onFocus: e[1] } : typeof e[0] == "object" ? e[0] : { onFocus: e[0] }, b = o?.enabled ?? !0, d = o?.initialValue ?? !1, [a, u] = g(d), c = L(), f = R(o);
|
|
6
6
|
f.current = o;
|
|
7
|
-
const r =
|
|
7
|
+
const r = R(null), i = () => {
|
|
8
8
|
r.current && (r.current.focus(), u(!0));
|
|
9
|
-
},
|
|
9
|
+
}, v = () => {
|
|
10
10
|
r.current && (r.current.blur(), u(!1));
|
|
11
11
|
};
|
|
12
|
-
return
|
|
13
|
-
if (!
|
|
14
|
-
const
|
|
15
|
-
if (!
|
|
16
|
-
r.current =
|
|
17
|
-
const
|
|
12
|
+
return m(() => {
|
|
13
|
+
if (!b || !t && !c.state) return;
|
|
14
|
+
const n = t ? l.getElement(t) : c.current;
|
|
15
|
+
if (!n) return;
|
|
16
|
+
r.current = n;
|
|
17
|
+
const E = (s) => {
|
|
18
18
|
f.current?.onFocus?.(s), (!i || s.target.matches?.(":focus-visible")) && u(!0);
|
|
19
|
-
},
|
|
19
|
+
}, F = (s) => {
|
|
20
20
|
f.current?.onBlur?.(s), u(!1);
|
|
21
21
|
};
|
|
22
|
-
return
|
|
23
|
-
|
|
22
|
+
return d && n.focus(), n.addEventListener("focus", E), n.addEventListener("blur", F), () => {
|
|
23
|
+
n.removeEventListener("focus", E), n.removeEventListener("blur", F);
|
|
24
24
|
};
|
|
25
|
-
}, [
|
|
25
|
+
}, [t, c.state, b, l.getRefState(t)]), t ? { focus: i, blur: v, focused: a } : {
|
|
26
26
|
ref: c,
|
|
27
27
|
focus: i,
|
|
28
|
-
blur:
|
|
29
|
-
focused:
|
|
28
|
+
blur: v,
|
|
29
|
+
focused: a
|
|
30
30
|
};
|
|
31
|
-
};
|
|
31
|
+
});
|
|
32
32
|
export {
|
|
33
|
-
|
|
33
|
+
B as useFocus
|
|
34
34
|
};
|
|
35
35
|
//# sourceMappingURL=useFocus.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFocus.mjs","sources":["../../../../src/hooks/useFocus/useFocus.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use focus options type */\nexport interface UseFocusOptions {\n /** The enabled state of the focus hook */\n enabled?: boolean;\n /** The initial focus state of the target */\n initialValue?: boolean;\n /** The on blur callback */\n onBlur?: (event: FocusEvent) => void;\n /** The on focus callback */\n onFocus?: (event: FocusEvent) => void;\n}\n\n/** The use focus return type */\nexport interface UseFocusReturn {\n /** The boolean state value of the target */\n focused: boolean;\n /** Blur the target */\n blur: () => void;\n /** Focus the target */\n focus: () => void;\n}\n\nexport interface UseFocus {\n (target: HookTarget, callback?: (event: FocusEvent) => void): UseFocusReturn;\n\n (target: HookTarget, options?: UseFocusOptions): UseFocusReturn;\n\n <Target extends Element>(\n callback?: (event: FocusEvent) => void,\n target?: never\n ): UseFocusReturn & { ref: StateRef<Target> };\n\n <Target extends Element>(\n options?: UseFocusOptions,\n target?: never\n ): UseFocusReturn & { ref: StateRef<Target> };\n}\n\n/**\n * @name useFocus\n * @description - Hook that allows you to focus on a specific element\n * @category Elements\n * @usage medium\n *\n * @overload\n * @param {HookTarget} target The target element to focus\n * @param {(event: FocusEvent) => void} [callback] The callback function to be invoked on focus\n * @returns {UseFocusReturn} An object with focus state and methods\n *\n * @example\n * const { focus, blur, focused } = useFocus(ref, () => console.log('focused'));\n *\n * @overload\n * @param {HookTarget} target The target element to focus\n * @param {boolean} [options.enabled=true] The enabled state of the focus hook\n * @param {boolean} [options.initialValue=false] The initial focus state of the target\n * @param {(event: FocusEvent) => void} [options.onFocus] The callback function to be invoked on focus\n * @param {(event: FocusEvent) => void} [options.onBlur] The callback function to be invoked on blur\n * @returns {UseFocusReturn} An object with focus state and methods\n *\n * @example\n * const { focus, blur, focused } = useFocus(ref);\n *\n * @overload\n * @template Target The target element\n * @param {(event: FocusEvent) => void} [callback] The callback function to be invoked on focus\n * @returns {UseFocusReturn & { ref: StateRef<Target> }} An object with focus state, methods and ref\n *\n * @example\n * const { ref, focus, blur, focused } = useFocus(() => console.log('focused'));\n *\n * @overload\n * @template Target The target element\n * @param {boolean} [options.enabled=true] The enabled state of the focus hook\n * @param {boolean} [options.initialValue=false] The initial focus state of the target\n * @param {(event: FocusEvent) => void} [options.onFocus] The callback function to be invoked on focus\n * @param {(event: FocusEvent) => void} [options.onBlur] The callback function to be invoked on blur\n * @returns {UseFocusReturn & { ref: StateRef<Target> }} An object with focus state, methods and ref\n *\n * @example\n * const { ref, focus, blur, focused } = useFocus();\n */\nexport const useFocus = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n\n const options = (\n target\n ? typeof params[1] === 'object'\n ? params[1]\n : { onFocus: params[1] }\n : typeof params[0] === 'object'\n ? params[0]\n : { onFocus: params[0] }\n ) as UseFocusOptions | undefined;\n const enabled = options?.enabled ?? true;\n const initialValue = options?.initialValue ?? false;\n\n const [focused, setFocused] = useState(initialValue);\n const internalRef = useRefState<Element>();\n const internalOptionsRef = useRef(options);\n internalOptionsRef.current = options;\n\n const elementRef = useRef<HTMLElement | null>(null);\n\n const focus = () => {\n if (!elementRef.current) return;\n elementRef.current.focus();\n setFocused(true);\n };\n\n const blur = () => {\n if (!elementRef.current) return;\n elementRef.current.blur();\n setFocused(false);\n };\n\n useEffect(() => {\n if (!enabled || (!target && !internalRef.state)) return;\n const element = (target ? isTarget.getElement(target) : internalRef.current) as HTMLElement;\n if (!element) return;\n\n elementRef.current = element;\n\n const onFocus = (event: FocusEvent) => {\n internalOptionsRef.current?.onFocus?.(event);\n if (!focus || (event.target as HTMLElement).matches?.(':focus-visible')) setFocused(true);\n };\n\n const onBlur = (event: FocusEvent) => {\n internalOptionsRef.current?.onBlur?.(event);\n setFocused(false);\n };\n\n if (initialValue) element.focus();\n\n element.addEventListener('focus', onFocus);\n element.addEventListener('blur', onBlur);\n\n return () => {\n element.removeEventListener('focus', onFocus);\n element.removeEventListener('blur', onBlur);\n };\n }, [target, internalRef.state, enabled]);\n\n if (target) return { focus, blur, focused };\n return {\n ref: internalRef,\n focus,\n blur,\n focused\n };\n}) as UseFocus;\n"],"names":["useFocus","params","target","isTarget","options","enabled","initialValue","focused","setFocused","useState","internalRef","useRefState","internalOptionsRef","useRef","elementRef","focus","blur","useEffect","element","onFocus","event","onBlur"],"mappings":";;;AA4FO,MAAMA,
|
|
1
|
+
{"version":3,"file":"useFocus.mjs","sources":["../../../../src/hooks/useFocus/useFocus.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use focus options type */\nexport interface UseFocusOptions {\n /** The enabled state of the focus hook */\n enabled?: boolean;\n /** The initial focus state of the target */\n initialValue?: boolean;\n /** The on blur callback */\n onBlur?: (event: FocusEvent) => void;\n /** The on focus callback */\n onFocus?: (event: FocusEvent) => void;\n}\n\n/** The use focus return type */\nexport interface UseFocusReturn {\n /** The boolean state value of the target */\n focused: boolean;\n /** Blur the target */\n blur: () => void;\n /** Focus the target */\n focus: () => void;\n}\n\nexport interface UseFocus {\n (target: HookTarget, callback?: (event: FocusEvent) => void): UseFocusReturn;\n\n (target: HookTarget, options?: UseFocusOptions): UseFocusReturn;\n\n <Target extends Element>(\n callback?: (event: FocusEvent) => void,\n target?: never\n ): UseFocusReturn & { ref: StateRef<Target> };\n\n <Target extends Element>(\n options?: UseFocusOptions,\n target?: never\n ): UseFocusReturn & { ref: StateRef<Target> };\n}\n\n/**\n * @name useFocus\n * @description - Hook that allows you to focus on a specific element\n * @category Elements\n * @usage medium\n *\n * @overload\n * @param {HookTarget} target The target element to focus\n * @param {(event: FocusEvent) => void} [callback] The callback function to be invoked on focus\n * @returns {UseFocusReturn} An object with focus state and methods\n *\n * @example\n * const { focus, blur, focused } = useFocus(ref, () => console.log('focused'));\n *\n * @overload\n * @param {HookTarget} target The target element to focus\n * @param {boolean} [options.enabled=true] The enabled state of the focus hook\n * @param {boolean} [options.initialValue=false] The initial focus state of the target\n * @param {(event: FocusEvent) => void} [options.onFocus] The callback function to be invoked on focus\n * @param {(event: FocusEvent) => void} [options.onBlur] The callback function to be invoked on blur\n * @returns {UseFocusReturn} An object with focus state and methods\n *\n * @example\n * const { focus, blur, focused } = useFocus(ref);\n *\n * @overload\n * @template Target The target element\n * @param {(event: FocusEvent) => void} [callback] The callback function to be invoked on focus\n * @returns {UseFocusReturn & { ref: StateRef<Target> }} An object with focus state, methods and ref\n *\n * @example\n * const { ref, focus, blur, focused } = useFocus(() => console.log('focused'));\n *\n * @overload\n * @template Target The target element\n * @param {boolean} [options.enabled=true] The enabled state of the focus hook\n * @param {boolean} [options.initialValue=false] The initial focus state of the target\n * @param {(event: FocusEvent) => void} [options.onFocus] The callback function to be invoked on focus\n * @param {(event: FocusEvent) => void} [options.onBlur] The callback function to be invoked on blur\n * @returns {UseFocusReturn & { ref: StateRef<Target> }} An object with focus state, methods and ref\n *\n * @example\n * const { ref, focus, blur, focused } = useFocus();\n */\nexport const useFocus = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n\n const options = (\n target\n ? typeof params[1] === 'object'\n ? params[1]\n : { onFocus: params[1] }\n : typeof params[0] === 'object'\n ? params[0]\n : { onFocus: params[0] }\n ) as UseFocusOptions | undefined;\n const enabled = options?.enabled ?? true;\n const initialValue = options?.initialValue ?? false;\n\n const [focused, setFocused] = useState(initialValue);\n const internalRef = useRefState<Element>();\n const internalOptionsRef = useRef(options);\n internalOptionsRef.current = options;\n\n const elementRef = useRef<HTMLElement | null>(null);\n\n const focus = () => {\n if (!elementRef.current) return;\n elementRef.current.focus();\n setFocused(true);\n };\n\n const blur = () => {\n if (!elementRef.current) return;\n elementRef.current.blur();\n setFocused(false);\n };\n\n useEffect(() => {\n if (!enabled || (!target && !internalRef.state)) return;\n const element = (target ? isTarget.getElement(target) : internalRef.current) as HTMLElement;\n if (!element) return;\n\n elementRef.current = element;\n\n const onFocus = (event: FocusEvent) => {\n internalOptionsRef.current?.onFocus?.(event);\n if (!focus || (event.target as HTMLElement).matches?.(':focus-visible')) setFocused(true);\n };\n\n const onBlur = (event: FocusEvent) => {\n internalOptionsRef.current?.onBlur?.(event);\n setFocused(false);\n };\n\n if (initialValue) element.focus();\n\n element.addEventListener('focus', onFocus);\n element.addEventListener('blur', onBlur);\n\n return () => {\n element.removeEventListener('focus', onFocus);\n element.removeEventListener('blur', onBlur);\n };\n }, [target, internalRef.state, enabled, isTarget.getRefState(target)]);\n\n if (target) return { focus, blur, focused };\n return {\n ref: internalRef,\n focus,\n blur,\n focused\n };\n}) as UseFocus;\n"],"names":["useFocus","params","target","isTarget","options","enabled","initialValue","focused","setFocused","useState","internalRef","useRefState","internalOptionsRef","useRef","elementRef","focus","blur","useEffect","element","onFocus","event","onBlur"],"mappings":";;;AA4FO,MAAMA,KAAY,IAAIC,MAAkB;AAC7C,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAE5CG,IACJF,IACI,OAAOD,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,SAASA,EAAO,CAAC,EAAA,IACrB,OAAOA,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,SAASA,EAAO,CAAC,EAAA,GAErBI,IAAUD,GAAS,WAAW,IAC9BE,IAAeF,GAAS,gBAAgB,IAExC,CAACG,GAASC,CAAU,IAAIC,EAASH,CAAY,GAC7CI,IAAcC,EAAA,GACdC,IAAqBC,EAAOT,CAAO;AACzC,EAAAQ,EAAmB,UAAUR;AAE7B,QAAMU,IAAaD,EAA2B,IAAI,GAE5CE,IAAQ,MAAM;AAClB,IAAKD,EAAW,YAChBA,EAAW,QAAQ,MAAA,GACnBN,EAAW,EAAI;AAAA,EAAA,GAGXQ,IAAO,MAAM;AACjB,IAAKF,EAAW,YAChBA,EAAW,QAAQ,KAAA,GACnBN,EAAW,EAAK;AAAA,EAAA;AA+BlB,SA5BAS,EAAU,MAAM;AACd,QAAI,CAACZ,KAAY,CAACH,KAAU,CAACQ,EAAY,MAAQ;AACjD,UAAMQ,IAAWhB,IAASC,EAAS,WAAWD,CAAM,IAAIQ,EAAY;AACpE,QAAI,CAACQ,EAAS;AAEd,IAAAJ,EAAW,UAAUI;AAErB,UAAMC,IAAU,CAACC,MAAsB;AACrC,MAAAR,EAAmB,SAAS,UAAUQ,CAAK,IACvC,CAACL,KAAUK,EAAM,OAAuB,UAAU,gBAAgB,QAAc,EAAI;AAAA,IAAA,GAGpFC,IAAS,CAACD,MAAsB;AACpC,MAAAR,EAAmB,SAAS,SAASQ,CAAK,GAC1CZ,EAAW,EAAK;AAAA,IAAA;AAGlB,WAAIF,OAAsB,MAAA,GAE1BY,EAAQ,iBAAiB,SAASC,CAAO,GACzCD,EAAQ,iBAAiB,QAAQG,CAAM,GAEhC,MAAM;AACX,MAAAH,EAAQ,oBAAoB,SAASC,CAAO,GAC5CD,EAAQ,oBAAoB,QAAQG,CAAM;AAAA,IAAA;AAAA,EAC5C,GACC,CAACnB,GAAQQ,EAAY,OAAOL,GAASF,EAAS,YAAYD,CAAM,CAAC,CAAC,GAEjEA,IAAe,EAAE,OAAAa,GAAO,MAAAC,GAAM,SAAAT,EAAA,IAC3B;AAAA,IACL,KAAKG;AAAA,IACL,OAAAK;AAAA,IACA,MAAAC;AAAA,IACA,SAAAT;AAAA,EAAA;AAEJ;"}
|
|
@@ -1,37 +1,37 @@
|
|
|
1
1
|
import { useState as p } from "react";
|
|
2
2
|
import { useIsomorphicLayoutEffect as v } from "../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
|
|
3
3
|
import { useRefState as h } from "../useRefState/useRefState.mjs";
|
|
4
|
-
import { isTarget as
|
|
5
|
-
const S = "a, input, select, textarea, button, object, [tabindex]", g = (
|
|
4
|
+
import { isTarget as l } from "../../utils/helpers/isTarget.mjs";
|
|
5
|
+
const S = "a, input, select, textarea, button, object, [tabindex]", g = (t) => Array.from(t.querySelectorAll(S)).filter((o) => {
|
|
6
6
|
const n = o;
|
|
7
7
|
return n.tabIndex !== -1 && !n.hidden && n.style.display !== "none";
|
|
8
|
-
}), x = (
|
|
9
|
-
const
|
|
10
|
-
if (
|
|
11
|
-
const o = g(
|
|
8
|
+
}), x = (t) => {
|
|
9
|
+
const e = t.querySelector("[data-autofocus]");
|
|
10
|
+
if (e) return e.focus();
|
|
11
|
+
const o = g(t);
|
|
12
12
|
o.length && o[0].focus();
|
|
13
|
-
},
|
|
14
|
-
const
|
|
13
|
+
}, k = ((...t) => {
|
|
14
|
+
const e = l(t[0]) ? t[0] : void 0, o = e ? t[1] : t[0], [n, c] = p(o), u = h(), i = () => c(!0), f = () => c(!1), a = () => c((r) => !r);
|
|
15
15
|
return v(() => {
|
|
16
16
|
if (!n) return;
|
|
17
|
-
const r =
|
|
17
|
+
const r = e ? l.getElement(e) : u.current;
|
|
18
18
|
if (!r) return;
|
|
19
|
-
const
|
|
20
|
-
x(
|
|
21
|
-
const
|
|
19
|
+
const m = r;
|
|
20
|
+
x(m);
|
|
21
|
+
const E = (s) => {
|
|
22
22
|
if (s.key !== "Tab") return;
|
|
23
|
-
const [
|
|
24
|
-
if (!
|
|
25
|
-
const
|
|
26
|
-
s.shiftKey && document.activeElement ===
|
|
23
|
+
const [d, ...y] = g(m);
|
|
24
|
+
if (!y.length) return;
|
|
25
|
+
const b = y.at(-1);
|
|
26
|
+
s.shiftKey && document.activeElement === d && (s.preventDefault(), b.focus()), document.activeElement === b && (s.preventDefault(), d.focus());
|
|
27
27
|
};
|
|
28
|
-
return document.addEventListener("keydown",
|
|
29
|
-
document.removeEventListener("keydown",
|
|
28
|
+
return document.addEventListener("keydown", E), () => {
|
|
29
|
+
document.removeEventListener("keydown", E);
|
|
30
30
|
};
|
|
31
|
-
}, [n,
|
|
32
|
-
};
|
|
31
|
+
}, [n, e, u.state, l.getRefState(e)]), e ? { active: n, enable: i, disable: f, toggle: a } : { active: n, enable: i, disable: f, toggle: a, ref: u };
|
|
32
|
+
});
|
|
33
33
|
export {
|
|
34
34
|
S as FOCUS_SELECTOR,
|
|
35
|
-
|
|
35
|
+
k as useFocusTrap
|
|
36
36
|
};
|
|
37
37
|
//# sourceMappingURL=useFocusTrap.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFocusTrap.mjs","sources":["../../../../src/hooks/useFocusTrap/useFocusTrap.ts"],"sourcesContent":["import { useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';\nimport { useRefState } from '../useRefState/useRefState';\n\nexport const FOCUS_SELECTOR = 'a, input, select, textarea, button, object, [tabindex]';\n\nconst getFocusableElements = (element: HTMLElement) => {\n const elements = Array.from(element.querySelectorAll(FOCUS_SELECTOR));\n return elements.filter((element) => {\n const htmlEl = element as HTMLElement;\n return htmlEl.tabIndex !== -1 && !htmlEl.hidden && htmlEl.style.display !== 'none';\n }) as HTMLElement[];\n};\n\nconst focusElement = (element: HTMLElement) => {\n const autofocusElement = element.querySelector('[data-autofocus]') as HTMLElement;\n if (autofocusElement) return autofocusElement.focus();\n const focusableElements = getFocusableElements(element);\n if (focusableElements.length) focusableElements[0].focus();\n};\n\n/** The use focus trap return type */\nexport interface UseFocusTrapReturn {\n /** Whether focus trap is active */\n active: boolean;\n /** Disable focus trap */\n disable: () => void;\n /** Enable focus trap */\n enable: () => void;\n /** Toggle focus trap */\n toggle: () => void;\n}\n\nexport interface UseFocusTrap {\n (target: HookTarget, active?: boolean): UseFocusTrapReturn;\n\n <Target extends HTMLElement>(\n active?: boolean,\n target?: never\n ): UseFocusTrapReturn & {\n ref: StateRef<Target>;\n };\n}\n\n/**\n * @name useFocusTrap\n * @description - Hook that traps focus within a given element\n * @category Elements\n * @usage medium\n *\n * @overload\n * @param {HookTarget} target The target element for focus trap\n * @param {boolean} [active=true] Whether focus trap is active\n * @returns {UseFocusTrapReturn} Object with control methods and state\n *\n * @example\n * const { active, disable, toggle, enable } = useFocusTrap(ref, true);\n *\n * @overload\n * @template Target The target element type\n * @param {boolean} [active=true] Whether focus trap is active\n * @returns {UseFocusTrapReturn & { ref: StateRef<Target> }} Object with ref and controls\n *\n * @example\n * const { ref, active, disable, toggle, enable } = useFocusTrap(true);\n */\nexport const useFocusTrap = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const initialActive = target ? params[1] : params[0];\n\n const [active, setActive] = useState(initialActive);\n const internalRef = useRefState<HTMLElement>();\n\n const enable = () => setActive(true);\n const disable = () => setActive(false);\n const toggle = () => setActive((prevActive: boolean) => !prevActive);\n\n useIsomorphicLayoutEffect(() => {\n if (!active) return;\n\n const element = target ? isTarget.getElement(target) : internalRef.current;\n if (!element) return;\n\n const htmlElement = element as HTMLElement;\n focusElement(htmlElement);\n\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key !== 'Tab') return;\n\n const [firstElement, ...restElements] = getFocusableElements(htmlElement);\n if (!restElements.length) return;\n\n const lastElement = restElements.at(-1)!;\n\n if (event.shiftKey && document.activeElement === firstElement) {\n event.preventDefault();\n lastElement.focus();\n }\n\n if (document.activeElement === lastElement) {\n event.preventDefault();\n firstElement.focus();\n }\n };\n\n document.addEventListener('keydown', onKeyDown);\n\n return () => {\n document.removeEventListener('keydown', onKeyDown);\n };\n }, [active, target, internalRef.state]);\n\n if (target) return { active, enable, disable, toggle };\n return { active, enable, disable, toggle, ref: internalRef };\n}) as UseFocusTrap;\n"],"names":["FOCUS_SELECTOR","getFocusableElements","element","htmlEl","focusElement","autofocusElement","focusableElements","useFocusTrap","params","target","isTarget","initialActive","active","setActive","useState","internalRef","useRefState","enable","disable","toggle","prevActive","useIsomorphicLayoutEffect","htmlElement","onKeyDown","event","firstElement","restElements","lastElement"],"mappings":";;;;AAWO,MAAMA,IAAiB,0DAExBC,IAAuB,CAACC,MACX,MAAM,KAAKA,EAAQ,iBAAiBF,CAAc,CAAC,EACpD,OAAO,CAACE,MAAY;AAClC,QAAMC,IAASD;AACf,SAAOC,EAAO,aAAa,MAAM,CAACA,EAAO,UAAUA,EAAO,MAAM,YAAY;AAAA,CAC7E,GAGGC,IAAe,CAACF,MAAyB;AAC7C,QAAMG,IAAmBH,EAAQ,cAAc,kBAAkB;AACjE,MAAIG,EAAkB,QAAOA,EAAiB,MAAA;AAC9C,QAAMC,IAAoBL,EAAqBC,CAAO;AACtD,EAAII,EAAkB,UAAQA,EAAkB,CAAC,EAAE,MAAA;AACrD,GA+CaC,
|
|
1
|
+
{"version":3,"file":"useFocusTrap.mjs","sources":["../../../../src/hooks/useFocusTrap/useFocusTrap.ts"],"sourcesContent":["import { useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';\nimport { useRefState } from '../useRefState/useRefState';\n\nexport const FOCUS_SELECTOR = 'a, input, select, textarea, button, object, [tabindex]';\n\nconst getFocusableElements = (element: HTMLElement) => {\n const elements = Array.from(element.querySelectorAll(FOCUS_SELECTOR));\n return elements.filter((element) => {\n const htmlEl = element as HTMLElement;\n return htmlEl.tabIndex !== -1 && !htmlEl.hidden && htmlEl.style.display !== 'none';\n }) as HTMLElement[];\n};\n\nconst focusElement = (element: HTMLElement) => {\n const autofocusElement = element.querySelector('[data-autofocus]') as HTMLElement;\n if (autofocusElement) return autofocusElement.focus();\n const focusableElements = getFocusableElements(element);\n if (focusableElements.length) focusableElements[0].focus();\n};\n\n/** The use focus trap return type */\nexport interface UseFocusTrapReturn {\n /** Whether focus trap is active */\n active: boolean;\n /** Disable focus trap */\n disable: () => void;\n /** Enable focus trap */\n enable: () => void;\n /** Toggle focus trap */\n toggle: () => void;\n}\n\nexport interface UseFocusTrap {\n (target: HookTarget, active?: boolean): UseFocusTrapReturn;\n\n <Target extends HTMLElement>(\n active?: boolean,\n target?: never\n ): UseFocusTrapReturn & {\n ref: StateRef<Target>;\n };\n}\n\n/**\n * @name useFocusTrap\n * @description - Hook that traps focus within a given element\n * @category Elements\n * @usage medium\n *\n * @overload\n * @param {HookTarget} target The target element for focus trap\n * @param {boolean} [active=true] Whether focus trap is active\n * @returns {UseFocusTrapReturn} Object with control methods and state\n *\n * @example\n * const { active, disable, toggle, enable } = useFocusTrap(ref, true);\n *\n * @overload\n * @template Target The target element type\n * @param {boolean} [active=true] Whether focus trap is active\n * @returns {UseFocusTrapReturn & { ref: StateRef<Target> }} Object with ref and controls\n *\n * @example\n * const { ref, active, disable, toggle, enable } = useFocusTrap(true);\n */\nexport const useFocusTrap = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const initialActive = target ? params[1] : params[0];\n\n const [active, setActive] = useState(initialActive);\n const internalRef = useRefState<HTMLElement>();\n\n const enable = () => setActive(true);\n const disable = () => setActive(false);\n const toggle = () => setActive((prevActive: boolean) => !prevActive);\n\n useIsomorphicLayoutEffect(() => {\n if (!active) return;\n\n const element = target ? isTarget.getElement(target) : internalRef.current;\n if (!element) return;\n\n const htmlElement = element as HTMLElement;\n focusElement(htmlElement);\n\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key !== 'Tab') return;\n\n const [firstElement, ...restElements] = getFocusableElements(htmlElement);\n if (!restElements.length) return;\n\n const lastElement = restElements.at(-1)!;\n\n if (event.shiftKey && document.activeElement === firstElement) {\n event.preventDefault();\n lastElement.focus();\n }\n\n if (document.activeElement === lastElement) {\n event.preventDefault();\n firstElement.focus();\n }\n };\n\n document.addEventListener('keydown', onKeyDown);\n\n return () => {\n document.removeEventListener('keydown', onKeyDown);\n };\n }, [active, target, internalRef.state, isTarget.getRefState(target)]);\n\n if (target) return { active, enable, disable, toggle };\n return { active, enable, disable, toggle, ref: internalRef };\n}) as UseFocusTrap;\n"],"names":["FOCUS_SELECTOR","getFocusableElements","element","htmlEl","focusElement","autofocusElement","focusableElements","useFocusTrap","params","target","isTarget","initialActive","active","setActive","useState","internalRef","useRefState","enable","disable","toggle","prevActive","useIsomorphicLayoutEffect","htmlElement","onKeyDown","event","firstElement","restElements","lastElement"],"mappings":";;;;AAWO,MAAMA,IAAiB,0DAExBC,IAAuB,CAACC,MACX,MAAM,KAAKA,EAAQ,iBAAiBF,CAAc,CAAC,EACpD,OAAO,CAACE,MAAY;AAClC,QAAMC,IAASD;AACf,SAAOC,EAAO,aAAa,MAAM,CAACA,EAAO,UAAUA,EAAO,MAAM,YAAY;AAAA,CAC7E,GAGGC,IAAe,CAACF,MAAyB;AAC7C,QAAMG,IAAmBH,EAAQ,cAAc,kBAAkB;AACjE,MAAIG,EAAkB,QAAOA,EAAiB,MAAA;AAC9C,QAAMC,IAAoBL,EAAqBC,CAAO;AACtD,EAAII,EAAkB,UAAQA,EAAkB,CAAC,EAAE,MAAA;AACrD,GA+CaC,KAAgB,IAAIC,MAAkB;AACjD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAgBF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAE7C,CAACI,GAAQC,CAAS,IAAIC,EAASH,CAAa,GAC5CI,IAAcC,EAAA,GAEdC,IAAS,MAAMJ,EAAU,EAAI,GAC7BK,IAAU,MAAML,EAAU,EAAK,GAC/BM,IAAS,MAAMN,EAAU,CAACO,MAAwB,CAACA,CAAU;AAqCnE,SAnCAC,EAA0B,MAAM;AAC9B,QAAI,CAACT,EAAQ;AAEb,UAAMV,IAAUO,IAASC,EAAS,WAAWD,CAAM,IAAIM,EAAY;AACnE,QAAI,CAACb,EAAS;AAEd,UAAMoB,IAAcpB;AACpB,IAAAE,EAAakB,CAAW;AAExB,UAAMC,IAAY,CAACC,MAAyB;AAC1C,UAAIA,EAAM,QAAQ,MAAO;AAEzB,YAAM,CAACC,GAAc,GAAGC,CAAY,IAAIzB,EAAqBqB,CAAW;AACxE,UAAI,CAACI,EAAa,OAAQ;AAE1B,YAAMC,IAAcD,EAAa,GAAG,EAAE;AAEtC,MAAIF,EAAM,YAAY,SAAS,kBAAkBC,MAC/CD,EAAM,eAAA,GACNG,EAAY,MAAA,IAGV,SAAS,kBAAkBA,MAC7BH,EAAM,eAAA,GACNC,EAAa,MAAA;AAAA,IACf;AAGF,oBAAS,iBAAiB,WAAWF,CAAS,GAEvC,MAAM;AACX,eAAS,oBAAoB,WAAWA,CAAS;AAAA,IAAA;AAAA,EACnD,GACC,CAACX,GAAQH,GAAQM,EAAY,OAAOL,EAAS,YAAYD,CAAM,CAAC,CAAC,GAEhEA,IAAe,EAAE,QAAAG,GAAQ,QAAAK,GAAQ,SAAAC,GAAS,QAAAC,EAAA,IACvC,EAAE,QAAAP,GAAQ,QAAAK,GAAQ,SAAAC,GAAS,QAAAC,GAAQ,KAAKJ,EAAA;AACjD;"}
|
|
@@ -2,7 +2,7 @@ import { useState as m, useEffect as d } from "react";
|
|
|
2
2
|
import e from "screenfull";
|
|
3
3
|
import { useRefState as h } from "../useRefState/useRefState.mjs";
|
|
4
4
|
import { isTarget as a } from "../../utils/helpers/isTarget.mjs";
|
|
5
|
-
const v = (...t) => {
|
|
5
|
+
const v = ((...t) => {
|
|
6
6
|
const n = a(t[0]) ? t[0] : void 0, r = n ? t[1] : t[0], [o, g] = m(r?.initialValue ?? !1), l = h(), i = () => {
|
|
7
7
|
e.isEnabled && (e.isFullscreen ? r?.onEnter?.() : (e.off("change", i), r?.onExit?.()), g(e.isFullscreen));
|
|
8
8
|
}, s = () => {
|
|
@@ -36,7 +36,7 @@ const v = (...t) => {
|
|
|
36
36
|
toggle: c,
|
|
37
37
|
value: o
|
|
38
38
|
};
|
|
39
|
-
};
|
|
39
|
+
});
|
|
40
40
|
export {
|
|
41
41
|
v as useFullscreen
|
|
42
42
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFullscreen.mjs","sources":["../../../../src/hooks/useFullscreen/useFullscreen.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport screenfull from 'screenfull';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use fullscreen options type */\nexport interface UseFullScreenOptions {\n /** initial value */\n initialValue?: boolean;\n /** on enter fullscreen */\n onEnter?: () => void;\n /** on exit fullscreen */\n onExit?: () => void;\n}\n\n/** The use click outside return type */\nexport interface UseFullScreenReturn {\n /** The fullscreen state */\n value: boolean;\n /** The fullscreen enter method */\n enter: () => void;\n /** The fullscreen exit method */\n exit: () => void;\n /** The fullscreen toggle method */\n toggle: () => void;\n}\n\nexport interface UseFullScreen {\n (target: HookTarget, options?: UseFullScreenOptions): UseFullScreenReturn;\n\n <Target extends Element>(\n options?: UseFullScreenOptions,\n target?: never\n ): UseFullScreenReturn & { ref: StateRef<Target> };\n}\n\n/**\n * @name useFullscreen\n * @description - Hook to handle fullscreen events\n * @category Browser\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target element for fullscreen\n * @param {boolean} [options.initialValue=false] initial value of fullscreen\n * @param {() => void} [options.onEnter] on enter fullscreen\n * @param {() => void} [options.onExit] on exit fullscreen\n * @returns {UseFullScreenReturn} An object with the fullscreen state and methods\n *\n * @example\n * const { enter, exit, toggle, value } = useFullscreen(ref);\n *\n * @overload\n * @template Target The target element for fullscreen\n * @param {boolean} [options.initialValue=false] initial value of fullscreen\n * @param {() => void} [options.onEnter] on enter fullscreen\n * @param {() => void} [options.onExit] on exit fullscreen\n * @returns {UseFullScreenReturn & { ref: RefObject<Target> }} An object with the fullscreen state and methods\n *\n * @example\n * const { ref, enter, exit, toggle, value } = useFullscreen();\n */\nexport const useFullscreen = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const options = (target ? params[1] : params[0]) as UseFullScreenOptions | undefined;\n\n const [value, setValue] = useState(options?.initialValue ?? false);\n const internalRef = useRefState<Element>();\n\n const onChange = () => {\n if (!screenfull.isEnabled) return;\n\n if (screenfull.isFullscreen) {\n options?.onEnter?.();\n } else {\n screenfull.off('change', onChange);\n options?.onExit?.();\n }\n\n setValue(screenfull.isFullscreen);\n };\n\n const enter = () => {\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n if (!element) return;\n\n if (screenfull.isEnabled) {\n try {\n screenfull.request(element);\n screenfull.on('change', onChange);\n } catch (error) {\n console.error(error);\n }\n }\n };\n\n const exit = () => {\n if (screenfull.isEnabled) screenfull.exit();\n };\n\n const toggle = () => {\n if (value) return exit();\n enter();\n };\n\n useEffect(\n () => () => {\n if (screenfull.isEnabled) screenfull.off('change', onChange);\n },\n []\n );\n\n if (target)\n return {\n enter,\n exit,\n toggle,\n value\n };\n return {\n ref: internalRef,\n enter,\n exit,\n toggle,\n value\n };\n}) as UseFullScreen;\n"],"names":["useFullscreen","params","target","isTarget","options","value","setValue","useState","internalRef","useRefState","onChange","screenfull","enter","element","error","exit","toggle","useEffect"],"mappings":";;;;AAoEO,MAAMA,
|
|
1
|
+
{"version":3,"file":"useFullscreen.mjs","sources":["../../../../src/hooks/useFullscreen/useFullscreen.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport screenfull from 'screenfull';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use fullscreen options type */\nexport interface UseFullScreenOptions {\n /** initial value */\n initialValue?: boolean;\n /** on enter fullscreen */\n onEnter?: () => void;\n /** on exit fullscreen */\n onExit?: () => void;\n}\n\n/** The use click outside return type */\nexport interface UseFullScreenReturn {\n /** The fullscreen state */\n value: boolean;\n /** The fullscreen enter method */\n enter: () => void;\n /** The fullscreen exit method */\n exit: () => void;\n /** The fullscreen toggle method */\n toggle: () => void;\n}\n\nexport interface UseFullScreen {\n (target: HookTarget, options?: UseFullScreenOptions): UseFullScreenReturn;\n\n <Target extends Element>(\n options?: UseFullScreenOptions,\n target?: never\n ): UseFullScreenReturn & { ref: StateRef<Target> };\n}\n\n/**\n * @name useFullscreen\n * @description - Hook to handle fullscreen events\n * @category Browser\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target element for fullscreen\n * @param {boolean} [options.initialValue=false] initial value of fullscreen\n * @param {() => void} [options.onEnter] on enter fullscreen\n * @param {() => void} [options.onExit] on exit fullscreen\n * @returns {UseFullScreenReturn} An object with the fullscreen state and methods\n *\n * @example\n * const { enter, exit, toggle, value } = useFullscreen(ref);\n *\n * @overload\n * @template Target The target element for fullscreen\n * @param {boolean} [options.initialValue=false] initial value of fullscreen\n * @param {() => void} [options.onEnter] on enter fullscreen\n * @param {() => void} [options.onExit] on exit fullscreen\n * @returns {UseFullScreenReturn & { ref: RefObject<Target> }} An object with the fullscreen state and methods\n *\n * @example\n * const { ref, enter, exit, toggle, value } = useFullscreen();\n */\nexport const useFullscreen = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const options = (target ? params[1] : params[0]) as UseFullScreenOptions | undefined;\n\n const [value, setValue] = useState(options?.initialValue ?? false);\n const internalRef = useRefState<Element>();\n\n const onChange = () => {\n if (!screenfull.isEnabled) return;\n\n if (screenfull.isFullscreen) {\n options?.onEnter?.();\n } else {\n screenfull.off('change', onChange);\n options?.onExit?.();\n }\n\n setValue(screenfull.isFullscreen);\n };\n\n const enter = () => {\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n if (!element) return;\n\n if (screenfull.isEnabled) {\n try {\n screenfull.request(element);\n screenfull.on('change', onChange);\n } catch (error) {\n console.error(error);\n }\n }\n };\n\n const exit = () => {\n if (screenfull.isEnabled) screenfull.exit();\n };\n\n const toggle = () => {\n if (value) return exit();\n enter();\n };\n\n useEffect(\n () => () => {\n if (screenfull.isEnabled) screenfull.off('change', onChange);\n },\n []\n );\n\n if (target)\n return {\n enter,\n exit,\n toggle,\n value\n };\n return {\n ref: internalRef,\n enter,\n exit,\n toggle,\n value\n };\n}) as UseFullScreen;\n"],"names":["useFullscreen","params","target","isTarget","options","value","setValue","useState","internalRef","useRefState","onChange","screenfull","enter","element","error","exit","toggle","useEffect"],"mappings":";;;;AAoEO,MAAMA,KAAiB,IAAIC,MAAkB;AAClD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAWF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAExC,CAACI,GAAOC,CAAQ,IAAIC,EAASH,GAAS,gBAAgB,EAAK,GAC3DI,IAAcC,EAAA,GAEdC,IAAW,MAAM;AACrB,IAAKC,EAAW,cAEZA,EAAW,eACbP,GAAS,UAAA,KAETO,EAAW,IAAI,UAAUD,CAAQ,GACjCN,GAAS,SAAA,IAGXE,EAASK,EAAW,YAAY;AAAA,EAAA,GAG5BC,IAAQ,MAAM;AAClB,UAAMC,IAAWX,IAASC,EAAS,WAAWD,CAAM,IAAIM,EAAY;AACpE,QAAKK,KAEDF,EAAW;AACb,UAAI;AACF,QAAAA,EAAW,QAAQE,CAAO,GAC1BF,EAAW,GAAG,UAAUD,CAAQ;AAAA,MAAA,SACzBI,GAAO;AACd,gBAAQ,MAAMA,CAAK;AAAA,MAAA;AAAA,EAEvB,GAGIC,IAAO,MAAM;AACjB,IAAIJ,EAAW,aAAWA,EAAW,KAAA;AAAA,EAAK,GAGtCK,IAAS,MAAM;AACnB,QAAIX,UAAcU,EAAA;AAClB,IAAAH,EAAA;AAAA,EAAM;AAUR,SAPAK;AAAA,IACE,MAAM,MAAM;AACV,MAAIN,EAAW,aAAWA,EAAW,IAAI,UAAUD,CAAQ;AAAA,IAAA;AAAA,IAE7D,CAAA;AAAA,EAAC,GAGCR,IACK;AAAA,IACL,OAAAU;AAAA,IACA,MAAAG;AAAA,IACA,QAAAC;AAAA,IACA,OAAAX;AAAA,EAAA,IAEG;AAAA,IACL,KAAKG;AAAA,IACL,OAAAI;AAAA,IACA,MAAAG;AAAA,IACA,QAAAC;AAAA,IACA,OAAAX;AAAA,EAAA;AAEJ;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useState as a, useRef as w, useEffect as g } from "react";
|
|
2
|
-
const f = () => decodeURIComponent(window.location.hash.replace("#", "")), p = (...e) => {
|
|
2
|
+
const f = () => decodeURIComponent(window.location.hash.replace("#", "")), p = ((...e) => {
|
|
3
3
|
const c = typeof e[0] == "string" ? e[0] : "", o = typeof e[1] == "object" ? e[1] : typeof e[1] == "function" ? { onChange: e[1] } : typeof e[0] == "object" ? e[0] : {}, s = o?.enabled ?? !0, h = o?.mode ?? "replace", [i, r] = a(() => typeof window > "u" ? c : f() || c), t = w(o);
|
|
4
4
|
t.current = o;
|
|
5
5
|
const u = (n) => {
|
|
@@ -16,7 +16,7 @@ const f = () => decodeURIComponent(window.location.hash.replace("#", "")), p = (
|
|
|
16
16
|
window.removeEventListener("hashchange", n);
|
|
17
17
|
};
|
|
18
18
|
}, [s, h]), [i, u];
|
|
19
|
-
};
|
|
19
|
+
});
|
|
20
20
|
export {
|
|
21
21
|
f as getHash,
|
|
22
22
|
p as useHash
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHash.mjs","sources":["../../../../src/hooks/useHash/useHash.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nexport const getHash = () => decodeURIComponent(window.location.hash.replace('#', ''));\n\n/** The use hash options type */\nexport interface UseHashOptions {\n /** The enabled state of the hook */\n enabled?: boolean;\n /** The mode of hash setting */\n mode?: 'initial' | 'replace';\n /** Callback function called when hash changes */\n onChange?: (hash: string) => void;\n}\n\n/** The use hash return type */\ntype UseHashReturn = [string, (value: string) => void];\n\nexport interface UseHash {\n (initialValue?: string, options?: UseHashOptions): UseHashReturn;\n\n (options?: UseHashOptions): UseHashReturn;\n\n (initialValue?: string, callback?: (hash: string) => void): UseHashReturn;\n\n (callback?: (hash: string) => void): UseHashReturn;\n}\n\n/**\n * @name useHash\n * @description - Hook that manages the hash value\n * @category State\n * @usage low\n *\n * @overload\n * @param {string} [initialValue] The initial hash value if no hash exists\n * @param {UseHashOptions} [options] Configuration options\n * @param {boolean} [options.enabled] The enabled state of the hook\n * @param {'initial' | 'replace'} [options.mode] The mode of hash setting\n * @param {(hash: string) => void} [options.onChange] Callback function called when hash changes\n * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value\n *\n * @example\n * const [hash, setHash] = useHash(\"initial\");\n *\n * @overload\n * @param {string} [initialValue] The initial hash value if no hash exists\n * @param {(hash: string) => void} [callback] Callback function called when hash changes\n * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value\n *\n * @example\n * const [hash, setHash] = useHash(\"initial\", (newHash) => console.log('callback'));\n *\n * @overload\n * @param {UseHashOptions} [options] Configuration options\n * @param {boolean} [options.enabled] The enabled state of the hook\n * @param {'initial' | 'replace'} [options.mode] The mode of hash setting\n * @param {(hash: string) => void} [options.onChange] Callback function called when hash changes\n * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value\n *\n * @example\n * const [hash, setHash] = useHash();\n *\n * @overload\n * @param {(hash: string) => void} [callback] Callback function called when hash changes\n * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value\n *\n * @example\n * const [hash, setHash] = useHash((newHash) => console.log('callback'));\n */\nexport const useHash = ((...params: any[]) => {\n const initialValue = typeof params[0] === 'string' ? params[0] : '';\n const options =\n typeof params[1] === 'object'\n ? params[1]\n : typeof params[1] === 'function'\n ? { onChange: params[1] }\n : typeof params[0] === 'object'\n ? params[0]\n : {};\n\n const enabled = options?.enabled ?? true;\n const mode = options?.mode ?? 'replace';\n\n const [hash, setHash] = useState(() => {\n if (typeof window === 'undefined') return initialValue;\n return getHash() || initialValue;\n });\n\n const optionsRef = useRef(options);\n optionsRef.current = options;\n\n const set = (value: string) => {\n window.location.hash = value;\n setHash(value);\n optionsRef.current?.onChange?.(value);\n };\n\n useEffect(() => {\n if (!enabled) return;\n\n if (mode === 'replace') window.location.hash = hash;\n\n const onHashChange = () => {\n const newHash = getHash();\n setHash(newHash);\n optionsRef.current?.onChange?.(newHash);\n };\n\n window.addEventListener('hashchange', onHashChange);\n return () => {\n window.removeEventListener('hashchange', onHashChange);\n };\n }, [enabled, mode]);\n\n return [hash, set] as const;\n}) as UseHash;\n"],"names":["getHash","useHash","params","initialValue","options","enabled","mode","hash","setHash","useState","optionsRef","useRef","set","value","useEffect","onHashChange","newHash"],"mappings":";AAEO,MAAMA,IAAU,MAAM,mBAAmB,OAAO,SAAS,KAAK,QAAQ,KAAK,EAAE,CAAC,GAmExEC,
|
|
1
|
+
{"version":3,"file":"useHash.mjs","sources":["../../../../src/hooks/useHash/useHash.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nexport const getHash = () => decodeURIComponent(window.location.hash.replace('#', ''));\n\n/** The use hash options type */\nexport interface UseHashOptions {\n /** The enabled state of the hook */\n enabled?: boolean;\n /** The mode of hash setting */\n mode?: 'initial' | 'replace';\n /** Callback function called when hash changes */\n onChange?: (hash: string) => void;\n}\n\n/** The use hash return type */\ntype UseHashReturn = [string, (value: string) => void];\n\nexport interface UseHash {\n (initialValue?: string, options?: UseHashOptions): UseHashReturn;\n\n (options?: UseHashOptions): UseHashReturn;\n\n (initialValue?: string, callback?: (hash: string) => void): UseHashReturn;\n\n (callback?: (hash: string) => void): UseHashReturn;\n}\n\n/**\n * @name useHash\n * @description - Hook that manages the hash value\n * @category State\n * @usage low\n *\n * @overload\n * @param {string} [initialValue] The initial hash value if no hash exists\n * @param {UseHashOptions} [options] Configuration options\n * @param {boolean} [options.enabled] The enabled state of the hook\n * @param {'initial' | 'replace'} [options.mode] The mode of hash setting\n * @param {(hash: string) => void} [options.onChange] Callback function called when hash changes\n * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value\n *\n * @example\n * const [hash, setHash] = useHash(\"initial\");\n *\n * @overload\n * @param {string} [initialValue] The initial hash value if no hash exists\n * @param {(hash: string) => void} [callback] Callback function called when hash changes\n * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value\n *\n * @example\n * const [hash, setHash] = useHash(\"initial\", (newHash) => console.log('callback'));\n *\n * @overload\n * @param {UseHashOptions} [options] Configuration options\n * @param {boolean} [options.enabled] The enabled state of the hook\n * @param {'initial' | 'replace'} [options.mode] The mode of hash setting\n * @param {(hash: string) => void} [options.onChange] Callback function called when hash changes\n * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value\n *\n * @example\n * const [hash, setHash] = useHash();\n *\n * @overload\n * @param {(hash: string) => void} [callback] Callback function called when hash changes\n * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value\n *\n * @example\n * const [hash, setHash] = useHash((newHash) => console.log('callback'));\n */\nexport const useHash = ((...params: any[]) => {\n const initialValue = typeof params[0] === 'string' ? params[0] : '';\n const options =\n typeof params[1] === 'object'\n ? params[1]\n : typeof params[1] === 'function'\n ? { onChange: params[1] }\n : typeof params[0] === 'object'\n ? params[0]\n : {};\n\n const enabled = options?.enabled ?? true;\n const mode = options?.mode ?? 'replace';\n\n const [hash, setHash] = useState(() => {\n if (typeof window === 'undefined') return initialValue;\n return getHash() || initialValue;\n });\n\n const optionsRef = useRef(options);\n optionsRef.current = options;\n\n const set = (value: string) => {\n window.location.hash = value;\n setHash(value);\n optionsRef.current?.onChange?.(value);\n };\n\n useEffect(() => {\n if (!enabled) return;\n\n if (mode === 'replace') window.location.hash = hash;\n\n const onHashChange = () => {\n const newHash = getHash();\n setHash(newHash);\n optionsRef.current?.onChange?.(newHash);\n };\n\n window.addEventListener('hashchange', onHashChange);\n return () => {\n window.removeEventListener('hashchange', onHashChange);\n };\n }, [enabled, mode]);\n\n return [hash, set] as const;\n}) as UseHash;\n"],"names":["getHash","useHash","params","initialValue","options","enabled","mode","hash","setHash","useState","optionsRef","useRef","set","value","useEffect","onHashChange","newHash"],"mappings":";AAEO,MAAMA,IAAU,MAAM,mBAAmB,OAAO,SAAS,KAAK,QAAQ,KAAK,EAAE,CAAC,GAmExEC,KAAW,IAAIC,MAAkB;AAC5C,QAAMC,IAAe,OAAOD,EAAO,CAAC,KAAM,WAAWA,EAAO,CAAC,IAAI,IAC3DE,IACJ,OAAOF,EAAO,CAAC,KAAM,WACjBA,EAAO,CAAC,IACR,OAAOA,EAAO,CAAC,KAAM,aACnB,EAAE,UAAUA,EAAO,CAAC,EAAA,IACpB,OAAOA,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,CAAA,GAEJG,IAAUD,GAAS,WAAW,IAC9BE,IAAOF,GAAS,QAAQ,WAExB,CAACG,GAAMC,CAAO,IAAIC,EAAS,MAC3B,OAAO,SAAW,MAAoBN,IACnCH,OAAaG,CACrB,GAEKO,IAAaC,EAAOP,CAAO;AACjC,EAAAM,EAAW,UAAUN;AAErB,QAAMQ,IAAM,CAACC,MAAkB;AAC7B,WAAO,SAAS,OAAOA,GACvBL,EAAQK,CAAK,GACbH,EAAW,SAAS,WAAWG,CAAK;AAAA,EAAA;AAGtC,SAAAC,EAAU,MAAM;AACd,QAAI,CAACT,EAAS;AAEd,IAAIC,MAAS,cAAW,OAAO,SAAS,OAAOC;AAE/C,UAAMQ,IAAe,MAAM;AACzB,YAAMC,IAAUhB,EAAA;AAChB,MAAAQ,EAAQQ,CAAO,GACfN,EAAW,SAAS,WAAWM,CAAO;AAAA,IAAA;AAGxC,kBAAO,iBAAiB,cAAcD,CAAY,GAC3C,MAAM;AACX,aAAO,oBAAoB,cAAcA,CAAY;AAAA,IAAA;AAAA,EACvD,GACC,CAACV,GAASC,CAAI,CAAC,GAEX,CAACC,GAAMK,CAAG;AACnB;"}
|
|
@@ -1,29 +1,37 @@
|
|
|
1
1
|
import { useRef as m, useEffect as w } from "react";
|
|
2
|
-
import { useEvent as
|
|
2
|
+
import { useEvent as L } from "../useEvent/useEvent.mjs";
|
|
3
3
|
import { useRefState as E } from "../useRefState/useRefState.mjs";
|
|
4
|
-
import { isTarget as
|
|
5
|
-
const h = (
|
|
6
|
-
(r) =>
|
|
4
|
+
import { isTarget as d } from "../../utils/helpers/isTarget.mjs";
|
|
5
|
+
const h = (o, t) => o.toLowerCase().split(/[+_,\-]/g).map((r) => r.trim()).every(
|
|
6
|
+
(r) => t.find(
|
|
7
7
|
(s) => r === s.code.toLocaleLowerCase() || r === s.key.toLocaleLowerCase() || r === s.alias.toLocaleLowerCase()
|
|
8
8
|
)
|
|
9
|
-
), M = (...
|
|
10
|
-
const
|
|
9
|
+
), M = ((...o) => {
|
|
10
|
+
const t = d(o[0]) ? o[0] : void 0, r = t ? o[1] : o[0], s = t ? o[2] : o[1], y = t ? o[3] : o[2], i = E(window), n = m([]), u = y?.enabled ?? !0, f = L((e) => {
|
|
11
11
|
if (!u || n.current.some(({ code: c }) => c === e.code)) return;
|
|
12
|
-
const
|
|
13
|
-
n.current =
|
|
14
|
-
}),
|
|
15
|
-
u && (n.current = n.current.filter(({ code:
|
|
12
|
+
const l = y?.alias?.[e.key] ?? e.code, k = [...n.current, { key: e.key, code: e.code, alias: l }];
|
|
13
|
+
n.current = k, r.split(",").map((c) => c.trim()).some((c) => h(c, k)) && (e.preventDefault(), s(e));
|
|
14
|
+
}), a = L((e) => {
|
|
15
|
+
u && (n.current = n.current.filter(({ code: l }) => l !== e.code));
|
|
16
16
|
});
|
|
17
17
|
if (w(() => {
|
|
18
|
-
if (n.current = [], !
|
|
19
|
-
const e =
|
|
18
|
+
if (n.current = [], !t && !i.state && !u) return;
|
|
19
|
+
const e = t ? d.getElement(t) : i.current;
|
|
20
20
|
if (e)
|
|
21
|
-
return e.addEventListener("keydown", f), e.addEventListener("keyup",
|
|
22
|
-
e.removeEventListener("keydown", f), e.removeEventListener("keyup",
|
|
21
|
+
return e.addEventListener("keydown", f), e.addEventListener("keyup", a), () => {
|
|
22
|
+
e.removeEventListener("keydown", f), e.removeEventListener("keyup", a);
|
|
23
23
|
};
|
|
24
|
-
}, [
|
|
24
|
+
}, [
|
|
25
|
+
t,
|
|
26
|
+
i.state,
|
|
27
|
+
d.getRefState(t),
|
|
28
|
+
u,
|
|
29
|
+
r,
|
|
30
|
+
f,
|
|
31
|
+
a
|
|
32
|
+
]), !t)
|
|
25
33
|
return i;
|
|
26
|
-
};
|
|
34
|
+
});
|
|
27
35
|
export {
|
|
28
36
|
h as isHotkeyMatch,
|
|
29
37
|
M as useHotkeys
|