ag-common 0.0.660 → 0.0.661

package/dist/ui/components/MinSidebar/index.js

@@ -66,10 +66,7 @@ const ChevronStyled = (0, styled_1.default)(Chevron_1.Chevron) `
 const MinSidebar = ({ chevronColour, children, className, style, }) => {
     const ref = (0, react_1.useRef)(null);
     const [open, setOpen] = (0, react_1.useState)(false);
-    (0, helpers_1.useOnClickOutside)({ ref }, () => {
-        if (!open || window.innerWidth > media_1.smallScreenPx) {
-            return;
-        }
+    (0, helpers_1.useOnClickOutside)({ ref, disabled: () => !open || window.innerWidth > media_1.smallScreenPx }, () => {
         setOpen(false);
     });
     return (react_1.default.createElement(Base, { style: style, "data-type": "sidebar", className: className, "data-open": open, onClick: () => !open && setOpen(true), ref: ref },

package/dist/ui/components/Sidebar/index.js

@@ -168,10 +168,7 @@ const ChevronStyled = (0, styled_1.default)(Chevron_1.Chevron) `
 const Sidebar = ({ children, className, mode = 'defaultClosed', }) => {
     const ref = (0, react_2.useRef)(null);
     const [open, setOpen] = (0, react_2.useState)(mode === 'defaultClosed' ? false : null);
-    (0, helpers_1.useOnClickOutside)({ ref }, () => {
-        if (!open || window.innerWidth > media_1.smallScreenPx) {
-            return;
-        }
+    (0, helpers_1.useOnClickOutside)({ ref, disabled: () => !open || window.innerWidth > media_1.smallScreenPx }, () => {
         setOpen(false);
     });
     return (react_2.default.createElement(Base, { "data-type": "sidebar", className: className, "data-open": open, onClick: () => !open && setOpen(true), "data-hover": true, ref: ref },

package/dist/ui/helpers/useOnClickOutside.d.ts

@@ -2,10 +2,8 @@ import type { RefObject } from 'react';
 type Event = MouseEvent | TouchEvent;
 export declare function useOnClickOutside<T extends HTMLElement = HTMLElement>(p: {
     ref: RefObject<T>;
-    /**
-     * default false
-     */
-    disabled?: boolean;
+    /** can either be a boolean, or a callback */
+    disabled?: boolean | (() => boolean);
     /** if true, will also consider moving mouse outside div. default false */
     moveMouseOutside?: boolean;
 }, handler: (event: Event) => void): void;

package/dist/ui/helpers/useOnClickOutside.js

@@ -6,21 +6,34 @@ const react_1 = require("react");
 const dom_1 = require("./dom");
 function useOnClickOutside(p, handler) {
     (0, react_1.useEffect)(() => {
-        if (p.disabled || typeof window === 'undefined') {
-            return () => {
-                //
-            };
-        }
         const listener = (event) => {
-            var _a;
+            var _a, _b;
+            const disabled = !p.disabled || typeof p.disabled === 'boolean'
+                ? (_a = p.disabled) !== null && _a !== void 0 ? _a : false
+                : p.disabled();
+            if (disabled) {
+                return;
+            }
             //
             const isRightMB = (0, dom_1.isRightClick)(event);
             if (isRightMB) {
                 return;
             }
-            const el = (_a = p.ref) === null || _a === void 0 ? void 0 : _a.current;
-            // Do nothing if clicking ref's element or descendent elements
-            if (!el || el.contains((event === null || event === void 0 ? void 0 : event.target) || null)) {
+            const el = (_b = p.ref) === null || _b === void 0 ? void 0 : _b.current;
+            if (!el) {
+                return;
+            }
+            //walk dom tree to see if nodes match
+            let n = event.target;
+            let found = false;
+            while (n) {
+                if (n.isEqualNode(el)) {
+                    found = true;
+                    break;
+                }
+                n = n.parentNode;
+            }
+            if (found) {
                 return;
             }
             handler(event);

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.660",
+  "version": "0.0.661",
   "name": "ag-common",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",