@elastic/eui 68.0.0 → 70.0.0

package/optimize/lib/components/code/code_syntax.styles.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiCodeSyntaxTokens = exports.euiCodeSyntaxColors = void 0;
+
+var _services = require("../../services");
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+var visColors = (0, _services.euiPaletteColorBlind)();
+
+var euiCodeSyntaxColors = function euiCodeSyntaxColors(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var backgroundColor = euiTheme.colors.lightestShade;
+  return {
+    backgroundColor: backgroundColor,
+    color: (0, _services.makeHighContrastColor)(euiTheme.colors.text)(backgroundColor),
+    inlineCodeColor: (0, _services.makeHighContrastColor)(visColors[3])(backgroundColor),
+    selectedBackgroundColor: 'inherit',
+    commentColor: (0, _services.makeHighContrastColor)(euiTheme.colors.subduedText)(backgroundColor),
+    selectorTagColor: 'inherit',
+    stringColor: (0, _services.makeHighContrastColor)(visColors[2])(backgroundColor),
+    tagColor: (0, _services.makeHighContrastColor)(visColors[1])(backgroundColor),
+    nameColor: (0, _services.makeHighContrastColor)(visColors[1])(backgroundColor),
+    numberColor: (0, _services.makeHighContrastColor)(visColors[0])(backgroundColor),
+    keywordColor: (0, _services.makeHighContrastColor)(visColors[3])(backgroundColor),
+    functionTitleColor: 'inherit',
+    typeColor: (0, _services.makeHighContrastColor)(visColors[1])(backgroundColor),
+    attributeColor: 'inherit',
+    symbolColor: (0, _services.makeHighContrastColor)(visColors[9])(backgroundColor),
+    paramsColor: 'inherit',
+    metaColor: (0, _services.makeHighContrastColor)(euiTheme.colors.subduedText)(backgroundColor),
+    titleColor: (0, _services.makeHighContrastColor)(visColors[7])(backgroundColor),
+    sectionColor: (0, _services.makeHighContrastColor)(visColors[9])(backgroundColor),
+    additionColor: (0, _services.makeHighContrastColor)(visColors[0])(backgroundColor),
+    deletionColor: (0, _services.makeHighContrastColor)(euiTheme.colors.danger)(backgroundColor),
+    selectorClassColor: 'inherit',
+    selectorIdColor: 'inherit'
+  };
+};
+
+exports.euiCodeSyntaxColors = euiCodeSyntaxColors;
+
+var euiCodeSyntaxTokens = function euiCodeSyntaxTokens(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var euiCodeBlock = euiCodeSyntaxColors(euiThemeContext);
+  return "\n    .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) {\n      opacity: .7;\n    }\n  \n    .token.comment,\n    .token.prolog,\n    .token.doctype,\n    .token.cdata,\n    .token.coord,\n    .token.blockquote {\n      color: ".concat(euiCodeBlock.commentColor, ";\n      font-style: italic;\n    }\n  \n    .token.selector {\n      color: ").concat(euiCodeBlock.selectorTagColor, ";\n    }\n  \n    .token.string,\n    .token.interpolation,\n    .token.interpolation-punctuation,\n    .token.doc-comment .token.keyword,\n    .token.attr-value,\n    .token.url .token.content {\n      color: ").concat(euiCodeBlock.stringColor, ";\n    }\n  \n    .token.number,\n    .token.boolean,\n    .token.keyword.nil,\n    .token.regex,\n    .token.variable,\n    .token.unit,\n    .token.hexcode,\n    .token.attr-name,\n    .token.attr-equals {\n      color: ").concat(euiCodeBlock.numberColor, ";\n    }\n  \n    .token.atrule .token.rule,\n    .token.keyword {\n      color: ").concat(euiCodeBlock.keywordColor, ";\n    }\n  \n    .token.function {\n      color: ").concat(euiCodeBlock.functionTitleColor, ";\n    }\n  \n    .token.tag {\n      color: ").concat(euiCodeBlock.tagColor, ";\n    }\n  \n    .token.class-name {\n      color: ").concat(euiCodeBlock.typeColor, ";\n    }\n  \n    .token.property {\n      color: ").concat(euiCodeBlock.attributeColor, ";\n    }\n  \n    .token.console,\n    .token.list-punctuation,\n    .token.url-reference,\n    .token.url .token.url {\n      color: ").concat(euiCodeBlock.symbolColor, ";\n    }\n  \n    .token.paramater {\n      color: ").concat(euiCodeBlock.paramsColor, ";\n    }\n  \n    .token.meta,\n    .token.important {\n      color: ").concat(euiCodeBlock.metaColor, ";\n    }\n  \n    .token.title {\n      color: ").concat(euiCodeBlock.titleColor, ";\n    }\n  \n    .token.section {\n      color: ").concat(euiCodeBlock.sectionColor, ";\n    }\n  \n    .token.prefix.inserted,\n    .token.prefix.deleted {\n      padding-inline-start: -").concat(euiTheme.size.xs, ";\n      margin-inline-start:  -").concat(euiTheme.size.xs, ";\n    }\n  \n    .token.prefix.inserted {\n      box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(euiCodeBlock.additionColor, ";\n      color: ").concat(euiCodeBlock.additionColor, ";\n    }\n  \n    .token.prefix.deleted {\n      box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(euiCodeBlock.deletionColor, ";\n      color: ").concat(euiCodeBlock.deletionColor, ";\n    }\n  \n    .token.selector .token.class {\n      color: ").concat(euiCodeBlock.selectorClassColor, ";\n    }\n  \n    .token.selector .token.id {\n      color: ").concat(euiCodeBlock.selectorIdColor, ";\n    }\n  \n    .token.italic {\n      font-style: italic;\n    }\n  \n    .token.important,\n    .token.bold {\n      font-weight: $euiCodeFontWeightBold;\n    }\n  \n    .token.url-reference,\n    .token.url .token.url {\n      text-decoration: underline;\n    }\n  \n    .token.entity {\n      cursor: help;\n    }\n  ");
+};
+
+exports.euiCodeSyntaxTokens = euiCodeSyntaxTokens;

package/optimize/lib/components/code/utils.js

@@ -15,7 +15,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _refractor = require("refractor");
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _css = require("@emotion/css");
+
+var _code_block_line = require("./code_block_line.styles");
 
 var _react2 = require("@emotion/react");
 
@@ -64,7 +66,7 @@ var nodeToHtml = function nodeToHtml(node, idx, nodes) {
         children = node.children;
     return /*#__PURE__*/(0, _react.createElement)(tagName, _objectSpread(_objectSpread({}, properties), {}, {
       key: key,
-      className: (0, _classnames.default)(properties.className)
+      className: (0, _css.cx)(properties.className)
     }), children && children.map(function (el, i) {
       return nodeToHtml(el, i, nodes, depth + 1);
     }));
@@ -81,8 +83,7 @@ var nodeToHtml = function nodeToHtml(node, idx, nodes) {
 
 exports.nodeToHtml = nodeToHtml;
 // Approximate width of a single digit/character
-var CHAR_SIZE = 8;
-var $euiSizeS = 8; // Creates an array of numbers from comma-separeated
+var CHAR_SIZE = 8; // Creates an array of numbers from comma-separeated
 // string of numbers or number ranges using `-`
 // (e.g., "1, 3-10, 15")
 
@@ -157,8 +158,7 @@ var addLineData = function addLineData(nodes, data) {
   }, []);
 };
 
-function wrapLines(nodes, options) {
-  var highlights = options.highlight ? parseLineRanges(options.highlight) : [];
+function wrapLines(nodes, options, euiTheme) {
   var grouped = [];
   nodes.forEach(function (node) {
     var lineStart = node.lineStart - 1;
@@ -170,41 +170,44 @@ function wrapLines(nodes, options) {
     }
   });
   var wrapped = [];
-  var digits = grouped.length.toString().length;
-  var width = digits * CHAR_SIZE;
   grouped.forEach(function (node, i) {
-    var _properties;
-
-    var lineNumber = i + 1;
-    var classes = (0, _classnames.default)('euiCodeBlock__line', {
-      'euiCodeBlock__line--isHighlighted': highlights.includes(lineNumber)
-    });
-    var children = options.showLineNumbers ? [{
-      type: 'element',
-      tagName: 'span',
-      properties: (_properties = {
-        style: {
-          width: width
-        }
-      }, (0, _defineProperty2.default)(_properties, 'data-line-number', lineNumber), (0, _defineProperty2.default)(_properties, 'aria-hidden', true), (0, _defineProperty2.default)(_properties, "className", ['euiCodeBlock__lineNumber']), _properties),
-      children: []
-    }, {
-      type: 'element',
-      tagName: 'span',
-      properties: {
-        style: {
-          marginLeft: width + $euiSizeS,
-          width: "calc(100% - ".concat(width, "px)")
+    var children = node;
+    var styles = (0, _code_block_line.euiCodeBlockLineStyles)(euiTheme);
+    var lineStyles = (0, _css.cx)([styles.euiCodeBlock__line, options.showLineNumbers && styles.hasLineNumbers]);
+
+    if (options.showLineNumbers) {
+      var _properties;
+
+      var lineNumber = i + 1;
+      var digits = grouped.length.toString().length;
+      var width = digits * CHAR_SIZE;
+      var highlights = options.highlight ? parseLineRanges(options.highlight) : [];
+      var lineTextStyles = (0, _css.cx)([styles.lineText.euiCodeBlock__lineText, highlights.includes(lineNumber) && styles.lineText.isHighlighted]);
+      var lineNumberStyles = (0, _css.cx)(styles.lineNumber.euiCodeBlock__lineNumber);
+      children = [{
+        type: 'element',
+        tagName: 'span',
+        properties: (_properties = {
+          style: {
+            inlineSize: width
+          }
+        }, (0, _defineProperty2.default)(_properties, 'data-line-number', lineNumber), (0, _defineProperty2.default)(_properties, 'aria-hidden', true), (0, _defineProperty2.default)(_properties, "className", ['euiCodeBlock__lineNumber', lineNumberStyles]), _properties),
+        children: []
+      }, {
+        type: 'element',
+        tagName: 'span',
+        properties: {
+          className: ['euiCodeBlock__lineText', lineTextStyles]
         },
-        className: ['euiCodeBlock__lineText']
-      },
-      children: node
-    }] : node;
+        children: node
+      }];
+    }
+
     wrapped.push({
       type: 'element',
       tagName: 'span',
       properties: {
-        className: [classes]
+        className: ['euiCodeBlock__line', lineStyles]
       },
       children: children
     });
@@ -212,13 +215,13 @@ function wrapLines(nodes, options) {
   return wrapped;
 }
 
-var highlightByLine = function highlightByLine(children, language, data) {
+var highlightByLine = function highlightByLine(children, language, data, euiTheme) {
   return wrapLines(addLineData((0, _refractor.highlight)(children, language), {
     lineNumber: data.start
   }), {
     showLineNumbers: data.show,
     highlight: data.highlight
-  });
+  }, euiTheme);
 };
 
 exports.highlightByLine = highlightByLine;

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;