Feat: Add dropdown search

Author: dchyun

packages/components/src/components/hds/advanced-table/filter-bar/dropdown.hbs

@@ -1,7 +1,9 @@
 {{! @glint-nocheck }}
 <Hds::Dropdown
   @listPosition="bottom-left"
-  @height="180px"
+  @height="240px"
+  @searchEnabled={{@searchEnabled}}
+  @searchPlaceholder="Search {{@key}}"
   class={{this.classNames}}
   {{this._updateInternalFilters}}
   as |D|

packages/components/src/components/hds/advanced-table/filter-bar/dropdown.ts

@@ -29,6 +29,7 @@ export interface HdsAdvancedTableFilterBarDropdownSignature {
     isMultiSelect?: boolean;
     isLiveFilter?: boolean;
     activeFilterableColumns?: string[];
+    searchEnabled?: boolean;
     onChange: (key: string, keyFilter?: HdsAdvancedTableFilter[]) => void;
   };
   Blocks: {

packages/components/src/components/hds/dropdown/index.hbs

@@ -3,7 +3,7 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 <Hds::PopoverPrimitive @isOpen={{@isOpen}} @onClose={{@onClose}} @enableClickEvents={{true}} as |PP|>
-  <div class={{this.classNames}} ...attributes {{PP.setupPrimitiveContainer}}>
+  <div class={{this.classNames}} ...attributes {{PP.setupPrimitiveContainer}} {{this._setUpDropdown}}>
     {{yield
       (hash
         ToggleButton=(component
@@ -21,6 +21,15 @@
     >
       {{#if (or PP.isOpen @preserveContentInDom)}}
         {{yield (hash Header=(component "hds/dropdown/header") close=PP.hidePopover)}}
+        {{#if @searchEnabled}}
+          <div class="hds-dropdown__search">
+            <Hds::Form::TextInput::Base
+              @type="search"
+              placeholder={{if @searchPlaceholder @searchPlaceholder "Search"}}
+              {{on "input" this.onSearch}}
+            />
+          </div>
+        {{/if}}
         <ul class="hds-dropdown__list" {{did-insert this.didInsertList}}>
           {{yield
             (hash

packages/components/src/components/hds/dropdown/index.ts

@@ -6,6 +6,7 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { assert } from '@ember/debug';
+import { modifier } from 'ember-modifier';
 
 import {
   // map Dropdown's `listPosition` values to PopoverPrimitive's `placement` values
@@ -48,6 +49,8 @@ export interface HdsDropdownSignature {
     enableCollisionDetection?: HdsAnchoredPositionOptions['enableCollisionDetection'];
     preserveContentInDom?: boolean;
     matchToggleWidth?: boolean;
+    searchEnabled?: boolean;
+    searchPlaceholder?: string;
   };
   Blocks: {
     default: [
@@ -73,6 +76,15 @@ export interface HdsDropdownSignature {
 }
 
 export default class HdsDropdown extends Component<HdsDropdownSignature> {
+
+  private _element!: HTMLDivElement;
+
+  private _setUpDropdown = modifier((element: HTMLDivElement) => {
+    this._element = element;
+
+    return () => {};
+  });
+
   /**
    * @param listPosition
    * @type {string}
@@ -169,4 +181,20 @@ export default class HdsDropdown extends Component<HdsDropdownSignature> {
       }
     }
   }
+
+  onSearch = (event: Event) => {
+    const listItems = this._element.querySelectorAll('.hds-dropdown-list-item') as NodeListOf<HTMLLIElement>;
+    const input = event.target as HTMLInputElement;
+    listItems.forEach((item) => {
+      if (item.textContent) {
+        const text = item.textContent.toLowerCase();
+        const searchText = input.value.toLowerCase();
+        if (text.includes(searchText)) {
+          item.style.display = '';
+        } else {
+          item.style.display = 'none';
+        }
+      }
+    });
+  }
 }

packages/components/src/styles/components/advanced-table.scss

@@ -785,7 +785,7 @@ $hds-advanced-table-drag-preview-background-color: rgba(204, 227, 254, 30%);
     padding-top: 8px;
     border-top: 1px solid var(--token-color-border-primary);
 
-    .hds-form-text-input {
+    .hds-dropdown__list .hds-form-text-input {
       width: auto;
     }
   }

packages/components/src/styles/components/dropdown.scss

@@ -602,3 +602,11 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
     vertical-align: bottom;
   }
 }
+
+// SEARCH
+
+.hds-dropdown__search {
+  flex: none;
+  padding: 8px;
+  border-bottom: 1px solid var(--token-color-border-primary);
+}

showcase/app/components/mock/app/main/generic-advanced-table.gts

@@ -387,6 +387,9 @@ const SAMPLE_MODEL = [
 ];
 
 const SAMPLE_MODEL_VALUES = {
+  name: Array.from(new Set(SAMPLE_MODEL.map((item) => item['name']))).map(
+    (value) => ({ value, label: value }),
+  ),
   'project-name': Array.from(
     new Set(SAMPLE_MODEL.map((item) => item['project-name'])),
   ).map((value) => ({ value, label: value })),
@@ -410,6 +413,7 @@ const SAMPLE_COLUMNS = [
     label: 'Name',
     key: 'name',
     width: 'max-content',
+    filterType: 'checkbox',
   },
   {
     label: 'Project name',
@@ -639,11 +643,18 @@ export default class MockAppMainGenericAdvancedTable extends Component<MockAppMa
             <D.Checkbox>memories</D.Checkbox>
           </F.ActionsDropdown>
           <F.FiltersDropdown as |D|>
+            <D.Checkbox @value="name">Name</D.Checkbox>
             <D.Checkbox @value="project-name">Project name</D.Checkbox>
             <D.Checkbox @value="run-status">Run status</D.Checkbox>
             <D.Checkbox @value="terraform-version">Terraform version</D.Checkbox>
           </F.FiltersDropdown>
-          <F.Dropdown @key="project-name" as |D|>
+          <F.Dropdown @key="name" @searchEnabled={{true}} as |D|>
+            <D.ToggleButton @text="Name" />
+            {{#each (get SAMPLE_MODEL_VALUES "name") as |option|}}
+              <D.Checkbox @value={{option.value}}>{{option.label}}</D.Checkbox>
+            {{/each}}
+          </F.Dropdown>
+          <F.Dropdown @key="project-name" @searchEnabled={{true}} as |D|>
             <D.ToggleButton @text="Project name" />
             {{#each (get SAMPLE_MODEL_VALUES "project-name") as |option|}}
               <D.Checkbox @value={{option.value}}>{{option.label}}</D.Checkbox>