@ember-eui/core 14.1.4 → 16.0.0

package/dist/components/eui-combo-box/options.js

@@ -1,21 +1,51 @@
 import { cached } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { modifier } from 'ember-modifier';
+import { attachToFocusTraps } from '../../-private/focus-trap-registry.js';
 import { service } from '@ember/service';
 import { htmlSafe } from '@ember/template';
 import { VerticalCollection } from '@html-next/vertical-collection';
 import EmberPowerSelectOptions from 'ember-power-select/components/power-select/options';
-import emberPowerSelectIsEqual from 'ember-power-select/helpers/ember-power-select-is-equal';
 import emberPowerSelectIsGroup from 'ember-power-select/helpers/ember-power-select-is-group';
-import { not, and, eq } from 'ember-truth-helpers';
-import classNames from '../../helpers/class-names.js';
+import { not, and, eq, or } from 'ember-truth-helpers';
+import { getEuiThemeContext } from '../../utils/emotion/consume.js';
+import { isComboBoxOptionChecked, comboBoxOptionLabel, comboBoxBoxReset } from '../../utils/eui/combo-box.js';
+import { dV as euiComboBoxOptionListStyles, p as euiListItemLayoutStyles } from '../../styles.generated-SYAxYhey.js';
+import { useEuiBorealisStyles, euiClass } from '../../utils/eui/styles.js';
 import EuiBadge from '../eui-badge.js';
 import EuiFlexGroup from '../eui-flex-group.js';
 import EuiFlexItem from '../eui-flex-item.js';
+import EuiIcon from '../eui-icon.js';
 import EuiLoadingSpinner from '../eui-loading-spinner.js';
-import EuiTextComponent from '../eui-text.js';
+import EuiText from '../eui-text.js';
+import EuiToolTip from '../eui-tool-tip.js';
+import EuiComboBoxNodeComponent from './node.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
+import templateOnly from '@ember/component/template-only';
 import { g, i, n } from 'decorator-transforms/runtime-esm';
 
