Introduce picker component

packages/boxel-ui/addon/src/components.ts

@@ -47,6 +47,7 @@ import BoxelMultiSelect, {
   BoxelMultiSelectBasic,
 } from './components/multi-select/index.gts';
 import PhoneInput from './components/phone-input/index.gts';
+import Picker, { type PickerOption } from './components/picker/index.gts';
 import Pill from './components/pill/index.gts';
 import ProgressBar from './components/progress-bar/index.gts';
 import ProgressRadial from './components/progress-radial/index.gts';
@@ -123,6 +124,8 @@ export {
   Message,
   Modal,
   PhoneInput,
+  Picker,
+  PickerOption,
   Pill,
   ProgressBar,
   ProgressRadial,

packages/boxel-ui/addon/src/components/multi-select/index.gts

@@ -9,6 +9,7 @@ import type {
 import BeforeOptions from 'ember-power-select/components/power-select/before-options';
 import PowerSelectMultiple from 'ember-power-select/components/power-select-multiple';
 
+import { cn } from '../../helpers.ts';
 import { BoxelAfterOptionsComponent } from './after-options.gts';
 import BoxelSelectedItem, {
   type SelectedItemSignature,
@@ -18,9 +19,12 @@ import BoxelMultiSelectDefaultTrigger, {
 } from './trigger.gts';
 
 export interface BoxelMultiSelectArgs<ItemT> extends PowerSelectArgs {
+  afterOptionsComponent?: ComponentLike<any>;
   ariaLabel?: string;
+  beforeOptionsComponent?: ComponentLike<any>;
   closeOnSelect?: boolean;
   disabled?: boolean;
+  dropdownClass?: string;
   extra?: any;
   matchTriggerWidth?: boolean;
   onBlur?: (select: Select, e: Event) => boolean | undefined;
@@ -75,7 +79,7 @@ export class BoxelMultiSelectBasic<ItemT> extends Component<Signature<ItemT>> {
       @registerAPI={{@registerAPI}}
       @initiallyOpened={{@initiallyOpened}}
       @extra={{@extra}}
-      @dropdownClass='boxel-multi-select__dropdown'
+      @dropdownClass={{cn @dropdownClass 'boxel-multi-select__dropdown'}}
       {{! actions  }}
       @onOpen={{@onOpen}}
       @onClose={{@onClose}}
@@ -84,7 +88,11 @@ export class BoxelMultiSelectBasic<ItemT> extends Component<Signature<ItemT>> {
       @selectedItemComponent={{@selectedItemComponent}}
       @triggerComponent={{@triggerComponent}}
       @afterOptionsComponent={{@afterOptionsComponent}}
-      @beforeOptionsComponent={{component BeforeOptions}}
+      @beforeOptionsComponent={{if
+        @beforeOptionsComponent
+        (component @beforeOptionsComponent)
+        (component BeforeOptions)
+      }}
       ...attributes
       as |option|
     >

packages/boxel-ui/addon/src/components/picker/before-options-with-search.gts

@@ -0,0 +1,87 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import type { Select } from 'ember-power-select/components/power-select';
+
+import BoxelInput from '../input/index.gts';
+import type { PickerOption } from './index.gts';
+
+export interface BeforeOptionsWithSearchSignature {
+  Args: {
+    extra?: {
+      filterOptions?: (
+        options: PickerOption[],
+        searchTerm: string,
+      ) => PickerOption[];
+      onSearchTermChange?: (term: string) => void;
+      searchPlaceholder?: string;
+      searchTerm?: string;
+    };
+    select: Select;
+  };
+}
+
+export default class PickerBeforeOptionsWithSearch extends Component<BeforeOptionsWithSearchSignature> {
+  get searchTerm() {
+    return this.args.extra?.searchTerm || '';
+  }
+
+  get searchPlaceholder() {
+    return this.args.extra?.searchPlaceholder || 'search for a realm';
+  }
+
+  @action
+  updateSearchTerm(value: string) {
+    this.args.extra?.onSearchTermChange?.(value);
+  }
+
+  <template>
+    <div class='picker-before-options' data-test-boxel-picker-before-options>
+      <div class='picker-before-options__search' data-test-boxel-picker-search>
+        <BoxelInput
+          @type='search'
+          @value={{this.searchTerm}}
+          @onInput={{this.updateSearchTerm}}
+          @placeholder={{this.searchPlaceholder}}
+          class='picker-before-options__search-input'
+        />
+      </div>
+    </div>
+
+    <style scoped>
+      .picker-before-options {
+        background-color: var(--boxel-light);
+        padding: 0 var(--boxel-sp-2xs);
+      }
+
+      .picker-before-options__search {
+        --boxel-input-search-color: var(--boxel-dark);
+        --boxel-input-search-background-color: transparent;
+        --icon-full-length: var(--boxel-icon-xs);
+        padding: 0 var(--boxel-sp-2xs);
+      }
+
+      .picker-before-options__search :deep(.input-container) {
+        --icon-full-length: var(--boxel-icon-xs);
+      }
+
+      .picker-before-options__search :deep(.search-icon) {
+        color: var(--boxel-dark);
+        height: 14px;
+        width: 14px;
+      }
+
+      .picker-before-options__search :deep(.search) {
+        padding-left: calc(var(--boxel-icon-xs) + var(--boxel-sp-2xs));
+      }
+
+      .picker-before-options__search-input {
+        width: 100%;
+        border: none;
+      }
+
+      .picker-before-options__search-input:focus-visible {
+        outline: none;
+      }
+    </style>
+  </template>
+}