@w3ux/hooks 1.5.0 → 2.0.0-alpha.2

package/cjs/useOnResize.d.ts

@@ -1,6 +1,6 @@
-import { MutableRefObject } from "react";
+import { RefObject } from "react";
 interface UseOnResizeOptions {
-    outerElement?: MutableRefObject<HTMLElement | null | undefined>;
+    outerElement?: RefObject<HTMLElement | null>;
     throttle?: number;
 }
 export declare const useOnResize: (callback: () => void, options?: UseOnResizeOptions) => void;

package/cjs/useOnResize.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useOnResize.tsx"],"names":[],"mappings":";;;AAGA,iCAA4D;AAiBrD,MAAM,WAAW,GAAG,CACzB,QAAoB,EACpB,UAA8B,EAAE,EAChC,EAAE;IACF,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,gBAAgB,GAAG,GAAG,EAAE,GAAG,OAAO,CAAC;IACnE,MAAM,eAAe,GAAG,IAAA,cAAM,EAAS,CAAC,CAAC,CAAC;IAG1C,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QAGvB,IAAI,GAAG,GAAG,eAAe,CAAC,OAAO,GAAG,gBAAgB,EAAE,CAAC;YACrD,OAAO;QACT,CAAC;QAED,eAAe,CAAC,OAAO,GAAG,GAAG,CAAC;QAC9B,QAAQ,EAAE,CAAC;IACb,CAAC,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QAEb,MAAM,MAAM,GAAG,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,KAAI,MAAM,CAAC;QAG/C,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAGhD,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QACrD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC,CAAC;AACnC,CAAC,CAAC;AAhCW,QAAA,WAAW,eAgCtB","file":"useOnResize.js","sourcesContent":["/* @license Copyright 2024 w3ux authors & contributors\nSPDX-License-Identifier: GPL-3.0-only */\n\nimport { MutableRefObject, useEffect, useRef } from \"react\";\n\ninterface UseOnResizeOptions {\n  outerElement?: MutableRefObject<HTMLElement | null | undefined>;\n  throttle?: number;\n}\n\n/**\n * Custom hook that triggers a callback function when the specified element\n * or the window is resized.\n *\n * @param callback - The function to be executed on resize.\n * @param options - Optional parameters to customize the behavior:\n *   - outerElement: A ref to an HTMLElement to listen for resize events.\n *   - throttle: Optional duration in milliseconds to throttle the callback execution.\n *               Default is 100 milliseconds.\n */\nexport const useOnResize = (\n  callback: () => void,\n  options: UseOnResizeOptions = {}\n) => {\n  const { outerElement, throttle: throttleDuration = 100 } = options;\n  const lastExecutedRef = useRef<number>(0);\n\n  // Throttled resize handler to limit the frequency of callback execution.\n  const handleResize = () => {\n    const now = Date.now();\n\n    // Check if the callback can be executed based on the throttle duration.\n    if (now - lastExecutedRef.current < throttleDuration) {\n      return;\n    }\n\n    lastExecutedRef.current = now;\n    callback();\n  };\n\n  useEffect(() => {\n    // Determine the target for the resize event listener.\n    const target = outerElement?.current || window;\n\n    // Add the resize event listener when the component mounts.\n    target.addEventListener(\"resize\", handleResize);\n\n    // Clean up the event listener when the component unmounts.\n    return () => {\n      target.removeEventListener(\"resize\", handleResize);\n    };\n  }, [throttleDuration, callback]);\n};\n"]}
+{"version":3,"sources":["../src/useOnResize.tsx"],"names":[],"mappings":";;;AAGA,iCAAqD;AAiB9C,MAAM,WAAW,GAAG,CACzB,QAAoB,EACpB,UAA8B,EAAE,EAChC,EAAE;IACF,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,gBAAgB,GAAG,GAAG,EAAE,GAAG,OAAO,CAAC;IACnE,MAAM,eAAe,GAAG,IAAA,cAAM,EAAS,CAAC,CAAC,CAAC;IAG1C,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QAGvB,IAAI,GAAG,GAAG,eAAe,CAAC,OAAO,GAAG,gBAAgB,EAAE,CAAC;YACrD,OAAO;QACT,CAAC;QAED,eAAe,CAAC,OAAO,GAAG,GAAG,CAAC;QAC9B,QAAQ,EAAE,CAAC;IACb,CAAC,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QAEb,MAAM,MAAM,GAAG,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,KAAI,MAAM,CAAC;QAG/C,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAGhD,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QACrD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC,CAAC;AACnC,CAAC,CAAC;AAhCW,QAAA,WAAW,eAgCtB","file":"useOnResize.js","sourcesContent":["/* @license Copyright 2024 w3ux authors & contributors\nSPDX-License-Identifier: GPL-3.0-only */\n\nimport { RefObject, useEffect, useRef } from \"react\";\n\ninterface UseOnResizeOptions {\n  outerElement?: RefObject<HTMLElement | null>;\n  throttle?: number;\n}\n\n/**\n * Custom hook that triggers a callback function when the specified element\n * or the window is resized.\n *\n * @param callback - The function to be executed on resize.\n * @param options - Optional parameters to customize the behavior:\n *   - outerElement: A ref to an HTMLElement to listen for resize events.\n *   - throttle: Optional duration in milliseconds to throttle the callback execution.\n *               Default is 100 milliseconds.\n */\nexport const useOnResize = (\n  callback: () => void,\n  options: UseOnResizeOptions = {}\n) => {\n  const { outerElement, throttle: throttleDuration = 100 } = options;\n  const lastExecutedRef = useRef<number>(0);\n\n  // Throttled resize handler to limit the frequency of callback execution.\n  const handleResize = () => {\n    const now = Date.now();\n\n    // Check if the callback can be executed based on the throttle duration.\n    if (now - lastExecutedRef.current < throttleDuration) {\n      return;\n    }\n\n    lastExecutedRef.current = now;\n    callback();\n  };\n\n  useEffect(() => {\n    // Determine the target for the resize event listener.\n    const target = outerElement?.current || window;\n\n    // Add the resize event listener when the component mounts.\n    target.addEventListener(\"resize\", handleResize);\n\n    // Clean up the event listener when the component unmounts.\n    return () => {\n      target.removeEventListener(\"resize\", handleResize);\n    };\n  }, [throttleDuration, callback]);\n};\n"]}

