@elastic/eui 116.3.0 → 116.3.1-snapshot.1782218964187

package/optimize/es/components/toast/toast.js

@@ -1,6 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["title", "color", "iconType", "onClose", "children", "className"];
+var _excluded = ["title", "text", "color", "iconType", "children", "className", "actionProps", "style", "onClose", "animationMs"];
+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) { _defineProperty(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; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -9,68 +12,161 @@ var _excluded = ["title", "color", "iconType", "onClose", "children", "className
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
-import { useEuiMemoizedStyles } from '../../services';
+import { getTokenName } from '@elastic/eui-theme-common';
+import { useEuiMemoizedStyles, useEuiTheme } from '../../services';
 import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiButtonIcon } from '../button';
 import { EuiI18n } from '../i18n';
 import { EuiIcon } from '../icon';
 import { EuiText } from '../text';
 import { euiToastStyles, euiToastHeaderStyles } from './toast.styles';
+import { EuiNotificationIcon } from '../notification_icon/notification_icon';
+import { euiNotificationIconStyles } from '../notification_icon/notification_icon.styles';
+import { EuiToastAction } from './toast_action';
+import { EuiTitle } from '../title';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var COLORS = ['primary', 'success', 'warning', 'danger'];
+export var COLOR_TO_NOTIFICATION_ICON_MAP = {
+  primary: 'info',
+  success: 'success',
+  warning: 'warning',
+  danger: 'error'
+};
 export var 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 = _objectWithoutProperties(_ref, _excluded);
-  var baseStyles = useEuiMemoizedStyles(euiToastStyles);
-  var baseCss = [baseStyles.euiToast, color && baseStyles.colors[color]];
+  var _useEuiTheme = useEuiTheme(),
+    euiTheme = _useEuiTheme.euiTheme;
+  var styles = useEuiMemoizedStyles(euiToastStyles);
+  var iconStyles = useEuiMemoizedStyles(euiNotificationIconStyles);
   var headerStyles = useEuiMemoizedStyles(euiToastHeaderStyles);
-  var headerCss = [headerStyles.euiToastHeader, children && headerStyles.withBody];
-  var classes = classNames('euiToast', className);
+  var cssStyles = [styles.euiToast];
+  var decorCssStyles = [styles.decor, animationMs && styles.hasAnimation];
+  var classes = classNames('euiToast', className, _defineProperty({}, "euiToast--".concat(color), color));
+  var highlightColorToken = getTokenName('borderStrong', color);
+  var typeColor = euiTheme.colors[highlightColorToken];
+  var backgroundLightToken = getTokenName('backgroundLight', color);
+  var backgroundLightColor = euiTheme.colors[backgroundLightToken];
+  var cssVariables = useMemo(function () {
+    return _objectSpread({
+      '--euiToastTypeColor': typeColor,
+      '--euiToastTypeBackgroundColor': backgroundLightColor
+    }, animationMs && {
+      '--euiToastAnimationMs': "".concat(animationMs, "ms")
+    });
+  }, [typeColor, backgroundLightColor, animationMs]);
+  var dismissButton = useMemo(function () {
+    if (!onClose) return;
+    return ___EmotionJSX(EuiI18n, {
+      token: "euiToast.dismissToast",
+      default: "Dismiss toast"
+    }, function (dismissToast) {
+      return ___EmotionJSX(EuiButtonIcon, {
+        css: styles.dismissButton,
+        iconType: "cross",
+        color: "text",
+        size: "xs",
+        "aria-label": dismissToast,
+        onClick: onClose,
+        "data-test-subj": "toastCloseButton"
+      });
+    });
+  }, [onClose, styles]);
+  var header = useMemo(function () {
+    if (!title) return;
+    var headerCssStyles = [headerStyles.euiToastHeader, onClose && headerStyles.hasDismissButton];
+    return ___EmotionJSX(EuiTitle, {
+      size: "xs",
+      css: headerCssStyles,
+      "data-test-subj": "euiToastHeader__title"
+    }, ___EmotionJSX("p", null, title));
+  }, [title, headerStyles, onClose]);
+  var icon = 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 ___EmotionJSX(EuiNotificationIcon, {
+        css: styles.icon,
+        type: defaultIconType,
+        size: "l"
+      });
+    }
+    return ___EmotionJSX(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 = useMemo(function () {
+    if (!text && !children) return null;
+    return ___EmotionJSX("div", {
+      css: styles.text,
+      "data-test-subj": "euiToastBody"
+    }, text && ___EmotionJSX(EuiText, {
+      size: "s",
+      color: "default",
+      className: "euiToast__text",
+      "data-test-subj": "euiToastText"
+    }, text), children && ___EmotionJSX(EuiText, {
+      className: "euiToast__additionalContent",
+      size: "s",
+      color: "default",
+      "data-test-subj": "euiToastAdditionalContent"
+    }, children));
+  }, [text, children, styles]);
+  var actionControls = 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 && ___EmotionJSX(EuiToastAction, _extends({
+      actionType: "primary"
+    }, actionPrimaryProps));
+    var actionSecondary = hasActionSecondary && ___EmotionJSX(EuiToastAction, _extends({
+      actionType: "secondary"
+    }, actionSecondaryProps));
+    return ___EmotionJSX("div", {
+      css: styles.actions
+    }, actionPrimary, actionSecondary);
+  }, [actionProps, color, styles]);
   return ___EmotionJSX("div", _extends({
-    css: baseCss,
-    className: classes
-  }, rest), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", null, ___EmotionJSX(EuiI18n, {
+    css: cssStyles,
+    className: classes,
+    style: _objectSpread(_objectSpread({}, cssVariables), style)
+  }, rest), ___EmotionJSX("div", {
+    className: "euiToastDecor",
+    css: decorCssStyles,
+    role: "presentation"
+  }), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", null, ___EmotionJSX(EuiI18n, {
     token: "euiToast.newNotification",
     default: "A new notification appears"
