@ember-eui/core 14.0.0 → 14.1.0

package/dist/components/eui-selectable-template-sitewide.js

@@ -0,0 +1,129 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { hash } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+import cssStyle from '../-private/css-style.js';
+import EuiAvatar from './eui-avatar.js';
+import EuiHighlight from './eui-highlight.js';
+import EuiIcon from './eui-icon.js';
+import EuiLoadingSpinner from './eui-loading-spinner.js';
+import EuiPopoverComponent from './eui-popover.js';
+import EuiPopoverFooter from './eui-popover-footer.js';
+import EuiPopoverTitle from './eui-popover-title.js';
+import EuiSelectable from './eui-selectable.js';
+import EuiSpacer from './eui-spacer.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i, n } from 'decorator-transforms/runtime-esm';
+
+function metaClass(meta) {
+  return meta.type ? `euiSelectableTemplateSitewide__optionMeta euiSelectableTemplateSitewide__optionMeta--${meta.type}` : 'euiSelectableTemplateSitewide__optionMeta';
+}
+class EuiSelectableTemplateSitewide extends Component {
+  static {
+    g(this.prototype, "euiI18n", [service]);
+  }
+  #euiI18n = (i(this, "euiI18n"), void 0);
+  static {
+    g(this.prototype, "isOpen", [tracked], function () {
+      return false;
+    });
+  }
+  #isOpen = (i(this, "isOpen"), void 0);
+  get formattedOptions() {
+    return this.args.options.map(option => ({
+      key: option.label,
+      ...option,
+      className: ['euiSelectableTemplateSitewide__listItem', option.className].filter(Boolean).join(' ')
+    }));
+  }
+  get placeholder() {
+    return this.args.placeholder ?? this.euiI18n.lookupToken('euiSelectableTemplateSitewide.searchPlaceholder', 'Search for anything...');
+  }
+  get loadingText() {
+    return this.euiI18n.lookupToken('euiSelectableTemplateSitewide.loadingResults', 'Loading results');
+  }
+  get noResultsText() {
+    return this.euiI18n.lookupToken('euiSelectableTemplateSitewide.noResults', 'No results available');
+  }
+  get goTo() {
+    return this.euiI18n.lookupToken('euiSelectableTemplateSitewide.onFocusBadgeGoTo', 'Go to');
+  }
+  open() {
+    this.isOpen = true;
+  }
+  static {
+    n(this.prototype, "open", [action]);
+  }
+  close() {
+    this.isOpen = false;
+  }
+  static {
+    n(this.prototype, "close", [action]);
+  }
+  toggle() {
+    this.isOpen = !this.isOpen;
+  }
+  static {
+    n(this.prototype, "toggle", [action]);
+  }
+  onSearchBlur(event) {
+    const next = event.relatedTarget;
+    const panel = event.currentTarget.closest('.euiSelectableTemplateSitewide')?.querySelector('.euiSelectableTemplateSitewide__popover');
+    // moving into the results keeps the popover open
+    if (next && panel?.contains(next)) return;
+    if (next && document.querySelector('.euiPopover__panel')?.contains(next)) return;
+    this.isOpen = false;
+  }
+  static {
+    n(this.prototype, "onSearchBlur", [action]);
+  }
+  onChange(options) {
+    this.args.onChange?.(options);
+  }
+  static {
+    n(this.prototype, "onChange", [action]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<EuiSelectable class=\"euiSelectableTemplateSitewide\" @options={{this.formattedOptions}} @onChange={{this.onChange}} @singleSelection={{true}} @searchable={{true}} @isLoading={{@isLoading}} @isPreFiltered={{@isPreFiltered}} @searchProps={{hash placeholder=this.placeholder onSearch=@onSearch}} @listProps={{hash rowHeight=68 showIcons=false onFocusBadge=(hash text=this.goTo iconSide=\"right\")}} @loadingMessage={{this.loadingText}} @emptyMessage={{this.noResultsText}} @noMatchesMessage={{this.noResultsText}} ...attributes as |parts|>\n  <EuiPopover @isOpen={{this.isOpen}} @closePopover={{this.close}} @panelPaddingSize=\"none\" @ownFocus={{if (has-block \"popoverButton\") true false}} @display={{if (has-block \"popoverButton\") \"inlineBlock\" \"block\"}}>\n    <:button>\n      {{#if (has-block \"popoverButton\")}}\n        {{yield this.toggle to=\"popoverButton\"}}\n      {{else if parts.search}}\n        <parts.search class=\"euiSelectableTemplateSitewide__search\" aria-label={{this.placeholder}} {{on \"focus\" this.open}} {{on \"input\" this.open}} {{on \"blur\" this.onSearchBlur}} />\n      {{/if}}\n    </:button>\n    <:content>\n      <div class=\"euiSelectableTemplateSitewide__popover\" style={{cssStyle (hash width=(if @popoverWidth @popoverWidth 600) maxWidth=\"100%\")}}>\n        {{#if (or2 (has-block \"popoverTitle\") (has-block \"popoverButton\"))}}\n          <EuiPopoverTitle @paddingSize=\"s\">\n            {{yield to=\"popoverTitle\"}}\n            {{#if (has-block \"popoverButton\")}}\n              {{#if (has-block \"popoverTitle\")}}\n                <EuiSpacer />\n              {{/if}}\n              {{#if parts.search}}\n                <parts.search class=\"euiSelectableTemplateSitewide__search\" aria-label={{this.placeholder}} />\n              {{/if}}\n            {{/if}}\n          </EuiPopoverTitle>\n        {{/if}}\n        {{#if @isLoading}}\n          <div class=\"euiText euiText--extraSmall euiSelectableMessage\" style=\"min-height: 300px;\">\n            <EuiLoadingSpinner @size=\"l\" />\n            <br />\n            <p>{{this.loadingText}}</p>\n          </div>\n        {{else}}\n          <parts.list class=\"euiSelectableTemplateSitewide__list\">\n            <:option as |option searchValue|>\n              <EuiHighlight class=\"euiSelectableTemplateSitewide__listItemTitle\" @text={{option.label}} @search={{searchValue}} />\n              {{#if (metaOf option)}}\n                <span class=\"euiSelectableTemplateSitewide__optionMetasList\">\n                  {{#each (metaOf option) as |meta|}}\n                    <EuiHighlight class={{metaClass meta}} @text={{meta.text}} @search={{if meta.highlightSearchString searchValue \"\"}} />\n                  {{/each}}\n                </span>\n              {{/if}}\n            </:option>\n            <:optionPrepend as |option|>\n              {{~#let (iconOf option) as |icon|~}}\n                {{~#if icon~}}\n                  <EuiIcon @type={{icon.type}} @color={{if icon.color icon.color \"subdued\"}} @size=\"l\" />\n                {{~/if~}}\n              {{~/let~}}\n            </:optionPrepend>\n            <:optionAppend as |option|>\n              {{~#let (avatarOf option) as |avatar|~}}\n                {{~#if avatar~}}\n                  <EuiAvatar @name={{avatar.name}} @type={{if avatar.type avatar.type \"space\"}} @color={{avatar.color}} @size=\"s\" />\n                {{~/if~}}\n              {{~/let~}}\n            </:optionAppend>\n          </parts.list>\n        {{/if}}\n        {{#if (has-block \"popoverFooter\")}}\n          <EuiPopoverFooter @paddingSize=\"s\">\n            {{yield to=\"popoverFooter\"}}\n          </EuiPopoverFooter>\n        {{/if}}\n      </div>\n    </:content>\n  </EuiPopover>\n</EuiSelectable>", {
+      strictMode: true,
+      scope: () => ({
+        EuiSelectable,
+        hash,
+        EuiPopover: EuiPopoverComponent,
+        on,
+        cssStyle,
+        or2,
+        EuiPopoverTitle,
+        EuiSpacer,
+        EuiLoadingSpinner,
+        EuiHighlight,
+        metaOf,
+        metaClass,
+        iconOf,
+        EuiIcon,
+        avatarOf,
+        EuiAvatar,
+        EuiPopoverFooter
+      })
+    }), this);
+  }
+}
+function or2(a, b) {
+  return Boolean(a || b);
+}
+function metaOf(option) {
+  const meta = option.meta;
+  return meta?.length ? meta : undefined;
+}
+function iconOf(option) {
+  return option.icon;
+}
+function avatarOf(option) {
+  return option.avatar;
+}
+
+export { EuiSelectableTemplateSitewide as default };
+//# sourceMappingURL=eui-selectable-template-sitewide.js.map

