@elastic/eui 95.8.1-0 → 95.10.0

package/optimize/es/components/form/super_select/super_select.styles.js

@@ -40,6 +40,6 @@ export var euiSuperSelectControlStyles = function euiSuperSelectControlStyles(eu
     // Layout modifiers
     inGroup: /*#__PURE__*/css(formStyles.inGroup, ";label:inGroup;"),
     // Children
-    euiSuperSelect__placeholder: /*#__PURE__*/css("color:", formVariables.controlDisabledColor, ";;label:euiSuperSelect__placeholder;")
+    euiSuperSelect__placeholder: /*#__PURE__*/css("color:", formVariables.controlPlaceholderText, ";;label:euiSuperSelect__placeholder;")
   };
 };

package/optimize/es/components/icon/assets/tokenSemanticText.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var EuiIconTokenSemanticText = function EuiIconTokenSemanticText(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return ___EmotionJSX("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    d: "M2 2.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1H3v10h1.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5v-11ZM13.5 2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1H13V3h-1.5a.5.5 0 0 1 0-1h2ZM9.098 4.5l-.244 1.393h.896l-.212 1.211h-.896l-.435 2.574c-.024.176-.013.308.034.398.046.09.163.138.35.145.072.004.22-.005.445-.026L8.91 11.46a2.75 2.75 0 0 1-.916.129c-.528-.007-.923-.162-1.186-.466-.262-.304-.37-.716-.32-1.237l.455-2.78H6.25l.207-1.212h.694L7.394 4.5h1.704Z"
+  }));
+};
+export var icon = EuiIconTokenSemanticText;

package/optimize/es/components/icon/icon_map.js

@@ -505,6 +505,7 @@ export var typeToPathMap = {
   tokenRankFeatures: 'tokenRankFeatures',
   tokenRepo: 'tokenRepo',
   tokenSearchType: 'tokenSearchType',
+  tokenSemanticText: 'tokenSemanticText',
   tokenShape: 'tokenShape',
   tokenString: 'tokenString',
   tokenStruct: 'tokenStruct',

package/optimize/es/components/markdown_editor/plugins/markdown_default_plugins/parsing_plugins.js

@@ -1,4 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["exclude"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -18,29 +20,33 @@ import breaks from 'remark-breaks';
 import highlight from '../remark/remark_prismjs';
 import * as MarkdownTooltip from '../markdown_tooltip';
 import * as MarkdownCheckbox from '../markdown_checkbox';
-import { euiMarkdownLinkValidator } from '../markdown_link_validator';
+import { euiMarkdownLinkValidator, DEFAULT_OPTIONS as LINK_VALIDATOR_DEFAULTS } from '../markdown_link_validator';
 var DEFAULT_PARSING_PLUGINS = {
   emoji: [emoji, {
     emoticon: false
   }],
   lineBreaks: [breaks, {}],
-  linkValidator: [euiMarkdownLinkValidator, {
-    allowRelative: true,
-    allowProtocols: ['https:', 'http:', 'mailto:']
-  }],
+  linkValidator: [euiMarkdownLinkValidator, LINK_VALIDATOR_DEFAULTS],
   checkbox: [MarkdownCheckbox.parser, {}],
   tooltip: [MarkdownTooltip.parser, {}]
 };
 export var getDefaultEuiMarkdownParsingPlugins = function getDefaultEuiMarkdownParsingPlugins() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    exclude = _ref.exclude;
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var exclude = _ref.exclude,
+    parsingConfig = _objectWithoutProperties(_ref, _excluded);
   var parsingPlugins = [[markdown, {}], [highlight, {}]];
   Object.entries(DEFAULT_PARSING_PLUGINS).forEach(function (_ref2) {
     var _ref3 = _slicedToArray(_ref2, 2),
       pluginName = _ref3[0],
       plugin = _ref3[1];
+    // Check for plugin exclusions
     if (!(exclude !== null && exclude !== void 0 && exclude.includes(pluginName))) {
-      parsingPlugins.push(plugin);
+      // Check for plugin configuration overrides
+      if (pluginName in parsingConfig) {
+        parsingPlugins.push([plugin[0], parsingConfig[pluginName]]);
+      } else {
+        parsingPlugins.push(plugin);
+      }
     }
   });
   return parsingPlugins;

package/optimize/es/components/markdown_editor/plugins/markdown_default_plugins/plugins.js

@@ -1,3 +1,6 @@
+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; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -9,10 +12,21 @@
 import { getDefaultEuiMarkdownUiPlugins } from './ui_plugins';
 import { getDefaultEuiMarkdownParsingPlugins } from './parsing_plugins';
 import { getDefaultEuiMarkdownProcessingPlugins } from './processing_plugins';
-export var getDefaultEuiMarkdownPlugins = function getDefaultEuiMarkdownPlugins(config) {
+export var getDefaultEuiMarkdownPlugins = function getDefaultEuiMarkdownPlugins() {
+  var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var exclude = config.exclude,
+    processingConfig = config.processingConfig,
+    parsingConfig = config.parsingConfig,
+    uiConfig = config.uiConfig;
   return {
-    parsingPlugins: getDefaultEuiMarkdownParsingPlugins(config),
-    processingPlugins: getDefaultEuiMarkdownProcessingPlugins(config),
-    uiPlugins: getDefaultEuiMarkdownUiPlugins(config)
+    parsingPlugins: getDefaultEuiMarkdownParsingPlugins(_objectSpread({
+      exclude: exclude
+    }, parsingConfig)),
+    processingPlugins: getDefaultEuiMarkdownProcessingPlugins(_objectSpread({
+      exclude: exclude
+    }, processingConfig)),
+    uiPlugins: getDefaultEuiMarkdownUiPlugins(_objectSpread({
+      exclude: exclude
+    }, uiConfig))
   };
 };

package/optimize/es/components/markdown_editor/plugins/markdown_default_plugins/processing_plugins.js

@@ -36,7 +36,8 @@ var DEFAULT_COMPONENT_RENDERERS = {
 };
 export var getDefaultEuiMarkdownProcessingPlugins = function getDefaultEuiMarkdownProcessingPlugins() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    exclude = _ref.exclude;
+    exclude = _ref.exclude,
+    linkProps = _ref.linkProps;
   var componentPluginsWithExclusions = {};
   Object.entries(DEFAULT_COMPONENT_RENDERERS).forEach(function (_ref2) {
     var _ref3 = _slicedToArray(_ref2, 2),
@@ -55,7 +56,9 @@ export var getDefaultEuiMarkdownProcessingPlugins = function getDefaultEuiMarkdo
     createElement: createElement,
     Fragment: Fragment,
     components: _objectSpread({
-      a: EuiLink,
+      a: function a(props) {
+        return ___EmotionJSX(EuiLink, _extends({}, props, linkProps));
+      },
       code: function code(props) {
         return (
           // If there are linebreaks use codeblock, otherwise code

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

@@ -7,6 +7,10 @@
  */
 
 import visit from 'unist-util-visit';
+export var DEFAULT_OPTIONS = {
+  allowRelative: true,
+  allowProtocols: ['https:', 'http:', 'mailto:']
+};
 export function euiMarkdownLinkValidator(options) {
   return function (ast) {
     visit(ast, 'link', function (_node) {
@@ -37,8 +41,10 @@ export function mutateLinkToText(node) {
   return node;
 }
 export 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/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);