@elastic/eui 97.0.0 → 97.2.0

package/optimize/es/components/header/header.styles.js

@@ -19,23 +19,18 @@ export var euiHeaderVariables = function euiHeaderVariables(euiThemeContext) {
   };
 };
 export var euiHeaderStyles = function euiHeaderStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme,
-    colorMode = euiThemeContext.colorMode;
+  var euiTheme = euiThemeContext.euiTheme;
   var _euiHeaderVariables = euiHeaderVariables(euiThemeContext),
     height = _euiHeaderVariables.height,
     padding = _euiHeaderVariables.padding;
-
-  // Curated border color to fade into the shadow without looking too much like a border
-  // It adds separation between the header and flyout
-  var borderColor = colorMode === 'DARK' ? shade(euiTheme.colors.emptyShade, 0.35) : shade(euiTheme.border.color, 0.03);
   return {
-    euiHeader: /*#__PURE__*/css("display:flex;justify-content:space-between;", logicalCSS('height', height), " ", logicalCSS('padding-horizontal', padding), " ", euiShadowSmall(euiThemeContext), ";;label:euiHeader;"),
+    euiHeader: /*#__PURE__*/css("display:flex;justify-content:space-between;", logicalCSS('height', height), " ", logicalCSS('padding-horizontal', padding), " ", logicalCSS('border-bottom', euiTheme.border.thin), " ", euiShadowSmall(euiThemeContext), ";;label:euiHeader;"),
     // Position
     static: /*#__PURE__*/css("z-index:", Number(euiTheme.levels.header) - 1, ";position:relative;;label:static;"),
     fixed: /*#__PURE__*/css("z-index:", euiTheme.levels.header, ";position:fixed;", logicalCSS('top', 0), " ", logicalCSS('horizontal', 0), ";;label:fixed;"),
     // Theme
-    default: /*#__PURE__*/css("background-color:", euiTheme.colors.emptyShade, ";", logicalCSS('border-bottom', "".concat(euiTheme.border.width.thin, " solid ").concat(borderColor)), ";;label:default;"),
-    dark: /*#__PURE__*/css(euiHeaderDarkStyles(euiThemeContext, borderColor), ";label:dark;")
+    default: /*#__PURE__*/css("background-color:", euiTheme.colors.emptyShade, ";;label:default;"),
+    dark: /*#__PURE__*/css(euiHeaderDarkStyles(euiThemeContext), ";label:dark;")
   };
 };
 
