@elastic/eui 93.5.2 → 94.0.0

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

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _color = require("../../services/color");
@@ -26,8 +27,11 @@ var _excluded = ["className", "color", "imageUrl", "initials", "initialsLength",
  * 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; }
 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; }
+var visColors = (0, _services.euiPaletteColorBlindBehindText)();
 var SIZES = ['s', 'm', 'l', 'xl'];
 exports.SIZES = SIZES;
 var TYPES = ['space', 'user'];
@@ -58,57 +62,55 @@ var EuiAvatar = function EuiAvatar(_ref) {
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     style = _ref.style,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  checkValidInitials(initials);
   var _props$casing = props.casing,
     casing = _props$casing === void 0 ? type === 'space' ? 'none' : 'uppercase' : _props$casing,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded2);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _avatar.euiAvatarStyles)(euiTheme);
-  var visColors = (0, _services.euiPaletteColorBlindBehindText)();
   var isPlain = color === 'plain';
   var isSubdued = color === 'subdued';
+  var isNamedColor = isPlain || isSubdued || color === null;
   var classes = (0, _classnames.default)('euiAvatar', (_classNames = {}, (0, _defineProperty2.default)(_classNames, "euiAvatar--".concat(size), size), (0, _defineProperty2.default)(_classNames, "euiAvatar--".concat(type), type), (0, _defineProperty2.default)(_classNames, 'euiAvatar-isDisabled', isDisabled), _classNames), className);
+  var styles = (0, _services.useEuiMemoizedStyles)(_avatar.euiAvatarStyles);
   var cssStyles = [styles.euiAvatar, styles[type], styles[size], styles[casing], isPlain && styles.plain, isSubdued && styles.subdued, isDisabled && styles.isDisabled];
-  checkValidInitials(initials);
-  var avatarStyle = _objectSpread({}, style);
-  var iconCustomColor = iconColor;
-  var isNamedColor = color === 'plain' || color === 'subdued' || color === null;
-  if (!isNamedColor) {
-    checkValidColor(color);
-    var assignedColor = color || visColors[Math.floor(name.length % visColors.length)];
-    var textColor = _color.isColorDark.apply(void 0, (0, _toConsumableArray2.default)((0, _color.hexToRgb)(assignedColor))) ? '#FFFFFF' : '#000000';
-    avatarStyle.backgroundColor = assignedColor;
-    avatarStyle.color = textColor;
-
-    // Allow consumers to let the icons keep their default color (like app icons)
-    // when passing `iconColor = null`, otherwise continue to pass on `iconColor` or adjust with textColor
-    iconCustomColor = iconColor || iconColor === null ? iconColor : textColor;
-  }
-  if (imageUrl) {
-    avatarStyle.backgroundImage = "url(".concat(imageUrl, ")");
-  }
-  var content;
-  if (!imageUrl && !iconType) {
-    // Create the initials
-    var calculatedInitials = (0, _services.toInitials)(name, initialsLength, initials);
-    content = (0, _react2.jsx)("span", {
-      "aria-hidden": "true"
-    }, calculatedInitials);
-  } else if (iconType) {
-    content = (0, _react2.jsx)(_icon.EuiIcon, {
-      className: "euiAvatar__icon",
-      size: iconSize || size,
-      type: iconType,
-      color: iconCustomColor === null ? undefined : iconCustomColor
-    });
-  }
+  var avatarStyle = (0, _react.useMemo)(function () {
+    if (imageUrl) {
+      return {
+        backgroundImage: "url(".concat(imageUrl, ")")
+      };
+    }
+    if (!isNamedColor) {
+      checkValidColor(color);
+      var assignedColor = color || visColors[Math.floor(name.length % visColors.length)];
+      var textColor = _color.isColorDark.apply(void 0, (0, _toConsumableArray2.default)((0, _color.hexToRgb)(assignedColor))) ? '#FFFFFF' : '#000000';
+      return {
+        backgroundColor: assignedColor,
+        color: textColor
+      };
+    }
+  }, [imageUrl, color, isNamedColor, name.length]);
+  var iconCustomColor = (0, _react.useMemo)(function () {
+    // `null` allows icons to keep their default color (e.g. app icons)
+    if (iconColor === null) return undefined;
+    // Otherwise continue to pass on `iconColor`
+    if (iconColor) return iconColor;
+    // Fall back to the adjusted text color if it exists
+    return avatarStyle === null || avatarStyle === void 0 ? void 0 : avatarStyle.color;
+  }, [iconColor, avatarStyle === null || avatarStyle === void 0 ? void 0 : avatarStyle.color]);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     css: cssStyles,
     className: classes,
-    style: avatarStyle,
+    style: _objectSpread(_objectSpread({}, style), avatarStyle),
     "aria-label": isDisabled ? undefined : name,
     role: isDisabled ? 'presentation' : 'img',
     title: name
-  }, rest), content);
+  }, rest), !imageUrl && (iconType ? (0, _react2.jsx)(_icon.EuiIcon, {
+    className: "euiAvatar__icon",
+    size: iconSize || size,
+    type: iconType,
+    color: iconCustomColor
+  }) : (0, _react2.jsx)("span", {
+    "aria-hidden": "true"
+  }, (0, _services.toInitials)(name, initialsLength, initials))));
 };
 
 // TODO: Migrate to a service

