@elastic/eui 88.2.0 → 88.4.0

package/optimize/es/components/accordion/accordion_trigger/accordion_arrow.styles.js

@@ -0,0 +1,46 @@
+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 } from '../../../global_styling';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "pbbcf-isOpen",
+  styles: "transform:rotate(90deg)!important;label:isOpen;"
+} : {
+  name: "pbbcf-isOpen",
+  styles: "transform:rotate(90deg)!important;label:isOpen;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "67rr15-isClosed",
+  styles: "transform:rotate(0deg)!important;label:isClosed;"
+} : {
+  name: "67rr15-isClosed",
+  styles: "transform:rotate(0deg)!important;label:isClosed;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "ixe809-euiAccordion__arrow",
+  styles: "flex-shrink:0;label:euiAccordion__arrow;"
+} : {
+  name: "ixe809-euiAccordion__arrow",
+  styles: "flex-shrink:0;label:euiAccordion__arrow;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiAccordionArrowStyles = function euiAccordionArrowStyles(_ref4) {
+  var euiTheme = _ref4.euiTheme;
+  return {
+    euiAccordion__arrow: _ref3,
+    left: /*#__PURE__*/css(logicalCSS('margin-right', euiTheme.size.xs), ";;label:left;"),
+    right: /*#__PURE__*/css(logicalCSS('margin-left', euiTheme.size.xs), ";;label:right;"),
+    // !important overrides EuiButtonIcon's default transforms
+    isClosed: _ref2,
+    isOpen: _ref
+  };
+};

package/optimize/es/components/accordion/accordion_trigger/accordion_button.js

@@ -0,0 +1,45 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["buttonElement", "buttonProps", "buttonClassName", "buttonContentClassName", "isDisabled", "arrowDisplay", "children"],
+  _excluded2 = ["paddingSize"];
+/*
+ * 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 { euiAccordionButtonStyles } from './accordion_button.styles';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var EuiAccordionButton = function EuiAccordionButton(_ref) {
+  var ButtonElement = _ref.buttonElement,
+    _buttonProps = _ref.buttonProps,
+    buttonClassName = _ref.buttonClassName,
+    buttonContentClassName = _ref.buttonContentClassName,
+    isDisabled = _ref.isDisabled,
+    arrowDisplay = _ref.arrowDisplay,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _ref2 = _buttonProps || {},
+    paddingSize = _ref2.paddingSize,
+    buttonProps = _objectWithoutProperties(_ref2, _excluded2);
+  var classes = classNames('euiAccordion__button', buttonClassName, buttonProps.className);
+  var buttonContentClasses = classNames('euiAccordion__buttonContent', buttonContentClassName);
+  var euiTheme = useEuiTheme();
+  var styles = euiAccordionButtonStyles(euiTheme);
+  var cssStyles = [styles.euiAccordion__button, isDisabled && styles.disabled].concat(_toConsumableArray(paddingSize ? [styles[paddingSize], arrowDisplay === 'left' && styles.arrowLeft, arrowDisplay === 'right' && styles.arrowRight] : []), [buttonProps.css]);
+  var elementIsButton = ButtonElement === 'button';
+  return ___EmotionJSX(ButtonElement, _extends({}, buttonProps, rest, {
+    className: classes,
+    css: cssStyles,
+    type: elementIsButton ? 'button' : undefined,
+    disabled: elementIsButton ? isDisabled : undefined
+  }), ___EmotionJSX("span", {
+    className: buttonContentClasses
+  }, children));
+};

package/optimize/es/components/accordion/accordion_trigger/accordion_button.styles.js

@@ -0,0 +1,26 @@
+/*
+ * 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 { euiFontSize, logicalCSS, logicalTextAlignCSS } from '../../../global_styling';
+export var euiAccordionButtonStyles = function euiAccordionButtonStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiAccordion__button: /*#__PURE__*/css(euiFontSize(euiThemeContext, 's'), " align-items:center;display:flex;flex-grow:1;line-height:", euiTheme.size.l, ";", logicalTextAlignCSS('left'), " ", logicalCSS('width', '100%'), " &:hover,&:focus{cursor:pointer;text-decoration:underline;};label:euiAccordion__button;"),
+    // Triggering button needs separate `disabled` key because the element that renders may not support `:disabled`;
+    // Hover pseudo selector for specificity
+    disabled: /*#__PURE__*/css("&,&:hover{cursor:not-allowed;color:", euiTheme.colors.disabledText, ";text-decoration:none;};label:disabled;"),
+    // Optional padding sizes
+    s: /*#__PURE__*/css("padding:", euiTheme.size.s, ";;label:s;"),
+    m: /*#__PURE__*/css("padding:", euiTheme.size.base, ";;label:m;"),
+    l: /*#__PURE__*/css("padding:", euiTheme.size.l, ";;label:l;"),
+    // Remove padding from the accordion button on the side that the arrow is on
+    arrowLeft: /*#__PURE__*/css(logicalCSS('padding-left', 0), ";;label:arrowLeft;"),
+    arrowRight: /*#__PURE__*/css(logicalCSS('padding-right', 0), ";;label:arrowRight;")
+  };
+};

