@elastic/eui 85.0.0 → 85.1.0

package/optimize/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.styles.js

@@ -0,0 +1,33 @@
+/*
+ * 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.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS, mathWithUnits, euiCanAnimate } from '../../../global_styling';
+import { euiCollapsibleNavItemVariables } from './collapsible_nav_item.styles';
+export var euiCollapsibleNavAccordionStyles = function euiCollapsibleNavAccordionStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var sharedStyles = euiCollapsibleNavItemVariables(euiThemeContext);
+  return {
+    // NOTE: Specific usage of `>`s selectors are important here, because accordions can be nested
+    // - just because a parent accordion is open or selected does not mean its child accordion is the same
+    euiCollapsibleNavAccordion: /*#__PURE__*/css(".euiAccordion__button{overflow:hidden;&:hover,&:focus{cursor:default;text-decoration:none;}}.euiAccordion__triggerWrapper{border-radius:", sharedStyles.borderRadius, ";", euiCanAnimate, "{transition:background-color ", sharedStyles.animation, ";}}.euiAccordion__buttonContent{", logicalCSS('max-width', '100%'), " flex-basis:100%;display:flex;align-items:center;}.euiCollapsibleNavLink{", logicalCSS('width', '100%'), ";};label:euiCollapsibleNavAccordion;"),
+    isTopItem: /*#__PURE__*/css("margin:", sharedStyles.padding, ";&>.euiAccordion__triggerWrapper{&:hover{background-color:", sharedStyles.backgroundHoverColor, ";}};label:isTopItem;"),
+    isSelected: /*#__PURE__*/css("&>.euiAccordion__triggerWrapper{background-color:", sharedStyles.backgroundSelectedColor, ";&:hover{background-color:", sharedStyles.backgroundSelectedColor, ";}};label:isSelected;"),
+    isSubItem: /*#__PURE__*/css("&.euiAccordion-isOpen{", logicalCSS('margin-bottom', euiTheme.size.m), ";};label:isSubItem;"),
+    // Arrow element
+    euiCollapsibleNavAccordion__arrow: /*#__PURE__*/css(logicalCSS('margin-right', euiTheme.size.xs), euiCanAnimate, "{transition:background-color ", sharedStyles.animation, ";}&:hover,&:focus-visible{background-color:", euiTheme.colors.lightShade, ";&>.euiIcon{color:", sharedStyles.color, ";}}transform:none!important;&>.euiIcon{color:", sharedStyles.rightIconColor, ";transform:rotate(-90deg);", euiCanAnimate, "{transition:transform ", sharedStyles.animation, ",color ", sharedStyles.animation, ";}}&.euiAccordion__iconButton-isOpen>.euiIcon{color:", sharedStyles.color, ";transform:rotate(90deg);};label:euiCollapsibleNavAccordion__arrow;"),
+    // Children wrapper
+    children: {
+      euiCollapsibleNavAccordion__children: /*#__PURE__*/css(";label:euiCollapsibleNavAccordion__children;"),
+      isTopItem: /*#__PURE__*/css(logicalCSS('padding-top', euiTheme.size.xs), " ", logicalCSS('padding-left', euiTheme.size.xl), ";;label:isTopItem;"),
+      isSubItem: /*#__PURE__*/css(logicalCSS('border-left', euiTheme.border.thin), " ", logicalCSS('margin-left', euiTheme.size.s), " ", logicalCSS('padding-left', mathWithUnits([euiTheme.size.s, euiTheme.border.width.thin], function (x, y) {
+        return x - y;
+      })), ";;label:isSubItem;")
+    }
+  };
+};

package/optimize/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js

