@elastic/eui 87.0.0 → 87.1.0

package/eui.d.ts

@@ -5010,15 +5010,18 @@ declare module '@elastic/eui/src/components/tool_tip/tool_tip_popover' {
 
 }
 declare module '@elastic/eui/src/components/tool_tip/tool_tip_anchor' {
-	import React, { HTMLAttributes, ReactElement } from 'react';
-	export interface EuiToolTipAnchorProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'onBlur' | 'onFocus' | 'children'> {
+	import React, { HTMLAttributes } from 'react';
+	import type { EuiToolTipProps } from '@elastic/eui/src/components/tool_tip/tool_tip';
+	export type EuiToolTipAnchorProps = Omit<HTMLAttributes<HTMLSpanElement>, 'onBlur' | 'onFocus' | 'children'> & Required<Pick<EuiToolTipProps, 'display' | 'children'>> & {
 	    onBlur: () => void;
 	    onFocus: () => void;
-	    children: ReactElement;
 	    isVisible: boolean;
-	    display: 'block' | 'inlineBlock';
-	}
-	export const EuiToolTipAnchor: React.ForwardRefExoticComponent<EuiToolTipAnchorProps & React.RefAttributes<HTMLSpanElement>>;
+	};
+	export const EuiToolTipAnchor: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLSpanElement>, "children" | "onFocus" | "onBlur"> & Required<Pick<EuiToolTipProps, "display" | "children">> & {
+	    onBlur: () => void;
+	    onFocus: () => void;
+	    isVisible: boolean;
+	} & React.RefAttributes<HTMLSpanElement>>;
 
 }
 declare module '@elastic/eui/src/components/tool_tip/tool_tip_arrow' {
@@ -5043,7 +5046,7 @@ declare module '@elastic/eui/src/components/tool_tip/tool_tip' {
 	import React, { Component, ReactElement, ReactNode, MouseEvent as ReactMouseEvent, HTMLAttributes } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { ToolTipPositions } from '@elastic/eui/src/components/tool_tip/tool_tip_popover';
-	export const POSITIONS: ToolTipPositions[];
+	export const POSITIONS: readonly ["top", "right", "bottom", "left"]; const DISPLAYS: readonly ["inlineBlock", "block"];
 	export type ToolTipDelay = 'regular' | 'long';
 	interface ToolTipStyles {
 	    top: number;
@@ -5051,10 +5054,7 @@ declare module '@elastic/eui/src/components/tool_tip/tool_tip' {
 	    right?: number | 'auto';
 	    opacity?: number;
 	    visibility?: 'hidden';
-	} const displayToClassNameMap: {
-	    inlineBlock: undefined;
-	    block: string;
-	};
+	}
 	export interface EuiToolTipProps extends CommonProps {
 	    /**
 	     * Passes onto the span wrapping the trigger.
@@ -5079,7 +5079,7 @@ declare module '@elastic/eui/src/components/tool_tip/tool_tip' {
 	    /**
 	     * Common display alternatives for the anchor wrapper
 	     */
-	    display?: keyof typeof displayToClassNameMap;
+	    display?: (typeof DISPLAYS)[number];
 	    /**
 	     * Delay before showing tooltip. Good for repeatable items.
 	     */
@@ -6271,9 +6271,8 @@ declare module '@elastic/eui/src/components/popover/popover' {
 	     */
 	    anchorPosition?: PopoverAnchorPosition;
 	    /**
-	     * Style and position alteration for arrow-less, left-aligned
-	     * attachment. Intended for use with inputs as anchors, e.g.
-	     * EuiInputPopover
+	     * Style and position alteration for arrow-less attachment.
+	     * Intended for use with inputs as anchors, e.g. EuiInputPopover
 	     */
 	    attachToAnchor?: boolean;
 	    /**
@@ -6453,12 +6452,22 @@ declare module '@elastic/eui/src/components/popover/input_popover' {
 	import { 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'> {
+	export interface _EuiInputPopoverProps extends Omit<EuiPopoverProps, 'button' | 'buttonRef' | 'anchorPosition'> {
+	    /**
+	     * Alignment of the popover relative to the input
+	     */
+	    anchorPosition?: 'downLeft' | 'downRight' | 'downCenter';
 	    disableFocusTrap?: boolean;
 	    fullWidth?: boolean;
 	    input: EuiPopoverProps['button'];
 	    inputRef?: EuiPopoverProps['buttonRef'];
 	    onPanelResize?: (width?: number) => void;
+	    /**
+	     * By default, **EuiInputPopovers** inherit the same width as the passed input element.
+	     * However, if the input width is too small, you can pass a minimum panel width
+	     * (that should be based on the popover content).
+	     */
+	    panelMinWidth?: number;
 	}
 	export type EuiInputPopoverProps = CommonProps & HTMLAttributes<HTMLDivElement> & _EuiInputPopoverProps;
 	export const EuiInputPopover: FunctionComponent<EuiInputPopoverProps>;
@@ -6587,9 +6596,10 @@ declare module '@elastic/eui/src/components/form/range/range_input' {
 declare module '@elastic/eui/src/components/form/range/types' {
 	import type { ReactNode, CSSProperties, InputHTMLAttributes } from 'react';
 	import type { CommonProps } from '@elastic/eui/src/components/common';
+	import type { EuiInputPopoverProps } from '@elastic/eui/src/components/popover/input_popover';
 	import type { EuiFormControlLayoutProps } from '@elastic/eui/src/components/form/form_control_layout';
 	import type { EuiRangeLevelColor } from '@elastic/eui/src/components/form/range/range_levels_colors';
-	import { EuiRangeInputProps } from '@elastic/eui/src/components/form/range/range_input';
+	import type { EuiRangeInputProps } from '@elastic/eui/src/components/form/range/range_input';
 	/**
 	 * Internal type atoms split up both for easier categorization
 	 * and for easier reusing/picking
@@ -6672,14 +6682,21 @@ declare module '@elastic/eui/src/components/form/range/types' {
 	     * @default false
 	     */
 	    fullWidth?: boolean;
+	    /**
+	     * Only impacts inputs rendered by the `showInput` prop
+	     */
+	    isInvalid?: boolean;
 	    /**
 	     * Only impacts inputs rendered when the `showInput` prop is set to `"inputWithPopover"`
 	     */
 	    isLoading?: boolean;
 	    /**
-	     * Only impacts inputs rendered by the `showInput` prop
+	     * Only impacts input popovers rendered when the `showInput` prop is set to `"inputWithPopover"`
+	     *
+	     * Allows customizing the underlying [EuiInputPopover](/#/layout/popover#popover-attached-to-input-element),
+	     * except for props controlled by the range component
 	     */
-	    isInvalid?: boolean;
+	    inputPopoverProps?: Omit<EuiInputPopoverProps, 'input' | 'isOpen' | 'closePopover' | 'disableFocusTrap' | 'popoverScreenReaderText' | 'fullWidth'>;
 	}
 	export type _SharedRangeInputSide = {
 	    /**
@@ -7264,7 +7281,7 @@ declare module '@elastic/eui/src/components/form/super_select/super_select' {
 	import React, { Component, FocusEvent, ReactNode } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { EuiSuperSelectControlProps, EuiSuperSelectOption } from '@elastic/eui/src/components/form/super_select/super_select_control';
-	import { EuiPopoverProps } from '@elastic/eui/src/components/popover';
+	import { EuiInputPopoverProps } from '@elastic/eui/src/components/popover';
 	import { EuiContextMenuItemLayoutAlignment } from '@elastic/eui/src/components/context_menu'; enum ShiftDirection {
 	    BACK = "back",
 	    FORWARD = "forward"
@@ -7306,7 +7323,7 @@ declare module '@elastic/eui/src/components/form/super_select/super_select' {
 	     */
 	    isOpen?: boolean;
 	    /**
-	     * Optional props to pass to the underlying [EuiPopover](/#/layout/popover).
+	     * Optional props to pass to the underlying [EuiInputPopover](/#/layout/popover#popover-attached-to-input-element).
 	     * Allows fine-grained control of the popover dropdown menu, including
 	     * `repositionOnScroll` for EuiSuperSelects used within scrollable containers,
 	     * and customizing popover panel styling.
@@ -7314,7 +7331,7 @@ declare module '@elastic/eui/src/components/form/super_select/super_select' {
 	     * Does not accept a nested `popoverProps.isOpen` property - use the top level
 	     * `isOpen` API instead.
 	     */
-	    popoverProps?: Partial<CommonProps & Omit<EuiPopoverProps, 'isOpen'>>;
+	    popoverProps?: Partial<CommonProps & Omit<EuiInputPopoverProps, 'isOpen'>>;
 	};
 	export class EuiSuperSelect<T extends string> extends Component<EuiSuperSelectProps<T>> {
 	    static defaultProps: {
@@ -8698,6 +8715,7 @@ declare module '@elastic/eui/src/components/accordion/accordion.styles' {
 }
 declare module '@elastic/eui/src/components/accordion/accordion' {
 	import React, { Component, HTMLAttributes, ReactNode } from 'react';
+	import { FocusableElement } from 'tabbable';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { WithEuiThemeProps } from '@elastic/eui/src/services';
 	import { EuiButtonIconProps } from '@elastic/eui/src/components/button';
@@ -8771,10 +8789,10 @@ declare module '@elastic/eui/src/components/accordion/accordion' {
 	     * Disable the open/close interaction and visually subdues the trigger
 	     */
 	    isDisabled?: boolean;
-	};
-	export class EuiAccordionClass extends Component<WithEuiThemeProps & EuiAccordionProps, {
+	}; type EuiAccordionState = {
 	    isOpen: boolean;
-	}> {
+	};
+	export class EuiAccordionClass extends Component<WithEuiThemeProps & EuiAccordionProps, EuiAccordionState> {
 	    static defaultProps: {
 	        initialIsOpen: boolean;
 	        paddingSize: "none";
@@ -8787,13 +8805,17 @@ declare module '@elastic/eui/src/components/accordion/accordion' {
 	    };
 	    childContent: HTMLDivElement | null;
 	    childWrapper: HTMLDivElement | null;
+	    tabbableChildren: FocusableElement[] | null;
 	    state: {
 	        isOpen: boolean;
 	    };
+	    get isOpen(): boolean;
 	    setChildContentHeight: () => void;
 	    componentDidMount(): void;
-	    componentDidUpdate(): void;
+	    componentDidUpdate(prevProps: EuiAccordionProps, prevState: EuiAccordionState): void;
 	    onToggle: () => void;
+	    preventTabbing: () => void;
+	    enableTabbing: () => void;
 	    setChildContentRef: (node: HTMLDivElement | null) => void;
 	    generatedId: string;
 	    resizeRef: (e: HTMLElement | null) => void;
@@ -8801,6 +8823,7 @@ declare module '@elastic/eui/src/components/accordion/accordion' {
 	    render(): React.JSX.Element;
 	}
 	export const EuiAccordion: React.ForwardRefExoticComponent<Omit<EuiAccordionProps, "theme"> & React.RefAttributes<Omit<EuiAccordionProps, "theme">>>;
+	export {};
 
 }
 declare module '@elastic/eui/src/components/accordion' {
@@ -8835,16 +8858,19 @@ declare module '@elastic/eui/src/components/aspect_ratio' {
 
 }
 declare module '@elastic/eui/src/components/auto_sizer/auto_sizer' {
-	import AutoSizer, { AutoSizerProps } from 'react-virtualized-auto-sizer';
-	export interface EuiAutoSizerProps extends AutoSizerProps {
-	}
+	import type { ComponentProps } from 'react';
+	import type { Size, HorizontalSize, VerticalSize } from 'react-virtualized-auto-sizer';
+	export type EuiAutoSizerProps = ComponentProps<typeof AutoSizer>;
+	export type EuiAutoSize = Size;
+	export type EuiAutoSizeHorizontal = HorizontalSize;
+	export type EuiAutoSizeVertical = VerticalSize;
+	import AutoSizer from 'react-virtualized-auto-sizer';
 	export class EuiAutoSizer extends AutoSizer {
 	}
 
 }
 declare module '@elastic/eui/src/components/auto_sizer' {
-	export type { EuiAutoSizerProps } from '@elastic/eui/src/components/auto_sizer/auto_sizer';
-	export { EuiAutoSizer } from '@elastic/eui/src/components/auto_sizer/auto_sizer';
+	export * from '@elastic/eui/src/components/auto_sizer/auto_sizer';
 
 }
 declare module '@elastic/eui/src/components/avatar/avatar.styles' {
@@ -10487,6 +10513,16 @@ declare module '@elastic/eui/src/components/flyout/flyout_body' {
 	     * Use to display a banner at the top of the body. It is suggested to use `EuiCallOut` for it.
 	     */
 	    banner?: ReactNode;
+	    /**
+	     * [Scrollable regions (or their children) should be focusable](https://dequeuniversity.com/rules/axe/4.0/scrollable-region-focusable)
+	     * to allow keyboard users to scroll the region via arrow keys.
+	     *
+	     * By default, EuiFlyoutBody's scroll overflow wrapper sets a `tabIndex` of `0`.
+	     * If you know your flyout body content already contains focusable children
+	     * that satisfy keyboard accessibility requirements, you can use this prop
+	     * to override this default.
+	     */
+	    scrollableTabIndex?: number;
 	}>;
 	export const EuiFlyoutBody: EuiFlyoutBodyProps;
 
@@ -10692,6 +10728,16 @@ declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav
 	     * take up the full width of the page.
 	     */
 	    width?: number;
+	    /**
+	     * Overlay flyouts are considered dialogs, and dialogs must have a label.
+	     * By default, a label of `Site menu` will be applied.
+	     *
+	     * If your usage of this component is not actually for site-wide navigation,
+	     * please set your own `aria-label` or `aria-labelledby`.
+	     *
+	     * @default 'Site menu'
+	     */
+	    'aria-label'?: string;
 	};
 	export const EuiCollapsibleNavBeta: FunctionComponent<EuiCollapsibleNavBetaProps>;
 
@@ -10854,7 +10900,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_item' {
-	import { FunctionComponent, ReactNode, HTMLAttributes } from 'react';
+	import { FunctionComponent, 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';
@@ -10891,11 +10937,11 @@ declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav
 	};
 	export type EuiCollapsibleNavItemProps = {
 	    /**
-	     * ReactNode to render as this component's title
+	     * Required text to render as the nav item title
 	     */
-	    title: ReactNode;
+	    title: string;
 	    /**
-	     * Allows customizing title's element.
+	     * Allows customizing the title element.
 	     * Consider using a heading element for better accessibility.
 	     * Defaults to an unsemantic `span` or `div`, depending on context.
 	     */
@@ -15261,7 +15307,7 @@ declare module '@elastic/eui/src/components/date_picker/date_picker_range' {
 	import { IconType } from '@elastic/eui/src/components/icon';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { EuiDatePickerProps } from '@elastic/eui/src/components/date_picker/date_picker';
-	export type EuiDatePickerRangeProps = CommonProps & Pick<EuiFormControlLayoutDelimitedProps, 'isLoading' | 'isInvalid' | 'readOnly' | 'fullWidth' | 'prepend' | 'append'> & {
+	export type EuiDatePickerRangeProps = CommonProps & Pick<EuiFormControlLayoutDelimitedProps, 'isLoading' | 'isInvalid' | 'readOnly' | 'fullWidth' | 'compressed' | 'prepend' | 'append'> & {
 	    /**
 	     * Including any children will replace all innards with the provided children
 	     */
@@ -15721,7 +15767,7 @@ declare module '@elastic/eui/src/components/empty_prompt/empty_prompt' {
 	import { _EuiPanelDivlike } from '@elastic/eui/src/components/panel/panel';
 	export const PADDING_SIZES: ("s" | "m" | "l" | "none")[];
 	export type PaddingSize = (typeof PADDING_SIZES)[number];
-	export type EuiEmptyPromptProps = CommonProps & Omit<_EuiPanelDivlike, 'borderRadius' | 'grow' | 'panelRef' | 'paddingSize' | 'title'> & {
+	export type EuiEmptyPromptProps = CommonProps & Omit<_EuiPanelDivlike, 'borderRadius' | 'grow' | 'panelRef' | 'paddingSize' | 'title' | 'element'> & {
 	    iconType?: IconType;
 	    /**
 	     * Color for `iconType` when passed as an `IconType`
@@ -19806,6 +19852,7 @@ declare module '@elastic/eui/src/components/selectable/selectable_list/selectabl
 	    ariaPosInSetMap: Record<number, number>;
 	    calculateAriaSetAttrs: (optionArray: Array<EuiSelectableOption<T>>) => void;
 	    ListRow: React.MemoExoticComponent<({ data, index, style }: ListChildComponentProps<T>) => React.JSX.Element>;
+	    renderVirtualizedList: (heightIsFull: boolean, optionArray: EuiSelectableOption[]) => React.JSX.Element | null;
 	    render(): React.JSX.Element;
 	    onAddOrRemoveOption: (option: EuiSelectableOption<T>, event: EuiSelectableOnChangeEvent) => void;
 	    private onAddOption;
@@ -27823,6 +27870,7 @@ declare module '@elastic/eui' {
 "euiCodeBlockCopy.copy": any;
 "euiCodeBlockFullScreen.fullscreenCollapse": any;
 "euiCodeBlockFullScreen.fullscreenExpand": any;
+"euiCollapsibleNavBeta.ariaLabel": any;
 "euiCollapsibleNavButton.ariaLabelOpen": any;
 "euiCollapsibleNavButton.ariaLabelClose": any;
 "euiColorPickerSwatch.ariaLabel": any;

package/i18ntokens.json

@@ -5,14 +5,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 349,
+        "line": 408,
         "column": 16,
-        "index": 10174
+        "index": 12163
       },
       "end": {
-        "line": 349,
+        "line": 408,
         "column": 76,
-        "index": 10234
+        "index": 12223
       }
     },
     "filepath": "src/components/accordion/accordion.tsx"
@@ -431,6 +431,24 @@
     },
     "filepath": "src/components/code/code_block_full_screen.tsx"
   },
+  {
+    "token": "euiCollapsibleNavBeta.ariaLabel",
+    "defString": "Site menu",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 170,
+        "column": 27,
+        "index": 5493
+      },
+      "end": {
+        "line": 173,
+        "column": 3,
+        "index": 5563
+      }
+    },
+    "filepath": "src/components/collapsible_nav_beta/collapsible_nav_beta.tsx"
+  },
   {
     "token": "euiCollapsibleNavButton.ariaLabelOpen",
     "defString": "Toggle navigation open",
@@ -4667,14 +4685,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 294,
+        "line": 295,
         "column": 8,
-        "index": 9459
+        "index": 9503
       },
       "end": {
-        "line": 294,
+        "line": 295,
         "column": 78,
-        "index": 9529
+        "index": 9573
       }
     },
     "filepath": "src/components/flyout/flyout.tsx"
@@ -4685,14 +4703,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 357,
+        "line": 359,
         "column": 12,
-        "index": 11739
+        "index": 11856
       },
       "end": {
-        "line": 360,
+        "line": 362,
         "column": 14,
-        "index": 11948
+        "index": 12065
       }
     },
     "filepath": "src/components/flyout/flyout.tsx"
@@ -4703,14 +4721,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 362,
+        "line": 364,
         "column": 12,
-        "index": 11977
+        "index": 12094
       },
       "end": {
-        "line": 365,
+        "line": 367,
         "column": 14,
-        "index": 12149
+        "index": 12266
       }
     },
     "filepath": "src/components/flyout/flyout.tsx"
@@ -4721,14 +4739,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 368,
+        "line": 370,
         "column": 12,
-        "index": 12220
+        "index": 12337
       },
       "end": {
-        "line": 371,
+        "line": 373,
         "column": 14,
-        "index": 12407
+        "index": 12524
       }
     },
     "filepath": "src/components/flyout/flyout.tsx"
@@ -4901,14 +4919,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 614,
+        "line": 616,
         "column": 6,
-        "index": 18263
+        "index": 18346
       },
       "end": {
-        "line": 617,
+        "line": 619,
         "column": 8,
-        "index": 18498
+        "index": 18581
       }
     },
     "filepath": "src/components/form/range/dual_range.tsx"
@@ -4919,14 +4937,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 182,
+        "line": 183,
         "column": 6,
-        "index": 4833
+        "index": 4858
       },
       "end": {
-        "line": 185,
+        "line": 186,
         "column": 8,
-        "index": 5010
+        "index": 5035
       }
     },
     "filepath": "src/components/form/range/range.tsx"
@@ -4939,12 +4957,12 @@
       "start": {
         "line": 344,
         "column": 12,
-        "index": 9030
+        "index": 9079
       },
       "end": {
         "line": 348,
         "column": 14,
-        "index": 9276
+        "index": 9325
       }
     },
     "filepath": "src/components/form/super_select/super_select.tsx"
@@ -4957,12 +4975,12 @@
       "start": {
         "line": 351,
         "column": 8,
-        "index": 9331
+        "index": 9380
       },
       "end": {
         "line": 351,
         "column": 75,
-        "index": 9398
+        "index": 9447
       }
     },
     "filepath": "src/components/form/super_select/super_select.tsx"
@@ -6017,14 +6035,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 676,
+        "line": 671,
         "column": 16,
-        "index": 19791
+        "index": 19639
       },
       "end": {
-        "line": 679,
+        "line": 674,
         "column": 18,
-        "index": 19985
+        "index": 19833
       }
     },
     "filepath": "src/components/popover/popover.tsx"