-  }))), ___EmotionJSX(EuiI18n, {
-    token: "euiToast.notification",
-    default: "Notification"
-  }, function (notification) {
-    return ___EmotionJSX("div", {
-      css: headerCss,
-      "aria-label": notification,
-      "data-test-subj": "euiToastHeader"
-    }, iconType && ___EmotionJSX(EuiIcon, {
-      css: headerStyles.euiToastHeader__icon,
-      type: iconType,
-      size: "m",
-      "aria-hidden": "true"
-    }), ___EmotionJSX("span", {
-      css: headerStyles.euiToastHeader__title,
-      "data-test-subj": "euiToastHeader__title"
-    }, title));
-  }), onClose && ___EmotionJSX(EuiI18n, {
-    token: "euiToast.dismissToast",
-    default: "Dismiss toast"
-  }, function (dismissToast) {
-    return ___EmotionJSX(EuiButtonIcon, {
-      css: baseStyles.euiToast__closeButton,
-      iconType: "cross",
-      color: "text",
-      size: "xs",
-      "aria-label": dismissToast,
-      onClick: onClose,
-      "data-test-subj": "toastCloseButton"
-    });
-  }), children && ___EmotionJSX(EuiText, {
-    size: "s",
-    "data-test-subj": "euiToastBody"
-  }, children));
+  }))), ___EmotionJSX("div", {
+    css: styles.wrapper
+  }, ___EmotionJSX("div", {
+    css: styles.body
+  }, icon, ___EmotionJSX("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 ? ___EmotionJSX(React.Fragment, null, header, dismissButton, optionalChildren) : ___EmotionJSX(React.Fragment, null, header || optionalChildren, dismissButton))), actionControls));
 };

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

@@ -1,3 +1,5 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+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
@@ -6,65 +8,51 @@
  * Side Public License, v 1.
  */
 
-import { css } from '@emotion/react';
-import { euiShadowLarge, mathWithUnits } from '@elastic/eui-theme-common';
+import { css, keyframes } from '@emotion/react';
+import { euiCanAnimate, euiShadowLarge, mathWithUnits } from '@elastic/eui-theme-common';
 import { euiTextBreakWord, logicalCSS } from '../../global_styling';
-import { highContrastModeStyles, preventForcedColors } from '../../global_styling/functions/high_contrast';
+import { preventForcedColors } from '../../global_styling/functions/high_contrast';
 import { euiTitle } from '../title/title.styles';
 import { euiPanelBorderStyles } from '../panel/panel.styles';
+var TEXT_MAX_WIDTH = 1200;
+var CONTAINER_NAME = 'euiToast';
+var CQC_BREAKPOINT_NARROWEST = '(max-width: 320px)';
+var euiToastAnimation = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    transform: scaleX(1);\n  }\n  to {\n    transform: scaleX(0);\n  }\n"])));
 export var 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(logicalCSS('border-top', "".concat(width, " solid ").concat(color)), "\n      pointer-events: none;\n    }\n  ");
-  };
+  var euiTheme = euiThemeContext.euiTheme;
+  var highlightSize = mathWithUnits([euiTheme.border.width.thin, euiTheme.border.width.thick], function (x, y) {
+    return x + y;
+  });
+  var paddingTop = mathWithUnits([euiTheme.size.base, highlightSize], function (x, y) {
+    return x + y;
+  });
+  var offsetTop = mathWithUnits([euiTheme.size.s, highlightSize], function (x, y) {
+    return x + y;
+  });
   return {
     // Base
-    euiToast: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";", euiShadowLarge(euiThemeContext, {
+    euiToast: /*#__PURE__*/css("container-type:inline-size;container-name:", CONTAINER_NAME, ";position:relative;overflow:hidden;border-radius:", euiTheme.border.radius.medium, ";", euiShadowLarge(euiThemeContext, {
       borderAllInHighContrastMode: true
-    }), " position:relative;", logicalCSS('padding-horizontal', euiTheme.size.base), " ", logicalCSS('padding-vertical', euiTheme.size.base), " background-color:", euiTheme.colors.emptyShade, ";", logicalCSS('width', '100%'), " ", euiTextBreakWord(), euiPanelBorderStyles(euiThemeContext), " &:hover,&:focus{[class*='euiToast__closeButton']{opacity:1;}};label:euiToast;"),
-    // Elements
-    euiToast__closeButton: /*#__PURE__*/css("position:absolute;", logicalCSS('top', euiTheme.size.base), " ", 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 ? mathWithUnits(euiTheme.border.width.thick, function (x) {
-          return x * 2;
-        }) : euiTheme.border.width.thick;
-        return highContrastModeStyles(euiThemeContext, {
-          none: highlightStyles(color, borderWidth),
-          preferred: "\n            ".concat(highlightStyles(color, borderWidth), "\n            \n            &::before {\n              ").concat(logicalCSS('width', "calc(100% + ".concat(mathWithUnits(euiTheme.border.width.thin, function (x) {
-            return x * 2;
-          }), ")")), "\n              ").concat(logicalCSS('margin-top', "-".concat(euiTheme.border.width.thin)), "\n              ").concat(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(logicalCSS('top', 0), "\n              ").concat(logicalCSS('horizontal', 0), "\n              ").concat(logicalCSS('height', borderWidth), "\n              background-color: ").concat(color, ";\n              ").concat(preventForcedColors(euiThemeContext), "\n              pointer-events: none;\n            }\n          ")
-        });
-      },
-      get primary() {
-        return /*#__PURE__*/css(this._getStyles(euiTheme.colors.primary), ";label:primary;");
-      },
-      get success() {
-        return /*#__PURE__*/css(this._getStyles(euiTheme.colors.success), ";label:success;");
-      },
-      get warning() {
-        return /*#__PURE__*/css(this._getStyles(euiTheme.colors.warning), ";label:warning;");
-      },
-      get danger() {
-        return /*#__PURE__*/css(this._getStyles(euiTheme.colors.danger), ";label:danger;");
-      }
-    }
+    }), " ", logicalCSS('padding-top', paddingTop), " ", logicalCSS('padding-bottom', euiTheme.size.base), " ", logicalCSS('padding-horizontal', euiTheme.size.base), " background-color:", euiTheme.colors.backgroundBasePlain, ";", logicalCSS('width', '100%'), " ", euiTextBreakWord(), euiPanelBorderStyles(euiThemeContext), ";;label:euiToast;"),
+    decor: /*#__PURE__*/css("position:absolute;inset-block-start:0;inset-inline:0;", logicalCSS('height', highlightSize), " background-color:var(--euiToastTypeBackgroundColor);", preventForcedColors(euiThemeContext), " &::before{content:'';position:absolute;z-index:", euiTheme.levels.content, ";inset-block-start:0;inset-inline:0;", logicalCSS('height', '100%'), " background-color:var(--euiToastTypeColor);pointer-events:none;", preventForcedColors(euiThemeContext), " transform-origin:left center;[dir='rtl'] &{transform-origin:right center;}};label:decor;"),
+    // handles content + actions layout
+    wrapper: /*#__PURE__*/css("display:flex;flex-direction:column;gap:", euiTheme.size.m, ";inline-size:100%;;label:wrapper;"),
+    // handles icon + text layout
+    body: /*#__PURE__*/css("display:flex;flex-direction:row;align-self:center;gap:", euiTheme.size.m, ";inline-size:100%;;label:body;"),
+    // handles text layout
+    content: /*#__PURE__*/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{", logicalCSS('margin-top', euiTheme.size.s), ";};label:content;"),
+    text: /*#__PURE__*/css("display:flex;flex-direction:column;gap:", euiTheme.size.xs, ";;label:text;"),
+    icon: /*#__PURE__*/css("grid-area:icon;position:relative;", logicalCSS('margin-vertical', euiTheme.size.xxs), ";;label:icon;"),
+    actions: /*#__PURE__*/css("grid-area:actions;display:flex;gap:", euiTheme.size.s, ";", logicalCSS('margin-left', euiTheme.size.xl), "@container ", CONTAINER_NAME, " ", CQC_BREAKPOINT_NARROWEST, "{flex-wrap:wrap;>*{inline-size:100%;}};label:actions;"),
+    dismissButton: /*#__PURE__*/css("position:absolute;", logicalCSS('top', offsetTop), ";", logicalCSS('right', euiTheme.size.s), ";;label:dismissButton;"),
+    hasAnimation: /*#__PURE__*/css("&::before{", euiCanAnimate, "{animation:", euiToastAnimation, " var(--euiToastAnimationMs) linear forwards;}};label:hasAnimation;")
   };
 };
 export var euiToastHeaderStyles = function euiToastHeaderStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiToastHeader: /*#__PURE__*/css("display:flex;align-items:baseline;", logicalCSS('padding-right', euiTheme.size.l), ">*+*{", logicalCSS('margin-left', euiTheme.size.s), ";};label:euiToastHeader;"),
