@elastic/eui 95.9.0 → 95.10.0

package/optimize/lib/components/markdown_editor/plugins/markdown_link_validator.js

@@ -4,6 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.DEFAULT_OPTIONS = void 0;
 exports.euiMarkdownLinkValidator = euiMarkdownLinkValidator;
 exports.mutateLinkToText = mutateLinkToText;
 exports.validateUrl = validateUrl;
@@ -16,6 +17,10 @@ var _unistUtilVisit = _interopRequireDefault(require("unist-util-visit"));
  * Side Public License, v 1.
  */
 
+var DEFAULT_OPTIONS = exports.DEFAULT_OPTIONS = {
+  allowRelative: true,
+  allowProtocols: ['https:', 'http:', 'mailto:']
+};
 function euiMarkdownLinkValidator(options) {
   return function (ast) {
     (0, _unistUtilVisit.default)(ast, 'link', function (_node) {
@@ -46,8 +51,10 @@ function mutateLinkToText(node) {
   return node;
 }
 function validateUrl(url, _ref) {
-  var allowRelative = _ref.allowRelative,
-    allowProtocols = _ref.allowProtocols;
+  var _ref$allowRelative = _ref.allowRelative,
+    allowRelative = _ref$allowRelative === void 0 ? DEFAULT_OPTIONS.allowRelative : _ref$allowRelative,
+    _ref$allowProtocols = _ref.allowProtocols,
+    allowProtocols = _ref$allowProtocols === void 0 ? DEFAULT_OPTIONS.allowProtocols : _ref$allowProtocols;
   // relative captures both relative paths `/` and protocols `//`
   var isRelative = url.startsWith('/');
   if (isRelative) {

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

@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FieldValueSelectionFilter = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -26,8 +28,6 @@ var _ast = require("../query/ast");
 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); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-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) { (0, _defineProperty2.default)(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; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(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; })(); } /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -40,7 +40,8 @@ var defaults = {
   config: {
     multiSelect: true,
     filterWith: 'prefix',
-    searchThreshold: 10
+    searchThreshold: 10,
+    autoSortOptions: true
   }
 };
 var FieldValueSelectionFilter = exports.FieldValueSelectionFilter = /*#__PURE__*/function (_Component) {
@@ -48,45 +49,132 @@ var FieldValueSelectionFilter = exports.FieldValueSelectionFilter = /*#__PURE__*
     var _this;
     (0, _classCallCheck2.default)(this, FieldValueSelectionFilter);
     _this = _callSuper(this, FieldValueSelectionFilter, [props]);
-    (0, _defineProperty2.default)(_this, "resolveOptionsLoader", function () {
-      var options = _this.props.config.options;
-      if ((0, _predicate.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) {
+    (0, _defineProperty2.default)(_this, "selectableClassRef", /*#__PURE__*/(0, _react.createRef)());
+    (0, _defineProperty2.default)(_this, "cacheTimeout", void 0);
+    (0, _defineProperty2.default)(_this, "loadOptions", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var loadedOptions, _this$props$config, options, cache, _this$state$cachedOpt, items, _this$props, query, config;
+      return _regenerator.default.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 (!(0, _predicate.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((0, _toConsumableArray2.default)(items.on), (0, _toConsumableArray2.default)(items.off), (0, _toConsumableArray2.default)(items.rest))
+              }
+            }, _this.scrollToAutoSortedOption);
+          case 25:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[2, 18]]);
+    })));
+    (0, _defineProperty2.default)(_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 = (0, _predicate.isArray)(_options) ? {
-      all: _options,
-      shown: _options
+      unsorted: _options,
+      sorted: _options
     } : null;
     _this.state = {
       popoverOpen: false,
       error: null,
       options: preloadedOptions,
-      activeItems: []
+      activeItemsCount: 0
     };
     return _this;
   }
