@elastic/eui 97.0.0-backport.0 → 97.1.0

package/eui.d.ts

@@ -14470,7 +14470,7 @@ 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, Ref, Component, ComponentClass } from 'react';
+	import { ComponentType, JSXElementConstructor, ReactNode, HTMLAttributes, CSSProperties, ReactElement, AriaAttributes, MutableRefObject, Ref, Component, ComponentClass, KeyboardEventHandler } 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';
@@ -14583,27 +14583,30 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
 	    setVisibleColumns: (columnId: string[]) => void;
 	    switchColumnPos: (colFromId: string, colToId: string) => void;
 	    gridStyles: EuiDataGridStyle;
+	    canDragAndDropColumns?: boolean;
 	}
 	export type EuiDataGridHeaderRowProps = CommonProps & HTMLAttributes<HTMLDivElement> & EuiDataGridHeaderRowPropsSpecificProps;
-	export interface EuiDataGridHeaderCellProps extends Omit<EuiDataGridHeaderRowPropsSpecificProps, 'leadingControlColumns' | 'gridStyles'> {
-	    column: EuiDataGridColumn;
+	export interface EuiDataGridHeaderCellProps extends Omit<EuiDataGridHeaderRowPropsSpecificProps, 'leadingControlColumns' | 'trailingControlColumns' | 'visibleColCount'> {
 	    index: number;
+	    column: EuiDataGridColumn;
+	    isLastColumn: boolean;
 	}
 	export interface EuiDataGridControlHeaderCellProps {
 	    index: number;
-	    visibleColCount: number;
+	    isLastColumn: boolean;
 	    controlColumn: EuiDataGridControlColumn;
 	}
 	export interface EuiDataGridHeaderCellWrapperProps {
 	    children: ReactNode | ((renderFocusTrap: boolean) => ReactNode);
 	    id: string;
 	    index: number;
-	    visibleColCount: number;
+	    isLastColumn: boolean;
 	    width?: number | null;
 	    className?: string;
 	    'aria-label'?: AriaAttributes['aria-label'];
-	    hasActionsPopover?: boolean;
-	    openActionsPopover?: () => void;
+	    hasColumnActions?: boolean;
+	    isDragging?: boolean;
+	    onKeyDown?: KeyboardEventHandler;
 	}
 	export type EuiDataGridFooterRowProps = CommonProps & HTMLAttributes<HTMLDivElement> & {
 	    rowIndex: number;
@@ -14633,7 +14636,7 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
 	export type EuiDataGridFocusedCell = [number, number];
 	export interface DataGridFocusContextShape {
 	    focusedCell?: EuiDataGridFocusedCell;
-	    setFocusedCell: (cell: EuiDataGridFocusedCell) => void;
+	    setFocusedCell: (cell: EuiDataGridFocusedCell, forceUpdate?: boolean) => void;
 	    setIsFocusedCellInView: (isFocusedCellInView: boolean) => void;
 	    onFocusUpdate: (cell: EuiDataGridFocusedCell, updateFocus: Function) => () => void;
 	    focusFirstVisibleInteractiveCell: () => void;
@@ -14832,6 +14835,7 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
 	    columnId: string;
 	    columnWidth: number;
 	    setColumnWidth: (columnId: string, width: number) => void;
+	    isLastColumn: boolean;
 	}
 	export interface EuiDataGridColumnResizerState {
 	    initialX: number;
@@ -14878,6 +14882,7 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
 	    gridItemsRendered: MutableRefObject<GridOnItemsRenderedProps | null>;
 	    wrapperRef: MutableRefObject<HTMLDivElement | null>;
 	    className?: string;
+	    canDragAndDropColumns?: boolean;
 	}
 	export interface EuiDataGridCustomBodyProps {
 	    /**
@@ -15191,6 +15196,8 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
 	     * A callback for when a column's visibility or order is modified by the user.
 	     */
 	    setVisibleColumns: (visibleColumns: string[]) => void;
+	    /** Enables reordering grid columns on drag and drop via the headers cells */
+	    canDragAndDropColumns?: boolean;
 	}
 	export interface EuiDataGridColumnWidths {
 	    [key: string]: number;
@@ -15455,6 +15462,165 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
 	}
 	export {};
 
+}
+declare module '@elastic/eui/src/components/drag_and_drop/drag_drop_context' {
+	import React, { FunctionComponent } from 'react';
+	import { DragDropContextProps } from '@hello-pangea/dnd'; type EuiDraggingType = string | null;
+	export interface EuiDragDropContextProps {
+	    isDraggingType: EuiDraggingType;
+	}
+	export const EuiDragDropContextContext: React.Context<EuiDragDropContextProps>;
+	export const EuiDragDropContext: FunctionComponent<DragDropContextProps>;
+	export {};
+
+}
+declare module '@elastic/eui/src/components/drag_and_drop/droppable.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiDroppableStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiDroppable: import("@emotion/utils").SerializedStyles;
+	    isDragging: import("@emotion/utils").SerializedStyles;
+	    isDraggingOver: import("@emotion/utils").SerializedStyles;
+	    grow: import("@emotion/utils").SerializedStyles;
+	    noGrow: import("@emotion/utils").SerializedStyles;
+	    spacing: {
+	        none: null;
+	        s: import("@emotion/utils").SerializedStyles;
+	        m: import("@emotion/utils").SerializedStyles;
+	        l: import("@emotion/utils").SerializedStyles;
+	    };
+	};
+	export const sharedSpacingPadding: ({ euiTheme }: UseEuiTheme) => {
+	    none: null;
+	    s: import("@emotion/utils").SerializedStyles;
+	    m: import("@emotion/utils").SerializedStyles;
+	    l: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/drag_and_drop/droppable' {
+	import React, { CSSProperties, FunctionComponent, ReactElement } from 'react';
+	import { DroppableProps } from '@hello-pangea/dnd';
+	import { CommonProps } from '@elastic/eui/src/components/common';
+	export const SPACINGS: readonly ["none", "s", "m", "l"];
+	export interface EuiDroppableProps extends CommonProps, Omit<DroppableProps, 'children'> {
+	    /**
+	     * ReactNode to render as this component's content
+	     */
+	    children: ReactElement | ReactElement[] | DroppableProps['children'];
+	    className?: string;
+	    /**
+	     * Makes its items immutable. Dragging creates cloned items that can be dropped elsewhere.
+	     */
+	    cloneDraggables?: boolean;
+	    style?: CSSProperties;
+	    /**
+	     * Adds padding to the droppable area
+	     */
+	    spacing?: (typeof SPACINGS)[number];
+	    /**
+	     * Adds an EuiPanel style to the droppable area
+	     */
+	    withPanel?: boolean;
+	    /**
+	     * Allow the panel to flex-grow?
+	     */
+	    grow?: boolean;
+	}
+	export const EuiDroppableContext: React.Context<{
+	    cloneItems: boolean;
+	}>;
+	export const EuiDroppable: FunctionComponent<EuiDroppableProps>;
+
+}
+declare module '@elastic/eui/src/components/drag_and_drop/draggable.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiDraggableStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiDraggable: import("@emotion/utils").SerializedStyles;
+	    isDragging: import("@emotion/utils").SerializedStyles;
+	    hasClone: import("@emotion/utils").SerializedStyles;
+	    isRemovable: import("@emotion/utils").SerializedStyles;
+	    spacing: {
+	        none: null;
+	        s: import("@emotion/utils").SerializedStyles;
+	        m: import("@emotion/utils").SerializedStyles;
+	        l: import("@emotion/utils").SerializedStyles;
+	    };
+	};
+	export const euiDraggableItemStyles: {
+	    euiDraggable__item: import("@emotion/utils").SerializedStyles;
+	    disabled: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/drag_and_drop/draggable' {
+	import { CSSProperties, FunctionComponent, ReactElement } from 'react';
+	import { DraggableProps } from '@hello-pangea/dnd';
+	import { CommonProps } from '@elastic/eui/src/components/common';
+	import { SPACINGS } from '@elastic/eui/src/components/drag_and_drop/droppable';
+	export interface EuiDraggableProps extends CommonProps, Omit<DraggableProps, 'children'> {
+	    /**
+	     * ReactNode to render as this component's content
+	     */
+	    children: ReactElement | DraggableProps['children'];
+	    className?: string;
+	    /**
+	     * Whether the `children` will provide and set up its own drag handle.
+	     * The `custom` value additionally removes the `role` from the draggable container.
+	     * Use this if the `children` element is focusable and should keep its
+	     * semantic role for accessibility purposes.
+	     */
+	    customDragHandle?: boolean | 'custom';
+	    /**
+	     * Whether the container has interactive children and should have `role="group"` instead of `"button"`.
+	     * Setting this flag ensures your drag & drop container is keyboard and screen reader accessible.
+	     */
+	    hasInteractiveChildren?: boolean;
+	    /**
+	     * Whether the item is currently in a position to be removed
+	     */
+	    isRemovable?: boolean;
+	    /**
+	     * Whether the currently dragged item is cloned into a portal in the body. This settings will
+	     * ensure that drag & drop still works as expected within stacking contexts (e.g. within `EuiFlyout`,
+	     * `EuiModal` and `EuiPopover`).
+	     *
+	     * Make sure to apply styles directly to the Draggable content as relative styling from an outside
+	     * scope might not be applied when the content is placed in a portal as the DOM structure changes.
+	     */
+	    usePortal?: boolean;
+	    /**
+	     * Adds padding to the draggable item
+	     */
+	    spacing?: (typeof SPACINGS)[number];
+	    style?: CSSProperties;
+	}
+	export const EuiDraggable: FunctionComponent<EuiDraggableProps>;
+
+}
+declare module '@elastic/eui/src/components/drag_and_drop/services' {
+	import { DraggableLocation } from '@hello-pangea/dnd';
+	interface DropResult {
+	    [droppableId: string]: any[];
+	}
+	export const euiDragDropReorder: <T extends any[]>(list: T, startIndex: number, endIndex: number) => T;
+	export const euiDragDropMove: (sourceList: any[], destinationList: any[], dropResultSource: DraggableLocation, dropResultDestination: DraggableLocation) => DropResult;
+	export const euiDragDropCopy: (sourceList: any[], destinationList: any[], dropResultSource: DraggableLocation, dropResultDestination: DraggableLocation, idModification: {
+	    property: string | number;
+	    modifier: () => string | number;
+	}) => DropResult;
+	export {};
+
+}
+declare module '@elastic/eui/src/components/drag_and_drop' {
+	export type { EuiDragDropContextProps } from '@elastic/eui/src/components/drag_and_drop/drag_drop_context';
+	export { EuiDragDropContext } from '@elastic/eui/src/components/drag_and_drop/drag_drop_context';
+	export type { EuiDraggableProps } from '@elastic/eui/src/components/drag_and_drop/draggable';
+	export { EuiDraggable } from '@elastic/eui/src/components/drag_and_drop/draggable';
+	export type { EuiDroppableProps } from '@elastic/eui/src/components/drag_and_drop/droppable';
+	export { EuiDroppable } from '@elastic/eui/src/components/drag_and_drop/droppable';
+	export { euiDragDropCopy, euiDragDropMove, euiDragDropReorder, } from '@elastic/eui/src/components/drag_and_drop/services';
+	export type { DraggableLocation, DraggableProps, DraggableProvidedDragHandleProps, DragDropContextProps, DragStart, DroppableProps, DropResult, ResponderProvided, } from '@hello-pangea/dnd';
+
 }
 declare module '@elastic/eui/src/components/datagrid/utils/focus' {
 	import { HTMLAttributes, KeyboardEvent } from 'react';
@@ -15489,6 +15655,108 @@ declare module '@elastic/eui/src/components/datagrid/utils/focus' {
 	export const getParentCellContent: (_element: Node | HTMLElement) => HTMLElement | null;
 	export {};
 
+}
+declare module '@elastic/eui/src/components/datagrid/data_grid.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiDataGridVariables: (euiThemeContext: UseEuiTheme) => {
+	    cellPadding: {
+	        s: string;
+	        m: string;
+	        l: string;
+	    };
+	    lineHeight: {
+	        s: import("csstype").Property.LineHeight<string | number> | undefined;
+	        m: import("csstype").Property.LineHeight<string | number> | undefined;
+	    };
+	    fontSize: {
+	        s: import("csstype").Property.FontSize<string | number> | undefined;
+	        m: import("csstype").Property.FontSize<string | number> | undefined;
+	    };
+	    levels: {
+	        cellPopover: number;
+	        readonly stickyHeader: number;
+	    };
+	};
+	export const euiDataGridStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiDataGrid: import("@emotion/utils").SerializedStyles;
+	    cellPadding: {
+	        cellPadding: (size: 's' | 'm' | 'l') => import("@emotion/utils").SerializedStyles;
+	        readonly s: import("@emotion/utils").SerializedStyles;
+	        readonly m: import("@emotion/utils").SerializedStyles;
+	        readonly l: import("@emotion/utils").SerializedStyles;
+	    };
+	    fontSize: {
+	        fontSize: (size: 's' | 'm') => import("@emotion/utils").SerializedStyles;
+	        readonly s: import("@emotion/utils").SerializedStyles;
+	        readonly m: import("@emotion/utils").SerializedStyles;
+	        readonly l: import("@emotion/utils").SerializedStyles;
+	    };
+	    borders: {
+	        none: null;
+	        horizontal: import("@emotion/utils").SerializedStyles;
+	        all: import("@emotion/utils").SerializedStyles;
+	    };
+	    euiDataGrid__content: import("@emotion/utils").SerializedStyles;
+	    euiDataGrid__focusWrap: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/datagrid/body/header/draggable_columns.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiDataGridDraggableHeaderStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiDataGridHeaderDroppable: import("@emotion/utils").SerializedStyles;
+	    euiDataGridHeaderCellDraggableWrapper: import("@emotion/utils").SerializedStyles;
+	    euiDataGridHeaderCellDraggable: import("@emotion/utils").SerializedStyles;
+	    isKeyboardDragging: import("@emotion/utils").SerializedStyles;
+	    underline: import("@emotion/utils").SerializedStyles;
+	    shade: import("@emotion/utils").SerializedStyles;
+	    noLeadingBorder: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/datagrid/body/header/draggable_columns' {
+	import { CSSProperties, FunctionComponent, ComponentProps, ReactElement, ReactNode } from 'react';
+	import { DraggableProvidedDragHandleProps } from '@hello-pangea/dnd';
+	import { EuiDroppableProps } from '@elastic/eui/src/components/drag_and_drop';
+	import { EuiDataGridHeaderRowProps, EuiDataGridStyle } from '@elastic/eui/src/components/datagrid/data_grid_types';
+	/**
+	 * Parent context + EuiDroppable wrapper
+	 */
+	export const DroppableColumns: FunctionComponent<Pick<EuiDataGridHeaderRowProps, 'columns' | 'switchColumnPos'> & {
+	    indexOffset: number;
+	    children: EuiDroppableProps['children'];
+	}>;
+	/**
+	 * Individual EuiDraggable columns
+	 */
+	export const DraggableColumn: FunctionComponent<{
+	    id: string;
+	    index: number;
+	    gridStyles: EuiDataGridStyle;
+	    columnResizer?: ReactNode;
+	    actionsPopoverToggle?: HTMLButtonElement | null;
+	    children: (dragProps?: Partial<DraggableProvidedDragHandleProps> & {
+	        'data-column-moving'?: boolean;
+	    }) => ReactElement;
+	}>; type CanDragAndDropColumns = {
+	    canDragAndDropColumns: boolean;
+	};
+	export const ConditionalDroppableColumns: FunctionComponent<ComponentProps<typeof DroppableColumns> & CanDragAndDropColumns>;
+	export const ConditionalDraggableColumn: FunctionComponent<ComponentProps<typeof DraggableColumn> & CanDragAndDropColumns>;
+	/**
+	 * Creates an invisible overlay that prevents hover interactions/transitions
+	 * on other elements that the dragged element is dragged over, and also maintains
+	 * the intended drag cursor over any location.
+	 *
+	 * TODO: If this is useful elsewhere, consider moving it to `src/services`
+	 */
+	export const DragOverlay: FunctionComponent<{
+	    isDragging?: boolean;
+	    cursor?: CSSProperties['cursor'];
+	    zIndex?: CSSProperties['zIndex'];
+	}>;
+	export {};
+
 }
 declare module '@elastic/eui/src/utils/prop_types/is' {
 	export const is: <T>(expectedValue: any) => {
@@ -15573,218 +15841,63 @@ declare module '@elastic/eui/src/components/datagrid/body/cell/data_grid_cell.st
 	    focusColor: string;
 	    focusStyles: string;
 	    hoverColor: string;
-	    hoverStyles: string;
-	};
-	export const euiDataGridCellOutlineSelectors: (parentSelector?: string) => {
-	    outline: {
-	        show: string;
-	        hover: string;
-	        focusTrapped: string;
-	    };
-	    actions: {
-	        hoverZone: string;
-	        hoverColor: string;
-	        showAnimation: string;
-	        hoverAnimation: string;
-	    };
-	    header: {
-	        focus: string;
-	        focusTrapped: string;
-	        hideActions: string;
-	    };
-	};
-	export const euiDataGridRowCellStyles: (euiThemeContext: UseEuiTheme) => {
-	    euiDataGridRowCell: import("@emotion/utils").SerializedStyles;
-	    content: {
-	        euiDataGridRowCell__content: import("@emotion/utils").SerializedStyles;
-	        autoHeight: import("@emotion/utils").SerializedStyles;
-	        defaultHeight: import("@emotion/utils").SerializedStyles;
-	        controlColumn: import("@emotion/utils").SerializedStyles;
-	    };
-	};
-
-}
-declare module '@elastic/eui/src/components/datagrid/body/header/data_grid_header_cell_wrapper.styles' {
-	import { UseEuiTheme } from '@elastic/eui/src/services';
-	/**
-	 * Styles that apply to both control and non-control columns
-	 */
-	export const euiDataGridHeaderCellWrapperStyles: (euiThemeContext: UseEuiTheme) => {
-	    euiDataGridHeaderCell: import("@emotion/utils").SerializedStyles;
-	};
-
-}
-declare module '@elastic/eui/src/components/datagrid/body/header/data_grid_header_cell_wrapper' {
-	import { FunctionComponent } from 'react';
-	import { EuiDataGridHeaderCellWrapperProps } from '@elastic/eui/src/components/datagrid/data_grid_types';
-	/**
-	 * This is a wrapper that handles repeated concerns between control &
-	 * standard header cells. Most of its shared logic is around focus state/UX,
-	 * but it also DRY's out certain class/data-test-subj/style attributes
-	 */
-	export const EuiDataGridHeaderCellWrapper: FunctionComponent<EuiDataGridHeaderCellWrapperProps>;
-
-}
-declare module '@elastic/eui/src/components/datagrid/body/header/data_grid_control_header_cell' {
-	import { FunctionComponent } from 'react';
-	import { EuiDataGridControlHeaderCellProps } from '@elastic/eui/src/components/datagrid/data_grid_types';
-	export const EuiDataGridControlHeaderCell: FunctionComponent<EuiDataGridControlHeaderCellProps>;
-
-}
-declare module '@elastic/eui/src/components/drag_and_drop/drag_drop_context' {
-	import React, { FunctionComponent } from 'react';
-	import { DragDropContextProps } from '@hello-pangea/dnd'; type EuiDraggingType = string | null;
-	export interface EuiDragDropContextProps {
-	    isDraggingType: EuiDraggingType;
-	}
-	export const EuiDragDropContextContext: React.Context<EuiDragDropContextProps>;
-	export const EuiDragDropContext: FunctionComponent<DragDropContextProps>;
-	export {};
-
-}
-declare module '@elastic/eui/src/components/drag_and_drop/droppable.styles' {
-	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiDroppableStyles: (euiThemeContext: UseEuiTheme) => {
-	    euiDroppable: import("@emotion/utils").SerializedStyles;
-	    isDragging: import("@emotion/utils").SerializedStyles;
-	    isDraggingOver: import("@emotion/utils").SerializedStyles;
-	    grow: import("@emotion/utils").SerializedStyles;
-	    noGrow: import("@emotion/utils").SerializedStyles;
-	    spacing: {
-	        none: null;
-	        s: import("@emotion/utils").SerializedStyles;
-	        m: import("@emotion/utils").SerializedStyles;
-	        l: import("@emotion/utils").SerializedStyles;
-	    };
-	};
-	export const sharedSpacingPadding: ({ euiTheme }: UseEuiTheme) => {
-	    none: null;
-	    s: import("@emotion/utils").SerializedStyles;
-	    m: import("@emotion/utils").SerializedStyles;
-	    l: import("@emotion/utils").SerializedStyles;
-	};
-
-}
-declare module '@elastic/eui/src/components/drag_and_drop/droppable' {
-	import React, { CSSProperties, FunctionComponent, ReactElement } from 'react';
-	import { DroppableProps } from '@hello-pangea/dnd';
-	import { CommonProps } from '@elastic/eui/src/components/common';
-	export const SPACINGS: readonly ["none", "s", "m", "l"];
-	export interface EuiDroppableProps extends CommonProps, Omit<DroppableProps, 'children'> {
-	    /**
-	     * ReactNode to render as this component's content
-	     */
-	    children: ReactElement | ReactElement[] | DroppableProps['children'];
-	    className?: string;
-	    /**
-	     * Makes its items immutable. Dragging creates cloned items that can be dropped elsewhere.
-	     */
-	    cloneDraggables?: boolean;
-	    style?: CSSProperties;
-	    /**
-	     * Adds padding to the droppable area
-	     */
-	    spacing?: (typeof SPACINGS)[number];
-	    /**
-	     * Adds an EuiPanel style to the droppable area
-	     */
-	    withPanel?: boolean;
-	    /**
-	     * Allow the panel to flex-grow?
-	     */
-	    grow?: boolean;
-	}
-	export const EuiDroppableContext: React.Context<{
-	    cloneItems: boolean;
-	}>;
-	export const EuiDroppable: FunctionComponent<EuiDroppableProps>;
-
-}
-declare module '@elastic/eui/src/components/drag_and_drop/draggable.styles' {
-	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiDraggableStyles: (euiThemeContext: UseEuiTheme) => {
-	    euiDraggable: import("@emotion/utils").SerializedStyles;
-	    isDragging: import("@emotion/utils").SerializedStyles;
-	    hasClone: import("@emotion/utils").SerializedStyles;
-	    isRemovable: import("@emotion/utils").SerializedStyles;
-	    spacing: {
-	        none: null;
-	        s: import("@emotion/utils").SerializedStyles;
-	        m: import("@emotion/utils").SerializedStyles;
-	        l: import("@emotion/utils").SerializedStyles;
+	    hoverStyles: string;
+	};
+	export const euiDataGridCellOutlineSelectors: (parentSelector?: string) => {
+	    outline: {
+	        show: string;
+	        hover: string;
+	        focusTrapped: string;
+	    };
+	    actions: {
+	        hoverZone: string;
+	        hoverColor: string;
+	        showAnimation: string;
+	        hoverAnimation: string;
+	    };
+	    header: {
+	        focus: string;
+	        focusTrapped: string;
+	        showActions: string;
+	        hideActions: string;
 	    };
 	};
-	export const euiDraggableItemStyles: {
-	    euiDraggable__item: import("@emotion/utils").SerializedStyles;
-	    disabled: import("@emotion/utils").SerializedStyles;
+	export const euiDataGridRowCellStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiDataGridRowCell: import("@emotion/utils").SerializedStyles;
+	    content: {
+	        euiDataGridRowCell__content: import("@emotion/utils").SerializedStyles;
+	        autoHeight: import("@emotion/utils").SerializedStyles;
+	        defaultHeight: import("@emotion/utils").SerializedStyles;
+	        controlColumn: import("@emotion/utils").SerializedStyles;
+	    };
 	};
 
 }
-declare module '@elastic/eui/src/components/drag_and_drop/draggable' {
-	import { CSSProperties, FunctionComponent, ReactElement } from 'react';
-	import { DraggableProps } from '@hello-pangea/dnd';
-	import { CommonProps } from '@elastic/eui/src/components/common';
-	import { SPACINGS } from '@elastic/eui/src/components/drag_and_drop/droppable';
-	export interface EuiDraggableProps extends CommonProps, Omit<DraggableProps, 'children'> {
-	    /**
-	     * ReactNode to render as this component's content
-	     */
-	    children: ReactElement | DraggableProps['children'];
-	    className?: string;
-	    /**
-	     * Whether the `children` will provide and set up its own drag handle
-	     */
-	    customDragHandle?: boolean;
-	    /**
-	     * Whether the container has interactive children and should have `role="group"` instead of `"button"`.
-	     * Setting this flag ensures your drag & drop container is keyboard and screen reader accessible.
-	     */
-	    hasInteractiveChildren?: boolean;
-	    /**
-	     * Whether the item is currently in a position to be removed
-	     */
-	    isRemovable?: boolean;
-	    /**
-	     * Whether the currently dragged item is cloned into a portal in the body. This settings will
-	     * ensure that drag & drop still works as expected within stacking contexts (e.g. within `EuiFlyout`,
-	     * `EuiModal` and `EuiPopover`).
-	     *
-	     * Make sure to apply styles directly to the Draggable content as relative styling from an outside
-	     * scope might not be applied when the content is placed in a portal as the DOM structure changes.
-	     */
-	    usePortal?: boolean;
-	    /**
-	     * Adds padding to the draggable item
-	     */
-	    spacing?: (typeof SPACINGS)[number];
-	    style?: CSSProperties;
-	}
-	export const EuiDraggable: FunctionComponent<EuiDraggableProps>;
+declare module '@elastic/eui/src/components/datagrid/body/header/data_grid_header_cell_wrapper.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	/**
+	 * Styles that apply to both control and non-control columns
+	 */
+	export const euiDataGridHeaderCellWrapperStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiDataGridHeaderCell: import("@emotion/utils").SerializedStyles;
+	};
 
 }
