@elastic/eui 92.0.0 → 92.1.0

package/lib/components/datagrid/body/{data_grid_cell.js → cell/data_grid_cell.js}

@@ -9,17 +9,16 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactDom = require("react-dom");
-var _tabbable = require("tabbable");
-var _services = require("../../../services");
-var _accessibility = require("../../accessibility");
-var _focus_trap = require("../../focus_trap");
-var _i18n = require("../../i18n");
-var _text_truncate = require("../../text_truncate");
-var _resize_observer = require("../../observer/resize_observer/resize_observer");
-var _focus = require("../utils/focus");
+var _utils = require("../../../../utils");
+var _services = require("../../../../services");
+var _accessibility = require("../../../accessibility");
+var _i18n = require("../../../i18n");
+var _text_truncate = require("../../../text_truncate");
+var _resize_observer = require("../../../observer/resize_observer/resize_observer");
+var _focus = require("../../utils/focus");
 var _data_grid_cell_actions = require("./data_grid_cell_actions");
 var _data_grid_cell_popover = require("./data_grid_cell_popover");
-var _utils = require("../../../utils");
+var _focus_utils = require("./focus_utils");
 var _react2 = require("@emotion/react");
 var _excluded = ["renderCellValue", "column", "setCellContentsRef", "rowIndex", "colIndex", "ariaRowIndex", "rowHeight", "rowHeightUtils", "isControlColumn", "isFocused", "cellActions"],
   _excluded2 = ["width", "popoverContext", "interactiveCellId", "columnType", "className", "column", "style", "rowHeightUtils", "rowHeightsOptions", "rowManager", "pagination"],
@@ -100,7 +99,10 @@ var EuiDataGridCellContent = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       col: colIndex + 1,
       row: ariaRowIndex
     }
-  })));
+  }), cellActions && (0, _react2.jsx)(_react.default.Fragment, null, '. ', (0, _react2.jsx)(_i18n.EuiI18n, {
+    token: "euiDataGridCell.expansionEnterPrompt",
+    default: "Press the Enter key to expand this cell."
+  }))));
   return (0, _react2.jsx)(_react.default.Fragment, null, cellContent, screenReaderText, cellActions);
 });
 EuiDataGridCellContent.propTypes = {
@@ -603,43 +605,20 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "state", {
       cellProps: {},
       isFocused: false,
-      isEntered: false,
-      enableInteractions: false,
-      disableCellTabIndex: false,
       cellTextAlign: 'Left'
     });
     _defineProperty(_assertThisInitialized(_this), "unsubscribeCell", void 0);
-    _defineProperty(_assertThisInitialized(_this), "focusTimeout", void 0);
     _defineProperty(_assertThisInitialized(_this), "style", null);
