@plurid/plurid-functions-react 0.0.0-2 → 0.0.0-5

package/distribution/hooks/index.d.ts

@@ -2,5 +2,5 @@ import { useWindowEvent, useGlobalKeyDown, useGlobalWheel, useElementEvent } fro
 import useDebouncedCallback from './debounce';
 import useThrottledCallback from './throttle';
 import usePortal from './portal';
-import { useFalseAfterTimedTrue } from './general';
-export { useWindowEvent, useGlobalKeyDown, useGlobalWheel, useElementEvent, useDebouncedCallback, useThrottledCallback, usePortal, useFalseAfterTimedTrue, };
+export * from './general';
+export { useWindowEvent, useGlobalKeyDown, useGlobalWheel, useElementEvent, useDebouncedCallback, useThrottledCallback, usePortal, };

package/distribution/index.es.js

@@ -257,6 +257,14 @@ const useMounted = () => {
 };
 // #endregion exports
 
+// #region module
+const createMarkup = (text) => {
+    return {
+        __html: text,
+    };
+};
+// #endregion exports
+
 // #region module
 /**
  * Merges multiple references into one `ref` attribute.
@@ -292,5 +300,5 @@ const mergeReferences = (...refs) => {
 };
 // #endregion exports
 
-export { mergeReferences, useDebouncedCallback, useElementEvent, useFalseAfterTimedTrue, useGlobalKeyDown, useGlobalWheel, usePortal, useThrottledCallback, useWindowEvent };
+export { createMarkup, mergeReferences, useDebouncedCallback, useElementEvent, useFalseAfterTimedTrue, useGlobalKeyDown, useGlobalWheel, useMounted, usePortal, useThrottledCallback, useWindowEvent };
 //# sourceMappingURL=index.es.js.map

package/distribution/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../source/hooks/event/index.ts","../source/hooks/debounce/index.ts","../source/hooks/throttle/index.ts","../source/hooks/portal/index.tsx","../source/hooks/general/index.ts","../source/utilities/mergeReferences/index.ts"],"sourcesContent":["// #region imports\nimport {\n    useEffect,\n} from 'react';\n// #endregion imports\n\n\n\n// #region module\nexport const useWindowEvent = (\n    event: any,\n    callback: any,\n) => {\n    useEffect(() => {\n        if (typeof window === 'undefined') {\n            return;\n        }\n        window.addEventListener(event, callback, { passive: false });\n\n        return () => {\n            if (typeof window === 'undefined') {\n                return;\n            }\n            window.removeEventListener(event, callback);\n        }\n    }, [\n        event,\n        callback,\n    ]);\n};\n\n\nexport const useElementEvent = (\n    event: any,\n    element: any,\n    callback: any,\n) => {\n    useEffect(() => {\n        if (element) {\n            element.addEventListener(event, callback, { passive: false });\n        }\n        return () => element.removeEventListener(event, callback);\n    }, [event, callback]);\n}\n\nexport const useGlobalKeyDown = (\n    callback: any,\n    element?: any,\n) => {\n    // if (!element) {\n    //     return useWindowEvent('keydown', callback);\n    // }\n\n    return useElementEvent(\n        'keydown',\n        element,\n        callback,\n    );\n}\n\nexport const useGlobalWheel = (\n    callback: any,\n    element?: any,\n) => {\n    // if (!element) {\n    //     return useWindowEvent('wheel', callback);\n    // }\n\n    return useElementEvent(\n        'wheel',\n        element,\n        callback,\n    );\n}\n// #endregion module\n","// #region imports\nimport {\n    useRef,\n    useEffect,\n} from 'react';\n// #endregion imports\n\n\n\n// #region module\n/**\n * Source: https://stackoverflow.com/a/57335271\n *\n * @param callback Function to be called.\n * @param wait Debounce time.\n */\nfunction useDebouncedCallback<A extends any[]>(\n    callback: (...args: A) => void,\n    wait: number,\n) {\n    // track args & timeout handle between calls\n    const argsRef = useRef<A>();\n    const timeout = useRef<ReturnType<typeof setTimeout>>();\n\n    function cleanup() {\n        if(timeout.current) {\n            clearTimeout(timeout.current);\n        }\n    }\n\n    // make sure our timeout gets cleared if\n    // our consuming component gets unmounted\n    useEffect(() => cleanup, []);\n\n    return function debouncedCallback(\n        ...args: A\n    ) {\n        // capture latest args\n        argsRef.current = args;\n\n        // clear debounce timer\n        cleanup();\n\n        // start waiting again\n        timeout.current = setTimeout(() => {\n            if(argsRef.current) {\n                callback(...argsRef.current);\n            }\n        }, wait);\n    };\n}\n// #endregion module\n\n\n\n// #region exports\nexport default useDebouncedCallback;\n// #endregion exports\n","// #region imports\nimport {\n    useEffect,\n    useRef,\n} from 'react';\n// #endregion imports\n\n\n\n// #region module\n/**\n * @param callback\n * @param delay\n */\nconst useThrottledCallback = <A extends any[]>(\n    callback: (...args: A) => void,\n    delay: number,\n) => {\n    // track args & timeout handle between calls\n    const lastRan = useRef(Date.now());\n    const argsRef = useRef<A>();\n    const timeout = useRef<ReturnType<typeof setTimeout>>();\n\n    const cleanup = () => {\n        if(timeout.current) {\n            clearTimeout(timeout.current);\n        }\n    }\n\n    useEffect(() => cleanup, []);\n\n    return (\n        ...args: A\n    ) => {\n        argsRef.current = args;\n\n        timeout.current = setTimeout(\n            () => {\n                if (Date.now() - lastRan.current >= delay) {\n                    if(argsRef.current) {\n                        callback(...argsRef.current);\n                    }\n                    lastRan.current = Date.now();\n                }\n            },\n            delay - (Date.now() - lastRan.current)\n        );\n    };\n}\n// #endregion module\n\n\n\n// #region exports\nexport default useThrottledCallback;\n// #endregion exports\n","/**\n * Based on\n * https://www.jayfreestone.com/writing/react-portals-with-hooks/\n *\n */\n\n\n// #region imports\nimport {\n    useRef,\n    useEffect,\n} from 'react';\n// #endregion imports\n\n\n\n// #region module\nconst createRootElement = (\n    id: string,\n): Element => {\n    const rootContainer = document.createElement('div');\n    rootContainer.setAttribute('id', id);\n    return rootContainer;\n}\n\n\n/**\n * Appends element as last child of body.\n *\n * @param rootElement\n */\nconst addRootElement = (\n    rootElement: Element,\n    parentID: string,\n) => {\n    const parent = document.getElementById(parentID);\n\n    if (parent) {\n        parent.appendChild(rootElement);\n    }\n}\n\n\n/**\n * Hook to create a React Portal.\n * Automatically handles creating and tearing-down the root elements (no SRR\n * makes this trivial), so there is no need to ensure the parent target already\n * exists.\n * @example\n * const target = usePortal(id, [id]);\n * return createPortal(children, target);\n *\n * @param id    The id of the target container, e.g 'modal' or 'spotlight'\n * @returns     The DOM node to use as the Portal target.\n */\nconst usePortal = (\n    id: string,\n    parentID: string,\n): any => {\n    const rootElemRef = useRef<Element | null>(null);\n\n    useEffect(() => {\n        // Look for existing target dom element to append to\n        const existingParent = document.querySelector(`#${id}`);\n        // Parent is either a new root or the existing dom element\n        const parentElem = existingParent || createRootElement(id);\n\n        // If there is no existing DOM element, add a new one.\n        if (!existingParent) {\n            addRootElement(parentElem, parentID);\n        }\n\n        // Add the detached element to the parent\n        if (rootElemRef.current) {\n            parentElem.appendChild(rootElemRef.current);\n        }\n\n        return () => {\n            if (rootElemRef.current) {\n                rootElemRef.current.remove();\n            }\n\n            if (parentElem.childNodes.length === -1) {\n                parentElem.remove();\n            }\n        };\n    }, []);\n\n    /**\n     * It's important we evaluate this lazily:\n     * - We need first render to contain the DOM element, so it shouldn't happen\n     *   in useEffect. We would normally put this in the constructor().\n     * - We can't do 'const rootElemRef = useRef(document.createElement('div))',\n     *   since this will run every single render (that's a lot).\n     * - We want the ref to consistently point to the same DOM element and only\n     *   ever run once.\n     * @link https://reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily\n     */\n    const getRootElem = () => {\n        if (!rootElemRef.current) {\n            rootElemRef.current = document.createElement('div');\n        }\n        return rootElemRef.current;\n    }\n\n    return getRootElem();\n}\n// #endregion module\n\n\n\n// #region exports\nexport default usePortal;\n// #endregion exports\n","// #region imports\n    // #region libraries\n    import React, {\n        useRef,\n        useState,\n        useEffect,\n    } from 'react';\n    // #endregion libraries\n// #region imports\n\n\n\n// #region module\n/**\n * After a `true` dispatch, it will wait the `intervalTime` and autoset to `false`.\n *\n * @param intervalTime\n * @returns\n */\nconst useFalseAfterTimedTrue = (\n    intervalTime = 2_000, // ms\n): [boolean, React.Dispatch<React.SetStateAction<boolean>>] => {\n    // #region references\n    const mounted = useMounted();\n    // #endregion references\n\n    // #region state\n    const [\n        disabledAfterActivation,\n        setDisabledAfterActivation,\n    ] = useState(false);\n    // #endregion state\n\n    // #region effects\n    useEffect(() => {\n        let timeout: NodeJS.Timeout | undefined;\n\n        if (disabledAfterActivation) {\n            timeout = setTimeout(() => {\n                if (!mounted) {\n                    return;\n                }\n\n                setDisabledAfterActivation(false);\n            }, intervalTime);\n        }\n\n        return () => {\n            if (timeout) {\n                clearTimeout(timeout);\n                timeout = undefined;\n            }\n        }\n    }, [\n        disabledAfterActivation,\n    ]);\n    // #endregion effects\n\n    // #region return\n    return [\n        disabledAfterActivation,\n        setDisabledAfterActivation,\n    ];\n    // #endregion return\n}\n\n\n/**\n * Keeps reference of the current mounted component.\n *\n * @returns\n */\nconst useMounted = () => {\n    // #region references\n    const isMounted = useRef(false);\n    // #endregion references\n\n    // #region effects\n    useEffect(() => {\n        isMounted.current = true;\n\n        return () => {\n            isMounted.current = false;\n        }\n    }, []);\n    // #endregion effects\n\n    // #region return\n    return isMounted.current;\n    // #endregion return\n}\n// #endregion module\n\n\n\n// #region exports\nexport {\n    useFalseAfterTimedTrue,\n    useMounted,\n};\n// #endregion exports\n","// #region module\n/**\n * Merges multiple references into one `ref` attribute.\n *\n * ``` jsx\n * <SomeComponent\n *     ref={merge(ref1, ref2)}\n * />\n * ```\n *\n * Source: https://www.davedrinks.coffee/how-do-i-use-two-react-refs/\n *\n * @param refs\n */\nconst mergeReferences = (\n    ...refs: any[]\n) => {\n    const filteredRefs = refs.filter(Boolean);\n\n    if (!filteredRefs.length) {\n        return null;\n    }\n\n    if (filteredRefs.length === 1) {\n        return filteredRefs[0];\n    }\n\n    return (inst: any) => {\n        for (const ref of filteredRefs) {\n            if (typeof ref === 'function') {\n                ref(inst);\n            } else if (ref) {\n                ref.current = inst;\n            }\n        }\n    };\n};\n// #endregion module\n\n\n\n// #region exports\nexport default mergeReferences;\n// #endregion exports\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.es.js","sources":["../source/hooks/event/index.ts","../source/hooks/debounce/index.ts","../source/hooks/throttle/index.ts","../source/hooks/portal/index.tsx","../source/hooks/general/index.ts","../source/utilities/createMarkup/index.ts","../source/utilities/mergeReferences/index.ts"],"sourcesContent":["// #region imports\nimport {\n    useEffect,\n} from 'react';\n// #endregion imports\n\n\n\n// #region module\nexport const useWindowEvent = (\n    event: any,\n    callback: any,\n) => {\n    useEffect(() => {\n        if (typeof window === 'undefined') {\n            return;\n        }\n        window.addEventListener(event, callback, { passive: false });\n\n        return () => {\n            if (typeof window === 'undefined') {\n                return;\n            }\n            window.removeEventListener(event, callback);\n        }\n    }, [\n        event,\n        callback,\n    ]);\n};\n\n\nexport const useElementEvent = (\n    event: any,\n    element: any,\n    callback: any,\n) => {\n    useEffect(() => {\n        if (element) {\n            element.addEventListener(event, callback, { passive: false });\n        }\n        return () => element.removeEventListener(event, callback);\n    }, [event, callback]);\n}\n\nexport const useGlobalKeyDown = (\n    callback: any,\n    element?: any,\n) => {\n    // if (!element) {\n    //     return useWindowEvent('keydown', callback);\n    // }\n\n    return useElementEvent(\n        'keydown',\n        element,\n        callback,\n    );\n}\n\nexport const useGlobalWheel = (\n    callback: any,\n    element?: any,\n) => {\n    // if (!element) {\n    //     return useWindowEvent('wheel', callback);\n    // }\n\n    return useElementEvent(\n        'wheel',\n        element,\n        callback,\n    );\n}\n// #endregion module\n","// #region imports\nimport {\n    useRef,\n    useEffect,\n} from 'react';\n// #endregion imports\n\n\n\n// #region module\n/**\n * Source: https://stackoverflow.com/a/57335271\n *\n * @param callback Function to be called.\n * @param wait Debounce time.\n */\nfunction useDebouncedCallback<A extends any[]>(\n    callback: (...args: A) => void,\n    wait: number,\n) {\n    // track args & timeout handle between calls\n    const argsRef = useRef<A>();\n    const timeout = useRef<ReturnType<typeof setTimeout>>();\n\n    function cleanup() {\n        if(timeout.current) {\n            clearTimeout(timeout.current);\n        }\n    }\n\n    // make sure our timeout gets cleared if\n    // our consuming component gets unmounted\n    useEffect(() => cleanup, []);\n\n    return function debouncedCallback(\n        ...args: A\n    ) {\n        // capture latest args\n        argsRef.current = args;\n\n        // clear debounce timer\n        cleanup();\n\n        // start waiting again\n        timeout.current = setTimeout(() => {\n            if(argsRef.current) {\n                callback(...argsRef.current);\n            }\n        }, wait);\n    };\n}\n// #endregion module\n\n\n\n// #region exports\nexport default useDebouncedCallback;\n// #endregion exports\n","// #region imports\nimport {\n    useEffect,\n    useRef,\n} from 'react';\n// #endregion imports\n\n\n\n// #region module\n/**\n * @param callback\n * @param delay\n */\nconst useThrottledCallback = <A extends any[]>(\n    callback: (...args: A) => void,\n    delay: number,\n) => {\n    // track args & timeout handle between calls\n    const lastRan = useRef(Date.now());\n    const argsRef = useRef<A>();\n    const timeout = useRef<ReturnType<typeof setTimeout>>();\n\n    const cleanup = () => {\n        if(timeout.current) {\n            clearTimeout(timeout.current);\n        }\n    }\n\n    useEffect(() => cleanup, []);\n\n    return (\n        ...args: A\n    ) => {\n        argsRef.current = args;\n\n        timeout.current = setTimeout(\n            () => {\n                if (Date.now() - lastRan.current >= delay) {\n                    if(argsRef.current) {\n                        callback(...argsRef.current);\n                    }\n                    lastRan.current = Date.now();\n                }\n            },\n            delay - (Date.now() - lastRan.current)\n        );\n    };\n}\n// #endregion module\n\n\n\n// #region exports\nexport default useThrottledCallback;\n// #endregion exports\n","/**\n * Based on\n * https://www.jayfreestone.com/writing/react-portals-with-hooks/\n *\n */\n\n\n// #region imports\nimport {\n    useRef,\n    useEffect,\n} from 'react';\n// #endregion imports\n\n\n\n// #region module\nconst createRootElement = (\n    id: string,\n): Element => {\n    const rootContainer = document.createElement('div');\n    rootContainer.setAttribute('id', id);\n    return rootContainer;\n}\n\n\n/**\n * Appends element as last child of body.\n *\n * @param rootElement\n */\nconst addRootElement = (\n    rootElement: Element,\n    parentID: string,\n) => {\n    const parent = document.getElementById(parentID);\n\n    if (parent) {\n        parent.appendChild(rootElement);\n    }\n}\n\n\n/**\n * Hook to create a React Portal.\n * Automatically handles creating and tearing-down the root elements (no SRR\n * makes this trivial), so there is no need to ensure the parent target already\n * exists.\n * @example\n * const target = usePortal(id, [id]);\n * return createPortal(children, target);\n *\n * @param id    The id of the target container, e.g 'modal' or 'spotlight'\n * @returns     The DOM node to use as the Portal target.\n */\nconst usePortal = (\n    id: string,\n    parentID: string,\n): any => {\n    const rootElemRef = useRef<Element | null>(null);\n\n    useEffect(() => {\n        // Look for existing target dom element to append to\n        const existingParent = document.querySelector(`#${id}`);\n        // Parent is either a new root or the existing dom element\n        const parentElem = existingParent || createRootElement(id);\n\n        // If there is no existing DOM element, add a new one.\n        if (!existingParent) {\n            addRootElement(parentElem, parentID);\n        }\n\n        // Add the detached element to the parent\n        if (rootElemRef.current) {\n            parentElem.appendChild(rootElemRef.current);\n        }\n\n        return () => {\n            if (rootElemRef.current) {\n                rootElemRef.current.remove();\n            }\n\n            if (parentElem.childNodes.length === -1) {\n                parentElem.remove();\n            }\n        };\n    }, []);\n\n    /**\n     * It's important we evaluate this lazily:\n     * - We need first render to contain the DOM element, so it shouldn't happen\n     *   in useEffect. We would normally put this in the constructor().\n     * - We can't do 'const rootElemRef = useRef(document.createElement('div))',\n     *   since this will run every single render (that's a lot).\n     * - We want the ref to consistently point to the same DOM element and only\n     *   ever run once.\n     * @link https://reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily\n     */\n    const getRootElem = () => {\n        if (!rootElemRef.current) {\n            rootElemRef.current = document.createElement('div');\n        }\n        return rootElemRef.current;\n    }\n\n    return getRootElem();\n}\n// #endregion module\n\n\n\n// #region exports\nexport default usePortal;\n// #endregion exports\n","// #region imports\n    // #region libraries\n    import React, {\n        useRef,\n        useState,\n        useEffect,\n    } from 'react';\n    // #endregion libraries\n// #region imports\n\n\n\n// #region module\n/**\n * After a `true` dispatch, it will wait the `intervalTime` and autoset to `false`.\n *\n * @param intervalTime\n * @returns\n */\nconst useFalseAfterTimedTrue = (\n    intervalTime = 2_000, // ms\n): [boolean, React.Dispatch<React.SetStateAction<boolean>>] => {\n    // #region references\n    const mounted = useMounted();\n    // #endregion references\n\n    // #region state\n    const [\n        disabledAfterActivation,\n        setDisabledAfterActivation,\n    ] = useState(false);\n    // #endregion state\n\n    // #region effects\n    useEffect(() => {\n        let timeout: NodeJS.Timeout | undefined;\n\n        if (disabledAfterActivation) {\n            timeout = setTimeout(() => {\n                if (!mounted) {\n                    return;\n                }\n\n                setDisabledAfterActivation(false);\n            }, intervalTime);\n        }\n\n        return () => {\n            if (timeout) {\n                clearTimeout(timeout);\n                timeout = undefined;\n            }\n        }\n    }, [\n        disabledAfterActivation,\n    ]);\n    // #endregion effects\n\n    // #region return\n    return [\n        disabledAfterActivation,\n        setDisabledAfterActivation,\n    ];\n    // #endregion return\n}\n\n\n/**\n * Keeps reference of the current mounted component.\n *\n * @returns\n */\nconst useMounted = () => {\n    // #region references\n    const isMounted = useRef(false);\n    // #endregion references\n\n    // #region effects\n    useEffect(() => {\n        isMounted.current = true;\n\n        return () => {\n            isMounted.current = false;\n        }\n    }, []);\n    // #endregion effects\n\n    // #region return\n    return isMounted.current;\n    // #endregion return\n}\n// #endregion module\n\n\n\n// #region exports\nexport {\n    useFalseAfterTimedTrue,\n    useMounted,\n};\n// #endregion exports\n","// #region module\nconst createMarkup = (\n    text: string,\n) => {\n    return {\n        __html: text,\n    };\n}\n// #endregion module\n\n\n\n// #region exports\nexport default createMarkup;\n// #endregion exports\n","// #region module\n/**\n * Merges multiple references into one `ref` attribute.\n *\n * ``` jsx\n * <SomeComponent\n *     ref={merge(ref1, ref2)}\n * />\n * ```\n *\n * Source: https://www.davedrinks.coffee/how-do-i-use-two-react-refs/\n *\n * @param refs\n */\nconst mergeReferences = (\n    ...refs: any[]\n) => {\n    const filteredRefs = refs.filter(Boolean);\n\n    if (!filteredRefs.length) {\n        return null;\n    }\n\n    if (filteredRefs.length === 1) {\n        return filteredRefs[0];\n    }\n\n    return (inst: any) => {\n        for (const ref of filteredRefs) {\n            if (typeof ref === 'function') {\n                ref(inst);\n            } else if (ref) {\n                ref.current = inst;\n            }\n        }\n    };\n};\n// #endregion module\n\n\n\n// #region exports\nexport default mergeReferences;\n// #endregion exports\n"],"names":[],"mappings":"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"}

package/distribution/index.js

@@ -261,6 +261,14 @@ const useMounted = () => {
 };
 // #endregion exports
 
+// #region module
+const createMarkup = (text) => {
+    return {
+        __html: text,
+    };
+};
+// #endregion exports
+
 // #region module
 /**
  * Merges multiple references into one `ref` attribute.
@@ -296,12 +304,14 @@ const mergeReferences = (...refs) => {
 };
 // #endregion exports
 
+exports.createMarkup = createMarkup;
 exports.mergeReferences = mergeReferences;
 exports.useDebouncedCallback = useDebouncedCallback;
 exports.useElementEvent = useElementEvent;
 exports.useFalseAfterTimedTrue = useFalseAfterTimedTrue;
 exports.useGlobalKeyDown = useGlobalKeyDown;
 exports.useGlobalWheel = useGlobalWheel;
+exports.useMounted = useMounted;
 exports.usePortal = usePortal;
 exports.useThrottledCallback = useThrottledCallback;
 exports.useWindowEvent = useWindowEvent;

package/distribution/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../source/hooks/event/index.ts","../source/hooks/debounce/index.ts","../source/hooks/throttle/index.ts","../source/hooks/portal/index.tsx","../source/hooks/general/index.ts","../source/utilities/mergeReferences/index.ts"],"sourcesContent":["// #region imports\nimport {\n    useEffect,\n} from 'react';\n// #endregion imports\n\n\n\n// #region module\nexport const useWindowEvent = (\n    event: any,\n    callback: any,\n) => {\n    useEffect(() => {\n        if (typeof window === 'undefined') {\n            return;\n        }\n        window.addEventListener(event, callback, { passive: false });\n\n        return () => {\n            if (typeof window === 'undefined') {\n                return;\n            }\n            window.removeEventListener(event, callback);\n        }\n    }, [\n        event,\n        callback,\n    ]);\n};\n\n\nexport const useElementEvent = (\n    event: any,\n    element: any,\n    callback: any,\n) => {\n    useEffect(() => {\n        if (element) {\n            element.addEventListener(event, callback, { passive: false });\n        }\n        return () => element.removeEventListener(event, callback);\n    }, [event, callback]);\n}\n\nexport const useGlobalKeyDown = (\n    callback: any,\n    element?: any,\n) => {\n    // if (!element) {\n    //     return useWindowEvent('keydown', callback);\n    // }\n\n    return useElementEvent(\n        'keydown',\n        element,\n        callback,\n    );\n}\n\nexport const useGlobalWheel = (\n    callback: any,\n    element?: any,\n) => {\n    // if (!element) {\n    //     return useWindowEvent('wheel', callback);\n    // }\n\n    return useElementEvent(\n        'wheel',\n        element,\n        callback,\n    );\n}\n// #endregion module\n","// #region imports\nimport {\n    useRef,\n    useEffect,\n} from 'react';\n// #endregion imports\n\n\n\n// #region module\n/**\n * Source: https://stackoverflow.com/a/57335271\n *\n * @param callback Function to be called.\n * @param wait Debounce time.\n */\nfunction useDebouncedCallback<A extends any[]>(\n    callback: (...args: A) => void,\n    wait: number,\n) {\n    // track args & timeout handle between calls\n    const argsRef = useRef<A>();\n    const timeout = useRef<ReturnType<typeof setTimeout>>();\n\n    function cleanup() {\n        if(timeout.current) {\n            clearTimeout(timeout.current);\n        }\n    }\n\n    // make sure our timeout gets cleared if\n    // our consuming component gets unmounted\n    useEffect(() => cleanup, []);\n\n    return function debouncedCallback(\n        ...args: A\n    ) {\n        // capture latest args\n        argsRef.current = args;\n\n        // clear debounce timer\n        cleanup();\n\n        // start waiting again\n        timeout.current = setTimeout(() => {\n            if(argsRef.current) {\n                callback(...argsRef.current);\n            }\n        }, wait);\n    };\n}\n// #endregion module\n\n\n\n// #region exports\nexport default useDebouncedCallback;\n// #endregion exports\n","// #region imports\nimport {\n    useEffect,\n    useRef,\n} from 'react';\n// #endregion imports\n\n\n\n// #region module\n/**\n * @param callback\n * @param delay\n */\nconst useThrottledCallback = <A extends any[]>(\n    callback: (...args: A) => void,\n    delay: number,\n) => {\n    // track args & timeout handle between calls\n    const lastRan = useRef(Date.now());\n    const argsRef = useRef<A>();\n    const timeout = useRef<ReturnType<typeof setTimeout>>();\n\n    const cleanup = () => {\n        if(timeout.current) {\n            clearTimeout(timeout.current);\n        }\n    }\n\n    useEffect(() => cleanup, []);\n\n    return (\n        ...args: A\n    ) => {\n        argsRef.current = args;\n\n        timeout.current = setTimeout(\n            () => {\n                if (Date.now() - lastRan.current >= delay) {\n                    if(argsRef.current) {\n                        callback(...argsRef.current);\n                    }\n                    lastRan.current = Date.now();\n                }\n            },\n            delay - (Date.now() - lastRan.current)\n        );\n    };\n}\n// #endregion module\n\n\n\n// #region exports\nexport default useThrottledCallback;\n// #endregion exports\n","/**\n * Based on\n * https://www.jayfreestone.com/writing/react-portals-with-hooks/\n *\n */\n\n\n// #region imports\nimport {\n    useRef,\n    useEffect,\n} from 'react';\n// #endregion imports\n\n\n\n// #region module\nconst createRootElement = (\n    id: string,\n): Element => {\n    const rootContainer = document.createElement('div');\n    rootContainer.setAttribute('id', id);\n    return rootContainer;\n}\n\n\n/**\n * Appends element as last child of body.\n *\n * @param rootElement\n */\nconst addRootElement = (\n    rootElement: Element,\n    parentID: string,\n) => {\n    const parent = document.getElementById(parentID);\n\n    if (parent) {\n        parent.appendChild(rootElement);\n    }\n}\n\n\n/**\n * Hook to create a React Portal.\n * Automatically handles creating and tearing-down the root elements (no SRR\n * makes this trivial), so there is no need to ensure the parent target already\n * exists.\n * @example\n * const target = usePortal(id, [id]);\n * return createPortal(children, target);\n *\n * @param id    The id of the target container, e.g 'modal' or 'spotlight'\n * @returns     The DOM node to use as the Portal target.\n */\nconst usePortal = (\n    id: string,\n    parentID: string,\n): any => {\n    const rootElemRef = useRef<Element | null>(null);\n\n    useEffect(() => {\n        // Look for existing target dom element to append to\n        const existingParent = document.querySelector(`#${id}`);\n        // Parent is either a new root or the existing dom element\n        const parentElem = existingParent || createRootElement(id);\n\n        // If there is no existing DOM element, add a new one.\n        if (!existingParent) {\n            addRootElement(parentElem, parentID);\n        }\n\n        // Add the detached element to the parent\n        if (rootElemRef.current) {\n            parentElem.appendChild(rootElemRef.current);\n        }\n\n        return () => {\n            if (rootElemRef.current) {\n                rootElemRef.current.remove();\n            }\n\n            if (parentElem.childNodes.length === -1) {\n                parentElem.remove();\n            }\n        };\n    }, []);\n\n    /**\n     * It's important we evaluate this lazily:\n     * - We need first render to contain the DOM element, so it shouldn't happen\n     *   in useEffect. We would normally put this in the constructor().\n     * - We can't do 'const rootElemRef = useRef(document.createElement('div))',\n     *   since this will run every single render (that's a lot).\n     * - We want the ref to consistently point to the same DOM element and only\n     *   ever run once.\n     * @link https://reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily\n     */\n    const getRootElem = () => {\n        if (!rootElemRef.current) {\n            rootElemRef.current = document.createElement('div');\n        }\n        return rootElemRef.current;\n    }\n\n    return getRootElem();\n}\n// #endregion module\n\n\n\n// #region exports\nexport default usePortal;\n// #endregion exports\n","// #region imports\n    // #region libraries\n    import React, {\n        useRef,\n        useState,\n        useEffect,\n    } from 'react';\n    // #endregion libraries\n// #region imports\n\n\n\n// #region module\n/**\n * After a `true` dispatch, it will wait the `intervalTime` and autoset to `false`.\n *\n * @param intervalTime\n * @returns\n */\nconst useFalseAfterTimedTrue = (\n    intervalTime = 2_000, // ms\n): [boolean, React.Dispatch<React.SetStateAction<boolean>>] => {\n    // #region references\n    const mounted = useMounted();\n    // #endregion references\n\n    // #region state\n    const [\n        disabledAfterActivation,\n        setDisabledAfterActivation,\n    ] = useState(false);\n    // #endregion state\n\n    // #region effects\n    useEffect(() => {\n        let timeout: NodeJS.Timeout | undefined;\n\n        if (disabledAfterActivation) {\n            timeout = setTimeout(() => {\n                if (!mounted) {\n                    return;\n                }\n\n                setDisabledAfterActivation(false);\n            }, intervalTime);\n        }\n\n        return () => {\n            if (timeout) {\n                clearTimeout(timeout);\n                timeout = undefined;\n            }\n        }\n    }, [\n        disabledAfterActivation,\n    ]);\n    // #endregion effects\n\n    // #region return\n    return [\n        disabledAfterActivation,\n        setDisabledAfterActivation,\n    ];\n    // #endregion return\n}\n\n\n/**\n * Keeps reference of the current mounted component.\n *\n * @returns\n */\nconst useMounted = () => {\n    // #region references\n    const isMounted = useRef(false);\n    // #endregion references\n\n    // #region effects\n    useEffect(() => {\n        isMounted.current = true;\n\n        return () => {\n            isMounted.current = false;\n        }\n    }, []);\n    // #endregion effects\n\n    // #region return\n    return isMounted.current;\n    // #endregion return\n}\n// #endregion module\n\n\n\n// #region exports\nexport {\n    useFalseAfterTimedTrue,\n    useMounted,\n};\n// #endregion exports\n","// #region module\n/**\n * Merges multiple references into one `ref` attribute.\n *\n * ``` jsx\n * <SomeComponent\n *     ref={merge(ref1, ref2)}\n * />\n * ```\n *\n * Source: https://www.davedrinks.coffee/how-do-i-use-two-react-refs/\n *\n * @param refs\n */\nconst mergeReferences = (\n    ...refs: any[]\n) => {\n    const filteredRefs = refs.filter(Boolean);\n\n    if (!filteredRefs.length) {\n        return null;\n    }\n\n    if (filteredRefs.length === 1) {\n        return filteredRefs[0];\n    }\n\n    return (inst: any) => {\n        for (const ref of filteredRefs) {\n            if (typeof ref === 'function') {\n                ref(inst);\n            } else if (ref) {\n                ref.current = inst;\n            }\n        }\n    };\n};\n// #endregion module\n\n\n\n// #region exports\nexport default mergeReferences;\n// #endregion exports\n"],"names":["useEffect","useRef","useState"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../source/hooks/event/index.ts","../source/hooks/debounce/index.ts","../source/hooks/throttle/index.ts","../source/hooks/portal/index.tsx","../source/hooks/general/index.ts","../source/utilities/createMarkup/index.ts","../source/utilities/mergeReferences/index.ts"],"sourcesContent":["// #region imports\nimport {\n    useEffect,\n} from 'react';\n// #endregion imports\n\n\n\n// #region module\nexport const useWindowEvent = (\n    event: any,\n    callback: any,\n) => {\n    useEffect(() => {\n        if (typeof window === 'undefined') {\n            return;\n        }\n        window.addEventListener(event, callback, { passive: false });\n\n        return () => {\n            if (typeof window === 'undefined') {\n                return;\n            }\n            window.removeEventListener(event, callback);\n        }\n    }, [\n        event,\n        callback,\n    ]);\n};\n\n\nexport const useElementEvent = (\n    event: any,\n    element: any,\n    callback: any,\n) => {\n    useEffect(() => {\n        if (element) {\n            element.addEventListener(event, callback, { passive: false });\n        }\n        return () => element.removeEventListener(event, callback);\n    }, [event, callback]);\n}\n\nexport const useGlobalKeyDown = (\n    callback: any,\n    element?: any,\n) => {\n    // if (!element) {\n    //     return useWindowEvent('keydown', callback);\n    // }\n\n    return useElementEvent(\n        'keydown',\n        element,\n        callback,\n    );\n}\n\nexport const useGlobalWheel = (\n    callback: any,\n    element?: any,\n) => {\n    // if (!element) {\n    //     return useWindowEvent('wheel', callback);\n    // }\n\n    return useElementEvent(\n        'wheel',\n        element,\n        callback,\n    );\n}\n// #endregion module\n","// #region imports\nimport {\n    useRef,\n    useEffect,\n} from 'react';\n// #endregion imports\n\n\n\n// #region module\n/**\n * Source: https://stackoverflow.com/a/57335271\n *\n * @param callback Function to be called.\n * @param wait Debounce time.\n */\nfunction useDebouncedCallback<A extends any[]>(\n    callback: (...args: A) => void,\n    wait: number,\n) {\n    // track args & timeout handle between calls\n    const argsRef = useRef<A>();\n    const timeout = useRef<ReturnType<typeof setTimeout>>();\n\n    function cleanup() {\n        if(timeout.current) {\n            clearTimeout(timeout.current);\n        }\n    }\n\n    // make sure our timeout gets cleared if\n    // our consuming component gets unmounted\n    useEffect(() => cleanup, []);\n\n    return function debouncedCallback(\n        ...args: A\n    ) {\n        // capture latest args\n        argsRef.current = args;\n\n        // clear debounce timer\n        cleanup();\n\n        // start waiting again\n        timeout.current = setTimeout(() => {\n            if(argsRef.current) {\n                callback(...argsRef.current);\n            }\n        }, wait);\n    };\n}\n// #endregion module\n\n\n\n// #region exports\nexport default useDebouncedCallback;\n// #endregion exports\n","// #region imports\nimport {\n    useEffect,\n    useRef,\n} from 'react';\n// #endregion imports\n\n\n\n// #region module\n/**\n * @param callback\n * @param delay\n */\nconst useThrottledCallback = <A extends any[]>(\n    callback: (...args: A) => void,\n    delay: number,\n) => {\n    // track args & timeout handle between calls\n    const lastRan = useRef(Date.now());\n    const argsRef = useRef<A>();\n    const timeout = useRef<ReturnType<typeof setTimeout>>();\n\n    const cleanup = () => {\n        if(timeout.current) {\n            clearTimeout(timeout.current);\n        }\n    }\n\n    useEffect(() => cleanup, []);\n\n    return (\n        ...args: A\n    ) => {\n        argsRef.current = args;\n\n        timeout.current = setTimeout(\n            () => {\n                if (Date.now() - lastRan.current >= delay) {\n                    if(argsRef.current) {\n                        callback(...argsRef.current);\n                    }\n                    lastRan.current = Date.now();\n                }\n            },\n            delay - (Date.now() - lastRan.current)\n        );\n    };\n}\n// #endregion module\n\n\n\n// #region exports\nexport default useThrottledCallback;\n// #endregion exports\n","/**\n * Based on\n * https://www.jayfreestone.com/writing/react-portals-with-hooks/\n *\n */\n\n\n// #region imports\nimport {\n    useRef,\n    useEffect,\n} from 'react';\n// #endregion imports\n\n\n\n// #region module\nconst createRootElement = (\n    id: string,\n): Element => {\n    const rootContainer = document.createElement('div');\n    rootContainer.setAttribute('id', id);\n    return rootContainer;\n}\n\n\n/**\n * Appends element as last child of body.\n *\n * @param rootElement\n */\nconst addRootElement = (\n    rootElement: Element,\n    parentID: string,\n) => {\n    const parent = document.getElementById(parentID);\n\n    if (parent) {\n        parent.appendChild(rootElement);\n    }\n}\n\n\n/**\n * Hook to create a React Portal.\n * Automatically handles creating and tearing-down the root elements (no SRR\n * makes this trivial), so there is no need to ensure the parent target already\n * exists.\n * @example\n * const target = usePortal(id, [id]);\n * return createPortal(children, target);\n *\n * @param id    The id of the target container, e.g 'modal' or 'spotlight'\n * @returns     The DOM node to use as the Portal target.\n */\nconst usePortal = (\n    id: string,\n    parentID: string,\n): any => {\n    const rootElemRef = useRef<Element | null>(null);\n\n    useEffect(() => {\n        // Look for existing target dom element to append to\n        const existingParent = document.querySelector(`#${id}`);\n        // Parent is either a new root or the existing dom element\n        const parentElem = existingParent || createRootElement(id);\n\n        // If there is no existing DOM element, add a new one.\n        if (!existingParent) {\n            addRootElement(parentElem, parentID);\n        }\n\n        // Add the detached element to the parent\n        if (rootElemRef.current) {\n            parentElem.appendChild(rootElemRef.current);\n        }\n\n        return () => {\n            if (rootElemRef.current) {\n                rootElemRef.current.remove();\n            }\n\n            if (parentElem.childNodes.length === -1) {\n                parentElem.remove();\n            }\n        };\n    }, []);\n\n    /**\n     * It's important we evaluate this lazily:\n     * - We need first render to contain the DOM element, so it shouldn't happen\n     *   in useEffect. We would normally put this in the constructor().\n     * - We can't do 'const rootElemRef = useRef(document.createElement('div))',\n     *   since this will run every single render (that's a lot).\n     * - We want the ref to consistently point to the same DOM element and only\n     *   ever run once.\n     * @link https://reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily\n     */\n    const getRootElem = () => {\n        if (!rootElemRef.current) {\n            rootElemRef.current = document.createElement('div');\n        }\n        return rootElemRef.current;\n    }\n\n    return getRootElem();\n}\n// #endregion module\n\n\n\n// #region exports\nexport default usePortal;\n// #endregion exports\n","// #region imports\n    // #region libraries\n    import React, {\n        useRef,\n        useState,\n        useEffect,\n    } from 'react';\n    // #endregion libraries\n// #region imports\n\n\n\n// #region module\n/**\n * After a `true` dispatch, it will wait the `intervalTime` and autoset to `false`.\n *\n * @param intervalTime\n * @returns\n */\nconst useFalseAfterTimedTrue = (\n    intervalTime = 2_000, // ms\n): [boolean, React.Dispatch<React.SetStateAction<boolean>>] => {\n    // #region references\n    const mounted = useMounted();\n    // #endregion references\n\n    // #region state\n    const [\n        disabledAfterActivation,\n        setDisabledAfterActivation,\n    ] = useState(false);\n    // #endregion state\n\n    // #region effects\n    useEffect(() => {\n        let timeout: NodeJS.Timeout | undefined;\n\n        if (disabledAfterActivation) {\n            timeout = setTimeout(() => {\n                if (!mounted) {\n                    return;\n                }\n\n                setDisabledAfterActivation(false);\n            }, intervalTime);\n        }\n\n        return () => {\n            if (timeout) {\n                clearTimeout(timeout);\n                timeout = undefined;\n            }\n        }\n    }, [\n        disabledAfterActivation,\n    ]);\n    // #endregion effects\n\n    // #region return\n    return [\n        disabledAfterActivation,\n        setDisabledAfterActivation,\n    ];\n    // #endregion return\n}\n\n\n/**\n * Keeps reference of the current mounted component.\n *\n * @returns\n */\nconst useMounted = () => {\n    // #region references\n    const isMounted = useRef(false);\n    // #endregion references\n\n    // #region effects\n    useEffect(() => {\n        isMounted.current = true;\n\n        return () => {\n            isMounted.current = false;\n        }\n    }, []);\n    // #endregion effects\n\n    // #region return\n    return isMounted.current;\n    // #endregion return\n}\n// #endregion module\n\n\n\n// #region exports\nexport {\n    useFalseAfterTimedTrue,\n    useMounted,\n};\n// #endregion exports\n","// #region module\nconst createMarkup = (\n    text: string,\n) => {\n    return {\n        __html: text,\n    };\n}\n// #endregion module\n\n\n\n// #region exports\nexport default createMarkup;\n// #endregion exports\n","// #region module\n/**\n * Merges multiple references into one `ref` attribute.\n *\n * ``` jsx\n * <SomeComponent\n *     ref={merge(ref1, ref2)}\n * />\n * ```\n *\n * Source: https://www.davedrinks.coffee/how-do-i-use-two-react-refs/\n *\n * @param refs\n */\nconst mergeReferences = (\n    ...refs: any[]\n) => {\n    const filteredRefs = refs.filter(Boolean);\n\n    if (!filteredRefs.length) {\n        return null;\n    }\n\n    if (filteredRefs.length === 1) {\n        return filteredRefs[0];\n    }\n\n    return (inst: any) => {\n        for (const ref of filteredRefs) {\n            if (typeof ref === 'function') {\n                ref(inst);\n            } else if (ref) {\n                ref.current = inst;\n            }\n        }\n    };\n};\n// #endregion module\n\n\n\n// #region exports\nexport default mergeReferences;\n// #endregion exports\n"],"names":["useEffect","useRef","useState"],"mappings":"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"}

package/distribution/utilities/createMarkup/index.d.ts

@@ -0,0 +1,4 @@
+declare const createMarkup: (text: string) => {
+    __html: string;
+};
+export default createMarkup;

package/distribution/utilities/index.d.ts

@@ -1,2 +1,3 @@
+import createMarkup from './createMarkup';
 import mergeReferences from './mergeReferences';
-export { mergeReferences, };
+export { createMarkup, mergeReferences, };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@plurid/plurid-functions-react",
-    "version": "0.0.0-2",
+    "version": "0.0.0-5",
     "description": "General Utility Functions for Plurid React Applications",
     "keywords": [
         "plurid",
@@ -36,31 +36,31 @@
         "test": "jest -c ./configurations/jest.config.js ./source",
         "test.suite": "jest -c ./configurations/jest.config.js",
         "clean": "rm -rf ./distribution",
-        "watch": "yarn clean && rollup -c ./scripts/rollup.config.js -w",
+        "watch": "pnpm clean && rollup -c ./scripts/rollup.config.js -w",
         "build.clean": "find ./distribution -type d -name '*__tests__' -exec rm -rf {} + && find ./distribution -type f -name '*.DS_Store' -exec rm -rf {} +",
         "build.production": "rollup -c ./scripts/rollup.config.js",
-        "build": "yarn clean && yarn build.production && yarn build.clean",
-        "prepublishOnly": "yarn build"
+        "build": "pnpm clean && pnpm build.production && pnpm build.clean",
+        "prepublishOnly": "pnpm build"
     },
     "peerDependencies": {
         "react": ">=17"
     },
     "devDependencies": {
-        "@types/crypto-js": "^4.0.2",
-        "@types/jest": "^27.0.2",
-        "@types/node": "^16.9.6",
-        "@types/react": "^17.0.24",
-        "@typescript-eslint/eslint-plugin": "^4.31.2",
-        "@typescript-eslint/parser": "^4.31.2",
+        "@types/crypto-js": "^4.1.1",
+        "@types/jest": "^27.4.1",
+        "@types/node": "^17.0.24",
+        "@types/react": "^18.0.5",
+        "@typescript-eslint/eslint-plugin": "^5.19.0",
+        "@typescript-eslint/parser": "^5.19.0",
         "@zerollup/ts-transform-paths": "^1.7.18",
-        "eslint": "^7.32.0",
-        "jest": "^27.2.1",
-        "react": "^17.0.2",
-        "rollup": "^2.57.0",
-        "rollup-plugin-typescript2": "^0.30.0",
-        "ts-jest": "^27.0.5",
-        "ts-node": "^10.2.1",
-        "ttypescript": "^1.5.12",
-        "typescript": "^4.4.3"
+        "eslint": "^8.13.0",
+        "jest": "^27.5.1",
+        "react": "^18.0.0",
+        "rollup": "^2.70.2",
+        "rollup-plugin-typescript2": "^0.31.2",
+        "ts-jest": "^27.1.4",
+        "ts-node": "^10.7.0",
+        "ttypescript": "^1.5.13",
+        "typescript": "^4.6.3"
     }
 }