@elastic/eui 97.0.0 → 97.2.0

package/optimize/es/components/datagrid/body/header/data_grid_header_cell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -10,17 +10,13 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  */
 
 import classnames from 'classnames';
-import React, { useContext, useState, useRef, useCallback, useMemo, memo } from 'react';
-import { tabbable } from 'tabbable';
-import { keys, useGeneratedHtmlId, useEuiMemoizedStyles } from '../../../../services';
-import { EuiI18n, useEuiI18n } from '../../../i18n';
+import React, { memo, useMemo, useRef, useState } from 'react';
+import { useEuiMemoizedStyles } from '../../../../services';
 import { EuiIcon } from '../../../icon';
-import { EuiListGroup } from '../../../list_group';
-import { EuiPopover } from '../../../popover';
-import { EuiButtonIcon } from '../../../button';
-import { DataGridFocusContext } from '../../utils/focus';
-import { getColumnActions } from './column_actions';
-import { EuiDataGridColumnResizer } from './data_grid_column_resizer';
+import { useHasColumnActions, ColumnActions } from './column_actions';
+import { useColumnSorting } from './column_sorting';
+import { ConditionalDraggableColumn } from './draggable_columns';
+import { EuiDataGridColumnResizer } from './column_resizer';
 import { EuiDataGridHeaderCellWrapper } from './data_grid_header_cell_wrapper';
 import { euiDataGridHeaderCellStyles } from './data_grid_header_cell.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -31,315 +27,99 @@ export var EuiDataGridHeaderCell = /*#__PURE__*/memo(function (_ref) {
     columnWidths = _ref.columnWidths,
     defaultColumnWidth = _ref.defaultColumnWidth,
     setColumnWidth = _ref.setColumnWidth,
-    visibleColCount = _ref.visibleColCount,
     setVisibleColumns = _ref.setVisibleColumns,
     switchColumnPos = _ref.switchColumnPos,
+    isLastColumn = _ref.isLastColumn,
     sorting = _ref.sorting,
     schema = _ref.schema,
-    schemaDetectors = _ref.schemaDetectors;
+    schemaDetectors = _ref.schemaDetectors,
+    canDragAndDropColumns = _ref.canDragAndDropColumns,
+    gridStyles = _ref.gridStyles;
   var id = column.id,
     display = column.display,
     displayAsText = column.displayAsText,
-    displayHeaderCellProps = column.displayHeaderCellProps;
+    displayHeaderCellProps = column.displayHeaderCellProps,
+    actions = column.actions;
   var title = displayAsText || id;
   var children = display || displayAsText || id;
   var width = columnWidths[id] || defaultColumnWidth;
   var columnType = schema[id] ? schema[id].columnType : null;
-  var _useContext = useContext(DataGridFocusContext),
-    setFocusedCell = _useContext.setFocusedCell,
-    focusFirstVisibleInteractiveCell = _useContext.focusFirstVisibleInteractiveCell;
+  var hasColumnActions = useHasColumnActions(actions);
+  var classes = classnames(_defineProperty(_defineProperty({}, "euiDataGridHeaderCell--".concat(columnType), columnType), 'euiDataGridHeaderCell--hasColumnActions', hasColumnActions), displayHeaderCellProps === null || displayHeaderCellProps === void 0 ? void 0 : displayHeaderCellProps.className);
+  var styles = useEuiMemoizedStyles(euiDataGridHeaderCellStyles);
+  var contentStyles = [styles.euiDataGridHeaderCell__content, (columnType === 'numeric' || columnType === 'currency') && styles.right];
 
-  /*
-   * Column actions
-   */
-  var _useState = useState(false),
+  // Props passed from <ColumnActions /> to be set on <EuiDataGridHeaderCellWrapper />
+  var _useState = useState({}),
     _useState2 = _slicedToArray(_useState, 2),