-    // Elements
-    euiToastHeader__icon: /*#__PURE__*/css("flex:0 0 auto;fill:", euiTheme.colors.textHeading, ";transform:translateY(2px);;label:euiToastHeader__icon;"),
-    euiToastHeader__title: /*#__PURE__*/css(euiTitle(euiThemeContext, 'xs'), " font-weight:", euiTheme.font.weight.bold, ";;label:euiToastHeader__title;"),
-    // Variants
-    withBody: /*#__PURE__*/css(logicalCSS('margin-bottom', euiTheme.size.s), ";;label:withBody;")
+    euiToastHeader: /*#__PURE__*/css("display:flex;align-items:baseline;", euiTitle(euiThemeContext, 'xs'), " font-weight:", euiTheme.font.weight.bold, ";;label:euiToastHeader;"),
+    hasDismissButton: /*#__PURE__*/css("padding-inline-end:", euiTheme.size.l, ";;label:hasDismissButton;")
   };
 };

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

@@ -0,0 +1,33 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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.
+ */
+
+import React from 'react';
+import { EuiButton, EuiButtonEmpty } from '../button';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var 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 = _objectWithoutProperties(_ref, _excluded);
+  if (actionType === 'primary') {
+    return ___EmotionJSX(EuiButton, _extends({
+      size: "s",
+      color: color
+    }, rest), children);
+  } else {
+    return ___EmotionJSX(EuiButtonEmpty, _extends({
+      size: "s",
+      color: color
+    }, rest), children);
+  }
+};

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

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export var COLORS = ['primary', 'success', 'warning', 'danger'];

