@elastic/eui 88.5.4 → 89.0.0

package/eui.d.ts

@@ -38,34 +38,6 @@ declare module '@elastic/eui/src/services/keys' {
 	    HOME = "Home"
 	}
 
-}
-declare module '@elastic/eui/src/services/accessibility/accessible_click_keys' {
-	export const accessibleClickKeys: {
-	    Enter: string;
-	    " ": string;
-	};
-
-}
-declare module '@elastic/eui/src/services/accessibility/cascading_menu_keys' {
-	export const cascadingMenuKeys: {
-	    ARROW_DOWN: string;
-	    ARROW_LEFT: string;
-	    ARROW_RIGHT: string;
-	    ARROW_UP: string;
-	    ESCAPE: string;
-	    TAB: string;
-	};
-
-}
-declare module '@elastic/eui/src/services/accessibility/combo_box_keys' {
-	export const comboBoxKeys: {
-	    ARROW_DOWN: string;
-	    ARROW_UP: string;
-	    ENTER: string;
-	    ESCAPE: string;
-	    TAB: string;
-	};
-
 }
 declare module '@elastic/eui/src/services/accessibility/html_id_generator' {
 	/**
@@ -99,9 +71,6 @@ declare module '@elastic/eui/src/services/accessibility/html_id_generator' {
 
 }
 declare module '@elastic/eui/src/services/accessibility' {
-	export { accessibleClickKeys } from '@elastic/eui/src/services/accessibility/accessible_click_keys';
-	export { cascadingMenuKeys } from '@elastic/eui/src/services/accessibility/cascading_menu_keys';
-	export { comboBoxKeys } from '@elastic/eui/src/services/accessibility/combo_box_keys';
 	export { htmlIdGenerator, useGeneratedHtmlId } from '@elastic/eui/src/services/accessibility/html_id_generator';
 
 }
@@ -5734,6 +5703,199 @@ declare module '@elastic/eui/src/components/table/table_row' {
 	export const EuiTableRow: FunctionComponent<Props>;
 	export {};
 
+}
+declare module '@elastic/eui/src/services/canvas/canvas_text_utils' {
+	import type { ExclusiveUnion } from '@elastic/eui/src/components/common';
+	export type CanvasTextParams = ExclusiveUnion<{
+	    container: HTMLElement;
+	}, {
+	    font: CanvasTextDrawingStyles['font'];
+	}>;
+	/**
+	 * Creates a temporary Canvas element for manipulating text & determining text width.
+	 *
+	 * To accurately measure text, canvas rendering requires either a container to
+	 * compute/derive font styles from, or a static font string (useful for usage
+	 * outside the DOM). Particular care should be applied when fallback fonts are
+	 * used, as more fallback fonts can lead to less precision.
+	 *
+	 * Please note that while canvas is more significantly more performant than DOM
+	 * measurement, there are subpixel to single digit pixel differences between
+	 * DOM and canvas measurement due to the different rendering engines used.
+	 */
+	export class CanvasTextUtils {
+	    context: CanvasRenderingContext2D;
+	    currentText: string;
+	    constructor({ font, container }: CanvasTextParams);
+	    computeFontFromElement: (element: HTMLElement) => string;
+	    get textWidth(): number;
+	    setTextToCheck: (text: string) => void;
+	}
+
+}
+declare module '@elastic/eui/src/services/canvas' {
+	export { CanvasTextUtils } from '@elastic/eui/src/services/canvas/canvas_text_utils';
+	export type { CanvasTextParams } from '@elastic/eui/src/services/canvas/canvas_text_utils';
+
+}
+declare module '@elastic/eui/src/components/text_truncate/utils' {
+	import { CanvasTextParams, CanvasTextUtils } from '@elastic/eui/src/services/canvas'; type TruncationParams = CanvasTextParams & {
+	    fullText: string;
+	    ellipsis: string;
+	    availableWidth: number;
+	};
+	/**
+	 * Utilities for truncating types at various positions, as well as
+	 * determining whether truncation is possible or even necessary.
+	 */
+	export class TruncationUtils extends CanvasTextUtils {
+	    protected fullText: TruncationParams['fullText'];
+	    protected ellipsis: TruncationParams['ellipsis'];
+	    protected availableWidth: TruncationParams['availableWidth'];
+	    constructor({ fullText, ellipsis, availableWidth, ...rest }: TruncationParams);
+	    /**
+	     * Performance utilities
+	     */
+	    debugPerformance: boolean;
+	    debugCounter: number;
+	    get textWidth(): number;
+	    /**
+	     * Internal utils for calculating a ratio based on the passed available width
+	     * vs the full text width.
+	     * This ratio is used to get an initial _approximate_ text string that should
+	     * be slightly over the available width, which we can then remove from
+	     * character-by-character until the text just fits within the available width.
+	     */
+	    widthRatio: number;
+	    setTextWidthRatio: (text?: string, textToOffset?: string) => void;
+	    getTextFromRatio: (text: string, type: 'start' | 'end') => string;
+	    /**
+	     * Early return checks
+	     */
+	    checkIfTruncationIsNeeded: () => false | undefined;
+	    checkSufficientEllipsisWidth: (truncation: string) => false | undefined;
+	    checkTruncationOffsetWidth: (text: string) => false | undefined;
+	    /**
+	     * Truncation types logic. This is where the magic happens
+	     */
+	    truncateStart: (truncationOffset?: number | undefined) => string;
+	    truncateEnd: (truncationOffset?: number | undefined) => string;
+	    truncateStartEndAtPosition: (truncationPosition: number) => string;
+	    truncateStartEndAtMiddle: () => string;
+	    truncateMiddle: () => string;
+	}
+	export {};
+
+}
+declare module '@elastic/eui/src/components/text_truncate/text_truncate.styles' {
+	export const euiTextTruncateStyles: {
+	    euiTextTruncate: import("@emotion/utils").SerializedStyles;
+	    /**
+	     * The below CSS is a hack to get double clicking and selecting the *full* text
+	     * instead of the truncated text (useful for copying/pasting, and mimics how
+	     * `text-overflow: ellipsis` works).
+	     *
+	     * Real talk: I'm lowkey amazed it works and it wouldn't surprise me if we ran into
+	     * cross-browser issues with this at some point. Hopefully CSS natively implements
+	     * custom text truncation some day (https://github.com/w3c/csswg-drafts/issues/3937)
+	     * and there'll be no need for the entire component at that point 🙏
+	     */
+	    euiTextTruncate__truncatedText: import("@emotion/utils").SerializedStyles;
+	    euiTextTruncate__fullText: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/text_truncate/text_truncate' {
+	import { HTMLAttributes, FunctionComponent, ReactNode } from 'react';
+	import type { CommonProps } from '@elastic/eui/src/components/common'; const TRUNCATION_TYPES: readonly ["end", "start", "startEnd", "middle"];
+	export type EuiTextTruncationTypes = (typeof TRUNCATION_TYPES)[number];
+	export type EuiTextTruncateProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onResize'> & CommonProps & {
+	    /**
+	     * The full text string to truncate
+	     */
+	    text: string;
+	    /**
+	     * The truncation type desired. Determines where the ellipses are placed.
+	     */
+	    truncation?: EuiTextTruncationTypes;
+	    /**
+	     * This prop **only** applies to the `start` and `end` truncation types.
+	     * It allows preserving a certain number of characters of either the
+	     * starting or ending text.
+	     *
+	     * If the passed offset is greater than the total text length,
+	     * the offset will be ignored.
+	     */
+	    truncationOffset?: number;
+	    /**
+	     * This prop **only** applies to the `startEnd` truncation type.
+	     * It allows customizing the anchor position of the displayed text,
+	     * which otherwise defaults to the middle of the text string.
+	     *
+	     * The primary use case for this prop for is search highlighting - e.g., if
+	     * a user searches for a specific word in the text, pass the index of that
+	     * found word to ensure it is always visible.
+	     *
+	     * This behavior will intelligently detect when positions are close to the start
+	     * or end of the text, and omit leading or trailing ellipses when necessary.
+	     * If the passed position is greater than the total text length,
+	     * the truncation will simply default to `start` instead.
+	     */
+	    truncationPosition?: number;
+	    /**
+	     * Defaults to the horizontal ellipsis character.
+	     * Can be optionally configured to use other punctuation,
+	     * e.g. spaces, brackets, hyphens, asterisks, etc.
+	     */
+	    ellipsis?: string;
+	    /**
+	     * By default, EuiTextTruncate will render a resize observer to detect the
+	     * available width it has. For performance reasons (e.g. multiple truncated
+	     * text items within the same container), you may opt to pass in your own
+	     * container width, which will skip initializing a resize observer.
+	     */
+	    width?: number;
+	    /**
+	     * Optional callback that fires when the default resizer observer both mounts and
+	     * registers a size change. This callback will **not** fire if `width` is passed.
+	     */
+	    onResize?: (width: number) => void;
+	    /**
+	     * By default, EuiTextTruncate will render the truncated string directly.
+	     * You can optionally pass a render prop function to the component, which
+	     * allows for more flexible text rendering, e.g. adding custom markup
+	     * or highlighting
+	     */
+	    children?: (truncatedString: string) => ReactNode;
+	};
+	export const EuiTextTruncate: FunctionComponent<EuiTextTruncateProps>;
+	export {};
+
+}
+declare module '@elastic/eui/src/components/text_truncate/text_block_truncate' {
+	import { FunctionComponent, HTMLAttributes, PropsWithChildren } from 'react';
+	import { CommonProps } from '@elastic/eui/src/components/common';
+	export type EuiTextBlockTruncateProps = PropsWithChildren & CommonProps & HTMLAttributes<HTMLDivElement> & {
+	    /**
+	     * Number of lines of text to truncate to
+	     */
+	    lines: number;
+	    /**
+	     * Applies styling to the child element instead of rendering a parent wrapper `div`.
+	     * Can only be used when wrapping a *single* child element/tag, and not raw text.
+	     */
+	    cloneElement?: boolean;
+	};
+	export const EuiTextBlockTruncate: FunctionComponent<EuiTextBlockTruncateProps>;
+
+}
+declare module '@elastic/eui/src/components/text_truncate' {
+	export type { EuiTextTruncateProps, EuiTextTruncationTypes, } from '@elastic/eui/src/components/text_truncate/text_truncate';
+	export { EuiTextTruncate } from '@elastic/eui/src/components/text_truncate/text_truncate';
+	export type { EuiTextBlockTruncateProps } from '@elastic/eui/src/components/text_truncate/text_block_truncate';
+	export { EuiTextBlockTruncate } from '@elastic/eui/src/components/text_truncate/text_block_truncate';
+	export { TruncationUtils } from '@elastic/eui/src/components/text_truncate/utils';
+
 }
 declare module '@elastic/eui/src/components/table/table_row_cell' {
 	import { CSSProperties, FunctionComponent, ReactNode, TdHTMLAttributes } from 'react';
@@ -5754,9 +5916,14 @@ declare module '@elastic/eui/src/components/table/table_row_cell' {
 	     */
 	    textOnly?: boolean;
 	    /**
-	     * Don't allow line breaks within cells
+	     * Indicates whether this column should truncate overflowing text content.
+	     * - Set to `true` to enable single-line truncation.
+	     * - To enable multi-line truncation, use a configuration object with `lines`
+	     * set to a number of lines to truncate to.
 	     */
-	    truncateText?: boolean;
+	    truncateText?: boolean | {
+	        lines: number;
+	    };
 	    width?: CSSProperties['width'];
 	}
 	export interface EuiTableRowCellMobileOptionsShape extends EuiTableRowCellSharedPropsShape {
@@ -6513,7 +6680,7 @@ declare module '@elastic/eui/src/components/popover/popover' {
 
 }
 declare module '@elastic/eui/src/components/popover/input_popover' {
-	import { FunctionComponent, HTMLAttributes } from 'react';
+	import React, { FunctionComponent, HTMLAttributes } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { EuiPopoverProps } from '@elastic/eui/src/components/popover/popover';
 	export interface _EuiInputPopoverProps extends Omit<EuiPopoverProps, 'button' | 'buttonRef' | 'anchorPosition'> {
@@ -6522,6 +6689,10 @@ declare module '@elastic/eui/src/components/popover/input_popover' {
 	     */
 	    anchorPosition?: 'downLeft' | 'downRight' | 'downCenter';
 	    disableFocusTrap?: boolean;
+	    /**
+	     * Allows automatically closing the input popover on page scroll
+	     */
+	    closeOnScroll?: boolean;
 	    fullWidth?: boolean;
 	    input: EuiPopoverProps['button'];
 	    inputRef?: EuiPopoverProps['buttonRef'];
@@ -6534,6 +6705,7 @@ declare module '@elastic/eui/src/components/popover/input_popover' {
 	    panelMinWidth?: number;
 	}
 	export type EuiInputPopoverProps = CommonProps & HTMLAttributes<HTMLDivElement> & _EuiInputPopoverProps;
+	export const EuiInputPopoverWidthContext: React.Context<number>;
 	export const EuiInputPopover: FunctionComponent<EuiInputPopoverProps>;
 
 }
@@ -8032,40 +8204,6 @@ declare module '@elastic/eui/src/services/breakpoint' {
 	export * from '@elastic/eui/src/services/breakpoint/current_breakpoint_hook';
 	export * from '@elastic/eui/src/services/breakpoint/is_within_hooks';
 
-}
-declare module '@elastic/eui/src/services/canvas/canvas_text_utils' {
-	import type { ExclusiveUnion } from '@elastic/eui/src/components/common';
-	export type CanvasTextParams = ExclusiveUnion<{
-	    container: HTMLElement;
-	}, {
-	    font: CanvasTextDrawingStyles['font'];
-	}>;
-	/**
-	 * Creates a temporary Canvas element for manipulating text & determining text width.
-	 *
-	 * To accurately measure text, canvas rendering requires either a container to
-	 * compute/derive font styles from, or a static font string (useful for usage
-	 * outside the DOM). Particular care should be applied when fallback fonts are
-	 * used, as more fallback fonts can lead to less precision.
-	 *
-	 * Please note that while canvas is more significantly more performant than DOM
-	 * measurement, there are subpixel to single digit pixel differences between
-	 * DOM and canvas measurement due to the different rendering engines used.
-	 */
-	export class CanvasTextUtils {
-	    context: CanvasRenderingContext2D;
-	    currentText: string;
-	    constructor({ font, container }: CanvasTextParams);
-	    computeFontFromElement: (element: HTMLElement) => string;
-	    get textWidth(): number;
-	    setTextToCheck: (text: string) => void;
-	}
-
-}
-declare module '@elastic/eui/src/services/canvas' {
-	export { CanvasTextUtils } from '@elastic/eui/src/services/canvas/canvas_text_utils';
-	export type { CanvasTextParams } from '@elastic/eui/src/services/canvas/canvas_text_utils';
-
 }
 declare module '@elastic/eui/src/services/color_picker/color_picker' {
 	interface colorStopsType {
@@ -8499,7 +8637,7 @@ declare module '@elastic/eui/src/services/window_event' {
 }
 declare module '@elastic/eui/src/services' {
 	import * as keys from '@elastic/eui/src/services/keys';
-	export { accessibleClickKeys, cascadingMenuKeys, comboBoxKeys, htmlIdGenerator, useGeneratedHtmlId, } from '@elastic/eui/src/services/accessibility';
+	export { htmlIdGenerator, useGeneratedHtmlId } from '@elastic/eui/src/services/accessibility';
 	export { CENTER_ALIGNMENT, LEFT_ALIGNMENT, RIGHT_ALIGNMENT } from '@elastic/eui/src/services/alignment';
 	export type { HorizontalAlignment } from '@elastic/eui/src/services/alignment';
 	export { CurrentEuiBreakpointContext, CurrentEuiBreakpointProvider, useCurrentEuiBreakpoint, useIsWithinBreakpoints, useIsWithinMaxBreakpoint, useIsWithinMinBreakpoint, } from '@elastic/eui/src/services/breakpoint';
@@ -10425,10 +10563,11 @@ declare module '@elastic/eui/src/components/flyout/flyout.styles' {
 	    right: import("@emotion/utils").SerializedStyles;
 	    left: import("@emotion/utils").SerializedStyles;
 	    overlay: import("@emotion/utils").SerializedStyles;
-	    push: import("@emotion/utils").SerializedStyles;
-	    pushSide: {
+	    push: {
+	        push: import("@emotion/utils").SerializedStyles;
 	        right: import("@emotion/utils").SerializedStyles;
 	        left: import("@emotion/utils").SerializedStyles;
+	        noAnimation: import("@emotion/utils").SerializedStyles;
 	    };
 	    paddingSizes: {
 	        none: import("@emotion/utils").SerializedStyles;
@@ -10522,6 +10661,11 @@ declare module '@elastic/eui/src/components/flyout/flyout' {
 	     * @default l
 	     */
 	    pushMinBreakpoint?: EuiBreakpointSize;
+	    /**
+	     * Enables a slide in animation on push flyouts
+	     * @default false
+	     */
+	    pushAnimation?: boolean;
 	    style?: CSSProperties;
 	    /**
 	     * Object of props passed to EuiFocusTrap.
@@ -11233,392 +11377,52 @@ declare module '@elastic/eui/src/components/color_picker/color_picker' {
 	     * Creates an input group with element(s) coming before input. It only shows when the `display` is set to `default`.
 	     * `string` | `ReactElement` or an array of these
 	     */
-	    prepend?: EuiFormControlLayoutProps['prepend'];
-	    /**
-	     * Creates an input group with element(s) coming after input. It only shows when the `display` is set to `default`.
-	     * `string` | `ReactElement` or an array of these
-	     */
-	    append?: EuiFormControlLayoutProps['append'];
-	    /**
-	     * Whether to render the alpha channel (opacity) value range slider.
-	     */
-	    showAlpha?: boolean;
-	    /**
-	     * Will format the text input in the provided format when possible (hue and saturation selection)
-	     * Exceptions: Manual text input and swatches will display as-authored
-	     * Default is to display the last format entered by the user
-	     */
-	    format?: 'hex' | 'rgba';
-	    /**
-	     * Placement option for a secondary color value input.
-	     */
-	    secondaryInputDisplay?: 'top' | 'bottom' | 'none';
-	    /**
-	     * Add a button to the primary input to clear its value.
-	     */
-	    isClearable?: boolean;
-	    /**
-	     * Text to replace the default 'Transparent' placeholder for unset color values.
-	     */
-	    placeholder?: string;
-	}
-	export const EuiColorPicker: FunctionComponent<EuiColorPickerProps>;
-	export {};
-
-}
-declare module '@elastic/eui/src/components/color_picker/color_stops/utils' {
-	import { ColorStop } from '@elastic/eui/src/components/color_picker/color_stops/color_stop_thumb';
-	export const removeStop: (colorStops: ColorStop[], index: number) => ColorStop[];
-	export const addDefinedStop: (colorStops: ColorStop[], stop: ColorStop['stop'], color?: ColorStop['color']) => ColorStop[];
-	export const addStop: (colorStops: ColorStop[], color: string | undefined, max: number) => ColorStop[];
-	export const isColorInvalid: (color: string, showAlpha?: boolean) => boolean;
-	export const isStopInvalid: (stop: ColorStop['stop']) => boolean;
-	export const isInvalid: (colorStops: ColorStop[], showAlpha?: boolean) => boolean;
-	export const calculateScale: (trackWidth: number) => number;
-	export const getStopFromMouseLocation: (location: {
-	    x: number;
-	    y: number;
-	}, ref: HTMLDivElement, min: number, max: number) => number;
-	export const getPositionFromStop: (stop: ColorStop['stop'], ref: HTMLDivElement, min: number, max: number) => number;
-
-}
-declare module '@elastic/eui/src/components/color_picker/color_picker.styles' {
-	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiColorPickerVariables: (euiThemeContext: UseEuiTheme) => {
-	    width: string;
-	};
-
-}
-declare module '@elastic/eui/src/components/color_picker/color_stops/color_stop_thumb.styles' {
-	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiColorStopThumbStyles: (euiThemeContext: UseEuiTheme) => {
-	    euiColorStopThumb: import("@emotion/utils").SerializedStyles;
-	    isPopoverOpen: import("@emotion/utils").SerializedStyles;
-	};
-	export const euiColorStopThumbPopoverStyles: (euiThemeContext: UseEuiTheme) => {
-	    euiColorStopThumbPopover: import("@emotion/utils").SerializedStyles;
-	    isLoadingPanel: import("@emotion/utils").SerializedStyles;
-	    hasFocus: import("@emotion/utils").SerializedStyles;
-	};
-	export const euiColorStopStyles: (euiThemeContext: UseEuiTheme) => {
-	    euiColorStop: import("@emotion/utils").SerializedStyles;
-	};
-
-}
-declare module '@elastic/eui/src/components/color_picker/color_stops/color_stop_thumb' {
-	import { FunctionComponent, CSSProperties } from 'react';
-	import { CommonProps } from '@elastic/eui/src/components/common';
-	import { EuiColorPickerProps } from '@elastic/eui/src/components/color_picker/color_picker';
-	import { EuiFieldNumberProps } from '@elastic/eui/src/components/form';
-	export interface ColorStop {
-	    stop: number;
-	    color: string;
-	}
-	interface EuiColorStopThumbProps extends CommonProps, ColorStop {
-	    className?: string;
-	    onChange: (colorStop: ColorStop) => void;
-	    onFocus?: () => void;
-	    onRemove?: () => void;
-	    globalMin: number;
-	    globalMax: number;
-	    localMin: number;
-	    localMax: number;
-	    min?: number;
-	    max?: number;
-	    isRangeMin?: boolean;
-	    isRangeMax?: boolean;
-	    parentRef?: HTMLDivElement | null;
-	    colorPickerMode: EuiColorPickerProps['mode'];
-	    colorPickerShowAlpha?: EuiColorPickerProps['showAlpha'];
-	    colorPickerSwatches?: EuiColorPickerProps['swatches'];
-	    disabled?: boolean;
-	    readOnly?: boolean;
-	    isPopoverOpen: boolean;
-	    openPopover: () => void;
-	    closePopover: () => void;
-	    'data-index'?: string;
-	    'aria-valuetext'?: string;
-	    style?: CSSProperties;
-	    valueInputProps?: Partial<EuiFieldNumberProps>;
-	}
-	export const EuiColorStopThumb: FunctionComponent<EuiColorStopThumbProps>;
-	export {};
-
-}
-declare module '@elastic/eui/src/components/color_picker/color_stops/color_stops.styles' {
-	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiColorStopsStyles: (euiThemeContext: UseEuiTheme) => {
-	    euiColorStops: import("@emotion/utils").SerializedStyles;
-	    isEnabled: import("@emotion/utils").SerializedStyles;
-	    isDisabled: import("@emotion/utils").SerializedStyles;
-	    isHoverDisabled: import("@emotion/utils").SerializedStyles;
-	    isReadOnly: import("@emotion/utils").SerializedStyles;
-	    isDragging: import("@emotion/utils").SerializedStyles;
-	    euiColorStops__track: import("@emotion/utils").SerializedStyles;
-	    euiColorStops__addTarget: import("@emotion/utils").SerializedStyles;
-	};
-	export const euiColorStopsAddContainerStyles: (euiThemeContext: UseEuiTheme) => {
-	    euiColorStopsAddContainer: import("@emotion/utils").SerializedStyles;
-	    isEnabled: import("@emotion/utils").SerializedStyles;
-	    isDisabled: import("@emotion/utils").SerializedStyles;
-	};
-
-}
-declare module '@elastic/eui/src/components/color_picker/color_stops/color_stops' {
-	import { FunctionComponent } from 'react';
-	import { CommonProps } from '@elastic/eui/src/components/common';
-	import { ColorStop } from '@elastic/eui/src/components/color_picker/color_stops/color_stop_thumb';
-	import { EuiColorPickerProps } from '@elastic/eui/src/components/color_picker/color_picker';
-	import { EuiFieldNumberProps } from '@elastic/eui/src/components/form/field_number';
-	/**
-	 * @deprecated
-	 */
-	export interface EuiColorStopsProps extends CommonProps {
-	    addColor?: ColorStop['color'];
-	    /**
-	     * An array of #ColorStop. The stops must be numbers in an ordered range.
-	     */
-	    colorStops: ColorStop[];
-	    onChange: (stops?: ColorStop[], isInvalid?: boolean) => void;
-	    fullWidth?: boolean;
-	    disabled?: boolean;
-	    readOnly?: boolean;
-	    invalid?: boolean;
-	    compressed?: boolean;
-	    className?: string;
-	    max?: number;
-	    min?: number;
-	    label: string;
-	    /**
-	     *  Specify the type of stops:
-	     *  `fixed`: individual color blocks.
-	     *  `gradient`: each color fades into the next.
-	     *  `stepped`: interpolation between colors with a fixed number of steps.
-	     */
-	    stopType?: 'fixed' | 'gradient' | 'stepped';
-	    /**
-	     * Only works when `stopType="stepped"`
-	     */
-	    stepNumber?: number;
-	    mode?: EuiColorPickerProps['mode'];
-	    swatches?: EuiColorPickerProps['swatches'];
-	    showAlpha?: EuiColorPickerProps['showAlpha'];
-	    /**
-	     * Props passed to the value input field in the color stop popover.
-	     * Can be used to configure functionality like append or prepend.
-	     */
-	    valueInputProps?: Partial<Omit<EuiFieldNumberProps, 'inputRef' | 'compressed' | 'readOnly' | 'min' | 'max' | 'value' | 'isInvalid' | 'onChange'>>;
-	}
-	/**
-	 * @deprecated - EuiColorStops is scheduled for deprecation due to low internal usage and high
-	 * maintenance requirements. If necessary, we recommend copying this component into your own application.
-	 *
-	 * The component will be permanently removed in October 2023.
-	 */
-	export const EuiColorStops: FunctionComponent<EuiColorStopsProps>;
-
-}
-declare module '@elastic/eui/src/components/color_picker/color_stops' {
-	export { EuiColorStops } from '@elastic/eui/src/components/color_picker/color_stops/color_stops';
-
-}
-declare module '@elastic/eui/src/components/color_picker' {
-	export type { EuiColorPickerProps } from '@elastic/eui/src/components/color_picker/color_picker';
-	export { EuiColorPicker } from '@elastic/eui/src/components/color_picker/color_picker';
-	export type { EuiColorPickerSwatchProps } from '@elastic/eui/src/components/color_picker/color_picker_swatch';
-	export { EuiColorPickerSwatch } from '@elastic/eui/src/components/color_picker/color_picker_swatch';
-	export type { EuiHueProps } from '@elastic/eui/src/components/color_picker/hue';
-	export { EuiHue } from '@elastic/eui/src/components/color_picker/hue';
-	export type { EuiSaturationProps } from '@elastic/eui/src/components/color_picker/saturation';
-	export { EuiSaturation } from '@elastic/eui/src/components/color_picker/saturation';
-	export { EuiColorStops } from '@elastic/eui/src/components/color_picker/color_stops';
-	export type { EuiColorStopsProps } from '@elastic/eui/src/components/color_picker/color_stops/color_stops';
-	export type { EuiColorPalettePickerProps, EuiColorPalettePickerPaletteProps, } from '@elastic/eui/src/components/color_picker/color_palette_picker';
-	export { EuiColorPalettePicker } from '@elastic/eui/src/components/color_picker/color_palette_picker';
-	export type { EuiColorPaletteDisplayProps } from '@elastic/eui/src/components/color_picker/color_palette_display';
-	export { EuiColorPaletteDisplay } from '@elastic/eui/src/components/color_picker/color_palette_display';
-
-}
-declare module '@elastic/eui/src/components/filter_group/filter_select_item.styles' {
-	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiFilterSelectItemStyles: (euiThemeContext: UseEuiTheme) => {
-	    euiFilterSelectItem: import("@emotion/utils").SerializedStyles;
-	    isFocused: import("@emotion/utils").SerializedStyles;
-	};
-
-}
-declare module '@elastic/eui/src/components/filter_group/filter_select_item' {
-	import React, { ButtonHTMLAttributes, Component } from 'react';
-	import { WithEuiThemeProps } from '@elastic/eui/src/services';
-	import { CommonProps } from '@elastic/eui/src/components/common';
-	export type FilterChecked = 'on' | 'off';
-	export interface EuiFilterSelectItemProps extends CommonProps, ButtonHTMLAttributes<HTMLButtonElement> {
-	    checked?: FilterChecked;
-	    showIcons?: boolean;
-	    isFocused?: boolean;
-	}
-	/**
-	 * TODO: This component should removed in favor of EuiSelectable usage
-	 * once EuiComboBox has been converted to dogfood EuiSelectable.
-	 *
-	 * @deprecated - Use EuiSelectable instead
-	 */
-	export class EuiFilterSelectItemClass extends Component<WithEuiThemeProps & EuiFilterSelectItemProps> {
-	    static defaultProps: {
-	        showIcons: boolean;
-	    };
-	    buttonRef: HTMLButtonElement | null;
-	    state: {
-	        hasFocus: boolean;
-	    };
-	    focus: () => void;
-	    hasFocus: () => boolean;
-	    render(): React.JSX.Element;
-	}
-	/**
-	 * @deprecated - Use EuiSelectable instead
-	 */
-	export const EuiFilterSelectItem: React.ForwardRefExoticComponent<Omit<EuiFilterSelectItemProps, "theme"> & React.RefAttributes<Omit<EuiFilterSelectItemProps, "theme">>>;
-
-}
-declare module '@elastic/eui/src/components/text_truncate/utils' {
-	import { CanvasTextParams, CanvasTextUtils } from '@elastic/eui/src/services/canvas'; type TruncationParams = CanvasTextParams & {
-	    fullText: string;
-	    ellipsis: string;
-	    availableWidth: number;
-	};
-	/**
-	 * Utilities for truncating types at various positions, as well as
-	 * determining whether truncation is possible or even necessary.
-	 */
-	export class TruncationUtils extends CanvasTextUtils {
-	    protected fullText: TruncationParams['fullText'];
-	    protected ellipsis: TruncationParams['ellipsis'];
-	    protected availableWidth: TruncationParams['availableWidth'];
-	    constructor({ fullText, ellipsis, availableWidth, ...rest }: TruncationParams);
-	    /**
-	     * Performance utilities
-	     */
-	    debugPerformance: boolean;
-	    debugCounter: number;
-	    get textWidth(): number;
-	    /**
-	     * Internal utils for calculating a ratio based on the passed available width
-	     * vs the full text width.
-	     * This ratio is used to get an initial _approximate_ text string that should
-	     * be slightly over the available width, which we can then remove from
-	     * character-by-character until the text just fits within the available width.
-	     */
-	    widthRatio: number;
-	    setTextWidthRatio: (text?: string, textToOffset?: string) => void;
-	    getTextFromRatio: (text: string, type: 'start' | 'end') => string;
-	    /**
-	     * Early return checks
-	     */
-	    checkIfTruncationIsNeeded: () => false | undefined;
-	    checkSufficientEllipsisWidth: (truncation: string) => false | undefined;
-	    checkTruncationOffsetWidth: (text: string) => false | undefined;
-	    /**
-	     * Truncation types logic. This is where the magic happens
-	     */
-	    truncateStart: (truncationOffset?: number | undefined) => string;
-	    truncateEnd: (truncationOffset?: number | undefined) => string;
-	    truncateStartEndAtPosition: (truncationPosition: number) => string;
-	    truncateStartEndAtMiddle: () => string;
-	    truncateMiddle: () => string;
-	}
-	export {};
-
-}
-declare module '@elastic/eui/src/components/text_truncate/text_truncate.styles' {
-	export const euiTextTruncateStyles: {
-	    euiTextTruncate: import("@emotion/utils").SerializedStyles;
-	    /**
-	     * The below CSS is a hack to get double clicking and selecting the *full* text
-	     * instead of the truncated text (useful for copying/pasting, and mimics how
-	     * `text-overflow: ellipsis` works).
-	     *
-	     * Real talk: I'm lowkey amazed it works and it wouldn't surprise me if we ran into
-	     * cross-browser issues with this at some point. Hopefully CSS natively implements
-	     * custom text truncation some day (https://github.com/w3c/csswg-drafts/issues/3937)
-	     * and there'll be no need for the entire component at that point 🙏
-	     */
-	    euiTextTruncate__truncatedText: import("@emotion/utils").SerializedStyles;
-	    euiTextTruncate__fullText: import("@emotion/utils").SerializedStyles;
-	};
-
-}
-declare module '@elastic/eui/src/components/text_truncate/text_truncate' {
-	import { HTMLAttributes, FunctionComponent, ReactNode } from 'react';
-	import type { CommonProps } from '@elastic/eui/src/components/common'; const TRUNCATION_TYPES: readonly ["end", "start", "startEnd", "middle"];
-	export type EuiTextTruncationTypes = (typeof TRUNCATION_TYPES)[number];
-	export type EuiTextTruncateProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onResize'> & CommonProps & {
-	    /**
-	     * The full text string to truncate
-	     */
-	    text: string;
-	    /**
-	     * The truncation type desired. Determines where the ellipses are placed.
-	     */
-	    truncation?: EuiTextTruncationTypes;
+	    prepend?: EuiFormControlLayoutProps['prepend'];
 	    /**
-	     * This prop **only** applies to the `start` and `end` truncation types.
-	     * It allows preserving a certain number of characters of either the
-	     * starting or ending text.
-	     *
-	     * If the passed offset is greater than the total text length,
-	     * the offset will be ignored.
+	     * Creates an input group with element(s) coming after input. It only shows when the `display` is set to `default`.
+	     * `string` | `ReactElement` or an array of these
 	     */
-	    truncationOffset?: number;
+	    append?: EuiFormControlLayoutProps['append'];
 	    /**
-	     * This prop **only** applies to the `startEnd` truncation type.
-	     * It allows customizing the anchor position of the displayed text,
-	     * which otherwise defaults to the middle of the text string.
-	     *
-	     * The primary use case for this prop for is search highlighting - e.g., if
-	     * a user searches for a specific word in the text, pass the index of that
-	     * found word to ensure it is always visible.
-	     *
-	     * This behavior will intelligently detect when positions are close to the start
-	     * or end of the text, and omit leading or trailing ellipses when necessary.
-	     * If the passed position is greater than the total text length,
-	     * the truncation will simply default to `start` instead.
+	     * Whether to render the alpha channel (opacity) value range slider.
 	     */
-	    truncationPosition?: number;
+	    showAlpha?: boolean;
 	    /**
-	     * Defaults to the horizontal ellipsis character.
-	     * Can be optionally configured to use other punctuation,
-	     * e.g. spaces, brackets, hyphens, asterisks, etc.
+	     * Will format the text input in the provided format when possible (hue and saturation selection)
+	     * Exceptions: Manual text input and swatches will display as-authored
+	     * Default is to display the last format entered by the user
 	     */
-	    ellipsis?: string;
+	    format?: 'hex' | 'rgba';
 	    /**
-	     * By default, EuiTextTruncate will render a resize observer to detect the
-	     * available width it has. For performance reasons (e.g. multiple truncated
-	     * text items within the same container), you may opt to pass in your own
-	     * container width, which will skip initializing a resize observer.
+	     * Placement option for a secondary color value input.
 	     */
-	    width?: number;
+	    secondaryInputDisplay?: 'top' | 'bottom' | 'none';
 	    /**
-	     * Optional callback that fires when the default resizer observer both mounts and
-	     * registers a size change. This callback will **not** fire if `width` is passed.
+	     * Add a button to the primary input to clear its value.
 	     */
-	    onResize?: (width: number) => void;
+	    isClearable?: boolean;
 	    /**
-	     * By default, EuiTextTruncate will render the truncated string directly.
-	     * You can optionally pass a render prop function to the component, which
-	     * allows for more flexible text rendering, e.g. adding custom markup
-	     * or highlighting
+	     * Text to replace the default 'Transparent' placeholder for unset color values.
 	     */
-	    children?: (truncatedString: string) => ReactNode;
-	};
-	export const EuiTextTruncate: FunctionComponent<EuiTextTruncateProps>;
+	    placeholder?: string;
+	}
+	export const EuiColorPicker: FunctionComponent<EuiColorPickerProps>;
 	export {};
 
 }
-declare module '@elastic/eui/src/components/text_truncate' {
-	export type { EuiTextTruncateProps, EuiTextTruncationTypes, } from '@elastic/eui/src/components/text_truncate/text_truncate';
-	export { EuiTextTruncate } from '@elastic/eui/src/components/text_truncate/text_truncate';
-	export { TruncationUtils } from '@elastic/eui/src/components/text_truncate/utils';
+declare module '@elastic/eui/src/components/color_picker' {
+	export type { EuiColorPickerProps } from '@elastic/eui/src/components/color_picker/color_picker';
+	export { EuiColorPicker } from '@elastic/eui/src/components/color_picker/color_picker';
+	export type { EuiColorPickerSwatchProps } from '@elastic/eui/src/components/color_picker/color_picker_swatch';
+	export { EuiColorPickerSwatch } from '@elastic/eui/src/components/color_picker/color_picker_swatch';
+	export type { EuiHueProps } from '@elastic/eui/src/components/color_picker/hue';
+	export { EuiHue } from '@elastic/eui/src/components/color_picker/hue';
+	export type { EuiSaturationProps } from '@elastic/eui/src/components/color_picker/saturation';
+	export { EuiSaturation } from '@elastic/eui/src/components/color_picker/saturation';
+	export type { EuiColorPalettePickerProps, EuiColorPalettePickerPaletteProps, } from '@elastic/eui/src/components/color_picker/color_palette_picker';
+	export { EuiColorPalettePicker } from '@elastic/eui/src/components/color_picker/color_palette_picker';
+	export type { EuiColorPaletteDisplayProps } from '@elastic/eui/src/components/color_picker/color_palette_display';
+	export { EuiColorPaletteDisplay } from '@elastic/eui/src/components/color_picker/color_palette_display';
 
 }
 declare module '@elastic/eui/src/components/combo_box/types' {
@@ -11635,10 +11439,8 @@ declare module '@elastic/eui/src/components/combo_box/types' {
 	    append?: ReactNode;
 	    truncationProps?: _EuiComboBoxProps<T>['truncationProps'];
 	}
-	export type UpdatePositionHandler = (listElement?: RefInstance<HTMLDivElement>) => void;
 	export type OptionHandler<T> = (option: EuiComboBoxOptionOption<T>) => void;
 	export type RefInstance<T> = T | null;
-	export type EuiComboBoxOptionsListPosition = 'top' | 'bottom';
 	export interface EuiComboBoxSingleSelectionShape {
 	    asPlainText?: boolean;
 	}
@@ -11694,7 +11496,7 @@ declare module '@elastic/eui/src/components/combo_box/combo_box_input/combo_box_
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { htmlIdGenerator } from '@elastic/eui/src/services';
 	import { EuiFormControlLayoutProps } from '@elastic/eui/src/components/form/form_control_layout';
-	import { EuiComboBoxOptionOption, EuiComboBoxSingleSelectionShape, OptionHandler, UpdatePositionHandler } from '@elastic/eui/src/components/combo_box/types';
+	import { EuiComboBoxOptionOption, EuiComboBoxSingleSelectionShape, OptionHandler } from '@elastic/eui/src/components/combo_box/types';
 	export interface EuiComboBoxInputProps<T> extends CommonProps {
 	    compressed: boolean;
 	    focusedOptionId?: string;
@@ -11719,7 +11521,6 @@ declare module '@elastic/eui/src/components/combo_box/combo_box_input/combo_box_
 	    selectedOptions: Array<EuiComboBoxOptionOption<T>>;
 	    singleSelection?: boolean | EuiComboBoxSingleSelectionShape;
 	    toggleButtonRef?: RefCallback<HTMLButtonElement | HTMLSpanElement>;
-	    updatePosition: UpdatePositionHandler;
 	    value?: string;
 	    prepend?: EuiFormControlLayoutProps['prepend'];
 	    append?: EuiFormControlLayoutProps['append'];
@@ -11738,11 +11539,10 @@ declare module '@elastic/eui/src/components/combo_box/combo_box_input/combo_box_
 	    private widthUtils?;
 	    inputRefCallback: (el: HTMLInputElement) => void;
 	    updateInputSize: (inputValue: string) => void;
-	    updatePosition: () => void;
+	    componentDidUpdate(prevProps: EuiComboBoxInputProps<T>): void;
 	    onFocus: FocusEventHandler<HTMLInputElement>;
 	    onBlur: FocusEventHandler<HTMLInputElement>;
 	    onKeyDown: KeyboardEventHandler<HTMLInputElement>;
-	    componentDidUpdate(prevProps: EuiComboBoxInputProps<T>): void;
 	    render(): React.JSX.Element;
 	}
 	export {};
@@ -11815,17 +11615,58 @@ declare module '@elastic/eui/src/components/combo_box/combo_box_options_list/com
 	import { FunctionComponent, PropsWithChildren } from 'react';
 	export const EuiComboBoxTitle: FunctionComponent<PropsWithChildren>;
 
+}
+declare module '@elastic/eui/src/components/filter_group/filter_select_item.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiFilterSelectItemStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiFilterSelectItem: import("@emotion/utils").SerializedStyles;
+	    isFocused: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/filter_group/filter_select_item' {
+	import React, { ButtonHTMLAttributes, Component } from 'react';
+	import { WithEuiThemeProps } from '@elastic/eui/src/services';
+	import { CommonProps } from '@elastic/eui/src/components/common';
+	export type FilterChecked = 'on' | 'off';
+	export interface EuiFilterSelectItemProps extends CommonProps, ButtonHTMLAttributes<HTMLButtonElement> {
+	    checked?: FilterChecked;
+	    showIcons?: boolean;
+	    isFocused?: boolean;
+	}
+	/**
+	 * TODO: This component should removed in favor of EuiSelectable usage
+	 * once EuiComboBox has been converted to dogfood EuiSelectable.
+	 *
+	 * @deprecated - Use EuiSelectable instead
+	 */
+	export class EuiFilterSelectItemClass extends Component<WithEuiThemeProps & EuiFilterSelectItemProps> {
+	    static defaultProps: {
+	        showIcons: boolean;
+	    };
+	    buttonRef: HTMLButtonElement | null;
+	    state: {
+	        hasFocus: boolean;
+	    };
+	    focus: () => void;
+	    hasFocus: () => boolean;
+	    render(): React.JSX.Element;
+	}
+	/**
+	 * @deprecated - Use EuiSelectable instead
+	 */
+	export const EuiFilterSelectItem: React.ForwardRefExoticComponent<Omit<EuiFilterSelectItemProps, "theme"> & React.RefAttributes<Omit<EuiFilterSelectItemProps, "theme">>>;
+
 }
 declare module '@elastic/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list' {
-	import React, { Component, ComponentProps, ReactNode, RefCallback } from 'react';
-	import { FixedSizeList, ListProps, ListChildComponentProps } from 'react-window';
-	import { EuiFilterSelectItemClass } from '@elastic/eui/src/components/filter_group/filter_select_item';
+	import React, { Component, ContextType, ReactNode, RefCallback } from 'react';
+	import { FixedSizeList, FixedSizeListProps, ListProps, ListChildComponentProps } from 'react-window';
 	import { htmlIdGenerator } from '@elastic/eui/src/services';
 	import { CommonProps } from '@elastic/eui/src/components/common';
-	import { EuiPopoverPanel } from '@elastic/eui/src/components/popover/popover_panel';
+	import { EuiInputPopoverWidthContext } from '@elastic/eui/src/components/popover/input_popover';
 	import type { _EuiComboBoxProps } from '@elastic/eui/src/components/combo_box/combo_box';
-	import { EuiComboBoxOptionOption, EuiComboBoxOptionsListPosition, EuiComboBoxSingleSelectionShape, OptionHandler, RefInstance, UpdatePositionHandler } from '@elastic/eui/src/components/combo_box/types';
-	export type EuiComboBoxOptionsListProps<T> = CommonProps & ComponentProps<typeof EuiPopoverPanel> & {
+	import { EuiComboBoxOptionOption, EuiComboBoxSingleSelectionShape, OptionHandler } from '@elastic/eui/src/components/combo_box/types';
+	export type EuiComboBoxOptionsListProps<T> = CommonProps & {
 	    activeOptionIndex?: number;
 	    areAllOptionsSelected?: boolean;
 	    listboxAriaLabel: string;
@@ -11849,42 +11690,32 @@ declare module '@elastic/eui/src/components/combo_box/combo_box_options_list/com
 	    onOptionClick?: OptionHandler<T>;
 	    onOptionEnterKey?: OptionHandler<T>;
 	    onScroll?: ListProps['onScroll'];
-	    optionRef: (index: number, node: RefInstance<EuiFilterSelectItemClass>) => void;
 	    /**
 	     * Array of EuiComboBoxOptionOption objects. See #EuiComboBoxOptionOption
 	     */
 	    options: Array<EuiComboBoxOptionOption<T>>;
-	    position?: EuiComboBoxOptionsListPosition;
 	    renderOption?: (option: EuiComboBoxOptionOption<T>, searchValue: string, OPTION_CONTENT_CLASSNAME: string) => ReactNode;
 	    rootId: ReturnType<typeof htmlIdGenerator>;
 	    rowHeight: number;
 	    scrollToIndex?: number;
 	    searchValue: string;
 	    selectedOptions: Array<EuiComboBoxOptionOption<T>>;
-	    updatePosition: UpdatePositionHandler;
-	    width: number;
 	    singleSelection?: boolean | EuiComboBoxSingleSelectionShape;
 	    delimiter?: string;
-	    zIndex?: number;
 	    truncationProps?: _EuiComboBoxProps<T>['truncationProps'];
 	};
 	export class EuiComboBoxOptionsList<T> extends Component<EuiComboBoxOptionsListProps<T>> {
-	    listRefInstance: RefInstance<HTMLDivElement>;
 	    listRef: FixedSizeList | null;
-	    listBoxRef: HTMLUListElement | null;
+	    static contextType: React.Context<number>;
+	    context: ContextType<typeof EuiInputPopoverWidthContext>;
 	    static defaultProps: {
 	        'data-test-subj': string;
 	        rowHeight: number;
 	        isCaseSensitive: boolean;
 	    };
-	    updatePosition: () => void;
-	    componentDidMount(): void;
 	    componentDidUpdate(prevProps: EuiComboBoxOptionsListProps<T>): void;
-	    componentWillUnmount(): void;
-	    closeListOnScroll: (event: Event) => void;
-	    listRefCallback: RefCallback<HTMLDivElement>;
 	    setListRef: (ref: FixedSizeList | null) => void;
-	    setListBoxRef: (ref: HTMLUListElement | null) => void;
+	    ListInnerElement: FixedSizeListProps['innerElementType'];
 	    ListRow: ({ data, index, style }: ListChildComponentProps) => React.JSX.Element;
 	    optionWidth: number | undefined;
 	    setOptionWidth: (width: number) => void;
@@ -11929,13 +11760,13 @@ declare module '@elastic/eui/src/components/combo_box/combo_box' {
 	 */
 	import React, { Component, FocusEventHandler, HTMLAttributes, KeyboardEventHandler, RefCallback } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
+	import { EuiInputPopoverProps } from '@elastic/eui/src/components/popover';
 	import { EuiFormControlLayoutProps } from '@elastic/eui/src/components/form';
-	import { EuiFilterSelectItemClass } from '@elastic/eui/src/components/filter_group/filter_select_item';
 	import type { EuiTextTruncateProps } from '@elastic/eui/src/components/text_truncate';
 	import { SortMatchesBy } from '@elastic/eui/src/components/combo_box/matching_options';
 	import { EuiComboBoxInputProps } from '@elastic/eui/src/components/combo_box/combo_box_input/combo_box_input';
 	import { EuiComboBoxOptionsListProps } from '@elastic/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list';
-	import { UpdatePositionHandler, OptionHandler, RefInstance, EuiComboBoxOptionOption, EuiComboBoxOptionsListPosition, EuiComboBoxSingleSelectionShape } from '@elastic/eui/src/components/combo_box/types'; type DrillProps<T> = Pick<EuiComboBoxOptionsListProps<T>, 'customOptionText' | 'onCreateOption' | 'options' | 'renderOption' | 'selectedOptions'>;
+	import { OptionHandler, RefInstance, EuiComboBoxOptionOption, EuiComboBoxSingleSelectionShape } from '@elastic/eui/src/components/combo_box/types'; type DrillProps<T> = Pick<EuiComboBoxOptionsListProps<T>, 'customOptionText' | 'onCreateOption' | 'options' | 'renderOption' | 'selectedOptions'>;
 	export interface _EuiComboBoxProps<T> extends CommonProps, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>, DrillProps<T> {
 	    'data-test-subj'?: string;
 	    /**
@@ -12040,6 +11871,11 @@ declare module '@elastic/eui/src/components/combo_box/combo_box' {
 	     * text will always take precedence.
 	     */
 	    truncationProps?: Partial<Omit<EuiTextTruncateProps, 'text' | 'children'>>;
+	    /**
+	     * Allows customizing the underlying EuiInputPopover component
+	     * (except for props that control state).
+	     */
+	    inputPopoverProps?: Partial<Omit<EuiInputPopoverProps, 'input' | 'isOpen' | 'closePopover'>>;
 	} type DefaultProps<T> = Omit<(typeof EuiComboBox)['defaultProps'], 'options' | 'selectedOptions'> & {
 	    options: Array<EuiComboBoxOptionOption<T>>;
 	    selectedOptions: Array<EuiComboBoxOptionOption<T>>;
@@ -12049,12 +11885,8 @@ declare module '@elastic/eui/src/components/combo_box/combo_box' {
 	    activeOptionIndex: number;
 	    hasFocus: boolean;
 	    isListOpen: boolean;
-	    listElement?: RefInstance<HTMLDivElement>;
-	    listPosition: EuiComboBoxOptionsListPosition;
-	    listZIndex: number | undefined;
 	    matchingOptions: Array<EuiComboBoxOptionOption<T>>;
 	    searchValue: string;
-	    width: number;
 	}
 	export class EuiComboBox<T> extends Component<_EuiComboBoxProps<T>, EuiComboBoxState<T>> {
 	    static defaultProps: {
@@ -12070,7 +11902,6 @@ declare module '@elastic/eui/src/components/combo_box/combo_box' {
 	        sortMatchesBy: "none";
 	    };
 	    state: EuiComboBoxState<T>;
-	    _isMounted: boolean;
 	    rootId: (idSuffix?: string) => string;
 	    comboBoxRefInstance: RefInstance<HTMLDivElement>;
 	    comboBoxRefCallback: RefCallback<HTMLDivElement>;
@@ -12078,13 +11909,8 @@ declare module '@elastic/eui/src/components/combo_box/combo_box' {
 	    searchInputRefCallback: RefCallback<HTMLInputElement>;
 	    listRefInstance: RefInstance<HTMLDivElement>;
 	    listRefCallback: RefCallback<HTMLDivElement>;
-	    toggleButtonRefInstance: RefInstance<HTMLButtonElement | HTMLSpanElement>;
-	    toggleButtonRefCallback: RefCallback<HTMLButtonElement | HTMLSpanElement>;
-	    optionsRefInstances: Array<RefInstance<EuiFilterSelectItemClass>>;
-	    optionRefCallback: EuiComboBoxOptionsListProps<T>['optionRef'];
 	    openList: () => void;
-	    closeList: (event?: Event | undefined) => void;
-	    updatePosition: UpdatePositionHandler;
+	    closeList: () => void;
 	    incrementActiveOptionIndex: (amount: number) => void;
 	    hasActiveOption: () => boolean;
 	    clearActiveOption: () => void;
@@ -12104,13 +11930,8 @@ declare module '@elastic/eui/src/components/combo_box/combo_box' {
 	    onComboBoxClick: () => void;
 	    onOpenListClick: () => void;
 	    onOptionListScroll: () => void;
-	    onCloseListClick: () => void;
 	    onSearchChange: NonNullable<EuiComboBoxInputProps<T>['onChange']>;
-	    componentDidMount(): void;
 	    static getDerivedStateFromProps<T>(nextProps: _EuiComboBoxProps<T>, prevState: EuiComboBoxState<T>): Partial<EuiComboBoxState<T>>;
-	    updateMatchingOptionsIfDifferent: (newMatchingOptions: Array<EuiComboBoxOptionOption<T>>) => void;
-	    componentDidUpdate(): void;
-	    componentWillUnmount(): void;
 	    render(): React.JSX.Element;
 	}
 	export {};
@@ -12128,7 +11949,7 @@ declare module '@elastic/eui/src/components/combo_box' {
 	export { EuiComboBox } from '@elastic/eui/src/components/combo_box/combo_box';
 	export * from '@elastic/eui/src/components/combo_box/combo_box_input';
 	export * from '@elastic/eui/src/components/combo_box/combo_box_options_list';
-	export type { EuiComboBoxOptionOption, EuiComboBoxOptionsListPosition, EuiComboBoxSingleSelectionShape, } from '@elastic/eui/src/components/combo_box/types';
+	export type { EuiComboBoxOptionOption, EuiComboBoxSingleSelectionShape, } from '@elastic/eui/src/components/combo_box/types';
 
 }
 declare module '@elastic/eui/src/components/timeline/timeline_item_event.styles' {
@@ -21489,170 +21310,6 @@ declare module '@elastic/eui/src/components/steps' {
 	export type { EuiStepStatus, EuiStepNumberProps } from '@elastic/eui/src/components/steps/step_number';
 	export { EuiStepNumber } from '@elastic/eui/src/components/steps/step_number';
 
-}
-declare module '@elastic/eui/src/components/suggest/suggest_item' {
-	import { FunctionComponent, HTMLAttributes, ButtonHTMLAttributes, MouseEventHandler } from 'react';
-	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
-	import { IconType } from '@elastic/eui/src/components/icon';
-	interface Type {
-	    iconType: IconType;
-	    color: string | keyof typeof colorToClassNameMap;
-	}
-	export interface _EuiSuggestItemPropsBase {
-	    /**
-	     * Takes `iconType` for EuiIcon and 'color'. 'color' can be tint1 through tint9.
-	     */
-	    type: Type;
-	    /**
-	     * Label or primary text.
-	     */
-	    label: string;
-	    /**
-	     * Description or secondary text (optional).
-	     */
-	    description?: string;
-	    /**
-	     * Percentage width of `label`.
-	     * Accepts multiples of `10`, from `20` to `90`.
-	     * Label will expand to 100% if `description` is not provided.
-	     */
-	    labelWidth?: LabelWidthSize;
-	    /**
-	     * Truncates both label and description.
-	     */
-	    truncate?: boolean;
-	} type PropsForSpan = Omit<HTMLAttributes<HTMLSpanElement>, 'onClick'>; type PropsForButton = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'type'> & {
-	    onClick?: MouseEventHandler<HTMLButtonElement>;
-	};
-	/**
-	 * @deprecated
-	 */
-	export type EuiSuggestItemProps = CommonProps & _EuiSuggestItemPropsBase & ExclusiveUnion<PropsForSpan, PropsForButton>;
-	interface ColorToClassMap {
-	    tint0: string;
-	    tint1: string;
-	    tint2: string;
-	    tint3: string;
-	    tint4: string;
-	    tint5: string;
-	    tint6: string;
-	    tint7: string;
-	    tint8: string;
-	    tint9: string;
-	    tint10: string;
-	    [key: string]: string;
-	} type LabelWidthSize = '20' | '30' | '40' | '50' | '60' | '70' | '80' | '90' | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90; const colorToClassNameMap: ColorToClassMap;
-	export const COLORS: (keyof ColorToClassMap)[];
-	/**
-	 * @deprecated - EuiSuggest is scheduled for deprecation due to low internal usage and high
-	 * overlap with other existing EUI components. We recommend using EuiSelectable instead,
-	 * or copying this component into your own application for usage if necessary.
-	 *
-	 * The component will be permanently removed in October 2023.
-	 */
-	export const EuiSuggestItem: FunctionComponent<EuiSuggestItemProps>;
-	export {};
-
-}
-declare module '@elastic/eui/src/components/suggest/types' {
-	export const ALL_STATUSES: readonly ["unsaved", "saved", "unchanged", "loading"]; type StatusTuple = typeof ALL_STATUSES;
-	export type EuiSuggestStatus = StatusTuple[number];
-	export interface _Status {
-	    icon?: string;
-	    color?: string;
-	    tooltip?: string;
-	}
-	export interface _EuiSuggestStatusMap {
-	    unsaved: _Status;
-	    saved: _Status;
-	    unchanged: _Status;
-	    loading: _Status;
-	}
-	export {};
-
-}
-declare module '@elastic/eui/src/components/suggest/suggest' {
-	import { CSSProperties, FunctionComponent } from 'react';
-	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
-	import { EuiSelectableSearchableSearchProps } from '@elastic/eui/src/components/selectable';
-	import { _EuiSuggestItemPropsBase } from '@elastic/eui/src/components/suggest/suggest_item';
-	import { EuiSuggestStatus } from '@elastic/eui/src/components/suggest/types';
-	/**
-	 * @deprecated
-	 */
-	export type EuiSuggestionProps = CommonProps & _EuiSuggestItemPropsBase; type _EuiSuggestProps = CommonProps & Omit<EuiSelectableSearchableSearchProps<{}>, 'isLoading'> & {
-	    /**
-	     * List of suggestions to display using EuiSuggestItem.
-	     * Accepts props from #EuiSuggestItemProps
-	     */
-	    suggestions: EuiSuggestionProps[];
-	    /**
-	     * Changes the content of the tooltip that wraps the status icon
-	     */
-	    tooltipContent?: string;
-	    /**
-	     * Status of the current query 'unsaved', 'saved', 'unchanged' or 'loading'.
-	     */
-	    status?: EuiSuggestStatus;
-	    /**
-	     * Element to be appended to the input bar.
-	     */
-	    append?: JSX.Element;
-	    /**
-	     * Handler for click on an EuiSuggestItem.
-	     */
-	    onItemClick?: (item: EuiSuggestionProps) => void;
-	    /**
-	     * Callback function called when the input changes.
-	     */
-	    onInput?: (target: EventTarget) => void;
-	    /**
-	     * Callback function called when the search changes.
-	     */
-	    onSearch?: (value: string) => void;
-	    /**
-	     * Use virtualized rendering for list items with `react-window`.
-	     * Best used when there are a lot of items.
-	     */
-	    isVirtualized?: boolean;
-	    /**
-	     * Maximum height to set for the list.
-	     * Default is `60vh`
-	     */
-	    maxHeight?: CSSProperties['maxHeight'];
-	    /**
-	     * Control whether or not options get filtered internally or if consumer will filter.
-	     * Default `false`
-	     */
-	    isPreFiltered?: boolean;
-	};
-	/**
-	 * @deprecated
-	 */
-	export type EuiSuggestProps = _EuiSuggestProps & ExclusiveUnion<{
-	    'aria-label': string;
-	    'aria-labelledby'?: string;
-	}, {
-	    'aria-label'?: string;
-	    'aria-labelledby': string;
-	}>;
-	/**
-	 * @deprecated - EuiSuggest is scheduled for deprecation due to low internal usage and high
-	 * overlap with other existing EUI components. We recommend using EuiSelectable instead,
-	 * or copying this component into your own application for usage if necessary.
-	 *
-	 * The component will be permanently removed in October 2023.
-	 */
-	export const EuiSuggest: FunctionComponent<EuiSuggestProps>;
-	export {};
-
-}
-declare module '@elastic/eui/src/components/suggest' {
-	export type { EuiSuggestItemProps } from '@elastic/eui/src/components/suggest/suggest_item';
-	export { EuiSuggestItem } from '@elastic/eui/src/components/suggest/suggest_item';
-	export type { EuiSuggestProps, EuiSuggestionProps } from '@elastic/eui/src/components/suggest/suggest';
-	export { EuiSuggest } from '@elastic/eui/src/components/suggest/suggest';
-
 }
 declare module '@elastic/eui/src/components/tour/tour_step_indicator' {
 	import { FunctionComponent, HTMLAttributes } from 'react';
@@ -21958,7 +21615,7 @@ declare module '@elastic/eui/src/components/basic_table/table_types' {
 	import { Action } from '@elastic/eui/src/components/basic_table/action_types';
 	import { Primitive } from '@elastic/eui/src/services/sort/comparators';
 	import { CommonProps } from '@elastic/eui/src/components/common';
-	import { EuiTableRowCellMobileOptionsShape } from '@elastic/eui/src/components/table/table_row_cell';
+	import { EuiTableRowCellProps, EuiTableRowCellMobileOptionsShape } from '@elastic/eui/src/components/table/table_row_cell';
 	export type ItemId<T> = string | number | ((item: T) => string);
 	export type ItemIdResolved = string | number;
 	export type EuiTableDataType = 'auto' | 'string' | 'number' | 'boolean' | 'date';
@@ -22002,9 +21659,12 @@ declare module '@elastic/eui/src/components/basic_table/table_types' {
 	     */
 	    align?: HorizontalAlignment;
 	    /**
-	     * Indicates whether this column should truncate its content when it doesn't fit
+	     * Indicates whether this column should truncate overflowing text content.
+	     * - Set to `true` to enable single-line truncation.
+	     * - To enable multi-line truncation, use a configuration object with `lines`
+	     * set to a number of lines to truncate to.
 	     */
-	    truncateText?: boolean;
+	    truncateText?: EuiTableRowCellProps['truncateText'];
 	    mobileOptions?: Omit<EuiTableRowCellMobileOptionsShape, 'render'> & {
 	        render?: (item: T) => ReactNode;
 	    };
@@ -23259,7 +22919,6 @@ declare module '@elastic/eui/src/components' {
 	export * from '@elastic/eui/src/components/spacer';
 	export * from '@elastic/eui/src/components/stat';
 	export * from '@elastic/eui/src/components/steps';
-	export * from '@elastic/eui/src/components/suggest';
 	export * from '@elastic/eui/src/components/table';
 	export * from '@elastic/eui/src/components/token';
 	export * from '@elastic/eui/src/components/tour';
@@ -23284,6 +22943,68 @@ declare module '@elastic/eui' {
 	export * from '@elastic/eui/src/themes';
 	export * from '@elastic/eui/src/global_styling';
 
+}
+declare module '@elastic/eui/.storybook/utils' {
+	/**
+	 * argTypes configurations
+	 */
+	/**
+	 * Completely hide props from Storybook's controls panel.
+	 * Should be passed or spread to `argTypes`
+	 */
+	export const hideStorybookControls: <Props>(propNames: (keyof Props)[]) => {} | Record<keyof Props, {
+	    table: {
+	        disable: boolean;
+	    };
+	}>; const HIDE_CONTROL: {
+	    table: {
+	        disable: boolean;
+	    };
+	};
+	/**
+	 * Leave props visible in Storybook's controls panel, but disable them
+	 * from being controllable (renders a `-`).
+	 *
+	 * Should be passed or spread to `argTypes`
+	 */
+	export const disableStorybookControls: <Props>(propNames: (keyof Props)[]) => {} | Record<keyof Props, {
+	    control: boolean;
+	}>; const DISABLE_CONTROL: {
+	    control: boolean;
+	};
+	/**
+	 * parameters configurations
+	 */
+	/**
+	 * Will hide all props/controls. Pass to `parameters`
+	 *
+	 * TODO: Figure out some way to not show Storybook's "setup" text?
+	 */
+	export const hideAllStorybookControls: {
+	    controls: {
+	        exclude: RegExp;
+	    };
+	};
+	/**
+	 * Will hide the control/addon panel entirely for a specific story.
+	 * Should be passed or spread to to `parameters`.
+	 *
+	 * Note that users can choose to re-show the panel in the UI
+	 */
+	export const hidePanel: {
+	    options: {
+	        showPanel: boolean;
+	    };
+	};
+	export {};
+
+}
+declare module '@elastic/eui/src/components/color_picker/color_picker.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiColorPickerVariables: (euiThemeContext: UseEuiTheme) => {
+	    width: string;
+	};
+
 }
 declare module '@elastic/eui/src/components/icon/assets/videoPlayer' {
 	import * as React from 'react';
@@ -28690,13 +28411,6 @@ declare module '@elastic/eui' {
 "euiColorPicker.alphaLabel": any;
 "euiColorPicker.openLabel": any;
 "euiColorPicker.closeLabel": any;
-"euiColorStopThumb.buttonAriaLabel": any;
-"euiColorStopThumb.buttonTitle": any;
-"euiColorStopThumb.screenReaderAnnouncement": any;
-"euiColorStopThumb.stopLabel": any;
-"euiColorStopThumb.stopErrorMessage": any;
-"euiColorStopThumb.removeLabel": any;
-"euiColorStops.screenReaderAnnouncement": any;
 "euiHue.label": any;
 "euiSaturation.ariaLabel": any;
 "euiSaturation.screenReaderInstructions": any;
@@ -29032,12 +28746,6 @@ declare module '@elastic/eui' {
 "euiStepStrings.simpleLoading": any;
 "euiStepStrings.current": any;
 "euiStepStrings.simpleCurrent": any;
-"euiSuggest.stateSavedTooltip": any;
-"euiSuggest.stateUnsavedTooltip": any;
-"euiSuggest.stateLoading": any;
-"euiSuggest.stateSaved": any;
-"euiSuggest.stateUnsaved": any;
-"euiSuggest.stateUnchanged": any;
 "euiTableSortMobile.sorting": any;
 "euiTableHeaderCell.titleTextWithDesc": any;
 "euiTablePagination.allRows": any;