@@ -0,0 +1,117 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["isSubItem", "title", "titleElement", "icon", "iconProps", "className", "items", "children"],
+  _excluded2 = ["isGroupTitle", "className"];
+/*
+ * 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.
+ */
+
+import React from 'react';
+import classNames from 'classnames';
+import { useEuiTheme } from '../../../services';
+import { EuiIcon } from '../../icon';
+import { EuiTitle } from '../../title';
+import { EuiCollapsibleNavAccordion } from './collapsible_nav_accordion';
+import { EuiCollapsibleNavLink } from './collapsible_nav_link';
+import { euiCollapsibleNavItemTitleStyles, euiCollapsibleNavSubItemGroupTitleStyles } from './collapsible_nav_item.styles';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+/**
+ * Internal DRY subcomponent shared between top level items and sub items
+ * that handles title display/rendering, and can be used to recursively
+ * determine whether to render an accordion or a link
+ */
+var EuiCollapsibleNavItemDisplay = function EuiCollapsibleNavItemDisplay(_ref) {
+  var _props$linkProps;
+  var isSubItem = _ref.isSubItem,
+    title = _ref.title,
+    titleElement = _ref.titleElement,
+    icon = _ref.icon,
+    iconProps = _ref.iconProps,
+    className = _ref.className,
+    items = _ref.items,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var classes = classNames('euiCollapsibleNavItem', {
+    euiCollapsibleNavSubItem: isSubItem
+  }, className);
+  var headerContent = ___EmotionJSX(EuiCollapsibleNavItemTitle, {
+    title: title,
+    titleElement: titleElement,
+    icon: icon,
+    iconProps: iconProps
+  });
+  var isAccordion = items && items.length > 0;
+  if (isAccordion) {
+    return ___EmotionJSX(EuiCollapsibleNavAccordion, _extends({
+      className: classes,
+      buttonContent: headerContent,
+      items: items
+    }, props, {
+      isSubItem: isSubItem
+    }));
+  }
+  return ___EmotionJSX(EuiCollapsibleNavLink, _extends({
+    className: classes
+  }, props, {
+    // EuiLink ExclusiveUnion type shenanigans
+    isSubItem: isSubItem,
+    isNotAccordion: true,
+    isInteractive: !!(props.href || props.onClick || (_props$linkProps = props.linkProps) !== null && _props$linkProps !== void 0 && _props$linkProps.onClick)
+  }), headerContent);
+};
+
+/**
+ * Internal subcomponent for title display
+ */
+var EuiCollapsibleNavItemTitle = function EuiCollapsibleNavItemTitle(_ref2) {
+  var title = _ref2.title,
+    _ref2$titleElement = _ref2.titleElement,
+    titleElement = _ref2$titleElement === void 0 ? 'span' : _ref2$titleElement,
+    icon = _ref2.icon,
+    iconProps = _ref2.iconProps;
+  var styles = euiCollapsibleNavItemTitleStyles;
+  var TitleElement = titleElement;
+  return ___EmotionJSX(React.Fragment, null, icon && ___EmotionJSX(EuiIcon, _extends({
+    type: icon
+  }, iconProps)), ___EmotionJSX(TitleElement, {
+    className: "euiCollapsibleNavItem__title eui-textTruncate",
+    css: styles.euiCollapsibleNavItem__title
+  }, title));
+};
+
+/**
+ * Sub-items can either be a group title, to visually separate sections
+ * of nav links, or they can simply be more links or accordions
+ */
+export var EuiCollapsibleNavSubItem = function EuiCollapsibleNavSubItem(_ref3) {
+  var isGroupTitle = _ref3.isGroupTitle,
+    className = _ref3.className,
+    props = _objectWithoutProperties(_ref3, _excluded2);
+  var euiTheme = useEuiTheme();
+  var styles = euiCollapsibleNavSubItemGroupTitleStyles(euiTheme);
+  if (isGroupTitle) {
+    var TitleElement = props.titleElement || 'div';
+    return ___EmotionJSX(EuiTitle, {
+      size: "xxxs",
+      css: styles.euiCollapsibleNavItem__groupTitle,
+      className: "euiCollapsibleNavItem__groupTitle eui-textTruncate"
+    }, ___EmotionJSX(TitleElement, null, props.title));
+  }
+  return ___EmotionJSX(EuiCollapsibleNavItemDisplay, _extends({}, props, {
+    isSubItem: true
+  }));
+};
+
+/**
+ * The actual exported component
+ */
+
+export var EuiCollapsibleNavItem = function EuiCollapsibleNavItem(props) {
+  return ___EmotionJSX(EuiCollapsibleNavItemDisplay, _extends({}, props, {
+    isSubItem: false
+  }));
+};

