@elastic/eui 60.1.2 → 60.2.0

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

@@ -10,10 +10,12 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  * Side Public License, v 1.
  */
 import classnames from 'classnames';
-import React, { useContext, useState } from 'react';
+import React, { useContext, useState, useRef, useCallback } from 'react';
+import { tabbable } from 'tabbable';
+import { keys } from '../../../../services';
 import { useGeneratedHtmlId } from '../../../../services/accessibility';
 import { EuiScreenReaderOnly } from '../../../accessibility';
-import { useEuiI18n } from '../../../i18n';
+import { useEuiI18n, EuiI18n } from '../../../i18n';
 import { EuiIcon } from '../../../icon';
 import { EuiListGroup } from '../../../list_group';
 import { EuiPopover } from '../../../popover';
@@ -88,6 +90,7 @@ export var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
       isPopoverOpen = _useState2[0],
       setIsPopoverOpen = _useState2[1];
 
+  var popoverArrowNavigationProps = usePopoverArrowNavigation();
   var columnActions = getColumnActions({
     column: column,
     columns: columns,
@@ -123,9 +126,11 @@ export var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
   }) : null, sortString && ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("div", {
     id: screenReaderId
   }, sortString)), !showColumnActions ? ___EmotionJSX(React.Fragment, null, sortingArrow, ___EmotionJSX("div", {
-    className: "euiDataGridHeaderCell__content"
-  }, display || displayAsText || id)) : ___EmotionJSX(EuiPopover, {
-    anchorClassName: "euiDataGridHeaderCell__anchor",
+    className: "euiDataGridHeaderCell__content",
+    title: displayAsText || id
+  }, display || displayAsText || id)) : ___EmotionJSX(EuiPopover, _extends({
+    className: "eui-fullWidth",
+    anchorClassName: "eui-fullWidth",
     panelPaddingSize: "none",
     offset: 7,
     button: ___EmotionJSX("button", {
@@ -137,7 +142,8 @@ export var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
         });
       }
     }, sortingArrow, ___EmotionJSX("div", {
-      className: "euiDataGridHeaderCell__content"
+      className: "euiDataGridHeaderCell__content",
+      title: displayAsText || id
     }, display || displayAsText || id), ___EmotionJSX(EuiIcon, {
       className: "euiDataGridHeaderCell__icon",
       type: "arrowDown",
@@ -150,9 +156,69 @@ export var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     closePopover: function closePopover() {
       return setIsPopoverOpen(false);
     }
-  }, ___EmotionJSX("div", null, ___EmotionJSX(EuiListGroup, {
+  }, popoverArrowNavigationProps), ___EmotionJSX(EuiListGroup, {
     listItems: columnActions,
     gutterSize: "none",
     "data-test-subj": "dataGridHeaderCellActionGroup-".concat(id)
-  }))));
+  })));
+};
+/**
+ * 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."
+    })
+  };
 };

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

@@ -46,11 +46,17 @@ export var useFocus = function useFocus(_ref) {
       focusedCell = _useState4[0],
       _setFocusedCell = _useState4[1];
 
-  var setFocusedCell = useCallback(function (focusedCell) {
-    _setFocusedCell(focusedCell);
+  var setFocusedCell = useCallback(function (nextFocusedCell) {
+    // 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] === (focusedCell === null || focusedCell === void 0 ? void 0 : focusedCell[0]) && nextFocusedCell[1] === (focusedCell === null || focusedCell === void 0 ? void 0 : focusedCell[1])) {
+      return;
+    }
+
+    _setFocusedCell(nextFocusedCell);
 
     setIsFocusedCellInView(true); // scrolling.ts ensures focused cells are fully in view
-  }, []);
+  }, [focusedCell]);
   var previousCell = useRef(undefined);
   useEffect(function () {
     if (previousCell.current) {
@@ -82,13 +88,16 @@ export var useFocus = function useFocus(_ref) {
       tabIndex: -1
     } : {
       tabIndex: 0,
-      onFocus: function onFocus(e) {
-        // if e.target (the source element of the `focus event`
-        // matches e.currentTarget (always the div with this onFocus listener)
-        // then the user has focused directly on the data grid wrapper (almost definitely by tabbing)
-        // so shift focus to the first visible and interactive cell within the grid
-        if (e.target === e.currentTarget) {
-          focusFirstVisibleInteractiveCell();
+      onKeyUp: function onKeyUp(e) {
+        // Ensure we only manually focus into the grid via keyboard tab -
+        // mouse users can accidentally trigger focus by clicking on scrollbars
+        if (e.key === keys.TAB) {
+          // if e.target (the source element of the `focus event`) matches
+          // e.currentTarget (always the div with this onKeyUp listener)
+          // then the user has focused directly on the data grid wrapper
+          if (e.target === e.currentTarget) {
+            focusFirstVisibleInteractiveCell();
+          }
         }
       }
     };
@@ -141,7 +150,6 @@ export var createKeyDownHandler = function createKeyDownHandler(_ref2) {
 
     var key = event.key,
         ctrlKey = event.ctrlKey;
-    console.log('???', event);
 
     if (key === keys.ARROW_DOWN) {
       event.preventDefault();

package/optimize/es/components/icon/assets/cluster.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+
+/*
+ * 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.
+ */
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var EuiIconCluster = function EuiIconCluster(_ref) {
+  var title = _ref.title,
+      titleId = _ref.titleId,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return ___EmotionJSX("svg", _extends({
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4.5 7a2.5 2.5 0 100-5 2.5 2.5 0 000 5zm0-6a3.5 3.5 0 013.465 3h3.12a1.5 1.5 0 110 1h-3.12a3.482 3.482 0 01-.662 1.596l2.1 2.1A3.5 3.5 0 118.036 12h-3.12a1.5 1.5 0 110-.999h3.12a3.482 3.482 0 01.662-1.596l-2.1-2.1A3.5 3.5 0 114.5 1zM12 4.5a.5.5 0 101 0 .5.5 0 00-1 0zm-.5 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5zM4 11.5a.5.5 0 11-1 0 .5.5 0 011 0z"
+  }));
+};
+
+export var icon = EuiIconCluster;