-    isPopoverOpen = _useState2[0],
-    setIsPopoverOpen = _useState2[1];
-  var togglePopover = useCallback(function () {
-    setIsPopoverOpen(function (isOpen) {
-      return !isOpen;
-    });
-  }, []);
-  var closePopover = useCallback(function () {
-    return setIsPopoverOpen(false);
-  }, []);
-  var popoverArrowNavigationProps = usePopoverArrowNavigation();
-  var columnActions = useMemo(function () {
-    return getColumnActions({
-      column: column,
-      columns: columns,
-      schema: schema,
-      schemaDetectors: schemaDetectors,
-      setVisibleColumns: setVisibleColumns,
-      focusFirstVisibleInteractiveCell: focusFirstVisibleInteractiveCell,
-      setIsPopoverOpen: setIsPopoverOpen,
-      sorting: sorting,
-      switchColumnPos: switchColumnPos,
-      setFocusedCell: setFocusedCell,
-      columnFocusIndex: index
-    });
-  }, [column, columns, schema, schemaDetectors, setVisibleColumns, focusFirstVisibleInteractiveCell, setIsPopoverOpen, sorting, switchColumnPos, setFocusedCell, index]);
-  var showColumnActions = columnActions && columnActions.length > 0;
+    propsFromColumnActions = _useState2[0],
+    setPropsFromColumnActions = _useState2[1];
   var actionsButtonRef = useRef(null);
