@elastic/eui 94.1.0 → 94.2.0

package/es/components/combo_box/combo_box.js

@@ -1,4 +1,4 @@
-var _excluded = ["data-test-subj", "async", "className", "compressed", "customOptionText", "fullWidth", "id", "inputRef", "isCaseSensitive", "isClearable", "isDisabled", "isInvalid", "isLoading", "noSuggestions", "onBlur", "onChange", "onCreateOption", "onSearchChange", "options", "placeholder", "renderOption", "rowHeight", "selectedOptions", "singleSelection", "prepend", "sortMatchesBy", "delimiter", "append", "autoFocus", "truncationProps", "inputPopoverProps", "aria-label", "aria-labelledby"];
+var _excluded = ["data-test-subj", "async", "className", "compressed", "customOptionText", "fullWidth", "id", "inputRef", "isCaseSensitive", "isClearable", "isDisabled", "isInvalid", "isLoading", "noSuggestions", "onBlur", "onChange", "onCreateOption", "onSearchChange", "options", "placeholder", "renderOption", "rowHeight", "selectedOptions", "singleSelection", "prepend", "sortMatchesBy", "delimiter", "append", "autoFocus", "truncationProps", "inputPopoverProps", "optionMatcher", "aria-label", "aria-labelledby"];
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -36,7 +36,7 @@ import classNames from 'classnames';
 import { htmlIdGenerator, keys } from '../../services';
 import { EuiInputPopover } from '../popover';
 import { EuiI18n } from '../i18n';
-import { getMatchingOptions, flattenOptionGroups, getSelectedOptionForSearchValue, transformForCaseSensitivity } from './matching_options';
+import { getMatchingOptions, flattenOptionGroups, getSelectedOptionForSearchValue, transformForCaseSensitivity, createPartialStringEqualityOptionMatcher } from './matching_options';
 import { EuiComboBoxInput } from './combo_box_input/combo_box_input';
 import { EuiComboBoxOptionsList } from './combo_box_options_list';
 
@@ -68,6 +68,7 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
         options: _this.props.options,
         selectedOptions: _this.props.selectedOptions,
         searchValue: initialSearchValue,
+        optionMatcher: _this.props.optionMatcher,
         isCaseSensitive: _this.props.isCaseSensitive,
         isPreFiltered: _this.props.async,
         showPrevSelected: Boolean(_this.props.singleSelection),
@@ -471,6 +472,7 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
         autoFocus = _this$props11.autoFocus,
         truncationProps = _this$props11.truncationProps,
         inputPopoverProps = _this$props11.inputPopoverProps,
+        optionMatcher = _this$props11.optionMatcher,
         ariaLabel = _this$props11['aria-label'],
         ariaLabelledby = _this$props11['aria-labelledby'],
         rest = _objectWithoutProperties(_this$props11, _excluded);
@@ -601,7 +603,8 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
         options = nextProps.options,
         selectedOptions = nextProps.selectedOptions,
         singleSelection = nextProps.singleSelection,
-        sortMatchesBy = nextProps.sortMatchesBy;
+        sortMatchesBy = nextProps.sortMatchesBy,
+        optionMatcher = nextProps.optionMatcher;
       var activeOptionIndex = prevState.activeOptionIndex,
         searchValue = prevState.searchValue;
 
@@ -614,7 +617,8 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
         isCaseSensitive: isCaseSensitive,
         isPreFiltered: async,
         showPrevSelected: Boolean(singleSelection),
