@elastic/eui 97.0.0 → 97.1.0

package/es/components/datagrid/body/cell/data_grid_cell.styles.js

@@ -43,6 +43,7 @@ export var euiDataGridCellOutlineSelectors = function euiDataGridCellOutlineSele
 
   // Cell header specific selectors
   var headerActionsOpen = '.euiDataGridHeaderCell--isActionsPopoverOpen';
+  var isMoving = '[data-column-moving]'; // prevents the header column actions hover animation from replaying on column move
 
   // Utils
   var selectors = function selectors() {
@@ -76,10 +77,11 @@ export var euiDataGridCellOutlineSelectors = function euiDataGridCellOutlineSele
       hoverAnimation: hoverNot(selectors(focus, isOpen, isClosing))
     },
     header: {
-      focus: is(selectors(focus, focusWithin, headerActionsOpen)),
+      focus: is(selectors(focus, focusWithin, headerActionsOpen, isMoving)),
       // :focus-within here is primarily intended for when the column actions button has been clicked twice
       focusTrapped: _(isEntered),
-      hideActions: not(selectors(hover, focusWithin, headerActionsOpen))
+      showActions: is(selectors(hover, focusWithin, headerActionsOpen, isMoving)),
+      hideActions: not(selectors(hover, focusWithin, headerActionsOpen, isMoving))
     }
   };
 };

package/es/components/datagrid/body/cell/focus_utils.js

