@hashicorp/design-system-components 5.1.0-rc-20251125211530 → 5.1.0-rc-20251202110410

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

@@ -0,0 +1,163 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { guidFor } from '@ember/object/internals';
+import { service } from '@ember/service';
+import { HdsFilterBarRangeFilterSelectorValues } from './types.js';
+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<div class=\"hds-filter-bar__filters-dropdown__filter-range\">\n  <Hds::Layout::Flex class=\"hds-filter-bar__filters-dropdown__fields\" @direction=\"column\" @gap=\"16\">\n    <Hds::Form::Select::Field\n      @id={{this._selectorInputId}}\n      class=\"hds-filter-bar__filters-dropdown__field\"\n      {{on \"change\" this.onSelectorChange}}\n      as |F|\n    >\n      <F.Label>\n        {{hds-t \"hds.components.filter-bar.range.label\" default=\"Number is\"}}\n      </F.Label>\n      <F.Options>\n        <option value=\"\">{{hds-t\n            \"hds.components.filter-bar.range.selector-input.default-value\"\n            default=\"Pick a selector\"\n          }}</option>\n        {{#each this._selectorValues as |selectorValue|}}\n          <option value={{selectorValue}} selected={{eq selectorValue this._selector}}>{{this._selectorText\n              selectorValue\n            }}</option>\n        {{/each}}\n      </F.Options>\n    </Hds::Form::Select::Field>\n    {{#if (eq this._selector \"between\")}}\n      <Hds::Layout::Flex @gap=\"8\">\n        <Hds::Form::TextInput::Base\n          @id={{this._betweenValueStartInputId}}\n          @type=\"text\"\n          @value={{this.stringBetweenValueStart}}\n          placeholder={{hds-t \"hds.components.filter-bar.between-value-inputs.start-placeholder\" default=\"Start\"}}\n          class=\"hds-filter-bar__filters-dropdown__field\"\n          {{on \"change\" this.onBetweenValueStartChange}}\n        />\n        <Hds::Form::TextInput::Base\n          @id={{this._betweenValueEndInputId}}\n          @type=\"text\"\n          @value={{this.stringBetweenValueEnd}}\n          placeholder={{hds-t \"hds.components.filter-bar.between-value-inputs.end-placeholder\" default=\"End\"}}\n          class=\"hds-filter-bar__filters-dropdown__field\"\n          {{on \"change\" this.onBetweenValueEndChange}}\n        />\n      </Hds::Layout::Flex>\n    {{else}}\n      <Hds::Form::TextInput::Base\n        @id={{this._valueInputId}}\n        @type=\"text\"\n        @value={{this.stringValue}}\n        placeholder={{hds-t \"hds.components.filter-bar.range.value-input.placeholder\" default=\"Enter a value\"}}\n        class=\"hds-filter-bar__filters-dropdown__field\"\n        {{on \"change\" this.onValueChange}}\n      />\n    {{/if}}\n  </Hds::Layout::Flex>\n  <div class=\"hds-filter-bar__filters-dropdown__clear\">\n    <Hds::Button\n      @text={{hds-t \"hds.components.filter-bar.range.clear\" default=\"Clear filter\"}}\n      @color=\"tertiary\"\n      @icon=\"rotate-ccw\"\n      @isInline={{true}}\n      {{on \"click\" this.onClear}}\n    />\n  </div>\n</div>");
+
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+const RANGE_SELECTORS = Object.values(HdsFilterBarRangeFilterSelectorValues);
+const RANGE_SELECTORS_TEXT = {
+  [HdsFilterBarRangeFilterSelectorValues.lessThan]: '<',
+  [HdsFilterBarRangeFilterSelectorValues.lessThanOrEqualTo]: '≤',
+  [HdsFilterBarRangeFilterSelectorValues.equalTo]: '=',
+  [HdsFilterBarRangeFilterSelectorValues.greaterThanOrEqualTo]: '≥',
+  [HdsFilterBarRangeFilterSelectorValues.greaterThan]: '>',
+  [HdsFilterBarRangeFilterSelectorValues.between]: 'between'
+};
+const RANGE_SELECTORS_INPUT_TEXT = {
+  [HdsFilterBarRangeFilterSelectorValues.lessThan]: 'Less than (<)',
+  [HdsFilterBarRangeFilterSelectorValues.lessThanOrEqualTo]: 'Less than or equal to (≤)',
+  [HdsFilterBarRangeFilterSelectorValues.equalTo]: 'Equal to (=)',
+  [HdsFilterBarRangeFilterSelectorValues.greaterThanOrEqualTo]: 'Greater than or equal to (≥)',
+  [HdsFilterBarRangeFilterSelectorValues.greaterThan]: 'Greater than (>)',
+  [HdsFilterBarRangeFilterSelectorValues.between]: 'Between'
+};
+class HdsFilterBarRange extends Component {
+  static {
+    g(this.prototype, "hdsIntl", [service]);
+  }
+  #hdsIntl = (i(this, "hdsIntl"), void 0);
+  static {
+    g(this.prototype, "_selector", [tracked]);
+  }
+  #_selector = (i(this, "_selector"), void 0);
+  static {
+    g(this.prototype, "_value", [tracked]);
+  }
+  #_value = (i(this, "_value"), void 0);
+  static {
+    g(this.prototype, "_betweenValueStart", [tracked]);
+  }
+  #_betweenValueStart = (i(this, "_betweenValueStart"), void 0);
+  static {
+    g(this.prototype, "_betweenValueEnd", [tracked]);
+  }
+  #_betweenValueEnd = (i(this, "_betweenValueEnd"), void 0);
+  _selectorValues = RANGE_SELECTORS;
+  _selectorInputId = 'selector-input-' + guidFor(this);
+  _valueInputId = 'value-input-' + guidFor(this);
+  _betweenValueStartInputId = 'between-value-start-input-' + guidFor(this);
+  _betweenValueEndInputId = 'between-value-end-input-' + guidFor(this);
+  constructor(owner, args) {
+    super(owner, args);
+    const {
+      keyFilter
+    } = this.args;
+    if (keyFilter && keyFilter.type === 'range') {
+      const data = keyFilter.data;
+      this._selector = data?.selector;
+      if (data.selector === 'between') {
+        if (data.value && typeof data.value === 'object') {
+          this._betweenValueStart = Number(data.value.start);
+          this._betweenValueEnd = Number(data.value.end);
+        }
+      } else {
+        this._value = Number(data.value);
+      }
+    }
+  }
+  get stringValue() {
+    return this._value !== undefined ? this._value.toString() : undefined;
+  }
+  get stringBetweenValueStart() {
+    return this._betweenValueStart !== undefined ? this._betweenValueStart.toString() : undefined;
+  }
+  get stringBetweenValueEnd() {
+    return this._betweenValueEnd !== undefined ? this._betweenValueEnd.toString() : undefined;
+  }
+  onSelectorChange(event) {
+    const select = event.target;
+    this._selector = select.value;
+    if (this._selector === 'between') {
+      this._value = undefined;
+    } else {
+      this._betweenValueStart = undefined;
+      this._betweenValueEnd = undefined;
+    }
+    this._onChange();
+  }
+  static {
+    n(this.prototype, "onSelectorChange", [action]);
+  }
+  onValueChange(event) {
+    const input = event.target;
+    this._value = parseFloat(input.value);
+    this._onChange();
+  }
+  static {
+    n(this.prototype, "onValueChange", [action]);
+  }
+  onBetweenValueStartChange(event) {
+    const input = event.target;
+    this._betweenValueStart = parseFloat(input.value);
+    this._onChange();
+  }
+  static {
+    n(this.prototype, "onBetweenValueStartChange", [action]);
+  }
+  onBetweenValueEndChange(event) {
+    const input = event.target;
+    this._betweenValueEnd = parseFloat(input.value);
+    this._onChange();
+  }
+  static {
+    n(this.prototype, "onBetweenValueEndChange", [action]);
+  }
+  onClear() {
+    this._resetInputValues();
+    this._onChange();
+  }
+  static {
+    n(this.prototype, "onClear", [action]);
+  }
+  _onChange() {
+    const {
+      onChange
+    } = this.args;
+    if (onChange && typeof onChange === 'function') {
+      if (this._selector === 'between' && this._betweenValueStart !== undefined && this._betweenValueEnd !== undefined) {
+        onChange(this._selector, {
+          start: this._betweenValueStart,
+          end: this._betweenValueEnd
+        });
+      } else {
+        onChange(this._selector, this._value);
+      }
+    }
+  }
+  _selectorText = selector => {
+    return this.hdsIntl.t(`hds.components.filter-bar.range.selector-input.${selector}`, {
+      default: RANGE_SELECTORS_INPUT_TEXT[selector]
+    });
+  };
+  _resetInputValues = () => {
+    this._selector = undefined;
+    this._value = undefined;
+    this._betweenValueStart = undefined;
+    this._betweenValueEnd = undefined;
+  };
+}
+setComponentTemplate(TEMPLATE, HdsFilterBarRange);
+
+export { RANGE_SELECTORS, RANGE_SELECTORS_INPUT_TEXT, RANGE_SELECTORS_TEXT, HdsFilterBarRange as default };
+//# sourceMappingURL=range.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"range.js","sources":["../../../../src/components/hds/filter-bar/range.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { action } from '@ember/object';\nimport { tracked } from '@glimmer/tracking';\nimport type Owner from '@ember/owner';\nimport { guidFor } from '@ember/object/internals';\nimport { service } from '@ember/service';\n\nimport type HdsIntlService from '../../../services/hds-intl';\nimport type {\n  HdsFilterBarFilter,\n  HdsFilterBarRangeFilterSelector,\n  HdsFilterBarRangeFilterValue,\n} from './types.ts';\nimport { HdsFilterBarRangeFilterSelectorValues } from './types.ts';\n\nexport const RANGE_SELECTORS: HdsFilterBarRangeFilterSelector[] = Object.values(\n  HdsFilterBarRangeFilterSelectorValues\n);\n\nexport const RANGE_SELECTORS_TEXT: Record<\n  HdsFilterBarRangeFilterSelector,\n  string\n> = {\n  [HdsFilterBarRangeFilterSelectorValues.lessThan]: '<',\n  [HdsFilterBarRangeFilterSelectorValues.lessThanOrEqualTo]: '≤',\n  [HdsFilterBarRangeFilterSelectorValues.equalTo]: '=',\n  [HdsFilterBarRangeFilterSelectorValues.greaterThanOrEqualTo]: '≥',\n  [HdsFilterBarRangeFilterSelectorValues.greaterThan]: '>',\n  [HdsFilterBarRangeFilterSelectorValues.between]: 'between',\n};\n\nexport const RANGE_SELECTORS_INPUT_TEXT: Record<\n  HdsFilterBarRangeFilterSelector,\n  string\n> = {\n  [HdsFilterBarRangeFilterSelectorValues.lessThan]: 'Less than (<)',\n  [HdsFilterBarRangeFilterSelectorValues.lessThanOrEqualTo]:\n    'Less than or equal to (≤)',\n  [HdsFilterBarRangeFilterSelectorValues.equalTo]: 'Equal to (=)',\n  [HdsFilterBarRangeFilterSelectorValues.greaterThanOrEqualTo]:\n    'Greater than or equal to (≥)',\n  [HdsFilterBarRangeFilterSelectorValues.greaterThan]: 'Greater than (>)',\n  [HdsFilterBarRangeFilterSelectorValues.between]: 'Between',\n};\n\nexport interface HdsFilterBarRangeSignature {\n  Args: {\n    keyFilter: HdsFilterBarFilter | undefined;\n    onChange?: (\n      selector?: HdsFilterBarRangeFilterSelector,\n      value?: HdsFilterBarRangeFilterValue\n    ) => void;\n  };\n  Blocks: {\n    default: [];\n  };\n  Element: HTMLDivElement;\n}\n\nexport default class HdsFilterBarRange extends Component<HdsFilterBarRangeSignature> {\n  @service hdsIntl!: HdsIntlService;\n\n  @tracked private _selector: HdsFilterBarRangeFilterSelector | undefined;\n  @tracked private _value: number | undefined;\n  @tracked private _betweenValueStart: number | undefined;\n  @tracked private _betweenValueEnd: number | undefined;\n\n  private _selectorValues = RANGE_SELECTORS;\n  private _selectorInputId = 'selector-input-' + guidFor(this);\n  private _valueInputId = 'value-input-' + guidFor(this);\n  private _betweenValueStartInputId =\n    'between-value-start-input-' + guidFor(this);\n  private _betweenValueEndInputId = 'between-value-end-input-' + guidFor(this);\n\n  constructor(owner: Owner, args: HdsFilterBarRangeSignature['Args']) {\n    super(owner, args);\n\n    const { keyFilter } = this.args;\n    if (keyFilter && keyFilter.type === 'range') {\n      const data = keyFilter.data;\n      this._selector = data?.selector;\n      if (data.selector === 'between') {\n        if (data.value && typeof data.value === 'object') {\n          this._betweenValueStart = Number(data.value.start);\n          this._betweenValueEnd = Number(data.value.end);\n        }\n      } else {\n        this._value = Number(data.value);\n      }\n    }\n  }\n\n  get stringValue(): string | undefined {\n    return this._value !== undefined ? this._value.toString() : undefined;\n  }\n\n  get stringBetweenValueStart(): string | undefined {\n    return this._betweenValueStart !== undefined\n      ? this._betweenValueStart.toString()\n      : undefined;\n  }\n\n  get stringBetweenValueEnd(): string | undefined {\n    return this._betweenValueEnd !== undefined\n      ? this._betweenValueEnd.toString()\n      : undefined;\n  }\n\n  @action\n  onSelectorChange(event: Event): void {\n    const select = event.target as HTMLSelectElement;\n    this._selector = select.value as HdsFilterBarRangeFilterSelector;\n    if (this._selector === 'between') {\n      this._value = undefined;\n    } else {\n      this._betweenValueStart = undefined;\n      this._betweenValueEnd = undefined;\n    }\n    this._onChange();\n  }\n\n  @action\n  onValueChange(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    this._value = parseFloat(input.value);\n    this._onChange();\n  }\n\n  @action\n  onBetweenValueStartChange(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    this._betweenValueStart = parseFloat(input.value);\n    this._onChange();\n  }\n\n  @action\n  onBetweenValueEndChange(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    this._betweenValueEnd = parseFloat(input.value);\n    this._onChange();\n  }\n\n  @action\n  onClear(): void {\n    this._resetInputValues();\n    this._onChange();\n  }\n\n  private _onChange(): void {\n    const { onChange } = this.args;\n    if (onChange && typeof onChange === 'function') {\n      if (\n        this._selector === 'between' &&\n        this._betweenValueStart !== undefined &&\n        this._betweenValueEnd !== undefined\n      ) {\n        onChange(this._selector, {\n          start: this._betweenValueStart,\n          end: this._betweenValueEnd,\n        });\n      } else {\n        onChange(this._selector, this._value);\n      }\n    }\n  }\n\n  private _selectorText = (\n    selector: HdsFilterBarRangeFilterSelector\n  ): string => {\n    return this.hdsIntl.t(\n      `hds.components.filter-bar.range.selector-input.${selector}`,\n      {\n        default: RANGE_SELECTORS_INPUT_TEXT[selector],\n      }\n    );\n  };\n\n  private _resetInputValues = (): void => {\n    this._selector = undefined;\n    this._value = undefined;\n    this._betweenValueStart = undefined;\n    this._betweenValueEnd = undefined;\n  };\n}\n"],"names":["RANGE_SELECTORS","Object","values","HdsFilterBarRangeFilterSelectorValues","RANGE_SELECTORS_TEXT","lessThan","lessThanOrEqualTo","equalTo","greaterThanOrEqualTo","greaterThan","between","RANGE_SELECTORS_INPUT_TEXT","HdsFilterBarRange","Component","g","prototype","service","i","void 0","tracked","_selectorValues","_selectorInputId","guidFor","_valueInputId","_betweenValueStartInputId","_betweenValueEndInputId","constructor","owner","args","keyFilter","type","data","_selector","selector","value","_betweenValueStart","Number","start","_betweenValueEnd","end","_value","stringValue","undefined","toString","stringBetweenValueStart","stringBetweenValueEnd","onSelectorChange","event","select","target","_onChange","n","action","onValueChange","input","parseFloat","onBetweenValueStartChange","onBetweenValueEndChange","onClear","_resetInputValues","onChange","_selectorText","hdsIntl","t","default","setComponentTemplate","TEMPLATE"],"mappings":"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"}

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

