@elastic/eui 62.0.2 → 62.2.0

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

@@ -11,21 +11,11 @@ exports.TOAST_FADE_OUT_MS = exports.SIDES = exports.EuiGlobalToastList = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -33,12 +23,16 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _common = require("../common");
 
+var _services = require("../../services");
+
 var _time = require("../../services/time");
 
 var _global_toast_list_item = require("./global_toast_list_item");
 
 var _toast = require("./toast");
 
+var _global_toast_list = require("./global_toast_list.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["className", "toasts", "dismissToast", "toastLifeTimeMs", "side"],
@@ -52,10 +46,6 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 var sideToClassNameMap = {
   left: 'euiGlobalToastList--left',
   right: 'euiGlobalToastList--right'
@@ -65,234 +55,230 @@ exports.SIDES = SIDES;
 var TOAST_FADE_OUT_MS = 250;
 exports.TOAST_FADE_OUT_MS = TOAST_FADE_OUT_MS;
 
-var EuiGlobalToastList = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(EuiGlobalToastList, _Component);
-
-  var _super = _createSuper(EuiGlobalToastList);
-
-  function EuiGlobalToastList() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, EuiGlobalToastList);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      toastIdToDismissedMap: {}
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "dismissTimeoutIds", []);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toastIdToTimerMap", {});
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isScrollingToBottom", false);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isScrolledToBottom", true);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isUserInteracting", false);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isScrollingAnimationFrame", 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "startScrollingAnimationFrame", 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "listElement", null);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseEnter", function () {
-      // Stop scrolling to bottom if we're in mid-scroll, because the user wants to interact with
-      // the list.
-      _this.isScrollingToBottom = false;
-      _this.isUserInteracting = true; // Don't let toasts dismiss themselves while the user is interacting with them.
-
-      for (var _toastId in _this.toastIdToTimerMap) {
-        if (_this.toastIdToTimerMap.hasOwnProperty(_toastId)) {
-          var timer = _this.toastIdToTimerMap[_toastId];
-          timer.pause();
-        }
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseLeave", function () {
-      _this.isUserInteracting = false;
-
-      for (var _toastId2 in _this.toastIdToTimerMap) {
-        if (_this.toastIdToTimerMap.hasOwnProperty(_toastId2)) {
-          var timer = _this.toastIdToTimerMap[_toastId2];
-          timer.resume();
-        }
+var EuiGlobalToastList = function EuiGlobalToastList(_ref) {
+  var className = _ref.className,
+      _ref$toasts = _ref.toasts,
+      toasts = _ref$toasts === void 0 ? [] : _ref$toasts,
+      dismissToastProp = _ref.dismissToast,
+      toastLifeTimeMs = _ref.toastLifeTimeMs,
+      _ref$side = _ref.side,
+      side = _ref$side === void 0 ? 'right' : _ref$side,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      toastIdToDismissedMap = _useState2[0],
+      setToastIdToDismissedMap = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      toastToDismiss = _useState4[0],
+      setToastToDismiss = _useState4[1];
+
+  var prevToasts = (0, _react.useRef)([]);
+  var dismissTimeoutIds = (0, _react.useRef)([]);
+  var toastIdToTimerMap = (0, _react.useRef)({});
+  var isScrollingToBottom = (0, _react.useRef)(false);
+  var isScrolledToBottom = (0, _react.useRef)(true);
+  var isUserInteracting = (0, _react.useRef)(false); // See [Return Value](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame#Return_value)
+  // for information on initial value of 0
+
+  var isScrollingAnimationFrame = (0, _react.useRef)(0);
+  var startScrollingAnimationFrame = (0, _react.useRef)(0);
+  var listElement = (0, _react.useRef)(null);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _global_toast_list.euiGlobalToastListStyles)(euiTheme);
+  var cssStyles = [styles.euiGlobalToastList, styles[side]];
+
+  var startScrollingToBottom = function startScrollingToBottom() {
+    isScrollingToBottom.current = true;
+
+    var scrollToBottom = function scrollToBottom() {
+      // Although we cancel the requestAnimationFrame in componentWillUnmount,
+      // it's possible for this.listElement to become null in the meantime
+      if (!listElement.current) {
+        return;
       }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onScroll", function () {
-      if (_this.listElement) {
-        _this.isScrolledToBottom = _this.listElement.scrollHeight - _this.listElement.scrollTop === _this.listElement.clientHeight;
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "scheduleAllToastsForDismissal", function () {
-      _this.props.toasts.forEach(function (toast) {
-        if (!_this.toastIdToTimerMap[toast.id]) {
-          _this.scheduleToastForDismissal(toast);
-        }
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "scheduleToastForDismissal", function (toast) {
-      // Start fading the toast out once its lifetime elapses.
-      _this.toastIdToTimerMap[toast.id] = new _time.Timer(_this.dismissToast.bind((0, _assertThisInitialized2.default)(_this), toast), toast.toastLifeTimeMs != null ? toast.toastLifeTimeMs : _this.props.toastLifeTimeMs);
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "dismissToast", function (toast) {
-      // Remove the toast after it's done fading out.
-      _this.dismissTimeoutIds.push(window.setTimeout(function () {
-        // Because this is wrapped in a setTimeout, and because React does not guarantee when
-        // state updates happen, it is possible to double-dismiss a toast
-        // including by double-clicking the "x" button on the toast
-        // so, first check to make sure we haven't already dismissed this toast
-        if (_this.toastIdToTimerMap.hasOwnProperty(toast.id)) {
-          _this.props.dismissToast.apply((0, _assertThisInitialized2.default)(_this), [toast]);
-
-          _this.toastIdToTimerMap[toast.id].clear();
-
-          delete _this.toastIdToTimerMap[toast.id];
-
-          _this.setState(function (prevState) {
-            var toastIdToDismissedMap = _objectSpread({}, prevState.toastIdToDismissedMap);
-
-            delete toastIdToDismissedMap[toast.id];
-            return {
-              toastIdToDismissedMap: toastIdToDismissedMap
-            };
-          });
-        }
-      }, TOAST_FADE_OUT_MS));
 
-      _this.setState(function (prevState) {
-        var toastIdToDismissedMap = _objectSpread(_objectSpread({}, prevState.toastIdToDismissedMap), {}, (0, _defineProperty2.default)({}, toast.id, true));
+      var position = listElement.current.scrollTop;
+      var destination = listElement.current.scrollHeight - listElement.current.clientHeight;
+      var distanceToDestination = destination - position;
 
-        return {
-          toastIdToDismissedMap: toastIdToDismissedMap
-        };
-      });
-    });
-    return _this;
-  }
+      if (distanceToDestination < 5) {
+        listElement.current.scrollTop = destination;
+        isScrollingToBottom.current = false;
+        isScrolledToBottom.current = true;
+        return;
+      }
 
-  (0, _createClass2.default)(EuiGlobalToastList, [{
-    key: "startScrollingToBottom",
-    value: function startScrollingToBottom() {
-      var _this2 = this;
+      listElement.current.scrollTop = position + distanceToDestination * 0.25;
 
-      this.isScrollingToBottom = true;
+      if (isScrollingToBottom) {
+        isScrollingAnimationFrame.current = window.requestAnimationFrame(scrollToBottom);
+      }
+    };
 
-      var scrollToBottom = function scrollToBottom() {
-        // Although we cancel the requestAnimationFrame in componentWillUnmount,
-        // it's possible for this.listElement to become null in the meantime
-        if (!_this2.listElement) {
-          return;
-        }
+    startScrollingAnimationFrame.current = window.requestAnimationFrame(scrollToBottom);
+  };
 
-        var position = _this2.listElement.scrollTop;
-        var destination = _this2.listElement.scrollHeight - _this2.listElement.clientHeight;
-        var distanceToDestination = destination - position;
+  var onMouseEnter = function onMouseEnter() {
+    // Stop scrolling to bottom if we're in mid-scroll, because the user wants to interact with
+    // the list.
+    isScrollingToBottom.current = false;
+    isUserInteracting.current = true; // Don't let toasts dismiss themselves while the user is interacting with them.
 
-        if (distanceToDestination < 5) {
-          _this2.listElement.scrollTop = destination;
-          _this2.isScrollingToBottom = false;
-          _this2.isScrolledToBottom = true;
-          return;
-        }
+    for (var _toastId in toastIdToTimerMap.current) {
+      if (toastIdToTimerMap.current.hasOwnProperty(_toastId)) {
+        var timer = toastIdToTimerMap.current[_toastId];
+        timer.pause();
+      }
+    }
+  };
 
-        _this2.listElement.scrollTop = position + distanceToDestination * 0.25;
+  var onMouseLeave = function onMouseLeave() {
+    isUserInteracting.current = false;
 
-        if (_this2.isScrollingToBottom) {
-          _this2.isScrollingAnimationFrame = window.requestAnimationFrame(scrollToBottom);
-        }
-      };
+    for (var _toastId2 in toastIdToTimerMap.current) {
+      if (toastIdToTimerMap.current.hasOwnProperty(_toastId2)) {
+        var timer = toastIdToTimerMap.current[_toastId2];
+        timer.resume();
+      }
+    }
+  };
 
-      this.startScrollingAnimationFrame = window.requestAnimationFrame(scrollToBottom);
+  var onScroll = function onScroll() {
+    if (listElement.current) {
+      isScrolledToBottom.current = listElement.current.scrollHeight - listElement.current.scrollTop === listElement.current.clientHeight;
     }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (this.listElement) {
-        this.listElement.addEventListener('scroll', this.onScroll);
-        this.listElement.addEventListener('mouseenter', this.onMouseEnter);
-        this.listElement.addEventListener('mouseleave', this.onMouseLeave);
+  };
+
+  var dismissToast = (0, _react.useCallback)(function (toast) {
+    // Remove the toast after it's done fading out.
+    dismissTimeoutIds.current.push(window.setTimeout(function () {
+      setToastToDismiss(toast);
+    }, TOAST_FADE_OUT_MS));
+    setToastIdToDismissedMap(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2.default)({}, toast.id, true));
+    });
+  }, []);
+  var scheduleToastForDismissal = (0, _react.useCallback)(function (toast) {
+    // Start fading the toast out once its lifetime elapses.
+    toastIdToTimerMap.current[toast.id] = new _time.Timer(function () {
+      return dismissToast(toast);
+    }, toast.toastLifeTimeMs != null ? toast.toastLifeTimeMs : toastLifeTimeMs);
+  }, [dismissToast, toastLifeTimeMs]);
+  var scheduleAllToastsForDismissal = (0, _react.useCallback)(function () {
+    toasts.forEach(function (toast) {
+      if (!toastIdToTimerMap.current[toast.id]) {
+        scheduleToastForDismissal(toast);
       }
+    });
+  }, [scheduleToastForDismissal, toasts]);
 
-      this.scheduleAllToastsForDismissal();
+  var addListeners = function addListeners() {
+    if (listElement.current) {
+      listElement.current.addEventListener('scroll', onScroll);
+      listElement.current.addEventListener('mouseenter', onMouseEnter);
+      listElement.current.addEventListener('mouseleave', onMouseLeave);
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      this.scheduleAllToastsForDismissal();
-
-      if (!this.isUserInteracting) {
-        // If the user has scrolled up the toast list then we don't want to annoy them by scrolling
-        // all the way back to the bottom.
-        if (this.isScrolledToBottom) {
-          if (prevProps.toasts.length < this.props.toasts.length) {
-            this.startScrollingToBottom();
-          }
-        }
-      }
+  };
+
+  var removeListeners = function removeListeners() {
+    if (listElement.current) {
+      listElement.current.removeEventListener('scroll', onScroll);
+      listElement.current.removeEventListener('mouseenter', onMouseEnter);
+      listElement.current.removeEventListener('mouseleave', onMouseLeave);
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this.isScrollingAnimationFrame !== 0) {
-        window.cancelAnimationFrame(this.isScrollingAnimationFrame);
-      }
+  }; // componentDidMount
+
 
-      if (this.startScrollingAnimationFrame !== 0) {
-        window.cancelAnimationFrame(this.startScrollingAnimationFrame);
+  (0, _react.useEffect)(function () {
+    addListeners(); // componentWillUnmount
+
+    return function () {
+      if (isScrollingAnimationFrame.current !== 0) {
+        window.cancelAnimationFrame(isScrollingAnimationFrame.current);
       }
 
-      if (this.listElement) {
-        this.listElement.removeEventListener('scroll', this.onScroll);
-        this.listElement.removeEventListener('mouseenter', this.onMouseEnter);
-        this.listElement.removeEventListener('mouseleave', this.onMouseLeave);
+      if (startScrollingAnimationFrame.current !== 0) {
+        window.cancelAnimationFrame(startScrollingAnimationFrame.current);
       }
 
-      this.dismissTimeoutIds.forEach(clearTimeout);
+      removeListeners();
+      dismissTimeoutIds.current.forEach(clearTimeout); // eslint-disable-line react-hooks/exhaustive-deps
+
+      for (var _toastId3 in toastIdToTimerMap.current) {
+        if (toastIdToTimerMap.current.hasOwnProperty(_toastId3)) {
+          var timer = toastIdToTimerMap.current[_toastId3]; // eslint-disable-line react-hooks/exhaustive-deps
 
-      for (var _toastId3 in this.toastIdToTimerMap) {
-        if (this.toastIdToTimerMap.hasOwnProperty(_toastId3)) {
-          var timer = this.toastIdToTimerMap[_toastId3];
           timer.clear();
         }
       }
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  // componentDidUpdate
+
+  (0, _react.useEffect)(function () {
+    scheduleAllToastsForDismissal();
+
+    if (!isUserInteracting.current) {
+      // If the user has scrolled up the toast list then we don't want to annoy them by scrolling
+      // all the way back to the bottom.
+      if (isScrolledToBottom.current) {
+        if (prevToasts.current.length < toasts.length) {
+          startScrollingToBottom();
+        }
+      }
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
-
-      var _this$props = this.props,
-          className = _this$props.className,
-          toasts = _this$props.toasts,
-          dismissToast = _this$props.dismissToast,
-          toastLifeTimeMs = _this$props.toastLifeTimeMs,
-          side = _this$props.side,
-          rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
-      var renderedToasts = toasts.map(function (toast) {
-        var text = toast.text,
-            toastLifeTimeMs = toast.toastLifeTimeMs,
-            rest = (0, _objectWithoutProperties2.default)(toast, _excluded2);
-        return (0, _react2.jsx)(_global_toast_list_item.EuiGlobalToastListItem, {
-          key: toast.id,
-          isDismissed: _this3.state.toastIdToDismissedMap[toast.id]
-        }, (0, _react2.jsx)(_toast.EuiToast, (0, _extends2.default)({
-          onClose: _this3.dismissToast.bind(_this3, toast),
-          onFocus: _this3.onMouseEnter,
-          onBlur: _this3.onMouseLeave
-        }, rest), text));
+
+    prevToasts.current = toasts;
+  }, [toasts, scheduleAllToastsForDismissal]); // Toast dismissal side effect
+  // Ensure the callback has correct state by not enclosing it in `setTimeout`
+
+  (0, _react.useEffect)(function () {
+    var toast = toastToDismiss; // Because this is triggered by a setTimeout, and because React does not guarantee when
+    // state updates happen, it is possible to double-dismiss a toast
+    // including by double-clicking the "x" button on the toast
+    // so, first check to make sure we haven't already dismissed this toast
+
+    if (toast && toastIdToTimerMap.current.hasOwnProperty(toast.id)) {
+      dismissToastProp(toast);
+      toastIdToTimerMap.current[toast.id].clear();
+      delete toastIdToTimerMap.current[toast.id];
+      setToastIdToDismissedMap(function (prev) {
+        var toastIdToDismissedMap = _objectSpread({}, prev);
+
+        delete toastIdToDismissedMap[toast.id];
+        return toastIdToDismissedMap;
       });
-      var classes = (0, _classnames.default)('euiGlobalToastList', side ? sideToClassNameMap[side] : null, className);
-      return (0, _react2.jsx)("div", (0, _extends2.default)({
-        "aria-live": "polite",
-        role: "region",
-        ref: function ref(element) {
-          _this3.listElement = element;
-        },
-        className: classes
-      }, rest), renderedToasts);
     }
-  }]);
-  return EuiGlobalToastList;
-}(_react.Component);
-
-exports.EuiGlobalToastList = EuiGlobalToastList;
-(0, _defineProperty2.default)(EuiGlobalToastList, "defaultProps", {
-  toasts: [],
-  side: 'right'
-});
+  }, [toastToDismiss, dismissToastProp]);
+  var renderedToasts = toasts.map(function (toast) {
+    var text = toast.text,
+        toastLifeTimeMs = toast.toastLifeTimeMs,
+        rest = (0, _objectWithoutProperties2.default)(toast, _excluded2);
+
+    var onClose = function onClose() {
+      return dismissToast(toast);
+    };
+
+    return (0, _react2.jsx)(_global_toast_list_item.EuiGlobalToastListItem, {
+      key: toast.id,
+      isDismissed: toastIdToDismissedMap[toast.id]
+    }, (0, _react2.jsx)(_toast.EuiToast, (0, _extends2.default)({
+      onClose: onClose,
+      onFocus: onMouseEnter,
+      onBlur: onMouseLeave
+    }, rest), text));
+  });
+  var classes = (0, _classnames.default)('euiGlobalToastList', className);
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    "aria-live": "polite",
+    role: "region",
+    ref: listElement,
+    css: cssStyles,
+    className: classes
+  }, rest), renderedToasts);
+};
+
+exports.EuiGlobalToastList = EuiGlobalToastList;

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

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 euiGlobalToastListStyles = function euiGlobalToastListStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var euiToastWidth = euiTheme.base * 20;
+  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 + euiTheme.base * 5, "px")), ";", (0, _global_styling.logicalCSS)('max-height', '100vh'), ";overflow-y:auto;", (0, _global_styling.logicalCSS)('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.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{&:not(:empty){", (0, _global_styling.logicalCSS)('left', 0), ";", (0, _global_styling.logicalCSS)('width', '100%'), ";}};label:euiGlobalToastList;"),
+    // Variants
+    right: /*#__PURE__*/(0, _react.css)("&:not(:empty){", (0, _global_styling.logicalCSS)('right', 0), ";", (0, _global_styling.logicalCSS)('padding-left', "".concat(euiTheme.base * 4, "px")), ";}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{&:not(:empty){", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.base), ";}};label:right;"),
+    left: /*#__PURE__*/(0, _react.css)("&:not(:empty){", (0, _global_styling.logicalCSS)('left', 0), ";", (0, _global_styling.logicalCSS)('padding-right', "".concat(euiTheme.base * 4, "px")), ";}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{&:not(:empty){", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.base), ";}};label:left;")
+  };
+};
+
+exports.euiGlobalToastListStyles = euiGlobalToastListStyles;
+
+var 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);
+  return {
+    // Base
+    euiGlobalToastListItem: /*#__PURE__*/(0, _react.css)((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;"),
+    // States
+    dismissed: /*#__PURE__*/(0, _react.css)("transition:opacity ", euiTheme.animation.normal, ";opacity:0;;label:dismissed;")
+  };
+};
+
+exports.euiGlobalToastListItemStyles = euiGlobalToastListItemStyles;

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

@@ -9,27 +9,34 @@ exports.EuiGlobalToastListItem = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = require("react");
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _services = require("../../services");
+
+var _clone_element = require("../../services/theme/clone_element");
+
+var _global_toast_list = require("./global_toast_list.styles");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 var EuiGlobalToastListItem = function EuiGlobalToastListItem(_ref) {
   var children = _ref.children,
+      className = _ref.className,
       isDismissed = _ref.isDismissed;
+  var euiTheme = (0, _services.useEuiTheme)();
 
   if (!children) {
     return null;
   }
 
-  var classes = (0, _classnames.default)('euiGlobalToastListItem', children.props.className, {
-    'euiGlobalToastListItem-isDismissed': isDismissed
-  });
-  return /*#__PURE__*/(0, _react.cloneElement)(children, _objectSpread(_objectSpread({}, children.props), {
-    className: classes
+  var styles = (0, _global_toast_list.euiGlobalToastListItemStyles)(euiTheme);
+  var cssStyles = [styles.euiGlobalToastListItem, isDismissed && styles.dismissed];
+  var classes = (0, _classnames.default)('euiGlobalToastListItem', children.props.className, className);
+  return (0, _clone_element.cloneElementWithCss)(children, _objectSpread(_objectSpread({}, children.props), {
+    className: classes,
+    css: cssStyles
   }));
 };