@elastic/eui 95.9.0 → 95.10.0

package/optimize/es/components/search_bar/filters/field_value_selection_filter.js

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /*
@@ -18,7 +18,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * Side Public License, v 1.
  */
 
-import React, { Component } from 'react';
+import React, { Component, createRef } from 'react';
 import { RenderWithEuiTheme } from '../../../services';
 import { isArray, isNil } from '../../../services/predicate';
 import { EuiPopover, EuiPopoverTitle } from '../../popover';
@@ -32,7 +32,8 @@ var defaults = {
   config: {
     multiSelect: true,
     filterWith: 'prefix',
-    searchThreshold: 10
+    searchThreshold: 10,
+    autoSortOptions: true
   }
 };
 export var FieldValueSelectionFilter = /*#__PURE__*/function (_Component) {
@@ -40,45 +41,132 @@ export var FieldValueSelectionFilter = /*#__PURE__*/function (_Component) {
     var _this;
     _classCallCheck(this, FieldValueSelectionFilter);
     _this = _callSuper(this, FieldValueSelectionFilter, [props]);
-    _defineProperty(_this, "resolveOptionsLoader", function () {
-      var options = _this.props.config.options;
-      if (isArray(options)) {
-        return function () {
-          return Promise.resolve(options);
-        };
-      }
-      return function () {
-        var cachedOptions = _this.state.cachedOptions;
-        if (cachedOptions) {
-          return Promise.resolve(cachedOptions);
-        }
-        return options().then(function (opts) {
-          // If a cache time is set, populate the cache and also schedule a
-          // cache reset.
-          if (_this.props.config.cache != null && _this.props.config.cache > 0) {
+    _defineProperty(_this, "selectableClassRef", /*#__PURE__*/createRef());
+    _defineProperty(_this, "cacheTimeout", void 0);
+    _defineProperty(_this, "loadOptions", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var loadedOptions, _this$props$config, options, cache, _this$state$cachedOpt, items, _this$props, query, config;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
             _this.setState({
-              cachedOptions: opts
+              options: null,
+              error: null
             });
-            setTimeout(function () {
+            _this$props$config = _this.props.config, options = _this$props$config.options, cache = _this$props$config.cache;
+            _context.prev = 2;
+            if (!isArray(options)) {
+              _context.next = 7;
+              break;
+            }
+            // Synchronous options, already loaded
+            loadedOptions = options;
+            _context.next = 16;
+            break;
+          case 7:
+            if (!((_this$state$cachedOpt = _this.state.cachedOptions) !== null && _this$state$cachedOpt !== void 0)) {
+              _context.next = 11;
+              break;
+            }
+            _context.t0 = _this$state$cachedOpt;
+            _context.next = 14;
+            break;
+          case 11:
+            _context.next = 13;
+            return options();
+          case 13:
+            _context.t0 = _context.sent;
+          case 14:
+            loadedOptions = _context.t0;
+            // If a cache time is set, populate the cache and schedule a cache reset
+            if (cache != null && cache > 0) {
               _this.setState({
-                cachedOptions: null
+                cachedOptions: loadedOptions
               });
-            }, _this.props.config.cache);
-          }
-          return opts;
+              _this.cacheTimeout = setTimeout(function () {
+                _this.setState({
+                  cachedOptions: null
+                });
+              }, cache);
+            }
+          case 16:
+            _context.next = 21;
+            break;
+          case 18:
+            _context.prev = 18;
+            _context.t1 = _context["catch"](2);
+            return _context.abrupt("return", _this.setState({
+              options: null,
+              error: 'Could not load options'
+            }));
+          case 21:
+            items = {
+              on: [],
+              off: [],
+              rest: []
+            };
+            _this$props = _this.props, query = _this$props.query, config = _this$props.config;
+            if (loadedOptions) {
+              loadedOptions.forEach(function (op) {
+                var optionField = op.field || config.field;
+                if (optionField) {
+                  var clause = _this.multiSelect === 'or' ? query.getOrFieldClause(optionField, op.value) : query.getSimpleFieldClause(optionField, op.value);
+                  var checked = _this.resolveChecked(clause);
+                  if (!checked) {
+                    items.rest.push(op);
+                  } else if (checked === 'on') {
+                    items.on.push(op);
+                  } else {
+                    items.off.push(op);
+                  }
+                }
+                return;
+              });
+            }
+            _this.setState({
+              error: null,
+              activeItemsCount: items.on.length,
+              options: {
+                unsorted: loadedOptions,
+                sorted: [].concat(_toConsumableArray(items.on), _toConsumableArray(items.off), _toConsumableArray(items.rest))
+              }
+            }, _this.scrollToAutoSortedOption);
+          case 25:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[2, 18]]);
+    })));
+    _defineProperty(_this, "scrollToAutoSortedOption", function () {
+      if (!_this.autoSortOptions) return;
+      var _this$state = _this.state,
+        lastCheckedValue = _this$state.lastCheckedValue,
+        options = _this$state.options;
+      if (lastCheckedValue) {
+        var sortedIndex = options.sorted.findIndex(function (option) {
+          return option.value === lastCheckedValue;
         });
-      };
+        if (sortedIndex >= 0) {
+          var _this$selectableClass;
+          // EuiSelectable should automatically handle scrolling its list to the new index
+          (_this$selectableClass = _this.selectableClassRef.current) === null || _this$selectableClass === void 0 || _this$selectableClass.setState({
+            activeOptionIndex: sortedIndex
+          });
+        }
+        _this.setState({
+          lastCheckedValue: undefined
+        });
+      }
     });
     var _options = props.config.options;
     var preloadedOptions = isArray(_options) ? {
-      all: _options,
-      shown: _options
+      unsorted: _options,
+      sorted: _options
     } : null;
     _this.state = {
       popoverOpen: false,
       error: null,
       options: preloadedOptions,
-      activeItems: []
+      activeItemsCount: 0
     };
     return _this;
   }