@@ -6,7 +6,7 @@
 let HdsFilterBarFilterTypeValues = /*#__PURE__*/function (HdsFilterBarFilterTypeValues) {
   HdsFilterBarFilterTypeValues["multiSelect"] = "multi-select";
   HdsFilterBarFilterTypeValues["singleSelect"] = "single-select";
-  HdsFilterBarFilterTypeValues["numerical"] = "numerical";
+  HdsFilterBarFilterTypeValues["range"] = "range";
   HdsFilterBarFilterTypeValues["date"] = "date";
   HdsFilterBarFilterTypeValues["time"] = "time";
   HdsFilterBarFilterTypeValues["datetime"] = "datetime";
@@ -14,14 +14,14 @@ let HdsFilterBarFilterTypeValues = /*#__PURE__*/function (HdsFilterBarFilterType
   HdsFilterBarFilterTypeValues["search"] = "search";
   return HdsFilterBarFilterTypeValues;
 }({});
-let HdsFilterBarNumericalFilterSelectorValues = /*#__PURE__*/function (HdsFilterBarNumericalFilterSelectorValues) {
-  HdsFilterBarNumericalFilterSelectorValues["lessThan"] = "less-than";
-  HdsFilterBarNumericalFilterSelectorValues["lessThanOrEqualTo"] = "less-than-or-equal-to";
-  HdsFilterBarNumericalFilterSelectorValues["equalTo"] = "equal-to";
-  HdsFilterBarNumericalFilterSelectorValues["greaterThanOrEqualTo"] = "greater-than-or-equal-to";
-  HdsFilterBarNumericalFilterSelectorValues["greaterThan"] = "greater-than";
-  HdsFilterBarNumericalFilterSelectorValues["between"] = "between";
-  return HdsFilterBarNumericalFilterSelectorValues;
+let HdsFilterBarRangeFilterSelectorValues = /*#__PURE__*/function (HdsFilterBarRangeFilterSelectorValues) {
+  HdsFilterBarRangeFilterSelectorValues["lessThan"] = "less-than";
+  HdsFilterBarRangeFilterSelectorValues["lessThanOrEqualTo"] = "less-than-or-equal-to";
+  HdsFilterBarRangeFilterSelectorValues["equalTo"] = "equal-to";
+  HdsFilterBarRangeFilterSelectorValues["greaterThanOrEqualTo"] = "greater-than-or-equal-to";
+  HdsFilterBarRangeFilterSelectorValues["greaterThan"] = "greater-than";
+  HdsFilterBarRangeFilterSelectorValues["between"] = "between";
+  return HdsFilterBarRangeFilterSelectorValues;
 }({});
 let HdsFilterBarDateFilterSelectorValues = /*#__PURE__*/function (HdsFilterBarDateFilterSelectorValues) {
   HdsFilterBarDateFilterSelectorValues["before"] = "before";
@@ -31,5 +31,5 @@ let HdsFilterBarDateFilterSelectorValues = /*#__PURE__*/function (HdsFilterBarDa
   return HdsFilterBarDateFilterSelectorValues;
 }({});
 
-export { HdsFilterBarDateFilterSelectorValues, HdsFilterBarFilterTypeValues, HdsFilterBarNumericalFilterSelectorValues };
+export { HdsFilterBarDateFilterSelectorValues, HdsFilterBarFilterTypeValues, HdsFilterBarRangeFilterSelectorValues };
 //# sourceMappingURL=types.js.map

package/dist/components/hds/filter-bar/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../../src/components/hds/filter-bar/types.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nexport enum HdsFilterBarFilterTypeValues {\n  multiSelect = 'multi-select',\n  singleSelect = 'single-select',\n  numerical = 'numerical',\n  date = 'date',\n  time = 'time',\n  datetime = 'datetime',\n  generic = 'generic',\n  search = 'search',\n}\n\nexport type HdsFilterBarFilterType = `${HdsFilterBarFilterTypeValues}`;\n\nexport interface HdsFilterBarGenericFilterData {\n  value: unknown;\n  label?: string;\n}\n\nexport interface HdsFilterBarNumericalFilterData {\n  selector: HdsFilterBarNumericalFilterSelector;\n  value: HdsFilterBarNumericalFilterValue;\n}\n\nexport interface HdsFilterBarDateFilterData {\n  selector: HdsFilterBarDateFilterSelector;\n  value: HdsFilterBarDateFilterValue;\n}\n\nexport type HdsFilterBarData =\n  | HdsFilterBarGenericFilterData[]\n  | HdsFilterBarGenericFilterData\n  | HdsFilterBarNumericalFilterData\n  | HdsFilterBarDateFilterData;\n\nexport interface HdsFilterBarGenericFilter {\n  type: 'generic';\n  text?: string;\n  dismissTagText?: string;\n  data: HdsFilterBarGenericFilterData | HdsFilterBarGenericFilterData[];\n}\nexport interface HdsFilterBarSingleSelectFilter {\n  type: 'single-select';\n  text?: string;\n  data: HdsFilterBarGenericFilterData;\n}\n\nexport interface HdsFilterBarMultiSelectFilter {\n  type: 'multi-select';\n  text?: string;\n  data: HdsFilterBarGenericFilterData[];\n}\n\nexport interface HdsFilterBarNumericalFilter {\n  type: 'numerical';\n  text?: string;\n  data: HdsFilterBarNumericalFilterData;\n}\n\nexport interface HdsFilterBarDateFilter {\n  type: 'date' | 'time' | 'datetime';\n  text?: string;\n  data: HdsFilterBarDateFilterData;\n}\n\nexport interface HdsFilterBarSearchFilter {\n  type: 'search';\n  text?: string;\n  data: HdsFilterBarGenericFilterData;\n}\n\nexport type HdsFilterBarFilter =\n  | HdsFilterBarSingleSelectFilter\n  | HdsFilterBarMultiSelectFilter\n  | HdsFilterBarNumericalFilter\n  | HdsFilterBarDateFilter\n  | HdsFilterBarSearchFilter\n  | HdsFilterBarGenericFilter;\n\nexport interface HdsFilterBarFilters {\n  [name: string]: HdsFilterBarFilter;\n}\n\nexport enum HdsFilterBarNumericalFilterSelectorValues {\n  lessThan = 'less-than',\n  lessThanOrEqualTo = 'less-than-or-equal-to',\n  equalTo = 'equal-to',\n  greaterThanOrEqualTo = 'greater-than-or-equal-to',\n  greaterThan = 'greater-than',\n  between = 'between',\n}\n\nexport type HdsFilterBarNumericalFilterSelector =\n  `${HdsFilterBarNumericalFilterSelectorValues}`;\n\nexport enum HdsFilterBarDateFilterSelectorValues {\n  before = 'before',\n  exactly = 'exactly',\n  after = 'after',\n  between = 'between',\n}\n\nexport type HdsFilterBarDateFilterSelector =\n  `${HdsFilterBarDateFilterSelectorValues}`;\n\nexport type HdsFilterBarNumericalFilterValue =\n  | number\n  | { start?: number; end?: number };\n\nexport type HdsFilterBarDateFilterValue =\n  | string\n  | { start?: string; end?: string };\n"],"names":["HdsFilterBarFilterTypeValues","HdsFilterBarNumericalFilterSelectorValues","HdsFilterBarDateFilterSelectorValues"],"mappings":"AAAA;AACA;AACA;AACA;;AAEA,IAAYA,4BAA4B,0BAA5BA,4BAA4B,EAAA;EAA5BA,4BAA4B,CAAA,aAAA,CAAA,GAAA,cAAA;EAA5BA,4BAA4B,CAAA,cAAA,CAAA,GAAA,eAAA;EAA5BA,4BAA4B,CAAA,WAAA,CAAA,GAAA,WAAA;EAA5BA,4BAA4B,CAAA,MAAA,CAAA,GAAA,MAAA;EAA5BA,4BAA4B,CAAA,MAAA,CAAA,GAAA,MAAA;EAA5BA,4BAA4B,CAAA,UAAA,CAAA,GAAA,UAAA;EAA5BA,4BAA4B,CAAA,SAAA,CAAA,GAAA,SAAA;EAA5BA,4BAA4B,CAAA,QAAA,CAAA,GAAA,QAAA;AAAA,EAAA,OAA5BA,4BAA4B;AAAA,CAAA,CAAA,EAAA;AAkFxC,IAAYC,yCAAyC,0BAAzCA,yCAAyC,EAAA;EAAzCA,yCAAyC,CAAA,UAAA,CAAA,GAAA,WAAA;EAAzCA,yCAAyC,CAAA,mBAAA,CAAA,GAAA,uBAAA;EAAzCA,yCAAyC,CAAA,SAAA,CAAA,GAAA,UAAA;EAAzCA,yCAAyC,CAAA,sBAAA,CAAA,GAAA,0BAAA;EAAzCA,yCAAyC,CAAA,aAAA,CAAA,GAAA,cAAA;EAAzCA,yCAAyC,CAAA,SAAA,CAAA,GAAA,SAAA;AAAA,EAAA,OAAzCA,yCAAyC;AAAA,CAAA,CAAA,EAAA;AAYrD,IAAYC,oCAAoC,0BAApCA,oCAAoC,EAAA;EAApCA,oCAAoC,CAAA,QAAA,CAAA,GAAA,QAAA;EAApCA,oCAAoC,CAAA,SAAA,CAAA,GAAA,SAAA;EAApCA,oCAAoC,CAAA,OAAA,CAAA,GAAA,OAAA;EAApCA,oCAAoC,CAAA,SAAA,CAAA,GAAA,SAAA;AAAA,EAAA,OAApCA,oCAAoC;AAAA,CAAA,CAAA,EAAA;;;;"}
+{"version":3,"file":"types.js","sources":["../../../../src/components/hds/filter-bar/types.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nexport enum HdsFilterBarFilterTypeValues {\n  multiSelect = 'multi-select',\n  singleSelect = 'single-select',\n  range = 'range',\n  date = 'date',\n  time = 'time',\n  datetime = 'datetime',\n  generic = 'generic',\n  search = 'search',\n}\n\nexport type HdsFilterBarFilterType = `${HdsFilterBarFilterTypeValues}`;\n\nexport interface HdsFilterBarGenericFilterData {\n  value: unknown;\n}\n\nexport interface HdsFilterBarRangeFilterData {\n  selector: HdsFilterBarRangeFilterSelector;\n  value: HdsFilterBarRangeFilterValue;\n}\n\nexport interface HdsFilterBarDateFilterData {\n  selector: HdsFilterBarDateFilterSelector;\n  value: HdsFilterBarDateFilterValue;\n}\n\nexport type HdsFilterBarData =\n  | HdsFilterBarGenericFilterData[]\n  | HdsFilterBarGenericFilterData\n  | HdsFilterBarRangeFilterData\n  | HdsFilterBarDateFilterData;\n\nexport interface HdsFilterBarGenericFilter {\n  type: 'generic';\n  text?: string;\n  dismissTagText?: string;\n  data: HdsFilterBarGenericFilterData | HdsFilterBarGenericFilterData[];\n}\nexport interface HdsFilterBarSingleSelectFilter {\n  type: 'single-select';\n  text?: string;\n  data: HdsFilterBarGenericFilterData;\n}\n\nexport interface HdsFilterBarMultiSelectFilter {\n  type: 'multi-select';\n  text?: string;\n  data: HdsFilterBarGenericFilterData[];\n}\n\nexport interface HdsFilterBarRangeFilter {\n  type: 'range';\n  text?: string;\n  data: HdsFilterBarRangeFilterData;\n}\n\nexport interface HdsFilterBarDateFilter {\n  type: 'date' | 'time' | 'datetime';\n  text?: string;\n  data: HdsFilterBarDateFilterData;\n}\n\nexport interface HdsFilterBarSearchFilter {\n  type: 'search';\n  text?: string;\n  data: HdsFilterBarGenericFilterData;\n}\n\nexport type HdsFilterBarFilter =\n  | HdsFilterBarSingleSelectFilter\n  | HdsFilterBarMultiSelectFilter\n  | HdsFilterBarRangeFilter\n  | HdsFilterBarDateFilter\n  | HdsFilterBarSearchFilter\n  | HdsFilterBarGenericFilter;\n\nexport interface HdsFilterBarFilters {\n  [name: string]: HdsFilterBarFilter;\n}\n\nexport enum HdsFilterBarRangeFilterSelectorValues {\n  lessThan = 'less-than',\n  lessThanOrEqualTo = 'less-than-or-equal-to',\n  equalTo = 'equal-to',\n  greaterThanOrEqualTo = 'greater-than-or-equal-to',\n  greaterThan = 'greater-than',\n  between = 'between',\n}\n\nexport type HdsFilterBarRangeFilterSelector =\n  `${HdsFilterBarRangeFilterSelectorValues}`;\n\nexport enum HdsFilterBarDateFilterSelectorValues {\n  before = 'before',\n  exactly = 'exactly',\n  after = 'after',\n  between = 'between',\n}\n\nexport type HdsFilterBarDateFilterSelector =\n  `${HdsFilterBarDateFilterSelectorValues}`;\n\nexport type HdsFilterBarRangeFilterValue =\n  | number\n  | { start?: number; end?: number };\n\nexport type HdsFilterBarDateFilterValue =\n  | string\n  | { start?: string; end?: string };\n"],"names":["HdsFilterBarFilterTypeValues","HdsFilterBarRangeFilterSelectorValues","HdsFilterBarDateFilterSelectorValues"],"mappings":"AAAA;AACA;AACA;AACA;;AAEA,IAAYA,4BAA4B,0BAA5BA,4BAA4B,EAAA;EAA5BA,4BAA4B,CAAA,aAAA,CAAA,GAAA,cAAA;EAA5BA,4BAA4B,CAAA,cAAA,CAAA,GAAA,eAAA;EAA5BA,4BAA4B,CAAA,OAAA,CAAA,GAAA,OAAA;EAA5BA,4BAA4B,CAAA,MAAA,CAAA,GAAA,MAAA;EAA5BA,4BAA4B,CAAA,MAAA,CAAA,GAAA,MAAA;EAA5BA,4BAA4B,CAAA,UAAA,CAAA,GAAA,UAAA;EAA5BA,4BAA4B,CAAA,SAAA,CAAA,GAAA,SAAA;EAA5BA,4BAA4B,CAAA,QAAA,CAAA,GAAA,QAAA;AAAA,EAAA,OAA5BA,4BAA4B;AAAA,CAAA,CAAA,EAAA;AAiFxC,IAAYC,qCAAqC,0BAArCA,qCAAqC,EAAA;EAArCA,qCAAqC,CAAA,UAAA,CAAA,GAAA,WAAA;EAArCA,qCAAqC,CAAA,mBAAA,CAAA,GAAA,uBAAA;EAArCA,qCAAqC,CAAA,SAAA,CAAA,GAAA,UAAA;EAArCA,qCAAqC,CAAA,sBAAA,CAAA,GAAA,0BAAA;EAArCA,qCAAqC,CAAA,aAAA,CAAA,GAAA,cAAA;EAArCA,qCAAqC,CAAA,SAAA,CAAA,GAAA,SAAA;AAAA,EAAA,OAArCA,qCAAqC;AAAA,CAAA,CAAA,EAAA;AAYjD,IAAYC,oCAAoC,0BAApCA,oCAAoC,EAAA;EAApCA,oCAAoC,CAAA,QAAA,CAAA,GAAA,QAAA;EAApCA,oCAAoC,CAAA,SAAA,CAAA,GAAA,SAAA;EAApCA,oCAAoC,CAAA,OAAA,CAAA,GAAA,OAAA;EAApCA,oCAAoC,CAAA,SAAA,CAAA,GAAA,SAAA;AAAA,EAAA,OAApCA,oCAAoC;AAAA,CAAA,CAAA,EAAA;;;;"}

package/dist/components.js

@@ -84,17 +84,17 @@ export { HdsDropdownListItemInteractiveColorValues } from './components/hds/drop
 export { HdsDropdownToggleButtonColorValues, HdsDropdownToggleButtonSizeValues, HdsDropdownToggleIconAllowedIconValues, HdsDropdownToggleIconSizeValues } from './components/hds/dropdown/toggle/types.js';
 export { HdsDropdownPositionToPlacementValues, HdsDropdownPositionValues } from './components/hds/dropdown/types.js';
 export { default as HdsFilterBar } from './components/hds/filter-bar/index.js';
-export { default as HdsFilterBarDropdown } from './components/hds/filter-bar/dropdown.js';
-export { default as HdsFilterBarFilterGroup } from './components/hds/filter-bar/filter-group/index.js';
-export { default as HdsFilterBarFilterGroupCheckbox } from './components/hds/filter-bar/filter-group/checkbox.js';
-export { default as HdsFilterBarFilterGroupDate } from './components/hds/filter-bar/filter-group/date.js';
-export { default as HdsFilterBarFilterGroupGeneric } from './components/hds/filter-bar/filter-group/generic.js';
-export { default as HdsFilterBarFilterGroupRadio } from './components/hds/filter-bar/filter-group/radio.js';
-export { default as HdsFilterBarFilterGroupNumerical } from './components/hds/filter-bar/filter-group/numerical.js';
+export { default as HdsFilterBarCheckbox } from './components/hds/filter-bar/checkbox.js';
+export { default as HdsFilterBarDate } from './components/hds/filter-bar/date.js';
+export { default as HdsFilterBarFiltersDropdown } from './components/hds/filter-bar/filters-dropdown.js';
+export { default as HdsFilterBarFilterGroup } from './components/hds/filter-bar/filter-group.js';
+export { default as HdsFilterBarGeneric } from './components/hds/filter-bar/generic.js';
+export { default as HdsFilterBarRadio } from './components/hds/filter-bar/radio.js';
+export { default as HdsFilterBarRange } from './components/hds/filter-bar/range.js';
 export { default as HdsFilterBarTabs } from './components/hds/filter-bar/tabs/index.js';
 export { default as HdsFilterBarTabsPanel } from './components/hds/filter-bar/tabs/panel.js';
 export { default as HdsFilterBarTabsTab } from './components/hds/filter-bar/tabs/tab.js';
-export { HdsFilterBarDateFilterSelectorValues, HdsFilterBarFilterTypeValues, HdsFilterBarNumericalFilterSelectorValues } from './components/hds/filter-bar/types.js';
+export { HdsFilterBarDateFilterSelectorValues, HdsFilterBarFilterTypeValues, HdsFilterBarRangeFilterSelectorValues } from './components/hds/filter-bar/types.js';
 export { default as HdsFlyout } from './components/hds/flyout/index.js';
 export { HdsFlyoutSizesValues } from './components/hds/flyout/types.js';
 export { default as HdsForm } from './components/hds/form/index.js';

package/dist/styles/@hashicorp/design-system-components.css

@@ -5203,8 +5203,7 @@ button.hds-button[href]::after {
   border: 1px solid var(--token-color-border-primary);
   border-radius: var(--token-border-radius-medium);
 }
-
-.hds-filter-bar__filters {
+.hds-filter-bar .hds-filter-bar__filters {
   display: flex;
   flex-wrap: wrap;
   gap: 8px 12px;
@@ -5212,6 +5211,9 @@ button.hds-button[href]::after {
   padding-top: 8px;
   border-top: 1px solid var(--token-color-border-primary);
 }
+.hds-filter-bar .hds-filter-bar__filters .hds-dropdown__list .hds-form-text-input {
+  width: auto;
+}
 
 .hds-filter-bar__actions__right {
   margin-left: auto;
@@ -5221,11 +5223,72 @@ button.hds-button[href]::after {
   --token-form-control-padding: 3px;
 }
 
-.hds-filter-bar__dropdown .hds-dropdown__list,
-.hds-filter-bar__dropdown .hds-dropdown-list-item {
+.hds-filter-bar__filters-dropdown__filter-group .hds-form-field--layout-flag {
+  padding: 8px 12px;
+}
+
+.hds-filter-bar__filters-dropdown .hds-dropdown__list,
+.hds-filter-bar__filters-dropdown .hds-dropdown-list-item {
   padding: 0;
 }
 
+.hds-filter-bar__filters-dropdown .hds-dropdown__footer .hds-layout-flex {
+  margin: 8px 0;
+}
+
+.hds-filter-bar__filters-dropdown .hds-dropdown__footer .hds-button-set {
+  gap: 8px;
+}
+
+.hds-filter-bar__filters-dropdown__filter-group__search {
+  padding: 0 16px 16px 16px;
+  border-bottom: 1px solid var(--token-color-border-primary);
+}
+
+.hds-filter-bar__filters-dropdown__filter-group__list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+  overscroll-behavior: contain;
+}
+
+.hds-filter-bar__filters-dropdown__filters-count {
+  margin-left: 8px;
+}
+
+.hds-filter-bar__filters-dropdown__filter-option {
+  display: block;
+  padding: 8px 16px;
+}
+.hds-filter-bar__filters-dropdown__filter-option--hidden {
+  display: none;
+}
+
+.hds-filter-bar__filters-dropdown__filter-range,
+.hds-filter-bar__filters-dropdown__filter-date {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.hds-filter-bar__filters-dropdown__fields {
+  padding: 0 16px;
+}
+
+.hds-filter-bar__filters-dropdown__fields .hds-filter-bar__filters-dropdown__field,
+.hds-filter-bar__filters-dropdown__fields .hds-filter-bar__filters-dropdown__field[type=date],
+.hds-filter-bar__filters-dropdown__fields .hds-filter-bar__filters-dropdown__field[type=time] {
+  width: 100%;
+}
+
+.hds-filter-bar__filters-dropdown__clear {
+  padding: 4px;
+}
+
 .hds-filter-bar__tabs {
   display: flex;
 }
@@ -5242,6 +5305,16 @@ button.hds-button[href]::after {
   border-top-left-radius: var(--token-border-radius-medium);
 }
 
+.hds-filter-bar__tabs__panel:not([hidden]) {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 50%;
+  padding: 16px 0;
+  background-color: var(--token-color-surface-primary);
+  border-top-right-radius: var(--token-border-radius-medium);
+}
+
 .hds-filter-bar__tabs__tab__button {
   display: flex;
   gap: 16px;
@@ -5277,64 +5350,6 @@ button.hds-button[href]::after {
   background-color: var(--token-color-palette-neutral-300);
 }
 
-.hds-filter-bar__tabs__panel:not([hidden]) {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  width: 50%;
-  padding: 16px 0;
-  background-color: var(--token-color-surface-primary);
-  border-top-right-radius: var(--token-border-radius-medium);
-}
-
-.hds-filter-bar__filter-group .hds-form-field--layout-flag {
-  padding: 8px 12px;
-}
-
-.hds-filter-bar__filter-group__search {
-  padding: 0 16px 16px 16px;
-  border-bottom: 1px solid var(--token-color-border-primary);
-}
-
-.hds-filter-bar__filter-group__list {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin: 0;
-  padding: 0;
-  overflow-y: auto;
-  list-style: none;
-  overscroll-behavior: contain;
-}
-
-.hds-filter-bar__filter-group__fields {
-  padding: 0 16px;
-}
-.hds-filter-bar__filter-group__fields .hds-filter-bar__filter-group__field,
-.hds-filter-bar__filter-group__fields .hds-filter-bar__filter-group__field[type=date],
-.hds-filter-bar__filter-group__fields .hds-filter-bar__filter-group__field[type=time] {
-  width: 100%;
-}
-
-.hds-filter-bar__filter-group__numerical,
-.hds-filter-bar__filter-group__date {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.hds-filter-bar__filter-group__selection-option {
-  display: block;
-  padding: 8px 16px;
-}
-.hds-filter-bar__filter-group__selection-option--hidden {
-  display: none;
-}
-
-.hds-filter-bar__filter-group__clear {
-  padding: 4px;
-}
-
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0

package/dist/styles/components/filter-bar.scss

@@ -14,15 +14,19 @@
   background-color: var(--token-color-surface-faint);
   border: 1px solid var(--token-color-border-primary);
   border-radius: var(--token-border-radius-medium);
-}
 
-.hds-filter-bar__filters {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 12px;
-  align-items: end;
-  padding-top: 8px;
-  border-top: 1px solid var(--token-color-border-primary);
+  .hds-filter-bar__filters {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 12px;
+    align-items: end;
+    padding-top: 8px;
+    border-top: 1px solid var(--token-color-border-primary);
+
+    .hds-dropdown__list .hds-form-text-input {
+      width: auto;
+    }
+  }
 }
 
 .hds-filter-bar__actions__right {
@@ -33,14 +37,78 @@
   --token-form-control-padding: 3px;
 }
 
-// FILTER BAR > DROPDOWN
+// FILTERS DROPDOWN
+//
+
+.hds-filter-bar__filters-dropdown__filter-group .hds-form-field--layout-flag {
+  padding: 8px 12px;
+}
+
+.hds-filter-bar__filters-dropdown .hds-dropdown__list,
+.hds-filter-bar__filters-dropdown .hds-dropdown-list-item {
+  padding: 0;
+}
+
+.hds-filter-bar__filters-dropdown .hds-dropdown__footer .hds-layout-flex {
+  margin: 8px 0;
+}
+
+.hds-filter-bar__filters-dropdown .hds-dropdown__footer .hds-button-set {
+  gap: 8px;
+}
+
+.hds-filter-bar__filters-dropdown__filter-group__search {
+  padding: 0 16px 16px 16px;
+  border-bottom: 1px solid var(--token-color-border-primary);
+}
 
-.hds-filter-bar__dropdown .hds-dropdown__list,
-.hds-filter-bar__dropdown .hds-dropdown-list-item {
+.hds-filter-bar__filters-dropdown__filter-group__list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 0;
   padding: 0;
+  overflow-y: auto;
+  list-style: none;
+  overscroll-behavior: contain;
 }
 
-// FILTER BAR > TABS
+.hds-filter-bar__filters-dropdown__filters-count {
+  margin-left: 8px;
+}
+
+.hds-filter-bar__filters-dropdown__filter-option {
+  display: block;
+  padding: 8px 16px;
+
+  &--hidden {
+    display: none;
+  }
+}
+
+.hds-filter-bar__filters-dropdown__filter-range,
+.hds-filter-bar__filters-dropdown__filter-date {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.hds-filter-bar__filters-dropdown__fields {
+  padding: 0 16px;
+}
+
+.hds-filter-bar__filters-dropdown__fields .hds-filter-bar__filters-dropdown__field,
+.hds-filter-bar__filters-dropdown__fields .hds-filter-bar__filters-dropdown__field[type="date"],
+.hds-filter-bar__filters-dropdown__fields .hds-filter-bar__filters-dropdown__field[type="time"] {
+  width: 100%;
+}
+
+.hds-filter-bar__filters-dropdown__clear {
+  padding: 4px;
+}
+
+// TABS
+//
 
 .hds-filter-bar__tabs {
   display: flex;
@@ -58,6 +126,16 @@
   border-top-left-radius: var(--token-border-radius-medium);
 }
 
+.hds-filter-bar__tabs__panel:not([hidden]) {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 50%;
+  padding: 16px 0;
+  background-color: var(--token-color-surface-primary);
+  border-top-right-radius: var(--token-border-radius-medium);
+}
+
 .hds-filter-bar__tabs__tab__button {
   display: flex;
   gap: 16px;
@@ -100,65 +178,3 @@
     background-color: var(--token-color-palette-neutral-300);
   }
 }
-
-.hds-filter-bar__tabs__panel:not([hidden]) {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  width: 50%;
-  padding: 16px 0;
-  background-color: var(--token-color-surface-primary);
-  border-top-right-radius: var(--token-border-radius-medium);
-}
-
-// FILTER BAR > FILTER GROUP
-
-.hds-filter-bar__filter-group .hds-form-field--layout-flag {
-  padding: 8px 12px;
-}
-
-.hds-filter-bar__filter-group__search {
-  padding: 0 16px 16px 16px;
-  border-bottom: 1px solid var(--token-color-border-primary);
-}
-
-.hds-filter-bar__filter-group__list {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin: 0;
-  padding: 0;
-  overflow-y: auto;
-  list-style: none;
-  overscroll-behavior: contain;
-}
-
-.hds-filter-bar__filter-group__fields {
-  padding: 0 16px;
-
-  .hds-filter-bar__filter-group__field,
-  .hds-filter-bar__filter-group__field[type="date"],
-  .hds-filter-bar__filter-group__field[type="time"] {
-    width: 100%;
-  }
-}
-
-.hds-filter-bar__filter-group__numerical,
-.hds-filter-bar__filter-group__date {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.hds-filter-bar__filter-group__selection-option {
-  display: block;
-  padding: 8px 16px;
-
-  &--hidden {
-    display: none;
-  }
-}
-
-.hds-filter-bar__filter-group__clear {
-  padding: 4px;
-}