package/optimize/es/components/icon/assets/container.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+
+/*
+ * 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.
+ */
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var EuiIconContainer = function EuiIconContainer(_ref) {
+  var title = _ref.title,
+      titleId = _ref.titleId,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return ___EmotionJSX("svg", _extends({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 2.5A.5.5 0 01.5 2h15a.5.5 0 010 1H15v10h.5a.5.5 0 010 1H.5a.5.5 0 010-1H1V3H.5a.5.5 0 01-.5-.5zM2 3h12v10H2V3zm3 2a.5.5 0 00-.5.5v5a.5.5 0 001 0v-5A.5.5 0 005 5zm5.5.5a.5.5 0 011 0v5a.5.5 0 01-1 0v-5zM8 5a.5.5 0 00-.5.5v5a.5.5 0 001 0v-5A.5.5 0 008 5z"
+  }));
+};
+
+export var icon = EuiIconContainer;

package/optimize/es/components/icon/assets/kubernetesNode.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+
+/*
+ * 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.
+ */
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var EuiIconKubernetesNode = function EuiIconKubernetesNode(_ref) {
+  var title = _ref.title,
+      titleId = _ref.titleId,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return ___EmotionJSX("svg", _extends({
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14 11.42V4.58L8 1.152 2 4.58v6.84l6 3.428 6-3.428zM8 16l7-4V4L8 0 1 4v8l7 4zM8 4.607l3 1.714V9.68l-3 1.714-3-1.714V6.32l3-1.714zm4 1.134v4.518l-4 2.286-4-2.286V5.741l4-2.286 4 2.286z"
+  }));
+};
+
+export var icon = EuiIconKubernetesNode;

