@theorem/react - npm Package Compare versions

Comparing version 1.5.0 to 1.6.0

CHANGELOG.md

@@ -0,1 +1,6 @@
+# 1.6.0
+
+- useClickOutside: switch from mousedown to click event
+- useClickOutside: allow multiple areas
+
 # 1.5.0
@@ -2,0 +7,0 @@

dist/useClickOutside.d.ts

@@ -1,1 +0,6 @@
-export declare function useClickOutside(f: () => unknown): (el: HTMLElement | null) => void;
+declare type RefFunction = (el: HTMLElement | null) => void;
+declare type ClickOutsideControls = RefFunction & {
+    additionalArea: (name: string) => (el: HTMLElement | null) => void;
+};
+export declare function useClickOutside(f: () => unknown): ClickOutsideControls;
+export {};

dist/useClickOutside.js

@@ -6,17 +6,28 @@ "use strict";
 function useClickOutside(f) {
-    const ref = react_1.useRef(null);
+    const ref = react_1.useRef({});
     react_1.useEffect(() => {
         const handleExternalClick = (event) => {
             const el = event.target;
-            if (ref.current && !ref.current.contains(el))
+            const areas = ref.current;
+            const isInAreas = Object.keys(areas).some((k) => {
+                const area = areas[k];
+                return area === null || area === void 0 ? void 0 : area.contains(el);
+            });
+            if (!isInAreas)
                 f();
         };
-        document.addEventListener("mousedown", handleExternalClick);
-        return () => document.removeEventListener("mousedown", handleExternalClick);
+        document.addEventListener("click", handleExternalClick);
+        return () => document.removeEventListener("click", handleExternalClick);
     }, [f, ref]);
-    return useCallback_1.useCallback((el) => {
-        ref.current = el;
+    const additionalArea = useCallback_1.useCallback((name) => (el) => {
+        ref.current[name] = el;
     }, [ref]);
+    const main = useCallback_1.useCallback(additionalArea("main"), [
+        additionalArea,
+    ]);
+    const res = main;
+    res.additionalArea = additionalArea;
+    return res;
 }
 exports.useClickOutside = useClickOutside;
 //# sourceMappingURL=useClickOutside.js.map

package.json

 {
   "name": "@theorem/react",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Theorem React tools",
@@ -27,10 +27,10 @@ "peerDependencies": {
     "@theorem/eslint-plugin": "^3.0.0",
-    "@types/react": "^16.9.32",
+    "@types/react": "^16.9.34",
     "@types/react-test-renderer": "^16.9.2",
-    "ava": "^3.6.0",
+    "ava": "^3.8.1",
     "eslint": "^6.8.0",
-    "prettier": "^2.0.4",
+    "prettier": "^2.0.5",
     "react": "^16.13.1",
     "react-test-renderer": "^16.13.1",
-    "ts-node": "^8.8.2",
+    "ts-node": "^8.10.1",
     "typescript": "~3.8.3"
@@ -37,0 +37,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

50885

2.28%

Lines of code

724

2.26%

No dependency changes