@@ -108,94 +196,6 @@ export var FieldValueSelectionFilter = /*#__PURE__*/function (_Component) {
         };
       });
     }
-  }, {
-    key: "loadOptions",
-    value: function loadOptions() {
-      var _this3 = this;
-      var loader = this.resolveOptionsLoader();
-      this.setState({
-        options: null,
-        error: null
-      });
-      loader().then(function (options) {
-        var items = {
-          on: [],
-          off: [],
-          rest: []
-        };
-        var _this3$props = _this3.props,
-          query = _this3$props.query,
-          config = _this3$props.config;
-        var multiSelect = _this3.resolveMultiSelect();
-        if (options) {
-          options.forEach(function (op) {
-            var optionField = op.field || config.field;
-            if (optionField) {
-              var clause = multiSelect === 'or' ? query.getOrFieldClause(optionField, op.value) : query.getSimpleFieldClause(optionField, op.value);
-              var checked = _this3.resolveChecked(clause);
-              if (!checked) {
-                items.rest.push(op);
-              } else if (checked === 'on') {
-                items.on.push(op);
-              } else {
-                items.off.push(op);
-              }
-            }
-            return;
-          });
-        }
-        _this3.setState({
-          error: null,
-          activeItems: items.on,
-          options: {
-            all: options,
-            shown: [].concat(_toConsumableArray(items.on), _toConsumableArray(items.off), _toConsumableArray(items.rest))
-          }
-        });
-      }).catch(function () {
-        _this3.setState({
-          options: null,
-          error: 'Could not load options'
-        });
-      });
-    }
-  }, {
-    key: "filterOptions",
-    value: function filterOptions() {
-      var _this4 = this;
-      var q = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-      this.setState(function (prevState) {
-        if (isNil(prevState.options)) {
-          return {};
-        }
-        var predicate = _this4.getOptionFilter();
-        return _objectSpread(_objectSpread({}, prevState), {}, {
-          options: _objectSpread(_objectSpread({}, prevState.options), {}, {
-            shown: prevState.options.all.filter(function (option, i, options) {
-              var name = _this4.resolveOptionName(option).toLowerCase();
-              var query = q.toLowerCase();
-              return predicate(name, query, options);
-            })
-          })
-        });
-      });
-    }
-  }, {
-    key: "getOptionFilter",
-    value: function getOptionFilter() {
-      var filterWith = this.props.config.filterWith || defaults.config.filterWith;
-      if (typeof filterWith === 'function') {
-        return filterWith;
-      }
-      if (filterWith === 'includes') {
-        return function (name, query) {
-          return name.includes(query);
-        };
-      }
-      return function (name, query) {
-        return name.startsWith(query);
-      };
-    }
   }, {
     key: "resolveOptionName",
     value: function resolveOptionName(option) {
@@ -204,23 +204,27 @@ export var FieldValueSelectionFilter = /*#__PURE__*/function (_Component) {
   }, {
     key: "onOptionClick",
     value: function onOptionClick(field, value, checked) {
-      var multiSelect = this.resolveMultiSelect();
-      var _this$props$config = this.props.config,
-        autoClose = _this$props$config.autoClose,
-        _this$props$config$op = _this$props$config.operator,
-        operator = _this$props$config$op === void 0 ? Operator.EQ : _this$props$config$op;
+      var _this$props$config2 = this.props.config,
+        autoClose = _this$props$config2.autoClose,
+        _this$props$config2$o = _this$props$config2.operator,
+        operator = _this$props$config2$o === void 0 ? Operator.EQ : _this$props$config2$o;
+      if (checked && this.autoSortOptions) {
+        this.setState({
+          lastCheckedValue: value
+        });
+      }
 
       // If the consumer explicitly sets `autoClose`, always defer to that.
       // Otherwise, default to auto-closing for single selections and leaving the
       // popover open for multi-select (so users can continue selecting options)
-      var shouldClosePopover = autoClose !== null && autoClose !== void 0 ? autoClose : !multiSelect;
+      var shouldClosePopover = autoClose !== null && autoClose !== void 0 ? autoClose : !this.multiSelect;
       if (shouldClosePopover) {
         this.closePopover();
       }
-      if (!multiSelect) {
+      if (!this.multiSelect) {
         var _query = checked ? this.props.query.removeSimpleFieldClauses(field).addSimpleFieldValue(field, value, true, operator) : this.props.query.removeSimpleFieldClauses(field);
         this.props.onChange(_query);
-      } else if (multiSelect === 'or') {
+      } else if (this.multiSelect === 'or') {
         var _query2 = checked ? this.props.query.addOrFieldValue(field, value, true, operator) : this.props.query.removeOrFieldValue(field, value);
         this.props.onChange(_query2);
       } else {
@@ -229,10 +233,16 @@ export var FieldValueSelectionFilter = /*#__PURE__*/function (_Component) {
       }
     }
   }, {
-    key: "resolveMultiSelect",
-    value: function resolveMultiSelect() {
-      var config = this.props.config;
-      return !isNil(config.multiSelect) ? config.multiSelect : defaults.config.multiSelect;
+    key: "autoSortOptions",
+    get: function get() {
+      var _this$props$config$au;
+      return (_this$props$config$au = this.props.config.autoSortOptions) !== null && _this$props$config$au !== void 0 ? _this$props$config$au : defaults.config.autoSortOptions;
+    }
+  }, {
+    key: "multiSelect",
+    get: function get() {
+      var _this$props$config$mu;
+      return (_this$props$config$mu = this.props.config.multiSelect) !== null && _this$props$config$mu !== void 0 ? _this$props$config$mu : defaults.config.multiSelect;
     }
   }, {
     key: "componentDidMount",
@@ -244,19 +254,26 @@ export var FieldValueSelectionFilter = /*#__PURE__*/function (_Component) {
     value: function componentDidUpdate(prevProps) {
       if (this.props.query !== prevProps.query) this.loadOptions();
     }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      clearTimeout(this.cacheTimeout);
+    }
   }, {
     key: "render",
     value: function render() {
-      var _this5 = this;
-      var _this$props = this.props,
-        query = _this$props.query,
-        config = _this$props.config;
-      var multiSelect = this.resolveMultiSelect();
+      var _this$state$options,
+        _this$state$options2,
+        _this3 = this;
+      var _this$props2 = this.props,
+        query = _this$props2.query,
+        config = _this$props2.config;
+      var options = this.autoSortOptions ? (_this$state$options = this.state.options) === null || _this$state$options === void 0 ? void 0 : _this$state$options.sorted : (_this$state$options2 = this.state.options) === null || _this$state$options2 === void 0 ? void 0 : _this$state$options2.unsorted;
       var activeTop = this.isActiveField(config.field);
-      var activeItem = this.state.options ? this.state.options.all.some(function (item) {
-        return _this5.isActiveField(item.field);
+      var activeItem = options ? options.some(function (item) {
+        return _this3.isActiveField(item.field);
       }) : false;
-      var activeItemsCount = this.state.activeItems.length;
+      var activeItemsCount = this.state.activeItemsCount;
       var active = (activeTop || activeItem) && activeItemsCount > 0;
       var button = ___EmotionJSX(EuiFilterButton, {
         iconType: "arrowDown",
@@ -266,15 +283,15 @@ export var FieldValueSelectionFilter = /*#__PURE__*/function (_Component) {
         numActiveFilters: active ? activeItemsCount : undefined,
         grow: true
       }, config.name);
-      var items = this.state.options ? this.state.options.shown.map(function (option) {
+      var items = options ? options.map(function (option) {
         var _option$view;
         var optionField = option.field || config.field;
         if (optionField == null) {
           throw new Error('option.field or field should be provided in <FieldValueSelectionFilter/>');
         }
-        var clause = multiSelect === 'or' ? query.getOrFieldClause(optionField, option.value) : query.getSimpleFieldClause(optionField, option.value);
-        var label = _this5.resolveOptionName(option);
-        var checked = _this5.resolveChecked(clause);
+        var clause = _this3.multiSelect === 'or' ? query.getOrFieldClause(optionField, option.value) : query.getSimpleFieldClause(optionField, option.value);
+        var label = _this3.resolveOptionName(option);
+        var checked = _this3.resolveChecked(clause);
         return {
           label: label,
           checked: checked,
@@ -286,7 +303,7 @@ export var FieldValueSelectionFilter = /*#__PURE__*/function (_Component) {
         };
       }) : [];
       var threshold = config.searchThreshold || defaults.config.searchThreshold;
-      var isOverSearchThreshold = this.state.options && this.state.options.all.length >= threshold;
+      var isOverSearchThreshold = options && options.length >= threshold;
       var searchProps = {
         searchable: false
       };
@@ -302,31 +319,32 @@ export var FieldValueSelectionFilter = /*#__PURE__*/function (_Component) {
       return ___EmotionJSX(RenderWithEuiTheme, null, function (euiThemeContext) {
         return ___EmotionJSX(EuiPopover, {
           button: button,
-          isOpen: _this5.state.popoverOpen,
-          closePopover: _this5.closePopover.bind(_this5),
+          isOpen: _this3.state.popoverOpen,
+          closePopover: _this3.closePopover.bind(_this3),
           panelPaddingSize: "none",
           anchorPosition: "downCenter",
           panelProps: {
             css: euiFilterGroupStyles(euiThemeContext).euiFilterGroup__popoverPanel
           }
         }, ___EmotionJSX(EuiSelectable, _extends({
-          singleSelection: !multiSelect,
+          ref: _this3.selectableClassRef,
+          singleSelection: !_this3.multiSelect,
           "aria-label": config.name,
           options: items,
           renderOption: function renderOption(option) {
             return option.view;
           },
-          isLoading: isNil(_this5.state.options),
+          isLoading: isNil(options),
           loadingMessage: config.loadingMessage,
           emptyMessage: config.noOptionsMessage,
-          errorMessage: _this5.state.error,
+          errorMessage: _this3.state.error,
           noMatchesMessage: config.noOptionsMessage,
           listProps: {
             isVirtualized: isOverSearchThreshold || false
           },
           onChange: function onChange(options, event, changedOption) {
             if (changedOption.data) {
-              _this5.onOptionClick(changedOption.data.optionField, changedOption.data.value, changedOption.checked);
+              _this3.onOptionClick(changedOption.data.optionField, changedOption.data.value, changedOption.checked);
             }
           }
         }, searchProps), function (list, search) {
@@ -350,8 +368,7 @@ export var FieldValueSelectionFilter = /*#__PURE__*/function (_Component) {
         return false;
       }
       var query = this.props.query;
-      var multiSelect = this.resolveMultiSelect();
-      if (multiSelect === 'or') {
+      if (this.multiSelect === 'or') {
         return query.hasOrFieldClause(field);
       }
       return query.hasSimpleFieldClause(field);

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

@@ -10,8 +10,10 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _tabbable = require("tabbable");
 var _services = require("../../../../services");
+var _accessibility = require("../../../../services/accessibility");
+var _utils = require("../../../../utils");
 var _focus_trap = require("../../../focus_trap");
-var _accessibility = require("../../../accessibility");
+var _accessibility2 = require("../../../accessibility");
 var _i18n = require("../../../i18n");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -38,7 +40,8 @@ var HandleInteractiveChildren = exports.HandleInteractiveChildren = function Han
   var cellEl = _ref.cellEl,
     children = _ref.children,
     updateCellFocusContext = _ref.updateCellFocusContext,
-    renderFocusTrap = _ref.renderFocusTrap;
+    renderFocusTrap = _ref.renderFocusTrap,
+    onInteractiveChildrenFound = _ref.onInteractiveChildrenFound;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     hasInteractiveChildren = _useState2[0],
@@ -47,12 +50,11 @@ var HandleInteractiveChildren = exports.HandleInteractiveChildren = function Han
   // On mount, disable all interactive children
   (0, _react.useEffect)(function () {
     if (cellEl) {
-      var interactiveChildren = disableInteractives(cellEl);
-      if (renderFocusTrap) {
-        setHasInteractiveChildren(interactiveChildren.length > 0);
-      }
+      var interactives = disableInteractives(cellEl);
+      onInteractiveChildrenFound === null || onInteractiveChildrenFound === void 0 || onInteractiveChildrenFound(interactives);
+      setHasInteractiveChildren(interactives.length > 0);
     }
-  }, [cellEl, renderFocusTrap]);
+  }, [cellEl, onInteractiveChildrenFound]);
 
   // Ensure that any interactive children that are clicked update the latest cell focus context
   (0, _react.useEffect)(function () {
@@ -90,6 +92,24 @@ var FocusTrappedChildren = exports.FocusTrappedChildren = function FocusTrappedC
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     isCellEntered = _useState4[0],
     setIsCellEntered = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    isExited = _useState6[0],
+    setExited = _useState6[1];
+  var keyboardHintAriaId = (0, _accessibility.useGeneratedHtmlId)({
+    prefix: 'euiDataGridCellHeader',
+    suffix: 'keyboardHint'
+  });
+  var exitedHintAriaId = (0, _accessibility.useGeneratedHtmlId)({
+    prefix: 'euiDataGridCellHeader',
+    suffix: 'exited'
+  });
+
+  // direct DOM manipulation as workaround to attach required hints
+  (0, _react.useEffect)(function () {
+    var currentAriaDescribedbyId = cellEl.getAttribute('aria-describedby');
+    cellEl.setAttribute('aria-describedby', "".concat(currentAriaDescribedbyId, " ").concat(exitedHintAriaId, " ").concat(keyboardHintAriaId, " "));
+  }, [cellEl, keyboardHintAriaId, exitedHintAriaId]);
   (0, _react.useEffect)(function () {
     if (isCellEntered) {
       enableAndFocusInteractives(cellEl);
@@ -109,28 +129,52 @@ var FocusTrappedChildren = exports.FocusTrappedChildren = function FocusTrappedC
           event.preventDefault();
           setIsCellEntered(function (isCellEntered) {
             if (isCellEntered === true) {
+              setExited(true);
               requestAnimationFrame(function () {
                 return cellEl.focus();
               }); // move focus to cell
               return false;
+            } else if (
+            // when opened content is closed, we don't want Escape to return to the cell
+            // immediately but instead return focus to a trigger as expected
+            isCellEntered === false && (0, _utils.isDOMNode)(event.target) && (0, _utils.isDOMNode)(event.currentTarget) && event.currentTarget.contains(event.target)) {
+              return true;
             }
             return isCellEntered;
           });
           break;
       }
     };
+
+    // ensures the SR text is reset when navigating to a different cell
+    var onBlur = function onBlur() {
+      return setExited(false);
+    };
     cellEl.addEventListener('keyup', onKeyUp);
+    cellEl.addEventListener('blur', onBlur);
     return function () {
       cellEl.removeEventListener('keyup', onKeyUp);
+      cellEl.removeEventListener('blur', onBlur);
     };
   }, [cellEl]);
   return (0, _react2.jsx)(_focus_trap.EuiFocusTrap, {
     disabled: !isCellEntered,
+    clickOutsideDisables: true,
     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
+    }
+  }, children, (0, _react2.jsx)(_accessibility2.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
+    id: exitedHintAriaId,
+    "aria-hidden": "true"
+  }, isExited && (0, _react2.jsx)(_i18n.EuiI18n
+  // eslint-disable-next-line local/i18n
+  , {
+    token: "euiDataGridCell.focusTrapExitPrompt",
+    default: "Exited cell content."
+  }))), (0, _react2.jsx)(_accessibility2.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
+    id: keyboardHintAriaId,
+    "aria-hidden": "true"
+  }, !isCellEntered && (0, _react2.jsx)(_i18n.EuiI18n
   // eslint-disable-next-line local/i18n
   , {
     token: "euiDataGridCell.focusTrapEnterPrompt",
@@ -154,7 +198,8 @@ 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) {
+    // focus the first element only if we're on the cell and not inside of it
+    if (i === 0 && !cell.contains(document.activeElement)) {
       element.focus();
     }
   });