@w3ux/hooks 1.1.0 → 1.1.1

package/cjs/index.d.ts

@@ -1 +1,2 @@
 export * from "./useEffectIgnoreInitial";
+export * from "./useOutsideAlerter";

package/cjs/index.js

@@ -15,6 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./useEffectIgnoreInitial"), exports);
+__exportStar(require("./useOutsideAlerter"), exports);
 
 //# sourceMappingURL=index.js.map
 

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAGA,2DAAyC","file":"index.js","sourcesContent":["/* @license Copyright 2024 w3ux authors & contributors\nSPDX-License-Identifier: GPL-3.0-only */\n\nexport * from \"./useEffectIgnoreInitial\";\n"]}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAGA,2DAAyC;AACzC,sDAAoC","file":"index.js","sourcesContent":["/* @license Copyright 2024 w3ux authors & contributors\nSPDX-License-Identifier: GPL-3.0-only */\n\nexport * from \"./useEffectIgnoreInitial\";\nexport * from \"./useOutsideAlerter\";\n"]}

package/cjs/useOutsideAlerter.d.ts

@@ -0,0 +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;

package/cjs/useOutsideAlerter.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOutsideAlerter = void 0;
+const react_1 = require("react");
+const useOutsideAlerter = (ref, callback, ignore = []) => {
+    (0, react_1.useEffect)(() => {
+        const handleClickOutside = (ev) => {
+            if (ev) {
+                if (ref.current && !ref.current.contains(ev.target)) {
+                    const target = ev.target;
+                    const tagName = target.tagName.toLowerCase();
+                    const ignored = ignore.some((i) => i.toLowerCase() === tagName || target.closest(`.${i}`) !== null);
+                    if (!ignored) {
+                        callback();
+                    }
+                }
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [ref]);
+};
+exports.useOutsideAlerter = useOutsideAlerter;
+
+//# sourceMappingURL=useOutsideAlerter.js.map
+
+//# sourceMappingURL=useOutsideAlerter.js.map

package/cjs/useOutsideAlerter.js.map

@@ -0,0 +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":["// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors\n// SPDX-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"]}

package/mjs/index.d.ts

@@ -1 +1,2 @@
 export * from "./useEffectIgnoreInitial";
+export * from "./useOutsideAlerter";

package/mjs/index.js

@@ -1,4 +1,5 @@
 export * from "./useEffectIgnoreInitial";
+export * from "./useOutsideAlerter";
 
 //# sourceMappingURL=index.js.map
 

package/mjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AAGA,cAAc,0BAA0B,CAAC","file":"index.js","sourcesContent":["/* @license Copyright 2024 w3ux authors & contributors\nSPDX-License-Identifier: GPL-3.0-only */\n\nexport * from \"./useEffectIgnoreInitial\";\n"]}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AAGA,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC","file":"index.js","sourcesContent":["/* @license Copyright 2024 w3ux authors & contributors\nSPDX-License-Identifier: GPL-3.0-only */\n\nexport * from \"./useEffectIgnoreInitial\";\nexport * from \"./useOutsideAlerter\";\n"]}

package/mjs/useOutsideAlerter.d.ts

@@ -0,0 +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;

package/mjs/useOutsideAlerter.js

@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+export const useOutsideAlerter = (ref, callback, ignore = []) => {
+    useEffect(() => {
+        const handleClickOutside = (ev) => {
+            if (ev) {
+                if (ref.current && !ref.current.contains(ev.target)) {
+                    const target = ev.target;
+                    const tagName = target.tagName.toLowerCase();
+                    const ignored = ignore.some((i) => i.toLowerCase() === tagName || target.closest(`.${i}`) !== null);
+                    if (!ignored) {
+                        callback();
+                    }
+                }
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [ref]);
+};
+
+//# sourceMappingURL=useOutsideAlerter.js.map
+
+//# sourceMappingURL=useOutsideAlerter.js.map

package/mjs/useOutsideAlerter.js.map

@@ -0,0 +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":["// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors\n// SPDX-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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@w3ux/hooks",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "license": "GPL-3.0-only",
   "main": "cjs/index.js",
   "module": "mjs/index.js",