@elastic/eui 117.1.0 → 118.0.0

package/optimize/es/components/icon/icon_map.js

@@ -2638,6 +2638,11 @@ export var typeToPathMap = {
   }, {
     synonyms: ['transition', 'top', 'out', 'animate', 'exit', 'motion']
   }),
+  translate: withMetadata(function () {
+    return import('./assets/translate');
+  }, {
+    synonyms: ['language', 'localization']
+  }),
   trash: withMetadata(function () {
     return import('./assets/trash');
   }, {

package/optimize/es/components/index.js

@@ -21,7 +21,6 @@ export * from './call_out';
 export * from './card';
 export * from './code';
 export * from './collapsible_nav';
-export * from './collapsible_nav_beta';
 export * from './color_picker';
 export * from './combo_box';
 export * from './comment_list';

package/optimize/es/components/side_nav/side_nav.js

@@ -1,15 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["id", "name", "isSelected", "items", "icon", "onClick", "href", "forceOpen"],
-  _excluded2 = ["className", "items", "toggleOpenOnMobile", "isOpenOnMobile", "mobileTitle", "mobileBreakpoints", "renderItem", "truncate", "heading", "headingProps", "theme"];
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
+var _excluded = ["className", "items", "toggleOpenOnMobile", "isOpenOnMobile", "mobileTitle", "mobileBreakpoints", "renderItem", "truncate", "heading", "headingProps"],
+  _excluded2 = ["id", "name", "isSelected", "items", "icon", "onClick", "href", "forceOpen"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -18,165 +10,149 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * Side Public License, v 1.
  */
 
-import React, { Component } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import { EuiButtonEmpty } from '../button';
 import { EuiI18n } from '../i18n';
-import { htmlIdGenerator, withEuiTheme } from '../../services';
+import { useEuiTheme, useGeneratedHtmlId } from '../../services';
 import { EuiHideFor, EuiShowFor } from '../responsive';
 import { EuiSideNavHeading } from './_side_nav_heading';
 import { EuiSideNavItem } from './side_nav_item';
 import { euiSideNavMobileStyles } from './side_nav.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var EuiSideNavClass = /*#__PURE__*/function (_Component) {
-  function EuiSideNavClass() {
-    var _this;
-    _classCallCheck(this, EuiSideNavClass);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+export var EuiSideNav = function EuiSideNav(_ref) {
+  var className = _ref.className,
+    _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    toggleOpenOnMobile = _ref.toggleOpenOnMobile,
+    isOpenOnMobile = _ref.isOpenOnMobile,
+    mobileTitle = _ref.mobileTitle,
+    _ref$mobileBreakpoint = _ref.mobileBreakpoints,
+    mobileBreakpoints = _ref$mobileBreakpoint === void 0 ? ['xs', 's'] : _ref$mobileBreakpoint,
+    renderItem = _ref.renderItem,
+    truncate = _ref.truncate,
+    heading = _ref.heading,
+    headingProps = _ref.headingProps,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var theme = useEuiTheme();
+  var isItemOpen = function isItemOpen(item) {
+    // The developer can force the item to be open.
+    if (item.forceOpen) {
+      return true;
     }
-    _this = _callSuper(this, EuiSideNavClass, [].concat(args));
-    _defineProperty(_this, "generateId", htmlIdGenerator('euiSideNav'));
-    _defineProperty(_this, "isItemOpen", function (item) {
-      // The developer can force the item to be open.
-      if (item.forceOpen) {
-        return true;
-      }
 
-      // Of course a selected item is open.
-      if (item.isSelected) {
-        return true;
-      }
+    // Of course a selected item is open.
+    if (item.isSelected) {
+      return true;
+    }
 
-      // The item has to be open if it has a child that's open.
-      if (item.items) {
-        return item.items.some(_this.isItemOpen);
-      }
-      return false;
-    });
-    _defineProperty(_this, "renderTree", function (items) {
-      var depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-      var _this$props = _this.props,
-        renderItem = _this$props.renderItem,
-        truncate = _this$props.truncate;
-      return items.map(function (item) {
-        var id = item.id,
-          name = item.name,
-          isSelected = item.isSelected,
-          childItems = item.items,
-          icon = item.icon,
-          onClick = item.onClick,
-          href = item.href,
-          forceOpen = item.forceOpen,
-          rest = _objectWithoutProperties(item, _excluded);
+    // The item has to be open if it has a child that's open.
+    if (item.items) {
+      return item.items.some(isItemOpen);
+    }
+    return false;
+  };
+  var renderTree = function renderTree(items) {
+    var depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    return items.map(function (item) {
+      var id = item.id,
+        name = item.name,
+        isSelected = item.isSelected,
+        childItems = item.items,
+        icon = item.icon,
+        onClick = item.onClick,
+        href = item.href,
+        forceOpen = item.forceOpen,
+        rest = _objectWithoutProperties(item, _excluded2);
 
-        // Root items are always open.
-        var isOpen = depth === 0 ? true : _this.isItemOpen(item);
-        var renderedItems;
-        if (childItems) {
-          renderedItems = _this.renderTree(childItems, depth + 1);
-        }
+      // Root items are always open.
+      var isOpen = depth === 0 ? true : isItemOpen(item);
+      var renderedItems;
+      if (childItems) {
+        renderedItems = renderTree(childItems, depth + 1);
+      }
 
-        // Act as an accordion only if item is not linked but has children (and not the root)
-        var childrenOnly = depth > 0 && !onClick && !href && !!childItems;
-        return ___EmotionJSX(EuiSideNavItem, _extends({
-          isOpen: isOpen,
-          isSelected: !childrenOnly && isSelected,
-          isParent: !!childItems,
-          icon: icon,
-          onClick: onClick,
-          href: href,
-          items: renderedItems,
-          key: id,
-          depth: depth,
-          renderItem: renderItem,
-          truncate: truncate,
-          childrenOnly: childrenOnly
-        }, rest), name);
-      });
+      // Act as an accordion only if item is not linked but has children (and not the root)
+      var childrenOnly = depth > 0 && !onClick && !href && !!childItems;
+      return ___EmotionJSX(EuiSideNavItem, _extends({
+        isOpen: isOpen,
+        isSelected: !childrenOnly && isSelected,
+        isParent: !!childItems,
+        icon: icon,
+        onClick: onClick,
+        href: href,
+        items: renderedItems,
+        key: id,
+        depth: depth,
+        renderItem: renderItem,
+        truncate: truncate,
+        childrenOnly: childrenOnly
+      }, rest), name);
     });
-    return _this;
-  }
-  _inherits(EuiSideNavClass, _Component);
-  return _createClass(EuiSideNavClass, [{
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-        className = _this$props2.className,
-        items = _this$props2.items,
-        toggleOpenOnMobile = _this$props2.toggleOpenOnMobile,
-        isOpenOnMobile = _this$props2.isOpenOnMobile,
-        mobileTitle = _this$props2.mobileTitle,
-        mobileBreakpoints = _this$props2.mobileBreakpoints,
-        renderItem = _this$props2.renderItem,
-        truncate = _this$props2.truncate,
-        heading = _this$props2.heading,
-        headingProps = _this$props2.headingProps,
-        theme = _this$props2.theme,
-        rest = _objectWithoutProperties(_this$props2, _excluded2);
-      var classes = classNames('euiSideNav', className, {
-        'euiSideNav-isOpenMobile': isOpenOnMobile
-      });
-      var styles = euiSideNavMobileStyles(theme);
-      var contentClasses = classNames('euiSideNav__content');
-      var sideNavContentId = this.generateId('content');
-      var mobileContentStyles = [styles.content.euiSideNav__mobileContent, isOpenOnMobile ? styles.content.open : styles.content.hidden];
-      var hasMobileVersion = mobileBreakpoints && mobileBreakpoints.length > 0;
-      var mobileToggleText = mobileTitle || heading;
-      var mobileHeadingUnset = {
-        marginBlockEnd: 0,
-        label: 'mobile'
-      };
-      var headingId = (headingProps === null || headingProps === void 0 ? void 0 : headingProps.id) || this.generateId('heading');
-      var headingScreenReaderOnly = !!(headingProps !== null && headingProps !== void 0 && headingProps.screenReaderOnly);
-      return ___EmotionJSX(React.Fragment, null, hasMobileVersion && ___EmotionJSX(EuiShowFor, {
-        sizes: mobileBreakpoints || 'none'
-      }, ___EmotionJSX("nav", _extends({
-        "aria-labelledby": headingId,
-        className: classes
-      }, rest), ___EmotionJSX(EuiSideNavHeading, _extends({
-        id: headingId
-      }, headingProps, {
-        screenReaderOnly: false,
-        css: mobileHeadingUnset
-      }), ___EmotionJSX(EuiI18n, {
-        token: "euiSideNav.mobileToggleAriaLabel",
-        default: "Toggle navigation"
-      }, function (mobileToggleAriaLabel) {
-        return ___EmotionJSX(EuiButtonEmpty, {
-          className: "euiSideNav__mobileToggle",
-          css: styles.euiSideNav__mobileToggle,
-          contentProps: {
-            className: 'euiSideNav__mobileToggleContent',
-            css: styles.euiSideNav__mobileToggleContent
-          },
-          onClick: toggleOpenOnMobile,
-          iconType: "apps",
-          iconSide: "right",
-          "aria-controls": sideNavContentId,
-          "aria-expanded": isOpenOnMobile,
-          "aria-label": !mobileToggleText || headingScreenReaderOnly ? mobileToggleAriaLabel : undefined
-        }, !headingScreenReaderOnly && mobileToggleText);
-      })), ___EmotionJSX("div", {
-        id: sideNavContentId,
-        className: contentClasses,
-        css: mobileContentStyles
-      }, this.renderTree(items)))), ___EmotionJSX(EuiHideFor, {
-        sizes: mobileBreakpoints || 'none'
-      }, ___EmotionJSX("nav", _extends({
-        "aria-labelledby": heading ? headingId : undefined,
-        className: classes
-      }, rest), heading && ___EmotionJSX(EuiSideNavHeading, _extends({
-        id: headingId
-      }, headingProps), heading), ___EmotionJSX("div", {
-        id: sideNavContentId,
-        className: contentClasses
-      }, this.renderTree(items)))));
-    }
-  }]);
-}(Component);
-_defineProperty(EuiSideNavClass, "defaultProps", {
-  items: [],
-  mobileBreakpoints: ['xs', 's']
-});
-export var EuiSideNav = withEuiTheme(EuiSideNavClass);
+  };
+  var classes = classNames('euiSideNav', className, {
+    'euiSideNav-isOpenMobile': isOpenOnMobile
+  });
+  var styles = euiSideNavMobileStyles(theme);
+  var contentClasses = classNames('euiSideNav__content');
+  var sideNavContentId = useGeneratedHtmlId({
+    prefix: 'euiSideNav',
+    suffix: 'content'
+  });
+  var mobileContentStyles = [styles.content.euiSideNav__mobileContent, isOpenOnMobile ? styles.content.open : styles.content.hidden];
+  var hasMobileVersion = mobileBreakpoints && mobileBreakpoints.length > 0;
+  var mobileToggleText = mobileTitle || heading;
+  var mobileHeadingUnset = {
+    marginBlockEnd: 0,
+    label: 'mobile'
+  };
+  var headingId = useGeneratedHtmlId({
+    prefix: 'euiSideNav',
+    suffix: 'heading',
+    conditionalId: headingProps === null || headingProps === void 0 ? void 0 : headingProps.id
+  });
+  var headingScreenReaderOnly = !!(headingProps !== null && headingProps !== void 0 && headingProps.screenReaderOnly);
+  return ___EmotionJSX(React.Fragment, null, hasMobileVersion && ___EmotionJSX(EuiShowFor, {
+    sizes: mobileBreakpoints || 'none'
+  }, ___EmotionJSX("nav", _extends({
+    "aria-labelledby": headingId,
+    className: classes
+  }, rest), ___EmotionJSX(EuiSideNavHeading, _extends({
+    id: headingId
+  }, headingProps, {
+    screenReaderOnly: false,
+    css: mobileHeadingUnset
+  }), ___EmotionJSX(EuiI18n, {
+    token: "euiSideNav.mobileToggleAriaLabel",
+    default: "Toggle navigation"
+  }, function (mobileToggleAriaLabel) {
+    return ___EmotionJSX(EuiButtonEmpty, {
+      className: "euiSideNav__mobileToggle",
+      css: styles.euiSideNav__mobileToggle,
+      contentProps: {
+        className: 'euiSideNav__mobileToggleContent',
+        css: styles.euiSideNav__mobileToggleContent
+      },
+      onClick: toggleOpenOnMobile,
+      iconType: "apps",
+      iconSide: "right",
+      "aria-controls": sideNavContentId,
+      "aria-expanded": isOpenOnMobile,
+      "aria-label": !mobileToggleText || headingScreenReaderOnly ? mobileToggleAriaLabel : undefined
+    }, !headingScreenReaderOnly && mobileToggleText);
+  })), ___EmotionJSX("div", {
+    id: sideNavContentId,
+    className: contentClasses,
+    css: mobileContentStyles
+  }, renderTree(items)))), ___EmotionJSX(EuiHideFor, {
+    sizes: mobileBreakpoints || 'none'
+  }, ___EmotionJSX("nav", _extends({
+    "aria-labelledby": heading ? headingId : undefined,
+    className: classes
+  }, rest), heading && ___EmotionJSX(EuiSideNavHeading, _extends({
+    id: headingId
+  }, headingProps), heading), ___EmotionJSX("div", {
+    id: sideNavContentId,
+    className: contentClasses
+  }, renderTree(items)))));
+};

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
@@ -75,20 +78,24 @@ 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];
+    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);
@@ -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();