@elastic/eui 97.0.0 → 97.2.0

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

@@ -1,4 +1,4 @@
-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"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -33,12 +33,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);
@@ -59,8 +60,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;
@@ -82,14 +83,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,
@@ -107,9 +108,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);
 };
@@ -117,10 +118,11 @@ EuiDataGridHeaderCellWrapper.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node.isRequired, PropTypes.func.isRequired]).isRequired,
   id: PropTypes.string.isRequired,
   index: PropTypes.number.isRequired,
-  visibleColCount: PropTypes.number.isRequired,
+  isLastColumn: PropTypes.bool.isRequired,
   width: PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.oneOf([null])]),
   className: PropTypes.string,
   "aria-label": PropTypes.any,
-  hasActionsPopover: PropTypes.bool,
-  openActionsPopover: PropTypes.func
+  hasColumnActions: PropTypes.bool,
+  isDragging: PropTypes.bool,
+  onKeyDown: PropTypes.any
 };

package/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/es/components/datagrid/body/header/data_grid_header_row.js

@@ -1,4 +1,4 @@
-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"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
@@ -11,14 +11,16 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
  */
 
 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,
@@ -36,11 +38,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,
@@ -51,30 +57,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
     });
   }));

package/es/components/datagrid/body/header/draggable_columns.js

