@hashicorp/design-system-components 5.0.0 → 5.1.0-rc-20251106155636

package/declarations/components/hds/advanced-table/index.d.ts

@@ -5,8 +5,10 @@
 import Component from '@glimmer/component';
 import type Owner from '@ember/owner';
 import type { WithBoundArgs } from '@glint/template';
+import type { ComponentLike } from '@glint/template';
 import { HdsAdvancedTableDensityValues, HdsAdvancedTableVerticalAlignmentValues } from './types.ts';
 import type { HdsAdvancedTableColumn, HdsAdvancedTableDensities, HdsAdvancedTableHorizontalAlignment, HdsAdvancedTableOnSelectionChangeSignature, HdsAdvancedTableThSortOrder, HdsAdvancedTableVerticalAlignment, HdsAdvancedTableModel, HdsAdvancedTableExpandState, HdsAdvancedTableColumnReorderCallback } from './types.ts';
+import type { HdsFilterBarSignature } from '../filter-bar/index.ts';
 import type { HdsFormCheckboxBaseSignature } from '../form/checkbox/base.ts';
 import type HdsAdvancedTableTd from './td.ts';
 import type HdsAdvancedTableTh from './th.ts';
@@ -41,12 +43,18 @@ export interface HdsAdvancedTableSignature {
         hasStickyFirstColumn?: boolean;
         childrenKey?: string;
         maxHeight?: string;
+        isEmpty?: boolean;
         onColumnReorder?: HdsAdvancedTableColumnReorderCallback;
         onColumnResize?: (columnKey: string, newWidth?: string) => void;
         onSelectionChange?: (selection: HdsAdvancedTableOnSelectionChangeSignature) => void;
         onSort?: (sortBy: string, sortOrder: HdsAdvancedTableThSortOrder) => void;
     };
     Blocks: {
+        actions?: [
+            {
+                FilterBar?: ComponentLike<HdsFilterBarSignature>;
+            }
+        ];
         body?: [
             {
                 Td?: WithBoundArgs<typeof HdsAdvancedTableTd, 'align'>;
@@ -57,6 +65,7 @@ export interface HdsAdvancedTableSignature {
                 isOpen?: HdsAdvancedTableExpandState;
             }
         ];
+        emptyState?: [];
     };
     Element: HTMLDivElement;
 }
@@ -89,6 +98,7 @@ export default class HdsAdvancedTable extends Component<HdsAdvancedTableSignatur
     showScrollIndicatorBottom: boolean;
     stickyColumnOffset: string;
     constructor(owner: Owner, args: HdsAdvancedTableSignature['Args']);
+    get isEmpty(): boolean;
     get identityKey(): string | undefined;
     get childrenKey(): string;
     get hasStickyFirstColumn(): boolean | undefined;

package/declarations/components/hds/filter-bar/checkbox.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import Component from '@glimmer/component';
+import type { HdsFilterBarData } from './types.ts';
+export interface HdsFilterBarCheckboxSignature {
+    Args: {
+        value?: string;
+        keyFilter: HdsFilterBarData | undefined;
+        onChange?: (event: Event) => void;
+    };
+    Blocks: {
+        default: [];
+    };
+    Element: HTMLDivElement;
+}
+export default class HdsFilterBarCheckbox extends Component<HdsFilterBarCheckboxSignature> {
+    onChange(event: Event): void;
+    get isChecked(): boolean;
+}

package/declarations/components/hds/filter-bar/filter-group.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import Component from '@glimmer/component';
+import type { WithBoundArgs } from '@glint/template';
+import HdsFilterBarTabsTab from './tabs/tab.ts';
+import HdsFilterBarTabsPanel from './tabs/panel.ts';
+import type { HdsTabsPanelSignature } from '../tabs/panel.ts';
+import HdsFilterBarCheckbox from './checkbox.ts';
+import HdsFilterBarRadio from './radio.ts';
+import type { HdsFilterBarFilter, HdsFilterBarFilters, HdsFilterBarFilterType, HdsFilterBarData, HdsFilterBarRangeFilterSelector } from './types.ts';
+export interface HdsFilterBarFilterGroupSignature {
+    Args: {
+        tab?: WithBoundArgs<typeof HdsFilterBarTabsTab, never>;
+        panel?: WithBoundArgs<typeof HdsFilterBarTabsPanel, never>;
+        key: string;
+        text: string;
+        type?: HdsFilterBarFilterType;
+        filters: HdsFilterBarFilters;
+        searchEnabled?: boolean;
+        onChange: (key: string, keyFilter?: HdsFilterBarFilter) => void;
+    };
+    Blocks: {
+        default: [
+            {
+                Checkbox?: WithBoundArgs<typeof HdsFilterBarCheckbox, 'keyFilter' | 'onChange'>;
+                Radio?: WithBoundArgs<typeof HdsFilterBarRadio, 'keyFilter' | 'onChange'>;
+            }
+        ];
+    };
+    Element: HdsTabsPanelSignature['Element'];
+}
+export default class HdsFilterBarFilterGroup extends Component<HdsFilterBarFilterGroupSignature> {
+    internalFilters: HdsFilterBarData | undefined;
+    private _panelElement;
+    private _setUpFilterPanel;
+    get type(): HdsFilterBarFilterType;
+    get keyFilter(): HdsFilterBarData | undefined;
+    get numFilters(): number;
+    onSelectionChange(event: Event): void;
+    onRangeChange(selector?: HdsFilterBarRangeFilterSelector, value?: number): void;
+    get formattedFilters(): HdsFilterBarFilter | undefined;
+    get classNames(): string;
+    private onSearch;
+}