package/dist/components/eui-selectable-template-sitewide.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-selectable-template-sitewide.js","sources":["../../src/components/eui-selectable-template-sitewide.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { hash } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport { action } from '@ember/object';\nimport { service } from '@ember/service';\n\nimport cssStyle from '../-private/css-style.ts';\nimport EuiAvatar from './eui-avatar.gts';\nimport EuiHighlight from './eui-highlight.gts';\nimport EuiIcon from './eui-icon.gts';\nimport EuiLoadingSpinner from './eui-loading-spinner.gts';\nimport EuiPopover from './eui-popover.gts';\nimport EuiPopoverFooter from './eui-popover-footer.gts';\nimport EuiPopoverTitle from './eui-popover-title.gts';\nimport EuiSelectable from './eui-selectable.gts';\nimport EuiSpacer from './eui-spacer.gts';\n\nimport type EuiI18n from '../services/eui-i18n';\nimport type { EuiSelectableOption } from '../-private/selectable-options.ts';\nimport type { EuiAvatarSignature } from './eui-avatar';\nimport type { EuiIconSignature } from './eui-icon';\n\nexport interface EuiSelectableTemplateSitewideMeta {\n  /** The text. */\n  text: string;\n  /**\n   * `'application'`, `'deployment'`, `'article'`, `'case'` or\n   * `'platform'`, each with its own color; anything else is plain.\n   */\n  type?: string;\n  /** Highlights the search in this text too. */\n  highlightSearchString?: boolean;\n}\n\nexport interface EuiSelectableTemplateSitewideOption extends EuiSelectableOption {\n  /** Icon before the label: `{ type, color }` (subdued by default). */\n  icon?: { type: EuiIconSignature['Args']['type']; color?: EuiIconSignature['Args']['color'] };\n  /** Avatar after the label, e.g. the space it belongs to: `{ name, type, color }`. */\n  avatar?: {\n    name: string;\n    type?: EuiAvatarSignature['Args']['type'];\n    color?: EuiAvatarSignature['Args']['color'];\n  };\n  /** Details under the label, e.g. its type and where it lives. */\n  meta?: EuiSelectableTemplateSitewideMeta[];\n}\n\n/**\n * The search of a whole site or app (\"Search for anything…\"): a search\n * field that opens a popover of results with icons, details and avatars.\n * You provide the results (filtered from the search, e.g. by a server)\n * and navigate when one is chosen (`@onChange` gets the options with the\n * chosen one `checked: 'on'`).\n */\nexport interface EuiSelectableTemplateSitewideSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** The results. */\n    options: EuiSelectableTemplateSitewideOption[];\n    /** Called with the options, the chosen one `checked: 'on'`. */\n    onChange?: (options: EuiSelectableTemplateSitewideOption[]) => void;\n    /** Called with the search text as you type. */\n    onSearch?: (searchValue: string) => void;\n    /** Shows \"Loading results\" instead of the list. */\n    isLoading?: boolean;\n    /** Placeholder of the search. Defaults to \"Search for anything...\". */\n    placeholder?: string;\n    /** Width of the popover in px. Defaults to `600`. */\n    popoverWidth?: number;\n    /**\n     * The results are already filtered (e.g. by a server), so the search\n     * does not filter them again. Defaults to `false`.\n     */\n    isPreFiltered?: boolean;\n  };\n  Blocks: {\n    /**\n     * A button opening the popover (the search moves into it), e.g. an\n     * icon in a narrow header; yields the function toggling it.\n     */\n    popoverButton: [toggle: () => void];\n    /** Content above the results, e.g. a title. */\n    popoverTitle: [];\n    /** Content below the results, e.g. keyboard shortcuts. */\n    popoverFooter: [];\n  };\n}\n\nfunction metaClass(meta: EuiSelectableTemplateSitewideMeta): string {\n  return meta.type\n    ? `euiSelectableTemplateSitewide__optionMeta euiSelectableTemplateSitewide__optionMeta--${meta.type}`\n    : 'euiSelectableTemplateSitewide__optionMeta';\n}\n\nexport default class EuiSelectableTemplateSitewide extends Component<EuiSelectableTemplateSitewideSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  @tracked isOpen = false;\n\n  get formattedOptions(): EuiSelectableTemplateSitewideOption[] {\n    return this.args.options.map((option) => ({\n      key: option.label,\n      ...option,\n      className: ['euiSelectableTemplateSitewide__listItem', option.className]\n        .filter(Boolean)\n        .join(' ')\n    }));\n  }\n\n  get placeholder(): string {\n    return (\n      this.args.placeholder ??\n      this.euiI18n.lookupToken(\n        'euiSelectableTemplateSitewide.searchPlaceholder',\n        'Search for anything...'\n      )\n    );\n  }\n\n  get loadingText(): string {\n    return this.euiI18n.lookupToken('euiSelectableTemplateSitewide.loadingResults', 'Loading results');\n  }\n\n  get noResultsText(): string {\n    return this.euiI18n.lookupToken('euiSelectableTemplateSitewide.noResults', 'No results available');\n  }\n\n  get goTo(): string {\n    return this.euiI18n.lookupToken('euiSelectableTemplateSitewide.onFocusBadgeGoTo', 'Go to');\n  }\n\n  @action\n  open(): void {\n    this.isOpen = true;\n  }\n\n  @action\n  close(): void {\n    this.isOpen = false;\n  }\n\n  @action\n  toggle(): void {\n    this.isOpen = !this.isOpen;\n  }\n\n  @action\n  onSearchBlur(event: FocusEvent): void {\n    const next = event.relatedTarget as Node | null;\n    const panel = (event.currentTarget as HTMLElement)\n      .closest('.euiSelectableTemplateSitewide')\n      ?.querySelector('.euiSelectableTemplateSitewide__popover');\n\n    // moving into the results keeps the popover open\n    if (next && panel?.contains(next)) return;\n    if (next && document.querySelector('.euiPopover__panel')?.contains(next)) return;\n\n    this.isOpen = false;\n  }\n\n  @action\n  onChange(options: EuiSelectableOption[]): void {\n    this.args.onChange?.(options as EuiSelectableTemplateSitewideOption[]);\n  }\n\n  <template>\n    <EuiSelectable\n      class=\"euiSelectableTemplateSitewide\"\n      @options={{this.formattedOptions}}\n      @onChange={{this.onChange}}\n      @singleSelection={{true}}\n      @searchable={{true}}\n      @isLoading={{@isLoading}}\n      @isPreFiltered={{@isPreFiltered}}\n      @searchProps={{hash placeholder=this.placeholder onSearch=@onSearch}}\n      @listProps={{hash\n        rowHeight=68\n        showIcons=false\n        onFocusBadge=(hash text=this.goTo iconSide=\"right\")\n      }}\n      @loadingMessage={{this.loadingText}}\n      @emptyMessage={{this.noResultsText}}\n      @noMatchesMessage={{this.noResultsText}}\n      ...attributes\n      as |parts|\n    >\n      <EuiPopover\n        @isOpen={{this.isOpen}}\n        @closePopover={{this.close}}\n        @panelPaddingSize=\"none\"\n        @ownFocus={{if (has-block \"popoverButton\") true false}}\n        @display={{if (has-block \"popoverButton\") \"inlineBlock\" \"block\"}}\n      >\n        <:button>\n          {{#if (has-block \"popoverButton\")}}\n            {{yield this.toggle to=\"popoverButton\"}}\n          {{else if parts.search}}\n            <parts.search\n              class=\"euiSelectableTemplateSitewide__search\"\n              aria-label={{this.placeholder}}\n              {{on \"focus\" this.open}}\n              {{on \"input\" this.open}}\n              {{on \"blur\" this.onSearchBlur}}\n            />\n          {{/if}}\n        </:button>\n        <:content>\n          <div\n            class=\"euiSelectableTemplateSitewide__popover\"\n            style={{cssStyle\n              (hash\n                width=(if @popoverWidth @popoverWidth 600) maxWidth=\"100%\"\n              )\n            }}\n          >\n            {{#if (or2 (has-block \"popoverTitle\") (has-block \"popoverButton\"))}}\n              <EuiPopoverTitle @paddingSize=\"s\">\n                {{yield to=\"popoverTitle\"}}\n                {{#if (has-block \"popoverButton\")}}\n                  {{#if (has-block \"popoverTitle\")}}\n                    <EuiSpacer />\n                  {{/if}}\n                  {{#if parts.search}}\n                    <parts.search\n                      class=\"euiSelectableTemplateSitewide__search\"\n                      aria-label={{this.placeholder}}\n                    />\n                  {{/if}}\n                {{/if}}\n              </EuiPopoverTitle>\n            {{/if}}\n            {{#if @isLoading}}\n              <div\n                class=\"euiText euiText--extraSmall euiSelectableMessage\"\n                style=\"min-height: 300px;\"\n              >\n                <EuiLoadingSpinner @size=\"l\" />\n                <br />\n                <p>{{this.loadingText}}</p>\n              </div>\n            {{else}}\n              <parts.list class=\"euiSelectableTemplateSitewide__list\">\n                <:option as |option searchValue|>\n                  <EuiHighlight\n                    class=\"euiSelectableTemplateSitewide__listItemTitle\"\n                    @text={{option.label}}\n                    @search={{searchValue}}\n                  />\n                  {{#if (metaOf option)}}\n                    <span class=\"euiSelectableTemplateSitewide__optionMetasList\">\n                      {{#each (metaOf option) as |meta|}}\n                        <EuiHighlight\n                          class={{metaClass meta}}\n                          @text={{meta.text}}\n                          @search={{if meta.highlightSearchString searchValue \"\"}}\n                        />\n                      {{/each}}\n                    </span>\n                  {{/if}}\n                </:option>\n                <:optionPrepend as |option|>\n                  {{~#let (iconOf option) as |icon|~}}\n                    {{~#if icon~}}\n                      <EuiIcon\n                        @type={{icon.type}}\n                        @color={{if icon.color icon.color \"subdued\"}}\n                        @size=\"l\"\n                      />\n                    {{~/if~}}\n                  {{~/let~}}\n                </:optionPrepend>\n                <:optionAppend as |option|>\n                  {{~#let (avatarOf option) as |avatar|~}}\n                    {{~#if avatar~}}\n                      <EuiAvatar\n                        @name={{avatar.name}}\n                        @type={{if avatar.type avatar.type \"space\"}}\n                        @color={{avatar.color}}\n                        @size=\"s\"\n                      />\n                    {{~/if~}}\n                  {{~/let~}}\n                </:optionAppend>\n              </parts.list>\n            {{/if}}\n            {{#if (has-block \"popoverFooter\")}}\n              <EuiPopoverFooter @paddingSize=\"s\">\n                {{yield to=\"popoverFooter\"}}\n              </EuiPopoverFooter>\n            {{/if}}\n          </div>\n        </:content>\n      </EuiPopover>\n    </EuiSelectable>\n  </template>\n}\n\nfunction or2(a: unknown, b: unknown): boolean {\n  return Boolean(a || b);\n}\n\nfunction metaOf(option: EuiSelectableOption): EuiSelectableTemplateSitewideMeta[] | undefined {\n  const meta = (option as EuiSelectableTemplateSitewideOption).meta;\n\n  return meta?.length ? meta : undefined;\n}\n\nfunction iconOf(option: EuiSelectableOption): EuiSelectableTemplateSitewideOption['icon'] {\n  return (option as EuiSelectableTemplateSitewideOption).icon;\n}\n\nfunction avatarOf(option: EuiSelectableOption): EuiSelectableTemplateSitewideOption['avatar'] {\n  return (option as EuiSelectableTemplateSitewideOption).avatar;\n}\n"],"names":["metaClass","meta","type","EuiSelectableTemplateSitewide","Component","g","prototype","service","i","tracked","formattedOptions","args","options","map","option","key","label","className","filter","Boolean","join","placeholder","euiI18n","lookupToken","loadingText","noResultsText","goTo","open","isOpen","n","action","close","toggle","onSearchBlur","event","next","relatedTarget","panel","currentTarget","closest","querySelector","contains","document","onChange","setComponentTemplate","precompileTemplate","strictMode","scope","EuiSelectable","hash","EuiPopover","on","cssStyle","or2","EuiPopoverTitle","EuiSpacer","EuiLoadingSpinner","EuiHighlight","metaOf","iconOf","EuiIcon","avatarOf","EuiAvatar","EuiPopoverFooter","a","b","length","undefined","icon","avatar"],"mappings":"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"}

package/dist/components/eui-selectable.js

@@ -0,0 +1,231 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { hash } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+import { randomId } from '../-private/random-id.js';
+import { getMatchingOptions, toggleOption } from '../-private/selectable-options.js';
+import EuiLoadingSpinner from './eui-loading-spinner.js';
+import EuiSelectableList from './eui-selectable-list.js';
+import EuiSelectableMessage from './eui-selectable-message.js';
+import EuiSelectableSearch from './eui-selectable-search.js';
+import EuiSpacer from './eui-spacer.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i, n } from 'decorator-transforms/runtime-esm';
+
+class EuiSelectable extends Component {
+  static {
+    g(this.prototype, "euiI18n", [service]);
+  }
+  #euiI18n = (i(this, "euiI18n"), void 0);
+  static {
+    g(this.prototype, "searchValue", [tracked], function () {
+      return '';
+    });
+  }
+  #searchValue = (i(this, "searchValue"), void 0);
+  static {
+    g(this.prototype, "activeOptionIndex", [tracked]);
+  }
+  #activeOptionIndex = (i(this, "activeOptionIndex"), void 0);
+  static {
+    g(this.prototype, "isFocused", [tracked], function () {
+      return false;
+    });
+  }
+  #isFocused = (i(this, "isFocused"), void 0);
+  rootId = `euiSelectable_${randomId()}`;
+  preventOnFocus = false;
+  constructor(owner, args) {
+    super(owner, args);
+    this.searchValue = args.searchProps?.defaultValue ?? '';
+    // a single selected option starts as the current one
+    const checked = args.options.filter(option => option.checked);
+    if (args.singleSelection && checked.length === 1) {
+      const index = this.visibleOptions.indexOf(checked[0]);
+      if (index !== -1) this.activeOptionIndex = index;
+    }
+  }
+  get visibleOptions() {
+    return getMatchingOptions(this.args.options, this.searchValue, this.args.isPreFiltered);
+  }
+  get listId() {
+    return `${this.rootId}_listbox`;
+  }
+  get messageId() {
+    return `${this.rootId}_messageContent`;
+  }
+  makeOptionId = index => `${this.listId}_option-${index}`;
+  get activeDescendant() {
+    return this.activeOptionIndex === undefined ? undefined : this.makeOptionId(this.activeOptionIndex);
+  }
+  get placeholder() {
+    return this.args.searchProps?.placeholder ?? this.euiI18n.lookupToken('euiSelectable.placeholderName', 'Filter options');
+  }
+  get message() {
+    if (this.args.isLoading) {
+      return {
+        isLoading: true,
+        text: this.args.loadingMessage ?? this.euiI18n.lookupToken('euiSelectable.loadingOptions', 'Loading options')
+      };
+    }
+    if (this.searchValue && this.visibleOptions.length === 0) {
+      return this.args.noMatchesMessage ? {
+        text: this.args.noMatchesMessage
+      } : {
+        searchValue: this.searchValue
+      };
+    }
+    if (!this.args.options.length) {
+      return {
+        text: this.args.emptyMessage ?? this.euiI18n.lookupToken('euiSelectable.noAvailableOptions', 'No options available')
+      };
+    }
+    return undefined;
+  }
+  get noMatchesSuffix() {
+    return this.euiI18n.lookupToken('euiSelectable.noMatchingOptions', "{searchValue} doesn't match any options", {
+      searchValue: '\u0000'
+    }).split('\u0000').slice(1).join('');
+  }
+  get noMatchesPrefix() {
+    return this.euiI18n.lookupToken('euiSelectable.noMatchingOptions', "{searchValue} doesn't match any options", {
+      searchValue: '\u0000'
+    }).split('\u0000')[0];
+  }
+  isSelectable = option => Boolean(option && !option.disabled && !option.isGroupLabel);
+  onMouseDown() {
+    // a click on an option must not first move the current option
+    this.preventOnFocus = true;
+  }
+  static {
+    n(this.prototype, "onMouseDown", [action]);
+  }
+  onFocus() {
+    if (this.preventOnFocus) {
+      this.preventOnFocus = false;
+      return;
+    }
+    if (!this.visibleOptions.length || this.activeOptionIndex) return;
+    const firstChecked = this.visibleOptions.findIndex(option => option.checked && this.isSelectable(option));
+    this.activeOptionIndex = firstChecked > -1 ? firstChecked : this.visibleOptions.findIndex(this.isSelectable);
+    this.isFocused = true;
+  }
+  static {
+    n(this.prototype, "onFocus", [action]);
+  }
+  onBlur(event) {
+    const container = event.currentTarget;
+    if (event.relatedTarget && container.contains(event.relatedTarget)) return;
+    this.activeOptionIndex = undefined;
+    this.isFocused = false;
+  }
+  static {
+    n(this.prototype, "onBlur", [action]);
+  }
+  onKeyDown(event) {
+    switch (event.key) {
+      case 'ArrowUp':
+        event.preventDefault();
+        event.stopPropagation();
+        this.moveActiveOption(-1);
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        event.stopPropagation();
+        this.moveActiveOption(1);
+        break;
+      case 'Enter':
+        {
+          event.preventDefault();
+          event.stopPropagation();
+          const option = this.activeOptionIndex !== undefined ? this.visibleOptions[this.activeOptionIndex] : undefined;
+          const options = option ? toggleOption(this.args.options, option, {
+            allowExclusions: this.args.allowExclusions,
+            singleSelection: this.args.singleSelection
+          }) : undefined;
+          if (options) this.args.onChange?.(options);
+          break;
+        }
+      default:
+        // typing in the search: the current option is picked again
+        this.activeOptionIndex = undefined;
+        break;
+    }
+  }
+  static {
+    n(this.prototype, "onKeyDown", [action]);
+  }
+  moveActiveOption(amount) {
+    const options = this.visibleOptions;
+    if (!options.length || !options.some(this.isSelectable)) return;
+    const current = this.activeOptionIndex;
+    let next = current === undefined || current < 0 ? amount < 0 ? options.length - 1 : 0 : (current + amount + options.length) % options.length;
+    // skip group labels and disabled options
+    while (!this.isSelectable(options[next])) {
+      next = (next + (amount > 0 ? 1 : -1) + options.length) % options.length;
+    }
+    this.activeOptionIndex = next;
+  }
+  onSearchChange(matchingOptions, searchValue) {
+    this.searchValue = searchValue;
+    this.activeOptionIndex = undefined;
+    this.args.searchProps?.onSearch?.(searchValue, matchingOptions);
+    if (this.isFocused) this.onFocus();
+  }
+  static {
+    n(this.prototype, "onSearchChange", [action]);
+  }
+  setActiveOptionIndex(index) {
+    this.activeOptionIndex = index;
+  }
+  static {
+    n(this.prototype, "setActiveOptionIndex", [action]);
+  }
+  onOptionClick(options) {
+    this.args.onChange?.(options);
+  }
+  static {
+    n(this.prototype, "onOptionClick", [action]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<div class=\"euiSelectable {{if (isFull @height) \"euiSelectable-fullHeight\"}}\" {{on \"keydown\" this.onKeyDown}} {{on \"focusin\" this.onFocus}} {{on \"focusout\" this.onBlur}} {{on \"mousedown\" this.onMouseDown}} ...attributes>\n  {{#let (if @searchable (component EuiSelectableSearch options=@options onChange=this.onSearchChange placeholder=this.placeholder defaultValue=@searchProps.defaultValue compressed=@searchProps.compressed isPreFiltered=@isPreFiltered listId=(if this.message undefined this.listId))) (component SelectableBody selectable=this options=@options searchable=@searchable singleSelection=@singleSelection allowExclusions=@allowExclusions height=@height listProps=@listProps searchValue=this.searchValue activeOptionIndex=this.activeOptionIndex message=this.message) as |Search List|}}\n    {{#if (has-block)}}\n      {{yield (hash list=List search=Search)}}\n    {{else}}\n      {{#if Search}}\n        <Search aria-activedescendant={{this.activeDescendant}} aria-label={{this.placeholder}} />\n      {{/if}}\n      <List @hasOption={{has-block \"option\"}} @hasOptionPrepend={{has-block \"optionPrepend\"}} @hasOptionAppend={{has-block \"optionAppend\"}}>\n        <:option as |option searchValue|>\n          {{yield option searchValue to=\"option\"}}\n        </:option>\n        <:optionPrepend as |option|>{{yield option to=\"optionPrepend\"}}</:optionPrepend>\n        <:optionAppend as |option|>{{yield option to=\"optionAppend\"}}</:optionAppend>\n      </List>\n    {{/if}}\n  {{/let}}\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        isFull,
+        on,
+        EuiSelectableSearch,
+        SelectableBody,
+        hash
+      })
+    }), this);
+  }
+}
+function flag(explicit, hasBlock) {
+  return explicit ?? hasBlock;
+}
+function isFull(height) {
+  return height === 'full';
+}
+/** The list, or the message replacing it (loading, no matches, empty). */class SelectableBody extends Component {
+  get selectable() {
+    return this.args.selectable;
+  }
+  static {
+    setComponentTemplate(precompileTemplate("{{#if @message}}\n  <EuiSelectableMessage id={{this.selectable.messageId}} @bordered={{@listProps.bordered}} ...attributes>\n    {{#if @message.isLoading}}\n      <EuiLoadingSpinner @size=\"m\" />\n      <EuiSpacer @size=\"xs\" />\n    {{/if}}\n    <p>\n      {{#if @message.searchValue}}\n        {{this.selectable.noMatchesPrefix}}<strong>{{@message.searchValue}}</strong>{{this.selectable.noMatchesSuffix}}\n      {{else}}\n        {{@message.text}}\n      {{/if}}\n    </p>\n  </EuiSelectableMessage>\n{{else}}\n  <EuiSelectableList @options={{@options}} @visibleOptions={{this.selectable.visibleOptions}} @searchValue={{@searchValue}} @activeOptionIndex={{@activeOptionIndex}} @setActiveOptionIndex={{this.selectable.setActiveOptionIndex}} @onOptionClick={{this.selectable.onOptionClick}} @singleSelection={{@singleSelection}} @allowExclusions={{@allowExclusions}} @searchable={{@searchable}} @height={{@height}} @bordered={{@listProps.bordered}} @showIcons={{@listProps.showIcons}} @rowHeight={{@listProps.rowHeight}} @onFocusBadge={{@listProps.onFocusBadge}} @listId={{this.selectable.listId}} @makeOptionId={{this.selectable.makeOptionId}} @hasOption={{flag @hasOption (has-block \"option\")}} @hasOptionPrepend={{flag @hasOptionPrepend (has-block \"optionPrepend\")}} @hasOptionAppend={{flag @hasOptionAppend (has-block \"optionAppend\")}} aria-label={{if @searchable this.selectable.placeholder}} ...attributes>\n    <:option as |option searchValue|>{{yield option searchValue to=\"option\"}}</:option>\n    <:optionPrepend as |option|>{{yield option to=\"optionPrepend\"}}</:optionPrepend>\n    <:optionAppend as |option|>{{yield option to=\"optionAppend\"}}</:optionAppend>\n  </EuiSelectableList>\n{{/if}}", {
+      strictMode: true,
+      scope: () => ({
+        EuiSelectableMessage,
+        EuiLoadingSpinner,
+        EuiSpacer,
+        EuiSelectableList,
+        flag
+      })
+    }), this);
+  }
+}
+
+export { EuiSelectable as default };
+//# sourceMappingURL=eui-selectable.js.map

