@elastic/eui 85.0.0 → 85.1.0

package/eui.d.ts

@@ -597,16 +597,6 @@ declare module '@elastic/eui/src/global_styling/variables/typography' {
 declare module '@elastic/eui/src/global_styling/variables/states' {
 	import { ColorModeSwitch } from '@elastic/eui/src/services/theme/types';
 	import { CSSProperties } from 'react';
-	/**
-	 * NOTE: These were quick conversions of their Sass counterparts.
-	 *       The commented out keys have not been established as necessary yet.
-	 */
-	export interface _EuiThemeFocusOutline {
-	    /**
-	     * A single CSS property: value
-	     */
-	    [key: string]: ColorModeSwitch;
-	}
 	export interface _EuiThemeFocus {
 	    /**
 	     * Default color of the focus ring, some components may override this property
@@ -618,6 +608,16 @@ declare module '@elastic/eui/src/global_styling/variables/states' {
 	     * - Default value: 2px
 	     */
 	    width: CSSProperties['borderWidth'];
+	    /**
+	     * Used to transparentize the focus background color
+	     * - Default value: { LIGHT: 0.1, DARK: 0.2 }
+	     */
+	    transparency: ColorModeSwitch<number>;
+	    /**
+	     * Default focus background color. Not all components set a background color on focus
+	     * - Default value: `colors.primary` computed with `focus.transparency`
+	     */
+	    backgroundColor: ColorModeSwitch;
 	}
 
 }
@@ -10057,6 +10057,217 @@ declare module '@elastic/eui/src/components/collapsible_nav' {
 	export type { EuiCollapsibleNavProps } from '@elastic/eui/src/components/collapsible_nav/collapsible_nav';
 	export { EuiCollapsibleNav } from '@elastic/eui/src/components/collapsible_nav/collapsible_nav';
 
+}
+declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_beta.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiCollapsibleNavBetaStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiCollapsibleNavBeta: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_beta' {
+	
+	import { EuiCollapsibleNavProps } from '@elastic/eui/src/components/collapsible_nav/collapsible_nav';
+	/**
+	 * TODO: Actual component in a follow-up PR
+	 */
+	export const EuiCollapsibleNavBeta: (props: EuiCollapsibleNavProps) => JSX.Element;
+
+}
+declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	/**
+	 * Style variables shared between accordion, link, and sub items
+	 */
+	export const euiCollapsibleNavItemVariables: (euiThemeContext: UseEuiTheme) => {
+	    animation: string;
+	    borderRadius: import("csstype").Property.BorderRadius<string | number> | undefined;
+	    backgroundHoverColor: string;
+	    backgroundSelectedColor: string;
+	    color: string;
+	    rightIconColor: string;
+	    fontSize: import("csstype").Property.FontSize<string | number> | undefined;
+	    lineHeight: import("csstype").Property.LineHeight<string | number> | undefined;
+	    height: string;
+	    padding: string;
+	};
+	/**
+	 * Title styles
+	 */
+	export const euiCollapsibleNavItemTitleStyles: {
+	    euiCollapsibleNavItem__title: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiCollapsibleNavSubItemGroupTitleStyles: ({ euiTheme, }: UseEuiTheme) => {
+	    euiCollapsibleNavItem__groupTitle: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_link.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiCollapsibleNavLinkStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiCollapsibleNavLink: import("@emotion/utils").SerializedStyles;
+	    isSelected: import("@emotion/utils").SerializedStyles;
+	    isTopItem: {
+	        isTopItem: import("@emotion/utils").SerializedStyles;
+	        isNotAccordion: import("@emotion/utils").SerializedStyles;
+	        isInteractive: import("@emotion/utils").SerializedStyles;
+	    };
+	    isSubItem: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+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' | 'accordionProps'> & _EuiCollapsibleNavItemDisplayProps & {
+	    children: ReactNode;
+	    isInteractive?: boolean;
+	    isNotAccordion?: boolean;
+	};
+	/**
+	 * Internal nav link component.
+	 *
+	 * Can be rendered as a standalone nav item, or as part of an accordion header.
+	 * Can also be rendered as top-level item (has a background hover) or as a
+	 * sub-item (renders closer to plain text).
+	 *
+	 * In terms of DOM output, follows the same logic as EuiLink (renders either
+	 * an `a` tag or a `button` if no valid link exists), and can also additionally
+	 * rendered a plain `span` if the item is not interactive.
+	 */
+	export const EuiCollapsibleNavLink: FunctionComponent<EuiCollapsibleNavLinkProps>;
+	export {};
+
+}
+declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.styles' {
+	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;
+	    isSubItem: import("@emotion/utils").SerializedStyles;
+	    euiCollapsibleNavAccordion__arrow: import("@emotion/utils").SerializedStyles;
+	    children: {
+	        euiCollapsibleNavAccordion__children: import("@emotion/utils").SerializedStyles;
+	        isTopItem: import("@emotion/utils").SerializedStyles;
+	        isSubItem: import("@emotion/utils").SerializedStyles;
+	    };
+	};
+
+}
+declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion' {
+	import { FunctionComponent, ReactNode } from 'react';
+	import { _SharedEuiCollapsibleNavItemProps, _EuiCollapsibleNavItemDisplayProps, EuiCollapsibleNavItemProps } from '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item'; type EuiCollapsibleNavAccordionProps = Omit<_SharedEuiCollapsibleNavItemProps, 'items'> & _EuiCollapsibleNavItemDisplayProps & {
+	    buttonContent: ReactNode;
+	    items: EuiCollapsibleNavItemProps[];
+	};
+	/**
+	 * Internal nav accordion component.
+	 *
+	 * Renders children as either a nav link or any number/nesting of more nav accordions.
+	 * Triggering the open/closed state is handled only by the accordion `arrow` for
+	 * UX consistency, as accordion/nav titles can be their own links to pages.
+	 */
+	export const EuiCollapsibleNavAccordion: FunctionComponent<EuiCollapsibleNavAccordionProps>;
+	export {};
+
+}
+declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item' {
+	import { FunctionComponent, ReactNode, HTMLAttributes } from 'react';
+	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
+	import { IconType, EuiIconProps } from '@elastic/eui/src/components/icon';
+	import { EuiLinkProps } from '@elastic/eui/src/components/link';
+	import { EuiAccordionProps } from '@elastic/eui/src/components/accordion';
+	export type _SharedEuiCollapsibleNavItemProps = HTMLAttributes<HTMLElement> & CommonProps & {
+	    /**
+	     * The nav item link.
+	     * If not included, and no `onClick` is specified, the nav item
+	     * will render as an non-interactive `<span>`.
+	     */
+	    href?: string;
+	    /**
+	     * When passed, an `EuiAccordion` with nested child item links will be rendered.
+	     *
+	     * Accepts any #EuiCollapsibleNavItem prop, and also accepts an
+	     * #EuiCollapsibleNavSubItemGroupTitle
+	     */
+	    items?: EuiCollapsibleNavSubItemProps[];
+	    /**
+	     * If `items` is specified, use this prop to pass any prop that `EuiAccordion`
+	     * accepts, including props 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 = {
+	    /**
+	     * ReactNode to render as this component's title
+	     */
+	    title: ReactNode;
+	    /**
+	     * Allows customizing title's 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 EuiCollapsibleNavSubItemGroupTitle = Pick<EuiCollapsibleNavItemProps, 'title' | 'titleElement'> & {
+	    /**
+	     * Pass this flag to seperate links by group title headings.
+	     * Strongly consider using the `titleElement` prop for accessibility.
+	     */
+	    isGroupTitle?: boolean;
+	};
+	export type EuiCollapsibleNavSubItemProps = ExclusiveUnion<EuiCollapsibleNavItemProps, EuiCollapsibleNavSubItemGroupTitle>;
+	export type _EuiCollapsibleNavItemDisplayProps = {
+	    /**
+	     * Determines whether the item should render as a top-level nav item
+	     * or a nested nav subitem. Set internally by EUI
+	     */
+	    isSubItem?: boolean;
+	};
+	/**
+	 * Sub-items can either be a group title, to visually separate sections
+	 * of nav links, or they can simply be more links or accordions
+	 */
+	export const EuiCollapsibleNavSubItem: FunctionComponent<EuiCollapsibleNavSubItemProps>;
+	/**
+	 * The actual exported component
+	 */
+	export const EuiCollapsibleNavItem: FunctionComponent<EuiCollapsibleNavItemProps>;
+
+}
+declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item' {
+	export type { EuiCollapsibleNavItemProps, EuiCollapsibleNavSubItemProps, EuiCollapsibleNavSubItemGroupTitle, } from '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item';
+	export { EuiCollapsibleNavItem } from '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item';
+
+}
+declare module '@elastic/eui/src/components/collapsible_nav_beta' {
+	/**
+	 * NOTE: This is currently still a beta component, being exported for Kibana
+	 * development usage. It is not yet fully documented or supported.
+	 */
+	export { EuiCollapsibleNavBeta } from '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_beta';
+	export type { EuiCollapsibleNavItemProps, EuiCollapsibleNavSubItemProps, EuiCollapsibleNavSubItemGroupTitle, } from '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item';
+	export { EuiCollapsibleNavItem } from '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item';
+
 }
 declare module '@elastic/eui/src/components/color_picker/color_palette_display/color_palette_display_fixed' {
 	import { FunctionComponent, HTMLAttributes } from 'react';
@@ -10288,9 +10499,18 @@ declare module '@elastic/eui/src/components/combo_box/combo_box_options_list/com
 	import { FunctionComponent } from 'react';
 	export const EuiComboBoxTitle: FunctionComponent<{}>;
 
+}
+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 { ButtonHTMLAttributes, Component } from 'react';
+	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> {
@@ -10298,7 +10518,13 @@ declare module '@elastic/eui/src/components/filter_group/filter_select_item' {
 	    showIcons?: boolean;
 	    isFocused?: boolean;
 	}
-	export class EuiFilterSelectItem extends Component<EuiFilterSelectItemProps> {
+	/**
+	 * 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;
 	    };
@@ -10310,10 +10536,14 @@ declare module '@elastic/eui/src/components/filter_group/filter_select_item' {
 	    hasFocus: () => boolean;
 	    render(): 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/types' {
-	import { ButtonHTMLAttributes } from 'react';
+	import { ButtonHTMLAttributes, ReactNode } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	export interface EuiComboBoxOptionOption<T = string | number | string[] | undefined> extends CommonProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
 	    isGroupLabelOption?: boolean;
@@ -10321,6 +10551,8 @@ declare module '@elastic/eui/src/components/combo_box/types' {
 	    key?: string;
 	    options?: Array<EuiComboBoxOptionOption<T>>;
 	    value?: T;
+	    prepend?: ReactNode;
+	    append?: ReactNode;
 	}
 	export type UpdatePositionHandler = (listElement?: RefInstance<HTMLDivElement>) => void;
 	export type OptionHandler<T> = (option: EuiComboBoxOptionOption<T>) => void;
@@ -10334,7 +10566,7 @@ declare module '@elastic/eui/src/components/combo_box/types' {
 declare module '@elastic/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list' {
 	import { Component, ComponentProps, ReactNode, RefCallback } from 'react';
 	import { FixedSizeList, ListProps, ListChildComponentProps } from 'react-window';
-	import { EuiFilterSelectItem } from '@elastic/eui/src/components/filter_group/filter_select_item';
+	import { EuiFilterSelectItemClass } from '@elastic/eui/src/components/filter_group/filter_select_item';
 	import { htmlIdGenerator } from '@elastic/eui/src/services';
 	import { EuiComboBoxOptionOption, EuiComboBoxOptionsListPosition, EuiComboBoxSingleSelectionShape, OptionHandler, RefInstance, UpdatePositionHandler } from '@elastic/eui/src/components/combo_box/types';
 	import { CommonProps } from '@elastic/eui/src/components/common';
@@ -10364,7 +10596,7 @@ 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<EuiFilterSelectItem>) => void;
+	    optionRef: (index: number, node: RefInstance<EuiFilterSelectItemClass>) => void;
 	    /**
 	     * Array of EuiComboBoxOptionOption objects. See #EuiComboBoxOptionOption
 	     */
@@ -10536,118 +10768,6 @@ declare module '@elastic/eui/src/components/combo_box/combo_box_input/combo_box_
 	}
 	export {};
 
-}
-declare module '@elastic/eui/src/components/filter_group/filter_button.styles' {
-	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiFilterButtonDisplay: ({ euiTheme }: UseEuiTheme) => {
-	    flex: string;
-	    minInlineSize: string;
-	};
-	export const euiFilterButtonStyles: (euiThemeContext: UseEuiTheme) => {
-	    euiFilterButton: import("@emotion/utils").SerializedStyles;
-	    withNext: import("@emotion/utils").SerializedStyles;
-	    noGrow: import("@emotion/utils").SerializedStyles;
-	    hasNotification: import("@emotion/utils").SerializedStyles;
-	    hasActiveFilters: import("@emotion/utils").SerializedStyles;
-	};
-	export const euiFilterButtonChildStyles: ({ euiTheme }: UseEuiTheme) => {
-	    content: {
-	        euiFilterButton__content: import("@emotion/utils").SerializedStyles;
-	        hasIcon: import("@emotion/utils").SerializedStyles;
-	    };
-	    text: {
-	        euiFilterButton__text: import("@emotion/utils").SerializedStyles;
-	        hasNotification: import("@emotion/utils").SerializedStyles;
-	        euiFilterButton__textShift: import("@emotion/utils").SerializedStyles;
-	    };
-	    notification: {
-	        euiFilterButton__notification: import("@emotion/utils").SerializedStyles;
-	        disabled: import("@emotion/utils").SerializedStyles;
-	    };
-	};
-
-}
-declare module '@elastic/eui/src/components/filter_group/filter_group.styles' {
-	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiFilterGroupStyles: (euiThemeContext: UseEuiTheme) => {
-	    euiFilterGroup: import("@emotion/utils").SerializedStyles;
-	    fullWidth: import("@emotion/utils").SerializedStyles;
-	    uncompressed: import("@emotion/utils").SerializedStyles;
-	    compressed: import("@emotion/utils").SerializedStyles;
-	    /**
-	     * Not used in EuiFilterGroup directly, but used by EuiSearchBar and consumers
-	     * A fixed width is required because of the shift in widths that can be caused
-	     * by the loading animation that precedes the results.
-	     */
-	    euiFilterGroup__popoverPanel: import("@emotion/utils").SerializedStyles;
-	};
-
-}
-declare module '@elastic/eui/src/components/filter_group/filter_group' {
-	import { HTMLAttributes, ReactNode, FunctionComponent } from 'react';
-	import { CommonProps } from '@elastic/eui/src/components/common';
-	export type EuiFilterGroupProps = HTMLAttributes<HTMLDivElement> & CommonProps & {
-	    children?: ReactNode;
-	    /**
-	     * Expand the whole bar to fill its parent's width
-	     */
-	    fullWidth?: boolean;
-	    /**
-	     *  When `true`, creates a shorter height filter group matching that of `compressed` form controls
-	     */
-	    compressed?: boolean;
-	};
-	export const EuiFilterGroup: FunctionComponent<EuiFilterGroupProps>;
-
-}
-declare module '@elastic/eui/src/components/filter_group/filter_button' {
-	import { FunctionComponent } from 'react';
-	import { DistributiveOmit } from '@elastic/eui/src/components/common';
-	import { BadgeNotificationColor } from '@elastic/eui/src/components/badge/notification_badge/badge_notification';
-	import { EuiButtonEmptyProps } from '@elastic/eui/src/components/button/button_empty';
-	export type EuiFilterButtonProps = {
-	    /**
-	     * Bolds the button if true
-	     */
-	    hasActiveFilters?: boolean;
-	    /**
-	     * Pass the total number of filters available and it will
-	     * add a subdued notification badge showing the number
-	     */
-	    numFilters?: number;
-	    /**
-	     * Pass the number of selected filters and it will
-	     * add a bright notification badge showing the number
-	     */
-	    numActiveFilters?: number;
-	    /**
-	     * Applies a visual state to the button useful when using with a popover.
-	     */
-	    isSelected?: boolean;
-	    /**
-	     * Should the button grow to fill its container, best used for dropdown buttons
-	     */
-	    grow?: boolean;
-	    /**
-	     * Remove border after button, good for opposite filters
-	     */
-	    withNext?: boolean;
-	    /**
-	     * Change color of the counter badge
-	     */
-	    badgeColor?: BadgeNotificationColor;
-	} & DistributiveOmit<EuiButtonEmptyProps, 'flush' | 'size'>;
-	export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps>;
-
-}
-declare module '@elastic/eui/src/components/filter_group' {
-	export type { EuiFilterGroupProps } from '@elastic/eui/src/components/filter_group/filter_group';
-	export { EuiFilterGroup } from '@elastic/eui/src/components/filter_group/filter_group';
-	export type { EuiFilterButtonProps } from '@elastic/eui/src/components/filter_group/filter_button';
-	export { EuiFilterButton } from '@elastic/eui/src/components/filter_group/filter_button';
-	export type { EuiFilterSelectItemProps, FilterChecked, } from '@elastic/eui/src/components/filter_group/filter_select_item';
-	export { EuiFilterSelectItem } from '@elastic/eui/src/components/filter_group/filter_select_item';
-
 }
 declare module '@elastic/eui/src/components/combo_box/combo_box' {
 	/**
@@ -10659,7 +10779,7 @@ declare module '@elastic/eui/src/components/combo_box/combo_box' {
 	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';
-	import { EuiFilterSelectItem } from '@elastic/eui/src/components/filter_group';
+	import { EuiFilterSelectItemClass } from '@elastic/eui/src/components/filter_group/filter_select_item';
 	import AutosizeInput from 'react-input-autosize';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { EuiFormControlLayoutProps } from '@elastic/eui/src/components/form'; type DrillProps<T> = Pick<EuiComboBoxOptionsListProps<T>, 'customOptionText' | 'onCreateOption' | 'options' | 'renderOption' | 'selectedOptions'>;
@@ -10799,7 +10919,7 @@ declare module '@elastic/eui/src/components/combo_box/combo_box' {
 	    listRefCallback: RefCallback<HTMLDivElement>;
 	    toggleButtonRefInstance: RefInstance<HTMLButtonElement | HTMLSpanElement>;
 	    toggleButtonRefCallback: RefCallback<HTMLButtonElement | HTMLSpanElement>;
-	    optionsRefInstances: Array<RefInstance<EuiFilterSelectItem>>;
+	    optionsRefInstances: Array<RefInstance<EuiFilterSelectItemClass>>;
 	    optionRefCallback: EuiComboBoxOptionsListProps<T>['optionRef'];
 	    openList: () => void;
 	    closeList: (event?: Event | undefined) => void;
@@ -15232,6 +15352,118 @@ declare module '@elastic/eui/src/components/expression' {
 	export type { EuiExpressionProps } from '@elastic/eui/src/components/expression/expression';
 	export { EuiExpression } from '@elastic/eui/src/components/expression/expression';
 
+}
+declare module '@elastic/eui/src/components/filter_group/filter_button.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiFilterButtonDisplay: ({ euiTheme }: UseEuiTheme) => {
+	    flex: string;
+	    minInlineSize: string;
+	};
+	export const euiFilterButtonStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiFilterButton: import("@emotion/utils").SerializedStyles;
+	    withNext: import("@emotion/utils").SerializedStyles;
+	    noGrow: import("@emotion/utils").SerializedStyles;
+	    hasNotification: import("@emotion/utils").SerializedStyles;
+	    hasActiveFilters: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiFilterButtonChildStyles: ({ euiTheme }: UseEuiTheme) => {
+	    content: {
+	        euiFilterButton__content: import("@emotion/utils").SerializedStyles;
+	        hasIcon: import("@emotion/utils").SerializedStyles;
+	    };
+	    text: {
+	        euiFilterButton__text: import("@emotion/utils").SerializedStyles;
+	        hasNotification: import("@emotion/utils").SerializedStyles;
+	        euiFilterButton__textShift: import("@emotion/utils").SerializedStyles;
+	    };
+	    notification: {
+	        euiFilterButton__notification: import("@emotion/utils").SerializedStyles;
+	        disabled: import("@emotion/utils").SerializedStyles;
+	    };
+	};
+
+}
+declare module '@elastic/eui/src/components/filter_group/filter_group.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiFilterGroupStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiFilterGroup: import("@emotion/utils").SerializedStyles;
+	    fullWidth: import("@emotion/utils").SerializedStyles;
+	    uncompressed: import("@emotion/utils").SerializedStyles;
+	    compressed: import("@emotion/utils").SerializedStyles;
+	    /**
+	     * Not used in EuiFilterGroup directly, but used by EuiSearchBar and consumers
+	     * A fixed width is required because of the shift in widths that can be caused
+	     * by the loading animation that precedes the results.
+	     */
+	    euiFilterGroup__popoverPanel: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/filter_group/filter_group' {
+	import { HTMLAttributes, ReactNode, FunctionComponent } from 'react';
+	import { CommonProps } from '@elastic/eui/src/components/common';
+	export type EuiFilterGroupProps = HTMLAttributes<HTMLDivElement> & CommonProps & {
+	    children?: ReactNode;
+	    /**
+	     * Expand the whole bar to fill its parent's width
+	     */
+	    fullWidth?: boolean;
+	    /**
+	     *  When `true`, creates a shorter height filter group matching that of `compressed` form controls
+	     */
+	    compressed?: boolean;
+	};
+	export const EuiFilterGroup: FunctionComponent<EuiFilterGroupProps>;
+
+}
+declare module '@elastic/eui/src/components/filter_group/filter_button' {
+	import { FunctionComponent } from 'react';
+	import { DistributiveOmit } from '@elastic/eui/src/components/common';
+	import { BadgeNotificationColor } from '@elastic/eui/src/components/badge/notification_badge/badge_notification';
+	import { EuiButtonEmptyProps } from '@elastic/eui/src/components/button/button_empty';
+	export type EuiFilterButtonProps = {
+	    /**
+	     * Bolds the button if true
+	     */
+	    hasActiveFilters?: boolean;
+	    /**
+	     * Pass the total number of filters available and it will
+	     * add a subdued notification badge showing the number
+	     */
+	    numFilters?: number;
+	    /**
+	     * Pass the number of selected filters and it will
+	     * add a bright notification badge showing the number
+	     */
+	    numActiveFilters?: number;
+	    /**
+	     * Applies a visual state to the button useful when using with a popover.
+	     */
+	    isSelected?: boolean;
+	    /**
+	     * Should the button grow to fill its container, best used for dropdown buttons
+	     */
+	    grow?: boolean;
+	    /**
+	     * Remove border after button, good for opposite filters
+	     */
+	    withNext?: boolean;
+	    /**
+	     * Change color of the counter badge
+	     */
+	    badgeColor?: BadgeNotificationColor;
+	} & DistributiveOmit<EuiButtonEmptyProps, 'flush' | 'size'>;
+	export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps>;
+
+}
+declare module '@elastic/eui/src/components/filter_group' {
+	export type { EuiFilterGroupProps } from '@elastic/eui/src/components/filter_group/filter_group';
+	export { EuiFilterGroup } from '@elastic/eui/src/components/filter_group/filter_group';
+	export type { EuiFilterButtonProps } from '@elastic/eui/src/components/filter_group/filter_button';
+	export { EuiFilterButton } from '@elastic/eui/src/components/filter_group/filter_button';
+	export type { EuiFilterSelectItemProps, FilterChecked, } from '@elastic/eui/src/components/filter_group/filter_select_item';
+	export { EuiFilterSelectItem } from '@elastic/eui/src/components/filter_group/filter_select_item';
+
 }
 declare module '@elastic/eui/src/components/facet/facet_button.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
@@ -21897,6 +22129,7 @@ declare module '@elastic/eui/src/components' {
 	export * from '@elastic/eui/src/components/card';
 	export * from '@elastic/eui/src/components/code';
 	export * from '@elastic/eui/src/components/collapsible_nav';
+	export * from '@elastic/eui/src/components/collapsible_nav_beta';
 	export * from '@elastic/eui/src/components/color_picker';
 	export * from '@elastic/eui/src/components/combo_box';
 	export * from '@elastic/eui/src/components/comment_list';