@elastic/eui 65.0.1 → 67.0.0

package/es/components/resizable_container/resizable_panel.js

@@ -331,7 +331,12 @@ EuiResizablePanel.propTypes = {
   /**
      * Props to add to the wrapping `.euiResizablePanel` div
      */
-  wrapperProps: PropTypes.any,
+  wrapperProps: PropTypes.shape({
+    className: PropTypes.string,
+    "aria-label": PropTypes.string,
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
+  }),
 
   /**
      * Padding to add directly to the wrapping `.euiResizablePanel` div

package/es/components/side_nav/side_nav.js

@@ -255,6 +255,11 @@ EuiSideNav.propTypes = {
        * Adds a couple extra #EuiSideNavHeading props and extends the props of EuiTitle that wraps the `heading`
        */
   headingProps: PropTypes.shape({
+    className: PropTypes.string,
+    "aria-label": PropTypes.string,
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any,
+
     /**
        * The actual HTML heading element to wrap the `heading`.
        * Default is `h2`

package/es/components/suggest/suggest.js

@@ -1,4 +1,4 @@
-var _excluded = ["onItemClick", "onBlur", "onFocus", "onInput", "onSearch", "status", "append", "tooltipContent", "suggestions", "id", "aria-label", "aria-labelledby", "isVirtualized", "fullWidth", "maxHeight"];
+var _excluded = ["onItemClick", "onBlur", "onFocus", "onInput", "onSearch", "status", "append", "tooltipContent", "suggestions", "id", "aria-label", "aria-labelledby", "isPreFiltered", "isVirtualized", "fullWidth", "maxHeight"];
 
 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; }
 
@@ -72,6 +72,8 @@ export var EuiSuggest = function EuiSuggest(_ref) {
       id = _ref.id,
       ariaLabel = _ref['aria-label'],
       labelId = _ref['aria-labelledby'],
+      _ref$isPreFiltered = _ref.isPreFiltered,
+      isPreFiltered = _ref$isPreFiltered === void 0 ? false : _ref$isPreFiltered,
       _ref$isVirtualized = _ref.isVirtualized,
       isVirtualized = _ref$isVirtualized === void 0 ? false : _ref$isVirtualized,
       _ref$fullWidth = _ref.fullWidth,
@@ -238,6 +240,7 @@ export var EuiSuggest = function EuiSuggest(_ref) {
       isVirtualized: isVirtualized
     },
     searchable: true,
+    isPreFiltered: isPreFiltered,
     searchProps: _objectSpread({
       id: id,
       append: appendArray.length ? appendArray : undefined,
@@ -363,5 +366,11 @@ EuiSuggest.propTypes = {
        * Default is `60vh`
        */
   maxHeight: PropTypes.any,
+
+  /**
+       * Control whether or not options get filtered internally or if consumer will filter.
+       * Default `false`
+       */
+  isPreFiltered: PropTypes.bool,
   "aria-labelledby": PropTypes.oneOfType([PropTypes.string, PropTypes.string.isRequired])
 };

package/es/components/table/table_row_cell.js

@@ -203,9 +203,8 @@ EuiTableRowCell.propTypes = {
     showOnHover: PropTypes.bool,
 
     /**
-       * Setting `textOnly` to `false` will break words unnecessarily on FF and
-       * IE.  To combat this problem on FF, wrap contents with the css utility
-       * `.eui-textBreakWord`.
+       * Creates a text wrapper around cell content that helps word break or truncate
+       * long text correctly.
        */
     textOnly: PropTypes.bool,
 
@@ -226,9 +225,8 @@ EuiTableRowCell.propTypes = {
   showOnHover: PropTypes.bool,
 
   /**
-     * Setting `textOnly` to `false` will break words unnecessarily on FF and
-     * IE.  To combat this problem on FF, wrap contents with the css utility
-     * `.eui-textBreakWord`.
+     * Creates a text wrapper around cell content that helps word break or truncate
+     * long text correctly.
      */
   textOnly: PropTypes.bool,
 

package/es/components/tabs/tabbed_content/tabbed_content.js

@@ -136,24 +136,6 @@ export var EuiTabbedContent = /*#__PURE__*/function (_Component) {
   }
 
   _createClass(EuiTabbedContent, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      // IE11 doesn't support the `relatedTarget` event property for blur events
-      // but does add it for focusout. React doesn't support `onFocusOut` so here we are.
-      if (this.tabsRef.current) {
-        // Current short-term solution for event listener (see https://github.com/elastic/eui/pull/2717)
-        this.tabsRef.current.addEventListener('focusout', this.removeFocus);
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this.tabsRef.current) {
-        // Current short-term solution for event listener (see https://github.com/elastic/eui/pull/2717)
-        this.tabsRef.current.removeEventListener('focusout', this.removeFocus);
-      }
-    }
-  }, {
     key: "render",
     value: function render() {
       var _this2 = this;
@@ -182,7 +164,8 @@ export var EuiTabbedContent = /*#__PURE__*/function (_Component) {
         ref: this.tabsRef,
         expand: expand,
         size: size,
-        onFocus: this.initializeFocus
+        onFocus: this.initializeFocus,
+        onBlur: this.removeFocus
       }, tabs.map(function (tab) {
         var id = tab.id,
             name = tab.name,

package/es/components/tool_tip/tool_tip.js

@@ -2,10 +2,6 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 
 var _excluded = ["children", "className", "anchorClassName", "anchorProps", "content", "title", "delay", "display"];
 
-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) { _defineProperty(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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -41,11 +37,13 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React, { Component, cloneElement, Fragment } from 'react';
+import React, { Component } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { keysOf } from '../common';
 import { EuiPortal } from '../portal';
+import { EuiToolTipAnchor } from './tool_tip_anchor';
+import { EuiToolTipArrow } from './tool_tip_arrow';
 import { EuiToolTipPopover } from './tool_tip_popover';
 import { enqueueStateChange } from '../../services/react';
 import { findPopoverPosition, htmlIdGenerator } from '../../services';
@@ -132,16 +130,12 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "setAnchorRef", function (ref) {
+      return _this.anchor = ref;
+    });
+
     _defineProperty(_assertThisInitialized(_this), "setPopoverRef", function (ref) {
-      _this.popover = ref; // if the popover has been unmounted, clear
-      // any previous knowledge about its size
-
-      if (ref == null) {
-        _this.setState({
-          toolTipStyles: DEFAULT_TOOLTIP_STYLES,
-          arrowStyles: undefined
-        });
-      }
+      return _this.popover = ref;
     });
 
     _defineProperty(_assertThisInitialized(_this), "showToolTip", function () {
@@ -207,7 +201,9 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
       enqueueStateChange(function () {
         if (_this._isMounted) {
           _this.setState({
-            visible: false
+            visible: false,
+            toolTipStyles: DEFAULT_TOOLTIP_STYLES,
+            arrowStyles: undefined
           });
         }
       });
@@ -267,8 +263,6 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
-
       var _this$props = this.props,
           children = _this$props.children,
           className = _this$props.className,
@@ -284,57 +278,39 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
           arrowStyles = _this$state.arrowStyles,
           id = _this$state.id,
           toolTipStyles = _this$state.toolTipStyles,
-          visible = _this$state.visible;
+          visible = _this$state.visible,
+          calculatedPosition = _this$state.calculatedPosition;
       var classes = classNames('euiToolTip', positionsToClassNameMap[this.state.calculatedPosition], className);
-      var anchorClasses = classNames('euiToolTipAnchor', display ? displayToClassNameMap[display] : null, anchorClassName, anchorProps === null || anchorProps === void 0 ? void 0 : anchorProps.className);
-      var tooltip;
-
-      if (visible && (content || title)) {
-        tooltip = ___EmotionJSX(EuiPortal, null, ___EmotionJSX(EuiToolTipPopover, _extends({
-          className: classes,
-          style: toolTipStyles,
-          positionToolTip: this.positionToolTip,
-          popoverRef: this.setPopoverRef,
-          title: title,
-          id: id,
-          role: "tooltip"
-        }, rest), ___EmotionJSX("div", {
-          style: arrowStyles,
-          className: "euiToolTip__arrow"
-        }), ___EmotionJSX(EuiResizeObserver, {
-          onResize: this.positionToolTip
-        }, function (resizeRef) {
-          return ___EmotionJSX("div", {
-            ref: resizeRef
-          }, content);
-        })));
-      }
-
-      var anchor = // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-      ___EmotionJSX("span", _extends({
-        ref: function ref(anchor) {
-          return _this2.anchor = anchor;
-        }
-      }, anchorProps, {
-        className: anchorClasses,
+      var anchorClasses = classNames(anchorClassName, anchorProps === null || anchorProps === void 0 ? void 0 : anchorProps.className);
+      return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiToolTipAnchor, _extends({}, anchorProps, {
+        ref: this.setAnchorRef,
+        onBlur: this.onBlur,
+        onFocus: this.onFocus,
         onMouseOver: this.showToolTip,
-        onMouseOut: this.onMouseOut
-      }), /*#__PURE__*/cloneElement(children, _objectSpread({
-        onFocus: function onFocus(e) {
-          _this2.onFocus();
-
-          children.props.onFocus && children.props.onFocus(e);
-        },
-        onBlur: function onBlur(e) {
-          _this2.onBlur();
-
-          children.props.onBlur && children.props.onBlur(e);
-        }
-      }, visible && {
-        'aria-describedby': this.state.id
-      })));
-
-      return ___EmotionJSX(Fragment, null, anchor, tooltip);
+        onMouseOut: this.onMouseOut,
+        id: this.state.id,
+        className: anchorClasses,
+        display: display,
+        isVisible: visible
+      }), children), visible && (content || title) && ___EmotionJSX(EuiPortal, null, ___EmotionJSX(EuiToolTipPopover, _extends({
+        className: classes,
+        style: toolTipStyles,
+        positionToolTip: this.positionToolTip,
+        popoverRef: this.setPopoverRef,
+        title: title,
+        id: id,
+        role: "tooltip",
+        calculatedPosition: calculatedPosition
+      }, rest), ___EmotionJSX(EuiToolTipArrow, {
+        style: arrowStyles,
+        className: "euiToolTip__arrow"
+      }), ___EmotionJSX(EuiResizeObserver, {
+        onResize: this.positionToolTip
+      }, function (resizeRef) {
+        return ___EmotionJSX("div", {
+          ref: resizeRef
+        }, content);
+      }))));
     }
   }]);
 