-    _defineProperty(_assertThisInitialized(_this), "getInteractables", function () {
-      var tabbingRef = _this.cellContentsRef;
-      if (tabbingRef) {
-        return tabbingRef.querySelectorAll('[data-datagrid-interactable=true]');
-      }
-      return [];
+    _defineProperty(_assertThisInitialized(_this), "updateCellFocusContext", function () {
+      _this.context.setFocusedCell([_this.props.colIndex, _this.props.visibleRowIndex]);
     });
     _defineProperty(_assertThisInitialized(_this), "takeFocus", function (preventScroll) {
       var cell = _this.cellRef.current;
-      if (cell) {
-        // only update focus if we are not already focused on something in this cell
-        var element = document.activeElement;
-        while (element != null && element !== cell) {
-          element = element.parentElement;
-        }
-        var doFocusUpdate = element !== cell;
-        if (doFocusUpdate) {
-          var interactables = _this.getInteractables();
-          if (_this.isExpandable() === false && interactables.length === 1) {
-            // Only one element can be interacted with
-            interactables[0].focus({
-              preventScroll: preventScroll
-            });
-          } else {
-            cell.focus({
-              preventScroll: preventScroll
-            });
-          }
-        }
+      // Only focus the cell if not already focused on something in the cell
+      if (cell && !cell.contains(document.activeElement)) {
+        cell.focus({
+          preventScroll: preventScroll
+        });
       }
     });
     _defineProperty(_assertThisInitialized(_this), "recalculateAutoHeight", function () {
@@ -708,61 +687,8 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
       } else if (_this.contentObserver) {
         _this.contentObserver.disconnect();
       }
-      _this.preventTabbing();
       _this.setCellTextAlign();
     });
-    _defineProperty(_assertThisInitialized(_this), "onFocus", function (e) {
-      // only perform this logic when the event's originating element (e.target) is
-      // the wrapping element with the onFocus logic
-      // reasons:
-      //  * the outcome is only meaningful when the focus shifts to the wrapping element
-      //  * if the cell children include portalled content React will bubble the focus
-      //      event up, which can trigger the focus() call below, causing focus lock fighting
-      if (_this.cellRef.current === e.target) {
-        var _this$props5 = _this.props,
-          colIndex = _this$props5.colIndex,
-          visibleRowIndex = _this$props5.visibleRowIndex;
-        // focus in next tick to give potential focus capturing mechanisms time to release their traps
-        // also clear any previous focus timeout that may still be queued
-        if (EuiDataGridCell.activeFocusTimeoutId) {
-          window.clearTimeout(EuiDataGridCell.activeFocusTimeoutId);
-        }
-        EuiDataGridCell.activeFocusTimeoutId = _this.focusTimeout = window.setTimeout(function () {
-          _this.context.setFocusedCell([colIndex, visibleRowIndex]);
-          var interactables = _this.getInteractables();
-          if (interactables.length === 1 && _this.isExpandable() === false) {
-            interactables[0].focus();
-            _this.setState({
-              disableCellTabIndex: true
-            });
-          }
-        }, 0);
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "onBlur", function () {
-      _this.setState({
-        disableCellTabIndex: false
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "preventTabbing", function () {
-      if (_this.cellContentsRef) {
-        var tabbables = (0, _tabbable.tabbable)(_this.cellContentsRef);
-        for (var i = 0; i < tabbables.length; i++) {
-          var element = tabbables[i];
-          element.setAttribute('tabIndex', '-1');
-          element.setAttribute('data-datagrid-interactable', 'true');
-        }
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "enableTabbing", function () {
-      if (_this.cellContentsRef) {
-        var interactables = _this.getInteractables();
-        for (var i = 0; i < interactables.length; i++) {
-          var element = interactables[i];
-          element.removeAttribute('tabIndex');
-        }
-      }
-    });
     _defineProperty(_assertThisInitialized(_this), "setCellTextAlign", function () {
       if (_this.cellContentsRef) {
         var columnType = _this.props.columnType;
@@ -815,14 +741,14 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         setPopoverAnchorPosition("down".concat(_this.state.cellTextAlign));
 
         // Set popover contents with cell content
-        var _this$props6 = _this.props,
-          renderCellPopover = _this$props6.renderCellPopover,
-          renderCellValue = _this$props6.renderCellValue,
-          rowIndex = _this$props6.rowIndex,
-          colIndex = _this$props6.colIndex,
-          column = _this$props6.column,
-          columnId = _this$props6.columnId,
-          columnType = _this$props6.columnType;
+        var _this$props5 = _this.props,
+          renderCellPopover = _this$props5.renderCellPopover,
+          renderCellValue = _this$props5.renderCellValue,
+          rowIndex = _this$props5.rowIndex,
+          colIndex = _this$props5.colIndex,
+          column = _this$props5.column,
+          columnId = _this$props5.columnId,
+          columnType = _this$props5.columnType;
         var PopoverElement = renderCellPopover || _data_grid_cell_popover.DefaultCellPopover;
         var CellElement = renderCellValue;
         var sharedProps = {
@@ -852,9 +778,9 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
   _createClass(EuiDataGridCell, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$props7 = this.props,
-        colIndex = _this$props7.colIndex,
-        visibleRowIndex = _this$props7.visibleRowIndex;
+      var _this$props6 = this.props,
+        colIndex = _this$props6.colIndex,
+        visibleRowIndex = _this$props6.visibleRowIndex;
       this.unsubscribeCell = this.context.onFocusUpdate([colIndex, visibleRowIndex], this.onFocusUpdate);
 
       // Account for virtualization - when a cell unmounts when scrolled out of view
@@ -873,7 +799,6 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      window.clearTimeout(this.focusTimeout);
       if (this.unsubscribeCell) {
         this.unsubscribeCell();
       }
@@ -940,39 +865,33 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         if (nextProps.style.width !== this.props.style.width) return true;
       }
       if (nextState.cellProps !== this.state.cellProps) return true;
-      if (nextState.isEntered !== this.state.isEntered) return true;
       if (nextState.isFocused !== this.state.isFocused) return true;
-      if (nextState.enableInteractions !== this.state.enableInteractions) return true;
-      if (nextState.disableCellTabIndex !== this.state.disableCellTabIndex) return true;
       return false;
     }
   }, {
     key: "render",
     value: function render() {
-      var _classNames,
-        _rowHeightsOptions$li,
-        _this2 = this;
-      var _this$props8 = this.props,
-        width = _this$props8.width,
-        _this$props8$popoverC = _this$props8.popoverContext,
-        closeCellPopover = _this$props8$popoverC.closeCellPopover,
-        openCellPopover = _this$props8$popoverC.openCellPopover,
-        interactiveCellId = _this$props8.interactiveCellId,
-        columnType = _this$props8.columnType,
-        className = _this$props8.className,
-        column = _this$props8.column,
-        style = _this$props8.style,
-        rowHeightUtils = _this$props8.rowHeightUtils,
-        rowHeightsOptions = _this$props8.rowHeightsOptions,
-        rowManager = _this$props8.rowManager,
-        pagination = _this$props8.pagination,
-        rest = _objectWithoutProperties(_this$props8, _excluded2);
+      var _classNames, _rowHeightsOptions$li;
+      var _this$props7 = this.props,
+        width = _this$props7.width,
+        _this$props7$popoverC = _this$props7.popoverContext,
+        closeCellPopover = _this$props7$popoverC.closeCellPopover,
+        openCellPopover = _this$props7$popoverC.openCellPopover,
+        interactiveCellId = _this$props7.interactiveCellId,
+        columnType = _this$props7.columnType,
+        className = _this$props7.className,
+        column = _this$props7.column,
+        style = _this$props7.style,
+        rowHeightUtils = _this$props7.rowHeightUtils,
+        rowHeightsOptions = _this$props7.rowHeightsOptions,
+        rowManager = _this$props7.rowManager,
+        pagination = _this$props7.pagination,
+        rest = _objectWithoutProperties(_this$props7, _excluded2);
       var rowIndex = rest.rowIndex,
         visibleRowIndex = rest.visibleRowIndex,
         colIndex = rest.colIndex;
       var isExpandable = this.isExpandable();
       var popoverIsOpen = this.isPopoverOpen();
-      var showCellActions = this.state.isFocused || this.state.isEntered || this.state.enableInteractions || popoverIsOpen;
       var cellClasses = (0, _classnames.default)('euiDataGridRowCell', "euiDataGridRowCell--align".concat(this.state.cellTextAlign), (_classNames = {}, _defineProperty(_classNames, "euiDataGridRowCell--".concat(columnType), columnType), _defineProperty(_classNames, 'euiDataGridRowCell--open', popoverIsOpen), _classNames), className);
       var ariaRowIndex = pagination ? visibleRowIndex + 1 + pagination.pageSize * pagination.pageIndex : visibleRowIndex + 1;
       var _this$state$cellProps2 = this.state.cellProps,
@@ -1008,51 +927,6 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
               });
               break;
           }
-        } else {
-          if (event.key === _services.keys.ENTER || event.key === _services.keys.F2 || event.key === _services.keys.ESCAPE) {
-            var interactables = _this2.getInteractables();
-            if (interactables.length >= 2) {
-              switch (event.key) {
-                case _services.keys.ENTER:
-                  // `Enter` only activates the trap
-                  if (_this2.state.isEntered === false) {
-                    _this2.enableTabbing();
-                    _this2.setState({
-                      isEntered: true
-                    });
-
-                    // result of this keypress is focus shifts to the first interactive element
-                    // and then the browser fires the onClick event because that's how [Enter] works
-                    // so we need to prevent that default action otherwise entering the trap triggers the first element
-                    event.preventDefault();
-                  }
-                  break;
-                case _services.keys.F2:
-                  // toggle interactives' focus trap
-                  _this2.setState(function (_ref2) {
-                    var isEntered = _ref2.isEntered;
-                    if (isEntered) {
-                      _this2.preventTabbing();
-                    } else {
-                      _this2.enableTabbing();
-                    }
-                    return {
-                      isEntered: !isEntered
-                    };
-                  });
-                  break;
-                case _services.keys.ESCAPE:
-                  // `Escape` only de-activates the trap
-                  _this2.preventTabbing();
-                  if (_this2.state.isEntered === true) {
-                    _this2.setState({
-                      isEntered: false
-                    });
-                  }
-                  break;
-              }
-            }
-          }
         }
       };
       var rowHeight = rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getRowHeightOption(rowIndex, rowHeightsOptions);
@@ -1070,7 +944,7 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         isControlColumn: cellClasses.includes('euiDataGridRowCell--controlColumn'),
         ariaRowIndex: ariaRowIndex
       });
-      var cellActions = showCellActions && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_data_grid_cell_actions.EuiDataGridCellActions, {
+      var cellActions = isExpandable ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_data_grid_cell_actions.EuiDataGridCellActions, {
         rowIndex: rowIndex,
         colIndex: colIndex,
         column: column,
@@ -1087,23 +961,18 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
       }), (0, _react2.jsx)("div", {
         ref: this.popoverAnchorRef,
         "data-test-subject": "cellPopoverAnchor"
-      }));
-      var cellContent = isExpandable ? (0, _react2.jsx)(EuiDataGridCellContent, _extends({}, cellContentProps, {
+      })) : undefined;
+      var cellContent = (0, _react2.jsx)(_focus_utils.HandleInteractiveChildren, {
+        cellEl: this.cellRef.current,
+        updateCellFocusContext: this.updateCellFocusContext,
+        renderFocusTrap: !isExpandable
+      }, (0, _react2.jsx)(EuiDataGridCellContent, _extends({}, cellContentProps, {
         cellActions: cellActions
-      })) : (0, _react2.jsx)(_focus_trap.EuiFocusTrap, {
-        disabled: !this.state.isEntered,
-        autoFocus: true,
-        onDeactivation: function onDeactivation() {
-          _this2.setState({
-            isEntered: false
-          }, _this2.preventTabbing);
-        },
-        clickOutsideDisables: true
-      }, (0, _react2.jsx)(EuiDataGridCellContent, cellContentProps));
+      })));
       var cell = (0, _react2.jsx)("div", _extends({
         role: "gridcell",
         "aria-rowindex": ariaRowIndex,
-        tabIndex: this.state.isFocused && !this.state.disableCellTabIndex ? 0 : -1,
+        tabIndex: this.state.isFocused ? 0 : -1,
         ref: this.cellRef
       }, cellProps, {
         "data-test-subj": "dataGridRowCell"
@@ -1117,19 +986,7 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         ,
         "data-gridcell-visible-row-index": this.props.visibleRowIndex // Affected by sorting & pagination
         ,
-        onKeyDown: handleCellKeyDown,
-        onFocus: this.onFocus,
-        onMouseEnter: function onMouseEnter() {
-          _this2.setState({
-            enableInteractions: true
-          });
-        },
-        onMouseLeave: function onMouseLeave() {
-          _this2.setState({
-            enableInteractions: false
-          });
-        },
-        onBlur: this.onBlur
+        onKeyDown: handleCellKeyDown
       }), cellContent);
       return rowManager && !_utils.IS_JEST_ENVIRONMENT ? /*#__PURE__*/(0, _reactDom.createPortal)(cell, rowManager.getRow({
         rowIndex: rowIndex,
@@ -1143,16 +1000,6 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
   return EuiDataGridCell;
 }(_react.Component);
 exports.EuiDataGridCell = EuiDataGridCell;
-// focus tracking is split between the entire grid & individual cells,
-// the parent grid owns which cell is focused,
-// but individual cells need to react to changes and also report that
-// they are focused in response to user actions like clicking on the cell
-// to avoid focus trap fighting, cells wait a tick after being clicked to allow
-// any existing traps to disconnect before the cell reports the new focus state to the parent grid
-// but because of this small delay, multiple cells could queue up focus and
-// create an infinite loop as the cells activate->deactivate->...
-// so we track the last timeout id and clear that request if superseded
-_defineProperty(EuiDataGridCell, "activeFocusTimeoutId", undefined);
 _defineProperty(EuiDataGridCell, "contextType", _focus.DataGridFocusContext);
 EuiDataGridCell.propTypes = {
   rowIndex: _propTypes.default.number.isRequired,

package/lib/components/datagrid/body/{data_grid_cell_actions.js → cell/data_grid_cell_actions.js}

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EuiDataGridCellPopoverActions = exports.EuiDataGridCellActions = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _i18n = require("../../i18n");
-var _button_icon = require("../../button/button_icon");
-var _button_empty = require("../../button/button_empty");
-var _flex = require("../../flex");
-var _popover = require("../../popover");
+var _i18n = require("../../../i18n");
+var _button_icon = require("../../../button/button_icon");
+var _button_empty = require("../../../button/button_empty");
+var _flex = require("../../../flex");
+var _popover = require("../../../popover");
 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; }

package/lib/components/datagrid/body/{data_grid_cell_popover.js → cell/data_grid_cell_popover.js}

@@ -7,10 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.useCellPopover = exports.JsonPopoverContent = exports.DefaultCellPopover = exports.DataGridCellPopoverContext = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _services = require("../../../services");
-var _popover = require("../../popover");
-var _text = require("../../text");
-var _code = require("../../code");
+var _services = require("../../../../services");
+var _popover = require("../../../popover");
+var _text = require("../../../text");
+var _code = require("../../../code");
 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); }

package/lib/components/datagrid/body/{data_grid_cell_wrapper.js → cell/data_grid_cell_wrapper.js}

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Cell = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _sorting = require("../utils/sorting");
+var _sorting = require("../../utils/sorting");
 var _data_grid_cell_popover = require("./data_grid_cell_popover");
 var _data_grid_cell = require("./data_grid_cell");
 var _react2 = require("@emotion/react");

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,