package/cjs/useOutsideAlerter.d.ts

@@ -1,3 +1,3 @@
 import { type RefObject } from "react";
 import type { AnyFunction } from "@w3ux/types";
-export declare const useOutsideAlerter: (ref: RefObject<HTMLElement>, callback: AnyFunction, ignore?: string[]) => void;
+export declare const useOutsideAlerter: (ref: RefObject<HTMLElement | null>, callback: AnyFunction, ignore?: string[]) => void;

package/cjs/useOutsideAlerter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useOutsideAlerter.tsx"],"names":[],"mappings":";;;AAGA,iCAAkD;AAI3C,MAAM,iBAAiB,GAAG,CAC/B,GAA2B,EAC3B,QAAqB,EACrB,SAAmB,EAAE,EACrB,EAAE;IACF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,kBAAkB,GAAG,CAAC,EAAW,EAAE,EAAE;YACzC,IAAI,EAAE,EAAE,CAAC;gBACP,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAc,CAAC,EAAE,CAAC;oBAC5D,MAAM,MAAM,GAAG,EAAE,CAAC,MAAqB,CAAC;oBAGxC,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;oBAC7C,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CACzB,CAAC,CAAC,EAAE,EAAE,CACJ,CAAC,CAAC,WAAW,EAAE,KAAK,OAAO,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,IAAI,CAClE,CAAC;oBAEF,IAAI,CAAC,OAAO,EAAE,CAAC;wBACb,QAAQ,EAAE,CAAC;oBACb,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC3D,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAChE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;AACZ,CAAC,CAAC;AA7BW,QAAA,iBAAiB,qBA6B5B","file":"useOutsideAlerter.js","sourcesContent":["/* @license Copyright 2024 w3ux authors & contributors\nSPDX-License-Identifier: GPL-3.0-only */\n\nimport { useEffect, type RefObject } from \"react\";\nimport type { AnyFunction, AnyJson } from \"@w3ux/types\";\n\n// A hook that alerts clicks outside of the passed ref.\nexport const useOutsideAlerter = (\n  ref: RefObject<HTMLElement>,\n  callback: AnyFunction,\n  ignore: string[] = []\n) => {\n  useEffect(() => {\n    const handleClickOutside = (ev: AnyJson) => {\n      if (ev) {\n        if (ref.current && !ref.current.contains(ev.target as Node)) {\n          const target = ev.target as HTMLElement;\n          // Ignore tags with a name of `ignore`, or if there is a class of `ignore` in the parent\n          // tree.\n          const tagName = target.tagName.toLowerCase();\n          const ignored = ignore.some(\n            (i) =>\n              i.toLowerCase() === tagName || target.closest(`.${i}`) !== null\n          );\n\n          if (!ignored) {\n            callback();\n          }\n        }\n      }\n    };\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [ref]);\n};\n"]}
+{"version":3,"sources":["../src/useOutsideAlerter.tsx"],"names":[],"mappings":";;;AAGA,iCAAkD;AAI3C,MAAM,iBAAiB,GAAG,CAC/B,GAAkC,EAClC,QAAqB,EACrB,SAAmB,EAAE,EACrB,EAAE;IACF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,kBAAkB,GAAG,CAAC,EAAW,EAAE,EAAE;YACzC,IAAI,EAAE,EAAE,CAAC;gBACP,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAc,CAAC,EAAE,CAAC;oBAC5D,MAAM,MAAM,GAAG,EAAE,CAAC,MAAqB,CAAC;oBAGxC,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;oBAC7C,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CACzB,CAAC,CAAC,EAAE,EAAE,CACJ,CAAC,CAAC,WAAW,EAAE,KAAK,OAAO,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,IAAI,CAClE,CAAC;oBAEF,IAAI,CAAC,OAAO,EAAE,CAAC;wBACb,QAAQ,EAAE,CAAC;oBACb,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC3D,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAChE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;AACZ,CAAC,CAAC;AA7BW,QAAA,iBAAiB,qBA6B5B","file":"useOutsideAlerter.js","sourcesContent":["/* @license Copyright 2024 w3ux authors & contributors\nSPDX-License-Identifier: GPL-3.0-only */\n\nimport { useEffect, type RefObject } from \"react\";\nimport type { AnyFunction, AnyJson } from \"@w3ux/types\";\n\n// A hook that alerts clicks outside of the passed ref.\nexport const useOutsideAlerter = (\n  ref: RefObject<HTMLElement | null>,\n  callback: AnyFunction,\n  ignore: string[] = []\n) => {\n  useEffect(() => {\n    const handleClickOutside = (ev: AnyJson) => {\n      if (ev) {\n        if (ref.current && !ref.current.contains(ev.target as Node)) {\n          const target = ev.target as HTMLElement;\n          // Ignore tags with a name of `ignore`, or if there is a class of `ignore` in the parent\n          // tree.\n          const tagName = target.tagName.toLowerCase();\n          const ignored = ignore.some(\n            (i) =>\n              i.toLowerCase() === tagName || target.closest(`.${i}`) !== null\n          );\n\n          if (!ignored) {\n            callback();\n          }\n        }\n      }\n    };\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [ref]);\n};\n"]}