package/dist/components/eui-selectable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-selectable.js","sources":["../../src/components/eui-selectable.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { hash } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport { action } from '@ember/object';\nimport { service } from '@ember/service';\n\nimport { randomId } from '../-private/random-id.ts';\nimport { getMatchingOptions, toggleOption } from '../-private/selectable-options.ts';\nimport EuiLoadingSpinner from './eui-loading-spinner.gts';\nimport EuiSelectableList from './eui-selectable-list.gts';\nimport EuiSelectableMessage from './eui-selectable-message.gts';\nimport EuiSelectableSearch from './eui-selectable-search.gts';\nimport EuiSpacer from './eui-spacer.gts';\n\nimport type EuiI18n from '../services/eui-i18n';\nimport type { EuiSelectableOption } from '../-private/selectable-options.ts';\nimport type Owner from '@ember/owner';\nimport type { ComponentLike } from '@glint/template';\n\nexport type { EuiSelectableOption };\n\ninterface OptionBlocks {\n  /** Renders an option's label yourself; yields the option and the search. */\n  option: [option: EuiSelectableOption, searchValue: string];\n  /** Content before each label (e.g. an icon); yields the option. */\n  optionPrepend: [option: EuiSelectableOption];\n  /** Content after each label (e.g. a badge); yields the option. */\n  optionAppend: [option: EuiSelectableOption];\n}\n\n/**\n * A list of options to pick one or several from, optionally with a search\n * field. It is the building block of pickers: put it in a popover for a\n * filter menu, or in a panel for a \"choose fields\" list. Options are\n * `{ label, checked }` objects; `@onChange` gets them all back with the\n * change applied.\n */\nexport interface EuiSelectableSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** The options: `{ label, checked, disabled, isGroupLabel, prepend, append }`. */\n    options: EuiSelectableOption[];\n    /** Called with all options after one is checked or unchecked. */\n    onChange?: (options: EuiSelectableOption[]) => void;\n    /** Adds a search field that filters the options. */\n    searchable?: boolean;\n    /**\n     * Options of the search field: `{ placeholder, compressed,\n     * defaultValue, onSearch(searchValue, matchingOptions) }`.\n     */\n    searchProps?: {\n      placeholder?: string;\n      compressed?: boolean;\n      defaultValue?: string;\n      onSearch?: (searchValue: string, matchingOptions: EuiSelectableOption[]) => void;\n    };\n    /**\n     * `true`: one option at most; `'always'`: exactly one (clicking the\n     * checked option keeps it).\n     */\n    singleSelection?: boolean | 'always';\n    /** Pressing a checked option excludes it (`checked: 'off'`, a cross). */\n    allowExclusions?: boolean;\n    /** Shows a loading message instead of the list. */\n    isLoading?: boolean;\n    /** The options are already filtered (e.g. by a server): the search does not filter. */\n    isPreFiltered?: boolean;\n    /** Height of the list in px, or `'full'` to fill the container. */\n    height?: number | 'full';\n    /**\n     * Options of the list: `{ bordered, showIcons, rowHeight, onFocusBadge }`.\n     */\n    listProps?: {\n      bordered?: boolean;\n      showIcons?: boolean;\n      rowHeight?: number;\n      onFocusBadge?: boolean | { text?: string; iconSide?: 'left' | 'right' };\n    };\n    /** Message while `@isLoading`. Defaults to \"Loading options\". */\n    loadingMessage?: string;\n    /** Message when the search matches nothing. */\n    noMatchesMessage?: string;\n    /** Message when there are no options. Defaults to \"No options available\". */\n    emptyMessage?: string;\n  };\n  Blocks: {\n    /**\n     * Lays out the parts yourself: yields `{ list, search }` components,\n     * e.g. `as |parts|` → `<parts.search />` … `<parts.list />`. Without\n     * it, the search (if any) comes above the list.\n     */\n    default: [\n      {\n        list: ComponentLike<{ Element: HTMLDivElement; Blocks: OptionBlocks }>;\n        search: ComponentLike<{ Element: HTMLInputElement }> | undefined;\n      }\n    ];\n  } & OptionBlocks;\n}\n\nexport default class EuiSelectable extends Component<EuiSelectableSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  @tracked searchValue = '';\n  @tracked activeOptionIndex?: number;\n  @tracked isFocused = false;\n\n  rootId = `euiSelectable_${randomId()}`;\n  preventOnFocus = false;\n\n  constructor(owner: Owner, args: EuiSelectableSignature['Args']) {\n    super(owner, args);\n    this.searchValue = args.searchProps?.defaultValue ?? '';\n\n    // a single selected option starts as the current one\n    const checked = args.options.filter((option) => option.checked);\n\n    if (args.singleSelection && checked.length === 1) {\n      const index = this.visibleOptions.indexOf(checked[0]!);\n\n      if (index !== -1) this.activeOptionIndex = index;\n    }\n  }\n\n  get visibleOptions(): EuiSelectableOption[] {\n    return getMatchingOptions(this.args.options, this.searchValue, this.args.isPreFiltered);\n  }\n\n  get listId(): string {\n    return `${this.rootId}_listbox`;\n  }\n\n  get messageId(): string {\n    return `${this.rootId}_messageContent`;\n  }\n\n  makeOptionId = (index: number): string => `${this.listId}_option-${index}`;\n\n  get activeDescendant(): string | undefined {\n    return this.activeOptionIndex === undefined ? undefined : this.makeOptionId(this.activeOptionIndex);\n  }\n\n  get placeholder(): string {\n    return (\n      this.args.searchProps?.placeholder ??\n      this.euiI18n.lookupToken('euiSelectable.placeholderName', 'Filter options')\n    );\n  }\n\n  get message(): { text?: string; isLoading?: boolean; searchValue?: string } | undefined {\n    if (this.args.isLoading) {\n      return {\n        isLoading: true,\n        text:\n          this.args.loadingMessage ??\n          this.euiI18n.lookupToken('euiSelectable.loadingOptions', 'Loading options')\n      };\n    }\n\n    if (this.searchValue && this.visibleOptions.length === 0) {\n      return this.args.noMatchesMessage\n        ? { text: this.args.noMatchesMessage }\n        : { searchValue: this.searchValue };\n    }\n\n    if (!this.args.options.length) {\n      return {\n        text:\n          this.args.emptyMessage ??\n          this.euiI18n.lookupToken('euiSelectable.noAvailableOptions', 'No options available')\n      };\n    }\n\n    return undefined;\n  }\n\n  get noMatchesSuffix(): string {\n    return this.euiI18n\n      .lookupToken('euiSelectable.noMatchingOptions', \"{searchValue} doesn't match any options\", {\n        searchValue: '\\u0000'\n      })\n      .split('\\u0000')\n      .slice(1)\n      .join('');\n  }\n\n  get noMatchesPrefix(): string {\n    return this.euiI18n\n      .lookupToken('euiSelectable.noMatchingOptions', \"{searchValue} doesn't match any options\", {\n        searchValue: '\\u0000'\n      })\n      .split('\\u0000')[0]!;\n  }\n\n  isSelectable = (option: EuiSelectableOption | undefined): boolean =>\n    Boolean(option && !option.disabled && !option.isGroupLabel);\n\n  @action\n  onMouseDown(): void {\n    // a click on an option must not first move the current option\n    this.preventOnFocus = true;\n  }\n\n  @action\n  onFocus(): void {\n    if (this.preventOnFocus) {\n      this.preventOnFocus = false;\n\n      return;\n    }\n\n    if (!this.visibleOptions.length || this.activeOptionIndex) return;\n\n    const firstChecked = this.visibleOptions.findIndex(\n      (option) => option.checked && this.isSelectable(option)\n    );\n\n    this.activeOptionIndex =\n      firstChecked > -1 ? firstChecked : this.visibleOptions.findIndex(this.isSelectable);\n    this.isFocused = true;\n  }\n\n  @action\n  onBlur(event: FocusEvent): void {\n    const container = event.currentTarget as HTMLElement;\n\n    if (event.relatedTarget && container.contains(event.relatedTarget as Node)) return;\n\n    this.activeOptionIndex = undefined;\n    this.isFocused = false;\n  }\n\n  @action\n  onKeyDown(event: KeyboardEvent): void {\n    switch (event.key) {\n      case 'ArrowUp':\n        event.preventDefault();\n        event.stopPropagation();\n        this.moveActiveOption(-1);\n        break;\n      case 'ArrowDown':\n        event.preventDefault();\n        event.stopPropagation();\n        this.moveActiveOption(1);\n        break;\n      case 'Enter': {\n        event.preventDefault();\n        event.stopPropagation();\n\n        const option =\n          this.activeOptionIndex !== undefined\n            ? this.visibleOptions[this.activeOptionIndex]\n            : undefined;\n\n        const options = option\n          ? toggleOption(this.args.options, option, {\n              allowExclusions: this.args.allowExclusions,\n              singleSelection: this.args.singleSelection\n            })\n          : undefined;\n\n        if (options) this.args.onChange?.(options);\n        break;\n      }\n      default:\n        // typing in the search: the current option is picked again\n        this.activeOptionIndex = undefined;\n        break;\n    }\n  }\n\n  moveActiveOption(amount: number): void {\n    const options = this.visibleOptions;\n\n    if (!options.length || !options.some(this.isSelectable)) return;\n\n    const current = this.activeOptionIndex;\n    let next =\n      current === undefined || current < 0\n        ? amount < 0\n          ? options.length - 1\n          : 0\n        : (current + amount + options.length) % options.length;\n\n    // skip group labels and disabled options\n    while (!this.isSelectable(options[next])) {\n      next = (next + (amount > 0 ? 1 : -1) + options.length) % options.length;\n    }\n\n    this.activeOptionIndex = next;\n  }\n\n  @action\n  onSearchChange(matchingOptions: EuiSelectableOption[], searchValue: string): void {\n    this.searchValue = searchValue;\n    this.activeOptionIndex = undefined;\n    this.args.searchProps?.onSearch?.(searchValue, matchingOptions);\n\n    if (this.isFocused) this.onFocus();\n  }\n\n  @action\n  setActiveOptionIndex(index: number): void {\n    this.activeOptionIndex = index;\n  }\n\n  @action\n  onOptionClick(options: EuiSelectableOption[]): void {\n    this.args.onChange?.(options);\n  }\n\n  <template>\n    <div\n      class=\"euiSelectable {{if (isFull @height) 'euiSelectable-fullHeight'}}\"\n      {{on \"keydown\" this.onKeyDown}}\n      {{on \"focusin\" this.onFocus}}\n      {{on \"focusout\" this.onBlur}}\n      {{on \"mousedown\" this.onMouseDown}}\n      ...attributes\n    >\n      {{#let\n        (if\n          @searchable\n          (component\n            EuiSelectableSearch\n            options=@options\n            onChange=this.onSearchChange\n            placeholder=this.placeholder\n            defaultValue=@searchProps.defaultValue\n            compressed=@searchProps.compressed\n            isPreFiltered=@isPreFiltered\n            listId=(if this.message undefined this.listId)\n          )\n        )\n        (component\n          SelectableBody\n          selectable=this\n          options=@options\n          searchable=@searchable\n          singleSelection=@singleSelection\n          allowExclusions=@allowExclusions\n          height=@height\n          listProps=@listProps\n          searchValue=this.searchValue\n          activeOptionIndex=this.activeOptionIndex\n          message=this.message\n        )\n        as |Search List|\n      }}\n        {{#if (has-block)}}\n          {{yield (hash list=List search=Search)}}\n        {{else}}\n          {{#if Search}}\n            <Search\n              aria-activedescendant={{this.activeDescendant}}\n              aria-label={{this.placeholder}}\n            />\n          {{/if}}\n          <List\n            @hasOption={{has-block \"option\"}}\n            @hasOptionPrepend={{has-block \"optionPrepend\"}}\n            @hasOptionAppend={{has-block \"optionAppend\"}}\n          >\n            <:option as |option searchValue|>\n              {{yield option searchValue to=\"option\"}}\n            </:option>\n            <:optionPrepend as |option|>{{yield option to=\"optionPrepend\"}}</:optionPrepend>\n            <:optionAppend as |option|>{{yield option to=\"optionAppend\"}}</:optionAppend>\n          </List>\n        {{/if}}\n      {{/let}}\n    </div>\n  </template>\n}\n\nfunction flag(explicit: boolean | undefined, hasBlock: boolean): boolean {\n  return explicit ?? hasBlock;\n}\n\nfunction isFull(height: unknown): boolean {\n  return height === 'full';\n}\n\ninterface SelectableBodySignature {\n  Element: HTMLDivElement;\n  Args: {\n    selectable: EuiSelectable;\n    options: EuiSelectableOption[];\n    searchable?: boolean;\n    singleSelection?: boolean | 'always';\n    allowExclusions?: boolean;\n    height?: number | 'full';\n    listProps?: EuiSelectableSignature['Args']['listProps'];\n    searchValue: string;\n    activeOptionIndex?: number;\n    message?: EuiSelectable['message'];\n    hasOption?: boolean;\n    hasOptionPrepend?: boolean;\n    hasOptionAppend?: boolean;\n  };\n  Blocks: OptionBlocks;\n}\n\n/** The list, or the message replacing it (loading, no matches, empty). */\nclass SelectableBody extends Component<SelectableBodySignature> {\n  get selectable(): EuiSelectable {\n    return this.args.selectable;\n  }\n\n  <template>\n    {{#if @message}}\n      <EuiSelectableMessage\n        id={{this.selectable.messageId}}\n        @bordered={{@listProps.bordered}}\n        ...attributes\n      >\n        {{#if @message.isLoading}}\n          <EuiLoadingSpinner @size=\"m\" />\n          <EuiSpacer @size=\"xs\" />\n        {{/if}}\n        <p>\n          {{#if @message.searchValue}}\n            {{this.selectable.noMatchesPrefix}}<strong>{{@message.searchValue}}</strong>{{this.selectable.noMatchesSuffix}}\n          {{else}}\n            {{@message.text}}\n          {{/if}}\n        </p>\n      </EuiSelectableMessage>\n    {{else}}\n      <EuiSelectableList\n        @options={{@options}}\n        @visibleOptions={{this.selectable.visibleOptions}}\n        @searchValue={{@searchValue}}\n        @activeOptionIndex={{@activeOptionIndex}}\n        @setActiveOptionIndex={{this.selectable.setActiveOptionIndex}}\n        @onOptionClick={{this.selectable.onOptionClick}}\n        @singleSelection={{@singleSelection}}\n        @allowExclusions={{@allowExclusions}}\n        @searchable={{@searchable}}\n        @height={{@height}}\n        @bordered={{@listProps.bordered}}\n        @showIcons={{@listProps.showIcons}}\n        @rowHeight={{@listProps.rowHeight}}\n        @onFocusBadge={{@listProps.onFocusBadge}}\n        @listId={{this.selectable.listId}}\n        @makeOptionId={{this.selectable.makeOptionId}}\n        @hasOption={{flag @hasOption (has-block \"option\")}}\n        @hasOptionPrepend={{flag @hasOptionPrepend (has-block \"optionPrepend\")}}\n        @hasOptionAppend={{flag @hasOptionAppend (has-block \"optionAppend\")}}\n        aria-label={{if @searchable this.selectable.placeholder}}\n        ...attributes\n      >\n        <:option as |option searchValue|>{{yield option searchValue to=\"option\"}}</:option>\n        <:optionPrepend as |option|>{{yield option to=\"optionPrepend\"}}</:optionPrepend>\n        <:optionAppend as |option|>{{yield option to=\"optionAppend\"}}</:optionAppend>\n      </EuiSelectableList>\n    {{/if}}\n  </template>\n}\n"],"names":["EuiSelectable","Component","g","prototype","service","i","tracked","rootId","randomId","preventOnFocus","constructor","owner","args","searchValue","searchProps","defaultValue","checked","options","filter","option","singleSelection","length","index","visibleOptions","indexOf","activeOptionIndex","getMatchingOptions","isPreFiltered","listId","messageId","makeOptionId","activeDescendant","undefined","placeholder","euiI18n","lookupToken","message","isLoading","text","loadingMessage","noMatchesMessage","emptyMessage","noMatchesSuffix","split","slice","join","noMatchesPrefix","isSelectable","Boolean","disabled","isGroupLabel","onMouseDown","n","action","onFocus","firstChecked","findIndex","isFocused","onBlur","event","container","currentTarget","relatedTarget","contains","onKeyDown","key","preventDefault","stopPropagation","moveActiveOption","toggleOption","allowExclusions","onChange","amount","some","current","next","onSearchChange","matchingOptions","onSearch","setActiveOptionIndex","onOptionClick","setComponentTemplate","precompileTemplate","strictMode","scope","isFull","on","EuiSelectableSearch","SelectableBody","hash","flag","explicit","hasBlock","height","selectable","EuiSelectableMessage","EuiLoadingSpinner","EuiSpacer","EuiSelectableList"],"mappings":"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"}

package/dist/components/eui-show-for.js

@@ -43,6 +43,9 @@ class CurrentBreakPointHelper extends Helper {
     }
   }
 }
