@elastic/eui 76.0.2 → 76.2.0

package/eui.d.ts

@@ -5753,7 +5753,7 @@ declare module '@elastic/eui/src/components/form/super_select/super_select_contr
 	    disabled?: boolean;
 	    'data-test-subj'?: string;
 	}
-	export interface EuiSuperSelectControlProps<T> extends CommonProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
+	export interface EuiSuperSelectControlProps<T> extends CommonProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'placeholder'> {
 	    /**
 	     * @default false
 	     */
@@ -5774,6 +5774,7 @@ declare module '@elastic/eui/src/components/form/super_select/super_select_contr
 	    isLoading?: boolean;
 	    readOnly?: boolean;
 	    name?: string;
+	    placeholder?: ReactNode;
 	    value?: T;
 	    options?: Array<EuiSuperSelectOption<T>>;
 	    /**
@@ -5786,11 +5787,6 @@ declare module '@elastic/eui/src/components/form/super_select/super_select_contr
 	     * `string` | `ReactElement` or an array of these
 	     */
 	    append?: EuiFormControlLayoutProps['append'];
-	    /**
-	     * Creates a semantic label ID for the `div[role="listbox"]` that's opened on click or keypress.
-	     * __Generated and passed down by `EuiSuperSelect`.__
-	     */
-	    screenReaderId?: string;
 	}
 	export const EuiSuperSelectControl: <T extends string>(props: EuiSuperSelectControlProps<T>) => ReturnType<FunctionComponent<EuiSuperSelectControlProps<T>>>;
 
