@elastic/eui 85.0.1 → 86.0.0-rc1.0

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/datagrid/body/data_grid_cell.js

@@ -314,15 +314,7 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
       }
     });
     return _this;
-  } // focus tracking is split between the entire grid & individual cells,
-  // the parent grid owns which cell is focused,
-  // but individual cells need to react to changes and also report that
-  // they are focused in response to user actions like clicking on the cell
-  // to avoid focus trap fighting, cells wait a tick after being clicked to allow
-  // any existing traps to disconnect before the cell reports the new focus state to the parent grid
-  // but because of this small delay, multiple cells could queue up focus and
-  // create an infinite loop as the cells activate->deactivate->...
-  // so we track the last timeout id and clear that request if superseded
+  }
   _createClass(EuiDataGridCell, [{
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -625,5 +617,14 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
   }]);
   return EuiDataGridCell;
 }(Component);
+// focus tracking is split between the entire grid & individual cells,
+// the parent grid owns which cell is focused,
+// but individual cells need to react to changes and also report that
+// they are focused in response to user actions like clicking on the cell
+// to avoid focus trap fighting, cells wait a tick after being clicked to allow
+// any existing traps to disconnect before the cell reports the new focus state to the parent grid
+// but because of this small delay, multiple cells could queue up focus and
+// create an infinite loop as the cells activate->deactivate->...
+// so we track the last timeout id and clear that request if superseded
 _defineProperty(EuiDataGridCell, "activeFocusTimeoutId", undefined);
 _defineProperty(EuiDataGridCell, "contextType", DataGridFocusContext);

package/optimize/es/components/datagrid/controls/data_grid_toolbar.js

@@ -1,3 +1,4 @@
+import _typeof from "@babel/runtime/helpers/typeof";
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -6,7 +7,7 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { isValidElement } from 'react';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import { IS_JEST_ENVIRONMENT } from '../../../utils';
 
@@ -58,40 +59,44 @@ export function checkOrDefaultToolBarDisplayOptions(arg, option) {
     return true;
   }
 }