package/optimize/es/components/icon/assets/kubernetesPod.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+
+/*
+ * 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.
+ */
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var EuiIconKubernetesPod = function EuiIconKubernetesPod(_ref) {
+  var title = _ref.title,
+      titleId = _ref.titleId,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return ___EmotionJSX("svg", _extends({
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14 5.151v6.269l-5.5 3.142V8.29L14 5.151zm-.508-.861L8 1.152 2.508 4.29 8 7.424l5.492-3.134zM2 5.151l5.5 3.14v6.272L2 11.42V5.15zM15 12l-7 4-7-4V4l7-4 7 4v8z"
+  }));
+};
+
+export var icon = EuiIconKubernetesPod;

package/optimize/es/components/icon/assets/namespace.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+
+/*
+ * 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.
+ */
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var EuiIconNamespace = function EuiIconNamespace(_ref) {
+  var title = _ref.title,
+      titleId = _ref.titleId,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return ___EmotionJSX("svg", _extends({
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M1 1h14v14H1V1zm13 12v1H2V2h12v11zM6 6h4v4H6V6zm-1 5V5h6v6H5z"
+  }));
+};
+
+export var icon = EuiIconNamespace;

package/optimize/es/components/icon/icon_map.js

@@ -49,11 +49,13 @@ export var typeToPathMap = {
   cloudDrizzle: 'cloudDrizzle',
   cloudStormy: 'cloudStormy',
   cloudSunny: 'cloudSunny',
+  cluster: 'cluster',
   codeApp: 'app_code',
   color: 'color',
   compute: 'compute',
   console: 'console',
   consoleApp: 'app_console',
+  container: 'container',
   continuityAbove: 'continuityAbove',
   continuityAboveBelow: 'continuityAboveBelow',
   continuityBelow: 'continuityBelow',
@@ -180,6 +182,8 @@ export var typeToPathMap = {
   kqlOperand: 'kql_operand',
   kqlSelector: 'kql_selector',
   kqlValue: 'kql_value',
+  kubernetesNode: 'kubernetesNode',
+  kubernetesPod: 'kubernetesPod',
   layers: 'layers',
   lensApp: 'app_lens',
   lettering: 'lettering',
@@ -277,6 +281,7 @@ export var typeToPathMap = {
   mobile: 'mobile',
   monitoringApp: 'app_monitoring',
   moon: 'moon',
+  namespace: 'namespace',
   nested: 'nested',
   node: 'node',
   notebookApp: 'app_notebook',

package/optimize/es/components/popover/popover.js

@@ -10,7 +10,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _typeof from "@babel/runtime/helpers/typeof";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _excluded = ["anchorClassName", "anchorPosition", "button", "buttonRef", "insert", "isOpen", "ownFocus", "children", "className", "closePopover", "panelClassName", "panelPaddingSize", "panelProps", "panelRef", "panelStyle", "popoverRef", "hasArrow", "arrowChildren", "repositionOnScroll", "zIndex", "initialFocus", "attachToAnchor", "display", "onTrapDeactivation", "buffer", "aria-label", "aria-labelledby", "container", "focusTrapProps", "tabIndex"];
+var _excluded = ["anchorClassName", "anchorPosition", "button", "buttonRef", "insert", "isOpen", "ownFocus", "children", "className", "closePopover", "panelClassName", "panelPaddingSize", "panelProps", "panelRef", "panelStyle", "popoverScreenReaderText", "popoverRef", "hasArrow", "arrowChildren", "repositionOnScroll", "zIndex", "initialFocus", "attachToAnchor", "display", "offset", "onTrapDeactivation", "buffer", "aria-label", "aria-labelledby", "container", "focusTrapProps", "tabIndex"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -496,6 +496,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
           panelProps = _this$props.panelProps,
           panelRef = _this$props.panelRef,
           panelStyle = _this$props.panelStyle,
+          popoverScreenReaderText = _this$props.popoverScreenReaderText,
           popoverRef = _this$props.popoverRef,
           hasArrow = _this$props.hasArrow,
           arrowChildren = _this$props.arrowChildren,
@@ -504,6 +505,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
           initialFocus = _this$props.initialFocus,
           attachToAnchor = _this$props.attachToAnchor,
           display = _this$props.display,
+          offset = _this$props.offset,
           onTrapDeactivation = _this$props.onTrapDeactivation,
           buffer = _this$props.buffer,
           ariaLabel = _this$props['aria-label'],
@@ -549,14 +551,14 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
 
         var focusTrapScreenReaderText;
 
-        if (ownFocus) {
+        if (ownFocus || popoverScreenReaderText) {
           ariaDescribedby = this.descriptionId;
           focusTrapScreenReaderText = ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
             id: this.descriptionId
-          }, ___EmotionJSX(EuiI18n, {
+          }, ownFocus && ___EmotionJSX(EuiI18n, {
             token: "euiPopover.screenReaderAnnouncement",
             default: "You are in a dialog. To close this dialog, hit escape."
-          })));
+          }), popoverScreenReaderText));
         }
 
         var arrowClassNames = classNames('euiPopover__panelArrow', "euiPopover__panelArrow--".concat(this.state.arrowPosition));

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

