@elastic/eui 68.0.0 → 69.0.0

package/optimize/es/components/resizable_container/resizable_container.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["direction", "children", "className", "onPanelWidthChange", "onToggleCollapsed"];
+var _excluded = ["direction", "children", "className", "onPanelWidthChange", "onToggleCollapsed", "onResizeStart", "onResizeEnd"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -44,6 +44,8 @@ export var EuiResizableContainer = function EuiResizableContainer(_ref) {
       className = _ref.className,
       onPanelWidthChange = _ref.onPanelWidthChange,
       onToggleCollapsed = _ref.onToggleCollapsed,
+      onResizeStart = _ref.onResizeStart,
+      onResizeEnd = _ref.onResizeEnd,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var containerRef = useRef(null);
@@ -73,6 +75,26 @@ export var EuiResizableContainer = function EuiResizableContainer(_ref) {
       initialize();
     }
   }, [initialize, containerSize]);
+  var resizeContext = useRef({});
+  var resizeEnd = useCallback(function () {
+    onResizeEnd === null || onResizeEnd === void 0 ? void 0 : onResizeEnd();
+    resizeContext.current = {};
+  }, [onResizeEnd]);
+  var resizeStart = useCallback(function (trigger, keyMoveDirection) {
+    // If another resize starts while the previous one is still in progress
+    // (e.g. user presses opposite arrow to change direction while the first
+    // is still held down, or user presses an arrow while dragging with the
+    // mouse), we want to signal the end of the previous resize first.
+    if (resizeContext.current.trigger) {
+      resizeEnd();
+    }
+
+    onResizeStart === null || onResizeStart === void 0 ? void 0 : onResizeStart(trigger);
+    resizeContext.current = {
+      trigger: trigger,
+      keyMoveDirection: keyMoveDirection
+    };
+  }, [onResizeStart, resizeEnd]);
   var onMouseDown = useCallback(function (event) {
     var currentTarget = event.currentTarget;
     var prevPanel = currentTarget.previousElementSibling;
@@ -81,12 +103,13 @@ export var EuiResizableContainer = function EuiResizableContainer(_ref) {
     var prevPanelId = prevPanel.id;
     var nextPanelId = nextPanel.id;
     var position = getPosition(event, isHorizontal);
+    resizeStart('pointer');
     actions.dragStart({
       position: position,
       prevPanelId: prevPanelId,
       nextPanelId: nextPanelId
     });
-  }, [actions, isHorizontal]);
+  }, [actions, isHorizontal, resizeStart]);
   var onMouseMove = useCallback(function (event) {
     if (!reducerState.prevPanelId || !reducerState.nextPanelId || !reducerState.isDragging) return;
     var position = getPosition(event, isHorizontal);
@@ -96,24 +119,29 @@ export var EuiResizableContainer = function EuiResizableContainer(_ref) {
       nextPanelId: reducerState.nextPanelId
     });
   }, [actions, isHorizontal, reducerState.prevPanelId, reducerState.nextPanelId, reducerState.isDragging]);