@@ -49,12 +44,11 @@ export var euiHeaderStyles = function euiHeaderStyles(euiThemeContext) {
  * by Kibana in the near future, at which point we can remove this
  */
 import { euiFormVariables } from '../form/form.styles';
-var euiHeaderDarkStyles = function euiHeaderDarkStyles(euiThemeContext, defaultBorderColor) {
+var euiHeaderDarkStyles = function euiHeaderDarkStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
     colorMode = euiThemeContext.colorMode;
   var _euiFormVariables = euiFormVariables(euiThemeContext),
     controlPlaceholderText = _euiFormVariables.controlPlaceholderText;
   var backgroundColor = colorMode === 'DARK' ? shade(euiTheme.colors.lightestShade, 0.5) : shade(euiTheme.colors.darkestShade, 0.28);
-  var borderColor = colorMode === 'DARK' ? defaultBorderColor : backgroundColor;
-  return "\n    background-color: ".concat(backgroundColor, ";\n    ").concat(logicalCSS('border-bottom-color', borderColor), "\n\n    .euiHeaderLogo__text,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      color: ").concat(euiTheme.colors.ghost, ";\n    }\n\n    .euiHeaderLink-isActive {\n      color: ").concat(makeHighContrastColor(euiTheme.colors.primary)(backgroundColor), ";\n    }\n\n    .euiHeaderLogo,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      &:focus {\n        background-color: ").concat(shade(euiTheme.colors.primary, 0.5), ";\n      }\n    }\n\n    .euiHeaderSectionItemButton__notification--badge {\n      box-shadow: 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(backgroundColor, ";\n    }\n\n    .euiHeaderSectionItemButton__notification--dot {\n      stroke: ").concat(backgroundColor, ";\n    }\n\n    .euiSelectableTemplateSitewide .euiFormControlLayout {\n      background-color: transparent;\n\n      &--group {\n        border-color: ").concat(transparentize(euiTheme.colors.ghost, 0.3), ";\n      }\n\n      &:not(:focus-within) {\n        /* Increase contrast of filled text to be more than placeholder text */\n        color: ").concat(euiTheme.colors.ghost, ";\n\n        input {\n          /* Increase contrast of placeholder text */\n          &::placeholder {\n            color: ").concat(makeHighContrastColor(controlPlaceholderText, 8)(backgroundColor), ";\n          }\n\n          /* Inherit color from form control layout */\n          color: inherit;\n          background-color: transparent;\n        }\n\n        .euiFormControlLayout__append,\n        .euiFormControlLayout__prepend {\n          background-color: transparent;\n        }\n\n        .euiFormLabel {\n          color: inherit;\n        }\n      }\n    }\n  ");
+  return "\n    background-color: ".concat(backgroundColor, ";\n\n    .euiHeaderLogo__text,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      color: ").concat(euiTheme.colors.ghost, ";\n    }\n\n    .euiHeaderLink-isActive {\n      color: ").concat(makeHighContrastColor(euiTheme.colors.primary)(backgroundColor), ";\n    }\n\n    .euiHeaderLogo,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      &:focus {\n        background-color: ").concat(shade(euiTheme.colors.primary, 0.5), ";\n      }\n    }\n\n    .euiHeaderSectionItemButton__notification--badge {\n      box-shadow: 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(backgroundColor, ";\n    }\n\n    .euiHeaderSectionItemButton__notification--dot {\n      stroke: ").concat(backgroundColor, ";\n    }\n\n    .euiSelectableTemplateSitewide .euiFormControlLayout {\n      background-color: transparent;\n\n      &--group {\n        border-color: ").concat(transparentize(euiTheme.colors.ghost, 0.3), ";\n      }\n\n      &:not(:focus-within) {\n        /* Increase contrast of filled text to be more than placeholder text */\n        color: ").concat(euiTheme.colors.ghost, ";\n\n        input {\n          /* Increase contrast of placeholder text */\n          &::placeholder {\n            color: ").concat(makeHighContrastColor(controlPlaceholderText, 8)(backgroundColor), ";\n          }\n\n          /* Inherit color from form control layout */\n          color: inherit;\n          background-color: transparent;\n        }\n\n        .euiFormControlLayout__append,\n        .euiFormControlLayout__prepend {\n          background-color: transparent;\n        }\n\n        .euiFormLabel {\n          color: inherit;\n        }\n      }\n    }\n  ");
 };

package/optimize/es/components/header/header_links/header_links.js

@@ -21,7 +21,7 @@ import { EuiHeaderSectionItemButton } from '../header_section';
 import { EuiHideFor, EuiShowFor } from '../../responsive';
 import { euiHeaderLinksStyles } from './header_links.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var GUTTER_SIZES = ['xs', 's', 'm', 'l'];
+export var GUTTER_SIZES = ['xxs', 'xs', 's', 'm', 'l'];
 export var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
   var children = _ref.children,
     className = _ref.className,

package/optimize/es/components/header/header_links/header_links.styles.js

@@ -31,6 +31,7 @@ export var euiHeaderLinksStyles = function euiHeaderLinksStyles(_ref3) {
     euiHeaderLinks: _ref2,
     euiHeaderLinks__list: _ref,
     gutterSizes: {
+      xxs: /*#__PURE__*/css("gap:", euiTheme.size.xs, ";;label:xxs;"),
       xs: /*#__PURE__*/css("gap:", euiTheme.size.s, ";;label:xs;"),
       s: /*#__PURE__*/css("gap:", euiTheme.size.m, ";;label:s;"),
       m: /*#__PURE__*/css("gap:", euiTheme.size.base, ";;label:m;"),

package/optimize/es/components/page_template/inner/page_inner.styles.js

@@ -9,15 +9,14 @@
 import { css } from '@emotion/react';
 import { euiShadow } from '../../../themes/amsterdam/global_styling/mixins';
 import { euiBackgroundColor, logicalCSS } from '../../../global_styling';
-import { transparentize } from '../../../services';
 export var euiPageInnerStyles = function euiPageInnerStyles(euiThemeContext) {
-  var borderColor = transparentize(euiThemeContext.euiTheme.colors.lightShade, 0.7);
+  var euiTheme = euiThemeContext.euiTheme;
   return {
     euiPageInner: /*#__PURE__*/css("display:flex;flex-direction:column;align-items:stretch;flex:1 1 100%;", logicalCSS('max-width', '100%'), " ", logicalCSS('min-width', '0'), ";;label:euiPageInner;"),
     panelled: /*#__PURE__*/css("background:", euiBackgroundColor(euiThemeContext, 'plain'), ";", euiShadow(euiThemeContext, 'm'), ";;label:panelled;"),
     border: {
-      top: /*#__PURE__*/css(logicalCSS('border-top', "".concat(euiThemeContext.euiTheme.border.width.thin, " solid ").concat(borderColor)), ";;label:top;"),
-      left: /*#__PURE__*/css(logicalCSS('border-left', "".concat(euiThemeContext.euiTheme.border.width.thin, " solid ").concat(borderColor)), ";;label:left;")
+      top: /*#__PURE__*/css(logicalCSS('border-top', euiTheme.border.thin), ";;label:top;"),
+      left: /*#__PURE__*/css(logicalCSS('border-left', euiTheme.border.thin), ";;label:left;")
     }
   };
 };

package/optimize/es/components/tabs/tab.js

@@ -65,7 +65,7 @@ export var EuiTab = function EuiTab(_ref) {
       target: target,
       rel: secureRel
     }, rest), prependNode, ___EmotionJSX("span", {
-      className: "euiTab__content",
+      className: "euiTab__content eui-textTruncate",
       css: cssTabContentStyles
     }, children), appendNode);
   }

