@elastic/eui 85.0.0 → 85.1.0

package/lib/components/combo_box/combo_box_input/combo_box_input.js

@@ -14,7 +14,7 @@ var _form_control_layout = require("../../form/form_control_layout");
 var _num_icons = require("../../form/form_control_layout/_num_icons");
 var _combo_box_pill = require("./combo_box_pill");
 var _react2 = require("@emotion/react");
-var _excluded = ["key", "label", "color", "onClick"];
+var _excluded = ["key", "label", "color", "onClick", "append", "prepend"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -159,6 +159,8 @@ 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 (0, _react2.jsx)(_combo_box_pill.EuiComboBoxPill, _extends({
@@ -302,12 +304,16 @@ EuiComboBoxInput.propTypes = {
       key: _propTypes.default.string,
       options: _propTypes.default.arrayOf(_propTypes.default.any.isRequired),
       value: _propTypes.default.any,
+      prepend: _propTypes.default.node,
+      append: _propTypes.default.node,
       className: _propTypes.default.string,
       "aria-label": _propTypes.default.string,
       "data-test-subj": _propTypes.default.string,
       css: _propTypes.default.any
     }).isRequired),
     value: _propTypes.default.any,
+    prepend: _propTypes.default.node,
+    append: _propTypes.default.node,
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,

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

@@ -78,6 +78,11 @@ var EuiComboBoxPill = /*#__PURE__*/function (_Component) {
         onClick: onClick,
         onClickAriaLabel: onClickAriaLabel
       } : {};
+      var content = (0, _react2.jsx)(_react.default.Fragment, null, option.prepend && (0, _react2.jsx)("span", {
+        className: "euiComboBoxPill__prepend"
+      }, option.prepend), children, option.append && (0, _react2.jsx)("span", {
+        className: "euiComboBoxPill__append"
+      }, option.append));
       if (onClose) {
         return (0, _react2.jsx)(_i18n.EuiI18n, {
           token: "euiComboBoxPill.removeSelection",
@@ -89,24 +94,27 @@ var EuiComboBoxPill = /*#__PURE__*/function (_Component) {
           return (0, _react2.jsx)(_badge.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 (0, _react2.jsx)("span", _extends({
-          className: classes
-        }, rest), children);
+          className: classes,
+          "data-test-subj": "euiComboBoxPill"
+        }, rest), content);
       }
       return (0, _react2.jsx)(_badge.EuiBadge, _extends({
         className: classes,
         color: color,
+        "data-test-subj": "euiComboBoxPill",
         title: children
-      }, rest, onClickProps), children);
+      }, rest, onClickProps), content);
     }
   }]);
   return EuiComboBoxPill;
@@ -133,12 +141,16 @@ EuiComboBoxPill.propTypes = {
       key: _propTypes.default.string,
       options: _propTypes.default.arrayOf(_propTypes.default.any.isRequired),
       value: _propTypes.default.any,
+      prepend: _propTypes.default.node,
+      append: _propTypes.default.node,
       className: _propTypes.default.string,
       "aria-label": _propTypes.default.string,
       "data-test-subj": _propTypes.default.string,
       css: _propTypes.default.any
     }).isRequired),
     value: _propTypes.default.any,
+    prepend: _propTypes.default.node,
+    append: _propTypes.default.node,
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,

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

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

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

@@ -18,7 +18,7 @@ var _filter_select_item = require("../../filter_group/filter_select_item");
 var _badge = require("../../badge");
 var _popover_panel = require("../../popover/popover_panel");
 var _react2 = require("@emotion/react");
-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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -107,6 +107,8 @@ 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,
@@ -145,13 +147,17 @@ var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
         title: label
       }, rest), (0, _react2.jsx)("span", {
         className: "euiComboBoxOption__contentWrapper"
-      }, renderOption ? (0, _react2.jsx)("span", {
+      }, prepend && (0, _react2.jsx)("span", {
+        className: "euiComboBoxOption__prepend"
+      }, prepend), renderOption ? (0, _react2.jsx)("span", {
         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));
+      }, label), append && (0, _react2.jsx)("span", {
+        className: "euiComboBoxOption__append"
+      }, append), optionIsFocused && !optionIsDisabled ? hitEnterBadge : null));
     });
     return _this;
   }
