@elastic/eui 65.0.2 → 66.0.0

package/optimize/es/components/icon/icon.js

@@ -231,14 +231,7 @@ export var EuiIconClass = /*#__PURE__*/function (_PureComponent) {
 
       var styles = euiIconStyles(theme);
       var cssStyles = [styles.euiIcon, styles[size], color && isNamedColor(color) && styles[color], isCustomColor && styles.customColor, isElasticLogoOutline && styles.logoElasticOutline, isAppIcon && !appIconHasColor && styles.app, isLoading && styles.isLoading, !isLoading && neededLoading && styles.isLoaded];
-      var icon = this.state.icon || empty; // This is a fix for IE and Edge, which ignores tabindex="-1" on an SVG, but respects
-      // focusable="false".
-      //   - If there's no tabindex specified, we'll default the icon to not be focusable,
-      //     which is how SVGs behave in Chrome, Safari, and FF.
-      //   - If tabindex is -1, then the consumer wants the icon to be focusable by JavaScript only.
-      //   - If the tabindex is 0, the consumer wants the icon to be keyboard focusable.
-
-      var focusable = tabIndex == null || tabIndex === -1 ? 'false' : 'true';
+      var icon = this.state.icon || empty;
 
       if (typeof icon === 'string') {
         return ___EmotionJSX("img", _extends({
@@ -270,7 +263,6 @@ export var EuiIconClass = /*#__PURE__*/function (_PureComponent) {
           style: optionalCustomStyles,
           css: cssStyles,
           tabIndex: tabIndex,
-          focusable: focusable,
           role: "img",
           title: title,
           "data-icon-type": iconTitle,

package/optimize/es/components/list_group/list_group_item.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["label", "isActive", "isDisabled", "href", "target", "rel", "className", "iconType", "icon", "iconProps", "extraAction", "onClick", "size", "color", "showToolTip", "wrapText", "buttonRef"],
+var _excluded = ["label", "isActive", "isDisabled", "href", "target", "rel", "className", "iconType", "icon", "iconProps", "extraAction", "onClick", "size", "color", "showToolTip", "wrapText", "buttonRef", "toolTipText"],
     _excluded2 = ["iconType", "alwaysShow", "className", "isDisabled"];
 
 /*
@@ -58,6 +58,7 @@ export var EuiListGroupItem = function EuiListGroupItem(_ref) {
       showToolTip = _ref$showToolTip === void 0 ? false : _ref$showToolTip,
       wrapText = _ref.wrapText,
       buttonRef = _ref.buttonRef,
+      toolTipText = _ref.toolTipText,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var isHrefValid = !href || validateHref(href);
@@ -159,7 +160,7 @@ export var EuiListGroupItem = function EuiListGroupItem(_ref) {
       className: classes
     }, ___EmotionJSX(EuiToolTip, {
       anchorClassName: "euiListGroupItem__tooltip",
-      content: label,
+      content: toolTipText !== null && toolTipText !== void 0 ? toolTipText : label,
       position: "right",
       delay: "long"
     }, itemContent));

package/optimize/es/components/modal/modal.js

@@ -71,7 +71,5 @@ export var EuiModal = function EuiModal(_ref) {
       color: "text",
       "aria-label": closeModal
     });
-  }), ___EmotionJSX("div", {
-    className: "euiModal__flex"
-  }, children))));
+  }), children)));
 };

package/optimize/es/components/observer/mutation_observer/mutation_observer.js

@@ -56,7 +56,7 @@ export var EuiMutationObserver = /*#__PURE__*/function (_EuiObserver) {
 }(EuiObserver);
 
 var makeMutationObserver = function makeMutationObserver(node, _observerOptions, callback) {
-  // IE11 and the MutationObserver polyfill used in Kibana (for Jest) implement
+  // The MutationObserver polyfill used in Kibana (for Jest) implements
   // an older spec in which specifying `attributeOldValue` or `attributeFilter`
   // without specifying `attributes` results in a `SyntaxError`.
   // The following logic patches the newer spec in which `attributes: true` can be

package/optimize/es/components/page/page_sidebar/page_sidebar.js

@@ -46,13 +46,17 @@ export var EuiPageSidebar = function EuiPageSidebar(_ref) {
       setInlineStyles = _useState2[1];
 
   useEffect(function () {
+    var updatedStyles = _objectSpread(_objectSpread({}, style), logicalStyle('min-width', isResponding ? '100%' : minWidth));
+
     if (sticky) {
       var _document$body$datase;
 
       var euiHeaderFixedCounter = Number((_document$body$datase = document.body.dataset.fixedHeaders) !== null && _document$body$datase !== void 0 ? _document$body$datase : 0);
       var offset = _typeof(sticky) === 'object' ? sticky === null || sticky === void 0 ? void 0 : sticky.offset : themeContext.euiTheme.base * 3 * euiHeaderFixedCounter;
-      setInlineStyles(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, style), logicalStyle('min-width', isResponding ? '100%' : minWidth)), logicalStyle('top', offset)), logicalStyle('max-height', "calc(100vh - ".concat(offset, "px)"))));
+      updatedStyles = _objectSpread(_objectSpread(_objectSpread({}, updatedStyles), logicalStyle('top', offset)), logicalStyle('max-height', "calc(100vh - ".concat(offset, "px)")));
     }
+
+    setInlineStyles(updatedStyles);
   }, [style, sticky, themeContext.euiTheme.base, isResponding, minWidth]);
   return ___EmotionJSX("div", _extends({
     className: className,

package/optimize/es/components/tabs/tabbed_content/tabbed_content.js

@@ -118,24 +118,6 @@ export var EuiTabbedContent = /*#__PURE__*/function (_Component) {
   }
 
   _createClass(EuiTabbedContent, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      // IE11 doesn't support the `relatedTarget` event property for blur events
-      // but does add it for focusout. React doesn't support `onFocusOut` so here we are.
-      if (this.tabsRef.current) {
-        // Current short-term solution for event listener (see https://github.com/elastic/eui/pull/2717)
-        this.tabsRef.current.addEventListener('focusout', this.removeFocus);
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this.tabsRef.current) {
-        // Current short-term solution for event listener (see https://github.com/elastic/eui/pull/2717)
-        this.tabsRef.current.removeEventListener('focusout', this.removeFocus);
-      }
-    }
-  }, {
     key: "render",
     value: function render() {
       var _this2 = this;
@@ -164,7 +146,8 @@ export var EuiTabbedContent = /*#__PURE__*/function (_Component) {
         ref: this.tabsRef,
         expand: expand,
         size: size,
-        onFocus: this.initializeFocus
+        onFocus: this.initializeFocus,
+        onBlur: this.removeFocus
       }, tabs.map(function (tab) {
         var id = tab.id,
             name = tab.name,

package/optimize/es/global_styling/mixins/_typography.js

@@ -29,7 +29,7 @@ export var useEuiFontSize = function useEuiFontSize(scale, options) {
  */
 
 export var euiTextBreakWord = function euiTextBreakWord() {
-  return "\n  overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container\n  word-wrap: break-word !important; // spec says, they are literally just alternate names for each other but some browsers support one and not the other\n  word-break: break-word; // IE doesn't understand but that's ok\n";
+  return "\n  overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container\n  word-break: break-word;\n";
 };
 /**
  * Prevent text from wrapping onto multiple lines, and truncate with an ellipsis.

package/optimize/es/services/theme/hooks.js

@@ -7,18 +7,21 @@ import _extends from "@babel/runtime/helpers/extends";
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React, { forwardRef, useContext } from 'react';
+import React, { forwardRef, useContext, useMemo } from 'react';
 import { EuiThemeContext, EuiModificationsContext, EuiColorModeContext } from './context';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var useEuiTheme = function useEuiTheme() {
   var theme = useContext(EuiThemeContext);
   var colorMode = useContext(EuiColorModeContext);
   var modifications = useContext(EuiModificationsContext);
-  return {
-    euiTheme: theme,
-    colorMode: colorMode,
-    modifications: modifications
-  };
+  var assembledTheme = useMemo(function () {
+    return {
+      euiTheme: theme,
+      colorMode: colorMode,
+      modifications: modifications
+    };
+  }, [theme, colorMode, modifications]);
+  return assembledTheme;
 };
 // Provide the component props interface as the generic to allow the docs props table to populate.
 // e.g., `const EuiComponent = withEuiTheme<EuiComponentProps>(_EuiComponent)`
@@ -26,17 +29,9 @@ export var withEuiTheme = function withEuiTheme(Component) {
   var componentName = Component.displayName || Component.name || 'ComponentWithTheme';
 
   var Render = function Render(props, ref) {
-    var _useEuiTheme = useEuiTheme(),
-        euiTheme = _useEuiTheme.euiTheme,
-        colorMode = _useEuiTheme.colorMode,
-        modifications = _useEuiTheme.modifications;
-
+    var theme = useEuiTheme();
     return ___EmotionJSX(Component, _extends({
-      theme: {
-        euiTheme: euiTheme,
-        colorMode: colorMode,
-        modifications: modifications
-      },
+      theme: theme,
       ref: ref
     }, props));
   };

package/optimize/lib/components/card/card.styles.js

@@ -87,14 +87,14 @@ var euiCardStyles = function euiCardStyles(euiThemeContext, paddingSize, color)
     euiCard__description: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-top', halfSpacing), ";;label:euiCard__description;"),
     euiCard__footer: /*#__PURE__*/(0, _react.css)("flex-grow:0;", (0, _global_styling.logicalCSS)('width', '100%'), ";", (0, _global_styling.logicalCSS)('margin-top', spacing), ";;label:euiCard__footer;"),
     top: {
-      euiCard__top: /*#__PURE__*/(0, _react.css)("flex-grow:0;font-size:0;position:relative;", (0, _global_styling.logicalCSS)('min-height', '1px'), ";", (0, _global_styling.logicalCSS)('margin-bottom', spacing), ";;label:euiCard__top;"),
+      euiCard__top: /*#__PURE__*/(0, _react.css)("flex-grow:0;font-size:0;position:relative;", (0, _global_styling.logicalCSS)('margin-bottom', spacing), ";;label:euiCard__top;"),
       layout: {
         vertical: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), ";;label:vertical;"),
         horizontal: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', 'auto'), ";;label:horizontal;")
       },
       disabled: _ref2
     },
-    euiCard__image: /*#__PURE__*/(0, _react.css)("position:relative;overflow:hidden;", (0, _global_styling.logicalCSS)('width', "calc(100% + (".concat(paddingAmount, " * 2))")), ";", (0, _global_styling.logicalCSS)('left', "-".concat(paddingAmount)), ";", (0, _global_styling.logicalCSS)('top', "-".concat(paddingAmount)), ";", (0, _global_styling.logicalCSS)('margin-bottom', "-".concat(paddingAmount)), ";", _global_styling.logicals['border-top-left-radius'], ":calc(", euiTheme.border.radius.medium, " - 1px);", _global_styling.logicals['border-top-right-radius'], ":calc(", euiTheme.border.radius.medium, " - 1px);", color === 'transparent' ? "border-radius: ".concat(euiTheme.border.radius.medium, ";") : undefined, " img{", (0, _global_styling.logicalCSS)('width', '100%'), ";};label:euiCard__image;"),
+    euiCard__image: /*#__PURE__*/(0, _react.css)("position:relative;overflow:hidden;", (0, _global_styling.logicalCSS)('width', "calc(100% + (".concat(paddingAmount, " * 2))")), ";", (0, _global_styling.logicalCSS)('left', "-".concat(paddingAmount)), ";", (0, _global_styling.logicalCSS)('top', "-".concat(paddingAmount)), ";", (0, _global_styling.logicalCSS)('margin-bottom', "-".concat(paddingAmount)), ";", (0, _global_styling.logicalCSS)('border-top-left-radius', "calc(".concat(euiTheme.border.radius.medium, " - ").concat(euiTheme.border.width.thin, ")")), " ", _global_styling.logicals['border-top-right-radius'], ":calc(", euiTheme.border.radius.medium, " - ", euiTheme.border.width.thin, ");", color === 'transparent' ? "border-radius: ".concat(euiTheme.border.radius.medium, ";") : undefined, " img{", (0, _global_styling.logicalCSS)('width', '100%'), ";};label:euiCard__image;"),
     icon: {
       euiCard__icon: /*#__PURE__*/(0, _react.css)(";label:euiCard__icon;"),
       withImage: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('top', '50%'), ";", (0, _global_styling.logicalCSS)('left', '50%'), ";transform:translate(-50%, calc(-50% + -", paddingAmount, "))!important;;label:withImage;"),

package/optimize/lib/components/combo_box/combo_box.js

@@ -93,17 +93,9 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "rootId", (0, _services.htmlIdGenerator)());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "comboBoxRefInstance", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "comboBoxRefCallback", function (ref) {
-      // IE11 doesn't support the `relatedTarget` event property for blur events
-      // but does add it for focusout. React doesn't support `onFocusOut` so here we are.
-      if (_this.comboBoxRefInstance) {
-        _this.comboBoxRefInstance.removeEventListener('focusout', _this.onContainerBlur);
-      }
-
       _this.comboBoxRefInstance = ref;
 
       if (_this.comboBoxRefInstance) {
-        _this.comboBoxRefInstance.addEventListener('focusout', _this.onContainerBlur);
-
         var comboBoxBounds = _this.comboBoxRefInstance.getBoundingClientRect();
 
         _this.setState({
@@ -388,13 +380,7 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onContainerBlur", function (event) {
       // close the options list, unless the user clicked on an option
-
-      /**
-       * FireFox returns `relatedTarget` as `null` for security reasons, but provides a proprietary `explicitOriginalTarget`.
-       * @see https://developer.mozilla.org/en-US/docs/Web/API/Event/explicitOriginalTarget
-       */
-      var focusEvent = event;
-      var relatedTarget = focusEvent.relatedTarget || focusEvent.explicitOriginalTarget;
+      var relatedTarget = event.relatedTarget;
 
       var focusedInOptionsList = relatedTarget && _this.listRefInstance && _this.listRefInstance.contains(relatedTarget);
 
@@ -825,6 +811,7 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
           className: classes,
           "data-test-subj": dataTestSubj,
           onKeyDown: this.onKeyDown,
+          onBlur: this.onContainerBlur,
           ref: this.comboBoxRefCallback
         }), (0, _react2.jsx)(_combo_box_input.EuiComboBoxInput, {
           autoSizeInputRef: this.autoSizeInputRefCallback,

package/optimize/lib/components/description_list/description_list.js

@@ -27,7 +27,7 @@ var _description_list_context = require("./description_list_context");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["align", "children", "className", "compressed", "descriptionProps", "listItems", "textStyle", "titleProps", "type"];
+var _excluded = ["align", "children", "className", "compressed", "descriptionProps", "listItems", "textStyle", "titleProps", "type", "gutterSize"];
 
 var EuiDescriptionList = function EuiDescriptionList(_ref) {
   var _ref$align = _ref.align,
@@ -43,6 +43,8 @@ var EuiDescriptionList = function EuiDescriptionList(_ref) {
       titleProps = _ref.titleProps,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'row' : _ref$type,
+      _ref$gutterSize = _ref.gutterSize,
+      gutterSize = _ref$gutterSize === void 0 ? 'm' : _ref$gutterSize,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _description_list.euiDescriptionListStyles)(euiTheme);
@@ -67,7 +69,8 @@ var EuiDescriptionList = function EuiDescriptionList(_ref) {
       type: type,
       compressed: compressed,
       textStyle: textStyle,
-      align: align
+      align: align,
+      gutterSize: gutterSize
     }
   }, (0, _react2.jsx)("dl", (0, _extends2.default)({
     className: classes,

package/optimize/lib/components/description_list/description_list_context.js

@@ -17,7 +17,8 @@ var _react = require("react");
 var contextDefaults = {
   type: 'row',
   textStyle: 'normal',
-  align: 'left'
+  align: 'left',
+  gutterSize: 'm'
 };
 exports.contextDefaults = contextDefaults;
 var EuiDescriptionListContext = /*#__PURE__*/(0, _react.createContext)(contextDefaults);

package/optimize/lib/components/description_list/description_list_description.js

@@ -42,7 +42,8 @@ var EuiDescriptionListDescription = function EuiDescriptionListDescription(_ref)
       type = _useContext.type,
       textStyle = _useContext.textStyle,
       compressed = _useContext.compressed,
-      align = _useContext.align;
+      align = _useContext.align,
+      gutterSize = _useContext.gutterSize;
 
   var theme = (0, _services.useEuiTheme)();
   var styles = (0, _description_list_description.euiDescriptionListDescriptionStyles)(theme);
@@ -59,6 +60,7 @@ var EuiDescriptionListDescription = function EuiDescriptionListDescription(_ref)
         conditionalStyles.push(styles.left);
       }
 
+      conditionalStyles.push(styles[gutterSize]);
       break;
   }
 

package/optimize/lib/components/description_list/description_list_description.styles.js

@@ -24,7 +24,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 
 var euiDescriptionListDescriptionStyles = function euiDescriptionListDescriptionStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var columnDisplay = "\n    ".concat((0, _global_styling.logicalCSS)('width', '50%'), " // Flex-basis doesn't work in IE with padding\n    ").concat((0, _global_styling.logicalCSS)('padding-left', euiTheme.size.s), "\n    &:not(:first-of-type) {\n      ").concat((0, _global_styling.logicalCSS)('margin-top', euiTheme.size.base), "\n    }\n  ");
+  var columnDisplay = "\n    ".concat((0, _global_styling.logicalCSS)('width', '50%'), "\n    ").concat((0, _global_styling.logicalCSS)('padding-left', euiTheme.size.s), "\n  ");
   return {
     euiDescriptionList__description: /*#__PURE__*/(0, _react.css)(";label:euiDescriptionList__description;"),
     // Types
@@ -44,7 +44,10 @@ var euiDescriptionListDescriptionStyles = function euiDescriptionListDescription
       normal: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";;label:normal;")
     },
     // Column types should align description text to the left when EuiDecriptionList is centered
-    left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('left'), ";;label:left;")
+    left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('left'), ";;label:left;"),
+    // Gutter
+    s: /*#__PURE__*/(0, _react.css)("&:not(:first-of-type){", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.s), ";};label:s;"),
+    m: /*#__PURE__*/(0, _react.css)("&:not(:first-of-type){", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.base), ";};label:m;")
   };
 };
 

package/optimize/lib/components/description_list/description_list_title.js

@@ -42,7 +42,8 @@ var EuiDescriptionListTitle = function EuiDescriptionListTitle(_ref) {
       type = _useContext.type,
       textStyle = _useContext.textStyle,
       compressed = _useContext.compressed,
-      align = _useContext.align;
+      align = _useContext.align,
+      gutterSize = _useContext.gutterSize;
 
   var theme = (0, _services.useEuiTheme)();
   var styles = (0, _description_list_title.euiDescriptionListTitleStyles)(theme);
@@ -62,7 +63,7 @@ var EuiDescriptionListTitle = function EuiDescriptionListTitle(_ref) {
       break;
   }
 
-  var cssStyles = [styles.euiDescriptionList__title, styles[type]].concat((0, _toConsumableArray2.default)(conditionalStyles));
+  var cssStyles = [styles.euiDescriptionList__title, styles[type], styles[gutterSize]].concat((0, _toConsumableArray2.default)(conditionalStyles));
   var classes = (0, _classnames.default)('euiDescriptionList__title', className);
   return (0, _react2.jsx)("dt", (0, _extends2.default)({
     className: classes,

package/optimize/lib/components/description_list/description_list_title.styles.js

@@ -23,9 +23,9 @@ var _title = require("../title/title.styles");
 var euiDescriptionListTitleStyles = function euiDescriptionListTitleStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
       colorMode = euiThemeContext.colorMode;
-  var columnDisplay = "\n    ".concat((0, _global_styling.logicalCSS)('width', '50%'), " // Flex-basis doesn't work in IE with padding\n    ").concat((0, _global_styling.logicalCSS)('padding-right', euiTheme.size.s), "\n  ");
+  var columnDisplay = "\n  ".concat((0, _global_styling.logicalCSS)('width', '50%'), "\n    ").concat((0, _global_styling.logicalCSS)('padding-right', euiTheme.size.s), "\n  ");
   return {
-    euiDescriptionList__title: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextBreakWord)(), "&:not(:first-of-type){", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.base), ";};label:euiDescriptionList__title;"),
+    euiDescriptionList__title: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextBreakWord)(), ";;label:euiDescriptionList__title;"),
     // Types
     row: /*#__PURE__*/(0, _react.css)(";label:row;"),
     column: /*#__PURE__*/(0, _react.css)(columnDisplay, ";;label:column;"),
@@ -43,7 +43,11 @@ var euiDescriptionListTitleStyles = function euiDescriptionListTitleStyles(euiTh
       compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), ";", (0, _global_styling.logicalCSS)('padding-vertical', '0'), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), ";;label:compressed;")
     },
     // Alignment
-    right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('right'), ";;label:right;")
+    right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('right'), ";;label:right;"),
+    // Gutter
+    // Add margin only to the non-first <dt>.
+    s: /*#__PURE__*/(0, _react.css)("&:not(:first-of-type){", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.s), ";};label:s;"),
+    m: /*#__PURE__*/(0, _react.css)("&:not(:first-of-type){", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.base), ";};label:m;")
   };
 };
 