@@ -1,3 +1,5 @@
+function _toArray(r) { return _arrayWithHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableRest(); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
 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."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -104,16 +106,24 @@ export var FocusTrappedChildren = function FocusTrappedChildren(_ref2) {
 
   // direct DOM manipulation as workaround to attach required hints
   useEffect(function () {
+    var _currentAriaDescribed;
     var currentAriaDescribedbyId = cellEl.getAttribute('aria-describedby');
-    cellEl.setAttribute('aria-describedby', classNames(currentAriaDescribedbyId, ariaDescribedById));
+    // A11y: splitting ids to be able to append the first hint (sorting)
+    // while other hints should follow the keyboard navigation hints
+    var _ref3 = (_currentAriaDescribed = currentAriaDescribedbyId === null || currentAriaDescribedbyId === void 0 ? void 0 : currentAriaDescribedbyId.split(' ')) !== null && _currentAriaDescribed !== void 0 ? _currentAriaDescribed : [],
+      _ref4 = _toArray(_ref3),
+      sortingId = _ref4[0],
+      rest = _ref4.slice(1);
+    var remainingIds = rest.join(' ');
+    cellEl.setAttribute('aria-describedby', classNames(sortingId, ariaDescribedById, !isCellEntered && remainingIds));
     return function () {
       if (currentAriaDescribedbyId) {
-        cellEl.setAttribute('aria-descibedby', currentAriaDescribedbyId);
+        cellEl.setAttribute('aria-describedby', currentAriaDescribedbyId);
       } else {
         cellEl.removeAttribute('aria-describedby');
       }
     };
-  }, [cellEl, ariaDescribedById]);
+  }, [cellEl, ariaDescribedById, isCellEntered]);
   useEffect(function () {
     if (isCellEntered) {
       enableAndFocusInteractives(cellEl);
@@ -141,7 +151,7 @@ export var FocusTrappedChildren = function FocusTrappedChildren(_ref2) {
             } else if (
             // when opened content is closed, we don't want Escape to return to the cell
             // immediately but instead return focus to a trigger as expected
-            isCellEntered === false && isDOMNode(event.target) && isDOMNode(event.currentTarget) && event.currentTarget.contains(event.target)) {
+            isCellEntered === false && isDOMNode(event.target) && isDOMNode(event.currentTarget) && event.currentTarget !== event.target && event.currentTarget.contains(event.target)) {
               return true;
             }
             return isCellEntered;

package/es/components/datagrid/body/data_grid_body.js

@@ -653,5 +653,6 @@ EuiDataGridBody.propTypes = {
   gridRef: PropTypes.any.isRequired,
   gridItemsRendered: PropTypes.any.isRequired,
   wrapperRef: PropTypes.any.isRequired,
-  className: PropTypes.string
+  className: PropTypes.string,
+  canDragAndDropColumns: PropTypes.bool
 };

package/es/components/datagrid/body/data_grid_body_custom.js

@@ -49,6 +49,7 @@ export var EuiDataGridBodyCustomRender = /*#__PURE__*/memo(function (_ref) {
     columns = _ref.columns,
     setVisibleColumns = _ref.setVisibleColumns,
     switchColumnPos = _ref.switchColumnPos,
+    canDragAndDropColumns = _ref.canDragAndDropColumns,
     onColumnResize = _ref.onColumnResize,
     schema = _ref.schema,
     schemaDetectors = _ref.schemaDetectors,
@@ -102,12 +103,13 @@ export var EuiDataGridBodyCustomRender = /*#__PURE__*/memo(function (_ref) {
       setVisibleColumns: setVisibleColumns,
       visibleColCount: visibleColCount,
       switchColumnPos: switchColumnPos,
+      canDragAndDropColumns: canDragAndDropColumns,
       sorting: sorting,
       schema: schema,
       schemaDetectors: schemaDetectors,
       gridStyles: gridStyles
     };
-  }, [leadingControlColumns, trailingControlColumns, columns, columnWidths, defaultColumnWidth, setColumnWidth, visibleColCount, setVisibleColumns, switchColumnPos, sorting, schema, schemaDetectors, gridStyles]);
+  }, [leadingControlColumns, trailingControlColumns, columns, columnWidths, defaultColumnWidth, setColumnWidth, visibleColCount, setVisibleColumns, switchColumnPos, canDragAndDropColumns, sorting, schema, schemaDetectors, gridStyles]);
 
   /**
    * Header & footer
@@ -816,6 +818,7 @@ EuiDataGridBodyCustomRender.propTypes = {
   gridRef: PropTypes.any.isRequired,
   gridItemsRendered: PropTypes.any.isRequired,
   wrapperRef: PropTypes.any.isRequired,
-  className: PropTypes.string
+  className: PropTypes.string,
+  canDragAndDropColumns: PropTypes.bool
 };
 EuiDataGridBodyCustomRender.displayName = 'EuiDataGridBodyCustomRender';

package/es/components/datagrid/body/data_grid_body_virtualized.js

@@ -109,7 +109,8 @@ export var EuiDataGridBodyVirtualized = /*#__PURE__*/memo(function (_ref3) {
     gridRef = _ref3.gridRef,
     gridItemsRendered = _ref3.gridItemsRendered,
     wrapperRef = _ref3.wrapperRef,
-    className = _ref3.className;
+    className = _ref3.className,
+    canDragAndDropColumns = _ref3.canDragAndDropColumns;
   /**
    * Grid refs & observers
    */
@@ -160,7 +161,8 @@ export var EuiDataGridBodyVirtualized = /*#__PURE__*/memo(function (_ref3) {
       sorting: sorting,
       schema: schema,
       schemaDetectors: schemaDetectors,
-      gridStyles: gridStyles
+      gridStyles: gridStyles,
+      canDragAndDropColumns: canDragAndDropColumns
     }),
     headerRow = _useDataGridHeader.headerRow,
     headerRowHeight = _useDataGridHeader.headerRowHeight;
@@ -192,7 +194,8 @@ export var EuiDataGridBodyVirtualized = /*#__PURE__*/memo(function (_ref3) {
     headerRowHeight: headerRowHeight,
     footerRowHeight: footerRowHeight,
     visibleRowCount: visibleRowCount,
-    hasStickyFooter: !!(renderFooterCellValue && gridStyles.stickyFooter)
+    hasStickyFooter: !!(renderFooterCellValue && gridStyles.stickyFooter),
+    canDragAndDropColumns: canDragAndDropColumns
   });
 
   /**
@@ -940,6 +943,7 @@ EuiDataGridBodyVirtualized.propTypes = {
   gridRef: PropTypes.any.isRequired,
   gridItemsRendered: PropTypes.any.isRequired,
   wrapperRef: PropTypes.any.isRequired,
-  className: PropTypes.string
+  className: PropTypes.string,
+  canDragAndDropColumns: PropTypes.bool
 };
 EuiDataGridBodyVirtualized.displayName = 'EuiDataGridBodyVirtualized';

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

@@ -6,10 +6,15 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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 _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
 function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+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."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -18,24 +23,242 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
  * Side Public License, v 1.
  */
 
-import React from 'react';
-import { EuiI18n } from '../../../i18n';
+import React, { useContext, useState, useMemo, useCallback, useRef, memo, useEffect } from 'react';
+import PropTypes from "prop-types";
+import { tabbable } from 'tabbable';
+import { keys, useEuiMemoizedStyles } from '../../../../services';
+// Keep the i18n scope the same as EuiDataGridHeaderCell
+/* eslint-disable local/i18n */
+import { EuiI18n, useEuiI18n } from '../../../i18n';
+import { EuiPopover } from '../../../popover';
+import { EuiListGroup } from '../../../list_group';
+import { EuiButtonIcon } from '../../../button';
+import { DataGridFocusContext } from '../../utils/focus';
 import { getDetailsForSchema } from '../../utils/data_grid_schema';
 import { defaultSortAscLabel, defaultSortDescLabel } from '../../controls/column_sorting_draggable';
+import { euiDataGridHeaderCellStyles } from './data_grid_header_cell.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var getColumnActions = function getColumnActions(_ref) {
-  var _column$actions;
-  var column = _ref.column,
+export var useHasColumnActions = function useHasColumnActions(columnActions) {
+  return useMemo(function () {
+    // By default, all column actions are enabled
+    if (columnActions === undefined) return true;
+    if (columnActions === false) return false;
+    if (columnActions.additional && columnActions.additional.length) return true;
+    // Check if all (currently 5) default column actions have been manually disabled
+    var disabledActions = Object.values(columnActions).filter(function (action) {
+      return action === false;
+    });
+    return disabledActions.length < 5;
+  }, [columnActions]);
+};
+
+// Props to pass back to EuiDataGridHeaderCell and set on EuiDataGridHeaderCellWrapper
+
+export var ColumnActions = /*#__PURE__*/memo(function (_ref) {
+  var index = _ref.index,
+    id = _ref.id,
+    title = _ref.title,
+    column = _ref.column,
     columns = _ref.columns,
     schema = _ref.schema,
     schemaDetectors = _ref.schemaDetectors,
     setVisibleColumns = _ref.setVisibleColumns,
-    focusFirstVisibleInteractiveCell = _ref.focusFirstVisibleInteractiveCell,
-    setIsPopoverOpen = _ref.setIsPopoverOpen,
-    sorting = _ref.sorting,
     switchColumnPos = _ref.switchColumnPos,
-    setFocusedCell = _ref.setFocusedCell,
-    columnFocusIndex = _ref.columnFocusIndex;
+    sorting = _ref.sorting,
+    hasFocusTrap = _ref.hasFocusTrap,
+    setPropsFromColumnActions = _ref.setPropsFromColumnActions,
+    actionsButtonRef = _ref.actionsButtonRef;
+  /**
+   * Popover logic and accessibility
+   */
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isPopoverOpen = _useState2[0],
+    setIsPopoverOpen = _useState2[1];
+  var togglePopover = useCallback(function () {
+    setIsPopoverOpen(function (isOpen) {
+      return !isOpen;
+    });
+  }, []);
+  var closePopover = useCallback(function () {
+    setIsPopoverOpen(false);
+  }, []);
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isActionsButtonFocused = _useState4[0],
+    setIsActionsButtonFocused = _useState4[1];
+  var onFocus = useCallback(function () {
+    return setIsActionsButtonFocused(true);
+  }, []);
+  var onBlur = useCallback(function () {
+    return setIsActionsButtonFocused(false);
+  }, []);
+  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");
+  var openActionsPopoverOnEnter = useCallback(function (e) {
+    if (e.key === keys.ENTER) {
+      setIsPopoverOpen(true);
+    }
+  }, []);
+  var popoverArrowNavigationProps = usePopoverArrowNavigation();
+
+  /**
+   * Props to set on parent EuiDataGridHeaderCell
+   */
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isColumnMoving = _useState6[0],
+    setIsColumnMoving = _useState6[1];
+  useEffect(function () {
+    setPropsFromColumnActions({
+      className: isPopoverOpen ? 'euiDataGridHeaderCell--isActionsPopoverOpen' : '',
+      onKeyDown: openActionsPopoverOnEnter,
+      'data-column-moving': isColumnMoving || undefined
+    });
+  }, [setPropsFromColumnActions, isPopoverOpen, openActionsPopoverOnEnter, isColumnMoving]);
+
+  /**
+   * Get column actions as an array of EuiListGroup items
+   */
+  var _useContext = useContext(DataGridFocusContext),
+    setFocusedCell = _useContext.setFocusedCell,
+    focusFirstVisibleInteractiveCell = _useContext.focusFirstVisibleInteractiveCell;
+  var columnActions = useMemo(function () {
+    return getColumnActions({
+      column: column,
+      columns: columns,
+      schema: schema,
+      schemaDetectors: schemaDetectors,
+      setVisibleColumns: setVisibleColumns,
+      focusFirstVisibleInteractiveCell: focusFirstVisibleInteractiveCell,
+      sorting: sorting,
+      switchColumnPos: switchColumnPos,
+      setIsPopoverOpen: setIsPopoverOpen,
+      setIsColumnMoving: setIsColumnMoving,
+      setFocusedCell: setFocusedCell,
+      columnFocusIndex: index
+    });
+  }, [column, columns, schema, schemaDetectors, setVisibleColumns, focusFirstVisibleInteractiveCell, sorting, switchColumnPos, setFocusedCell, index]);
+
+  /**
+   * Rendering
+   */
+  var styles = useEuiMemoizedStyles(euiDataGridHeaderCellStyles);
+  return ___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__actions,
+      className: "euiDataGridHeaderCell__button",
+      onClick: togglePopover,
+      buttonRef: actionsButtonRef,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      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)
+  }));
+});
+ColumnActions.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  hasFocusTrap: PropTypes.bool.isRequired,
+  setPropsFromColumnActions: PropTypes.func.isRequired,
+  actionsButtonRef: PropTypes.any.isRequired
+};
+ColumnActions.displayName = 'EuiDataGridHeaderCellColumnActions';
+
+/**
+ * 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."
+    })
+  };
+};
+
+/**
+ * Logic for returning an array of actions/items to pass to EuiListGroup
+ */
+
+export var getColumnActions = function getColumnActions(_ref2) {
+  var _column$actions;
+  var column = _ref2.column,
+    columns = _ref2.columns,
+    schema = _ref2.schema,
+    schemaDetectors = _ref2.schemaDetectors,
+    setVisibleColumns = _ref2.setVisibleColumns,
+    focusFirstVisibleInteractiveCell = _ref2.focusFirstVisibleInteractiveCell,
+    setIsPopoverOpen = _ref2.setIsPopoverOpen,
+    sorting = _ref2.sorting,
+    switchColumnPos = _ref2.switchColumnPos,
+    setIsColumnMoving = _ref2.setIsColumnMoving,
+    setFocusedCell = _ref2.setFocusedCell,
+    columnFocusIndex = _ref2.columnFocusIndex;
   if (column.actions === false) {
     return [];
   }
@@ -53,6 +276,7 @@ export var getColumnActions = function getColumnActions(_ref) {
     column: column,
     columns: columns,
     switchColumnPos: switchColumnPos,
+    setIsColumnMoving: setIsColumnMoving,
     setFocusedCell: setFocusedCell,
     columnFocusIndex: columnFocusIndex
   })), _toConsumableArray(((_column$actions = column.actions) === null || _column$actions === void 0 ? void 0 : _column$actions.additional) || []));
