@elastic/eui 95.9.0 → 95.10.0

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

@@ -20,14 +20,15 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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 _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-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; }
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, catch: function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
 function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
 function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
 function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
 function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
@@ -51,7 +52,8 @@ var defaults = {
   config: {
     multiSelect: true,
     filterWith: 'prefix',
-    searchThreshold: 10
+    searchThreshold: 10,
+    autoSortOptions: true
   }
 };
 var FieldValueSelectionFilter = exports.FieldValueSelectionFilter = /*#__PURE__*/function (_Component) {
@@ -59,45 +61,132 @@ var FieldValueSelectionFilter = exports.FieldValueSelectionFilter = /*#__PURE__*
     var _this;
     _classCallCheck(this, FieldValueSelectionFilter);
     _this = _callSuper(this, FieldValueSelectionFilter, [props]);
-    _defineProperty(_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) {
+    _defineProperty(_this, "selectableClassRef", /*#__PURE__*/(0, _react.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 (!(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(_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 = (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;
   }
@@ -127,94 +216,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(_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 ((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) {
@@ -223,23 +224,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 {
@@ -248,10 +253,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",
@@ -263,19 +274,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",
@@ -285,15 +303,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,
@@ -305,7 +323,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
       };
@@ -321,31 +339,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, _extends({
-          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) {
@@ -369,8 +388,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);
@@ -413,7 +431,8 @@ FieldValueSelectionFilter.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,
   query: _propTypes.default.any.isRequired,
   onChange: _propTypes.default.func.isRequired

package/lib/components/search_bar/search_bar.js

@@ -370,7 +370,8 @@ EuiSearchBar.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/lib/components/search_bar/search_filters.js

@@ -107,7 +107,8 @@ EuiSearchBarFilters.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/optimize/es/components/datagrid/body/cell/focus_utils.js

@@ -10,6 +10,8 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useEffect, useState, useMemo } from 'react';
 import { tabbable } from 'tabbable';
 import { keys } from '../../../../services';
+import { useGeneratedHtmlId } from '../../../../services/accessibility';
+import { isDOMNode } from '../../../../utils';
 import { EuiFocusTrap } from '../../../focus_trap';
 import { EuiScreenReaderOnly } from '../../../accessibility';
 import { EuiI18n } from '../../../i18n';
@@ -29,7 +31,8 @@ export var HandleInteractiveChildren = function HandleInteractiveChildren(_ref)
   var cellEl = _ref.cellEl,
     children = _ref.children,
     updateCellFocusContext = _ref.updateCellFocusContext,
-    renderFocusTrap = _ref.renderFocusTrap;
+    renderFocusTrap = _ref.renderFocusTrap,
+    onInteractiveChildrenFound = _ref.onInteractiveChildrenFound;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     hasInteractiveChildren = _useState2[0],
@@ -38,12 +41,11 @@ export var HandleInteractiveChildren = function HandleInteractiveChildren(_ref)
   // On mount, disable all interactive children
   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
   useEffect(function () {
@@ -81,6 +83,24 @@ export var FocusTrappedChildren = function FocusTrappedChildren(_ref2) {
     _useState4 = _slicedToArray(_useState3, 2),
     isCellEntered = _useState4[0],
     setIsCellEntered = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isExited = _useState6[0],
+    setExited = _useState6[1];
+  var keyboardHintAriaId = useGeneratedHtmlId({
+    prefix: 'euiDataGridCellHeader',
+    suffix: 'keyboardHint'
+  });
+  var exitedHintAriaId = useGeneratedHtmlId({
+    prefix: 'euiDataGridCellHeader',
+    suffix: 'exited'
+  });
+
+  // direct DOM manipulation as workaround to attach required hints
+  useEffect(function () {
+    var currentAriaDescribedbyId = cellEl.getAttribute('aria-describedby');
+    cellEl.setAttribute('aria-describedby', "".concat(currentAriaDescribedbyId, " ").concat(exitedHintAriaId, " ").concat(keyboardHintAriaId, " "));
+  }, [cellEl, keyboardHintAriaId, exitedHintAriaId]);
   useEffect(function () {
     if (isCellEntered) {
       enableAndFocusInteractives(cellEl);
@@ -100,28 +120,52 @@ export var FocusTrappedChildren = function FocusTrappedChildren(_ref2) {
           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 && isDOMNode(event.target) && 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 ___EmotionJSX(EuiFocusTrap, {
     disabled: !isCellEntered,
+    clickOutsideDisables: true,
     onDeactivation: function onDeactivation() {
       return setIsCellEntered(false);
-    },
-    clickOutsideDisables: true
-  }, children, ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", null, ' - ', ___EmotionJSX(EuiI18n
+    }
+  }, children, ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
+    id: exitedHintAriaId,
+    "aria-hidden": "true"
+  }, isExited && ___EmotionJSX(EuiI18n
+  // eslint-disable-next-line local/i18n
+  , {
+    token: "euiDataGridCell.focusTrapExitPrompt",
+    default: "Exited cell content."
+  }))), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
+    id: keyboardHintAriaId,
+    "aria-hidden": "true"
+  }, !isCellEntered && ___EmotionJSX(EuiI18n
   // eslint-disable-next-line local/i18n
   , {
     token: "euiDataGridCell.focusTrapEnterPrompt",
@@ -145,7 +189,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();
     }
   });