package/declarations/components/hds/filter-bar/filters-dropdown.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import Component from '@glimmer/component';
+import type Owner from '@ember/owner';
+import type { WithBoundArgs } from '@glint/template';
+import HdsFilterBarFilterGroup from './filter-group.ts';
+import type { HdsFilterBarFilters, HdsFilterBarFilter } from './types.ts';
+import type { HdsDropdownSignature } from '../dropdown/index.ts';
+export interface HdsFilterBarFiltersDropdownSignature {
+    Args: HdsDropdownSignature['Args'] & {
+        filters: HdsFilterBarFilters;
+        onFilter?: (filters: HdsFilterBarFilters) => void;
+    };
+    Blocks: {
+        default: [
+            {
+                FilterGroup?: WithBoundArgs<typeof HdsFilterBarFilterGroup, 'tab' | 'panel' | 'filters' | 'onChange'>;
+            }
+        ];
+    };
+    Element: HTMLDivElement;
+}
+export default class HdsFilterBarFiltersDropdown extends Component<HdsDropdownSignature & HdsFilterBarFiltersDropdownSignature> {
+    internalFilters: HdsFilterBarFilters;
+    constructor(owner: Owner, args: HdsFilterBarFiltersDropdownSignature['Args']);
+    private _syncFilters;
+    onFilter(key: string, keyFilter?: HdsFilterBarFilter): void;
+    onApply(closeDropdown?: () => void): void;
+    onClear(closeDropdown?: () => void): void;
+    get numFilters(): number;
+    get classNames(): string;
+    private _updateFilter;
+    private _onClose;
+}

package/declarations/components/hds/filter-bar/index.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import Component from '@glimmer/component';
+import type { WithBoundArgs } from '@glint/template';
+import type { HdsFilterBarFilters } from './types.ts';
+import HdsDropdown from '../dropdown/index.ts';
+import HdsFilterBarFiltersDropdown from './filters-dropdown.ts';
+export interface HdsFilterBarSignature {
+    Args: {
+        filters: HdsFilterBarFilters;
+        hasSearch?: boolean;
+        onFilter?: (filters: HdsFilterBarFilters) => void;
+    };
+    Blocks: {
+        default?: [
+            {
+                ActionsDropdown?: WithBoundArgs<typeof HdsDropdown, never>;
+                FiltersDropdown?: WithBoundArgs<typeof HdsFilterBarFiltersDropdown, 'filters' | 'onFilter'>;
+            }
+        ];
+    };
+    Element: HTMLDivElement;
+}
+export default class HdsFilterBar extends Component<HdsFilterBarSignature> {
+    _isExpanded: boolean;
+    get searchValue(): string;
+    onFilter(filters: HdsFilterBarFilters): void;
+    clearFilters(): void;
+    onSearch(event: Event): void;
+    toggleExpand(): void;
+    get hasActiveFilters(): boolean;
+    private onFilterDismiss;
+    private _filterData;
+    private _filterText;
+    private _filterArrayData;
+    private _filterKeyText;
+    private _rangeFilterText;
+}

package/declarations/components/hds/filter-bar/radio.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import Component from '@glimmer/component';
+import type { HdsFilterBarData } from './types.ts';
+export interface HdsFilterBarRadioSignature {
+    Args: {
+        value?: string;
+        keyFilter: HdsFilterBarData | undefined;
+        onChange?: (event: Event) => void;
+    };
+    Blocks: {
+        default: [];
+    };
+    Element: HTMLDivElement;
+}
+export default class HdsFilterBarRadio extends Component<HdsFilterBarRadioSignature> {
+    onChange(event: Event): void;
+    get isChecked(): boolean;
+}

package/declarations/components/hds/filter-bar/range.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import Component from '@glimmer/component';
+import type Owner from '@ember/owner';
+import type { HdsFilterBarData, HdsFilterBarRangeFilterSelector } from './types.ts';
+export declare const SELECTORS: HdsFilterBarRangeFilterSelector[];
+export declare const SELECTORS_DISPLAY_TEXT: Record<HdsFilterBarRangeFilterSelector, string>;
+export declare const SELECTORS_DISPLAY_SYMBOL: Record<HdsFilterBarRangeFilterSelector, string>;
+export interface HdsFilterBarRangeSignature {
+    Args: {
+        keyFilter: HdsFilterBarData | undefined;
+        onChange?: (selector?: HdsFilterBarRangeFilterSelector, value?: number) => void;
+    };
+    Blocks: {
+        default: [];
+    };
+    Element: HTMLDivElement;
+}
+export default class HdsFilterBarRange extends Component<HdsFilterBarRangeSignature> {
+    private _selector;
+    private _value;
+    private _selectorValues;
+    private _selectorInputId;
+    private _valueInputId;
+    constructor(owner: Owner, args: HdsFilterBarRangeSignature['Args']);
+    get stringValue(): string | undefined;
+    selectorText(selector: HdsFilterBarRangeFilterSelector): string;
+    onSelectorChange(event: Event): void;
+    onValueChange(event: Event): void;
+    private _onChange;
+}

