@elastic/eui 92.0.0 → 92.1.1

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

@@ -0,0 +1,174 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HandleInteractiveChildren = exports.FocusTrappedChildren = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _tabbable = require("tabbable");
+var _services = require("../../../../services");
+var _focus_trap = require("../../../focus_trap");
+var _accessibility = require("../../../accessibility");
+var _i18n = require("../../../i18n");
+var _react2 = require("@emotion/react");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } /*
+                                                                       * 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 internal utility component is used by all cells, both header and body/footer cells.
+                                                                           * It always handles:
+                                                                           *   1. Removing any interactive children from keyboard tab order on cell mount
+                                                                           *   2. Listening for focus on any interactive children and updating the cell focus context
+                                                                           *
+                                                                           * It should *only* render focus traps for:
+                                                                           *   1. Header cells that are `actions: false` but still have interactive children
+                                                                           *   2. Body cells that are `isExpandable: false` but still have interactive children
+                                                                           */
+var HandleInteractiveChildren = function HandleInteractiveChildren(_ref) {
+  var cellEl = _ref.cellEl,
+    children = _ref.children,
+    updateCellFocusContext = _ref.updateCellFocusContext,
+    renderFocusTrap = _ref.renderFocusTrap;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hasInteractiveChildren = _useState2[0],
+    setHasInteractiveChildren = _useState2[1];
+
+  // On mount, disable all interactive children
+  (0, _react.useEffect)(function () {
+    if (cellEl) {
+      var interactiveChildren = disableInteractives(cellEl);
+      if (renderFocusTrap) {
+        setHasInteractiveChildren(interactiveChildren.length > 0);
+      }
+    }
+  }, [cellEl, renderFocusTrap]);
+
+  // Ensure that any interactive children that are clicked update the latest cell focus context
+  (0, _react.useEffect)(function () {
+    if (cellEl) {
+      var onFocus = function onFocus() {
+        return updateCellFocusContext();
+      };
+      cellEl.addEventListener('focus', onFocus, true); // useCapture listens for focus on children
+      return function () {
+        cellEl.removeEventListener('focus', onFocus, true);
+      };
+    }
+  }, [cellEl, updateCellFocusContext]);
+  var _children = (0, _react.useMemo)(function () {
+    return (0, _react2.jsx)(_react.default.Fragment, null, children);
+  }, [children]);
+  if (!cellEl) return _children; // Do nothing if cell has yet to mount or is unmounting
+  if (!renderFocusTrap) return _children; // Cells with default actions / expansion popovers do not need to trap
+  if (!hasInteractiveChildren) return _children; // No need to focus trap if no children are interactive
+
+  return (0, _react2.jsx)(FocusTrappedChildren, {
+    cellEl: cellEl
+  }, children);
+};
+
+/**
+ * Cells with interactive children but no cell popover expansion should render a
+ * focus trap that can be entered with the Enter key, which cycles keyboard tabs
+ * through the cell contents only, and exited with the Escape key
+ */
+exports.HandleInteractiveChildren = HandleInteractiveChildren;
+HandleInteractiveChildren.propTypes = {
+  cellEl: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf([null])]),
+  updateCellFocusContext: _propTypes.default.func.isRequired,
+  renderFocusTrap: _propTypes.default.bool
+};
+var FocusTrappedChildren = function FocusTrappedChildren(_ref2) {
+  var cellEl = _ref2.cellEl,
+    children = _ref2.children;
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isCellEntered = _useState4[0],
+    setIsCellEntered = _useState4[1];
+  (0, _react.useEffect)(function () {
+    if (isCellEntered) {
+      enableAndFocusInteractives(cellEl);
+    } else {
+      disableInteractives(cellEl);
+    }
+  }, [isCellEntered, cellEl]);
+  (0, _react.useEffect)(function () {
+    var onKeyUp = function onKeyUp(event) {
+      switch (event.key) {
+        case _services.keys.ENTER:
+        case _services.keys.F2:
+          event.preventDefault();
+          setIsCellEntered(true);
+          break;
+        case _services.keys.ESCAPE:
+          event.preventDefault();
+          setIsCellEntered(function (isCellEntered) {
+            if (isCellEntered === true) {
+              requestAnimationFrame(function () {
+                return cellEl.focus();
+              }); // move focus to cell
+              return false;
+            }
+            return isCellEntered;
+          });
+          break;
+      }
+    };
+    cellEl.addEventListener('keyup', onKeyUp);
+    return function () {
+      cellEl.removeEventListener('keyup', onKeyUp);
+    };
+  }, [cellEl]);
+  return (0, _react2.jsx)(_focus_trap.EuiFocusTrap, {
+    disabled: !isCellEntered,
+    onDeactivation: function onDeactivation() {
+      return setIsCellEntered(false);
+    },
+    clickOutsideDisables: true
+  }, children, (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", null, ' - ', (0, _react2.jsx)(_i18n.EuiI18n
+  // eslint-disable-next-line local/i18n
+  , {
+    token: "euiDataGridCell.focusTrapEnterPrompt",
+    default: "Press the Enter key to interact with this cell's contents."
+  }))));
+};
+
+/**
+ * Utility fns for managing child interactive tabIndex state
+ */
+exports.FocusTrappedChildren = FocusTrappedChildren;
+FocusTrappedChildren.propTypes = {
+  cellEl: _propTypes.default.any.isRequired
+};
+var disableInteractives = function disableInteractives(cell) {
+  var interactives = (0, _tabbable.tabbable)(cell);
+  interactives.forEach(function (element) {
+    element.setAttribute('data-euigrid-tab-managed', 'true');
+    element.setAttribute('tabIndex', '-1');
+  });
+  return interactives;
+};
+var enableAndFocusInteractives = function enableAndFocusInteractives(cell) {
+  var interactives = cell.querySelectorAll('[data-euigrid-tab-managed]');
+  interactives.forEach(function (element, i) {
+    element.setAttribute('tabIndex', '0');
+    if (i === 0) {
+      element.focus();
+    }
+  });
+  return interactives;
+};