package/optimize/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles.js

@@ -0,0 +1,55 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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 _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+/*
+ * 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.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS, logicalShorthandCSS, euiFontSize } from '../../../global_styling';
+import { euiButtonColor } from '../../../themes/amsterdam/global_styling/mixins/button';
+
+/**
+ * Style variables shared between accordion, link, and sub items
+ */
+export var euiCollapsibleNavItemVariables = function euiCollapsibleNavItemVariables(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return _objectSpread(_objectSpread({
+    height: euiTheme.size.xl,
+    padding: euiTheme.size.s
+  }, euiFontSize(euiThemeContext, 's')), {}, {
+    animation: "".concat(euiTheme.animation.normal, " ease-in-out"),
+    // Matches EuiButton
+    borderRadius: euiTheme.border.radius.small,
+    backgroundHoverColor: euiTheme.colors.lightestShade,
+    backgroundSelectedColor: euiButtonColor(euiThemeContext, 'text').backgroundColor,
+    color: euiTheme.colors.text,
+    rightIconColor: euiTheme.colors.disabledText
+  });
+};
+
+/**
+ * Title styles
+ */
+
+export var euiCollapsibleNavItemTitleStyles = {
+  euiCollapsibleNavItem__title: process.env.NODE_ENV === "production" ? {
+    name: "i246l1-euiCollapsibleNavItem__title",
+    styles: "flex-grow:1;label:euiCollapsibleNavItem__title;"
+  } : {
+    name: "i246l1-euiCollapsibleNavItem__title",
+    styles: "flex-grow:1;label:euiCollapsibleNavItem__title;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  }
+};
+export var euiCollapsibleNavSubItemGroupTitleStyles = function euiCollapsibleNavSubItemGroupTitleStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    euiCollapsibleNavItem__groupTitle: /*#__PURE__*/css(logicalCSS('margin-top', euiTheme.size.base), " ", logicalShorthandCSS('padding', "".concat(euiTheme.size.xs, " ").concat(euiTheme.size.s)), ";;label:euiCollapsibleNavItem__groupTitle;")
+  };
+};

package/optimize/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_link.js