-declare module '@elastic/eui/src/components/drag_and_drop/services' {
-	import { DraggableLocation } from '@hello-pangea/dnd';
-	interface DropResult {
-	    [droppableId: string]: any[];
-	}
-	export const euiDragDropReorder: <T extends any[]>(list: T, startIndex: number, endIndex: number) => T;
-	export const euiDragDropMove: (sourceList: any[], destinationList: any[], dropResultSource: DraggableLocation, dropResultDestination: DraggableLocation) => DropResult;
-	export const euiDragDropCopy: (sourceList: any[], destinationList: any[], dropResultSource: DraggableLocation, dropResultDestination: DraggableLocation, idModification: {
-	    property: string | number;
-	    modifier: () => string | number;
-	}) => DropResult;
-	export {};
+declare module '@elastic/eui/src/components/datagrid/body/header/data_grid_header_cell_wrapper' {
+	import { FunctionComponent } from 'react';
+	import { EuiDataGridHeaderCellWrapperProps } from '@elastic/eui/src/components/datagrid/data_grid_types';
+	/**
+	 * This is a wrapper that handles repeated concerns between control &
+	 * standard header cells. Most of its shared logic is around focus state/UX,
+	 * but it also DRY's out certain class/data-test-subj/style attributes
+	 */
+	export const EuiDataGridHeaderCellWrapper: FunctionComponent<EuiDataGridHeaderCellWrapperProps>;
 
 }
-declare module '@elastic/eui/src/components/drag_and_drop' {
-	export type { EuiDragDropContextProps } from '@elastic/eui/src/components/drag_and_drop/drag_drop_context';
-	export { EuiDragDropContext } from '@elastic/eui/src/components/drag_and_drop/drag_drop_context';
-	export type { EuiDraggableProps } from '@elastic/eui/src/components/drag_and_drop/draggable';
-	export { EuiDraggable } from '@elastic/eui/src/components/drag_and_drop/draggable';
-	export type { EuiDroppableProps } from '@elastic/eui/src/components/drag_and_drop/droppable';
-	export { EuiDroppable } from '@elastic/eui/src/components/drag_and_drop/droppable';
-	export { euiDragDropCopy, euiDragDropMove, euiDragDropReorder, } from '@elastic/eui/src/components/drag_and_drop/services';
-	export type { DraggableLocation, DraggableProps, DraggableProvidedDragHandleProps, DragDropContextProps, DragStart, DroppableProps, DropResult, ResponderProvided, } from '@hello-pangea/dnd';
+declare module '@elastic/eui/src/components/datagrid/body/header/data_grid_control_header_cell' {
+	import { FunctionComponent } from 'react';
+	import { EuiDataGridControlHeaderCellProps } from '@elastic/eui/src/components/datagrid/data_grid_types';
+	export const EuiDataGridControlHeaderCell: FunctionComponent<EuiDataGridControlHeaderCellProps>;
 
 }
 declare module '@elastic/eui/src/components/datagrid/controls/column_sorting.styles' {
@@ -15813,10 +15926,51 @@ declare module '@elastic/eui/src/components/datagrid/controls/column_sorting_dra
 	export const defaultSortDescLabel: React.JSX.Element;
 	export const EuiDataGridColumnSortingDraggable: FunctionComponent<EuiDataGridColumnSortingDraggableProps>;
 
+}
+declare module '@elastic/eui/src/components/datagrid/body/header/data_grid_header_cell.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	/**
+	 * Styles only applied to data header cell content, not control header cells
+	 */
+	export const euiDataGridHeaderCellStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiDataGridHeaderCell__content: import("@emotion/utils").SerializedStyles;
+	    right: import("@emotion/utils").SerializedStyles;
+	    euiDataGridHeaderCell__popover: import("@emotion/utils").SerializedStyles;
+	    euiDataGridHeaderCell__actions: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/datagrid/body/header/column_actions' {
-	import { EuiDataGridColumn, EuiDataGridColumnActions, EuiDataGridSchema, EuiDataGridSchemaDetector, EuiDataGridSorting, DataGridFocusContextShape } from '@elastic/eui/src/components/datagrid/data_grid_types';
+	import React, { Ref, KeyboardEventHandler, FunctionComponent } from 'react';
 	import { EuiListGroupItemProps } from '@elastic/eui/src/components/list_group';
+	import { EuiDataGridHeaderCellProps, EuiDataGridColumn, EuiDataGridColumnActions, EuiDataGridSchema, EuiDataGridSchemaDetector, EuiDataGridSorting, DataGridFocusContextShape } from '@elastic/eui/src/components/datagrid/data_grid_types';
+	export const useHasColumnActions: (columnActions: EuiDataGridColumn['actions']) => boolean;
+	export type PropsFromColumnActions = {
+	    className?: string;
+	    onKeyDown?: KeyboardEventHandler;
+	    'data-column-moving'?: boolean;
+	};
+	export const ColumnActions: FunctionComponent<Pick<EuiDataGridHeaderCellProps, 'index' | 'column' | 'columns' | 'schema' | 'schemaDetectors' | 'setVisibleColumns' | 'switchColumnPos' | 'sorting'> & {
+	    id: string;
+	    title: string;
+	    hasFocusTrap: boolean;
+	    setPropsFromColumnActions: (props: PropsFromColumnActions) => void;
+	    actionsButtonRef: Ref<HTMLButtonElement>;
+	}>;
+	/**
+	 * Add keyboard arrow navigation to the cell actions popover
+	 * to match the UX of the rest of EuiDataGrid
+	 */
+	export const usePopoverArrowNavigation: () => {
+	    panelRef: (ref: HTMLElement | null) => void;
+	    panelProps: {
+	        onKeyDown: (e: React.KeyboardEvent) => void;
+	    };
+	    popoverScreenReaderText: React.JSX.Element;
+	};
+	/**
+	 * Logic for returning an array of actions/items to pass to EuiListGroup
+	 */
 	interface GetColumnActions {
 	    column: EuiDataGridColumn;
 	    columns: EuiDataGridColumn[];
@@ -15827,10 +15981,11 @@ declare module '@elastic/eui/src/components/datagrid/body/header/column_actions'
 	    setIsPopoverOpen: (value: boolean) => void;
 	    sorting: EuiDataGridSorting | undefined;
 	    switchColumnPos: (colFromId: string, colToId: string) => void;
+	    setIsColumnMoving: (value: boolean) => void;
 	    setFocusedCell: DataGridFocusContextShape['setFocusedCell'];
 	    columnFocusIndex: number;
 	}
-	export const getColumnActions: ({ column, columns, schema, schemaDetectors, setVisibleColumns, focusFirstVisibleInteractiveCell, setIsPopoverOpen, sorting, switchColumnPos, setFocusedCell, columnFocusIndex, }: GetColumnActions) => EuiListGroupItemProps[]; type HideColumnAction = Pick<GetColumnActions, 'column' | 'columns' | 'setVisibleColumns' | 'focusFirstVisibleInteractiveCell'>;
+	export const getColumnActions: ({ column, columns, schema, schemaDetectors, setVisibleColumns, focusFirstVisibleInteractiveCell, setIsPopoverOpen, sorting, switchColumnPos, setIsColumnMoving, setFocusedCell, columnFocusIndex, }: GetColumnActions) => EuiListGroupItemProps[]; type HideColumnAction = Pick<GetColumnActions, 'column' | 'columns' | 'setVisibleColumns' | 'focusFirstVisibleInteractiveCell'>;
 	export const getHideColumnAction: ({ column, columns, setVisibleColumns, focusFirstVisibleInteractiveCell, }: HideColumnAction) => EuiListGroupItemProps[]; type SortColumnActions = Pick<GetColumnActions, 'column' | 'sorting' | 'schema' | 'schemaDetectors'>;
 	export const getSortColumnActions: ({ column, sorting, schema, schemaDetectors, }: SortColumnActions) => EuiListGroupItemProps[];
 	/**
@@ -15843,15 +15998,34 @@ declare module '@elastic/eui/src/components/datagrid/body/header/column_actions'
 	export {};
 
 }
-declare module '@elastic/eui/src/components/datagrid/body/header/data_grid_column_resizer.styles' {
+declare module '@elastic/eui/src/components/datagrid/body/header/column_sorting' {
+	import React from 'react';
+	import { EuiDataGridSorting } from '@elastic/eui/src/components/datagrid/data_grid_types';
+	/**
+	 * Column sorting utility helpers
+	 */
+	export const useColumnSorting: ({ sorting, id, hasColumnActions, }: {
+	    sorting?: EuiDataGridSorting | undefined;
+	    id: string;
+	    hasColumnActions: boolean;
+	}) => {
+	    sortingArrow: React.JSX.Element | null;
+	    ariaSort: "ascending" | "descending" | undefined;
+	    sortingAriaId: string;
+	    sortingScreenReaderText: React.JSX.Element | null;
+	};
+
+}
+declare module '@elastic/eui/src/components/datagrid/body/header/column_resizer.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
 	export const euiDataGridColumnResizerStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiDataGridColumnResizer: import("@emotion/utils").SerializedStyles;
+	    isLastColumn: import("@emotion/utils").SerializedStyles;
 	    isDragging: import("@emotion/utils").SerializedStyles;
 	};
 
 }
