@visitwonders/assembly 0.10.1 → 0.11.0

package/dist/form/combobox.js

@@ -0,0 +1,612 @@
+import "./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. Matches the WAI-ARIA
+ *  listbox pattern's "move by page" convention. */
+const PAGE_STEP = 10;
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+class ComboBox 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); // Async-mode state. Only used when @onSearch is provided.
+  static {
+    g(this.prototype, "isLoadingInternal", [tracked], function () {
+      return false;
+    });
+  }
+  #isLoadingInternal = (i(this, "isLoadingInternal"), void 0);
+  searchSeq = 0;
+  searchTimer = null;
+  inputElement = null;
+  listboxElement = null;
+  componentId = `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;
+  }
+  /**
+  * Source of truth for what's available to render. In async mode, we use
+  * the latest remote payload once it's resolved; before that, we fall
+  * back to `@items` so the dropdown isn't empty on first open.
+  */
+  get effectiveItems() {
+    if (this.isAsync && this.remoteItems !== null) {
+      return this.remoteItems;
+    }
+    return this.args.items ?? [];
+  }
+  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
+    }];
+  }
+  /**
+  * Per-group filtered output for rendering. In async mode we trust the
+  * server response and skip the local substring filter; otherwise we
+  * apply case-insensitive substring on `label` + `description`.
+  * Empty groups (no matches) are dropped so we don't render bare
+  * headings.
+  */
+  get renderedGroups() {
+    const trimmed = this.query.trim().toLowerCase();
+    const skipLocalFilter = this.isAsync || !trimmed;
+    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: this.args.value === option.value
+        };
+      });
+      result.push({
+        key: group.headingId ?? 'ungrouped',
+        label: group.label,
+        headingId: group.headingId,
+        rows
+      });
+    }
+    return result;
+  }
+  /**
+  * Flat list of option rows used for keyboard navigation. Excludes
+  * disabled options and group headings (headings aren't selectable).
+  * The create row, if visible, is appended at the end.
+  */
+  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);
+  }
+  // --------------------------------------------------------------------------
+  // Create row
+  // --------------------------------------------------------------------------
+  get isCreateVisible() {
+    if (!this.args.isCreatable) return false;
+    const trimmed = this.query.trim();
+    if (!trimmed) return false;
+    // Suppress when the query exactly matches an existing label
+    // (case-insensitive). Searches across all options, even ones the
+    // current filter would hide — duplicate-by-label check is global.
+    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; // stale, discard
+      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;
+        // Filtered list changed — re-anchor the active row.
+        this.resetActiveToFirstNavigable();
+      }
+    }
+  }
+  // --------------------------------------------------------------------------
+  // Selection display
+  // --------------------------------------------------------------------------
+  get selectedOption() {
+    if (this.args.value == null) return null;
+    const flat = flattenOptions(this.effectiveItems);
+    return flat.find(opt => opt.value === this.args.value) ?? null;
+  }
+  /**
+  * What the input renders as its `value` attribute.
+  *
+  * - When the dropdown is open, we surface the user's typed query so
+  *   typing feels like editing a normal text field and the filter
+  *   reflects what they see.
+  * - When closed, we surface the selected option's label (or empty
+  *   string if nothing's selected) so the input acts as a read-only
+  *   display of the current value.
+  *
+  * The placeholder argument shows when this is empty.
+  */
+  get displayValue() {
+    if (this.isOpen) return this.query;
+    return this.selectedOption?.label ?? '';
+  }
+  get hasValue() {
+    return this.args.value != null && this.args.value !== '';
+  }
+  get isClearable() {
+    return this.args.isClearable ?? true;
+  }
+  get showClearButton() {
+    return this.isClearable && this.hasValue && !this.args.isDisabled;
+  }
+  get noResultsText() {
+    return this.args.noResultsText ?? 'No results';
+  }
+  /**
+  * Text for the visually-hidden aria-live region. Screen-reader users
+  * need feedback on how their typing is shaping the result set — this
+  * announces counts and empty-state without showing anything visible.
+  *
+  * The region renders only when the dropdown is open so we don't
+  * announce stale counts after the user closes it.
+  */
+  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 (which is also 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 => {
+    if (!this.isOpen) {
+      // When closed, certain keys open the dropdown.
+      switch (event.key) {
+        case 'ArrowDown':
+        case 'ArrowUp':
+          event.preventDefault();
+          this.openDropdown();
+          return;
+        case 'Enter':
+          // Don't preventDefault — let form submission happen if appropriate.
+          return;
+        case 'Escape':
+          if (this.showClearButton) {
+            event.preventDefault();
+            this.clearSelection();
+          }
+          return;
+        default:
+          return;
+      }
+    }
+    // Open: full keyboard nav.
+    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':
+        // Tab is navigational. Close without committing.
+        this.closeDropdown();
+        break;
+    }
+  };
+  handleChevronMouseDown = event => {
+    // Stop the input from losing focus when the chevron is clicked.
+    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;
+    // When a user opens via click/keyboard with no query, start fresh.
+    // When opening because the user typed (handleInput), the query is
+    // already set — preserve it and just anchor active to first match.
+    if (opts.resetActive !== false) {
+      this.query = '';
+      this.resetActiveToInitial();
+    } else {
+      this.resetActiveToFirstNavigable();
+    }
+    this.args.onOpen?.();
+  };
+  closeDropdown = () => {
+    // Guard so we don't fire onClose repeatedly — closeDropdown is
+    // called from click-outside, Escape, Tab, selection, and the
+    // Popover's own open-change handler, any of which may fire 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;
+    }
+    if (this.args.value != null) {
+      const selected = rows.find(r => r.kind === 'option' && r.option.value === this.args.value);
+      if (selected) {
+        this.activeId = selected.optionId;
+        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 the active row by `PAGE_STEP` items. Unlike `moveActive`,
+  * PageUp/PageDown don't wrap — they clamp to the first/last row so
+  * the user always lands on a valid entry at the 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;
+    // `activeId` is a unique element ID, so getElementById is the
+    // fastest + most robust lookup — works even if listboxElement
+    // hasn't registered yet.
+    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.selectOption(row.option);
+  }
+  selectOption = option => {
+    if (option.isDisabled) return;
+    this.args.onChange?.(option.value, option);
+    this.closeDropdown();
+    this.inputElement?.focus({
+      preventScroll: true
+    });
+  };
+  fireCreate = () => {
+    if (!this.args.onCreate) return;
+    const query = this.query.trim();
+    if (!query) return;
+    this.args.onCreate(query);
+    // Clear the input so the consumer-rendered new option becomes visible
+    // immediately if they fold it into items synchronously. Don't close —
+    // the consumer may want the dropdown to stay open for confirmation.
+    this.query = '';
+    this.resetActiveToFirstNavigable();
+  };
+  handleOptionMouseDown = event => {
+    // Prevent the input from losing focus when an option is clicked.
+    event.preventDefault();
+  };
+  handleOptionMouseEnter = optionId => {
+    this.activeId = optionId;
+  };
+  handleClearMouseDown = event => {
+    event.preventDefault();
+  };
+  handleClearClick = event => {
+    event.preventDefault();
+    event.stopPropagation();
+    this.clearSelection();
+  };
+  clearSelection() {
+    this.args.onChange?.(null, null);
+    this.inputElement?.focus({
+      preventScroll: true
+    });
+  }
+  static {
+    setComponentTemplate(precompileTemplate("{{!-- Several elements bind to mousedown to call preventDefault \u2014 this is\n    the canonical pattern for keeping focus on the input when the user\n    clicks chevron/clear/option (the click handler runs after, with\n    focus intact, avoiding spurious blur events). Click handlers are\n    also bound, so keyboard activation still works. --}}\n{{!-- template-lint-disable no-pointer-down-event-binding --}}\n<Popover @trigger=\"manual\" @open={{this.isOpen}} @onOpenChange={{this.handleOpenChange}} @dismissOnClickOutside={{true}} @dismissOnEscape={{false}} class=\"combobox_e2657ea63\" data-invalid={{if @isInvalid \"true\"}} data-disabled={{if @isDisabled \"true\"}} data-open={{if this.isOpen \"true\"}} data-test-combobox ...attributes as |popover|>\n  {{#if @name}}\n    <input type=\"hidden\" name={{@name}} value={{if @value @value \"\"}} data-test-combobox-input-hidden />\n  {{/if}}\n\n  {{!-- Visually-hidden live region so screen readers learn how the\n      result set changes as the user types. aria-atomic makes the\n      SR read the whole announcement on each update rather than\n      splicing deltas. --}}\n  <div class=\"combobox-sr-only_e2657ea63\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" data-test-combobox-announcement>{{this.announcement}}</div>\n\n  <div class=\"combobox-trigger_e2657ea63\" data-test-combobox-trigger-wrapper>\n    {{!-- WAI-ARIA \"Editable Combobox With List Autocomplete\" pattern:\n        role=\"combobox\" lives on the input itself; the input IS the\n        trigger and the search field. The data-test-combobox-trigger\n        and data-test-combobox-input hooks both point at the input\n        so existing test selectors and the documented input selector\n        both work. --}}\n    {{!-- template-lint-disable no-redundant-role --}}\n    <input {{popover.registerTrigger}} {{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=\"combobox-input_e2657ea63\" 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={{@placeholder}} value={{this.displayValue}} disabled={{@isDisabled}} data-test-combobox-trigger data-test-combobox-input />\n\n    {{#if this.showClearButton}}\n      <button type=\"button\" class=\"combobox-clear_e2657ea63\" aria-label=\"Clear selection\" tabindex=\"-1\" {{on \"mousedown\" this.handleClearMouseDown}} {{on \"click\" this.handleClearClick}} data-test-combobox-clear>\n        <Icon @icon={{X}} @size=\"sm\" />\n      </button>\n    {{/if}}\n\n    <button type=\"button\" class=\"combobox-chevron_e2657ea63\" aria-label={{if this.isOpen \"Close\" \"Open\"}} tabindex=\"-1\" disabled={{@isDisabled}} {{on \"mousedown\" this.handleChevronMouseDown}} {{on \"click\" this.handleChevronClick}} data-test-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=\"combobox-popover-content_e2657ea63\">\n    <div id={{this.listboxId}} role=\"listbox\" class=\"combobox-listbox_e2657ea63\" tabindex=\"-1\" {{this.setupListbox}} data-test-combobox-listbox>\n      {{#each this.renderedGroups key=\"key\" as |group|}}\n        {{#if group.label}}\n          <div role=\"group\" aria-labelledby={{group.headingId}} class=\"combobox-group_e2657ea63\" data-test-combobox-group>\n            <div id={{group.headingId}} class=\"combobox-group-heading_e2657ea63\" data-test-combobox-group-heading>{{group.label}}</div>\n            {{!-- Per WAI-ARIA, listbox > group > option is a valid\n                hierarchy for grouped listboxes. --}}\n            {{!-- template-lint-disable require-context-role --}}\n            {{#each group.rows key=\"optionId\" as |row|}}\n              <div id={{row.optionId}} role=\"option\" class=\"combobox-option_e2657ea63\" 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.selectOption row.option)}} {{on \"mouseenter\" (fn this.handleOptionMouseEnter row.optionId)}} data-test-combobox-option>\n                <div class=\"combobox-option-content_e2657ea63\">\n                  <span class=\"combobox-option-label_e2657ea63\" data-test-combobox-option-label>\n                    {{~#each (splitOnMatch row.option.label this.query) as |segment|~}}\n                      {{~#if segment.isMatch~}}\n                        <span class=\"combobox-mark_e2657ea63\" data-test-combobox-mark>{{segment.text}}</span>\n                      {{~else~}}\n                        {{segment.text}}\n                      {{~/if~}}\n                    {{~/each~}}\n                  </span>\n                  {{#if row.option.description}}\n                    <span class=\"combobox-option-description_e2657ea63\" data-test-combobox-option-description>\n                      {{~#each (splitOnMatch row.option.description this.query) as |segment|~}}\n                        {{~#if segment.isMatch~}}\n                          <span class=\"combobox-mark_e2657ea63\" data-test-combobox-mark>{{segment.text}}</span>\n                        {{~else~}}\n                          {{segment.text}}\n                        {{~/if~}}\n                      {{~/each~}}\n                    </span>\n                  {{/if}}\n                </div>\n                {{#if row.isSelected}}\n                  <span class=\"combobox-option-check_e2657ea63\" aria-hidden=\"true\"></span>\n                {{/if}}\n              </div>\n            {{/each}}\n          </div>\n        {{else}}\n          {{#each group.rows key=\"optionId\" as |row|}}\n            <div id={{row.optionId}} role=\"option\" class=\"combobox-option_e2657ea63\" 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.selectOption row.option)}} {{on \"mouseenter\" (fn this.handleOptionMouseEnter row.optionId)}} data-test-combobox-option>\n              <div class=\"combobox-option-content_e2657ea63\">\n                <span class=\"combobox-option-label_e2657ea63\" data-test-combobox-option-label>\n                  {{~#each (splitOnMatch row.option.label this.query) as |segment|~}}\n                    {{~#if segment.isMatch~}}\n                      <span class=\"combobox-mark_e2657ea63\" data-test-combobox-mark>{{segment.text}}</span>\n                    {{~else~}}\n                      {{segment.text}}\n                    {{~/if~}}\n                  {{~/each~}}\n                </span>\n                {{#if row.option.description}}\n                  <span class=\"combobox-option-description_e2657ea63\" data-test-combobox-option-description>\n                    {{~#each (splitOnMatch row.option.description this.query) as |segment|~}}\n                      {{~#if segment.isMatch~}}\n                        <span class=\"combobox-mark_e2657ea63\" data-test-combobox-mark>{{segment.text}}</span>\n                      {{~else~}}\n                        {{segment.text}}\n                      {{~/if~}}\n                    {{~/each~}}\n                  </span>\n                {{/if}}\n              </div>\n              {{#if row.isSelected}}\n                <span class=\"combobox-option-check_e2657ea63\" aria-hidden=\"true\"></span>\n              {{/if}}\n            </div>\n          {{/each}}\n        {{/if}}\n      {{/each}}\n\n      {{#if this.createRow}}\n        <div id={{this.createRow.optionId}} role=\"option\" class=\"combobox-option_e2657ea63 combobox-create_e2657ea63\" 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-combobox-create>\n          <span class=\"combobox-create-icon_e2657ea63\" aria-hidden=\"true\">+</span>\n          <span class=\"combobox-option-label_e2657ea63\">{{this.createRow.label}}</span>\n        </div>\n      {{/if}}\n\n      {{#if this.isLoading}}\n        <div class=\"combobox-loading_e2657ea63\" data-test-combobox-loading>{{this.loadingText}}</div>\n      {{else if this.showEmptyState}}\n        <div class=\"combobox-empty_e2657ea63\" data-test-combobox-empty>{{this.noResultsText}}</div>\n      {{/if}}\n    </div>\n  </popover.Content>\n</Popover>", {
+      strictMode: true,
+      scope: () => ({
+        Popover,
+        on,
+        Icon,
+        X,
+        ChevronDown,
+        fn,
+        splitOnMatch
+      })
+    }), this);
+  }
+}
+
+export { ComboBox as default };
+//# sourceMappingURL=combobox.js.map

package/dist/form/combobox.js.map

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

package/dist/form/{display-field-css-890d9be4b5da61613fd017071f330735.css → display-field-css-502236a2343d47e31e52bdb93a769ca1.css}

@@ -1,4 +1,4 @@
-/* <inline>/src/form/display-field-css-890d9be4b5da61613fd017071f330735.css */
+/* <inline>/src/form/display-field-css-502236a2343d47e31e52bdb93a769ca1.css */
 
   .display-field_e03c8ad71 {
     display: flex;
@@ -22,7 +22,7 @@
   }
 
   .display-field-label_e03c8ad71::after {
-    content: ':';
+    content: ":";
   }
 
   .display-field-value_e03c8ad71 {

package/dist/form/display-field.js

@@ -1,4 +1,4 @@
-import "./display-field-css-890d9be4b5da61613fd017071f330735.css"
+import "./display-field-css-502236a2343d47e31e52bdb93a769ca1.css"
 import Component from '@glimmer/component';
 import { guidFor } from '@ember/object/internals';
 import Label from './label.js';

package/dist/form/index.js

@@ -1,6 +1,10 @@
 export { default as Calendar } from './calendar.js';
 export { default as Checkbox } from './checkbox.js';
 export { default as CheckboxGroup } from './checkbox-group.js';
+export { default as ComboBox } from './combobox.js';
+export { default as ComboBoxField } from './combobox-field.js';
+export { default as MultiComboBox } from './multi-combobox.js';
+export { default as MultiComboBoxField } from './multi-combobox-field.js';
 export { default as Control } from './control.js';
 export { default as CountrySelect } from './country-select.js';
 export { default as CountrySelectField } from './country-select-field.js';

package/dist/form/index.js.map

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