@@ -419,13 +419,16 @@ var EuiDataGridBody = function EuiDataGridBody(props) {
     }
   }, (0, _react2.jsx)(_reactWindow.VariableSizeGrid, (0, _extends2.default)({}, virtualizationOptions ? virtualizationOptions : {}, {
     ref: gridRef,
+    className: (0, _classnames.default)('euiDataGrid__virtualized', virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.className),
     onItemsRendered: function onItemsRendered(itemsRendered) {
+      var _virtualizationOption;
+
       gridItemsRendered.current = itemsRendered;
+      virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : (_virtualizationOption = virtualizationOptions.onItemsRendered) === null || _virtualizationOption === void 0 ? void 0 : _virtualizationOption.call(virtualizationOptions, itemsRendered);
     },
     innerElementType: InnerElement,
     outerRef: outerGridRef,
     innerRef: innerGridRef,
-    className: "euiDataGrid__virtualized",
     columnCount: visibleColCount,
     width: finalWidth,
     columnWidth: getColumnWidth,

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

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiDataGridHeaderCell = void 0;
+exports.usePopoverArrowNavigation = exports.EuiDataGridHeaderCell = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -19,6 +19,10 @@ var _classnames2 = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _tabbable = require("tabbable");
+
+var _services = require("../../../../services");
+
 var _accessibility = require("../../../../services/accessibility");
 
 var _accessibility2 = require("../../../accessibility");
@@ -119,6 +123,7 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
       isPopoverOpen = _useState2[0],
       setIsPopoverOpen = _useState2[1];
 
+  var popoverArrowNavigationProps = usePopoverArrowNavigation();
   var columnActions = (0, _column_actions.getColumnActions)({
     column: column,
     columns: columns,
@@ -154,9 +159,11 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
   }) : null, sortString && (0, _react2.jsx)(_accessibility2.EuiScreenReaderOnly, null, (0, _react2.jsx)("div", {
     id: screenReaderId
   }, sortString)), !showColumnActions ? (0, _react2.jsx)(_react.default.Fragment, null, sortingArrow, (0, _react2.jsx)("div", {
-    className: "euiDataGridHeaderCell__content"
-  }, display || displayAsText || id)) : (0, _react2.jsx)(_popover.EuiPopover, {
-    anchorClassName: "euiDataGridHeaderCell__anchor",
+    className: "euiDataGridHeaderCell__content",
+    title: displayAsText || id
+  }, display || displayAsText || id)) : (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({
+    className: "eui-fullWidth",
+    anchorClassName: "eui-fullWidth",
     panelPaddingSize: "none",
     offset: 7,
     button: (0, _react2.jsx)("button", {
@@ -168,7 +175,8 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
         });
       }
     }, sortingArrow, (0, _react2.jsx)("div", {
-      className: "euiDataGridHeaderCell__content"
+      className: "euiDataGridHeaderCell__content",
+      title: displayAsText || id
     }, display || displayAsText || id), (0, _react2.jsx)(_icon.EuiIcon, {
       className: "euiDataGridHeaderCell__icon",
       type: "arrowDown",
@@ -181,11 +189,74 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     closePopover: function closePopover() {
       return setIsPopoverOpen(false);
     }
-  }, (0, _react2.jsx)("div", null, (0, _react2.jsx)(_list_group.EuiListGroup, {
+  }, popoverArrowNavigationProps), (0, _react2.jsx)(_list_group.EuiListGroup, {
     listItems: columnActions,
     gutterSize: "none",
     "data-test-subj": "dataGridHeaderCellActionGroup-".concat(id)
-  }))));
+  })));
+};
+/**
+ * Add keyboard arrow navigation to the cell actions popover
+ * to match the UX of the rest of EuiDataGrid
+ */
+
+
+exports.EuiDataGridHeaderCell = EuiDataGridHeaderCell;
+
+var 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."
+    })
+  };
 };
 