package/optimize/es/components/accordion/accordion_trigger/accordion_trigger.js

@@ -0,0 +1,80 @@
+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 React from 'react';
+import { EuiAccordionButton } from './accordion_button';
+import { EuiAccordionArrow } from './accordion_arrow';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "7vgam2-euiAccordion-optionalAction",
+  styles: "flex-shrink:0;label:euiAccordion;label:optionalAction;"
+} : {
+  name: "7vgam2-euiAccordion-optionalAction",
+  styles: "flex-shrink:0;label:euiAccordion;label:optionalAction;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "osepuu-EuiAccordionTrigger",
+  styles: "display:flex;align-items:center;label:EuiAccordionTrigger;"
+} : {
+  name: "osepuu-EuiAccordionTrigger",
+  styles: "display:flex;align-items:center;label:EuiAccordionTrigger;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var EuiAccordionTrigger = function EuiAccordionTrigger(_ref) {
+  var _arrowDisplay = _ref.arrowDisplay,
+    arrowProps = _ref.arrowProps,
+    _ref$buttonElement = _ref.buttonElement,
+    buttonElement = _ref$buttonElement === void 0 ? 'button' : _ref$buttonElement,
+    buttonProps = _ref.buttonProps,
+    buttonClassName = _ref.buttonClassName,
+    buttonContent = _ref.buttonContent,
+    buttonContentClassName = _ref.buttonContentClassName,
+    buttonId = _ref.buttonId,
+    ariaControlsId = _ref.ariaControlsId,
+    isDisabled = _ref.isDisabled,
+    isOpen = _ref.isOpen,
+    onToggle = _ref.onToggle,
+    extraAction = _ref.extraAction;
+  // Force visibility of arrow button icon if button element is not interactive
+  var buttonIsInteractive = buttonElement === 'button';
+  var arrowDisplay = _arrowDisplay === 'none' && !buttonIsInteractive ? 'left' : _arrowDisplay;
+  var arrow = ___EmotionJSX(EuiAccordionArrow, {
+    arrowDisplay: arrowDisplay,
+    arrowProps: arrowProps,
+    isOpen: isOpen,
+    onClick: onToggle,
+    isDisabled: isDisabled,
+    "aria-controls": ariaControlsId,
+    "aria-expanded": isOpen,
+    "aria-labelledby": buttonId,
+    tabIndex: buttonIsInteractive ? -1 : 0
+  });
+  var button = ___EmotionJSX(EuiAccordionButton, {
+    buttonElement: buttonElement,
+    buttonProps: buttonProps,
+    buttonClassName: buttonClassName,
+    buttonContentClassName: buttonContentClassName,
+    arrowDisplay: arrowDisplay,
+    isDisabled: isDisabled,
+    id: buttonId,
+    "aria-controls": ariaControlsId,
+    "aria-expanded": buttonIsInteractive ? isOpen : undefined // `aria-expanded` is only a valid attribute on interactive controls - axe-core throws a violation otherwise
+    ,
+    onClick: isDisabled ? undefined : onToggle
+  }, buttonContent);
+  var optionalAction = extraAction && ___EmotionJSX("div", {
+    className: "euiAccordion__optionalAction",
+    css: _ref2
+  }, extraAction);
+  return ___EmotionJSX("div", {
+    className: "euiAccordion__triggerWrapper",
+    css: _ref3
+  }, arrowDisplay === 'left' && arrow, button, optionalAction, arrowDisplay === 'right' && arrow);
+};