package/cjs/useSize.d.ts

@@ -1,9 +1,9 @@
-import type { MutableRefObject } from "react";
+import type { RefObject } from "react";
 interface UseSizeOptions {
-    outerElement?: MutableRefObject<HTMLElement | null | undefined>;
+    outerElement?: RefObject<HTMLElement | null>;
     throttle?: number;
 }
-export declare const useSize: (element: MutableRefObject<HTMLElement | null | undefined>, options?: UseSizeOptions) => {
+export declare const useSize: (element: RefObject<HTMLElement | null>, options?: UseSizeOptions) => {
     width: number;
     height: number;
 };

package/cjs/useSize.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useSize.tsx"],"names":[],"mappings":";;;AAIA,iCAAoD;AAU7C,MAAM,OAAO,GAAG,CACrB,OAAyD,EACzD,UAA0B,EAAE,EAC5B,EAAE;IACF,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,gBAAgB,GAAG,GAAG,EAAE,GAAG,OAAO,CAAC;IAInE,MAAM,OAAO,GAAG,CAAC,KAAyB,IAAI,EAAE,EAAE;QAChD,MAAM,KAAK,GAAG,CAAA,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,WAAW,KAAI,CAAC,CAAC;QACnC,MAAM,MAAM,GAAG,CAAA,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,YAAY,KAAI,CAAC,CAAC;QACrC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IAC3B,CAAC,CAAC;IAGF,MAAM,eAAe,GAAG,IAAA,cAAM,EAAS,CAAC,CAAC,CAAC;IAG1C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAC9B,OAAO,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAC,CAC1B,CAAC;IAGF,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACvB,IAAI,GAAG,GAAG,eAAe,CAAC,OAAO,GAAG,gBAAgB,EAAE,CAAC;YACrD,OAAO;QACT,CAAC;QAED,eAAe,CAAC,OAAO,GAAG,GAAG,CAAC;QAE9B,OAAO,CAAC,OAAO,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAC,CAAC,CAAC;IACrC,CAAC,CAAC;IAGF,IAAA,iBAAS,EAAC,GAAG,EAAE;QAGb,MAAM,SAAS,GAAG,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,KAAI,MAAM,CAAC;QAElD,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAGnD,OAAO,GAAG,EAAE;YACV,SAAS,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QACxD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,CAAC,CAAC,CAAC;IAG5B,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAlDW,QAAA,OAAO,WAkDlB","file":"useSize.js","sourcesContent":["/* @license Copyright 2024 w3ux authors & contributors\nSPDX-License-Identifier: GPL-3.0-only */\n\nimport type { MutableRefObject } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\n// Define the type for the options parameter.\ninterface UseSizeOptions {\n  outerElement?: MutableRefObject<HTMLElement | null | undefined>;\n  throttle?: number;\n}\n\n// Custom hook to get the width and height of a specified element. Updates the `size` state when the\n// specified \"outer element\" (or the window by default) resizes.\nexport const useSize = (\n  element: MutableRefObject<HTMLElement | null | undefined>,\n  options: UseSizeOptions = {}\n) => {\n  const { outerElement, throttle: throttleDuration = 100 } = options;\n\n  // Helper function to retrieve the width and height of an element\n  // If no element is found, default dimensions are set to 0.\n  const getSize = (el: HTMLElement | null = null) => {\n    const width = el?.offsetWidth || 0;\n    const height = el?.offsetHeight || 0;\n    return { width, height };\n  };\n\n  // Ref to store the last execution time of the `resizeThrottle` handler.\n  const lastExecutedRef = useRef<number>(0);\n\n  // State to store the current width and height of the specified element.\n  const [size, setSize] = useState<{ width: number; height: number }>(\n    getSize(element?.current)\n  );\n\n  // Throttle the resize event handler to limit how often size updates occur.\n  const handleResize = () => {\n    const now = Date.now();\n    if (now - lastExecutedRef.current < throttleDuration) {\n      return;\n    } // Exit if `throttleDuration` has not passed.\n\n    lastExecutedRef.current = now; // Update last execution time.\n\n    setSize(getSize(element?.current));\n  };\n\n  // Set up the resize event listener on mount and clean it up on unmount.\n  useEffect(() => {\n    // Determine the target for the resize event listener.\n    // If `outerElement` is provided, listen to its resize events; otherwise, listen to the window's.\n    const listenFor = outerElement?.current || window;\n\n    listenFor.addEventListener(\"resize\", handleResize);\n\n    // Clean up event listener when the component unmounts to avoid memory leaks.\n    return () => {\n      listenFor.removeEventListener(\"resize\", handleResize);\n    };\n  }, [outerElement?.current]);\n\n  // Return the current size of the element.\n  return size;\n};\n"]}
+{"version":3,"sources":["../src/useSize.tsx"],"names":[],"mappings":";;;AAIA,iCAAoD;AAU7C,MAAM,OAAO,GAAG,CACrB,OAAsC,EACtC,UAA0B,EAAE,EAC5B,EAAE;IACF,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,gBAAgB,GAAG,GAAG,EAAE,GAAG,OAAO,CAAC;IAInE,MAAM,OAAO,GAAG,CAAC,KAAyB,IAAI,EAAE,EAAE;QAChD,MAAM,KAAK,GAAG,CAAA,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,WAAW,KAAI,CAAC,CAAC;QACnC,MAAM,MAAM,GAAG,CAAA,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,YAAY,KAAI,CAAC,CAAC;QACrC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IAC3B,CAAC,CAAC;IAGF,MAAM,eAAe,GAAG,IAAA,cAAM,EAAS,CAAC,CAAC,CAAC;IAG1C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAC9B,OAAO,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAC,CAC1B,CAAC;IAGF,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACvB,IAAI,GAAG,GAAG,eAAe,CAAC,OAAO,GAAG,gBAAgB,EAAE,CAAC;YACrD,OAAO;QACT,CAAC;QAED,eAAe,CAAC,OAAO,GAAG,GAAG,CAAC;QAE9B,OAAO,CAAC,OAAO,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAC,CAAC,CAAC;IACrC,CAAC,CAAC;IAGF,IAAA,iBAAS,EAAC,GAAG,EAAE;QAGb,MAAM,SAAS,GAAG,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,KAAI,MAAM,CAAC;QAElD,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAGnD,OAAO,GAAG,EAAE;YACV,SAAS,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QACxD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,CAAC,CAAC,CAAC;IAG5B,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAlDW,QAAA,OAAO,WAkDlB","file":"useSize.js","sourcesContent":["/* @license Copyright 2024 w3ux authors & contributors\nSPDX-License-Identifier: GPL-3.0-only */\n\nimport type { RefObject } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\n// Define the type for the options parameter.\ninterface UseSizeOptions {\n  outerElement?: RefObject<HTMLElement | null>;\n  throttle?: number;\n}\n\n// Custom hook to get the width and height of a specified element. Updates the `size` state when the\n// specified \"outer element\" (or the window by default) resizes.\nexport const useSize = (\n  element: RefObject<HTMLElement | null>,\n  options: UseSizeOptions = {}\n) => {\n  const { outerElement, throttle: throttleDuration = 100 } = options;\n\n  // Helper function to retrieve the width and height of an element\n  // If no element is found, default dimensions are set to 0.\n  const getSize = (el: HTMLElement | null = null) => {\n    const width = el?.offsetWidth || 0;\n    const height = el?.offsetHeight || 0;\n    return { width, height };\n  };\n\n  // Ref to store the last execution time of the `resizeThrottle` handler.\n  const lastExecutedRef = useRef<number>(0);\n\n  // State to store the current width and height of the specified element.\n  const [size, setSize] = useState<{ width: number; height: number }>(\n    getSize(element?.current)\n  );\n\n  // Throttle the resize event handler to limit how often size updates occur.\n  const handleResize = () => {\n    const now = Date.now();\n    if (now - lastExecutedRef.current < throttleDuration) {\n      return;\n    } // Exit if `throttleDuration` has not passed.\n\n    lastExecutedRef.current = now; // Update last execution time.\n\n    setSize(getSize(element?.current));\n  };\n\n  // Set up the resize event listener on mount and clean it up on unmount.\n  useEffect(() => {\n    // Determine the target for the resize event listener.\n    // If `outerElement` is provided, listen to its resize events; otherwise, listen to the window's.\n    const listenFor = outerElement?.current || window;\n\n    listenFor.addEventListener(\"resize\", handleResize);\n\n    // Clean up event listener when the component unmounts to avoid memory leaks.\n    return () => {\n      listenFor.removeEventListener(\"resize\", handleResize);\n    };\n  }, [outerElement?.current]);\n\n  // Return the current size of the element.\n  return size;\n};\n"]}

package/mjs/useOnResize.d.ts

@@ -1,6 +1,6 @@
-import { MutableRefObject } from "react";
+import { RefObject } from "react";
 interface UseOnResizeOptions {
-    outerElement?: MutableRefObject<HTMLElement | null | undefined>;
+    outerElement?: RefObject<HTMLElement | null>;
     throttle?: number;
 }
 export declare const useOnResize: (callback: () => void, options?: UseOnResizeOptions) => void;

package/mjs/useOnResize.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useOnResize.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAoB,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAiB5D,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,QAAoB,EACpB,UAA8B,EAAE,EAChC,EAAE;IACF,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,gBAAgB,GAAG,GAAG,EAAE,GAAG,OAAO,CAAC;IACnE,MAAM,eAAe,GAAG,MAAM,CAAS,CAAC,CAAC,CAAC;IAG1C,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QAGvB,IAAI,GAAG,GAAG,eAAe,CAAC,OAAO,GAAG,gBAAgB,EAAE,CAAC;YACrD,OAAO;QACT,CAAC;QAED,eAAe,CAAC,OAAO,GAAG,GAAG,CAAC;QAC9B,QAAQ,EAAE,CAAC;IACb,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QAEb,MAAM,MAAM,GAAG,YAAY,EAAE,OAAO,IAAI,MAAM,CAAC;QAG/C,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAGhD,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QACrD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC,CAAC;AACnC,CAAC,CAAC","file":"useOnResize.js","sourcesContent":["/* @license Copyright 2024 w3ux authors & contributors\nSPDX-License-Identifier: GPL-3.0-only */\n\nimport { MutableRefObject, useEffect, useRef } from \"react\";\n\ninterface UseOnResizeOptions {\n  outerElement?: MutableRefObject<HTMLElement | null | undefined>;\n  throttle?: number;\n}\n\n/**\n * Custom hook that triggers a callback function when the specified element\n * or the window is resized.\n *\n * @param callback - The function to be executed on resize.\n * @param options - Optional parameters to customize the behavior:\n *   - outerElement: A ref to an HTMLElement to listen for resize events.\n *   - throttle: Optional duration in milliseconds to throttle the callback execution.\n *               Default is 100 milliseconds.\n */\nexport const useOnResize = (\n  callback: () => void,\n  options: UseOnResizeOptions = {}\n) => {\n  const { outerElement, throttle: throttleDuration = 100 } = options;\n  const lastExecutedRef = useRef<number>(0);\n\n  // Throttled resize handler to limit the frequency of callback execution.\n  const handleResize = () => {\n    const now = Date.now();\n\n    // Check if the callback can be executed based on the throttle duration.\n    if (now - lastExecutedRef.current < throttleDuration) {\n      return;\n    }\n\n    lastExecutedRef.current = now;\n    callback();\n  };\n\n  useEffect(() => {\n    // Determine the target for the resize event listener.\n    const target = outerElement?.current || window;\n\n    // Add the resize event listener when the component mounts.\n    target.addEventListener(\"resize\", handleResize);\n\n    // Clean up the event listener when the component unmounts.\n    return () => {\n      target.removeEventListener(\"resize\", handleResize);\n    };\n  }, [throttleDuration, callback]);\n};\n"]}
+{"version":3,"sources":["../src/useOnResize.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAiBrD,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,QAAoB,EACpB,UAA8B,EAAE,EAChC,EAAE;IACF,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,gBAAgB,GAAG,GAAG,EAAE,GAAG,OAAO,CAAC;IACnE,MAAM,eAAe,GAAG,MAAM,CAAS,CAAC,CAAC,CAAC;IAG1C,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QAGvB,IAAI,GAAG,GAAG,eAAe,CAAC,OAAO,GAAG,gBAAgB,EAAE,CAAC;YACrD,OAAO;QACT,CAAC;QAED,eAAe,CAAC,OAAO,GAAG,GAAG,CAAC;QAC9B,QAAQ,EAAE,CAAC;IACb,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QAEb,MAAM,MAAM,GAAG,YAAY,EAAE,OAAO,IAAI,MAAM,CAAC;QAG/C,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAGhD,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QACrD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC,CAAC;AACnC,CAAC,CAAC","file":"useOnResize.js","sourcesContent":["/* @license Copyright 2024 w3ux authors & contributors\nSPDX-License-Identifier: GPL-3.0-only */\n\nimport { RefObject, useEffect, useRef } from \"react\";\n\ninterface UseOnResizeOptions {\n  outerElement?: RefObject<HTMLElement | null>;\n  throttle?: number;\n}\n\n/**\n * Custom hook that triggers a callback function when the specified element\n * or the window is resized.\n *\n * @param callback - The function to be executed on resize.\n * @param options - Optional parameters to customize the behavior:\n *   - outerElement: A ref to an HTMLElement to listen for resize events.\n *   - throttle: Optional duration in milliseconds to throttle the callback execution.\n *               Default is 100 milliseconds.\n */\nexport const useOnResize = (\n  callback: () => void,\n  options: UseOnResizeOptions = {}\n) => {\n  const { outerElement, throttle: throttleDuration = 100 } = options;\n  const lastExecutedRef = useRef<number>(0);\n\n  // Throttled resize handler to limit the frequency of callback execution.\n  const handleResize = () => {\n    const now = Date.now();\n\n    // Check if the callback can be executed based on the throttle duration.\n    if (now - lastExecutedRef.current < throttleDuration) {\n      return;\n    }\n\n    lastExecutedRef.current = now;\n    callback();\n  };\n\n  useEffect(() => {\n    // Determine the target for the resize event listener.\n    const target = outerElement?.current || window;\n\n    // Add the resize event listener when the component mounts.\n    target.addEventListener(\"resize\", handleResize);\n\n    // Clean up the event listener when the component unmounts.\n    return () => {\n      target.removeEventListener(\"resize\", handleResize);\n    };\n  }, [throttleDuration, callback]);\n};\n"]}

package/mjs/useOutsideAlerter.d.ts

@@ -1,3 +1,3 @@
 import { type RefObject } from "react";
 import type { AnyFunction } from "@w3ux/types";
-export declare const useOutsideAlerter: (ref: RefObject<HTMLElement>, callback: AnyFunction, ignore?: string[]) => void;
+export declare const useOutsideAlerter: (ref: RefObject<HTMLElement | null>, callback: AnyFunction, ignore?: string[]) => void;

package/mjs/useOutsideAlerter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useOutsideAlerter.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAkB,MAAM,OAAO,CAAC;AAIlD,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,GAA2B,EAC3B,QAAqB,EACrB,SAAmB,EAAE,EACrB,EAAE;IACF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,kBAAkB,GAAG,CAAC,EAAW,EAAE,EAAE;YACzC,IAAI,EAAE,EAAE,CAAC;gBACP,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAc,CAAC,EAAE,CAAC;oBAC5D,MAAM,MAAM,GAAG,EAAE,CAAC,MAAqB,CAAC;oBAGxC,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;oBAC7C,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CACzB,CAAC,CAAC,EAAE,EAAE,CACJ,CAAC,CAAC,WAAW,EAAE,KAAK,OAAO,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,IAAI,CAClE,CAAC;oBAEF,IAAI,CAAC,OAAO,EAAE,CAAC;wBACb,QAAQ,EAAE,CAAC;oBACb,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC3D,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAChE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;AACZ,CAAC,CAAC","file":"useOutsideAlerter.js","sourcesContent":["/* @license Copyright 2024 w3ux authors & contributors\nSPDX-License-Identifier: GPL-3.0-only */\n\nimport { useEffect, type RefObject } from \"react\";\nimport type { AnyFunction, AnyJson } from \"@w3ux/types\";\n\n// A hook that alerts clicks outside of the passed ref.\nexport const useOutsideAlerter = (\n  ref: RefObject<HTMLElement>,\n  callback: AnyFunction,\n  ignore: string[] = []\n) => {\n  useEffect(() => {\n    const handleClickOutside = (ev: AnyJson) => {\n      if (ev) {\n        if (ref.current && !ref.current.contains(ev.target as Node)) {\n          const target = ev.target as HTMLElement;\n          // Ignore tags with a name of `ignore`, or if there is a class of `ignore` in the parent\n          // tree.\n          const tagName = target.tagName.toLowerCase();\n          const ignored = ignore.some(\n            (i) =>\n              i.toLowerCase() === tagName || target.closest(`.${i}`) !== null\n          );\n\n          if (!ignored) {\n            callback();\n          }\n        }\n      }\n    };\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [ref]);\n};\n"]}
+{"version":3,"sources":["../src/useOutsideAlerter.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAkB,MAAM,OAAO,CAAC;AAIlD,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,GAAkC,EAClC,QAAqB,EACrB,SAAmB,EAAE,EACrB,EAAE;IACF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,kBAAkB,GAAG,CAAC,EAAW,EAAE,EAAE;YACzC,IAAI,EAAE,EAAE,CAAC;gBACP,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAc,CAAC,EAAE,CAAC;oBAC5D,MAAM,MAAM,GAAG,EAAE,CAAC,MAAqB,CAAC;oBAGxC,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;oBAC7C,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CACzB,CAAC,CAAC,EAAE,EAAE,CACJ,CAAC,CAAC,WAAW,EAAE,KAAK,OAAO,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,IAAI,CAClE,CAAC;oBAEF,IAAI,CAAC,OAAO,EAAE,CAAC;wBACb,QAAQ,EAAE,CAAC;oBACb,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC3D,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAChE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;AACZ,CAAC,CAAC","file":"useOutsideAlerter.js","sourcesContent":["/* @license Copyright 2024 w3ux authors & contributors\nSPDX-License-Identifier: GPL-3.0-only */\n\nimport { useEffect, type RefObject } from \"react\";\nimport type { AnyFunction, AnyJson } from \"@w3ux/types\";\n\n// A hook that alerts clicks outside of the passed ref.\nexport const useOutsideAlerter = (\n  ref: RefObject<HTMLElement | null>,\n  callback: AnyFunction,\n  ignore: string[] = []\n) => {\n  useEffect(() => {\n    const handleClickOutside = (ev: AnyJson) => {\n      if (ev) {\n        if (ref.current && !ref.current.contains(ev.target as Node)) {\n          const target = ev.target as HTMLElement;\n          // Ignore tags with a name of `ignore`, or if there is a class of `ignore` in the parent\n          // tree.\n          const tagName = target.tagName.toLowerCase();\n          const ignored = ignore.some(\n            (i) =>\n              i.toLowerCase() === tagName || target.closest(`.${i}`) !== null\n          );\n\n          if (!ignored) {\n            callback();\n          }\n        }\n      }\n    };\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [ref]);\n};\n"]}

package/mjs/useSize.d.ts

@@ -1,9 +1,9 @@
-import type { MutableRefObject } from "react";
+import type { RefObject } from "react";
 interface UseSizeOptions {
-    outerElement?: MutableRefObject<HTMLElement | null | undefined>;
+    outerElement?: RefObject<HTMLElement | null>;
     throttle?: number;
 }
-export declare const useSize: (element: MutableRefObject<HTMLElement | null | undefined>, options?: UseSizeOptions) => {
+export declare const useSize: (element: RefObject<HTMLElement | null>, options?: UseSizeOptions) => {
     width: number;
     height: number;
 };

package/mjs/useSize.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useSize.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAUpD,MAAM,CAAC,MAAM,OAAO,GAAG,CACrB,OAAyD,EACzD,UAA0B,EAAE,EAC5B,EAAE;IACF,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,gBAAgB,GAAG,GAAG,EAAE,GAAG,OAAO,CAAC;IAInE,MAAM,OAAO,GAAG,CAAC,KAAyB,IAAI,EAAE,EAAE;QAChD,MAAM,KAAK,GAAG,EAAE,EAAE,WAAW,IAAI,CAAC,CAAC;QACnC,MAAM,MAAM,GAAG,EAAE,EAAE,YAAY,IAAI,CAAC,CAAC;QACrC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IAC3B,CAAC,CAAC;IAGF,MAAM,eAAe,GAAG,MAAM,CAAS,CAAC,CAAC,CAAC;IAG1C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAC9B,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,CAC1B,CAAC;IAGF,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACvB,IAAI,GAAG,GAAG,eAAe,CAAC,OAAO,GAAG,gBAAgB,EAAE,CAAC;YACrD,OAAO;QACT,CAAC;QAED,eAAe,CAAC,OAAO,GAAG,GAAG,CAAC;QAE9B,OAAO,CAAC,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IACrC,CAAC,CAAC;IAGF,SAAS,CAAC,GAAG,EAAE;QAGb,MAAM,SAAS,GAAG,YAAY,EAAE,OAAO,IAAI,MAAM,CAAC;QAElD,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAGnD,OAAO,GAAG,EAAE;YACV,SAAS,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QACxD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC;IAG5B,OAAO,IAAI,CAAC;AACd,CAAC,CAAC","file":"useSize.js","sourcesContent":["/* @license Copyright 2024 w3ux authors & contributors\nSPDX-License-Identifier: GPL-3.0-only */\n\nimport type { MutableRefObject } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\n// Define the type for the options parameter.\ninterface UseSizeOptions {\n  outerElement?: MutableRefObject<HTMLElement | null | undefined>;\n  throttle?: number;\n}\n\n// Custom hook to get the width and height of a specified element. Updates the `size` state when the\n// specified \"outer element\" (or the window by default) resizes.\nexport const useSize = (\n  element: MutableRefObject<HTMLElement | null | undefined>,\n  options: UseSizeOptions = {}\n) => {\n  const { outerElement, throttle: throttleDuration = 100 } = options;\n\n  // Helper function to retrieve the width and height of an element\n  // If no element is found, default dimensions are set to 0.\n  const getSize = (el: HTMLElement | null = null) => {\n    const width = el?.offsetWidth || 0;\n    const height = el?.offsetHeight || 0;\n    return { width, height };\n  };\n\n  // Ref to store the last execution time of the `resizeThrottle` handler.\n  const lastExecutedRef = useRef<number>(0);\n\n  // State to store the current width and height of the specified element.\n  const [size, setSize] = useState<{ width: number; height: number }>(\n    getSize(element?.current)\n  );\n\n  // Throttle the resize event handler to limit how often size updates occur.\n  const handleResize = () => {\n    const now = Date.now();\n    if (now - lastExecutedRef.current < throttleDuration) {\n      return;\n    } // Exit if `throttleDuration` has not passed.\n\n    lastExecutedRef.current = now; // Update last execution time.\n\n    setSize(getSize(element?.current));\n  };\n\n  // Set up the resize event listener on mount and clean it up on unmount.\n  useEffect(() => {\n    // Determine the target for the resize event listener.\n    // If `outerElement` is provided, listen to its resize events; otherwise, listen to the window's.\n    const listenFor = outerElement?.current || window;\n\n    listenFor.addEventListener(\"resize\", handleResize);\n\n    // Clean up event listener when the component unmounts to avoid memory leaks.\n    return () => {\n      listenFor.removeEventListener(\"resize\", handleResize);\n    };\n  }, [outerElement?.current]);\n\n  // Return the current size of the element.\n  return size;\n};\n"]}
+{"version":3,"sources":["../src/useSize.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAUpD,MAAM,CAAC,MAAM,OAAO,GAAG,CACrB,OAAsC,EACtC,UAA0B,EAAE,EAC5B,EAAE;IACF,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,gBAAgB,GAAG,GAAG,EAAE,GAAG,OAAO,CAAC;IAInE,MAAM,OAAO,GAAG,CAAC,KAAyB,IAAI,EAAE,EAAE;QAChD,MAAM,KAAK,GAAG,EAAE,EAAE,WAAW,IAAI,CAAC,CAAC;QACnC,MAAM,MAAM,GAAG,EAAE,EAAE,YAAY,IAAI,CAAC,CAAC;QACrC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IAC3B,CAAC,CAAC;IAGF,MAAM,eAAe,GAAG,MAAM,CAAS,CAAC,CAAC,CAAC;IAG1C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAC9B,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,CAC1B,CAAC;IAGF,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACvB,IAAI,GAAG,GAAG,eAAe,CAAC,OAAO,GAAG,gBAAgB,EAAE,CAAC;YACrD,OAAO;QACT,CAAC;QAED,eAAe,CAAC,OAAO,GAAG,GAAG,CAAC;QAE9B,OAAO,CAAC,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IACrC,CAAC,CAAC;IAGF,SAAS,CAAC,GAAG,EAAE;QAGb,MAAM,SAAS,GAAG,YAAY,EAAE,OAAO,IAAI,MAAM,CAAC;QAElD,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAGnD,OAAO,GAAG,EAAE;YACV,SAAS,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QACxD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC;IAG5B,OAAO,IAAI,CAAC;AACd,CAAC,CAAC","file":"useSize.js","sourcesContent":["/* @license Copyright 2024 w3ux authors & contributors\nSPDX-License-Identifier: GPL-3.0-only */\n\nimport type { RefObject } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\n// Define the type for the options parameter.\ninterface UseSizeOptions {\n  outerElement?: RefObject<HTMLElement | null>;\n  throttle?: number;\n}\n\n// Custom hook to get the width and height of a specified element. Updates the `size` state when the\n// specified \"outer element\" (or the window by default) resizes.\nexport const useSize = (\n  element: RefObject<HTMLElement | null>,\n  options: UseSizeOptions = {}\n) => {\n  const { outerElement, throttle: throttleDuration = 100 } = options;\n\n  // Helper function to retrieve the width and height of an element\n  // If no element is found, default dimensions are set to 0.\n  const getSize = (el: HTMLElement | null = null) => {\n    const width = el?.offsetWidth || 0;\n    const height = el?.offsetHeight || 0;\n    return { width, height };\n  };\n\n  // Ref to store the last execution time of the `resizeThrottle` handler.\n  const lastExecutedRef = useRef<number>(0);\n\n  // State to store the current width and height of the specified element.\n  const [size, setSize] = useState<{ width: number; height: number }>(\n    getSize(element?.current)\n  );\n\n  // Throttle the resize event handler to limit how often size updates occur.\n  const handleResize = () => {\n    const now = Date.now();\n    if (now - lastExecutedRef.current < throttleDuration) {\n      return;\n    } // Exit if `throttleDuration` has not passed.\n\n    lastExecutedRef.current = now; // Update last execution time.\n\n    setSize(getSize(element?.current));\n  };\n\n  // Set up the resize event listener on mount and clean it up on unmount.\n  useEffect(() => {\n    // Determine the target for the resize event listener.\n    // If `outerElement` is provided, listen to its resize events; otherwise, listen to the window's.\n    const listenFor = outerElement?.current || window;\n\n    listenFor.addEventListener(\"resize\", handleResize);\n\n    // Clean up event listener when the component unmounts to avoid memory leaks.\n    return () => {\n      listenFor.removeEventListener(\"resize\", handleResize);\n    };\n  }, [outerElement?.current]);\n\n  // Return the current size of the element.\n  return size;\n};\n"]}

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@w3ux/hooks",
-  "version": "1.5.0",
+  "version": "2.0.0-alpha.2",
   "license": "GPL-3.0-only",
   "dependencies": {
-    "@w3ux/utils": "^1.2.0",
+    "@w3ux/utils": "^2.0.0-alpha.2",
     "date-fns": "^4.1.0"
   },
   "main": "cjs/index.js",
@@ -19,6 +19,6 @@
     }
   },
   "peerDependencies": {
-    "react": "^18"
+    "react": "^19"
   }
 }