-exports.EuiDataGridHeaderCell = EuiDataGridHeaderCell;
+exports.usePopoverArrowNavigation = usePopoverArrowNavigation;

package/optimize/lib/components/datagrid/utils/focus.js

@@ -59,11 +59,17 @@ var useFocus = function useFocus(_ref) {
       focusedCell = _useState4[0],
       _setFocusedCell = _useState4[1];
 
-  var setFocusedCell = (0, _react.useCallback)(function (focusedCell) {
-    _setFocusedCell(focusedCell);
+  var setFocusedCell = (0, _react.useCallback)(function (nextFocusedCell) {
+    // 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] === (focusedCell === null || focusedCell === void 0 ? void 0 : focusedCell[0]) && nextFocusedCell[1] === (focusedCell === null || focusedCell === void 0 ? void 0 : focusedCell[1])) {
+      return;
+    }
+
+    _setFocusedCell(nextFocusedCell);
 
     setIsFocusedCellInView(true); // scrolling.ts ensures focused cells are fully in view
-  }, []);
+  }, [focusedCell]);
   var previousCell = (0, _react.useRef)(undefined);
   (0, _react.useEffect)(function () {
     if (previousCell.current) {
@@ -95,13 +101,16 @@ var useFocus = function useFocus(_ref) {
       tabIndex: -1
     } : {
       tabIndex: 0,
-      onFocus: function onFocus(e) {
-        // if e.target (the source element of the `focus event`
-        // matches e.currentTarget (always the div with this onFocus listener)
-        // then the user has focused directly on the data grid wrapper (almost definitely by tabbing)
-        // so shift focus to the first visible and interactive cell within the grid
-        if (e.target === e.currentTarget) {
-          focusFirstVisibleInteractiveCell();
+      onKeyUp: function onKeyUp(e) {
+        // Ensure we only manually focus into the grid via keyboard tab -
+        // mouse users can accidentally trigger focus by clicking on scrollbars
+        if (e.key === _services.keys.TAB) {
+          // if e.target (the source element of the `focus event`) matches
+          // e.currentTarget (always the div with this onKeyUp listener)
+          // then the user has focused directly on the data grid wrapper
+          if (e.target === e.currentTarget) {
+            focusFirstVisibleInteractiveCell();
+          }
         }
       }
     };
@@ -160,7 +169,6 @@ var createKeyDownHandler = function createKeyDownHandler(_ref2) {
 
     var key = event.key,
         ctrlKey = event.ctrlKey;
-    console.log('???', event);
 
     if (key === _services.keys.ARROW_DOWN) {
       event.preventDefault();