@elastic/eui 90.0.0 → 90.0.1

package/eui.d.ts

@@ -5911,6 +5911,12 @@ declare module '@elastic/eui/src/components/text_truncate/text_truncate' {
 	     * or highlighting
 	     */
 	    children?: (truncatedString: string) => ReactNode;
+	    /**
+	     * For some edge case scenarios, EuiTextTruncate's calculations may be off until
+	     * fonts are done loading or layout is done shifting or settling. Adding a delay
+	     * may help resolve any rendering issues.
+	     */
+	    calculationDelayMs?: number;
 	};
 	export const EuiTextTruncate: FunctionComponent<EuiTextTruncateProps>;
 	export {};
@@ -10964,13 +10970,14 @@ declare module '@elastic/eui/src/themes' {
 }
 declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_body_footer.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const hideScrollbars = "\n  scrollbar-width: none; /* Firefox */\n\n  &::-webkit-scrollbar {\n    display: none; /* Chrome, Edge, & Safari */\n  }\n";
 	export const euiCollapsibleNavBodyStyles: {
 	    euiCollapsibleNav__body: import("@emotion/utils").SerializedStyles;
-	    readonly isPushCollapsed: import("@emotion/utils").SerializedStyles;
-	    _isPushCollapsed: string;
+	    isPushCollapsed: import("@emotion/utils").SerializedStyles;
 	};
-	export const euiCollapsibleNavFooterStyles: ({ euiTheme }: UseEuiTheme) => {
+	export const euiCollapsibleNavFooterStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiCollapsibleNav__footer: import("@emotion/utils").SerializedStyles;
+	    isPushCollapsed: import("@emotion/utils").SerializedStyles;
 	};
 
 }
@@ -11049,7 +11056,7 @@ declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav
 declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button' {
 	import { FunctionComponent } from 'react';
 	import { EuiCollapsibleNavItemProps } from '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item';
-	export const EuiCollapsedNavButton: FunctionComponent<EuiCollapsibleNavItemProps & {
+	export const EuiCollapsedNavButton: FunctionComponent<Omit<EuiCollapsibleNavItemProps, 'items' | 'isCollapsible' | 'accordionProps'> & {
 	    hideToolTip?: boolean;
 	}>;
 
@@ -11058,21 +11065,15 @@ declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav
 	import { UseEuiTheme } from '@elastic/eui/src/services';
 	export const euiCollapsedNavPopoverStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiCollapsedNavPopover__panel: import("@emotion/utils").SerializedStyles;
-	    euiCollapsedNavPopover__items: import("@emotion/utils").SerializedStyles;
-	};
-	export const euiCollapsedNavPopoverTitleStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiCollapsedNavPopover__title: import("@emotion/utils").SerializedStyles;
-	    link: import("@emotion/utils").SerializedStyles;
-	    span: import("@emotion/utils").SerializedStyles;
+	    euiCollapsedNavPopover__items: import("@emotion/utils").SerializedStyles;
 	};
 
 }
 declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover' {
 	import { FunctionComponent } from 'react';
 	import { EuiCollapsibleNavItemProps } from '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item';
-	export const EuiCollapsedNavPopover: FunctionComponent<EuiCollapsibleNavItemProps & {
-	    items: EuiCollapsibleNavItemProps['items'];
-	}>;
+	export const EuiCollapsedNavPopover: FunctionComponent<Omit<EuiCollapsibleNavItemProps, 'isCollapsible' | 'accordionProps' | 'href' | 'linkProps'>>;
 
 }
 declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item' {
@@ -11108,7 +11109,7 @@ declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav
 declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_link' {
 	import { FunctionComponent, ReactNode } from 'react';
 	import { EuiLinkProps } from '@elastic/eui/src/components/link';