@@ -406,12 +412,16 @@ EuiComboBoxOptionsList.propTypes = {
       key: _propTypes.default.string,
       options: _propTypes.default.arrayOf(_propTypes.default.any.isRequired),
       value: _propTypes.default.any,
+      prepend: _propTypes.default.node,
+      append: _propTypes.default.node,
       className: _propTypes.default.string,
       "aria-label": _propTypes.default.string,
       "data-test-subj": _propTypes.default.string,
       css: _propTypes.default.any
     }).isRequired),
     value: _propTypes.default.any,
+    prepend: _propTypes.default.node,
+    append: _propTypes.default.node,
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
@@ -436,12 +446,16 @@ EuiComboBoxOptionsList.propTypes = {
       key: _propTypes.default.string,
       options: _propTypes.default.arrayOf(_propTypes.default.any.isRequired),
       value: _propTypes.default.any,
+      prepend: _propTypes.default.node,
+      append: _propTypes.default.node,
       className: _propTypes.default.string,
       "aria-label": _propTypes.default.string,
       "data-test-subj": _propTypes.default.string,
       css: _propTypes.default.any
     }).isRequired),
     value: _propTypes.default.any,
+    prepend: _propTypes.default.node,
+    append: _propTypes.default.node,
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
@@ -463,12 +477,16 @@ EuiComboBoxOptionsList.propTypes = {
       key: _propTypes.default.string,
       options: _propTypes.default.arrayOf(_propTypes.default.any.isRequired),
       value: _propTypes.default.any,
+      prepend: _propTypes.default.node,
+      append: _propTypes.default.node,
       className: _propTypes.default.string,
       "aria-label": _propTypes.default.string,
       "data-test-subj": _propTypes.default.string,
       css: _propTypes.default.any
     }).isRequired),
     value: _propTypes.default.any,
+    prepend: _propTypes.default.node,
+    append: _propTypes.default.node,
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,

package/lib/components/error_boundary/error_boundary.js

@@ -64,7 +64,7 @@ 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/lib/components/filter_group/filter_group.styles.js

@@ -32,7 +32,7 @@ var euiFilterGroupStyles = function euiFilterGroupStyles(euiThemeContext) {
     controlCompressedBorderRadius = _euiFormVariables.controlCompressedBorderRadius,
     controlCompressedHeight = _euiFormVariables.controlCompressedHeight;
   return {
-    euiFilterGroup: /*#__PURE__*/(0, _react.css)("display:inline-flex;", (0, _global_styling.logicalCSS)('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";box-shadow:inset 0 0 0 ", euiTheme.border.width.thin, " ", borderColor, ";>*:not(.euiFilterButton){", (0, _filter_button.euiFilterButtonDisplay)(euiThemeContext), ";}.euiPopover__anchor{display:block;.euiFilterButton{", (0, _global_styling.logicalCSS)('width', '100%'), ";}}", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 's'), "{flex-wrap:wrap;}", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'xs'), "{display:flex;.euiFilterButton{flex-grow:1;}};label:euiFilterGroup;"),
+    euiFilterGroup: /*#__PURE__*/(0, _react.css)("display:inline-flex;", (0, _global_styling.logicalCSS)('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";box-shadow:inset 0 0 0 ", euiTheme.border.width.thin, " ", borderColor, ";>*:not(.euiFilterButton){", (0, _filter_button.euiFilterButtonDisplay)(euiThemeContext), ";}.euiPopover__anchor{display:block;.euiFilterButton{", (0, _global_styling.logicalCSS)('width', '100%'), ";}}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs']), "{display:flex;.euiFilterButton{flex-grow:1;}};label:euiFilterGroup;"),
     fullWidth: _ref,
     uncompressed: /*#__PURE__*/(0, _react.css)("border-radius:", controlBorderRadius, ";", buttonChildrenBorderRadii(controlBorderRadius), ";;label:uncompressed;"),
     compressed: /*#__PURE__*/(0, _react.css)("border-radius:", controlCompressedBorderRadius, ";", buttonChildrenBorderRadii(controlCompressedBorderRadius), " .euiFilterButton{", (0, _global_styling.logicalCSS)('height', controlCompressedHeight), ";};label:compressed;"),

package/lib/components/filter_group/filter_select_item.js

@@ -3,14 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiFilterSelectItem = void 0;
+exports.EuiFilterSelectItemClass = exports.EuiFilterSelectItem = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../services");
 var _flex = require("../flex");
 var _icon = require("../icon");
+var _filter_select_item = require("./filter_select_item.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "disabled", "checked", "isFocused", "showIcons"];
+var _excluded = ["theme", "children", "className", "disabled", "checked", "isFocused", "showIcons"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -51,12 +53,19 @@ var resolveIconAndColor = function resolveIconAndColor(checked) {
     color: 'text'
   };
 };
-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
+ */
+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];
     }
@@ -75,11 +84,12 @@ 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,
@@ -87,9 +97,9 @@ var EuiFilterSelectItem = /*#__PURE__*/function (_Component) {
         isFocused = _this$props.isFocused,
         showIcons = _this$props.showIcons,
         rest = _objectWithoutProperties(_this$props, _excluded);
-      var classes = (0, _classnames.default)('euiFilterSelectItem', {
-        'euiFilterSelectItem-isFocused': isFocused
-      }, className);
+      var styles = (0, _filter_select_item.euiFilterSelectItemStyles)(theme);
+      var cssStyles = [styles.euiFilterSelectItem, isFocused && styles.isFocused];
+      var classes = (0, _classnames.default)('euiFilterSelectItem', className);
       var iconNode;
       if (showIcons) {
         var _resolveIconAndColor = resolveIconAndColor(checked),
@@ -110,6 +120,7 @@ var EuiFilterSelectItem = /*#__PURE__*/function (_Component) {
         type: "button",
         "aria-selected": isFocused,
         className: classes,
+        css: cssStyles,
         disabled: disabled,
         "aria-disabled": disabled
       }, rest), (0, _react2.jsx)(_flex.EuiFlexGroup, {
@@ -118,18 +129,21 @@ var EuiFilterSelectItem = /*#__PURE__*/function (_Component) {
         component: "span",
         responsive: false
       }, iconNode, (0, _react2.jsx)(_flex.EuiFlexItem, {
-        className: "euiFilterSelectItem__content",
+        className: "euiFilterSelectItem__content eui-textTruncate",
         component: "span"
       }, children)));
     }
   }]);