package/optimize/lib/components/description_list/description_list_types.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TYPES = exports.TEXT_STYLES = exports.ALIGNMENTS = void 0;
+exports.TYPES = exports.TEXT_STYLES = exports.GUTTER_SIZES = exports.ALIGNMENTS = void 0;
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -17,4 +17,6 @@ exports.TYPES = TYPES;
 var ALIGNMENTS = ['center', 'left'];
 exports.ALIGNMENTS = ALIGNMENTS;
 var TEXT_STYLES = ['normal', 'reverse'];
-exports.TEXT_STYLES = TEXT_STYLES;
+exports.TEXT_STYLES = TEXT_STYLES;
+var GUTTER_SIZES = ['s', 'm'];
+exports.GUTTER_SIZES = GUTTER_SIZES;

package/optimize/lib/components/form/field_search/field_search.js

@@ -90,26 +90,16 @@ var EuiFieldSearch = /*#__PURE__*/function (_Component) {
 
       if (nativeInputValueSetter) {
         nativeInputValueSetter.call(_this.inputElement, '');
-      } // dispatch input event, with IE11 support/fallback
+      } // dispatch input event
 
 
-      var event;
-
-      if ('Event' in window && typeof Event === 'function') {
-        event = new Event('input', {
-          bubbles: true,
-          cancelable: false
-        });
-      } else {
-        // IE11
-        event = document.createEvent('Event');
-        event.initEvent('input', true, false);
-      }
+      var event = new Event('input', {
+        bubbles: true,
+        cancelable: false
+      });
 
       if (_this.inputElement) {
-        if (event) {
-          _this.inputElement.dispatchEvent(event);
-        } // set focus on the search field
+        _this.inputElement.dispatchEvent(event); // set focus on the search field
 
 
         _this.inputElement.focus();

package/optimize/lib/components/form/range/range_input.js

@@ -35,7 +35,7 @@ var EuiRangeInput = function EuiRangeInput(_ref) {
       _ref$autoSize = _ref.autoSize,
       autoSize = _ref$autoSize === void 0 ? true : _ref$autoSize,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  // Chrome will properly size the input based on the max value, but FF & IE do not.
+  // Chrome will properly size the input based on the max value, but FF does not.
   // Calculate the width of the input based on highest number of characters.
   // Add 2 to accommodate for input stepper
   var widthStyle = autoSize ? {

package/optimize/lib/components/header/header_section/header_section_item.js

@@ -30,10 +30,11 @@ var EuiHeaderSectionItem = function EuiHeaderSectionItem(_ref) {
       children = _ref.children,
       className = _ref.className,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var classes = (0, _classnames.default)('euiHeaderSectionItem', borderToClassNameMap[border], className);
-  return (0, _react2.jsx)("div", (0, _extends2.default)({
+  var classes = (0, _classnames.default)('euiHeaderSectionItem', borderToClassNameMap[border], className); // we check if there is any children and if not, we don't render anything
+
+  return children ? (0, _react2.jsx)("div", (0, _extends2.default)({
     className: classes
-  }, rest), children);
+  }, rest), children) : null;
 };
 
 exports.EuiHeaderSectionItem = EuiHeaderSectionItem;

package/optimize/lib/components/icon/icon.js

@@ -267,14 +267,7 @@ var EuiIconClass = /*#__PURE__*/function (_PureComponent) {
 
       var styles = (0, _icon.euiIconStyles)(theme);
       var cssStyles = [styles.euiIcon, styles[size], color && (0, _named_colors.isNamedColor)(color) && styles[color], isCustomColor && styles.customColor, isElasticLogoOutline && styles.logoElasticOutline, isAppIcon && !appIconHasColor && styles.app, isLoading && styles.isLoading, !isLoading && neededLoading && styles.isLoaded];
-      var icon = this.state.icon || _empty.icon; // This is a fix for IE and Edge, which ignores tabindex="-1" on an SVG, but respects
-      // focusable="false".
-      //   - If there's no tabindex specified, we'll default the icon to not be focusable,
-      //     which is how SVGs behave in Chrome, Safari, and FF.
-      //   - If tabindex is -1, then the consumer wants the icon to be focusable by JavaScript only.
-      //   - If the tabindex is 0, the consumer wants the icon to be keyboard focusable.
-
-      var focusable = tabIndex == null || tabIndex === -1 ? 'false' : 'true';
+      var icon = this.state.icon || _empty.icon;
 
       if (typeof icon === 'string') {
         return (0, _react3.jsx)("img", (0, _extends2.default)({
@@ -306,7 +299,6 @@ var EuiIconClass = /*#__PURE__*/function (_PureComponent) {
           style: optionalCustomStyles,
           css: cssStyles,
           tabIndex: tabIndex,
-          focusable: focusable,
           role: "img",
           title: title,
           "data-icon-type": iconTitle,

package/optimize/lib/components/list_group/list_group_item.js

@@ -33,7 +33,7 @@ var _href_validator = require("../../services/security/href_validator");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["label", "isActive", "isDisabled", "href", "target", "rel", "className", "iconType", "icon", "iconProps", "extraAction", "onClick", "size", "color", "showToolTip", "wrapText", "buttonRef"],
+var _excluded = ["label", "isActive", "isDisabled", "href", "target", "rel", "className", "iconType", "icon", "iconProps", "extraAction", "onClick", "size", "color", "showToolTip", "wrapText", "buttonRef", "toolTipText"],
     _excluded2 = ["iconType", "alwaysShow", "className", "isDisabled"];
 
 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); }
@@ -81,6 +81,7 @@ var EuiListGroupItem = function EuiListGroupItem(_ref) {
       showToolTip = _ref$showToolTip === void 0 ? false : _ref$showToolTip,
       wrapText = _ref.wrapText,
       buttonRef = _ref.buttonRef,
+      toolTipText = _ref.toolTipText,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var isHrefValid = !href || (0, _href_validator.validateHref)(href);
@@ -182,7 +183,7 @@ var EuiListGroupItem = function EuiListGroupItem(_ref) {
       className: classes
     }, (0, _react2.jsx)(_tool_tip.EuiToolTip, {
       anchorClassName: "euiListGroupItem__tooltip",
-      content: label,
+      content: toolTipText !== null && toolTipText !== void 0 ? toolTipText : label,
       position: "right",
       delay: "long"
     }, itemContent));

package/optimize/lib/components/modal/modal.js

@@ -84,9 +84,7 @@ var EuiModal = function EuiModal(_ref) {
       color: "text",
       "aria-label": closeModal
     });
-  }), (0, _react2.jsx)("div", {
-    className: "euiModal__flex"
-  }, children))));
+  }), children)));
 };
 
 exports.EuiModal = EuiModal;