package/optimize/es/components/accordion/accordion_trigger/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 { EuiAccordionTrigger } from './accordion_trigger';

package/optimize/es/components/basic_table/in_memory_table.js

@@ -7,8 +7,9 @@ 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 = ["onChange"],
-  _excluded2 = ["columns", "loading", "message", "error", "selection", "isSelectable", "hasActions", "compressed", "pagination", "sorting", "itemIdToExpandedRowMap", "itemId", "rowProps", "cellProps", "tableLayout", "items", "search", "onTableChange", "executeQueryOptions", "allowNeutralSort", "childrenBetween"];
+var _excluded = ["schema"],
+  _excluded2 = ["onChange"],
+  _excluded3 = ["columns", "loading", "message", "error", "selection", "isSelectable", "hasActions", "compressed", "pagination", "sorting", "itemIdToExpandedRowMap", "itemId", "rowProps", "cellProps", "tableLayout", "items", "search", "searchFormat", "onTableChange", "executeQueryOptions", "allowNeutralSort", "childrenBetween"];
 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; } }
 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; }
@@ -25,7 +26,8 @@ import React, { Component } from 'react';
 import { EuiBasicTable } from './basic_table';
 import { isString } from '../../services/predicate';
 import { Comparators } from '../../services/sort';
-import { EuiSearchBar } from '../search_bar';
+import { EuiSearchBar } from '../search_bar/search_bar';
+import { EuiSearchBox } from '../search_bar/search_box';
 import { EuiSpacer } from '../spacer';
 import { euiTablePaginationDefaults } from '../table/table_pagination';
 import { EuiComponentDefaultsContext } from '../provider/component_defaults';
@@ -210,6 +212,15 @@ export var EuiInMemoryTable = /*#__PURE__*/function (_Component) {
         };
       });
     });
