@elastic/eui 93.2.0 → 93.3.0

package/lib/components/title/title.styles.js

@@ -4,9 +4,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEuiTitle = exports.euiTitleStyles = exports.euiTitle = void 0;
+exports.euiTitleStyles = exports.euiTitle = void 0;
 var _react = require("@emotion/react");
-var _services = require("../../services");
 var _global_styling = require("../../global_styling");
 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; }
@@ -42,17 +41,10 @@ var euiTitle = function euiTitle(euiThemeContext) {
   });
 };
 
-// Hook version
-exports.euiTitle = euiTitle;
-var useEuiTitle = function useEuiTitle(scale, options) {
-  var euiTheme = (0, _services.useEuiTheme)();
-  return euiTitle(euiTheme, scale, options);
-};
-
 /**
  * Styles
  */
-exports.useEuiTitle = useEuiTitle;
+exports.euiTitle = euiTitle;
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "1x2qsb1-uppercase",
   styles: "text-transform:uppercase;label:uppercase;"

package/lib/global_styling/mixins/_typography.js

@@ -3,18 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEuiNumberFormat = exports.useEuiFontSize = exports.euiTextTruncate = exports.euiTextBreakWord = exports.euiNumberFormat = exports.euiFontSize = void 0;
+exports.useEuiFontSize = exports.euiTextTruncate = exports.euiTextBreakWord = exports.euiNumberFormat = exports.euiFontSize = void 0;
 var _typography = require("../functions/typography");
-var _hooks = require("../../services/theme/hooks");
+var _theme = require("../../services/theme");
+var _typography2 = require("../variables/typography");
 var _functions = require("../functions");
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /*
+                                                                                                                                                                                                                                                                                                                                                                                               * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+                                                                                                                                                                                                                                                                                                                                                                                               * or more contributor license agreements. Licensed under the Elastic License
+                                                                                                                                                                                                                                                                                                                                                                                               * 2.0 and the Server Side Public License, v 1; you may not use this file except
+                                                                                                                                                                                                                                                                                                                                                                                               * in compliance with, at your election, the Elastic License 2.0 or the Server
+                                                                                                                                                                                                                                                                                                                                                                                               * Side Public License, v 1.
+                                                                                                                                                                                                                                                                                                                                                                                               */
 /**
  * Returns font-size and line-height
  */
