@visitwonders/assembly 0.10.1 → 0.12.0

package/dist/form/multi-combobox.js

@@ -0,0 +1,626 @@
+import "./multi-combobox.css"
+import Component from '@glimmer/component';
+import { tracked, cached } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+import { modifier } from 'ember-modifier';
+import { uniqueId } from 'ember-primitives/utils';
+import Popover from '../overlay/popover.js';
+import Icon from '../media/icon.js';
+import { ChevronDown, X } from 'lucide';
+import { isOptionGroup, flattenOptions, splitOnMatch } from './combobox-shared.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i, n } from 'decorator-transforms/runtime';
+
+;
+
+/** Rows skipped per PageUp / PageDown keypress. */const PAGE_STEP = 10;
+// ============================================================================
+// Types
+// ============================================================================
+
+// ============================================================================
+// Derived types
+// ============================================================================
+
+// ============================================================================
+// Main Component
+// ============================================================================
+class MultiComboBox extends Component {
+  static {
+    g(this.prototype, "isOpen", [tracked], function () {
+      return false;
+    });
+  }
+  #isOpen = (i(this, "isOpen"), void 0);
+  static {
+    g(this.prototype, "query", [tracked], function () {
+      return '';
+    });
+  }
+  #query = (i(this, "query"), void 0);
+  static {
+    g(this.prototype, "activeId", [tracked], function () {
+      return null;
+    });
+  }
+  #activeId = (i(this, "activeId"), void 0);
+  static {
+    g(this.prototype, "remoteItems", [tracked], function () {
+      return null;
+    });
+  }
+  #remoteItems = (i(this, "remoteItems"), void 0);
+  static {
+    g(this.prototype, "isLoadingInternal", [tracked], function () {
+      return false;
+    });
+  }
+  #isLoadingInternal = (i(this, "isLoadingInternal"), void 0);
+  searchSeq = 0;
+  searchTimer = null;
+  inputElement = null;
+  listboxElement = null;
+  componentId = `multi-combobox-${uniqueId()}`;
+  listboxId = `${this.componentId}-listbox`;
+  createOptionId = `${this.componentId}-create`;
+  willDestroy() {
+    super.willDestroy();
+    if (this.searchTimer) clearTimeout(this.searchTimer);
+  }
+  // --------------------------------------------------------------------------
+  // Items + filtering
+  // --------------------------------------------------------------------------
+  get isAsync() {
+    return this.args.onSearch !== undefined;
+  }
+  get effectiveItems() {
+    if (this.isAsync && this.remoteItems !== null) {
+      return this.remoteItems;
+    }
+    return this.args.items ?? [];
+  }
+  get values() {
+    return this.args.values ?? [];
+  }
+  get valueSet() {
+    return new Set(this.values);
+  }
+  static {
+    n(this.prototype, "valueSet", [cached]);
+  }
+  get normalizedGroups() {
+    const items = this.effectiveItems;
+    if (items.length === 0) return [];
+    if (isOptionGroup(items[0])) {
+      return items.map((g, i) => ({
+        label: g.label,
+        headingId: `${this.componentId}-group-${i}`,
+        options: g.options
+      }));
+    }
+    return [{
+      label: null,
+      headingId: null,
+      options: items
+    }];
+  }
+  get renderedGroups() {
+    const trimmed = this.query.trim().toLowerCase();
+    const skipLocalFilter = this.isAsync || !trimmed;
+    const selected = this.valueSet;
+    const result = [];
+    for (const group of this.normalizedGroups) {
+      const matched = skipLocalFilter ? group.options : group.options.filter(option => {
+        const inLabel = option.label.toLowerCase().includes(trimmed);
+        const inDescription = option.description ? option.description.toLowerCase().includes(trimmed) : false;
+        return inLabel || inDescription;
+      });
+      if (matched.length === 0) continue;
+      const rows = matched.map(option => {
+        const optionId = `${this.componentId}-option-${option.value}`;
+        return {
+          kind: 'option',
+          option,
+          optionId,
+          isActive: this.activeId === optionId,
+          isSelected: selected.has(option.value)
+        };
+      });
+      result.push({
+        key: group.headingId ?? 'ungrouped',
+        label: group.label,
+        headingId: group.headingId,
+        rows
+      });
+    }
+    return result;
+  }
+  static {
+    n(this.prototype, "renderedGroups", [cached]);
+  }
+  get navigableRows() {
+    const rows = [];
+    for (const group of this.renderedGroups) {
+      for (const row of group.rows) {
+        if (!row.option.isDisabled) rows.push(row);
+      }
+    }
+    const create = this.createRow;
+    if (create) rows.push(create);
+    return rows;
+  }
+  static {
+    n(this.prototype, "navigableRows", [cached]);
+  }
+  get hasOptionResults() {
+    return this.renderedGroups.some(g => g.rows.length > 0);
+  }
+  // --------------------------------------------------------------------------
+  // Chips (from the selected values)
+  // --------------------------------------------------------------------------
+  get maxVisibleChips() {
+    return this.args.maxVisibleChips ?? 3;
+  }
+  get selectedOptions() {
+    // Resolve `values` to their option objects by looking across all
+    // items (incl. async payload) AND the current render. If an option
+    // isn't found in items, fabricate a minimal one so the chip still
+    // shows — common with async-backed data where items lag.
+    const flat = flattenOptions(this.effectiveItems);
+    const byValue = new Map(flat.map(o => [o.value, o]));
+    return this.values.map(v => byValue.get(v) ?? {
+      value: v,
+      label: v
+    });
+  }
+  get chips() {
+    return this.selectedOptions.map(option => ({
+      value: option.value,
+      label: option.label,
+      option
+    }));
+  }
+  get visibleChips() {
+    return this.chips.slice(0, this.maxVisibleChips);
+  }
+  get overflowCount() {
+    return Math.max(0, this.chips.length - this.maxVisibleChips);
+  }
+  get hasOverflow() {
+    return this.overflowCount > 0;
+  }
+  // --------------------------------------------------------------------------
+  // Create row
+  // --------------------------------------------------------------------------
+  get isCreateVisible() {
+    if (!this.args.isCreatable) return false;
+    const trimmed = this.query.trim();
+    if (!trimmed) return false;
+    const flat = flattenOptions(this.effectiveItems);
+    const lower = trimmed.toLowerCase();
+    return !flat.some(opt => opt.label.toLowerCase() === lower);
+  }
+  get createRow() {
+    if (!this.isCreateVisible) return null;
+    const query = this.query.trim();
+    const label = this.args.createLabel ? this.args.createLabel(query) : `Create "${query}"`;
+    return {
+      kind: 'create',
+      optionId: this.createOptionId,
+      isActive: this.activeId === this.createOptionId,
+      query,
+      label
+    };
+  }
+  // --------------------------------------------------------------------------
+  // Async search
+  // --------------------------------------------------------------------------
+  get isLoading() {
+    if (this.args.isLoading !== undefined) return this.args.isLoading;
+    return this.isLoadingInternal;
+  }
+  get loadingText() {
+    return this.args.loadingText ?? 'Loading…';
+  }
+  get searchDebounceMs() {
+    return this.args.searchDebounceMs ?? 200;
+  }
+  scheduleAsyncSearch(query) {
+    if (!this.args.onSearch) return;
+    if (this.searchTimer) clearTimeout(this.searchTimer);
+    this.isLoadingInternal = true;
+    this.searchTimer = setTimeout(() => {
+      this.searchTimer = null;
+      void this.runAsyncSearch(query);
+    }, this.searchDebounceMs);
+  }
+  async runAsyncSearch(query) {
+    if (!this.args.onSearch) return;
+    const seq = ++this.searchSeq;
+    try {
+      const result = await this.args.onSearch(query);
+      if (seq !== this.searchSeq) return;
+      this.remoteItems = result;
+    } catch (error) {
+      // Only surface the error for the latest request; stale errors
+      // are as uninteresting as stale results.
+      if (seq === this.searchSeq) {
+        this.args.onSearchError?.(error);
+      }
+    } finally {
+      if (seq === this.searchSeq) {
+        this.isLoadingInternal = false;
+        this.resetActiveToFirstNavigable();
+      }
+    }
+  }
+  // --------------------------------------------------------------------------
+  // Derived UI state
+  // --------------------------------------------------------------------------
+  get hasAnyValue() {
+    return this.values.length > 0;
+  }
+  get isClearable() {
+    return this.args.isClearable ?? true;
+  }
+  get showClearButton() {
+    return this.isClearable && this.hasAnyValue && !this.args.isDisabled;
+  }
+  get noResultsText() {
+    return this.args.noResultsText ?? 'No results';
+  }
+  /** Text for the aria-live region — see combobox.gts for rationale. */
+  get announcement() {
+    if (!this.isOpen) return '';
+    if (this.isLoading) return this.loadingText;
+    const optionCount = this.navigableRows.filter(r => r.kind === 'option').length;
+    if (optionCount === 0) {
+      if (this.isCreateVisible) return 'Create new option available';
+      return this.noResultsText;
+    }
+    return `${optionCount} ${optionCount === 1 ? 'option' : 'options'} available`;
+  }
+  get showEmptyState() {
+    if (this.isLoading) return false;
+    if (this.hasOptionResults) return false;
+    if (this.isCreateVisible) return false;
+    return true;
+  }
+  get ariaExpanded() {
+    return this.isOpen ? 'true' : 'false';
+  }
+  get ariaRequired() {
+    return this.args.isRequired ? 'true' : undefined;
+  }
+  get ariaInvalid() {
+    return this.args.isInvalid ? 'true' : undefined;
+  }
+  // --------------------------------------------------------------------------
+  // Element registration
+  // --------------------------------------------------------------------------
+  setupInput = modifier(element => {
+    this.inputElement = element;
+    return () => {
+      this.inputElement = null;
+    };
+  });
+  setupListbox = modifier(element => {
+    this.listboxElement = element;
+    return () => {
+      this.listboxElement = null;
+    };
+  });
+  // --------------------------------------------------------------------------
+  // Event handlers — input (the trigger)
+  // --------------------------------------------------------------------------
+  handleInputFocus = event => {
+    this.args.onFocus?.(event);
+  };
+  handleInputBlur = event => {
+    this.args.onBlur?.(event);
+  };
+  handleInputClick = () => {
+    if (this.args.isDisabled) return;
+    if (!this.isOpen) this.openDropdown();
+  };
+  handleInput = event => {
+    const target = event.target;
+    this.query = target.value;
+    if (!this.isOpen) this.openDropdown({
+      resetActive: false
+    });
+    if (this.isAsync) {
+      this.scheduleAsyncSearch(this.query);
+    } else {
+      this.resetActiveToFirstNavigable();
+    }
+  };
+  handleInputKeyDown = event => {
+    // Backspace on an empty input removes the last chip — available
+    // whether open or closed.
+    if (event.key === 'Backspace' && this.query === '' && this.values.length > 0) {
+      event.preventDefault();
+      this.removeLastChip();
+      return;
+    }
+    if (!this.isOpen) {
+      switch (event.key) {
+        case 'ArrowDown':
+        case 'ArrowUp':
+          event.preventDefault();
+          this.openDropdown();
+          return;
+        case 'Escape':
+          if (this.showClearButton) {
+            event.preventDefault();
+            this.clearAll();
+          }
+          return;
+        default:
+          return;
+      }
+    }
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        this.moveActive(1);
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.moveActive(-1);
+        break;
+      case 'PageDown':
+        event.preventDefault();
+        this.movePage(1);
+        break;
+      case 'PageUp':
+        event.preventDefault();
+        this.movePage(-1);
+        break;
+      case 'Home':
+        event.preventDefault();
+        this.setActiveToFirst();
+        break;
+      case 'End':
+        event.preventDefault();
+        this.setActiveToLast();
+        break;
+      case 'Enter':
+        event.preventDefault();
+        this.activateActive();
+        break;
+      case 'Escape':
+        event.preventDefault();
+        this.closeDropdown();
+        break;
+      case 'Tab':
+        this.closeDropdown();
+        break;
+    }
+  };
+  handleChevronMouseDown = event => {
+    event.preventDefault();
+  };
+  handleChevronClick = event => {
+    event.preventDefault();
+    if (this.args.isDisabled) return;
+    if (this.isOpen) {
+      this.closeDropdown();
+    } else {
+      this.openDropdown();
+    }
+    this.inputElement?.focus({
+      preventScroll: true
+    });
+  };
+  // --------------------------------------------------------------------------
+  // Open / close
+  // --------------------------------------------------------------------------
+  openDropdown = (opts = {}) => {
+    if (this.args.isDisabled || this.isOpen) return;
+    this.isOpen = true;
+    if (opts.resetActive !== false) {
+      this.query = '';
+      this.resetActiveToInitial();
+    } else {
+      this.resetActiveToFirstNavigable();
+    }
+    this.args.onOpen?.();
+  };
+  closeDropdown = () => {
+    // Guard so onClose doesn't double-fire; several sources can call
+    // this when the dropdown is already closed.
+    const wasOpen = this.isOpen;
+    this.isOpen = false;
+    this.query = '';
+    this.activeId = null;
+    if (this.isAsync) {
+      this.remoteItems = null;
+      this.isLoadingInternal = false;
+      if (this.searchTimer) {
+        clearTimeout(this.searchTimer);
+        this.searchTimer = null;
+      }
+    }
+    if (wasOpen) this.args.onClose?.();
+  };
+  handleOpenChange = open => {
+    if (open) {
+      this.openDropdown();
+    } else {
+      this.closeDropdown();
+    }
+  };
+  // --------------------------------------------------------------------------
+  // Active-row management
+  // --------------------------------------------------------------------------
+  resetActiveToInitial() {
+    const rows = this.navigableRows;
+    if (rows.length === 0) {
+      this.activeId = null;
+      return;
+    }
+    this.activeId = rows[0].optionId;
+  }
+  resetActiveToFirstNavigable() {
+    const rows = this.navigableRows;
+    this.activeId = rows.length > 0 ? rows[0].optionId : null;
+  }
+  setActiveToFirst() {
+    const rows = this.navigableRows;
+    if (rows.length === 0) return;
+    this.activeId = rows[0].optionId;
+    this.scrollActiveIntoView();
+  }
+  setActiveToLast() {
+    const rows = this.navigableRows;
+    if (rows.length === 0) return;
+    this.activeId = rows[rows.length - 1].optionId;
+    this.scrollActiveIntoView();
+  }
+  moveActive(direction) {
+    const rows = this.navigableRows;
+    if (rows.length === 0) {
+      this.activeId = null;
+      return;
+    }
+    const currentIndex = this.activeId ? rows.findIndex(r => r.optionId === this.activeId) : -1;
+    let nextIndex;
+    if (currentIndex === -1) {
+      nextIndex = direction === 1 ? 0 : rows.length - 1;
+    } else {
+      nextIndex = currentIndex + direction;
+      if (nextIndex < 0) nextIndex = rows.length - 1;
+      if (nextIndex >= rows.length) nextIndex = 0;
+    }
+    this.activeId = rows[nextIndex].optionId;
+    this.scrollActiveIntoView();
+  }
+  /** Move by `PAGE_STEP` rows; clamped (no wrap) at the list ends. */
+  movePage(direction) {
+    const rows = this.navigableRows;
+    if (rows.length === 0) {
+      this.activeId = null;
+      return;
+    }
+    const currentIndex = this.activeId ? rows.findIndex(r => r.optionId === this.activeId) : direction === 1 ? -1 : rows.length;
+    const targetIndex = currentIndex + direction * PAGE_STEP;
+    const clamped = Math.max(0, Math.min(rows.length - 1, targetIndex));
+    this.activeId = rows[clamped].optionId;
+    this.scrollActiveIntoView();
+  }
+  scrollActiveIntoView() {
+    if (!this.activeId) return;
+    const node = document.getElementById(this.activeId);
+    node?.scrollIntoView({
+      block: 'nearest'
+    });
+  }
+  // --------------------------------------------------------------------------
+  // Selection / activation
+  // --------------------------------------------------------------------------
+  activateActive() {
+    if (!this.activeId) return;
+    const row = this.navigableRows.find(r => r.optionId === this.activeId);
+    if (!row) return;
+    if (row.kind === 'create') {
+      this.fireCreate();
+      return;
+    }
+    if (row.option.isDisabled) return;
+    this.toggleOption(row.option);
+  }
+  toggleOption = option => {
+    if (option.isDisabled) return;
+    const selected = this.valueSet;
+    const nextValues = selected.has(option.value) ? this.values.filter(v => v !== option.value) : [...this.values, option.value];
+    this.emitChange(nextValues);
+    // Clear the query so the filter resets but keep the dropdown open
+    // — multi-select is explicit about staying open until the user
+    // dismisses.
+    this.query = '';
+    this.resetActiveToFirstNavigable();
+    this.inputElement?.focus({
+      preventScroll: true
+    });
+  };
+  fireCreate = () => {
+    if (!this.args.onCreate) return;
+    const query = this.query.trim();
+    if (!query) return;
+    this.args.onCreate(query);
+    this.query = '';
+    this.resetActiveToFirstNavigable();
+    this.inputElement?.focus({
+      preventScroll: true
+    });
+  };
+  removeLastChip() {
+    if (this.values.length === 0) return;
+    const nextValues = this.values.slice(0, -1);
+    this.emitChange(nextValues);
+  }
+  removeChip = value => {
+    const nextValues = this.values.filter(v => v !== value);
+    this.emitChange(nextValues);
+    this.inputElement?.focus({
+      preventScroll: true
+    });
+  };
+  handleChipRemoveMouseDown = event => {
+    event.preventDefault();
+  };
+  handleChipRemove = (value, event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    this.removeChip(value);
+  };
+  clearAll() {
+    this.emitChange([]);
+    this.inputElement?.focus({
+      preventScroll: true
+    });
+  }
+  handleClearMouseDown = event => {
+    event.preventDefault();
+  };
+  handleClearClick = event => {
+    event.preventDefault();
+    event.stopPropagation();
+    this.clearAll();
+  };
+  handleOptionMouseDown = event => {
+    event.preventDefault();
+  };
+  handleOptionMouseEnter = optionId => {
+    this.activeId = optionId;
+  };
+  emitChange(nextValues) {
+    const flat = flattenOptions(this.effectiveItems);
+    const byValue = new Map(flat.map(o => [o.value, o]));
+    const nextOptions = nextValues.map(v => byValue.get(v) ?? {
+      value: v,
+      label: v
+    });
+    this.args.onChange?.(nextValues, nextOptions);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("{{!-- Mousedown handlers preventDefault to keep focus on the input when\n    clicking chips / chevron / options \u2014 without this, clicks move\n    focus off the input and fire spurious blur events. --}}\n{{!-- template-lint-disable no-pointer-down-event-binding --}}\n<Popover @trigger=\"manual\" @open={{this.isOpen}} @onOpenChange={{this.handleOpenChange}} @dismissOnClickOutside={{true}} @dismissOnEscape={{false}} class=\"multi-combobox_e1a041f66\" data-invalid={{if @isInvalid \"true\"}} data-disabled={{if @isDisabled \"true\"}} data-open={{if this.isOpen \"true\"}} data-test-multi-combobox ...attributes as |popover|>\n  {{#if @name}}\n    {{#each this.values as |v|}}\n      <input type=\"hidden\" name={{@name}} value={{v}} data-test-multi-combobox-input-hidden />\n    {{/each}}\n  {{/if}}\n\n  {{!-- Visually-hidden aria-live region for result-count\n      announcements. See combobox.gts for rationale. --}}\n  <div class=\"multi-combobox-sr-only_e1a041f66\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" data-test-multi-combobox-announcement>{{this.announcement}}</div>\n\n  <div {{popover.registerTrigger}} class=\"multi-combobox-trigger_e1a041f66\" data-test-multi-combobox-trigger-wrapper>\n    <div class=\"multi-combobox-chips_e1a041f66\" data-test-multi-combobox-chips>\n      {{#each this.visibleChips key=\"value\" as |chip|}}\n        <span class=\"multi-combobox-chip_e1a041f66\" data-test-multi-combobox-chip data-value={{chip.value}}>\n          <span class=\"multi-combobox-chip-label_e1a041f66\">{{chip.label}}</span>\n          <button type=\"button\" class=\"multi-combobox-chip-remove_e1a041f66\" aria-label=\"Remove {{chip.label}}\" tabindex=\"-1\" {{on \"mousedown\" this.handleChipRemoveMouseDown}} {{on \"click\" (fn this.handleChipRemove chip.value)}} data-test-multi-combobox-chip-remove>\n            <Icon @icon={{X}} @size=\"sm\" />\n          </button>\n        </span>\n      {{/each}}\n      {{#if this.hasOverflow}}\n        <span class=\"multi-combobox-more_e1a041f66\" data-test-multi-combobox-more>+{{this.overflowCount}}\n          more</span>\n      {{/if}}\n\n      {{!-- template-lint-disable no-redundant-role --}}\n      <input {{this.setupInput}} {{on \"click\" this.handleInputClick}} {{on \"focus\" this.handleInputFocus}} {{on \"blur\" this.handleInputBlur}} {{on \"input\" this.handleInput}} {{on \"keydown\" this.handleInputKeyDown}} id={{@id}} type=\"text\" class=\"multi-combobox-input_e1a041f66\" role=\"combobox\" aria-autocomplete=\"list\" aria-haspopup=\"listbox\" aria-expanded={{this.ariaExpanded}} aria-controls={{this.listboxId}} aria-activedescendant={{this.activeId}} aria-required={{this.ariaRequired}} aria-invalid={{this.ariaInvalid}} aria-describedby={{@aria-describedby}} autocomplete=\"off\" spellcheck=\"false\" placeholder={{unless this.hasAnyValue @placeholder}} value={{this.query}} disabled={{@isDisabled}} data-test-multi-combobox-trigger data-test-multi-combobox-input />\n    </div>\n\n    {{#if this.showClearButton}}\n      <button type=\"button\" class=\"multi-combobox-clear_e1a041f66\" aria-label=\"Clear all\" tabindex=\"-1\" {{on \"mousedown\" this.handleClearMouseDown}} {{on \"click\" this.handleClearClick}} data-test-multi-combobox-clear>\n        <Icon @icon={{X}} @size=\"sm\" />\n      </button>\n    {{/if}}\n\n    <button type=\"button\" class=\"multi-combobox-chevron_e1a041f66\" aria-label={{if this.isOpen \"Close\" \"Open\"}} tabindex=\"-1\" disabled={{@isDisabled}} {{on \"mousedown\" this.handleChevronMouseDown}} {{on \"click\" this.handleChevronClick}} data-test-multi-combobox-chevron>\n      <Icon @icon={{ChevronDown}} @size=\"sm\" />\n    </button>\n  </div>\n\n  <popover.Content @side=\"bottom\" @align=\"start\" @sideOffset={{4}} @animation=\"scale\" class=\"multi-combobox-popover-content_e1a041f66\">\n    <div id={{this.listboxId}} role=\"listbox\" aria-multiselectable=\"true\" class=\"multi-combobox-listbox_e1a041f66\" tabindex=\"-1\" {{this.setupListbox}} data-test-multi-combobox-listbox>\n      {{#each this.renderedGroups key=\"key\" as |group|}}\n        {{#if group.label}}\n          <div role=\"group\" aria-labelledby={{group.headingId}} class=\"multi-combobox-group_e1a041f66\" data-test-multi-combobox-group>\n            <div id={{group.headingId}} class=\"multi-combobox-group-heading_e1a041f66\" data-test-multi-combobox-group-heading>{{group.label}}</div>\n            {{!-- template-lint-disable require-context-role --}}\n            {{#each group.rows key=\"optionId\" as |row|}}\n              <div id={{row.optionId}} role=\"option\" class=\"multi-combobox-option_e1a041f66\" aria-selected={{if row.isSelected \"true\" \"false\"}} aria-disabled={{if row.option.isDisabled \"true\"}} data-active={{if row.isActive \"true\"}} data-selected={{if row.isSelected \"true\"}} data-disabled={{if row.option.isDisabled \"true\"}} data-option-id={{row.optionId}} data-value={{row.option.value}} {{on \"mousedown\" this.handleOptionMouseDown}} {{on \"click\" (fn this.toggleOption row.option)}} {{on \"mouseenter\" (fn this.handleOptionMouseEnter row.optionId)}} data-test-multi-combobox-option>\n                <div class=\"multi-combobox-option-content_e1a041f66\">\n                  <span class=\"multi-combobox-option-label_e1a041f66\" data-test-multi-combobox-option-label>\n                    {{~#each (splitOnMatch row.option.label this.query) as |segment|~}}\n                      {{~#if segment.isMatch~}}\n                        <span class=\"multi-combobox-mark_e1a041f66\" data-test-multi-combobox-mark>{{segment.text}}</span>\n                      {{~else~}}\n                        {{segment.text}}\n                      {{~/if~}}\n                    {{~/each~}}\n                  </span>\n                  {{#if row.option.description}}\n                    <span class=\"multi-combobox-option-description_e1a041f66\" data-test-multi-combobox-option-description>\n                      {{~#each (splitOnMatch row.option.description this.query) as |segment|~}}\n                        {{~#if segment.isMatch~}}\n                          <span class=\"multi-combobox-mark_e1a041f66\" data-test-multi-combobox-mark>{{segment.text}}</span>\n                        {{~else~}}\n                          {{segment.text}}\n                        {{~/if~}}\n                      {{~/each~}}\n                    </span>\n                  {{/if}}\n                </div>\n                <span class=\"multi-combobox-checkbox_e1a041f66\" data-checked={{if row.isSelected \"true\"}} aria-hidden=\"true\"></span>\n              </div>\n            {{/each}}\n          </div>\n        {{else}}\n          {{#each group.rows key=\"optionId\" as |row|}}\n            <div id={{row.optionId}} role=\"option\" class=\"multi-combobox-option_e1a041f66\" aria-selected={{if row.isSelected \"true\" \"false\"}} aria-disabled={{if row.option.isDisabled \"true\"}} data-active={{if row.isActive \"true\"}} data-selected={{if row.isSelected \"true\"}} data-disabled={{if row.option.isDisabled \"true\"}} data-option-id={{row.optionId}} data-value={{row.option.value}} {{on \"mousedown\" this.handleOptionMouseDown}} {{on \"click\" (fn this.toggleOption row.option)}} {{on \"mouseenter\" (fn this.handleOptionMouseEnter row.optionId)}} data-test-multi-combobox-option>\n              <div class=\"multi-combobox-option-content_e1a041f66\">\n                <span class=\"multi-combobox-option-label_e1a041f66\" data-test-multi-combobox-option-label>\n                  {{~#each (splitOnMatch row.option.label this.query) as |segment|~}}\n                    {{~#if segment.isMatch~}}\n                      <span class=\"multi-combobox-mark_e1a041f66\" data-test-multi-combobox-mark>{{segment.text}}</span>\n                    {{~else~}}\n                      {{segment.text}}\n                    {{~/if~}}\n                  {{~/each~}}\n                </span>\n                {{#if row.option.description}}\n                  <span class=\"multi-combobox-option-description_e1a041f66\" data-test-multi-combobox-option-description>\n                    {{~#each (splitOnMatch row.option.description this.query) as |segment|~}}\n                      {{~#if segment.isMatch~}}\n                        <span class=\"multi-combobox-mark_e1a041f66\" data-test-multi-combobox-mark>{{segment.text}}</span>\n                      {{~else~}}\n                        {{segment.text}}\n                      {{~/if~}}\n                    {{~/each~}}\n                  </span>\n                {{/if}}\n              </div>\n              <span class=\"multi-combobox-checkbox_e1a041f66\" data-checked={{if row.isSelected \"true\"}} aria-hidden=\"true\"></span>\n            </div>\n          {{/each}}\n        {{/if}}\n      {{/each}}\n\n      {{#if this.createRow}}\n        <div id={{this.createRow.optionId}} role=\"option\" class=\"multi-combobox-option_e1a041f66 multi-combobox-create_e1a041f66\" aria-selected=\"false\" data-active={{if this.createRow.isActive \"true\"}} data-option-id={{this.createRow.optionId}} {{on \"mousedown\" this.handleOptionMouseDown}} {{on \"click\" this.fireCreate}} {{on \"mouseenter\" (fn this.handleOptionMouseEnter this.createRow.optionId)}} data-test-multi-combobox-create>\n          <span class=\"multi-combobox-create-icon_e1a041f66\" aria-hidden=\"true\">+</span>\n          <span class=\"multi-combobox-option-label_e1a041f66\">{{this.createRow.label}}</span>\n        </div>\n      {{/if}}\n\n      {{#if this.isLoading}}\n        <div class=\"multi-combobox-loading_e1a041f66\" data-test-multi-combobox-loading>{{this.loadingText}}</div>\n      {{else if this.showEmptyState}}\n        <div class=\"multi-combobox-empty_e1a041f66\" data-test-multi-combobox-empty>{{this.noResultsText}}</div>\n      {{/if}}\n    </div>\n  </popover.Content>\n</Popover>", {
+      strictMode: true,
+      scope: () => ({
+        Popover,
+        on,
+        fn,
+        Icon,
+        X,
+        ChevronDown,
+        splitOnMatch
+      })
+    }), this);
+  }
+}
+
+export { MultiComboBox as default };
+//# sourceMappingURL=multi-combobox.js.map

