@elastic/eui 101.3.0-classic.0 → 101.4.0

package/optimize/lib/components/facet/facet_button.styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiFacetButtonTextStyles = exports.euiFacetButtonStyles = exports.euiFacetButtonQuantityStyles = exports.euiFacetButtonLoadingSpinnerStyles = exports.euiFacetButtonIconStyles = void 0;
+exports.euiFacetButton__disabled = exports.euiFacetButtonTextStyles = exports.euiFacetButtonStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
 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)."; } /*
@@ -13,51 +13,28 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var euiFacetButtonStyles = exports.euiFacetButtonStyles = function euiFacetButtonStyles(_ref3) {
-  var euiTheme = _ref3.euiTheme;
+var euiFacetButtonStyles = exports.euiFacetButtonStyles = function euiFacetButtonStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
   return {
     // Base
     euiFacetButton: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('left'), " &:not(:disabled){&:hover,&:focus{text-decoration:none;.euiFacetButton__text{text-decoration:underline;}}&:focus .euiFacetButton__text{text-decoration-thickness:", euiTheme.border.width.thick, ";}}&:disabled{color:", euiTheme.colors.disabledText, ";pointer-events:none;};label:euiFacetButton;")
   };
 };
-var euiFacetButtonTextStyles = exports.euiFacetButtonTextStyles = function euiFacetButtonTextStyles(_ref4) {
-  var euiTheme = _ref4.euiTheme;
+var euiFacetButtonTextStyles = exports.euiFacetButtonTextStyles = function euiFacetButtonTextStyles(_ref2) {
+  var euiTheme = _ref2.euiTheme;
   return {
     euiFacetButton__text: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextShift)('bold', 'data-text', euiTheme), " ", (0, _global_styling.euiTextTruncate)(), " flex-grow:1;;label:euiFacetButton__text;"),
     isSelected: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.bold, ";;label:isSelected;"),
     unSelected: /*#__PURE__*/(0, _react.css)(";label:unSelected;")
   };
 };
-var _ref2 = process.env.NODE_ENV === "production" ? {
-  name: "mpq8zy-isDisabled",
-  styles: "opacity:0.5;label:isDisabled;"
-} : {
-  name: "mpq8zy-isDisabled",
-  styles: "opacity:0.5;label:isDisabled;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var euiFacetButtonIconStyles = exports.euiFacetButtonIconStyles = function euiFacetButtonIconStyles() {
-  return {
-    euiFacetButton__icon: /*#__PURE__*/(0, _react.css)(";label:euiFacetButton__icon;"),
-    isDisabled: _ref2
-  };
-};
-var euiFacetButtonLoadingSpinnerStyles = exports.euiFacetButtonLoadingSpinnerStyles = function euiFacetButtonLoadingSpinnerStyles() {
-  return {
-    euiFacetButton__loadingSpinner: /*#__PURE__*/(0, _react.css)(";label:euiFacetButton__loadingSpinner;")
-  };
-};
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "mpq8zy-isDisabled",
-  styles: "opacity:0.5;label:isDisabled;"
+
+// Used by both icon and quantity siblings
+var euiFacetButton__disabled = exports.euiFacetButton__disabled = process.env.NODE_ENV === "production" ? {
+  name: "1622f2l-euiFacetButton__disabled",
+  styles: "opacity:0.5;label:euiFacetButton__disabled;"
 } : {
-  name: "mpq8zy-isDisabled",
-  styles: "opacity:0.5;label:isDisabled;",
+  name: "1622f2l-euiFacetButton__disabled",
+  styles: "opacity:0.5;label:euiFacetButton__disabled;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var euiFacetButtonQuantityStyles = exports.euiFacetButtonQuantityStyles = function euiFacetButtonQuantityStyles() {
-  return {
-    euiFacetButton__quantity: /*#__PURE__*/(0, _react.css)(";label:euiFacetButton__quantity;"),
-    isDisabled: _ref
-  };
 };

