Enhance multi-select for usage inside applications

packages/boxel-ui/addon/package.json

@@ -40,7 +40,6 @@
     "@embroider/addon-shim": "^1.8.9",
     "@floating-ui/dom": "^1.6.3",
     "@glint/template": "1.3.0",
-    "@types/pluralize": "^0.0.30",
     "classnames": "^2.3.2",
     "dayjs": "^1.11.7",
     "ember-basic-dropdown": "^8.0.0",
@@ -75,6 +74,7 @@
     "@rollup/plugin-babel": "^6.0.4",
     "@tsconfig/ember": "3.0.1",
     "@types/lodash": "^4.14.182",
+    "@types/pluralize": "^0.0.30",
     "@typescript-eslint/eslint-plugin": "^7.16.1",
     "@typescript-eslint/parser": "^7.16.1",
     "babel-plugin-ember-template-compilation": "^2.2.1",

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

@@ -34,6 +34,9 @@ import Menu from './components/menu/index.gts';
 import BoxelMessage from './components/message/index.gts';
 import Message from './components/message/index.gts';
 import Modal from './components/modal/index.gts';
+import BoxelMultiSelect, {
+  BoxelMultiSelectBasic,
+} from './components/multi-select/index.gts';
 import Pill from './components/pill/index.gts';
 import ProgressBar from './components/progress-bar/index.gts';
 import RadioInput from './components/radio-input/index.gts';
