@jobber/hooks 2.17.4 → 2.18.0

package/dist/useDebounce/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var useDebounce = require('../useDebounce-cjs.js');
+require('react');
+require('../useCallbackRef-cjs.js');
+
+
+
+exports.useDebounce = useDebounce.useDebounce;

package/dist/useDebounce/index.mjs

@@ -0,0 +1,3 @@
+export { u as useDebounce } from '../useDebounce-es.js';
+import 'react';
+import '../useCallbackRef-es.js';

package/dist/useDebounce-cjs.js

@@ -0,0 +1,92 @@
+'use strict';
+
+var require$$1 = require('react');
+var useCallbackRef = require('./useCallbackRef-cjs.js');
+
+function debounce(func, debounceMs, { signal, edges } = {}) {
+    let pendingThis = undefined;
+    let pendingArgs = null;
+    const leading = edges != null && edges.includes('leading');
+    const trailing = edges == null || edges.includes('trailing');
+    const invoke = () => {
+        if (pendingArgs !== null) {
+            func.apply(pendingThis, pendingArgs);
+            pendingThis = undefined;
+            pendingArgs = null;
+        }
+    };
+    const onTimerEnd = () => {
+        if (trailing) {
+            invoke();
+        }
+        cancel();
+    };
+    let timeoutId = null;
+    const schedule = () => {
+        if (timeoutId != null) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+            timeoutId = null;
+            onTimerEnd();
+        }, debounceMs);
+    };
+    const cancelTimer = () => {
+        if (timeoutId !== null) {
+            clearTimeout(timeoutId);
+            timeoutId = null;
+        }
+    };
+    const cancel = () => {
+        cancelTimer();
+        pendingThis = undefined;
+        pendingArgs = null;
+    };
+    const flush = () => {
+        cancelTimer();
+        invoke();
+    };
+    const debounced = function (...args) {
+        if (signal?.aborted) {
+            return;
+        }
+        pendingThis = this;
+        pendingArgs = args;
+        const isFirstCall = timeoutId == null;
+        schedule();
+        if (leading && isFirstCall) {
+            invoke();
+        }
+    };
+    debounced.schedule = schedule;
+    debounced.cancel = cancel;
+    debounced.flush = flush;
+    signal?.addEventListener('abort', cancel, { once: true });
+    return debounced;
+}
+
+/**
+ * A hook to easily manage debounced functions, including their cleanup.
+ * @param func The function to debounce.
+ * @param wait The number of milliseconds to delay.
+ * @param options Optional debounce settings.
+ * @returns The debounced function.
+ */
+function useDebounce(func, wait, options) {
+    const funcRef = useCallbackRef.useCallbackRef(func);
+    // Note: do not add additional dependencies! There is currently no use case where we would change
+    // the wait delay or options between renders. By not tracking as dependencies, this allows
+    // consumers of useDebounce to provide a raw object for options rather than forcing them to
+    // memoize that param. Same with the func they provide, we're using a ref to keep that up
+    // to date and to avoid forcing the consumer to memoize it.
+    const debounced = require$$1.useMemo(() => {
+        return debounce((...args) => funcRef(...args), wait, options);
+    }, [funcRef]);
+    require$$1.useEffect(() => {
+        // If the debounced function is recreated (or unmounted), cancel the last call.
+        return () => debounced.cancel();
+    }, [debounced]);
+    return debounced;
+}
+
+exports.useDebounce = useDebounce;

package/dist/useDebounce-es.js