@@ -27,15 +32,23 @@ var euiFontSize = function euiFontSize(_ref, scale, options) {
 };
 exports.euiFontSize = euiFontSize;
 var useEuiFontSize = function useEuiFontSize(scale, options) {
-  var euiTheme = (0, _hooks.useEuiTheme)();
-  return euiFontSize(euiTheme, scale, options);
+  var euiTheme = (0, _theme.useEuiTheme)();
+  var memoizedFontSizes = (0, _theme.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
+exports.useEuiFontSize = useEuiFontSize;
+var euiFontSizes = function euiFontSizes(euiThemeContext) {
+  return _typography2.EuiThemeFontScales.reduce(function (map, scale) {
+    return _objectSpread(_objectSpread({}, map), {}, _defineProperty({}, scale, euiFontSize(euiThemeContext, scale)));
+  }, {});
 };
 
 /**
  * Force text to wrap on natural word breaks (e.g. spaces & hyphens)
  * https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
  */
-exports.useEuiFontSize = useEuiFontSize;
 var euiTextBreakWord = function euiTextBreakWord() {
   return "\n  overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container\n  word-break: break-word;\n";
 };
@@ -58,9 +71,4 @@ var euiNumberFormat = function euiNumberFormat(_ref2) {
   var euiTheme = _ref2.euiTheme;
   return "\n  font-feature-settings: ".concat(euiTheme.font.featureSettings, ", 'tnum' 1;\n");
 };
-exports.euiNumberFormat = euiNumberFormat;
-var useEuiNumberFormat = function useEuiNumberFormat() {
-  var euiTheme = (0, _hooks.useEuiTheme)();
-  return euiNumberFormat(euiTheme);
-};
-exports.useEuiNumberFormat = useEuiNumberFormat;
+exports.euiNumberFormat = euiNumberFormat;

package/lib/services/theme/index.js

@@ -135,6 +135,12 @@ Object.defineProperty(exports, "useEuiThemeCSSVariables", {
     return _hooks.useEuiThemeCSSVariables;
   }
 });
+Object.defineProperty(exports, "withEuiStylesMemoizer", {
+  enumerable: true,
+  get: function get() {
+    return _style_memoization.withEuiStylesMemoizer;
+  }
+});
 Object.defineProperty(exports, "withEuiTheme", {
   enumerable: true,
   get: function get() {

package/lib/services/theme/style_memoization.js

@@ -4,13 +4,14 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEuiMemoizedStyles = exports.EuiThemeMemoizedStylesProvider = exports.EuiThemeMemoizedStylesContext = void 0;
+exports.withEuiStylesMemoizer = exports.useEuiMemoizedStyles = exports.EuiThemeMemoizedStylesProvider = exports.EuiThemeMemoizedStylesContext = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("../hooks");
 var _hooks2 = require("./hooks");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -47,27 +48,59 @@ var EuiThemeMemoizedStylesProvider = function EuiThemeMemoizedStylesProvider(_re
   }, 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
+ */
+exports.EuiThemeMemoizedStylesProvider = EuiThemeMemoizedStylesProvider;
+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
  */
-exports.EuiThemeMemoizedStylesProvider = EuiThemeMemoizedStylesProvider;
-var useEuiMemoizedStyles = function useEuiMemoizedStyles(styleGenerator) {
+var useEuiMemoizedStyles = function useEuiMemoizedStyles(stylesGenerator) {
   var memoizedStyles = (0, _react.useContext)(EuiThemeMemoizedStylesContext);
   var euiThemeContext = (0, _hooks2.useEuiTheme)();
   var memoizedComponentStyles = (0, _react.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;
 };
-exports.useEuiMemoizedStyles = useEuiMemoizedStyles;
+
+/**
+ * HOC for class components
+ * Syntax is mostly copied from withEuiTheme HOC
+ */
+exports.useEuiMemoizedStyles = useEuiMemoizedStyles;
+var withEuiStylesMemoizer = function withEuiStylesMemoizer(Component) {
+  var componentName = Component.displayName || Component.name || 'ComponentWithStylesMemoizer';
+  var Render = function Render(props, ref) {
+    var memoizedStyles = (0, _react.useContext)(EuiThemeMemoizedStylesContext);
+    var euiThemeContext = (0, _hooks2.useEuiTheme)();
+    var stylesMemoizer = (0, _react.useCallback)(function (stylesGenerator) {
+      return getMemoizedStyles(stylesGenerator, memoizedStyles, euiThemeContext);
+    }, [memoizedStyles, euiThemeContext]);
+    return (0, _react2.jsx)(Component, _extends({
+      stylesMemoizer: stylesMemoizer,
+      ref: ref
+    }, props));
+  };
+  var WithEuiStylesMemoizer = /*#__PURE__*/(0, _react.forwardRef)(Render);
+  WithEuiStylesMemoizer.displayName = componentName;
+  return WithEuiStylesMemoizer;
+};
+exports.withEuiStylesMemoizer = withEuiStylesMemoizer;

package/lib/themes/amsterdam/global_styling/mixins/button.js

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEuiButtonFocusCSS = exports.useEuiButtonColorCSS = exports.euiButtonSizeMap = exports.euiButtonFillColor = exports.euiButtonEmptyColor = exports.euiButtonColor = exports.BUTTON_COLORS = void 0;
+exports.useEuiButtonFocusCSS = exports.useEuiButtonColorCSS = exports.euiButtonSizeMap = exports.euiButtonFillColor = exports.euiButtonEmptyColor = exports.euiButtonColor = exports.BUTTON_DISPLAYS = exports.BUTTON_COLORS = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../../../global_styling");
 var _services = require("../../../../services");
+var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -21,6 +23,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
                                                                                                                                                                                      */
 var BUTTON_COLORS = ['text', 'accent', 'primary', 'success', 'warning', 'danger'];
 exports.BUTTON_COLORS = BUTTON_COLORS;
+var BUTTON_DISPLAYS = ['base', 'fill', 'empty'];
+exports.BUTTON_DISPLAYS = BUTTON_DISPLAYS;
 /**
  * Creates the `base` version of button styles with proper text contrast.
  * @param euiThemeContext
@@ -141,43 +145,63 @@ var euiButtonEmptyColor = function euiButtonEmptyColor(euiThemeContext, color) {
 exports.euiButtonEmptyColor = euiButtonEmptyColor;
 var useEuiButtonColorCSS = function useEuiButtonColorCSS() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var euiThemeContext = (0, _services.useEuiTheme)();
-  function stylesByDisplay(color) {
-    return {
-      base: /*#__PURE__*/(0, _react.css)(euiButtonColor(euiThemeContext, color), ";;label:base;"),
-      fill: /*#__PURE__*/(0, _react.css)(euiButtonFillColor(euiThemeContext, color), "outline-color:", euiThemeContext.colorMode === 'DARK' && color === 'text' ? 'currentColor' : euiThemeContext.euiTheme.colors.fullShade, ";;label:fill;"),
-      empty: /*#__PURE__*/(0, _react.css)("color:", euiButtonEmptyColor(euiThemeContext, color).color, ";&:focus,&:active{background-color:", euiButtonEmptyColor(euiThemeContext, color).backgroundColor, ";};label:empty;")
-    };
-  }
-  return {
-    text: /*#__PURE__*/(0, _react.css)(stylesByDisplay('text')[options.display || 'base'], ";label:text;"),
-    accent: /*#__PURE__*/(0, _react.css)(stylesByDisplay('accent')[options.display || 'base'], ";label:accent;"),
-    primary: /*#__PURE__*/(0, _react.css)(stylesByDisplay('primary')[options.display || 'base'], ";label:primary;"),
-    success: /*#__PURE__*/(0, _react.css)(stylesByDisplay('success')[options.display || 'base'], ";label:success;"),
-    warning: /*#__PURE__*/(0, _react.css)(stylesByDisplay('warning')[options.display || 'base'], ";label:warning;"),
-    danger: /*#__PURE__*/(0, _react.css)(stylesByDisplay('danger')[options.display || 'base'], ";label:danger;"),
-    disabled: /*#__PURE__*/(0, _react.css)(stylesByDisplay('disabled')[options.display || 'base'], ";label:disabled;")
-  };
+  var _options$display = options.display,
+    display = _options$display === void 0 ? 'base' : _options$display;
+  var colorsDisplaysMap = (0, _services.useEuiMemoizedStyles)(euiButtonDisplaysColors);
+  return colorsDisplaysMap[display];
+};
+exports.useEuiButtonColorCSS = useEuiButtonColorCSS;
+var euiButtonDisplaysColors = function euiButtonDisplaysColors(euiThemeContext) {
+  var COLORS = [].concat(BUTTON_COLORS, ['disabled']);
+  var displaysColorsMap = {};
+  BUTTON_DISPLAYS.forEach(function (display) {
+    displaysColorsMap[display] = {};
+    COLORS.forEach(function (color) {
+      switch (display) {
+        case 'base':
+          displaysColorsMap[display][color] = /*#__PURE__*/(0, _react.css)(euiButtonColor(euiThemeContext, color), ";;label:displaysColorsMap-display-color;");
+          break;
+        case 'fill':
+          displaysColorsMap[display][color] = /*#__PURE__*/(0, _react.css)(euiButtonFillColor(euiThemeContext, color), "outline-color:", euiThemeContext.colorMode === 'DARK' && color === 'text' ? 'currentColor' : euiThemeContext.euiTheme.colors.fullShade, ";;label:displaysColorsMap-display-color;");
+          break;
+        case 'empty':
+          displaysColorsMap[display][color] = /*#__PURE__*/(0, _react.css)("color:", euiButtonEmptyColor(euiThemeContext, color).color, ";&:focus,&:active{background-color:", euiButtonEmptyColor(euiThemeContext, color).backgroundColor, ";};label:displaysColorsMap-display-color;");
+          break;
+      }
+
+      // Tweak auto-generated Emotion label/className output
+      var emotionOutput = displaysColorsMap[display][color];
+      emotionOutput.styles = emotionOutput.styles.replace('label:displaysColorsMap-display-color;', "label:".concat(display, "-").concat(color, ";"));
+    });
+  });
+  return displaysColorsMap;
 };
 
 /**
  * Creates the translate animation when button is in focus.
  * @returns string
  */
-exports.useEuiButtonColorCSS = useEuiButtonColorCSS;
 var useEuiButtonFocusCSS = function useEuiButtonFocusCSS() {
-  var _useEuiTheme = (0, _services.useEuiTheme)(),
-    euiTheme = _useEuiTheme.euiTheme;
-  return "\n    ".concat(_global_styling.euiCanAnimate, " {\n      transition: transform ").concat(euiTheme.animation.normal, " ease-in-out,\n        background-color ").concat(euiTheme.animation.normal, " ease-in-out;\n\n      &:hover:not(:disabled) {\n        transform: translateY(-1px);\n      }\n\n      &:focus {\n        animation: euiButtonActive ").concat(euiTheme.animation.normal, "\n          ").concat(euiTheme.animation.bounce, ";\n      }\n\n      &:active:not(:disabled) {\n        transform: translateY(1px);\n      }\n    }\n  ");
+  return (0, _services.useEuiMemoizedStyles)(euiButtonFocusCSS);
+};
+exports.useEuiButtonFocusCSS = useEuiButtonFocusCSS;
+var euiButtonFocusAnimation = (0, _react.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  50% {\n    transform: translateY(1px);\n  }\n"])));
+var euiButtonFocusCSS = function euiButtonFocusCSS(_ref) {
+  var euiTheme = _ref.euiTheme;
+  var focusCSS = /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{transition:transform ", euiTheme.animation.normal, " ease-in-out,background-color ", euiTheme.animation.normal, " ease-in-out;&:hover:not(:disabled){transform:translateY(-1px);}&:focus{animation:", euiButtonFocusAnimation, " ", euiTheme.animation.normal, " ", euiTheme.animation.bounce, ";}&:active:not(:disabled){transform:translateY(1px);}};label:focusCSS;");
+  // Remove the auto-generated label.
+  // We could typically avoid a label by using a plain string `` instead of css``,
+  // but we need css`` for keyframes`` to work for the focus animation
+  focusCSS.styles = focusCSS.styles.replace('label:focusCSS;', '');
+  return focusCSS;
 };
 
 /**
  * Map of `size` props to various sizings/scales
  * that should remain consistent across all buttons
  */
-exports.useEuiButtonFocusCSS = useEuiButtonFocusCSS;
-var euiButtonSizeMap = function euiButtonSizeMap(_ref) {
-  var euiTheme = _ref.euiTheme;
+var euiButtonSizeMap = function euiButtonSizeMap(_ref2) {
+  var euiTheme = _ref2.euiTheme;
   return {
     xs: {
       height: euiTheme.size.l,

package/optimize/es/components/breadcrumbs/breadcrumb.js

@@ -92,11 +92,12 @@ export var EuiBreadcrumbContent = function EuiBreadcrumbContent(_ref2) {
       css: cssStyles
     };
     if (isPopoverBreadcrumb) {
+      var _closePopover = function _closePopover() {
+        return setIsPopoverOpen(false);
+      };
       return ___EmotionJSX(EuiPopover, _extends({}, popoverProps, {
         isOpen: isPopoverOpen,
-        closePopover: function closePopover() {
-          return setIsPopoverOpen(false);
-        },
+        closePopover: _closePopover,
         css: !isLastBreadcrumb && styles.euiBreadcrumb__popoverWrapper,
         button: ___EmotionJSX(EuiLink, _extends({}, baseProps, {
           color: linkColor,
@@ -113,7 +114,7 @@ export var EuiBreadcrumbContent = function EuiBreadcrumbContent(_ref2) {
           size: "s",
           "aria-label": " - ".concat(popoverAriaLabel)
         }))
-      }), popoverContent);
+      }), typeof popoverContent === 'function' ? popoverContent(_closePopover) : popoverContent);
     } else if (isInteractiveBreadcrumb) {
       return ___EmotionJSX(EuiLink, _extends({}, baseProps, styleProps, {
         color: linkColor,

package/optimize/es/components/button/button_display/_button_display.js

@@ -16,7 +16,7 @@ import React, { forwardRef } from 'react';
 
 // @ts-ignore module doesn't export `createElement`
 import { createElement } from '@emotion/react';
-import { getSecureRelForTarget, useEuiTheme } from '../../../services';
+import { getSecureRelForTarget, useEuiMemoizedStyles } from '../../../services';
 import { euiButtonDisplayStyles } from './_button_display.styles';
 import { EuiButtonDisplayContent } from './_button_display_content';
 import { validateHref } from '../../../services/security/href_validator';
@@ -70,8 +70,7 @@ export var EuiButtonDisplay = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     isDisabled: isDisabled || disabled,
     isLoading: isLoading
   });
-  var theme = useEuiTheme();
-  var styles = euiButtonDisplayStyles(theme);
+  var styles = useEuiMemoizedStyles(euiButtonDisplayStyles);
   var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, minWidth == null && styles.defaultMinWidth, buttonIsDisabled && styles.isDisabled];
   var innerNode = ___EmotionJSX(EuiButtonDisplayContent, _extends({
     isLoading: isLoading,

package/optimize/es/components/button/button_empty/button_empty.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, getSecureRelForTarget } from '../../../services';
+import { useEuiMemoizedStyles, getSecureRelForTarget } from '../../../services';
 import { EuiButtonDisplayContent } from '../button_display/_button_display_content';
 import { useEuiButtonColorCSS } from '../../../themes/amsterdam/global_styling/mixins/button';
 import { isButtonDisabled } from '../button_display/_button_display';
@@ -62,8 +62,7 @@ export var EuiButtonEmpty = function EuiButtonEmpty(_ref) {
   var buttonColorStyles = useEuiButtonColorCSS({
     display: 'empty'
   });
-  var euiTheme = useEuiTheme();
-  var styles = euiButtonEmptyStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiButtonEmptyStyles);
   var cssStyles = [styles.euiButtonEmpty, styles[size], buttonColorStyles[isDisabled ? 'disabled' : color], flush && styles.flush, flush && styles[flush], isDisabled && styles.isDisabled];
   var classes = classNames('euiButtonEmpty', className);
   var contentClassNames = classNames('euiButtonEmpty__content', contentProps === null || contentProps === void 0 ? void 0 : contentProps.className);

package/optimize/es/components/button/button_group/button_group.js

@@ -11,7 +11,7 @@ var _excluded = ["className", "buttonSize", "color", "idSelected", "idToSelected
 
 import classNames from 'classnames';
 import React from 'react';
-import { useEuiTheme } from '../../../services';
+import { useEuiMemoizedStyles } from '../../../services';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiButtonGroupButton } from './button_group_button';
 import { euiButtonGroupStyles, euiButtonGroupButtonsStyles } from './button_group.styles';
@@ -40,10 +40,8 @@ export var EuiButtonGroup = function EuiButtonGroup(_ref) {
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'single' : _ref$type,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var euiTheme = useEuiTheme();
-  var wrapperStyles = euiButtonGroupStyles();
-  var wrapperCssStyles = [wrapperStyles.euiButtonGroup, isFullWidth && wrapperStyles.fullWidth];
-  var styles = euiButtonGroupButtonsStyles(euiTheme);
+  var wrapperCssStyles = [euiButtonGroupStyles.euiButtonGroup, isFullWidth && euiButtonGroupStyles.fullWidth];
+  var styles = useEuiMemoizedStyles(euiButtonGroupButtonsStyles);
   var cssStyles = [styles.euiButtonGroup__buttons, isFullWidth && styles.fullWidth, styles[buttonSize]];
   var classes = classNames('euiButtonGroup', {
     'euiButtonGroup-isDisabled': isDisabled

package/optimize/es/components/button/button_group/button_group.styles.js

@@ -10,19 +10,16 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import { css } from '@emotion/react';
 import { logicalCSS } from '../../../global_styling';
 import { euiFormVariables } from '../../form/form.styles';
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "jl0hie-fullWidth",
-  styles: "display:block;label:fullWidth;"
-} : {
-  name: "jl0hie-fullWidth",
-  styles: "display:block;label:fullWidth;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-export var euiButtonGroupStyles = function euiButtonGroupStyles() {
-  return {
-    euiButtonGroup: /*#__PURE__*/css("display:inline-block;", logicalCSS('max-width', '100%'), " position:relative;;label:euiButtonGroup;"),
-    fullWidth: _ref
-  };
+export var euiButtonGroupStyles = {
+  euiButtonGroup: /*#__PURE__*/css("display:inline-block;", logicalCSS('max-width', '100%'), " position:relative;;label:euiButtonGroup;"),
+  fullWidth: process.env.NODE_ENV === "production" ? {
+    name: "jl0hie-fullWidth",
+    styles: "display:block;label:fullWidth;"
+  } : {
+    name: "jl0hie-fullWidth",
+    styles: "display:block;label:fullWidth;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  }
 };
 export var euiButtonGroupButtonsStyles = function euiButtonGroupButtonsStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;

package/optimize/es/components/button/button_icon/button_icon.js

@@ -11,7 +11,7 @@ var _excluded = ["className", "iconType", "iconSize", "color", "isDisabled", "di
 
 import React from 'react';
 import classNames from 'classnames';
-import { getSecureRelForTarget, useEuiTheme } from '../../../services';
+import { getSecureRelForTarget, useEuiMemoizedStyles } from '../../../services';
 import { EuiIcon } from '../../icon';
 import { EuiLoadingSpinner } from '../../loading';
 import { useEuiButtonColorCSS, useEuiButtonFocusCSS } from '../../../themes/amsterdam/global_styling/mixins/button';
@@ -42,7 +42,6 @@ export var EuiButtonIcon = function EuiButtonIcon(_ref) {
     isSelected = _ref.isSelected,
     isLoading = _ref.isLoading,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var euiThemeContext = useEuiTheme();
   var isDisabled = isButtonDisabled({
     isDisabled: _isDisabled || disabled,
     href: href,
@@ -57,9 +56,9 @@ export var EuiButtonIcon = function EuiButtonIcon(_ref) {
     display: display
   });
   var buttonFocusStyle = useEuiButtonFocusCSS();
-  var emptyHoverStyles = display === 'empty' && !isDisabled && _emptyHoverStyles(euiThemeContext, color);
-  var styles = euiButtonIconStyles(euiThemeContext);
-  var cssStyles = [styles.euiButtonIcon, styles[size], buttonColorStyles[isDisabled ? 'disabled' : color], buttonFocusStyle, emptyHoverStyles, isDisabled && styles.isDisabled];
+  var emptyHoverStyles = useEuiMemoizedStyles(_emptyHoverStyles);
+  var styles = useEuiMemoizedStyles(euiButtonIconStyles);
+  var cssStyles = [styles.euiButtonIcon, styles[size], buttonColorStyles[isDisabled ? 'disabled' : color], buttonFocusStyle, display === 'empty' && !isDisabled && emptyHoverStyles[color], isDisabled && styles.isDisabled];
   var classes = classNames('euiButtonIcon', className);
 
   // Add an icon to the button if one exists.

package/optimize/es/components/button/button_icon/button_icon.styles.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; }
 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
@@ -9,7 +12,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { logicalSizeCSS } from '../../../global_styling';
-import { euiButtonEmptyColor, euiButtonSizeMap } from '../../../themes/amsterdam/global_styling/mixins/button';
+import { BUTTON_COLORS, euiButtonEmptyColor, euiButtonSizeMap } from '../../../themes/amsterdam/global_styling/mixins/button';
 import { euiButtonBaseCSS } from '../button_display/_button_display.styles';
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "8595p9-isDisabled",
@@ -30,6 +33,8 @@ export var euiButtonIconStyles = function euiButtonIconStyles(euiThemeContext) {
     m: /*#__PURE__*/css(logicalSizeCSS(sizes.m.height), " border-radius:", sizes.m.radius, ";;label:m;")
   };
 };
-export var _emptyHoverStyles = function _emptyHoverStyles(euiThemeContext, color) {
-  return /*#__PURE__*/css("&:hover{background-color:", euiButtonEmptyColor(euiThemeContext, color).backgroundColor, ";}");
+export var _emptyHoverStyles = function _emptyHoverStyles(euiThemeContext) {
+  return BUTTON_COLORS.reduce(function (styles, color) {
+    return _objectSpread(_objectSpread({}, styles), {}, _defineProperty({}, color, /*#__PURE__*/css("&:hover{background-color:", euiButtonEmptyColor(euiThemeContext, color).backgroundColor, ";}")));
+  }, {});
 };

package/optimize/es/components/datagrid/body/cell/data_grid_cell.js

@@ -7,7 +7,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["renderCellValue", "column", "setCellContentsRef", "rowIndex", "colIndex", "ariaRowIndex", "rowHeight", "rowHeightUtils", "isControlColumn", "isFocused", "cellActions"],
+var _excluded = ["renderCellValue", "cellContext", "column", "setCellContentsRef", "rowIndex", "colIndex", "ariaRowIndex", "rowHeight", "rowHeightUtils", "isControlColumn", "isFocused", "cellActions"],
   _excluded2 = ["width", "popoverContext", "interactiveCellId", "columnType", "className", "column", "style", "rowHeightUtils", "rowHeightsOptions", "rowManager", "pagination"],
   _excluded3 = ["isExpandable", "style", "className", "data-test-subj"];
 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; }
@@ -38,6 +38,7 @@ import { HandleInteractiveChildren } from './focus_utils';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var EuiDataGridCellContent = /*#__PURE__*/memo(function (_ref) {
   var renderCellValue = _ref.renderCellValue,
+    cellContext = _ref.cellContext,
     column = _ref.column,
     setCellContentsRef = _ref.setCellContentsRef,
     rowIndex = _ref.rowIndex,
@@ -66,7 +67,7 @@ var EuiDataGridCellContent = /*#__PURE__*/memo(function (_ref) {
     rowIndex: rowIndex,
     colIndex: colIndex,
     schema: (column === null || column === void 0 ? void 0 : column.schema) || rest.columnType
-  }, rest)));
+  }, cellContext, rest)));
   if (cellHeightType === 'lineCount' && !isControlColumn) {
     var lines = rowHeightUtils.getLineCount(rowHeight);
     cellContent = ___EmotionJSX(EuiTextBlockTruncate, {
@@ -249,6 +250,7 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         var _this$props5 = _this.props,
           renderCellPopover = _this$props5.renderCellPopover,
           renderCellValue = _this$props5.renderCellValue,
+          cellContext = _this$props5.cellContext,
           rowIndex = _this$props5.rowIndex,
           colIndex = _this$props5.colIndex,
           column = _this$props5.column,
@@ -269,7 +271,7 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
           })),
           DefaultCellPopover: DefaultCellPopover,
           setCellPopoverProps: setCellPopoverProps
-        }), ___EmotionJSX(CellElement, _extends({}, sharedProps, {
+        }), ___EmotionJSX(CellElement, _extends({}, cellContext, sharedProps, {
           setCellProps: _this.setCellProps,
           isExpandable: true,
           isExpanded: true,

package/optimize/es/components/datagrid/body/cell/data_grid_cell_wrapper.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["colIndex", "visibleRowIndex", "style", "schema", "schemaDetectors", "pagination", "columns", "leadingControlColumns", "trailingControlColumns", "visibleColCount", "columnWidths", "defaultColumnWidth", "renderCellValue", "renderCellPopover", "interactiveCellId", "setRowHeight", "rowHeightsOptions", "rowHeightUtils", "rowManager"];
+var _excluded = ["colIndex", "visibleRowIndex", "style", "schema", "schemaDetectors", "pagination", "columns", "leadingControlColumns", "trailingControlColumns", "visibleColCount", "columnWidths", "defaultColumnWidth", "renderCellValue", "cellContext", "renderCellPopover", "interactiveCellId", "setRowHeight", "rowHeightsOptions", "rowHeightUtils", "rowManager"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -35,6 +35,7 @@ export var Cell = function Cell(_ref) {
     columnWidths = _ref.columnWidths,
     defaultColumnWidth = _ref.defaultColumnWidth,
     renderCellValue = _ref.renderCellValue,
+    cellContext = _ref.cellContext,
     renderCellPopover = _ref.renderCellPopover,
     interactiveCellId = _ref.interactiveCellId,
     setRowHeight = _ref.setRowHeight,
@@ -76,7 +77,8 @@ export var Cell = function Cell(_ref) {
     setRowHeight: isFirstColumn ? setRowHeight : undefined,
     rowManager: rowManager,
     popoverContext: popoverContext,
-    pagination: pagination
+    pagination: pagination,
+    cellContext: cellContext
   };
   if (isLeadingControlColumn) {
     var leadingColumn = leadingControlColumns[colIndex];

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

@@ -32,6 +32,7 @@ export var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_r
     schemaDetectors = _ref.schemaDetectors,
     visibleRows = _ref.visibleRows,
     renderCellValue = _ref.renderCellValue,
+    cellContext = _ref.cellContext,
     renderCellPopover = _ref.renderCellPopover,
     renderFooterCellValue = _ref.renderFooterCellValue,
     interactiveCellId = _ref.interactiveCellId,
@@ -121,6 +122,7 @@ export var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_r
     columnWidths: columnWidths,
     defaultColumnWidth: defaultColumnWidth,
     renderCellValue: renderCellValue,
+    cellContext: cellContext,
     renderCellPopover: renderCellPopover,
     interactiveCellId: interactiveCellId,
     setRowHeight: setRowHeight,

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

@@ -78,6 +78,7 @@ export var EuiDataGridBodyVirtualized = function EuiDataGridBodyVirtualized(_ref
     endRow = _ref3$visibleRows.endRow,
     visibleRowCount = _ref3$visibleRows.visibleRowCount,
     renderCellValue = _ref3.renderCellValue,
+    cellContext = _ref3.cellContext,
     renderCellPopover = _ref3.renderCellPopover,
     renderFooterCellValue = _ref3.renderFooterCellValue,
     interactiveCellId = _ref3.interactiveCellId,
@@ -279,6 +280,7 @@ export var EuiDataGridBodyVirtualized = function EuiDataGridBodyVirtualized(_ref
       columnWidths: columnWidths,
       defaultColumnWidth: defaultColumnWidth,
       renderCellValue: renderCellValue,
+      cellContext: cellContext,
       renderCellPopover: renderCellPopover,
       interactiveCellId: interactiveCellId,
       rowHeightsOptions: rowHeightsOptions,