@w3ux/hooks 1.1.2-alpha.1 → 1.2.0

package/cjs/useSize.d.ts

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

package/cjs/useSize.js

@@ -1,28 +1,31 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSize = void 0;
-const lodash_throttle_1 = __importDefault(require("lodash.throttle"));
 const react_1 = require("react");
-const useSize = (element, outerElement) => {
+const useSize = (element, options = {}) => {
+    const { outerElement, throttle: throttleDuration = 100 } = options;
     const getSize = (el = null) => {
         const width = (el === null || el === void 0 ? void 0 : el.offsetWidth) || 0;
         const height = (el === null || el === void 0 ? void 0 : el.offsetHeight) || 0;
         return { width, height };
     };
+    const lastExecutedRef = (0, react_1.useRef)(0);
     const [size, setSize] = (0, react_1.useState)(getSize(element === null || element === void 0 ? void 0 : element.current));
-    const resizeThrottle = (0, lodash_throttle_1.default)(() => {
+    const handleResize = () => {
+        const now = Date.now();
+        if (now - lastExecutedRef.current < throttleDuration) {
+            return;
+        }
+        lastExecutedRef.current = now;
         setSize(getSize(element === null || element === void 0 ? void 0 : element.current));
-    }, 100);
+    };
     (0, react_1.useEffect)(() => {
         const listenFor = (outerElement === null || outerElement === void 0 ? void 0 : outerElement.current) || window;
-        listenFor.addEventListener("resize", resizeThrottle);
+        listenFor.addEventListener("resize", handleResize);
         return () => {
-            listenFor.removeEventListener("resize", resizeThrottle);
+            listenFor.removeEventListener("resize", handleResize);
         };
-    }, [outerElement]);
+    }, [outerElement === null || outerElement === void 0 ? void 0 : outerElement.current]);
     return size;
 };
 exports.useSize = useSize;

package/cjs/useSize.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useSize.tsx"],"names":[],"mappings":";;;;;;AAGA,sEAAuC;AAEvC,iCAA4C;AAIrC,MAAM,OAAO,GAAG,CACrB,OAAyD,EACzD,YAA+D,EAC/D,EAAE;IAGF,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,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAC9B,OAAO,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAC,CAC1B,CAAC;IAGF,MAAM,cAAc,GAAG,IAAA,yBAAQ,EAAC,GAAG,EAAE;QACnC,OAAO,CAAC,OAAO,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAC,CAAC,CAAC;IACrC,CAAC,EAAE,GAAG,CAAC,CAAC;IAGR,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,cAAc,CAAC,CAAC;QAGrD,OAAO,GAAG,EAAE;YACV,SAAS,CAAC,mBAAmB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QAC1D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAGnB,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAtCW,QAAA,OAAO,WAsClB","file":"useSize.js","sourcesContent":["// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors\n// SPDX-License-Identifier: GPL-3.0-only\n\nimport throttle from \"lodash.throttle\";\nimport type { MutableRefObject } from \"react\";\nimport { useEffect, useState } from \"react\";\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  outerElement?: MutableRefObject<HTMLElement | null | undefined>\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  // 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 resizeThrottle = throttle(() => {\n    setSize(getSize(element?.current));\n  }, 100);\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\", resizeThrottle);\n\n    // Clean up event listener when the component unmounts to avoid memory leaks.\n    return () => {\n      listenFor.removeEventListener(\"resize\", resizeThrottle);\n    };\n  }, [outerElement]);\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,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":["// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors\n// SPDX-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"]}

package/mjs/useSize.d.ts

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

package/mjs/useSize.js

@@ -1,22 +1,28 @@
-import throttle from "lodash.throttle";
-import { useEffect, useState } from "react";
-export const useSize = (element, outerElement) => {
+import { useEffect, useRef, useState } from "react";
+export const useSize = (element, options = {}) => {
+    const { outerElement, throttle: throttleDuration = 100 } = options;
     const getSize = (el = null) => {
         const width = el?.offsetWidth || 0;
         const height = el?.offsetHeight || 0;
         return { width, height };
     };
+    const lastExecutedRef = useRef(0);
     const [size, setSize] = useState(getSize(element?.current));
-    const resizeThrottle = throttle(() => {
+    const handleResize = () => {
+        const now = Date.now();
+        if (now - lastExecutedRef.current < throttleDuration) {
+            return;
+        }
+        lastExecutedRef.current = now;
         setSize(getSize(element?.current));
-    }, 100);
+    };
     useEffect(() => {
         const listenFor = outerElement?.current || window;
-        listenFor.addEventListener("resize", resizeThrottle);
+        listenFor.addEventListener("resize", handleResize);
         return () => {
-            listenFor.removeEventListener("resize", resizeThrottle);
+            listenFor.removeEventListener("resize", handleResize);
         };
-    }, [outerElement]);
+    }, [outerElement?.current]);
     return size;
 };
 

package/mjs/useSize.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useSize.tsx"],"names":[],"mappings":"AAGA,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AAEvC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAI5C,MAAM,CAAC,MAAM,OAAO,GAAG,CACrB,OAAyD,EACzD,YAA+D,EAC/D,EAAE;IAGF,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,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAC9B,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,CAC1B,CAAC;IAGF,MAAM,cAAc,GAAG,QAAQ,CAAC,GAAG,EAAE;QACnC,OAAO,CAAC,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IACrC,CAAC,EAAE,GAAG,CAAC,CAAC;IAGR,SAAS,CAAC,GAAG,EAAE;QAGb,MAAM,SAAS,GAAG,YAAY,EAAE,OAAO,IAAI,MAAM,CAAC;QAElD,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QAGrD,OAAO,GAAG,EAAE;YACV,SAAS,CAAC,mBAAmB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QAC1D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAGnB,OAAO,IAAI,CAAC;AACd,CAAC,CAAC","file":"useSize.js","sourcesContent":["// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors\n// SPDX-License-Identifier: GPL-3.0-only\n\nimport throttle from \"lodash.throttle\";\nimport type { MutableRefObject } from \"react\";\nimport { useEffect, useState } from \"react\";\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  outerElement?: MutableRefObject<HTMLElement | null | undefined>\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  // 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 resizeThrottle = throttle(() => {\n    setSize(getSize(element?.current));\n  }, 100);\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\", resizeThrottle);\n\n    // Clean up event listener when the component unmounts to avoid memory leaks.\n    return () => {\n      listenFor.removeEventListener(\"resize\", resizeThrottle);\n    };\n  }, [outerElement]);\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,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":["// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors\n// SPDX-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"]}

package/package.json

@@ -1,10 +1,7 @@
 {
   "name": "@w3ux/hooks",
-  "version": "1.1.2-alpha.1",
+  "version": "1.2.0",
   "license": "GPL-3.0-only",
-  "dependencies": {
-    "lodash.throttle": "^4.1.1"
-  },
   "main": "cjs/index.js",
   "module": "mjs/index.js",
   "exports": {