+  var getKeyMoveDirection = useCallback(function (key) {
+    var direction = null;
+
+    if (isHorizontal && key === keys.ARROW_LEFT || !isHorizontal && key === keys.ARROW_UP) {
+      direction = 'backward';
+    } else if (isHorizontal && key === keys.ARROW_RIGHT || !isHorizontal && key === keys.ARROW_DOWN) {
+      direction = 'forward';
+    }
+
+    return direction;
+  }, [isHorizontal]);
   var onKeyDown = useCallback(function (event) {
     var key = event.key,
         currentTarget = event.currentTarget;
-    var shouldResizeHorizontalPanel = isHorizontal && (key === keys.ARROW_LEFT || key === keys.ARROW_RIGHT);
-    var shouldResizeVerticalPanel = !isHorizontal && (key === keys.ARROW_UP || key === keys.ARROW_DOWN);
+    var direction = getKeyMoveDirection(key);
     var prevPanelId = currentTarget.previousElementSibling.id;
     var nextPanelId = currentTarget.nextElementSibling.id;
-    var direction;
-
-    if (key === keys.ARROW_DOWN || key === keys.ARROW_RIGHT) {
-      direction = 'forward';
-    }
 
-    if (key === keys.ARROW_UP || key === keys.ARROW_LEFT) {
-      direction = 'backward';
-    }
+    if (direction && prevPanelId && nextPanelId) {
+      if (!event.repeat) {
+        resizeStart('key', direction);
+      }
 
-    if (direction === 'forward' || direction === 'backward' && (shouldResizeHorizontalPanel || shouldResizeVerticalPanel) && prevPanelId && nextPanelId) {
       event.preventDefault();
       actions.keyMove({
         direction: direction,
@@ -121,17 +149,40 @@ export var EuiResizableContainer = function EuiResizableContainer(_ref) {
         nextPanelId: nextPanelId
       });
     }
-  }, [actions, isHorizontal]);
+  }, [actions, getKeyMoveDirection, resizeStart]);
+  var onKeyUp = useCallback(function (_ref2) {
+    var key = _ref2.key;
+
+    // We only want to signal the end of a resize if the key that was released
+    // is the same as the one that started the resize. This prevents the end
+    // of a resize if the user presses one arrow key, then presses the opposite
+    // arrow key to change direction, then releases the first arrow key.
+    if (resizeContext.current.trigger === 'key' && resizeContext.current.keyMoveDirection === getKeyMoveDirection(key)) {
+      resizeEnd();
+    }
+  }, [getKeyMoveDirection, resizeEnd]);
   var onMouseUp = useCallback(function () {
+    if (resizeContext.current.trigger === 'pointer') {
+      resizeEnd();
+    }
+
     actions.reset();
-  }, [actions]); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [actions, resizeEnd]);
+  var onBlur = useCallback(function () {
+    if (resizeContext.current.trigger === 'key') {
+      resizeEnd();
+    }
+
+    actions.resizerBlur();
+  }, [actions, resizeEnd]); // eslint-disable-next-line react-hooks/exhaustive-deps
 
   var EuiResizableButton = useCallback(euiResizableButtonWithControls({
     onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp,
     onMouseDown: onMouseDown,
     onTouchStart: onMouseDown,
     onFocus: actions.resizerFocus,
-    onBlur: actions.resizerBlur,
+    onBlur: onBlur,
     isHorizontal: isHorizontal,
     registration: {
       register: actions.registerResizer,

package/optimize/es/components/tool_tip/tool_tip_anchor.js

@@ -35,9 +35,9 @@ export var EuiToolTipAnchor = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var classes = classNames('euiToolTipAnchor', className);
   return (// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
     ___EmotionJSX("span", _extends({
-      ref: ref
+      ref: ref,
+      css: cssStyles
     }, rest, {
-      css: cssStyles,
       className: classes,
       onMouseOver: onMouseOver,
       onMouseOut: onMouseOut

package/optimize/lib/components/breadcrumbs/breadcrumb.js

@@ -38,7 +38,7 @@ var _breadcrumb = require("./breadcrumb.styles");
 var _react2 = require("@emotion/react");
 
 var _excluded = ["children", "className", "type", "truncate"],
-    _excluded2 = ["text", "truncate", "type", "href", "rel", "onClick", "className", "color", "isFirstBreadcrumb", "isLastBreadcrumb", "isOnlyBreadcrumb", "highlightLastBreadcrumb"];
+    _excluded2 = ["text", "truncate", "type", "href", "rel", "onClick", "className", "color", "isFirstBreadcrumb", "isLastBreadcrumb", "isOnlyBreadcrumb", "highlightLastBreadcrumb", "truncateLastBreadcrumb"];
 
 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); }
 
@@ -75,11 +75,12 @@ var EuiBreadcrumbContent = function EuiBreadcrumbContent(_ref2) {
       isLastBreadcrumb = _ref2.isLastBreadcrumb,
       isOnlyBreadcrumb = _ref2.isOnlyBreadcrumb,
       highlightLastBreadcrumb = _ref2.highlightLastBreadcrumb,
+      truncateLastBreadcrumb = _ref2.truncateLastBreadcrumb,
       rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
   var classes = (0, _classnames.default)('euiBreadcrumb__content', className);
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _breadcrumb.euiBreadcrumbContentStyles)(euiTheme);
-  var cssStyles = [styles.euiBreadcrumb__content, styles[type], truncate && (isLastBreadcrumb ? styles.isTruncatedLast : styles.isTruncated)];
+  var cssStyles = [styles.euiBreadcrumb__content, styles[type], truncate && !truncateLastBreadcrumb && styles.isTruncated, truncateLastBreadcrumb && styles.isTruncatedLast];
 
   if (type === 'application') {
     if (isOnlyBreadcrumb) {

package/optimize/lib/components/breadcrumbs/breadcrumbs.js

@@ -66,12 +66,14 @@ var EuiBreadcrumbs = function EuiBreadcrumbs(_ref) {
   }, [breadcrumbs, responsiveMax]);
   var breadcrumbChildren = (0, _react.useMemo)(function () {
     return visibleBreadcrumbs.map(function (breadcrumb, index) {
+      var _breadcrumb$truncate;
+
       var isFirstBreadcrumb = index === 0;
       var isLastBreadcrumb = index === visibleBreadcrumbs.length - 1;
       var isOnlyBreadcrumb = visibleBreadcrumbs.length === 1;
       var sharedProps = {
         type: type,
-        truncate: truncate
+        truncate: (_breadcrumb$truncate = breadcrumb.truncate) !== null && _breadcrumb$truncate !== void 0 ? _breadcrumb$truncate : truncate
       };
       return breadcrumb.isCollapsedButton ? (0, _react2.jsx)(_breadcrumb.EuiBreadcrumbCollapsed, (0, _extends2.default)({
         key: "collapsed"
@@ -85,12 +87,13 @@ var EuiBreadcrumbs = function EuiBreadcrumbs(_ref) {
         max: 0
       })) : (0, _react2.jsx)(_breadcrumb.EuiBreadcrumb, (0, _extends2.default)({
         key: index
-      }, sharedProps), (0, _react2.jsx)(_breadcrumb.EuiBreadcrumbContent, (0, _extends2.default)({
+      }, sharedProps), (0, _react2.jsx)(_breadcrumb.EuiBreadcrumbContent, (0, _extends2.default)({}, breadcrumb, sharedProps, {
         isFirstBreadcrumb: isFirstBreadcrumb,
         isLastBreadcrumb: isLastBreadcrumb,
         isOnlyBreadcrumb: isOnlyBreadcrumb,
-        highlightLastBreadcrumb: isLastBreadcrumb && lastBreadcrumbIsCurrentPage
-      }, sharedProps, breadcrumb)));
+        highlightLastBreadcrumb: isLastBreadcrumb && lastBreadcrumbIsCurrentPage,
+        truncateLastBreadcrumb: isLastBreadcrumb && truncate && breadcrumb.truncate == null
+      })));
     });
   }, [visibleBreadcrumbs, truncate, type, lastBreadcrumbIsCurrentPage]);
   return (0, _react2.jsx)("nav", (0, _extends2.default)({

package/optimize/lib/components/combo_box/combo_box.js

@@ -47,7 +47,7 @@ var _popover = require("../../services/popover");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["data-test-subj", "async", "className", "compressed", "customOptionText", "fullWidth", "id", "inputRef", "isClearable", "isDisabled", "isInvalid", "isLoading", "noSuggestions", "onBlur", "onChange", "onCreateOption", "onSearchChange", "options", "placeholder", "renderOption", "rowHeight", "selectedOptions", "singleSelection", "prepend", "sortMatchesBy", "delimiter", "append", "autoFocus", "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", "aria-label", "aria-labelledby"];
 
 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); }
 
@@ -85,7 +85,15 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
       listElement: null,
       listPosition: 'bottom',
       listZIndex: undefined,
-      matchingOptions: (0, _matching_options.getMatchingOptions)(_this.props.options, _this.props.selectedOptions, initialSearchValue, _this.props.async, Boolean(_this.props.singleSelection), _this.props.sortMatchesBy),
+      matchingOptions: (0, _matching_options.getMatchingOptions)({
+        options: _this.props.options,
+        selectedOptions: _this.props.selectedOptions,
+        searchValue: initialSearchValue,
+        isCaseSensitive: _this.props.isCaseSensitive,
+        isPreFiltered: _this.props.async,
+        showPrevSelected: Boolean(_this.props.singleSelection),
+        sortMatchesBy: _this.props.sortMatchesBy
+      }),
       searchValue: initialSearchValue,
       width: 0
     });
@@ -281,6 +289,7 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "addCustomOption", function (isContainerBlur, searchValue) {
       var _this$props = _this.props,
+          isCaseSensitive = _this$props.isCaseSensitive,
           onCreateOption = _this$props.onCreateOption,
           options = _this$props.options,
           selectedOptions = _this$props.selectedOptions,
@@ -303,7 +312,11 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
       } // Don't create the value if it's already been selected.
 
 
-      if ((0, _matching_options.getSelectedOptionForSearchValue)(searchValue, selectedOptions)) {
+      if ((0, _matching_options.getSelectedOptionForSearchValue)({
+        isCaseSensitive: isCaseSensitive,
+        searchValue: searchValue,
+        selectedOptions: selectedOptions
+      })) {
         return;
       } // Add new custom pill if this is custom input, even if it partially matches an option.
 
@@ -328,13 +341,16 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
         return false;
       }
 
-      return _this.state.matchingOptions[0].label.toLowerCase() === searchValue.toLowerCase();
+      var normalizedSearchSubject = (0, _matching_options.transformForCaseSensitivity)(_this.state.matchingOptions[0].label, _this.props.isCaseSensitive);
+      var normalizedSearchValue = (0, _matching_options.transformForCaseSensitivity)(searchValue, _this.props.isCaseSensitive);
+      return normalizedSearchSubject === normalizedSearchValue;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "areAllOptionsSelected", function () {
       var _this$props2 = _this.props,
           options = _this$props2.options,
           selectedOptions = _this$props2.selectedOptions,
-          async = _this$props2.async; // Assume if this is async then there could be infinite options.
+          async = _this$props2.async,
+          isCaseSensitive = _this$props2.isCaseSensitive; // Assume if this is async then there could be infinite options.
 
       if (async) {
         return false;
@@ -342,13 +358,13 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
 
       var flattenOptions = (0, _matching_options.flattenOptionGroups)(options).map(function (option) {
         return _objectSpread(_objectSpread({}, option), {}, {
-          label: option.label.trim().toLowerCase()
+          label: (0, _matching_options.transformForCaseSensitivity)(option.label.trim(), isCaseSensitive)
         });
       });
       var numberOfSelectedOptions = 0;
       selectedOptions.forEach(function (_ref3) {
         var label = _ref3.label;
-        var trimmedLabel = label.trim().toLowerCase();
+        var trimmedLabel = (0, _matching_options.transformForCaseSensitivity)(label.trim(), isCaseSensitive);
         if (flattenOptions.findIndex(function (option) {
           return option.label === trimmedLabel;
         }) !== -1) numberOfSelectedOptions += 1;
@@ -687,7 +703,15 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
       // isn't called after a state change, and we track `searchValue` in state
       // instead we need to react to a change in searchValue here
 
-      this.updateMatchingOptionsIfDifferent((0, _matching_options.getMatchingOptions)(options, selectedOptions, searchValue, this.props.async, Boolean(singleSelection), sortMatchesBy));
+      this.updateMatchingOptionsIfDifferent((0, _matching_options.getMatchingOptions)({
+        options: options,
+        selectedOptions: selectedOptions,
+        searchValue: searchValue,
+        isCaseSensitive: this.props.isCaseSensitive,
+        isPreFiltered: this.props.async,
+        showPrevSelected: Boolean(singleSelection),
+        sortMatchesBy: sortMatchesBy
+      }));
     }
   }, {
     key: "componentWillUnmount",
@@ -708,6 +732,7 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
           fullWidth = _this$props8.fullWidth,
           id = _this$props8.id,
           inputRef = _this$props8.inputRef,
+          isCaseSensitive = _this$props8.isCaseSensitive,
           isClearable = _this$props8.isClearable,
           isDisabled = _this$props8.isDisabled,
           isInvalid = _this$props8.isInvalid,
@@ -772,6 +797,7 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
             customOptionText: customOptionText,
             "data-test-subj": optionsListDataTestSubj,
             fullWidth: fullWidth,
+            isCaseSensitive: isCaseSensitive,
             isLoading: isLoading,
             listRef: _this3.listRefCallback,
             matchingOptions: matchingOptions,
@@ -851,7 +877,9 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
   }], [{
     key: "getDerivedStateFromProps",
     value: function getDerivedStateFromProps(nextProps, prevState) {
-      var options = nextProps.options,
+      var async = nextProps.async,
+          isCaseSensitive = nextProps.isCaseSensitive,
+          options = nextProps.options,
           selectedOptions = nextProps.selectedOptions,
           singleSelection = nextProps.singleSelection,
           sortMatchesBy = nextProps.sortMatchesBy;
@@ -859,7 +887,15 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
           searchValue = prevState.searchValue; // Calculate and cache the options which match the searchValue, because we use this information
       // in multiple places and it would be expensive to calculate repeatedly.
 
-      var matchingOptions = (0, _matching_options.getMatchingOptions)(options, selectedOptions, searchValue, nextProps.async, Boolean(singleSelection), sortMatchesBy);
+      var matchingOptions = (0, _matching_options.getMatchingOptions)({
+        options: options,
+        selectedOptions: selectedOptions,
+        searchValue: searchValue,
+        isCaseSensitive: isCaseSensitive,
+        isPreFiltered: async,
+        showPrevSelected: Boolean(singleSelection),
+        sortMatchesBy: sortMatchesBy
+      });
       var stateUpdate = {
         matchingOptions: matchingOptions
       };

package/optimize/lib/components/combo_box/combo_box_options_list/combo_box_options_list.js

@@ -54,7 +54,7 @@ var _popover_panel = require("../../popover/popover_panel");
 var _react2 = require("@emotion/react");
 
 var _excluded = ["key", "isGroupLabelOption", "label", "value"],
-    _excluded2 = ["data-test-subj", "activeOptionIndex", "areAllOptionsSelected", "customOptionText", "fullWidth", "getSelectedOptionForSearchValue", "isLoading", "listRef", "matchingOptions", "onCloseList", "onCreateOption", "onOptionClick", "onOptionEnterKey", "onScroll", "optionRef", "options", "position", "renderOption", "rootId", "rowHeight", "scrollToIndex", "searchValue", "selectedOptions", "singleSelection", "updatePosition", "width", "delimiter", "zIndex", "style", "listboxAriaLabel"];
+    _excluded2 = ["data-test-subj", "activeOptionIndex", "areAllOptionsSelected", "customOptionText", "fullWidth", "getSelectedOptionForSearchValue", "isCaseSensitive", "isLoading", "listRef", "matchingOptions", "onCloseList", "onCreateOption", "onOptionClick", "onOptionEnterKey", "onScroll", "optionRef", "options", "position", "renderOption", "rootId", "rowHeight", "scrollToIndex", "searchValue", "selectedOptions", "singleSelection", "updatePosition", "width", "delimiter", "zIndex", "style", "listboxAriaLabel"];
 
 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); }
 
@@ -149,7 +149,7 @@ var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
 
       if (isGroupLabelOption) {
         return (0, _react2.jsx)("div", {
-          key: key !== null && key !== void 0 ? key : label.toLowerCase(),
+          key: key !== null && key !== void 0 ? key : label,
           style: style
         }, (0, _react2.jsx)(_combo_box_title.EuiComboBoxTitle, null, label));
       }
@@ -164,7 +164,7 @@ var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
       var optionIsDisabled = option.hasOwnProperty('disabled') && option.disabled === true;
       return (0, _react2.jsx)(_filter_select_item.EuiFilterSelectItem, (0, _extends2.default)({
         style: style,
-        key: (_option$key = option.key) !== null && _option$key !== void 0 ? _option$key : option.label.toLowerCase(),
+        key: (_option$key = option.key) !== null && _option$key !== void 0 ? _option$key : option.label,
         onClick: function onClick() {
           if (onOptionClick) {
             onOptionClick(option);
@@ -182,6 +182,7 @@ var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
         className: OPTION_CONTENT_CLASSNAME
       }, renderOption(option, searchValue, 'euiComboBoxOption__renderOption')) : (0, _react2.jsx)(_highlight.EuiHighlight, {
         search: searchValue,
+        strict: _this.props.isCaseSensitive,
         className: OPTION_CONTENT_CLASSNAME
       }, label), optionIsFocused && !optionIsDisabled ? hitEnterBadge : null));
     });
@@ -245,6 +246,7 @@ var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
           customOptionText = _this$props2.customOptionText,
           fullWidth = _this$props2.fullWidth,
           getSelectedOptionForSearchValue = _this$props2.getSelectedOptionForSearchValue,
+          isCaseSensitive = _this$props2.isCaseSensitive,
           isLoading = _this$props2.isLoading,
           listRef = _this$props2.listRef,
           matchingOptions = _this$props2.matchingOptions,
@@ -302,7 +304,11 @@ var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
               }
             })), hitEnterBadge);
           } else {
-            var selectedOptionForValue = getSelectedOptionForSearchValue(searchValue, selectedOptions);
+            var selectedOptionForValue = getSelectedOptionForSearchValue({
+              isCaseSensitive: isCaseSensitive,
+              searchValue: searchValue,
+              selectedOptions: selectedOptions
+            });
 
             if (selectedOptionForValue) {
               // Disallow duplicate custom options.
@@ -408,6 +414,7 @@ var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
 exports.EuiComboBoxOptionsList = EuiComboBoxOptionsList;
 (0, _defineProperty2.default)(EuiComboBoxOptionsList, "defaultProps", {
   'data-test-subj': '',
-  rowHeight: 29 // row height of default option renderer
-
+  rowHeight: 29,
+  // row height of default option renderer
+  isCaseSensitive: false
 });

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSelectedOptionForSearchValue = exports.getMatchingOptions = exports.flattenOptionGroups = void 0;
+exports.transformForCaseSensitivity = exports.getSelectedOptionForSearchValue = exports.getMatchingOptions = exports.flattenOptionGroups = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
@@ -16,6 +16,12 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+var transformForCaseSensitivity = function transformForCaseSensitivity(string, isCaseSensitive) {
+  return isCaseSensitive ? string : string.toLowerCase();
+};
+
+exports.transformForCaseSensitivity = transformForCaseSensitivity;
+
 var flattenOptionGroups = function flattenOptionGroups(optionsOrGroups) {
   return optionsOrGroups.reduce(function (options, optionOrGroup) {
     if (optionOrGroup.options) {
@@ -30,18 +36,35 @@ var flattenOptionGroups = function flattenOptionGroups(optionsOrGroups) {
 
 exports.flattenOptionGroups = flattenOptionGroups;
 
-var getSelectedOptionForSearchValue = function getSelectedOptionForSearchValue(searchValue, selectedOptions, optionKey) {
-  var normalizedSearchValue = searchValue.toLowerCase();
+var getSelectedOptionForSearchValue = function getSelectedOptionForSearchValue(_ref) {
+  var isCaseSensitive = _ref.isCaseSensitive,
+      searchValue = _ref.searchValue,
+      selectedOptions = _ref.selectedOptions,
+      optionKey = _ref.optionKey;
+  var normalizedSearchValue = transformForCaseSensitivity(searchValue, isCaseSensitive);
   return selectedOptions.find(function (option) {
-    return option.label.toLowerCase() === normalizedSearchValue && (!optionKey || option.key === optionKey);
+    var normalizedOption = transformForCaseSensitivity(option.label, isCaseSensitive);
+    return normalizedOption === normalizedSearchValue && (!optionKey || option.key === optionKey);
   });
 };
 
 exports.getSelectedOptionForSearchValue = getSelectedOptionForSearchValue;
 
-var collectMatchingOption = function collectMatchingOption(accumulator, option, selectedOptions, normalizedSearchValue, isPreFiltered, showPrevSelected) {
+var collectMatchingOption = function collectMatchingOption(_ref2) {
+  var accumulator = _ref2.accumulator,
+      option = _ref2.option,
+      selectedOptions = _ref2.selectedOptions,
+      normalizedSearchValue = _ref2.normalizedSearchValue,
+      isCaseSensitive = _ref2.isCaseSensitive,
+      isPreFiltered = _ref2.isPreFiltered,
+      showPrevSelected = _ref2.showPrevSelected;
   // Only show options which haven't yet been selected unless requested.
-  var selectedOption = getSelectedOptionForSearchValue(option.label, selectedOptions, option.key);
+  var selectedOption = getSelectedOptionForSearchValue({
+    isCaseSensitive: isCaseSensitive,
+    searchValue: option.label,
+    selectedOptions: selectedOptions,
+    optionKey: option.key
+  });
 
   if (selectedOption && !showPrevSelected) {
     return false;
@@ -58,21 +81,40 @@ var collectMatchingOption = function collectMatchingOption(accumulator, option,
     return;
   }
 
-  var normalizedOption = option.label.trim().toLowerCase();
+  var normalizedOption = transformForCaseSensitivity(option.label.trim(), isCaseSensitive);
 
   if (normalizedOption.includes(normalizedSearchValue)) {
     accumulator.push(option);
   }
 };
 
-var getMatchingOptions = function getMatchingOptions(options, selectedOptions, searchValue, isPreFiltered, showPrevSelected, sortMatchesBy) {
-  var normalizedSearchValue = searchValue.trim().toLowerCase();
+var getMatchingOptions = function getMatchingOptions(_ref3) {
+  var options = _ref3.options,
+      selectedOptions = _ref3.selectedOptions,
+      searchValue = _ref3.searchValue,
+      _ref3$isCaseSensitive = _ref3.isCaseSensitive,
+      isCaseSensitive = _ref3$isCaseSensitive === void 0 ? false : _ref3$isCaseSensitive,
+      _ref3$isPreFiltered = _ref3.isPreFiltered,
+      isPreFiltered = _ref3$isPreFiltered === void 0 ? false : _ref3$isPreFiltered,
+      _ref3$showPrevSelecte = _ref3.showPrevSelected,
+      showPrevSelected = _ref3$showPrevSelecte === void 0 ? false : _ref3$showPrevSelecte,
+      _ref3$sortMatchesBy = _ref3.sortMatchesBy,
+      sortMatchesBy = _ref3$sortMatchesBy === void 0 ? 'none' : _ref3$sortMatchesBy;
+  var normalizedSearchValue = transformForCaseSensitivity(searchValue.trim(), isCaseSensitive);
   var matchingOptions = [];
   options.forEach(function (option) {
     if (option.options) {
       var matchingOptionsForGroup = [];
       option.options.forEach(function (groupOption) {
-        collectMatchingOption(matchingOptionsForGroup, groupOption, selectedOptions, normalizedSearchValue, isPreFiltered, showPrevSelected);
+        collectMatchingOption({
+          accumulator: matchingOptionsForGroup,
+          option: groupOption,
+          selectedOptions: selectedOptions,
+          normalizedSearchValue: normalizedSearchValue,
+          isCaseSensitive: isCaseSensitive,
+          isPreFiltered: isPreFiltered,
+          showPrevSelected: showPrevSelected
+        });
       });
 
       if (matchingOptionsForGroup.length > 0) {
@@ -87,7 +129,15 @@ var getMatchingOptions = function getMatchingOptions(options, selectedOptions, s
         matchingOptions = matchingOptions.concat(matchingOptionsForGroup);
       }
     } else {
-      collectMatchingOption(matchingOptions, option, selectedOptions, normalizedSearchValue, isPreFiltered, showPrevSelected);
+      collectMatchingOption({
+        accumulator: matchingOptions,
+        option: option,
+        selectedOptions: selectedOptions,
+        normalizedSearchValue: normalizedSearchValue,
+        isCaseSensitive: isCaseSensitive,
+        isPreFiltered: isPreFiltered,
+        showPrevSelected: showPrevSelected
+      });
     }
   });
 
@@ -97,7 +147,9 @@ var getMatchingOptions = function getMatchingOptions(options, selectedOptions, s
       others: []
     };
     matchingOptions.forEach(function (object) {
-      if (object.label.toLowerCase().startsWith(normalizedSearchValue)) {
+      var normalizedLabel = transformForCaseSensitivity(object.label, isCaseSensitive);
+
+      if (normalizedLabel.startsWith(normalizedSearchValue)) {
         refObj.startWith.push(object);
       } else {
         refObj.others.push(object);

package/optimize/lib/components/flex/flex_grid.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GUTTER_SIZES = exports.EuiFlexGrid = exports.DIRECTIONS = exports.COLUMNS = void 0;
+exports.GUTTER_SIZES = exports.EuiFlexGrid = exports.DIRECTIONS = exports.ALIGN_ITEMS = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -15,37 +15,19 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _common = require("../common");
+var _services = require("../../services");
+
+var _flex_grid = require("./flex_grid.styles");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "className", "gutterSize", "direction", "responsive", "columns", "component"];
-var directionToClassNameMap = {
-  row: null,
-  column: 'euiFlexGrid--directionColumn'
-};
-var DIRECTIONS = (0, _common.keysOf)(directionToClassNameMap);
+var _excluded = ["children", "className", "gutterSize", "direction", "alignItems", "responsive", "columns", "component"];
+var DIRECTIONS = ['row', 'column'];
 exports.DIRECTIONS = DIRECTIONS;
-var gutterSizeToClassNameMap = {
-  none: 'euiFlexGrid--gutterNone',
-  s: 'euiFlexGrid--gutterSmall',
-  m: 'euiFlexGrid--gutterMedium',
-  l: 'euiFlexGrid--gutterLarge',
-  xl: 'euiFlexGrid--gutterXLarge'
-};
-var GUTTER_SIZES = (0, _common.keysOf)(gutterSizeToClassNameMap);
+var ALIGN_ITEMS = ['stretch', 'start', 'end', 'center', 'baseline'];
+exports.ALIGN_ITEMS = ALIGN_ITEMS;
+var GUTTER_SIZES = ['none', 's', 'm', 'l', 'xl'];
 exports.GUTTER_SIZES = GUTTER_SIZES;
-var columnsToClassNameMap = {
-  0: 'euiFlexGrid--wrap',
-  1: 'euiFlexGrid--single',
-  2: 'euiFlexGrid--halves',
-  3: 'euiFlexGrid--thirds',
-  4: 'euiFlexGrid--fourths'
-};
-var COLUMNS = Object.keys(columnsToClassNameMap).map(function (columns) {
-  return parseInt(columns, 10);
-});
-exports.COLUMNS = COLUMNS;
 
 var EuiFlexGrid = function EuiFlexGrid(_ref) {
   var children = _ref.children,
@@ -54,21 +36,24 @@ var EuiFlexGrid = function EuiFlexGrid(_ref) {
       gutterSize = _ref$gutterSize === void 0 ? 'l' : _ref$gutterSize,
       _ref$direction = _ref.direction,
       direction = _ref$direction === void 0 ? 'row' : _ref$direction,
+      _ref$alignItems = _ref.alignItems,
+      alignItems = _ref$alignItems === void 0 ? 'stretch' : _ref$alignItems,
       _ref$responsive = _ref.responsive,
       responsive = _ref$responsive === void 0 ? true : _ref$responsive,
       _ref$columns = _ref.columns,
-      columns = _ref$columns === void 0 ? 0 : _ref$columns,
+      columns = _ref$columns === void 0 ? 1 : _ref$columns,
       _ref$component = _ref.component,
       Component = _ref$component === void 0 ? 'div' : _ref$component,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var classes = (0, _classnames.default)('euiFlexGrid', gutterSize ? gutterSizeToClassNameMap[gutterSize] : undefined, columns != null ? columnsToClassNameMap[columns] : undefined, direction ? directionToClassNameMap[direction] : undefined, {
-    'euiFlexGrid--responsive': responsive
-  }, className);
-  return (// @ts-ignore difficult to verify `rest` applies to `Component`
-    (0, _react2.jsx)(Component, (0, _extends2.default)({
-      className: classes
-    }, rest), children)
-  );
+  var gridTemplateRows = direction === 'column' ? Math.ceil(_react.default.Children.count(children) / columns) : 0;
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _flex_grid.euiFlexGridStyles)(euiTheme, gridTemplateRows);
+  var cssStyles = [styles.euiFlexGrid, styles.gutterSizes[gutterSize], styles.direction[direction], styles.alignItems[alignItems], styles.columnCount[columns], responsive && styles.responsive];
+  var classes = (0, _classnames.default)('euiFlexGrid', className);
+  return (0, _react2.jsx)(Component, (0, _extends2.default)({
+    css: cssStyles,
+    className: classes
+  }, rest), children);
 };
 
 exports.EuiFlexGrid = EuiFlexGrid;