-  var clickActionsButton = useCallback(function () {
-    var _actionsButtonRef$cur;
-    (_actionsButtonRef$cur = actionsButtonRef.current) === null || _actionsButtonRef$cur === void 0 || _actionsButtonRef$cur.click();
-  }, []);
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isActionsButtonFocused = _useState4[0],
-    setIsActionsButtonFocused = _useState4[1];
-  var actionsButtonAriaLabel = useEuiI18n('euiDataGridHeaderCell.actionsButtonAriaLabel', '{title}. Click to view column header actions.', {
-    title: title
-  });
-  var actionsEnterKeyInstructions = useEuiI18n('euiDataGridHeaderCell.actionsEnterKeyInstructions', "Press the Enter key to view this column's actions");
-
-  /*
-   * Column sorting
-   */
-  var _useSortingUtils = useSortingUtils({
+  var _useColumnSorting = useColumnSorting({
       sorting: sorting,
       id: id,
-      showColumnActions: showColumnActions
+      hasColumnActions: hasColumnActions
     }),
-    sortingArrow = _useSortingUtils.sortingArrow,
-    ariaSort = _useSortingUtils.ariaSort,
-    sortingScreenReaderText = _useSortingUtils.sortingScreenReaderText;
-  var sortingAriaId = useGeneratedHtmlId({
-    prefix: 'euiDataGridCellHeader',
-    suffix: 'sorting'
-  });
-
-  /*
-   * Rendering
-   */
-  var classes = classnames(_defineProperty(_defineProperty(_defineProperty({}, "euiDataGridHeaderCell--".concat(columnType), columnType), 'euiDataGridHeaderCell--hasColumnActions', showColumnActions), 'euiDataGridHeaderCell--isActionsPopoverOpen', isPopoverOpen), displayHeaderCellProps === null || displayHeaderCellProps === void 0 ? void 0 : displayHeaderCellProps.className);
-  var styles = useEuiMemoizedStyles(euiDataGridHeaderCellStyles);
-  var contentStyles = [styles.euiDataGridHeaderCell__content, (columnType === 'numeric' || columnType === 'currency') && styles.right];
-  return ___EmotionJSX(EuiDataGridHeaderCellWrapper, _extends({}, displayHeaderCellProps, {
-    className: classes,
-    id: id,
-    index: index,
-    visibleColCount: visibleColCount,
-    width: width,
-    "aria-sort": ariaSort,
-    hasActionsPopover: showColumnActions,
-    openActionsPopover: clickActionsButton,
-    "aria-label": displayAsText && "".concat(displayAsText, ", ") // ensure cell text content is read first, if available
-    ,
-    "aria-describedby": sortingAriaId
-  }), function (hasFocusTrap) {
-    return ___EmotionJSX(React.Fragment, null, column.isResizable !== false && width != null ? ___EmotionJSX(EuiDataGridColumnResizer, {
+    sortingArrow = _useColumnSorting.sortingArrow,
+    ariaSort = _useColumnSorting.ariaSort,
+    sortingAriaId = _useColumnSorting.sortingAriaId,
+    sortingScreenReaderText = _useColumnSorting.sortingScreenReaderText;
+  var columnResizer = useMemo(function () {
+    return column.isResizable !== false && width != null ? ___EmotionJSX(EuiDataGridColumnResizer, {
       columnId: id,
       columnWidth: width,
-      setColumnWidth: setColumnWidth
-    }) : null, ___EmotionJSX("div", {
-      css: contentStyles,
-      className: "euiDataGridHeaderCell__content",
-      title: title
-    }, children), sortingArrow, sortingScreenReaderText && ___EmotionJSX("p", {
-      id: sortingAriaId,
-      hidden: true
-    }, sortingScreenReaderText), showColumnActions && ___EmotionJSX(EuiPopover, _extends({
-      display: "block",
-      panelPaddingSize: "none",
-      offset: 7,
-      anchorPosition: "downRight",
-      css: styles.euiDataGridHeaderCell__popover,
-      button: ___EmotionJSX(EuiButtonIcon, {
-        iconType: "boxesVertical",
-        iconSize: "s",
-        color: "text",
-        css: styles.euiDataGridHeaderCell__button,
-        className: "euiDataGridHeaderCell__button",
-        buttonRef: actionsButtonRef,
-        onClick: togglePopover,
-        onFocus: function onFocus() {
-          return setIsActionsButtonFocused(true);
-        },
-        onBlur: function onBlur() {
-          return setIsActionsButtonFocused(false);
-        },
-        tabIndex: 0 // Override EuiButtonIcon's conditional tabindex based on aria-hidden
-        ,
-        "aria-hidden": hasFocusTrap && !isActionsButtonFocused ? 'true' // prevent the actions button from being read on cell focus
-        : undefined,
-        "aria-label": hasFocusTrap ? actionsButtonAriaLabel : actionsEnterKeyInstructions,
-        "data-test-subj": "dataGridHeaderCellActionButton-".concat(id)
-      }),
-      isOpen: isPopoverOpen,
-      closePopover: closePopover
-    }, popoverArrowNavigationProps), ___EmotionJSX(EuiListGroup, {
-      listItems: columnActions,
-      gutterSize: "none",
-      "data-test-subj": "dataGridHeaderCellActionGroup-".concat(id)
-    })));
+      setColumnWidth: setColumnWidth,
+      isLastColumn: isLastColumn
+    }) : null;
+  }, [column.isResizable, id, width, setColumnWidth, isLastColumn]);
+  return ___EmotionJSX(ConditionalDraggableColumn, {
+    id: id,
+    index: index,
+    canDragAndDropColumns: !!canDragAndDropColumns,
+    gridStyles: gridStyles,
+    columnResizer: columnResizer,
+    actionsPopoverToggle: actionsButtonRef.current
+  }, function (dragProps) {
+    return ___EmotionJSX(EuiDataGridHeaderCellWrapper, _extends({}, displayHeaderCellProps, dragProps, {
+      hasColumnActions: hasColumnActions
+    }, propsFromColumnActions, {
+      className: classnames(classes, propsFromColumnActions.className),
+      id: id,
+      index: index,
+      isLastColumn: isLastColumn,
+      width: width,
+      "aria-sort": ariaSort,
+      "aria-label": displayAsText && "".concat(displayAsText, ", ") // ensure cell text content is read first, if available
+      ,
+      "aria-describedby": classnames(sortingAriaId, dragProps === null || dragProps === void 0 ? void 0 : dragProps['aria-describedby']),
+      "data-column-moving": propsFromColumnActions['data-column-moving'] || (dragProps === null || dragProps === void 0 ? void 0 : dragProps['data-column-moving']) || undefined
+    }), function (hasFocusTrap) {
+      return ___EmotionJSX(React.Fragment, null, !canDragAndDropColumns && columnResizer, canDragAndDropColumns && ___EmotionJSX("span", {
+        className: "euiDataGridHeaderCell__draggableIcon"
+      }, ___EmotionJSX(EuiIcon, {
+        type: "grabOmnidirectional",
+        size: "s",
+        css: styles.euiDataGridHeaderCell__actions
+      })), ___EmotionJSX("div", {
+        css: contentStyles,
+        className: "euiDataGridHeaderCell__content",
+        title: title
+      }, children), sortingArrow, sortingScreenReaderText, hasColumnActions && ___EmotionJSX(ColumnActions, {
+        index: index,
+        id: id,
+        title: title,
+        column: column,
+        columns: columns,
+        schema: schema,
+        schemaDetectors: schemaDetectors,
+        setVisibleColumns: setVisibleColumns,
+        switchColumnPos: switchColumnPos,
+        sorting: sorting,
+        hasFocusTrap: hasFocusTrap,
+        setPropsFromColumnActions: setPropsFromColumnActions,
+        actionsButtonRef: actionsButtonRef
+      }));
+    });
   });
 });
-EuiDataGridHeaderCell.displayName = 'EuiDataGridHeaderCell';
-
-/**
- * Column sorting utility helpers
- */
-export var useSortingUtils = function useSortingUtils(_ref2) {
-  var _sorting$columns;
-  var sorting = _ref2.sorting,
-    id = _ref2.id,
-    showColumnActions = _ref2.showColumnActions;
-  var sortedColumn = useMemo(function () {
-    return sorting === null || sorting === void 0 ? void 0 : sorting.columns.find(function (col) {
-      return col.id === id;
-    });
-  }, [sorting, id]);
-  var isColumnSorted = !!sortedColumn;
-  var hasOnlyOneSort = (sorting === null || sorting === void 0 || (_sorting$columns = sorting.columns) === null || _sorting$columns === void 0 ? void 0 : _sorting$columns.length) === 1;
-
-  /**
-   * Arrow icon
-   */
-  var sortingArrow = useMemo(function () {
-    return isColumnSorted ? ___EmotionJSX(EuiIcon, {
-      type: sortedColumn.direction === 'asc' ? 'sortUp' : 'sortDown',
-      color: "text",
-      className: "euiDataGridHeaderCell__sortingArrow",
-      "data-test-subj": "dataGridHeaderCellSortingIcon-".concat(id)
-    }) : null;
-  }, [id, isColumnSorted, sortedColumn]);
-
-  /**
-   * aria-sort attribute - should only be used when a single column is being sorted
-   * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort
-   * @see https://www.w3.org/WAI/ARIA/apg/example-index/table/sortable-table.html
-   * @see https://github.com/w3c/aria/issues/283 for potential future multi-column usage
-   */
-  var ariaSort = isColumnSorted && hasOnlyOneSort ? sorting.columns[0].direction === 'asc' ? 'ascending' : 'descending' : undefined;
-
-  /**
-   * Sorting status - screen reader text
-   */
-  var sortingScreenReaderText = useMemo(function () {
-    var _sorting$columns2;
-    if (!isColumnSorted) return null;
-    if (!showColumnActions && hasOnlyOneSort) return null; // in this scenario, the `aria-sort` attribute will be used by screen readers
-    return ___EmotionJSX(React.Fragment, null, sorting === null || sorting === void 0 || (_sorting$columns2 = sorting.columns) === null || _sorting$columns2 === void 0 ? void 0 : _sorting$columns2.map(function (_ref3, index) {
-      var columnId = _ref3.id,
-        direction = _ref3.direction;
-      if (hasOnlyOneSort) {
-        if (direction === 'asc') {
-          return ___EmotionJSX(EuiI18n, {
-            token: "euiDataGridHeaderCell.sortedByAscendingSingle",
-            default: "Sorted ascending",
-            key: index
-          });
-        } else {
-          return ___EmotionJSX(EuiI18n, {
-            token: "euiDataGridHeaderCell.sortedByDescendingSingle",
-            default: "Sorted descending",
-            key: index
-          });
-        }
-      } else if (index === 0) {
-        if (direction === 'asc') {
-          return ___EmotionJSX(EuiI18n, {
-            token: "euiDataGridHeaderCell.sortedByAscendingFirst",
-            default: "Sorted by {columnId}, ascending",
-            values: {
-              columnId: columnId
-            },
-            key: index
-          });
-        } else {
-          return ___EmotionJSX(EuiI18n, {
-            token: "euiDataGridHeaderCell.sortedByDescendingFirst",
-            default: "Sorted by {columnId}, descending",
-            values: {
-              columnId: columnId
-            },
-            key: index
-          });
-        }
-      } else {
-        if (direction === 'asc') {
-          return ___EmotionJSX(EuiI18n, {
-            token: "euiDataGridHeaderCell.sortedByAscendingMultiple",
-            default: ", then sorted by {columnId}, ascending",
-            values: {
-              columnId: columnId
-            },
-            key: index
-          });
-        } else {
-          return ___EmotionJSX(EuiI18n, {
-            token: "euiDataGridHeaderCell.sortedByDescendingMultiple",
-            default: ", then sorted by {columnId}, descending",
-            values: {
-              columnId: columnId
-            },
-            key: index
-          });
-        }
-      }
-    }), ".");
-  }, [isColumnSorted, showColumnActions, hasOnlyOneSort, sorting]);
-  return {
-    sortingArrow: sortingArrow,
-    ariaSort: ariaSort,
-    sortingScreenReaderText: sortingScreenReaderText
-  };
-};
-
-/**
- * Add keyboard arrow navigation to the cell actions popover
- * to match the UX of the rest of EuiDataGrid
- */
-export var usePopoverArrowNavigation = function usePopoverArrowNavigation() {
-  var popoverPanelRef = useRef(null);
-  var actionsRef = useRef(undefined);
-  var panelRef = useCallback(function (ref) {
-    popoverPanelRef.current = ref;
-    actionsRef.current = ref ? tabbable(ref) : undefined;
-  }, []);
-  var onKeyDown = useCallback(function (e) {
-    var _actionsRef$current;
-    if (e.key !== keys.ARROW_DOWN && e.key !== keys.ARROW_UP) return;
-    if (!((_actionsRef$current = actionsRef.current) !== null && _actionsRef$current !== void 0 && _actionsRef$current.length)) return;
-    e.preventDefault();
-    var initialState = document.activeElement === popoverPanelRef.current;
-    var currentIndex = !initialState ? actionsRef.current.findIndex(function (el) {
-      return document.activeElement === el;
-    }) : -1;
-    var lastIndex = actionsRef.current.length - 1;
-    var indexToFocus;
-    if (initialState) {
-      if (e.key === keys.ARROW_DOWN) {
-        indexToFocus = 0;
-      } else if (e.key === keys.ARROW_UP) {
-        indexToFocus = lastIndex;
-      }
-    } else {
-      if (e.key === keys.ARROW_DOWN) {
-        indexToFocus = currentIndex + 1;
-        if (indexToFocus > lastIndex) {
-          indexToFocus = 0;
-        }
-      } else if (e.key === keys.ARROW_UP) {
-        indexToFocus = currentIndex - 1;
-        if (indexToFocus < 0) {
-          indexToFocus = lastIndex;
-        }
-      }
-    }
-    actionsRef.current[indexToFocus].focus();
-  }, []);
-  return {
-    panelRef: panelRef,
-    panelProps: {
-      onKeyDown: onKeyDown
-    },
-    popoverScreenReaderText: ___EmotionJSX(EuiI18n, {
-      token: "euiDataGridHeaderCell.actionsPopoverScreenReaderText",
-      default: "To navigate through the list of column actions, press the Tab or Up and Down arrow keys."
-    })
-  };
-};
+EuiDataGridHeaderCell.displayName = 'EuiDataGridHeaderCell';

package/optimize/es/components/datagrid/body/header/data_grid_header_cell.styles.js

@@ -22,6 +22,6 @@ export var euiDataGridHeaderCellStyles = function euiDataGridHeaderCellStyles(eu
     // Numeric and currency schemas are aligned to the right
     right: /*#__PURE__*/css(logicalTextAlignCSS('right'), ";;label:right;"),
     euiDataGridHeaderCell__popover: /*#__PURE__*/css(logicalCSS('margin-left', 'auto'), "line-height:0;;label:euiDataGridHeaderCell__popover;"),
-    euiDataGridHeaderCell__button: /*#__PURE__*/css("overflow:hidden;", header.hideActions, " &{", logicalCSS('width', 0), " opacity:0;}", euiCanAnimate, "{transition:inline-size ", euiTheme.animation.fast, " ease-in,opacity ", euiTheme.animation.slow, " ease-in;transform:none!important;animation:none!important;};label:euiDataGridHeaderCell__button;")
+    euiDataGridHeaderCell__actions: /*#__PURE__*/css("overflow:hidden;display:flex;", header.hideActions, " &{", logicalCSS('width', 0), " opacity:0;}", euiCanAnimate, "{transition:inline-size ", euiTheme.animation.fast, " ease-in,opacity ", euiTheme.animation.slow, " ease-in;transform:none!important;animation:none!important;};label:euiDataGridHeaderCell__actions;")
   };
 };

package/optimize/es/components/datagrid/body/header/data_grid_header_cell_wrapper.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["id", "index", "visibleColCount", "width", "className", "children", "hasActionsPopover", "openActionsPopover", "aria-label"];
+var _excluded = ["id", "index", "isLastColumn", "width", "className", "children", "hasColumnActions", "isDragging", "onKeyDown", "aria-label"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -26,12 +26,13 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiDataGridHeaderCellWrapper = function EuiDataGridHeaderCellWrapper(_ref) {
   var id = _ref.id,
     index = _ref.index,
-    visibleColCount = _ref.visibleColCount,
+    isLastColumn = _ref.isLastColumn,
     width = _ref.width,
     className = _ref.className,
     children = _ref.children,
-    hasActionsPopover = _ref.hasActionsPopover,
-    openActionsPopover = _ref.openActionsPopover,
+    hasColumnActions = _ref.hasColumnActions,
+    isDragging = _ref.isDragging,
+    _onKeyDown = _ref.onKeyDown,
     ariaLabel = _ref['aria-label'],
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classnames('euiDataGridHeaderCell', className);
@@ -52,8 +53,8 @@ export var EuiDataGridHeaderCellWrapper = function EuiDataGridHeaderCellWrapper(
     setInteractiveChildren = _useState6[1];
   useEffect(function () {
     // We're checking for interactive children outside of the default actions button
-    setRenderFocusTrap(interactiveChildren.length > (hasActionsPopover ? 1 : 0));
-  }, [hasActionsPopover, interactiveChildren]);
+    setRenderFocusTrap(interactiveChildren.length > (hasColumnActions ? 1 : 0));
+  }, [hasColumnActions, interactiveChildren]);
   var _useContext = useContext(DataGridFocusContext),
     setFocusedCell = _useContext.setFocusedCell,
     onFocusUpdate = _useContext.onFocusUpdate;
@@ -75,14 +76,14 @@ export var EuiDataGridHeaderCellWrapper = function EuiDataGridHeaderCellWrapper(
       }
     });
   }, [index, onFocusUpdate, headerEl]);