-  return EuiFilterSelectItem;
+  return EuiFilterSelectItemClass;
 }(_react.Component);
-exports.EuiFilterSelectItem = EuiFilterSelectItem;
-_defineProperty(EuiFilterSelectItem, "defaultProps", {
+/**
+ * @deprecated - Use EuiSelectable instead
+ */
+exports.EuiFilterSelectItemClass = EuiFilterSelectItemClass;
+_defineProperty(EuiFilterSelectItemClass, "defaultProps", {
   showIcons: true
 });
-EuiFilterSelectItem.propTypes = {
+EuiFilterSelectItemClass.propTypes = {
   checked: _propTypes.default.oneOf(["on", "off"]),
   showIcons: _propTypes.default.bool,
   isFocused: _propTypes.default.bool,
@@ -137,4 +151,6 @@ EuiFilterSelectItem.propTypes = {
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any
-};
+};
+var EuiFilterSelectItem = (0, _services.withEuiTheme)(EuiFilterSelectItemClass);
+exports.EuiFilterSelectItem = EuiFilterSelectItem;

package/lib/components/filter_group/filter_select_item.styles.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiFilterSelectItemStyles = void 0;
+var _react = require("@emotion/react");
+var _services = require("../../services");
+var _global_styling = require("../../global_styling");
+/*
+ * 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 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((0, _services.transparentize)(euiTheme.colors.disabled, 0.1), ";\n    }\n  ");
+  return {
+    euiFilterSelectItem: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalShorthandCSS)('padding', "".concat(euiTheme.size.xs, " ").concat(euiTheme.size.m)), " ", (0, _global_styling.euiFontSize)(euiThemeContext, 's'), " ", (0, _global_styling.logicalTextAlignCSS)('left'), " color:", euiTheme.colors.text, ";", (0, _global_styling.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__*/(0, _react.css)(focusStyles, ";;label:isFocused;")
+  };
+};
+exports.euiFilterSelectItemStyles = euiFilterSelectItemStyles;

package/lib/components/form/range/range_highlight.js

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

package/lib/components/highlight/highlight.js

@@ -36,7 +36,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 (0, _react2.jsx)(_mark.EuiMark, {
           key: start,
@@ -52,9 +52,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 (0, _react2.jsx)(_react.Fragment, null, preMatch, (0, _react2.jsx)(_mark.EuiMark, {
     hasScreenReaderHelpText: hasScreenReaderHelpText
   }, match), postMatch);

package/lib/components/index.js

@@ -157,6 +157,17 @@ Object.keys(_collapsible_nav).forEach(function (key) {
     }
   });
 });