@@ -0,0 +1,59 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["href", "rel", "children", "className", "isSelected", "isInteractive", "isNotAccordion", "isSubItem", "linkProps"];
+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) { _defineProperty(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; }
+/*
+ * 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.
+ */
+
+import React from 'react';
+import classNames from 'classnames';
+import { useEuiTheme } from '../../../services';
+import { EuiLink } from '../../link';
+import { euiCollapsibleNavLinkStyles } from './collapsible_nav_link.styles';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+/**
+ * Internal nav link component.
+ *
+ * Can be rendered as a standalone nav item, or as part of an accordion header.
+ * Can also be rendered as top-level item (has a background hover) or as a
+ * sub-item (renders closer to plain text).
+ *
+ * In terms of DOM output, follows the same logic as EuiLink (renders either
+ * an `a` tag or a `button` if no valid link exists), and can also additionally
+ * rendered a plain `span` if the item is not interactive.
+ */
+export var EuiCollapsibleNavLink = function EuiCollapsibleNavLink(_ref) {
+  var href = _ref.href,
+    rel = _ref.rel,
+    children = _ref.children,
+    className = _ref.className,
+    isSelected = _ref.isSelected,
+    _ref$isInteractive = _ref.isInteractive,
+    isInteractive = _ref$isInteractive === void 0 ? true : _ref$isInteractive,
+    isNotAccordion = _ref.isNotAccordion,
+    isSubItem = _ref.isSubItem,
+    linkProps = _ref.linkProps,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var classes = classNames('euiCollapsibleNavLink', className);
+  var euiTheme = useEuiTheme();
+  var styles = euiCollapsibleNavLinkStyles(euiTheme);
+  var cssStyles = [styles.euiCollapsibleNavLink, isSelected && styles.isSelected, isSubItem ? styles.isSubItem : styles.isTopItem.isTopItem, isNotAccordion && !isSubItem && styles.isTopItem.isNotAccordion, isInteractive && !isSelected && !isSubItem && styles.isTopItem.isInteractive, linkProps === null || linkProps === void 0 ? void 0 : linkProps.css];
+  return isInteractive ? ___EmotionJSX(EuiLink, _extends({
+    href: href,
+    rel: rel,
+    className: classes
+  }, _objectSpread(_objectSpread({}, rest), linkProps), {
+    // EuiLink ExclusiveUnion shenanigans
+    css: cssStyles
+  }), children) : ___EmotionJSX("span", _extends({
+    className: classes,
+    css: cssStyles
+  }, rest), children);
+};

package/optimize/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_link.styles.js

@@ -0,0 +1,28 @@
+/*
+ * 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.
+ */
+
+import { css } from '@emotion/react';
+import { euiCanAnimate, logicalCSS, mathWithUnits } from '../../../global_styling';
+import { euiCollapsibleNavItemVariables } from './collapsible_nav_item.styles';
+export var euiCollapsibleNavLinkStyles = function euiCollapsibleNavLinkStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var sharedStyles = euiCollapsibleNavItemVariables(euiThemeContext);
+  return {
+    // Shared between all links
+    euiCollapsibleNavLink: /*#__PURE__*/css("display:flex;align-items:center;", logicalCSS('height', sharedStyles.height), " padding:", sharedStyles.padding, ";font-size:", sharedStyles.fontSize, ";line-height:", sharedStyles.lineHeight, ";color:", sharedStyles.color, ";border-radius:", sharedStyles.borderRadius, ";&:focus{outline-offset:-", euiTheme.focus.width, ";text-decoration-thickness:unset;}[class*='euiLink__externalIcon']{", logicalCSS('margin-right', euiTheme.size.xxs), " color:", sharedStyles.rightIconColor, ";};label:euiCollapsibleNavLink;"),
+    isSelected: /*#__PURE__*/css("background-color:", sharedStyles.backgroundSelectedColor, ";;label:isSelected;"),
+    isTopItem: {
+      isTopItem: /*#__PURE__*/css("font-weight:", euiTheme.font.weight.semiBold, ";gap:", euiTheme.size.base, ";&:is(button){inline-size:calc(\n            100% - ", mathWithUnits(sharedStyles.padding, function (x) {
+        return x * 2;
+      }), "\n          );};label:isTopItem;"),
+      isNotAccordion: /*#__PURE__*/css("margin:", sharedStyles.padding, ";;label:isNotAccordion;"),
+      isInteractive: /*#__PURE__*/css(euiCanAnimate, "{transition:background-color ", sharedStyles.animation, ";}&:hover,&:focus-visible{background-color:", sharedStyles.backgroundHoverColor, ";};label:isInteractive;")
+    },
+    isSubItem: /*#__PURE__*/css("font-weight:", euiTheme.font.weight.regular, ";gap:", euiTheme.size.s, ";;label:isSubItem;")
+  };
+};

package/optimize/es/components/collapsible_nav_beta/collapsible_nav_item/index.js

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export { EuiCollapsibleNavItem } from './collapsible_nav_item';

package/optimize/es/components/collapsible_nav_beta/index.js

