@elastic/eui 117.1.0 → 118.0.0

package/optimize/lib/components/side_nav/side_nav.js

@@ -1,20 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiSideNavClass = exports.EuiSideNav = void 0;
+exports.EuiSideNav = 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 _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 _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _button = require("../button");
 var _i18n = require("../i18n");
@@ -24,167 +17,148 @@ var _side_nav_heading = require("./_side_nav_heading");
 var _side_nav_item = require("./side_nav_item");
 var _side_nav = require("./side_nav.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["id", "name", "isSelected", "items", "icon", "onClick", "href", "forceOpen"],
-  _excluded2 = ["className", "items", "toggleOpenOnMobile", "isOpenOnMobile", "mobileTitle", "mobileBreakpoints", "renderItem", "truncate", "heading", "headingProps", "theme"];
-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; })(); } /*
+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
  * 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 EuiSideNavClass = exports.EuiSideNavClass = /*#__PURE__*/function (_Component) {
-  function EuiSideNavClass() {
-    var _this;
-    (0, _classCallCheck2.default)(this, EuiSideNavClass);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+var EuiSideNav = exports.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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var theme = (0, _services.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));
-    (0, _defineProperty2.default)(_this, "generateId", (0, _services.htmlIdGenerator)('euiSideNav'));
-    (0, _defineProperty2.default)(_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;
-    });
-    (0, _defineProperty2.default)(_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 = (0, _objectWithoutProperties2.default)(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 = (0, _objectWithoutProperties2.default)(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 (0, _react2.jsx)(_side_nav_item.EuiSideNavItem, (0, _extends2.default)({
-          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 (0, _react2.jsx)(_side_nav_item.EuiSideNavItem, (0, _extends2.default)({
+        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;
-  }
-  (0, _inherits2.default)(EuiSideNavClass, _Component);
-  return (0, _createClass2.default)(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 = (0, _objectWithoutProperties2.default)(_this$props2, _excluded2);
-      var classes = (0, _classnames.default)('euiSideNav', className, {
-        'euiSideNav-isOpenMobile': isOpenOnMobile
-      });
-      var styles = (0, _side_nav.euiSideNavMobileStyles)(theme);
-      var contentClasses = (0, _classnames.default)('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 (0, _react2.jsx)(_react.default.Fragment, null, hasMobileVersion && (0, _react2.jsx)(_responsive.EuiShowFor, {
-        sizes: mobileBreakpoints || 'none'
-      }, (0, _react2.jsx)("nav", (0, _extends2.default)({
-        "aria-labelledby": headingId,
-        className: classes
-      }, rest), (0, _react2.jsx)(_side_nav_heading.EuiSideNavHeading, (0, _extends2.default)({
-        id: headingId
-      }, headingProps, {
-        screenReaderOnly: false,
-        css: mobileHeadingUnset
-      }), (0, _react2.jsx)(_i18n.EuiI18n, {
-        token: "euiSideNav.mobileToggleAriaLabel",
-        default: "Toggle navigation"
-      }, function (mobileToggleAriaLabel) {
-        return (0, _react2.jsx)(_button.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);
-      })), (0, _react2.jsx)("div", {
-        id: sideNavContentId,
-        className: contentClasses,
-        css: mobileContentStyles
-      }, this.renderTree(items)))), (0, _react2.jsx)(_responsive.EuiHideFor, {
-        sizes: mobileBreakpoints || 'none'
-      }, (0, _react2.jsx)("nav", (0, _extends2.default)({
-        "aria-labelledby": heading ? headingId : undefined,
-        className: classes
-      }, rest), heading && (0, _react2.jsx)(_side_nav_heading.EuiSideNavHeading, (0, _extends2.default)({
-        id: headingId
-      }, headingProps), heading), (0, _react2.jsx)("div", {
-        id: sideNavContentId,
-        className: contentClasses
-      }, this.renderTree(items)))));
-    }
-  }]);
-}(_react.Component);
-(0, _defineProperty2.default)(EuiSideNavClass, "defaultProps", {
-  items: [],
-  mobileBreakpoints: ['xs', 's']
-});
-var EuiSideNav = exports.EuiSideNav = (0, _services.withEuiTheme)(EuiSideNavClass);
+  };
+  var classes = (0, _classnames.default)('euiSideNav', className, {
+    'euiSideNav-isOpenMobile': isOpenOnMobile
+  });
+  var styles = (0, _side_nav.euiSideNavMobileStyles)(theme);
+  var contentClasses = (0, _classnames.default)('euiSideNav__content');
+  var sideNavContentId = (0, _services.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 = (0, _services.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 (0, _react2.jsx)(_react.default.Fragment, null, hasMobileVersion && (0, _react2.jsx)(_responsive.EuiShowFor, {
+    sizes: mobileBreakpoints || 'none'
+  }, (0, _react2.jsx)("nav", (0, _extends2.default)({
+    "aria-labelledby": headingId,
+    className: classes
+  }, rest), (0, _react2.jsx)(_side_nav_heading.EuiSideNavHeading, (0, _extends2.default)({
+    id: headingId
+  }, headingProps, {
+    screenReaderOnly: false,
+    css: mobileHeadingUnset
+  }), (0, _react2.jsx)(_i18n.EuiI18n, {
+    token: "euiSideNav.mobileToggleAriaLabel",
+    default: "Toggle navigation"
+  }, function (mobileToggleAriaLabel) {
+    return (0, _react2.jsx)(_button.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);
+  })), (0, _react2.jsx)("div", {
+    id: sideNavContentId,
+    className: contentClasses,
+    css: mobileContentStyles
+  }, renderTree(items)))), (0, _react2.jsx)(_responsive.EuiHideFor, {
+    sizes: mobileBreakpoints || 'none'
+  }, (0, _react2.jsx)("nav", (0, _extends2.default)({
+    "aria-labelledby": heading ? headingId : undefined,
+    className: classes
+  }, rest), heading && (0, _react2.jsx)(_side_nav_heading.EuiSideNavHeading, (0, _extends2.default)({
+    id: headingId
+  }, headingProps), heading), (0, _react2.jsx)("div", {
+    id: sideNavContentId,
+    className: contentClasses
+  }, renderTree(items)))));
+};

package/optimize/lib/components/tool_tip/tool_tip.js

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

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

@@ -13,7 +13,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
 var _tool_tip = require("./tool_tip.styles");
 var _react2 = require("@emotion/react");
-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
@@ -26,8 +26,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var EuiToolTipAnchor = exports.EuiToolTipAnchor = /*#__PURE__*/(0, _react.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,
@@ -51,8 +51,8 @@ var EuiToolTipAnchor = exports.EuiToolTipAnchor = /*#__PURE__*/(0, _react.forwar
       id: anchorId
     }, rest, {
       className: classes,
-      onMouseOver: onMouseOver,
-      onMouseOut: onMouseOut
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave
     }), /*#__PURE__*/(0, _react.cloneElement)(children, {
       onFocus: function onFocus(e) {
         _onFocus(e);

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

@@ -15,29 +15,54 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
  * 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__*/(0, _createClass2.default)(function ToolTipManager() {
   var _this = this;
   (0, _classCallCheck2.default)(this, ToolTipManager);
   // We use a set instead of a single var just in case
   // multiple tooltips are registered via async shenanigans
   (0, _defineProperty2.default)(this, "toolTipsToHide", new Set());
+  // Timestamp of the last hide; `null` means no tooltip has closed yet.
+  (0, _defineProperty2.default)(this, "lastHiddenAt", null);
   (0, _defineProperty2.default)(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
+    };
   });
   (0, _defineProperty2.default)(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).
+   */
+  (0, _defineProperty2.default)(this, "reset", function () {
+    _this.toolTipsToHide.clear();
+    _this.lastHiddenAt = null;
   });
 });
 var toolTipManager = exports.toolTipManager = new ToolTipManager();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "117.1.0",
+  "version": "118.0.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -44,6 +44,7 @@
     "release-rc": "node ./scripts/release.js --type=prerelease",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
+    "serve-storybook": "http-server storybook-static --port 6006 --silent",
     "test-storybook": "test-storybook",
     "pre-push": "yarn test-staged",
     "prerelease": "node ./scripts/prerelease.mjs"
@@ -108,8 +109,8 @@
     "@cypress/react18": "^2.0.0",
     "@cypress/webpack-dev-server": "^1.7.0",
     "@elastic/datemath": "^5.0.3",
-    "@elastic/eslint-plugin-eui": "2.14.1",
-    "@elastic/eui-illustrations": "1.0.0",
+    "@elastic/eslint-plugin-eui": "2.15.0",
+    "@elastic/eui-illustrations": "1.0.1",
     "@elastic/eui-theme-borealis": "8.0.0",
     "@emotion/babel-preset-css-prop": "^11.11.0",
     "@emotion/cache": "^11.11.0",
@@ -193,6 +194,7 @@
     "expose-gc": "^1.0.0",
     "findup": "^0.1.5",
     "glob": "^11.0.3",
+    "http-server": "^14.1.1",
     "inquirer": "^9.1.4",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",