package/declarations/components/hds/filter-bar/tabs/index.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import Component from '@glimmer/component';
+import type { WithBoundArgs } from '@glint/template';
+import HdsFilterBarTabsTabComponent from './tab.ts';
+import HdsFilterBarTabsPanelComponent from './panel.ts';
+export interface HdsFilterBarTabsSignature {
+    Args: {
+        selectedTabIndex?: number;
+        ariaLabel: string;
+        onClickTab?: (event: MouseEvent, tabIndex: number) => void;
+    };
+    Blocks: {
+        default: [
+            {
+                Tab?: WithBoundArgs<typeof HdsFilterBarTabsTabComponent, 'selectedTabIndex' | 'tabIds' | 'panelIds' | 'didInsertNode' | 'willDestroyNode' | 'onClick' | 'onKeyUp'>;
+                Panel?: WithBoundArgs<typeof HdsFilterBarTabsPanelComponent, 'selectedTabIndex' | 'tabIds' | 'panelIds' | 'didInsertNode' | 'willDestroyNode'>;
+            }
+        ];
+    };
+    Element: HTMLDivElement;
+}
+export default class HdsFilterBarTabs extends Component<HdsFilterBarTabsSignature> {
+    private _tabIds;
+    private _tabNodes;
+    private _panelNodes;
+    private _panelIds;
+    private _selectedTabIndex;
+    private _selectedTabId?;
+    private _element;
+    private _setUpFilterBarTabs;
+    didInsertTab(): void;
+    willDestroyTab(element: HTMLElement): void;
+    didInsertPanel(): void;
+    willDestroyPanel(element: HTMLElement): void;
+    onClick(event: MouseEvent, tabIndex: number): void;
+    onKeyUp(event: KeyboardEvent, tabIndex: number): void;
+    focusTab(tabIndex: number, event: KeyboardEvent): void;
+    private updateTabs;
+    private updatePanels;
+}

package/declarations/components/hds/filter-bar/tabs/panel.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import Component from '@glimmer/component';
+export interface HdsFilterBarTabsPanelSignature {
+    Args: {
+        selectedTabIndex?: number;
+        tabIds?: string[];
+        panelIds?: string[];
+        didInsertNode?: () => void;
+        willDestroyNode?: (element: HTMLElement) => void;
+    };
+    Blocks: {
+        default: [];
+    };
+    Element: HTMLElement;
+}
+export default class HdsFilterBarTabsPanel extends Component<HdsFilterBarTabsPanelSignature> {
+    private _panelId;
+    private _elementId?;
+    private _setUpPanel;
+    get nodeIndex(): number | undefined;
+    get coupledTabId(): string | undefined;
+    get isVisible(): boolean;
+    didInsertNode(element: HTMLElement): void;
+    willDestroyNode(element: HTMLElement): void;
+}

package/declarations/components/hds/filter-bar/tabs/tab.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import Component from '@glimmer/component';
+export interface HdsFilterBarTabsTabSignature {
+    Args: {
+        selectedTabIndex?: number;
+        tabIds?: string[];
+        panelIds?: string[];
+        didInsertNode?: () => void;
+        willDestroyNode?: (element: HTMLButtonElement) => void;
+        onClick?: (event: MouseEvent, nodeIndex: number) => void;
+        onKeyUp?: (event: KeyboardEvent, nodeIndex: number) => void;
+    };
+    Blocks: {
+        default: [];
+    };
+    Element: HTMLElement;
+}
+export default class HdsFilterBarTabsTab extends Component<HdsFilterBarTabsTabSignature> {
+    private _tabId;
+    private _elementId?;
+    private _setUpTab;
+    get nodeIndex(): number | undefined;
+    get coupledPanelId(): string | undefined;
+    get isSelected(): boolean;
+    didInsertNode(element: HTMLButtonElement): void;
+    willDestroyNode(element: HTMLButtonElement): void;
+    onClick(event: MouseEvent): false | undefined;
+    onKeyUp(event: KeyboardEvent): void;
+    get classNames(): string;
+}

package/declarations/components/hds/filter-bar/types.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+export declare enum HdsFilterBarFilterTypeValues {
+    multiSelect = "multi-select",
+    singleSelect = "single-select",
+    range = "range",
+    generic = "generic",
+    search = "search"
+}
+export type HdsFilterBarFilterType = `${HdsFilterBarFilterTypeValues}`;
+export interface HdsFilterBarGenericFilterData {
+    value: unknown;
+}
+export interface HdsFilterBarRangeFilterData {
+    selector: HdsFilterBarRangeFilterSelector;
+    value: number;
+}
+export type HdsFilterBarData = HdsFilterBarGenericFilterData[] | HdsFilterBarGenericFilterData | HdsFilterBarRangeFilterData;
+export interface HdsFilterBarSingleSelectFilter {
+    type: 'single-select';
+    text?: string;
+    data: HdsFilterBarGenericFilterData;
+}
+export interface HdsFilterBarMultiSelectFilter {
+    type: 'multi-select';
+    text?: string;
+    data: HdsFilterBarGenericFilterData[];
+}
+export interface HdsFilterBarRangeFilter {
+    type: 'range';
+    text?: string;
+    data: HdsFilterBarRangeFilterData;
+}
+export interface HdsFilterBarSearchFilter {
+    type: 'search';
+    text?: string;
+    data: HdsFilterBarGenericFilterData;
+}
+export type HdsFilterBarFilter = HdsFilterBarSingleSelectFilter | HdsFilterBarMultiSelectFilter | HdsFilterBarRangeFilter | HdsFilterBarSearchFilter;
+export interface HdsFilterBarFilters {
+    [name: string]: HdsFilterBarFilter;
+}
+export declare enum HdsFilterBarRangeFilterSelectorValues {
+    lessThan = "less-than",
+    lessThanOrEqualTo = "less-than-or-equal-to",
+    equalTo = "equal-to",
+    greaterThanOrEqualTo = "greater-than-or-equal-to",
+    greaterThan = "greater-than"
+}
+export type HdsFilterBarRangeFilterSelector = `${HdsFilterBarRangeFilterSelectorValues}`;