@@ -0,0 +1,15 @@
+/*
+ * 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.
+ */
+
+/**
+ * NOTE: This is currently still a beta component, being exported for Kibana
+ * development usage. It is not yet fully documented or supported.
+ */
+
+export { EuiCollapsibleNavBeta } from './collapsible_nav_beta';
+export { EuiCollapsibleNavItem } from './collapsible_nav_item';

package/optimize/es/components/color_picker/saturation.js

@@ -20,10 +20,11 @@ import { isNil } from '../../services/predicate';
 import { useEuiI18n } from '../i18n';
 import { getEventPosition } from './utils';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var colorDefaultValue = [1, 0, 0];
 export var EuiSaturation = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? [1, 0, 0] : _ref$color,
+    color = _ref$color === void 0 ? colorDefaultValue : _ref$color,
     _ref$dataTestSubj = _ref['data-test-subj'],
     dataTestSubj = _ref$dataTestSubj === void 0 ? 'euiSaturation' : _ref$dataTestSubj,
     hex = _ref.hex,

package/optimize/es/components/combo_box/combo_box_input/combo_box_input.js

@@ -8,7 +8,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["key", "label", "color", "onClick"];
+var _excluded = ["key", "label", "color", "onClick", "append", "prepend"];
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 /*
@@ -146,6 +146,8 @@ export var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
           label = option.label,
           color = option.color,
           onClick = option.onClick,
+          append = option.append,
+          prepend = option.prepend,
           rest = _objectWithoutProperties(option, _excluded);
         var pillOnClose = isDisabled || singleSelection || onClick ? undefined : onRemoveOption;
         return ___EmotionJSX(EuiComboBoxPill, _extends({

package/optimize/es/components/combo_box/combo_box_input/combo_box_pill.js

@@ -64,6 +64,11 @@ export var EuiComboBoxPill = /*#__PURE__*/function (_Component) {
         onClick: onClick,
         onClickAriaLabel: onClickAriaLabel
       } : {};
+      var content = ___EmotionJSX(React.Fragment, null, option.prepend && ___EmotionJSX("span", {
+        className: "euiComboBoxPill__prepend"
+      }, option.prepend), children, option.append && ___EmotionJSX("span", {
+        className: "euiComboBoxPill__append"
+      }, option.append));
       if (onClose) {
         return ___EmotionJSX(EuiI18n, {
           token: "euiComboBoxPill.removeSelection",
@@ -75,24 +80,27 @@ export var EuiComboBoxPill = /*#__PURE__*/function (_Component) {
           return ___EmotionJSX(EuiBadge, _extends({
             className: classes,
             color: color,
+            "data-test-subj": "euiComboBoxPill",
             iconOnClick: _this2.onCloseButtonClick,
             iconOnClickAriaLabel: removeSelection,
             iconSide: "right",
             iconType: "cross",
             title: children
-          }, onClickProps, rest), children);
+          }, onClickProps, rest), content);
         });
       }
       if (asPlainText) {
         return ___EmotionJSX("span", _extends({
-          className: classes
-        }, rest), children);
+          className: classes,
+          "data-test-subj": "euiComboBoxPill"
+        }, rest), content);
       }
       return ___EmotionJSX(EuiBadge, _extends({
         className: classes,
         color: color,
+        "data-test-subj": "euiComboBoxPill",
         title: children
-      }, rest, onClickProps), children);
+      }, rest, onClickProps), content);
     }
   }]);
   return EuiComboBoxPill;

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