package/optimize/lib/components/datagrid/body/cell/data_grid_cell.styles.js

@@ -47,6 +47,7 @@ var euiDataGridCellOutlineSelectors = exports.euiDataGridCellOutlineSelectors =
 
   // 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() {
@@ -80,10 +81,11 @@ var euiDataGridCellOutlineSelectors = exports.euiDataGridCellOutlineSelectors =
       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/optimize/lib/components/datagrid/body/cell/focus_utils.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.HandleInteractiveChildren = exports.FocusTrappedChildren = void 0;
+var _toArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _tabbable = require("tabbable");
@@ -101,16 +102,24 @@ var FocusTrappedChildren = exports.FocusTrappedChildren = function FocusTrappedC
 
   // direct DOM manipulation as workaround to attach required hints
   (0, _react.useEffect)(function () {
+    var _currentAriaDescribed;
     var currentAriaDescribedbyId = cellEl.getAttribute('aria-describedby');
-    cellEl.setAttribute('aria-describedby', (0, _classnames.default)(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 = (0, _toArray2.default)(_ref3),
+      sortingId = _ref4[0],
+      rest = _ref4.slice(1);
+    var remainingIds = rest.join(' ');
+    cellEl.setAttribute('aria-describedby', (0, _classnames.default)(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]);
   (0, _react.useEffect)(function () {
     if (isCellEntered) {
       enableAndFocusInteractives(cellEl);
@@ -138,7 +147,7 @@ var FocusTrappedChildren = exports.FocusTrappedChildren = function FocusTrappedC
             } 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 && (0, _utils.isDOMNode)(event.target) && (0, _utils.isDOMNode)(event.currentTarget) && event.currentTarget.contains(event.target)) {
+            isCellEntered === false && (0, _utils.isDOMNode)(event.target) && (0, _utils.isDOMNode)(event.currentTarget) && event.currentTarget !== event.target && event.currentTarget.contains(event.target)) {
               return true;
             }
             return isCellEntered;

package/optimize/lib/components/datagrid/body/data_grid_body_custom.js

@@ -45,6 +45,7 @@ var EuiDataGridBodyCustomRender = exports.EuiDataGridBodyCustomRender = /*#__PUR
     columns = _ref.columns,
     setVisibleColumns = _ref.setVisibleColumns,
     switchColumnPos = _ref.switchColumnPos,
+    canDragAndDropColumns = _ref.canDragAndDropColumns,
     onColumnResize = _ref.onColumnResize,
     schema = _ref.schema,
     schemaDetectors = _ref.schemaDetectors,
@@ -98,12 +99,13 @@ var EuiDataGridBodyCustomRender = exports.EuiDataGridBodyCustomRender = /*#__PUR
       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

package/optimize/lib/components/datagrid/body/data_grid_body_virtualized.js

@@ -112,7 +112,8 @@ var EuiDataGridBodyVirtualized = exports.EuiDataGridBodyVirtualized = /*#__PURE_
     gridRef = _ref3.gridRef,
     gridItemsRendered = _ref3.gridItemsRendered,
     wrapperRef = _ref3.wrapperRef,
-    className = _ref3.className;
+    className = _ref3.className,
+    canDragAndDropColumns = _ref3.canDragAndDropColumns;
   /**
    * Grid refs & observers
    */
@@ -163,7 +164,8 @@ var EuiDataGridBodyVirtualized = exports.EuiDataGridBodyVirtualized = /*#__PURE_
       sorting: sorting,
       schema: schema,
       schemaDetectors: schemaDetectors,
-      gridStyles: gridStyles
+      gridStyles: gridStyles,
+      canDragAndDropColumns: canDragAndDropColumns
     }),
     headerRow = _useDataGridHeader.headerRow,
     headerRowHeight = _useDataGridHeader.headerRowHeight;
@@ -195,7 +197,8 @@ var EuiDataGridBodyVirtualized = exports.EuiDataGridBodyVirtualized = /*#__PURE_
     headerRowHeight: headerRowHeight,
     footerRowHeight: footerRowHeight,
     visibleRowCount: visibleRowCount,
-    hasStickyFooter: !!(renderFooterCellValue && gridStyles.stickyFooter)
+    hasStickyFooter: !!(renderFooterCellValue && gridStyles.stickyFooter),
+    canDragAndDropColumns: canDragAndDropColumns
   });
 
   /**

package/optimize/lib/components/datagrid/body/header/column_actions.js

@@ -1,18 +1,30 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isColumnActionEnabled = exports.getSortColumnActions = exports.getHideColumnAction = exports.getColumnActions = exports.getColumnActionConfig = void 0;
+exports.usePopoverArrowNavigation = exports.useHasColumnActions = exports.isColumnActionEnabled = exports.getSortColumnActions = exports.getHideColumnAction = exports.getColumnActions = exports.getColumnActionConfig = exports.ColumnActions = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _react = _interopRequireDefault(require("react"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _tabbable = require("tabbable");
+var _services = require("../../../../services");
 var _i18n = require("../../../i18n");
+var _popover = require("../../../popover");
+var _list_group = require("../../../list_group");
+var _button = require("../../../button");
+var _focus = require("../../utils/focus");
 var _data_grid_schema = require("../../utils/data_grid_schema");
 var _column_sorting_draggable = require("../../controls/column_sorting_draggable");
+var _data_grid_header_cell = require("./data_grid_header_cell.styles");
 var _react2 = require("@emotion/react");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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) { (0, _defineProperty2.default)(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; } /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -20,20 +32,222 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * 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.
- */
-var getColumnActions = exports.getColumnActions = function getColumnActions(_ref) {
-  var _column$actions;
-  var column = _ref.column,
+ */ // Keep the i18n scope the same as EuiDataGridHeaderCell
+/* eslint-disable local/i18n */
+var useHasColumnActions = exports.useHasColumnActions = function useHasColumnActions(columnActions) {
+  return (0, _react.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
+
+var ColumnActions = exports.ColumnActions = /*#__PURE__*/(0, _react.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 = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isPopoverOpen = _useState2[0],
+    setIsPopoverOpen = _useState2[1];
+  var togglePopover = (0, _react.useCallback)(function () {
+    setIsPopoverOpen(function (isOpen) {
+      return !isOpen;
+    });
+  }, []);
+  var closePopover = (0, _react.useCallback)(function () {
+    setIsPopoverOpen(false);
+  }, []);
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isActionsButtonFocused = _useState4[0],
+    setIsActionsButtonFocused = _useState4[1];
+  var onFocus = (0, _react.useCallback)(function () {
+    return setIsActionsButtonFocused(true);
+  }, []);
+  var onBlur = (0, _react.useCallback)(function () {
+    return setIsActionsButtonFocused(false);
+  }, []);
+  var actionsButtonAriaLabel = (0, _i18n.useEuiI18n)('euiDataGridHeaderCell.actionsButtonAriaLabel', '{title}. Click to view column header actions.', {
+    title: title
+  });
+  var actionsEnterKeyInstructions = (0, _i18n.useEuiI18n)('euiDataGridHeaderCell.actionsEnterKeyInstructions', "Press the Enter key to view this column's actions");
+  var openActionsPopoverOnEnter = (0, _react.useCallback)(function (e) {
+    if (e.key === _services.keys.ENTER) {
+      setIsPopoverOpen(true);
+    }
+  }, []);
+  var popoverArrowNavigationProps = usePopoverArrowNavigation();
+
+  /**
+   * Props to set on parent EuiDataGridHeaderCell
+   */
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    isColumnMoving = _useState6[0],
+    setIsColumnMoving = _useState6[1];
+  (0, _react.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 = (0, _react.useContext)(_focus.DataGridFocusContext),
+    setFocusedCell = _useContext.setFocusedCell,
+    focusFirstVisibleInteractiveCell = _useContext.focusFirstVisibleInteractiveCell;
+  var columnActions = (0, _react.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 = (0, _services.useEuiMemoizedStyles)(_data_grid_header_cell.euiDataGridHeaderCellStyles);
+  return (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({
+    display: "block",
+    panelPaddingSize: "none",
+    offset: 7,
+    anchorPosition: "downRight",
+    css: styles.euiDataGridHeaderCell__popover,
+    button: (0, _react2.jsx)(_button.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), (0, _react2.jsx)(_list_group.EuiListGroup, {
+    listItems: columnActions,
+    gutterSize: "none",
+    "data-test-subj": "dataGridHeaderCellActionGroup-".concat(id)
+  }));
+});
+ColumnActions.displayName = 'EuiDataGridHeaderCellColumnActions';
+
+/**
+ * Add keyboard arrow navigation to the cell actions popover
+ * to match the UX of the rest of EuiDataGrid
+ */
+var usePopoverArrowNavigation = exports.usePopoverArrowNavigation = function usePopoverArrowNavigation() {
+  var popoverPanelRef = (0, _react.useRef)(null);
+  var actionsRef = (0, _react.useRef)(undefined);
+  var panelRef = (0, _react.useCallback)(function (ref) {
+    popoverPanelRef.current = ref;
+    actionsRef.current = ref ? (0, _tabbable.tabbable)(ref) : undefined;
+  }, []);
+  var onKeyDown = (0, _react.useCallback)(function (e) {
+    var _actionsRef$current;
+    if (e.key !== _services.keys.ARROW_DOWN && e.key !== _services.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 === _services.keys.ARROW_DOWN) {
+        indexToFocus = 0;
+      } else if (e.key === _services.keys.ARROW_UP) {
+        indexToFocus = lastIndex;
+      }
+    } else {
+      if (e.key === _services.keys.ARROW_DOWN) {
+        indexToFocus = currentIndex + 1;
+        if (indexToFocus > lastIndex) {
+          indexToFocus = 0;
+        }
+      } else if (e.key === _services.keys.ARROW_UP) {
+        indexToFocus = currentIndex - 1;
+        if (indexToFocus < 0) {
+          indexToFocus = lastIndex;
+        }
+      }
+    }
+    actionsRef.current[indexToFocus].focus();
+  }, []);
+  return {
+    panelRef: panelRef,
+    panelProps: {
+      onKeyDown: onKeyDown
+    },
+    popoverScreenReaderText: (0, _react2.jsx)(_i18n.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
+ */
+
+var getColumnActions = exports.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 [];
   }
@@ -51,6 +265,7 @@ var getColumnActions = exports.getColumnActions = function getColumnActions(_ref
     column: column,
     columns: columns,
     switchColumnPos: switchColumnPos,
+    setIsColumnMoving: setIsColumnMoving,
     setFocusedCell: setFocusedCell,
     columnFocusIndex: columnFocusIndex
   })), (0, _toConsumableArray2.default)(((_column$actions = column.actions) === null || _column$actions === void 0 ? void 0 : _column$actions.additional) || []));
@@ -72,11 +287,11 @@ var getColumnActions = exports.getColumnActions = function getColumnActions(_ref
  * Hide column action
  */
 
-var getHideColumnAction = exports.getHideColumnAction = function getHideColumnAction(_ref2) {
-  var column = _ref2.column,
-    columns = _ref2.columns,
-    setVisibleColumns = _ref2.setVisibleColumns,
-    focusFirstVisibleInteractiveCell = _ref2.focusFirstVisibleInteractiveCell;
+var getHideColumnAction = exports.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) {
@@ -107,16 +322,25 @@ var getHideColumnAction = exports.getHideColumnAction = function getHideColumnAc
  * 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
@@ -130,6 +354,7 @@ var getMoveColumnActions = function getMoveColumnActions(_ref3) {
       var targetCol = columns[colIdx - 1];
       if (targetCol) {
         switchColumnPos(column.id, targetCol.id);
+        handleAnimationFlash();
         moveFocus('left');
       }
     };
@@ -151,6 +376,7 @@ var getMoveColumnActions = function getMoveColumnActions(_ref3) {
       var targetCol = columns[colIdx + 1];
       if (targetCol) {
         switchColumnPos(column.id, targetCol.id);
+        handleAnimationFlash();
         moveFocus('right');
       }
     };
@@ -174,11 +400,11 @@ var getMoveColumnActions = function getMoveColumnActions(_ref3) {
  * Sort column actions
  */
 
-var getSortColumnActions = exports.getSortColumnActions = function getSortColumnActions(_ref4) {
-  var column = _ref4.column,
-    sorting = _ref4.sorting,
-    schema = _ref4.schema,
-    schemaDetectors = _ref4.schemaDetectors;
+var getSortColumnActions = exports.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/optimize/lib/components/datagrid/body/header/{data_grid_column_resizer.js → column_resizer.js}

@@ -15,7 +15,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _services = require("../../../../services");
 var _global_styling = require("../../../../global_styling");
-var _data_grid_column_resizer = require("./data_grid_column_resizer.styles");
+var _draggable_columns = require("./draggable_columns");
+var _column_resizer = require("./column_resizer.styles");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -82,16 +83,20 @@ var EuiDataGridColumnResizer = exports.EuiDataGridColumnResizer = /*#__PURE__*/f
     value: function render() {
       var _this2 = this;
       var offset = this.state.offset;
+      var isLastColumn = this.props.isLastColumn;
       return (0, _react2.jsx)(_services.RenderWithEuiStylesMemoizer, null, function (stylesMemoizer) {
-        var styles = stylesMemoizer(_data_grid_column_resizer.euiDataGridColumnResizerStyles);
-        var cssStyles = [styles.euiDataGridColumnResizer, offset && styles.isDragging];
+        var styles = stylesMemoizer(_column_resizer.euiDataGridColumnResizerStyles);
+        var cssStyles = [styles.euiDataGridColumnResizer, isLastColumn && styles.isLastColumn, offset && styles.isDragging];
         return (0, _react2.jsx)("div", {
           css: cssStyles,
           className: "euiDataGridColumnResizer",
           "data-test-subj": "dataGridColumnResizer",
           style: offset ? (0, _global_styling.logicalStyle)('margin-right', "".concat(-offset, "px")) : undefined,
           onMouseDown: _this2.onMouseDown
-        });
+        }, (0, _react2.jsx)(_draggable_columns.DragOverlay, {
+          isDragging: !!offset,
+          cursor: "ew-resize"
+        }));
       });
     }
   }]);

package/{test-env/components/datagrid/body/header/data_grid_column_resizer.styles.js → optimize/lib/components/datagrid/body/header/column_resizer.styles.js}

@@ -33,7 +33,12 @@ var euiDataGridColumnResizerStyles = exports.euiDataGridColumnResizerStyles = fu
   }); // Odd number because it straddles a border
   var indicatorOffset = "-".concat(euiTheme.border.width.thin);
   return {
-    euiDataGridColumnResizer: /*#__PURE__*/(0, _react.css)("z-index:2;position:absolute;", (0, _global_styling.logicalCSS)('vertical', 0), " ", (0, _global_styling.logicalCSS)('right', positionOffset), " cursor:ew-resize;opacity:0;&:hover,&:active{opacity:1;}&::after{content:'';position:absolute;", (0, _global_styling.logicalCSS)('vertical', 0), " ", (0, _global_styling.logicalCSS)('left', positionOffset), " ", (0, _global_styling.logicalCSS)('margin-left', indicatorOffset), " ", (0, _global_styling.logicalCSS)('width', indicatorWidth), " background-color:", euiTheme.colors.primary, ";}.euiDataGridHeaderCell:last-child &{", (0, _global_styling.logicalCSS)('right', 0), " ", (0, _global_styling.logicalCSS)('width', euiTheme.size.s), " &::after{", (0, _global_styling.logicalCSS)('left', 'auto'), " ", (0, _global_styling.logicalCSS)('right', 0), ";}};label:euiDataGridColumnResizer;"),
+    euiDataGridColumnResizer: /*#__PURE__*/(0, _react.css)("z-index:2;position:absolute;", (0, _global_styling.logicalCSS)('vertical', 0), " ", (0, _global_styling.logicalCSS)('right', positionOffset), " cursor:ew-resize;opacity:0;&:hover,&:active{opacity:1;}&::after{content:'';position:absolute;", (0, _global_styling.logicalCSS)('vertical', 0), " ", (0, _global_styling.logicalCSS)('left', positionOffset), " ", (0, _global_styling.logicalCSS)('margin-left', indicatorOffset), " ", (0, _global_styling.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__*/(0, _react.css)((0, _global_styling.logicalCSS)('right', 0), " ", (0, _global_styling.logicalCSS)('width', euiTheme.size.s), " &::after{", (0, _global_styling.logicalCSS)('left', 'auto'), " ", (0, _global_styling.logicalCSS)('right', 0), ";};label:isLastColumn;"),
     isDragging: _ref
   };
 };