+    // Alternative to onQueryChange - allows consumers to specify they want the
+    // search bar to ignore EQL syntax and only use the searchbar for plain text
+    _defineProperty(_assertThisInitialized(_this), "onPlainTextSearch", function (searchValue) {
+      var escapedQueryText = searchValue.replace(/["\\]/g, '\\$&');
+      var finalQuery = "\"".concat(escapedQueryText, "\"");
+      _this.setState({
+        query: EuiSearchBar.Query.parse(finalQuery)
+      });
+    });
     var columns = props.columns,
       _search = props.search,
       _pagination = props.pagination,
@@ -253,12 +264,26 @@ export var EuiInMemoryTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderSearchBar",
     value: function renderSearchBar() {
-      var search = this.props.search;
-      if (search) {
+      var _this$props = this.props,
+        search = _this$props.search,
+        searchFormat = _this$props.searchFormat;
+      if (!search) return;
+      var searchBar;
+      if (searchFormat === 'text') {
+        var _searchBoxProps = (search === null || search === void 0 ? void 0 : search.box) || {}; // Work around | boolean type
+        var schema = _searchBoxProps.schema,
+          searchBoxProps = _objectWithoutProperties(_searchBoxProps, _excluded); // Destructure `schema` so it doesn't get rendered to DOM
+
+        searchBar = ___EmotionJSX(EuiSearchBox, _extends({
+          query: "" // Unused, passed to satisfy Typescript
+        }, searchBoxProps, {
+          onSearch: this.onPlainTextSearch
+        }));
+      } else {
         var searchBarProps = {};
         if (isEuiSearchBarProps(search)) {
           var onChange = search.onChange,
-            _searchBarProps = _objectWithoutProperties(search, _excluded);
+            _searchBarProps = _objectWithoutProperties(search, _excluded2);
           searchBarProps = _searchBarProps;
           if (searchBarProps.box && searchBarProps.box.schema === true) {
             searchBarProps.box = _objectSpread(_objectSpread({}, searchBarProps.box), {}, {
@@ -266,12 +291,13 @@ export var EuiInMemoryTable = /*#__PURE__*/function (_Component) {
             });
           }
         }
-        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiSearchBar, _extends({
+        searchBar = ___EmotionJSX(EuiSearchBar, _extends({
           onChange: this.onQueryChange
-        }, searchBarProps)), ___EmotionJSX(EuiSpacer, {
-          size: "l"
-        }));
+        }, searchBarProps));
       }
+      return ___EmotionJSX(React.Fragment, null, searchBar, ___EmotionJSX(EuiSpacer, {
+        size: "l"
+      }));
     }
   }, {
     key: "resolveSearchSchema",
@@ -348,29 +374,30 @@ export var EuiInMemoryTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props = this.props,
-        columns = _this$props.columns,
-        loading = _this$props.loading,
-        message = _this$props.message,
-        error = _this$props.error,
-        selection = _this$props.selection,
-        isSelectable = _this$props.isSelectable,
-        hasActions = _this$props.hasActions,
-        compressed = _this$props.compressed,
-        hasPagination = _this$props.pagination,
-        hasSorting = _this$props.sorting,
-        itemIdToExpandedRowMap = _this$props.itemIdToExpandedRowMap,
-        itemId = _this$props.itemId,
-        rowProps = _this$props.rowProps,
-        cellProps = _this$props.cellProps,
-        tableLayout = _this$props.tableLayout,
-        _unuseditems = _this$props.items,
-        search = _this$props.search,
-        onTableChange = _this$props.onTableChange,
-        executeQueryOptions = _this$props.executeQueryOptions,
-        allowNeutralSort = _this$props.allowNeutralSort,
-        childrenBetween = _this$props.childrenBetween,
-        rest = _objectWithoutProperties(_this$props, _excluded2);
+      var _this$props2 = this.props,
+        columns = _this$props2.columns,
+        loading = _this$props2.loading,
+        message = _this$props2.message,
+        error = _this$props2.error,
+        selection = _this$props2.selection,
+        isSelectable = _this$props2.isSelectable,
+        hasActions = _this$props2.hasActions,
+        compressed = _this$props2.compressed,
+        hasPagination = _this$props2.pagination,
+        hasSorting = _this$props2.sorting,
+        itemIdToExpandedRowMap = _this$props2.itemIdToExpandedRowMap,
+        itemId = _this$props2.itemId,
+        rowProps = _this$props2.rowProps,
+        cellProps = _this$props2.cellProps,
+        tableLayout = _this$props2.tableLayout,
+        _unuseditems = _this$props2.items,
+        search = _this$props2.search,
+        searchFormat = _this$props2.searchFormat,
+        onTableChange = _this$props2.onTableChange,
+        executeQueryOptions = _this$props2.executeQueryOptions,
+        allowNeutralSort = _this$props2.allowNeutralSort,
+        childrenBetween = _this$props2.childrenBetween,
+        rest = _objectWithoutProperties(_this$props2, _excluded3);
       var _this$state3 = this.state,
         pageIndex = _this$state3.pageIndex,
         pageSize = _this$state3.pageSize,
@@ -493,5 +520,6 @@ export var EuiInMemoryTable = /*#__PURE__*/function (_Component) {
 _defineProperty(EuiInMemoryTable, "contextType", EuiComponentDefaultsContext);
 _defineProperty(EuiInMemoryTable, "defaultProps", {
   responsive: true,
-  tableLayout: 'fixed'
+  tableLayout: 'fixed',
+  searchFormat: 'eql'
 });

package/optimize/es/components/card/card.js

@@ -16,14 +16,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { isValidElement } from 'react';
 import classNames from 'classnames';
 import { getSecureRelForTarget, useEuiTheme, cloneElementWithCss } from '../../services';
+import { useGeneratedHtmlId } from '../../services/accessibility';
+import { validateHref } from '../../services/security/href_validator';
 import { EuiText } from '../text';
 import { EuiTitle } from '../title';
 import { EuiBetaBadge } from '../badge/beta_badge';
-import { EuiCardSelect } from './card_select';
-import { useGeneratedHtmlId } from '../../services/accessibility';
-import { validateHref } from '../../services/security/href_validator';
 import { EuiPanel } from '../panel';
 import { EuiSpacer } from '../spacer';
+import { EuiCardSelect } from './card_select';
 import { euiCardBetaBadgeStyles, euiCardStyles, euiCardTextStyles } from './card.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var ALIGNMENTS = ['left', 'center', 'right'];

package/optimize/es/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.styles.js

@@ -17,7 +17,7 @@ export var euiCollapsibleNavGroupStyles = function euiCollapsibleNavGroupStyles(
     // Background colors
     none: /*#__PURE__*/css(";label:none;"),
     light: /*#__PURE__*/css("background-color:", euiTheme.colors.body, ";;label:light;"),
-    dark: /*#__PURE__*/css("background-color:", colorMode === 'DARK' ? shade(euiTheme.colors.lightestShade, 0.5) : shade(euiTheme.colors.darkestShade, 0.2), ";.euiCollapsibleNavGroup__title,.euiCollapsibleNavGroup__heading,.euiAccordion__iconButton{color:", euiTheme.colors.ghost, ";};label:dark;"),
+    dark: /*#__PURE__*/css("background-color:", colorMode === 'DARK' ? shade(euiTheme.colors.lightestShade, 0.5) : shade(euiTheme.colors.darkestShade, 0.2), ";.euiCollapsibleNavGroup__title,.euiCollapsibleNavGroup__heading,.euiAccordion__arrow{color:", euiTheme.colors.ghost, ";};label:dark;"),
     // Header padding
     isCollapsible: /*#__PURE__*/css(".euiAccordion__triggerWrapper{padding:", euiTheme.size.base, ";};label:isCollapsible;"),
     notCollapsible: /*#__PURE__*/css(".euiCollapsibleNavGroup__heading{padding:", euiTheme.size.base, ";};label:notCollapsible;"),

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

@@ -20,7 +20,7 @@ export var euiCollapsibleNavAccordionStyles = function euiCollapsibleNavAccordio
     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;"),
+    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__arrow[aria-expanded='true']>.euiIcon{color:", sharedStyles.color, ";transform:rotate(-90deg);};label:euiCollapsibleNavAccordion__arrow;"),
     // Children wrapper
     children: {
       euiCollapsibleNavAccordion__children: /*#__PURE__*/css(";label:euiCollapsibleNavAccordion__children;"),

package/optimize/es/components/combo_box/combo_box.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 = ["data-test-subj", "async", "className", "compressed", "customOptionText", "fullWidth", "id", "inputRef", "isCaseSensitive", "isClearable", "isDisabled", "isInvalid", "isLoading", "noSuggestions", "onBlur", "onChange", "onCreateOption", "onSearchChange", "options", "placeholder", "renderOption", "rowHeight", "selectedOptions", "singleSelection", "prepend", "sortMatchesBy", "delimiter", "append", "autoFocus", "aria-label", "aria-labelledby"];
+var _excluded = ["data-test-subj", "async", "className", "compressed", "customOptionText", "fullWidth", "id", "inputRef", "isCaseSensitive", "isClearable", "isDisabled", "isInvalid", "isLoading", "noSuggestions", "onBlur", "onChange", "onCreateOption", "onSearchChange", "options", "placeholder", "renderOption", "rowHeight", "selectedOptions", "singleSelection", "prepend", "sortMatchesBy", "delimiter", "append", "autoFocus", "truncationProps", "aria-label", "aria-labelledby"];
 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 _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); }; }
@@ -27,12 +27,12 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React, { Component } from 'react';
 import classNames from 'classnames';
 import { findPopoverPosition, htmlIdGenerator, keys } from '../../services';
+import { getElementZIndex } from '../../services/popover';
 import { EuiPortal } from '../portal';
 import { EuiI18n } from '../i18n';
-import { EuiComboBoxOptionsList } from './combo_box_options_list';
 import { getMatchingOptions, flattenOptionGroups, getSelectedOptionForSearchValue, transformForCaseSensitivity } from './matching_options';
 import { EuiComboBoxInput } from './combo_box_input/combo_box_input';
-import { getElementZIndex } from '../../services/popover';
+import { EuiComboBoxOptionsList } from './combo_box_options_list';
 
 /**
  * Because of how TypeScript's LibraryManagedAttributes is designed to handle defaultProps (https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-0.html#support-for-defaultprops-in-jsx)
@@ -634,6 +634,7 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
         delimiter = _this$props8.delimiter,
         append = _this$props8.append,
         autoFocus = _this$props8.autoFocus,
+        truncationProps = _this$props8.truncationProps,
         ariaLabel = _this$props8['aria-label'],
         ariaLabelledby = _this$props8['aria-labelledby'],
         rest = _objectWithoutProperties(_this$props8, _excluded);
@@ -702,7 +703,8 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
             width: width,
             delimiter: delimiter,
             getSelectedOptionForSearchValue: getSelectedOptionForSearchValue,
-            listboxAriaLabel: listboxAriaLabel
+            listboxAriaLabel: listboxAriaLabel,
+            truncationProps: truncationProps
           });
         }));
       }

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", "append", "prepend"];
+var _excluded = ["key", "label", "color", "onClick", "append", "prepend", "truncationProps"];
 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; } }
 /*
@@ -148,6 +148,7 @@ export var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
           onClick = option.onClick,
           append = option.append,
           prepend = option.prepend,
+          truncationProps = option.truncationProps,
           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

@@ -66,7 +66,9 @@ export var EuiComboBoxPill = /*#__PURE__*/function (_Component) {
       } : {};
       var content = ___EmotionJSX(React.Fragment, null, option.prepend && ___EmotionJSX("span", {
         className: "euiComboBoxPill__prepend"
-      }, option.prepend), children, option.append && ___EmotionJSX("span", {
+      }, option.prepend), ___EmotionJSX("span", {
+        className: "eui-textTruncate"
+      }, children), option.append && ___EmotionJSX("span", {
         className: "euiComboBoxPill__append"
       }, option.append));
       if (onClose) {

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

@@ -7,8 +7,8 @@ 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", "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"];
+var _excluded = ["key", "isGroupLabelOption", "label", "value", "prepend", "append", "truncationProps"],
+  _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", "truncationProps", "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; }
 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); }; }