@@ -7,7 +7,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["key", "isGroupLabelOption", "label", "value"],
+var _excluded = ["key", "isGroupLabelOption", "label", "value", "prepend", "append"],
   _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 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) { _defineProperty(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; }
@@ -93,6 +93,8 @@ export var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
         isGroupLabelOption = option.isGroupLabelOption,
         label = option.label,
         value = option.value,
+        prepend = option.prepend,
+        append = option.append,
         rest = _objectWithoutProperties(option, _excluded);
       var _this$props = _this.props,
         singleSelection = _this$props.singleSelection,
@@ -131,13 +133,17 @@ export var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
         title: label
       }, rest), ___EmotionJSX("span", {
         className: "euiComboBoxOption__contentWrapper"
-      }, renderOption ? ___EmotionJSX("span", {
+      }, prepend && ___EmotionJSX("span", {
+        className: "euiComboBoxOption__prepend"
+      }, prepend), renderOption ? ___EmotionJSX("span", {
         className: OPTION_CONTENT_CLASSNAME
       }, renderOption(option, searchValue, 'euiComboBoxOption__renderOption')) : ___EmotionJSX(EuiHighlight, {
         search: searchValue,
         strict: _this.props.isCaseSensitive,
         className: OPTION_CONTENT_CLASSNAME
-      }, label), optionIsFocused && !optionIsDisabled ? hitEnterBadge : null));
+      }, label), append && ___EmotionJSX("span", {
+        className: "euiComboBoxOption__append"
+      }, append), optionIsFocused && !optionIsDisabled ? hitEnterBadge : null));
     });
     return _this;
   }

package/optimize/es/components/error_boundary/error_boundary.js

