@ember-eui/core 14.1.4 → 16.0.0

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

@@ -1 +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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"}
+{"version":3,"file":"eui-selectable-template-sitewide.js","sources":["../../src/components/eui-selectable-template-sitewide.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached, tracked } from '@glimmer/tracking';\nimport { get, 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 { getEuiThemeContext } from '../utils/emotion/consume.ts';\nimport {\n  euiSelectableTemplateSitewidePopoverStyles,\n  euiSelectableTemplateSitewideStyles,\n  SITEWIDE_META_TYPES\n} from '../utils/eui/selectable.ts';\nimport { euiClass, useEuiBorealisStyles } from '../utils/eui/styles.ts';\nimport EuiAvatar from './eui-avatar.gts';\nimport EuiEmotionProvider from './eui-emotion-provider.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 EuiSelectableMessage from './eui-selectable-message.gts';\nimport { CurrentBreakPointHelper } from './eui-show-for.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 { EuiBreakpointSize, EuiBreakpoints } from '../utils/breakpoint.ts';\nimport type { EuiThemeContext } from '../utils/emotion/context.ts';\nimport type { EuiColorMode } from '../utils/emotion/theme.ts';\nimport type { EuiBorealisContext } from '../utils/eui/theme.ts';\nimport type { EuiCss } from '../utils/eui/styles.ts';\nimport type { EuiPopoverArgs } from './eui-popover.gts';\nimport type { EuiSelectableSignature } from './eui-selectable.gts';\nimport type { TOC } from '@ember/component/template-only';\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   * Extra class name(s) of the meta (upstream `className`). A custom\n   * `type` also adds `euiSelectableTemplateSitewide__optionMeta--[type]`,\n   * a hook to style your own types (e.g. through `listProps.css`).\n   */\n  className?: string;\n  /** `data-test-subj` of the meta. */\n  'data-test-subj'?: string;\n}\n\nexport interface EuiSelectableTemplateSitewideOption extends EuiSelectableOption {\n  /** Icon before the label: `{ type, color }` (subdued by default). */\n  icon?: {\n    type: EuiIconSignature['Args']['type'];\n    color?: EuiIconSignature['Args']['color'];\n    size?: EuiIconSignature['Args']['size'];\n    title?: string;\n  };\n  /**\n   * Avatar after the label, e.g. the space it belongs to (any\n   * `EuiAvatar` argument): `{ name, type, color, size, imageUrl, initials,\n   * iconType, ... }`. The size is `s` and the type `space` by default.\n   */\n  avatar?: {\n    name: string;\n    type?: EuiAvatarSignature['Args']['type'];\n    color?: EuiAvatarSignature['Args']['color'];\n    size?: EuiAvatarSignature['Args']['size'];\n    imageUrl?: string;\n    initials?: string;\n    iconType?: EuiAvatarSignature['Args']['iconType'];\n    iconSize?: EuiAvatarSignature['Args']['iconSize'];\n    iconColor?: EuiAvatarSignature['Args']['iconColor'];\n    isDisabled?: boolean;\n    casing?: EuiAvatarSignature['Args']['casing'];\n  };\n  /** Details under the label, e.g. its type and where it lives. */\n  meta?: EuiSelectableTemplateSitewideMeta[];\n}\n\n/** What a color mode of the template can be (upstream `EuiSelectableTemplateSitewideTheme`). */\nexport type EuiSelectableTemplateSitewideTheme = 'default' | 'global' | 'light' | 'dark' | 'inverse';\n\n/** Args of `EuiPopover` the template forwards, plus `width`, `className`. */\nexport type EuiSelectableTemplateSitewidePopoverProps = Partial<\n  Omit<EuiPopoverArgs, 'isOpen' | 'button'>\n> & {\n  /** Width of the popover content (`600` by default). */\n  width?: number | string;\n  /** Class name(s) of the popover's root. */\n  className?: string;\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    /**\n     * Options of the search field, as in `EuiSelectable`: `{ placeholder,\n     * compressed, isClearable, value, defaultValue, onChange, onSearch,\n     * onKeyDown, onKeyUpCapture, onInput, onClick, onFocus, onBlur,\n     * inputRef, className, prepend, append, 'data-test-subj' }`. `append`\n     * and `prepend` are a string (a label, e.g. \"⌘K\") or a component.\n     * `onFocus`, `onBlur`, `onKeyDown` and `onInput` run besides the\n     * template's own handling (opening and closing the popover).\n     */\n    searchProps?: EuiSelectableSignature['Args']['searchProps'];\n    /**\n     * Options of the list, as in `EuiSelectable` (`css`, `textWrap`,\n     * `truncationProps`, `isVirtualized`...), plus `className`. Defaults:\n     * `{ rowHeight: 52, showIcons: false, onFocusBadge: { text: \"Go to\",\n     * iconSide: \"right\" } }`; yours win.\n     */\n    listProps?: NonNullable<EuiSelectableSignature['Args']['listProps']> & {\n      className?: string;\n    };\n    /**\n     * Args of the `EuiPopover` housing the list (`anchorPosition`,\n     * `panelPaddingSize`, `panelClassName`, `zIndex`, `closePopover`,\n     * `panelRef`...), plus `width` (default `600`) and `className`.\n     */\n    popoverProps?: EuiSelectableTemplateSitewidePopoverProps;\n    /**\n     * Screen sizes (`'xs'`, `'s'`, `'m'`, `'l'`, `'xl'`) at which the\n     * `<:popoverButton>` replaces the search. Without it, the button\n     * always shows (if given).\n     */\n    popoverButtonBreakpoints?: EuiBreakpointSize[];\n    /**\n     * Color modes of the search and of the popover: `'light'`, `'dark'`,\n     * `'inverse'` (the opposite of the nearest provider's), `'default'`\n     * (the nearest provider's) and, for the popover, `'global'` (the\n     * outermost provider's). Both default to `'default'`.\n     */\n    colorModes?: {\n      search?: EuiSelectableTemplateSitewideTheme;\n      popover?: EuiSelectableTemplateSitewideTheme;\n    };\n    /** Placeholder of the search. Defaults to \"Search for anything...\". */\n    placeholder?: string;\n    /**\n     * Width of the popover content in px; `@popoverProps.width` wins.\n     * Defaults to `600`.\n     */\n    popoverWidth?: number;\n    /** As `EuiSelectable`: called with the current option, or `null`. */\n    onActiveOptionChange?: EuiSelectableSignature['Args']['onActiveOptionChange'];\n    /** As `EuiSelectable`: decides whether an option matches the search. */\n    optionMatcher?: EuiSelectableSignature['Args']['optionMatcher'];\n    /** As `EuiSelectable`: height of the list. */\n    height?: EuiSelectableSignature['Args']['height'];\n    /** As `EuiSelectable`: error message shown instead of the list. */\n    errorMessage?: EuiSelectableSignature['Args']['errorMessage'];\n    /** As `EuiSelectable`: pressing a checked option excludes it. */\n    allowExclusions?: boolean;\n    /** As `EuiSelectable`: screen reader text before the instructions. */\n    selectableScreenReaderText?: string;\n    /** As `EuiSelectable`. Defaults to `true` (one result is chosen). */\n    singleSelection?: EuiSelectableSignature['Args']['singleSelection'];\n    /** Text while `@isLoading`. Defaults to \"Loading results\". */\n    loadingMessage?: string;\n    /** Text when there are no results. Defaults to \"No results available\". */\n    emptyMessage?: string;\n    /** Text when the search matches nothing. Defaults to `@emptyMessage`'s. */\n    noMatchesMessage?: string;\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?: EuiSelectableSignature['Args']['isPreFiltered'];\n    /**\n     * Styles composed last into the selectable's class (upstream's `css`,\n     * part of the rest props spread onto `EuiSelectable`).\n     */\n    css?: EuiCss;\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. See\n     * `@popoverButtonBreakpoints`.\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     * Custom content of each option (upstream `renderOption`), instead of\n     * the highlighted label and meta; yields the option and the search\n     * value. The icon / avatar stay around it.\n     */\n    option: [option: EuiSelectableTemplateSitewideOption, searchValue: string];\n  };\n}\n\nconst isMetaType = (\n  type: string | undefined\n): type is (typeof SITEWIDE_META_TYPES)[number] =>\n  (SITEWIDE_META_TYPES as readonly (string | undefined)[]).includes(type);\n\n/** Upstream `title`: the label and the meta texts. */\nfunction optionTitle(option: EuiSelectableTemplateSitewideOption): string {\n  return option.meta?.length\n    ? `${option.label} \\u2022${option.meta.map((meta) => ` ${meta.text}`).join('')}`\n    : option.label;\n}\n\n/** Upstream `euiSelectableTemplateSitewidePopoverStyles`, as a theme function. */\nconst popoverPanelCss = (theme: EuiBorealisContext) =>\n  euiSelectableTemplateSitewidePopoverStyles(theme).euiSelectableTemplateSitewide__popover;\n\nconst DEFAULT_POPOVER_WIDTH = 600;\n\nconst oppositeOf = (mode: EuiColorMode): EuiColorMode => (mode === 'dark' ? 'light' : 'dark');\n\n\n/** `{{yield}}`s inside a provider of `@colorMode`, or as is without one. */\nconst ModeProvider = <template>\n  {{#if @colorMode}}\n    <EuiEmotionProvider\n      @colorMode={{@colorMode}}\n      @parent={{@parent}}\n      @wrapper={{@wrapper}}\n      @globalStyles={{false}}\n      style=\"display: block;\"\n    >\n      {{yield}}\n    </EuiEmotionProvider>\n  {{else}}\n    {{yield}}\n  {{/if}}\n</template> as TOC<{\n  Args: { colorMode?: EuiColorMode; parent?: EuiThemeContext; wrapper?: boolean };\n  Blocks: { default: [] };\n}>;\n\nexport default class EuiSelectableTemplateSitewide extends Component<EuiSelectableTemplateSitewideSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  @tracked isOpen = false;\n\n  /** The popover panel, to tell focus moving into it from leaving. */\n  panel: HTMLElement | null = null;\n\n  get themeContext(): EuiThemeContext {\n    return getEuiThemeContext(this);\n  }\n\n  get breakpoints(): EuiBreakpoints {\n    return this.themeContext.upstream.euiTheme.breakpoint as EuiBreakpoints;\n  }\n\n  get formattedOptions(): EuiSelectableTemplateSitewideOption[] {\n    return this.args.options.map((option) => ({\n      key: option.label,\n      title: optionTitle(option),\n      ...option,\n      className: ['euiSelectableTemplateSitewide__listItem', option.className]\n        .filter(Boolean)\n        .join(' ')\n    }));\n  }\n\n  @cached\n  get styles() {\n    const context = getEuiThemeContext(this);\n    const styles = useEuiBorealisStyles(\n      context,\n      euiSelectableTemplateSitewideStyles\n    );\n    const metaClasses = new Map<string | undefined, string>();\n    return {\n      root: styles.euiSelectableTemplateSitewide,\n      metasList: `euiSelectableTemplateSitewide__optionMetasList ${euiClass(\n        context,\n        styles.euiSelectableTemplateSitewide__optionMetasList\n      )}`,\n      meta: (meta: EuiSelectableTemplateSitewideMeta): string => {\n        const key = isMetaType(meta.type) ? meta.type : undefined;\n        let className = metaClasses.get(key);\n        if (!className) {\n          className = euiClass(\n            context,\n            styles.euiSelectableTemplateSitewide__optionMeta,\n            key && styles.metaTypes.fontWeight,\n            key && styles.metaTypes[key]\n          );\n          metaClasses.set(key, className);\n        }\n        // upstream order: the type's class, the base, the custom one\n        return [\n          meta.type && `euiSelectableTemplateSitewide__optionMeta--${meta.type}`,\n          'euiSelectableTemplateSitewide__optionMeta',\n          meta.className,\n          className\n        ]\n          .filter(Boolean)\n          .join(' ');\n      }\n    };\n  }\n\n  /** `@searchProps` over the defaults; the handlers of `@onSearch` joined. */\n  /** Upstream's root styles, then the caller's `@css`. */\n  @cached\n  get rootCss(): EuiCss {\n    return this.args.css ? [this.styles.root, this.args.css] : this.styles.root;\n  }\n\n  @cached\n  get searchProps(): NonNullable<EuiSelectableTemplateSitewideSignature['Args']['searchProps']> {\n    const searchProps = this.args.searchProps ?? {};\n    const { onSearch } = this.args;\n    const ownOnSearch = searchProps.onSearch;\n\n    return {\n      isClearable: true,\n      ...searchProps,\n      placeholder: this.placeholder,\n      className: ['euiSelectableTemplateSitewide__search', searchProps.className]\n        .filter(Boolean)\n        .join(' '),\n      onSearch:\n        ownOnSearch || onSearch\n          ? (value, matching) => {\n              ownOnSearch?.(value, matching);\n              onSearch?.(value);\n            }\n          : undefined\n    };\n  }\n\n  /** `@listProps` over the defaults (upstream: the consumer's win). */\n  @cached\n  get listProps(): NonNullable<EuiSelectableTemplateSitewideSignature['Args']['listProps']> {\n    return {\n      rowHeight: 52,\n      showIcons: false,\n      onFocusBadge: { text: this.goTo, iconSide: 'right' },\n      ...this.args.listProps\n    };\n  }\n\n  get listClassName(): string {\n    return ['euiSelectableTemplateSitewide__list', this.args.listProps?.className]\n      .filter(Boolean)\n      .join(' ');\n  }\n\n  get popoverProps(): EuiSelectableTemplateSitewidePopoverProps {\n    return this.args.popoverProps ?? {};\n  }\n\n  get popoverWidth(): number | string {\n    return this.popoverProps.width ?? this.args.popoverWidth ?? DEFAULT_POPOVER_WIDTH;\n  }\n\n  @cached\n  get panelCss(): EuiCss {\n    return [popoverPanelCss, this.popoverProps.panelCss];\n  }\n\n  /** The nearest provider's mode, the base of `'inverse'`. */\n  get currentColorMode(): EuiColorMode {\n    return this.themeContext.colorMode;\n  }\n\n  /** Upstream: `light`, `dark`, `inverse`; anything else is the nearest. */\n  get searchColorMode(): EuiColorMode {\n    const mode = this.args.colorModes?.search?.toLowerCase();\n\n    if (mode === 'light' || mode === 'dark') return mode;\n    if (mode === 'inverse') return oppositeOf(this.currentColorMode);\n\n    return this.currentColorMode;\n  }\n\n  /** Whether the search has its own provider element (a mode is set). */\n  get searchHasOwnWrapper(): boolean {\n    const mode = this.args.colorModes?.search;\n\n    return mode === 'light' || mode === 'dark' || mode === 'inverse';\n  }\n\n  /** Like `searchColorMode`, and `global`: the outermost provider's. */\n  get popoverColorMode(): EuiColorMode {\n    const mode = this.args.colorModes?.popover?.toLowerCase();\n\n    if (mode === 'light' || mode === 'dark') return mode;\n    if (mode === 'inverse') return oppositeOf(this.currentColorMode);\n    if (mode === 'global') return this.themeContext.root.colorMode;\n\n    return this.currentColorMode;\n  }\n\n  /** A provider is only needed when the mode differs from the one in effect. */\n  get popoverProviderMode(): EuiColorMode | undefined {\n    return this.popoverColorMode === this.currentColorMode ? undefined : this.popoverColorMode;\n  }\n\n  /** The search sits in the popover's mode, unless its own differs. */\n  get searchProviderMode(): EuiColorMode | undefined {\n    return this.searchColorMode === this.popoverColorMode ? undefined : this.searchColorMode;\n  }\n\n  get placeholder(): string {\n    return (\n      this.args.searchProps?.placeholder ??\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.args.loadingMessage ?? this.euiI18n.lookupToken('euiSelectableTemplateSitewide.loadingResults', 'Loading results');\n  }\n\n  get noResultsText(): string {\n    return this.args.emptyMessage ?? this.euiI18n.lookupToken('euiSelectableTemplateSitewide.noResults', 'No results available');\n  }\n\n  get noMatchesText(): string {\n    return this.args.noMatchesMessage ?? this.noResultsText;\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  toggle(): void {\n    this.isOpen = !this.isOpen;\n  }\n\n  /** Upstream: Enter in the search opens the popover too. */\n  @action\n  onSearchKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Enter') this.isOpen = true;\n  }\n\n  @action\n  onSearchBlur(event: FocusEvent): void {\n    const next = event.relatedTarget as Node | null;\n\n    // moving into the results keeps the popover open\n    if (next && this.panel?.contains(next)) return;\n\n    this.isOpen = false;\n  }\n\n  /** Upstream `closePopover`: closes, then `popoverProps.closePopover`. */\n  @action\n  closePopover(): void {\n    this.isOpen = false;\n    this.popoverProps.closePopover?.();\n  }\n\n  @action\n  setPanel(panel: HTMLElement | null): void {\n    this.panel = panel;\n    this.popoverProps.panelRef?.(panel);\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={{orDefault @singleSelection true}}\n      @searchable={{true}}\n      @isLoading={{@isLoading}}\n      @isPreFiltered={{@isPreFiltered}}\n      @searchProps={{this.searchProps}}\n      @css={{this.rootCss}}\n      @listProps={{this.listProps}}\n      @onActiveOptionChange={{@onActiveOptionChange}}\n      @optionMatcher={{@optionMatcher}}\n      @height={{@height}}\n      @errorMessage={{@errorMessage}}\n      @allowExclusions={{@allowExclusions}}\n      @selectableScreenReaderText={{@selectableScreenReaderText}}\n      @loadingMessage={{this.loadingText}}\n      @emptyMessage={{this.noResultsText}}\n      @noMatchesMessage={{this.noMatchesText}}\n      ...attributes\n      as |parts|\n    >\n      {{#let\n        (and2\n          (has-block \"popoverButton\")\n          (if\n            @popoverButtonBreakpoints\n            (CurrentBreakPointHelper @popoverButtonBreakpoints this.breakpoints)\n            true\n          )\n        )\n        as |showButton|\n      }}\n        <ModeProvider\n          @colorMode={{this.popoverProviderMode}}\n          @parent={{this.themeContext}}\n          @wrapper={{false}}\n        >\n          <EuiPopover\n            class={{this.popoverProps.className}}\n            @isOpen={{this.isOpen}}\n            @closePopover={{this.closePopover}}\n            @panelRef={{this.setPanel}}\n            @panelPaddingSize={{orDefault this.popoverProps.panelPaddingSize \"s\"}}\n            @anchorPosition={{orDefault this.popoverProps.anchorPosition \"downCenter\"}}\n            @ownFocus={{orDefault this.popoverProps.ownFocus showButton}}\n            @display={{orDefault\n              this.popoverProps.display\n              (if showButton \"inlineBlock\" \"block\")\n            }}\n            @panelCss={{this.panelCss}}\n            @anchorClassName={{this.popoverProps.anchorClassName}}\n            @attachToAnchor={{this.popoverProps.attachToAnchor}}\n            @container={{this.popoverProps.container}}\n            @hasArrow={{this.popoverProps.hasArrow}}\n            @initialFocus={{this.popoverProps.initialFocus}}\n            @insert={{this.popoverProps.insert}}\n            @isFocusTrapPaused={{this.popoverProps.isFocusTrapPaused}}\n            @focusTrapOptions={{this.popoverProps.focusTrapOptions}}\n            @mutationObserverOptions={{this.popoverProps.mutationObserverOptions}}\n            @ariaLabel={{this.popoverProps.ariaLabel}}\n            @ariaLabelledBy={{this.popoverProps.ariaLabelledBy}}\n            @offset={{this.popoverProps.offset}}\n            @buffer={{this.popoverProps.buffer}}\n            @onTrapDeactivation={{this.popoverProps.onTrapDeactivation}}\n            @panelClassName={{this.popoverProps.panelClassName}}\n            @panelStyle={{this.popoverProps.panelStyle}}\n            @popoverScreenReaderText={{this.popoverProps.popoverScreenReaderText}}\n            @portalRef={{this.popoverProps.portalRef}}\n            @popoverRef={{this.popoverProps.popoverRef}}\n            @buttonRef={{this.popoverProps.buttonRef}}\n            @rootCss={{this.popoverProps.rootCss}}\n            @css={{this.popoverProps.css}}\n            @repositionOnScroll={{this.popoverProps.repositionOnScroll}}\n            @repositionToCrossAxis={{this.popoverProps.repositionToCrossAxis}}\n            @shouldAccountForOtherPopovers={{this.popoverProps.shouldAccountForOtherPopovers}}\n            @shouldSelfFocus={{this.popoverProps.shouldSelfFocus}}\n            @tabindex={{this.popoverProps.tabindex}}\n            @zIndex={{this.popoverProps.zIndex}}\n            @arrowChildren={{this.popoverProps.arrowChildren}}\n          >\n            <:button>\n              {{#if showButton}}\n                {{yield this.toggle to=\"popoverButton\"}}\n              {{else if parts.search}}\n                <ModeProvider\n                  @colorMode={{this.searchProviderMode}}\n                  @wrapper={{this.searchHasOwnWrapper}}\n                >\n                  <parts.search\n                    aria-label={{this.placeholder}}\n                    {{on \"focus\" this.open}}\n                    {{on \"input\" this.open}}\n                    {{on \"keydown\" this.onSearchKeydown}}\n                    {{on \"blur\" this.onSearchBlur}}\n                  />\n                </ModeProvider>\n              {{/if}}\n            </:button>\n            <:content>\n              <div\n                class=\"euiSelectableTemplateSitewide__popover\"\n                style={{cssStyle (hash width=this.popoverWidth maxWidth=\"100%\")}}\n              >\n                {{#if (or2 (has-block \"popoverTitle\") showButton)}}\n                  <EuiPopoverTitle @paddingSize=\"s\">\n                    {{yield to=\"popoverTitle\"}}\n                    {{#if showButton}}\n                      {{#if (has-block \"popoverTitle\")}}\n                        <EuiSpacer />\n                      {{/if}}\n                      {{#if parts.search}}\n                        <parts.search aria-label={{this.placeholder}} />\n                      {{/if}}\n                    {{/if}}\n                  </EuiPopoverTitle>\n                {{/if}}\n                {{#if @isLoading}}\n                  <EuiSelectableMessage style=\"min-height: 300px;\">\n                    <EuiLoadingSpinner @size=\"l\" />\n                    <br />\n                    <p>{{this.loadingText}}</p>\n                  </EuiSelectableMessage>\n                {{else}}\n                  <parts.list\n                    class={{this.listClassName}}\n                    @messageMinHeight={{300}}\n                  >\n                    <:option as |option searchValue|>\n                      {{#if (has-block \"option\")}}\n                        {{yield (asSitewideOption option) searchValue to=\"option\"}}\n                      {{else}}\n                        <EuiHighlight\n                          class=\"euiSelectableTemplateSitewide__listItemTitle\"\n                          @text={{option.label}}\n                          @search={{searchValue}}\n                        />\n                        {{#if (metaOf option)}}\n                          <span class={{this.styles.metasList}}>\n                            {{#each (metaOf option) as |meta|}}\n                              <EuiHighlight\n                                class={{this.styles.meta meta}}\n                                @text={{meta.text}}\n                                @search={{if meta.highlightSearchString searchValue \"\"}}\n                                data-test-subj={{get meta \"data-test-subj\"}}\n                              />\n                            {{/each}}\n                          </span>\n                        {{/if}}\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={{orDefault icon.color \"subdued\"}}\n                            @size={{orDefault icon.size \"l\"}}\n                            @title={{icon.title}}\n                          />\n                        {{~else~}}\n                          {{option.prepend}}\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={{orDefault avatar.type \"space\"}}\n                            @color={{avatar.color}}\n                            @size={{orDefault avatar.size \"s\"}}\n                            @imageUrl={{avatar.imageUrl}}\n                            @initials={{avatar.initials}}\n                            @iconType={{avatar.iconType}}\n                            @iconSize={{avatar.iconSize}}\n                            @iconColor={{avatar.iconColor}}\n                            @isDisabled={{avatar.isDisabled}}\n                            @casing={{avatar.casing}}\n                          />\n                        {{~else~}}\n                          {{option.append}}\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        </ModeProvider>\n      {{/let}}\n    </EuiSelectable>\n  </template>\n}\n\nfunction and2(a: unknown, b: unknown): boolean {\n  return Boolean(a && b);\n}\n\nfunction orDefault<T>(value: T | undefined, fallback: T): T {\n  return value === undefined ? fallback : value;\n}\n\nfunction or2(a: unknown, b: unknown): boolean {\n  return Boolean(a || b);\n}\n\nfunction asSitewideOption(option: EuiSelectableOption): EuiSelectableTemplateSitewideOption {\n  return option as EuiSelectableTemplateSitewideOption;\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":["isMetaType","type","SITEWIDE_META_TYPES","includes","optionTitle","option","meta","length","label","map","text","join","popoverPanelCss","theme","euiSelectableTemplateSitewidePopoverStyles","euiSelectableTemplateSitewide__popover","DEFAULT_POPOVER_WIDTH","oppositeOf","mode","ModeProvider","setComponentTemplate","precompileTemplate","strictMode","scope","EuiEmotionProvider","templateOnly","EuiSelectableTemplateSitewide","Component","g","prototype","service","i","tracked","panel","themeContext","getEuiThemeContext","breakpoints","upstream","euiTheme","breakpoint","formattedOptions","args","options","key","title","className","filter","Boolean","styles","context","useEuiBorealisStyles","euiSelectableTemplateSitewideStyles","metaClasses","Map","root","euiSelectableTemplateSitewide","metasList","euiClass","euiSelectableTemplateSitewide__optionMetasList","undefined","get","euiSelectableTemplateSitewide__optionMeta","metaTypes","fontWeight","set","n","cached","rootCss","css","searchProps","onSearch","ownOnSearch","isClearable","placeholder","value","matching","listProps","rowHeight","showIcons","onFocusBadge","goTo","iconSide","listClassName","popoverProps","popoverWidth","width","panelCss","currentColorMode","colorMode","searchColorMode","colorModes","search","toLowerCase","searchHasOwnWrapper","popoverColorMode","popover","popoverProviderMode","searchProviderMode","euiI18n","lookupToken","loadingText","loadingMessage","noResultsText","emptyMessage","noMatchesText","noMatchesMessage","open","isOpen","action","toggle","onSearchKeydown","event","onSearchBlur","next","relatedTarget","contains","closePopover","setPanel","panelRef","onChange","EuiSelectable","orDefault","and2","CurrentBreakPointHelper","EuiPopover","on","cssStyle","hash","or2","EuiPopoverTitle","EuiSpacer","EuiSelectableMessage","EuiLoadingSpinner","asSitewideOption","EuiHighlight","metaOf","iconOf","EuiIcon","avatarOf","EuiAvatar","EuiPopoverFooter","a","b","fallback","icon","avatar"],"mappings":"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"}

package/dist/components/eui-selectable.js

@@ -1,12 +1,20 @@
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
+import { tracked, cached } from '@glimmer/tracking';
 import { hash } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
+import { schedule } from '@ember/runloop';
 import { service } from '@ember/service';
+import { isDestroying, isDestroyed } from '@ember/destroyable';
+import { modifier } from 'ember-modifier';
+import cssStyle from '../-private/css-style.js';
 import { randomId } from '../-private/random-id.js';
-import { getMatchingOptions, toggleOption } from '../-private/selectable-options.js';
+import { getMatchingOptions, isNavigable, toggleOptionWithChange, createPartialStringEqualityOptionMatcher } from '../-private/selectable-options.js';
+import { getEuiThemeContext } from '../utils/emotion/consume.js';
+import { cV as euiSelectableStyles } from '../styles.generated-SYAxYhey.js';
+import { euiClass } from '../utils/eui/styles.js';
 import EuiLoadingSpinner from './eui-loading-spinner.js';
+import EuiScreenReaderLive from './eui-screen-reader-live.js';
 import EuiSelectableList from './eui-selectable-list.js';
 import EuiSelectableMessage from './eui-selectable-message.js';
 import EuiSelectableSearch from './eui-selectable-search.js';
@@ -15,21 +23,38 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import { g, i, n } from 'decorator-transforms/runtime-esm';
 
+/** Upstream default matcher (module scope: one instance). */
+const DEFAULT_OPTION_MATCHER = createPartialStringEqualityOptionMatcher();
+
+/**
+ * A list of options to pick one or several from, optionally with a search
+ * field. It is the building block of pickers: put it in a popover for a
+ * filter menu, or in a panel for a "choose fields" list. Options are
+ * `{ label, checked }` objects; `@onChange` gets them all back with the
+ * change applied.
+ *
+ * As upstream, `aria-label` / `aria-describedby` attributes name the
+ * search and the listbox, not the root (`searchProps` / `listProps` keys of
+ * the same names win).
+ */
+
 class EuiSelectable extends Component {
   static {
     g(this.prototype, "euiI18n", [service]);
   }
   #euiI18n = (i(this, "euiI18n"), void 0);
   static {
-    g(this.prototype, "searchValue", [tracked], function () {
+    g(this.prototype, "internalSearchValue", [tracked], function () {
       return '';
     });
   }
-  #searchValue = (i(this, "searchValue"), void 0);
+  #internalSearchValue = (i(this, "internalSearchValue"), void 0);
+  /** The uncontrolled search (UI state); `searchProps.value` wins. */
   static {
-    g(this.prototype, "activeOptionIndex", [tracked]);
+    g(this.prototype, "internalActiveOptionIndex", [tracked]);
   }
-  #activeOptionIndex = (i(this, "activeOptionIndex"), void 0);
+  #internalActiveOptionIndex = (i(this, "internalActiveOptionIndex"), void 0);
+  /** The keyboard's current option (UI state), see `activeOptionIndex`. */
   static {
     g(this.prototype, "isFocused", [tracked], function () {
       return false;
@@ -37,19 +62,149 @@ class EuiSelectable extends Component {
   }
   #isFocused = (i(this, "isFocused"), void 0);
   rootId = `euiSelectable_${randomId()}`;
+  /** The root's `aria-label` attribute, moved to the search / listbox. */
+  static {
+    g(this.prototype, "attrAriaLabel", [tracked], function () {
+      return null;
+    });
+  }
+  #attrAriaLabel = (i(this, "attrAriaLabel"), void 0);
+  static {
+    g(this.prototype, "attrAriaDescribedby", [tracked], function () {
+      return null;
+    });
+  }
+  #attrAriaDescribedby = (i(this, "attrAriaDescribedby"), void 0);
+  /** The root's `aria-describedby` attribute, moved to the search / listbox. */
+  /**
+  * Upstream takes `aria-label` / `aria-describedby` out of the root's props
+  * (`getAccessibleName`). Ember passes them as attributes, so they are read
+  * from the root and removed, also when they change.
+  */
+  moveAriaAttributes = modifier(element => {
+    const move = () => {
+      if (element.hasAttribute('aria-label')) {
+        this.attrAriaLabel = element.getAttribute('aria-label');
+        element.removeAttribute('aria-label');
+      }
+      if (element.hasAttribute('aria-describedby')) {
+        this.attrAriaDescribedby = element.getAttribute('aria-describedby');
+        element.removeAttribute('aria-describedby');
+      }
+    };
+    schedule('afterRender', () => {
+      if (!isDestroying(this) && !isDestroyed(this)) move();
+    });
+    const observer = new MutationObserver(move);
+    observer.observe(element, {
+      attributeFilter: ['aria-label', 'aria-describedby']
+    });
+    return () => observer.disconnect();
+  });
+  /**
+  * Upstream `getAccessibleName`: the part's own `aria-label`, else its
+  * `aria-describedby` (+ `extraId`), else the root's label, else the
+  * root's description (+ `extraId`).
+  */
+  accessibleName(props, extraId) {
+    if (props?.['aria-label']) return {
+      label: props['aria-label']
+    };
+    if (props?.['aria-describedby']) {
+      return {
+        describedby: `${props['aria-describedby']} ${extraId}`
+      };
+    }
+    if (this.attrAriaLabel) return {
+      label: this.attrAriaLabel
+    };
+    if (this.attrAriaDescribedby) {
+      return {
+        describedby: `${this.attrAriaDescribedby} ${extraId}`
+      };
+    }
+    return undefined;
+  }
+  /** Upstream `placeholderName`, the fallback name of the search and list. */
+  get placeholderName() {
+    return this.euiI18n.lookupToken('euiSelectable.placeholderName', 'Filter options');
+  }
+  get searchAccessibleName() {
+    return this.accessibleName(this.args.searchProps, this.messageId) ?? {
+      label: this.placeholderName
+    };
+  }
+  static {
+    n(this.prototype, "searchAccessibleName", [cached]);
+  }
+  get searchAriaLabel() {
+    return this.searchAccessibleName.label;
+  }
+  /** The instructions, unless a description replaced them (upstream). */
+  get searchAriaDescribedby() {
+    return this.searchAccessibleName.describedby ?? this.instructionsId;
+  }
+  get listAccessibleName() {
+    return this.accessibleName(this.args.listProps, this.instructionsId) ?? (this.args.searchable ? {
+      label: this.placeholderName
+    } : {});
+  }
+  static {
+    n(this.prototype, "listAccessibleName", [cached]);
+  }
   preventOnFocus = false;
   constructor(owner, args) {
     super(owner, args);
-    this.searchValue = args.searchProps?.defaultValue ?? '';
+    const {
+      searchProps
+    } = args;
+    this.internalSearchValue = searchProps?.value || String(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;
+      if (index !== -1) this.internalActiveOptionIndex = index;
+    }
+    // upstream reports the initial search on mount; after render so the
+    // callback may update state that was already rendered
+    if (searchProps?.onChange) {
+      schedule('afterRender', () => {
+        if (isDestroying(this) || isDestroyed(this)) return;
+        this.args.searchProps?.onChange?.(this.searchValue, this.visibleOptions);
+      });
     }
   }
+  /** `searchProps.value` (controlled) or the typed search. */
+  get searchValue() {
+    return this.args.searchProps?.value ?? this.internalSearchValue;
+  }
+  get optionMatcher() {
+    return this.args.optionMatcher ?? DEFAULT_OPTION_MATCHER;
+  }
+  /** Derived from `@options` and the search on every change (no copy kept). */
   get visibleOptions() {
-    return getMatchingOptions(this.args.options, this.searchValue, this.args.isPreFiltered);
+    return getMatchingOptions(this.args.options, this.searchValue, this.args.isPreFiltered, this.optionMatcher);
+  }
+  /**
+  * The current option's index in the visible options; dropped when the
+  * options change and it is out of range (upstream).
+  */
+  static {
+    n(this.prototype, "visibleOptions", [cached]);
+  }
+  get activeOptionIndex() {
+    const index = this.internalActiveOptionIndex;
+    return index !== undefined && index >= this.visibleOptions.length ? undefined : index;
+  }
+  /** Sets the current option and reports it (upstream `onActiveOptionChange`). */
+  setActive(index) {
+    if (index === this.internalActiveOptionIndex) return;
+    const previous = this.activeOptionIndex;
+    this.internalActiveOptionIndex = index;
+    if (this.activeOptionIndex !== previous) {
+      const option = index !== undefined && index >= 0 ? this.visibleOptions[index] : undefined;
+      this.args.onActiveOptionChange?.(option ?? null);
+    }
   }
   get listId() {
     return `${this.rootId}_listbox`;
@@ -57,6 +212,33 @@ class EuiSelectable extends Component {
   get messageId() {
     return `${this.rootId}_messageContent`;
   }
+  get instructionsId() {
+    return `${this.rootId}_instructions`;
+  }
+  /** Upstream default: multiple selection. */
+  get singleSelection() {
+    return this.args.singleSelection ?? false;
+  }
+  get screenReaderInstructions() {
+    const instructions = this.euiI18n.lookupToken('euiSelectable.screenReaderInstructions', 'Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options.');
+    const custom = this.args.selectableScreenReaderText;
+    return custom ? `${custom} ${instructions}` : instructions;
+  }
+  /** Upstream live region text: "N results available". */
+  get searchResultsText() {
+    const resultsLength = this.visibleOptions.filter(option => !option.disabled || option.hasAriaDisabled).length;
+    return this.euiI18n.lookupToken('euiSelectable.searchResults', ({
+      resultsLength
+    }) => `${resultsLength} result${resultsLength === 1 ? '' : 's'} available`, {
+      resultsLength
+    });
+  }
+  get classes() {
+    return euiClass(getEuiThemeContext(this), euiSelectableStyles.euiSelectable, this.args.height === 'full' && euiSelectableStyles.fullHeight, this.args.css);
+  }
+  static {
+    n(this.prototype, "classes", [cached]);
+  }
   makeOptionId = index => `${this.listId}_option-${index}`;
   get activeDescendant() {
     return this.activeOptionIndex === undefined ? undefined : this.makeOptionId(this.activeOptionIndex);
@@ -65,6 +247,11 @@ class EuiSelectable extends Component {
     return this.args.searchProps?.placeholder ?? this.euiI18n.lookupToken('euiSelectable.placeholderName', 'Filter options');
   }
   get message() {
+    if (this.args.errorMessage != null) {
+      return {
+        text: this.args.errorMessage
+      };
+    }
     if (this.args.isLoading) {
       return {
         isLoading: true,
@@ -95,22 +282,49 @@ class EuiSelectable extends Component {
       searchValue: '\u0000'
     }).split('\u0000')[0];
   }
-  isSelectable = option => Boolean(option && !option.disabled && !option.isGroupLabel);
+  /** Upstream: `hasAriaDisabled` options can be the current one. */
+  isSelectable = option => isNavigable(option);
+  /**
+  * Upstream `isFocusOnSearchOrListBox`: keys pressed on other content
+  * laid out inside (e.g. a footer button) are not list navigation. The
+  * root itself also counts (Ember EUI: keydown dispatched on it).
+  */ /** Upstream `target === this.inputRef` (searchable only). */
+  isSearchInput(target) {
+    return Boolean(this.args.searchable && target instanceof HTMLInputElement && target.classList.contains('euiSelectableSearch'));
+  }
+  isFromSearchOrList(event) {
+    const target = event.target;
+    if (target === event.currentTarget) return true;
+    if (!(target instanceof Element)) return false;
+    return this.isSearchInput(target) || Boolean(target.closest('.euiSelectableList'));
+  }
   onMouseDown() {
     // a click on an option must not first move the current option
     this.preventOnFocus = true;
   }
+  /**
+  * Upstream `onFocus`. Focusing the search field only marks the
+  * selectable as focused: the first option becomes current with the
+  * first key or search change. Focus on the list makes the first checked
+  * (or first) option current. Called without an event after a key or a
+  * search change.
+  */
   static {
     n(this.prototype, "onMouseDown", [action]);
   }
-  onFocus() {
+  onFocus(event) {
     if (this.preventOnFocus) {
       this.preventOnFocus = false;
       return;
     }
-    if (!this.visibleOptions.length || this.activeOptionIndex) return;
+    if (event && this.isSearchInput(event.target)) {
+      this.isFocused = true;
+      return;
+    }
+    if (!this.visibleOptions.length || this.activeOptionIndex !== undefined) return;
+    if (event && !this.isFromSearchOrList(event)) return;
     const firstChecked = this.visibleOptions.findIndex(option => option.checked && this.isSelectable(option));
-    this.activeOptionIndex = firstChecked > -1 ? firstChecked : this.visibleOptions.findIndex(this.isSelectable);
+    this.setActive(firstChecked > -1 ? firstChecked : this.visibleOptions.findIndex(this.isSelectable));
     this.isFocused = true;
   }
   static {
@@ -119,14 +333,30 @@ class EuiSelectable extends Component {
   onBlur(event) {
     const container = event.currentTarget;
     if (event.relatedTarget && container.contains(event.relatedTarget)) return;
-    this.activeOptionIndex = undefined;
-    this.isFocused = false;
+    // Focus also leaves when rendering removes the focused list (e.g. the
+    // options become empty): reset after that render, unless focus is back.
+    schedule('actions', () => {
+      if (isDestroying(this) || isDestroyed(this)) return;
+      if (container.isConnected && container.contains(document.activeElement)) return;
+      this.setActive(undefined);
+      this.isFocused = false;
+    });
   }
   static {
     n(this.prototype, "onBlur", [action]);
   }
   onKeyDown(event) {
+    if (!this.isFromSearchOrList(event)) {
+      this.setActive(undefined);
+      this.isFocused = false;
+      return;
+    }
     switch (event.key) {
+      case 'Alt':
+      case 'Shift':
+      case 'Control':
+      case 'Meta':
+        break;
       case 'ArrowUp':
         event.preventDefault();
         event.stopPropagation();
@@ -137,21 +367,26 @@ class EuiSelectable extends Component {
         event.stopPropagation();
         this.moveActiveOption(1);
         break;
+      case ' ':
       case 'Enter':
         {
+          // in a search field, Space types (upstream)
+          if (event.key === ' ' && this.args.searchable && event.target.tagName === 'INPUT') return;
           event.preventDefault();
           event.stopPropagation();
           const option = this.activeOptionIndex !== undefined ? this.visibleOptions[this.activeOptionIndex] : undefined;
-          const options = option ? toggleOption(this.args.options, option, {
+          const result = option ? toggleOptionWithChange(this.args.options, option, {
             allowExclusions: this.args.allowExclusions,
-            singleSelection: this.args.singleSelection
+            singleSelection: this.singleSelection
           }) : undefined;
-          if (options) this.args.onChange?.(options);
+          if (result) this.args.onChange?.(result.options, event, result.changedOption);
           break;
         }
       default:
-        // typing in the search: the current option is picked again
-        this.activeOptionIndex = undefined;
+        // upstream: any other key resets the current option and picks the
+        // first checked (or first) one again
+        this.setActive(undefined);
+        this.onFocus();
         break;
     }
   }
@@ -167,11 +402,12 @@ class EuiSelectable extends Component {
     while (!this.isSelectable(options[next])) {
       next = (next + (amount > 0 ? 1 : -1) + options.length) % options.length;
     }
-    this.activeOptionIndex = next;
+    this.setActive(next);
   }
   onSearchChange(matchingOptions, searchValue) {
-    this.searchValue = searchValue;
-    this.activeOptionIndex = undefined;
+    this.internalSearchValue = searchValue;
+    this.setActive(undefined);
+    this.args.searchProps?.onChange?.(searchValue, matchingOptions);
     this.args.searchProps?.onSearch?.(searchValue, matchingOptions);
     if (this.isFocused) this.onFocus();
   }
@@ -179,24 +415,24 @@ class EuiSelectable extends Component {
     n(this.prototype, "onSearchChange", [action]);
   }
   setActiveOptionIndex(index) {
-    this.activeOptionIndex = index;
+    this.setActive(index);
   }
   static {
     n(this.prototype, "setActiveOptionIndex", [action]);
   }
-  onOptionClick(options) {
-    this.args.onChange?.(options);
+  onOptionClick(options, event, changedOption) {
+    this.args.onChange?.(options, event, changedOption);
   }
   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>", {
+    setComponentTemplate(precompileTemplate("<div class=\"euiSelectable {{this.classes}}\" {{on \"keydown\" this.onKeyDown}} {{on \"focusin\" this.onFocus}} {{on \"focusout\" this.onBlur}} {{on \"mousedown\" this.onMouseDown}} ...attributes {{this.moveAriaAttributes}}>\n  {{#let (if @searchable (component EuiSelectableSearch options=@options onChange=this.onSearchChange placeholder=this.placeholder value=this.searchValue compressed=@searchProps.compressed isLoading=@searchProps.isLoading isClearable=@searchProps.isClearable isPreFiltered=@isPreFiltered optionMatcher=this.optionMatcher listId=(if this.message undefined this.listId) ariaDescribedby=this.searchAriaDescribedby ariaLabel=this.searchAriaLabel instructionsId=this.instructionsId activeDescendant=this.activeDescendant instructions=this.screenReaderInstructions onKeyDown=@searchProps.onKeyDown onClick=@searchProps.onClick onFocus=@searchProps.onFocus onBlur=@searchProps.onBlur inputRef=@searchProps.inputRef dataTestSubj=(searchTestSubj @searchProps) className=@searchProps.className prepend=@searchProps.prepend append=@searchProps.append onKeyUpCapture=@searchProps.onKeyUpCapture onInput=@searchProps.onInput fullWidth=@searchProps.fullWidth incremental=@searchProps.incremental disabled=@searchProps.disabled isDisabled=@searchProps.isDisabled readOnly=@searchProps.readOnly isInvalid=@searchProps.isInvalid id=@searchProps.id rest=@searchProps)) (component SelectableBody selectable=this options=@options searchable=@searchable singleSelection=this.singleSelection allowExclusions=@allowExclusions height=@height listProps=@listProps searchValue=this.searchValue activeOptionIndex=this.activeOptionIndex message=this.message searchResultsText=this.searchResultsText isPreFiltered=@isPreFiltered) as |Search List|}}\n    {{#if (has-block)}}\n      {{yield (hash list=List search=Search)}}\n    {{else}}\n      {{#if Search}}\n        <Search />\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,
+        searchTestSubj,
         SelectableBody,
         hash
       })
@@ -206,18 +442,25 @@ class EuiSelectable extends Component {
 function flag(explicit, hasBlock) {
   return explicit ?? hasBlock;
 }
-function isFull(height) {
-  return height === 'full';
+function searchTestSubj(searchProps) {
+  return searchProps?.['data-test-subj'];
 }
 /** The list, or the message replacing it (loading, no matches, empty). */class SelectableBody extends Component {
   get selectable() {
     return this.args.selectable;
   }
+  /** Upstream: announces while a message shows or an option is current. */
+  get isLiveActive() {
+    return this.args.message !== undefined || this.args.activeOptionIndex !== undefined;
+  }
   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}}", {
+    setComponentTemplate(precompileTemplate("{{#if @searchable}}\n  <EuiScreenReaderLive @isActive={{this.isLiveActive}}>\n    {{#if @message}}\n      {{#if @message.searchValue}}\n        {{this.selectable.noMatchesPrefix}}{{@message.searchValue}}{{this.selectable.noMatchesSuffix}}\n      {{else}}\n        {{@message.text}}\n      {{/if}}\n    {{else}}\n      {{@searchResultsText}}\n    {{/if}}\n  </EuiScreenReaderLive>\n{{/if}}\n{{#if @message}}\n  <EuiSelectableMessage id={{this.selectable.messageId}} style={{cssStyle (hash minHeight=@messageMinHeight)}} @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}} @paddingSize={{@listProps.paddingSize}} @showIcons={{@listProps.showIcons}} @rowHeight={{@listProps.rowHeight}} @onFocusBadge={{@listProps.onFocusBadge}} @isVirtualized={{@listProps.isVirtualized}} @textWrap={{@listProps.textWrap}} @truncationProps={{@listProps.truncationProps}} @isPreFiltered={{@isPreFiltered}} @css={{@listProps.css}} @windowProps={{@listProps.windowProps}} @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\")}} @ariaLabel={{this.selectable.listAccessibleName.label}} @ariaDescribedby={{this.selectable.listAccessibleName.describedby}} ...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: () => ({
+        EuiScreenReaderLive,
         EuiSelectableMessage,
+        cssStyle,
+        hash,
         EuiLoadingSpinner,
         EuiSpacer,
         EuiSelectableList,
@@ -227,5 +470,5 @@ function isFull(height) {
   }
 }
 
-export { EuiSelectable as default };
+export { createPartialStringEqualityOptionMatcher, EuiSelectable as default };
 //# sourceMappingURL=eui-selectable.js.map