@@ -26,6 +26,7 @@ import classNames from 'classnames';
 import { FixedSizeList } from 'react-window';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { EuiHighlight } from '../../highlight';
+import { EuiMark } from '../../mark';
 import { EuiText } from '../../text';
 import { EuiLoadingSpinner } from '../../loading';
 import { EuiComboBoxTitle } from './combo_box_title';
@@ -33,8 +34,8 @@ import { EuiI18n } from '../../i18n';
 import { EuiFilterSelectItem } from '../../filter_group/filter_select_item';
 import { EuiBadge } from '../../badge';
 import { EuiPopoverPanel } from '../../popover/popover_panel';
+import { EuiTextTruncate } from '../../text_truncate';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var OPTION_CONTENT_CLASSNAME = 'euiComboBoxOption__content';
 var hitEnterBadge = ___EmotionJSX(EuiBadge, {
   className: "euiComboBoxOption__enterBadge",
   color: "hollow",
@@ -95,6 +96,7 @@ export var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
         value = option.value,
         prepend = option.prepend,
         append = option.append,
+        _truncationProps = option.truncationProps,
         rest = _objectWithoutProperties(option, _excluded);
       var _this$props = _this.props,
         singleSelection = _this$props.singleSelection,
@@ -105,6 +107,8 @@ export var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
         renderOption = _this$props.renderOption,
         searchValue = _this$props.searchValue,
         rootId = _this$props.rootId;
+      // Individual truncation settings should override component prop
+      var truncationProps = _objectSpread(_objectSpread({}, _this.props.truncationProps), _truncationProps);
       if (isGroupLabelOption) {
         return ___EmotionJSX("div", {
           key: key !== null && key !== void 0 ? key : label,
@@ -129,22 +133,54 @@ export var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
         isFocused: optionIsFocused,
         checked: checked,
         showIcons: singleSelection ? true : false,
-        id: rootId("_option-".concat(index)),
-        title: label
+        id: rootId("_option-".concat(index))
       }, rest), ___EmotionJSX("span", {
         className: "euiComboBoxOption__contentWrapper"
       }, 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), append && ___EmotionJSX("span", {
+      }, prepend), ___EmotionJSX("span", {
+        className: "euiComboBoxOption__content"
+      }, renderOption ? renderOption(option, searchValue, 'euiComboBoxOption__renderOption') : _this.renderTruncatedOption(label, truncationProps)), append && ___EmotionJSX("span", {
         className: "euiComboBoxOption__append"
       }, append), optionIsFocused && !optionIsDisabled ? hitEnterBadge : null));
     });
