@elastic/eui 101.3.0 → 101.4.0

package/optimize/es/components/facet/facet_button.js

@@ -1,6 +1,9 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "className", "icon", "isDisabled", "isLoading", "isSelected", "quantity", "buttonRef"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -9,13 +12,13 @@ var _excluded = ["children", "className", "icon", "isDisabled", "isLoading", "is
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { EuiNotificationBadge } from '../badge';
 import { EuiLoadingSpinner } from '../loading';
 import { EuiInnerText } from '../inner_text';
-import { useEuiTheme, cloneElementWithCss } from '../../services';
-import { euiFacetButtonStyles, euiFacetButtonTextStyles, euiFacetButtonIconStyles, euiFacetButtonQuantityStyles, euiFacetButtonLoadingSpinnerStyles } from './facet_button.styles';
+import { useEuiMemoizedStyles, cloneElementWithCss } from '../../services';
+import { euiFacetButtonStyles, euiFacetButtonTextStyles, euiFacetButton__disabled } from './facet_button.styles';
 import { EuiButtonDisplay, isButtonDisabled } from '../button/button_display/_button_display';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiFacetButton = function EuiFacetButton(_ref) {
@@ -38,42 +41,42 @@ export var EuiFacetButton = function EuiFacetButton(_ref) {
   });
   var selection = isSelected ? 'isSelected' : 'unSelected';
   var classes = classNames('euiFacetButton', className);
-  var theme = useEuiTheme();
-  var styles = euiFacetButtonStyles(theme);
+  var styles = useEuiMemoizedStyles(euiFacetButtonStyles);
   var cssStyles = [styles.euiFacetButton];
-  var textStyles = euiFacetButtonTextStyles(theme);
+  var textStyles = useEuiMemoizedStyles(euiFacetButtonTextStyles);
   var cssTextStyles = [textStyles.euiFacetButton__text, textStyles[selection]];
-  var quantityStyles = euiFacetButtonQuantityStyles();
-  var cssQuantityStyles = [quantityStyles.euiFacetButton__quantity, isDisabled && quantityStyles.isDisabled];
-  var iconStyles = euiFacetButtonIconStyles();
-  var cssIconStyles = [iconStyles.euiFacetButton__icon, isDisabled && quantityStyles.isDisabled];
-  var loadingSpinnerStyles = euiFacetButtonLoadingSpinnerStyles();
-  var cssLoadingSpinnerStyles = [loadingSpinnerStyles.euiFacetButton__loadingSpinner];
+
+  // Spreading an obj/conditionally passing the `css` prop makes it so
+  // an empty `css-0` className isn't rendered in the DOM
+  var disabledStyles = useMemo(function () {
+    return isDisabled ? {
+      css: euiFacetButton__disabled
+    } : undefined;
+  }, [isDisabled]);
 
   // Add quantity number if provided or loading indicator
-  var buttonQuantity;
-  if (isLoading) {
-    buttonQuantity = ___EmotionJSX(EuiLoadingSpinner, {
-      css: cssLoadingSpinnerStyles,
-      size: "m"
-    });
-  } else if (typeof quantity === 'number') {
-    buttonQuantity = ___EmotionJSX(EuiNotificationBadge, {
-      css: cssQuantityStyles,
-      className: "euiFacetButton__quantity",
-      size: "m",
-      color: !isSelected || isDisabled ? 'subdued' : 'accent'
-    }, quantity);
-  }
+  var buttonQuantity = useMemo(function () {
+    if (isLoading) {
+      return ___EmotionJSX(EuiLoadingSpinner, {
+        size: "m"
+      });
+    } else if (typeof quantity === 'number') {
+      return ___EmotionJSX(EuiNotificationBadge, _extends({}, disabledStyles, {
+        className: "euiFacetButton__quantity",
+        size: "m",
+        color: !isSelected || isDisabled ? 'subdued' : 'accent'
+      }), quantity);
+    }
+  }, [quantity, isLoading, isDisabled, disabledStyles, isSelected]);
 
   // Add an icon to the button if one exists.
-  var buttonIcon;
-  if ( /*#__PURE__*/React.isValidElement(icon)) {
-    buttonIcon = cloneElementWithCss(icon, {
-      css: cssIconStyles,
-      className: 'euiFacetButton__icon'
-    });
-  }
+  var buttonIcon = useMemo(function () {
+    if ( /*#__PURE__*/React.isValidElement(icon)) {
+      return cloneElementWithCss(icon, _objectSpread({
+        className: 'euiFacetButton__icon'
+      }, disabledStyles));
+    }
+  }, [icon, disabledStyles]);
   return ___EmotionJSX(EuiInnerText, null, function (ref, innerText) {
     return ___EmotionJSX(EuiButtonDisplay, _extends({
       className: classes,

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

@@ -9,51 +9,28 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { euiTextTruncate, euiTextShift, logicalTextAlignCSS } from '../../global_styling';
-export var euiFacetButtonStyles = function euiFacetButtonStyles(_ref3) {
-  var euiTheme = _ref3.euiTheme;
+export var euiFacetButtonStyles = function euiFacetButtonStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
   return {
     // Base
     euiFacetButton: /*#__PURE__*/css(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;")
   };
 };
-export var euiFacetButtonTextStyles = function euiFacetButtonTextStyles(_ref4) {
-  var euiTheme = _ref4.euiTheme;
+export var euiFacetButtonTextStyles = function euiFacetButtonTextStyles(_ref2) {
+  var euiTheme = _ref2.euiTheme;
   return {
     euiFacetButton__text: /*#__PURE__*/css(euiTextShift('bold', 'data-text', euiTheme), " ", euiTextTruncate(), " flex-grow:1;;label:euiFacetButton__text;"),
     isSelected: /*#__PURE__*/css("font-weight:", euiTheme.font.weight.bold, ";;label:isSelected;"),
     unSelected: /*#__PURE__*/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__
-};
-export var euiFacetButtonIconStyles = function euiFacetButtonIconStyles() {
-  return {
-    euiFacetButton__icon: /*#__PURE__*/css(";label:euiFacetButton__icon;"),
-    isDisabled: _ref2
-  };
-};
-export var euiFacetButtonLoadingSpinnerStyles = function euiFacetButtonLoadingSpinnerStyles() {
-  return {
-    euiFacetButton__loadingSpinner: /*#__PURE__*/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
+export var 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__
-};
-export var euiFacetButtonQuantityStyles = function euiFacetButtonQuantityStyles() {
-  return {
-    euiFacetButton__quantity: /*#__PURE__*/css(";label:euiFacetButton__quantity;"),
-    isDisabled: _ref
-  };
 };

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

@@ -11,7 +11,7 @@ var _excluded = ["children", "className", "layout", "gutterSize"];
 
 import React from 'react';
 import classNames from 'classnames';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { euiFacetGroupStyles } from './facet_group.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var LAYOUTS = ['vertical', 'horizontal'];
@@ -24,9 +24,8 @@ export var EuiFacetGroup = function EuiFacetGroup(_ref) {
     _ref$gutterSize = _ref.gutterSize,
     gutterSize = _ref$gutterSize === void 0 ? 'm' : _ref$gutterSize,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var theme = useEuiTheme();
-  var styles = euiFacetGroupStyles(theme, layout);
-  var cssStyles = [styles.euiFacetGroup, styles[gutterSize], styles[layout]];
+  var styles = useEuiMemoizedStyles(euiFacetGroupStyles);
+  var cssStyles = [styles.euiFacetGroup, styles.gutterSizes[layout][gutterSize], styles[layout]];
   var classes = classNames('euiFacetGroup', className);
   return ___EmotionJSX("div", _extends({
     className: classes,

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

@@ -8,17 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { useEuiTheme } from '../../services';
-var _facetGroupGutterSize = function _facetGroupGutterSize(_ref4) {
-  var gutterSize = _ref4.gutterSize,
-    layout = _ref4.layout;
-  var _useEuiTheme = 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;");
-};
+import { mathWithUnits } from '../../global_styling';
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "omnk2l-vertical",
   styles: "flex-direction:column;label:vertical;"
@@ -43,30 +33,43 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
   styles: "display:flex;flex-grow:1;label:euiFacetGroup;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-export var euiFacetGroupStyles = function euiFacetGroupStyles(_ref5, layout) {
-  var euiTheme = _ref5.euiTheme;
+export var 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(mathWithUnits([size, euiTheme.size.m], function (x, y) {
+      return x + y;
+    }), ";\n    ");
+  };
   return {
     // Base
     euiFacetGroup: _ref3,
-    // Gutter sizes
-    none: /*#__PURE__*/css(_facetGroupGutterSize({
-      gutterSize: '0',
-      layout: layout
-    }), ";label:none;"),
-    s: /*#__PURE__*/css(_facetGroupGutterSize({
-      gutterSize: euiTheme.size.xs,
-      layout: layout
-    }), ";label:s;"),
-    m: /*#__PURE__*/css(_facetGroupGutterSize({
-      gutterSize: euiTheme.size.s,
-      layout: layout
-    }), ";label:m;"),
-    l: /*#__PURE__*/css(_facetGroupGutterSize({
-      gutterSize: euiTheme.size.m,
-      layout: layout
-    }), ";label:l;"),
     // layouts
     horizontal: _ref2,
-    vertical: _ref
+    vertical: _ref,
+    gutterSizes: {
+      vertical: {
+        none: /*#__PURE__*/css(_getVerticalGutters('none'), ";label:none;"),
+        s: /*#__PURE__*/css(_getVerticalGutters('s'), ";label:s;"),
+        m: /*#__PURE__*/css(_getVerticalGutters('m'), ";label:m;"),
+        l: /*#__PURE__*/css(_getVerticalGutters('l'), ";label:l;")
+      },
+      horizontal: {
+        none: /*#__PURE__*/css(_getHorizontalGutters('none'), ";label:none;"),
+        s: /*#__PURE__*/css(_getHorizontalGutters('s'), ";label:s;"),
+        m: /*#__PURE__*/css(_getHorizontalGutters('m'), ";label:m;"),
+        l: /*#__PURE__*/css(_getHorizontalGutters('l'), ";label:l;")
+      }
+    }
   };
 };

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

@@ -1,5 +1,5 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "className", "iconType", "iconSide", "color", "badgeColor", "hasActiveFilters", "numFilters", "numActiveFilters", "isDisabled", "isSelected", "type", "grow", "withNext", "textProps", "contentProps"];
@@ -15,7 +15,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 
 import React from 'react';
 import classNames from 'classnames';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { useEuiI18n } from '../i18n';
 import { useInnerText } from '../inner_text';
 import { EuiNotificationBadge } from '../badge';
@@ -47,13 +47,12 @@ export var EuiFilterButton = function EuiFilterButton(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var numFiltersDefined = numFilters != null; // != instead of !== to allow for null and undefined
   var numActiveFiltersDefined = numActiveFilters != null && numActiveFilters > 0;
-  var euiTheme = useEuiTheme();
-  var styles = euiFilterButtonStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiFilterButtonStyles);
   var cssStyles = [styles.euiFilterButton, withNext && styles.withNext, !grow && styles.noGrow, hasActiveFilters && styles.hasActiveFilters, numFiltersDefined && styles.hasNotification];
-  var _euiFilterButtonChild = euiFilterButtonChildStyles(euiTheme),
-    contentStyles = _euiFilterButtonChild.content,
-    textStyles = _euiFilterButtonChild.text,
-    notificationStyles = _euiFilterButtonChild.notification;
+  var _useEuiMemoizedStyles = useEuiMemoizedStyles(euiFilterButtonChildStyles),
+    contentStyles = _useEuiMemoizedStyles.content,
+    textStyles = _useEuiMemoizedStyles.text,
+    notificationStyles = _useEuiMemoizedStyles.notification;
   var classes = classNames('euiFilterButton', {
     'euiFilterButton-isSelected': isSelected,
     'euiFilterButton-hasActiveFilters': hasActiveFilters,
@@ -71,13 +70,7 @@ export var EuiFilterButton = function EuiFilterButton(_ref) {
   var availableBadgeLabel = useEuiI18n('euiFilterButton.filterBadgeAvailableAriaLabel', '{count} available filters', {
     count: badgeCount
   });
-  var badgeContent = showBadge && ___EmotionJSX(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
@@ -91,14 +84,6 @@ export var EuiFilterButton = function EuiFilterButton(_ref) {
     ref = _useInnerText2[0],
     innerText = _useInnerText2[1];
   var dataText = children && typeof children === 'string' ? children : innerText;
-  var textContent = ___EmotionJSX("span", _extends({
-    ref: ref,
-    "data-text": dataText,
-    title: dataText
-  }, textProps, {
-    className: buttonTextClassNames,
-    css: textCssStyles
-  }), children);
   return ___EmotionJSX(EuiButtonEmpty, _extends({
     className: classes,
     css: cssStyles,
@@ -111,5 +96,18 @@ export var 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), ___EmotionJSX("span", _extends({
+    ref: ref,
+    "data-text": dataText,
+    title: dataText
+  }, textProps, {
+    className: buttonTextClassNames,
+    css: textCssStyles
+  }), children), showBadge && ___EmotionJSX(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/es/components/filter_group/filter_group.js

@@ -11,7 +11,7 @@ var _excluded = ["children", "className", "fullWidth", "compressed"];
 
 import React from 'react';
 import classNames from 'classnames';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { euiFilterGroupStyles } from './filter_group.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiFilterGroup = function EuiFilterGroup(_ref) {
@@ -21,8 +21,7 @@ export var EuiFilterGroup = function EuiFilterGroup(_ref) {
     fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
     compressed = _ref.compressed,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var euiTheme = useEuiTheme();
-  var styles = euiFilterGroupStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiFilterGroupStyles);
   var cssStyles = [styles.euiFilterGroup, fullWidth && styles.fullWidth, compressed ? styles.compressed : styles.uncompressed];
   var classes = classNames('euiFilterGroup', className);
   return ___EmotionJSX("div", _extends({

package/optimize/es/components/flyout/flyout.js

@@ -236,6 +236,7 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
     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/es/components/header/header.js

@@ -16,7 +16,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 
 import React, { useEffect, useState, useMemo, useCallback } from 'react';
 import classNames from 'classnames';
-import { useEuiTheme, useEuiThemeCSSVariables } from '../../services';
+import { useEuiMemoizedStyles, useEuiThemeCSSVariables } from '../../services';
 import { mathWithUnits, logicalStyles } from '../../global_styling';
 import { EuiHeaderBreadcrumbs } from './header_breadcrumbs';
 import { EuiHeaderSectionItem, EuiHeaderSection } from './header_section';
@@ -39,16 +39,15 @@ export var EuiHeader = function EuiHeader(_ref) {
     theme = _ref$theme === void 0 ? 'default' : _ref$theme,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiHeader', className);
-  var euiTheme = useEuiTheme();
-  var styles = euiHeaderStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(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 = 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
@@ -67,9 +66,7 @@ export var EuiHeader = function EuiHeader(_ref) {
       }
       return content;
     });
-  } else {
-    contents = children;
-  }
+  }, [sections]) || children;
   return position === 'fixed' ? ___EmotionJSX(EuiFixedHeader, _extends({
     css: cssStyles,
     className: classes
@@ -95,8 +92,7 @@ export var EuiFixedHeader = function EuiFixedHeader(_ref2) {
     rest = _objectWithoutProperties(_ref2, _excluded2);
   var _useEuiThemeCSSVariab = useEuiThemeCSSVariables(),
     setGlobalCSSVariables = _useEuiThemeCSSVariab.setGlobalCSSVariables;
-  var euiTheme = useEuiTheme();
-  var headerHeight = euiHeaderVariables(euiTheme).height;
+  var headerHeight = useEuiMemoizedStyles(euiHeaderVariables).height;
   var getHeaderOffset = useCallback(function () {
     return mathWithUnits(headerHeight, function (x) {
       return x * euiFixedHeadersCount;

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

@@ -12,7 +12,7 @@ var _excluded = ["action", "className", "date", "text", "title", "badge"];
 import React from 'react';
 import classNames from 'classnames';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
-import { useEuiTheme, useGeneratedHtmlId } from '../../../services';
+import { useEuiMemoizedStyles, useGeneratedHtmlId } from '../../../services';
 import { euiHeaderAlertStyles } from './header_alert.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiHeaderAlert = function EuiHeaderAlert(_ref) {
@@ -23,8 +23,7 @@ export var EuiHeaderAlert = function EuiHeaderAlert(_ref) {
     title = _ref.title,
     badge = _ref.badge,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var euiTheme = useEuiTheme();
-  var styles = euiHeaderAlertStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiHeaderAlertStyles);
   var classes = classNames('euiHeaderAlert', className);
   var ariaId = useGeneratedHtmlId();
   return ___EmotionJSX("article", _extends({

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

@@ -13,7 +13,7 @@ var _excluded = ["children", "className", "gutterSize", "popoverBreakpoints", "p
 
 import React, { useState, useEffect, useCallback } from 'react';
 import classNames from 'classnames';
-import { useEuiTheme } from '../../../services';
+import { useEuiMemoizedStyles } from '../../../services';
 import { EuiIcon } from '../../icon';
 import { EuiPopover } from '../../popover';
 import { EuiI18n } from '../../i18n';
@@ -32,8 +32,7 @@ export var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
     popoverButtonProps = _ref.popoverButtonProps,
     popoverProps = _ref.popoverProps,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var euiTheme = useEuiTheme();
-  var styles = euiHeaderLinksStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiHeaderLinksStyles);
   var _ref2 = popoverButtonProps || {},
     onClick = _ref2.onClick,
     _ref2$iconType = _ref2.iconType,
@@ -59,18 +58,6 @@ export var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
     };
   }, [closeMenu]);
   var classes = classNames('euiHeaderLinks', className);
-  var button = ___EmotionJSX(EuiI18n, {
-    token: "euiHeaderLinks.openNavigationMenu",
-    default: "Open menu"
-  }, function (openNavigationMenu) {
-    return ___EmotionJSX(EuiHeaderSectionItemButton, _extends({
-      "aria-label": openNavigationMenu,
-      onClick: onMenuButtonClick
-    }, popoverButtonRest), ___EmotionJSX(EuiIcon, {
-      type: iconType,
-      size: "m"
-    }));
-  });
   var renderedChildren = typeof children === 'function' ? children(closeMenu) : children;
   return ___EmotionJSX(EuiI18n, {
     token: "euiHeaderLinks.appNavigation",
@@ -88,7 +75,18 @@ export var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
     }, renderedChildren)), ___EmotionJSX(EuiShowFor, {
       sizes: popoverBreakpoints
     }, ___EmotionJSX(EuiPopover, _extends({
-      button: button,
+      button: ___EmotionJSX(EuiI18n, {
+        token: "euiHeaderLinks.openNavigationMenu",
+        default: "Open menu"
+      }, function (openNavigationMenu) {
+        return ___EmotionJSX(EuiHeaderSectionItemButton, _extends({
+          "aria-label": openNavigationMenu,
+          onClick: onMenuButtonClick
+        }, popoverButtonRest), ___EmotionJSX(EuiIcon, {
+          type: iconType,
+          size: "m"
+        }));
+      }),
       isOpen: mobileMenuIsOpen,
       anchorPosition: "downRight",
       closePopover: closeMenu,

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

@@ -11,7 +11,7 @@ var _excluded = ["iconType", "iconTitle", "href", "rel", "target", "children", "
 
 import React from 'react';
 import classNames from 'classnames';
-import { useEuiTheme, getSecureRelForTarget } from '../../../services';
+import { useEuiMemoizedStyles, getSecureRelForTarget } from '../../../services';
 import { validateHref } from '../../../services/security/href_validator';
 import { EuiIcon } from '../../icon';
 import { euiHeaderLogoStyles } from './header_logo.styles';
@@ -28,8 +28,7 @@ export var EuiHeaderLogo = function EuiHeaderLogo(_ref) {
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiHeaderLogo', className);
-  var euiTheme = useEuiTheme();
-  var styles = euiHeaderLogoStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiHeaderLogoStyles);
   var secureRel = getSecureRelForTarget({
     href: href,
     rel: rel,

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

@@ -11,7 +11,7 @@ var _excluded = ["children", "className"];
 
 import React from 'react';
 import classNames from 'classnames';
-import { useEuiTheme } from '../../../services';
+import { useEuiMemoizedStyles } from '../../../services';
 import { euiHeaderSectionItemStyles } from './header_section_item.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 /**
@@ -21,8 +21,7 @@ export var EuiHeaderSectionItem = function EuiHeaderSectionItem(_ref) {
   var children = _ref.children,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var euiTheme = useEuiTheme();
-  var styles = euiHeaderSectionItemStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiHeaderSectionItemStyles);
   var classes = classNames('euiHeaderSectionItem', className);
 
   // we check if there is any children and if not, we don't render anything

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

@@ -9,13 +9,12 @@ var _excluded = ["children", "className", "notification", "notificationColor"];
  * Side Public License, v 1.
  */
 
-import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
 import classNames from 'classnames';
-import { useEuiTheme } from '../../../services';
+import { useEuiMemoizedStyles, useIsWithinMaxBreakpoint } from '../../../services';
 import { EuiNotificationBadge } from '../../badge/notification_badge/badge_notification';
 import { EuiIcon } from '../../icon';
 import { EuiButtonEmpty } from '../../button';
-import { EuiHideFor, EuiShowFor } from '../../responsive';
 import { euiHeaderSectionItemButtonStyles } from './header_section_item_button.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiHeaderSectionItemButton = /*#__PURE__*/forwardRef(function (_ref,
@@ -137,30 +136,28 @@ ref) {
     };
     return buttonRef.current;
   }, []);
-  var euiTheme = useEuiTheme();
-  var styles = euiHeaderSectionItemButtonStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiHeaderSectionItemButtonStyles);
   var classes = classNames('euiHeaderSectionItemButton', className);
-  var notificationDot = ___EmotionJSX(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 = ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiHideFor, {
-      sizes: ['xs']
-    }, ___EmotionJSX(EuiNotificationBadge, {
-      className: "euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--badge",
-      css: [styles.notification.euiHeaderSectionItemButton__notification, styles.notification.badge, ";label:buttonNotification;"],
-      color: notificationColor
-    }, notification)), ___EmotionJSX(EuiShowFor, {
-      sizes: ['xs']
-    }, notificationDot));
-  }
+  var isSmallScreen = useIsWithinMaxBreakpoint('s');
+  var shouldShowDot = notification === true || !!(notification && isSmallScreen);
+  var buttonNotification = useMemo(function () {
+    var cssStyles = [styles.notification.euiHeaderSectionItemButton__notification, shouldShowDot ? styles.notification.dot : styles.notification.badge];
+    if (shouldShowDot) {
+      return ___EmotionJSX(EuiIcon, {
+        className: "euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--dot",
+        css: cssStyles,
+        color: notificationColor,
+        type: "dot",
+        size: "l"
+      });
+    } else if (notification) {
+      return ___EmotionJSX(EuiNotificationBadge, {
+        className: "euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--badge",
+        css: cssStyles,
+        color: notificationColor
+      }, notification);
+    }
+  }, [notification, notificationColor, styles.notification, shouldShowDot]);
   return ___EmotionJSX(EuiButtonEmpty, _extends({
     className: classes,
     css: styles.euiHeaderSectionItemButton,

package/optimize/es/components/icon/assets/{discuss.js → comment.js}

@@ -13,7 +13,7 @@ var _excluded = ["title", "titleId"];
 
 import * as React from 'react';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var EuiIconDiscuss = function EuiIconDiscuss(_ref) {
+var EuiIconComment = function EuiIconComment(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -33,4 +33,4 @@ var EuiIconDiscuss = function EuiIconDiscuss(_ref) {
     clipRule: "evenodd"
   }));
 };
-export var icon = EuiIconDiscuss;
+export var icon = EuiIconComment;