@elastic/eui 66.0.0 → 67.1.0

package/es/components/pagination/pagination_button_arrow.js

@@ -13,6 +13,8 @@ import classNames from 'classnames';
 import { EuiButtonIcon } from '../button/button_icon';
 import { keysOf } from '../common';
 import { useEuiI18n } from '../i18n';
+import { useEuiTheme } from '../../services';
+import { euiPaginationButtonArrowStyles } from './pagination_button.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var typeToIconTypeMap = {
   first: 'arrowStart',
@@ -27,6 +29,8 @@ export var EuiPaginationButtonArrow = function EuiPaginationButtonArrow(_ref) {
       disabled = _ref.disabled,
       ariaControls = _ref.ariaControls,
       onClick = _ref.onClick;
+  var euiTheme = useEuiTheme();
+  var styles = euiPaginationButtonArrowStyles(euiTheme);
   var labels = {
     first: useEuiI18n('euiPaginationButtonArrow.firstPage', 'First page'),
     previous: useEuiI18n('euiPaginationButtonArrow.previousPage', 'Previous page'),
@@ -41,6 +45,7 @@ export var EuiPaginationButtonArrow = function EuiPaginationButtonArrow(_ref) {
   }
 
   return ___EmotionJSX(EuiButtonIcon, _extends({
+    css: styles.euiPaginationArrowButton,
     className: classNames('euiPaginationArrowButton', className),
     color: "text",
     "aria-label": labels[type],

package/es/components/popover/popover_title.js

@@ -31,9 +31,9 @@ export var EuiPopoverTitle = function EuiPopoverTitle(_ref) {
       panelPadding = _useContext.paddingSize;
 
   var euiTheme = useEuiTheme();
-  var styles = euiPopoverTitleStyles(euiTheme, panelPadding);
+  var styles = euiPopoverTitleStyles(euiTheme);
   var paddingStyles = useEuiPaddingCSS();
-  var cssStyles = [styles.euiPopoverTitle, // If a paddingSize is not directly provided, inherit from the EuiPopoverPanel
+  var cssStyles = [styles.euiPopoverTitle, styles.panelPaddingSizes[panelPadding], // If a paddingSize is not directly provided, inherit from the EuiPopoverPanel
   paddingStyles[paddingSize || panelPadding]];
   var classes = classNames('euiPopoverTitle', className);
   return ___EmotionJSX("div", _extends({

package/es/components/popover/popover_title.styles.js

@@ -8,13 +8,25 @@
 import { css } from '@emotion/react';
 import { euiPaddingSize, logicalCSS } from '../../global_styling';
 import { euiTitle } from '../title/title.styles';
-export var euiPopoverTitleStyles = function euiPopoverTitleStyles(euiThemeContext, panelPadding) {
-  var euiTheme = euiThemeContext.euiTheme; // If the popover's containing panel has padding applied,
-  // ensure the title expands to cover that padding and
-
-  var panelPaddingSize = euiPaddingSize(euiThemeContext, panelPadding);
+export var euiPopoverTitleStyles = function euiPopoverTitleStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiPopoverTitle: /*#__PURE__*/css(euiTitle(euiThemeContext, 'xxs'), ";", logicalCSS('border-bottom', euiTheme.border.thin), ";margin:-", panelPaddingSize, " -", panelPaddingSize, " ", panelPaddingSize, ";;label:euiPopoverTitle;")
+    euiPopoverTitle: /*#__PURE__*/css(euiTitle(euiThemeContext, 'xxs'), ";", logicalCSS('border-bottom', euiTheme.border.thin), ";;label:euiPopoverTitle;"),
+    // If the popover's containing panel has padding applied,
+    // ensure the title expands to cover that padding via negative margins
+    panelPaddingSizes: {
+      none: /*#__PURE__*/css(";label:none;"),
+      xs: /*#__PURE__*/css(getPaddingOffset(euiThemeContext, 'xs'), ";;label:xs;"),
+      s: /*#__PURE__*/css(getPaddingOffset(euiThemeContext, 's'), ";;label:s;"),
+      m: /*#__PURE__*/css(getPaddingOffset(euiThemeContext, 'm'), ";;label:m;"),
+      l: /*#__PURE__*/css(getPaddingOffset(euiThemeContext, 'l'), ";;label:l;"),
+      xl: /*#__PURE__*/css(getPaddingOffset(euiThemeContext, 'xl'), ";;label:xl;")
+    }
   };
+};
+
+var getPaddingOffset = function getPaddingOffset(euiThemeContext, size) {
+  var panelPaddingSize = euiPaddingSize(euiThemeContext, size);
+  return "margin: -".concat(panelPaddingSize, " -").concat(panelPaddingSize, " ").concat(panelPaddingSize, ";");
 };

package/es/components/progress/progress.js

@@ -140,5 +140,10 @@ EuiProgress.propTypes = {
   /**
        * Object of props passed to the <span/> wrapping the determinate progress's label
        */
-  labelProps: PropTypes.any
+  labelProps: PropTypes.shape({
+    className: PropTypes.string,
+    "aria-label": PropTypes.string,
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
+  })
 };

package/es/components/provider/cache/cache_provider.js

@@ -6,18 +6,12 @@
  * Side Public License, v 1.
  */
 import React from 'react';
-import createCache from '@emotion/cache';
 import { CacheProvider } from '@emotion/react';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var defaultCache = createCache({
-  key: 'css'
-});
-defaultCache.compat = true;
 export var EuiCacheProvider = function EuiCacheProvider(_ref) {
-  var _ref$cache = _ref.cache,
-      cache = _ref$cache === void 0 ? defaultCache : _ref$cache,
+  var cache = _ref.cache,
       children = _ref.children;
-  return ___EmotionJSX(CacheProvider, {
+  return children && cache ? ___EmotionJSX(CacheProvider, {
     value: cache
-  }, children);
+  }, children) : ___EmotionJSX(React.Fragment, null, children);
 };

package/es/components/provider/provider.js

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 import React from 'react';
+import createCache from '@emotion/cache';
 import { EuiGlobalStyles } from '../../global_styling/reset/global_styles';
 import { EuiUtilityClasses } from '../../global_styling/utility/utility';
 import { EuiThemeProvider, CurrentEuiBreakpointProvider } from '../../services';
@@ -17,8 +18,15 @@ var isEmotionCacheObject = function isEmotionCacheObject(obj) {
   return obj.hasOwnProperty('key');
 };
 
+var fallbackCache = createCache({
+  key: 'css'
+});
+fallbackCache.compat = true;
 export var EuiProvider = function EuiProvider(_ref) {
-  var cache = _ref.cache,
+  var _defaultCache;
+
+  var _ref$cache = _ref.cache,
+      cache = _ref$cache === void 0 ? fallbackCache : _ref$cache,
       _ref$theme = _ref.theme,
       theme = _ref$theme === void 0 ? EuiThemeAmsterdam : _ref$theme,
       _ref$globalStyles = _ref.globalStyles,
@@ -34,16 +42,31 @@ export var EuiProvider = function EuiProvider(_ref) {
 
   if (cache) {
     if (isEmotionCacheObject(cache)) {
+      cache.compat = true;
       defaultCache = cache;
     } else {
+      if (cache.default) {
+        cache.default.compat = true;
+      }
+
       defaultCache = cache.default;
+
+      if (cache.global) {
+        cache.global.compat = true;
+      }
+
       globalCache = cache.global;
+
+      if (cache.utility) {
+        cache.utility.compat = true;
+      }
+
       utilityCache = cache.utility;
     }
   }
 
   return ___EmotionJSX(EuiCacheProvider, {
-    cache: defaultCache
+    cache: (_defaultCache = defaultCache) !== null && _defaultCache !== void 0 ? _defaultCache : fallbackCache
   }, ___EmotionJSX(EuiThemeProvider, {
     theme: theme !== null && theme !== void 0 ? theme : undefined,
     colorMode: colorMode,

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/search_bar/filters/custom_component_filter.js

@@ -0,0 +1,16 @@
+/*
+ * 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 { jsx as ___EmotionJSX } from "@emotion/react";
+export var CustomComponentFilter = function CustomComponentFilter(props) {
+  var CustomComponent = props.config.component;
+  return ___EmotionJSX(CustomComponent, {
+    query: props.query,
+    onChange: props.onChange
+  });
+};

package/es/components/search_bar/filters/filters.js

@@ -12,6 +12,7 @@ import { IsFilter } from './is_filter';
 import { FieldValueSelectionFilter } from './field_value_selection_filter';
 import { FieldValueToggleFilter } from './field_value_toggle_filter';
 import { FieldValueToggleGroupFilter } from './field_value_toggle_group_filter';
+import { CustomComponentFilter } from './custom_component_filter';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var createFilter = function createFilter(index, config, query, onChange) {
   var props = {
@@ -45,6 +46,11 @@ export var createFilter = function createFilter(index, config, query, onChange)
         config: config
       }));
 
+    case 'custom_component':
+      return ___EmotionJSX(CustomComponentFilter, _extends({}, props, {
+        config: config
+      }));
+
     default:
       // @ts-ignore TS knows that we've checked `config.type` exhaustively
       throw new Error("Unknown search filter type [".concat(config.type, "]"));

package/es/components/search_bar/query/ast.js

@@ -543,6 +543,18 @@ export var _AST = /*#__PURE__*/function () {
         return !Is.isInstance(clause) || clause.flag !== flag;
       }));
     }
+  }, {
+    key: "removeIsClauses",
+    value: function removeIsClauses() {
+      return new _AST(this._clauses.filter(function (clause) {
+        return !Is.isInstance(clause);
+      }));
+    }
+  }, {
+    key: "removeAllClauses",
+    value: function removeAllClauses() {
+      return new _AST();
+    }
   }, {
     key: "getGroupClauses",
     value: function getGroupClauses() {

package/es/components/search_bar/query/ast_to_es_query_dsl.js

@@ -1,5 +1,7 @@
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 
+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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -12,8 +14,6 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-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; }
-
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -21,11 +21,11 @@ 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 { printIso8601 } from './date_format';
-import { isDateValue, dateValue } from './date_value';
-import { AST } from './ast';
 import { isArray, isDateLike, isString } from '../../../services/predicate';
 import { keysOf } from '../../common';
+import { AST } from './ast';
+import { printIso8601 } from './date_format';
+import { dateValue, isDateValue } from './date_value';
 
 var processDateOperation = function processDateOperation(value, operator) {
   var granularity = value.granularity,
@@ -115,12 +115,17 @@ export var _fieldValuesToQuery = function _fieldValuesToQuery(field, operations,
           }
         });
 
-        if (_terms.length > 0) {
+        if (_terms.length > 1) {
+          queries.push({
+            bool: _defineProperty({}, andOr === 'and' ? 'must' : 'should', _toConsumableArray(_terms.map(function (value) {
+              return {
+                match: _defineProperty({}, field, value)
+              };
+            })))
+          });
+        } else if (_terms.length === 1) {
           queries.push({
-            match: _defineProperty({}, field, {
-              query: _terms.join(' '),
-              operator: andOr
-            })
+            match: _defineProperty({}, field, _terms[0])
           });
         }
 

package/es/components/search_bar/query/query.js

@@ -44,6 +44,11 @@ export var Query = /*#__PURE__*/function () {
   }
 
   _createClass(Query, [{
+    key: "hasClauses",
+    value: function hasClauses() {
+      return this.ast.clauses.length > 0;
+    }
+  }, {
     key: "hasSimpleFieldClause",
     value: function hasSimpleFieldClause(field, value) {
       return this.ast.hasSimpleFieldClause(field, value);
@@ -103,6 +108,12 @@ export var Query = /*#__PURE__*/function () {
       var ast = this.ast.removeOrFieldClauses(field);
       return new Query(ast, this.syntax);
     }
+  }, {
+    key: "removeAllClauses",
+    value: function removeAllClauses() {
+      var ast = this.ast.removeAllClauses();
+      return new Query(ast, this.syntax);
+    }
   }, {
     key: "hasIsClause",
     value: function hasIsClause(flag) {
@@ -131,6 +142,12 @@ export var Query = /*#__PURE__*/function () {
       var ast = this.ast.removeIsClause(flag);
       return new Query(ast, this.syntax);
     }
+  }, {
+    key: "removeIsClauses",
+    value: function removeIsClauses() {
+      var ast = this.ast.removeIsClauses();
+      return new Query(ast, this.syntax);
+    }
     /**
      * Executes this query over the given iterable item and returns
      * an new array of all items that matched this query. Options:

package/es/components/search_bar/search_bar.js

@@ -412,6 +412,10 @@ EuiSearchBar.propTypes = {
       operator: PropTypes.oneOf(["eq", "exact", "gt", "gte", "lt", "lte"])
     }).isRequired).isRequired,
     available: PropTypes.func
+  }).isRequired, PropTypes.shape({
+    type: PropTypes.oneOf(["custom_component"]).isRequired,
+    component: PropTypes.elementType.isRequired,
+    available: PropTypes.func
   }).isRequired]).isRequired),
 
   /**

package/es/components/search_bar/search_filters.js

@@ -156,5 +156,9 @@ EuiSearchFilters.propTypes = {
       operator: PropTypes.oneOf(["eq", "exact", "gt", "gte", "lt", "lte"])
     }).isRequired).isRequired,
     available: PropTypes.func
+  }).isRequired, PropTypes.shape({
+    type: PropTypes.oneOf(["custom_component"]).isRequired,
+    component: PropTypes.elementType.isRequired,
+    available: PropTypes.func
   }).isRequired]).isRequired).isRequired
 };

package/es/components/selectable/selectable_list/selectable_list.js

@@ -438,12 +438,12 @@ EuiSelectableList.propTypes = {
     /**
        * The side of the badge the icon should sit
        */
-    iconSide: PropTypes.oneOf(["left", "right"]),
+    iconSide: PropTypes.any,
 
     /**
        * Accepts either our palette colors (primary, success ..etc) or a hex value `#FFFFFF`, `#000`.
        */
-    color: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.any.isRequired]),
+    color: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.string.isRequired]),
 
     /**
        * Will override any color passed through the `color` prop.

package/es/components/selectable/selectable_list/selectable_list_item.js

@@ -272,12 +272,12 @@ EuiSelectableListItem.propTypes = {
     /**
        * The side of the badge the icon should sit
        */
-    iconSide: PropTypes.oneOf(["left", "right"]),
+    iconSide: PropTypes.any,
 
     /**
        * Accepts either our palette colors (primary, success ..etc) or a hex value `#FFFFFF`, `#000`.
        */
-    color: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.any.isRequired]),
+    color: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.string.isRequired]),
 
     /**
        * Will override any color passed through the `color` prop.

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/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);
+      }))));
     }
   }]);