-export function renderAdditionalControls(toolbarVisibility, position) {
-  var _additionalControlsOb;
+export var renderAdditionalControls = function renderAdditionalControls(toolbarVisibility, position) {
   if (typeof toolbarVisibility === 'boolean') return null;
   var _ref2 = toolbarVisibility || {},
     additionalControls = _ref2.additionalControls;
   if (!additionalControls) return null;
 
-  // Typescript is having obj issues, so we need to force cast to EuiDataGridToolBarAdditionalControlsOptions here
-  var additionalControlsObj = (additionalControls === null || additionalControls === void 0 ? void 0 : additionalControls.constructor) === Object ? additionalControls : {};
-  // Typescript workarounds continued
-  var leftPositionObj = ((_additionalControlsOb = additionalControlsObj.left) === null || _additionalControlsOb === void 0 ? void 0 : _additionalControlsOb.constructor) === Object ? additionalControlsObj.left : {};
-  if (position === 'right') {
-    if (additionalControlsObj !== null && additionalControlsObj !== void 0 && additionalControlsObj.right) {
-      return additionalControlsObj.right;
+  // API backwards compatability: if the consumer passed a single ReactNode
+  // to `additionalControls`, default to the left append position.
+  if ( /*#__PURE__*/isValidElement(additionalControls) && position === 'left.append') {
+    return additionalControls;
+  }
+  if (_typeof(additionalControls) !== 'object') {
+    return null;
+  }
+  var handleLeftObjectConfig = function handleLeftObjectConfig(leftConfig) {
+    if (position === 'left.prepend') {
+      return leftConfig.prepend;
     }
-  } else if (position === 'left.prepend') {
-    if (leftPositionObj !== null && leftPositionObj !== void 0 && leftPositionObj.prepend) {
-      return leftPositionObj.prepend;
+    if (position === 'left.append') {
+      return leftConfig.append;
     }
-  } else if (position === 'left.append') {
-    if (leftPositionObj !== null && leftPositionObj !== void 0 && leftPositionObj.append) {
-      return leftPositionObj.append;
+  };
+  var handleObjectConfig = function handleObjectConfig(additionalControls) {
+    if (position === 'right') {
+      return additionalControls.right;
     }
-    if ( /*#__PURE__*/React.isValidElement(additionalControlsObj === null || additionalControlsObj === void 0 ? void 0 : additionalControlsObj.left)) {
-      // If the consumer passed a single ReactNode to `additionalControls.left`, default to the left append position
-      return additionalControlsObj.left;
+    // API backwards compatability: If the consumer passed a single ReactNode
+    // to `additionalControls.left`, default to the left append position
+    if ( /*#__PURE__*/isValidElement(additionalControls.left) && position === 'left.append') {
+      return additionalControls.left;
     }
-    if ( /*#__PURE__*/React.isValidElement(additionalControls)) {
-      // API backwards compatability: if the consumer passed a single ReactNode to `additionalControls`, default to the the left append position
-      return additionalControls;
+    if (additionalControls.left && _typeof(additionalControls.left) === 'object') {
+      return handleLeftObjectConfig(additionalControls.left);
     }
-  }
-  return null;
-}
+  };
+  var rendered = handleObjectConfig(additionalControls);
+  return rendered || null;
+};
 
 /**
  * Utility helper for selectors/controls that allow nested options
@@ -101,7 +106,7 @@ export function renderAdditionalControls(toolbarVisibility, position) {
 export function getNestedObjectOptions(controlOption, objectKey) {
   var _controlOption$object;
   // If the config is a boolean, nested options follow that boolean
-  if (controlOption === false || controlOption === true) return controlOption;
+  if (typeof controlOption === 'boolean') return controlOption;
   // If config is not defined, default to enabled
   if (controlOption == null) return true;
   // Otherwise, type should be an object of boolean values - dive into it and return the value

package/optimize/es/components/datagrid/controls/display_selector.js

@@ -124,7 +124,8 @@ export var useDataGridDisplaySelector = function useDataGridDisplaySelector(show
     setUserRowHeightsOptions(rowHeightsOptions);
   }, [lineCount]);
   var setLineCountHeight = useCallback(function (event) {
-    var newLineCount = Number(event.target.value);
+    if (!event.currentTarget) return;
+    var newLineCount = Number(event.currentTarget.value);
     if (newLineCount < 1) return; // Don't let users set a 0 or negative line count
 
     setLineCount(newLineCount);

package/optimize/es/components/datagrid/utils/in_memory.js

@@ -144,9 +144,9 @@ export var EuiDataGridInMemoryRenderer = function EuiDataGridInMemoryRenderer(_r
     var cellDivs = documentFragment.childNodes[0].childNodes;
     for (var i = 0; i < cellDivs.length; i++) {
       var cellDiv = cellDivs[i];
-      var _rowIndex = parseInt(cellDiv.getAttribute('data-dg-row'), 10);
+      var rowIndex = parseInt(cellDiv.getAttribute('data-dg-row'), 10);
       var column = cellDiv.getAttribute('data-dg-column');
-      onCellRender(_rowIndex, column, getElementText(cellDiv));
+      onCellRender(rowIndex, column, getElementText(cellDiv));
     }
     // changes to documentFragment.children is reflected by `cells`
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/optimize/es/components/datagrid/utils/row_heights.js

@@ -197,15 +197,15 @@ export var RowHeightVirtualizationUtils = /*#__PURE__*/function (_RowHeightUtils
     var _this2;
     _classCallCheck(this, RowHeightVirtualizationUtils);
     _this2 = _super.call(this);
-    _this2.gridRef = gridRef;
-    _this2.outerGridElementRef = outerGridElementRef;
-    _this2.gridItemsRenderedRef = gridItemsRenderedRef;
-    _this2.rerenderGridBodyRef = rerenderGridBodyRef;
     /**
      * Virtualization workarounds for auto height rows
      */
     _defineProperty(_assertThisInitialized(_this2), "timerId", void 0);
     _defineProperty(_assertThisInitialized(_this2), "lastUpdatedRow", Infinity);
+    _this2.gridRef = gridRef;
+    _this2.outerGridElementRef = outerGridElementRef;
+    _this2.gridItemsRenderedRef = gridItemsRenderedRef;
+    _this2.rerenderGridBodyRef = rerenderGridBodyRef;
     return _this2;
   }
   _createClass(RowHeightVirtualizationUtils, [{

package/optimize/es/components/date_picker/date_picker.js

@@ -135,7 +135,7 @@ export var EuiDatePicker = function EuiDatePicker(_ref) {
     inputValidityRef = _useState2[0],
     _setInputValidityRef = _useState2[1];
   var setInputValidityRef = useCallback(function (ref) {
-    _setInputValidityRef(ref === null || ref === void 0 ? void 0 : ref.input);
+    _setInputValidityRef((ref === null || ref === void 0 ? void 0 : ref.input) || null);
   }, []);
   useEuiValidatableControl({
     isInvalid: isInvalid,

package/optimize/es/components/drag_and_drop/drag_drop_context.js

@@ -11,7 +11,7 @@ var _excluded = ["onBeforeDragStart", "onDragStart", "onDragUpdate", "onDragEnd"
  */
 
 import React, { useState, createContext } from 'react';
-import { DragDropContext } from 'react-beautiful-dnd';
+import { DragDropContext } from '@hello-pangea/dnd';
 
 // export interface EuiDragDropContextProps extends DragDropContextProps {}
 import { jsx as ___EmotionJSX } from "@emotion/react";

package/optimize/es/components/drag_and_drop/draggable.js

@@ -13,7 +13,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 
 import React, { Fragment, cloneElement, useContext } from 'react';
-import { Draggable } from 'react-beautiful-dnd';
+import { Draggable } from '@hello-pangea/dnd';
 import classNames from 'classnames';
 import { EuiDroppableContext } from './droppable';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -62,7 +62,7 @@ export var EuiDraggable = function EuiDraggable(_ref) {
       'euiDraggable__item--isDragging': snapshot.isDragging,
       'euiDraggable__item--isDropAnimating': snapshot.isDropAnimating
     });
-    var DraggableElement = typeof children === 'function' ? children(provided, snapshot, rubric) : children; // as specified by `DraggableProps`
+    var DraggableElement = typeof children === 'function' ? children(provided, snapshot, rubric) : children;
     return ___EmotionJSX(Fragment, null, ___EmotionJSX("div", _extends({}, provided.draggableProps, !customDragHandle ? provided.dragHandleProps : {}, {
       ref: provided.innerRef,
       "data-test-subj": dataTestSubj,

package/optimize/es/components/drag_and_drop/droppable.js

@@ -10,7 +10,7 @@ var _excluded = ["droppableId", "direction", "isDropDisabled", "children", "clas
  */
 
 import React, { useContext } from 'react';
-import { Droppable } from 'react-beautiful-dnd';
+import { Droppable } from '@hello-pangea/dnd';
 import classNames from 'classnames';
 import { EuiDragDropContextContext } from './drag_drop_context';
 import { jsx as ___EmotionJSX } from "@emotion/react";

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

@@ -11,5 +11,6 @@ export { EuiDraggable } from './draggable';
 export { EuiDroppable } from './droppable';
 export { euiDragDropCopy, euiDragDropMove, euiDragDropReorder } from './services';
 
-// Interfaces in react-beautiful-dnd that EUI abstracts over
-// allows consumers to pull these from EUI instead of react-beautiful-dnd
+// Interfaces in @hello-pangea/dnd (a fork of react-beautiful-dnd) that EUI
+// abstracts over allows consumers to pull these from EUI
+// instead of @hello-pangea/dnd

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_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,12 +41,12 @@ 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);
-  return ___EmotionJSX(Fragment, null, preMatch, ___EmotionJSX(EuiMark, {
+  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 || undefined, ___EmotionJSX(EuiMark, {
     hasScreenReaderHelpText: hasScreenReaderHelpText
-  }, match), postMatch);
+  }, match), postMatch || undefined);
 };
 var getHightlightWords = function getHightlightWords(searchSubject, searchValue, isStrict) {
   var regex = new RegExp(searchValue, isStrict ? 'g' : 'gi');

package/optimize/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/optimize/es/components/inline_edit/inline_edit_form.js

@@ -258,7 +258,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/optimize/es/components/inner_text/index.js

@@ -6,5 +6,4 @@
  * Side Public License, v 1.
  */
 
-export { useInnerText, EuiInnerText } from './inner_text';
-export { useRenderToText } from './render_to_text';
+export { useInnerText, EuiInnerText } from './inner_text';

package/optimize/es/components/markdown_editor/markdown_actions.js

@@ -48,8 +48,8 @@ import { isPluginWithImmediateFormatting } from './markdown_types';
 var MarkdownActions = /*#__PURE__*/function () {
   function MarkdownActions(editorID, uiPlugins) {
     _classCallCheck(this, MarkdownActions);
-    this.editorID = editorID;
     _defineProperty(this, "styles", void 0);
+    this.editorID = editorID;
     /**
      * This object is in the format:
      * [nameOfAction]: {[styles to apply]}

package/optimize/es/components/markdown_editor/markdown_editor.js

@@ -150,8 +150,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/optimize/es/components/markdown_editor/markdown_editor_text_area.js

@@ -29,13 +29,19 @@ export var EuiMarkdownEditorTextArea = /*#__PURE__*/forwardRef(function (_ref, r
   var classes = classNames('euiMarkdownEditorTextArea', {
     'euiMarkdownEditorTextArea-isReadOnly': readOnly
   });
+
+  // Ignore invalid empty string style values
+  var style = {};
+  if (height !== '') {
+    style.height = height;
+  }
+  if (maxHeight !== '') {
+    style.maxHeight = maxHeight;
+  }
   return ___EmotionJSX("textarea", _extends({
     ref: ref,
     "data-test-subj": "euiMarkdownEditorTextArea",
-    style: {
-      height: height,
-      maxHeight: maxHeight
-    },
+    style: style,
     className: classes
   }, rest, {
     rows: 6,