package/es/components/tool_tip/tool_tip.styles.js

@@ -0,0 +1,107 @@
+var _templateObject, _templateObject2;
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { css, keyframes } from '@emotion/react';
+import { logicalCSS, logicalSizeCSS, euiFontSize } from '../../global_styling';
+import { COLOR_MODES_STANDARD, tint, shade } from '../../services';
+import { euiShadow } from '../../themes/amsterdam';
+export var euiToolTipBackgroundColor = function euiToolTipBackgroundColor(euiTheme, colorMode) {
+  return colorMode === COLOR_MODES_STANDARD.dark ? shade(euiTheme.colors.emptyShade, 1) : tint(euiTheme.colors.fullShade, 0.25);
+};
+export var euiToolTipBorderColor = function euiToolTipBorderColor(euiTheme, colorMode) {
+  return colorMode === COLOR_MODES_STANDARD.dark ? shade(euiTheme.colors.fullShade, 0.8) : tint(euiTheme.colors.fullShade, 0.35);
+};
+
+var euiToolTipAnimationVertical = function euiToolTipAnimationVertical(size) {
+  return keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    0% {\n        opacity: 0;\n        transform: translateY(", ");\n    }\n\n    100% {\n        opacity: 1;\n        transform: translateY(0);\n    }\n"])), size);
+};
+
+var euiToolTipAnimationHorizontal = function euiToolTipAnimationHorizontal(size) {
+  return keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    0% {\n        opacity: 0;\n        transform: translateX(", ");\n    }\n\n    100% {\n        opacity: 1;\n        transform: translateX(0);\n    }\n"])), size);
+};
+
+export var euiToolTipStyles = function euiToolTipStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme,
+      colorMode = euiThemeContext.colorMode;
+  var animationTiming = "".concat(euiTheme.animation.slow, " ease-out 0s forwards");
+  /*
+   * 1. Shift arrow 1px more than half its size to account for border radius
+   */
+
+  var arrowSize = euiTheme.size.m;
+  var arrowSizeInt = parseInt(arrowSize, 10);
+  var arrowPlusSize = "".concat((arrowSizeInt / 2 + 1) * -1, "px");
+  /* 1 */
+
+  var arrowMinusSize = "".concat((arrowSizeInt / 2 - 1) * -1, "px");
+  /* 1 */
+
+  return {
+    // Base
+    euiToolTip: /*#__PURE__*/css(euiShadow(euiThemeContext), ";border-radius:", euiTheme.border.radius.medium, ";background-color:", euiToolTipBackgroundColor(euiTheme, colorMode), ";color:", euiTheme.colors.ghost, ";z-index:", euiTheme.levels.toast, ";", logicalCSS('max-width', '256px'), " overflow-wrap:break-word;padding:", euiTheme.size.s, ";", euiFontSize(euiThemeContext, 's'), ";position:absolute;[class*='euiHorizontalRule']{background-color:", euiToolTipBorderColor(euiTheme, colorMode), ";};label:euiToolTip;"),
+    // Sizes
+    s: /*#__PURE__*/css(euiFontSize(euiThemeContext, 'xs'), ";;label:s;"),
+    // Positions
+    top: /*#__PURE__*/css("animation:", euiToolTipAnimationVertical("-".concat(euiTheme.size.base)), " ", animationTiming, ";;label:top;"),
+    bottom: /*#__PURE__*/css("animation:", euiToolTipAnimationVertical(euiTheme.size.base), " ", animationTiming, ";[class*='euiToolTip__arrow']{transform:translateY(", arrowMinusSize, ") rotateZ(45deg);};label:bottom;"),
+    left: /*#__PURE__*/css("animation:", euiToolTipAnimationHorizontal("-".concat(euiTheme.size.base)), " ", animationTiming, ";[class*='euiToolTip__arrow']{transform:translateX(", arrowPlusSize, ") rotateZ(45deg);};label:left;"),
+    right: /*#__PURE__*/css("animation:", euiToolTipAnimationHorizontal(euiTheme.size.base), " ", animationTiming, ";[class*='euiToolTip__arrow']{transform:translateX(", arrowMinusSize, ") rotateZ(45deg);};label:right;"),
+    // Elements
+    euiToolTip__arrow: /*#__PURE__*/css("content:'';position:absolute;transform-origin:center;border-radius:2px;background-color:", euiToolTipBackgroundColor(euiTheme, colorMode), ";", logicalSizeCSS(arrowSize, arrowSize), ";transform:translateY(", arrowPlusSize, ") rotateZ(45deg);;label:euiToolTip__arrow;")
+  };
+};
+export var euiToolTipPopoverStyles = function euiToolTipPopoverStyles(_ref4) {
+  var euiTheme = _ref4.euiTheme,
+      colorMode = _ref4.colorMode;
+  return {
+    // Elements
+    euiToolTip__title: /*#__PURE__*/css("font-weight:", euiTheme.font.weight.bold, ";", logicalCSS('border-bottom', "solid ".concat(euiTheme.border.width.thin, " ").concat(euiToolTipBorderColor(euiTheme, colorMode))), ";", logicalCSS('padding-bottom', euiTheme.size.xs), ";", logicalCSS('margin-bottom', euiTheme.size.xs), ";;label:euiToolTip__title;")
+  };
+};
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "fzilnk-inlineBlock",
+  styles: "display:inline-block;label:inlineBlock;"
+} : {
+  name: "fzilnk-inlineBlock",
+  styles: "display:inline-block;label:inlineBlock;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "14aceuy-block",
+  styles: "display:block;label:block;"
+} : {
+  name: "14aceuy-block",
+  styles: "display:block;label:block;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "1s3i3p5-euiToolTipAnchor",
+  styles: "*[disabled]{pointer-events:none;};label:euiToolTipAnchor;"
+} : {
+  name: "1s3i3p5-euiToolTipAnchor",
+  styles: "*[disabled]{pointer-events:none;};label:euiToolTipAnchor;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiToolTipAnchorStyles = function euiToolTipAnchorStyles() {
+  return {
+    // Elements
+    euiToolTipAnchor: _ref3,
+    // Variants
+    block: _ref2,
+    inlineBlock: _ref
+  };
+};