package/declarations/components.d.ts

@@ -87,6 +87,16 @@ export { default as HdsDropdownToggleIcon } from './components/hds/dropdown/togg
 export * from './components/hds/dropdown/list-item/types.ts';
 export * from './components/hds/dropdown/toggle/types.ts';
 export * from './components/hds/dropdown/types.ts';
+export { default as HdsFilterBar } from './components/hds/filter-bar/index.ts';
+export { default as HdsFilterBarCheckbox } from './components/hds/filter-bar/checkbox.ts';
+export { default as HdsFilterBarFiltersDropdown } from './components/hds/filter-bar/filters-dropdown.ts';
+export { default as HdsFilterBarFilterGroup } from './components/hds/filter-bar/filter-group.ts';
+export { default as HdsFilterBarRadio } from './components/hds/filter-bar/radio.ts';
+export { default as HdsFilterBarRange } from './components/hds/filter-bar/range.ts';
+export { default as HdsFilterBarTabs } from './components/hds/filter-bar/tabs/index.ts';
+export { default as HdsFilterBarTabsPanel } from './components/hds/filter-bar/tabs/panel.ts';
+export { default as HdsFilterBarTabsTab } from './components/hds/filter-bar/tabs/tab.ts';
+export * from './components/hds/filter-bar/types.ts';
 export { default as HdsFlyout } from './components/hds/flyout/index.ts';
 export * from './components/hds/flyout/types.ts';
 export { default as HdsForm } from './components/hds/form/index.ts';

package/declarations/template-registry.d.ts

@@ -93,6 +93,15 @@ import type HdsDropdownListItemTitleComponent from './components/hds/dropdown/li
 import type HdsDropdownToggleButtonComponent from './components/hds/dropdown/toggle/button';
 import type HdsDropdownToggleChevronComponent from './components/hds/dropdown/toggle/chevron';
 import type HdsDropdownToggleIconComponent from './components/hds/dropdown/toggle/icon';
+import type HdsFilterBarComponent from './components/hds/filter-bar';
+import type HdsFilterBarCheckboxComponent from './components/hds/filter-bar/checkbox';
+import type HdsFilterBarRadioComponent from './components/hds/filter-bar/radio';
+import type HdsFilterBarFiltersDropdownComponent from './components/hds/filter-bar/filters-dropdown';
+import type HdsFilterBarFilterGroupComponent from './components/hds/filter-bar/filter-group';
+import type HdsFilterBarRangeComponent from './components/hds/filter-bar/range';
+import type HdsFilterBarTabsComponent from './components/hds/filter-bar/tabs';
+import type HdsFilterBarTabsPanelComponent from './components/hds/filter-bar/tabs/panel';
+import type HdsFilterBarTabsTabComponent from './components/hds/filter-bar/tabs/tab';
 import type HdsFlyoutComponent from './components/hds/flyout';
 import type HdsFormComponent from './components/hds/form';
 import type HdsFormCharacterCountComponent from './components/hds/form/character-count';
