@lendi/navbar 7.30.0 → 7.31.1

package/dist/navbar.cjs.dev.js

@@ -2983,23 +2983,33 @@ var NavDropdown = _ref2 => {
     props = _objectWithoutProperties(_ref2, _excluded$4);
   var globalProps = utils$1.filterGlobalProps(props);
   var dropdownRef = React.useRef(null);
+  var dropdownGroupRef = React.useRef(null);
   var [isOpen, setIsOpen] = React.useState(false);
   var handleClick = event => {
     setIsOpen(!isOpen);
     onClick === null || onClick === void 0 || onClick(event, !isOpen);
   };
+  var pageClickEvent = event => {
+    var target = event.target;
+
+    /**
+     * When button clicked, global click event will be fired as well, but after the button click event.
+     * So we need prevent global event fired when user click button.
+     *
+     * When the button click event fired, the icon will be changed. So event target will be the unmounted svg.
+     * That unmounted svg will hack the contains logic. So we do mount check on line.67
+     */
+    if (!target.isConnected) return;
+    if (dropdownRef.current && dropdownGroupRef.current && !dropdownGroupRef.current.contains(target)) {
+      setIsOpen(false);
+    }
+  };
+  var escapeEvent = event => {
+    if (event.key === 'Escape' && isOpen) {
+      setIsOpen(!isOpen);
+    }
+  };
   React.useEffect(() => {
-    var pageClickEvent = event => {
-      if (dropdownRef.current !== null && !dropdownRef.current.contains(event.target)) {
-        setIsOpen(!isOpen);
-      }
-    };
-    var escapeEvent = event => {
-      if (event.key === 'Escape' && isOpen) {
-        setIsOpen(!isOpen);
-      }
-    };
-
     // If the item is open listen for clicks or escape key
     if (isOpen) {
       window.addEventListener('click', pageClickEvent);
@@ -3009,6 +3019,7 @@ var NavDropdown = _ref2 => {
       window.removeEventListener('click', pageClickEvent);
       window.removeEventListener('keydown', escapeEvent);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen]);
   return (
     /*#__PURE__*/
@@ -3017,6 +3028,7 @@ var NavDropdown = _ref2 => {
       style: {
         position: 'relative'
       },
+      ref: dropdownGroupRef,
       children: [/*#__PURE__*/jsxRuntime.jsx(NavButton, {
         isOpen: isOpen,
         onClick: e => handleClick(e),

package/dist/navbar.cjs.prod.js

@@ -1978,21 +1978,20 @@ var _templateObject$3, _templateObject2$1, _templateObject$2, _templateObject$1,
   var {minWidth: minWidth} = _ref;
   return minWidth && "min-width: ".concat(minWidth);
 }), (() => styled.css([ "top:calc(100% + ", ");" ], utils$1.pxToRem(HeaderPaddingSmall))), (() => styled.css([ "", "" ], breakpoint.gte("md")(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral([ "\n        top: calc(100% + ", ");\n        " ])), utils$1.pxToRem(HeaderPaddingLarge))))), NavDropdown = _ref2 => {
-  var {label: label, children: children, onClick: onClick, minDropdownWidth: minDropdownWidth, align: align = "left"} = _ref2, props = _objectWithoutProperties(_ref2, _excluded$4), globalProps = utils$1.filterGlobalProps(props), dropdownRef = React.useRef(null), [isOpen, setIsOpen] = React.useState(!1);
-  return React.useEffect((() => {
-    var pageClickEvent = event => {
-      null === dropdownRef.current || dropdownRef.current.contains(event.target) || setIsOpen(!isOpen);
-    }, escapeEvent = event => {
-      "Escape" === event.key && isOpen && setIsOpen(!isOpen);
-    };
-    return isOpen && (window.addEventListener("click", pageClickEvent), window.addEventListener("keydown", escapeEvent)), 
-    () => {
-      window.removeEventListener("click", pageClickEvent), window.removeEventListener("keydown", escapeEvent);
-    };
-  }), [ isOpen ]), jsxRuntime.jsxs("div", _objectSpread2(_objectSpread2({}, globalProps), {}, {
+  var {label: label, children: children, onClick: onClick, minDropdownWidth: minDropdownWidth, align: align = "left"} = _ref2, props = _objectWithoutProperties(_ref2, _excluded$4), globalProps = utils$1.filterGlobalProps(props), dropdownRef = React.useRef(null), dropdownGroupRef = React.useRef(null), [isOpen, setIsOpen] = React.useState(!1), pageClickEvent = event => {
+    var target = event.target;
+    target.isConnected && dropdownRef.current && dropdownGroupRef.current && !dropdownGroupRef.current.contains(target) && setIsOpen(!1);
+  }, escapeEvent = event => {
+    "Escape" === event.key && isOpen && setIsOpen(!isOpen);
+  };
+  return React.useEffect((() => (isOpen && (window.addEventListener("click", pageClickEvent), 
+  window.addEventListener("keydown", escapeEvent)), () => {
+    window.removeEventListener("click", pageClickEvent), window.removeEventListener("keydown", escapeEvent);
+  })), [ isOpen ]), jsxRuntime.jsxs("div", _objectSpread2(_objectSpread2({}, globalProps), {}, {
     style: {
       position: "relative"
     },
+    ref: dropdownGroupRef,
     children: [ jsxRuntime.jsx(NavButton, {
       isOpen: isOpen,
       onClick: e => {

package/dist/navbar.esm.js

@@ -2950,23 +2950,33 @@ var NavDropdown = _ref2 => {
     props = _objectWithoutProperties(_ref2, _excluded$4);
   var globalProps = filterGlobalProps(props);
   var dropdownRef = useRef(null);
+  var dropdownGroupRef = useRef(null);
   var [isOpen, setIsOpen] = useState(false);
   var handleClick = event => {
     setIsOpen(!isOpen);
     onClick === null || onClick === void 0 || onClick(event, !isOpen);
   };
+  var pageClickEvent = event => {
+    var target = event.target;
+
+    /**
+     * When button clicked, global click event will be fired as well, but after the button click event.
+     * So we need prevent global event fired when user click button.
+     *
+     * When the button click event fired, the icon will be changed. So event target will be the unmounted svg.
+     * That unmounted svg will hack the contains logic. So we do mount check on line.67
+     */
+    if (!target.isConnected) return;
+    if (dropdownRef.current && dropdownGroupRef.current && !dropdownGroupRef.current.contains(target)) {
+      setIsOpen(false);
+    }
+  };
+  var escapeEvent = event => {
+    if (event.key === 'Escape' && isOpen) {
+      setIsOpen(!isOpen);
+    }
+  };
   useEffect(() => {
-    var pageClickEvent = event => {
-      if (dropdownRef.current !== null && !dropdownRef.current.contains(event.target)) {
-        setIsOpen(!isOpen);
-      }
-    };
-    var escapeEvent = event => {
-      if (event.key === 'Escape' && isOpen) {
-        setIsOpen(!isOpen);
-      }
-    };
-
     // If the item is open listen for clicks or escape key
     if (isOpen) {
       window.addEventListener('click', pageClickEvent);
@@ -2976,6 +2986,7 @@ var NavDropdown = _ref2 => {
       window.removeEventListener('click', pageClickEvent);
       window.removeEventListener('keydown', escapeEvent);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen]);
   return (
     /*#__PURE__*/
@@ -2984,6 +2995,7 @@ var NavDropdown = _ref2 => {
       style: {
         position: 'relative'
       },
+      ref: dropdownGroupRef,
       children: [/*#__PURE__*/jsx(NavButton, {
         isOpen: isOpen,
         onClick: e => handleClick(e),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lendi/navbar",
   "access": "restricted",
-  "version": "7.30.0",
+  "version": "7.31.1",
   "license": "ISC",
   "source": "src/index.tsx",
   "main": "dist/navbar.cjs.js",
@@ -40,7 +40,7 @@
     "@lendi-ui/typography": "^5.13.11-beta.0",
     "@lendi-ui/utils": "^6.0.2-beta.1",
     "@lendi/analytics": "^4.6.0",
-    "@lendi/chat": "^1.12.0",
+    "@lendi/chat": "^1.13.0",
     "@lendi/lala-utils": "^11.2.0",
     "@lendi/launchdarkly": "^0.1.7",
     "@lendi/lendigroup-leads-library": "^3.2.1",