-	import type { _SharedEuiCollapsibleNavItemProps, _EuiCollapsibleNavItemDisplayProps } from '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item'; type EuiCollapsibleNavLinkProps = Omit<EuiLinkProps, 'children'> & Omit<_SharedEuiCollapsibleNavItemProps, 'items' | 'isCollapsible' | 'accordionProps'> & _EuiCollapsibleNavItemDisplayProps & {
+	import type { _SharedEuiCollapsibleNavItemProps, _EuiCollapsibleNavItemDisplayProps, EuiCollapsibleNavItemProps } from '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item'; type EuiCollapsibleNavLinkProps = Omit<EuiLinkProps, 'children'> & _SharedEuiCollapsibleNavItemProps & _EuiCollapsibleNavItemDisplayProps & Pick<EuiCollapsibleNavItemProps, 'href' | 'linkProps'> & {
 	    children: ReactNode;
 	    isInteractive?: boolean;
 	    isNotAccordion?: boolean;
@@ -11132,8 +11133,8 @@ declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav
 	import { UseEuiTheme } from '@elastic/eui/src/services';
 	export const euiCollapsibleNavAccordionStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiCollapsibleNavAccordion: import("@emotion/utils").SerializedStyles;
-	    isTopItem: import("@emotion/utils").SerializedStyles;
 	    isSelected: import("@emotion/utils").SerializedStyles;
+	    isTopItem: import("@emotion/utils").SerializedStyles;
 	    isSubItem: import("@emotion/utils").SerializedStyles;
 	    euiCollapsibleNavAccordion__arrow: import("@emotion/utils").SerializedStyles;
 	};
@@ -11141,9 +11142,8 @@ declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav
 }
 declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion' {
 	import { FunctionComponent, ReactNode } from 'react';
