@elastic/eui 116.3.1 → 116.4.0

package/optimize/lib/components/toast/global_toast_list.js

@@ -21,8 +21,9 @@ var _toast = require("./toast");
 var _global_toast_list = require("./global_toast_list.styles");
 var _button = require("../button");
 var _i18n = require("../i18n");
+var _badge = require("../badge");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "toasts", "dismissToast", "toastLifeTimeMs", "onClearAllToasts", "side", "showClearAllButtonAt"],
+var _excluded = ["className", "toasts", "dismissToast", "toastLifeTimeMs", "onClearAllToasts", "side", "showClearAllButtonAt", "showNotificationBadge"],
   _excluded2 = ["text", "toastLifeTimeMs"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -53,6 +54,8 @@ var EuiGlobalToastList = exports.EuiGlobalToastList = function EuiGlobalToastLis
     side = _ref$side === void 0 ? 'right' : _ref$side,
     _ref$showClearAllButt = _ref.showClearAllButtonAt,
     showClearAllButtonAt = _ref$showClearAllButt === void 0 ? CLEAR_ALL_TOASTS_THRESHOLD_DEFAULT : _ref$showClearAllButt,
+    _ref$showNotification = _ref.showNotificationBadge,
+    showNotificationBadge = _ref$showNotification === void 0 ? false : _ref$showNotification,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useState = (0, _react.useState)({}),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -227,8 +230,9 @@ var EuiGlobalToastList = exports.EuiGlobalToastList = function EuiGlobalToastLis
   var renderedToasts = (0, _react.useMemo)(function () {
     return toasts.map(function (toast) {
       var text = toast.text,
-        toastLifeTimeMs = toast.toastLifeTimeMs,
+        perToastLifeTimeMs = toast.toastLifeTimeMs,
         rest = (0, _objectWithoutProperties2.default)(toast, _excluded2);
+      var effectiveLifeTimeMs = perToastLifeTimeMs !== null && perToastLifeTimeMs !== void 0 ? perToastLifeTimeMs : toastLifeTimeMs;
       var onClose = function onClose() {
         return dismissToast(toast);
       };
@@ -239,9 +243,12 @@ var EuiGlobalToastList = exports.EuiGlobalToastList = function EuiGlobalToastLis
         onClose: onClose,
         onFocus: onMouseEnter,
         onBlur: onMouseLeave
-      }, rest), text));
+      }, rest, {
+        animationMs: effectiveLifeTimeMs,
+        text: text
+      })));
     });