@@ -0,0 +1,301 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["role", "tabIndex"],
+  _excluded2 = ["canDragAndDropColumns", "children"],
+  _excluded3 = ["canDragAndDropColumns", "children"];
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { memo, useCallback, useContext, useRef } from 'react';
+import PropTypes from "prop-types";
+import { useEuiMemoizedStyles, useGeneratedHtmlId } from '../../../../services';
+import { EuiDragDropContext, EuiDroppable, EuiDraggable } from '../../../drag_and_drop';
+import { EuiPortal } from '../../../portal';
+import { DataGridFocusContext } from '../../utils/focus';
+import { euiDataGridStyles } from '../../data_grid.styles';
+import { euiDataGridDraggableHeaderStyles } from './draggable_columns.styles';
+
+/**
+ * Parent context + EuiDroppable wrapper
+ */
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var DroppableColumns = /*#__PURE__*/memo(function (_ref) {
+  var columns = _ref.columns,
+    switchColumnPos = _ref.switchColumnPos,
+    indexOffset = _ref.indexOffset,
+    children = _ref.children;
+  var styles = useEuiMemoizedStyles(euiDataGridDraggableHeaderStyles);
+  var droppableId = useGeneratedHtmlId({
+    prefix: 'euiDataGridHeaderDroppable'
+  });
+  var _useContext = useContext(DataGridFocusContext),
+    setFocusedCell = _useContext.setFocusedCell;
+  var handleOnDragEnd = useCallback(function (_ref2) {
+    var source = _ref2.source,
+      destination = _ref2.destination;
+    if (!source) return;
+    if (destination && destination.index !== source.index) {
+      var sourceColumn = columns[source.index - indexOffset];
+      var destinationColumn = columns[destination.index - indexOffset];
+      if (sourceColumn && destinationColumn) {
+        switchColumnPos(sourceColumn.id, destinationColumn.id);
+      }
+    }
+    // Force focus the cell to prevent the datagrid body from become unfocusable, including on drag cancel
+    setTimeout(function () {
+      var cellToFocus = destination ? destination.index : source.index;
+      setFocusedCell([cellToFocus, -1], true);
+    });
+  }, [columns, indexOffset, switchColumnPos, setFocusedCell]);
+  return ___EmotionJSX(EuiDragDropContext, {
+    onDragEnd: handleOnDragEnd
+  }, ___EmotionJSX(EuiDroppable, {
+    droppableId: droppableId,
+    direction: "horizontal",
+    ignoreContainerClipping: true,
+    css: styles.euiDataGridHeaderDroppable,
+    "data-test-subj": "euiDataGridHeaderDroppable"
+  }, children));
+});
+DroppableColumns.propTypes = {
+  indexOffset: PropTypes.number.isRequired,
+  children: PropTypes.oneOfType([PropTypes.element.isRequired, PropTypes.arrayOf(PropTypes.element.isRequired).isRequired, PropTypes.any.isRequired]).isRequired
+};
+DroppableColumns.displayName = 'DroppableColumns';
+
+/**
+ * Individual EuiDraggable columns
+ */
+export var DraggableColumn = /*#__PURE__*/memo(function (_ref3) {
+  var id = _ref3.id,
+    index = _ref3.index,
+    gridStyles = _ref3.gridStyles,
+    columnResizer = _ref3.columnResizer,
+    actionsPopoverToggle = _ref3.actionsPopoverToggle,
+    children = _ref3.children;
+  var dataGridStyles = useEuiMemoizedStyles(euiDataGridStyles);
+  var styles = useEuiMemoizedStyles(euiDataGridDraggableHeaderStyles);
+  // Manually re-apply background and border overrides, since
+  // the droppable zone sets its own and confuses :first-of-type CSS
+  var reapplyCellStyles = [styles[gridStyles.header], index !== 0 && styles.noLeadingBorder];
+
+  // Draggable prevents the cell from receiving focus on click.
+  // We manually ensure focus is set on cell mouseDown which
+  // also includes setting focus before dragging
+  var _useContext2 = useContext(DataGridFocusContext),
+    setFocusedCell = _useContext2.setFocusedCell;
+  var handleOnMouseDown = useCallback(function (e) {
+    var openFocusTrap = document.querySelector('[data-focus-lock-disabled="false"]');
+    if (!!openFocusTrap &&
+    // If a focus trap is open somewhere on the page
+    !openFocusTrap.contains(e.target) &&
+    // & the focus trap doesn't belong to this header
+    e.target !== actionsPopoverToggle // & we're not closing the actions popover toggle
+    ) {
+      // Trick the focus trap lib into registering an outside click -
+      // the drag/drop lib otherwise otherwise prevents the event 💀
+      document.dispatchEvent(new MouseEvent('mousedown'));
+    }
+    setTimeout(function () {
+      setFocusedCell([index, -1], true);
+    });
+  }, [setFocusedCell, index, actionsPopoverToggle]);
+
+  // Prevent any other keypresses when dragging
+  var isDraggingRef = useRef(false);
+  var handleOnKeydown = useCallback(function (e) {
+    if (isDraggingRef.current) {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+  }, []);
+
+  // UX polish: add a slight animation frame delay to the dragging ref end
+  // which prevents re-running the hover animation of column header actions
+  var updateDraggingRef = useCallback(function (isDragging) {
+    // Only update if the state has changed from before
+    if (isDragging !== isDraggingRef.current) {
+      if (!isDragging) {
+        requestAnimationFrame(function () {
+          isDraggingRef.current = false;
+        });
+      } else {
+        isDraggingRef.current = true;
+      }
+    }
+  }, []);
+  return ___EmotionJSX("div", {
+    css: styles.euiDataGridHeaderCellDraggableWrapper,
+    onMouseDown: handleOnMouseDown,
+    onKeyDownCapture: handleOnKeydown
+  }, columnResizer, ___EmotionJSX(EuiDraggable, {
+    draggableId: id,
+    className: "euiDataGridHeaderCellDraggable",
+    css: styles.euiDataGridHeaderCellDraggable,
+    index: index,
+    customDragHandle: "custom",
+    hasInteractiveChildren: true,
+    usePortal: true
+  }, function (_ref4, _ref5) {
+    var dragHandleProps = _ref4.dragHandleProps;
+    var isDragging = _ref5.isDragging,
+      mode = _ref5.mode;
+    updateDraggingRef(isDragging);
+    var _ref6 = dragHandleProps !== null && dragHandleProps !== void 0 ? dragHandleProps : {},
+      role = _ref6.role,
+      tabIndex = _ref6.tabIndex,
+      restDragHandleProps = _objectWithoutProperties(_ref6, _excluded);
+    var passedProps = _objectSpread(_objectSpread({}, restDragHandleProps), {}, {
+      css: reapplyCellStyles,
+      'data-column-moving': isDraggingRef.current || undefined,
+      isDragging: isDragging
+    });
+
+    // since the cloned content is in a portal outside the datagrid
+    // we need to re-add styles to the cell as the scoped styles
+    // from the wrapper don't apply
+    var draggingStyles = [styles.euiDataGridHeaderCellDraggable,
+    // ensure height is maintained while dragging
+    dataGridStyles.cellPadding[gridStyles.cellPadding], dataGridStyles.fontSize[gridStyles.fontSize], dataGridStyles.borders[gridStyles.border], mode === 'SNAP' && styles.isKeyboardDragging];
+    return isDragging ? ___EmotionJSX("div", {
+      css: draggingStyles
+    }, ___EmotionJSX(DragOverlay, {
+      isDragging: true,
+      cursor: "grabbing"
+    }), children(passedProps)) : children(passedProps);
+  }));
+});
+DraggableColumn.propTypes = {
+  id: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+  gridStyles: PropTypes.shape({
+    /**
+       * Size of fonts used within the row and column cells
+       * @default m
+       */
+    fontSize: PropTypes.oneOf(["s", "m", "l"]),
+    /**
+       * Defines the padding with the row and column cells
+       * @default m
+       */
+    cellPadding: PropTypes.oneOf(["s", "m", "l"]),
+    /**
+       * Border used for the row and column cells
+       * @default all
+       */
+    border: PropTypes.oneOf(["all", "horizontal", "none"]),
+    /**
+       * If set to true, rows will alternate zebra striping for clarity
+       * @default false
+       */
+    stripes: PropTypes.bool,
+    /**
+       * Visual style for the column headers. Recommendation is to use the `underline` style in times when #EuiDataGrid `toolbarVisibility` is set to `false`.
+       * @default shade
+       */
+    header: PropTypes.oneOf(["shade", "underline"]),
+    /**
+       * Visual style for the column footers.
+       * @default overline
+       */
+    footer: PropTypes.oneOf(["shade", "overline", "striped"]),
+    /**
+       * If set to true, the footer row will be sticky
+       * @default true
+       */
+    stickyFooter: PropTypes.bool,
+    /**
+       * Will define what visual style to show on row hover
+       * @default hover
+       */
+    rowHover: PropTypes.oneOf(["highlight", "none"]),
+    /**
+       * Optionally pass custom classes to highlight or customize certain rows
+       */
+    rowClasses: PropTypes.shape({}),
+    /**
+       * Optional callback returning the current `gridStyle` config when changes occur from user input (e.g. toolbar display controls).
+       * Can be used for, e.g. storing user `gridStyle` in a local storage object.
+       */
+    onChange: PropTypes.func
+  }).isRequired,
+  columnResizer: PropTypes.node,
+  actionsPopoverToggle: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf([null])]),
+  children: PropTypes.func.isRequired
+};
+DraggableColumn.displayName = 'DraggableColumn';
+
+/**
+ * Components for conditionally rendering drag/drop wrappers
+ * Allows us to conditionally call hooks while not instantiating a bunch
+ * of extra state/etc., since draggable columns isn't yet(?) a default
+ */
+
+export var ConditionalDroppableColumns = /*#__PURE__*/memo(function (_ref7) {
+  var canDragAndDropColumns = _ref7.canDragAndDropColumns,
+    children = _ref7.children,
+    rest = _objectWithoutProperties(_ref7, _excluded2);
+  return canDragAndDropColumns ? ___EmotionJSX(DroppableColumns, rest, children) : ___EmotionJSX(React.Fragment, null, children);
+});
+ConditionalDroppableColumns.propTypes = {
+  canDragAndDropColumns: PropTypes.bool.isRequired
+};
+ConditionalDroppableColumns.displayName = 'ConditionalDroppableColumns';
+export var ConditionalDraggableColumn = /*#__PURE__*/memo(function (_ref8) {
+  var canDragAndDropColumns = _ref8.canDragAndDropColumns,
+    children = _ref8.children,
+    rest = _objectWithoutProperties(_ref8, _excluded3);
+  return canDragAndDropColumns ? ___EmotionJSX(DraggableColumn, rest, children) : ___EmotionJSX(React.Fragment, null, children());
+});
+ConditionalDraggableColumn.propTypes = {
+  canDragAndDropColumns: PropTypes.bool.isRequired
+};
+ConditionalDraggableColumn.displayName = 'ConditionalDraggableColumn';
+
+/**
+ * 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`
+ */
+var _ref10 = process.env.NODE_ENV === "production" ? {
+  name: "q8wbl-DragOverlay",
+  styles: "position:fixed;inset:0;label:DragOverlay;"
+} : {
+  name: "q8wbl-DragOverlay",
+  styles: "position:fixed;inset:0;label:DragOverlay;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var DragOverlay = /*#__PURE__*/memo(function (_ref9) {
+  var isDragging = _ref9.isDragging,
+    cursor = _ref9.cursor,
+    _ref9$zIndex = _ref9.zIndex,
+    zIndex = _ref9$zIndex === void 0 ? 9999 : _ref9$zIndex;
+  return isDragging ? ___EmotionJSX(EuiPortal, null, ___EmotionJSX("div", {
+    css: _ref10,
+    style: {
+      cursor: cursor,
+      zIndex: zIndex
+    }
+  })) : null;
+});
+DragOverlay.propTypes = {
+  isDragging: PropTypes.bool,
+  cursor: PropTypes.any,
+  zIndex: PropTypes.any
+};
+DragOverlay.displayName = 'DragOverlay';