-
-  // For cell headers with only actions, auto-open the actions popover on enter keypress
   var onKeyDown = useCallback(function (e) {
-    if (e.key === keys.ENTER && hasActionsPopover && !renderFocusTrap && e.target === headerEl) {
-      openActionsPopover === null || openActionsPopover === void 0 || openActionsPopover();
+    // Ignore keys that conflict with the focus trap being entered/exited
+    if (renderFocusTrap && (e.key === keys.ENTER || e.key === keys.ESCAPE)) {
+      return;
     }
-  }, [hasActionsPopover, openActionsPopover, renderFocusTrap, headerEl]);
-  var isLastColumn = index === visibleColCount - 1;
+    // Otherwise, continue with whatever onKeyDown is being passed
+    _onKeyDown === null || _onKeyDown === void 0 || _onKeyDown(e);
+  }, [_onKeyDown, renderFocusTrap]);
   return ___EmotionJSX("div", _extends({
     role: "columnheader",
     ref: setHeaderEl,
@@ -100,9 +101,9 @@ export var EuiDataGridHeaderCellWrapper = function EuiDataGridHeaderCellWrapper(
     } : {},
     "aria-label": renderFocusTrap ? ariaLabel : undefined
   }, rest), ___EmotionJSX(HandleInteractiveChildren, {
-    cellEl: headerEl,
+    cellEl: isDragging ? null : headerEl,
+    renderFocusTrap: isDragging ? false : renderFocusTrap,
     updateCellFocusContext: updateCellFocusContext,
-    renderFocusTrap: renderFocusTrap,
     onInteractiveChildrenFound: setInteractiveChildren
   }, typeof children === 'function' ? children(renderFocusTrap) : children), isLastColumn ? tabularCopyMarkers.hiddenNewline : tabularCopyMarkers.hiddenTab);
 };

