@elastic/eui 93.2.0 → 93.3.0

package/optimize/es/components/datagrid/body/data_grid_row_manager.js

@@ -78,7 +78,7 @@ export var useRowManager = function useRowManager(_ref) {
     if (rowClasses) {
       rowIdToElements.current.forEach(function (rowElement, rowIndex) {
         var euiClasses = Array.from(rowElement.classList).filter(function (className) {
-          return className.startsWith('euiDataGridRow');
+          return ['euiDataGridRow', 'euiDataGridRow--striped'].includes(className);
         }).join(' ');
         if (rowClasses[rowIndex]) {
           rowElement.classList.value = "".concat(euiClasses, " ").concat(rowClasses[rowIndex]);

package/optimize/es/components/datagrid/data_grid.js

@@ -3,7 +3,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "columnVisibility", "schemaDetectors", "rowCount", "renderCellValue", "renderCellPopover", "renderFooterCellValue", "className", "gridStyle", "toolbarVisibility", "pagination", "sorting", "inMemory", "onColumnResize", "minSizeForControls", "height", "width", "rowHeightsOptions", "virtualizationOptions", "renderCustomGridBody", "renderCustomToolbar"],
+var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "columnVisibility", "schemaDetectors", "rowCount", "renderCellValue", "cellContext", "renderCellPopover", "renderFooterCellValue", "className", "gridStyle", "toolbarVisibility", "pagination", "sorting", "inMemory", "onColumnResize", "minSizeForControls", "height", "width", "rowHeightsOptions", "virtualizationOptions", "renderCustomGridBody", "renderCustomToolbar"],
   _excluded2 = ["focusProps"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -76,6 +76,7 @@ export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (pr
     schemaDetectors = props.schemaDetectors,
     rowCount = props.rowCount,
     renderCellValue = props.renderCellValue,
+    cellContext = props.cellContext,
     renderCellPopover = props.renderCellPopover,
     renderFooterCellValue = props.renderFooterCellValue,
     className = props.className,
@@ -345,6 +346,7 @@ export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (pr
     schemaDetectors: allSchemaDetectors,
     pagination: pagination,
     renderCellValue: renderCellValue,
+    cellContext: cellContext,
     renderCellPopover: renderCellPopover,
     renderFooterCellValue: renderFooterCellValue,
     rowCount: rowCount,

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

@@ -9,12 +9,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { euiTextTruncate, euiTextShift, logicalTextAlignCSS } from '../../global_styling';
-import { euiLinkFocusCSS } from '../link/link.styles';
 export var euiFacetButtonStyles = function euiFacetButtonStyles(_ref3) {
   var euiTheme = _ref3.euiTheme;
   return {
     // Base
-    euiFacetButton: /*#__PURE__*/css(logicalTextAlignCSS('left'), " &:hover,&:focus{&:not(:disabled) [class*='euiFacetButton__text']{text-decoration:underline;}}&:focus:not(:disabled) [class*='euiFacetButton__text']{", euiLinkFocusCSS(euiTheme), ";}&:disabled{color:", euiTheme.colors.disabledText, ";pointer-events:none;&:hover,&:focus{text-decoration:none;}};label:euiFacetButton;")
+    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) {

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

@@ -7,7 +7,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["type", "size", "color", "className", "tabIndex", "title", "onIconLoad", "theme", "style"];
+var _excluded = ["type", "size", "color", "className", "tabIndex", "title", "onIconLoad", "style", "stylesMemoizer"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -26,7 +26,7 @@ import { keysOf } from '../common';
 import { typeToPathMap } from './icon_map';
 import { icon as empty } from './assets/empty';
 import { enqueueStateChange } from '../../services/react';
-import { htmlIdGenerator, withEuiTheme } from '../../services';
+import { htmlIdGenerator, withEuiStylesMemoizer } from '../../services';
 export { COLORS } from './named_colors';
 import { isNamedColor } from './named_colors';
 import { euiIconStyles } from './icon.styles';
@@ -178,8 +178,8 @@ export var EuiIconClass = /*#__PURE__*/function (_PureComponent) {
         tabIndex = _this$props.tabIndex,
         title = _this$props.title,
         onIconLoad = _this$props.onIconLoad,
-        theme = _this$props.theme,
         style = _this$props.style,
+        stylesMemoizer = _this$props.stylesMemoizer,
         rest = _objectWithoutProperties(_this$props, _excluded);
       var _this$state = this.state,
         isLoading = _this$state.isLoading,
@@ -201,7 +201,7 @@ export var EuiIconClass = /*#__PURE__*/function (_PureComponent) {
       var classes = classNames('euiIcon', className);
 
       // Emotion styles
-      var styles = euiIconStyles(theme);
+      var styles = stylesMemoizer(euiIconStyles);
       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;
       if (typeof icon === 'string') {
@@ -218,33 +218,30 @@ export var EuiIconClass = /*#__PURE__*/function (_PureComponent) {
 
         // If it's an empty icon, or if there is no aria-label, aria-labelledby, or title it gets aria-hidden true
         var isAriaHidden = icon === empty || !(this.props['aria-label'] || this.props['aria-labelledby'] || this.props.title);
-        var hideIconEmpty = isAriaHidden && {
-          'aria-hidden': true
-        };
-        var titleId;
 
         // If no aria-label or aria-labelledby is provided but there's a title, a titleId is generated
         //  The svg aria-labelledby attribute gets this titleId
         //  The svg title element gets this titleId as an id
-        if (!this.props['aria-label'] && !this.props['aria-labelledby'] && title) {
-          titleId = {
-            titleId: generateId()
-          };
-        }
+        var titleId = !this.props['aria-label'] && !this.props['aria-labelledby'] && title ? {
+          titleId: generateId()
+        } : undefined;
         return ___EmotionJSX(Svg, _extends({
           className: classes,
           style: optionalCustomStyles,
           css: cssStyles,
           tabIndex: tabIndex,
           role: "img",
-          title: title,
+          title: title
+        }, titleId, {
           "data-icon-type": iconTitle,
           "data-is-loaded": isLoaded || undefined,
           "data-is-loading": isLoading || undefined
-        }, titleId, rest, hideIconEmpty));
+        }, rest, {
+          "aria-hidden": isAriaHidden || undefined
+        }));
       }
     }
   }]);
   return EuiIconClass;
 }(PureComponent);
-export var EuiIcon = withEuiTheme(EuiIconClass);
+export var EuiIcon = withEuiStylesMemoizer(EuiIconClass);

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

@@ -10,10 +10,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css, keyframes } from '@emotion/react';
-import { logicalCSS, euiCanAnimate } from '../../global_styling';
-var iconSize = function iconSize(size) {
-  return "\n    ".concat(logicalCSS('width', size), ";\n    ").concat(logicalCSS('height', size), ";\n  ");
-};
+import { logicalSizeCSS, euiCanAnimate } from '../../global_styling';
 export var iconLoadingOpacity = 0.05;
 var iconLoading = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    opacity: ", ";\n  }\n\n  100% {\n    opacity: 1;\n  }\n"])), iconLoadingOpacity);
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -52,11 +49,11 @@ export var euiIconStyles = function euiIconStyles(_ref3) {
     logoElasticOutline: _ref,
     // Sizes
     original: /*#__PURE__*/css(";label:original;"),
-    s: /*#__PURE__*/css(iconSize(euiTheme.size.m), ";label:s;"),
-    m: /*#__PURE__*/css(iconSize(euiTheme.size.base), ";label:m;"),
-    l: /*#__PURE__*/css(iconSize(euiTheme.size.l), ";label:l;"),
-    xl: /*#__PURE__*/css(iconSize(euiTheme.size.xl), ";label:xl;"),
-    xxl: /*#__PURE__*/css(iconSize(euiTheme.size.xxl), ";label:xxl;"),
+    s: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.m), ";label:s;"),
+    m: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.base), ";label:m;"),
+    l: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.l), ";label:l;"),
+    xl: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.xl), ";label:xl;"),
+    xxl: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.xxl), ";label:xxl;"),
     // Variants
     // App icons are two-toned. This provides the base color.
     app: /*#__PURE__*/css("fill:", euiTheme.colors.text, ";.euiIcon__fillSecondary{fill:", euiTheme.colors.successText, ";};label:app;"),

