@elastic/eui 76.4.0 → 77.0.0

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

@@ -1,87 +1,54 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiDataGridCell = void 0;
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 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 _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 _react2 = require("@emotion/react");
-
 var _excluded = ["renderCellValue", "column", "setCellContentsRef", "rowHeightsOptions", "rowIndex", "colIndex", "ariaRowIndex", "rowHeightUtils", "isDefinedHeight"],
-    _excluded2 = ["width", "popoverContext", "interactiveCellId", "columnType", "className", "column", "style", "rowHeightUtils", "rowHeightsOptions", "rowManager", "pagination"],
-    _excluded3 = ["isExpandable", "style", "className", "data-test-subj"];
-
+  _excluded2 = ["width", "popoverContext", "interactiveCellId", "columnType", "className", "column", "style", "rowHeightUtils", "rowHeightsOptions", "rowManager", "pagination"],
+  _excluded3 = ["isExpandable", "style", "className", "data-test-subj"];
 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 var EuiDataGridCellContent = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var renderCellValue = _ref.renderCellValue,
-      column = _ref.column,
-      setCellContentsRef = _ref.setCellContentsRef,
-      rowHeightsOptions = _ref.rowHeightsOptions,
-      rowIndex = _ref.rowIndex,
-      colIndex = _ref.colIndex,
-      ariaRowIndex = _ref.ariaRowIndex,
-      rowHeightUtils = _ref.rowHeightUtils,
-      isDefinedHeight = _ref.isDefinedHeight,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    column = _ref.column,
+    setCellContentsRef = _ref.setCellContentsRef,
+    rowHeightsOptions = _ref.rowHeightsOptions,
+    rowIndex = _ref.rowIndex,
+    colIndex = _ref.colIndex,
+    ariaRowIndex = _ref.ariaRowIndex,
+    rowHeightUtils = _ref.rowHeightUtils,
+    isDefinedHeight = _ref.isDefinedHeight,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // React is more permissible than the TS types indicate
   var CellElement = renderCellValue;
   return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", {
@@ -105,24 +72,19 @@ var EuiDataGridCellContent = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     }
   }))));
 });
-
 var EuiDataGridCell = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(EuiDataGridCell, _Component);
-
   var _super = _createSuper(EuiDataGridCell);
-
   function EuiDataGridCell() {
     var _this;
-
     (0, _classCallCheck2.default)(this, EuiDataGridCell);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "cellRef", /*#__PURE__*/(0, _react.createRef)());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "contentObserver", void 0);
+    // Cell Content ResizeObserver
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "popoverAnchorRef", /*#__PURE__*/(0, _react.createRef)());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "cellContentsRef", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
@@ -137,29 +99,22 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
     (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), "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({