-  }, [toasts, toastIdToDismissedMap, dismissToast, onMouseEnter, onMouseLeave]);
+  }, [toasts, toastIdToDismissedMap, dismissToast, onMouseEnter, onMouseLeave, toastLifeTimeMs]);
   var clearAllButton = (0, _react.useMemo)(function () {
     if (toasts.length && showClearAllButtonAt && toasts.length >= showClearAllButtonAt) {
       return (0, _react2.jsx)(_i18n.EuiI18n, {
@@ -255,7 +262,8 @@ var EuiGlobalToastList = exports.EuiGlobalToastList = function EuiGlobalToastLis
         return (0, _react2.jsx)(_global_toast_list_item.EuiGlobalToastListItem, {
           isDismissed: false
         }, (0, _react2.jsx)(_button.EuiButton, {
-          fill: true,
+          fullWidth: true,
+          size: "s",
           color: "text",
           onClick: function onClick() {
             toasts.forEach(function (toast) {
@@ -271,11 +279,28 @@ var EuiGlobalToastList = exports.EuiGlobalToastList = function EuiGlobalToastLis
     }
   }, [showClearAllButtonAt, onClearAllToasts, toasts, dismissToastProp, styles]);
   var classes = (0, _classnames.default)('euiGlobalToastList', className);
+  var hasContent = renderedToasts.length > 0 || clearAllButton != null;
+  var notificationBadge = (0, _react.useMemo)(function () {
+    var _toastIdToDismissedMa, _toasts$;
+    var toastWasDismissed = (_toastIdToDismissedMa = toastIdToDismissedMap[(_toasts$ = toasts[0]) === null || _toasts$ === void 0 ? void 0 : _toasts$.id]) !== null && _toastIdToDismissedMa !== void 0 ? _toastIdToDismissedMa : false;
+    var isListEmpty = toasts.every(function (t) {
+      return toastIdToDismissedMap[t.id];
+    });
+    return showNotificationBadge && toasts.length > 0 && (0, _react2.jsx)(_badge.EuiNotificationBadge, {
+      className: "euiGlobalToastList__countBadge",
+      css: [styles.notificationBadge.notificationBadge, toastWasDismissed && styles.notificationBadge.hasFadeOut, isListEmpty && styles.notificationBadge.hasFadeOut, ";label:notificationBadge;"],
+      size: "m",
+      color: "subdued",
+      "data-test-subj": "euiGlobalToastListNotificationBadge"
+    }, toasts.length);
+  }, [showNotificationBadge, toasts, toastIdToDismissedMap, styles]);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     "aria-live": "polite",
     role: "log",
     ref: listElement,
     css: cssStyles,
     className: classes
-  }, rest), renderedToasts, clearAllButton);
+  }, rest), hasContent && (0, _react2.jsx)("div", {
+    css: styles.content
+  }, notificationBadge, renderedToasts, clearAllButton));
 };

package/optimize/lib/components/toast/global_toast_list.styles.js

@@ -8,33 +8,56 @@ exports.euiGlobalToastListStyles = exports.euiGlobalToastListItemStyles = void 0
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
-var _templateObject;
-/*
+var _templateObject, _templateObject2;
+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
  * 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.
  */
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "ox3d1t-hasFadeOut",
+  styles: "opacity:0;label:hasFadeOut;"
+} : {
+  name: "ox3d1t-hasFadeOut",
+  styles: "opacity:0;label:hasFadeOut;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "19mjubd-content",
+  styles: "position:relative;label:content;"
+} : {
+  name: "19mjubd-content",
+  styles: "position:relative;label:content;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 var euiGlobalToastListStyles = exports.euiGlobalToastListStyles = function euiGlobalToastListStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var euiToastWidth = euiTheme.base * 25;
+  var euiToastWidth = euiTheme.base * 27.5; // 440px -> results in 360px toast width
+
+  var showNotificationBadge = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    from { opacity: 0; }\n    to { opacity: 1; }\n  "])));
   return {
     /**
      * 1. Allow list to expand as items are added, but cap it at the screen height.
      * 2. Allow some padding for shadow
      */
     // Base
-    euiGlobalToastList: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiScrollBarStyles)(euiThemeContext), " display:flex;flex-direction:column;align-items:stretch;position:fixed;z-index:", euiTheme.levels.toast, ";", (0, _global_styling.logicalCSS)('bottom', 0), " ", (0, _global_styling.logicalCSS)('width', "".concat(euiToastWidth, "px")), (0, _global_styling.logicalCSS)('max-height', '100vh'), (0, _global_styling.logicalCSSWithFallback)('overflow-y', 'auto'), "scrollbar-width:none;&::-webkit-scrollbar{", (0, _global_styling.logicalSizeCSS)(0, 0), ";}&:not(:empty){", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.base), ";}", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{&:not(:empty){", (0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.logicalCSS)('width', '100%'), ";}};label:euiGlobalToastList;"),
+    euiGlobalToastList: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiScrollBarStyles)(euiThemeContext), " display:flex;flex-direction:column;align-items:stretch;position:fixed;z-index:", euiTheme.levels.toast, ";", (0, _global_styling.logicalCSS)('bottom', 0), " ", (0, _global_styling.logicalCSS)('width', "".concat(euiToastWidth, "px")), (0, _global_styling.logicalCSS)('max-height', '100vh'), (0, _global_styling.logicalCSSWithFallback)('overflow-y', 'auto'), "scrollbar-width:none;&::-webkit-scrollbar{", (0, _global_styling.logicalSizeCSS)(0, 0), ";}&:hover .euiToastDecor::before,&:focus-within .euiToastDecor::before{animation-play-state:paused;}&:not(:empty){", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.base), ";}", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{&:not(:empty){", (0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.logicalCSS)('width', '100%'), ";}};label:euiGlobalToastList;"),
+    content: _ref2,
+    notificationBadge: {
+      notificationBadge: /*#__PURE__*/(0, _react.css)("position:absolute;inset-block-start:-", euiTheme.size.s, ";inset-inline-start:-", euiTheme.size.s, ";z-index:", Number(euiTheme.levels.content) + 1, ";", _global_styling.euiCanAnimate, "{animation:", euiTheme.animation.normal, " ", showNotificationBadge, " ", euiTheme.animation.resistance, ";transition:opacity ", euiTheme.animation.fast, ";};label:notificationBadge;"),
+      hasFadeOut: _ref
+    },
     // Variants
     right: /*#__PURE__*/(0, _react.css)("&:not(:empty){", (0, _global_styling.logicalCSS)('right', 0), ";", (0, _global_styling.euiMinBreakpoint)(euiThemeContext, 'm'), "{", (0, _global_styling.logicalCSS)('padding-left', "".concat(euiTheme.base * 4, "px")), ";}};label:right;"),
     left: /*#__PURE__*/(0, _react.css)("&:not(:empty){", (0, _global_styling.logicalCSS)('left', 0), ";", (0, _global_styling.euiMinBreakpoint)(euiThemeContext, 'm'), "{", (0, _global_styling.logicalCSS)('padding-right', "".concat(euiTheme.base * 4, "px")), ";}};label:left;"),
     euiGlobalToastListDismissButton: /*#__PURE__*/(0, _react.css)("position:sticky;", (0, _global_styling.logicalCSS)('bottom', '0%'), ";;label:euiGlobalToastListDismissButton;")
   };
 };
