@elastic/eui 94.1.0 → 94.2.0

package/optimize/lib/components/markdown_editor/plugins/markdown_default_plugins/ui_plugins.js

@@ -1,10 +1,12 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getDefaultEuiMarkdownUiPlugins = exports.defaultUiPlugins = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var MarkdownTooltip = _interopRequireWildcard(require("../markdown_tooltip"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -16,12 +18,21 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * Side Public License, v 1.
  */
 
+var DEFAULT_UI_PLUGINS = {
+  tooltip: MarkdownTooltip.plugin
+};
 var getDefaultEuiMarkdownUiPlugins = function getDefaultEuiMarkdownUiPlugins() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
     exclude = _ref.exclude;
-  var excludeSet = new Set(exclude);
   var uiPlugins = [];
-  if (!excludeSet.has('tooltip')) uiPlugins.push(MarkdownTooltip.plugin);
+  Object.entries(DEFAULT_UI_PLUGINS).forEach(function (_ref2) {
+    var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
+      pluginName = _ref3[0],
+      plugin = _ref3[1];
+    if (!(exclude !== null && exclude !== void 0 && exclude.includes(pluginName))) {
+      uiPlugins.push(plugin);
+    }
+  });
   return uiPlugins;
 };
 exports.getDefaultEuiMarkdownUiPlugins = getDefaultEuiMarkdownUiPlugins;

package/optimize/lib/components/page_template/outer/page_outer.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports._EuiPageOuter = void 0;
+exports._EuiPageOuter = exports.PAGE_DIRECTIONS = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
@@ -19,6 +19,8 @@ var _excluded = ["children", "grow", "direction", "responsive"];
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+var PAGE_DIRECTIONS = ['row', 'column'];
+exports.PAGE_DIRECTIONS = PAGE_DIRECTIONS;
 var _EuiPageOuter = function _EuiPageOuter(_ref) {
   var children = _ref.children,
     _ref$grow = _ref.grow,

package/optimize/lib/components/page_template/page_template.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports._EuiPageTemplate = exports.TemplateContext = exports.EuiPageTemplate = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -19,7 +20,7 @@ var _page = require("../page");
 var _services = require("../../services");
 var _global_styling = require("../../global_styling");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "responsive", "restrictWidth", "paddingSize", "grow", "bottomBorder", "offset", "panelled", "contentBorder", "component", "mainProps", "className", "minHeight"];
+var _excluded = ["children", "responsive", "restrictWidth", "paddingSize", "grow", "bottomBorder", "offset", "panelled", "contentBorder", "component", "mainProps", "className", "minHeight", "style"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -32,6 +33,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var TemplateContext = /*#__PURE__*/(0, _react.createContext)({
+  sidebar: {},
   section: {},
   header: {},
   emptyPrompt: {},
@@ -61,9 +63,8 @@ var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
     className = _ref.className,
     _ref$minHeight = _ref.minHeight,
     minHeight = _ref$minHeight === void 0 ? '460px' : _ref$minHeight,
+    style = _ref.style,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var templateContext = (0, _react.useContext)(TemplateContext);
-
   // Used as a target to insert the bottom bar component
   var pageInnerId = (0, _services.useGeneratedHtmlId)({
     prefix: 'EuiPageTemplateInner',
@@ -71,70 +72,62 @@ var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
   });
 
   // Sections include page header
-  var sections = [];
-  var sidebar = [];
-  var getBottomBorder = function getBottomBorder() {
-    if (bottomBorder !== undefined) {
-      return bottomBorder;
-    } else {
-      return sidebar.length ? true : 'extended';
-    }
-  };
-  var getHeaderProps = function getHeaderProps() {
-    return {
-      restrictWidth: restrictWidth,
-      paddingSize: paddingSize,
-      bottomBorder: getBottomBorder()
-    };
-  };
-  var getSectionProps = function getSectionProps() {
-    return {
-      restrictWidth: restrictWidth,
-      paddingSize: paddingSize,
-      color: panelled === false ? 'transparent' : 'plain'
-    };
-  };
-  var getSideBarProps = function getSideBarProps() {
-    return {
-      paddingSize: paddingSize,
-      responsive: responsive
-    };
-  };
-  var getBottomBarProps = function getBottomBarProps() {
-    return {
-      restrictWidth: restrictWidth,
-      paddingSize: paddingSize,
-      // pageInnerId may contain colons that are parsed as pseudo-elements if not escaped
-      parent: "#".concat(pageInnerId.replaceAll(':', '\\:'))
-    };
-  };
-  var innerPanelled = function innerPanelled() {
-    return panelled !== null && panelled !== void 0 ? panelled : Boolean(sidebar.length > 0);
-  };
-  var innerBordered = function innerBordered() {
-    return contentBorder !== undefined ? contentBorder : Boolean(sidebar.length > 0);
-  };
-  _react.default.Children.toArray(children).forEach(function (child, index) {
-    if (! /*#__PURE__*/_react.default.isValidElement(child)) return; // Skip non-components
+  var _useMemo = (0, _react.useMemo)(function () {
+      var sidebar = [];
+      var sections = [];
+      _react.default.Children.toArray(children).forEach(function (child) {
+        if (! /*#__PURE__*/_react.default.isValidElement(child)) return; // Skip non-components
 
-    if (child.type === _page.EuiPageSidebar || child.props.__EMOTION_TYPE_PLEASE_DO_NOT_USE__ === _page.EuiPageSidebar) {
-      sidebar.push( /*#__PURE__*/_react.default.cloneElement(child, _objectSpread(_objectSpread({
-        key: "sidebar".concat(index)
-      }, getSideBarProps()), child.props)));
-    } else {
-      sections.push(child);
-    }
-  });
-  var _minHeight = grow ? "max(".concat(minHeight, ", 100vh)") : minHeight;
+        if (child.type === _EuiPageSidebar || child.props.__EMOTION_TYPE_PLEASE_DO_NOT_USE__ === _EuiPageSidebar) {
+          sidebar.push(child);
+        } else {
+          sections.push(child);
+        }
+      });
+      return [sidebar, sections];
+    }, [children]),
+    _useMemo2 = (0, _slicedToArray2.default)(_useMemo, 2),
+    sidebar = _useMemo2[0],
+    sections = _useMemo2[1];
   var classes = (0, _classnames.default)('euiPageTemplate', className);
-  var pageStyle = _objectSpread(_objectSpread(_objectSpread({}, (0, _global_styling.logicalStyle)('min-height', _minHeight)), (0, _global_styling.logicalStyle)('padding-top', offset !== null && offset !== void 0 ? offset : 'var(--euiFixedHeadersOffset, 0)')), rest.style);
-  templateContext.header = getHeaderProps();
-  templateContext.section = getSectionProps();
-  templateContext.emptyPrompt = {
-    panelled: innerPanelled() ? true : panelled,
-    grow: true
-  };
-  templateContext.bottomBar = getBottomBarProps();
+  var pageStyle = (0, _react.useMemo)(function () {
+    return (0, _global_styling.logicalStyles)(_objectSpread({
+      minHeight: grow ? "max(".concat(minHeight, ", 100vh)") : minHeight,
+      paddingTop: offset !== null && offset !== void 0 ? offset : 'var(--euiFixedHeadersOffset, 0)'
+    }, style));
+  }, [minHeight, grow, offset, style]);
+  var innerPanelled = panelled !== null && panelled !== void 0 ? panelled : Boolean(sidebar.length > 0);
+  var innerBordered = contentBorder !== null && contentBorder !== void 0 ? contentBorder : Boolean(sidebar.length > 0);
+  var headerBottomBorder = bottomBorder !== null && bottomBorder !== void 0 ? bottomBorder : sidebar.length ? true : 'extended';
+  var templateContext = (0, _react.useMemo)(function () {
+    return {
+      sidebar: {
+        paddingSize: paddingSize,
+        responsive: responsive
+      },
+      header: {
+        restrictWidth: restrictWidth,
+        paddingSize: paddingSize,
+        bottomBorder: headerBottomBorder
+      },
+      section: {
+        restrictWidth: restrictWidth,
+        paddingSize: paddingSize,
+        color: panelled === false ? 'transparent' : 'plain',
+        grow: true
+      },
+      emptyPrompt: {
+        panelled: innerPanelled ? true : panelled,
+        grow: true
+      },
+      bottomBar: {
+        restrictWidth: restrictWidth,
+        paddingSize: paddingSize,
+        // pageInnerId may contain colons that are parsed as pseudo-elements if not escaped
+        parent: "#".concat(pageInnerId.replaceAll(':', '\\:'))
+      }
+    };
+  }, [pageInnerId, restrictWidth, responsive, paddingSize, panelled, innerPanelled, headerBottomBorder]);
   return (0, _react2.jsx)(TemplateContext.Provider, {
     value: templateContext
   }, (0, _react2.jsx)(_outer._EuiPageOuter, (0, _extends2.default)({}, rest, {
@@ -144,33 +137,39 @@ var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
   }), sidebar, (0, _react2.jsx)(_inner._EuiPageInner, (0, _extends2.default)({}, mainProps, {
     component: component,
     id: pageInnerId,
-    border: innerBordered(),
-    panelled: innerPanelled(),
+    border: innerBordered,
+    panelled: innerPanelled,
     responsive: responsive
   }), sections)));
 };
 exports._EuiPageTemplate = _EuiPageTemplate;
+var _EuiPageSidebar = function _EuiPageSidebar(props) {
+  var _useContext = (0, _react.useContext)(TemplateContext),
+    sidebar = _useContext.sidebar;
+  return (0, _react2.jsx)(_page.EuiPageSidebar, (0, _extends2.default)({}, sidebar, props));
+};
 var _EuiPageSection = function _EuiPageSection(props) {
-  var templateContext = (0, _react.useContext)(TemplateContext);
-  return (0, _react2.jsx)(_page.EuiPageSection, (0, _extends2.default)({}, templateContext.section, {
-    grow: true
-  }, props));
+  var _useContext2 = (0, _react.useContext)(TemplateContext),
+    section = _useContext2.section;
+  return (0, _react2.jsx)(_page.EuiPageSection, (0, _extends2.default)({}, section, props));
 };
 var _EuiPageHeader = function _EuiPageHeader(props) {
-  var templateContext = (0, _react.useContext)(TemplateContext);
-  return (0, _react2.jsx)(_page.EuiPageHeader, (0, _extends2.default)({}, templateContext.header, props));
+  var _useContext3 = (0, _react.useContext)(TemplateContext),
+    header = _useContext3.header;
+  return (0, _react2.jsx)(_page.EuiPageHeader, (0, _extends2.default)({}, header, props));
 };
 var _EuiPageEmptyPrompt = function _EuiPageEmptyPrompt(props) {
-  var templateContext = (0, _react.useContext)(TemplateContext);
-  return (0, _react2.jsx)(_page_empty_prompt._EuiPageEmptyPrompt, (0, _extends2.default)({}, templateContext.emptyPrompt, props));
+  var _useContext4 = (0, _react.useContext)(TemplateContext),
+    emptyPrompt = _useContext4.emptyPrompt;
+  return (0, _react2.jsx)(_page_empty_prompt._EuiPageEmptyPrompt, (0, _extends2.default)({}, emptyPrompt, props));
 };
 var _EuiPageBottomBar = function _EuiPageBottomBar(props) {
-  var _useContext = (0, _react.useContext)(TemplateContext),
-    bottomBar = _useContext.bottomBar;
+  var _useContext5 = (0, _react.useContext)(TemplateContext),
+    bottomBar = _useContext5.bottomBar;
   return (0, _react2.jsx)(_page_bottom_bar._EuiPageBottomBar, (0, _extends2.default)({}, bottomBar, props));
 };
 var EuiPageTemplate = Object.assign(_EuiPageTemplate, {
-  Sidebar: _page.EuiPageSidebar,
+  Sidebar: _EuiPageSidebar,
   Header: _EuiPageHeader,
   Section: _EuiPageSection,
   BottomBar: _EuiPageBottomBar,

package/optimize/lib/components/popover/input_popover.js

@@ -126,7 +126,9 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
     panelPropsOnKeyDown === null || panelPropsOnKeyDown === void 0 ? void 0 : panelPropsOnKeyDown(event);
     if (event.key === _services.keys.TAB) {
       if (disableFocusTrap) {
-        closePopover();
+        if (!ownFocus) {
+          closePopover();
+        }
       } else {
         var tabbableItems = (0, _tabbable.tabbable)(event.currentTarget).filter(function (el) {
           return !el.hasAttribute('data-focus-guard');
@@ -138,7 +140,7 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
         }
       }
     }
-  }, [disableFocusTrap, closePopover, panelPropsOnKeyDown]);
+  }, [disableFocusTrap, ownFocus, closePopover, panelPropsOnKeyDown]);
 
   /**
    * Optional close on scroll behavior

package/optimize/lib/components/popover/popover.js

@@ -319,6 +319,11 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
         this.onOpenPopover();
       }
 
+      // ensure recalculation of panel position on prop updates
+      if (this.props.isOpen && (prevProps.anchorPosition !== this.props.anchorPosition || prevProps.buffer !== this.props.buffer || prevProps.offset !== this.props.offset || prevProps.panelPaddingSize !== this.props.panelPaddingSize)) {
+        this.positionPopoverFluid();
+      }
+
       // update scroll listener
       if (prevProps.repositionOnScroll !== this.props.repositionOnScroll) {
         if (this.props.repositionOnScroll) {

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

@@ -41,8 +41,6 @@ var defaults = {
   config: {
     multiSelect: true,
     filterWith: 'prefix',
-    loadingMessage: 'Loading...',
-    noOptionsMessage: 'No options found',
     searchThreshold: 10
   }
 };
@@ -329,10 +327,10 @@ var FieldValueSelectionFilter = /*#__PURE__*/function (_Component) {
             return option.view;
           },
           isLoading: (0, _predicate.isNil)(_this5.state.options),
-          loadingMessage: config.loadingMessage || defaults.config.loadingMessage,
-          emptyMessage: config.noOptionsMessage || defaults.config.noOptionsMessage,
+          loadingMessage: config.loadingMessage,
+          emptyMessage: config.noOptionsMessage,
           errorMessage: _this5.state.error,
-          noMatchesMessage: config.noOptionsMessage || defaults.config.noOptionsMessage,
+          noMatchesMessage: config.noOptionsMessage,
           listProps: {
             isVirtualized: isOverSearchThreshold || false
           },

package/optimize/lib/components/search_bar/query/default_syntax.js

@@ -273,8 +273,8 @@ function () {
         }
         return Exp.string(unescapeValue(text()), location());
       },
-      peg$c67 = /^[\-_*:\/]/,
-      peg$c68 = peg$classExpectation(["-", "_", "*", ":", "/"], false, false),
+      peg$c67 = /^[\-_*:\/@]/,
+      peg$c68 = peg$classExpectation(["-", "_", "*", ":", "/", "@"], false, false),
       peg$c69 = /^[\xC0-\uFFFF]/,
       peg$c70 = peg$classExpectation([["\xC0", "\uFFFF"]], false, false),
       peg$c71 = /^[\-:\\()]/,

package/optimize/lib/components/selectable/matching_options.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getMatchingOptions = void 0;
+exports.getMatchingOptions = exports.createPartialStringEqualityOptionMatcher = void 0;
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -23,7 +23,14 @@ var getSelectedOptionForSearchValue = function getSelectedOptionForSearchValue(s
     return getSearchableLabel(option) === normalizedSearchValue;
   });
 };