@@ -175,39 +130,34 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "recalculateAutoHeight", function () {
       var _this$props = _this.props,
-          rowHeightUtils = _this$props.rowHeightUtils,
-          rowHeightsOptions = _this$props.rowHeightsOptions,
-          rowIndex = _this$props.rowIndex;
-
+        rowHeightUtils = _this$props.rowHeightUtils,
+        rowHeightsOptions = _this$props.rowHeightsOptions,
+        rowIndex = _this$props.rowIndex;
       if (_this.cellContentsRef && rowHeightUtils && rowHeightUtils.isAutoHeight(rowIndex, rowHeightsOptions)) {
         var _this$props2 = _this.props,
-            columnId = _this$props2.columnId,
-            visibleRowIndex = _this$props2.visibleRowIndex;
+          columnId = _this$props2.columnId,
+          visibleRowIndex = _this$props2.visibleRowIndex;
         var rowHeight = _this.cellContentsRef.offsetHeight;
         rowHeightUtils.setRowHeight(rowIndex, columnId, rowHeight, visibleRowIndex);
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "recalculateLineHeight", function () {
       if (!_this.props.setRowHeight) return; // setRowHeight is only passed by data_grid_body into one cell per row
-
       if (!_this.cellContentsRef) return;
       var _this$props3 = _this.props,
-          rowHeightUtils = _this$props3.rowHeightUtils,
-          rowHeightsOptions = _this$props3.rowHeightsOptions,
-          rowIndex = _this$props3.rowIndex;
+        rowHeightUtils = _this$props3.rowHeightUtils,
+        rowHeightsOptions = _this$props3.rowHeightsOptions,
+        rowIndex = _this$props3.rowIndex;
       var rowHeightOption = rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getRowHeightOption(rowIndex, rowHeightsOptions);
       var isSingleLine = rowHeightOption == null; // Undefined rowHeightsOptions default to a single line
-
       var lineCount = isSingleLine ? 1 : rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getLineCount(rowHeightOption);
-
       if (lineCount) {
         var shouldUseHeightsCache = rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.isRowHeightOverride(rowIndex, rowHeightsOptions);
         var height = rowHeightUtils.calculateHeightForLineCount(_this.cellContentsRef, lineCount, shouldUseHeightsCache);
-
         if (shouldUseHeightsCache) {
           var _this$props4 = _this.props,
-              columnId = _this$props4.columnId,
-              visibleRowIndex = _this$props4.visibleRowIndex;
+            columnId = _this$props4.columnId,
+            visibleRowIndex = _this$props4.visibleRowIndex;
           rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.setRowHeight(rowIndex, columnId, height, visibleRowIndex);
         } else {
           _this.props.setRowHeight(height);
@@ -216,12 +166,10 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isFocusedCell", function () {
       var _this$context$focused, _this$context$focused2;
-
       return ((_this$context$focused = _this.context.focusedCell) === null || _this$context$focused === void 0 ? void 0 : _this$context$focused[0]) === _this.props.colIndex && ((_this$context$focused2 = _this.context.focusedCell) === null || _this$context$focused2 === void 0 ? void 0 : _this$context$focused2[1]) === _this.props.visibleRowIndex;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onFocusUpdate", function (isFocused) {
       var preventScroll = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-
       _this.setState({
         isFocused: isFocused
       }, function () {
@@ -237,19 +185,15 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setCellContentsRef", function (ref) {
       _this.cellContentsRef = ref;
-
       if (ref && _resize_observer.hasResizeObserver) {
         _this.contentObserver = new window.ResizeObserver(function () {
           _this.recalculateAutoHeight();
-
           _this.recalculateLineHeight();
         });
-
         _this.contentObserver.observe(ref);
       } else if (_this.contentObserver) {
         _this.contentObserver.disconnect();
       }
-
       _this.preventTabbing();
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onFocus", function (e) {
@@ -261,28 +205,24 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
       //      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
+          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); // Close the cell popover if the popover was open and the user clicked the cell
-
+        }, 0);
+        // Close the cell popover if the popover was open and the user clicked the cell
         if (_this.props.popoverContext.popoverIsOpen) {
           _this.props.popoverContext.closeCellPopover();
         }
@@ -296,7 +236,6 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
     (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');
@@ -307,7 +246,6 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
     (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');
@@ -316,38 +254,40 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isExpandable", function () {
       var _this$props$column, _this$props$column$ce, _this$state$cellProps;
-
       // A cell must always show an expansion popover if it has cell actions,
       // otherwise keyboard and screen reader users have no way of accessing them
-      if ((_this$props$column = _this.props.column) !== null && _this$props$column !== void 0 && (_this$props$column$ce = _this$props$column.cellActions) !== null && _this$props$column$ce !== void 0 && _this$props$column$ce.length) return true; // props.isExpandable inherits from column.isExpandable
-      // state.cellProps allows consuming applications to override isExpandable on a per-cell basis
+      if ((_this$props$column = _this.props.column) !== null && _this$props$column !== void 0 && (_this$props$column$ce = _this$props$column.cellActions) !== null && _this$props$column$ce !== void 0 && _this$props$column$ce.length) return true;
 
+      // props.isExpandable inherits from column.isExpandable
+      // state.cellProps allows consuming applications to override isExpandable on a per-cell basis
       return (_this$state$cellProps = _this.state.cellProps.isExpandable) !== null && _this$state$cellProps !== void 0 ? _this$state$cellProps : _this.props.isExpandable;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isPopoverOpen", function () {
       var _this$props$popoverCo = _this.props.popoverContext,
-          popoverIsOpen = _this$props$popoverCo.popoverIsOpen,
-          cellLocation = _this$props$popoverCo.cellLocation;
+        popoverIsOpen = _this$props$popoverCo.popoverIsOpen,
+        cellLocation = _this$props$popoverCo.cellLocation;
       return _this.isExpandable() && popoverIsOpen && cellLocation.colIndex === _this.props.colIndex && cellLocation.rowIndex === _this.props.visibleRowIndex;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCellPopover", function () {
       if (_this.isPopoverOpen()) {
         var _this$props$popoverCo2 = _this.props.popoverContext,
-            setPopoverAnchor = _this$props$popoverCo2.setPopoverAnchor,
-            setPopoverContent = _this$props$popoverCo2.setPopoverContent,
-            setCellPopoverProps = _this$props$popoverCo2.setCellPopoverProps; // Set popover anchor
+          setPopoverAnchor = _this$props$popoverCo2.setPopoverAnchor,
+          setPopoverContent = _this$props$popoverCo2.setPopoverContent,
+          setCellPopoverProps = _this$props$popoverCo2.setCellPopoverProps;
 
+        // Set popover anchor
         var cellAnchorEl = _this.popoverAnchorRef.current;
-        setPopoverAnchor(cellAnchorEl); // Set popover contents with cell content
+        setPopoverAnchor(cellAnchorEl);
 
+        // 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;
+          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 PopoverElement = renderCellPopover || _data_grid_cell_popover.DefaultCellPopover;
         var CellElement = renderCellValue;
         var sharedProps = {
@@ -374,40 +314,37 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
     });
     return _this;
   }
-
   (0, _createClass2.default)(EuiDataGridCell, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this$props7 = this.props,
-          colIndex = _this$props7.colIndex,
-          visibleRowIndex = _this$props7.visibleRowIndex;
-      this.unsubscribeCell = this.context.onFocusUpdate([colIndex, visibleRowIndex], this.onFocusUpdate); // Account for virtualization - when a cell unmounts when scrolled out of view
-      // and then remounts when scrolled back into view, it should retain focus state
+        colIndex = _this$props7.colIndex,
+        visibleRowIndex = _this$props7.visibleRowIndex;
+      this.unsubscribeCell = this.context.onFocusUpdate([colIndex, visibleRowIndex], this.onFocusUpdate);
 
+      // Account for virtualization - when a cell unmounts when scrolled out of view
+      // and then remounts when scrolled back into view, it should retain focus state
       if (this.isFocusedCell()) {
         // The second flag sets preventScroll: true as a focus option, which prevents
         // hijacking the user's scroll behavior when the cell re-mounts on scroll
         this.onFocusUpdate(true, true);
         this.context.setIsFocusedCellInView(true);
-      } // Check if popover should be open on mount (typically only occurs if
-      // openCellPopover() is manually called on a location that's out of view)
-
+      }
 
+      // Check if popover should be open on mount (typically only occurs if
+      // openCellPopover() is manually called on a location that's out of view)
       this.handleCellPopover();
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       window.clearTimeout(this.focusTimeout);
-
       if (this.unsubscribeCell) {
         this.unsubscribeCell();
       }
-
       if (this.isFocusedCell()) {
         this.context.setIsFocusedCellInView(false);
       }
-
       if (this.isPopoverOpen()) {
         this.props.popoverContext.closeCellPopover();
       }
@@ -416,30 +353,28 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       var _this$props$rowHeight, _prevProps$rowHeights, _this$props$rowHeight2, _this$props$rowHeight3, _this$props$style, _prevProps$style;
-
       this.recalculateAutoHeight();
-
       if (((_this$props$rowHeight = this.props.rowHeightsOptions) === null || _this$props$rowHeight === void 0 ? void 0 : _this$props$rowHeight.defaultHeight) !== ((_prevProps$rowHeights = prevProps.rowHeightsOptions) === null || _prevProps$rowHeights === void 0 ? void 0 : _prevProps$rowHeights.defaultHeight)) {
         this.recalculateLineHeight();
       }
-
-      if ((_this$props$rowHeight2 = this.props.rowHeightUtils) !== null && _this$props$rowHeight2 !== void 0 && _this$props$rowHeight2.compensateForLayoutShift && (_this$props$rowHeight3 = this.props.rowHeightsOptions) !== null && _this$props$rowHeight3 !== void 0 && _this$props$rowHeight3.scrollAnchorRow && this.props.colIndex === 0 && // once per row
-      this.props.columnId === prevProps.columnId && // if this is still the same column
-      this.props.rowIndex === prevProps.rowIndex && // if this is still the same row
+      if ((_this$props$rowHeight2 = this.props.rowHeightUtils) !== null && _this$props$rowHeight2 !== void 0 && _this$props$rowHeight2.compensateForLayoutShift && (_this$props$rowHeight3 = this.props.rowHeightsOptions) !== null && _this$props$rowHeight3 !== void 0 && _this$props$rowHeight3.scrollAnchorRow && this.props.colIndex === 0 &&
+      // once per row
+      this.props.columnId === prevProps.columnId &&
+      // if this is still the same column
+      this.props.rowIndex === prevProps.rowIndex &&
+      // if this is still the same row
       ((_this$props$style = this.props.style) === null || _this$props$style === void 0 ? void 0 : _this$props$style.top) !== ((_prevProps$style = prevProps.style) === null || _prevProps$style === void 0 ? void 0 : _prevProps$style.top) // if the top position has changed
       ) {
         var _prevProps$style2, _this$props$style2, _this$props$rowHeight4;
-
         var previousTop = parseFloat((_prevProps$style2 = prevProps.style) === null || _prevProps$style2 === void 0 ? void 0 : _prevProps$style2.top);
-        var currentTop = parseFloat((_this$props$style2 = this.props.style) === null || _this$props$style2 === void 0 ? void 0 : _this$props$style2.top); // @ts-ignore We've already checked that this virtualization util is available above
+        var currentTop = parseFloat((_this$props$style2 = this.props.style) === null || _this$props$style2 === void 0 ? void 0 : _this$props$style2.top);
 
+        // @ts-ignore We've already checked that this virtualization util is available above
         this.props.rowHeightUtils.compensateForLayoutShift(this.props.rowIndex, currentTop - previousTop, (_this$props$rowHeight4 = this.props.rowHeightsOptions) === null || _this$props$rowHeight4 === void 0 ? void 0 : _this$props$rowHeight4.scrollAnchorRow);
       }
-
       if (this.props.popoverContext.popoverIsOpen !== prevProps.popoverContext.popoverIsOpen || this.props.popoverContext.cellLocation !== prevProps.popoverContext.cellLocation || this.props.renderCellPopover !== prevProps.renderCellPopover) {
         this.handleCellPopover();
       }
-
       if (this.props.columnId !== prevProps.columnId || this.props.rowIndex !== prevProps.rowIndex) {
         this.setCellProps({});
       }
@@ -457,20 +392,18 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
       if (nextProps.renderCellValue !== this.props.renderCellValue) return true;
       if (nextProps.renderCellPopover !== this.props.renderCellPopover) return true;
       if (nextProps.interactiveCellId !== this.props.interactiveCellId) return true;
-      if (nextProps.popoverContext.popoverIsOpen !== this.props.popoverContext.popoverIsOpen || nextProps.popoverContext.cellLocation !== this.props.popoverContext.cellLocation) return true; // respond to adjusted position & dimensions
+      if (nextProps.popoverContext.popoverIsOpen !== this.props.popoverContext.popoverIsOpen || nextProps.popoverContext.cellLocation !== this.props.popoverContext.cellLocation) return true;
 
+      // respond to adjusted position & dimensions
       if (nextProps.style) {
         if (!this.props.style) return true;
-
         if (nextProps.style.top !== this.props.style.top) {
           return true;
         }
-
         if (nextProps.style.left !== this.props.style.left) return true;
         if (nextProps.style.height !== this.props.style.height) return true;
         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;
@@ -482,44 +415,41 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _classNames,
-          _rowHeightsOptions$li,
-          _this2 = this;
-
+        _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);
+        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 rowIndex = rest.rowIndex,
-          visibleRowIndex = rest.visibleRowIndex,
-          colIndex = rest.colIndex;
+        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', (_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,
-          _ = _this$state$cellProps2.isExpandable,
-          cellPropsStyle = _this$state$cellProps2.style,
-          cellPropsClassName = _this$state$cellProps2.className,
-          cellPropsDataTestSubj = _this$state$cellProps2['data-test-subj'],
-          setCellProps = (0, _objectWithoutProperties2.default)(_this$state$cellProps2, _excluded3);
-
+        _ = _this$state$cellProps2.isExpandable,
+        cellPropsStyle = _this$state$cellProps2.style,
+        cellPropsClassName = _this$state$cellProps2.className,
+        cellPropsDataTestSubj = _this$state$cellProps2['data-test-subj'],
+        setCellProps = (0, _objectWithoutProperties2.default)(_this$state$cellProps2, _excluded3);
       var cellProps = _objectSpread(_objectSpread({}, setCellProps), {}, {
         'data-test-subj': (0, _classnames.default)('dataGridRowCell', cellPropsDataTestSubj),
         className: (0, _classnames.default)(cellClasses, cellPropsClassName)
       });
-
       cellProps.style = _objectSpread(_objectSpread({}, style), {}, {
         // set by react-window or the custom renderer
         top: style !== null && style !== void 0 && style.top ? 0 : undefined,
@@ -528,13 +458,11 @@ 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:
@@ -548,63 +476,51 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         } 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
+                    });
+
+                    // 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 isDefinedHeight = !!(rowHeightUtils !== null && rowHeightUtils !== void 0 && rowHeightUtils.getRowHeightOption(rowIndex, rowHeightsOptions));
-
       var cellContentProps = _objectSpread(_objectSpread({}, rest), {}, {
         setCellProps: this.setCellProps,
         column: column,
@@ -618,7 +534,6 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         isDefinedHeight: isDefinedHeight,
         ariaRowIndex: ariaRowIndex
       });
-
       var anchorClass = 'euiDataGridRowCell__expandFlex';
       var expandClass = isDefinedHeight ? 'euiDataGridRowCell__contentByHeight' : 'euiDataGridRowCell__expandContent';
       var innerContent = (0, _react2.jsx)(_focus_trap.EuiFocusTrap, {
@@ -636,7 +551,6 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
       }, (0, _react2.jsx)("div", {
         className: expandClass
       }, (0, _react2.jsx)(EuiDataGridCellContent, cellContentProps))));
-
       if (isExpandable) {
         innerContent = (0, _react2.jsx)("div", {
           className: anchorClass,
@@ -659,14 +573,14 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
           }
         }));
       }
-
       var content = (0, _react2.jsx)("div", (0, _extends2.default)({
         role: "gridcell",
         "aria-rowindex": ariaRowIndex,
         tabIndex: this.state.isFocused && !this.state.disableCellTabIndex ? 0 : -1,
         ref: this.cellRef
       }, cellProps, {
-        "data-test-subj": "dataGridRowCell" // Data attributes to help target specific cells by either data or current cell location
+        "data-test-subj": "dataGridRowCell"
+        // Data attributes to help target specific cells by either data or current cell location
         ,
         "data-gridcell-column-id": this.props.columnId // Static column ID name, not affected by column order
         ,
@@ -696,13 +610,20 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         top: style.top,
         // comes in as a `{float}px` string from react-window
         height: style.height // comes in as an integer from react-window
-
       })) : content;
     }
   }]);
   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);