package/es/components/tool_tip/tool_tip_anchor.js

@@ -0,0 +1,73 @@
+var _excluded = ["onBlur", "onFocus", "onMouseOver", "onMouseOut", "id", "className", "children", "display", "isVisible"];
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+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) { _defineProperty(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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+/*
+ * 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, { cloneElement, forwardRef } from 'react';
+import PropTypes from "prop-types";
+import classNames from 'classnames';
+import { euiToolTipAnchorStyles } from './tool_tip.styles';
+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,
+      id = _ref.id,
+      className = _ref.className,
+      children = _ref.children,
+      display = _ref.display,
+      isVisible = _ref.isVisible,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var anchorCss = euiToolTipAnchorStyles();
+  var cssStyles = [anchorCss.euiToolTipAnchor, anchorCss[display]];
+  var classes = classNames('euiToolTipAnchor', className);
+  return (// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+    ___EmotionJSX("span", _extends({
+      ref: ref
+    }, rest, {
+      css: cssStyles,
+      className: classes,
+      onMouseOver: onMouseOver,
+      onMouseOut: onMouseOut
+    }), /*#__PURE__*/cloneElement(children, _objectSpread({
+      onFocus: function onFocus(e) {
+        _onFocus();
+
+        children.props.onFocus && children.props.onFocus(e);
+      },
+      onBlur: function onBlur(e) {
+        _onBlur();
+
+        children.props.onBlur && children.props.onBlur(e);
+      }
+    }, isVisible && {
+      'aria-describedby': id
+    })))
+  );
+});
+EuiToolTipAnchor.propTypes = {
+  onBlur: PropTypes.func.isRequired,
+  onFocus: PropTypes.func.isRequired,
+  children: PropTypes.element.isRequired,
+  isVisible: PropTypes.bool.isRequired,
+  display: PropTypes.oneOf(["block", "inlineBlock"]).isRequired
+};
+EuiToolTipAnchor.displayName = 'EuiToolTipAnchor';

package/es/components/tool_tip/tool_tip_arrow.js

@@ -0,0 +1,20 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/*
+ * 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 { useEuiTheme } from '../../services';
+import { euiToolTipStyles } from './tool_tip.styles';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var EuiToolTipArrow = function EuiToolTipArrow(props) {
+  var euiTheme = useEuiTheme();
+  var toolTipCss = euiToolTipStyles(euiTheme);
+  return ___EmotionJSX("div", _extends({
+    css: [toolTipCss.euiToolTip__arrow, ";label:EuiToolTipArrow;"]
+  }, props));
+};