@elastic/eui 116.3.1 → 116.5.0

package/optimize/lib/components/table/mobile/table_sort_mobile.js

@@ -7,13 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EuiTableSortMobile = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _button_empty = require("../../button/button_empty");
@@ -23,87 +18,70 @@ var _i18n = require("../../i18n");
 var _table_sort_mobile_item = require("./table_sort_mobile_item");
 var _react2 = require("@emotion/react");
 var _excluded = ["className", "anchorPosition", "items"];
-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 _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /*
+/*
  * 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 EuiTableSortMobile = exports.EuiTableSortMobile = /*#__PURE__*/function (_Component) {
-  function EuiTableSortMobile() {
-    var _this;
-    (0, _classCallCheck2.default)(this, EuiTableSortMobile);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, EuiTableSortMobile, [].concat(args));
-    (0, _defineProperty2.default)(_this, "state", {
-      isPopoverOpen: false
-    });
-    (0, _defineProperty2.default)(_this, "onButtonClick", function () {
-      _this.setState({
-        isPopoverOpen: !_this.state.isPopoverOpen
-      });
-    });
-    (0, _defineProperty2.default)(_this, "closePopover", function () {
-      _this.setState({
-        isPopoverOpen: false
-      });
-    });
-    // Aligns the button to the right even when it's the only element present
-    (0, _defineProperty2.default)(_this, "euiTableSortMobileStyles", {
-      marginInlineStart: 'auto',
-      label: 'euiTableSortMobile'
+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; }
+// Aligns the button to the right even when it's the only element present
+var euiTableSortMobileStyles = {
+  marginInlineStart: 'auto',
+  label: 'euiTableSortMobile'
+};
+var EuiTableSortMobile = exports.EuiTableSortMobile = function EuiTableSortMobile(_ref) {
+  var className = _ref.className,
+    anchorPosition = _ref.anchorPosition,
+    items = _ref.items,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isPopoverOpen = _useState2[0],
+    setIsPopoverOpen = _useState2[1];
+  var classes = (0, _classnames.default)('euiTableSortMobile', className);
+  var onButtonClick = function onButtonClick() {
+    setIsPopoverOpen(function (isOpen) {
+      return !isOpen;
     });
-    return _this;
-  }
-  (0, _inherits2.default)(EuiTableSortMobile, _Component);
-  return (0, _createClass2.default)(EuiTableSortMobile, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        className = _this$props.className,
-        anchorPosition = _this$props.anchorPosition,
-        items = _this$props.items,
-        rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
-      var classes = (0, _classnames.default)('euiTableSortMobile', className);
-      var mobileSortButton = (0, _react2.jsx)(_button_empty.EuiButtonEmpty, {
-        iconType: "chevronSingleDown",
-        iconSide: "right",
-        onClick: this.onButtonClick.bind(this),
-        flush: "right",
-        size: "xs"
-      }, (0, _react2.jsx)(_i18n.EuiI18n, {
-        token: "euiTableSortMobile.sorting",
-        default: "Sorting"
-      }));
-      var mobileSortPopover = (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({
-        button: mobileSortButton,
-        isOpen: this.state.isPopoverOpen,
-        closePopover: this.closePopover,
-        anchorPosition: anchorPosition || 'downRight',
-        panelPaddingSize: "none"
-      }, rest), (0, _react2.jsx)(_context_menu.EuiContextMenuPanel, {
-        style: {
-          minWidth: 200
-        },
-        items: items && items.length ? items.map(function (item) {
-          return (0, _react2.jsx)(_table_sort_mobile_item.EuiTableSortMobileItem, {
-            key: item.key,
-            onSort: item.onSort,
-            isSorted: item.isSorted,
-            isSortAscending: item.isSortAscending
-          }, item.name);
-        }) : undefined
-      }));
-      return (0, _react2.jsx)("div", {
-        className: classes,
-        css: this.euiTableSortMobileStyles
-      }, mobileSortPopover);
-    }
-  }]);
-}(_react.Component);
+  };
+  var closePopover = function closePopover() {
+    setIsPopoverOpen(false);
+  };
+  var mobileSortButton = (0, _react2.jsx)(_button_empty.EuiButtonEmpty, {
+    iconType: "chevronSingleDown",
+    iconSide: "right",
+    onClick: onButtonClick,
+    flush: "right",
+    size: "xs"
+  }, (0, _react2.jsx)(_i18n.EuiI18n, {
+    token: "euiTableSortMobile.sorting",
+    default: "Sorting"
+  }));
+  var mobileSortPopover = (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({
+    button: mobileSortButton,
+    isOpen: isPopoverOpen,
+    closePopover: closePopover,
+    anchorPosition: anchorPosition || 'downRight',
+    panelPaddingSize: "none"
+  }, rest), (0, _react2.jsx)(_context_menu.EuiContextMenuPanel, {
+    style: {
+      minWidth: 200
+    },
+    items: items !== null && items !== void 0 && items.length ? items.map(function (item) {
+      return (0, _react2.jsx)(_table_sort_mobile_item.EuiTableSortMobileItem, {
+        key: item.key,
+        onSort: item.onSort,
+        isSorted: item.isSorted,
+        isSortAscending: item.isSortAscending
+      }, item.name);
+    }) : undefined
+  }));
+  return (0, _react2.jsx)("div", {
+    className: classes,
+    css: euiTableSortMobileStyles
+  }, mobileSortPopover);
+};
+EuiTableSortMobile.displayName = 'EuiTableSortMobile';

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));
 };