@@ -0,0 +1,90 @@
+import { useMemo, useEffect } from 'react';
+import { u as useCallbackRef } from './useCallbackRef-es.js';
+
+function debounce(func, debounceMs, { signal, edges } = {}) {
+    let pendingThis = undefined;
+    let pendingArgs = null;
+    const leading = edges != null && edges.includes('leading');
+    const trailing = edges == null || edges.includes('trailing');
+    const invoke = () => {
+        if (pendingArgs !== null) {
+            func.apply(pendingThis, pendingArgs);
+            pendingThis = undefined;
+            pendingArgs = null;
+        }
+    };
+    const onTimerEnd = () => {
+        if (trailing) {
+            invoke();
+        }
+        cancel();
+    };
+    let timeoutId = null;
+    const schedule = () => {
+        if (timeoutId != null) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+            timeoutId = null;
+            onTimerEnd();
+        }, debounceMs);
+    };
+    const cancelTimer = () => {
+        if (timeoutId !== null) {
+            clearTimeout(timeoutId);
+            timeoutId = null;
+        }
+    };
+    const cancel = () => {
+        cancelTimer();
+        pendingThis = undefined;
+        pendingArgs = null;
+    };
+    const flush = () => {
+        cancelTimer();
+        invoke();
+    };
+    const debounced = function (...args) {
+        if (signal?.aborted) {
+            return;
+        }
+        pendingThis = this;
+        pendingArgs = args;
+        const isFirstCall = timeoutId == null;
+        schedule();
+        if (leading && isFirstCall) {
+            invoke();
+        }
+    };
+    debounced.schedule = schedule;
+    debounced.cancel = cancel;
+    debounced.flush = flush;
+    signal?.addEventListener('abort', cancel, { once: true });
+    return debounced;
+}
+
+/**
+ * A hook to easily manage debounced functions, including their cleanup.
+ * @param func The function to debounce.
+ * @param wait The number of milliseconds to delay.
+ * @param options Optional debounce settings.
+ * @returns The debounced function.
+ */
+function useDebounce(func, wait, options) {
+    const funcRef = useCallbackRef(func);
+    // Note: do not add additional dependencies! There is currently no use case where we would change
+    // the wait delay or options between renders. By not tracking as dependencies, this allows
+    // consumers of useDebounce to provide a raw object for options rather than forcing them to
+    // memoize that param. Same with the func they provide, we're using a ref to keep that up
+    // to date and to avoid forcing the consumer to memoize it.
+    const debounced = useMemo(() => {
+        return debounce((...args) => funcRef(...args), wait, options);
+    }, [funcRef]);
+    useEffect(() => {
+        // If the debounced function is recreated (or unmounted), cancel the last call.
+        return () => debounced.cancel();
+    }, [debounced]);
+    return debounced;
+}
+
+export { useDebounce as u };

package/dist/useFocusTrap/index.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+var useFocusTrap = require('../useFocusTrap-cjs.js');
+require('react');
+
+
+
+exports.useFocusTrap = useFocusTrap.useFocusTrap;

package/dist/useFocusTrap/index.mjs

@@ -0,0 +1,2 @@
+export { u as useFocusTrap } from '../useFocusTrap-es.js';
+import 'react';

package/dist/{useFocusTrap/useFocusTrap.js → useFocusTrap-cjs.js}