package/optimize/es/components/link/external_link_icon.js

@@ -10,7 +10,7 @@ var _excluded = ["target", "external"];
  */
 
 import React from 'react';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { logicalStyle } from '../../global_styling';
 import { EuiIcon } from '../icon';
 import { EuiI18n, useEuiI18n } from '../i18n';
@@ -21,16 +21,19 @@ import { EuiScreenReaderOnly } from '../accessibility';
  * screen readers. Used internally by at EuiLink and EuiListGroupItem
  */
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var EuiExternalLinkIcon = function EuiExternalLinkIcon(_ref) {
-  var target = _ref.target,
-    external = _ref.external,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var _useEuiTheme = useEuiTheme(),
-    euiTheme = _useEuiTheme.euiTheme;
+var iconStyle = function iconStyle(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return logicalStyle('margin-left', euiTheme.size.xs);
+};
+export var EuiExternalLinkIcon = function EuiExternalLinkIcon(_ref2) {
+  var target = _ref2.target,
+    external = _ref2.external,
+    rest = _objectWithoutProperties(_ref2, _excluded);
+  var iconCssStyle = useEuiMemoizedStyles(iconStyle);
   var showExternalLinkIcon = target === '_blank' && external !== false || external === true;
   var iconAriaLabel = useEuiI18n('euiExternalLinkIcon.ariaLabel', 'External link');
   return ___EmotionJSX(React.Fragment, null, showExternalLinkIcon && ___EmotionJSX(EuiIcon, _extends({
-    css: logicalStyle('margin-left', euiTheme.size.xs),
+    css: iconCssStyle,
     "aria-label": iconAriaLabel,
     size: "s",
     type: "popout"

package/optimize/es/components/link/link.js

@@ -14,7 +14,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { forwardRef } from 'react';
 import classNames from 'classnames';
-import { getSecureRelForTarget, useEuiTheme } from '../../services';
+import { getSecureRelForTarget, useEuiMemoizedStyles } from '../../services';
 import { validateHref } from '../../services/security/href_validator';
 import { EuiExternalLinkIcon } from './external_link_icon';
 import { euiLinkStyles } from './link.styles';
@@ -34,8 +34,7 @@ var EuiLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onClick = _ref.onClick,
     _disabled = _ref.disabled,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var euiTheme = useEuiTheme();
-  var styles = euiLinkStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiLinkStyles);
   var cssStyles = [styles.euiLink];
   var isHrefValid = !href || validateHref(href);
   var disabled = _disabled || !isHrefValid;

package/optimize/es/components/link/link.styles.js

@@ -9,18 +9,9 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { euiFocusRing, logicalTextAlignCSS } from '../../global_styling';
-var _colorCSS = function _colorCSS(color) {
-  return "\n    color: ".concat(color, ";\n\n    &:target {\n      color: darken(").concat(color, ", 10%);\n    }\n  ");
-};
-export var euiLinkHoverCSS = function euiLinkHoverCSS() {
-  return "\n    text-decoration: underline;\n  ";
-};
-export var euiLinkFocusCSS = function euiLinkFocusCSS(euiTheme) {
-  return "\n    text-decoration: underline;\n    text-decoration-thickness: ".concat(euiTheme.border.width.thick, ";\n  ");
-};
 export var euiLinkCSS = function euiLinkCSS(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  return "\n    font-weight: ".concat(euiTheme.font.weight.medium, ";\n    ").concat(logicalTextAlignCSS('left'), "\n\n    &:hover {\n      ").concat(euiLinkHoverCSS(), "\n    }\n\n    &:focus {\n      ").concat(euiFocusRing(euiThemeContext, 'outset'), "\n      ").concat(euiLinkFocusCSS(euiTheme), "\n    }\n  ");
+  return "\n    font-weight: ".concat(euiTheme.font.weight.medium, ";\n    ").concat(logicalTextAlignCSS('left'), "\n\n    &:hover {\n      text-decoration: underline;\n    }\n\n    &:focus {\n      ").concat(euiFocusRing(euiThemeContext, 'outset'), "\n      text-decoration: underline;\n      text-decoration-thickness: ").concat(euiTheme.border.width.thick, ";\n    }\n  ");
 };
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "9njbi5-disabled",
@@ -45,4 +36,7 @@ export var euiLinkStyles = function euiLinkStyles(euiThemeContext) {
     ghost: /*#__PURE__*/css(_colorCSS(euiTheme.colors.ghost), ";label:ghost;"),
     text: /*#__PURE__*/css(_colorCSS(euiTheme.colors.text), ";label:text;")
   };
+};
+var _colorCSS = function _colorCSS(color) {
+  return "\n    color: ".concat(color, ";\n\n    &:target {\n      color: darken(").concat(color, ", 10%);\n    }\n  ");
 };

package/optimize/es/components/progress/progress.styles.js

@@ -10,7 +10,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css, keyframes } from '@emotion/react';
-import { logicalCSS, logicalTextAlignCSS, euiCantAnimate, euiFontSize, euiTextTruncate } from '../../global_styling';
+import { logicalCSS, logicalTextAlignCSS, euiCanAnimate, euiCantAnimate, euiFontSize, euiTextTruncate } from '../../global_styling';
 import { euiPaletteColorBlind, makeHighContrastColor } from '../../services';
 import { euiText } from '../text/text.styles';
 
@@ -63,7 +63,7 @@ export var euiProgressStyles = function euiProgressStyles(_ref3, isNative) {
     // https://css-tricks.com/html5-progress-element/
     // Good resource if you need to work in here. There's some gotchas with
     // dealing with cross-browser progress bars.
-    native: /*#__PURE__*/css("display:block;", logicalCSS('width', '100%'), " appearance:none;border:none;border-radius:", euiTheme.size.s, ";&::-webkit-progress-bar{background-color:", euiTheme.colors.lightShade, ";}", crossBrowserProgressValue('transition: width ${euiTheme.animation.normal} linear;'), ";;label:native;"),
+    native: /*#__PURE__*/css("display:block;", logicalCSS('width', '100%'), " appearance:none;border:none;border-radius:", euiTheme.size.s, ";&::-webkit-progress-bar{background-color:", euiTheme.colors.lightShade, ";}", euiCanAnimate, "{/* Note: FF/Mozilla doesn't actually support animating the native progress bar\n        @see https://bugzilla.mozilla.org/show_bug.cgi?id=662351 */", crossBrowserProgressValue("transition: width ".concat(euiTheme.animation.normal, " linear")), ";};label:native;"),
     // An indeterminate bar has an unreliable end time. Because of a Firefox animation issue,
     // we apply this style to a <div> instead of a <progress> element.
     // See https://css-tricks.com/html5-progress-element/ for more info.

package/optimize/es/components/skeleton/skeleton_circle.js

@@ -11,7 +11,7 @@ var _excluded = ["isLoading", "size", "className", "contentAriaLabel", "announce
 
 import React from 'react';
 import classNames from 'classnames';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { EuiSkeletonLoading } from './skeleton_loading';
 import { euiSkeletonCircleStyles } from './skeleton_circle.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -29,8 +29,7 @@ export var EuiSkeletonCircle = function EuiSkeletonCircle(_ref) {
     ariaWrapperProps = _ref.ariaWrapperProps,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var euiTheme = useEuiTheme();
-  var styles = euiSkeletonCircleStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiSkeletonCircleStyles);
   var cssStyles = [styles.euiSkeletonCircle, styles[size]];
   return ___EmotionJSX(EuiSkeletonLoading, _extends({
     isLoading: isLoading,

package/optimize/es/components/skeleton/skeleton_rectangle.js

@@ -14,7 +14,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React from 'react';
 import classNames from 'classnames';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { logicalStyles } from '../../global_styling';
 import { EuiSkeletonLoading } from './skeleton_loading';
 import { euiSkeletonRectangleStyles } from './skeleton_rectangle.styles';
@@ -38,8 +38,7 @@ export var EuiSkeletonRectangle = function EuiSkeletonRectangle(_ref) {
     ariaWrapperProps = _ref.ariaWrapperProps,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var euiTheme = useEuiTheme();
-  var styles = euiSkeletonRectangleStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiSkeletonRectangleStyles);
   var cssStyles = [styles.euiSkeletonRectangle, styles[borderRadius]];
   return ___EmotionJSX(EuiSkeletonLoading, _extends({
     isLoading: isLoading,

package/optimize/es/components/skeleton/skeleton_text.js

@@ -9,9 +9,9 @@ var _excluded = ["isLoading", "lines", "size", "className", "contentAriaLabel",
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { EuiSkeletonLoading } from './skeleton_loading';
 import { euiSkeletonTextStyles } from './skeleton_text.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -31,16 +31,20 @@ export var EuiSkeletonText = function EuiSkeletonText(_ref) {
     ariaWrapperProps = _ref.ariaWrapperProps,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var euiTheme = useEuiTheme();
-  var styles = euiSkeletonTextStyles(euiTheme);
-  var lineCssStyles = [styles.euiSkeletonText, styles[size]];
-  var lineElements = [];
-  for (var i = 0; i < lines; i++) {
-    lineElements.push(___EmotionJSX("span", {
-      key: i,
-      css: lineCssStyles
-    }));
-  }
+  var styles = useEuiMemoizedStyles(euiSkeletonTextStyles);
+  var cssStyles = useMemo(function () {
+    return [styles.euiSkeletonText, styles[size]];
+  }, [styles, size]);
+  var lineElements = useMemo(function () {
+    var lineElements = [];
+    for (var i = 0; i < lines; i++) {
+      lineElements.push(___EmotionJSX("span", {
+        key: i,
+        css: cssStyles
+      }));
+    }
+    return lineElements;
+  }, [lines, cssStyles]);
   return ___EmotionJSX(EuiSkeletonLoading, _extends({
     isLoading: isLoading,
     loadingContent: ___EmotionJSX("span", _extends({

package/optimize/es/components/skeleton/skeleton_title.js

@@ -11,7 +11,7 @@ var _excluded = ["isLoading", "size", "className", "contentAriaLabel", "announce
 
 import React from 'react';
 import classNames from 'classnames';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { EuiSkeletonLoading } from './skeleton_loading';
 import { euiSkeletonTitleStyles } from './skeleton_title.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -28,8 +28,7 @@ export var EuiSkeletonTitle = function EuiSkeletonTitle(_ref) {
     ariaWrapperProps = _ref.ariaWrapperProps,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var euiTheme = useEuiTheme();
-  var styles = euiSkeletonTitleStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiSkeletonTitleStyles);
   var cssStyles = [styles.euiSkeletonTitle, styles[size]];
   return ___EmotionJSX(EuiSkeletonLoading, _extends({
     isLoading: isLoading,

package/optimize/es/components/text/text.js

@@ -11,7 +11,7 @@ var _excluded = ["size", "color", "grow", "textAlign", "children", "className"];
 
 import React from 'react';
 import classNames from 'classnames';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { euiTextStyles } from './text.styles';
 import { EuiTextColor } from './text_color';
 import { EuiTextAlign } from './text_align';
@@ -27,8 +27,7 @@ export var EuiText = function EuiText(_ref) {
     children = _ref.children,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var euiTheme = useEuiTheme();
-  var styles = euiTextStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiTextStyles);
   var cssStyles = [styles.euiText, !grow ? styles.constrainedWidth : undefined, styles[size]];
   var classes = classNames('euiText', className);
   var text = ___EmotionJSX("div", _extends({

package/optimize/es/components/text/text_align.js

@@ -13,7 +13,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { isValidElement } from 'react';
 import { cloneElementWithCss } from '../../services';
-import { euiTextAlignStyles } from './text_align.styles';
+import { euiTextAlignStyles as styles } from './text_align.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var ALIGNMENTS = ['left', 'right', 'center'];
 export var EuiTextAlign = function EuiTextAlign(_ref) {
@@ -23,7 +23,6 @@ export var EuiTextAlign = function EuiTextAlign(_ref) {
     _ref$cloneElement = _ref.cloneElement,
     cloneElement = _ref$cloneElement === void 0 ? false : _ref$cloneElement,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var styles = euiTextAlignStyles();
   var cssStyles = [styles.euiTextAlign, styles[textAlign]];
   var props = _objectSpread({
     css: cssStyles

package/optimize/es/components/text/text_align.styles.js

@@ -8,11 +8,9 @@
 
 import { css } from '@emotion/react';
 import { logicalTextAlignCSS } from '../../global_styling';
-export var euiTextAlignStyles = function euiTextAlignStyles() {
-  return {
-    euiTextAlign: /*#__PURE__*/css(";label:euiTextAlign;"),
-    left: /*#__PURE__*/css(logicalTextAlignCSS('left'), ";;label:left;"),
-    right: /*#__PURE__*/css(logicalTextAlignCSS('right'), ";;label:right;"),
-    center: /*#__PURE__*/css(logicalTextAlignCSS('center'), ";;label:center;")
-  };
+export var euiTextAlignStyles = {
+  euiTextAlign: /*#__PURE__*/css(";label:euiTextAlign;"),
+  left: /*#__PURE__*/css(logicalTextAlignCSS('left'), ";;label:left;"),
+  right: /*#__PURE__*/css(logicalTextAlignCSS('right'), ";;label:right;"),
+  center: /*#__PURE__*/css(logicalTextAlignCSS('center'), ";;label:center;")
 };

package/optimize/es/components/text/text_color.js

@@ -12,7 +12,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 
 import React, { isValidElement } from 'react';
-import { useEuiTheme, cloneElementWithCss } from '../../services';
+import { useEuiMemoizedStyles, cloneElementWithCss } from '../../services';
 import { euiTextColorStyles } from './text_color.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var COLORS = ['default', 'subdued', 'success', 'accent', 'danger', 'warning', 'ghost', 'inherit'];
@@ -27,8 +27,7 @@ export var EuiTextColor = function EuiTextColor(_ref) {
     style = _ref.style,
     rest = _objectWithoutProperties(_ref, _excluded);
   var isNamedColor = COLORS.includes(color);
-  var euiTheme = useEuiTheme();
-  var styles = euiTextColorStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiTextColorStyles);
   var cssStyles = [styles.euiTextColor, isNamedColor ? styles[color] : styles.customColor];
 
   // We're checking if is a custom color.

package/optimize/es/components/title/title.js

@@ -12,7 +12,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 
 import classNames from 'classnames';
-import { useEuiTheme, cloneElementWithCss } from '../../services';
+import { useEuiMemoizedStyles, cloneElementWithCss } from '../../services';
 import { euiTitleStyles } from './title.styles';
 export var TITLE_SIZES = ['xxxs', 'xxs', 'xs', 's', 'm', 'l'];
 export var TEXT_TRANSFORM = ['uppercase'];
@@ -23,8 +23,7 @@ export var EuiTitle = function EuiTitle(_ref) {
     className = _ref.className,
     textTransform = _ref.textTransform,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var euiTheme = useEuiTheme();
-  var styles = euiTitleStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiTitleStyles);
   var cssStyles = [styles.euiTitle, textTransform ? styles[textTransform] : undefined, styles[size]];
   var classes = classNames('euiTitle', className, children.props.className);
   var props = _objectSpread({

package/optimize/es/components/title/title.styles.js

@@ -11,7 +11,6 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { useEuiTheme } from '../../services';
 import { euiTextBreakWord, euiFontSize, logicalCSS } from '../../global_styling';
 
 /**
@@ -36,12 +35,6 @@ export var euiTitle = function euiTitle(euiThemeContext) {
   });
 };
 
-// Hook version
-export var useEuiTitle = function useEuiTitle(scale, options) {
-  var euiTheme = useEuiTheme();
-  return euiTitle(euiTheme, scale, options);
-};
-
 /**
  * Styles
  */

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

@@ -1,3 +1,6 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -7,7 +10,8 @@
  */
 
 import { euiLineHeightFromBaseline, euiFontSizeFromScale } from '../functions/typography';
-import { useEuiTheme } from '../../services/theme/hooks';
+import { useEuiMemoizedStyles, useEuiTheme } from '../../services/theme';
+import { EuiThemeFontScales } from '../variables/typography';
 import { logicalCSS } from '../functions';
 /**
  * Returns font-size and line-height
@@ -21,7 +25,15 @@ export var euiFontSize = function euiFontSize(_ref, scale, options) {
 };
 export var useEuiFontSize = function useEuiFontSize(scale, options) {
   var euiTheme = useEuiTheme();
-  return euiFontSize(euiTheme, scale, options);
+  var memoizedFontSizes = useEuiMemoizedStyles(euiFontSizes);
+  return !options ? memoizedFontSizes[scale] : euiFontSize(euiTheme, scale, options);
+};
+// Memomize a basic set of font sizes. We unfortunately can't
+// memoize all possible options, there's too many permutations
+var euiFontSizes = function euiFontSizes(euiThemeContext) {
+  return EuiThemeFontScales.reduce(function (map, scale) {
+    return _objectSpread(_objectSpread({}, map), {}, _defineProperty({}, scale, euiFontSize(euiThemeContext, scale)));
+  }, {});
 };
 
 /**
@@ -47,8 +59,4 @@ export var euiTextTruncate = function euiTextTruncate() {
 export var euiNumberFormat = function euiNumberFormat(_ref2) {
   var euiTheme = _ref2.euiTheme;
   return "\n  font-feature-settings: ".concat(euiTheme.font.featureSettings, ", 'tnum' 1;\n");
-};
-export var useEuiNumberFormat = function useEuiNumberFormat() {
-  var euiTheme = useEuiTheme();
-  return euiNumberFormat(euiTheme);
 };

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

@@ -9,7 +9,7 @@
 export { EuiSystemContext, EuiThemeContext, EuiNestedThemeContext, EuiModificationsContext, EuiColorModeContext } from './context';
 export { useEuiTheme, withEuiTheme, RenderWithEuiTheme, useEuiThemeCSSVariables } from './hooks';
 export { EuiThemeProvider } from './provider';
-export { useEuiMemoizedStyles } from './style_memoization';
+export { useEuiMemoizedStyles, withEuiStylesMemoizer } from './style_memoization';
 export { getEuiDevProviderWarning, setEuiDevProviderWarning } from './warning';
 export { buildTheme, computed, isInverseColorMode, getColorMode, getComputed, getOn, mergeDeep, setOn, Computed } from './utils';
 export { COLOR_MODES_STANDARD } from './types';

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

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -7,7 +8,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * Side Public License, v 1.
  */
 
-import React, { createContext, useContext, useState, useMemo } from 'react';
+import React, { createContext, useContext, useState, useMemo, useCallback, forwardRef } from 'react';
 import { useUpdateEffect } from '../hooks';
 import { useEuiTheme } from './hooks';
 
@@ -36,25 +37,57 @@ export var EuiThemeMemoizedStylesProvider = function EuiThemeMemoizedStylesProvi
   }, children);
 };
 
+/**
+ * Internal util primarily responsible for getting the memoized styles (if they exist)
+ * and if not, generating and setting the styles. DRYed out to facilitate usage
+ * between both hook/function components and HOC/class components
+ */
+var getMemoizedStyles = function getMemoizedStyles(stylesGenerator, stylesMap, euiThemeContext) {
+  if (!stylesGenerator.name) {
+    throw new Error('Styles are memoized per function. Your style functions must be statically defined in order to not create a new map entry every rerender.');
+  }
+  var existingStyles = stylesMap.get(stylesGenerator);
+  if (existingStyles) {
+    return existingStyles;
+  } else {
+    var generatedStyles = stylesGenerator(euiThemeContext);
+    stylesMap.set(stylesGenerator, generatedStyles);
+    return generatedStyles;
+  }
+};
+
 /**
  * Hook that memoizes the returned values of components style fns/generators
  * per-theme
  */
-export var useEuiMemoizedStyles = function useEuiMemoizedStyles(styleGenerator) {
+export var useEuiMemoizedStyles = function useEuiMemoizedStyles(stylesGenerator) {
   var memoizedStyles = useContext(EuiThemeMemoizedStylesContext);
   var euiThemeContext = useEuiTheme();
   var memoizedComponentStyles = useMemo(function () {
-    if (!styleGenerator.name) {
-      throw new Error('Styles are memoized per function. Your style functions must be statically defined in order to not create a new map entry every rerender.');
-    }
-    var existingStyles = memoizedStyles.get(styleGenerator);
-    if (existingStyles) {
-      return existingStyles;
-    } else {
-      var generatedStyles = styleGenerator(euiThemeContext);
-      memoizedStyles.set(styleGenerator, generatedStyles);
-      return generatedStyles;
-    }
-  }, [styleGenerator, memoizedStyles, euiThemeContext]);
+    return getMemoizedStyles(stylesGenerator, memoizedStyles, euiThemeContext);
+  }, [stylesGenerator, memoizedStyles, euiThemeContext]);
   return memoizedComponentStyles;
+};
+
+/**
+ * HOC for class components
+ * Syntax is mostly copied from withEuiTheme HOC
+ */
+
+export var withEuiStylesMemoizer = function withEuiStylesMemoizer(Component) {
+  var componentName = Component.displayName || Component.name || 'ComponentWithStylesMemoizer';
+  var Render = function Render(props, ref) {
+    var memoizedStyles = useContext(EuiThemeMemoizedStylesContext);
+    var euiThemeContext = useEuiTheme();
+    var stylesMemoizer = useCallback(function (stylesGenerator) {
+      return getMemoizedStyles(stylesGenerator, memoizedStyles, euiThemeContext);
+    }, [memoizedStyles, euiThemeContext]);
+    return ___EmotionJSX(Component, _extends({
+      stylesMemoizer: stylesMemoizer,
+      ref: ref
+    }, props));
+  };
+  var WithEuiStylesMemoizer = /*#__PURE__*/forwardRef(Render);
+  WithEuiStylesMemoizer.displayName = componentName;
+  return WithEuiStylesMemoizer;
 };