-	import { EuiCollapsibleNavSubItemProps, _SharedEuiCollapsibleNavItemProps, _EuiCollapsibleNavItemDisplayProps } from '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item'; type EuiCollapsibleNavAccordionProps = Omit<_SharedEuiCollapsibleNavItemProps, 'items' | 'isCollapsible'> & _EuiCollapsibleNavItemDisplayProps & {
+	import { type _SharedEuiCollapsibleNavItemProps, type _EuiCollapsibleNavItemDisplayProps, type EuiCollapsibleNavItemProps } from '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item'; type EuiCollapsibleNavAccordionProps = _SharedEuiCollapsibleNavItemProps & _EuiCollapsibleNavItemDisplayProps & Pick<EuiCollapsibleNavItemProps, 'accordionProps'> & Required<Pick<EuiCollapsibleNavItemProps, 'items'>> & {
 	    buttonContent: ReactNode;
-	    items: EuiCollapsibleNavSubItemProps[];
 	};
 	/**
 	 * Internal nav accordion component.
@@ -11158,9 +11158,8 @@ declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav
 }
 declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_group' {
 	import { FunctionComponent, ReactNode } from 'react';
-	import { EuiCollapsibleNavSubItemProps, _SharedEuiCollapsibleNavItemProps, _EuiCollapsibleNavItemDisplayProps } from '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item'; type EuiCollapsibleNavGroupProps = Omit<_SharedEuiCollapsibleNavItemProps, 'items' | 'accordionProps'> & _EuiCollapsibleNavItemDisplayProps & {
+	import { type _SharedEuiCollapsibleNavItemProps, type _EuiCollapsibleNavItemDisplayProps, type EuiCollapsibleNavItemProps } from '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item'; type EuiCollapsibleNavGroupProps = _SharedEuiCollapsibleNavItemProps & _EuiCollapsibleNavItemDisplayProps & Required<Pick<EuiCollapsibleNavItemProps, 'items'>> & {
 	    header: ReactNode;
-	    items: EuiCollapsibleNavSubItemProps[];
 	};
 	/**
 	 * Internal nav group. Should look the same as an open accordion,
@@ -11181,19 +11180,54 @@ declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav
 	import { EuiLinkProps } from '@elastic/eui/src/components/link';
 	import { EuiAccordionProps } from '@elastic/eui/src/components/accordion';
 	export type _SharedEuiCollapsibleNavItemProps = HTMLAttributes<HTMLElement> & CommonProps & {
+	    /**
+	     * Highlights whether an item is currently selected, e.g.
+	     * if the user is on the same page as the nav link
+	     */
+	    isSelected?: boolean;
+	};
+	export type EuiCollapsibleNavItemProps = _SharedEuiCollapsibleNavItemProps & {
+	    /**
+	     * Required text to render as the nav item title
+	     */
+	    title: string;
+	    /**
+	     * Allows customizing the title element.
+	     * Consider using a heading element for better accessibility.
+	     * Defaults to an unsemantic `span` or `div`, depending on context.
+	     */
+	    titleElement?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'div';
+	    /**
+	     * Optional icon to render to the left of title content
+	     */
+	    icon?: IconType;
+	    /**
+	     * Optional props to pass to the title icon
+	     */
+	    iconProps?: Partial<EuiIconProps>;
+	} & ExclusiveUnion<{
 	    /**
 	     * The nav item link.
+	     *
 	     * If not included, and no `onClick` is specified, the nav item
 	     * will render as an non-interactive `<span>`.
+	     *
+	     * Should not be used together with `items`, as the title will
+	     * trigger the accordion collapse/expand action instead of a link.
 	     */
 	    href?: string;
+	    /**
+	     * If a `href` is specified, use this prop to pass any prop that `EuiLink` accepts
+	     */
+	    linkProps?: Partial<EuiLinkProps>;
+	}, {
 	    /**
 	     * Will render either an accordion or group of nested child item links.
 	     *
 	     * Accepts any #EuiCollapsibleNavItemProps. Or, to render completely custom
 	     * subitem content, pass an object with a `renderItem` callback.
 	     */
-	    items?: EuiCollapsibleNavSubItemProps[];
+	    items: EuiCollapsibleNavSubItemProps[];
 	    /**
 	     * If set to false, will (visually) render an always-open accordion that cannot
 	     * be toggled closed. Ignored if `items` is not passed.
@@ -11207,36 +11241,7 @@ declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav
 	     * that control the toggled state of the accordion (e.g. `initialIsOpen`, `forceState`)
 	     */
 	    accordionProps?: Partial<EuiAccordionProps>;
-	    /**
-	     * If a `href` is specified, use this prop to pass any prop that `EuiLink` accepts
-	     */
-	    linkProps?: Partial<EuiLinkProps>;
-	    /**
-	     * Highlights whether an item is currently selected, e.g.
-	     * if the user is on the same page as the nav link
-	     */
-	    isSelected?: boolean;
-	};
-	export type EuiCollapsibleNavItemProps = {
-	    /**
-	     * Required text to render as the nav item title
-	     */
-	    title: string;
-	    /**
-	     * Allows customizing the title element.
-	     * Consider using a heading element for better accessibility.
-	     * Defaults to an unsemantic `span` or `div`, depending on context.
-	     */
-	    titleElement?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'div';
-	    /**
-	     * Optional icon to render to the left of title content
-	     */
-	    icon?: IconType;
-	    /**
-	     * Optional props to pass to the title icon
-	     */
-	    iconProps?: Partial<EuiIconProps>;
-	} & _SharedEuiCollapsibleNavItemProps;
+	}>;
 	export type EuiCollapsibleNavCustomSubItem = {
 	    renderItem: () => ReactNode;
 	};
@@ -11280,15 +11285,8 @@ declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav
 declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group' {
 	import { FunctionComponent, HTMLAttributes } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
