@turquoisehealth/pit-viper 2.104.2-dev.0 → 2.105.0

package/_site/assets/css/pit-viper-v2-scoped.css

@@ -3301,29 +3301,10 @@
   line-height: 1.33333333;
   font-weight: 500;
 }
-.pv-v2 .pv-action-bar-container > ::slotted(*) {
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  justify-content: unset;
-  gap: 0.5rem;
-  background-color: #242626;
-  color: #FFFFFF;
-  padding: 0.5rem 0.75rem;
-  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.12);
-  border-radius: 8px;
-  font-size: 0.75rem;
-  line-height: 1.33333333;
-  font-weight: 500;
-}
 .pv-v2 .pv-action-bar-container[data-style=white] > div {
   background-color: #FFFFFF;
   color: #121313;
 }
-.pv-v2 .pv-action-bar-container[data-style=white] > ::slotted(*) {
-  background-color: #FFFFFF;
-  color: #121313;
-}
 .pv-v2 .pv-card {
   position: relative;
   border: 1px solid var(--card-border-color, #E3E7EA);

package/_site/assets/css/pit-viper-v2.css

@@ -3575,32 +3575,11 @@ pv-dropdown-auto-close.pv-dropdown > [class*=pv-button][data-dropdown] {
   font-weight: 500;
 }
 
-.pv-action-bar-container > ::slotted(*) {
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  justify-content: unset;
-  gap: 0.5rem;
-  background-color: #242626;
-  color: #FFFFFF;
-  padding: 0.5rem 0.75rem;
-  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.12);
-  border-radius: 8px;
-  font-size: 0.75rem;
-  line-height: 1.33333333;
-  font-weight: 500;
-}
-
 .pv-action-bar-container[data-style=white] > div {
   background-color: #FFFFFF;
   color: #121313;
 }
 
-.pv-action-bar-container[data-style=white] > ::slotted(*) {
-  background-color: #FFFFFF;
-  color: #121313;
-}
-
 .pv-card {
   position: relative;
   border: 1px solid var(--card-border-color, #E3E7EA);

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

@@ -3580,32 +3580,11 @@ pv-dropdown-auto-close.pv-dropdown > [class*=pv-button][data-dropdown] {
   font-weight: 500;
 }
 
-.pv-action-bar-container > ::slotted(*) {
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  justify-content: space-between;
-  gap: 0.5rem;
-  background-color: #02363D;
-  color: #FFFFFF;
-  padding: 0;
-  box-shadow: 0 8px 32px rgba(2, 54, 61, 0.24);
-  border-radius: 4px;
-  font-size: 1.125rem;
-  line-height: 1.55555555;
-  font-weight: 500;
-}
-
 .pv-action-bar-container[data-style=white] > div {
   background-color: #02363D;
   color: #02363D;
 }
 
-.pv-action-bar-container[data-style=white] > ::slotted(*) {
-  background-color: #02363D;
-  color: #02363D;
-}
-
 .pv-card {
   position: relative;
   border: 1px solid var(--card-border-color, #DCDFE4);

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.2-dev.0",
+  "version": "2.105.0",
   "description": "Turquoise Health's design system.",
   "main": "README.md",
   "publishConfig": {
@@ -34,6 +34,10 @@
       "types": "./pv-components/dist/vue/visualizations/components/visualizations/index.d.ts",
       "import": "./pv-components/dist/vue/visualizations/pv-components-visualizations.mjs",
       "require": "./pv-components/dist/vue/visualizations/pv-components-visualizations.js"
+    },
+    "./web_components": {
+      "types": "./pv-components/dist/src/web-components.d.ts",
+      "default": "./pv-components/dist/web/pv-components.iife.js"
     }
   },
   "scripts": {
@@ -46,6 +50,7 @@
     "prepublishOnly": "npm install && npm run test && npm run build",
     "start": "npm-run-all build:sass --parallel watch:*",
     "build": "npm-run-all build:*",
+    "postbuild": "eleventy --quiet",
     "prepare": "husky",
     "test": "npm run test --workspace=pv-components",
     "create_pr": "tsx ./scripts/createPR.ts",
@@ -66,37 +71,13 @@
   },
   "homepage": "https://github.com/turquoisehealth/pit-viper/",
   "peerDependencies": {
-    "@floating-ui/vue": "^1.1.9",
-    "@primeuix/themes": "^1.1.1",
-    "@vueuse/components": "^13.0.0",
-    "@vueuse/core": "^13.0.0",
-    "@vueuse/integrations": "^13.1.0",
     "ag-charts-enterprise": "^12.1.0",
     "ag-charts-vue3": "^12.1.0",
     "ag-grid-community": "^33.2.1",
     "ag-grid-enterprise": "^33.2.1",
-    "ag-grid-vue3": "^33.2.1",
-    "papaparse": "^5.5.2",
-    "primevue": "^4.3.5",
-    "sortablejs": "^1.15.6",
-    "vue": "^3.5.13"
+    "ag-grid-vue3": "^33.2.1"
   },
   "peerDependenciesMeta": {
-    "@floating-ui/vue": {
-      "optional": false
-    },
-    "@primeuix/themes": {
-      "optional": false
-    },
-    "@vueuse/components": {
-      "optional": false
-    },
-    "@vueuse/core": {
-      "optional": false
-    },
-    "@vueuse/integrations": {
-      "optional": false
-    },
     "ag-charts-enterprise": {
       "optional": true
     },
@@ -111,18 +92,6 @@
     },
     "ag-grid-vue3": {
       "optional": true
-    },
-    "papaparse": {
-      "optional": false
-    },
-    "primevue": {
-      "optional": false
-    },
-    "sortablejs": {
-      "optional": false
-    },
-    "vue": {
-      "optional": false
     }
   },
   "dependencies": {
@@ -141,6 +110,10 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.4",
+    "@vue/eslint-config-prettier": "^10.1.0",
+    "@vue/eslint-config-typescript": "^14.3.0",
+    "chokidar-cli": "^3.0.0",
+    "eslint-plugin-vue": "^9.32.0",
     "pagefind": "^1.3.0",
     "tsx": "^4.0.0"
   }

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

@@ -31,7 +31,7 @@ export interface PvMultiSelectButtonProps {
     searchPlaceholder?: string;
     overlayTrigger?: boolean;
     optionsVariant?: Exclude<MenuOptionsVariant, "radio">;
-    options?: MenuOption[];
+    options: MenuOption[];
     useTeleport?: boolean;
 }
 declare const _default: __VLS_WithTemplateSlots< DefineComponent<{
@@ -58,6 +58,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<{
     showClear: boolean;
     useTeleport: boolean;
     teleportLocation: string;
+    options: MenuOption[];
     counterPosition: "left" | "right" | "none";
     showDropdown: boolean;
     optionsVariant: Exclude<MenuOptionsVariant, "radio">;
@@ -292,7 +293,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<{
         searchPlaceholder?: string;
         overlayTrigger?: boolean;
         optionsVariant?: Exclude<MenuOptionsVariant, "radio">;
-        options?: MenuOption[];
+        options: MenuOption[];
         useTeleport?: boolean;
         "onDropdown-open"?: (() => any) | undefined;
         "onDropdown-closed"?: (() => any) | undefined;
@@ -335,7 +336,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<{
         searchPlaceholder?: string;
         overlayTrigger?: boolean;
         optionsVariant?: Exclude<MenuOptionsVariant, "radio">;
-        options?: MenuOption[];
+        options: MenuOption[];
         useTeleport?: boolean;
         "onDropdown-open"?: (() => any) | undefined;
         "onDropdown-closed"?: (() => any) | undefined;

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

@@ -22,7 +22,7 @@ export interface PvSelectButton {
     showSearchInput?: boolean;
     searchPlaceholder?: string;
     optionsVariant?: Exclude<MenuOptionsVariant, "checkbox">;
-    options?: MenuOption[];
+    options: MenuOption[];
     useTeleport?: boolean;
     allowDeselect?: boolean;
     counterPosition?: "left" | "right";

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

@@ -18,7 +18,6 @@ declare const __VLS_component: DefineComponent<PvTooltipV2Props, {}, {}, {}, {},
     position: PvAlignmentPositions;
     showOnHover: boolean;
     disableInteractive: boolean;
-    disableContent: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/pv-components/dist/vue/base/components/base/PvTooltipV2/types.d.ts

@@ -1,5 +1,5 @@
 import { PvSize } from '../baseProps';
-import { PvPopoverV2Props } from '../PvPopoverV2/types';
+import { PvPopoverV2Props } from '../PvPopoverV2/types.ts';
 export type PvTooltipVariants = "white" | "dark";
 export type PvTooltipSize = Extract<PvSize, "sm" | "md">;
 export interface PvTooltipV2Props extends PvPopoverV2Props {
@@ -7,5 +7,4 @@ export interface PvTooltipV2Props extends PvPopoverV2Props {
     label?: string;
     description?: string;
     size?: PvTooltipSize;
-    disableContent?: boolean;
 }

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';