Fix: Revert search and dismiss features in dropdown

Author: dchyun

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

@@ -3,12 +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}} {{this._setUpDropdown}}>
-    {{#if this.onDismiss}}
-      <button class="hds-dropdown__dismiss" type="button" {{on "click" this.onDismiss}}>
-        <Hds::Icon class="hds-tag__dismiss-icon" @name="x" @size="16" />
-      </button>
-    {{/if}}
+  <div class={{this.classNames}} ...attributes {{PP.setupPrimitiveContainer}}>
     {{yield
       (hash
         ToggleButton=(component
@@ -26,15 +21,6 @@
     >
       {{#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,7 +6,6 @@
 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
@@ -49,10 +48,6 @@ export interface HdsDropdownSignature {
     enableCollisionDetection?: HdsAnchoredPositionOptions['enableCollisionDetection'];
     preserveContentInDom?: boolean;
     matchToggleWidth?: boolean;
-    searchEnabled?: boolean;
-    searchPlaceholder?: string;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    onDismiss?: (event: MouseEvent, ...args: any[]) => void;
   };
   Blocks: {
     default: [
@@ -78,14 +73,6 @@ 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}
@@ -129,17 +116,6 @@ export default class HdsDropdown extends Component<HdsDropdownSignature> {
     };
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  get onDismiss(): ((event: MouseEvent, ...args: any[]) => void) | false {
-    const { onDismiss } = this.args;
-
-    if (typeof onDismiss === 'function') {
-      return onDismiss;
-    } else {
-      return false;
-    }
-  }
-
   /**
    * Get the class names to apply to the element
    * @method classNames
@@ -153,10 +129,6 @@ export default class HdsDropdown extends Component<HdsDropdownSignature> {
       classes.push('hds-dropdown--is-inline');
     }
 
-    if (this.args.onDismiss) {
-      classes.push('hds-dropdown--has-dismiss');
-    }
-
     return classes.join(' ');
   }
 
@@ -197,20 +169,4 @@ 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/dropdown.scss

@@ -602,58 +602,3 @@ $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);
-}
-
-// DISMISS BUTTON
-.hds-dropdown__dismiss {
-  color: var(--token-color-foreground-primary);
-  background-color: var(--token-color-surface-faint);
-  border: 1px solid var(--token-color-border-strong);
-  border-right: none;
-  border-radius: var(--token-border-radius-small) 0 0 var(--token-border-radius-small);
-
-  &:hover,
-  &.mock-hover {
-    background-color: var(--token-color-surface-interactive);
-    cursor: pointer;
-  }
-
-  &:focus,
-  &.mock-focus {
-    @include hds-button-state-focus();
-    border-color: var(--token-color-focus-action-internal);
-
-    &::before {
-      border-color: var(--token-color-focus-action-external);
-    }
-  }
-
-  &:active,
-  &.mock-active {
-    background-color: var(--token-color-surface-interactive-active);
-    border-color: var(--token-color-border-strong);
-
-    &::before {
-      border-color: transparent;
-    }
-  }
-}
-
-.hds-dropdown--has-dismiss {
-  display: flex;
-
-  .hds-dropdown-toggle-button {
-    border-left: none;
-
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    box-shadow: none;
-  }
-}