-	import { EuiCollapsibleNavSubItemProps, EuiCollapsibleNavItemProps } from '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item';
-	export type EuiCollapsibleNavGroupProps = Omit<EuiCollapsibleNavItemProps, 'items' | 'accordionProps'> & {
-	    /**
-	     * Will render an array of `EuiCollapsibleNavItems`.
-	     *
-	     * Accepts any #EuiCollapsibleNavItemProps. Or, to render completely custom
-	     * subitem content, pass an object with a `renderItem` callback.
-	     */
-	    items: EuiCollapsibleNavSubItemProps[];
+	import { type EuiCollapsibleNavItemProps, type _SharedEuiCollapsibleNavItemProps } from '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item';
+	export type EuiCollapsibleNavGroupProps = _SharedEuiCollapsibleNavItemProps & Pick<EuiCollapsibleNavItemProps, 'title' | 'titleElement' | 'icon' | 'iconProps'> & Required<Pick<EuiCollapsibleNavItemProps, 'items'>> & {
 	    /**
 	     * Optional props to pass to the wrapping div
 	     */
@@ -11967,7 +11965,7 @@ declare module '@elastic/eui/src/components/combo_box/combo_box' {
 	    /**
 	     * By default, EuiComboBox will truncate option labels at the end of
 	     * the string. You can use pass in a custom truncation configuration that
-	     * accepts any prop that [EuiTextTruncate](/#/utilities/text-truncate) prop
+	     * accepts any [EuiTextTruncate](/#/utilities/text-truncation) prop,
 	     * except for `text` and `children`.
 	     *
 	     * Note: when searching, custom truncation props are ignored. The highlighted search
@@ -19884,6 +19882,7 @@ declare module '@elastic/eui/src/components/search_bar/filters/is_filter' {
 declare module '@elastic/eui/src/components/selectable/selectable_option' {
 	import React, { HTMLAttributes } from 'react';
 	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
+	import type { EuiTextTruncateProps } from '@elastic/eui/src/components/text_truncate';
 	export type EuiSelectableOptionCheckedType = 'on' | 'off' | 'mixed' | undefined;
 	export type EuiSelectableOptionBase = CommonProps & {
 	    /**
@@ -19934,6 +19933,21 @@ declare module '@elastic/eui/src/components/selectable/selectable_option' {
 	    data?: {
 	        [key: string]: any;
 	    };
+	    /**
+	     * How to handle long text within the item.
+	     * Wrapping only works if `isVirtualization` is false.
+	     * @default 'truncate'
+	     */
+	    textWrap?: 'truncate' | 'wrap';
+	    /**
+	     * If textWrap is set to `truncate`, you can pass a custom truncation configuration
+	     * that accepts any [EuiTextTruncate](/#/utilities/text-truncation) prop except for
+	     * `text` and `children`.
+	     *
+	     * Note: when searching, custom truncation props are ignored. The highlighted search
+	     * text will always take precedence.
+	     */
+	    truncationProps?: Partial<Omit<EuiTextTruncateProps, 'text' | 'children'>>;
 	}; type _EuiSelectableGroupLabelOption = Omit<EuiSelectableOptionBase, 'isGroupLabel'> & Exclude<HTMLAttributes<HTMLDivElement>, 'id'> & {
 	    isGroupLabel: true;
 	};
@@ -20000,8 +20014,8 @@ declare module '@elastic/eui/src/components/selectable/selectable_message' {
 declare module '@elastic/eui/src/components/selectable/selectable_list/selectable_list_item' {
 	import React, { Component, LiHTMLAttributes } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
-	import { EuiSelectableOptionCheckedType } from '@elastic/eui/src/components/selectable/selectable_option';
 	import { EuiBadgeProps } from '@elastic/eui/src/components/badge';
+	import type { EuiSelectableOption, EuiSelectableOptionCheckedType } from '@elastic/eui/src/components/selectable/selectable_option';
 	export const PADDING_SIZES: ("s" | "none")[];
 	export type EuiSelectablePaddingSize = (typeof PADDING_SIZES)[number];
 	export type EuiSelectableListItemProps = LiHTMLAttributes<HTMLLIElement> & CommonProps & {
@@ -20048,7 +20062,7 @@ declare module '@elastic/eui/src/components/selectable/selectable_list/selectabl
 	     * How to handle long text within the item.
 	     * Wrapping only works if virtualization is off.
 	     */
-	    textWrap?: 'truncate' | 'wrap';
+	    textWrap?: EuiSelectableOption['textWrap'];
 	};
 	export class EuiSelectableListItem extends Component<EuiSelectableListItemProps> {
 	    static defaultProps: {
@@ -20066,6 +20080,7 @@ declare module '@elastic/eui/src/components/selectable/selectable_list/selectabl
 	import React, { Component, HTMLAttributes, ReactNode, CSSProperties } from 'react';
 	import { FixedSizeList, ListProps, ListChildComponentProps as ReactWindowListChildComponentProps } from 'react-window';
 	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
+	import { EuiAutoSizeHorizontal } from '@elastic/eui/src/components/auto_sizer';
 	import { EuiSelectableOption } from '@elastic/eui/src/components/selectable/selectable_option';
 	import { EuiSelectableOnChangeEvent } from '@elastic/eui/src/components/selectable/selectable';
 	import { EuiSelectableListItemProps } from '@elastic/eui/src/components/selectable/selectable_list/selectable_list_item';
@@ -20123,6 +20138,15 @@ declare module '@elastic/eui/src/components/selectable/selectable_list/selectabl
 	     * Wrapping only works if virtualization is off.
 	     */
 	    textWrap?: EuiSelectableListItemProps['textWrap'];
+	    /**
+	     * If textWrap is set to `truncate`, you can pass a custom truncation configuration
+	     * that accepts any [EuiTextTruncate](/#/utilities/text-truncation) prop except for
+	     * `text` and `children`.
+	     *
+	     * Note: when searching, custom truncation props are ignored. The highlighted search
+	     * text will always take precedence.
+	     */
+	    truncationProps?: EuiSelectableOption['truncationProps'];
 	} & EuiSelectableOptionsListVirtualizedProps;
 	export type EuiSelectableListProps<T> = EuiSelectableOptionsListProps & {
 	    /**
@@ -20162,25 +20186,314 @@ declare module '@elastic/eui/src/components/selectable/selectable_list/selectabl
 	    makeOptionId: (index: number | undefined) => string;
 	    listId: string;
 	    setActiveOptionIndex: (index: number, cb?: () => void) => void;
+	}; type State<T> = {
+	    defaultOptionWidth: number;
+	    optionArray: Array<EuiSelectableOption<T>>;
+	    itemData: Record<number, EuiSelectableOption<T>>;
+	    ariaPosInSetMap: Record<number, number>;
+	    ariaSetSize: number;
 	};
-	export class EuiSelectableList<T> extends Component<EuiSelectableListProps<T>> {
+	export class EuiSelectableList<T> extends Component<EuiSelectableListProps<T>, State<T>> {
 	    static defaultProps: {
 	        rowHeight: number;
 	        searchValue: string;
 	        isVirtualized: boolean;
 	    };
+	    constructor(props: EuiSelectableListProps<T>);
 	    listRef: FixedSizeList | null;
 	    listBoxRef: HTMLUListElement | null;
 	    setListRef: (ref: FixedSizeList | null) => void;
 	    removeScrollableTabStop: (ref: HTMLDivElement | null) => void;
 	    setListBoxRef: (ref: HTMLUListElement | null) => void;
-	    componentDidUpdate(): void;
-	    constructor(props: EuiSelectableListProps<T>);
-	    ariaSetSize: number;
-	    ariaPosInSetMap: Record<number, number>;
-	    calculateAriaSetAttrs: (optionArray: Array<EuiSelectableOption<T>>) => void;
+	    componentDidUpdate(prevProps: EuiSelectableListProps<T>): void;
+	    calculateAriaSetAttrs: (optionArray: State<T>['optionArray']) => {
+	        ariaPosInSetMap: Record<number, number>;
+	        ariaSetSize: number;
+	    };
 	    ListRow: React.MemoExoticComponent<({ data, index, style }: ListChildComponentProps<T>) => React.JSX.Element>;
-	    renderVirtualizedList: (heightIsFull: boolean, optionArray: EuiSelectableOption[]) => React.JSX.Element | null;
+	    renderVirtualizedList: () => React.JSX.Element | null;
+	    forceVirtualizedListRowRerender: () => void;
+	    focusBadgeOffset: number;
+	    calculateDefaultOptionWidth: ({ width: containerWidth, }: EuiAutoSizeHorizontal) => void;
+	    getTruncationProps: (option: EuiSelectableOption, isFocused: boolean) => {
+	        prefix?: string | undefined;
+	        slot?: string | undefined;
+	        style?: React.CSSProperties | undefined;
+	        title?: string | undefined;
+	        hidden?: boolean | undefined;
+	        content?: string | undefined;
+	        id?: string | undefined;
+	        onChange?: React.FormEventHandler<HTMLDivElement> | undefined;
+	        color?: string | undefined;
+	        className?: string | undefined;
+	        'aria-label'?: string | undefined;
+	        'data-test-subj'?: string | undefined;
+	        css?: import("@emotion/serialize").Interpolation<import("@emotion/react").Theme>;
+	        placeholder?: string | undefined;
+	        width: number | undefined;
+	        defaultChecked?: boolean | undefined;
+	        defaultValue?: string | number | readonly string[] | undefined;
+	        suppressContentEditableWarning?: boolean | undefined;
+	        suppressHydrationWarning?: boolean | undefined;
+	        accessKey?: string | undefined;
+	        autoFocus?: boolean | undefined;
+	        contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+	        contextMenu?: string | undefined;
+	        dir?: string | undefined;
+	        draggable?: (boolean | "true" | "false") | undefined;
+	        lang?: string | undefined;
+	        nonce?: string | undefined;
+	        spellCheck?: (boolean | "true" | "false") | undefined;
+	        tabIndex?: number | undefined;
+	        translate?: "yes" | "no" | undefined;
+	        radioGroup?: string | undefined;
+	        role?: React.AriaRole | undefined;
+	        about?: string | undefined;
+	        datatype?: string | undefined;
+	        inlist?: any;
+	        property?: string | undefined;
+	        rel?: string | undefined;
+	        resource?: string | undefined;
+	        rev?: string | undefined;
+	        typeof?: string | undefined;
+	        vocab?: string | undefined;
+	        autoCapitalize?: string | undefined;
+	        autoCorrect?: string | undefined;
+	        autoSave?: string | undefined;
+	        itemProp?: string | undefined;
+	        itemScope?: boolean | undefined;
+	        itemType?: string | undefined;
+	        itemID?: string | undefined;
+	        itemRef?: string | undefined;
+	        results?: number | undefined;
+	        security?: string | undefined;
+	        unselectable?: "on" | "off" | undefined;
+	        inputMode?: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
+	        is?: string | undefined;
+	        'aria-activedescendant'?: string | undefined;
+	        'aria-atomic'?: (boolean | "true" | "false") | undefined;
+	        'aria-autocomplete'?: "none" | "both" | "list" | "inline" | undefined;
+	        'aria-braillelabel'?: string | undefined;
+	        'aria-brailleroledescription'?: string | undefined;
+	        'aria-busy'?: (boolean | "true" | "false") | undefined;
+	        'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
+	        'aria-colcount'?: number | undefined;
+	        'aria-colindex'?: number | undefined;
+	        'aria-colindextext'?: string | undefined;
+	        'aria-colspan'?: number | undefined;
+	        'aria-controls'?: string | undefined;
+	        'aria-current'?: boolean | "time" | "date" | "step" | "true" | "false" | "page" | "location" | undefined;
+	        'aria-describedby'?: string | undefined;
+	        'aria-description'?: string | undefined;
+	        'aria-details'?: string | undefined;
+	        'aria-disabled'?: (boolean | "true" | "false") | undefined;
+	        'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+	        'aria-errormessage'?: string | undefined;
+	        'aria-expanded'?: (boolean | "true" | "false") | undefined;
+	        'aria-flowto'?: string | undefined;
+	        'aria-grabbed'?: (boolean | "true" | "false") | undefined;
+	        'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+	        'aria-hidden'?: (boolean | "true" | "false") | undefined;
+	        'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+	        'aria-keyshortcuts'?: string | undefined;
+	        'aria-labelledby'?: string | undefined;
+	        'aria-level'?: number | undefined;
+	        'aria-live'?: "off" | "assertive" | "polite" | undefined;
+	        'aria-modal'?: (boolean | "true" | "false") | undefined;
+	        'aria-multiline'?: (boolean | "true" | "false") | undefined;
+	        'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
+	        'aria-orientation'?: "horizontal" | "vertical" | undefined;
+	        'aria-owns'?: string | undefined;
+	        'aria-placeholder'?: string | undefined;
+	        'aria-posinset'?: number | undefined;
+	        'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
+	        'aria-readonly'?: (boolean | "true" | "false") | undefined;
+	        'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+	        'aria-required'?: (boolean | "true" | "false") | undefined;
+	        'aria-roledescription'?: string | undefined;
+	        'aria-rowcount'?: number | undefined;
+	        'aria-rowindex'?: number | undefined;
+	        'aria-rowindextext'?: string | undefined;
+	        'aria-rowspan'?: number | undefined;
+	        'aria-selected'?: (boolean | "true" | "false") | undefined;
+	        'aria-setsize'?: number | undefined;
+	        'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
+	        'aria-valuemax'?: number | undefined;
+	        'aria-valuemin'?: number | undefined;
+	        'aria-valuenow'?: number | undefined;
+	        'aria-valuetext'?: string | undefined;
+	        dangerouslySetInnerHTML?: {
+	            __html: string | TrustedHTML;
+	        } | undefined;
+	        onCopy?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+	        onCopyCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+	        onCut?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+	        onCutCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+	        onPaste?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+	        onPasteCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+	        onCompositionEnd?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+	        onCompositionEndCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+	        onCompositionStart?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+	        onCompositionStartCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+	        onCompositionUpdate?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+	        onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+	        onFocus?: React.FocusEventHandler<HTMLDivElement> | undefined;
+	        onFocusCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
+	        onBlur?: React.FocusEventHandler<HTMLDivElement> | undefined;
+	        onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
+	        onChangeCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+	        onBeforeInput?: React.FormEventHandler<HTMLDivElement> | undefined;
+	        onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+	        onInput?: React.FormEventHandler<HTMLDivElement> | undefined;
+	        onInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+	        onReset?: React.FormEventHandler<HTMLDivElement> | undefined;
+	        onResetCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+	        onSubmit?: React.FormEventHandler<HTMLDivElement> | undefined;
+	        onSubmitCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+	        onInvalid?: React.FormEventHandler<HTMLDivElement> | undefined;
+	        onInvalidCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+	        onLoad?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onLoadCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onError?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onErrorCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onKeyDown?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+	        onKeyDownCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+	        onKeyPress?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+	        onKeyPressCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+	        onKeyUp?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+	        onKeyUpCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+	        onAbort?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onAbortCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onCanPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onCanPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onCanPlayThrough?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onCanPlayThroughCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onDurationChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onDurationChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onEmptied?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onEmptiedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onEncrypted?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onEncryptedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onEnded?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onEndedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onLoadedData?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onLoadedDataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onLoadedMetadata?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onLoadedMetadataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onLoadStart?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onLoadStartCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onPause?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onPauseCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onPlaying?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onPlayingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onProgress?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onProgressCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onRateChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onRateChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onResize?: ((width: number) => void) | undefined;
+	        onResizeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onSeeked?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onSeekedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onSeeking?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onSeekingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onStalled?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onStalledCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onSuspend?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onSuspendCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onTimeUpdate?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onTimeUpdateCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onVolumeChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onVolumeChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onWaiting?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onWaitingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onAuxClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
+	        onAuxClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+	        onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
+	        onClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+	        onContextMenu?: React.MouseEventHandler<HTMLDivElement> | undefined;
+	        onContextMenuCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+	        onDoubleClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
+	        onDoubleClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+	        onDrag?: React.DragEventHandler<HTMLDivElement> | undefined;
+	        onDragCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+	        onDragEnd?: React.DragEventHandler<HTMLDivElement> | undefined;
+	        onDragEndCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+	        onDragEnter?: React.DragEventHandler<HTMLDivElement> | undefined;
+	        onDragEnterCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+	        onDragExit?: React.DragEventHandler<HTMLDivElement> | undefined;
+	        onDragExitCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+	        onDragLeave?: React.DragEventHandler<HTMLDivElement> | undefined;
+	        onDragLeaveCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+	        onDragOver?: React.DragEventHandler<HTMLDivElement> | undefined;
+	        onDragOverCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+	        onDragStart?: React.DragEventHandler<HTMLDivElement> | undefined;
+	        onDragStartCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+	        onDrop?: React.DragEventHandler<HTMLDivElement> | undefined;
+	        onDropCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+	        onMouseDown?: React.MouseEventHandler<HTMLDivElement> | undefined;
+	        onMouseDownCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+	        onMouseEnter?: React.MouseEventHandler<HTMLDivElement> | undefined;
+	        onMouseLeave?: React.MouseEventHandler<HTMLDivElement> | undefined;
+	        onMouseMove?: React.MouseEventHandler<HTMLDivElement> | undefined;
+	        onMouseMoveCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+	        onMouseOut?: React.MouseEventHandler<HTMLDivElement> | undefined;
+	        onMouseOutCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+	        onMouseOver?: React.MouseEventHandler<HTMLDivElement> | undefined;
+	        onMouseOverCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+	        onMouseUp?: React.MouseEventHandler<HTMLDivElement> | undefined;
+	        onMouseUpCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+	        onSelect?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onSelectCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+	        onTouchCancel?: React.TouchEventHandler<HTMLDivElement> | undefined;
+	        onTouchCancelCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+	        onTouchEnd?: React.TouchEventHandler<HTMLDivElement> | undefined;
+	        onTouchEndCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+	        onTouchMove?: React.TouchEventHandler<HTMLDivElement> | undefined;
+	        onTouchMoveCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+	        onTouchStart?: React.TouchEventHandler<HTMLDivElement> | undefined;
+	        onTouchStartCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+	        onPointerDown?: React.PointerEventHandler<HTMLDivElement> | undefined;
+	        onPointerDownCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+	        onPointerMove?: React.PointerEventHandler<HTMLDivElement> | undefined;
+	        onPointerMoveCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+	        onPointerUp?: React.PointerEventHandler<HTMLDivElement> | undefined;
+	        onPointerUpCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+	        onPointerCancel?: React.PointerEventHandler<HTMLDivElement> | undefined;
+	        onPointerCancelCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+	        onPointerEnter?: React.PointerEventHandler<HTMLDivElement> | undefined;
+	        onPointerEnterCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+	        onPointerLeave?: React.PointerEventHandler<HTMLDivElement> | undefined;
+	        onPointerLeaveCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+	        onPointerOver?: React.PointerEventHandler<HTMLDivElement> | undefined;
+	        onPointerOverCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+	        onPointerOut?: React.PointerEventHandler<HTMLDivElement> | undefined;
+	        onPointerOutCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+	        onGotPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+	        onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+	        onLostPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+	        onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+	        onScroll?: React.UIEventHandler<HTMLDivElement> | undefined;
+	        onScrollCapture?: React.UIEventHandler<HTMLDivElement> | undefined;
+	        onWheel?: React.WheelEventHandler<HTMLDivElement> | undefined;
+	        onWheelCapture?: React.WheelEventHandler<HTMLDivElement> | undefined;
+	        onAnimationStart?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+	        onAnimationStartCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+	        onAnimationEnd?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+	        onAnimationEndCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+	        onAnimationIteration?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+	        onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+	        onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement> | undefined;
+	        onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
+	        ellipsis?: string | undefined;
+	        truncation?: "end" | "start" | "middle" | "startEnd" | undefined;
+	        truncationOffset?: number | undefined;
+	        truncationPosition?: number | undefined;
+	        calculationDelayMs?: number | undefined;
+	    } | undefined;
+	    renderSearchedText: (text: string, truncationProps?: EuiSelectableOptionsListProps['truncationProps']) => React.JSX.Element;
+	    renderTruncatedText: (text: string, truncationProps?: EuiSelectableOptionsListProps['truncationProps']) => React.JSX.Element;
 	    render(): React.JSX.Element;
 	    onAddOrRemoveOption: (option: EuiSelectableOption<T>, event: EuiSelectableOnChangeEvent) => void;
 	    private onAddOption;