package/optimize/es/components/datagrid/body/header/data_grid_header_cell_wrapper.styles.js

@@ -20,8 +20,7 @@ export var euiDataGridHeaderCellWrapperStyles = function euiDataGridHeaderCellWr
     hoverStyles = _euiDataGridCellOutli.hoverStyles;
   var _euiDataGridCellOutli2 = euiDataGridCellOutlineSelectors(),
     outlineSelectors = _euiDataGridCellOutli2.header;
-  var _sharedFlexCss = /*#__PURE__*/css("display:flex;align-items:center;gap:", euiTheme.size.xxs, ";");
   return {
-    euiDataGridHeaderCell: /*#__PURE__*/css("position:relative;", _sharedFlexCss, " flex:0 0 auto;font-weight:", euiTheme.font.weight.bold, ";", outlineSelectors.focus, "{", focusStyles, ";}", outlineSelectors.focusTrapped, "{", hoverStyles, ";}&>[data-focus-lock-disabled]{", _sharedFlexCss, " ", logicalCSS('width', '100%'), ";};label:euiDataGridHeaderCell;")
+    euiDataGridHeaderCell: /*#__PURE__*/css("position:relative;display:flex;align-items:center;flex:0 0 auto;font-weight:", euiTheme.font.weight.bold, ";", outlineSelectors.focus, "{", focusStyles, ";}", outlineSelectors.focusTrapped, "{", hoverStyles, ";}", outlineSelectors.showActions, "{&,&>[data-focus-lock-disabled]{gap:", euiTheme.size.xxs, ";}}&>[data-focus-lock-disabled]{display:flex;align-items:center;", logicalCSS('width', '100%'), ";};label:euiDataGridHeaderCell;")
   };
 };