@@ -116,94 +204,6 @@ var FieldValueSelectionFilter = exports.FieldValueSelectionFilter = /*#__PURE__*
         };
       });
     }
-  }, {
-    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((0, _toConsumableArray2.default)(items.on), (0, _toConsumableArray2.default)(items.off), (0, _toConsumableArray2.default)(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 ((0, _predicate.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) {
@@ -212,23 +212,27 @@ var FieldValueSelectionFilter = exports.FieldValueSelectionFilter = /*#__PURE__*
   }, {
     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 ? _ast.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 ? _ast.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 {
@@ -237,10 +241,16 @@ var FieldValueSelectionFilter = exports.FieldValueSelectionFilter = /*#__PURE__*
       }
     }
   }, {
-    key: "resolveMultiSelect",
-    value: function resolveMultiSelect() {
-      var config = this.props.config;
-      return !(0, _predicate.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",
@@ -252,19 +262,26 @@ var FieldValueSelectionFilter = exports.FieldValueSelectionFilter = /*#__PURE__*
     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 = (0, _react2.jsx)(_filter_group.EuiFilterButton, {
         iconType: "arrowDown",
@@ -274,15 +291,15 @@ var FieldValueSelectionFilter = exports.FieldValueSelectionFilter = /*#__PURE__*
         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,
@@ -294,7 +311,7 @@ var FieldValueSelectionFilter = exports.FieldValueSelectionFilter = /*#__PURE__*
         };
       }) : [];
       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
       };
@@ -310,31 +327,32 @@ var FieldValueSelectionFilter = exports.FieldValueSelectionFilter = /*#__PURE__*
       return (0, _react2.jsx)(_services.RenderWithEuiTheme, null, function (euiThemeContext) {
         return (0, _react2.jsx)(_popover.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: (0, _filter_group2.euiFilterGroupStyles)(euiThemeContext).euiFilterGroup__popoverPanel
           }
         }, (0, _react2.jsx)(_selectable.EuiSelectable, (0, _extends2.default)({
-          singleSelection: !multiSelect,
+          ref: _this3.selectableClassRef,
+          singleSelection: !_this3.multiSelect,
           "aria-label": config.name,
           options: items,
           renderOption: function renderOption(option) {
             return option.view;
           },
-          isLoading: (0, _predicate.isNil)(_this5.state.options),
+          isLoading: (0, _predicate.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) {
@@ -358,8 +376,7 @@ var FieldValueSelectionFilter = exports.FieldValueSelectionFilter = /*#__PURE__*
         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/package.json

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

package/src/components/datagrid/_data_grid_data_row.scss

@@ -45,6 +45,11 @@
     @include euiDataGridCellFocus;
   }
 
+  // needed to override global style
+  &:focus:focus-visible {
+    outline: none;
+  }
+
   // On hover
   &:hover:not(:focus, :focus-within, .euiDataGridRowCell--open) {
     // Color the actions and focus ring grayscale on hover

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

@@ -10,15 +10,18 @@
 @include euiDataGridHeaderCell {
   @include euiFontSizeS;
 
-  font-weight: $euiFontWeightBold;
-  padding: $euiDataGridCellPaddingM;
-  flex: 0 0 auto;
   position: relative;
-  align-items: center;
   display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  padding: $euiDataGridCellPaddingM;
+  font-weight: $euiFontWeightBold;
 
   // Workaround for focus trap
   & > [data-focus-lock-disabled] {
+    display: flex;
+    align-items: center;
+    gap: $euiSizeXS;
     width: 100%;
   }
 
@@ -28,6 +31,11 @@
     @include euiDataGridCellFocus;
   }
 
+  // needed to override global style
+  &:focus:focus-visible {
+    outline: none;
+  }
+
   .euiDataGridHeaderCell__content {
     flex-grow: 1; // ensures content stretches and allows for manual layout styles to apply
   }
@@ -40,8 +48,18 @@
       align-items: center;
       gap: $euiSizeXS;
       width: 100%;
+      border-radius: $euiBorderRadiusSmall;
       font-weight: $euiFontWeightBold;
       outline: none;
+
+      &:focus-visible {
+        outline: none;
+      }
+    }
+
+    [data-focus-lock-disabled='false'] .euiDataGridHeaderCell__button {
+      @include euiFocusRing;
+      color: $euiFocusRingColor;
     }
 
     .euiDataGridHeaderCell__content {
@@ -61,9 +79,9 @@
       display: flex;
       align-items: center;
       justify-content: center;
+      width: 0;
       height: $euiSize;
       overflow: hidden;
-      width: 0;
       opacity: 0;
       transition: width $euiAnimSpeedFast ease-in, opacity $euiAnimSpeedSlow ease-in;
     }
@@ -71,6 +89,10 @@
     &:focus-within,
     &:hover,
     .euiPopover-isOpen {
+      .euiDataGridHeaderCell__button {
+        padding: $euiSizeXS;
+      }
+
       .euiDataGridHeaderCell__icon {
         width: $euiSize;
         opacity: 1;

package/test-env/components/basic_table/in_memory_table.js

@@ -947,7 +947,8 @@ EuiInMemoryTable.propTypes = {
       searchThreshold: _propTypes.default.number,
       available: _propTypes.default.func,
       autoClose: _propTypes.default.bool,
-      operator: _propTypes.default.oneOf(["eq", "exact", "gt", "gte", "lt", "lte"])
+      operator: _propTypes.default.oneOf(["eq", "exact", "gt", "gte", "lt", "lte"]),
+      autoSortOptions: _propTypes.default.bool
     }).isRequired, _propTypes.default.shape({
       type: _propTypes.default.oneOf(["field_value_toggle"]).isRequired,
       field: _propTypes.default.string.isRequired,

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

@@ -124,6 +124,7 @@ EuiDataGridCellContent.propTypes = {
        * This can be used to display a readable column name in column hiding/sorting, where `display` won't be used.
        * This will also be used as a `title` attribute that will display on mouseover (useful if the display text is being truncated by the column width).
        * If not passed, `id` will be shown as the column name.
+       * Passing this together with `display` is useful to ensure an accessible label is added to the column.
        */
     displayAsText: _propTypes.default.string,
     /**
@@ -1014,6 +1015,7 @@ EuiDataGridCell.propTypes = {
        * This can be used to display a readable column name in column hiding/sorting, where `display` won't be used.
        * This will also be used as a `title` attribute that will display on mouseover (useful if the display text is being truncated by the column width).
        * If not passed, `id` will be shown as the column name.
+       * Passing this together with `display` is useful to ensure an accessible label is added to the column.
        */
     displayAsText: _propTypes.default.string,
     /**