package/es/components/datagrid/body/header/draggable_columns.styles.js

@@ -0,0 +1,38 @@
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css, keyframes } from '@emotion/react';
+import { euiCanAnimate, logicalCSS } from '../../../../global_styling';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "pfqu74-euiDataGridHeaderDroppable",
+  styles: "display:flex;label:euiDataGridHeaderDroppable;"
+} : {
+  name: "pfqu74-euiDataGridHeaderDroppable",
+  styles: "display:flex;label:euiDataGridHeaderDroppable;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiDataGridDraggableHeaderStyles = function euiDataGridDraggableHeaderStyles(_ref2) {
+  var euiTheme = _ref2.euiTheme;
+  return {
+    euiDataGridHeaderDroppable: _ref,
+    // The resizer must be positioned outside the draggable component to ensure both work independently
+    euiDataGridHeaderCellDraggableWrapper: /*#__PURE__*/css("position:relative;.euiDataGridColumnResizer::after{", logicalCSS('margin-left', "-".concat(euiTheme.border.width.thick)), ";};label:euiDataGridHeaderCellDraggableWrapper;"),
+    // override internal styling from @hello-pangea/dnd to ensure positioning
+    euiDataGridHeaderCellDraggable: /*#__PURE__*/css("display:flex;", logicalCSS('height', '100%'), ";;label:euiDataGridHeaderCellDraggable;"),
+    // Add more visual affordance to keyboard drags (raises cell slightly to show green droppable bg)
+    // Using animation as transition doesn't seem to work (a tale as old as EuiDataGrid...)
+    isKeyboardDragging: /*#__PURE__*/css("animation-name:", keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        from { transform: translateY(0); }\n        to { transform: translateY(-", "); }\n      "])), euiTheme.size.s), ";animation-iteration-count:1;animation-fill-mode:forwards;", euiCanAnimate, "{animation-duration:", euiTheme.animation.fast, ";};label:isKeyboardDragging;"),
+    // Ensure correct cell background colors on drag
+    underline: /*#__PURE__*/css("background-color:", euiTheme.colors.emptyShade, ";;label:underline;"),
+    shade: /*#__PURE__*/css("background-color:", euiTheme.colors.lightestShade, ";;label:shade;"),
+    noLeadingBorder: /*#__PURE__*/css(logicalCSS('border-left', 'none !important'), ";;label:noLeadingBorder;")
+  };
+};

package/es/components/datagrid/data_grid.js

@@ -403,7 +403,8 @@ export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (pr
     gridRef: gridRef,
     gridItemsRendered: gridItemsRendered,
     wrapperRef: contentRef,
-    renderCustomGridBody: renderCustomGridBody
+    renderCustomGridBody: renderCustomGridBody,
+    canDragAndDropColumns: columnVisibility.canDragAndDropColumns
   }))), showPagination && props['aria-labelledby'] && ___EmotionJSX("p", {
     id: ariaLabelledById,
     hidden: true

package/es/components/datagrid/data_grid.stories.utils.js

@@ -118,9 +118,6 @@ var columns = [{
       "aria-label": "Send email to ".concat(value)
     }, "Send email");
   }]