package/dist/form/multi-combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-combobox.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/form/number-field.js

@@ -167,7 +167,7 @@ class NumberField extends Component {
     }
   };
   static {
-    setComponentTemplate(precompileTemplate("<Control @isInvalid={{this.isInvalid}} @isDisabled={{@isDisabled}} @isRequired={{@isRequired}} @isReadOnly={{@isReadOnly}} @labelInfo={{@labelInfo}} data-max-width={{@maxWidth}} ...attributes as |ctrl|>\n  {{#if (has-block \"info\")}}\n    <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n      <:default>{{@label}}</:default>\n      <:info>{{yield to=\"info\"}}</:info>\n    </ctrl.Label>\n  {{else}}\n    <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n      {{@label}}\n    </ctrl.Label>\n  {{/if}}\n\n  <div class=\"number-field-input-wrapper_e9ff3bd72\" data-invalid={{if this.isInvalid \"true\" \"false\"}} data-disabled={{if @isDisabled \"true\" \"false\"}} data-readonly={{if @isReadOnly \"true\" \"false\"}} data-at-min={{if this.isAtMin \"true\" \"false\"}} data-at-max={{if this.isAtMax \"true\" \"false\"}} data-has-stepper={{if this.showStepper \"true\" \"false\"}} data-test-number-field-wrapper>\n    {{#if @prefix}}\n      <span class=\"number-field-affix_e9ff3bd72 number-field-prefix_e9ff3bd72\" data-test-number-field-prefix>\n        {{@prefix}}\n      </span>\n    {{/if}}\n\n    {{!-- template-lint-disable no-redundant-role --}}\n    <input id={{ctrl.id}} class=\"number-field-input_e9ff3bd72\" type=\"text\" inputmode={{this.inputMode}} role=\"spinbutton\" name={{@name}} value={{this.displayValue}} placeholder={{@placeholder}} disabled={{@isDisabled}} readonly={{@isReadOnly}} aria-invalid={{if this.isInvalid \"true\"}} aria-required={{if @isRequired \"true\"}} aria-describedby={{this.getAriaDescribedBy ctrl.id}} aria-valuenow={{this.ariaValueNow}} aria-valuemin={{this.ariaValueMin}} aria-valuemax={{this.ariaValueMax}} {{on \"input\" this.handleInput}} {{on \"blur\" this.handleBlur}} {{on \"focus\" this.handleFocus}} {{on \"keydown\" this.handleKeyDown}} data-test-number-field-input />\n\n    {{#if @suffix}}\n      <span class=\"number-field-affix_e9ff3bd72 number-field-suffix_e9ff3bd72\" data-test-number-field-suffix>\n        {{@suffix}}\n      </span>\n    {{/if}}\n\n    {{#if this.showStepper}}\n      <div class=\"number-field-stepper_e9ff3bd72\" data-test-number-field-stepper>\n        <button type=\"button\" class=\"number-field-stepper-button_e9ff3bd72\" tabindex=\"-1\" aria-label=\"Increase\" disabled={{if @isDisabled true (if @isReadOnly true this.isAtMax)}} {{on \"click\" this.increment}} data-test-number-field-increment>\n          <Icon @icon={{ChevronUp}} @size=\"xs\" />\n        </button>\n        <button type=\"button\" class=\"number-field-stepper-button_e9ff3bd72\" tabindex=\"-1\" aria-label=\"Decrease\" disabled={{if @isDisabled true (if @isReadOnly true this.isAtMin)}} {{on \"click\" this.decrement}} data-test-number-field-decrement>\n          <Icon @icon={{ChevronDown}} @size=\"xs\" />\n        </button>\n      </div>\n    {{/if}}\n  </div>\n\n  {{#if @helpText}}\n    <ctrl.HelpText>{{@helpText}}</ctrl.HelpText>\n  {{/if}}\n\n  {{#if @error}}\n    <ctrl.ErrorMessage>{{@error}}</ctrl.ErrorMessage>\n  {{/if}}\n</Control>", {
+    setComponentTemplate(precompileTemplate("<Control @isInvalid={{this.isInvalid}} @isDisabled={{@isDisabled}} @isRequired={{@isRequired}} @isReadOnly={{@isReadOnly}} @labelInfo={{@labelInfo}} @optionalIndicator={{@optionalIndicator}} data-max-width={{@maxWidth}} ...attributes as |ctrl|>\n  {{#if (has-block \"info\")}}\n    <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n      <:default>{{@label}}</:default>\n      <:info>{{yield to=\"info\"}}</:info>\n    </ctrl.Label>\n  {{else}}\n    <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n      {{@label}}\n    </ctrl.Label>\n  {{/if}}\n\n  <div class=\"number-field-input-wrapper_e9ff3bd72\" data-invalid={{if this.isInvalid \"true\" \"false\"}} data-disabled={{if @isDisabled \"true\" \"false\"}} data-readonly={{if @isReadOnly \"true\" \"false\"}} data-at-min={{if this.isAtMin \"true\" \"false\"}} data-at-max={{if this.isAtMax \"true\" \"false\"}} data-has-stepper={{if this.showStepper \"true\" \"false\"}} data-test-number-field-wrapper>\n    {{#if @prefix}}\n      <span class=\"number-field-affix_e9ff3bd72 number-field-prefix_e9ff3bd72\" data-test-number-field-prefix>\n        {{@prefix}}\n      </span>\n    {{/if}}\n\n    {{!-- template-lint-disable no-redundant-role --}}\n    <input id={{ctrl.id}} class=\"number-field-input_e9ff3bd72\" type=\"text\" inputmode={{this.inputMode}} role=\"spinbutton\" name={{@name}} value={{this.displayValue}} placeholder={{@placeholder}} disabled={{@isDisabled}} readonly={{@isReadOnly}} aria-invalid={{if this.isInvalid \"true\"}} aria-required={{if @isRequired \"true\"}} aria-describedby={{this.getAriaDescribedBy ctrl.id}} aria-valuenow={{this.ariaValueNow}} aria-valuemin={{this.ariaValueMin}} aria-valuemax={{this.ariaValueMax}} {{on \"input\" this.handleInput}} {{on \"blur\" this.handleBlur}} {{on \"focus\" this.handleFocus}} {{on \"keydown\" this.handleKeyDown}} data-test-number-field-input />\n\n    {{#if @suffix}}\n      <span class=\"number-field-affix_e9ff3bd72 number-field-suffix_e9ff3bd72\" data-test-number-field-suffix>\n        {{@suffix}}\n      </span>\n    {{/if}}\n\n    {{#if this.showStepper}}\n      <div class=\"number-field-stepper_e9ff3bd72\" data-test-number-field-stepper>\n        <button type=\"button\" class=\"number-field-stepper-button_e9ff3bd72\" tabindex=\"-1\" aria-label=\"Increase\" disabled={{if @isDisabled true (if @isReadOnly true this.isAtMax)}} {{on \"click\" this.increment}} data-test-number-field-increment>\n          <Icon @icon={{ChevronUp}} @size=\"xs\" />\n        </button>\n        <button type=\"button\" class=\"number-field-stepper-button_e9ff3bd72\" tabindex=\"-1\" aria-label=\"Decrease\" disabled={{if @isDisabled true (if @isReadOnly true this.isAtMin)}} {{on \"click\" this.decrement}} data-test-number-field-decrement>\n          <Icon @icon={{ChevronDown}} @size=\"xs\" />\n        </button>\n      </div>\n    {{/if}}\n  </div>\n\n  {{#if @helpText}}\n    <ctrl.HelpText>{{@helpText}}</ctrl.HelpText>\n  {{/if}}\n\n  {{#if @error}}\n    <ctrl.ErrorMessage>{{@error}}</ctrl.ErrorMessage>\n  {{/if}}\n</Control>", {
       strictMode: true,
       scope: () => ({
         Control,

package/dist/form/select-field.js

@@ -24,7 +24,7 @@ class SelectField extends Component {
     return parts.length > 0 ? parts.join(' ') : undefined;
   };
   static {
-    setComponentTemplate(precompileTemplate("<Control @isInvalid={{this.isInvalid}} @isDisabled={{@isDisabled}} @isRequired={{@isRequired}} @labelInfo={{@labelInfo}} ...attributes as |ctrl|>\n  {{#if (has-block \"info\")}}\n    <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n      <:default>{{@label}}</:default>\n      <:info>{{yield to=\"info\"}}</:info>\n    </ctrl.Label>\n  {{else}}\n    <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n      {{@label}}\n    </ctrl.Label>\n  {{/if}}\n\n  <Select @id={{ctrl.id}} @name={{@name}} @value={{@value}} @placeholder={{@placeholder}} @isDisabled={{@isDisabled}} @isInvalid={{this.isInvalid}} @isRequired={{@isRequired}} @aria-describedby={{this.getAriaDescribedBy ctrl.id}} @onChange={{@onChange}} @onBlur={{@onBlur}} @onFocus={{@onFocus}} data-test-select-field as |select|>\n    {{yield (hash Option=select.Option OptionGroup=select.OptionGroup)}}\n  </Select>\n\n  {{#if @helpText}}\n    <ctrl.HelpText>{{@helpText}}</ctrl.HelpText>\n  {{/if}}\n\n  {{#if @error}}\n    <ctrl.ErrorMessage>{{@error}}</ctrl.ErrorMessage>\n  {{/if}}\n</Control>", {
+    setComponentTemplate(precompileTemplate("<Control @isInvalid={{this.isInvalid}} @isDisabled={{@isDisabled}} @isRequired={{@isRequired}} @labelInfo={{@labelInfo}} @optionalIndicator={{@optionalIndicator}} ...attributes as |ctrl|>\n  {{#if (has-block \"info\")}}\n    <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n      <:default>{{@label}}</:default>\n      <:info>{{yield to=\"info\"}}</:info>\n    </ctrl.Label>\n  {{else}}\n    <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n      {{@label}}\n    </ctrl.Label>\n  {{/if}}\n\n  <Select @id={{ctrl.id}} @name={{@name}} @value={{@value}} @placeholder={{@placeholder}} @isDisabled={{@isDisabled}} @isInvalid={{this.isInvalid}} @isRequired={{@isRequired}} @aria-describedby={{this.getAriaDescribedBy ctrl.id}} @onChange={{@onChange}} @onBlur={{@onBlur}} @onFocus={{@onFocus}} data-test-select-field as |select|>\n    {{yield (hash Option=select.Option OptionGroup=select.OptionGroup)}}\n  </Select>\n\n  {{#if @helpText}}\n    <ctrl.HelpText>{{@helpText}}</ctrl.HelpText>\n  {{/if}}\n\n  {{#if @error}}\n    <ctrl.ErrorMessage>{{@error}}</ctrl.ErrorMessage>\n  {{/if}}\n</Control>", {
       strictMode: true,
       scope: () => ({
         Control,