@turquoisehealth/pit-viper 2.108.0 → 2.109.1

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

@@ -179,7 +179,7 @@ class PVAutoClose extends HTMLElement {
     }
     customElements.define('pv-data-grid', PVDataGrid);
 
-  class PvGlobalNav extends HTMLElement {
+    class PvGlobalNav extends HTMLElement {
     constructor() {
       super();
       this.hoverTimeout = null;
@@ -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,27 +283,50 @@ 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();
         }
         return;
       }
+      // if outside sidebar, remove 'data-floating;
+      if (!inSidebar) {
+        this.layout.removeAttribute('data-floating');
+      }
 
-      // 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();
-        }
+      // clicked outside any menu, close all menus
+      allMenus.forEach(menu => menu.removeAttribute('data-active'));
+      this.style.overflowX = 'hidden';
+      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.108.0",
+  "version": "2.109.1",
   "description": "Turquoise Health's design system.",
   "main": "README.md",
   "publishConfig": {

package/pv-components/dist/vue/charts/pv-components-charts.d.ts

@@ -1,491 +0,0 @@
-import { AdvancedFilterModel } from 'ag-grid-community/dist/types/src/interfaces/advancedFilterModel';
-import { AgChartInstance } from 'ag-charts-enterprise';
-import { AgChartOptions } from 'ag-charts-types';
-import { AgChartOptions as AgChartOptions_2 } from 'ag-charts-enterprise';
-import { AgMapLineSeriesTooltipRendererParams } from 'ag-charts-enterprise';
-import { AgSeriesVisibilityChange } from 'ag-charts-enterprise';
-import { ColDef } from 'ag-grid-community';
-import { Column } from 'ag-grid-enterprise';
-import { ColumnMovedEvent } from 'ag-grid-enterprise';
-import { ColumnResizedEvent } from 'ag-grid-enterprise';
-import { ColumnRowGroupChangedEvent } from 'ag-grid-enterprise';
-import { ColumnVO } from 'ag-grid-community/dist/types/src/interfaces/iColumnVO';
-import { Component } from 'vue';
-import { ComponentOptionsMixin } from 'vue';
-import { ComponentProvideOptions } from 'vue';
-import { CreateComponentPublicInstanceWithMixins } from 'vue';
-import { CSSProperties } from 'vue';
-import { DefineComponent } from 'vue';
-import { ExtractPropTypes } from 'vue';
-import { FilterChangedEvent } from 'ag-grid-enterprise';
-import { FilterModel } from 'ag-grid-enterprise';
-import { FilterModel as FilterModel_2 } from 'ag-grid-community/dist/types/src/interfaces/iFilter';
-import { FirstDataRenderedEvent } from 'ag-grid-community';
-import { GlobalComponents } from 'vue';
-import { GlobalDirectives } from 'vue';
-import { GridApi } from 'ag-grid-community';
-import { GridReadyEvent } from 'ag-grid-community';
-import { GridState } from 'ag-grid-enterprise';
-import { IServerSideGetRowsParams } from 'ag-grid-enterprise';
-import { IsGroupOpenByDefaultParams } from 'ag-grid-community';
-import { IsServerSideGroupOpenByDefaultParams } from 'ag-grid-community';
-import { PropType } from 'vue';
-import { PublicProps } from 'vue';
-import { RefreshServerSideParams } from 'ag-grid-community';
-import { ShallowUnwrapRef } from 'vue';
-import { SortChangedEvent } from 'ag-grid-community';
-import { Theme } from 'ag-grid-enterprise';
-import { VNode } from 'vue';
-
-declare type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
-} & {};
-
-declare type ChartConfigPanelType = "y-axis" | "x-axis" | "sort" | "chart-type";
-
-declare interface ChartFilter {
-    colId: string;
-    options: ChartFilterOption[];
-}
-
-declare type ChartFilterOption = {
-    label: string;
-    value: string;
-    filterValues: string[];
-};
-
-declare interface ChartState {
-    seriesField?: string | null;
-    chartType?: string | null;
-    chartSort?: string | null;
-    chartCategoryFields?: string[] | null;
-}
-
-declare interface ChartStateChangedEvent {
-    api: GridApi | null;
-    newState: ChartState | null;
-    oldState: ChartState | null;
-}
-
-declare interface FilterValueResponseOption {
-    value: string;
-    label?: string;
-    isPreference?: boolean;
-    isSelectable?: boolean;
-    metadata?: any;
-}
-
-declare interface FilterValuesSetHandlerParams<T> {
-    api: GridApi<T>;
-    colDef: ColDef<T>;
-    column: Column<T>;
-    filterModel?: FilterModel | null;
-    query?: string;
-}
-
-declare interface FocusUpdateEvent {
-    focuses?: string[] | null | undefined;
-    filterField?: string | null | undefined;
-}
-
-declare type MapTopologyType = "state" | "city" | "county" | "cbsa" | "zip_code";
-
-declare interface MenuOption {
-    id: string;
-    text: string;
-    subText?: string;
-    secondaryText?: string | number;
-    icon?: string;
-    companyName?: string;
-    avatar?: {
-        initials?: string;
-        image?: string;
-        icon?: boolean;
-    };
-    groupingLabel?: string;
-    disabled?: boolean;
-    renderer?: Component;
-    rendererProps?: any;
-    classList?: string[];
-    searchText?: string;
-}
-
-export declare const PvChart: DefineComponent<PvChartProps, {
-getChartImageDataURL: (dimensions?: {
-width?: number;
-height?: number;
-}) => Promise<string> | undefined;
-}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
-"series-visibility-change": (event: AgSeriesVisibilityChange<unknown>) => any;
-}, string, PublicProps, Readonly<PvChartProps> & Readonly<{
-"onSeries-visibility-change"?: ((event: AgSeriesVisibilityChange<unknown>) => any) | undefined;
-}>, {
-seriesFormatType: "none" | "currency" | "percent";
-isLoading: boolean;
-enableFocusView: boolean;
-minHeight: number;
-translateNullValues: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {
-chartRef: CreateComponentPublicInstanceWithMixins<Readonly<ExtractPropTypes<    {
-options: {
-type: PropType<AgChartOptions>;
-default: () => AgChartOptions;
-};
-}>> & Readonly<{}>, {
-chart: AgChartInstance | undefined;
-}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {
-options: AgChartOptions;
-}, true, {}, {}, GlobalComponents, GlobalDirectives, string, {}, any, ComponentProvideOptions, {
-P: {};
-B: {};
-D: {};
-C: {};
-M: {};
-Defaults: {};
-}, Readonly<ExtractPropTypes<    {
-options: {
-type: PropType<AgChartOptions>;
-default: () => AgChartOptions;
-};
-}>> & Readonly<{}>, {
-chart: AgChartInstance | undefined;
-}, {}, {}, {}, {
-options: AgChartOptions;
-}> | null;
-}, HTMLDivElement>;
-
-declare interface PvChartProps {
-    options: AgChartOptions;
-    seriesFormatType?: "none" | "currency" | "percent";
-    isLoading?: boolean;
-    enableFocusView?: boolean;
-    minHeight?: number;
-    translateNullValues?: boolean;
-}
-
-declare interface PvDataTableProps<T> {
-    /**
-     * Column definitions for the table. Follows the AG Grid column definition format.
-     */
-    colDefs?: ColDef<T>[];
-    /**
-     * Array of JSON data objects to be displayed in the table. Only used for client-side row model.
-     */
-    rowData?: T[];
-    /**
-     * Handler to fetch server-side data. Only used for server-side row model.
-     */
-    serverSideRowHandler?: (params: IServerSideGetRowsParams<T>, isCsvExport?: boolean) => void;
-    /**
-     * Handler to fetch filter values for server-side filtering. Only used for server-side row model.
-     */
-    filterValuesSetHandler?: (params: FilterValuesSetHandlerParams<T>) => Promise<(FilterValueResponseOption | null)[]>;
-    /**
-     * Handler to return suggestions for applying search terms to the table.
-     */
-    tableSearchHandler?: (params: TableSearchHandlerParams<T>) => Promise<(QueryBuilderSuggestionMenuOption | null)[]>;
-    /**
-     * Specifies an initial set of filters/groups/sort/etc. to be applied to the table.
-     */
-    initialGridState?: GridState;
-    /**
-     * Specifies an initial set of metadata values for filters that require them
-     */
-    initialFilterValueMap?: Record<string, (FilterValueResponseOption | null)[]>;
-    /**
-     * Override the Pit Viper them
-     */
-    theme?: Theme;
-    /**
-     * For aggregated columns, only show the aggregate at the final group level
-     */
-    displayBaseAggregationsOnly?: boolean;
-    /**
-     * Display Row Number in the first column
-     */
-    displayRowNumber?: boolean;
-    /**
-     * Display Counts on Grouped Rows (requires allChildrenCount on the object)
-     */
-    displayGroupCount?: boolean;
-    /**
-     * Displays Icon on Preferences that emits handle-settings-icon event
-     */
-    displayPreferencesIcon?: boolean;
-    /**
-     * Display button to hide/show columns
-     */
-    enableColumnVisibilitySelector?: boolean;
-    /**
-     * Display everything focus view related
-     */
-    enableFocusView?: boolean;
-    /**
-     * Display button to group by columns
-     */
-    enableGroupBySelector?: boolean;
-    /**
-     * Display input to search within the table
-     */
-    enableTableSearch?: boolean;
-    /**
-     * Allows for slot content to be placed above the chart
-     */
-    enableTopSlot?: boolean;
-    /**
-     * Display button to open the vertical filter drawer
-     */
-    enableVerticalFilterPanel?: boolean;
-    /**
-     * Number of groups to support (defaults to 2)
-     */
-    rowGroupLimit?: number;
-    /**
-     * Whether to expand all groups by default, based on level. -1 expands all groups
-     */
-    groupDefaultExpanded?: number;
-    /**
-     * A handler to determine if a group should be open by default dynamically.
-     */
-    isClientSideGroupOpenByDefault?: (params: IsGroupOpenByDefaultParams) => boolean;
-    /**
-     * A handler to determine whether a group should be open by default.
-     */
-    isServerSideGroupOpenByDefault?: (params: IsServerSideGroupOpenByDefaultParams) => boolean;
-    /**
-     * Display button to export table data as CSV
-     */
-    enableCsvExport?: boolean;
-    /**
-     * # of rows to export to CSV - be careful overriding this as large exports can cause performance issues
-     */
-    csvRowLimit?: number;
-    /**
-     * Optional param to implement custom logic for CSV export. If not specified, the serverSideRowHandler will be used to generate the CSV data.
-     */
-    serverSideCsvHandler?: (params: IServerSideGetRowsParams<T>) => Promise<void>;
-    /**
-     * Field that can be used to identify row uniqueness for preserving expanded/collapsed row states
-     */
-    uniqueRowIdField?: string;
-    /**
-     * If true, will not show data until at least one filter is applied
-     */
-    requireFiltersToShowData?: boolean;
-    /**
-     * If true, will show loading state - can be used as a dynamic prop to show/hide loading state
-     */
-    isLoading?: boolean;
-    /**
-     * Height of the table + filter container
-     */
-    containerHeight?: number;
-    /**
-     * Min height of the table + filter container
-     */
-    containerMinHeight?: number;
-    /**
-     * Enables the ValidationModule for advanced debugging as well as additional console logging from AG Grid
-     */
-    debugMode?: boolean;
-    /**
-     * If true, hide all row-grouped columns from the table.
-     */
-    hideAllRowGroupedColumns?: boolean;
-    /**
-     * Specifies the column to pin to the left of the table if at least one row grouping is enabled.
-     */
-    leftPinnedColumnName?: string;
-    /**
-     * Enables pagination
-     */
-    pagination?: boolean;
-    /**
-     * Set the pagination page size. Defaults to 50.
-     */
-    paginationPageSize?: 20 | 50 | 100 | 200;
-    /**
-     * Row height for individual rows
-     */
-    rowHeight?: number;
-    /**
-     * Set tooltip show delay. Detaults 1000ms
-     */
-    tooltipShowDelay?: number;
-    /**
-     * Set tooltip hide delay.
-     */
-    tooltipHideDelay?: number;
-    /**
-     * Hide the table rows (but still show the filter panel)
-     */
-    hideTable?: boolean;
-    /**
-     * DOM location to use for relocating the filter panel
-     */
-    filterTeleportLocation?: string;
-    /**
-     * List of column fields that can be focused
-     */
-    focusableColumns?: string[];
-    tableSearchPlaceholder?: string;
-    tableSearchStyle?: TableSearchStyle;
-    maxHorizontalFilters?: number;
-    maintainColumnOrder?: boolean;
-    /**
-     * Custom CSS Properties
-     */
-    customCssProperties?: {
-        agGridWrapper: CSSProperties;
-    };
-}
-
-export declare const PvDataTableWithChart: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<any & PvDataTableWithChartProps<T> & Partial<{}>> & PublicProps;
-    expose(exposed: ShallowUnwrapRef<    {
-    getChartImageDataURL: (dimensions?: {
-    width?: number;
-    height?: number;
-    }) => Promise<string> | undefined;
-    getCsvData: () => Promise<string | null> | undefined;
-    refreshData: (params?: RefreshServerSideParams | null) => Promise<void> | undefined;
-    getFilterValueSelectedMetadataMap: () => Record<string, (FilterValueResponseOption | null)[]> | undefined;
-    }>): void;
-    attrs: any;
-    slots: {};
-    emit: {
-        (e: "chart-state-changed", event: ChartStateChangedEvent): void;
-        (e: "column-moved", event: ColumnMovedEvent<T>): void;
-        (e: "column-resized", event: ColumnResizedEvent<T>): void;
-        (e: "column-row-group-changed", event: ColumnRowGroupChangedEvent<T>): void;
-        (e: "grid-ready", event: GridReadyEvent<T>): void;
-        (e: "filter-changed", event: FilterChangedEvent<T>): void;
-        (e: "sort-changed", event: SortChangedEvent<T>): void;
-        (e: "filter-opened", event: FilterChangedEvent<T>): void;
-        (e: "first-data-rendered", event: FirstDataRenderedEvent<T>): void;
-        (e: "handle-settings-icon", value: string): void;
-        (e: "focus-update", event: FocusUpdateEvent): void;
-        (e: "chart-collapsed", collapsed: boolean): void;
-    };
-}>) => VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
-};
-
-declare interface PvDataTableWithChartProps<T> extends PvDataTableProps<T> {
-    enabledChartTypes?: supportedChartType[];
-    serverSideChartHandler?: (params: ServerSideChartDataHandlerParams) => Promise<ServerSideChartDataHandlerResponse>;
-    showSeriesLabels?: boolean;
-    truncateLabelValues?: boolean;
-    initialChartData?: AgChartOptions_2["data"];
-    enableCombinedChartConfigPanel?: boolean;
-    chartConfigPanelOptions?: ChartConfigPanelType[];
-    chartFilter?: ChartFilter;
-    chartType?: supportedChartType;
-    yKey?: string;
-    initialSort?: string;
-    hideChart?: boolean;
-    hideTable?: boolean;
-    filterPanelAboveChart?: boolean;
-    initialChartCollapsed?: boolean;
-    initialFocusData?: {
-        focuses: string[];
-        focusType: string | null;
-    };
-    percentOfFocusViewYKey?: string;
-    focusableColumns?: string[];
-    /**
-     * Enable toggle to group or ungroup
-     */
-    enableGroupingToggle?: boolean;
-    /**
-     * Css Properties
-     */
-    customCssProperties?: {
-        agGridWrapper: CSSProperties;
-    };
-}
-
-export declare const PvMapChart: DefineComponent<    {
-chartData: PvMapChartData[];
-selectedRegion?: string | undefined;
-} & PvMapChartProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-"update:chartData": (value: PvMapChartData[]) => any;
-"update:selectedRegion": (value: string | undefined) => any;
-} & {
-"region-selection-changed": (event: RegionSelectionChangedEvent) => any;
-}, string, PublicProps, Readonly<{
-chartData: PvMapChartData[];
-selectedRegion?: string | undefined;
-} & PvMapChartProps> & Readonly<{
-"onUpdate:chartData"?: ((value: PvMapChartData[]) => any) | undefined;
-"onUpdate:selectedRegion"?: ((value: string | undefined) => any) | undefined;
-"onRegion-selection-changed"?: ((event: RegionSelectionChangedEvent) => any) | undefined;
-}>, {
-isLoading: boolean;
-mapType: MapTopologyType;
-displayGradientLegend: boolean;
-gradientLegendMin: number;
-gradientLegendMax: number;
-seriesValueFormatter: (value: number) => string;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
-
-declare interface PvMapChartData {
-    [key: string]: string | number;
-}
-
-declare interface PvMapChartProps {
-    seriesKey: string;
-    mapType?: MapTopologyType;
-    displayGradientLegend?: boolean;
-    displayRegionSelector?: boolean;
-    gradientLegendMin?: number;
-    gradientLegendMax?: number;
-    seriesValueFormatter?: (value: number) => string;
-    isLoading?: boolean;
-    noDataMessage?: string;
-    tooltipRenderer?: (params: AgMapLineSeriesTooltipRendererParams<PvMapChartData>) => string | HTMLElement;
-}
-
-declare interface QueryBuilderSuggestionMenuOption extends MenuOption {
-    queryTerm?: QueryTerm;
-}
-
-declare interface QueryTerm {
-    queryField?: string;
-    queryDisplayField?: string;
-    exactMatch?: boolean;
-    queryText?: string;
-}
-
-declare interface RegionSelectionChangedEvent {
-    region: string | null | undefined;
-}
-
-declare interface ServerSideChartDataHandlerParams {
-    rowGroupCols: ColumnVO[];
-    /** Columns that have aggregations on them.  */
-    valueCols: ColumnVO[];
-    /**
-     * If filtering, what the filter model is.
-     * If Advanced Filter is enabled, will be of type `AdvancedFilterModel | null`.
-     * If Advanced Filter is disabled, will be of type `FilterModel`.
-     */
-    filterModel: FilterModel_2 | AdvancedFilterModel | null;
-}
-
-declare interface ServerSideChartDataHandlerResponse {
-    data: AgChartOptions_2["data"];
-    stackField: string;
-}
-
-declare type supportedChartType = "column" | "bar" | "column_stacked" | "bar_stacked" | "line" | "area" | "pie";
-
-declare interface TableSearchHandlerParams<T> {
-    api: GridApi<T>;
-    filterModel?: FilterModel | null;
-    query?: string;
-}
-
-declare type TableSearchStyle = "query-builder" | "text";
-
-export { }