-var euiGlobalToastListItemStyles = exports.euiGlobalToastListItemStyles = function euiGlobalToastListItemStyles(_ref) {
-  var euiTheme = _ref.euiTheme;
-  var euiShowToast = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  from {\n    transform: translateY(", ") scale(.9);\n    opacity: 0;\n  }\n\n  to {\n    transform: translateY(0) scale(1);\n    opacity: 1;\n  }\n"])), euiTheme.size.l);
+var euiGlobalToastListItemStyles = exports.euiGlobalToastListItemStyles = function euiGlobalToastListItemStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme;
+  var euiShowToast = (0, _react.keyframes)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  from {\n    transform: translateY(", ") scale(.9);\n    opacity: 0;\n  }\n\n  to {\n    transform: translateY(0) scale(1);\n    opacity: 1;\n  }\n"])), euiTheme.size.l);
   return {
     // Base
     euiGlobalToastListItem: /*#__PURE__*/(0, _react.css)("flex-shrink:0;", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.base), " animation:", euiTheme.animation.normal, " ", euiShowToast, " ", euiTheme.animation.resistance, ";opacity:1;&:first-child{", (0, _global_styling.logicalCSS)('margin-top', 'auto'), ";}&:last-child{", (0, _global_styling.logicalCSS)('margin-bottom', 0), ";};label:euiGlobalToastListItem;"),

package/optimize/lib/components/toast/toast.js

@@ -1,14 +1,17 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiToast = exports.COLORS = void 0;
+exports.EuiToast = exports.COLOR_TO_NOTIFICATION_ICON_MAP = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+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 _classnames = _interopRequireDefault(require("classnames"));
+var _euiThemeCommon = require("@elastic/eui-theme-common");
 var _services = require("../../services");
 var _accessibility = require("../accessibility");
 var _button = require("../button");
@@ -16,8 +19,12 @@ var _i18n = require("../i18n");
 var _icon = require("../icon");
 var _text = require("../text");
 var _toast = require("./toast.styles");
+var _notification_icon = require("../notification_icon/notification_icon");
+var _notification_icon2 = require("../notification_icon/notification_icon.styles");
+var _toast_action = require("./toast_action");
+var _title = require("../title");
 var _react2 = require("@emotion/react");
-var _excluded = ["title", "color", "iconType", "onClose", "children", "className"];
+var _excluded = ["title", "text", "color", "iconType", "children", "className", "actionProps", "style", "onClose", "animationMs"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -25,58 +32,150 @@ var _excluded = ["title", "color", "iconType", "onClose", "children", "className
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var COLORS = exports.COLORS = ['primary', 'success', 'warning', 'danger'];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var COLOR_TO_NOTIFICATION_ICON_MAP = exports.COLOR_TO_NOTIFICATION_ICON_MAP = {
+  primary: 'info',
+  success: 'success',
+  warning: 'warning',
+  danger: 'error'
+};
 var EuiToast = exports.EuiToast = function EuiToast(_ref) {
   var title = _ref.title,
-    color = _ref.color,
+    text = _ref.text,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'primary' : _ref$color,
     iconType = _ref.iconType,
-    onClose = _ref.onClose,
     children = _ref.children,
     className = _ref.className,
+    actionProps = _ref.actionProps,
+    style = _ref.style,
+    onClose = _ref.onClose,
+    animationMs = _ref.animationMs,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var baseStyles = (0, _services.useEuiMemoizedStyles)(_toast.euiToastStyles);
-  var baseCss = [baseStyles.euiToast, color && baseStyles.colors[color]];
+  var _useEuiTheme = (0, _services.useEuiTheme)(),
+    euiTheme = _useEuiTheme.euiTheme;
+  var styles = (0, _services.useEuiMemoizedStyles)(_toast.euiToastStyles);
+  var iconStyles = (0, _services.useEuiMemoizedStyles)(_notification_icon2.euiNotificationIconStyles);
   var headerStyles = (0, _services.useEuiMemoizedStyles)(_toast.euiToastHeaderStyles);
-  var headerCss = [headerStyles.euiToastHeader, children && headerStyles.withBody];
-  var classes = (0, _classnames.default)('euiToast', className);
+  var cssStyles = [styles.euiToast];
+  var decorCssStyles = [styles.decor, animationMs && styles.hasAnimation];
+  var classes = (0, _classnames.default)('euiToast', className, (0, _defineProperty2.default)({}, "euiToast--".concat(color), color));
+  var highlightColorToken = (0, _euiThemeCommon.getTokenName)('borderStrong', color);
+  var typeColor = euiTheme.colors[highlightColorToken];
+  var backgroundLightToken = (0, _euiThemeCommon.getTokenName)('backgroundLight', color);
+  var backgroundLightColor = euiTheme.colors[backgroundLightToken];
+  var cssVariables = (0, _react.useMemo)(function () {
+    return _objectSpread({
+      '--euiToastTypeColor': typeColor,
+      '--euiToastTypeBackgroundColor': backgroundLightColor
+    }, animationMs && {
+      '--euiToastAnimationMs': "".concat(animationMs, "ms")
+    });
+  }, [typeColor, backgroundLightColor, animationMs]);
+  var dismissButton = (0, _react.useMemo)(function () {
+    if (!onClose) return;
+    return (0, _react2.jsx)(_i18n.EuiI18n, {
+      token: "euiToast.dismissToast",
+      default: "Dismiss toast"
+    }, function (dismissToast) {
+      return (0, _react2.jsx)(_button.EuiButtonIcon, {
+        css: styles.dismissButton,
+        iconType: "cross",
+        color: "text",
+        size: "xs",
+        "aria-label": dismissToast,
+        onClick: onClose,
+        "data-test-subj": "toastCloseButton"
+      });
+    });
+  }, [onClose, styles]);
+  var header = (0, _react.useMemo)(function () {
+    if (!title) return;
+    var headerCssStyles = [headerStyles.euiToastHeader, onClose && headerStyles.hasDismissButton];
+    return (0, _react2.jsx)(_title.EuiTitle, {
+      size: "xs",
+      css: headerCssStyles,
+      "data-test-subj": "euiToastHeader__title"
+    }, (0, _react2.jsx)("p", null, title));
+  }, [title, headerStyles, onClose]);
+  var icon = (0, _react.useMemo)(function () {
+    if (!iconType) {
+      var _COLOR_TO_NOTIFICATIO;
+      var defaultIconType = (_COLOR_TO_NOTIFICATIO = COLOR_TO_NOTIFICATION_ICON_MAP[color]) !== null && _COLOR_TO_NOTIFICATIO !== void 0 ? _COLOR_TO_NOTIFICATIO : 'info';
+      return (0, _react2.jsx)(_notification_icon.EuiNotificationIcon, {
+        css: styles.icon,
+        type: defaultIconType,
+        size: "l"
+      });
+    }
+    return (0, _react2.jsx)(_icon.EuiIcon, {
+      css: [styles.icon, iconStyles.size.l, ";label:icon;"],
+      type: iconType,
+      size: "l",
+      "aria-hidden": "true",
+      color: typeColor
+    });
+  }, [iconType, color, typeColor, styles, iconStyles]);
+  var optionalChildren = (0, _react.useMemo)(function () {
+    if (!text && !children) return null;
+    return (0, _react2.jsx)("div", {
+      css: styles.text,
+      "data-test-subj": "euiToastBody"
+    }, text && (0, _react2.jsx)(_text.EuiText, {
+      size: "s",
+      color: "default",
+      className: "euiToast__text",
+      "data-test-subj": "euiToastText"
+    }, text), children && (0, _react2.jsx)(_text.EuiText, {
+      className: "euiToast__additionalContent",
+      size: "s",
+      color: "default",
+      "data-test-subj": "euiToastAdditionalContent"
+    }, children));
+  }, [text, children, styles]);
+  var actionControls = (0, _react.useMemo)(function () {
+    var actionPrimaryProps = _objectSpread(_objectSpread({}, actionProps === null || actionProps === void 0 ? void 0 : actionProps.primary), {}, {
+      color: color
+    });
+    var actionSecondaryProps = _objectSpread(_objectSpread({}, actionProps === null || actionProps === void 0 ? void 0 : actionProps.secondary), {}, {
+      color: color
+    });
+    var hasActionPrimary = Boolean(actionProps === null || actionProps === void 0 ? void 0 : actionProps.primary);
+    var hasActionSecondary = Boolean(actionProps === null || actionProps === void 0 ? void 0 : actionProps.secondary);
+    if (!hasActionPrimary && !hasActionSecondary) return null;
+    var actionPrimary = hasActionPrimary && (0, _react2.jsx)(_toast_action.EuiToastAction, (0, _extends2.default)({
+      actionType: "primary"
+    }, actionPrimaryProps));
+    var actionSecondary = hasActionSecondary && (0, _react2.jsx)(_toast_action.EuiToastAction, (0, _extends2.default)({
+      actionType: "secondary"
+    }, actionSecondaryProps));
+    return (0, _react2.jsx)("div", {
+      css: styles.actions
+    }, actionPrimary, actionSecondary);
+  }, [actionProps, color, styles]);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
-    css: baseCss,
-    className: classes
-  }, rest), (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", null, (0, _react2.jsx)(_i18n.EuiI18n, {
+    css: cssStyles,
+    className: classes,
+    style: _objectSpread(_objectSpread({}, cssVariables), style)
+  }, rest), (0, _react2.jsx)("div", {
+    className: "euiToastDecor",
+    css: decorCssStyles,
+    role: "presentation"
+  }), (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", null, (0, _react2.jsx)(_i18n.EuiI18n, {
     token: "euiToast.newNotification",
     default: "A new notification appears"
-  }))), (0, _react2.jsx)(_i18n.EuiI18n, {
-    token: "euiToast.notification",
-    default: "Notification"
-  }, function (notification) {
-    return (0, _react2.jsx)("div", {
-      css: headerCss,
-      "aria-label": notification,
-      "data-test-subj": "euiToastHeader"
-    }, iconType && (0, _react2.jsx)(_icon.EuiIcon, {
-      css: headerStyles.euiToastHeader__icon,
-      type: iconType,
-      size: "m",
-      "aria-hidden": "true"
-    }), (0, _react2.jsx)("span", {
-      css: headerStyles.euiToastHeader__title,
-      "data-test-subj": "euiToastHeader__title"
-    }, title));
-  }), onClose && (0, _react2.jsx)(_i18n.EuiI18n, {
-    token: "euiToast.dismissToast",
-    default: "Dismiss toast"
-  }, function (dismissToast) {
-    return (0, _react2.jsx)(_button.EuiButtonIcon, {
-      css: baseStyles.euiToast__closeButton,
-      iconType: "cross",
-      color: "text",
-      size: "xs",
-      "aria-label": dismissToast,
-      onClick: onClose,
-      "data-test-subj": "toastCloseButton"
-    });
-  }), children && (0, _react2.jsx)(_text.EuiText, {
-    size: "s",
-    "data-test-subj": "euiToastBody"
-  }, children));
+  }))), (0, _react2.jsx)("div", {
+    css: styles.wrapper
+  }, (0, _react2.jsx)("div", {
+    css: styles.body
+  }, icon, (0, _react2.jsx)("div", {
+    css: styles.content
+  },
+  // Note: the DOM position of the dismiss button matters to screen reader users.
+  // We generally want them to have some context of _what_ they're dismissing,
+  // instead of navigating to the dismiss button first before the content
+  header && optionalChildren ? (0, _react2.jsx)(_react.default.Fragment, null, header, dismissButton, optionalChildren) : (0, _react2.jsx)(_react.default.Fragment, null, header || optionalChildren, dismissButton))), actionControls));
 };

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