+
+/** Renders its content only on the given screen sizes. See EuiHideFor. */
+
 class EuiShowForComponent extends Component {
   currentBreakpointHelper = invokeHelper(this, CurrentBreakPointHelper, () => {
     return {

package/dist/components/eui-show-for.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-show-for.js","sources":["../../src/components/eui-show-for.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\n//@ts-ignore\nimport { getValue } from '@glimmer/tracking/primitives/cache';\nimport Helper from '@ember/component/helper';\n//@ts-ignore\nimport { invokeHelper } from '@ember/helper';\nimport { throttle } from '@ember/runloop';\n\nimport { getBreakpoint } from '../utils/breakpoint.ts';\n\nimport type { EuiBreakpointSize } from '../utils/breakpoint.ts';\n\nexport class CurrentBreakPointHelper extends Helper {\n  @tracked currentBreakpoint: string | undefined;\n  functionToCallOnWindowResize: undefined | (() => void);\n\n  compute([sizes]: [EuiHideForBreakpoints[] | 'all' | 'none']) {\n    this.currentBreakpoint = getBreakpoint(\n      typeof window === 'undefined' ? -Infinity : window.innerWidth\n    );\n\n    this.setupListeners();\n\n    return (\n      sizes === 'all' ||\n      sizes.includes(this.currentBreakpoint as EuiBreakpointSize)\n    );\n  }\n\n  willDestroy(): void {\n    super.willDestroy();\n    this.teardown();\n  }\n\n  setupListeners() {\n    this.functionToCallOnWindowResize = () => {\n      const fn = () => {\n        const newBreakpoint = getBreakpoint(window.innerWidth);\n\n        if (newBreakpoint !== this.currentBreakpoint) {\n          this.currentBreakpoint = newBreakpoint;\n        }\n      };\n\n      throttle(this, fn, 50);\n    };\n\n    window.addEventListener('resize', this.functionToCallOnWindowResize);\n  }\n\n  teardown() {\n    if (typeof this.functionToCallOnWindowResize === 'function') {\n      window.removeEventListener('resize', this.functionToCallOnWindowResize);\n      this.functionToCallOnWindowResize = undefined;\n    }\n  }\n}\n\nexport type EuiHideForBreakpoints = EuiBreakpointSize;\n\nexport interface EuiShowForArgs {\n  /**\n   * List of all the responsive sizes to hide the children for.\n   * Array of #EuiBreakpointSize\n   */\n  sizes: EuiHideForBreakpoints[] | 'all' | 'none';\n}\n\nexport interface EuiShowForSignature {\n  Args: EuiShowForArgs;\n  Blocks: {\n    default: [];\n  };\n}\n\nexport default class EuiShowForComponent extends Component<EuiShowForSignature> {\n  currentBreakpointHelper: any = invokeHelper(this, CurrentBreakPointHelper, () => {\n    return {\n      positional: [this.args.sizes]\n    };\n  });\n\n  get shouldShow() {\n    return getValue(this.currentBreakpointHelper);\n  }\n\n  <template>\n    {{#if this.shouldShow}}\n      {{yield}}\n    {{/if}}\n  </template>\n}\n"],"names":["CurrentBreakPointHelper","Helper","g","prototype","tracked","i","functionToCallOnWindowResize","compute","sizes","currentBreakpoint","getBreakpoint","window","Infinity","innerWidth","setupListeners","includes","willDestroy","teardown","fn","newBreakpoint","throttle","addEventListener","removeEventListener","undefined","EuiShowForComponent","Component","currentBreakpointHelper","invokeHelper","positional","args","shouldShow","getValue","setComponentTemplate","precompileTemplate","strictMode"],"mappings":";;;;;;;;;;;AAaO,MAAMA,uBAAgC,SAAAC,MAAA,CAAA;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,mBAAA,EAAA,CAC1CC,OAAA,CAAA,CAAA;AAAA;EAAA,kBAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,mBAAA,CAAA,EAAA,MAAA;EACDC,4BAA8B;AAE9BC,EAAAA,OAAAA,CAAQ,CAACC,KAAA,CAAkD,EAAE;AAC3D,IAAA,IAAI,CAACC,iBAAiB,GAAGC,aACvB,CAAA,OAAOC,WAAW,WAAc,GAAA,CAACC,QAAW,GAAAD,MAAA,CAAOE,UAAU,CAAA;IAG/D,IAAI,CAACC,cAAc,EAAA;IAEnB,OACEN,KAAU,KAAA,KAAA,IACVA,KAAM,CAAAO,QAAQ,CAAC,IAAI,CAACN,iBACtB,CAAA;AACF;AAEAO,EAAAA,WAAAA,GAAoB;IAClB,KAAK,CAACA,WAAA,EAAA;IACN,IAAI,CAACC,QAAQ,EAAA;AACf;AAEAH,EAAAA,cAAiBA,GAAA;IACf,IAAI,CAACR,4BAA4B,GAAG,MAAA;MAClC,MAAMY,EAAK,GAAAA,MAAA;AACT,QAAA,MAAMC,aAAA,GAAgBT,aAAc,CAAAC,MAAA,CAAOE,UAAU,CAAA;AAErD,QAAA,IAAIM,aAAkB,KAAA,IAAI,CAACV,iBAAiB,EAAE;UAC5C,IAAI,CAACA,iBAAiB,GAAGU,aAAA;AAC3B;OACF;AAEAC,MAAAA,QAAS,CAAA,IAAI,EAAEF,EAAI,EAAA,EAAA,CAAA;KACrB;IAEAP,MAAA,CAAOU,gBAAgB,CAAC,QAAU,EAAA,IAAI,CAACf,4BAA4B,CAAA;AACrE;AAEAW,EAAAA,QAAWA,GAAA;AACT,IAAA,IAAI,OAAO,IAAI,CAACX,4BAA4B,KAAK,UAAY,EAAA;MAC3DK,MAAA,CAAOW,mBAAmB,CAAC,QAAU,EAAA,IAAI,CAAChB,4BAA4B,CAAA;MACtE,IAAI,CAACA,4BAA4B,GAAGiB,SAAA;AACtC;AACF;AACF;AAmBe,MAAMC,4BAA4BC,SAAU,CAAA;AACzDC,EAAAA,uBAAA,GAA+BC,YAAa,CAAA,IAAI,EAAE3B,uBAAyB,EAAA,MAAA;IACzE,OAAO;AACL4B,MAAAA,UAAY,EAAA,CAAC,IAAI,CAACC,IAAI,CAACrB,KAAK;KAC9B;AACF,GAAG,CAAA;EAEH,IAAIsB,UAAaA,GAAA;AACf,IAAA,OAAOC,QAAA,CAAS,IAAI,CAACL,uBAAuB,CAAA;AAC9C;AAEA,EAAA;IAAAM,oBAAA,CAAAC,kBAAA,CAIA,+CAAA,EAAA;MAAAC,UAAA,EAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}
+{"version":3,"file":"eui-show-for.js","sources":["../../src/components/eui-show-for.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\n//@ts-ignore\nimport { getValue } from '@glimmer/tracking/primitives/cache';\nimport Helper from '@ember/component/helper';\n//@ts-ignore\nimport { invokeHelper } from '@ember/helper';\nimport { throttle } from '@ember/runloop';\n\nimport { getBreakpoint } from '../utils/breakpoint.ts';\n\nimport type { EuiBreakpointSize } from '../utils/breakpoint.ts';\n\nexport class CurrentBreakPointHelper extends Helper {\n  @tracked currentBreakpoint: string | undefined;\n  functionToCallOnWindowResize: undefined | (() => void);\n\n  compute([sizes]: [EuiHideForBreakpoints[] | 'all' | 'none']) {\n    this.currentBreakpoint = getBreakpoint(\n      typeof window === 'undefined' ? -Infinity : window.innerWidth\n    );\n\n    this.setupListeners();\n\n    return (\n      sizes === 'all' ||\n      sizes.includes(this.currentBreakpoint as EuiBreakpointSize)\n    );\n  }\n\n  willDestroy(): void {\n    super.willDestroy();\n    this.teardown();\n  }\n\n  setupListeners() {\n    this.functionToCallOnWindowResize = () => {\n      const fn = () => {\n        const newBreakpoint = getBreakpoint(window.innerWidth);\n\n        if (newBreakpoint !== this.currentBreakpoint) {\n          this.currentBreakpoint = newBreakpoint;\n        }\n      };\n\n      throttle(this, fn, 50);\n    };\n\n    window.addEventListener('resize', this.functionToCallOnWindowResize);\n  }\n\n  teardown() {\n    if (typeof this.functionToCallOnWindowResize === 'function') {\n      window.removeEventListener('resize', this.functionToCallOnWindowResize);\n      this.functionToCallOnWindowResize = undefined;\n    }\n  }\n}\n\nexport type EuiHideForBreakpoints = EuiBreakpointSize;\n\nexport interface EuiShowForArgs {\n  /**\n   * Screen sizes to show the content on: any of `'xs'`, `'s'`, `'m'`,\n   * `'l'`, `'xl'`, or `'all'`. E.g. `(array \"xs\" \"s\")` shows it only on\n   * phones.\n   */\n  sizes: EuiHideForBreakpoints[] | 'all' | 'none';\n}\n\n/** Renders its content only on the given screen sizes. See EuiHideFor. */\nexport interface EuiShowForSignature {\n  Args: EuiShowForArgs;\n  Blocks: {\n    /** The content. */\n    default: [];\n  };\n}\n\nexport default class EuiShowForComponent extends Component<EuiShowForSignature> {\n  currentBreakpointHelper: any = invokeHelper(this, CurrentBreakPointHelper, () => {\n    return {\n      positional: [this.args.sizes]\n    };\n  });\n\n  get shouldShow() {\n    return getValue(this.currentBreakpointHelper);\n  }\n\n  <template>\n    {{#if this.shouldShow}}\n      {{yield}}\n    {{/if}}\n  </template>\n}\n"],"names":["CurrentBreakPointHelper","Helper","g","prototype","tracked","i","functionToCallOnWindowResize","compute","sizes","currentBreakpoint","getBreakpoint","window","Infinity","innerWidth","setupListeners","includes","willDestroy","teardown","fn","newBreakpoint","throttle","addEventListener","removeEventListener","undefined","EuiShowForComponent","Component","currentBreakpointHelper","invokeHelper","positional","args","shouldShow","getValue","setComponentTemplate","precompileTemplate","strictMode"],"mappings":";;;;;;;;;;;AAaO,MAAMA,uBAAA,SAAgCC,MAAA,CAAA;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,mBAAA,EAAA,CAC1CC,OAAA,CAAA,CAAA;AAAA;EAAA,kBAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,mBAAA,CAAA,EAAA,MAAA;EACDC,4BAAA;AAEAC,EAAAA,OAAAA,CAAQ,CAACC,KAAA,CAAkD,EAAE;AAC3D,IAAA,IAAI,CAACC,iBAAiB,GAAGC,aAAA,CACvB,OAAOC,WAAW,WAAA,GAAc,CAACC,QAAA,GAAWD,MAAA,CAAOE,UAAU,CAAA;IAG/D,IAAI,CAACC,cAAc,EAAA;IAEnB,OACEN,KAAA,KAAU,KAAA,IACVA,KAAA,CAAMO,QAAQ,CAAC,IAAI,CAACN,iBAAqB,CAC3C;AACF,EAAA;AAEAO,EAAAA,WAAAA,GAAoB;IAClB,KAAK,CAACA,WAAA,EAAA;IACN,IAAI,CAACC,QAAQ,EAAA;AACf,EAAA;AAEAH,EAAAA,cAAAA,GAAiB;IACf,IAAI,CAACR,4BAA4B,GAAG,MAAA;MAClC,MAAMY,EAAA,GAAKA,MAAA;AACT,QAAA,MAAMC,aAAA,GAAgBT,aAAA,CAAcC,MAAA,CAAOE,UAAU,CAAA;AAErD,QAAA,IAAIM,aAAA,KAAkB,IAAI,CAACV,iBAAiB,EAAE;UAC5C,IAAI,CAACA,iBAAiB,GAAGU,aAAA;AAC3B,QAAA;MACF,CAAA;AAEAC,MAAAA,QAAA,CAAS,IAAI,EAAEF,EAAA,EAAI,EAAA,CAAA;IACrB,CAAA;IAEAP,MAAA,CAAOU,gBAAgB,CAAC,QAAA,EAAU,IAAI,CAACf,4BAA4B,CAAA;AACrE,EAAA;AAEAW,EAAAA,QAAAA,GAAW;AACT,IAAA,IAAI,OAAO,IAAI,CAACX,4BAA4B,KAAK,UAAA,EAAY;MAC3DK,MAAA,CAAOW,mBAAmB,CAAC,QAAA,EAAU,IAAI,CAAChB,4BAA4B,CAAA;MACtE,IAAI,CAACA,4BAA4B,GAAGiB,SAAA;AACtC,IAAA;AACF,EAAA;AACF;;AAaA;;AASe,MAAMC,4BAA4BC,SAAA,CAAU;AACzDC,EAAAA,uBAAA,GAA+BC,YAAA,CAAa,IAAI,EAAE3B,uBAAA,EAAyB,MAAA;IACzE,OAAO;AACL4B,MAAAA,UAAA,EAAY,CAAC,IAAI,CAACC,IAAI,CAACrB,KAAK;KAC9B;AACF,EAAA,CAAA,CAAA;EAEA,IAAIsB,UAAAA,GAAa;AACf,IAAA,OAAOC,QAAA,CAAS,IAAI,CAACL,uBAAuB,CAAA;AAC9C,EAAA;AAEA,EAAA;IAAAM,oBAAA,CAAAC,kBAAA,CAAA,+CAAA,EAIA;MAAAC,UAAA,EAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}

package/dist/components/eui-side-nav-item/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../src/components/eui-side-nav-item/button.gts"],"sourcesContent":["import didInsert from '@ember/render-modifiers/modifiers/did-insert';\n\nimport argOrDefault from '../../helpers/arg-or-default.ts';\nimport classNames from '../../helpers/class-names.ts';\nimport EuiIcon from '../eui-icon.gts';\nimport EuiInnerText from '../eui-inner-text.gts';\n\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport interface EuiSideNavItemButtonSignature {\n  Element: HTMLButtonElement;\n  Args: {\n    icon?: string;\n    caret?: boolean;\n    truncate?: boolean;\n    buttonIconClasses?: string;\n  };\n  Blocks: {\n    default: [];\n  };\n}\n\nconst EuiSideNavItemButton: TemplateOnlyComponent<EuiSideNavItemButtonSignature> =\n  <template>\n    {{#let (argOrDefault @truncate true) as |truncate|}}\n      <span class=\"euiSideNavItemButton__content\">\n        {{#if @icon}}\n          <EuiIcon\n            @type={{@icon}}\n            @size=\"m\"\n            class={{classNames \"euiSideNavItemButton__icon\" @buttonIconClasses}}\n          />\n        {{/if}}\n\n        <EuiInnerText as |setRef innerText|>\n          <span\n            class={{classNames\n              \"euiSideNavItemButton__label\"\n              (if truncate \"euiSideNavItemButton__label--truncated\")\n            }}\n            {{didInsert setRef}}\n            title={{if truncate innerText}}\n          >\n            {{yield}}\n          </span>\n        </EuiInnerText>\n        {{#if @caret}}\n          <EuiIcon @type=\"arrowDown\" @color=\"subdued\" @size=\"s\" />\n        {{/if}}\n      </span>\n    {{/let}}\n  </template>;\n\nexport default EuiSideNavItemButton;\n"],"names":["EuiSideNavItemButton","setComponentTemplate","precompileTemplate","strictMode","scope","argOrDefault","EuiIcon","classNames","EuiInnerText","didInsert","templateOnly"],"mappings":";;;;;;;;;AAsBA,MAAMA,oBACJ,GAAAC,oBAAA,CAAAC,kBAAA,CA4BA,8oBAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,YAAA;IAAAC,OAAA;IAAAC,UAAA;kBAAAC,QAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
+{"version":3,"file":"button.js","sources":["../../../src/components/eui-side-nav-item/button.gts"],"sourcesContent":["import didInsert from '@ember/render-modifiers/modifiers/did-insert';\n\nimport argOrDefault from '../../helpers/arg-or-default.ts';\nimport classNames from '../../helpers/class-names.ts';\nimport EuiIcon from '../eui-icon.gts';\nimport EuiInnerText from '../eui-inner-text.gts';\n\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/** @private The button or link of an EuiSideNav item. */\nexport interface EuiSideNavItemButtonSignature {\n  Element: HTMLButtonElement;\n  Args: {\n    /** Icon before the text. */\n    icon?: string;\n    /** Shows an arrow, for items with children. */\n    caret?: boolean;\n    /** Truncates long text. Defaults to `true`. */\n    truncate?: boolean;\n    /** Extra classes for the icon. */\n    buttonIconClasses?: string;\n  };\n  Blocks: {\n    /** The text. */\n    default: [];\n  };\n}\n\nconst EuiSideNavItemButton: TemplateOnlyComponent<EuiSideNavItemButtonSignature> =\n  <template>\n    {{#let (argOrDefault @truncate true) as |truncate|}}\n      <span class=\"euiSideNavItemButton__content\">\n        {{#if @icon}}\n          <EuiIcon\n            @type={{@icon}}\n            @size=\"m\"\n            class={{classNames \"euiSideNavItemButton__icon\" @buttonIconClasses}}\n          />\n        {{/if}}\n\n        <EuiInnerText as |setRef innerText|>\n          <span\n            class={{classNames\n              \"euiSideNavItemButton__label\"\n              (if truncate \"euiSideNavItemButton__label--truncated\")\n            }}\n            {{didInsert setRef}}\n            title={{if truncate innerText}}\n          >\n            {{yield}}\n          </span>\n        </EuiInnerText>\n        {{#if @caret}}\n          <EuiIcon @type=\"arrowDown\" @color=\"subdued\" @size=\"s\" />\n        {{/if}}\n      </span>\n    {{/let}}\n  </template>;\n\nexport default EuiSideNavItemButton;\n"],"names":["EuiSideNavItemButton","setComponentTemplate","precompileTemplate","strictMode","scope","argOrDefault","EuiIcon","classNames","EuiInnerText","didInsert","templateOnly"],"mappings":";;;;;;;;;AA4BA,MAAMA,oBAA4C,GAAAC,oBAAA,CAChDC,kBAAA,CAAA,8oBAAA,EA4BA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,YAAA;IAAAC,OAAA;IAAAC,UAAA;kBAAAC,QAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}

package/dist/components/eui-side-nav-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-side-nav-item.js","sources":["../../src/components/eui-side-nav-item.gts"],"sourcesContent":["import { on } from '@ember/modifier';\n\nimport optional from '@nullvoxpopuli/ember-composable-helpers/helpers/optional';\nimport add from 'ember-math-helpers/helpers/add';\nimport { and, eq, gt, not, or } from 'ember-truth-helpers';\n\nimport Button from '../components/eui-side-nav-item/button.gts';\nimport classNames from '../helpers/class-names.ts';\nimport isItemOpen from '../helpers/is-item-open.ts';\n\nimport type { Item } from './eui-side-nav';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport interface EuiSideNavItemSignature {\n  Args: {\n    selectedItem?: string;\n    isOpen?: boolean;\n    isSelected?: boolean;\n    isParent?: boolean;\n    icon?: string;\n    onClick?: () => void;\n    href?: string;\n    className?: string;\n    rel?: string;\n    target?: string;\n    items?: Item[];\n    depth?: number;\n    name?: string;\n    renderItem?: unknown;\n    disabled?: boolean;\n    truncate?: boolean;\n    emphasize?: boolean;\n    buttonClassName?: string;\n    childrenOnly?: boolean;\n    buttonIconClasses?: string;\n  };\n  Blocks: {\n    default: [];\n  };\n}\n\nconst EuiSideNavItem: TemplateOnlyComponent<EuiSideNavItemSignature> =\n  <template>\n    <div\n      class={{classNames\n        \"euiSideNavItem\"\n        (if (eq @depth 1) \"euiSideNavItem--trunk\")\n        (if (eq @depth 0) \"euiSideNavItem--root\")\n        (if (and (eq @depth 0) @icon) \"euiSideNavItem--rootIcon\")\n        (if (gt @depth 1) \"euiSideNavItem--branch\")\n        (if @items.length \"euiSideNavItem--hasChildItems\")\n        (if @emphasize \"euiSideNavItem--emphasized\")\n      }}\n    >\n      {{#let\n        (classNames\n          \"euiSideNavItemButton\"\n          (if (or @onClick @href) \"euiSideNavItemButton--isClickable\")\n          (if\n            (and (gt @depth 0) @isOpen (not @isSelected))\n            \"euiSideNavItemButton-isOpen\"\n          )\n          (if @isSelected \"euiSideNavItemButton-isSelected\")\n          @buttonClassName\n        )\n        (and (gt @depth 0) @isParent (not @isOpen) (not @isSelected))\n        as |className caret|\n      }}\n        {{#if (and @href (not @disabled))}}\n          <a\n            class={{className}}\n            href={{@href}}\n            target={{@target}}\n            rel={{@rel}}\n            {{on \"click\" (optional @onClick)}}\n          >\n            <Button\n              @icon={{@icon}}\n              @buttonIconClasses={{@buttonIconClasses}}\n              @caret={{caret}}\n            >\n              {{yield}}\n            </Button>\n          </a>\n        {{else if (or @onClick @disabled)}}\n          <button\n            type=\"button\"\n            class={{className}}\n            disabled={{@disabled}}\n            {{on \"click\" (optional @onClick)}}\n          >\n            <Button\n              @icon={{@icon}}\n              @truncate={{@truncate}}\n              @buttonIconClasses={{@buttonIconClasses}}\n              @caret={{caret}}\n            >\n              {{yield}}\n            </Button>\n          </button>\n        {{else}}\n          <div class={{className}}>\n            <Button\n              @icon={{@icon}}\n              @truncate={{@truncate}}\n              @buttonIconClasses={{@buttonIconClasses}}\n              @caret={{caret}}\n            >\n              {{yield}}\n            </Button>\n          </div>\n        {{/if}}\n      {{/let}}\n      {{#if (or (eq @depth 0) (and @items.length @isOpen))}}\n        <div class=\"euiSideNavItem__items\">\n          {{#each @items as |item|}}\n            {{#let\n              (and\n                (gt @depth 0)\n                (not item.onClick)\n                (not item.href)\n                (not (not item.items))\n              )\n              as |childrenOnly|\n            }}\n              <EuiSideNavItem\n                @selectedItem={{@selectedItem}}\n                @isOpen={{isItemOpen item @selectedItem}}\n                @isSelected={{and\n                  (not childrenOnly)\n                  (eq item.id @selectedItem)\n                }}\n                @isParent={{not (not item.items)}}\n                @icon={{item.icon}}\n                @onClick={{item.onClick}}\n                @href={{item.href}}\n                @className={{item.className}}\n                @rel={{item.rel}}\n                @target={{item.target}}\n                @items={{item.items}}\n                @depth={{add @depth 1}}\n                @name={{item.name}}\n                @renderItem={{item.renderItem}}\n                @disabled={{item.disabled}}\n                @truncate={{item.truncate}}\n                @emphasize={{item.emphasize}}\n                @buttonClassName={{item.buttonClassName}}\n                @childrenOnly={{childrenOnly}}\n              >\n                {{item.name}}\n              </EuiSideNavItem>\n            {{/let}}\n          {{/each}}\n        </div>\n      {{/if}}\n    </div>\n  </template>;\n\nexport default EuiSideNavItem;\n"],"names":["EuiSideNavItem","setComponentTemplate","precompileTemplate","strictMode","scope","classNames","eq","and","gt","or","not","on","optional","Button","isItemOpen","add","templateOnly"],"mappings":";;;;;;;;;;;AAyCA,MAAMA,cACJ,GAAAC,oBAAA,CAAAC,kBAAA,CAkHA,m+EAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,UAAA;IAAAC,EAAA;IAAAC,GAAA;IAAAC,EAAA;IAAAC,EAAA;IAAAC,GAAA;IAAAC,EAAA;IAAAC,QAAA;YAAAC,oBAAA;IAAAb,cAAA;IAAAc,UAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
+{"version":3,"file":"eui-side-nav-item.js","sources":["../../src/components/eui-side-nav-item.gts"],"sourcesContent":["import { on } from '@ember/modifier';\n\nimport optional from '@nullvoxpopuli/ember-composable-helpers/helpers/optional';\nimport add from 'ember-math-helpers/helpers/add';\nimport { and, eq, gt, not, or } from 'ember-truth-helpers';\n\nimport Button from '../components/eui-side-nav-item/button.gts';\nimport classNames from '../helpers/class-names.ts';\nimport isItemOpen from '../helpers/is-item-open.ts';\n\nimport type { Item } from './eui-side-nav';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/** @private One item of an EuiSideNav (rendered from its `@items`). */\nexport interface EuiSideNavItemSignature {\n  Args: {\n    /** The side nav's `@selectedItem`, passed down to children. */\n    selectedItem?: string;\n    /** Shows the children. */\n    isOpen?: boolean;\n    /** Highlights the item. */\n    isSelected?: boolean;\n    /** Has children. */\n    isParent?: boolean;\n    /** Icon before the name. */\n    icon?: string;\n    /** Makes the item a button calling this function. */\n    onClick?: () => void;\n    /** Makes the item a link. */\n    href?: string;\n    /** Class for the item. */\n    className?: string;\n    /** `rel` of the link. */\n    rel?: string;\n    /** `target` of the link. */\n    target?: string;\n    /** Nested items. */\n    items?: Item[];\n    /** Nesting level. */\n    depth?: number;\n    /** @deprecated Has no effect; the name is the block content. */\n    name?: string;\n    /** @deprecated Has no effect. */\n    renderItem?: unknown;\n    /** Disables the item. */\n    disabled?: boolean;\n    /** Truncates a long name. */\n    truncate?: boolean;\n    /** Bolder style. */\n    emphasize?: boolean;\n    /** Class for the item's button or link. */\n    buttonClassName?: string;\n    /** Renders the item as a section title (children, no action). */\n    childrenOnly?: boolean;\n    /** Extra classes for the icon. */\n    buttonIconClasses?: string;\n  };\n  Blocks: {\n    /** The item's name. */\n    default: [];\n  };\n}\n\nconst EuiSideNavItem: TemplateOnlyComponent<EuiSideNavItemSignature> =\n  <template>\n    <div\n      class={{classNames\n        \"euiSideNavItem\"\n        (if (eq @depth 1) \"euiSideNavItem--trunk\")\n        (if (eq @depth 0) \"euiSideNavItem--root\")\n        (if (and (eq @depth 0) @icon) \"euiSideNavItem--rootIcon\")\n        (if (gt @depth 1) \"euiSideNavItem--branch\")\n        (if @items.length \"euiSideNavItem--hasChildItems\")\n        (if @emphasize \"euiSideNavItem--emphasized\")\n      }}\n    >\n      {{#let\n        (classNames\n          \"euiSideNavItemButton\"\n          (if (or @onClick @href) \"euiSideNavItemButton--isClickable\")\n          (if\n            (and (gt @depth 0) @isOpen (not @isSelected))\n            \"euiSideNavItemButton-isOpen\"\n          )\n          (if @isSelected \"euiSideNavItemButton-isSelected\")\n          @buttonClassName\n        )\n        (and (gt @depth 0) @isParent (not @isOpen) (not @isSelected))\n        as |className caret|\n      }}\n        {{#if (and @href (not @disabled))}}\n          <a\n            class={{className}}\n            href={{@href}}\n            target={{@target}}\n            rel={{@rel}}\n            {{on \"click\" (optional @onClick)}}\n          >\n            <Button\n              @icon={{@icon}}\n              @buttonIconClasses={{@buttonIconClasses}}\n              @caret={{caret}}\n            >\n              {{yield}}\n            </Button>\n          </a>\n        {{else if (or @onClick @disabled)}}\n          <button\n            type=\"button\"\n            class={{className}}\n            disabled={{@disabled}}\n            {{on \"click\" (optional @onClick)}}\n          >\n            <Button\n              @icon={{@icon}}\n              @truncate={{@truncate}}\n              @buttonIconClasses={{@buttonIconClasses}}\n              @caret={{caret}}\n            >\n              {{yield}}\n            </Button>\n          </button>\n        {{else}}\n          <div class={{className}}>\n            <Button\n              @icon={{@icon}}\n              @truncate={{@truncate}}\n              @buttonIconClasses={{@buttonIconClasses}}\n              @caret={{caret}}\n            >\n              {{yield}}\n            </Button>\n          </div>\n        {{/if}}\n      {{/let}}\n      {{#if (or (eq @depth 0) (and @items.length @isOpen))}}\n        <div class=\"euiSideNavItem__items\">\n          {{#each @items as |item|}}\n            {{#let\n              (and\n                (gt @depth 0)\n                (not item.onClick)\n                (not item.href)\n                (not (not item.items))\n              )\n              as |childrenOnly|\n            }}\n              <EuiSideNavItem\n                @selectedItem={{@selectedItem}}\n                @isOpen={{isItemOpen item @selectedItem}}\n                @isSelected={{and\n                  (not childrenOnly)\n                  (eq item.id @selectedItem)\n                }}\n                @isParent={{not (not item.items)}}\n                @icon={{item.icon}}\n                @onClick={{item.onClick}}\n                @href={{item.href}}\n                @className={{item.className}}\n                @rel={{item.rel}}\n                @target={{item.target}}\n                @items={{item.items}}\n                @depth={{add @depth 1}}\n                @name={{item.name}}\n                @renderItem={{item.renderItem}}\n                @disabled={{item.disabled}}\n                @truncate={{item.truncate}}\n                @emphasize={{item.emphasize}}\n                @buttonClassName={{item.buttonClassName}}\n                @childrenOnly={{childrenOnly}}\n              >\n                {{item.name}}\n              </EuiSideNavItem>\n            {{/let}}\n          {{/each}}\n        </div>\n      {{/if}}\n    </div>\n  </template>;\n\nexport default EuiSideNavItem;\n"],"names":["EuiSideNavItem","setComponentTemplate","precompileTemplate","strictMode","scope","classNames","eq","and","gt","or","not","on","optional","Button","isItemOpen","add","templateOnly"],"mappings":";;;;;;;;;;;AA+DA,MAAMA,cAAsC,GAAAC,oBAAA,CAC1CC,kBAAA,CAAA,m+EAAA,EAkHA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,UAAA;IAAAC,EAAA;IAAAC,GAAA;IAAAC,EAAA;IAAAC,EAAA;IAAAC,GAAA;IAAAC,EAAA;IAAAC,QAAA;YAAAC,oBAAA;IAAAb,cAAA;IAAAc,UAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}

package/dist/components/eui-side-nav.js

@@ -17,6 +17,7 @@ import screenReaderOnly from '../modifiers/screen-reader-only.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 
+/** A hierarchical navigation tree for a page's side bar. */
 class EuiSideNavComponent extends Component {
   get mobileBreakpoints() {
     return this.args.mobileBreakpoints || ['xs', 's'];