+    _defineProperty(_assertThisInitialized(_this), "optionWidth", void 0);
+    _defineProperty(_assertThisInitialized(_this), "setOptionWidth", function (width) {
+      _this.optionWidth = width;
+    });
+    _defineProperty(_assertThisInitialized(_this), "renderTruncatedOption", function (text, truncationProps) {
+      if (!_this.props.searchValue) {
+        return ___EmotionJSX(EuiTextTruncate, _extends({
+          truncation: "end",
+          width: _this.optionWidth,
+          onResize: _this.setOptionWidth
+        }, truncationProps, {
+          text: text
+        }), function (text) {
+          return text;
+        });
+      }
+      var searchValue = _this.props.searchValue.trim();
+      var searchPositionStart = _this.props.isCaseSensitive ? text.indexOf(searchValue) : text.toLowerCase().indexOf(searchValue.toLowerCase());
+      var searchPositionCenter = searchPositionStart + Math.floor(searchValue.length / 2);
+      return ___EmotionJSX(EuiTextTruncate, _extends({
+        width: _this.optionWidth,
+        onResize: _this.setOptionWidth
+      }, truncationProps, {
+        // When searching, don't allow overriding the truncation settings
+        truncation: "startEnd",
+        truncationPosition: searchPositionCenter,
+        text: text
+      }), function (text) {
+        return ___EmotionJSX(React.Fragment, null, text.length >= searchValue.length ? ___EmotionJSX(EuiHighlight, {
+          search: searchValue,
+          strict: _this.props.isCaseSensitive
+        }, text) :
+        // If the available truncated text is shorter than the full search string,
+        // just highlight the entire truncated text
+        ___EmotionJSX(EuiMark, null, text));
+      });
+    });
     return _this;
   }
   _createClass(EuiComboBoxOptionsList, [{
@@ -228,6 +264,7 @@ export var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
         delimiter = _this$props2.delimiter,
         zIndex = _this$props2.zIndex,
         style = _this$props2.style,
+        truncationProps = _this$props2.truncationProps,
         listboxAriaLabel = _this$props2.listboxAriaLabel,
         rest = _objectWithoutProperties(_this$props2, _excluded2);
       var emptyStateContent;

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

@@ -9,7 +9,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * Side Public License, v 1.
  */
 
-import React, { Fragment, useState, useMemo, useCallback } from 'react';
+import React, { useState, useMemo, useCallback } from 'react';
 import classNames from 'classnames';
 import { EuiPopover, EuiPopoverFooter, EuiPopoverTitle } from '../../popover';
 import { EuiI18n, useEuiI18n } from '../../i18n';
@@ -137,7 +137,7 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
   }, ___EmotionJSX(EuiDroppable, {
     droppableId: "columnOrder",
     isDropDisabled: !isDragEnabled
-  }, ___EmotionJSX(Fragment, null, filteredColumns.map(function (id, index) {
+  }, ___EmotionJSX(React.Fragment, null, filteredColumns.map(function (id, index) {
     return ___EmotionJSX(EuiDraggable, {
       key: id,
       draggableId: id,
@@ -147,7 +147,9 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
       customDragHandle: true
     }, function (provided, state) {
       return ___EmotionJSX("div", {
-        className: "euiDataGridColumnSelector__item ".concat(state.isDragging && 'euiDataGridColumnSelector__item-isDragging'),
+        className: classNames('euiDataGridColumnSelector__item', {
+          'euiDataGridColumnSelector__item-isDragging': state.isDragging
+        }),
         "data-test-subj": "dataGridColumnSelectorColumnItem-".concat(id)
       }, ___EmotionJSX(EuiFlexGroup, {
         responsive: false,