package/optimize/es/components/tool_tip/tool_tip.js

@@ -1,7 +1,10 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "className", "anchorClassName", "anchorProps", "content", "title", "display", "repositionOnScroll", "disableScreenReaderOutput", "position", "offset", "id", "onMouseOut", "onBlur"];
+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) { _defineProperty(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; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -12,7 +15,7 @@ var _excluded = ["children", "className", "anchorClassName", "anchorProps", "con
 
 import React, { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import classNames from 'classnames';
-import { findPopoverPosition, htmlIdGenerator, keys } from '../../services';
+import { findPopoverPosition, useGeneratedHtmlId, keys } from '../../services';
 import { getRepositionOnScroll } from '../../services/popover/reposition_on_scroll';
 import { EuiResizeObserver } from '../observer/resize_observer';
 import { EuiPortal } from '../portal';
@@ -75,22 +78,26 @@ export var EuiToolTip = /*#__PURE__*/forwardRef(function (_ref, ref) {
     setVisible = _useState2[1];
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    hasFocus = _useState4[0],
-    setHasFocus = _useState4[1];
-  var _useState5 = useState(positionProp),
+    skipAnimation = _useState4[0],
+    setSkipAnimation = _useState4[1];
+  var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    calculatedPosition = _useState6[0],
-    setCalculatedPosition = _useState6[1];
-  var _useState7 = useState(DEFAULT_TOOLTIP_STYLES),
+    hasFocus = _useState6[0],
+    setHasFocus = _useState6[1];
+  var _useState7 = useState(positionProp),
     _useState8 = _slicedToArray(_useState7, 2),
-    toolTipStyles = _useState8[0],
-    setToolTipStyles = _useState8[1];
-  var _useState9 = useState(undefined),
+    calculatedPosition = _useState8[0],
+    setCalculatedPosition = _useState8[1];
+  var _useState9 = useState(DEFAULT_TOOLTIP_STYLES),
     _useState10 = _slicedToArray(_useState9, 2),
-    arrowStyles = _useState10[0],
-    setArrowStyles = _useState10[1];
-  var generatedId = useRef(htmlIdGenerator()());
-  var id = idProp !== null && idProp !== void 0 ? idProp : generatedId.current;
+    toolTipStyles = _useState10[0],
+    setToolTipStyles = _useState10[1];
+  var _useState11 = useState(undefined),
+    _useState12 = _slicedToArray(_useState11, 2),
+    arrowStyles = _useState12[0],
+    setArrowStyles = _useState12[1];
+  var generatedId = useGeneratedHtmlId();
+  var id = idProp !== null && idProp !== void 0 ? idProp : generatedId;
   var anchorRef = useRef(null);
   var popoverRef = useRef(null);
   var positionToolTip = useCallback(function () {
@@ -142,10 +149,19 @@ export var EuiToolTip = /*#__PURE__*/forwardRef(function (_ref, ref) {
     setArrowStyles(undefined);
     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 = useCallback(function () {
     if (!content && !title) return;
+    var result = toolTipManager.registerTooltip(hideToolTip);
+    if (!result) return;
+    setSkipAnimation(result.skipAnimation);
     setVisible(true);
-    toolTipManager.registerTooltip(hideToolTip);
   }, [content, title, hideToolTip]);
   useImperativeHandle(ref, function () {
     return {
@@ -225,18 +241,24 @@ export var EuiToolTip = /*#__PURE__*/forwardRef(function (_ref, ref) {
       hideToolTip();
     }
   }, [disableScreenReaderOutput, visible, hideToolTip]);
-  var onMouseOut = 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 = 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 = 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 = classNames('euiToolTip', className);
   var anchorClasses = classNames(anchorClassName, anchorProps === null || anchorProps === void 0 ? void 0 : anchorProps.className);
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiToolTipAnchor, _extends({}, anchorProps, {
@@ -244,8 +266,9 @@ export var EuiToolTip = /*#__PURE__*/forwardRef(function (_ref, ref) {
     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,
@@ -254,7 +277,12 @@ export var EuiToolTip = /*#__PURE__*/forwardRef(function (_ref, ref) {
     isVisible: visible
   }), children), visible && (content || title) && ___EmotionJSX(EuiPortal, null, ___EmotionJSX(EuiToolTipPopover, _extends({
     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,

package/optimize/es/components/tool_tip/tool_tip_anchor.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["onBlur", "onFocus", "onMouseOver", "onMouseOut", "id", "className", "children", "display", "isVisible"];
+var _excluded = ["onBlur", "onFocus", "onMouseEnter", "onMouseLeave", "id", "className", "children", "display", "isVisible"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -17,8 +17,8 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiToolTipAnchor = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _onBlur = _ref.onBlur,
     _onFocus = _ref.onFocus,
-    onMouseOver = _ref.onMouseOver,
-    onMouseOut = _ref.onMouseOut,
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave,
     id = _ref.id,
     className = _ref.className,
     children = _ref.children,
@@ -42,8 +42,8 @@ export var EuiToolTipAnchor = /*#__PURE__*/forwardRef(function (_ref, ref) {
       id: anchorId
     }, rest, {
       className: classes,
-      onMouseOver: onMouseOver,
-      onMouseOut: onMouseOut
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave
     }), /*#__PURE__*/cloneElement(children, {
       onFocus: function onFocus(e) {
         _onFocus(e);

package/optimize/es/components/tool_tip/tool_tip_manager.js

@@ -8,29 +8,54 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+
 /**
  * Manager utility that ensures only one tooltip is visible at a time
+ * and lets the next tooltip to open skip its entry animation if another was
+ * just opened or just closed.
  *
  * UX rationale (primarily for mouse-only users):
  * @see https://github.com/elastic/kibana/issues/144482
  * @see https://github.com/elastic/eui/issues/5883
  */
+
+/**
+ * Time window in ms after a tooltip closes during which the next one to open
+ * skips its entry animation.
+ */
+var SKIP_ANIMATION_WINDOW = 300;
 var ToolTipManager = /*#__PURE__*/_createClass(function ToolTipManager() {
   var _this = this;
   _classCallCheck(this, ToolTipManager);
   // We use a set instead of a single var just in case
   // multiple tooltips are registered via async shenanigans
   _defineProperty(this, "toolTipsToHide", new Set());
+  // Timestamp of the last hide; `null` means no tooltip has closed yet.
+  _defineProperty(this, "lastHiddenAt", null);
   _defineProperty(this, "registerTooltip", function (hideCallback) {
-    if (_this.toolTipsToHide.has(hideCallback)) return;
+    if (_this.toolTipsToHide.has(hideCallback)) return null;
+    var hadOpen = _this.toolTipsToHide.size > 0;
+    var recentlyClosed = _this.lastHiddenAt !== null && Date.now() - _this.lastHiddenAt < SKIP_ANIMATION_WINDOW;
     _this.toolTipsToHide.forEach(function (hide) {
       return hide();
     });
     _this.toolTipsToHide.clear();
     _this.toolTipsToHide.add(hideCallback);
+    return {
+      skipAnimation: hadOpen || recentlyClosed
+    };
   });
   _defineProperty(this, "deregisterToolTip", function (hideCallback) {
-    _this.toolTipsToHide.delete(hideCallback);
+    if (_this.toolTipsToHide.delete(hideCallback)) _this.lastHiddenAt = Date.now();
+  });
+  /**
+   * Resets all internal state. Primarily intended for tests, so that a
+   * tooltip shown in one test doesn't leak into the next (the manager is a
+   * module-level singleton).
+   */
+  _defineProperty(this, "reset", function () {
+    _this.toolTipsToHide.clear();
+    _this.lastHiddenAt = null;
   });
 });
 export var toolTipManager = new ToolTipManager();

package/optimize/lib/components/avatar/avatar.js

@@ -74,6 +74,7 @@ var EuiAvatar = exports.EuiAvatar = function EuiAvatar(_ref) {
   var classes = (0, _classnames.default)('euiAvatar', (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "euiAvatar--".concat(size), size), "euiAvatar--".concat(type), type), 'euiAvatar-isDisabled', isDisabled), className);
   var styles = (0, _services.useEuiMemoizedStyles)(_avatar.euiAvatarStyles);
   var cssStyles = [styles.euiAvatar, styles[type], styles[size], styles[casing], isPlain && styles.plain, isSubdued && styles.subdued, isDisabled && styles.isDisabled];
+  var tooltipCssStyles = [styles.tooltip[type]];
   var avatarStyle = (0, _react.useMemo)(function () {
     if (imageUrl) {
       return {
@@ -128,6 +129,9 @@ var EuiAvatar = exports.EuiAvatar = function EuiAvatar(_ref) {
   // It already has `aria-label`, the tooltip is only visual.
   return name ? (0, _react2.jsx)(_tool_tip.EuiToolTip, {
     content: name,
+    anchorProps: {
+      css: tooltipCssStyles
+    },
     disableScreenReaderOutput: true
   }, avatarNode) : avatarNode;
 };