@@ -1,7 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFocusTrap = useFocusTrap;
-const react_1 = require("react");
+'use strict';
+
+var require$$1 = require('react');
+
 /**
  * Traps the focus within the children of the ref element.
  *
@@ -14,7 +14,7 @@ function useFocusTrap(active) {
     // There's an ongoing issue with useRef return type clashing with an element's
     // ref prop type. TLDR: Use null because useRef doesn't expect undefined.
     // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/35572
-    const ref = (0, react_1.useRef)(null);
+    const ref = require$$1.useRef(null);
     function handleKeyDown(event) {
         if (!(active && ref.current) || event.key !== "Tab") {
             return;
@@ -33,7 +33,7 @@ function useFocusTrap(active) {
             }
         }
     }
-    (0, react_1.useEffect)(() => {
+    require$$1.useEffect(() => {
         if (active && ref.current) {
             const { firstElement } = getElements(ref.current);
             firstElement.focus();
@@ -66,3 +66,5 @@ function getElements(ref) {
     const lastElement = elements[elements.length - 1];
     return { firstElement, lastElement };
 }
+
+exports.useFocusTrap = useFocusTrap;

package/dist/useFocusTrap-es.js

@@ -0,0 +1,68 @@
+import { useRef, useEffect } from 'react';
+
+/**
+ * Traps the focus within the children of the ref element.
+ *
+ * @param active - Turns the focus trapping on or off. Also adds aria-hidden on the
+ * body but not the dialog.
+ *
+ * @returns ref
+ */
+function useFocusTrap(active) {
+    // There's an ongoing issue with useRef return type clashing with an element's
+    // ref prop type. TLDR: Use null because useRef doesn't expect undefined.
+    // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/35572
+    const ref = useRef(null);
+    function handleKeyDown(event) {
+        if (!(active && ref.current) || event.key !== "Tab") {
+            return;
+        }
+        const { firstElement, lastElement } = getElements(ref.current);
+        if (event.shiftKey) {
+            if (document.activeElement === firstElement) {
+                lastElement.focus();
+                event.preventDefault();
+            }
+        }
+        else {
+            if (document.activeElement === lastElement) {
+                firstElement.focus();
+                event.preventDefault();
+            }
+        }
+    }
+    useEffect(() => {
+        if (active && ref.current) {
+            const { firstElement } = getElements(ref.current);
+            firstElement.focus();
+            ref.current.addEventListener("keydown", handleKeyDown);
+        }
+        return () => {
+            var _a;
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [active]);
+    return ref;
+}
+function getElements(ref) {
+    const focusables = [
+        "button",
+        "[href]",
+        "input",
+        "select",
+        "textarea",
+        '[tabindex]:not([tabindex="-1"])',
+    ];
+    const elements = [
+        ...ref.querySelectorAll(focusables.join(", ")),
+    ];
+    // If the ref is focusable, ensure it's the first element to be focused.
+    if (ref.getAttribute("tabindex") === "0") {
+        elements.unshift(ref);
+    }
+    const firstElement = elements[0];
+    const lastElement = elements[elements.length - 1];
+    return { firstElement, lastElement };
+}
+
+export { useFocusTrap as u };

package/dist/useFormState/index.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+var useFormState = require('../useFormState-cjs.js');
+require('react');
+
+
+
+exports.useFormState = useFormState.useFormState;

package/dist/useFormState/index.mjs

@@ -0,0 +1,2 @@
+export { u as useFormState } from '../useFormState-es.js';
+import 'react';

package/dist/useFormState-cjs.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var require$$1 = require('react');
+
+function useFormState() {
+    const [formState, setFormState] = require$$1.useState({
+        isDirty: false,
+        isValid: false,
+    });
+    return [formState, setFormState];
+}
+
+exports.useFormState = useFormState;

package/dist/useFormState-es.js

@@ -0,0 +1,11 @@
+import { useState } from 'react';
+
+function useFormState() {
+    const [formState, setFormState] = useState({
+        isDirty: false,
+        isValid: false,
+    });
+    return [formState, setFormState];
+}
+
+export { useFormState as u };

package/dist/useInView/index.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+var useInView = require('../useInView-cjs.js');
+require('react');
+
+
+
+exports.useInView = useInView.useInView;

package/dist/useInView/index.mjs

@@ -0,0 +1,2 @@
+export { u as useInView } from '../useInView-es.js';
+import 'react';

package/dist/{useInView/useInView.js → useInView-cjs.js}

@@ -1,12 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useInView = useInView;
-const react_1 = require("react");
+'use strict';
+
+var require$$1 = require('react');
+
 function useInView() {
-    const ref = (0, react_1.useRef)(null);
-    const [isInView, setIsInView] = (0, react_1.useState)(false);
-    const handleIntersection = (0, react_1.useCallback)(entries => setIsInView(entries[0].isIntersecting), [setIsInView]);
-    (0, react_1.useEffect)(() => {
+    const ref = require$$1.useRef(null);
+    const [isInView, setIsInView] = require$$1.useState(false);
+    const handleIntersection = require$$1.useCallback(entries => setIsInView(entries[0].isIntersecting), [setIsInView]);
+    require$$1.useEffect(() => {
         if (!window.IntersectionObserver)
             return;
         const observer = new IntersectionObserver(handleIntersection);
@@ -17,3 +17,5 @@ function useInView() {
     }, [handleIntersection, ref.current]);
     return [ref, isInView];
 }
+
+exports.useInView = useInView;

package/dist/useInView-es.js

@@ -0,0 +1,19 @@
+import { useRef, useState, useCallback, useEffect } from 'react';
+
+function useInView() {
+    const ref = useRef(null);
+    const [isInView, setIsInView] = useState(false);
+    const handleIntersection = useCallback(entries => setIsInView(entries[0].isIntersecting), [setIsInView]);
+    useEffect(() => {
+        if (!window.IntersectionObserver)
+            return;
+        const observer = new IntersectionObserver(handleIntersection);
+        ref.current && observer.observe(ref.current);
+        return () => {
+            ref.current && observer.unobserve(ref.current);
+        };
+    }, [handleIntersection, ref.current]);
+    return [ref, isInView];
+}
+
+export { useInView as u };

package/dist/useIsMounted/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var useIsMounted = require('../useIsMounted-cjs.js');
+require('react');
+require('../useSafeLayoutEffect-cjs.js');
+
+
+
+exports.useIsMounted = useIsMounted.useIsMounted;

package/dist/useIsMounted/index.mjs

@@ -0,0 +1,3 @@
+export { u as useIsMounted } from '../useIsMounted-es.js';
+import 'react';
+import '../useSafeLayoutEffect-es.js';

package/dist/{useIsMounted/useIsMounted.js → useIsMounted-cjs.js}

@@ -1,8 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIsMounted = useIsMounted;
-const react_1 = require("react");
-const useSafeLayoutEffect_1 = require("../useSafeLayoutEffect");
+'use strict';
+
+var require$$1 = require('react');
+var useSafeLayoutEffect = require('./useSafeLayoutEffect-cjs.js');
+
 /**
  * If you are using this hook in order to only perform an action once after mounting (for example sending
  * analytics events), use `useOnMount` instead
@@ -23,8 +23,8 @@ const useSafeLayoutEffect_1 = require("../useSafeLayoutEffect");
  * This `useLayoutEffect` hook will only be run once.
  */
 function useIsMounted() {
-    const isMounted = (0, react_1.useRef)(false);
-    (0, useSafeLayoutEffect_1.useSafeLayoutEffect)(() => {
+    const isMounted = require$$1.useRef(false);
+    useSafeLayoutEffect.useSafeLayoutEffect(() => {
         isMounted.current = true;
         return () => {
             isMounted.current = false;
@@ -32,3 +32,5 @@ function useIsMounted() {
     }, []);
     return isMounted;
 }
+
+exports.useIsMounted = useIsMounted;

package/dist/useIsMounted-es.js

@@ -0,0 +1,34 @@
+import { useRef } from 'react';
+import { u as useSafeLayoutEffect } from './useSafeLayoutEffect-es.js';
+
+/**
+ * If you are using this hook in order to only perform an action once after mounting (for example sending
+ * analytics events), use `useOnMount` instead
+ *
+ * Why does this work?
+ *
+ * The following is from the react docs:
+ *    [The return function from `useLayoutEffect`] is the optional cleanup mechanism for effects.
+ *    Every effect may return a function that cleans up after it.
+ *
+ *    When exactly does React clean up an effect? React performs the cleanup when the component unmounts.
+ *    The cleanup for useLayoutEffect is called after component unmounts and before before browser painting
+ *    the screen
+ *
+ * What does that mean for us? When this hook is initially loaded, we then trigger a `useLayoutEffect` that
+ * sets the isMounted to true right after the component is mounted.
+ * When the component unmounts, it calls the cleanup function that sets `isMounted` to false.
+ * This `useLayoutEffect` hook will only be run once.
+ */
+function useIsMounted() {
+    const isMounted = useRef(false);
+    useSafeLayoutEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    return isMounted;
+}
+
+export { useIsMounted as u };

package/dist/useLiveAnnounce/index.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+var useLiveAnnounce = require('../useLiveAnnounce-cjs.js');
+require('react');
+
+
+
+exports.useLiveAnnounce = useLiveAnnounce.useLiveAnnounce;

package/dist/useLiveAnnounce/index.mjs

@@ -0,0 +1,2 @@
+export { u as useLiveAnnounce } from '../useLiveAnnounce-es.js';
+import 'react';

package/dist/{useLiveAnnounce/useLiveAnnounce.js → useLiveAnnounce-cjs.js}

@@ -1,15 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useLiveAnnounce = useLiveAnnounce;
-const react_1 = require("react");
+'use strict';
+
+var require$$1 = require('react');
+
 /**
  * Announce a message on voice over whenever you do an action. This is
  * especially helpful when you have an action that adds or deletes an element
  * from the screen.
  */
 function useLiveAnnounce() {
-    const [announcedMessage, setAnnouncedMessage] = (0, react_1.useState)("");
-    (0, react_1.useEffect)(() => {
+    const [announcedMessage, setAnnouncedMessage] = require$$1.useState("");
+    require$$1.useEffect(() => {
         let target;
         if (announcedMessage) {
             target = createAnnouncedElement();
@@ -39,3 +39,5 @@ function createAnnouncedElement() {
     document.body.appendChild(el);
     return el;
 }
+
+exports.useLiveAnnounce = useLiveAnnounce;

package/dist/useLiveAnnounce-es.js

@@ -0,0 +1,41 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Announce a message on voice over whenever you do an action. This is
+ * especially helpful when you have an action that adds or deletes an element
+ * from the screen.
+ */
+function useLiveAnnounce() {
+    const [announcedMessage, setAnnouncedMessage] = useState("");
+    useEffect(() => {
+        let target;
+        if (announcedMessage) {
+            target = createAnnouncedElement();
+            setTimeout(() => target.append(announcedMessage), 100);
+        }
+        return () => target === null || target === void 0 ? void 0 : target.remove();
+    }, [announcedMessage]);
+    return {
+        liveAnnounce: (message) => {
+            setAnnouncedMessage(message);
+        },
+    };
+}
+// eslint-disable-next-line max-statements
+function createAnnouncedElement() {
+    const el = document.createElement("div");
+    el.style.position = "absolute";
+    el.style.width = "1px";
+    el.style.height = "1px";
+    el.style.overflow = "hidden";
+    el.style.clipPath = " inset(100%)";
+    el.style.whiteSpace = " nowrap";
+    el.style.top = "0";
+    el.setAttribute("role", "status");
+    el.setAttribute("aria-atomic", "true");
+    el.setAttribute("aria-live", "assertive");
+    document.body.appendChild(el);
+    return el;
+}
+
+export { useLiveAnnounce as u };

package/dist/useOnKeyDown/index.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+var useOnKeyDown = require('../useOnKeyDown-cjs.js');
+require('react');
+
+
+
+exports.useOnKeyDown = useOnKeyDown.useOnKeyDown;

package/dist/useOnKeyDown/index.mjs

@@ -0,0 +1,2 @@
+export { u as useOnKeyDown } from '../useOnKeyDown-es.js';
+import 'react';

package/dist/{useOnKeyDown/useOnKeyDown.js → useOnKeyDown-cjs.js}

@@ -1,9 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useOnKeyDown = useOnKeyDown;
-const react_1 = require("react");
+'use strict';
+
+var require$$1 = require('react');
+
 function useOnKeyDown(callback, keys) {
-    (0, react_1.useEffect)(() => {
+    require$$1.useEffect(() => {
         window.addEventListener("keydown", handler);
         return () => {
             window.removeEventListener("keydown", handler);
@@ -32,3 +32,5 @@ function useOnKeyDown(callback, keys) {
         }
     }
 }
+
+exports.useOnKeyDown = useOnKeyDown;

package/dist/useOnKeyDown-es.js

@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+
+function useOnKeyDown(callback, keys) {
+    useEffect(() => {
+        window.addEventListener("keydown", handler);
+        return () => {
+            window.removeEventListener("keydown", handler);
+        };
+    }, [handler]);
+    function handler(event) {
+        const keyboardEvent = event;
+        if (typeof keys === "string" && keyboardEvent.key === keys) {
+            callback(event);
+            return;
+        }
+        if (Array.isArray(keys) &&
+            keys.some(item => {
+                if (typeof item === "string")
+                    return keyboardEvent.key === item;
+                return Object.keys(item).every(index => keyboardEvent[index] === item[index]);
+            })) {
+            callback(event);
+            return;
+        }
+        if (!Array.isArray(keys) &&
+            typeof keys !== "string" &&
+            Object.keys(keys).every(index => keyboardEvent[index] === keys[index])) {
+            callback(event);
+            return;
+        }
+    }
+}
+
+export { useOnKeyDown as u };

package/dist/useOnMount/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var useOnMount = require('../useOnMount-cjs.js');
+require('react');
+require('../useCallbackRef-cjs.js');
+
+
+
+exports.useOnMount = useOnMount.useOnMount;

package/dist/useOnMount/index.mjs

@@ -0,0 +1,3 @@
+export { u as useOnMount } from '../useOnMount-es.js';
+import 'react';
+import '../useCallbackRef-es.js';