@@ -1,15 +1,18 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.euiToastStyles = exports.euiToastHeaderStyles = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _euiThemeCommon = require("@elastic/eui-theme-common");
 var _global_styling = require("../../global_styling");
 var _high_contrast = require("../../global_styling/functions/high_contrast");
 var _title = require("../title/title.styles");
 var _panel = require("../panel/panel.styles");
+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
@@ -17,60 +20,45 @@ var _panel = require("../panel/panel.styles");
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-
+var TEXT_MAX_WIDTH = 1200;
+var CONTAINER_NAME = 'euiToast';
+var CQC_BREAKPOINT_NARROWEST = '(max-width: 320px)';
+var euiToastAnimation = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  from {\n    transform: scaleX(1);\n  }\n  to {\n    transform: scaleX(0);\n  }\n"])));
 var euiToastStyles = exports.euiToastStyles = function euiToastStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme,
-    highContrastMode = euiThemeContext.highContrastMode;
-  var highlightStyles = function highlightStyles(color, width) {
-    return "\n    &:before {\n      content: '';\n      position: absolute;\n      /* ensure highlight border is on top of panel border */\n      z-index: 1;\n      inset: 0;\n      border-radius: inherit;\n      ".concat((0, _global_styling.logicalCSS)('border-top', "".concat(width, " solid ").concat(color)), "\n      pointer-events: none;\n    }\n  ");
-  };
+  var euiTheme = euiThemeContext.euiTheme;
+  var highlightSize = (0, _euiThemeCommon.mathWithUnits)([euiTheme.border.width.thin, euiTheme.border.width.thick], function (x, y) {
+    return x + y;
+  });
+  var paddingTop = (0, _euiThemeCommon.mathWithUnits)([euiTheme.size.base, highlightSize], function (x, y) {
+    return x + y;
+  });
+  var offsetTop = (0, _euiThemeCommon.mathWithUnits)([euiTheme.size.s, highlightSize], function (x, y) {
+    return x + y;
+  });
   return {
     // Base
-    euiToast: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";", (0, _euiThemeCommon.euiShadowLarge)(euiThemeContext, {
+    euiToast: /*#__PURE__*/(0, _react.css)("container-type:inline-size;container-name:", CONTAINER_NAME, ";position:relative;overflow:hidden;border-radius:", euiTheme.border.radius.medium, ";", (0, _euiThemeCommon.euiShadowLarge)(euiThemeContext, {
       borderAllInHighContrastMode: true
-    }), " position:relative;", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.base), " background-color:", euiTheme.colors.emptyShade, ";", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.euiTextBreakWord)(), (0, _panel.euiPanelBorderStyles)(euiThemeContext), " &:hover,&:focus{[class*='euiToast__closeButton']{opacity:1;}};label:euiToast;"),
-    // Elements
-    euiToast__closeButton: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('top', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('right', euiTheme.size.base), ";;label:euiToast__closeButton;"),
-    // Variants
-    colors: {
-      _getStyles: function _getStyles(color) {
-        // Increase color/border thickness for all high contrast modes
-        var borderWidth = highContrastMode ? (0, _euiThemeCommon.mathWithUnits)(euiTheme.border.width.thick, function (x) {
-          return x * 2;
-        }) : euiTheme.border.width.thick;
-        return (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
-          none: highlightStyles(color, borderWidth),
-          preferred: "\n            ".concat(highlightStyles(color, borderWidth), "\n            \n            &::before {\n              ").concat((0, _global_styling.logicalCSS)('width', "calc(100% + ".concat((0, _euiThemeCommon.mathWithUnits)(euiTheme.border.width.thin, function (x) {
-            return x * 2;
-          }), ")")), "\n              ").concat((0, _global_styling.logicalCSS)('margin-top', "-".concat(euiTheme.border.width.thin)), "\n              ").concat((0, _global_styling.logicalCSS)('margin-left', "-".concat(euiTheme.border.width.thin)), "\n            }\n          "),
-          // Windows high contrast mode ignores/overrides border colors, which have semantic meaning here. To get around this, we'll use a pseudo element that ignores forced colors
-          forced: "\n            overflow: hidden;\n\n            &::before {\n              content: '';\n              position: absolute;\n              ".concat((0, _global_styling.logicalCSS)('top', 0), "\n              ").concat((0, _global_styling.logicalCSS)('horizontal', 0), "\n              ").concat((0, _global_styling.logicalCSS)('height', borderWidth), "\n              background-color: ").concat(color, ";\n              ").concat((0, _high_contrast.preventForcedColors)(euiThemeContext), "\n              pointer-events: none;\n            }\n          ")
-        });
-      },
-      get primary() {
-        return /*#__PURE__*/(0, _react.css)(this._getStyles(euiTheme.colors.primary), ";label:primary;");
-      },
-      get success() {
-        return /*#__PURE__*/(0, _react.css)(this._getStyles(euiTheme.colors.success), ";label:success;");
-      },
-      get warning() {
-        return /*#__PURE__*/(0, _react.css)(this._getStyles(euiTheme.colors.warning), ";label:warning;");
-      },
-      get danger() {
-        return /*#__PURE__*/(0, _react.css)(this._getStyles(euiTheme.colors.danger), ";label:danger;");
-      }
-    }
+    }), " ", (0, _global_styling.logicalCSS)('padding-top', paddingTop), " ", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.base), " background-color:", euiTheme.colors.backgroundBasePlain, ";", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.euiTextBreakWord)(), (0, _panel.euiPanelBorderStyles)(euiThemeContext), ";;label:euiToast;"),
+    decor: /*#__PURE__*/(0, _react.css)("position:absolute;inset-block-start:0;inset-inline:0;", (0, _global_styling.logicalCSS)('height', highlightSize), " background-color:var(--euiToastTypeBackgroundColor);", (0, _high_contrast.preventForcedColors)(euiThemeContext), " &::before{content:'';position:absolute;z-index:", euiTheme.levels.content, ";inset-block-start:0;inset-inline:0;", (0, _global_styling.logicalCSS)('height', '100%'), " background-color:var(--euiToastTypeColor);pointer-events:none;", (0, _high_contrast.preventForcedColors)(euiThemeContext), " transform-origin:left center;[dir='rtl'] &{transform-origin:right center;}};label:decor;"),
+    // handles content + actions layout
+    wrapper: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:column;gap:", euiTheme.size.m, ";inline-size:100%;;label:wrapper;"),
+    // handles icon + text layout
+    body: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:row;align-self:center;gap:", euiTheme.size.m, ";inline-size:100%;;label:body;"),
+    // handles text layout
+    content: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:column;gap:", euiTheme.size.xs, ";align-self:center;inline-size:100%;max-inline-size:", TEXT_MAX_WIDTH, "px;.euiToast__text+.euiToast__additionalContent{", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.s), ";};label:content;"),
+    text: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:column;gap:", euiTheme.size.xs, ";;label:text;"),
+    icon: /*#__PURE__*/(0, _react.css)("grid-area:icon;position:relative;", (0, _global_styling.logicalCSS)('margin-vertical', euiTheme.size.xxs), ";;label:icon;"),
+    actions: /*#__PURE__*/(0, _react.css)("grid-area:actions;display:flex;gap:", euiTheme.size.s, ";", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xl), "@container ", CONTAINER_NAME, " ", CQC_BREAKPOINT_NARROWEST, "{flex-wrap:wrap;>*{inline-size:100%;}};label:actions;"),
+    dismissButton: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('top', offsetTop), ";", (0, _global_styling.logicalCSS)('right', euiTheme.size.s), ";;label:dismissButton;"),
+    hasAnimation: /*#__PURE__*/(0, _react.css)("&::before{", _euiThemeCommon.euiCanAnimate, "{animation:", euiToastAnimation, " var(--euiToastAnimationMs) linear forwards;}};label:hasAnimation;")
   };
 };
 var euiToastHeaderStyles = exports.euiToastHeaderStyles = function euiToastHeaderStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiToastHeader: /*#__PURE__*/(0, _react.css)("display:flex;align-items:baseline;", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.l), ">*+*{", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.s), ";};label:euiToastHeader;"),