@@ -62,6 +65,8 @@ export {
   BoxelInputValidationState,
   BoxelInputValidationStates,
   BoxelMessage,
+  BoxelMultiSelect,
+  BoxelMultiSelectBasic,
   BoxelSelect,
   Button,
   CardContainer,

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

@@ -8,7 +8,9 @@ import { BoxelAfterOptionsComponent } from './after-options.gts';
 import BoxelSelectedItem, {
   type SelectedItemSignature,
 } from './selected-item.gts';
-import BoxelTrigger, { type TriggerComponentSignature } from './trigger.gts';
+import BoxelMultiSelectDefaultTrigger, {
+  type TriggerComponentSignature,
+} from './trigger.gts';
 
 export interface BoxelMultiSelectArgs<ItemT> extends PowerSelectArgs {
   options: ItemT[];
@@ -37,37 +39,40 @@ export interface Signature<ItemT> {
 
 export class BoxelMultiSelectBasic<ItemT> extends Component<Signature<ItemT>> {
   <template>
-    <div class='boxel-multi-select__wrapper'>
-      <PowerSelectMultiple
-        {{! required args }}
-        @options={{@options}}
-        @selected={{@selected}}
-        @onChange={{@onChange}}
-        {{! basic options }}
-        @placeholder={{@placeholder}}
-        @disabled={{@disabled}}
-        @renderInPlace={{@renderInPlace}}
-        @matchTriggerWidth={{@matchTriggerWidth}}
-        @searchField={{@searchField}}
-        @searchEnabled={{@searchEnabled}}
-        @closeOnSelect={{@closeOnSelect}}
-        @eventType={{@eventType}}
-        @ariaLabel={{@ariaLabel}}
-        @dropdownClass={{'boxel-multi-select__dropdown'}}
-        {{! actions  }}
-        @onOpen={{@onOpen}}
-        @onBlur={{@onBlur}}
-        {{! custom components }}
-        @selectedItemComponent={{@selectedItemComponent}}
-        @triggerComponent={{@triggerComponent}}
-        @afterOptionsComponent={{@afterOptionsComponent}}
-        @beforeOptionsComponent={{@beforeOptionsComponent}}
-        ...attributes
-        as |option|
-      >
-        {{yield option}}
-      </PowerSelectMultiple>
-    </div>
+    <PowerSelectMultiple
+      class='boxel-multi-select'
+      {{! required args }}
+      @options={{@options}}
+      @selected={{@selected}}
+      @onChange={{@onChange}}
+      {{! basic options }}
+      @placeholder={{@placeholder}}
+      @disabled={{@disabled}}
+      @renderInPlace={{@renderInPlace}}
+      @matchTriggerWidth={{@matchTriggerWidth}}
+      @searchField={{@searchField}}
+      @searchEnabled={{@searchEnabled}}
+      @closeOnSelect={{@closeOnSelect}}
+      @eventType={{@eventType}}
+      @ariaLabel={{@ariaLabel}}
+      @registerAPI={{@registerAPI}}
+      @initiallyOpened={{@initiallyOpened}}
+      @extra={{@extra}}
+      @dropdownClass={{'boxel-multi-select__dropdown'}}
+      {{! actions  }}
+      @onOpen={{@onOpen}}
+      @onClose={{@onClose}}
+      @onBlur={{@onBlur}}
+      {{! custom components }}
+      @selectedItemComponent={{@selectedItemComponent}}
+      @triggerComponent={{@triggerComponent}}
+      @afterOptionsComponent={{@afterOptionsComponent}}
+      @beforeOptionsComponent={{@beforeOptionsComponent}}
+      ...attributes
+      as |option|
+    >
+      {{yield option}}
+    </PowerSelectMultiple>
     {{! template-lint-disable require-scoped-style }}
     <style>
       .boxel-multi-select__dropdown {
@@ -109,7 +114,7 @@ export class BoxelMultiSelectBasic<ItemT> extends Component<Signature<ItemT>> {
       }
     </style>
     <style scoped>
-      .boxel-multi-select__wrapper {
+      .boxel-multi-select {
         position: relative;
         display: flex;
         align-items: stretch;
@@ -118,19 +123,6 @@ export class BoxelMultiSelectBasic<ItemT> extends Component<Signature<ItemT>> {
         border: 1px solid var(--boxel-border-color);
         border-radius: var(--boxel-border-radius-sm);
       }
-      .ember-basic-dropdown-trigger {
-        padding: var(--boxel-sp-xxxs);
-        display: flex;
-        align-items: center;
-        flex-grow: 1;
-        border: none;
-      }
-      .ember-power-select-trigger:focus,
-      .ember-power-select-trigger--active {
-        border: none;
-        box-shadow: none;
-        outline: none;
-      }
       .ember-power-select-trigger:after {
         margin-left: 10px;
       }
@@ -161,21 +153,25 @@ export default class BoxelMultiSelect<ItemT> extends Component<
       @searchEnabled={{@searchEnabled}}
       @closeOnSelect={{@closeOnSelect}}
       @ariaLabel={{@ariaLabel}}
+      @registerAPI={{@registerAPI}}
+      @initiallyOpened={{@initiallyOpened}}
+      @extra={{@extra}}
       {{! Do not remove eventType argument 
     This is to ensure that the click event from selected item does not bubble up to the trigger
      and cause the dropdown to close
        do not remove eventType argument }}
       @eventType='click'
       {{! actions }}
       @onOpen={{@onOpen}}
+      @onClose={{@onClose}}
       @onBlur={{@onBlur}}
       {{! custom components }}
       @selectedItemComponent={{if
         @selectedItemComponent
         @selectedItemComponent
         (component BoxelSelectedItem)
       }}
-      @triggerComponent={{component BoxelTrigger}}
+      @triggerComponent={{component BoxelMultiSelectDefaultTrigger}}
       @beforeOptionsComponent={{component BeforeOptions}}
       @afterOptionsComponent={{component BoxelAfterOptionsComponent}}
       ...attributes

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

@@ -7,11 +7,10 @@ import type { Select } from 'ember-power-select/components/power-select';
 import IconX from '../../icons/icon-x.gts';
 
 // Inside the trigger component, the selected item component is called within in ember-power-select
-// It only passes option, select and extra as arguments
+// It only passes option, select
 // We follow the same convention when defining our own selected item component
 export interface SelectedItemSignature<ItemT> {
   Args: {
-    extra?: any;
     option: any;
     select: Select & {
       actions: {
@@ -20,7 +19,7 @@ export interface SelectedItemSignature<ItemT> {
     };
   };
   Blocks: {
-    default: [any];
+    default: [ItemT, Select];
   };
   Element: HTMLDivElement;
 }
@@ -44,16 +43,14 @@ export default class BoxelSelectedItem<ItemT> extends Component<
 
   <template>
     <div class='ember-power-select-multiple-option'>
-      {{@option.name}}
+      {{yield @option @select}}
       <button
         type='button'
         class='boxel-multi-select__remove-button'
         {{on 'click' (fn this.remove @option)}}
-        aria-label='Remove {{@option.name}}'
+        aria-label='Remove item'
       >
-        <IconX
-          class='boxel-multi-select__icon boxel-multi-select__icon--remove'
-        />
+        <IconX class='boxel-multi-select__icon--remove' />
       </button>
     </div>
 
@@ -62,6 +59,7 @@ export default class BoxelSelectedItem<ItemT> extends Component<
         display: flex;
         align-items: center;
         gap: var(--boxel-sp-xxxs);
+        margin: 0px;
       }
       .boxel-multi-select__remove-button {
         all: unset;