-var collectMatchingOption = function collectMatchingOption(accumulator, option, normalizedSearchValue, isPreFiltered, selectedOptions) {
+var collectMatchingOption = function collectMatchingOption(_ref) {
+  var selectedOptions = _ref.selectedOptions,
+    isPreFiltered = _ref.isPreFiltered,
+    option = _ref.option,
+    accumulator = _ref.accumulator,
+    searchValue = _ref.searchValue,
+    normalizedSearchValue = _ref.normalizedSearchValue,
+    optionMatcher = _ref.optionMatcher;
   // Don't show options that have already been requested if
   // the selectedOptions list exists
   if (selectedOptions) {
@@ -43,17 +50,49 @@ var collectMatchingOption = function collectMatchingOption(accumulator, option,
     accumulator.push(option);
     return;
   }
-  var normalizedOption = getSearchableLabel(option);
-  if (normalizedOption.includes(normalizedSearchValue)) {
+  var isMatching = optionMatcher({
+    option: option,
+    searchValue: searchValue,
+    normalizedSearchValue: normalizedSearchValue
+  });
+  if (isMatching) {
     accumulator.push(option);
   }
 };
-var getMatchingOptions = function getMatchingOptions(options, searchValue, isPreFiltered, selectedOptions) {
+var getMatchingOptions = function getMatchingOptions(_ref2) {
+  var searchValue = _ref2.searchValue,
+    options = _ref2.options,
+    isPreFiltered = _ref2.isPreFiltered,
+    _ref2$selectedOptions = _ref2.selectedOptions,
+    selectedOptions = _ref2$selectedOptions === void 0 ? [] : _ref2$selectedOptions,
+    optionMatcher = _ref2.optionMatcher;
   var normalizedSearchValue = searchValue.toLowerCase();
   var matchingOptions = [];
   options.forEach(function (option) {
-    collectMatchingOption(matchingOptions, option, normalizedSearchValue, isPreFiltered, selectedOptions);
+    collectMatchingOption({
+      accumulator: matchingOptions,
+      option: option,
+      searchValue: searchValue,
+      normalizedSearchValue: normalizedSearchValue,
+      isPreFiltered: isPreFiltered,
+      selectedOptions: selectedOptions,
+      optionMatcher: optionMatcher
+    });
   });
   return matchingOptions;
 };
-exports.getMatchingOptions = getMatchingOptions;
+
+/**
+ * Partial string equality option matcher for EuiSelectable
+ * It matches all options with labels including the searched string.
+ */
+exports.getMatchingOptions = getMatchingOptions;
+var createPartialStringEqualityOptionMatcher = function createPartialStringEqualityOptionMatcher() {
+  return function (_ref3) {
+    var option = _ref3.option,
+      normalizedSearchValue = _ref3.normalizedSearchValue;
+    var normalizedOption = getSearchableLabel(option);
+    return normalizedOption.includes(normalizedSearchValue);
+  };
+};
+exports.createPartialStringEqualityOptionMatcher = createPartialStringEqualityOptionMatcher;

package/optimize/lib/components/selectable/selectable.js

@@ -28,7 +28,7 @@ var _services = require("../../services");
 var _accessibility = require("../accessibility");
 var _i18n = require("../i18n");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "options", "onChange", "onActiveOptionChange", "searchable", "searchProps", "singleSelection", "isLoading", "listProps", "renderOption", "height", "allowExclusions", "aria-label", "aria-describedby", "loadingMessage", "noMatchesMessage", "emptyMessage", "errorMessage", "selectableScreenReaderText", "isPreFiltered"],
+var _excluded = ["children", "className", "options", "onChange", "onActiveOptionChange", "searchable", "searchProps", "singleSelection", "isLoading", "listProps", "renderOption", "height", "allowExclusions", "aria-label", "aria-describedby", "loadingMessage", "noMatchesMessage", "emptyMessage", "errorMessage", "selectableScreenReaderText", "isPreFiltered", "optionMatcher"],
   _excluded2 = ["aria-label", "aria-describedby", "onChange", "defaultValue", "inputRef"],
   _excluded3 = ["aria-label", "aria-describedby", "isVirtualized", "rowHeight"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -228,9 +228,16 @@ var EuiSelectable = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onOptionClick", function (options, event, clickedOption) {
       var _this$props = _this.props,
         isPreFiltered = _this$props.isPreFiltered,
-        onChange = _this$props.onChange;
+        onChange = _this$props.onChange,
+        optionMatcher = _this$props.optionMatcher;
       var searchValue = _this.state.searchValue;
-      var visibleOptions = (0, _matching_options.getMatchingOptions)(options, searchValue, isPreFiltered);
+      var visibleOptions = (0, _matching_options.getMatchingOptions)({
+        options: options,
+        searchValue: searchValue !== null && searchValue !== void 0 ? searchValue : '',
+        isPreFiltered: !!isPreFiltered,
+        selectedOptions: [],
+        optionMatcher: optionMatcher
+      });
       _this.setState({
         visibleOptions: visibleOptions
       });
@@ -255,7 +262,13 @@ var EuiSelectable = /*#__PURE__*/function (_Component) {
       _isPreFiltered = props.isPreFiltered,
       searchProps = props.searchProps;
     var initialSearchValue = (searchProps === null || searchProps === void 0 ? void 0 : searchProps.value) || String((searchProps === null || searchProps === void 0 ? void 0 : searchProps.defaultValue) || '');
-    var _visibleOptions = (0, _matching_options.getMatchingOptions)(_options, initialSearchValue, _isPreFiltered);
+    var _visibleOptions = (0, _matching_options.getMatchingOptions)({
+      options: _options,
+      searchValue: initialSearchValue,
+      isPreFiltered: !!_isPreFiltered,
+      selectedOptions: [],
+      optionMatcher: props.optionMatcher
+    });
     searchProps === null || searchProps === void 0 ? void 0 : (_searchProps$onChange = searchProps.onChange) === null || _searchProps$onChange === void 0 ? void 0 : _searchProps$onChange.call(searchProps, initialSearchValue, _visibleOptions);
 
     // ensure that the currently selected single option is active if it is in the visibleOptions
@@ -311,6 +324,7 @@ var EuiSelectable = /*#__PURE__*/function (_Component) {
         errorMessage = _this$props3.errorMessage,
         selectableScreenReaderText = _this$props3.selectableScreenReaderText,
         isPreFiltered = _this$props3.isPreFiltered,
+        optionMatcher = _this$props3.optionMatcher,
         rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
       var _this$state = this.state,
         searchValue = _this$state.searchValue,
@@ -449,7 +463,8 @@ var EuiSelectable = /*#__PURE__*/function (_Component) {
           "aria-activedescendant": _this2.makeOptionId(activeOptionIndex) // the current faux-focused option
           ,
           placeholder: placeholderName,
-          isPreFiltered: isPreFiltered !== null && isPreFiltered !== void 0 ? isPreFiltered : false,
+          isPreFiltered: !!isPreFiltered,
+          optionMatcher: optionMatcher,
           inputRef: function inputRef(node) {
             var _searchProps$inputRef;
             _this2.inputRef = node;
@@ -493,6 +508,7 @@ var EuiSelectable = /*#__PURE__*/function (_Component) {
           options: options,
           visibleOptions: visibleOptions,
           searchValue: searchValue,
+          isPreFiltered: isPreFiltered,
           activeOptionIndex: activeOptionIndex,
           setActiveOptionIndex: function setActiveOptionIndex(index, cb) {
             _this2.setState({
@@ -527,7 +543,8 @@ var EuiSelectable = /*#__PURE__*/function (_Component) {
       var _stateUpdate$searchVa;
       var options = nextProps.options,
         isPreFiltered = nextProps.isPreFiltered,
-        searchProps = nextProps.searchProps;
+        searchProps = nextProps.searchProps,
+        optionMatcher = nextProps.optionMatcher;
       var activeOptionIndex = prevState.activeOptionIndex,
         searchValue = prevState.searchValue;
       var stateUpdate = {
@@ -537,7 +554,13 @@ var EuiSelectable = /*#__PURE__*/function (_Component) {
       if ((searchProps === null || searchProps === void 0 ? void 0 : searchProps.value) != null && searchProps.value !== searchValue) {
         stateUpdate.searchValue = searchProps.value;
       }
-      stateUpdate.visibleOptions = (0, _matching_options.getMatchingOptions)(options, (_stateUpdate$searchVa = stateUpdate.searchValue) !== null && _stateUpdate$searchVa !== void 0 ? _stateUpdate$searchVa : '', isPreFiltered);
+      stateUpdate.visibleOptions = (0, _matching_options.getMatchingOptions)({
+        options: options,
+        searchValue: (_stateUpdate$searchVa = stateUpdate.searchValue) !== null && _stateUpdate$searchVa !== void 0 ? _stateUpdate$searchVa : '',
+        isPreFiltered: !!isPreFiltered,
+        selectedOptions: [],
+        optionMatcher: optionMatcher
+      });
       if (activeOptionIndex != null && activeOptionIndex >= stateUpdate.visibleOptions.length) {
         stateUpdate.activeOptionIndex = -1;
       }
@@ -551,5 +574,6 @@ exports.EuiSelectable = EuiSelectable;
   options: [],
   singleSelection: false,
   searchable: false,
-  isPreFiltered: false
+  isPreFiltered: false,
+  optionMatcher: (0, _matching_options.createPartialStringEqualityOptionMatcher)()
 });

package/optimize/lib/components/selectable/selectable_list/selectable_list.js

@@ -1,11 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiSelectableList = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -26,9 +27,9 @@ var _selectable_list_item = require("./selectable_list_item");
 var _react2 = require("@emotion/react");
 var _excluded = ["data"],
   _excluded2 = ["label", "isGroupLabel", "checked", "disabled", "prepend", "append", "ref", "key", "searchableLabel", "data", "truncationProps"],
-  _excluded3 = ["className", "options", "searchValue", "onOptionClick", "renderOption", "height", "windowProps", "rowHeight", "activeOptionIndex", "makeOptionId", "showIcons", "singleSelection", "visibleOptions", "allowExclusions", "bordered", "paddingSize", "searchable", "onFocusBadge", "listId", "setActiveOptionIndex", "aria-label", "aria-labelledby", "aria-describedby", "role", "isVirtualized", "textWrap", "truncationProps"];
+  _excluded3 = ["className", "options", "searchValue", "onOptionClick", "renderOption", "height", "windowProps", "rowHeight", "activeOptionIndex", "makeOptionId", "showIcons", "singleSelection", "visibleOptions", "allowExclusions", "bordered", "paddingSize", "searchable", "onFocusBadge", "listId", "setActiveOptionIndex", "aria-label", "aria-labelledby", "aria-describedby", "role", "isPreFiltered", "isVirtualized", "textWrap", "truncationProps"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -135,6 +136,7 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
         setActiveOptionIndex = _this$props2.setActiveOptionIndex,
         searchable = _this$props2.searchable,
         searchValue = _this$props2.searchValue,
+        isPreFiltered = _this$props2.isPreFiltered,
         isVirtualized = _this$props2.isVirtualized;
       if (isGroupLabel) {
         return (0, _react2.jsx)("li", (0, _extends2.default)({
@@ -147,13 +149,17 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
       var id = makeOptionId(index);
       var isFocused = activeOptionIndex === index;
 
+      // Search highlighting
+      var hasSearch = !!searchValue;
+      var highlightSearch = hasSearch && ((0, _typeof2.default)(isPreFiltered) === 'object' ? isPreFiltered.highlightSearch !== false : true);
+
       // Text wrapping
       var canWrap = !isVirtualized;
       var _textWrap = (_option$textWrap = option.textWrap) !== null && _option$textWrap !== void 0 ? _option$textWrap : _this.props.textWrap;
       var textWrap = canWrap ? _textWrap : 'truncate';
 
       // Truncation config (if any). If none, CSS truncation is used
-      var truncationProps = textWrap === 'truncate' ? _this.getTruncationProps(option, isFocused) : undefined;
+      var truncationProps = textWrap === 'truncate' ? _this.getTruncationProps(option, highlightSearch, isFocused) : undefined;
       return (0, _react2.jsx)(_selectable_list_item.EuiSelectableListItem, (0, _extends2.default)({
         key: id,
         id: id,
@@ -181,7 +187,7 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
         searchable: searchable,
         textWrap: textWrap
       }, optionRest), renderOption ? renderOption( // @ts-ignore complex
-      _objectSpread(_objectSpread({}, _option), optionData), searchValue) : searchValue ? _this.renderSearchedText(label, truncationProps) : truncationProps ? _this.renderTruncatedText(label, truncationProps) : label);
+      _objectSpread(_objectSpread({}, _option), optionData), searchValue) : highlightSearch ? _this.renderSearchedText(label, truncationProps) : truncationProps ? _this.renderTruncatedText(label, truncationProps) : label);
     }, _reactWindow.areEqual));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderVirtualizedList", function () {
       if (!_this.props.isVirtualized) return null;
@@ -279,12 +285,12 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
         }
       });
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getTruncationProps", function (option, isFocused) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getTruncationProps", function (option, highlightSearch, isFocused) {
       // Individual truncation settings should override component-wide settings
       var truncationProps = _objectSpread(_objectSpread({}, _this.props.truncationProps), option.truncationProps);
 
       // If we're not actually using EuiTextTruncate, no need to continue
-      var hasComplexTruncation = _this.props.searchValue || Object.keys(truncationProps).length > 0;
+      var hasComplexTruncation = highlightSearch || Object.keys(truncationProps).length > 0;
       if (!hasComplexTruncation) return undefined;
 
       // Determine whether we can use the optimized default option width
@@ -486,6 +492,7 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
         ariaLabelledby = _this$props10['aria-labelledby'],
         ariaDescribedby = _this$props10['aria-describedby'],
         role = _this$props10.role,
+        isPreFiltered = _this$props10.isPreFiltered,
         isVirtualized = _this$props10.isVirtualized,
         textWrap = _this$props10.textWrap,
         truncationProps = _this$props10.truncationProps,

package/optimize/lib/components/selectable/selectable_search/selectable_search.js

@@ -13,7 +13,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _form = require("../../form");
 var _matching_options = require("../matching_options");
 var _react2 = require("@emotion/react");
-var _excluded = ["onChange", "options", "value", "placeholder", "isPreFiltered", "listId", "className"];
+var _excluded = ["onChange", "options", "value", "placeholder", "isPreFiltered", "listId", "className", "optionMatcher"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -31,12 +31,18 @@ var EuiSelectableSearch = function EuiSelectableSearch(_ref) {
     isPreFiltered = _ref.isPreFiltered,
     listId = _ref.listId,
     className = _ref.className,
+    optionMatcher = _ref.optionMatcher,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var onChange = (0, _react.useCallback)(function (e) {
     var searchValue = e.target.value;
-    var matchingOptions = (0, _matching_options.getMatchingOptions)(options, searchValue, isPreFiltered);
+    var matchingOptions = (0, _matching_options.getMatchingOptions)({
+      options: options,
+      searchValue: searchValue,
+      isPreFiltered: isPreFiltered,
+      optionMatcher: optionMatcher
+    });
     onChangeCallback(searchValue, matchingOptions);
-  }, [options, isPreFiltered, onChangeCallback]);
+  }, [options, isPreFiltered, onChangeCallback, optionMatcher]);
   var classes = (0, _classnames.default)('euiSelectableSearch', className);
   var ariaPropsIfListIsPresent = listId ? {
     role: 'combobox',