-    // Elements
-    euiToastHeader__icon: /*#__PURE__*/(0, _react.css)("flex:0 0 auto;fill:", euiTheme.colors.textHeading, ";transform:translateY(2px);;label:euiToastHeader__icon;"),
-    euiToastHeader__title: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xs'), " font-weight:", euiTheme.font.weight.bold, ";;label:euiToastHeader__title;"),
-    // Variants
-    withBody: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.s), ";;label:withBody;")
+    euiToastHeader: /*#__PURE__*/(0, _react.css)("display:flex;align-items:baseline;", (0, _title.euiTitle)(euiThemeContext, 'xs'), " font-weight:", euiTheme.font.weight.bold, ";;label:euiToastHeader;"),
+    hasDismissButton: /*#__PURE__*/(0, _react.css)("padding-inline-end:", euiTheme.size.l, ";;label:hasDismissButton;")
   };
 };

package/optimize/lib/components/toast/toast_action.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiToastAction = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _button = require("../button");
+var _react2 = require("@emotion/react");
+var _excluded = ["children", "actionType", "color"];
+/*
+ * 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.
+ */
+var EuiToastAction = exports.EuiToastAction = function EuiToastAction(_ref) {
+  var children = _ref.children,
+    _ref$actionType = _ref.actionType,
+    actionType = _ref$actionType === void 0 ? 'primary' : _ref$actionType,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'primary' : _ref$color,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  if (actionType === 'primary') {
+    return (0, _react2.jsx)(_button.EuiButton, (0, _extends2.default)({
+      size: "s",
+      color: color
+    }, rest), children);
+  } else {
+    return (0, _react2.jsx)(_button.EuiButtonEmpty, (0, _extends2.default)({
+      size: "s",
+      color: color
+    }, rest), children);
+  }
+};

