@turquoisehealth/pit-viper 2.105.0 → 2.105.1

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

@@ -206,23 +206,24 @@ class PVAutoClose extends HTMLElement {
     }
 
     isExpandedState() {
-      return !this.layout.hasAttribute('data-collapsed') && !this.layout.hasAttribute('data-hovering');
+      return !this.layout.hasAttribute('data-collapsed') && this.layout.hasAttribute('data-expanded');
     }
 
     collapseState() {
-      this.setState({ 'data-collapsed': true, 'data-expanded': false, 'data-hovering': false });
+      this.setState({ 'data-collapsed': true, 'data-expanded': false });
     }
 
     expandState() {
-      this.setState({ 'data-collapsed': false, 'data-hovering': false, 'data-expanded': true });
+      this.setState({ 'data-collapsed': false, 'data-expanded': true });
     }
 
     hoverExpandState() {
-      this.setState({ 'data-collapsed': false, 'data-hovering': true });
+      this.layout.removeAttribute('data-collapsed');
+      this.layout.removeAttribute('data-expanded');
     }
 
     hoverCollapseState() {
-      this.setState({ 'data-collapsed': true, 'data-hovering': false });
+      this.setState({ 'data-collapsed': true, 'data-expanded': false });
     }
 
     getSidebarMinimizeState() {
@@ -257,13 +258,23 @@ class PVAutoClose extends HTMLElement {
     handleHoverIn() {
       clearTimeout(this.hoverTimeout);
       if (this.layout.hasAttribute('data-collapsed')) {
-        this.hoverTimeout = setTimeout(() => this.hoverExpandState(), 200);
+        this.hoverTimeout = setTimeout(() => {
+          if (window.innerWidth < 768) {
+            this.layout.removeAttribute('data-collapsed');
+            this.layout.setAttribute('data-floating', '');
+          } else {
+            this.hoverExpandState();
+          }
+        }, 200);
       }
     }
 
     handleHoverOut() {
       clearTimeout(this.hoverTimeout);
-      if (this.layout.hasAttribute('data-hovering') && !this.hasOpenMenu()) {
+      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();
       }
     }
@@ -285,18 +296,21 @@ class PVAutoClose extends HTMLElement {
         }
         return;
       }
-      allMenus.forEach(menu => menu.removeAttribute('data-active'));
-      this.style.overflow = 'hidden';
-      if (this.layout.hasAttribute('data-hovering') && !this.layout.hasAttribute('data-expanded')) {
-          console.log('Collapsing sidebar after menu close');
-        this.hoverCollapseState();
+
+      // 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';
+        if (!this.layout.hasAttribute('data-collapsed') && !this.layout.hasAttribute('data-expanded')) {
+          this.hoverCollapseState();
+        }
       }
     }
 
     initializeSidebar() {
       const currentSidebarMinimize = this.layout.hasAttribute('data-collapsed');
       if (currentSidebarMinimize) {
-        return;
+        this.collapseState();
       }
       const storedValue = this.getSidebarMinimizeState();
 

package/package.json

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