+var _collapsible_nav_beta = require("./collapsible_nav_beta");
+Object.keys(_collapsible_nav_beta).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _collapsible_nav_beta[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _collapsible_nav_beta[key];
+    }
+  });
+});
 var _color_picker = require("./color_picker");
 Object.keys(_color_picker).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/components/inline_edit/inline_edit_form.js

@@ -272,7 +272,8 @@ 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": (0, _classnames.default)(readModeDescribedById, readModeProps === null || readModeProps === void 0 ? void 0 : readModeProps['aria-describedby']),

package/lib/components/markdown_editor/markdown_editor.js

@@ -166,8 +166,8 @@ var EuiMarkdownEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
   var isPreviewing = viewMode === _markdown_modes.MODE_VIEWING;
   var isEditing = viewMode === _markdown_modes.MODE_EDITING;
   var replaceNode = (0, _react.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 = (0, _react.useMemo)(function () {

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.focus = void 0;
 var _utils = require("../../../../services/theme/utils");
+var _manipulation = require("../../../../services/color/manipulation");
 var _size = require("../../../../global_styling/functions/size");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -14,23 +15,19 @@ var _size = require("../../../../global_styling/functions/size");
  * 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.
- */
-
 var focus = {
+  // Focus ring
   color: 'currentColor',
-  width: (0, _utils.computed)((0, _size.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: (0, _utils.computed)((0, _size.sizeToPixel)(0.125)),
+  // Focus background
+  transparency: {
+    LIGHT: 0.1,
+    DARK: 0.2
+  },
+  backgroundColor: (0, _utils.computed)(function (_ref) {
+    var colors = _ref.colors,
+      focus = _ref.focus;
+    return (0, _manipulation.transparentize)(colors.primary, focus.transparency);
+  })
 };
 exports.focus = focus;

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

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime/helpers/extends";
+/*
+ * 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 { useEuiTheme } from '../../services';
+import { EuiCollapsibleNav } from '../collapsible_nav/collapsible_nav';
+import { euiCollapsibleNavBetaStyles } from './collapsible_nav_beta.styles';
+
+/**
+ * TODO: Actual component in a follow-up PR
+ */
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var EuiCollapsibleNavBeta = function EuiCollapsibleNavBeta(props) {
+  var euiTheme = useEuiTheme();
+  var styles = euiCollapsibleNavBetaStyles(euiTheme);
+  return ___EmotionJSX(EuiCollapsibleNav, _extends({
+    css: styles.euiCollapsibleNavBeta,
+    size: 248
+  }, props));
+};

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

@@ -0,0 +1,16 @@
+/*
+ * 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 } from '../../global_styling';
+export var euiCollapsibleNavBetaStyles = function euiCollapsibleNavBetaStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiCollapsibleNavBeta: /*#__PURE__*/css(logicalCSS('border-top', euiTheme.border.thin), " ", logicalCSS('border-right', euiTheme.border.thin), " .euiFlyoutFooter{background-color:", euiTheme.colors.emptyShade, ";", logicalCSS('border-top', euiTheme.border.thin), ";};label:euiCollapsibleNavBeta;")
+  };
+};

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

@@ -0,0 +1,113 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["id", "className", "items", "href", "isSubItem", "isSelected", "linkProps", "accordionProps", "buttonContent", "children"];
+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, { useCallback, useMemo } from 'react';
+import classNames from 'classnames';
+import { useEuiTheme, useGeneratedHtmlId } from '../../../services';
+import { EuiAccordion } from '../../accordion';
+import { EuiCollapsibleNavSubItem } from './collapsible_nav_item';
+import { EuiCollapsibleNavLink } from './collapsible_nav_link';
+import { euiCollapsibleNavAccordionStyles } from './collapsible_nav_accordion.styles';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+/**
+ * Internal nav accordion component.
+ *
+ * Renders children as either a nav link or any number/nesting of more nav accordions.
+ * Triggering the open/closed state is handled only by the accordion `arrow` for
+ * UX consistency, as accordion/nav titles can be their own links to pages.
+ */
+export var EuiCollapsibleNavAccordion = function EuiCollapsibleNavAccordion(_ref) {
+  var _accordionProps$arrow;
+  var id = _ref.id,
+    className = _ref.className,
+    items = _ref.items,
+    href = _ref.href,
+    isSubItem = _ref.isSubItem,
+    isSelected = _ref.isSelected,
+    linkProps = _ref.linkProps,
+    accordionProps = _ref.accordionProps,
+    buttonContent = _ref.buttonContent,
+    _children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var classes = classNames('euiCollapsibleNavAccordion', className);
+  var groupID = useGeneratedHtmlId({
+    conditionalId: id
+  });
+  var euiTheme = useEuiTheme();
+  var styles = euiCollapsibleNavAccordionStyles(euiTheme);
+  var cssStyles = [styles.euiCollapsibleNavAccordion, isSubItem ? styles.isSubItem : styles.isTopItem, isSelected && styles.isSelected, accordionProps === null || accordionProps === void 0 ? void 0 : accordionProps.css];
+
+  /**
+   * Title / accordion trigger
+   */
+  var isTitleInteractive = !!(href || linkProps !== null && linkProps !== void 0 && linkProps.onClick);
+
+  // Stop propagation on the title so that the accordion toggle doesn't occur on click
+  // (should only occur on accordion arrow click for UX consistency)
+  var stopPropagationClick = useCallback(function (e) {
+    var _linkProps$onClick;
+    e.stopPropagation();
+    linkProps === null || linkProps === void 0 ? void 0 : (_linkProps$onClick = linkProps.onClick) === null || _linkProps$onClick === void 0 ? void 0 : _linkProps$onClick.call(linkProps, e);
+  }, [linkProps === null || linkProps === void 0 ? void 0 : linkProps.onClick] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  /**
+   * Child items
+   */
+  // If any of the sub items have an icon, default to an
+  // icon of `empty` so that all text lines up vertically
+  var itemsHaveIcons = useMemo(function () {
+    return items.some(function (item) {
+      return !!item.icon;
+    });
+  }, [items]);
+  var icon = itemsHaveIcons ? 'empty' : undefined;
+  var childrenCssStyles = [styles.children.euiCollapsibleNavAccordion__children, isSubItem ? styles.children.isSubItem : styles.children.isTopItem];
+  var children = ___EmotionJSX("div", {
+    css: childrenCssStyles,
+    className: "euiCollapsibleNavAccordion__children"
+  }, items.map(function (item, index) {
+    return (
+      // This is an intentional circular dependency between the accordion & parent item display.
+      // EuiSideNavItem is purposely recursive to support any amount of nested sub items,
+      // and split up into separate files/components for better dev readability
+      ___EmotionJSX(EuiCollapsibleNavSubItem, _extends({
+        key: index,
+        icon: icon
+      }, item))
+    );
+  }));
+  return ___EmotionJSX(EuiAccordion, _extends({
+    id: groupID,
+    className: classes,
+    initialIsOpen: isSelected,
+    buttonElement: "div",
+    buttonContent: ___EmotionJSX(EuiCollapsibleNavLink, _extends({
+      href: href
+    }, linkProps, {
+      isSelected: isSelected,
+      isSubItem: isSubItem,
+      onClick: stopPropagationClick,
+      isInteractive: isTitleInteractive
+    }), buttonContent),
+    arrowDisplay: "right"
+  }, rest, accordionProps, {
+    css: cssStyles,
+    arrowProps: _objectSpread(_objectSpread({
+      iconSize: 's'
+    }, accordionProps === null || accordionProps === void 0 ? void 0 : accordionProps.arrowProps), {}, {
+      css: [styles.euiCollapsibleNavAccordion__arrow, accordionProps === null || accordionProps === void 0 ? void 0 : (_accordionProps$arrow = accordionProps.arrowProps) === null || _accordionProps$arrow === void 0 ? void 0 : _accordionProps$arrow.css]
+    })
+  }), children);
+};