@@ -74,11 +298,11 @@ export var getColumnActions = function getColumnActions(_ref) {
  * Hide column action
  */
 
-export var getHideColumnAction = function getHideColumnAction(_ref2) {
-  var column = _ref2.column,
-    columns = _ref2.columns,
-    setVisibleColumns = _ref2.setVisibleColumns,
-    focusFirstVisibleInteractiveCell = _ref2.focusFirstVisibleInteractiveCell;
+export var getHideColumnAction = function getHideColumnAction(_ref3) {
+  var column = _ref3.column,
+    columns = _ref3.columns,
+    setVisibleColumns = _ref3.setVisibleColumns,
+    focusFirstVisibleInteractiveCell = _ref3.focusFirstVisibleInteractiveCell;
   var items = [];
   var onClickHideColumn = function onClickHideColumn() {
     setVisibleColumns(columns.filter(function (col) {
@@ -109,16 +333,25 @@ export var getHideColumnAction = function getHideColumnAction(_ref2) {
  * Move column actions
  */
 
-var getMoveColumnActions = function getMoveColumnActions(_ref3) {
-  var column = _ref3.column,
-    columns = _ref3.columns,
-    switchColumnPos = _ref3.switchColumnPos,
-    setFocusedCell = _ref3.setFocusedCell,
-    columnFocusIndex = _ref3.columnFocusIndex;
+var getMoveColumnActions = function getMoveColumnActions(_ref4) {
+  var column = _ref4.column,
+    columns = _ref4.columns,
+    switchColumnPos = _ref4.switchColumnPos,
+    setIsColumnMoving = _ref4.setIsColumnMoving,
+    setFocusedCell = _ref4.setFocusedCell,
+    columnFocusIndex = _ref4.columnFocusIndex;
   var items = [];
   var colIdx = columns.findIndex(function (col) {
     return col.id === column.id;
   });
+
+  // UX polish: prevent the column actions hover animation from flashing after column move
+  var handleAnimationFlash = function handleAnimationFlash() {
+    setIsColumnMoving(true);
+    requestAnimationFrame(function () {
+      return setIsColumnMoving(false);
+    });
+  };
   var moveFocus = function moveFocus(direction) {
     var newIndex = direction === 'left' ? -1 : 1;
     // Wait a beat to move focus, otherwise the EuiPopover's EuiFocusTrap's
@@ -132,6 +365,7 @@ var getMoveColumnActions = function getMoveColumnActions(_ref3) {
       var targetCol = columns[colIdx - 1];
       if (targetCol) {
         switchColumnPos(column.id, targetCol.id);
+        handleAnimationFlash();
         moveFocus('left');
       }
     };
@@ -153,6 +387,7 @@ var getMoveColumnActions = function getMoveColumnActions(_ref3) {
       var targetCol = columns[colIdx + 1];
       if (targetCol) {
         switchColumnPos(column.id, targetCol.id);
+        handleAnimationFlash();
         moveFocus('right');
       }
     };
@@ -176,11 +411,11 @@ var getMoveColumnActions = function getMoveColumnActions(_ref3) {
  * Sort column actions
  */
 
-export var getSortColumnActions = function getSortColumnActions(_ref4) {
-  var column = _ref4.column,
-    sorting = _ref4.sorting,
-    schema = _ref4.schema,
-    schemaDetectors = _ref4.schemaDetectors;
+export var getSortColumnActions = function getSortColumnActions(_ref5) {
+  var column = _ref5.column,
+    sorting = _ref5.sorting,
+    schema = _ref5.schema,
+    schemaDetectors = _ref5.schemaDetectors;
   if (!sorting) return [];
   var items = [];
   var sortingIdx = sorting.columns.findIndex(function (col) {

package/es/components/datagrid/body/header/{data_grid_column_resizer.js → column_resizer.js}

@@ -24,7 +24,8 @@ import React, { Component } from 'react';
 import PropTypes from "prop-types";
 import { RenderWithEuiStylesMemoizer } from '../../../../services';
 import { logicalStyle } from '../../../../global_styling';
-import { euiDataGridColumnResizerStyles } from './data_grid_column_resizer.styles';
+import { DragOverlay } from './draggable_columns';
+import { euiDataGridColumnResizerStyles } from './column_resizer.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var MINIMUM_COLUMN_WIDTH = 40;
 export var EuiDataGridColumnResizer = /*#__PURE__*/function (_Component) {
@@ -81,16 +82,20 @@ export var EuiDataGridColumnResizer = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this2 = this;
       var offset = this.state.offset;
+      var isLastColumn = this.props.isLastColumn;
       return ___EmotionJSX(RenderWithEuiStylesMemoizer, null, function (stylesMemoizer) {
         var styles = stylesMemoizer(euiDataGridColumnResizerStyles);
-        var cssStyles = [styles.euiDataGridColumnResizer, offset && styles.isDragging];
+        var cssStyles = [styles.euiDataGridColumnResizer, isLastColumn && styles.isLastColumn, offset && styles.isDragging];
         return ___EmotionJSX("div", {
           css: cssStyles,
           className: "euiDataGridColumnResizer",
           "data-test-subj": "dataGridColumnResizer",
           style: offset ? logicalStyle('margin-right', "".concat(-offset, "px")) : undefined,
           onMouseDown: _this2.onMouseDown
-        });
+        }, ___EmotionJSX(DragOverlay, {
+          isDragging: !!offset,
+          cursor: "ew-resize"
+        }));
       });
     }
   }]);
@@ -98,5 +103,6 @@ export var EuiDataGridColumnResizer = /*#__PURE__*/function (_Component) {
 EuiDataGridColumnResizer.propTypes = {
   columnId: PropTypes.string.isRequired,
   columnWidth: PropTypes.number.isRequired,
-  setColumnWidth: PropTypes.func.isRequired
+  setColumnWidth: PropTypes.func.isRequired,
+  isLastColumn: PropTypes.bool.isRequired
 };

package/es/components/datagrid/body/header/{data_grid_column_resizer.styles.js → column_resizer.styles.js}

@@ -30,7 +30,12 @@ export var euiDataGridColumnResizerStyles = function euiDataGridColumnResizerSty
   }); // Odd number because it straddles a border
   var indicatorOffset = "-".concat(euiTheme.border.width.thin);
   return {
-    euiDataGridColumnResizer: /*#__PURE__*/css("z-index:2;position:absolute;", logicalCSS('vertical', 0), " ", logicalCSS('right', positionOffset), " cursor:ew-resize;opacity:0;&:hover,&:active{opacity:1;}&::after{content:'';position:absolute;", logicalCSS('vertical', 0), " ", logicalCSS('left', positionOffset), " ", logicalCSS('margin-left', indicatorOffset), " ", logicalCSS('width', indicatorWidth), " background-color:", euiTheme.colors.primary, ";}.euiDataGridHeaderCell:last-child &{", logicalCSS('right', 0), " ", logicalCSS('width', euiTheme.size.s), " &::after{", logicalCSS('left', 'auto'), " ", logicalCSS('right', 0), ";}};label:euiDataGridColumnResizer;"),
+    euiDataGridColumnResizer: /*#__PURE__*/css("z-index:2;position:absolute;", logicalCSS('vertical', 0), " ", logicalCSS('right', positionOffset), " cursor:ew-resize;opacity:0;&:hover,&:active{opacity:1;}&::after{content:'';position:absolute;", logicalCSS('vertical', 0), " ", logicalCSS('left', positionOffset), " ", logicalCSS('margin-left', indicatorOffset), " ", logicalCSS('width', indicatorWidth), " background-color:", euiTheme.colors.primary, ";};label:euiDataGridColumnResizer;"),
+    /* Because the resizer sits in the negative space to the right of the column,
+     * it can cause the full grid to be a few pixels longer than it actually is.
+     * So for the last cell, we don't use negative positioning and the borders from
+     * the cell will match the container. */
+    isLastColumn: /*#__PURE__*/css(logicalCSS('right', 0), " ", logicalCSS('width', euiTheme.size.s), " &::after{", logicalCSS('left', 'auto'), " ", logicalCSS('right', 0), ";};label:isLastColumn;"),
     isDragging: _ref
   };
 };