package/optimize/lib/components/observer/mutation_observer/mutation_observer.js

@@ -63,7 +63,7 @@ var EuiMutationObserver = /*#__PURE__*/function (_EuiObserver) {
 exports.EuiMutationObserver = EuiMutationObserver;
 
 var makeMutationObserver = function makeMutationObserver(node, _observerOptions, callback) {
-  // IE11 and the MutationObserver polyfill used in Kibana (for Jest) implement
+  // The MutationObserver polyfill used in Kibana (for Jest) implements
   // an older spec in which specifying `attributeOldValue` or `attributeFilter`
   // without specifying `attributes` results in a `SyntaxError`.
   // The following logic patches the newer spec in which `attributes: true` can be

package/optimize/lib/components/page/page_sidebar/page_sidebar.js

@@ -63,13 +63,17 @@ var EuiPageSidebar = function EuiPageSidebar(_ref) {
       setInlineStyles = _useState2[1];
 
   (0, _react.useEffect)(function () {
+    var updatedStyles = _objectSpread(_objectSpread({}, style), (0, _global_styling.logicalStyle)('min-width', isResponding ? '100%' : minWidth));
+
     if (sticky) {
       var _document$body$datase;
 
       var euiHeaderFixedCounter = Number((_document$body$datase = document.body.dataset.fixedHeaders) !== null && _document$body$datase !== void 0 ? _document$body$datase : 0);
       var offset = (0, _typeof2.default)(sticky) === 'object' ? sticky === null || sticky === void 0 ? void 0 : sticky.offset : themeContext.euiTheme.base * 3 * euiHeaderFixedCounter;
-      setInlineStyles(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, style), (0, _global_styling.logicalStyle)('min-width', isResponding ? '100%' : minWidth)), (0, _global_styling.logicalStyle)('top', offset)), (0, _global_styling.logicalStyle)('max-height', "calc(100vh - ".concat(offset, "px)"))));
+      updatedStyles = _objectSpread(_objectSpread(_objectSpread({}, updatedStyles), (0, _global_styling.logicalStyle)('top', offset)), (0, _global_styling.logicalStyle)('max-height', "calc(100vh - ".concat(offset, "px)")));
     }
+
+    setInlineStyles(updatedStyles);
   }, [style, sticky, themeContext.euiTheme.base, isResponding, minWidth]);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     className: className,