@@ -424,6 +433,24 @@ export default interface HdsComponentsRegistry {
     'hds/dropdown/toggle/chevron': typeof HdsDropdownToggleChevronComponent;
     'Hds::Dropdown::Toggle::Icon': typeof HdsDropdownToggleIconComponent;
     'hds/dropdown/toggle/icon': typeof HdsDropdownToggleIconComponent;
+    'Hds::FilterBar': typeof HdsFilterBarComponent;
+    'hds/filter-bar': typeof HdsFilterBarComponent;
+    'Hds::FilterBar::Checkbox': typeof HdsFilterBarCheckboxComponent;
+    'hds/filter-bar/checkbox': typeof HdsFilterBarCheckboxComponent;
+    'Hds::FilterBar::Radio': typeof HdsFilterBarRadioComponent;
+    'hds/filter-bar/radio': typeof HdsFilterBarRadioComponent;
+    'Hds::FilterBar::FiltersDropdown': typeof HdsFilterBarFiltersDropdownComponent;
+    'hds/filter-bar/filters-dropdown': typeof HdsFilterBarFiltersDropdownComponent;
+    'Hds::FilterBar::FilterGroup': typeof HdsFilterBarFilterGroupComponent;
+    'hds/filter-bar/filter-group': typeof HdsFilterBarFilterGroupComponent;
+    'Hds::FilterBar::Range': typeof HdsFilterBarRangeComponent;
+    'hds/filter-bar/range': typeof HdsFilterBarRangeComponent;
+    'Hds::FilterBar::Tabs': typeof HdsFilterBarTabsComponent;
+    'hds/filter-bar/tabs': typeof HdsFilterBarTabsComponent;
+    'Hds::FilterBar::Tabs::Panel': typeof HdsFilterBarTabsPanelComponent;
+    'hds/filter-bar/tabs/panel': typeof HdsFilterBarTabsPanelComponent;
+    'Hds::FilterBar::Tabs::Tab': typeof HdsFilterBarTabsTabComponent;
+    'hds/filter-bar/tabs/tab': typeof HdsFilterBarTabsTabComponent;
     'Hds::Flyout': typeof HdsFlyoutComponent;
     'hds/flyout': typeof HdsFlyoutComponent;
     'Hds::Form': typeof HdsFormComponent;

package/dist/_app_/components/hds/filter-bar/checkbox.js

@@ -0,0 +1 @@
+export { default } from "@hashicorp/design-system-components/components/hds/filter-bar/checkbox";

package/dist/_app_/components/hds/filter-bar/filter-group.js

@@ -0,0 +1 @@
+export { default } from "@hashicorp/design-system-components/components/hds/filter-bar/filter-group";

package/dist/_app_/components/hds/filter-bar/filters-dropdown.js

@@ -0,0 +1 @@
+export { default } from "@hashicorp/design-system-components/components/hds/filter-bar/filters-dropdown";

package/dist/_app_/components/hds/filter-bar/radio.js

@@ -0,0 +1 @@
+export { default } from "@hashicorp/design-system-components/components/hds/filter-bar/radio";

package/dist/_app_/components/hds/filter-bar/range.js

@@ -0,0 +1 @@
+export { default } from "@hashicorp/design-system-components/components/hds/filter-bar/range";

package/dist/_app_/components/hds/filter-bar/tabs/panel.js

@@ -0,0 +1 @@
+export { default } from "@hashicorp/design-system-components/components/hds/filter-bar/tabs/panel";

package/dist/_app_/components/hds/filter-bar/tabs/tab.js

@@ -0,0 +1 @@
+export { default } from "@hashicorp/design-system-components/components/hds/filter-bar/tabs/tab";

package/dist/_app_/components/hds/filter-bar/tabs.js

@@ -0,0 +1 @@
+export { default } from "@hashicorp/design-system-components/components/hds/filter-bar/tabs/index";

package/dist/_app_/components/hds/filter-bar.js

@@ -0,0 +1 @@
+export { default } from "@hashicorp/design-system-components/components/hds/filter-bar/index";

package/dist/components/hds/advanced-table/index.js

@@ -11,7 +11,7 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { g, i, n } from 'decorator-transforms/runtime';
 import { setComponentTemplate } from '@ember/component';
 
-var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n\n<div\n  class=\"hds-advanced-table__container\n    {{(if this.isStickyHeaderPinned \'hds-advanced-table__container--header-is-pinned\')}}\"\n  {{did-update this.setupTableModelData @columns @model @sortBy @sortOrder}}\n  {{did-update this.updateTableModelColumnOrder @columnOrder}}\n  ...attributes\n>\n  {{! Caption }}\n  <div id={{this._captionId}} class=\"sr-only hds-advanced-table__caption\" aria-live=\"polite\">\n    {{@caption}}\n    {{this.sortedMessageText}}\n    {{this.reorderedMessageText}}\n  </div>\n\n  {{! Grid }}\n  <div\n    class={{this.classNames}}\n    role=\"grid\"\n    aria-describedby={{this._captionId}}\n    {{style\n      grid-template-columns=this.gridTemplateColumns\n      --hds-advanced-table-sticky-column-offset=this.stickyColumnOffset\n      max-height=@maxHeight\n    }}\n    {{this._registerGridElement}}\n    {{this._setUpScrollWrapper}}\n  >\n    {{! Header }}\n    <div\n      class={{this.theadClassNames}}\n      role=\"rowgroup\"\n      {{this._setUpThead}}\n      {{on \"dragleave\" (fn (mut this._tableModel.reorderHoveredColumn) null)}}\n    >\n      <Hds::AdvancedTable::Tr\n        @selectionScope=\"col\"\n        @onClickSortBySelected={{if @selectableColumnKey (fn this._tableModel.setSortBy @selectableColumnKey)}}\n        @sortBySelectedOrder={{if (eq this._tableModel.sortBy @selectableColumnKey) this._tableModel.sortOrder}}\n        @isSelectable={{this.isSelectable}}\n        @onSelectionChange={{this.onSelectionAllChange}}\n        @didInsert={{this.didInsertSelectAllCheckbox}}\n        @willDestroy={{this.willDestroySelectAllCheckbox}}\n        @selectionAriaLabelSuffix=\"all rows\"\n        @hasStickyColumn={{this.hasStickyFirstColumn}}\n        @isStickyColumnPinned={{this.isStickyColumnPinned}}\n      >\n        {{#each this._tableModel.orderedColumns as |column|}}\n          {{#if column.isSortable}}\n            <Hds::AdvancedTable::ThSort\n              @column={{column}}\n              @sortOrder={{if (eq column.key this._tableModel.sortBy) this._tableModel.sortOrder}}\n              @onClickSort={{if column.key (fn this._tableModel.setSortBy column.key)}}\n              @align={{column.align}}\n              @tooltip={{column.tooltip}}\n              @hasReorderableColumns={{@hasReorderableColumns}}\n              @hasResizableColumns={{@hasResizableColumns}}\n              @hasSelectableRows={{this.isSelectable}}\n              @isStickyColumn={{this._isStickyColumn column}}\n              @isStickyColumnPinned={{this.isStickyColumnPinned}}\n              @tableHeight={{this._tableHeight}}\n              @onColumnResize={{@onColumnResize}}\n              @onPinFirstColumn={{this._onPinFirstColumn}}\n              @onReorderDragEnd={{fn (mut this._tableModel.reorderDraggedColumn) null}}\n              @onReorderDragStart={{fn (mut this._tableModel.reorderDraggedColumn)}}\n              @onReorderDrop={{this._tableModel.moveColumnToDropTarget}}\n              {{this._registerThElement column}}\n            >\n              {{column.label}}\n            </Hds::AdvancedTable::ThSort>\n          {{else}}\n            <Hds::AdvancedTable::Th\n              @align={{column.align}}\n              @column={{column}}\n              @hasExpandAllButton={{this._tableModel.hasRowsWithChildren}}\n              @hasReorderableColumns={{@hasReorderableColumns}}\n              @hasResizableColumns={{@hasResizableColumns}}\n              @hasSelectableRows={{this.isSelectable}}\n              @isExpanded={{this._tableModel.expandState}}\n              @isExpandable={{column.isExpandable}}\n              @isStickyColumn={{this._isStickyColumn column}}\n              @isStickyColumnPinned={{this.isStickyColumnPinned}}\n              @tableHeight={{this._tableHeight}}\n              @tooltip={{column.tooltip}}\n              @onClickToggle={{this._tableModel.toggleAll}}\n              @onColumnResize={{@onColumnResize}}\n              @onPinFirstColumn={{this._onPinFirstColumn}}\n              @onReorderDragEnd={{fn (mut this._tableModel.reorderDraggedColumn) null}}\n              @onReorderDragStart={{fn (mut this._tableModel.reorderDraggedColumn)}}\n              @onReorderDrop={{this._tableModel.moveColumnToDropTarget}}\n              {{this._registerThElement column}}\n            >\n              {{column.label}}\n            </Hds::AdvancedTable::Th>\n          {{/if}}\n        {{/each}}\n      </Hds::AdvancedTable::Tr>\n\n      {{#if this.showScrollIndicatorTop}}\n        <div class=\"hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-top\" />\n      {{/if}}\n    </div>\n\n    {{! Body }}\n    <div class=\"hds-advanced-table__tbody\" role=\"rowgroup\">\n      {{! ----------------------------------------------------------------------------------------\n        IMPORTANT: we loop on the `model` array and for each record\n        we yield the Tr/Td/Th elements _and_ the record itself as `data`\n        this means the consumer will *have to* use the `data` key to access it in their template\n      -------------------------------------------------------------------------------------------- }}\n      {{#each this._tableModel.sortedRows key=this.identityKey as |record index|}}\n        {{#if this._tableModel.hasRowsWithChildren}}\n          <Hds::AdvancedTable::ExpandableTrGroup\n            @record={{record}}\n            @rowIndex={{index}}\n            @onClickToggle={{record.onClickToggle}}\n            as |T|\n          >\n            {{yield\n              (hash\n                Tr=(component\n                  \"hds/advanced-table/tr\"\n                  isLastRow=(eq this._tableModel.lastVisibleRow.id T.data.id)\n                  isParentRow=T.isExpandable\n                  depth=T.depth\n                  displayRow=T.shouldDisplayChildRows\n                  data=T.data\n                )\n                Th=(component\n                  \"hds/advanced-table/th\"\n                  depth=T.depth\n                  isExpandable=T.isExpandable\n                  isExpanded=T.isExpanded\n                  newLabel=T.id\n                  parentId=T.parentId\n                  scope=\"row\"\n                  onClickToggle=T.onClickToggle\n                )\n                Td=(component \"hds/advanced-table/td\" align=@align)\n                data=T.data\n                isOpen=T.isExpanded\n                rowIndex=T.rowIndex\n              )\n              to=\"body\"\n            }}\n          </Hds::AdvancedTable::ExpandableTrGroup>\n        {{else}}\n          {{yield\n            (hash\n              Tr=(component\n                \"hds/advanced-table/tr\"\n                selectionScope=\"row\"\n                isLastRow=(eq this._tableModel.lastVisibleRow.id record.id)\n                isSelectable=this.isSelectable\n                onSelectionChange=this.onSelectionRowChange\n                didInsert=this.didInsertRowCheckbox\n                willDestroy=this.willDestroyRowCheckbox\n                selectionAriaLabelSuffix=@selectionAriaLabelSuffix\n                hasStickyColumn=this.hasStickyFirstColumn\n                isStickyColumnPinned=this.isStickyColumnPinned\n                data=record\n              )\n              Th=(component\n                \"hds/advanced-table/th\"\n                scope=\"row\"\n                isStickyColumn=this.hasStickyFirstColumn\n                isStickyColumnPinned=this.isStickyColumnPinned\n              )\n              Td=(component \"hds/advanced-table/td\" align=@align)\n              data=record\n              rowIndex=index\n            )\n            to=\"body\"\n          }}\n        {{/if}}\n      {{/each}}\n    </div>\n  </div>\n\n  {{#if this.showScrollIndicatorLeft}}\n    <div\n      class=\"hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-left\"\n      {{style height=this.scrollIndicatorDimensions.height left=this.scrollIndicatorDimensions.left}}\n    />\n  {{/if}}\n\n  {{#if this.showScrollIndicatorRight}}\n    <div\n      class=\"hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-right\"\n      {{style height=this.scrollIndicatorDimensions.height right=this.scrollIndicatorDimensions.right}}\n    />\n  {{/if}}\n\n  {{#if this.showScrollIndicatorBottom}}\n    <div\n      class=\"hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-bottom\"\n      {{style bottom=this.scrollIndicatorDimensions.bottom width=this.scrollIndicatorDimensions.width}}\n    />\n  {{/if}}\n</div>");
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n\n{{#if (has-block \"actions\")}}\n  <div class=\"hds-advanced-table__actions\">\n    {{yield (hash FilterBar=(component \"hds/filter-bar\")) to=\"actions\"}}\n  </div>\n{{/if}}\n<div\n  class=\"hds-advanced-table__container\n    {{(if this.isStickyHeaderPinned \'hds-advanced-table__container--header-is-pinned\')}}\"\n  {{did-update this.setupTableModelData @columns @model @sortBy @sortOrder}}\n  {{did-update this.updateTableModelColumnOrder @columnOrder}}\n  ...attributes\n>\n  {{! Caption }}\n  <div id={{this._captionId}} class=\"sr-only hds-advanced-table__caption\" aria-live=\"polite\">\n    {{@caption}}\n    {{this.sortedMessageText}}\n    {{this.reorderedMessageText}}\n  </div>\n\n  {{! Grid }}\n  <div\n    class={{this.classNames}}\n    role=\"grid\"\n    aria-describedby={{this._captionId}}\n    {{style\n      grid-template-columns=this.gridTemplateColumns\n      --hds-advanced-table-sticky-column-offset=this.stickyColumnOffset\n      max-height=@maxHeight\n    }}\n    {{this._registerGridElement}}\n    {{this._setUpScrollWrapper}}\n  >\n    {{! Header }}\n    <div\n      class={{this.theadClassNames}}\n      role=\"rowgroup\"\n      {{this._setUpThead}}\n      {{on \"dragleave\" (fn (mut this._tableModel.reorderHoveredColumn) null)}}\n    >\n      <Hds::AdvancedTable::Tr\n        @selectionScope=\"col\"\n        @onClickSortBySelected={{if @selectableColumnKey (fn this._tableModel.setSortBy @selectableColumnKey)}}\n        @sortBySelectedOrder={{if (eq this._tableModel.sortBy @selectableColumnKey) this._tableModel.sortOrder}}\n        @isSelectable={{this.isSelectable}}\n        @onSelectionChange={{this.onSelectionAllChange}}\n        @didInsert={{this.didInsertSelectAllCheckbox}}\n        @willDestroy={{this.willDestroySelectAllCheckbox}}\n        @selectionAriaLabelSuffix=\"all rows\"\n        @hasStickyColumn={{this.hasStickyFirstColumn}}\n        @isStickyColumnPinned={{this.isStickyColumnPinned}}\n      >\n        {{#each this._tableModel.orderedColumns as |column|}}\n          {{#if column.isSortable}}\n            <Hds::AdvancedTable::ThSort\n              @column={{column}}\n              @sortOrder={{if (eq column.key this._tableModel.sortBy) this._tableModel.sortOrder}}\n              @onClickSort={{if column.key (fn this._tableModel.setSortBy column.key)}}\n              @align={{column.align}}\n              @tooltip={{column.tooltip}}\n              @hasReorderableColumns={{@hasReorderableColumns}}\n              @hasResizableColumns={{@hasResizableColumns}}\n              @hasSelectableRows={{this.isSelectable}}\n              @isStickyColumn={{this._isStickyColumn column}}\n              @isStickyColumnPinned={{this.isStickyColumnPinned}}\n              @tableHeight={{this._tableHeight}}\n              @onColumnResize={{@onColumnResize}}\n              @onPinFirstColumn={{this._onPinFirstColumn}}\n              @onReorderDragEnd={{fn (mut this._tableModel.reorderDraggedColumn) null}}\n              @onReorderDragStart={{fn (mut this._tableModel.reorderDraggedColumn)}}\n              @onReorderDrop={{this._tableModel.moveColumnToDropTarget}}\n              {{this._registerThElement column}}\n            >\n              {{column.label}}\n            </Hds::AdvancedTable::ThSort>\n          {{else}}\n            <Hds::AdvancedTable::Th\n              @align={{column.align}}\n              @column={{column}}\n              @hasExpandAllButton={{this._tableModel.hasRowsWithChildren}}\n              @hasReorderableColumns={{@hasReorderableColumns}}\n              @hasResizableColumns={{@hasResizableColumns}}\n              @hasSelectableRows={{this.isSelectable}}\n              @isExpanded={{this._tableModel.expandState}}\n              @isExpandable={{column.isExpandable}}\n              @isStickyColumn={{this._isStickyColumn column}}\n              @isStickyColumnPinned={{this.isStickyColumnPinned}}\n              @tableHeight={{this._tableHeight}}\n              @tooltip={{column.tooltip}}\n              @onClickToggle={{this._tableModel.toggleAll}}\n              @onColumnResize={{@onColumnResize}}\n              @onPinFirstColumn={{this._onPinFirstColumn}}\n              @onReorderDragEnd={{fn (mut this._tableModel.reorderDraggedColumn) null}}\n              @onReorderDragStart={{fn (mut this._tableModel.reorderDraggedColumn)}}\n              @onReorderDrop={{this._tableModel.moveColumnToDropTarget}}\n              {{this._registerThElement column}}\n            >\n              {{column.label}}\n            </Hds::AdvancedTable::Th>\n          {{/if}}\n        {{/each}}\n      </Hds::AdvancedTable::Tr>\n\n      {{#if this.showScrollIndicatorTop}}\n        <div class=\"hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-top\" />\n      {{/if}}\n    </div>\n\n    {{! Body }}\n    {{#unless this.isEmpty}}\n      <div class=\"hds-advanced-table__tbody\" role=\"rowgroup\">\n        {{! ----------------------------------------------------------------------------------------\n        IMPORTANT: we loop on the `model` array and for each record\n        we yield the Tr/Td/Th elements _and_ the record itself as `data`\n        this means the consumer will *have to* use the `data` key to access it in their template\n      -------------------------------------------------------------------------------------------- }}\n        {{#each this._tableModel.sortedRows key=this.identityKey as |record index|}}\n          {{#if this._tableModel.hasRowsWithChildren}}\n            <Hds::AdvancedTable::ExpandableTrGroup\n              @record={{record}}\n              @rowIndex={{index}}\n              @onClickToggle={{record.onClickToggle}}\n              as |T|\n            >\n              {{yield\n                (hash\n                  Tr=(component\n                    \"hds/advanced-table/tr\"\n                    isLastRow=(eq this._tableModel.lastVisibleRow.id T.data.id)\n                    isParentRow=T.isExpandable\n                    depth=T.depth\n                    displayRow=T.shouldDisplayChildRows\n                    data=T.data\n                  )\n                  Th=(component\n                    \"hds/advanced-table/th\"\n                    depth=T.depth\n                    isExpandable=T.isExpandable\n                    isExpanded=T.isExpanded\n                    newLabel=T.id\n                    parentId=T.parentId\n                    scope=\"row\"\n                    onClickToggle=T.onClickToggle\n                  )\n                  Td=(component \"hds/advanced-table/td\" align=@align)\n                  data=T.data\n                  isOpen=T.isExpanded\n                  rowIndex=T.rowIndex\n                )\n                to=\"body\"\n              }}\n            </Hds::AdvancedTable::ExpandableTrGroup>\n          {{else}}\n            {{yield\n              (hash\n                Tr=(component\n                  \"hds/advanced-table/tr\"\n                  selectionScope=\"row\"\n                  isLastRow=(eq this._tableModel.lastVisibleRow.id record.id)\n                  isSelectable=this.isSelectable\n                  onSelectionChange=this.onSelectionRowChange\n                  didInsert=this.didInsertRowCheckbox\n                  willDestroy=this.willDestroyRowCheckbox\n                  selectionAriaLabelSuffix=@selectionAriaLabelSuffix\n                  hasStickyColumn=this.hasStickyFirstColumn\n                  isStickyColumnPinned=this.isStickyColumnPinned\n                  data=record\n                )\n                Th=(component\n                  \"hds/advanced-table/th\"\n                  scope=\"row\"\n                  isStickyColumn=this.hasStickyFirstColumn\n                  isStickyColumnPinned=this.isStickyColumnPinned\n                )\n                Td=(component \"hds/advanced-table/td\" align=@align)\n                data=record\n                rowIndex=index\n              )\n              to=\"body\"\n            }}\n          {{/if}}\n        {{/each}}\n      </div>\n    {{/unless}}\n  </div>\n\n  {{#if this.showScrollIndicatorLeft}}\n    <div\n      class=\"hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-left\"\n      {{style height=this.scrollIndicatorDimensions.height left=this.scrollIndicatorDimensions.left}}\n    />\n  {{/if}}\n\n  {{#if this.showScrollIndicatorRight}}\n    <div\n      class=\"hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-right\"\n      {{style height=this.scrollIndicatorDimensions.height right=this.scrollIndicatorDimensions.right}}\n    />\n  {{/if}}\n\n  {{#unless this.isEmpty}}\n    {{#if this.showScrollIndicatorBottom}}\n      <div\n        class=\"hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-bottom\"\n        {{style bottom=this.scrollIndicatorDimensions.bottom width=this.scrollIndicatorDimensions.width}}\n      />\n    {{/if}}\n  {{/unless}}\n\n  {{#if this.isEmpty}}\n    <div class=\"hds-advanced-table__empty-state\">\n      <div class=\"hds-advanced-table__empty-state__content\">\n        {{#if (has-block \"emptyState\")}}\n          {{yield to=\"emptyState\"}}\n        {{else}}\n          <Hds::Layout::Flex @direction=\"column\" @gap=\"8\">\n            <Hds::Text::Display @tag=\"h3\" @size=\"300\">{{hds-t\n                \"hds.components.advanced-table.empty-state.title\"\n                default=\"No data available\"\n              }}</Hds::Text::Display>\n            <Hds::Text::Body>\n              {{hds-t\n                \"hds.components.advanced-table.empty-state.description\"\n                default=\"There is currently no data to display in the table.\"\n              }}\n            </Hds::Text::Body>\n          </Hds::Layout::Flex>\n        {{/if}}\n      </div>\n    </div>\n  {{/if}}\n</div>");
 
 /**
  * Copyright (c) HashiCorp, Inc.
@@ -194,6 +194,15 @@ class HdsAdvancedTable extends Component {
       this.hasPinnedFirstColumn = true;
     }
   }
+  get isEmpty() {
+    const {
+      isEmpty
+    } = this.args;
+    if (isEmpty !== undefined) {
+      return isEmpty;
+    }
+    return false;
+  }
   get identityKey() {
     // we have to provide a way for the consumer to pass undefined because Ember tries to interpret undefined as missing an arg and therefore falls back to the default
     if (this.args.identityKey === 'none') {