-        sortMatchesBy: sortMatchesBy
+        sortMatchesBy: sortMatchesBy,
+        optionMatcher: optionMatcher
       });
       var stateUpdate = {
         matchingOptions: matchingOptions
@@ -637,7 +641,8 @@ _defineProperty(EuiComboBox, "defaultProps", {
   singleSelection: false,
   prepend: undefined,
   append: undefined,
-  sortMatchesBy: 'none'
+  sortMatchesBy: 'none',
+  optionMatcher: createPartialStringEqualityOptionMatcher()
 });
 EuiComboBox.propTypes = {
   "data-test-subj": PropTypes.string,
@@ -708,6 +713,15 @@ EuiComboBox.propTypes = {
      * Whether to match options with case sensitivity.
      */
   isCaseSensitive: PropTypes.bool,
+  /**
+     * Optional custom option matcher function
+     *
+     * @example
+     * const exactEqualityMatcher: EuiComboBoxOptionMatcher = ({ option, searchValue }) => {
+     *   return option.label === searchValue;
+     * }
+     */
+  optionMatcher: PropTypes.func,
   /**
      * Creates an input group with element(s) coming before input. It won't show if `singleSelection` is set to `false`.
      * `string` | `ReactElement` or an array of these

package/es/components/combo_box/index.js

@@ -8,4 +8,5 @@
 
 export { EuiComboBox } from './combo_box';
 export * from './combo_box_input';
-export * from './combo_box_options_list';
+export * from './combo_box_options_list';
+export { createPartialStringEqualityOptionMatcher } from './matching_options';

package/es/components/combo_box/matching_options.js

@@ -40,10 +40,12 @@ var collectMatchingOption = function collectMatchingOption(_ref2) {
   var accumulator = _ref2.accumulator,
     option = _ref2.option,
     selectedOptions = _ref2.selectedOptions,
+    searchValue = _ref2.searchValue,
     normalizedSearchValue = _ref2.normalizedSearchValue,
     isCaseSensitive = _ref2.isCaseSensitive,
     isPreFiltered = _ref2.isPreFiltered,
-    showPrevSelected = _ref2.showPrevSelected;
+    showPrevSelected = _ref2.showPrevSelected,
+    optionMatcher = _ref2.optionMatcher;
   // Only show options which haven't yet been selected unless requested.
   var selectedOption = getSelectedOptionForSearchValue({
     isCaseSensitive: isCaseSensitive,
@@ -64,8 +66,13 @@ var collectMatchingOption = function collectMatchingOption(_ref2) {
     accumulator.push(option);
     return;
   }
-  var normalizedOption = transformForCaseSensitivity(option.label.trim(), isCaseSensitive);
-  if (normalizedOption.includes(normalizedSearchValue)) {
+  var isMatching = optionMatcher({
+    option: option,
+    searchValue: searchValue,
+    normalizedSearchValue: normalizedSearchValue,
+    isCaseSensitive: isCaseSensitive !== null && isCaseSensitive !== void 0 ? isCaseSensitive : true
+  });
+  if (isMatching) {
     accumulator.push(option);
   }
 };
@@ -73,6 +80,7 @@ export var getMatchingOptions = function getMatchingOptions(_ref3) {
   var options = _ref3.options,
     selectedOptions = _ref3.selectedOptions,
     searchValue = _ref3.searchValue,
+    optionMatcher = _ref3.optionMatcher,
     _ref3$isCaseSensitive = _ref3.isCaseSensitive,
     isCaseSensitive = _ref3$isCaseSensitive === void 0 ? false : _ref3$isCaseSensitive,
     _ref3$isPreFiltered = _ref3.isPreFiltered,
@@ -91,10 +99,12 @@ export var getMatchingOptions = function getMatchingOptions(_ref3) {
           accumulator: matchingOptionsForGroup,
           option: groupOption,
           selectedOptions: selectedOptions,
+          searchValue: searchValue,
           normalizedSearchValue: normalizedSearchValue,
           isCaseSensitive: isCaseSensitive,
           isPreFiltered: isPreFiltered,
-          showPrevSelected: showPrevSelected
+          showPrevSelected: showPrevSelected,
+          optionMatcher: optionMatcher
         });
       });
       if (matchingOptionsForGroup.length > 0) {
@@ -113,10 +123,12 @@ export var getMatchingOptions = function getMatchingOptions(_ref3) {
         accumulator: matchingOptions,
         option: option,
         selectedOptions: selectedOptions,
+        searchValue: searchValue,
         normalizedSearchValue: normalizedSearchValue,
         isCaseSensitive: isCaseSensitive,
         isPreFiltered: isPreFiltered,
-        showPrevSelected: showPrevSelected
+        showPrevSelected: showPrevSelected,
+        optionMatcher: optionMatcher
       });
     }
   });
@@ -136,4 +148,21 @@ export var getMatchingOptions = function getMatchingOptions(_ref3) {
     return [].concat(_toConsumableArray(refObj.startWith), _toConsumableArray(refObj.others));
   }
   return matchingOptions;
+};
+
+/**
+ * Partial string equality option matcher for EuiComboBox.
+ * It matches all options with labels including the searched string.
+ */
+export var createPartialStringEqualityOptionMatcher = function createPartialStringEqualityOptionMatcher() {
+  return function (_ref4) {
+    var option = _ref4.option,
+      isCaseSensitive = _ref4.isCaseSensitive,
+      normalizedSearchValue = _ref4.normalizedSearchValue;
+    if (!normalizedSearchValue) {
+      return true;
+    }
+    var normalizedOption = transformForCaseSensitivity(option.label.trim(), isCaseSensitive);
+    return normalizedOption.includes(normalizedSearchValue);
+  };
 };