@@ -49,7 +49,7 @@ export var EuiErrorBoundary = /*#__PURE__*/function (_Component) {
       var message = error.message,
         stack = error.stack;
       var idx = (stack === null || stack === void 0 ? void 0 : stack.indexOf(message)) || -1;
-      var stackStr = idx > -1 ? stack === null || stack === void 0 ? void 0 : stack.substr(idx + message.length + 1) : stack;
+      var stackStr = idx > -1 ? stack === null || stack === void 0 ? void 0 : stack.substring(idx + message.length + 1) : stack;
       var errorMessage = "Error: ".concat(message, "\n").concat(stackStr);
       this.setState({
         hasError: true,

package/optimize/es/components/filter_group/filter_group.styles.js

@@ -8,7 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { logicalCSS, mathWithUnits, euiMaxBreakpoint } from '../../global_styling';
+import { logicalCSS, mathWithUnits, euiBreakpoint } from '../../global_styling';
 import { euiFormVariables } from '../form/form.styles';
 import { euiFilterButtonDisplay } from './filter_button.styles';
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -28,7 +28,7 @@ export var euiFilterGroupStyles = function euiFilterGroupStyles(euiThemeContext)
     controlCompressedBorderRadius = _euiFormVariables.controlCompressedBorderRadius,
     controlCompressedHeight = _euiFormVariables.controlCompressedHeight;
   return {
-    euiFilterGroup: /*#__PURE__*/css("display:inline-flex;", logicalCSS('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";box-shadow:inset 0 0 0 ", euiTheme.border.width.thin, " ", borderColor, ";>*:not(.euiFilterButton){", euiFilterButtonDisplay(euiThemeContext), ";}.euiPopover__anchor{display:block;.euiFilterButton{", logicalCSS('width', '100%'), ";}}", euiMaxBreakpoint(euiThemeContext, 's'), "{flex-wrap:wrap;}", euiMaxBreakpoint(euiThemeContext, 'xs'), "{display:flex;.euiFilterButton{flex-grow:1;}};label:euiFilterGroup;"),
+    euiFilterGroup: /*#__PURE__*/css("display:inline-flex;", logicalCSS('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";box-shadow:inset 0 0 0 ", euiTheme.border.width.thin, " ", borderColor, ";>*:not(.euiFilterButton){", euiFilterButtonDisplay(euiThemeContext), ";}.euiPopover__anchor{display:block;.euiFilterButton{", logicalCSS('width', '100%'), ";}}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;}", euiBreakpoint(euiThemeContext, ['xs']), "{display:flex;.euiFilterButton{flex-grow:1;}};label:euiFilterGroup;"),
     fullWidth: _ref,
     uncompressed: /*#__PURE__*/css("border-radius:", controlBorderRadius, ";", buttonChildrenBorderRadii(controlBorderRadius), ";;label:uncompressed;"),
     compressed: /*#__PURE__*/css("border-radius:", controlCompressedBorderRadius, ";", buttonChildrenBorderRadii(controlCompressedBorderRadius), " .euiFilterButton{", logicalCSS('height', controlCompressedHeight), ";};label:compressed;"),

package/optimize/es/components/filter_group/filter_select_item.js

@@ -7,7 +7,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children", "className", "disabled", "checked", "isFocused", "showIcons"];
+var _excluded = ["theme", "children", "className", "disabled", "checked", "isFocused", "showIcons"];
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 /*
@@ -20,8 +20,10 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React, { Component } from 'react';
 import classNames from 'classnames';
+import { withEuiTheme } from '../../services';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
 import { EuiIcon } from '../icon';
+import { euiFilterSelectItemStyles } from './filter_select_item.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var resolveIconAndColor = function resolveIconAndColor(checked) {
   if (!checked) {
@@ -37,12 +39,19 @@ var resolveIconAndColor = function resolveIconAndColor(checked) {
     color: 'text'
   };
 };
-export var EuiFilterSelectItem = /*#__PURE__*/function (_Component) {
-  _inherits(EuiFilterSelectItem, _Component);
-  var _super = _createSuper(EuiFilterSelectItem);
-  function EuiFilterSelectItem() {
+
+/**
+ * TODO: This component should removed in favor of EuiSelectable usage
+ * once EuiComboBox has been converted to dogfood EuiSelectable.
+ *
+ * @deprecated - Use EuiSelectable instead
+ */
+export var EuiFilterSelectItemClass = /*#__PURE__*/function (_Component) {
+  _inherits(EuiFilterSelectItemClass, _Component);
+  var _super = _createSuper(EuiFilterSelectItemClass);
+  function EuiFilterSelectItemClass() {
     var _this;
-    _classCallCheck(this, EuiFilterSelectItem);
+    _classCallCheck(this, EuiFilterSelectItemClass);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
@@ -61,11 +70,12 @@ export var EuiFilterSelectItem = /*#__PURE__*/function (_Component) {
     });
     return _this;
   }
-  _createClass(EuiFilterSelectItem, [{
+  _createClass(EuiFilterSelectItemClass, [{
     key: "render",
     value: function render() {
       var _this2 = this;
       var _this$props = this.props,
+        theme = _this$props.theme,
         children = _this$props.children,
         className = _this$props.className,
         disabled = _this$props.disabled,
@@ -73,9 +83,9 @@ export var EuiFilterSelectItem = /*#__PURE__*/function (_Component) {
         isFocused = _this$props.isFocused,
         showIcons = _this$props.showIcons,
         rest = _objectWithoutProperties(_this$props, _excluded);
-      var classes = classNames('euiFilterSelectItem', {
-        'euiFilterSelectItem-isFocused': isFocused
-      }, className);
+      var styles = euiFilterSelectItemStyles(theme);
+      var cssStyles = [styles.euiFilterSelectItem, isFocused && styles.isFocused];
+      var classes = classNames('euiFilterSelectItem', className);
       var iconNode;
       if (showIcons) {
         var _resolveIconAndColor = resolveIconAndColor(checked),
@@ -96,6 +106,7 @@ export var EuiFilterSelectItem = /*#__PURE__*/function (_Component) {
         type: "button",
         "aria-selected": isFocused,
         className: classes,
+        css: cssStyles,
         disabled: disabled,
         "aria-disabled": disabled
       }, rest), ___EmotionJSX(EuiFlexGroup, {
@@ -104,13 +115,18 @@ export var EuiFilterSelectItem = /*#__PURE__*/function (_Component) {
         component: "span",
         responsive: false
       }, iconNode, ___EmotionJSX(EuiFlexItem, {
-        className: "euiFilterSelectItem__content",
+        className: "euiFilterSelectItem__content eui-textTruncate",
         component: "span"
       }, children)));
     }
   }]);
-  return EuiFilterSelectItem;
+  return EuiFilterSelectItemClass;
 }(Component);
-_defineProperty(EuiFilterSelectItem, "defaultProps", {
+
+/**
+ * @deprecated - Use EuiSelectable instead
+ */
+_defineProperty(EuiFilterSelectItemClass, "defaultProps", {
   showIcons: true
-});
+});
+export var EuiFilterSelectItem = withEuiTheme(EuiFilterSelectItemClass);

package/optimize/es/components/filter_group/filter_select_item.styles.js

@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+
+import { css } from '@emotion/react';
+import { transparentize } from '../../services';
+import { logicalCSS, logicalShorthandCSS, logicalTextAlignCSS, euiFontSize } from '../../global_styling';
+export var euiFilterSelectItemStyles = function euiFilterSelectItemStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var focusStyles = "\n    color: ".concat(euiTheme.colors.primary, ";\n    background-color: ").concat(euiTheme.focus.backgroundColor, ";\n    outline-offset: -").concat(euiTheme.focus.width, ";\n    text-decoration: underline;\n\n    &:disabled {\n      background-color: ").concat(transparentize(euiTheme.colors.disabled, 0.1), ";\n    }\n  ");
+  return {
+    euiFilterSelectItem: /*#__PURE__*/css("display:block;", logicalCSS('width', '100%'), " ", logicalShorthandCSS('padding', "".concat(euiTheme.size.xs, " ").concat(euiTheme.size.m)), " ", euiFontSize(euiThemeContext, 's'), " ", logicalTextAlignCSS('left'), " color:", euiTheme.colors.text, ";", logicalCSS('border-bottom', "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.lightestShade)), " &:hover{cursor:pointer;text-decoration:underline;}&:focus{", focusStyles, ";}&:disabled{cursor:not-allowed;text-decoration:none;color:", euiTheme.colors.disabledText, ";};label:euiFilterSelectItem;"),
+    isFocused: /*#__PURE__*/css(focusStyles, ";;label:isFocused;")
+  };
+};

package/optimize/es/components/form/range/range_highlight.js

@@ -65,6 +65,7 @@ export var EuiRangeHighlight = function EuiRangeHighlight(_ref) {
     css: cssStyles,
     onClick: onClick
   }, (levels && levels.length === 0 || !levels) && ___EmotionJSX("div", {
+    "data-test-subj": "euiRangeHighlightProgress",
     className: "euiRangeHighlight__progress",
     css: cssProgressStyles,
     style: progressStyle

package/optimize/es/components/highlight/highlight.js

@@ -25,7 +25,7 @@ var highlight = function highlight(searchSubject, searchValue, isStrict, highlig
       var end = chunk.end,
         highlight = chunk.highlight,
         start = chunk.start;
-      var value = searchSubject.substr(start, end - start);
+      var value = searchSubject.substring(start, end);
       if (highlight) {
         return ___EmotionJSX(EuiMark, {
           key: start,
@@ -41,9 +41,9 @@ var highlight = function highlight(searchSubject, searchValue, isStrict, highlig
   if (indexOfMatch === -1) {
     return searchSubject;
   }
-  var preMatch = searchSubject.substr(0, indexOfMatch);
-  var match = searchSubject.substr(indexOfMatch, searchValue.length);
-  var postMatch = searchSubject.substr(indexOfMatch + searchValue.length);
+  var preMatch = searchSubject.substring(0, indexOfMatch);
+  var match = searchSubject.substring(indexOfMatch, indexOfMatch + searchValue.length);
+  var postMatch = searchSubject.substring(indexOfMatch + searchValue.length);
   return ___EmotionJSX(Fragment, null, preMatch, ___EmotionJSX(EuiMark, {
     hasScreenReaderHelpText: hasScreenReaderHelpText
   }, match), postMatch);