@turquoisehealth/pit-viper 2.104.1 → 2.105.0

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

@@ -178,4 +178,137 @@ class PVAutoClose extends HTMLElement {
 
     }
     customElements.define('pv-data-grid', PVDataGrid);
+
+  class PvGlobalNav extends HTMLElement {
+    constructor() {
+      super();
+      this.hoverTimeout = null;
+      this.layout = document.querySelector('.pv-layout-primary');
+      this.minimizeButton = this.querySelector('#global-sidebar-toggle');
+    }
+
+    connectedCallback() {
+      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));
+      this.initializeSidebar();
+    }
+
+    setState(attributes) {
+      Object.entries(attributes).forEach(([key, value]) => {
+        if (value) {
+          this.layout.setAttribute(key, '');
+        } else {
+          this.layout.removeAttribute(key);
+        }
+      });
+    }
+
+    isExpandedState() {
+      return !this.layout.hasAttribute('data-collapsed') && !this.layout.hasAttribute('data-hovering');
+    }
+
+    collapseState() {
+      this.setState({ 'data-collapsed': true, 'data-expanded': false, 'data-hovering': false });
+    }
+
+    expandState() {
+      this.setState({ 'data-collapsed': false, 'data-hovering': false, 'data-expanded': true });
+    }
+
+    hoverExpandState() {
+      this.setState({ 'data-collapsed': false, 'data-hovering': true });
+    }
+
+    hoverCollapseState() {
+      this.setState({ 'data-collapsed': true, 'data-hovering': false });
+    }
+
+    getSidebarMinimizeState() {
+      const stored = localStorage.getItem('global-nav-sidebar-minimize');
+      return stored === 'true';
+    }
+
+    setSidebarMinimizeState(value) {
+      localStorage.setItem('global-nav-sidebar-minimize', value.toString());
+    }
+
+    updateIcons(button, isExpanded) {
+      const use = button.querySelector('svg use');
+      const tooltip = document.getElementById('description');
+      use.setAttributeNS('http://www.w3.org/1999/xlink', 'href', isExpanded ? '#panel-left-close' : '#panel-left-open');
+      if (tooltip) tooltip.querySelector('p').textContent = isExpanded ? 'Close Sidebar' : 'Open Sidebar';
+    }
+
+    toggleSidebar(button) {
+      const isExpanded = this.isExpandedState();
+      if (isExpanded) {
+        this.setSidebarMinimizeState(true);
+        this.collapseState();
+        this.updateIcons(button, false);
+      } else {
+        this.setSidebarMinimizeState(false);
+        this.expandState();
+        this.updateIcons(button, true);
+      }
+    }
+
+    handleHoverIn() {
+      clearTimeout(this.hoverTimeout);
+      if (this.layout.hasAttribute('data-collapsed')) {
+        this.hoverTimeout = setTimeout(() => this.hoverExpandState(), 200);
+      }
+    }
+
+    handleHoverOut() {
+      clearTimeout(this.hoverTimeout);
+      if (this.layout.hasAttribute('data-hovering') && !this.hasOpenMenu()) {
+        this.hoverCollapseState();
+      }
+    }
+
+    hasOpenMenu() {
+      return this.querySelector('.pv-popover-menu[data-active]') !== null;
+    }
+
+    handleMenuClick(event) {
+      const clickedMenu = event.target.closest('.pv-popover-menu');
+      const allMenus = this.querySelectorAll('.pv-popover-menu');
+
+      if (clickedMenu && this.contains(clickedMenu)) {
+        allMenus.forEach(menu => menu.removeAttribute('data-active'));
+        clickedMenu.setAttribute('data-active', '');
+        this.style.overflow = 'initial';
+        if (!this.layout.hasAttribute('data-expanded')) {
+            this.hoverExpandState();
+        }
+        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();
+      }
+    }
+
+    initializeSidebar() {
+      const currentSidebarMinimize = this.layout.hasAttribute('data-collapsed');
+      if (currentSidebarMinimize) {
+        return;
+      }
+      const storedValue = this.getSidebarMinimizeState();
+
+      if (storedValue) {
+        this.collapseState();
+        this.updateIcons(this.minimizeButton, false);
+      } else {
+        this.expandState();
+        this.updateIcons(this.minimizeButton, true);
+      }
+    }
+  }
+
+  customElements.define('pv-global-nav', PvGlobalNav, { extends: 'aside' });
 })();

package/package.json

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

package/pv-components/dist/vue/base/components/base/index.d.ts

@@ -1,4 +1,5 @@
 export { default as PvButton } from './PvButton/PvButton.vue';
+export { default as PvAiButton } from './PvAiButton/PvAiButton.vue';
 export { default as PvButtonWithTooltip } from './PvButton/PvButtonWithTooltip.vue';
 export { default as PvCounterBadge } from './PvCounterBadge/PvCounterBadge.vue';
 export { default as PvReleaseBadge } from './PvReleaseBadge/PvReleaseBadge.vue';