package/lib/components/datagrid/body/cell/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Cell", {
+  enumerable: true,
+  get: function get() {
+    return _data_grid_cell_wrapper.Cell;
+  }
+});
+Object.defineProperty(exports, "DataGridCellPopoverContext", {
+  enumerable: true,
+  get: function get() {
+    return _data_grid_cell_popover.DataGridCellPopoverContext;
+  }
+});
+Object.defineProperty(exports, "EuiDataGridCell", {
+  enumerable: true,
+  get: function get() {
+    return _data_grid_cell.EuiDataGridCell;
+  }
+});
+Object.defineProperty(exports, "useCellPopover", {
+  enumerable: true,
+  get: function get() {
+    return _data_grid_cell_popover.useCellPopover;
+  }
+});
+var _data_grid_cell = require("./data_grid_cell");
+var _data_grid_cell_wrapper = require("./data_grid_cell_wrapper");
+var _data_grid_cell_popover = require("./data_grid_cell_popover");

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

@@ -574,8 +574,6 @@ EuiDataGridBody.propTypes = {
   renderCustomGridBody: _propTypes.default.func,
   interactiveCellId: _propTypes.default.string.isRequired,
   pagination: _propTypes.default.any,
-  headerIsInteractive: _propTypes.default.bool.isRequired,
-  handleHeaderMutation: _propTypes.default.any.isRequired,
   setVisibleColumns: _propTypes.default.func.isRequired,
   switchColumnPos: _propTypes.default.func.isRequired,
   onColumnResize: _propTypes.default.func,

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

@@ -12,7 +12,7 @@ var _col_widths = require("../utils/col_widths");
 var _row_heights = require("../utils/row_heights");
 var _header = require("./header");
 var _footer = require("./footer");
-var _data_grid_cell_wrapper = require("./data_grid_cell_wrapper");
+var _cell = require("./cell");
 var _react2 = require("@emotion/react");
 var _excluded = ["colIndex", "visibleRowIndex"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -55,8 +55,6 @@ var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_ref) {
     renderCellPopover = _ref.renderCellPopover,
     renderFooterCellValue = _ref.renderFooterCellValue,
     interactiveCellId = _ref.interactiveCellId,
-    headerIsInteractive = _ref.headerIsInteractive,
-    handleHeaderMutation = _ref.handleHeaderMutation,
     setVisibleColumns = _ref.setVisibleColumns,
     switchColumnPos = _ref.switchColumnPos,
     onColumnResize = _ref.onColumnResize,
@@ -102,8 +100,6 @@ var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_ref) {
    * Header & footer
    */
   var _useDataGridHeader = (0, _header.useDataGridHeader)({
-      headerIsInteractive: headerIsInteractive,
-      handleHeaderMutation: handleHeaderMutation,
       switchColumnPos: switchColumnPos,
       setVisibleColumns: setVisibleColumns,
       leadingControlColumns: leadingControlColumns,
@@ -163,7 +159,7 @@ var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_ref) {
       visibleRowIndex: visibleRowIndex,
       style: style
     }, cellProps);
-    return (0, _react2.jsx)(_data_grid_cell_wrapper.Cell, _extends({}, props, rest));
+    return (0, _react2.jsx)(_cell.Cell, _extends({}, props, rest));
   }, [].concat(_toConsumableArray(Object.values(cellProps)), [getRowHeight]) // eslint-disable-line react-hooks/exhaustive-deps
   );
 