package/test-env/components/avatar/avatar.styles.js

@@ -70,7 +70,7 @@ var euiAvatarStyles = function euiAvatarStyles(_ref8) {
   var euiTheme = _ref8.euiTheme;
   return {
     // Base
-    euiAvatar: /*#__PURE__*/(0, _react.css)("flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;vertical-align:middle;background-size:cover;", (0, _global_styling.logicalTextAlignCSS)('center'), " ", (0, _global_styling.logicalCSS)('overflow-x', 'hidden'), "font-weight:", euiTheme.font.weight.medium, ";;label:euiAvatar;"),
+    euiAvatar: /*#__PURE__*/(0, _react.css)("flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;vertical-align:middle;background-size:cover;background-color:", euiTheme.colors.lightShade, ";", (0, _global_styling.logicalTextAlignCSS)('center'), " ", (0, _global_styling.logicalCSS)('overflow-x', 'hidden'), "font-weight:", euiTheme.font.weight.medium, ";;label:euiAvatar;"),
     // Variants
     plain: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.emptyShade, ";;label:plain;"),
     subdued: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.lightestShade, ";;label:subdued;"),

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

@@ -13,9 +13,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
+var _href_validator = require("../../services/security/href_validator");
 var _inner_text = require("../inner_text");
 var _icon = require("../icon");
-var _href_validator = require("../../services/security/href_validator");
 var _color_utils = require("./color_utils");
 var _badge = require("./badge.styles");
 var _react2 = require("@emotion/react");
@@ -54,10 +54,10 @@ var EuiBadge = function EuiBadge(_ref) {
     target = _ref.target,
     style = _ref.style,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var euiTheme = (0, _services.useEuiTheme)();
   var isHrefValid = !href || (0, _href_validator.validateHref)(href);
   var isDisabled = _isDisabled || !isHrefValid;
   var isNamedColor = COLORS.includes(color);
+  var euiTheme = (0, _services.useEuiTheme)();
   var customColorStyles = (0, _react.useMemo)(function () {
     // Named colors set their styles via Emotion CSS and not inline styles
     if (isNamedColor) return style;
@@ -82,7 +82,7 @@ var EuiBadge = function EuiBadge(_ref) {
       }
     }
   }, [color, isNamedColor, style, euiTheme]);
-  var styles = (0, _badge.euiBadgeStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_badge.euiBadgeStyles);
   var cssStyles = [styles.euiBadge, isNamedColor && styles[color], (onClick || href) && !iconOnClick && styles.clickable, isDisabled && styles.disabled];
   var textCssStyles = [styles.text.euiBadge__text, (onClick || href) && !isDisabled && styles.text.clickable];
   var iconCssStyles = [styles.icon.euiBadge__icon, styles.icon[iconSide]];

package/test-env/components/badge/badge_group/badge_group.js

@@ -32,10 +32,9 @@ var EuiBadgeGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     _ref$gutterSize = _ref.gutterSize,
     gutterSize = _ref$gutterSize === void 0 ? 'xs' : _ref$gutterSize,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _badge_group.euiBadgeGroupStyles)(euiTheme);
-  var cssStyles = [styles.euiBadgeGroup, styles[gutterSize]];
   var classes = (0, _classnames.default)('euiBadgeGroup', className);
+  var styles = (0, _services.useEuiMemoizedStyles)(_badge_group.euiBadgeGroupStyles);
+  var cssStyles = [styles.euiBadgeGroup, styles[gutterSize]];
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     css: cssStyles,
     className: classes,

package/test-env/components/badge/beta_badge/beta_badge.js

@@ -56,11 +56,10 @@ var EuiBetaBadge = function EuiBetaBadge(_ref) {
     _ref$alignment = _ref.alignment,
     alignment = _ref$alignment === void 0 ? 'baseline' : _ref$alignment,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var euiTheme = (0, _services.useEuiTheme)();
   var singleLetter = !!(typeof label === 'string' && label.length === 1);
   var isCircular = iconType || singleLetter;
   var classes = (0, _classnames.default)('euiBetaBadge', className);
-  var styles = (0, _beta_badge.euiBetaBadgeStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_beta_badge.euiBetaBadgeStyles);
   var cssStyles = [styles.euiBetaBadge, styles[color], styles[size], styles[alignment], isCircular ? styles.badgeSizes.circle[size] : styles.badgeSizes.default[size]];
   var icon;
   if (iconType) {

package/test-env/components/badge/notification_badge/badge_notification.js

@@ -33,10 +33,9 @@ var EuiNotificationBadge = function EuiNotificationBadge(_ref) {
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'accent' : _ref$color,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _badge_notification.euiNotificationBadgeStyles)(euiTheme);
-  var cssStyles = [styles.euiNotificationBadge, styles[size], styles[color]];
   var classes = (0, _classnames.default)('euiNotificationBadge', className);
+  var styles = (0, _services.useEuiMemoizedStyles)(_badge_notification.euiNotificationBadgeStyles);
+  var cssStyles = [styles.euiNotificationBadge, styles[size], styles[color]];
   return (0, _react2.jsx)("span", (0, _extends2.default)({
     css: cssStyles,
     className: classes