@@ -6271,7 +6267,7 @@ declare module '@elastic/eui/src/components/context_menu' {
 
 }
 declare module '@elastic/eui/src/components/form/super_select/super_select' {
-	import React, { Component, FocusEvent } from 'react';
+	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';
@@ -6288,6 +6284,10 @@ declare module '@elastic/eui/src/components/form/super_select/super_select' {
 	     */
 	    options: Array<EuiSuperSelectOption<T>>;
 	    valueOfSelected?: T;
+	    /**
+	     * Placeholder to display when the current selected value is empty.
+	     */
+	    placeholder?: ReactNode;
 	    /**
 	     * Classes for the context menu item
 	     */
@@ -6333,7 +6333,6 @@ declare module '@elastic/eui/src/components/form/super_select/super_select' {
 	    private itemNodes;
 	    private _isMounted;
 	    describedById: string;
-	    labelledById: string;
 	    state: {
 	        isPopoverOpen: boolean;
 	    };
@@ -11425,12 +11424,8 @@ declare module '@elastic/eui/src/components/datagrid/utils/row_heights' {
 	export const cellPaddingsMap: Record<EuiDataGridStyleCellPaddings, number>;
 	export const AUTO_HEIGHT = "auto";
 	export const DEFAULT_ROW_HEIGHT = 34;
+	export type RowHeightUtilsType = RowHeightUtils | RowHeightVirtualizationUtils;
 	export class RowHeightUtils {
-	    private gridRef;
-	    private outerGridElementRef;
-	    private gridItemsRenderedRef;
-	    private rerenderGridBodyRef;
-	    constructor(gridRef: MutableRefObject<ImperativeGridApi | null>, outerGridElementRef: MutableRefObject<HTMLDivElement | null>, gridItemsRenderedRef: MutableRefObject<GridOnItemsRenderedProps | null>, rerenderGridBodyRef: MutableRefObject<(() => void) | null>);
 	    getRowHeightOption(rowIndex: number, rowHeightsOptions?: EuiDataGridRowHeightsOptions): EuiDataGridRowHeightOption | undefined;
 	    isRowHeightOverride(rowIndex: number, rowHeightsOptions?: EuiDataGridRowHeightsOptions): boolean;
 	    getCalculatedHeight(heightOption: EuiDataGridRowHeightOption, defaultHeight: number, rowIndex?: number, isRowHeightOverride?: boolean): number;
@@ -11448,13 +11443,32 @@ declare module '@elastic/eui/src/components/datagrid/utils/row_heights' {
 	    /**
 	     * Auto height utils
 	     */
+	    isAutoHeight(rowIndex: number, rowHeightsOptions?: EuiDataGridRowHeightsOptions): boolean;
+	    /**
+	     * Heights cache utils
+	     * This cache is primarily used by auto heights & secondarily used by lineCount row overrides
+	     */
 	    private heightsCache;
+	    getRowHeight(rowIndex: number): number;
+	    setRowHeight(rowIndex: number, colId: string, height: number | undefined, _visibleRowIndex: number): boolean;
+	    pruneHiddenColumnHeights(visibleColumns: EuiDataGridColumn[]): boolean;
+	}
+	/**
+	 * Row height utils with virtualization library-specific APIs
+	 */
+	export class RowHeightVirtualizationUtils extends RowHeightUtils {
+	    private gridRef;
+	    private outerGridElementRef;
+	    private gridItemsRenderedRef;
+	    private rerenderGridBodyRef;
+	    constructor(gridRef: MutableRefObject<ImperativeGridApi | null>, outerGridElementRef: MutableRefObject<HTMLDivElement | null>, gridItemsRenderedRef: MutableRefObject<GridOnItemsRenderedProps | null>, rerenderGridBodyRef: MutableRefObject<(() => void) | null>);
+	    /**
+	     * Virtualization workarounds for auto height rows
+	     */
 	    private timerId?;
 	    private lastUpdatedRow;
-	    isAutoHeight(rowIndex: number, rowHeightsOptions?: EuiDataGridRowHeightsOptions): boolean;
-	    getRowHeight(rowIndex: number): number;
-	    setRowHeight(rowIndex: number, colId: string, height: number | undefined, visibleRowIndex: number): void;
-	    pruneHiddenColumnHeights(visibleColumns: EuiDataGridColumn[]): void;
+	    setRowHeight(rowIndex: number, colId: string, height: number | undefined, visibleRowIndex: number): boolean;
+	    pruneHiddenColumnHeights(visibleColumns: EuiDataGridColumn[]): boolean;
 	    resetRow(visibleRowIndex: number): void;
 	    resetGrid(): void;
 	    compensateForLayoutShift(rowIndex: number, verticalLayoutShift: number, anchorRow: EuiDataGridScrollAnchorRow): void;
@@ -11463,17 +11477,19 @@ declare module '@elastic/eui/src/components/datagrid/utils/row_heights' {
 	 * Hook for instantiating RowHeightUtils, setting internal class vars,
 	 * and setting up various row-height-related side effects
 	 */
-	export const useRowHeightUtils: ({ gridRef, outerGridElementRef, gridItemsRenderedRef, gridStyles, columns, rowHeightsOptions, }: {
-	    gridRef: MutableRefObject<ImperativeGridApi | null>;
-	    outerGridElementRef: MutableRefObject<HTMLDivElement | null>;
-	    gridItemsRenderedRef: MutableRefObject<GridOnItemsRenderedProps | null>;
+	export const useRowHeightUtils: ({ virtualization, rowHeightsOptions, gridStyles, columns, }: {
+	    virtualization?: false | {
+	        gridRef: MutableRefObject<ImperativeGridApi | null>;
+	        outerGridElementRef: MutableRefObject<HTMLDivElement | null>;
+	        gridItemsRenderedRef: MutableRefObject<GridOnItemsRenderedProps | null>;
+	    } | undefined;
+	    rowHeightsOptions?: EuiDataGridRowHeightsOptions | undefined;
 	    gridStyles: EuiDataGridStyle;
 	    columns: EuiDataGridColumn[];
-	    rowHeightsOptions?: EuiDataGridRowHeightsOptions | undefined;
 	}) => RowHeightUtils;
 	export const useDefaultRowHeight: ({ rowHeightsOptions, rowHeightUtils, }: {
 	    rowHeightsOptions?: EuiDataGridRowHeightsOptions | undefined;
-	    rowHeightUtils: RowHeightUtils;
+	    rowHeightUtils: RowHeightUtilsType;
 	}) => {
 	    defaultRowHeight: number;
 	    setRowHeight: import("react").Dispatch<import("react").SetStateAction<number>>;
@@ -11585,14 +11601,15 @@ declare module '@elastic/eui/src/components/token' {
 
 }
 declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
-	import { ComponentType, JSXElementConstructor, ReactNode, HTMLAttributes, CSSProperties, ReactElement, AriaAttributes, MutableRefObject, Component } from 'react';
+	import { ComponentType, JSXElementConstructor, ReactNode, HTMLAttributes, CSSProperties, ReactElement, AriaAttributes, MutableRefObject, Ref, Component } from 'react';
 	import { VariableSizeGridProps, VariableSizeGrid as Grid, GridOnItemsRenderedProps } from 'react-window';
 	import { EuiListGroupItemProps } from '@elastic/eui/src/components/list_group';
 	import { EuiButtonEmpty, EuiButtonIcon } from '@elastic/eui/src/components/button';
 	import { ExclusiveUnion, CommonProps, OneOf } from '@elastic/eui/src/components/common';
-	import { RowHeightUtils } from '@elastic/eui/src/components/datagrid/utils/row_heights';
+	import { RowHeightUtilsType } from '@elastic/eui/src/components/datagrid/utils/row_heights';
 	import { IconType } from '@elastic/eui/src/components/icon';
 	import { EuiTokenProps } from '@elastic/eui/src/components/token';
+	import { EuiPopoverProps } from '@elastic/eui/src/components/popover';
 	export type ImperativeGridApi = Omit<Grid, keyof Component>;
 	export interface EuiDataGridToolbarProps {
 	    gridWidth: number;
@@ -11747,6 +11764,7 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
 	    closeCellPopover(): void;
 	    setPopoverAnchor(anchor: HTMLElement): void;
 	    setPopoverContent(content: ReactNode): void;
+	    setCellPopoverProps: EuiDataGridCellPopoverElementProps['setCellPopoverProps'];
 	}
 	export type CommonGridProps = CommonProps & HTMLAttributes<HTMLDivElement> & {
 	    /**
@@ -11802,6 +11820,18 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
 	     * as its only argument.
 	     */
 	    renderFooterCellValue?: EuiDataGridCellProps['renderCellValue'];
+	    /**
+	     * An optional function called to completely customize and control the rendering of
+	     * EuiDataGrid's body and cell placement.  This can be used to, e.g. remove EuiDataGrid's
+	     * virtualization library, or roll your own.
+	     *
+	     * This component is **only** meant as an escape hatch for extremely custom use cases.
+	     *
+	     * Behind the scenes, this function is treated as a React component,
+	     * allowing hooks, context, and other React concepts to be used.
+	     * It receives #EuiDataGridCustomBodyProps as its only argument.
+	     */
+	    renderCustomGridBody?: (args: EuiDataGridCustomBodyProps) => ReactNode;
 	    /**
 	     * Defines the initial style of the grid. Accepts a partial #EuiDataGridStyle object.
 	     * Settings provided may be overwritten or merged with user defined preferences if `toolbarVisibility.showDisplaySelector.allowDensity = true` (which is the default).
@@ -11928,6 +11958,7 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
 	    renderCellValue: EuiDataGridCellProps['renderCellValue'];
 	    renderCellPopover?: EuiDataGridCellProps['renderCellPopover'];
 	    renderFooterCellValue?: EuiDataGridCellProps['renderCellValue'];
+	    renderCustomGridBody?: EuiDataGridProps['renderCustomGridBody'];
 	    interactiveCellId: EuiDataGridCellProps['interactiveCellId'];
 	    pagination?: EuiDataGridPaginationProps;
 	    headerIsInteractive: boolean;
@@ -11944,6 +11975,44 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
 	    gridItemsRendered: MutableRefObject<GridOnItemsRenderedProps | null>;
 	    wrapperRef: MutableRefObject<HTMLDivElement | null>;
 	}
+	export interface EuiDataGridCustomBodyProps {
+	    /**
+	     * When taking control of data grid rendering, the underlying `EuiDataGridCell`
+	     * is passed as a prop for usage. You **must** pass in a valid `colIndex`
+	     * and `visibleRowIndex` to this cell component.
+	     *
+	     * You may also pass in any other optional cell prop overrides
+	     * that `EuiDataGridCell` accepts, such as `isExpandable` or `renderCellValue`.
+	     */
+	    Cell: JSXElementConstructor<{
+	        colIndex: number;
+	        visibleRowIndex: number;
+	    } & Partial<EuiDataGridCellProps>>;
+	    /**
+	     * The currently visible columns are passed to your data grid renderer so that your
+	     * custom grid can automatically adjust to column hiding & reordering.
+	     */
+	    visibleColumns: EuiDataGridColumn[];
+	    /**
+	     * The currently visible rows are passed to your data grid renderer so that your
+	     * custom grid can automatically adjust to sorting and pagination.
+	     *
+	     * You will need  to manually slice your data with `startRow` and `endRow` in order to simulate pagination.
+	     */
+	    visibleRowData: {
+	        startRow: number;
+	        endRow: number;
+	        visibleRowCount: number;
+	    };
+	    /**
+	     * Callback function to set custom props & attributes on the custom grid body's wrapping `div` element.
+	     * It's best to wrap calls to `setCustomGridBodyProps` in a `useEffect` hook
+	     */
+	    setCustomGridBodyProps: (props: EuiDataGridSetCustomGridBodyProps) => void;
+	}
+	export type EuiDataGridSetCustomGridBodyProps = CommonProps & HTMLAttributes<HTMLDivElement> & {
+	    ref?: MutableRefObject<HTMLDivElement> | Ref<HTMLDivElement>;
+	};
 	/**
 	 * Props shared between renderCellValue and renderCellPopover
 	 */
@@ -12012,6 +12081,11 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
 	     * If so, that component is provided here as a passed React function component for your usage.
 	     */
 	    DefaultCellPopover: JSXElementConstructor<EuiDataGridCellPopoverElementProps>;
+	    /**
+	     * Allows passing props to the wrapping cell expansion popover and panel.
+	     * Accepts any props that `EuiPopover` accepts, except for `button` and `closePopover`.
+	     */
+	    setCellPopoverProps: (props: Omit<EuiPopoverProps, 'button' | 'closePopover'>) => void;
 	}
 	export interface EuiDataGridCellProps {
 	    rowIndex: number;
@@ -12031,7 +12105,7 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
 	    getRowHeight?: (rowIndex: number) => number;
 	    style?: React.CSSProperties;
 	    rowHeightsOptions?: EuiDataGridRowHeightsOptions;
-	    rowHeightUtils?: RowHeightUtils;
+	    rowHeightUtils?: RowHeightUtilsType;
 	    rowManager?: EuiDataGridRowManager;
 	    pagination?: EuiDataGridPaginationProps;
 	}
@@ -12073,6 +12147,7 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
 	     */
 	    footerCellProps?: HTMLAttributes<HTMLDivElement>;
 	}
+	export const emptyControlColumns: EuiDataGridControlColumn[];
 	export interface EuiDataGridColumn {
 	    /**
 	     * The unique identifier for this column
@@ -12473,115 +12548,6 @@ declare module '@elastic/eui/src/components/datagrid/utils/focus' {
 	export const useHeaderFocusWorkaround: (headerIsInteractive: boolean) => void;
 	export {};
 
-}
-declare module '@elastic/eui/src/components/datagrid/body/data_grid_cell_actions' {
-	
-	import { EuiDataGridColumn } from '@elastic/eui/src/components/datagrid/data_grid_types';
-	export const EuiDataGridCellActions: ({ onExpandClick, column, rowIndex, colIndex, }: {
-	    onExpandClick: () => void;
-	    column?: EuiDataGridColumn | undefined;
-	    rowIndex: number;
-	    colIndex: number;
-	}) => JSX.Element;
-	export const EuiDataGridCellPopoverActions: ({ rowIndex, colIndex, column, }: {
-	    column?: EuiDataGridColumn | undefined;
-	    colIndex: number;
-	    rowIndex: number;
-	}) => JSX.Element;
-
-}
-declare module '@elastic/eui/src/components/datagrid/body/data_grid_cell_popover' {
-	import React, { ReactNode } from 'react';
-	import { DataGridCellPopoverContextShape, EuiDataGridCellPopoverElementProps } from '@elastic/eui/src/components/datagrid/data_grid_types';
-	export const DataGridCellPopoverContext: React.Context<DataGridCellPopoverContextShape>;
-	export const useCellPopover: () => {
-	    cellPopoverContext: DataGridCellPopoverContextShape;
-	    cellPopover: ReactNode;
-	};
-	export const DefaultCellPopover: ({ schema, cellActions, children, cellContentsElement, }: EuiDataGridCellPopoverElementProps) => JSX.Element;
-	export const JsonPopoverContent: ({ cellText }: {
-	    cellText: string;
-	}) => JSX.Element;
-
-}
-declare module '@elastic/eui/src/utils/prop_types/is' {
-	export const is: <T>(expectedValue: any) => {
-	    (props: T, propName: keyof T, componentName: string): Error | null;
-	    isRequired(props: T, propName: keyof T, componentName: string): Error | null;
-	};
-
-}
-declare module '@elastic/eui/src/utils/prop_types/with_required_prop' {
-	/**
-	 * PropType validation that, if the property is present,
-	 * validates against a proptype and verifies that another property exists
-	 *
-	 * example:
-	 * ExampleComponent.propTypes = {
-	 *   items: PropTypes.array,
-	 *   itemId: withRequiredProp(PropTypes.string, 'items', 'itemId is required to extract the ID from an item')
-	 * }
-	 *
-	 * this validator warns if ExampleComponent is passed an `items` prop but not `itemId`
-	 */
-	export const withRequiredProp: (proptype: any, requiredPropName: string, messageDescription?: string | undefined) => (...args: any[]) => any;
-
-}
-declare module '@elastic/eui/src/utils/prop_types' {
-	export const EuiPropTypes: {
-	    is: <T>(expectedValue: any) => {
-	        (props: T, propName: keyof T, componentName: string): Error | null;
-	        isRequired(props: T, propName: keyof T, componentName: string): Error | null;
-	    };
-	    withRequiredProp: (proptype: any, requiredPropName: string, messageDescription?: string | undefined) => (...args: any[]) => any;
-	};
-
-}
-declare module '@elastic/eui/src/utils/is_jest' {
-	export const IS_JEST_ENVIRONMENT: boolean;
-
-}
-declare module '@elastic/eui/src/utils' {
-	export * from '@elastic/eui/src/utils/prop_types';
-	export * from '@elastic/eui/src/utils/is_jest';
-
-}
-declare module '@elastic/eui/src/components/datagrid/body/data_grid_cell' {
-	import React, { Component, FocusEvent } from 'react';
-	import { EuiDataGridCellProps, EuiDataGridCellState, EuiDataGridSetCellProps } from '@elastic/eui/src/components/datagrid/data_grid_types';
-	export class EuiDataGridCell extends Component<EuiDataGridCellProps, EuiDataGridCellState> {
-	    static activeFocusTimeoutId: number | undefined;
-	    cellRef: React.MutableRefObject<HTMLDivElement | null>;
-	    contentObserver: any;
-	    popoverAnchorRef: React.MutableRefObject<HTMLDivElement | null>;
-	    cellContentsRef: HTMLDivElement | null;
-	    state: EuiDataGridCellState;
-	    unsubscribeCell?: Function;
-	    focusTimeout: number | undefined;
-	    style: null;
-	    static contextType: React.Context<import ("@elastic/eui/src/components/datagrid/data_grid_types").DataGridFocusContextShape>;
-	    getInteractables: () => never[] | NodeListOf<HTMLElement>;
-	    takeFocus: (preventScroll: boolean) => void;
-	    recalculateAutoHeight: () => void;
-	    recalculateLineHeight: () => void;
-	    componentDidMount(): void;
-	    isFocusedCell: () => boolean;
-	    onFocusUpdate: (isFocused: boolean, preventScroll?: boolean) => void;
-	    componentWillUnmount(): void;
-	    componentDidUpdate(prevProps: EuiDataGridCellProps): void;
-	    shouldComponentUpdate(nextProps: EuiDataGridCellProps, nextState: EuiDataGridCellState): boolean;
-	    setCellProps: (cellProps: EuiDataGridSetCellProps) => void;
-	    setCellContentsRef: (ref: HTMLDivElement | null) => void;
-	    onFocus: (e: FocusEvent<HTMLDivElement>) => void;
-	    onBlur: () => void;
-	    preventTabbing: () => void;
-	    enableTabbing: () => void;
-	    isExpandable: () => boolean;
-	    isPopoverOpen: () => boolean;
-	    handleCellPopover: () => void;
-	    render(): JSX.Element;
-	}
-
 }
 declare module '@elastic/eui/src/components/datagrid/body/header/data_grid_header_cell_wrapper' {
 	import { FunctionComponent } from 'react';
@@ -12822,6 +12788,115 @@ declare module '@elastic/eui/src/components/datagrid/body/header' {
 	export { EuiDataGridHeaderRow } from '@elastic/eui/src/components/datagrid/body/header/data_grid_header_row';
 	export { useDataGridHeader } from '@elastic/eui/src/components/datagrid/body/header/use_data_grid_header';
 
+}
+declare module '@elastic/eui/src/components/datagrid/body/data_grid_cell_actions' {
+	
+	import { EuiDataGridColumn } from '@elastic/eui/src/components/datagrid/data_grid_types';
+	export const EuiDataGridCellActions: ({ onExpandClick, column, rowIndex, colIndex, }: {
+	    onExpandClick: () => void;
+	    column?: EuiDataGridColumn | undefined;
+	    rowIndex: number;
+	    colIndex: number;
+	}) => JSX.Element;
+	export const EuiDataGridCellPopoverActions: ({ rowIndex, colIndex, column, }: {
+	    column?: EuiDataGridColumn | undefined;
+	    colIndex: number;
+	    rowIndex: number;
+	}) => JSX.Element;
+
+}
+declare module '@elastic/eui/src/components/datagrid/body/data_grid_cell_popover' {
+	import React, { ReactNode } from 'react';
+	import { DataGridCellPopoverContextShape, EuiDataGridCellPopoverElementProps } from '@elastic/eui/src/components/datagrid/data_grid_types';
+	export const DataGridCellPopoverContext: React.Context<DataGridCellPopoverContextShape>;
+	export const useCellPopover: () => {
+	    cellPopoverContext: DataGridCellPopoverContextShape;
+	    cellPopover: ReactNode;
+	};
+	export const DefaultCellPopover: ({ schema, cellActions, children, cellContentsElement, }: EuiDataGridCellPopoverElementProps) => JSX.Element;
+	export const JsonPopoverContent: ({ cellText }: {
+	    cellText: string;
+	}) => JSX.Element;
+
+}
+declare module '@elastic/eui/src/utils/prop_types/is' {
+	export const is: <T>(expectedValue: any) => {
+	    (props: T, propName: keyof T, componentName: string): Error | null;
+	    isRequired(props: T, propName: keyof T, componentName: string): Error | null;
+	};
+
+}
+declare module '@elastic/eui/src/utils/prop_types/with_required_prop' {
+	/**
+	 * PropType validation that, if the property is present,
+	 * validates against a proptype and verifies that another property exists
+	 *
+	 * example:
+	 * ExampleComponent.propTypes = {
+	 *   items: PropTypes.array,
+	 *   itemId: withRequiredProp(PropTypes.string, 'items', 'itemId is required to extract the ID from an item')
+	 * }
+	 *
+	 * this validator warns if ExampleComponent is passed an `items` prop but not `itemId`
+	 */
+	export const withRequiredProp: (proptype: any, requiredPropName: string, messageDescription?: string | undefined) => (...args: any[]) => any;
+
+}
+declare module '@elastic/eui/src/utils/prop_types' {
+	export const EuiPropTypes: {
+	    is: <T>(expectedValue: any) => {
+	        (props: T, propName: keyof T, componentName: string): Error | null;
+	        isRequired(props: T, propName: keyof T, componentName: string): Error | null;
+	    };
+	    withRequiredProp: (proptype: any, requiredPropName: string, messageDescription?: string | undefined) => (...args: any[]) => any;
+	};
+
+}
+declare module '@elastic/eui/src/utils/is_jest' {
+	export const IS_JEST_ENVIRONMENT: boolean;
+
+}
+declare module '@elastic/eui/src/utils' {
+	export * from '@elastic/eui/src/utils/prop_types';
+	export * from '@elastic/eui/src/utils/is_jest';
+
+}
+declare module '@elastic/eui/src/components/datagrid/body/data_grid_cell' {
+	import React, { Component, FocusEvent } from 'react';
+	import { EuiDataGridCellProps, EuiDataGridCellState, EuiDataGridSetCellProps } from '@elastic/eui/src/components/datagrid/data_grid_types';
+	export class EuiDataGridCell extends Component<EuiDataGridCellProps, EuiDataGridCellState> {
+	    static activeFocusTimeoutId: number | undefined;
+	    cellRef: React.MutableRefObject<HTMLDivElement | null>;
+	    contentObserver: any;
+	    popoverAnchorRef: React.MutableRefObject<HTMLDivElement | null>;
+	    cellContentsRef: HTMLDivElement | null;
+	    state: EuiDataGridCellState;
+	    unsubscribeCell?: Function;
+	    focusTimeout: number | undefined;
+	    style: null;
+	    static contextType: React.Context<import ("@elastic/eui/src/components/datagrid/data_grid_types").DataGridFocusContextShape>;
+	    getInteractables: () => never[] | NodeListOf<HTMLElement>;
+	    takeFocus: (preventScroll: boolean) => void;
+	    recalculateAutoHeight: () => void;
+	    recalculateLineHeight: () => void;
+	    componentDidMount(): void;
+	    isFocusedCell: () => boolean;
+	    onFocusUpdate: (isFocused: boolean, preventScroll?: boolean) => void;
+	    componentWillUnmount(): void;
+	    componentDidUpdate(prevProps: EuiDataGridCellProps): void;
+	    shouldComponentUpdate(nextProps: EuiDataGridCellProps, nextState: EuiDataGridCellState): boolean;
+	    setCellProps: (cellProps: EuiDataGridSetCellProps) => void;
+	    setCellContentsRef: (ref: HTMLDivElement | null) => void;
+	    onFocus: (e: FocusEvent<HTMLDivElement>) => void;
+	    onBlur: () => void;
+	    preventTabbing: () => void;
+	    enableTabbing: () => void;
+	    isExpandable: () => boolean;
+	    isPopoverOpen: () => boolean;
+	    handleCellPopover: () => void;
+	    render(): JSX.Element;
+	}
+
 }
 declare module '@elastic/eui/src/components/datagrid/body/footer/data_grid_footer_row' {
 	import React from 'react'; const EuiDataGridFooterRow: React.MemoExoticComponent<React.ForwardRefExoticComponent<import ("@elastic/eui/src/components").CommonProps & React.HTMLAttributes<HTMLDivElement> & {
@@ -12859,6 +12934,18 @@ declare module '@elastic/eui/src/components/datagrid/body/footer' {
 	export { EuiDataGridFooterRow } from '@elastic/eui/src/components/datagrid/body/footer/data_grid_footer_row';
 	export { useDataGridFooter } from '@elastic/eui/src/components/datagrid/body/footer/use_data_grid_footer';
 
+}
+declare module '@elastic/eui/src/components/datagrid/body/data_grid_cell_wrapper' {
+	import { FunctionComponent } from 'react';
+	import { EuiDataGridCellProps, EuiDataGridBodyProps, EuiDataGridHeaderRowProps } from '@elastic/eui/src/components/datagrid/data_grid_types'; type CellProps = Pick<EuiDataGridCellProps, 'colIndex' | 'visibleRowIndex' | 'style' | 'renderCellValue' | 'renderCellPopover' | 'interactiveCellId' | 'rowHeightsOptions' | 'rowHeightUtils' | 'rowManager' | 'setRowHeight'> & Pick<EuiDataGridBodyProps, 'schema' | 'schemaDetectors' | 'pagination' | 'columns' | 'leadingControlColumns' | 'trailingControlColumns' | 'visibleColCount'> & Pick<EuiDataGridHeaderRowProps, 'columnWidths' | 'defaultColumnWidth'> & Partial<EuiDataGridCellProps>;
+	/**
+	 * A DRY wrapper used by both custom and virtualized grid cells.
+	 * It grabs context,  determines the type of cell being rendered
+	 * (e.g. control vs data cell), & sets shared props between all cells
+	 */
+	export const Cell: FunctionComponent<CellProps>;
+	export {};
+
 }
 declare module '@elastic/eui/src/components/datagrid/body/data_grid_row_manager' {
 	import { RefObject } from 'react';
@@ -12872,7 +12959,7 @@ declare module '@elastic/eui/src/components/datagrid/body/data_grid_row_manager'
 declare module '@elastic/eui/src/components/datagrid/utils/grid_height_width' {
 	import { MutableRefObject } from 'react';
 	import { EuiDataGridRowHeightsOptions } from '@elastic/eui/src/components/datagrid/data_grid_types';
-	import { RowHeightUtils } from '@elastic/eui/src/components/datagrid/utils/row_heights';
+	import { RowHeightUtilsType } from '@elastic/eui/src/components/datagrid/utils/row_heights';
 	export const useFinalGridDimensions: ({ unconstrainedHeight, unconstrainedWidth, wrapperDimensions, wrapperRef, isFullScreen, rowCount, }: {
 	    unconstrainedHeight: number;
 	    unconstrainedWidth: number;
@@ -12891,7 +12978,7 @@ declare module '@elastic/eui/src/components/datagrid/utils/grid_height_width' {
 	 * Computes the unconstrained (total possible) height of a grid
 	 */
 	export const useUnconstrainedHeight: ({ rowHeightUtils, startRow, endRow, rowHeightsOptions, defaultRowHeight, headerRowHeight, footerRowHeight, scrollBarHeight, innerGridRef, }: {
-	    rowHeightUtils: RowHeightUtils;
+	    rowHeightUtils: RowHeightUtilsType;
 	    startRow: number;
 	    endRow: number;
 	    rowHeightsOptions?: EuiDataGridRowHeightsOptions | undefined;
@@ -12977,12 +13064,24 @@ declare module '@elastic/eui/src/components/datagrid/utils/scrolling' {
 	export {};
 
 }
-declare module '@elastic/eui/src/components/datagrid/body/data_grid_body' {
+declare module '@elastic/eui/src/components/datagrid/body/data_grid_body_virtualized' {
 	import React, { FunctionComponent } from 'react';
 	import { GridChildComponentProps } from 'react-window';
 	import { EuiDataGridBodyProps, DataGridWrapperRowsContentsShape } from '@elastic/eui/src/components/datagrid/data_grid_types';
-	export const Cell: FunctionComponent<GridChildComponentProps>;
+	export const _Cell: FunctionComponent<GridChildComponentProps>;
 	export const DataGridWrapperRowsContext: React.Context<DataGridWrapperRowsContentsShape>;
+	export const EuiDataGridBodyVirtualized: FunctionComponent<EuiDataGridBodyProps>;
+
+}
+declare module '@elastic/eui/src/components/datagrid/body/data_grid_body_custom' {
+	import { FunctionComponent } from 'react';
+	import { EuiDataGridBodyProps } from '@elastic/eui/src/components/datagrid/data_grid_types';
+	export const EuiDataGridBodyCustomRender: FunctionComponent<EuiDataGridBodyProps>;
+
+}
+declare module '@elastic/eui/src/components/datagrid/body/data_grid_body' {
+	import { FunctionComponent } from 'react';
+	import { EuiDataGridBodyProps } from '@elastic/eui/src/components/datagrid/data_grid_types';
 	export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps>;
 
 }
@@ -16598,10 +16697,9 @@ declare module '@elastic/eui/src/components/page/page_body' {
 
 }
 declare module '@elastic/eui/src/components/page/page_content/page_content' {
-	import { FunctionComponent } from 'react';
+	import { FunctionComponent, HTMLAttributes } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { _EuiPanelProps, _EuiPanelDivlike } from '@elastic/eui/src/components/panel/panel';
-	import { HTMLAttributes } from 'enzyme';
 	export type EuiPageContentVerticalPositions = 'center';
 	export type EuiPageContentHorizontalPositions = 'center';
 	export type EuiPageContentProps = CommonProps & _EuiPanelProps & Omit<_EuiPanelDivlike, 'onClick' | 'role'> & {
@@ -16611,7 +16709,7 @@ declare module '@elastic/eui/src/components/page/page_content/page_content' {
 	     * There should only be one EuiPageContent per page and should contain the main contents.
 	     * If this is untrue, set role = `null`, or change it to match your needed aria role
 	     */
-	    role?: HTMLAttributes['role'] | null;
+	    role?: HTMLAttributes<HTMLElement>['role'] | null;
 	};
 	/**
 	 * @deprecated Use EuiPageSection instead
@@ -18332,7 +18430,7 @@ declare module '@elastic/eui/src/components/selectable/selectable_list' {
 
 }
 declare module '@elastic/eui/src/components/selectable/selectable' {
-	import React, { Component, HTMLAttributes, ReactNode, ReactElement, KeyboardEvent, MouseEvent } from 'react';
+	import React, { Component, HTMLAttributes, ReactNode, ReactElement, KeyboardEvent, MouseEvent, FocusEvent } from 'react';
 	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
 	import { EuiSelectableSearch } from '@elastic/eui/src/components/selectable/selectable_search';
 	import { EuiSelectableMessage } from '@elastic/eui/src/components/selectable/selectable_message';
@@ -18435,6 +18533,12 @@ declare module '@elastic/eui/src/components/selectable/selectable' {
 	     * Default: false
 	     */
 	    isPreFiltered?: boolean;
+	    /**
+	     * Optional screen reader instructions to announce upon focus/interaction. This text is read out
+	     * after the `EuiSelectable` label and a brief pause, but before the default keyboard instructions for
+	     * interacting with a selectable are read out.
+	     */
+	    selectableScreenReaderText?: string;
 	};
 	export interface EuiSelectableState<T> {
 	    activeOptionIndex?: number;
@@ -18459,8 +18563,9 @@ declare module '@elastic/eui/src/components/selectable/selectable' {
 	    constructor(props: EuiSelectableProps<T>);
 	    static getDerivedStateFromProps<T>(nextProps: EuiSelectableProps<T>, prevState: EuiSelectableState<T>): Partial<EuiSelectableState<T>>;
 	    componentDidUpdate<T>(prevProps: EuiSelectableProps<T>, prevState: EuiSelectableState<T>): void;
+	    isFocusOnSearchOrListBox: (target: EventTarget | null) => boolean | undefined;
 	    onMouseDown: () => void;
-	    onFocus: () => void;
+	    onFocus: (event?: React.FocusEvent<Element, Element> | undefined) => void;
 	    onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
 	    incrementActiveOptionIndex: (amount: number) => void;
 	    onSearchChange: (searchValue: string, visibleOptions: Array<EuiSelectableOption<T>>) => void;
@@ -26331,8 +26436,10 @@ declare module '@elastic/eui' {
 "euiFilePicker.removeSelected": any;
 "euiFormControlLayoutClearButton.label": any;
 "euiForm.addressFormErrors": any;
-"euiSuperSelectControl.selectAnOption": any;
+"euiDualRange.sliderScreenReaderInstructions": any;
+"euiRange.sliderScreenReaderInstructions": any;
 "euiSuperSelect.screenReaderAnnouncement": any;
+"euiSuperSelect.ariaLabel": any;
 "euiHeaderLinks.openNavigationMenu": any;
 "euiHeaderLinks.appNavigation": any;
 "euiImageButton.openFullScreen": any;
@@ -26406,9 +26513,9 @@ declare module '@elastic/eui' {
 "euiSelectable.loadingOptions": any;
 "euiSelectable.noMatchingOptions": any;
 "euiSelectable.noAvailableOptions": any;
+"euiSelectable.screenReaderInstructions": any;
 "euiSelectable.placeholderName": any;
 "euiSelectable.searchResults": any;
-"euiSelectable.screenReaderInstructions": any;
 "euiSkeletonLoading.loadingAriaText": any;
 "euiSkeletonLoading.loadedAriaText": any;
 "euiStat.loadingText": any;