@elastic/eui 85.0.0 → 85.1.0

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

@@ -71,6 +71,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",
@@ -82,24 +87,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;
@@ -125,12 +133,16 @@ EuiComboBoxPill.propTypes = {
       key: PropTypes.string,
       options: PropTypes.arrayOf(PropTypes.any.isRequired),
       value: PropTypes.any,
+      prepend: PropTypes.node,
+      append: PropTypes.node,
       className: PropTypes.string,
       "aria-label": PropTypes.string,
       "data-test-subj": PropTypes.string,
       css: PropTypes.any
     }).isRequired),
     value: PropTypes.any,
+    prepend: PropTypes.node,
+    append: PropTypes.node,
     className: PropTypes.string,
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,

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

@@ -115,12 +115,16 @@ EuiComboBoxOption.propTypes = {
       key: PropTypes.string,
       options: PropTypes.arrayOf(PropTypes.any.isRequired),
       value: PropTypes.any,
+      prepend: PropTypes.node,
+      append: PropTypes.node,
       className: PropTypes.string,
       "aria-label": PropTypes.string,
       "data-test-subj": PropTypes.string,
       css: PropTypes.any
     }).isRequired),
     value: PropTypes.any,
+    prepend: PropTypes.node,
+    append: PropTypes.node,
     className: PropTypes.string,
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,

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

@@ -1,4 +1,4 @@
-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 _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function 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; }
@@ -100,6 +100,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,
@@ -138,13 +140,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;
   }
@@ -398,12 +404,16 @@ EuiComboBoxOptionsList.propTypes = {
       key: PropTypes.string,
       options: PropTypes.arrayOf(PropTypes.any.isRequired),
       value: PropTypes.any,
+      prepend: PropTypes.node,
+      append: PropTypes.node,
       className: PropTypes.string,
       "aria-label": PropTypes.string,
       "data-test-subj": PropTypes.string,
       css: PropTypes.any
     }).isRequired),
     value: PropTypes.any,
+    prepend: PropTypes.node,
+    append: PropTypes.node,
     className: PropTypes.string,
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,
@@ -428,12 +438,16 @@ EuiComboBoxOptionsList.propTypes = {
       key: PropTypes.string,
       options: PropTypes.arrayOf(PropTypes.any.isRequired),
       value: PropTypes.any,
+      prepend: PropTypes.node,
+      append: PropTypes.node,
       className: PropTypes.string,
       "aria-label": PropTypes.string,
       "data-test-subj": PropTypes.string,
       css: PropTypes.any
     }).isRequired),
     value: PropTypes.any,
+    prepend: PropTypes.node,
+    append: PropTypes.node,
     className: PropTypes.string,
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,
@@ -455,12 +469,16 @@ EuiComboBoxOptionsList.propTypes = {
       key: PropTypes.string,
       options: PropTypes.arrayOf(PropTypes.any.isRequired),
       value: PropTypes.any,
+      prepend: PropTypes.node,
+      append: PropTypes.node,
       className: PropTypes.string,
       "aria-label": PropTypes.string,
       "data-test-subj": PropTypes.string,
       css: PropTypes.any
     }).isRequired),
     value: PropTypes.any,
+    prepend: PropTypes.node,
+    append: PropTypes.node,
     className: PropTypes.string,
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,

package/es/components/error_boundary/error_boundary.js

@@ -57,7 +57,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/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/es/components/filter_group/filter_select_item.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "className", "disabled", "checked", "isFocused", "showIcons"];
+var _excluded = ["theme", "children", "className", "disabled", "checked", "isFocused", "showIcons"];
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -27,8 +27,10 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 import React, { Component } from 'react';
 import PropTypes from "prop-types";
 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) {
@@ -44,12 +46,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];
     }