package/optimize/lib/components/facet/facet_group.js

@@ -30,9 +30,8 @@ var EuiFacetGroup = exports.EuiFacetGroup = function EuiFacetGroup(_ref) {
     _ref$gutterSize = _ref.gutterSize,
     gutterSize = _ref$gutterSize === void 0 ? 'm' : _ref$gutterSize,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var theme = (0, _services.useEuiTheme)();
-  var styles = (0, _facet_group.euiFacetGroupStyles)(theme, layout);
-  var cssStyles = [styles.euiFacetGroup, styles[gutterSize], styles[layout]];
+  var styles = (0, _services.useEuiMemoizedStyles)(_facet_group.euiFacetGroupStyles);
+  var cssStyles = [styles.euiFacetGroup, styles.gutterSizes[layout][gutterSize], styles[layout]];
   var classes = (0, _classnames.default)('euiFacetGroup', className);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     className: classes,

package/optimize/lib/components/facet/facet_group.styles.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiFacetGroupStyles = void 0;
 var _react = require("@emotion/react");
-var _services = require("../../services");
+var _global_styling = require("../../global_styling");
 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
@@ -13,16 +13,6 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var _facetGroupGutterSize = function _facetGroupGutterSize(_ref4) {
-  var gutterSize = _ref4.gutterSize,
-    layout = _ref4.layout;
-  var _useEuiTheme = (0, _services.useEuiTheme)(),
-    euiTheme = _useEuiTheme.euiTheme;
-  var isHorizontalLayout = layout === 'horizontal';
-  var gutterHorizontal = "calc(".concat(euiTheme.size.m, " + ").concat(gutterSize, ")");
-  var gutterVertical = gutterSize;
-  return isHorizontalLayout ? "gap: ".concat(gutterVertical, " ").concat(gutterHorizontal, ";") : "gap: ".concat(gutterVertical, " 0;");
-};
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "omnk2l-vertical",
   styles: "flex-direction:column;label:vertical;"
@@ -47,30 +37,43 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
   styles: "display:flex;flex-grow:1;label:euiFacetGroup;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var euiFacetGroupStyles = exports.euiFacetGroupStyles = function euiFacetGroupStyles(_ref5, layout) {
-  var euiTheme = _ref5.euiTheme;
+var euiFacetGroupStyles = exports.euiFacetGroupStyles = function euiFacetGroupStyles(_ref4) {
+  var euiTheme = _ref4.euiTheme;
+  var gutterSizesMap = {
+    none: 0,
+    s: euiTheme.size.xs,
+    m: euiTheme.size.s,
+    l: euiTheme.size.m
+  };
+  var _getVerticalGutters = function _getVerticalGutters(sizeKey) {
+    var size = gutterSizesMap[sizeKey];
+    return "gap: ".concat(size, " 0;");
+  };
+  var _getHorizontalGutters = function _getHorizontalGutters(sizeKey) {
+    var size = gutterSizesMap[sizeKey];
+    return "\n      gap: ".concat(size, " ").concat((0, _global_styling.mathWithUnits)([size, euiTheme.size.m], function (x, y) {
+      return x + y;
+    }), ";\n    ");
+  };
   return {
     // Base
     euiFacetGroup: _ref3,
-    // Gutter sizes
-    none: /*#__PURE__*/(0, _react.css)(_facetGroupGutterSize({
-      gutterSize: '0',
-      layout: layout
-    }), ";label:none;"),
-    s: /*#__PURE__*/(0, _react.css)(_facetGroupGutterSize({
-      gutterSize: euiTheme.size.xs,
-      layout: layout
-    }), ";label:s;"),
-    m: /*#__PURE__*/(0, _react.css)(_facetGroupGutterSize({
-      gutterSize: euiTheme.size.s,
-      layout: layout
-    }), ";label:m;"),
-    l: /*#__PURE__*/(0, _react.css)(_facetGroupGutterSize({
-      gutterSize: euiTheme.size.m,
-      layout: layout
-    }), ";label:l;"),
     // layouts
     horizontal: _ref2,
-    vertical: _ref
+    vertical: _ref,
+    gutterSizes: {
+      vertical: {
+        none: /*#__PURE__*/(0, _react.css)(_getVerticalGutters('none'), ";label:none;"),
+        s: /*#__PURE__*/(0, _react.css)(_getVerticalGutters('s'), ";label:s;"),
+        m: /*#__PURE__*/(0, _react.css)(_getVerticalGutters('m'), ";label:m;"),
+        l: /*#__PURE__*/(0, _react.css)(_getVerticalGutters('l'), ";label:l;")
+      },
+      horizontal: {
+        none: /*#__PURE__*/(0, _react.css)(_getHorizontalGutters('none'), ";label:none;"),
+        s: /*#__PURE__*/(0, _react.css)(_getHorizontalGutters('s'), ";label:s;"),
+        m: /*#__PURE__*/(0, _react.css)(_getHorizontalGutters('m'), ";label:m;"),
+        l: /*#__PURE__*/(0, _react.css)(_getHorizontalGutters('l'), ";label:l;")
+      }
+    }
   };
 };

package/optimize/lib/components/filter_group/filter_button.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiFilterButton = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
@@ -53,13 +53,12 @@ var EuiFilterButton = exports.EuiFilterButton = function EuiFilterButton(_ref) {
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var numFiltersDefined = numFilters != null; // != instead of !== to allow for null and undefined
   var numActiveFiltersDefined = numActiveFilters != null && numActiveFilters > 0;
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _filter_button.euiFilterButtonStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_filter_button.euiFilterButtonStyles);
   var cssStyles = [styles.euiFilterButton, withNext && styles.withNext, !grow && styles.noGrow, hasActiveFilters && styles.hasActiveFilters, numFiltersDefined && styles.hasNotification];
-  var _euiFilterButtonChild = (0, _filter_button.euiFilterButtonChildStyles)(euiTheme),
-    contentStyles = _euiFilterButtonChild.content,
-    textStyles = _euiFilterButtonChild.text,
-    notificationStyles = _euiFilterButtonChild.notification;
+  var _useEuiMemoizedStyles = (0, _services.useEuiMemoizedStyles)(_filter_button.euiFilterButtonChildStyles),
+    contentStyles = _useEuiMemoizedStyles.content,
+    textStyles = _useEuiMemoizedStyles.text,
+    notificationStyles = _useEuiMemoizedStyles.notification;
   var classes = (0, _classnames.default)('euiFilterButton', {
     'euiFilterButton-isSelected': isSelected,
     'euiFilterButton-hasActiveFilters': hasActiveFilters,
@@ -77,13 +76,7 @@ var EuiFilterButton = exports.EuiFilterButton = function EuiFilterButton(_ref) {
   var availableBadgeLabel = (0, _i18n.useEuiI18n)('euiFilterButton.filterBadgeAvailableAriaLabel', '{count} available filters', {
     count: badgeCount
   });
-  var badgeContent = showBadge && (0, _react2.jsx)(_badge.EuiNotificationBadge, {
-    className: "euiFilterButton__notification",
-    css: [notificationStyles.euiFilterButton__notification, isDisabled && notificationStyles.disabled, ";label:badgeContent;"],
-    "aria-label": hasActiveFilters ? activeBadgeLabel : availableBadgeLabel,
-    color: isDisabled || !hasActiveFilters ? 'subdued' : badgeColor,
-    role: "marquee" // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/marquee_role
-  }, badgeCount);
+  var badgeStyles = [notificationStyles.euiFilterButton__notification, isDisabled && notificationStyles.disabled];
 
   /**
    * Text
@@ -97,14 +90,6 @@ var EuiFilterButton = exports.EuiFilterButton = function EuiFilterButton(_ref) {
     ref = _useInnerText2[0],
     innerText = _useInnerText2[1];
   var dataText = children && typeof children === 'string' ? children : innerText;
-  var textContent = (0, _react2.jsx)("span", (0, _extends2.default)({
-    ref: ref,
-    "data-text": dataText,
-    title: dataText
-  }, textProps, {
-    className: buttonTextClassNames,
-    css: textCssStyles
-  }), children);
   return (0, _react2.jsx)(_button_empty.EuiButtonEmpty, (0, _extends2.default)({
     className: classes,
     css: cssStyles,
@@ -117,5 +102,18 @@ var EuiFilterButton = exports.EuiFilterButton = function EuiFilterButton(_ref) {
     contentProps: _objectSpread(_objectSpread({}, contentProps), {}, {
       css: [contentStyles.euiFilterButton__content, iconType && contentStyles.hasIcon, contentProps === null || contentProps === void 0 ? void 0 : contentProps.css]
     })
-  }, rest), textContent, badgeContent);
+  }, rest), (0, _react2.jsx)("span", (0, _extends2.default)({
+    ref: ref,
+    "data-text": dataText,
+    title: dataText
+  }, textProps, {
+    className: buttonTextClassNames,
+    css: textCssStyles
+  }), children), showBadge && (0, _react2.jsx)(_badge.EuiNotificationBadge, {
+    className: "euiFilterButton__notification",
+    css: badgeStyles,
+    "aria-label": hasActiveFilters ? activeBadgeLabel : availableBadgeLabel,
+    color: isDisabled || !hasActiveFilters ? 'subdued' : badgeColor,
+    role: "marquee" // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/marquee_role
+  }, badgeCount));
 };

package/optimize/lib/components/filter_group/filter_group.js

@@ -27,8 +27,7 @@ var EuiFilterGroup = exports.EuiFilterGroup = function EuiFilterGroup(_ref) {
     fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
     compressed = _ref.compressed,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _filter_group.euiFilterGroupStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_filter_group.euiFilterGroupStyles);
   var cssStyles = [styles.euiFilterGroup, fullWidth && styles.fullWidth, compressed ? styles.compressed : styles.uncompressed];
   var classes = (0, _classnames.default)('euiFilterGroup', className);
   return (0, _react2.jsx)("div", (0, _extends2.default)({

package/optimize/lib/components/flyout/flyout.js

@@ -245,6 +245,7 @@ var EuiFlyout = exports.EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function
     ref: setRef
   }, rest, {
     role: !isPushed ? 'dialog' : rest.role,
+    "aria-modal": !isPushed || undefined,
     tabIndex: !isPushed ? 0 : rest.tabIndex,
     "aria-describedby": !isPushed ? ariaDescribedBy : _ariaDescribedBy,
     "data-autofocus": !isPushed || undefined

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

@@ -49,16 +49,15 @@ var EuiHeader = exports.EuiHeader = function EuiHeader(_ref) {
     theme = _ref$theme === void 0 ? 'default' : _ref$theme,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiHeader', className);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _header.euiHeaderStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_header.euiHeaderStyles);
   var cssStyles = [styles.euiHeader, styles[position], styles[theme]];
-  var contents;
-  if (sections) {
-    if (children) {
-      // In case both children and sections are passed, warn in the console that the children will be disregarded
-      console.warn('EuiHeader cannot accept both `children` and `sections`. It will disregard the `children`.');
-    }
-    contents = sections.map(function (section, index) {
+  if (sections && children) {
+    // In case both children and sections are passed, warn in the console that the children will be disregarded
+    console.warn('EuiHeader cannot accept both `children` and `sections`. It will disregard the `children`.');
+  }
+  var contents = (0, _react.useMemo)(function () {
+    if (!sections || !sections.length) return null;
+    return sections.map(function (section, index) {
       var content = [];
       if (section.items) {
         // Items get wrapped in EuiHeaderSection and each item in a EuiHeaderSectionItem
@@ -77,9 +76,7 @@ var EuiHeader = exports.EuiHeader = function EuiHeader(_ref) {
       }
       return content;
     });
-  } else {
-    contents = children;
-  }
+  }, [sections]) || children;
   return position === 'fixed' ? (0, _react2.jsx)(EuiFixedHeader, (0, _extends2.default)({
     css: cssStyles,
     className: classes
@@ -105,8 +102,7 @@ var EuiFixedHeader = exports.EuiFixedHeader = function EuiFixedHeader(_ref2) {
     rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
   var _useEuiThemeCSSVariab = (0, _services.useEuiThemeCSSVariables)(),
     setGlobalCSSVariables = _useEuiThemeCSSVariab.setGlobalCSSVariables;
-  var euiTheme = (0, _services.useEuiTheme)();
-  var headerHeight = (0, _header.euiHeaderVariables)(euiTheme).height;
+  var headerHeight = (0, _services.useEuiMemoizedStyles)(_header.euiHeaderVariables).height;
   var getHeaderOffset = (0, _react.useCallback)(function () {
     return (0, _global_styling.mathWithUnits)(headerHeight, function (x) {
       return x * euiFixedHeadersCount;

package/optimize/lib/components/header/header_alert/header_alert.js

@@ -29,8 +29,7 @@ var EuiHeaderAlert = exports.EuiHeaderAlert = function EuiHeaderAlert(_ref) {
     title = _ref.title,
     badge = _ref.badge,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _header_alert.euiHeaderAlertStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_header_alert.euiHeaderAlertStyles);
   var classes = (0, _classnames.default)('euiHeaderAlert', className);
   var ariaId = (0, _services.useGeneratedHtmlId)();
   return (0, _react2.jsx)("article", (0, _extends2.default)({

package/optimize/lib/components/header/header_links/header_links.js

@@ -41,8 +41,7 @@ var EuiHeaderLinks = exports.EuiHeaderLinks = function EuiHeaderLinks(_ref) {
     popoverButtonProps = _ref.popoverButtonProps,
     popoverProps = _ref.popoverProps,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _header_links.euiHeaderLinksStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_header_links.euiHeaderLinksStyles);
   var _ref2 = popoverButtonProps || {},
     onClick = _ref2.onClick,
     _ref2$iconType = _ref2.iconType,
@@ -68,18 +67,6 @@ var EuiHeaderLinks = exports.EuiHeaderLinks = function EuiHeaderLinks(_ref) {
     };
   }, [closeMenu]);
   var classes = (0, _classnames.default)('euiHeaderLinks', className);
-  var button = (0, _react2.jsx)(_i18n.EuiI18n, {
-    token: "euiHeaderLinks.openNavigationMenu",
-    default: "Open menu"
-  }, function (openNavigationMenu) {
-    return (0, _react2.jsx)(_header_section.EuiHeaderSectionItemButton, (0, _extends2.default)({
-      "aria-label": openNavigationMenu,
-      onClick: onMenuButtonClick
-    }, popoverButtonRest), (0, _react2.jsx)(_icon.EuiIcon, {
-      type: iconType,
-      size: "m"
-    }));
-  });
   var renderedChildren = typeof children === 'function' ? children(closeMenu) : children;
   return (0, _react2.jsx)(_i18n.EuiI18n, {
     token: "euiHeaderLinks.appNavigation",
@@ -97,7 +84,18 @@ var EuiHeaderLinks = exports.EuiHeaderLinks = function EuiHeaderLinks(_ref) {
     }, renderedChildren)), (0, _react2.jsx)(_responsive.EuiShowFor, {
       sizes: popoverBreakpoints
     }, (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({
-      button: button,
+      button: (0, _react2.jsx)(_i18n.EuiI18n, {
+        token: "euiHeaderLinks.openNavigationMenu",
+        default: "Open menu"
+      }, function (openNavigationMenu) {
+        return (0, _react2.jsx)(_header_section.EuiHeaderSectionItemButton, (0, _extends2.default)({
+          "aria-label": openNavigationMenu,
+          onClick: onMenuButtonClick
+        }, popoverButtonRest), (0, _react2.jsx)(_icon.EuiIcon, {
+          type: iconType,
+          size: "m"
+        }));
+      }),
       isOpen: mobileMenuIsOpen,
       anchorPosition: "downRight",
       closePopover: closeMenu,

package/optimize/lib/components/header/header_logo/header_logo.js

@@ -34,8 +34,7 @@ var EuiHeaderLogo = exports.EuiHeaderLogo = function EuiHeaderLogo(_ref) {
     className = _ref.className,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiHeaderLogo', className);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _header_logo.euiHeaderLogoStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_header_logo.euiHeaderLogoStyles);
   var secureRel = (0, _services.getSecureRelForTarget)({
     href: href,
     rel: rel,

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

@@ -27,8 +27,7 @@ var EuiHeaderSectionItem = exports.EuiHeaderSectionItem = function EuiHeaderSect
   var children = _ref.children,
     className = _ref.className,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _header_section_item.euiHeaderSectionItemStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_header_section_item.euiHeaderSectionItemStyles);
   var classes = (0, _classnames.default)('euiHeaderSectionItem', className);
 
   // we check if there is any children and if not, we don't render anything

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

@@ -14,7 +14,6 @@ var _services = require("../../../services");
 var _badge_notification = require("../../badge/notification_badge/badge_notification");
 var _icon = require("../../icon");
 var _button = require("../../button");
-var _responsive = require("../../responsive");
 var _header_section_item_button = require("./header_section_item_button.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "notification", "notificationColor"];
@@ -146,30 +145,28 @@ ref) {
     };
     return buttonRef.current;
   }, []);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _header_section_item_button.euiHeaderSectionItemButtonStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_header_section_item_button.euiHeaderSectionItemButtonStyles);
   var classes = (0, _classnames.default)('euiHeaderSectionItemButton', className);
-  var notificationDot = (0, _react2.jsx)(_icon.EuiIcon, {
-    className: "euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--dot",
-    css: [styles.notification.euiHeaderSectionItemButton__notification, styles.notification.dot, ";label:notificationDot;"],
-    color: notificationColor,
-    type: "dot",
-    size: "l"
-  });
-  var buttonNotification;
-  if (notification === true) {
-    buttonNotification = notificationDot;
-  } else if (notification) {
-    buttonNotification = (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_responsive.EuiHideFor, {
-      sizes: ['xs']
-    }, (0, _react2.jsx)(_badge_notification.EuiNotificationBadge, {
-      className: "euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--badge",
-      css: [styles.notification.euiHeaderSectionItemButton__notification, styles.notification.badge, ";label:buttonNotification;"],
-      color: notificationColor
-    }, notification)), (0, _react2.jsx)(_responsive.EuiShowFor, {
-      sizes: ['xs']
-    }, notificationDot));
-  }
+  var isSmallScreen = (0, _services.useIsWithinMaxBreakpoint)('s');
+  var shouldShowDot = notification === true || !!(notification && isSmallScreen);
+  var buttonNotification = (0, _react.useMemo)(function () {
+    var cssStyles = [styles.notification.euiHeaderSectionItemButton__notification, shouldShowDot ? styles.notification.dot : styles.notification.badge];
+    if (shouldShowDot) {
+      return (0, _react2.jsx)(_icon.EuiIcon, {
+        className: "euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--dot",
+        css: cssStyles,
+        color: notificationColor,
+        type: "dot",
+        size: "l"
+      });
+    } else if (notification) {
+      return (0, _react2.jsx)(_badge_notification.EuiNotificationBadge, {
+        className: "euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--badge",
+        css: cssStyles,
+        color: notificationColor
+      }, notification);
+    }
+  }, [notification, notificationColor, styles.notification, shouldShowDot]);
   return (0, _react2.jsx)(_button.EuiButtonEmpty, (0, _extends2.default)({
     className: classes,
     css: styles.euiHeaderSectionItemButton,

package/{test-env/components/icon/assets/discuss.js → optimize/lib/components/icon/assets/comment.js}

@@ -21,7 +21,7 @@ var _excluded = ["title", "titleId"];
 // THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var EuiIconDiscuss = function EuiIconDiscuss(_ref) {
+var EuiIconComment = function EuiIconComment(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -41,4 +41,4 @@ var EuiIconDiscuss = function EuiIconDiscuss(_ref) {
     clipRule: "evenodd"
   }));
 };
-var icon = exports.icon = EuiIconDiscuss;
+var icon = exports.icon = EuiIconComment;

package/{test-env/components/icon/assets/controls_vertical.js → optimize/lib/components/icon/assets/controls.js}

@@ -21,7 +21,7 @@ var _excluded = ["title", "titleId"];
 // THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var EuiIconControlsVertical = function EuiIconControlsVertical(_ref) {
+var EuiIconControls = function EuiIconControls(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -39,4 +39,4 @@ var EuiIconControlsVertical = function EuiIconControlsVertical(_ref) {
     clipRule: "evenodd"
   }));
 };
-var icon = exports.icon = EuiIconControlsVertical;
+var icon = exports.icon = EuiIconControls;

package/{test-env/components/icon/assets/beaker.js → optimize/lib/components/icon/assets/flask.js}

@@ -21,7 +21,7 @@ var _excluded = ["title", "titleId"];
 // THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var EuiIconBeaker = function EuiIconBeaker(_ref) {
+var EuiIconFlask = function EuiIconFlask(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -39,4 +39,4 @@ var EuiIconBeaker = function EuiIconBeaker(_ref) {
     clipRule: "evenodd"
   }));
 };
-var icon = exports.icon = EuiIconBeaker;
+var icon = exports.icon = EuiIconFlask;

package/{test-env/components/icon/assets/glasses.js → optimize/lib/components/icon/assets/readOnly.js}

@@ -21,7 +21,7 @@ var _excluded = ["title", "titleId"];
 // THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var EuiIconGlasses = function EuiIconGlasses(_ref) {
+var EuiIconReadOnly = function EuiIconReadOnly(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -53,4 +53,4 @@ var EuiIconGlasses = function EuiIconGlasses(_ref) {
     d: "m9.5 9.5.447.224a.502.502 0 0 0 0-.448L9.5 9.5Z"
   })));
 };
-var icon = exports.icon = EuiIconGlasses;
+var icon = exports.icon = EuiIconReadOnly;

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

@@ -36,7 +36,8 @@ var typeToPathMap = exports.typeToPathMap = {
   asterisk: 'asterisk',
   at: 'at',
   auditbeatApp: 'app_auditbeat',
-  beaker: 'beaker',
+  beaker: 'flask',
+  // NOTE: To be deprecated in favor of `flask`
   bell: 'bell',
   bellSlash: 'bellSlash',
   beta: 'beta',
@@ -69,6 +70,7 @@ var typeToPathMap = exports.typeToPathMap = {
   code: 'code',
   codeApp: 'app_code',
   color: 'color',
+  comment: 'comment',
   compute: 'compute',
   console: 'console',
   consoleApp: 'app_console',
@@ -79,8 +81,11 @@ var typeToPathMap = exports.typeToPathMap = {
   continuityWithin: 'continuityWithin',
   contrast: 'contrast',
   contrastHigh: 'contrastHigh',
-  controlsHorizontal: 'controls_horizontal',
-  controlsVertical: 'controls_vertical',
+  controls: 'controls',
+  controlsHorizontal: 'controls',
+  // NOTE: To be deprecated in favor of `controls`
+  controlsVertical: 'controls',
+  // NOTE: To be deprecated in favor of `controls`
   copy: 'copy',
   copyClipboard: 'copy_clipboard',
   createAdvancedJob: 'ml_create_advanced_job',
@@ -102,7 +107,8 @@ var typeToPathMap = exports.typeToPathMap = {
   devToolsApp: 'app_devtools',
   diff: 'diff',
   discoverApp: 'app_discover',
-  discuss: 'discuss',
+  discuss: 'comment',
+  // NOTE: To be deprecated in favor of `comment`
   document: 'document',
   documentEdit: 'documentEdit',
   documentation: 'documentation',
@@ -117,8 +123,10 @@ var typeToPathMap = exports.typeToPathMap = {
   editorAlignRight: 'editor_align_right',
   editorBold: 'editor_bold',
   editorChecklist: 'editor_checklist',
-  editorCodeBlock: 'editor_code_block',
-  editorComment: 'editor_comment',
+  editorCodeBlock: 'code',
+  // NOTE: To be deprecated in favor of `code`
+  editorComment: 'comment',
+  // NOTE: To be deprecated in favor of `comment`
   editorDistributeHorizontal: 'editorDistributeHorizontal',
   editorDistributeVertical: 'editorDistributeVertical',
   editorHeading: 'editor_heading',
@@ -153,7 +161,9 @@ var typeToPathMap = exports.typeToPathMap = {
   exit: 'exit',
   expand: 'expand',
   expandMini: 'expandMini',
+  export: 'export',
   exportAction: 'export',
+  // NOTE: To be deprecated in favor of `export`
   eye: 'eye',
   eyeClosed: 'eye_closed',
   faceHappy: 'face_happy',
@@ -166,6 +176,7 @@ var typeToPathMap = exports.typeToPathMap = {
   filterIgnore: 'filterIgnore',
   filterInclude: 'filterInclude',
   filterInCircle: 'filterInCircle',
+  flask: 'flask',
   flag: 'flag',
   fleetApp: 'app_agent',
   fold: 'fold',
@@ -180,7 +191,8 @@ var typeToPathMap = exports.typeToPathMap = {
   function: 'function',
   gear: 'gear',
   gisApp: 'app_gis',
-  glasses: 'glasses',
+  glasses: 'readOnly',
+  // NOTE: To be deprecated in favor of `readOnly`
   globe: 'globe',
   grab: 'grab',
   grabHorizontal: 'grab_horizontal',
@@ -363,6 +375,7 @@ var typeToPathMap = exports.typeToPathMap = {
   push: 'push',
   questionInCircle: 'question_in_circle',
   quote: 'quote',
+  readOnly: 'readOnly',
   recentlyViewedApp: 'app_recently_viewed',
   refresh: 'refresh',
   regressionJob: 'ml_regression_job',
@@ -438,7 +451,8 @@ var typeToPathMap = exports.typeToPathMap = {
   upgradeAssistantApp: 'app_upgrade_assistant',
   uptimeApp: 'app_uptime',
   user: 'user',
-  userAvatar: 'userAvatar',
+  userAvatar: 'user',
+  // NOTE: To be deprecated in favor of `user`
   users: 'users',
   usersRolesApp: 'app_users_roles',
   vector: 'vector',
@@ -460,7 +474,8 @@ var typeToPathMap = exports.typeToPathMap = {
   visTagCloud: 'vis_tag_cloud',
   visText: 'vis_text',
   visTimelion: 'vis_timelion',
-  visVega: 'vis_vega',
+  visVega: 'code',
+  // NOTE: To be deprecated in favor of `code`
   visVisualBuilder: 'vis_visual_builder',
   visualizeApp: 'app_visualize',
   vulnerabilityManagementApp: 'app_vulnerability_management',