@@ -722,8 +718,6 @@ EuiDataGridBodyCustomRender.propTypes = {
   renderCustomGridBody: _propTypes.default.func,
   interactiveCellId: _propTypes.default.string.isRequired,
   pagination: _propTypes.default.any,
-  headerIsInteractive: _propTypes.default.bool.isRequired,
-  handleHeaderMutation: _propTypes.default.any.isRequired,
   setVisibleColumns: _propTypes.default.func.isRequired,
   switchColumnPos: _propTypes.default.func.isRequired,
   onColumnResize: _propTypes.default.func,

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

@@ -11,7 +11,7 @@ var _reactWindow = require("react-window");
 var _resize_observer = require("../../observer/resize_observer");
 var _header = require("./header");
 var _footer = require("./footer");
-var _data_grid_cell_wrapper = require("./data_grid_cell_wrapper");
+var _cell = require("./cell");
 var _data_grid_row_manager = require("./data_grid_row_manager");
 var _grid_height_width = require("../utils/grid_height_width");
 var _col_widths = require("../utils/col_widths");
@@ -45,7 +45,7 @@ var _Cell = function _Cell(_ref) {
     data = _ref.data;
   var _useContext = (0, _react.useContext)(DataGridWrapperRowsContext),
     headerRowHeight = _useContext.headerRowHeight;
-  return (0, _react2.jsx)(_data_grid_cell_wrapper.Cell, _extends({
+  return (0, _react2.jsx)(_cell.Cell, _extends({
     colIndex: columnIndex,
     visibleRowIndex: rowIndex,
     style: _objectSpread(_objectSpread({}, style), {}, {
@@ -101,8 +101,6 @@ var EuiDataGridBodyVirtualized = function EuiDataGridBodyVirtualized(_ref3) {
     renderFooterCellValue = _ref3.renderFooterCellValue,
     interactiveCellId = _ref3.interactiveCellId,
     pagination = _ref3.pagination,
-    headerIsInteractive = _ref3.headerIsInteractive,
-    handleHeaderMutation = _ref3.handleHeaderMutation,
     setVisibleColumns = _ref3.setVisibleColumns,
     switchColumnPos = _ref3.switchColumnPos,
     onColumnResize = _ref3.onColumnResize,
@@ -152,8 +150,6 @@ var EuiDataGridBodyVirtualized = function EuiDataGridBodyVirtualized(_ref3) {
    * Header & footer
    */
   var _useDataGridHeader = (0, _header.useDataGridHeader)({
-      headerIsInteractive: headerIsInteractive,
-      handleHeaderMutation: handleHeaderMutation,
       switchColumnPos: switchColumnPos,
       setVisibleColumns: setVisibleColumns,
       leadingControlColumns: leadingControlColumns,
@@ -853,8 +849,6 @@ EuiDataGridBodyVirtualized.propTypes = {
   renderCustomGridBody: _propTypes.default.func,
   interactiveCellId: _propTypes.default.string.isRequired,
   pagination: _propTypes.default.any,
-  headerIsInteractive: _propTypes.default.bool.isRequired,
-  handleHeaderMutation: _propTypes.default.any.isRequired,
   setVisibleColumns: _propTypes.default.func.isRequired,
   switchColumnPos: _propTypes.default.func.isRequired,
   onColumnResize: _propTypes.default.func,

package/lib/components/datagrid/body/footer/data_grid_footer_row.js

@@ -7,8 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.EuiDataGridFooterRow = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
-var _data_grid_cell = require("../data_grid_cell");
-var _data_grid_cell_popover = require("../data_grid_cell_popover");
+var _cell = require("../cell");
 var _react2 = require("@emotion/react");
 var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "schema", "columnWidths", "defaultColumnWidth", "className", "renderCellValue", "renderCellPopover", "rowIndex", "interactiveCellId", "data-test-subj", "visibleRowIndex"];
 /*
@@ -47,7 +46,7 @@ var EuiDataGridFooterRow = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _reac
     'euiDataGridRow--striped': visibleRowIndex % 2 !== 0
   }, 'euiDataGridFooter', className);
   var dataTestSubj = (0, _classnames.default)('dataGridRow', 'dataGridFooterRow', _dataTestSubj);
-  var popoverContext = (0, _react.useContext)(_data_grid_cell_popover.DataGridCellPopoverContext);
+  var popoverContext = (0, _react.useContext)(_cell.DataGridCellPopoverContext);
   var sharedCellProps = {
     rowIndex: rowIndex,
     visibleRowIndex: visibleRowIndex,
@@ -64,7 +63,7 @@ var EuiDataGridFooterRow = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _reac
       width = _ref2.width,
       footerCellRender = _ref2.footerCellRender,
       footerCellProps = _ref2.footerCellProps;
-    return (0, _react2.jsx)(_data_grid_cell.EuiDataGridCell, _extends({}, footerCellProps, sharedCellProps, {
+    return (0, _react2.jsx)(_cell.EuiDataGridCell, _extends({}, footerCellProps, sharedCellProps, {
       key: "".concat(id, "-").concat(rowIndex),
       colIndex: i,
       columnId: id,
@@ -78,7 +77,7 @@ var EuiDataGridFooterRow = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _reac
     var columnType = schema[id] ? schema[id].columnType : null;
     var width = columnWidths[id] || defaultColumnWidth;
     var columnPosition = i + leadingControlColumns.length;
-    return (0, _react2.jsx)(_data_grid_cell.EuiDataGridCell, _extends({}, sharedCellProps, {
+    return (0, _react2.jsx)(_cell.EuiDataGridCell, _extends({}, sharedCellProps, {
       key: "".concat(columnPosition, ",").concat(visibleRowIndex) // Note: this key should use cell position to match react-window/data cell behavior. See #5720
       ,
       colIndex: columnPosition,
@@ -96,7 +95,7 @@ var EuiDataGridFooterRow = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _reac
       footerCellRender = _ref4.footerCellRender,
       footerCellProps = _ref4.footerCellProps;
     var colIndex = i + columns.length + leadingControlColumns.length;
-    return (0, _react2.jsx)(_data_grid_cell.EuiDataGridCell, _extends({}, footerCellProps, sharedCellProps, {
+    return (0, _react2.jsx)(_cell.EuiDataGridCell, _extends({}, footerCellProps, sharedCellProps, {
       key: "".concat(id, "-").concat(rowIndex),
       colIndex: colIndex,
       columnId: id,

package/lib/components/datagrid/body/header/data_grid_control_header_cell.js

@@ -19,8 +19,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
                                                                                                                                                                                                                                                                                                                                                      */
 var EuiDataGridControlHeaderCell = function EuiDataGridControlHeaderCell(_ref) {
   var controlColumn = _ref.controlColumn,
-    index = _ref.index,
-    headerIsInteractive = _ref.headerIsInteractive;
+    index = _ref.index;
   var HeaderCellRender = controlColumn.headerCellRender,
     headerCellProps = controlColumn.headerCellProps,
     width = controlColumn.width,
@@ -29,8 +28,7 @@ var EuiDataGridControlHeaderCell = function EuiDataGridControlHeaderCell(_ref) {
     className: (0, _classnames.default)('euiDataGridHeaderCell--controlColumn', headerCellProps === null || headerCellProps === void 0 ? void 0 : headerCellProps.className),
     id: id,
     index: index,
-    width: width,
-    headerIsInteractive: headerIsInteractive
+    width: width
   }), (0, _react2.jsx)("div", {
     className: "euiDataGridHeaderCell__content"
   }, (0, _react2.jsx)(HeaderCellRender, null)));
@@ -67,6 +65,5 @@ EuiDataGridControlHeaderCell.propTypes = {
        * Optional props to pass to the column footer cell
        */
     footerCellProps: _propTypes.default.any
-  }).isRequired,
-  headerIsInteractive: _propTypes.default.bool.isRequired
+  }).isRequired
 };

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

@@ -1,5 +1,6 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -24,24 +25,23 @@ var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /*
-                                                                                                                                                                                                                                                                                                                                                                                               * 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.
-                                                                                                                                                                                                                                                                                                                                                                                               */
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } /*
+                                                                       * 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.
+                                                                       */
 var _ref2 = process.env.NODE_ENV === "production" ? {
   name: "mc0thx-EuiDataGridHeaderCell",
   styles: "margin-inline-start:auto;label:EuiDataGridHeaderCell;"
@@ -51,6 +51,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
+  var _classnames;
   var column = _ref.column,
     index = _ref.index,
     columns = _ref.columns,
@@ -60,15 +61,13 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     defaultColumnWidth = _ref.defaultColumnWidth,
     setColumnWidth = _ref.setColumnWidth,
     setVisibleColumns = _ref.setVisibleColumns,
-    switchColumnPos = _ref.switchColumnPos,
-    headerIsInteractive = _ref.headerIsInteractive;
+    switchColumnPos = _ref.switchColumnPos;
   var id = column.id,
     display = column.display,
     displayAsText = column.displayAsText,
     displayHeaderCellProps = column.displayHeaderCellProps;
   var width = columnWidths[id] || defaultColumnWidth;
   var columnType = schema[id] ? schema[id].columnType : null;
-  var classes = (0, _classnames2.default)(_defineProperty({}, "euiDataGridHeaderCell--".concat(columnType), columnType), displayHeaderCellProps === null || displayHeaderCellProps === void 0 ? void 0 : displayHeaderCellProps.className);
   var _useContext = (0, _react.useContext)(_focus.DataGridFocusContext),
     setFocusedCell = _useContext.setFocusedCell,
     focusFirstVisibleInteractiveCell = _useContext.focusFirstVisibleInteractiveCell;
@@ -93,6 +92,14 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
   });
   var showColumnActions = columnActions && columnActions.length > 0;
   var actionsButtonRef = (0, _react.useRef)(null);
+  var focusActionsButton = (0, _react.useCallback)(function () {
+    var _actionsButtonRef$cur;
+    (_actionsButtonRef$cur = actionsButtonRef.current) === null || _actionsButtonRef$cur === void 0 ? void 0 : _actionsButtonRef$cur.focus();
+  }, []);
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isActionsButtonFocused = _useState4[0],
+    setIsActionsButtonFocused = _useState4[1];
   var _useSortingUtils = useSortingUtils({
       sorting: sorting,
       id: id,
@@ -113,13 +120,16 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     title: displayAsText || id,
     className: "euiDataGridHeaderCell__content"
   }, display || displayAsText || id), sortingArrow);
+  var classes = (0, _classnames2.default)((_classnames = {}, _defineProperty(_classnames, "euiDataGridHeaderCell--".concat(columnType), columnType), _defineProperty(_classnames, 'euiDataGridHeaderCell--hasColumnActions', showColumnActions), _defineProperty(_classnames, 'euiDataGridHeaderCell--isActionsPopoverOpen', isPopoverOpen), _classnames), displayHeaderCellProps === null || displayHeaderCellProps === void 0 ? void 0 : displayHeaderCellProps.className);
   return (0, _react2.jsx)(_data_grid_header_cell_wrapper.EuiDataGridHeaderCellWrapper, _extends({}, displayHeaderCellProps, {
     className: classes,
     id: id,
     index: index,
     width: width,
-    headerIsInteractive: headerIsInteractive,
-    "aria-sort": ariaSort
+    "aria-sort": ariaSort,
+    hasActionsPopover: showColumnActions,
+    isActionsButtonFocused: isActionsButtonFocused,
+    focusActionsButton: focusActionsButton
   }), column.isResizable !== false && width != null ? (0, _react2.jsx)(_data_grid_column_resizer.EuiDataGridColumnResizer, {
     columnId: id,
     columnWidth: width,
@@ -127,11 +137,16 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
   }) : null, !showColumnActions ? (0, _react2.jsx)(_react.default.Fragment, null, cellContent, sortingScreenReaderText && (0, _react2.jsx)(_accessibility2.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", null, sortingScreenReaderText))) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("button", {
     className: "euiDataGridHeaderCell__button",
     onClick: function onClick() {
-      setFocusedCell([index, -1]);
-      setIsPopoverOpen(function (isPopoverOpen) {
+      return setIsPopoverOpen(function (isPopoverOpen) {
         return !isPopoverOpen;
       });
     },
+    onFocus: function onFocus() {
+      return setIsActionsButtonFocused(true);
+    },
+    onBlur: function onBlur() {
+      return setIsActionsButtonFocused(false);
+    },
     "aria-describedby": "".concat(sortingAriaId, " ").concat(actionsAriaId),
     ref: actionsButtonRef,
     "data-test-subj": "dataGridHeaderCellActionButton-".concat(id)
@@ -145,8 +160,8 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     focusTrapProps: {
       // We need to override the default EuiPopover `onClickOutside` since the anchor is separate from the actual button
       onClickOutside: function onClickOutside(event) {
-        var _actionsButtonRef$cur;
-        if (((_actionsButtonRef$cur = actionsButtonRef.current) === null || _actionsButtonRef$cur === void 0 ? void 0 : _actionsButtonRef$cur.contains(event.target)) === false) {
+        var _actionsButtonRef$cur2;
+        if (((_actionsButtonRef$cur2 = actionsButtonRef.current) === null || _actionsButtonRef$cur2 === void 0 ? void 0 : _actionsButtonRef$cur2.contains(event.target)) === false) {
           setIsPopoverOpen(false);
         }
       }