-declare module '@elastic/eui/src/components/datagrid/body/header/data_grid_column_resizer' {
+declare module '@elastic/eui/src/components/datagrid/body/header/column_resizer' {
 	import React, { Component } from 'react';
 	import { EuiDataGridColumnResizerProps, EuiDataGridColumnResizerState } from '@elastic/eui/src/components/datagrid/data_grid_types';
 	export class EuiDataGridColumnResizer extends Component<EuiDataGridColumnResizerProps, EuiDataGridColumnResizerState> {
@@ -15867,92 +16041,11 @@ declare module '@elastic/eui/src/components/datagrid/body/header/data_grid_colum
 	    render(): React.JSX.Element;
 	}
 
-}
-declare module '@elastic/eui/src/components/datagrid/body/header/data_grid_header_cell.styles' {
-	import { UseEuiTheme } from '@elastic/eui/src/services';
-	/**
-	 * Styles only applied to data header cell content, not control header cells
-	 */
-	export const euiDataGridHeaderCellStyles: (euiThemeContext: UseEuiTheme) => {
-	    euiDataGridHeaderCell__content: import("@emotion/utils").SerializedStyles;
-	    right: import("@emotion/utils").SerializedStyles;
-	    euiDataGridHeaderCell__popover: import("@emotion/utils").SerializedStyles;
-	    euiDataGridHeaderCell__button: import("@emotion/utils").SerializedStyles;
-	};
-
 }
 declare module '@elastic/eui/src/components/datagrid/body/header/data_grid_header_cell' {
-	import React, { FunctionComponent } from 'react';
-	import { EuiDataGridHeaderCellProps, EuiDataGridSorting } from '@elastic/eui/src/components/datagrid/data_grid_types';
+	import { FunctionComponent } from 'react';
+	import { EuiDataGridHeaderCellProps } from '@elastic/eui/src/components/datagrid/data_grid_types';
 	export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps>;
-	/**
-	 * Column sorting utility helpers
-	 */
-	export const useSortingUtils: ({ sorting, id, showColumnActions, }: {
-	    sorting?: EuiDataGridSorting | undefined;
-	    id: string;
-	    showColumnActions: boolean;
-	}) => {
-	    sortingArrow: React.JSX.Element | null;
-	    ariaSort: "ascending" | "descending" | undefined;
-	    sortingScreenReaderText: React.JSX.Element | null;
-	};
-	/**
-	 * Add keyboard arrow navigation to the cell actions popover
-	 * to match the UX of the rest of EuiDataGrid
-	 */
-	export const usePopoverArrowNavigation: () => {
-	    panelRef: (ref: HTMLElement | null) => void;
-	    panelProps: {
-	        onKeyDown: (e: React.KeyboardEvent) => void;
-	    };
-	    popoverScreenReaderText: React.JSX.Element;
-	};
-
-}
-declare module '@elastic/eui/src/components/datagrid/data_grid.styles' {
-	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiDataGridVariables: (euiThemeContext: UseEuiTheme) => {
-	    cellPadding: {
-	        s: string;
-	        m: string;
-	        l: string;
-	    };
-	    lineHeight: {
-	        s: import("csstype").Property.LineHeight<string | number> | undefined;
-	        m: import("csstype").Property.LineHeight<string | number> | undefined;
-	    };
-	    fontSize: {
-	        s: import("csstype").Property.FontSize<string | number> | undefined;
-	        m: import("csstype").Property.FontSize<string | number> | undefined;
-	    };
-	    levels: {
-	        cellPopover: number;
-	        readonly stickyHeader: number;
-	    };
-	};
-	export const euiDataGridStyles: (euiThemeContext: UseEuiTheme) => {
-	    euiDataGrid: import("@emotion/utils").SerializedStyles;
-	    cellPadding: {
-	        cellPadding: (size: 's' | 'm' | 'l') => import("@emotion/utils").SerializedStyles;
-	        readonly s: import("@emotion/utils").SerializedStyles;
-	        readonly m: import("@emotion/utils").SerializedStyles;
-	        readonly l: import("@emotion/utils").SerializedStyles;
-	    };
-	    fontSize: {
-	        fontSize: (size: 's' | 'm') => import("@emotion/utils").SerializedStyles;
-	        readonly s: import("@emotion/utils").SerializedStyles;
-	        readonly m: import("@emotion/utils").SerializedStyles;
-	        readonly l: import("@emotion/utils").SerializedStyles;
-	    };
-	    borders: {
-	        none: null;
-	        horizontal: import("@emotion/utils").SerializedStyles;
-	        all: import("@emotion/utils").SerializedStyles;
-	    };
-	    euiDataGrid__content: import("@emotion/utils").SerializedStyles;
-	    euiDataGrid__focusWrap: import("@emotion/utils").SerializedStyles;
-	};
 
 }
 declare module '@elastic/eui/src/components/datagrid/body/header/data_grid_header_row.styles' {
@@ -16235,6 +16328,7 @@ declare module '@elastic/eui/src/components/datagrid/utils/scrolling' {
 	    footerRowHeight: number;
 	    visibleRowCount: number;
 	    hasStickyFooter: boolean;
+	    canDragAndDropColumns?: boolean;
 	}
 	/**
 	 * The primary goal of this scroll logic is to ensure keyboard navigation works accessibly,
@@ -16249,7 +16343,7 @@ declare module '@elastic/eui/src/components/datagrid/utils/scrolling' {
 	 * Ensures that the passed cell is always fully in view by using cell position
 	 * checks and scroll adjustments/workarounds.
 	 */
-	export const useScrollCellIntoView: ({ gridRef, outerGridRef, hasGridScrolling, headerRowHeight, footerRowHeight, visibleRowCount, hasStickyFooter, }: Dependencies) => {
+	export const useScrollCellIntoView: ({ gridRef, outerGridRef, hasGridScrolling, headerRowHeight, footerRowHeight, visibleRowCount, hasStickyFooter, canDragAndDropColumns, }: Dependencies) => {
 	    scrollCellIntoView: ({ rowIndex, colIndex }: ScrollCellIntoView) => Promise<void>;
 	};
 	/**
@@ -25287,15 +25381,6 @@ declare module '@elastic/eui/src/components/datagrid/data_grid.stories.utils' {
 	        actions?: undefined;
 	        isResizable?: undefined;
 	        schema?: undefined;
-	    } | {
-	        id: string;
-	        displayAsText: string;
-	        defaultSortDirection?: undefined;
-	        cellActions?: undefined;
-	        initialWidth?: undefined;
-	        actions?: undefined;
-	        isResizable?: undefined;
-	        schema?: undefined;
 	    } | {
 	        id: string;
 	        displayAsText: string;
@@ -25318,6 +25403,15 @@ declare module '@elastic/eui/src/components/datagrid/data_grid.stories.utils' {
 	        initialWidth?: undefined;
 	        isResizable?: undefined;
 	        schema?: undefined;
+	    } | {
+	        id: string;
+	        displayAsText: string;
+	        defaultSortDirection?: undefined;
+	        cellActions?: undefined;
+	        initialWidth?: undefined;
+	        actions?: undefined;
+	        isResizable?: undefined;
+	        schema?: undefined;
 	    } | {
 	        id: string;
 	        displayAsText: string;
@@ -25354,6 +25448,7 @@ declare module '@elastic/eui/src/components/datagrid/data_grid.stories.utils' {
 	    columnVisibility: {
 	        visibleColumns: string[];
 	        setVisibleColumns: () => void;
+	        canDragAndDropColumns: boolean;
 	    };
 	    inMemory: {
 	        readonly level: "sorting";
@@ -31162,20 +31257,20 @@ declare module '@elastic/eui' {
 "euiDataGridCell.expansionEnterPrompt": any;
 "euiDataGridCell.focusTrapExitPrompt": any;
 "euiDataGridCell.focusTrapEnterPrompt": any;
+"euiDataGridHeaderCell.actionsButtonAriaLabel": any;
+"euiDataGridHeaderCell.actionsEnterKeyInstructions": any;
+"euiDataGridHeaderCell.actionsPopoverScreenReaderText": any;
 "euiColumnActions.hideColumn": any;
 "euiColumnActions.moveLeft": any;
 "euiColumnActions.moveRight": any;
 "euiColumnActions.unsort": any;
 "euiColumnActions.sort": any;
-"euiDataGridHeaderCell.actionsButtonAriaLabel": any;
-"euiDataGridHeaderCell.actionsEnterKeyInstructions": any;
 "euiDataGridHeaderCell.sortedByAscendingSingle": any;
 "euiDataGridHeaderCell.sortedByDescendingSingle": any;
 "euiDataGridHeaderCell.sortedByAscendingFirst": any;
 "euiDataGridHeaderCell.sortedByDescendingFirst": any;
 "euiDataGridHeaderCell.sortedByAscendingMultiple": any;
 "euiDataGridHeaderCell.sortedByDescendingMultiple": any;
-"euiDataGridHeaderCell.actionsPopoverScreenReaderText": any;
 "euiColumnSelector.dragHandleAriaLabel": any;
 "euiColumnSelector.button": any;
 "euiColumnSelector.search": any;