@elastic/eui 92.0.0 → 92.1.1

package/optimize/lib/components/steps/step_number.styles.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiStepNumberStyles = exports.euiStepNumberContentStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
-var _services = require("../../services");
 var _step = require("./step.styles");
 var _mixins = require("../../themes/amsterdam/global_styling/mixins");
 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)."; } /*
@@ -46,12 +45,12 @@ var euiStepNumberStyles = function euiStepNumberStyles(euiThemeContext) {
     xs: /*#__PURE__*/(0, _react.css)(createStepsNumber(euiStep.numberXSSize, (0, _global_styling.euiFontSizeFromScale)('xs', euiTheme)), ";;label:xs;"),
     // status
     incomplete: /*#__PURE__*/(0, _react.css)("background-color:transparent;color:", euiTheme.colors.text, ";border:", euiTheme.border.thick, ";;label:incomplete;"),
-    disabled: /*#__PURE__*/(0, _react.css)("background-color:", (0, _mixins.euiButtonFillColor)(euiThemeContext, 'disabled').backgroundColor, ";color:", (0, _services.makeHighContrastColor)(euiTheme.colors.disabledText)((0, _mixins.euiButtonFillColor)(euiThemeContext, 'disabled').backgroundColor), ";;label:disabled;"),
+    disabled: /*#__PURE__*/(0, _react.css)((0, _mixins.euiButtonFillColor)(euiThemeContext, 'disabled'), ";;label:disabled;"),
     loading: _ref,
-    warning: /*#__PURE__*/(0, _react.css)("color:", (0, _mixins.euiButtonFillColor)(euiThemeContext, 'warning').color, ";background-color:", (0, _mixins.euiButtonFillColor)(euiThemeContext, 'warning').backgroundColor, ";", _global_styling.euiCanAnimate, "{animation:", _global_styling.euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:warning;"),
-    danger: /*#__PURE__*/(0, _react.css)("color:", (0, _mixins.euiButtonFillColor)(euiThemeContext, 'danger').color, ";background-color:", (0, _mixins.euiButtonFillColor)(euiThemeContext, 'danger').backgroundColor, ";", _global_styling.euiCanAnimate, "{animation:", _global_styling.euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:danger;"),
-    complete: /*#__PURE__*/(0, _react.css)("color:", (0, _mixins.euiButtonFillColor)(euiThemeContext, 'success').color, ";background-color:", (0, _mixins.euiButtonFillColor)(euiThemeContext, 'success').backgroundColor, ";", _global_styling.euiCanAnimate, "{animation:", _global_styling.euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:complete;"),
-    current: /*#__PURE__*/(0, _react.css)("border:2px solid ", euiTheme.colors.body, ";box-shadow:0 0 0 2px ", euiTheme.colors.primary, ";.euiStepNumber__number{display:inline-block;transform:translateY(-2px);};label:current;")
+    warning: /*#__PURE__*/(0, _react.css)((0, _mixins.euiButtonFillColor)(euiThemeContext, 'warning'), " ", _global_styling.euiCanAnimate, "{animation:", _global_styling.euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:warning;"),
+    danger: /*#__PURE__*/(0, _react.css)((0, _mixins.euiButtonFillColor)(euiThemeContext, 'danger'), " ", _global_styling.euiCanAnimate, "{animation:", _global_styling.euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:danger;"),
+    complete: /*#__PURE__*/(0, _react.css)((0, _mixins.euiButtonFillColor)(euiThemeContext, 'success'), " ", _global_styling.euiCanAnimate, "{animation:", _global_styling.euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:complete;"),
+    current: /*#__PURE__*/(0, _react.css)("border:", euiTheme.border.width.thick, " solid ", euiTheme.colors.body, ";box-shadow:0 0 0 ", euiTheme.border.width.thick, " ", euiTheme.colors.primary, ";;label:current;")
   };
 };
 exports.euiStepNumberStyles = euiStepNumberStyles;
@@ -72,7 +71,7 @@ var euiStepNumberContentStyles = function euiStepNumberContentStyles(_ref3) {
     incomplete: /*#__PURE__*/(0, _react.css)("display:unset;position:relative;inset-block-start:-", euiTheme.border.width.thick, ";;label:incomplete;"),
     loading: /*#__PURE__*/(0, _react.css)(";label:loading;"),
     disabled: /*#__PURE__*/(0, _react.css)(";label:disabled;"),
-    current: /*#__PURE__*/(0, _react.css)(";label:current;")
+    current: /*#__PURE__*/(0, _react.css)("display:inline-block;transform:translateY(-", euiTheme.border.width.thick, ");;label:current;")
   };
 };
 exports.euiStepNumberContentStyles = euiStepNumberContentStyles;

package/optimize/lib/components/tree_view/tree_view.js

@@ -40,7 +40,9 @@ var EuiTreeViewContext = /*#__PURE__*/(0, _react.createContext)('');
 function hasAriaLabel(x) {
   return x.hasOwnProperty('aria-label');
 }
-function getTreeId(propId, contextId, idGenerator) {
+function getTreeId(propId) {
+  var contextId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  var idGenerator = arguments.length > 2 ? arguments[2] : undefined;
   return propId !== null && propId !== void 0 ? propId : contextId === '' ? idGenerator() : contextId;
 }
 var displayToClassNameMap = {
@@ -50,9 +52,14 @@ var displayToClassNameMap = {
 var EuiTreeView = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(EuiTreeView, _Component);
   var _super = _createSuper(EuiTreeView);
-  function EuiTreeView(props, context) {
+  function EuiTreeView(props,
+  // Without the optional ? typing, TS will throw errors on JSX component errors
+  // @see https://github.com/facebook/react/issues/13944#issuecomment-1183693239
+  context) {
     var _this;
     (0, _classCallCheck2.default)(this, EuiTreeView);
+    // TODO: context in constructor has been deprecated.
+    // We should likely convert this to a function component
     _this = _super.call(this, props, context);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "treeIdGenerator", (0, _services.htmlIdGenerator)('euiTreeView'));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isNested", void 0);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "92.0.0",
+  "version": "92.1.1",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",

package/src/components/datagrid/body/header/_data_grid_header_row.scss

@@ -17,18 +17,19 @@
   align-items: center;
   display: flex;
 
-  &:focus {
+  // Workaround for focus trap
+  & > [data-focus-lock-disabled] {
+    width: 100%;
+  }
+
+  &:focus,
+  &--hasColumnActions:focus-within,
+  &--isActionsPopoverOpen {
     @include euiDataGridCellFocus;
-    border-top: none;
   }
 
   // We only truncate if the cell is not a control column.
   &:not(.euiDataGridHeaderCell--controlColumn) {
-    &:focus-within {
-      @include euiDataGridCellFocus;
-      border-top: none;
-    }
-
     .euiDataGridHeaderCell__button {
       position: relative;
       display: flex;

package/test-env/components/aspect_ratio/aspect_ratio.js

@@ -29,7 +29,7 @@ var EuiAspectRatio = function EuiAspectRatio(_ref) {
     style = _ref.style,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiAspectRatio', className);
-  var euiAspectRatioStyle = _objectSpread({
+  var euiAspectRatioStyle = _objectSpread(_objectSpread({}, children.props.style), {}, {
     aspectRatio: "".concat(width, " / ").concat(height),
     height: 'auto',
     width: '100%',

package/test-env/components/collapsible_nav_beta/collapsible_nav_body_footer.js

@@ -16,7 +16,7 @@ var _context = require("./context");
 var _collapsible_nav_body_footer = require("./collapsible_nav_body_footer.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["className"],
-  _excluded2 = ["className"];
+  _excluded2 = ["className", "children"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -53,6 +53,7 @@ var EuiCollapsibleNavBody = function EuiCollapsibleNavBody(_ref) {
 exports.EuiCollapsibleNavBody = EuiCollapsibleNavBody;
 var EuiCollapsibleNavFooter = function EuiCollapsibleNavFooter(_ref2) {
   var className = _ref2.className,
+    children = _ref2.children,
     props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
   var classes = (0, _classnames.default)('euiCollapsibleNav__footer', className);
   var _useContext2 = (0, _react.useContext)(_context.EuiCollapsibleNavContext),
@@ -60,10 +61,13 @@ var EuiCollapsibleNavFooter = function EuiCollapsibleNavFooter(_ref2) {
     isPush = _useContext2.isPush;
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _collapsible_nav_body_footer.euiCollapsibleNavFooterStyles)(euiTheme);
-  var cssStyles = [styles.euiCollapsibleNav__footer, isCollapsed && isPush && styles.isPushCollapsed];
+  var cssStyles = styles.euiCollapsibleNav__footer;
+  var overflowWrapperStyles = [styles.euiFlyoutFooter__overflow, isCollapsed && isPush && styles.isPushCollapsed];
   return (0, _react2.jsx)(_flyout.EuiFlyoutFooter, (0, _extends2.default)({
     className: classes,
     css: cssStyles
-  }, props));
+  }, props), (0, _react2.jsx)("div", {
+    css: overflowWrapperStyles
+  }, children));
 };
 exports.EuiCollapsibleNavFooter = EuiCollapsibleNavFooter;

package/test-env/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js

@@ -19,17 +19,17 @@ var _global_styling = require("../../global_styling");
 var hideScrollbars = "\n  scrollbar-width: none; /* Firefox */\n\n  &::-webkit-scrollbar {\n    display: none; /* Chrome, Edge, & Safari */\n  }\n";
 exports.hideScrollbars = hideScrollbars;
 var euiCollapsibleNavBodyStyles = {
-  // In case things get really dire responsively, ensure the footer doesn't overtake the body
-  euiCollapsibleNav__body: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-height', '50%'), ";;label:euiCollapsibleNav__body;"),
+  euiCollapsibleNav__body: /*#__PURE__*/(0, _react.css)(";label:euiCollapsibleNav__body;"),
   isPushCollapsed: /*#__PURE__*/(0, _react.css)(".euiFlyoutBody__overflow{", hideScrollbars, ";};label:isPushCollapsed;")
 };
 exports.euiCollapsibleNavBodyStyles = euiCollapsibleNavBodyStyles;
 var euiCollapsibleNavFooterStyles = function euiCollapsibleNavFooterStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiCollapsibleNav__footer: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.emptyShade, ";", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), " ", (0, _global_styling.euiYScrollWithShadows)(euiThemeContext, {
+    euiCollapsibleNav__footer: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', '50%'), " background-color:", euiTheme.colors.emptyShade, ";", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), ";;label:euiCollapsibleNav__footer;"),
+    euiFlyoutFooter__overflow: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiYScrollWithShadows)(euiThemeContext, {
       side: 'end'
-    }), ";;label:euiCollapsibleNav__footer;"),
+    }), ";;label:euiFlyoutFooter__overflow;"),
     isPushCollapsed: /*#__PURE__*/(0, _react.css)(hideScrollbars, ";;label:isPushCollapsed;")
   };
 };

package/test-env/components/datagrid/body/{data_grid_cell.js → cell/data_grid_cell.js}

@@ -19,17 +19,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"],
@@ -95,7 +94,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 = {
@@ -598,43 +600,21 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       cellProps: {},
       isFocused: false,
-      isEntered: false,
-      enableInteractions: false,
-      disableCellTabIndex: false,
+      isHovered: false,
       cellTextAlign: 'Left'
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "unsubscribeCell", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "focusTimeout", void 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "style", null);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getInteractables", function () {
-      var tabbingRef = _this.cellContentsRef;
-      if (tabbingRef) {
-        return tabbingRef.querySelectorAll('[data-datagrid-interactable=true]');
-      }
-      return [];
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateCellFocusContext", function () {
+      _this.context.setFocusedCell([_this.props.colIndex, _this.props.visibleRowIndex]);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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
+        });
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "recalculateAutoHeight", function () {
@@ -703,61 +683,8 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
       } else if (_this.contentObserver) {
         _this.contentObserver.disconnect();
       }
-      _this.preventTabbing();
       _this.setCellTextAlign();
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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);
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onBlur", function () {
-      _this.setState({
-        disableCellTabIndex: false
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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');
-        }
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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');
-        }
-      }
-    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setCellTextAlign", function () {
       if (_this.cellContentsRef) {
         var columnType = _this.props.columnType;
@@ -810,14 +737,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 = {
@@ -842,14 +769,59 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         setPopoverContent(popoverContent);
       }
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCellKeyDown", function (event) {
+      if (_this.isExpandable()) {
+        if (_this.isPopoverOpen()) return;
+        var _this$props6 = _this.props,
+          openCellPopover = _this$props6.popoverContext.openCellPopover,
+          visibleRowIndex = _this$props6.visibleRowIndex,
+          colIndex = _this$props6.colIndex;
+        switch (event.key) {
+          case _services.keys.ENTER:
+          case _services.keys.F2:
+            event.preventDefault();
+            openCellPopover({
+              rowIndex: visibleRowIndex,
+              colIndex: colIndex
+            });
+            break;
+        }
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCellExpansionClick", function () {
+      var _this$props7 = _this.props,
+        _this$props7$popoverC = _this$props7.popoverContext,
+        openCellPopover = _this$props7$popoverC.openCellPopover,
+        closeCellPopover = _this$props7$popoverC.closeCellPopover,
+        visibleRowIndex = _this$props7.visibleRowIndex,
+        colIndex = _this$props7.colIndex;
+      if (_this.isPopoverOpen()) {
+        closeCellPopover();
+      } else {
+        openCellPopover({
+          rowIndex: visibleRowIndex,
+          colIndex: colIndex
+        });
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseEnter", function () {
+      return _this.setState({
+        isHovered: true
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseLeave", function () {
+      return _this.setState({
+        isHovered: false
+      });
+    });
     return _this;
   }
   (0, _createClass2.default)(EuiDataGridCell, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$props7 = this.props,
-        colIndex = _this$props7.colIndex,
-        visibleRowIndex = _this$props7.visibleRowIndex;
+      var _this$props8 = this.props,
+        colIndex = _this$props8.colIndex,
+        visibleRowIndex = _this$props8.visibleRowIndex;
       this.unsubscribeCell = this.context.onFocusUpdate([colIndex, visibleRowIndex], this.onFocusUpdate);
 
       // Account for virtualization - when a cell unmounts when scrolled out of view
@@ -868,7 +840,6 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      window.clearTimeout(this.focusTimeout);
       if (this.unsubscribeCell) {
         this.unsubscribeCell();
       }
@@ -935,39 +906,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;
+      if (nextState.isHovered !== this.state.isHovered) 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 = (0, _objectWithoutProperties2.default)(_this$props8, _excluded2);
+      var _classNames, _rowHeightsOptions$li;
+      var _this$props9 = this.props,
+        width = _this$props9.width,
+        popoverContext = _this$props9.popoverContext,
+        interactiveCellId = _this$props9.interactiveCellId,
+        columnType = _this$props9.columnType,
+        className = _this$props9.className,
+        column = _this$props9.column,
+        style = _this$props9.style,
+        rowHeightUtils = _this$props9.rowHeightUtils,
+        rowHeightsOptions = _this$props9.rowHeightsOptions,
+        rowManager = _this$props9.rowManager,
+        pagination = _this$props9.pagination,
+        rest = (0, _objectWithoutProperties2.default)(_this$props9, _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 showCellActions = isExpandable && (popoverIsOpen || this.state.isFocused || this.state.isHovered);
       var cellClasses = (0, _classnames.default)('euiDataGridRowCell', "euiDataGridRowCell--align".concat(this.state.cellTextAlign), (_classNames = {}, (0, _defineProperty2.default)(_classNames, "euiDataGridRowCell--".concat(columnType), columnType), (0, _defineProperty2.default)(_classNames, 'euiDataGridRowCell--open', popoverIsOpen), _classNames), className);
       var ariaRowIndex = pagination ? visibleRowIndex + 1 + pagination.pageSize * pagination.pageIndex : visibleRowIndex + 1;
       var _this$state$cellProps2 = this.state.cellProps,
@@ -988,68 +953,6 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         // column width, can be undefined
         lineHeight: (_rowHeightsOptions$li = rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : rowHeightsOptions.lineHeight) !== null && _rowHeightsOptions$li !== void 0 ? _rowHeightsOptions$li : undefined
       }, cellPropsStyle);
-      var handleCellKeyDown = function handleCellKeyDown(event) {
-        if (isExpandable) {
-          if (popoverIsOpen) {
-            return;
-          }
-          switch (event.key) {
-            case _services.keys.ENTER:
-            case _services.keys.F2:
-              event.preventDefault();
-              openCellPopover({
-                rowIndex: visibleRowIndex,
-                colIndex: colIndex
-              });
-              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);
       var cellContentProps = _objectSpread(_objectSpread({}, rest), {}, {
         setCellProps: this.setCellProps,
@@ -1065,40 +968,10 @@ 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, {
-        rowIndex: rowIndex,
-        colIndex: colIndex,
-        column: column,
-        onExpandClick: function onExpandClick() {
-          if (popoverIsOpen) {
-            closeCellPopover();
-          } else {
-            openCellPopover({
-              rowIndex: visibleRowIndex,
-              colIndex: colIndex
-            });
-          }
-        }
-      }), (0, _react2.jsx)("div", {
-        ref: this.popoverAnchorRef,
-        "data-test-subject": "cellPopoverAnchor"
-      }));
-      var cellContent = isExpandable ? (0, _react2.jsx)(EuiDataGridCellContent, (0, _extends2.default)({}, 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", (0, _extends2.default)({
         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"
@@ -1112,20 +985,24 @@ 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
-      }), cellContent);
+        onKeyDown: this.handleCellKeyDown,
+        onMouseEnter: this.onMouseEnter,
+        onMouseLeave: this.onMouseLeave
+      }), (0, _react2.jsx)(_focus_utils.HandleInteractiveChildren, {
+        cellEl: this.cellRef.current,
+        updateCellFocusContext: this.updateCellFocusContext,
+        renderFocusTrap: !isExpandable
+      }, (0, _react2.jsx)(EuiDataGridCellContent, (0, _extends2.default)({}, cellContentProps, {
+        cellActions: showCellActions && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_data_grid_cell_actions.EuiDataGridCellActions, {
+          rowIndex: rowIndex,
+          colIndex: colIndex,
+          column: column,
+          onExpandClick: this.handleCellExpansionClick
+        }), (0, _react2.jsx)("div", {
+          ref: this.popoverAnchorRef,
+          "data-test-subject": "cellPopoverAnchor"
+        }))
+      }))));
       return rowManager && !_utils.IS_JEST_ENVIRONMENT ? /*#__PURE__*/(0, _reactDom.createPortal)(cell, rowManager.getRow({
         rowIndex: rowIndex,
         visibleRowIndex: visibleRowIndex,
@@ -1138,16 +1015,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
-(0, _defineProperty2.default)(EuiDataGridCell, "activeFocusTimeoutId", undefined);
 (0, _defineProperty2.default)(EuiDataGridCell, "contextType", _focus.DataGridFocusContext);
 EuiDataGridCell.propTypes = {
   rowIndex: _propTypes.default.number.isRequired,