@elastic/eui 116.3.0 → 116.3.1-snapshot.1782218964187

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.POSITIONS = exports.EuiToolTip = exports.DEFAULT_TOOLTIP_OFFSET = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -31,6 +32,8 @@ var _excluded = ["children", "className", "anchorClassName", "anchorProps", "con
  */
 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 POSITIONS = exports.POSITIONS = ['top', 'right', 'bottom', 'left'];
 var DISPLAYS = ['inlineBlock', 'block', 'flex'];
 var DEFAULT_TOOLTIP_OFFSET = exports.DEFAULT_TOOLTIP_OFFSET = 16;
@@ -84,22 +87,26 @@ var EuiToolTip = exports.EuiToolTip = /*#__PURE__*/(0, _react.forwardRef)(functi
     setVisible = _useState2[1];
   var _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    hasFocus = _useState4[0],
-    setHasFocus = _useState4[1];
-  var _useState5 = (0, _react.useState)(positionProp),
+    skipAnimation = _useState4[0],
+    setSkipAnimation = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    calculatedPosition = _useState6[0],
-    setCalculatedPosition = _useState6[1];
-  var _useState7 = (0, _react.useState)(DEFAULT_TOOLTIP_STYLES),
+    hasFocus = _useState6[0],
+    setHasFocus = _useState6[1];
+  var _useState7 = (0, _react.useState)(positionProp),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    toolTipStyles = _useState8[0],
-    setToolTipStyles = _useState8[1];
-  var _useState9 = (0, _react.useState)(undefined),
+    calculatedPosition = _useState8[0],
+    setCalculatedPosition = _useState8[1];
+  var _useState9 = (0, _react.useState)(DEFAULT_TOOLTIP_STYLES),
     _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;
+    toolTipStyles = _useState10[0],
+    setToolTipStyles = _useState10[1];
+  var _useState11 = (0, _react.useState)(undefined),
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    arrowStyles = _useState12[0],
+    setArrowStyles = _useState12[1];
+  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 () {
@@ -151,10 +158,19 @@ var EuiToolTip = exports.EuiToolTip = /*#__PURE__*/(0, _react.forwardRef)(functi
     setArrowStyles(undefined);
     _tool_tip_manager.toolTipManager.deregisterToolTip(hideToolTip);
   }, []);
+
+  /**
+   * Show the tooltip.
+   *
+   * Uses the tooltip manager's `skipAnimation` signal to optionally skip the entry
+   * animation when another tooltip is already open or was just closed.
+   */
   var showToolTip = (0, _react.useCallback)(function () {
     if (!content && !title) return;
+    var result = _tool_tip_manager.toolTipManager.registerTooltip(hideToolTip);
+    if (!result) return;
+    setSkipAnimation(result.skipAnimation);
     setVisible(true);
-    _tool_tip_manager.toolTipManager.registerTooltip(hideToolTip);
   }, [content, title, hideToolTip]);
   (0, _react.useImperativeHandle)(ref, function () {
     return {
@@ -234,18 +250,24 @@ var EuiToolTip = exports.EuiToolTip = /*#__PURE__*/(0, _react.forwardRef)(functi
       hideToolTip();
     }
   }, [disableScreenReaderOutput, visible, hideToolTip]);
-  var onMouseOut = (0, _react.useCallback)(function (event) {
-    // Prevent mousing over children from hiding the tooltip by testing for whether the mouse has
-    // left the anchor for a non-child.
-    if (anchorRef.current === event.relatedTarget || anchorRef.current != null && !anchorRef.current.contains(event.relatedTarget)) {
-      if (!hasFocus) {
-        hideToolTip();
-      }
-    }
-    if (onMouseOutProp) {
-      onMouseOutProp(event);
-    }
-  }, [hasFocus, hideToolTip, onMouseOutProp]);
+
+  /**
+   * Show the tooltip on enter.
+   */
+  var onMouseEnter = (0, _react.useCallback)(function (event) {
+    var _anchorProps$onMouseE;
+    showToolTip();
+    anchorProps === null || anchorProps === void 0 || (_anchorProps$onMouseE = anchorProps.onMouseEnter) === null || _anchorProps$onMouseE === void 0 || _anchorProps$onMouseE.call(anchorProps, event);
+  }, [showToolTip, anchorProps === null || anchorProps === void 0 ? void 0 : anchorProps.onMouseEnter]);
+
+  /**
+   * Hide the tooltip if the mouse is not over the trigger.
+   */
+  var onMouseLeave = (0, _react.useCallback)(function (event) {
+    var _anchorProps$onMouseL;
+    if (!hasFocus) hideToolTip();
+    anchorProps === null || anchorProps === void 0 || (_anchorProps$onMouseL = anchorProps.onMouseLeave) === null || _anchorProps$onMouseL === void 0 || _anchorProps$onMouseL.call(anchorProps, event);
+  }, [hasFocus, hideToolTip, anchorProps === null || anchorProps === void 0 ? void 0 : anchorProps.onMouseLeave]);
   var classes = (0, _classnames.default)('euiToolTip', className);
   var anchorClasses = (0, _classnames.default)(anchorClassName, anchorProps === null || anchorProps === void 0 ? void 0 : anchorProps.className);
   return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_tool_tip_anchor.EuiToolTipAnchor, (0, _extends2.default)({}, anchorProps, {
@@ -253,8 +275,9 @@ var EuiToolTip = exports.EuiToolTip = /*#__PURE__*/(0, _react.forwardRef)(functi
     onBlur: onBlur,
     onFocus: onFocus,
     onKeyDown: onEscapeKey,
-    onMouseOver: showToolTip,
-    onMouseOut: onMouseOut
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onMouseOut: onMouseOutProp
     // `id` defines if the trigger and tooltip are automatically linked via `aria-describedby`.
     ,
     id: !disableScreenReaderOutput ? id : undefined,
@@ -263,7 +286,12 @@ var EuiToolTip = exports.EuiToolTip = /*#__PURE__*/(0, _react.forwardRef)(functi
     isVisible: visible
   }), children), visible && (content || title) && (0, _react2.jsx)(_portal.EuiPortal, null, (0, _react2.jsx)(_tool_tip_popover.EuiToolTipPopover, (0, _extends2.default)({
     className: classes,
-    style: toolTipStyles,
+    style: _objectSpread(_objectSpread({}, toolTipStyles), {}, {
+      // Inline `animation: none` overrides the keyframes fade-in
+      // shorthand on the base `.euiToolTip` class, so a tooltip
+      // shown right after another closes appears instantly.
+      animation: skipAnimation ? 'none' : undefined
+    }),
     positionToolTip: positionToolTip,
     popoverRef: setPopoverRef,
     title: title,