package/optimize/lib/components/tabs/tabbed_content/tabbed_content.js

@@ -133,24 +133,6 @@ var EuiTabbedContent = /*#__PURE__*/function (_Component) {
   }
 
   (0, _createClass2.default)(EuiTabbedContent, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      // IE11 doesn't support the `relatedTarget` event property for blur events
-      // but does add it for focusout. React doesn't support `onFocusOut` so here we are.
-      if (this.tabsRef.current) {
-        // Current short-term solution for event listener (see https://github.com/elastic/eui/pull/2717)
-        this.tabsRef.current.addEventListener('focusout', this.removeFocus);
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this.tabsRef.current) {
-        // Current short-term solution for event listener (see https://github.com/elastic/eui/pull/2717)
-        this.tabsRef.current.removeEventListener('focusout', this.removeFocus);
-      }
-    }
-  }, {
     key: "render",
     value: function render() {
       var _this2 = this;
@@ -178,7 +160,8 @@ var EuiTabbedContent = /*#__PURE__*/function (_Component) {
         ref: this.tabsRef,
         expand: expand,
         size: size,
-        onFocus: this.initializeFocus
+        onFocus: this.initializeFocus,
+        onBlur: this.removeFocus
       }, tabs.map(function (tab) {
         var id = tab.id,
             name = tab.name,

package/optimize/lib/global_styling/mixins/_typography.js

@@ -45,7 +45,7 @@ var useEuiFontSize = function useEuiFontSize(scale, options) {
 exports.useEuiFontSize = useEuiFontSize;
 
 var euiTextBreakWord = function euiTextBreakWord() {
-  return "\n  overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container\n  word-wrap: break-word !important; // spec says, they are literally just alternate names for each other but some browsers support one and not the other\n  word-break: break-word; // IE doesn't understand but that's ok\n";
+  return "\n  overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container\n  word-break: break-word;\n";
 };
 /**
  * Prevent text from wrapping onto multiple lines, and truncate with an ellipsis.