package/optimize/lib/components/toast/types.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.COLORS = void 0;
+/*
+ * 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.
+ */
+
+var COLORS = exports.COLORS = ['primary', 'success', 'warning', 'danger'];

package/optimize/lib/components/tool_tip/tool_tip.js

@@ -98,8 +98,8 @@ var EuiToolTip = exports.EuiToolTip = /*#__PURE__*/(0, _react.forwardRef)(functi
     _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
     arrowStyles = _useState10[0],
     setArrowStyles = _useState10[1];
-  var generatedId = (0, _react.useRef)((0, _services.htmlIdGenerator)()());
-  var id = idProp !== null && idProp !== void 0 ? idProp : generatedId.current;
+  var generatedId = (0, _services.useGeneratedHtmlId)();
+  var id = idProp !== null && idProp !== void 0 ? idProp : generatedId;
   var anchorRef = (0, _react.useRef)(null);
   var popoverRef = (0, _react.useRef)(null);
   var positionToolTip = (0, _react.useCallback)(function () {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "116.3.1",
+  "version": "116.4.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -22,7 +22,7 @@
     "build": "yarn build:clean && yarn build:i18ntokens && node ./scripts/compile-eui.js",
     "build-pack": "yarn build && yarn pack",
     "watch": "node ../../scripts/watch-eui.js --package @elastic/eui",
-    "compile-icons": "node ./scripts/compile-icons.js && prettier --write --loglevel=warn \"./src/components/icon/assets/**/*.tsx\"",
+    "compile-icons": "node ./scripts/compile-icons.js && prettier --write --loglevel=warn \"./src/components/icon/assets/**/*.tsx\" \"./src/components/notification_icon/assets/**/*.tsx\"",
     "lint": "yarn tsc --noEmit && yarn lint-es && yarn lint-css-in-js && yarn lint-sass",
     "lint-fix": "yarn lint-es --fix && yarn lint-css-in-js --fix",
     "lint-es": "NODE_OPTIONS=--max-old-space-size=4096 eslint --cache \"src/**/*.{ts,tsx,js}\"",
@@ -44,6 +44,7 @@
     "release-rc": "node ./scripts/release.js --type=prerelease",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
+    "test-storybook": "test-storybook",
     "pre-push": "yarn test-staged",
     "prerelease": "node ./scripts/prerelease.mjs"
   },
@@ -117,8 +118,7 @@
     "@emotion/jest": "^11.11.0",
     "@emotion/react": "^11.11.0",
     "@faker-js/faker": "^8.0.2",
-    "@loki/create-async-callback": "^0.35.0",
-    "@loki/is-loki-running": "^0.35.0",
+    "@playwright/test": "^1.44.0",
     "@storybook/addon-essentials": "^8.4.5",
     "@storybook/addon-interactions": "^8.4.5",
     "@storybook/addon-links": "^8.4.5",
@@ -130,6 +130,7 @@
     "@storybook/react": "^8.4.5",
     "@storybook/react-webpack5": "^8.4.5",
     "@storybook/test": "^8.4.5",
+    "@storybook/test-runner": "^0.19.1",
     "@svgr/core": "8.0.0",
     "@svgr/plugin-jsx": "^8.0.1",
     "@svgr/plugin-svgo": "^8.0.1",
@@ -143,6 +144,7 @@
     "@types/classnames": "^2.3.1",
     "@types/enzyme": "^3.10.5",
     "@types/jest": "^29.5.12",
+    "@types/jest-image-snapshot": "^5.1.0",
     "@types/prettier": "2.7.3",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
@@ -206,7 +208,7 @@
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "loki": "^0.35.0",
+    "jest-image-snapshot": "^6.4.0",
     "moment": "^2.27.0",
     "moment-timezone": "^0.5.31",
     "path": "^0.12.7",