package/optimize/es/components/datagrid/body/header/data_grid_header_row.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "data-test-subj", "leadingControlColumns", "trailingControlColumns", "columns", "columnWidths", "defaultColumnWidth", "setColumnWidth", "visibleColCount", "setVisibleColumns", "switchColumnPos", "sorting", "schema", "schemaDetectors", "gridStyles"];
+var _excluded = ["className", "data-test-subj", "leadingControlColumns", "trailingControlColumns", "columns", "columnWidths", "defaultColumnWidth", "setColumnWidth", "visibleColCount", "setVisibleColumns", "switchColumnPos", "sorting", "schema", "schemaDetectors", "gridStyles", "canDragAndDropColumns"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -10,14 +10,16 @@ var _excluded = ["className", "data-test-subj", "leadingControlColumns", "traili
  */
 
 import classnames from 'classnames';
-import React, { forwardRef, memo } from 'react';
+import React, { forwardRef, memo, useCallback } from 'react';
 import { useEuiMemoizedStyles } from '../../../../services';
 import { emptyControlColumns } from '../../data_grid_types';
+import { ConditionalDroppableColumns } from './draggable_columns';
 import { EuiDataGridControlHeaderCell } from './data_grid_control_header_cell';
 import { EuiDataGridHeaderCell } from './data_grid_header_cell';
 import { euiDataGridHeaderStyles } from './data_grid_header_row.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var EuiDataGridHeaderRow = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
+  var _leadingControlColumn;
   var className = props.className,
     _dataTestSubj = props['data-test-subj'],
     _props$leadingControl = props.leadingControlColumns,
@@ -35,11 +37,15 @@ var EuiDataGridHeaderRow = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (
     schema = props.schema,
     schemaDetectors = props.schemaDetectors,
     gridStyles = props.gridStyles,
+    canDragAndDropColumns = props.canDragAndDropColumns,
     rest = _objectWithoutProperties(props, _excluded);
   var styles = useEuiMemoizedStyles(euiDataGridHeaderStyles);
   var cssStyles = [styles.euiDataGridHeader, styles[gridStyles.header]];
   var classes = classnames('euiDataGridHeader', className);
   var dataTestSubj = classnames('dataGridHeader', _dataTestSubj);
+  var isLastColumn = useCallback(function (index) {
+    return index === visibleColCount - 1;
+  }, [visibleColCount]);
   return ___EmotionJSX("div", _extends({
     role: "row",
     ref: ref,
@@ -50,30 +56,39 @@ var EuiDataGridHeaderRow = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (
     return ___EmotionJSX(EuiDataGridControlHeaderCell, {
       key: controlColumn.id,
       index: index,
-      visibleColCount: visibleColCount,
+      isLastColumn: isLastColumn(index),
       controlColumn: controlColumn
     });
-  }), columns.map(function (column, index) {
+  }), ___EmotionJSX(ConditionalDroppableColumns, {
+    canDragAndDropColumns: !!canDragAndDropColumns,
+    columns: columns,
+    switchColumnPos: switchColumnPos,
+    indexOffset: (_leadingControlColumn = leadingControlColumns === null || leadingControlColumns === void 0 ? void 0 : leadingControlColumns.length) !== null && _leadingControlColumn !== void 0 ? _leadingControlColumn : 0
+  }, columns.map(function (column, index) {
+    var visibleIndex = index + leadingControlColumns.length;
     return ___EmotionJSX(EuiDataGridHeaderCell, {
       key: column.id,
-      index: index + leadingControlColumns.length,
+      index: visibleIndex,
+      isLastColumn: isLastColumn(visibleIndex),
       column: column,
       columns: columns,
       columnWidths: columnWidths,
       defaultColumnWidth: defaultColumnWidth,
       setColumnWidth: setColumnWidth,
-      visibleColCount: visibleColCount,
       setVisibleColumns: setVisibleColumns,
       switchColumnPos: switchColumnPos,
       sorting: sorting,
       schema: schema,
-      schemaDetectors: schemaDetectors
+      schemaDetectors: schemaDetectors,
+      canDragAndDropColumns: canDragAndDropColumns,
+      gridStyles: gridStyles
     });
-  }), trailingControlColumns.map(function (controlColumn, index) {
+  })), trailingControlColumns.map(function (controlColumn, index) {
+    var visibleIndex = index + leadingControlColumns.length + columns.length;
     return ___EmotionJSX(EuiDataGridControlHeaderCell, {
       key: controlColumn.id,
-      index: index + leadingControlColumns.length + columns.length,
-      visibleColCount: visibleColCount,
+      index: visibleIndex,
+      isLastColumn: isLastColumn(visibleIndex),
       controlColumn: controlColumn
     });
   }));