+const TOOLTIP_ANCHOR_CSS = {
+  inlineSize: '100%'
+};
+/**
+ * @private Upstream EuiListItemLayout's internal tooltip: wraps the row
+ * content in an EuiToolTip when the option has `toolTipContent`, shown on
+ * hover and while the option is highlighted (keyboard).
+ */
+const MaybeToolTip = setComponentTemplate(precompileTemplate("{{#if @content}}\n  <EuiToolTip @id={{@id}} @content={{@content}} @title={{@props.title}} @position={{@props.position}} @delay={{@props.delay}} @offset={{@props.offset}} @className={{@props.className}} @css={{@props.css}} @anchorClassName={{@props.anchorClassName}} @anchorCss={{TOOLTIP_ANCHOR_CSS}} @isShown={{@isShown}}>{{yield}}</EuiToolTip>\n{{else}}\n  {{yield}}\n{{/if}}", {
+  strictMode: true,
+  scope: () => ({
+    EuiToolTip,
+    TOOLTIP_ANCHOR_CSS
+  })
+}), templateOnly());
+/**
+ * @private EuiComboBox's options list: virtualized, with groups. Extends
+ * ember-power-select's options component. Rows follow upstream
+ * EuiComboBoxOptionsList: `EuiListItemLayout` options (`role="option"`)
+ * and `euiComboBoxTitle` group labels.
+ */
 class EuiComboBoxOptionsComponent extends EmberPowerSelectOptions {
   static {
     g(this.prototype, "euiConfig", [service]);
@@ -26,11 +56,71 @@ class EuiComboBoxOptionsComponent extends EmberPowerSelectOptions {
   * virtualized list; `data-option-index` is an index in it).
   */
   get flattedOptions() {
-    return (this.args.options ?? []).flatMap(option => emberPowerSelectIsGroup(option) ? [option, ...option.options] : [option]);
+    return this.flattened.items;
   }
   static {
     n(this.prototype, "flattedOptions", [cached]);
   }
+  get flattened() {
+    const items = [];
+    const rows = [];
+    let count = 0;
+    (this.args.options ?? []).forEach((option, i) => {
+      if (emberPowerSelectIsGroup(option)) {
+        items.push(option);
+        rows.push({
+          path: `${i}`,
+          position: 0
+        });
+        (option.options ?? []).forEach((child, j) => {
+          items.push(child);
+          rows.push({
+            path: `${i}.${j}`,
+            position: emberPowerSelectIsGroup(child) ? 0 : ++count
+          });
+        });
+      } else {
+        items.push(option);
+        rows.push({
+          path: `${i}`,
+          position: ++count
+        });
+      }
+    });
+    return {
+      items,
+      rows,
+      count
+    };
+  }
+  static {
+    n(this.prototype, "flattened", [cached]);
+  }
+  get hasGroups() {
+    return this.flattened.rows.some(row => row.position === 0);
+  }
+  /**
+  * ember-power-select attaches its mouse/touch handlers to the first list
+  * element only. Ours is replaced while `@search` loads (the list gives way
+  * to the loading message), so the new list had no handlers and clicking an
+  * option did nothing. Attach to every list element and detach on teardown.
+  */
+  setupHandlers = modifier(element => {
+    // ember-power-select's handler methods are private in its types
+    const base = this;
+    base._listElement = element;
+    base._addHandlers(element);
+    // the portalled list counts as inside the focus trap (modal, flyout,
+    // popover) the combo box is in
+    const content = element.closest('.ember-basic-dropdown-content');
+    const trigger = document.querySelector(`[data-ebd-id="${this.args.select.uniqueId}-trigger"]`);
+    const leaveFocusTraps = content ? attachToFocusTraps(trigger, content) : () => {};
+    return () => {
+      leaveFocusTraps();
+      base._removeHandlers(element);
+      if (base._listElement === element) base._listElement = undefined;
+    };
+  });
   _optionFromIndex(index) {
     const parts = index.split('.');
     let option = this.flattedOptions[parseInt(parts[0], 10)];
@@ -42,28 +132,184 @@ class EuiComboBoxOptionsComponent extends EmberPowerSelectOptions {
   get configRowHeight() {
     return this.euiConfig.getConfig('euiComboBoxOptionsHeight') || 29;
   }
+  /** `@rowHeight="auto"`: rows wrap their text, nothing is virtualized. */
+  get isAuto() {
+    //@ts-expect-error `rowHeight` is curried by EuiComboBox
+    return this.args.rowHeight === 'auto';
+  }
   get rowHeight() {
-    //@ts-expect-error
-    return this.args.rowHeight ?? this.configRowHeight;
+    //@ts-expect-error `rowHeight` is curried by EuiComboBox
+    const rowHeight = this.args.rowHeight;
+    return rowHeight === 'auto' || rowHeight == null ? this.configRowHeight : rowHeight;
   }
   get rowHeightString() {
-    return htmlSafe(`height:${this.rowHeight}px;`);
+    return this.isAuto ? undefined : htmlSafe(`height:${this.rowHeight}px;`);
+  }
+  get staticHeight() {
+    return !this.hasGroups && !this.isAuto;
+  }
+  get singleSelection() {
+    //@ts-expect-error `singleSelection` is curried by EuiComboBox
+    return Boolean(this.args.singleSelection);
+  }
+  /**
+  * Single selection's check mark (upstream: same label and key). In
+  * multiple selection the selected options are not listed.
+  */
+  isChecked = option => this.singleSelection && isComboBoxOptionChecked(option,
+  //@ts-expect-error `selectedOptions` is curried by EuiComboBox
+  this.args.selectedOptions,
+  //@ts-expect-error `searchField` is curried by EuiComboBox
+  this.args.searchField);
+  /** The list keeps the focus in the input (upstream). */
+  keepFocus = event => event.preventDefault();
+  /** Upstream `aria-multiselectable` only for multiple selection. */
+  get ariaMultiselectable() {
+    return this.singleSelection ? undefined : 'true';
+  }
+  /** Upstream `getListItemSize`: group labels after the first get 16px more. */
+  groupStyle = index => this.isAuto ? undefined : htmlSafe(`height:${index > 0 ? this.rowHeight + 16 : this.rowHeight}px;`);
+  optionId = index => `${this.args.select.uniqueId}-${this.flattened.rows[index]?.path ?? index}`;
+  position = index => this.flattened.rows[index]?.position;
+  /**
+  * Upstream text `title`: the option's own, else its label while it is
+  * truncated by CSS (not searching, no `truncationProps`, no
+  * `rowHeight="auto"`) and has no tooltip.
+  */
+  titleFor = option => {
+    const record = option && typeof option === 'object' ? option : undefined;
+    if (record && 'title' in record) {
+      return record.title;
+    }
+    if (this.args.select.searchText ||
+    //@ts-expect-error `truncationProps` is curried by EuiComboBox
+    this.args.truncationProps || record?.truncationProps || record?.toolTipContent || this.isAuto) {
+      return undefined;
+    }
+    //@ts-expect-error `searchField` is curried by EuiComboBox
+    return comboBoxOptionLabel(option, this.args.searchField) || undefined;
+  };
+  /** Upstream: no tooltip on disabled options. */
+  toolTipFor = option => {
+    if (this.isDisabled(option)) return undefined;
+    return option?.toolTipContent;
+  };
+  toolTipId = index => `${this.optionId(index)}-tooltip`;
+  isDisabled = option => Boolean(option && typeof option === 'object' && option.disabled === true);
+  get listStyles() {
+    return useEuiBorealisStyles(getEuiThemeContext(this), euiComboBoxOptionListStyles);
+  }
+  /**
+  * The listbox: upstream `.euiComboBoxOptionsList` (max height 200px) and
+  * its virtualized list (scrolls, with overflow shadows). Positioned so
+  * option offsets (keyboard scrolling) are relative to it.
+  */
+  static {
+    n(this.prototype, "listStyles", [cached]);
+  }
+  get listClass() {
+    const context = getEuiThemeContext(this);
+    const styles = this.listStyles;
+    return euiClass(context, comboBoxBoxReset, styles.euiComboBoxOptionList, this.isAuto ? styles.hasRowHeightAuto : styles.euiComboBoxOptionList__virtualization, {
+      position: 'relative',
+      outline: 'none'
+    });
+  }
+  /** Loading message: the same list wrapper around an upstream empty state. */
+  static {
+    n(this.prototype, "listClass", [cached]);
+  }
+  get emptyClass() {
+    const context = getEuiThemeContext(this);
+    const styles = this.listStyles;
+    return euiClass(context, comboBoxBoxReset, styles.euiComboBoxOptionList, styles.euiComboBoxOptionsList__empty);
+  }
+  static {
+    n(this.prototype, "emptyClass", [cached]);
+  }
+  get layoutStyles() {
+    return useEuiBorealisStyles(getEuiThemeContext(this), euiListItemLayoutStyles);
+  }
+  /**
+  * Upstream EuiListItemLayout styles per state, composed once per theme
+  * and state combination (interactive styles only while enabled).
+  */
+  static {
+    n(this.prototype, "layoutStyles", [cached]);
+  }
+  get optionClassFor() {
+    const context = getEuiThemeContext(this);
+    const s = this.layoutStyles;
+    const cache = new Map();
+    return (focused, selected, disabled) => {
+      const key = `${focused}${selected}${disabled}`;
+      let value = cache.get(key);
+      if (!value) {
+        value = euiClass(context, {
+          boxSizing: 'border-box'
+        }, s.euiListItemLayout, ...(disabled ? [] : [s.isInteractive, focused && s.isFocused, selected && s.isSelected, selected && focused && s.isSelectedFocused]), disabled && s.isDisabled);
+        cache.set(key, value);
+      }
+      return value;
+    };
+  }
+  static {
+    n(this.prototype, "optionClassFor", [cached]);
+  }
+  optionClass = (option, highlighted, selected) => {
+    const disabled = this.isDisabled(option);
+    return this.optionClassFor(option === highlighted, selected, disabled);
+  };
+  get contentClass() {
+    return euiClass(getEuiThemeContext(this), this.layoutStyles.euiListItemLayout__content);
+  }
+  static {
+    n(this.prototype, "contentClass", [cached]);
+  }
+  get textClass() {
+    const s = this.layoutStyles;
+    return euiClass(getEuiThemeContext(this), s.euiListItemLayout__text, this.isAuto ? s.textWrap.wrap : s.textWrap.truncate);
+  }
+  static {
+    n(this.prototype, "textClass", [cached]);
+  }
+  get prependClass() {
+    return euiClass(getEuiThemeContext(this), this.layoutStyles.euiListItemLayout__prepend);
+  }
+  static {
+    n(this.prototype, "prependClass", [cached]);
+  }
+  get appendClass() {
+    return euiClass(getEuiThemeContext(this), this.layoutStyles.euiListItemLayout__append);
+  }
+  /** Single selection check indicator (upstream `showIndicator`). */
+  static {
+    n(this.prototype, "appendClass", [cached]);
+  }
+  get indicatorCss() {
+    return this.layoutStyles.euiListItemLayout__icon;
+  }
+  static {
+    n(this.prototype, "indicatorCss", [cached]);
   }
   static {
-    setComponentTemplate(precompileTemplate("{{!-- @glint-nocheck: not typesafe yet --}}\n{{#let (component @groupComponent) as |Group|}}\n  {{#if @select.loading}}\n    <EuiText @size=\"xs\" class=\"euiComboBoxOptionsList__empty\">\n      <EuiFlexGroup @gutterSize=\"s\" @justifyContent=\"center\" @responsive={{false}}>\n        <EuiFlexItem @grow={{false}}>\n          <EuiLoadingSpinner @size=\"m\" />\n        </EuiFlexItem>\n        <EuiFlexItem @grow={{false}}>\n          {{@loadingMessage}}\n        </EuiFlexItem>\n      </EuiFlexGroup>\n    </EuiText>\n  {{else}}\n    {{!-- template-lint-disable --}}\n    <VerticalCollection @items={{this.flattedOptions}} @tagName=\"div\" @estimateHeight={{this.rowHeight}} @staticHeight={{true}} @bufferSize={{3}} style=\"overflow-y: auto;\" role=\"listbox\" aria-controls=\"ember-power-select-trigger-{{@select.uniqueId}}\" class={{classNames \"euiComboBoxOptionsList__rowWrap\" @class}} {{this.setupHandlers}} ...attributes as |opt index|>\n      {{!-- template-lint-enable --}}\n      {{#if (emberPowerSelectIsGroup opt)}}\n        <Group @group={{opt}} @select={{@select}} @extra={{@extra}} style={{this.rowHeightString}} />\n      {{else}}\n        <button type=\"button\" style={{this.rowHeightString}} class=\"euiFilterSelectItem\n            {{if (eq opt @select.highlighted) \" euiFilterSelectItem-isFocused\"}}\" aria-selected=\"{{emberPowerSelectIsEqual opt @select.selected}}\" aria-disabled={{if opt.disabled \"true\"}} aria-current=\"{{eq opt @select.highlighted}}\" data-option-index=\"{{index}}\" role=\"option\" tabindex={{if opt.disabled \"-1\" \"0\"}}>\n          <span class=\"euiComboBoxOption__contentWrapper\">\n            <span class=\"euiComboBoxOption__content\">\n              {{yield opt index @select}}\n            </span>\n            {{#if (and (eq opt @select.highlighted) (not opt.disabled))}}\n              {{!--template-lint-disable require-presentational-children--}}\n              <EuiBadge class=\"euiComboBoxOption__enterBadge\" @color=\"hollow\" @iconType=\"returnKey\" aria-hidden=\"true\" />\n            {{/if}}\n          </span>\n        </button>\n      {{/if}}\n    </VerticalCollection>\n  {{/if}}\n{{/let}}", {
+    setComponentTemplate(precompileTemplate("{{!-- @glint-nocheck: not typesafe yet --}}\n{{#let (component @groupComponent) as |Group|}}\n  {{#if (or @select.loading @isLoading)}}\n    <div class=\"euiComboBoxOptionsList {{this.emptyClass}}\" {{on \"mousedown\" this.keepFocus}}>\n      <EuiText @size=\"xs\" class=\"euiComboBoxOptionsList__empty\">\n        <EuiFlexGroup @gutterSize=\"s\" @justifyContent=\"center\" @responsive={{false}}>\n          <EuiFlexItem @grow={{false}}>\n            <EuiLoadingSpinner @size=\"m\" />\n          </EuiFlexItem>\n          <EuiFlexItem @grow={{false}}>\n            {{@loadingMessage}}\n          </EuiFlexItem>\n        </EuiFlexGroup>\n      </EuiText>\n    </div>\n  {{else}}\n    {{!-- template-lint-disable --}}\n    <VerticalCollection @items={{this.flattedOptions}} @tagName=\"div\" @estimateHeight={{this.rowHeight}} @staticHeight={{this.staticHeight}} @renderAll={{this.isAuto}} @bufferSize={{3}} role=\"listbox\" data-combo-box-list={{@select.uniqueId}} data-test-subj=\"comboBoxOptionsList\" class=\"euiComboBoxOptionsList euiComboBoxOptionsList__rowWrap euiComboBoxOptionsList__virtualization\n        {{this.listClass}}\n        {{@class}}\" {{this.setupHandlers}} {{on \"mousedown\" this.keepFocus}} ...attributes aria-multiselectable={{this.ariaMultiselectable}} aria-label={{if @listboxAriaLabel @listboxAriaLabel}} as |opt index|>\n      {{!-- template-lint-enable --}}\n      {{#if (emberPowerSelectIsGroup opt)}}\n        <Group @group={{opt}} @select={{@select}} @extra={{@extra}} @isFirst={{eq index 0}} style={{this.groupStyle index}} />\n      {{else}}\n        {{#let (this.isChecked opt) (and @onFocusBadge (eq opt @select.highlighted) (not (this.isDisabled opt))) as |selected showEnter|}}\n          <div id={{this.optionId index}} style={{this.rowHeightString}} class=\"euiComboBoxOption euiListItemLayout\n              {{this.optionClass opt @select.highlighted selected}}\" aria-selected=\"{{selected}}\" aria-disabled={{if (this.isDisabled opt) \"true\"}} aria-current=\"{{eq opt @select.highlighted}}\" aria-setsize={{this.flattened.count}} aria-posinset={{this.position index}} aria-describedby={{if (this.toolTipFor opt) (this.toolTipId index)}} data-option-index=\"{{index}}\" data-test-subj=\"euiListItemLayout\" role=\"option\">\n            <MaybeToolTip @content={{this.toolTipFor opt}} @props={{opt.toolTipProps}} @id={{this.toolTipId index}} @isShown={{eq opt @select.highlighted}}>\n            <span class=\"euiListItemLayout__content {{this.contentClass}}\">\n              {{#if this.singleSelection}}\n                <EuiIcon class=\"euiListItemLayout__icon\" @type={{if selected \"check\" \"empty\"}} @color={{if (this.isDisabled opt) \"subdued\" (if selected \"primary\" \"text\")}} @css={{this.indicatorCss}} />\n              {{/if}}\n              {{#if opt.prepend}}\n                <span class=\"euiListItemLayout__prepend {{this.prependClass}}\"><EuiComboBoxNode @node={{opt.prepend}} @option={{opt}} /></span>\n              {{/if}}\n              <span class=\"euiListItemLayout__text euiComboBoxOption__content\n                  {{this.textClass}}\" title={{this.titleFor opt}}>\n                {{yield opt index @select}}\n              </span>\n              {{#if (or opt.append showEnter)}}\n                <span class=\"euiListItemLayout__append {{this.appendClass}}\">\n                  {{#if opt.append}}\n                    <EuiComboBoxNode @node={{opt.append}} @option={{opt}} />\n                  {{/if}}\n                  {{#if showEnter}}\n                    {{!--template-lint-disable require-presentational-children--}}\n                    <EuiBadge class=\"euiComboBoxOption__enterBadge\" @color=\"hollow\" @iconType=\"return\" aria-hidden=\"true\" />\n                  {{/if}}\n                </span>\n              {{/if}}\n            </span>\n            </MaybeToolTip>\n          </div>\n        {{/let}}\n      {{/if}}\n    </VerticalCollection>\n  {{/if}}\n{{/let}}", {
       strictMode: true,
       scope: () => ({
-        EuiText: EuiTextComponent,
+        or,
+        on,
+        EuiText,
         EuiFlexGroup,
         EuiFlexItem,
         EuiLoadingSpinner,
         VerticalCollection,
-        classNames,
         emberPowerSelectIsGroup,
         eq,
-        emberPowerSelectIsEqual,
         and,
         not,
+        MaybeToolTip,
+        EuiIcon,
+        EuiComboBoxNode: EuiComboBoxNodeComponent,
         EuiBadge
       })
     }), this);

package/dist/components/eui-combo-box/options.js.map

@@ -1 +1 @@
-{"version":3,"file":"options.js","sources":["../../../src/components/eui-combo-box/options.gts"],"sourcesContent":["import { cached } from '@glimmer/tracking';\nimport { service } from '@ember/service';\nimport { htmlSafe } from '@ember/template';\n\n//@ts-expect-error\nimport { VerticalCollection } from '@html-next/vertical-collection';\nimport EmberPowerSelectOptions from 'ember-power-select/components/power-select/options';\nimport emberPowerSelectIsEqual from 'ember-power-select/helpers/ember-power-select-is-equal';\nimport emberPowerSelectIsGroup from 'ember-power-select/helpers/ember-power-select-is-group';\nimport { and, eq, not } from 'ember-truth-helpers';\n\nimport classNames from '../../helpers/class-names.ts';\nimport EuiBadge from '../eui-badge.gts';\nimport EuiFlexGroup from '../eui-flex-group.gts';\nimport EuiFlexItem from '../eui-flex-item.gts';\nimport EuiLoadingSpinner from '../eui-loading-spinner.gts';\nimport EuiText from '../eui-text.gts';\n\nimport type EuiConfigService from '../../services/eui-config';\n\n/**\n * @private EuiComboBox's options list: virtualized, with groups. Extends\n * ember-power-select's options component.\n */\nexport default class EuiComboBoxOptionsComponent extends EmberPowerSelectOptions {\n  @service declare euiConfig: EuiConfigService;\n\n  /**\n   * Groups followed by their options, in one list (the rows of the\n   * virtualized list; `data-option-index` is an index in it).\n   */\n  @cached\n  get flattedOptions(): unknown[] {\n    return (this.args.options ?? []).flatMap((option) =>\n      emberPowerSelectIsGroup(option) ? [option, ...option.options] : [option]\n    );\n  }\n\n  _optionFromIndex(index: string) {\n    const parts = index.split('.');\n    let option: any = this.flattedOptions[parseInt(parts[0]!, 10)];\n\n    for (let i = 1; i < parts.length; i++) {\n      option = option.options[parseInt(parts[i]!, 10)];\n    }\n\n    return option;\n  }\n\n  get configRowHeight() {\n    return (\n      (this.euiConfig.getConfig('euiComboBoxOptionsHeight') as number) || 29\n    );\n  }\n\n  get rowHeight() {\n    //@ts-expect-error\n    return this.args.rowHeight ?? this.configRowHeight;\n  }\n\n  get rowHeightString() {\n    return htmlSafe(`height:${this.rowHeight}px;`);\n  }\n\n  <template>\n    {{! @glint-nocheck: not typesafe yet }}\n    {{#let (component @groupComponent) as |Group|}}\n      {{#if @select.loading}}\n        <EuiText @size=\"xs\" class=\"euiComboBoxOptionsList__empty\">\n          <EuiFlexGroup\n            @gutterSize=\"s\"\n            @justifyContent=\"center\"\n            @responsive={{false}}\n          >\n            <EuiFlexItem @grow={{false}}>\n              <EuiLoadingSpinner @size=\"m\" />\n            </EuiFlexItem>\n            <EuiFlexItem @grow={{false}}>\n              {{@loadingMessage}}\n            </EuiFlexItem>\n          </EuiFlexGroup>\n        </EuiText>\n      {{else}}\n        {{! template-lint-disable }}\n        <VerticalCollection\n          @items={{this.flattedOptions}}\n          @tagName=\"div\"\n          @estimateHeight={{this.rowHeight}}\n          @staticHeight={{true}}\n          @bufferSize={{3}}\n          style=\"overflow-y: auto;\"\n          role=\"listbox\"\n          aria-controls=\"ember-power-select-trigger-{{@select.uniqueId}}\"\n          class={{classNames \"euiComboBoxOptionsList__rowWrap\" @class}}\n          {{this.setupHandlers}}\n          ...attributes\n          as |opt index|\n        >\n          {{! template-lint-enable }}\n          {{#if (emberPowerSelectIsGroup opt)}}\n            <Group\n              @group={{opt}}\n              @select={{@select}}\n              @extra={{@extra}}\n              style={{this.rowHeightString}}\n            />\n          {{else}}\n            <button\n              type=\"button\"\n              style={{this.rowHeightString}}\n              class=\"euiFilterSelectItem\n                {{if\n                  (eq opt @select.highlighted)\n                  ' euiFilterSelectItem-isFocused'\n                }}\"\n              aria-selected=\"{{emberPowerSelectIsEqual opt @select.selected}}\"\n              aria-disabled={{if opt.disabled \"true\"}}\n              aria-current=\"{{eq opt @select.highlighted}}\"\n              data-option-index=\"{{index}}\"\n              role=\"option\"\n              tabindex={{if opt.disabled \"-1\" \"0\"}}\n            >\n              <span class=\"euiComboBoxOption__contentWrapper\">\n                <span class=\"euiComboBoxOption__content\">\n                  {{yield opt index @select}}\n                </span>\n                {{#if (and (eq opt @select.highlighted) (not opt.disabled))}}\n                  {{!template-lint-disable require-presentational-children}}\n                  <EuiBadge\n                    class=\"euiComboBoxOption__enterBadge\"\n                    @color=\"hollow\"\n                    @iconType=\"returnKey\"\n                    aria-hidden=\"true\"\n                  />\n                {{/if}}\n              </span>\n            </button>\n          {{/if}}\n        </VerticalCollection>\n      {{/if}}\n    {{/let}}\n  </template>\n}\n"],"names":["EuiComboBoxOptionsComponent","EmberPowerSelectOptions","g","prototype","service","i","flattedOptions","args","options","flatMap","option","emberPowerSelectIsGroup","n","cached","_optionFromIndex","index","parts","split","parseInt","length","configRowHeight","euiConfig","getConfig","rowHeight","rowHeightString","htmlSafe","setComponentTemplate","precompileTemplate","strictMode","scope","EuiText","EuiFlexGroup","EuiFlexItem","EuiLoadingSpinner","VerticalCollection","classNames","eq","emberPowerSelectIsEqual","and","not","EuiBadge"],"mappings":";;;;;;;;;;;;;;;;;;AAwBe,MAAMA,2BAAA,SAAoCC,uBAAA,CAAA;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,WAAA,EAAA,CACtDC,OAAA,CAAA,CAAA;AAAA;EAAA,UAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,WAAA,CAAA,EAAA,MAAA;AAED;;;AAGC;EACD,IACIC,cAAAA,GAA4B;AAC9B,IAAA,OAAO,CAAC,IAAI,CAACC,IAAI,CAACC,OAAO,IAAI,EAAE,EAAEC,OAAO,CAAEC,MAAA,IACxCC,wBAAwBD,MAAA,CAAA,GAAU,CAACA,MAAA,EAAW,GAAAA,MAAA,CAAOF,OAAO,CAAC,GAAG,CAACE,MAAA,CAAO,CAAA;AAE5E,EAAA;AAAA,EAAA;IAAAE,CAAA,CAAA,IAAA,CAAAT,SAAA,EAAA,gBAAA,EAAA,CALCU,MAAA,CAAA,CAAA;AAAA;EAODC,gBAAAA,CAAiBC,KAAa,EAAE;AAC9B,IAAA,MAAMC,KAAA,GAAQD,KAAA,CAAME,KAAK,CAAC,GAAA,CAAA;AAC1B,IAAA,IAAIP,MAAW,GAAG,IAAI,CAACJ,cAAc,CAACY,QAAA,CAASF,KAAK,CAAC,CAAA,CAAE,EAAG,EAAA,CAAA,CAAI;AAE9D,IAAA,KAAK,IAAIX,CAAA,GAAI,CAAA,EAAGA,IAAIW,KAAA,CAAMG,MAAM,EAAEd,CAAA,EAAA,EAAK;AACrCK,MAAAA,MAAA,GAASA,MAAA,CAAOF,OAAO,CAACU,QAAA,CAASF,KAAK,CAACX,CAAA,CAAE,EAAG,EAAA,CAAA,CAAI;AAClD,IAAA;AAEA,IAAA,OAAOK,MAAA;AACT,EAAA;EAEA,IAAIU,eAAAA,GAAkB;IACpB,OACG,IAAI,CAACC,SAAS,CAACC,SAAS,CAAC,0BAAA,CAAA,IAA0C,EACtE;AACF,EAAA;EAEA,IAAIC,SAAAA,GAAY;AACd;IACA,OAAO,IAAI,CAAChB,IAAI,CAACgB,SAAS,IAAI,IAAI,CAACH,eAAe;AACpD,EAAA;EAEA,IAAII,eAAAA,GAAkB;AACpB,IAAA,OAAOC,QAAA,CAAS,CAAA,OAAA,EAAU,IAAI,CAACF,SAAS,KAAK,CAAA;AAC/C,EAAA;AAEA,EAAA;IAAAG,oBAAA,CAAAC,kBAAA,CAAA,qnEAAA,EA6EA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;iBAAAC,gBAAA;QAAAC,YAAA;QAAAC,WAAA;QAAAC,iBAAA;QAAAC,kBAAA;QAAAC,UAAA;QAAAxB,uBAAA;QAAAyB,EAAA;QAAAC,uBAAA;QAAAC,GAAA;QAAAC,GAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}
+{"version":3,"file":"options.js","sources":["../../../src/components/eui-combo-box/options.gts"],"sourcesContent":["import { cached } from '@glimmer/tracking';\nimport { on } from '@ember/modifier';\nimport { modifier } from 'ember-modifier';\n\nimport { attachToFocusTraps } from '../../-private/focus-trap-registry.ts';\nimport { service } from '@ember/service';\nimport { htmlSafe } from '@ember/template';\n\n//@ts-expect-error\nimport { VerticalCollection } from '@html-next/vertical-collection';\nimport EmberPowerSelectOptions from 'ember-power-select/components/power-select/options';\nimport emberPowerSelectIsGroup from 'ember-power-select/helpers/ember-power-select-is-group';\nimport { and, eq, not, or } from 'ember-truth-helpers';\n\nimport { getEuiThemeContext } from '../../utils/emotion/consume.ts';\nimport {\n  comboBoxBoxReset,\n  comboBoxOptionLabel,\n  isComboBoxOptionChecked\n} from '../../utils/eui/combo-box.ts';\nimport {\n  euiComboBoxOptionListStyles,\n  euiListItemLayoutStyles\n} from '../../utils/eui/styles.generated.ts';\nimport { euiClass, useEuiBorealisStyles } from '../../utils/eui/styles.ts';\nimport EuiBadge from '../eui-badge.gts';\nimport EuiFlexGroup from '../eui-flex-group.gts';\nimport EuiFlexItem from '../eui-flex-item.gts';\nimport EuiIcon from '../eui-icon.gts';\nimport EuiLoadingSpinner from '../eui-loading-spinner.gts';\nimport EuiText from '../eui-text.gts';\nimport EuiToolTip from '../eui-tool-tip.gts';\nimport EuiComboBoxNode from './node.gts';\n\nimport type { TOC } from '@ember/component/template-only';\nimport type { EuiTooltipArgs } from '../eui-tool-tip';\n\nimport type EuiConfigService from '../../services/eui-config';\n\n/** Upstream `anchorClassName=\"eui-fullWidth\"` of option tooltips. */\nconst TOOLTIP_ANCHOR_CSS = { inlineSize: '100%' };\n\n/**\n * @private Upstream EuiListItemLayout's internal tooltip: wraps the row\n * content in an EuiToolTip when the option has `toolTipContent`, shown on\n * hover and while the option is highlighted (keyboard).\n */\nconst MaybeToolTip: TOC<{\n  Args: {\n    content?: string;\n    props?: Partial<EuiTooltipArgs>;\n    id: string;\n    isShown: boolean;\n  };\n  Blocks: { default: [] };\n}> = <template>\n  {{#if @content}}\n    <EuiToolTip\n      @id={{@id}}\n      @content={{@content}}\n      @title={{@props.title}}\n      @position={{@props.position}}\n      @delay={{@props.delay}}\n      @offset={{@props.offset}}\n      @className={{@props.className}}\n      @css={{@props.css}}\n      @anchorClassName={{@props.anchorClassName}}\n      @anchorCss={{TOOLTIP_ANCHOR_CSS}}\n      @isShown={{@isShown}}\n    >{{yield}}</EuiToolTip>\n  {{else}}\n    {{yield}}\n  {{/if}}\n</template>;\n\ninterface Row {\n  /** ember-power-select's index path (`2`, `1.0`): option ids use it. */\n  path: string;\n  /** 1-based position among the options (not groups), for `aria-posinset`. */\n  position: number;\n}\n\n/**\n * @private EuiComboBox's options list: virtualized, with groups. Extends\n * ember-power-select's options component. Rows follow upstream\n * EuiComboBoxOptionsList: `EuiListItemLayout` options (`role=\"option\"`)\n * and `euiComboBoxTitle` group labels.\n */\nexport default class EuiComboBoxOptionsComponent extends EmberPowerSelectOptions {\n  @service declare euiConfig: EuiConfigService;\n\n  /**\n   * Groups followed by their options, in one list (the rows of the\n   * virtualized list; `data-option-index` is an index in it).\n   */\n  @cached\n  get flattedOptions(): unknown[] {\n    return this.flattened.items;\n  }\n\n  @cached\n  get flattened(): { items: unknown[]; rows: Row[]; count: number } {\n    const items: unknown[] = [];\n    const rows: Row[] = [];\n    let count = 0;\n\n    (this.args.options ?? []).forEach((option: any, i: number) => {\n      if (emberPowerSelectIsGroup(option)) {\n        items.push(option);\n        rows.push({ path: `${i}`, position: 0 });\n        (option.options ?? []).forEach((child: unknown, j: number) => {\n          items.push(child);\n          rows.push({\n            path: `${i}.${j}`,\n            position: emberPowerSelectIsGroup(child) ? 0 : ++count\n          });\n        });\n      } else {\n        items.push(option);\n        rows.push({ path: `${i}`, position: ++count });\n      }\n    });\n\n    return { items, rows, count };\n  }\n\n  get hasGroups(): boolean {\n    return this.flattened.rows.some((row) => row.position === 0);\n  }\n\n  /**\n   * ember-power-select attaches its mouse/touch handlers to the first list\n   * element only. Ours is replaced while `@search` loads (the list gives way\n   * to the loading message), so the new list had no handlers and clicking an\n   * option did nothing. Attach to every list element and detach on teardown.\n   */\n  setupHandlers = modifier((element: Element) => {\n    // ember-power-select's handler methods are private in its types\n    const base = this as unknown as {\n      _listElement?: Element;\n      _addHandlers(element: Element): void;\n      _removeHandlers(element: Element): void;\n    };\n\n    base._listElement = element;\n    base._addHandlers(element);\n\n    // the portalled list counts as inside the focus trap (modal, flyout,\n    // popover) the combo box is in\n    const content = element.closest<HTMLElement>('.ember-basic-dropdown-content');\n    const trigger = document.querySelector(\n      `[data-ebd-id=\"${this.args.select.uniqueId}-trigger\"]`\n    );\n    const leaveFocusTraps = content\n      ? attachToFocusTraps(trigger, content)\n      : () => {};\n\n    return () => {\n      leaveFocusTraps();\n      base._removeHandlers(element);\n      if (base._listElement === element) base._listElement = undefined;\n    };\n  });\n\n  _optionFromIndex(index: string) {\n    const parts = index.split('.');\n    let option: any = this.flattedOptions[parseInt(parts[0]!, 10)];\n\n    for (let i = 1; i < parts.length; i++) {\n      option = option.options[parseInt(parts[i]!, 10)];\n    }\n\n    return option;\n  }\n\n  get configRowHeight() {\n    return (\n      (this.euiConfig.getConfig('euiComboBoxOptionsHeight') as number) || 29\n    );\n  }\n\n  /** `@rowHeight=\"auto\"`: rows wrap their text, nothing is virtualized. */\n  get isAuto(): boolean {\n    //@ts-expect-error `rowHeight` is curried by EuiComboBox\n    return this.args.rowHeight === 'auto';\n  }\n\n  get rowHeight(): number {\n    //@ts-expect-error `rowHeight` is curried by EuiComboBox\n    const rowHeight = this.args.rowHeight as number | 'auto' | undefined;\n\n    return rowHeight === 'auto' || rowHeight == null\n      ? this.configRowHeight\n      : rowHeight;\n  }\n\n  get rowHeightString() {\n    return this.isAuto ? undefined : htmlSafe(`height:${this.rowHeight}px;`);\n  }\n\n  get staticHeight(): boolean {\n    return !this.hasGroups && !this.isAuto;\n  }\n\n  get singleSelection(): boolean {\n    //@ts-expect-error `singleSelection` is curried by EuiComboBox\n    return Boolean(this.args.singleSelection);\n  }\n\n  /**\n   * Single selection's check mark (upstream: same label and key). In\n   * multiple selection the selected options are not listed.\n   */\n  isChecked = (option: unknown): boolean =>\n    this.singleSelection &&\n    isComboBoxOptionChecked(\n      option,\n      //@ts-expect-error `selectedOptions` is curried by EuiComboBox\n      this.args.selectedOptions,\n      //@ts-expect-error `searchField` is curried by EuiComboBox\n      this.args.searchField\n    );\n\n  /** The list keeps the focus in the input (upstream). */\n  keepFocus = (event: MouseEvent) => event.preventDefault();\n\n  /** Upstream `aria-multiselectable` only for multiple selection. */\n  get ariaMultiselectable(): 'true' | undefined {\n    return this.singleSelection ? undefined : 'true';\n  }\n\n  /** Upstream `getListItemSize`: group labels after the first get 16px more. */\n  groupStyle = (index: number) =>\n    this.isAuto\n      ? undefined\n      : htmlSafe(\n          `height:${index > 0 ? this.rowHeight + 16 : this.rowHeight}px;`\n        );\n\n  optionId = (index: number) =>\n    `${(this.args.select as { uniqueId: string }).uniqueId}-${this.flattened.rows[index]?.path ?? index}`;\n\n  position = (index: number) => this.flattened.rows[index]?.position;\n\n  /**\n   * Upstream text `title`: the option's own, else its label while it is\n   * truncated by CSS (not searching, no `truncationProps`, no\n   * `rowHeight=\"auto\"`) and has no tooltip.\n   */\n  titleFor = (option: unknown) => {\n    const record =\n      option && typeof option === 'object'\n        ? (option as {\n            title?: string;\n            truncationProps?: unknown;\n            toolTipContent?: unknown;\n          })\n        : undefined;\n\n    if (record && 'title' in record) {\n      return record.title;\n    }\n\n    if (\n      (this.args.select as { searchText?: string }).searchText ||\n      //@ts-expect-error `truncationProps` is curried by EuiComboBox\n      this.args.truncationProps ||\n      record?.truncationProps ||\n      record?.toolTipContent ||\n      this.isAuto\n    ) {\n      return undefined;\n    }\n\n    //@ts-expect-error `searchField` is curried by EuiComboBox\n    return comboBoxOptionLabel(option, this.args.searchField) || undefined;\n  };\n\n  /** Upstream: no tooltip on disabled options. */\n  toolTipFor = (option: unknown): string | undefined => {\n    if (this.isDisabled(option)) return undefined;\n\n    return (option as { toolTipContent?: string } | undefined)\n      ?.toolTipContent;\n  };\n\n  toolTipId = (index: number) => `${this.optionId(index)}-tooltip`;\n\n  isDisabled = (option: unknown) =>\n    Boolean(\n      option &&\n        typeof option === 'object' &&\n        (option as { disabled?: boolean }).disabled === true\n    );\n\n  @cached\n  get listStyles() {\n    return useEuiBorealisStyles(\n      getEuiThemeContext(this),\n      euiComboBoxOptionListStyles\n    );\n  }\n\n  /**\n   * The listbox: upstream `.euiComboBoxOptionsList` (max height 200px) and\n   * its virtualized list (scrolls, with overflow shadows). Positioned so\n   * option offsets (keyboard scrolling) are relative to it.\n   */\n  @cached\n  get listClass(): string {\n    const context = getEuiThemeContext(this);\n    const styles = this.listStyles;\n\n    return euiClass(\n      context,\n      comboBoxBoxReset,\n      styles.euiComboBoxOptionList,\n      this.isAuto\n        ? styles.hasRowHeightAuto\n        : styles.euiComboBoxOptionList__virtualization,\n      { position: 'relative', outline: 'none' }\n    );\n  }\n\n  /** Loading message: the same list wrapper around an upstream empty state. */\n  @cached\n  get emptyClass(): string {\n    const context = getEuiThemeContext(this);\n    const styles = this.listStyles;\n\n    return euiClass(\n      context,\n      comboBoxBoxReset,\n      styles.euiComboBoxOptionList,\n      styles.euiComboBoxOptionsList__empty\n    );\n  }\n\n  @cached\n  get layoutStyles() {\n    return useEuiBorealisStyles(\n      getEuiThemeContext(this),\n      euiListItemLayoutStyles\n    );\n  }\n\n  /**\n   * Upstream EuiListItemLayout styles per state, composed once per theme\n   * and state combination (interactive styles only while enabled).\n   */\n  @cached\n  get optionClassFor(): (\n    focused: boolean,\n    selected: boolean,\n    disabled: boolean\n  ) => string {\n    const context = getEuiThemeContext(this);\n    const s = this.layoutStyles;\n    const cache = new Map<string, string>();\n\n    return (focused, selected, disabled) => {\n      const key = `${focused}${selected}${disabled}`;\n      let value = cache.get(key);\n\n      if (!value) {\n        value = euiClass(\n          context,\n          { boxSizing: 'border-box' },\n          s.euiListItemLayout,\n          ...(disabled\n            ? []\n            : [\n                s.isInteractive,\n                focused && s.isFocused,\n                selected && s.isSelected,\n                selected && focused && s.isSelectedFocused\n              ]),\n          disabled && s.isDisabled\n        );\n        cache.set(key, value);\n      }\n\n      return value;\n    };\n  }\n\n  optionClass = (\n    option: unknown,\n    highlighted: unknown,\n    selected: boolean\n  ): string => {\n    const disabled = this.isDisabled(option);\n\n    return this.optionClassFor(option === highlighted, selected, disabled);\n  };\n\n  @cached\n  get contentClass(): string {\n    return euiClass(\n      getEuiThemeContext(this),\n      this.layoutStyles.euiListItemLayout__content\n    );\n  }\n\n  @cached\n  get textClass(): string {\n    const s = this.layoutStyles;\n\n    return euiClass(\n      getEuiThemeContext(this),\n      s.euiListItemLayout__text,\n      this.isAuto ? s.textWrap.wrap : s.textWrap.truncate\n    );\n  }\n\n  @cached\n  get prependClass(): string {\n    return euiClass(\n      getEuiThemeContext(this),\n      this.layoutStyles.euiListItemLayout__prepend\n    );\n  }\n\n  @cached\n  get appendClass(): string {\n    return euiClass(\n      getEuiThemeContext(this),\n      this.layoutStyles.euiListItemLayout__append\n    );\n  }\n\n  /** Single selection check indicator (upstream `showIndicator`). */\n  @cached\n  get indicatorCss() {\n    return this.layoutStyles.euiListItemLayout__icon;\n  }\n\n  <template>\n    {{! @glint-nocheck: not typesafe yet }}\n    {{#let (component @groupComponent) as |Group|}}\n      {{#if (or @select.loading @isLoading)}}\n        <div\n          class=\"euiComboBoxOptionsList {{this.emptyClass}}\"\n          {{on \"mousedown\" this.keepFocus}}\n        >\n          <EuiText @size=\"xs\" class=\"euiComboBoxOptionsList__empty\">\n            <EuiFlexGroup\n              @gutterSize=\"s\"\n              @justifyContent=\"center\"\n              @responsive={{false}}\n            >\n              <EuiFlexItem @grow={{false}}>\n                <EuiLoadingSpinner @size=\"m\" />\n              </EuiFlexItem>\n              <EuiFlexItem @grow={{false}}>\n                {{@loadingMessage}}\n              </EuiFlexItem>\n            </EuiFlexGroup>\n          </EuiText>\n        </div>\n      {{else}}\n        {{! template-lint-disable }}\n        <VerticalCollection\n          @items={{this.flattedOptions}}\n          @tagName=\"div\"\n          @estimateHeight={{this.rowHeight}}\n          @staticHeight={{this.staticHeight}}\n          @renderAll={{this.isAuto}}\n          @bufferSize={{3}}\n          role=\"listbox\"\n          data-combo-box-list={{@select.uniqueId}}\n          data-test-subj=\"comboBoxOptionsList\"\n          class=\"euiComboBoxOptionsList euiComboBoxOptionsList__rowWrap euiComboBoxOptionsList__virtualization\n            {{this.listClass}}\n            {{@class}}\"\n          {{this.setupHandlers}}\n          {{on \"mousedown\" this.keepFocus}}\n          ...attributes\n          aria-multiselectable={{this.ariaMultiselectable}}\n          aria-label={{if @listboxAriaLabel @listboxAriaLabel}}\n          as |opt index|\n        >\n          {{! template-lint-enable }}\n          {{#if (emberPowerSelectIsGroup opt)}}\n            <Group\n              @group={{opt}}\n              @select={{@select}}\n              @extra={{@extra}}\n              @isFirst={{eq index 0}}\n              style={{this.groupStyle index}}\n            />\n          {{else}}\n            {{#let\n              (this.isChecked opt)\n              (and\n                @onFocusBadge\n                (eq opt @select.highlighted)\n                (not (this.isDisabled opt))\n              )\n              as |selected showEnter|\n            }}\n              <div\n                id={{this.optionId index}}\n                style={{this.rowHeightString}}\n                class=\"euiComboBoxOption euiListItemLayout\n                  {{this.optionClass opt @select.highlighted selected}}\"\n                aria-selected=\"{{selected}}\"\n                aria-disabled={{if (this.isDisabled opt) \"true\"}}\n                aria-current=\"{{eq opt @select.highlighted}}\"\n                aria-setsize={{this.flattened.count}}\n                aria-posinset={{this.position index}}\n                aria-describedby={{if\n                  (this.toolTipFor opt)\n                  (this.toolTipId index)\n                }}\n                data-option-index=\"{{index}}\"\n                data-test-subj=\"euiListItemLayout\"\n                role=\"option\"\n              >\n                <MaybeToolTip\n                  @content={{this.toolTipFor opt}}\n                  @props={{opt.toolTipProps}}\n                  @id={{this.toolTipId index}}\n                  @isShown={{eq opt @select.highlighted}}\n                >\n                <span\n                  class=\"euiListItemLayout__content {{this.contentClass}}\"\n                >\n                  {{#if this.singleSelection}}\n                    <EuiIcon\n                      class=\"euiListItemLayout__icon\"\n                      @type={{if selected \"check\" \"empty\"}}\n                      @color={{if\n                        (this.isDisabled opt)\n                        \"subdued\"\n                        (if selected \"primary\" \"text\")\n                      }}\n                      @css={{this.indicatorCss}}\n                    />\n                  {{/if}}\n                  {{#if opt.prepend}}\n                    <span\n                      class=\"euiListItemLayout__prepend {{this.prependClass}}\"\n                    ><EuiComboBoxNode\n                        @node={{opt.prepend}}\n                        @option={{opt}}\n                      /></span>\n                  {{/if}}\n                  <span\n                    class=\"euiListItemLayout__text euiComboBoxOption__content\n                      {{this.textClass}}\"\n                    title={{this.titleFor opt}}\n                  >\n                    {{yield opt index @select}}\n                  </span>\n                  {{#if (or opt.append showEnter)}}\n                    <span\n                      class=\"euiListItemLayout__append {{this.appendClass}}\"\n                    >\n                      {{#if opt.append}}\n                        <EuiComboBoxNode\n                          @node={{opt.append}}\n                          @option={{opt}}\n                        />\n                      {{/if}}\n                      {{#if showEnter}}\n                        {{!template-lint-disable require-presentational-children}}\n                        <EuiBadge\n                          class=\"euiComboBoxOption__enterBadge\"\n                          @color=\"hollow\"\n                          @iconType=\"return\"\n                          aria-hidden=\"true\"\n                        />\n                      {{/if}}\n                    </span>\n                  {{/if}}\n                </span>\n                </MaybeToolTip>\n              </div>\n            {{/let}}\n          {{/if}}\n        </VerticalCollection>\n      {{/if}}\n    {{/let}}\n  </template>\n}\n"],"names":["TOOLTIP_ANCHOR_CSS","inlineSize","MaybeToolTip","setComponentTemplate","precompileTemplate","strictMode","scope","EuiToolTip","templateOnly","EuiComboBoxOptionsComponent","EmberPowerSelectOptions","g","prototype","service","i","flattedOptions","flattened","items","n","cached","rows","count","args","options","forEach","option","emberPowerSelectIsGroup","push","path","position","child","j","hasGroups","some","row","setupHandlers","modifier","element","base","_listElement","_addHandlers","content","closest","trigger","document","querySelector","select","uniqueId","leaveFocusTraps","attachToFocusTraps","_removeHandlers","undefined","_optionFromIndex","index","parts","split","parseInt","length","configRowHeight","euiConfig","getConfig","isAuto","rowHeight","rowHeightString","htmlSafe","staticHeight","singleSelection","Boolean","isChecked","isComboBoxOptionChecked","selectedOptions","searchField","keepFocus","event","preventDefault","ariaMultiselectable","groupStyle","optionId","titleFor","record","title","searchText","truncationProps","toolTipContent","comboBoxOptionLabel","toolTipFor","isDisabled","toolTipId","disabled","listStyles","useEuiBorealisStyles","getEuiThemeContext","euiComboBoxOptionListStyles","listClass","context","styles","euiClass","comboBoxBoxReset","euiComboBoxOptionList","hasRowHeightAuto","euiComboBoxOptionList__virtualization","outline","emptyClass","euiComboBoxOptionsList__empty","layoutStyles","euiListItemLayoutStyles","optionClassFor","s","cache","Map","focused","selected","key","value","get","boxSizing","euiListItemLayout","isInteractive","isFocused","isSelected","isSelectedFocused","set","optionClass","highlighted","contentClass","euiListItemLayout__content","textClass","euiListItemLayout__text","textWrap","wrap","truncate","prependClass","euiListItemLayout__prepend","appendClass","euiListItemLayout__append","indicatorCss","euiListItemLayout__icon","or","on","EuiText","EuiFlexGroup","EuiFlexItem","EuiLoadingSpinner","VerticalCollection","eq","and","not","EuiIcon","EuiComboBoxNode","EuiBadge"],"mappings":"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"}

package/dist/components/eui-combo-box/search-message.js

@@ -1,14 +1,27 @@
-import EuiTextComponent from '../eui-text.js';
+import Component from '@glimmer/component';
+import { cached } from '@glimmer/tracking';
+import EuiText from '../eui-text.js';
+import { comboBoxMessageClass } from './no-matches-message.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
-import templateOnly from '@ember/component/template-only';
+import { n } from 'decorator-transforms/runtime-esm';
 
-const SearchMessageComponent = setComponentTemplate(precompileTemplate("{{#if @searchMessage}}\n  <EuiText @size=\"xs\" class=\"euiComboBoxOptionsList__empty\" ...attributes>\n    <p>\n      {{@searchMessage}}\n    </p>\n  </EuiText>\n{{/if}}", {
-  strictMode: true,
-  scope: () => ({
-    EuiText: EuiTextComponent
-  })
-}), templateOnly());
+class SearchMessageComponent extends Component {
+  get classes() {
+    return comboBoxMessageClass(this);
+  }
+  static {
+    n(this.prototype, "classes", [cached]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("{{#if @searchMessage}}\n  <div class=\"euiComboBoxOptionsList {{this.classes}}\" ...attributes>\n    <EuiText @size=\"xs\" class=\"euiComboBoxOptionsList__empty\">\n      <p>\n        {{@searchMessage}}\n      </p>\n    </EuiText>\n  </div>\n{{/if}}", {
+      strictMode: true,
+      scope: () => ({
+        EuiText
+      })
+    }), this);
+  }
+}
 
 export { SearchMessageComponent as default };
 //# sourceMappingURL=search-message.js.map

package/dist/components/eui-combo-box/search-message.js.map

@@ -1 +1 @@
-{"version":3,"file":"search-message.js","sources":["../../../src/components/eui-combo-box/search-message.gts"],"sourcesContent":["import EuiText from '../eui-text.gts';\n\nimport type { EuiTextSignature } from '../eui-text';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/** @private Shown in EuiComboBox's options list. */\ninterface Signature {\n  Element: EuiTextSignature['Element'];\n  Args: {\n    /** EuiComboBox's `@searchMessage`. */\n    searchMessage?: string;\n  };\n}\n\nconst SearchMessageComponent: TemplateOnlyComponent<Signature> = <template>\n  {{#if @searchMessage}}\n    <EuiText @size=\"xs\" class=\"euiComboBoxOptionsList__empty\" ...attributes>\n      <p>\n        {{@searchMessage}}\n      </p>\n    </EuiText>\n  {{/if}}\n</template>;\n\nexport default SearchMessageComponent;\n"],"names":["SearchMessageComponent","setComponentTemplate","precompileTemplate","strictMode","scope","EuiText","templateOnly"],"mappings":";;;;;AAcA,MAAMA,sBAA8C,GAAAC,oBAAA,CAAaC,kBAAA,CAAA,4KAAA,EAQjE;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;AAAAC,aAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}
+{"version":3,"file":"search-message.js","sources":["../../../src/components/eui-combo-box/search-message.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached } from '@glimmer/tracking';\n\nimport EuiText from '../eui-text.gts';\nimport { comboBoxMessageClass } from './no-matches-message.gts';\n\n/** @private Shown in EuiComboBox's options list. */\ninterface Signature {\n  Element: HTMLDivElement;\n  Args: {\n    /** EuiComboBox's `@searchMessage`. */\n    searchMessage?: string;\n  };\n}\n\nexport default class SearchMessageComponent extends Component<Signature> {\n  @cached\n  get classes(): string {\n    return comboBoxMessageClass(this);\n  }\n\n  <template>\n    {{#if @searchMessage}}\n      <div class=\"euiComboBoxOptionsList {{this.classes}}\" ...attributes>\n        <EuiText @size=\"xs\" class=\"euiComboBoxOptionsList__empty\">\n          <p>\n            {{@searchMessage}}\n          </p>\n        </EuiText>\n      </div>\n    {{/if}}\n  </template>\n}\n"],"names":["SearchMessageComponent","Component","classes","comboBoxMessageClass","n","prototype","cached","setComponentTemplate","precompileTemplate","strictMode","scope","EuiText"],"mappings":";;;;;;;;AAee,MAAMA,+BAA+BC,SAAA,CAAU;EAC5D,IACIC,OAAAA,GAAkB;IACpB,OAAOC,qBAAqB,IAAI,CAAA;AAClC,EAAA;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CAHCC,MAAA,CAAA,CAAA;AAAA;AAKD,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,2PAAA,EAUA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}

package/dist/components/eui-combo-box/trigger/input.js

@@ -1,13 +1,31 @@
+import { cached } from '@glimmer/tracking';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
+import { modifier } from 'ember-modifier';
 import PowerSelectInput from 'ember-power-select/components/power-select/input';
-import { not, and } from 'ember-truth-helpers';
 import validatableControl from '../../../modifiers/validatable-control.js';
+import { getEuiThemeContext } from '../../../utils/emotion/consume.js';
+import { dW as euiComboBoxInputStyles } from '../../../styles.generated-SYAxYhey.js';
+import { useEuiBorealisStyles, euiClass } from '../../../utils/eui/styles.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import { n } from 'decorator-transforms/runtime-esm';
 
+const INPUT_CONTAINER = {
+  position: 'relative',
+  display: 'flex',
+  flexGrow: 1,
+  minInlineSize: '2px',
+  maxInlineSize: '100%'
+};
+/** @private The search input inside EuiComboBox's trigger. */
 class EuiComboBoxTriggerInputComponent extends PowerSelectInput {
+  /** Upstream `inputRef`: the search input, or `null` when it goes away. */registerInput = modifier(element => {
+    // @ts-expect-error `inputRef` is passed by EuiComboBoxTrigger
+    const inputRef = this.args.inputRef;
+    inputRef?.(element);
+    return () => inputRef?.(null);
+  });
   /**
   * Shows @placeholder while nothing is selected (power-select 9's own
   * `placeholder` getter uses @searchPlaceholder instead).
@@ -17,56 +35,102 @@ class EuiComboBoxTriggerInputComponent extends PowerSelectInput {
       return undefined;
     }
     const selected = this.args.select.selected;
+    // upstream: no placeholder while searching
+    if (this.args.select.searchText) return '';
     // @ts-expect-error `placeholder` is passed by EuiComboBoxTrigger
     return !selected || selected.length === 0 ? this.args.placeholder || '' : '';
   }
+  /**
+  * Upstream `euiComboBoxInput`: transparent, borderless, the form control
+  * text. Upstream measures the typed text for the input's width; here the
+  * input sizes to its content (`field-sizing`) and fills the rest of the
+  * row, so it wraps below the pills like upstream's. With a placeholder or
+  * plain text selection it takes the whole row.
+  */
+  get inputClass() {
+    const context = getEuiThemeContext(this);
+    const styles = useEuiBorealisStyles(context, euiComboBoxInputStyles);
+    return euiClass(context, {
+      boxSizing: 'border-box',
+      margin: 0,
+      padding: 0
+    }, styles.euiComboBoxInput, {
+      flexGrow: 1,
+      fieldSizing: 'content',
+      // @ts-expect-error `fillWidth` is passed by EuiComboBoxTrigger
+      inlineSize: this.args.fillWidth ? '100%' : undefined
+    });
+  }
+  /** An option is highlighted in the open list (`aria-activedescendant`). */
+  static {
+    n(this.prototype, "inputClass", [cached]);
+  }
+  get hasActiveOption() {
+    const select = this.args.select;
+    return Boolean(select.isOpen && select.highlighted != null);
+  }
+  get containerClass() {
+    const context = getEuiThemeContext(this);
+    return euiClass(context, INPUT_CONTAINER);
+  }
+  /**
+  * Keys go to EuiComboBox first (through ember-power-select's keydown
+  * handler): it handles Enter, Escape, Tab, the arrows and Backspace
+  * like upstream.
+  */
+  static {
+    n(this.prototype, "containerClass", [cached]);
+  }
   handleKeydown(e) {
     if (e.target === null) return;
     if (this.args.onKeydown && this.args.onKeydown(e) === false) {
-      if (
-      // @ts-expect-error `onCreateOption` is passed by EuiComboBoxTrigger
-      this.args.onCreateOption &&
-      //if user wants to create an option and
-      e.key === 'Enter' && (
-      //presses [Enter] and
-      this.args.select.options.length === 0 ||
-      //If There are no options or
-      this.args.select.results.length === 0) &&
-      //Last search made returned no results and
-      this.args.select.searchText.length >= 1 //There's something in the searchText box
-      ) {
-        // @ts-expect-error `onCreateOption` is passed by EuiComboBoxTrigger
-        this.args.onCreateOption();
-        return false;
-      }
       e.stopPropagation();
       return false;
     }
-    if (e.key === 'Backspace') {
-      e.stopPropagation();
-      if (!e.target.value.trim()) {
-        const selected = this.args.select.selected;
-        const lastSelection = selected[selected.length - 1];
-        if (lastSelection && this.args.buildSelection) {
-          this.args.select.actions.select(this.args.buildSelection(lastSelection, this.args.select), e);
-          this.args.select.actions.search('');
-          this.args.select.actions.open(e);
-        }
-      }
-    } else if (e.key?.length === 1 && /[a-z0-9 ]/i.test(e.key)) {
-      // Keys 0-9, a-z or SPACE
+    if (e.key === 'Backspace' || e.key?.length === 1 && /[a-z0-9 ]/i.test(e.key)) {
+      // Backspace, keys 0-9, a-z or SPACE edit the text
       e.stopPropagation();
     }
   }
+  /** Upstream keeps the typed text on blur (EuiComboBox decides). */
   static {
     n(this.prototype, "handleKeydown", [action]);
   }
+  handleBlur(event) {
+    this.args.onBlur?.(event);
+  }
+  /**
+  * Upstream `searchValue`: plain text single selection shows the search
+  * text, else the selected option's label, as the input's value.
+  */
+  static {
+    n(this.prototype, "handleBlur", [action]);
+  }
+  get value() {
+    const search = this.args.select.searchText;
+    // @ts-expect-error `plainTextValue` is passed by EuiComboBoxTrigger
+    const plainText = this.args.plainTextValue;
+    if (plainText === undefined) return search;
+    return search || plainText;
+  }
+  /** Upstream re-opens the list on every click of a plain text input. */
+  handleClick(event) {
+    // @ts-expect-error `onPlainTextClick` is passed by EuiComboBoxTrigger
+    const onClick = this.args.onPlainTextClick;
+    // @ts-expect-error `asPlainText` is passed by EuiComboBoxTrigger
+    if (this.args.asPlainText) onClick?.(event);
+  }
+  /** The id of the options list while it is open (upstream `aria-controls`). */
+  static {
+    n(this.prototype, "handleClick", [action]);
+  }
+  get ariaControls() {
+    return this.args.select.isOpen ? this.args.listboxId : undefined;
+  }
   static {
-    setComponentTemplate(precompileTemplate("{{#if (and this.maybePlaceholder (not @select.searchText))}}\n  <p class=\"euiComboBoxPlaceholder\">\n    {{this.maybePlaceholder}}\n  </p>\n{{/if}}\n<div class=\"euiComboBox__input\" style=\"font-size: 14px; display: inline-block; position: relative;\">\n  <input tabindex=\"-1\" style=\"opacity: 0px; width:0px; height:0px; position: absolute; top: 40%; border:solid 1px transparent !important; margin:0px !important;\" class=\"fake-input-for-html-form-validity\" {{!--@glint-expect-error--}} {{validatableControl @isInvalid}} />\n  <input class=\"ember-power-select-trigger-multiple-input euiComboBox__input\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" {{!--@glint-expect-error--}} autofocus={{@autoFocus}} spellcheck={{false}} id=\"ember-power-select-trigger-multiple-input-{{@select.uniqueId}}\" value={{@select.searchText}} aria-controls={{@listboxId}} disabled={{@select.disabled}} tabindex={{@tabindex}} form=\"power-select-fake-form\" {{on \"focus\" this.handleFocus}} {{on \"blur\" this.handleBlur}} {{on \"input\" this.handleInput}} {{on \"keydown\" this.handleKeydown}} />\n</div>", {
+    setComponentTemplate(precompileTemplate("<div class={{this.containerClass}}>\n  <input tabindex=\"-1\" aria-hidden=\"true\" style=\"opacity: 0; width:0px; height:0px; position: absolute; top: 40%; border:solid 1px transparent !important; margin:0px !important; padding: 0; pointer-events: none;\" class=\"fake-input-for-html-form-validity\" {{!--@glint-expect-error--}} {{validatableControl @isInvalid}} />\n  <input class=\"ember-power-select-trigger-multiple-input euiComboBox__input\n      {{this.inputClass}}\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" {{!--@glint-expect-error--}} autofocus={{@autoFocus}} spellcheck={{false}} id=\"ember-power-select-trigger-multiple-input-{{@select.uniqueId}}\" data-test-subj=\"comboBoxSearchInput\" value={{this.value}} role={{if @role @role \"combobox\"}} aria-autocomplete=\"list\" aria-haspopup=\"listbox\" aria-expanded={{if @select.isOpen \"true\" \"false\"}} aria-controls={{this.ariaControls}} {{!-- @glint-expect-error `required` is passed by EuiComboBoxTrigger --}} aria-required={{if @required \"true\"}} aria-activedescendant={{if this.hasActiveOption @ariaActiveDescendant}} aria-label={{@ariaLabel}} aria-labelledby={{@ariaLabelledBy}} aria-describedby={{@ariaDescribedBy}} {{!-- @glint-expect-error `isInvalid` is passed by EuiComboBoxTrigger --}} aria-invalid={{if @isInvalid \"true\"}} placeholder={{this.maybePlaceholder}} disabled={{@select.disabled}} tabindex={{@tabindex}} form=\"power-select-fake-form\" {{on \"focus\" this.handleFocus}} {{on \"blur\" this.handleBlur}} {{on \"input\" this.handleInput}} {{on \"keydown\" this.handleKeydown}} {{on \"click\" this.handleClick}} {{this.registerInput}} />\n</div>", {
       strictMode: true,
       scope: () => ({
-        and,
-        not,
         validatableControl,
         on
       })