-}, {
-  id: 'location',
-  displayAsText: 'Location'
 }, {
   id: 'account',
   displayAsText: 'Account',
@@ -155,6 +152,9 @@ var columns = [{
       "aria-label": "Send money to ".concat(value)
     }, "Send money");
   }]
+}, {
+  id: 'location',
+  displayAsText: 'Location'
 }, {
   id: 'date',
   displayAsText: 'Date',
@@ -235,7 +235,8 @@ export var defaultStorybookArgs = {
   // setup for easier testing/QA
   columnVisibility: {
     visibleColumns: ['name', 'email', 'account', 'location', 'date', 'amount', 'phone', 'version'],
-    setVisibleColumns: function setVisibleColumns() {}
+    setVisibleColumns: function setVisibleColumns() {},
+    canDragAndDropColumns: false
   },
   inMemory: {
     level: 'sorting'
@@ -346,7 +347,8 @@ export var StatefulDataGrid = function StatefulDataGrid(props) {
   return ___EmotionJSX(EuiDataGrid, _extends({}, rest, {
     columnVisibility: {
       visibleColumns: visibleColumns,
-      setVisibleColumns: setVisibleColumns
+      setVisibleColumns: setVisibleColumns,
+      canDragAndDropColumns: columnVisibility.canDragAndDropColumns
     },
     sorting: {
       columns: sortingColumns,
@@ -855,7 +857,8 @@ EuiDataGridToolbarPropsComponent.propTypes = {
     /**
        * A callback for when a column's visibility or order is modified by the user.
        */
-    setVisibleColumns: PropTypes.func.isRequired
+    setVisibleColumns: PropTypes.func.isRequired,
+    /** Enables reordering grid columns on drag and drop via the headers cells */canDragAndDropColumns: PropTypes.bool
   }).isRequired,
   /**
        * An array of custom #EuiDataGridSchemaDetector objects. You can inject custom schemas to the grid to define the classnames applied.

package/es/components/datagrid/utils/col_widths.js

@@ -76,12 +76,10 @@ export var useColumnWidths = function useColumnWidths(_ref) {
     setColumnWidths(function (prevColumnWidths) {
       return _objectSpread(_objectSpread({}, prevColumnWidths), {}, _defineProperty({}, columnId, width));
     });
-    if (onColumnResize) {
-      onColumnResize({
-        columnId: columnId,
-        width: width
-      });
-    }
+    onColumnResize === null || onColumnResize === void 0 || onColumnResize({
+      columnId: columnId,
+      width: width
+    });
   }, [onColumnResize]);
 
   // Used by react-window to determine actual column widths

package/es/components/datagrid/utils/focus.js

@@ -47,11 +47,11 @@ export var useFocus = function useFocus() {
     _useState4 = _slicedToArray(_useState3, 2),
     focusedCell = _useState4[0],
     _setFocusedCell = _useState4[1];
-  var setFocusedCell = useCallback(function (nextFocusedCell) {
+  var setFocusedCell = useCallback(function (nextFocusedCell, forceUpdate) {
     _setFocusedCell(function (prevFocusedCell) {
       // If the x/y coordinates remained the same, don't update. This keeps the focusedCell
       // reference stable, and allows it to be used in places that need reference equality.
-      if (nextFocusedCell[0] === (prevFocusedCell === null || prevFocusedCell === void 0 ? void 0 : prevFocusedCell[0]) && nextFocusedCell[1] === (prevFocusedCell === null || prevFocusedCell === void 0 ? void 0 : prevFocusedCell[1])) {
+      if (!forceUpdate && nextFocusedCell[0] === (prevFocusedCell === null || prevFocusedCell === void 0 ? void 0 : prevFocusedCell[0]) && nextFocusedCell[1] === (prevFocusedCell === null || prevFocusedCell === void 0 ? void 0 : prevFocusedCell[1])) {
         return prevFocusedCell;
       } else {
         setIsFocusedCellInView(true); // scrolling.ts ensures focused cells are fully in view