@@ -68,11 +77,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,
@@ -80,9 +90,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),
@@ -103,6 +113,7 @@ export var EuiFilterSelectItem = /*#__PURE__*/function (_Component) {
         type: "button",
         "aria-selected": isFocused,
         className: classes,
+        css: cssStyles,
         disabled: disabled,
         "aria-disabled": disabled
       }, rest), ___EmotionJSX(EuiFlexGroup, {
@@ -111,17 +122,21 @@ 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
 });
-EuiFilterSelectItem.propTypes = {
+EuiFilterSelectItemClass.propTypes = {
   checked: PropTypes.oneOf(["on", "off"]),
   showIcons: PropTypes.bool,
   isFocused: PropTypes.bool,
@@ -129,4 +144,5 @@ EuiFilterSelectItem.propTypes = {
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
   css: PropTypes.any
-};
+};
+export var EuiFilterSelectItem = withEuiTheme(EuiFilterSelectItemClass);

package/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/es/components/form/range/range_highlight.js

@@ -66,6 +66,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/es/components/highlight/highlight.js

@@ -27,7 +27,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,
@@ -43,9 +43,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);

package/es/components/index.js

@@ -20,6 +20,7 @@ export * from './call_out';
 export * from './card';
 export * from './code';
 export * from './collapsible_nav';
+export * from './collapsible_nav_beta';
 export * from './color_picker';
 export * from './combo_box';
 export * from './comment_list';

package/es/components/inline_edit/inline_edit_form.js

@@ -266,7 +266,8 @@ export var EuiInlineEditForm = function EuiInlineEditForm(_ref) {
     size: sizes.buttonSize,
     "data-test-subj": "euiInlineReadModeButton",
     disabled: isReadOnly,
-    css: readModeCssStyles
+    css: readModeCssStyles,
+    title: readModeValue || placeholder
   }, readModeProps, {
     buttonRef: setReadModeRefs,
     "aria-describedby": classNames(readModeDescribedById, readModeProps === null || readModeProps === void 0 ? void 0 : readModeProps['aria-describedby']),

package/es/components/markdown_editor/markdown_editor.js

@@ -158,8 +158,8 @@ export var EuiMarkdownEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var isPreviewing = viewMode === MODE_VIEWING;
   var isEditing = viewMode === MODE_EDITING;
   var replaceNode = useCallback(function (position, next) {
-    var leading = value.substr(0, position.start.offset);
-    var trailing = value.substr(position.end.offset);
+    var leading = value.substring(0, position.start.offset);
+    var trailing = value.substring(position.end.offset);
     _onChange("".concat(leading).concat(next).concat(trailing));
   }, [value, _onChange]);
   var contextValue = useMemo(function () {

package/es/themes/amsterdam/global_styling/variables/_states.js

@@ -6,24 +6,21 @@
  * Side Public License, v 1.
  */
 
-/**
- * NOTE: These were quick conversions of their Sass counterparts.
- *       The commented out keys have not been established as necessary yet.
- */
-
 import { computed } from '../../../../services/theme/utils';
+import { transparentize } from '../../../../services/color/manipulation';
 import { sizeToPixel } from '../../../../global_styling/functions/size';
 export var focus = {
+  // Focus ring
   color: 'currentColor',
-  width: computed(sizeToPixel(0.125))
-
-  // transparency: { LIGHT: 0.9, DARK: 0.7 },
-  // backgroundColor: computed(({ colors, focus }) =>
-  //   transparentize(colors.primary, focus!.transparency)
-  // ),
-
-  // Outline
-  // outline: {
-  //   outline: computed(({ focus }) => `${focus!.width} solid ${focus!.color}`),
-  // },
+  width: computed(sizeToPixel(0.125)),
+  // Focus background
+  transparency: {
+    LIGHT: 0.1,
+    DARK: 0.2
+  },
+  backgroundColor: computed(function (_ref) {
+    var colors = _ref.colors,
+      focus = _ref.focus;
+    return transparentize(colors.primary, focus.transparency);
+  })
 };