@turquoisehealth/pit-viper 2.109.0 → 2.109.2

package/_site/assets/js/pit-viper.js

@@ -191,7 +191,7 @@ class PVAutoClose extends HTMLElement {
       this.minimizeButton?.addEventListener('click', (e) => this.toggleSidebar(e.currentTarget));
       this.addEventListener('mouseenter', () => this.handleHoverIn());
       this.addEventListener('mouseleave', () => this.handleHoverOut());
-      document.addEventListener('click', (e) => this.handleMenuClick(e));
+      document.addEventListener('click', (e) => this.globalNavClickHandler(e));
       // if data-collapsed is not set, add data-expanded by default
       if (!this.layout.hasAttribute('data-collapsed') && !this.layout.hasAttribute('data-expanded')) {
         this.setState({ 'data-collapsed': false, 'data-expanded': true });
@@ -260,23 +260,20 @@ class PVAutoClose extends HTMLElement {
 
     handleHoverIn() {
       clearTimeout(this.hoverTimeout);
-      if (this.layout.hasAttribute('data-collapsed')) {
-        this.hoverTimeout = setTimeout(() => {
-          if (window.innerWidth < 768) {
-            this.layout.removeAttribute('data-collapsed');
-            this.layout.setAttribute('data-floating', '');
-          } else {
-            this.hoverExpandState();
-          }
-        }, 200);
-      }
+      this.hoverTimeout = setTimeout(() => {
+        if (window.innerWidth < 768) {
+          this.layout.removeAttribute('data-collapsed');
+          this.layout.setAttribute('data-floating', '');
+        } else if (this.layout.hasAttribute('data-collapsed')) {
+          this.hoverExpandState();
+        }
+      }, 200);
     }
 
     handleHoverOut() {
       clearTimeout(this.hoverTimeout);
       if (this.layout.hasAttribute('data-floating') && !this.hasOpenMenu()) {
         this.layout.removeAttribute('data-floating');
-        this.layout.setAttribute('data-collapsed', '');
       } else if (!this.layout.hasAttribute('data-collapsed') && !this.layout.hasAttribute('data-expanded') && !this.hasOpenMenu()) {
         this.hoverCollapseState();
       }
@@ -286,24 +283,49 @@ class PVAutoClose extends HTMLElement {
       return this.querySelector('.pv-popover-menu[data-active]') !== null;
     }
 
-    handleMenuClick(event) {
+    toggleMenu(menu) {
+      const isActive = menu.hasAttribute('data-active');
+      if (isActive) {
+        menu.removeAttribute('data-active');
+      } else {
+        menu.setAttribute('data-active', '');
+      }
+    }
+
+    globalNavClickHandler(event) {
+      const inSidebar = this.contains(event.target);
+      const insideMenu = event.target.closest('.pv-popover');
       const clickedMenu = event.target.closest('.pv-popover-menu');
       const allMenus = this.querySelectorAll('.pv-popover-menu');
 
+      // if we are inside a menu (not the trigger), do nothing
+      if (insideMenu) {
+        return;
+      }
+
+      // if we clicked on a menu trigger, toggle that menu and close others
       if (clickedMenu && this.contains(clickedMenu)) {
-        allMenus.forEach(menu => menu.removeAttribute('data-active'));
-        clickedMenu.setAttribute('data-active', '');
-        this.style.overflow = 'initial';
+        allMenus.forEach(menu => {
+          if (menu !== clickedMenu) {
+            menu.removeAttribute('data-active');
+          }
+        });
+        this.toggleMenu(clickedMenu);
+        this.style.overflowX = 'initial';
         if (!this.layout.hasAttribute('data-expanded')) {
-            this.hoverExpandState();
+          this.hoverExpandState();
         }
+        // exit early since we want to keep the menu and sidebar open
         return;
       }
 
-      // Only close menu if click is outside the sidebar
-      if (!this.contains(event.target)) {
-        allMenus.forEach(menu => menu.removeAttribute('data-active'));
-        this.style.overflowX = 'hidden';
+      // clicked outside any menu, close all menus
+      allMenus.forEach(menu => menu.removeAttribute('data-active'));
+      this.style.overflowX = 'hidden';
+
+     // if outside sidebar, remove 'data-floating' and reset hover state
+      if (!inSidebar) {
+        this.layout.removeAttribute('data-floating');
         if (!this.layout.hasAttribute('data-collapsed') && !this.layout.hasAttribute('data-expanded')) {
           this.hoverCollapseState();
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@turquoisehealth/pit-viper",
-  "version": "2.109.0",
+  "version": "2.109.2",
   "description": "Turquoise Health's design system.",
   "main": "README.md",
   "publishConfig": {