@elastic/eui 93.2.0 → 93.3.0

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

@@ -67,7 +67,7 @@ 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__*/(0, _react.css)("display:block;", (0, _global_styling.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__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '100%'), " appearance:none;border:none;border-radius:", euiTheme.size.s, ";&::-webkit-progress-bar{background-color:", euiTheme.colors.lightShade, ";}", _global_styling.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/lib/components/skeleton/skeleton_circle.js

@@ -36,8 +36,7 @@ var EuiSkeletonCircle = function EuiSkeletonCircle(_ref) {
     ariaWrapperProps = _ref.ariaWrapperProps,
     children = _ref.children,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _skeleton_circle.euiSkeletonCircleStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_skeleton_circle.euiSkeletonCircleStyles);
   var cssStyles = [styles.euiSkeletonCircle, styles[size]];
   return (0, _react2.jsx)(_skeleton_loading.EuiSkeletonLoading, (0, _extends2.default)({
     isLoading: isLoading,

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

@@ -45,8 +45,7 @@ var EuiSkeletonRectangle = function EuiSkeletonRectangle(_ref) {
     ariaWrapperProps = _ref.ariaWrapperProps,
     children = _ref.children,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _skeleton_rectangle.euiSkeletonRectangleStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_skeleton_rectangle.euiSkeletonRectangleStyles);
   var cssStyles = [styles.euiSkeletonRectangle, styles[borderRadius]];
   return (0, _react2.jsx)(_skeleton_loading.EuiSkeletonLoading, (0, _extends2.default)({
     isLoading: isLoading,

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

@@ -1,13 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.LINES = exports.EuiSkeletonText = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
 var _skeleton_loading = require("./skeleton_loading");
@@ -21,6 +22,8 @@ var _excluded = ["isLoading", "lines", "size", "className", "contentAriaLabel",
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+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; }
 var LINES = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 exports.LINES = LINES;
 var EuiSkeletonText = function EuiSkeletonText(_ref) {
@@ -38,16 +41,20 @@ var EuiSkeletonText = function EuiSkeletonText(_ref) {
     ariaWrapperProps = _ref.ariaWrapperProps,
     children = _ref.children,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _skeleton_text.euiSkeletonTextStyles)(euiTheme);
-  var lineCssStyles = [styles.euiSkeletonText, styles[size]];
-  var lineElements = [];
-  for (var i = 0; i < lines; i++) {
-    lineElements.push((0, _react2.jsx)("span", {
-      key: i,
-      css: lineCssStyles
-    }));
-  }
+  var styles = (0, _services.useEuiMemoizedStyles)(_skeleton_text.euiSkeletonTextStyles);
+  var cssStyles = (0, _react.useMemo)(function () {
+    return [styles.euiSkeletonText, styles[size]];
+  }, [styles, size]);
+  var lineElements = (0, _react.useMemo)(function () {
+    var lineElements = [];
+    for (var i = 0; i < lines; i++) {
+      lineElements.push((0, _react2.jsx)("span", {
+        key: i,
+        css: cssStyles
+      }));
+    }
+    return lineElements;
+  }, [lines, cssStyles]);
   return (0, _react2.jsx)(_skeleton_loading.EuiSkeletonLoading, (0, _extends2.default)({
     isLoading: isLoading,
     loadingContent: (0, _react2.jsx)("span", (0, _extends2.default)({

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

@@ -34,8 +34,7 @@ var EuiSkeletonTitle = function EuiSkeletonTitle(_ref) {
     ariaWrapperProps = _ref.ariaWrapperProps,
     children = _ref.children,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _skeleton_title.euiSkeletonTitleStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_skeleton_title.euiSkeletonTitleStyles);
   var cssStyles = [styles.euiSkeletonTitle, styles[size]];
   return (0, _react2.jsx)(_skeleton_loading.EuiSkeletonLoading, (0, _extends2.default)({
     isLoading: isLoading,

package/optimize/lib/components/text/text.js

@@ -34,8 +34,7 @@ var EuiText = function EuiText(_ref) {
     children = _ref.children,
     className = _ref.className,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _text.euiTextStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_text.euiTextStyles);
   var cssStyles = [styles.euiText, !grow ? styles.constrainedWidth : undefined, styles[size]];
   var classes = (0, _classnames.default)('euiText', className);
   var text = (0, _react2.jsx)("div", (0, _extends2.default)({

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

@@ -33,8 +33,7 @@ var EuiTextAlign = function EuiTextAlign(_ref) {
     _ref$cloneElement = _ref.cloneElement,
     cloneElement = _ref$cloneElement === void 0 ? false : _ref$cloneElement,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var styles = (0, _text_align.euiTextAlignStyles)();
-  var cssStyles = [styles.euiTextAlign, styles[textAlign]];
+  var cssStyles = [_text_align.euiTextAlignStyles.euiTextAlign, _text_align.euiTextAlignStyles[textAlign]];
   var props = _objectSpread({
     css: cssStyles
   }, rest);

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

@@ -14,12 +14,10 @@ var _global_styling = require("../../global_styling");
  * Side Public License, v 1.
  */
 
-var euiTextAlignStyles = function euiTextAlignStyles() {
-  return {
-    euiTextAlign: /*#__PURE__*/(0, _react.css)(";label:euiTextAlign;"),
-    left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('left'), ";;label:left;"),
-    right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('right'), ";;label:right;"),
-    center: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('center'), ";;label:center;")
-  };
+var euiTextAlignStyles = {
+  euiTextAlign: /*#__PURE__*/(0, _react.css)(";label:euiTextAlign;"),
+  left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('left'), ";;label:left;"),
+  right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('right'), ";;label:right;"),
+  center: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('center'), ";;label:center;")
 };
 exports.euiTextAlignStyles = euiTextAlignStyles;

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

@@ -37,8 +37,7 @@ var EuiTextColor = function EuiTextColor(_ref) {
     style = _ref.style,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var isNamedColor = COLORS.includes(color);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _text_color.euiTextColorStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_text_color.euiTextColorStyles);
   var cssStyles = [styles.euiTextColor, isNamedColor ? styles[color] : styles.customColor];
 
   // We're checking if is a custom color.

package/optimize/lib/components/title/title.js

@@ -31,8 +31,7 @@ var EuiTitle = function EuiTitle(_ref) {
     className = _ref.className,
     textTransform = _ref.textTransform,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _title.euiTitleStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_title.euiTitleStyles);
   var cssStyles = [styles.euiTitle, textTransform ? styles[textTransform] : undefined, styles[size]];
   var classes = (0, _classnames.default)('euiTitle', className, children.props.className);
   var props = _objectSpread({

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

@@ -4,10 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEuiTitle = exports.euiTitleStyles = exports.euiTitle = void 0;
+exports.euiTitleStyles = exports.euiTitle = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 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) { (0, _defineProperty2.default)(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; }
@@ -40,17 +39,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/optimize/lib/global_styling/mixins/_typography.js

@@ -1,20 +1,23 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 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 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) { (0, _defineProperty2.default)(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
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * 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 +30,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), {}, (0, _defineProperty2.default)({}, 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 +69,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/optimize/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/optimize/lib/services/theme/style_memoization.js

@@ -5,7 +5,8 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("../hooks");
@@ -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, (0, _extends2.default)({
+      stylesMemoizer: stylesMemoizer,
+      ref: ref
+    }, props));
+  };
+  var WithEuiStylesMemoizer = /*#__PURE__*/(0, _react.forwardRef)(Render);
+  WithEuiStylesMemoizer.displayName = componentName;
+  return WithEuiStylesMemoizer;
+};
+exports.withEuiStylesMemoizer = withEuiStylesMemoizer;

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

@@ -4,11 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = require("@emotion/react");
 var _global_styling = require("../../../../global_styling");
 var _services = require("../../../../services");
+var _templateObject;
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -16,9 +18,10 @@ var _services = require("../../../../services");
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-
 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
@@ -139,43 +142,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 = (0, _taggedTemplateLiteral2.default)(["\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/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "93.2.0",
+  "version": "93.3.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
   "types": "eui.d.ts",
-  "docker_image": "20.11.0",
+  "docker_image": "20.11.1",
   "engines": {
     "node": "16.x || 18.x || >=20.x"
   },
@@ -109,7 +109,7 @@
     "@cypress/react": "^7.0.3",
     "@cypress/react18": "^2.0.0",
     "@cypress/webpack-dev-server": "^1.7.0",
-    "@elastic/charts": "^63.1.0",
+    "@elastic/charts": "^64.0.1",
     "@elastic/datemath": "^5.0.3",
     "@emotion/babel-preset-css-prop": "^11.11.0",
     "@emotion/cache": "^11.11.0",

package/src/components/datagrid/_data_grid_data_row.scss

@@ -119,6 +119,10 @@
   height: auto;
   display: flex;
   align-items: center;
+
+  &.euiDataGridRowCell__content--defaultHeight {
+    height: 100%;
+  }
 }
 
 // Positioning for cell actions & the cell expansion popover

package/test-env/components/breadcrumbs/breadcrumb.js

@@ -110,11 +110,12 @@ var EuiBreadcrumbContent = function EuiBreadcrumbContent(_ref2) {
       css: cssStyles
     };
     if (isPopoverBreadcrumb) {
+      var _closePopover = function _closePopover() {
+        return setIsPopoverOpen(false);
+      };
       return (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({}, popoverProps, {
         isOpen: isPopoverOpen,
-        closePopover: function closePopover() {
-          return setIsPopoverOpen(false);
-        },
+        closePopover: _closePopover,
         css: !isLastBreadcrumb && styles.euiBreadcrumb__popoverWrapper,
         button: (0, _react2.jsx)(_link.EuiLink, (0, _extends2.default)({}, baseProps, {
           color: linkColor,
@@ -131,7 +132,7 @@ var EuiBreadcrumbContent = function EuiBreadcrumbContent(_ref2) {
           size: "s",
           "aria-label": " - ".concat(popoverAriaLabel)
         }))
-      }), popoverContent);
+      }), typeof popoverContent === 'function' ? popoverContent(_closePopover) : popoverContent);
     } else if (isInteractiveBreadcrumb) {
       return (0, _react2.jsx)(_link.EuiLink, (0, _extends2.default)({}, baseProps, styleProps, {
         color: linkColor,
@@ -173,12 +174,14 @@ EuiBreadcrumbContent.propTypes = {
        */
   "aria-current": _propTypes.default.any,
   /**
-       * Creates a breadcrumb that toggles a popover dialog
+       * Creates a breadcrumb that toggles a popover dialog. Takes any rendered node(s),
+       * or a render function that will pass callback allowing you to close the
+       * breadcrumb popover from within your popover content.
        *
        * If passed, both `href` and `onClick` will be ignored - the breadcrumb's
        * click behavior should only trigger a popover.
        */
-  popoverContent: _propTypes.default.node,
+  popoverContent: _propTypes.default.oneOfType([_propTypes.default.node.isRequired, _propTypes.default.func.isRequired]),
   /**
        * Allows customizing the popover if necessary. Accepts any props that
        * [EuiPopover](/#/layout/popover) accepts, except for props that control state.

package/test-env/components/breadcrumbs/breadcrumbs.js

@@ -149,12 +149,14 @@ EuiBreadcrumbs.propTypes = {
          */
     "aria-current": _propTypes.default.any,
     /**
-         * Creates a breadcrumb that toggles a popover dialog
+         * Creates a breadcrumb that toggles a popover dialog. Takes any rendered node(s),
+         * or a render function that will pass callback allowing you to close the
+         * breadcrumb popover from within your popover content.
          *
          * If passed, both `href` and `onClick` will be ignored - the breadcrumb's
          * click behavior should only trigger a popover.
          */
-    popoverContent: _propTypes.default.node,
+    popoverContent: _propTypes.default.oneOfType([_propTypes.default.node.isRequired, _propTypes.default.func.isRequired]),
     /**
          * Allows customizing the popover if necessary. Accepts any props that
          * [EuiPopover](/#/layout/popover) accepts, except for props that control state.

package/test-env/components/button/button_display/_button_display.js

@@ -79,8 +79,7 @@ var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
     isDisabled: isDisabled || disabled,
     isLoading: isLoading
   });
-  var theme = (0, _services.useEuiTheme)();
-  var styles = (0, _button_display.euiButtonDisplayStyles)(theme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_button_display.euiButtonDisplayStyles);
   var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, minWidth == null && styles.defaultMinWidth, buttonIsDisabled && styles.isDisabled];
   var innerNode = (0, _react2.jsx)(_button_display_content.EuiButtonDisplayContent, (0, _extends2.default)({
     isLoading: isLoading,

package/test-env/components/button/button_empty/button_empty.js

@@ -70,8 +70,7 @@ var EuiButtonEmpty = function EuiButtonEmpty(_ref) {
   var buttonColorStyles = (0, _button.useEuiButtonColorCSS)({
     display: 'empty'
   });
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _button_empty.euiButtonEmptyStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_button_empty.euiButtonEmptyStyles);
   var cssStyles = [styles.euiButtonEmpty, styles[size], buttonColorStyles[isDisabled ? 'disabled' : color], flush && styles.flush, flush && styles[flush], isDisabled && styles.isDisabled];
   var classes = (0, _classnames.default)('euiButtonEmpty', className);
   var contentClassNames = (0, _classnames.default)('euiButtonEmpty__content', contentProps === null || contentProps === void 0 ? void 0 : contentProps.className);