@elastic/eui 94.1.0 → 94.2.0

package/lib/components/color_picker/color_picker.js

@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
 var _form = require("../form");
+var _num_icons = require("../form/form_control_layout/_num_icons");
 var _i18n = require("../i18n");
 var _popover = require("../popover");
 var _spacer = require("../spacer");
@@ -173,9 +174,16 @@ var EuiColorPicker = function EuiColorPicker(_ref) {
     'euiColorPicker__popoverPanel--customButton': button
   });
   var swatchClass = 'euiColorPicker__swatchSelect';
+  var numIconsClass = (0, _num_icons.getFormControlClassNameForIconCount)({
+    isDropdown: true,
+    clear: isClearable,
+    isInvalid: isInvalid
+  });
   var inputClasses = (0, _classnames.default)('euiColorPicker__input', {
     'euiColorPicker__input--inGroup': prepend || append
-  });
+  },
+  // Manually account for input padding, since `controlOnly` disables that logic
+  'euiFieldText--withIcon', numIconsClass);
   var handleOnChange = function handleOnChange(text) {
     var output = getOutput(text, showAlpha);
     if (output.isValid) {

package/lib/components/combo_box/combo_box.js

@@ -14,7 +14,7 @@ var _matching_options = require("./matching_options");
 var _combo_box_input = require("./combo_box_input/combo_box_input");
 var _combo_box_options_list = require("./combo_box_options_list");
 var _react2 = require("@emotion/react");
-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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -72,6 +72,7 @@ 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),
@@ -475,6 +476,7 @@ 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);
@@ -605,7 +607,8 @@ 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;
 
@@ -618,7 +621,8 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
         isCaseSensitive: isCaseSensitive,
         isPreFiltered: async,
         showPrevSelected: Boolean(singleSelection),
-        sortMatchesBy: sortMatchesBy
+        sortMatchesBy: sortMatchesBy,
+        optionMatcher: optionMatcher
       });
       var stateUpdate = {
         matchingOptions: matchingOptions
@@ -642,7 +646,8 @@ _defineProperty(EuiComboBox, "defaultProps", {
   singleSelection: false,
   prepend: undefined,
   append: undefined,
-  sortMatchesBy: 'none'
+  sortMatchesBy: 'none',
+  optionMatcher: (0, _matching_options.createPartialStringEqualityOptionMatcher)()
 });
 EuiComboBox.propTypes = {
   "data-test-subj": _propTypes.default.string,
@@ -713,6 +718,15 @@ EuiComboBox.propTypes = {
      * Whether to match options with case sensitivity.
      */
   isCaseSensitive: _propTypes.default.bool,
+  /**
+     * Optional custom option matcher function
+     *
+     * @example
+     * const exactEqualityMatcher: EuiComboBoxOptionMatcher = ({ option, searchValue }) => {
+     *   return option.label === searchValue;
+     * }
+     */
+  optionMatcher: _propTypes.default.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/lib/components/combo_box/index.js

@@ -4,7 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  EuiComboBox: true
+  EuiComboBox: true,
+  createPartialStringEqualityOptionMatcher: true
 };
 Object.defineProperty(exports, "EuiComboBox", {
   enumerable: true,
@@ -12,6 +13,12 @@ Object.defineProperty(exports, "EuiComboBox", {
     return _combo_box.EuiComboBox;
   }
 });
+Object.defineProperty(exports, "createPartialStringEqualityOptionMatcher", {
+  enumerable: true,
+  get: function get() {
+    return _matching_options.createPartialStringEqualityOptionMatcher;
+  }
+});
 var _combo_box = require("./combo_box");
 var _combo_box_input = require("./combo_box_input");
 Object.keys(_combo_box_input).forEach(function (key) {
@@ -36,4 +43,5 @@ Object.keys(_combo_box_options_list).forEach(function (key) {
       return _combo_box_options_list[key];
     }
   });
-});
+});
+var _matching_options = require("./matching_options");

package/lib/components/combo_box/matching_options.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.transformForCaseSensitivity = exports.getSelectedOptionForSearchValue = exports.getMatchingOptions = exports.flattenOptionGroups = void 0;
+exports.transformForCaseSensitivity = exports.getSelectedOptionForSearchValue = exports.getMatchingOptions = exports.flattenOptionGroups = exports.createPartialStringEqualityOptionMatcher = void 0;
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -49,10 +49,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,
@@ -73,8 +75,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);
   }
 };
@@ -82,6 +89,7 @@ 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,
@@ -100,10 +108,12 @@ 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) {
@@ -122,10 +132,12 @@ 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
       });
     }
   });
@@ -146,4 +158,22 @@ var getMatchingOptions = function getMatchingOptions(_ref3) {
   }
   return matchingOptions;
 };
-exports.getMatchingOptions = getMatchingOptions;
+
+/**
+ * Partial string equality option matcher for EuiComboBox.
+ * It matches all options with labels including the searched string.
+ */
+exports.getMatchingOptions = getMatchingOptions;
+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);
+  };
+};
+exports.createPartialStringEqualityOptionMatcher = createPartialStringEqualityOptionMatcher;