@elastic/eui 66.0.0 → 67.1.0

package/lib/components/provider/provider.js

@@ -7,6 +7,8 @@ exports.EuiProvider = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _cache = _interopRequireDefault(require("@emotion/cache"));
+
 var _global_styles = require("../../global_styling/reset/global_styles");
 
 var _utility = require("../../global_styling/utility/utility");
@@ -15,7 +17,7 @@ var _services = require("../../services");
 
 var _themes = require("../../themes");
 
-var _cache = require("./cache");
+var _cache2 = require("./cache");
 
 var _react2 = require("@emotion/react");
 
@@ -32,8 +34,16 @@ var isEmotionCacheObject = function isEmotionCacheObject(obj) {
   return obj.hasOwnProperty('key');
 };
 
+var fallbackCache = (0, _cache.default)({
+  key: 'css'
+});
+fallbackCache.compat = true;
+
 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 ? _themes.EuiThemeAmsterdam : _ref$theme,
       _ref$globalStyles = _ref.globalStyles,
@@ -49,24 +59,39 @@ 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 (0, _react2.jsx)(_cache.EuiCacheProvider, {
-    cache: defaultCache
+  return (0, _react2.jsx)(_cache2.EuiCacheProvider, {
+    cache: (_defaultCache = defaultCache) !== null && _defaultCache !== void 0 ? _defaultCache : fallbackCache
   }, (0, _react2.jsx)(_services.EuiThemeProvider, {
     theme: theme !== null && theme !== void 0 ? theme : undefined,
     colorMode: colorMode,
     modify: modify
-  }, theme && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_cache.EuiCacheProvider, {
+  }, theme && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_cache2.EuiCacheProvider, {
     cache: globalCache,
     children: Globals && (0, _react2.jsx)(Globals, null)
-  }), (0, _react2.jsx)(_cache.EuiCacheProvider, {
+  }), (0, _react2.jsx)(_cache2.EuiCacheProvider, {
     cache: utilityCache,
     children: Utilities && (0, _react2.jsx)(Utilities, null)
   })), (0, _react2.jsx)(_services.CurrentEuiBreakpointProvider, null, children)));

package/lib/components/resizable_container/resizable_panel.js

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

package/lib/components/search_bar/filters/custom_component_filter.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomComponentFilter = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@emotion/react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/*
+ * 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 CustomComponentFilter = function CustomComponentFilter(props) {
+  var CustomComponent = props.config.component;
+  return (0, _react2.jsx)(CustomComponent, {
+    query: props.query,
+    onChange: props.onChange
+  });
+};
+
+exports.CustomComponentFilter = CustomComponentFilter;

package/lib/components/search_bar/filters/filters.js

@@ -15,6 +15,8 @@ var _field_value_toggle_filter = require("./field_value_toggle_filter");
 
 var _field_value_toggle_group_filter = require("./field_value_toggle_group_filter");
 
+var _custom_component_filter = require("./custom_component_filter");
+
 var _react2 = require("@emotion/react");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -53,6 +55,11 @@ var createFilter = function createFilter(index, config, query, onChange) {
         config: config
       }));
 
+    case 'custom_component':
+      return (0, _react2.jsx)(_custom_component_filter.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/lib/components/search_bar/query/ast.js

@@ -547,6 +547,18 @@ 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/lib/components/search_bar/query/ast_to_es_query_dsl.js

@@ -5,18 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.astToEsQueryDsl = exports._termValuesToQuery = exports._isFlagToQuery = exports._fieldValuesToQuery = void 0;
 
-var _date_format = require("./date_format");
+var _predicate = require("../../../services/predicate");
 
-var _date_value = require("./date_value");
+var _common = require("../../common");
 
 var _ast = require("./ast");
 
-var _predicate = require("../../../services/predicate");
+var _date_format = require("./date_format");
 
-var _common = require("../../common");
+var _date_value = require("./date_value");
 
 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."); }
@@ -29,8 +31,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; }
-
 var processDateOperation = function processDateOperation(value, operator) {
   var granularity = value.granularity,
       resolve = value.resolve;
@@ -122,12 +122,17 @@ var _fieldValuesToQuery = function _fieldValuesToQuery(field, operations, andOr)
           }
         });
 
-        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/lib/components/search_bar/query/query.js

@@ -49,6 +49,11 @@ 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);
@@ -108,6 +113,12 @@ 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) {
@@ -136,6 +147,12 @@ 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/lib/components/search_bar/search_bar.js

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

package/lib/components/search_bar/search_filters.js

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

package/lib/components/selectable/selectable_list/selectable_list.js

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

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

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

package/lib/components/side_nav/side_nav.js

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

package/lib/components/suggest/suggest.js

@@ -31,7 +31,7 @@ var _suggest_item = require("./suggest_item");
 
 var _react2 = require("@emotion/react");
 
-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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -93,6 +93,8 @@ 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,
@@ -257,6 +259,7 @@ var EuiSuggest = function EuiSuggest(_ref) {
       isVirtualized: isVirtualized
     },
     searchable: true,
+    isPreFiltered: isPreFiltered,
     searchProps: _objectSpread({
       id: id,
       append: appendArray.length ? appendArray : undefined,
@@ -384,5 +387,11 @@ EuiSuggest.propTypes = {
        * Default is `60vh`
        */
   maxHeight: _propTypes.default.any,
+
+  /**
+       * Control whether or not options get filtered internally or if consumer will filter.
+       * Default `false`
+       */
+  isPreFiltered: _propTypes.default.bool,
   "aria-labelledby": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string.isRequired])
 };

package/lib/components/tool_tip/tool_tip.js

@@ -17,6 +17,10 @@ var _common = require("../common");
 
 var _portal = require("../portal");
 
+var _tool_tip_anchor = require("./tool_tip_anchor");
+
+var _tool_tip_arrow = require("./tool_tip_arrow");
+
 var _tool_tip_popover = require("./tool_tip_popover");
 
 var _react2 = require("../../services/react");
@@ -35,10 +39,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-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; }
@@ -150,16 +150,12 @@ 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 () {
@@ -225,7 +221,9 @@ var EuiToolTip = /*#__PURE__*/function (_Component) {
       (0, _react2.enqueueStateChange)(function () {
         if (_this._isMounted) {
           _this.setState({
-            visible: false
+            visible: false,
+            toolTipStyles: DEFAULT_TOOLTIP_STYLES,
+            arrowStyles: undefined
           });
         }
       });
@@ -285,8 +283,6 @@ 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,
@@ -302,56 +298,39 @@ 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 = (0, _classnames.default)('euiToolTip', positionsToClassNameMap[this.state.calculatedPosition], className);
-      var anchorClasses = (0, _classnames.default)('euiToolTipAnchor', display ? displayToClassNameMap[display] : null, anchorClassName, anchorProps === null || anchorProps === void 0 ? void 0 : anchorProps.className);
-      var tooltip;
-
-      if (visible && (content || title)) {
-        tooltip = (0, _react3.jsx)(_portal.EuiPortal, null, (0, _react3.jsx)(_tool_tip_popover.EuiToolTipPopover, _extends({
-          className: classes,
-          style: toolTipStyles,
-          positionToolTip: this.positionToolTip,
-          popoverRef: this.setPopoverRef,
-          title: title,
-          id: id,
-          role: "tooltip"
-        }, rest), (0, _react3.jsx)("div", {
-          style: arrowStyles,
-          className: "euiToolTip__arrow"
-        }), (0, _react3.jsx)(_resize_observer.EuiResizeObserver, {
-          onResize: this.positionToolTip
-        }, function (resizeRef) {
-          return (0, _react3.jsx)("div", {
-            ref: resizeRef
-          }, content);
-        })));
-      }
-
-      var anchor = // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-      (0, _react3.jsx)("span", _extends({
-        ref: function ref(anchor) {
-          return _this2.anchor = anchor;
-        }
-      }, anchorProps, {
-        className: anchorClasses,
+      var anchorClasses = (0, _classnames.default)(anchorClassName, anchorProps === null || anchorProps === void 0 ? void 0 : anchorProps.className);
+      return (0, _react3.jsx)(_react.default.Fragment, null, (0, _react3.jsx)(_tool_tip_anchor.EuiToolTipAnchor, _extends({}, anchorProps, {
+        ref: this.setAnchorRef,
+        onBlur: this.onBlur,
+        onFocus: this.onFocus,
         onMouseOver: this.showToolTip,
-        onMouseOut: this.onMouseOut
-      }), /*#__PURE__*/(0, _react.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 (0, _react3.jsx)(_react.Fragment, null, anchor, tooltip);
+        onMouseOut: this.onMouseOut,
+        id: this.state.id,
+        className: anchorClasses,
+        display: display,
+        isVisible: visible
+      }), children), visible && (content || title) && (0, _react3.jsx)(_portal.EuiPortal, null, (0, _react3.jsx)(_tool_tip_popover.EuiToolTipPopover, _extends({
+        className: classes,
+        style: toolTipStyles,
+        positionToolTip: this.positionToolTip,
+        popoverRef: this.setPopoverRef,
+        title: title,
+        id: id,
+        role: "tooltip",
+        calculatedPosition: calculatedPosition
+      }, rest), (0, _react3.jsx)(_tool_tip_arrow.EuiToolTipArrow, {
+        style: arrowStyles,
+        className: "euiToolTip__arrow"
+      }), (0, _react3.jsx)(_resize_observer.EuiResizeObserver, {
+        onResize: this.positionToolTip
+      }, function (resizeRef) {
+        return (0, _react3.jsx)("div", {
+          ref: resizeRef
+        }, content);
+      }))));
     }
   }]);
 

package/lib/components/tool_tip/tool_tip.styles.js

@@ -0,0 +1,123 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiToolTipStyles = exports.euiToolTipPopoverStyles = exports.euiToolTipBorderColor = exports.euiToolTipBackgroundColor = exports.euiToolTipAnchorStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../global_styling");
+
+var _services = require("../../services");
+
+var _amsterdam = require("../../themes/amsterdam");
+
+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)."; }
+
+var euiToolTipBackgroundColor = function euiToolTipBackgroundColor(euiTheme, colorMode) {
+  return colorMode === _services.COLOR_MODES_STANDARD.dark ? (0, _services.shade)(euiTheme.colors.emptyShade, 1) : (0, _services.tint)(euiTheme.colors.fullShade, 0.25);
+};
+
+exports.euiToolTipBackgroundColor = euiToolTipBackgroundColor;
+
+var euiToolTipBorderColor = function euiToolTipBorderColor(euiTheme, colorMode) {
+  return colorMode === _services.COLOR_MODES_STANDARD.dark ? (0, _services.shade)(euiTheme.colors.fullShade, 0.8) : (0, _services.tint)(euiTheme.colors.fullShade, 0.35);
+};
+
+exports.euiToolTipBorderColor = euiToolTipBorderColor;
+
+var euiToolTipAnimationVertical = function euiToolTipAnimationVertical(size) {
+  return (0, _react.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 (0, _react.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);
+};
+
+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__*/(0, _react.css)((0, _amsterdam.euiShadow)(euiThemeContext), ";border-radius:", euiTheme.border.radius.medium, ";background-color:", euiToolTipBackgroundColor(euiTheme, colorMode), ";color:", euiTheme.colors.ghost, ";z-index:", euiTheme.levels.toast, ";", (0, _global_styling.logicalCSS)('max-width', '256px'), " overflow-wrap:break-word;padding:", euiTheme.size.s, ";", (0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";position:absolute;[class*='euiHorizontalRule']{background-color:", euiToolTipBorderColor(euiTheme, colorMode), ";};label:euiToolTip;"),
+    // Sizes
+    s: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), ";;label:s;"),
+    // Positions
+    top: /*#__PURE__*/(0, _react.css)("animation:", euiToolTipAnimationVertical("-".concat(euiTheme.size.base)), " ", animationTiming, ";;label:top;"),
+    bottom: /*#__PURE__*/(0, _react.css)("animation:", euiToolTipAnimationVertical(euiTheme.size.base), " ", animationTiming, ";[class*='euiToolTip__arrow']{transform:translateY(", arrowMinusSize, ") rotateZ(45deg);};label:bottom;"),
+    left: /*#__PURE__*/(0, _react.css)("animation:", euiToolTipAnimationHorizontal("-".concat(euiTheme.size.base)), " ", animationTiming, ";[class*='euiToolTip__arrow']{transform:translateX(", arrowPlusSize, ") rotateZ(45deg);};label:left;"),
+    right: /*#__PURE__*/(0, _react.css)("animation:", euiToolTipAnimationHorizontal(euiTheme.size.base), " ", animationTiming, ";[class*='euiToolTip__arrow']{transform:translateX(", arrowMinusSize, ") rotateZ(45deg);};label:right;"),
+    // Elements
+    euiToolTip__arrow: /*#__PURE__*/(0, _react.css)("content:'';position:absolute;transform-origin:center;border-radius:2px;background-color:", euiToolTipBackgroundColor(euiTheme, colorMode), ";", (0, _global_styling.logicalSizeCSS)(arrowSize, arrowSize), ";transform:translateY(", arrowPlusSize, ") rotateZ(45deg);;label:euiToolTip__arrow;")
+  };
+};
+
+exports.euiToolTipStyles = euiToolTipStyles;
+
+var euiToolTipPopoverStyles = function euiToolTipPopoverStyles(_ref4) {
+  var euiTheme = _ref4.euiTheme,
+      colorMode = _ref4.colorMode;
+  return {
+    // Elements
+    euiToolTip__title: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.bold, ";", (0, _global_styling.logicalCSS)('border-bottom', "solid ".concat(euiTheme.border.width.thin, " ").concat(euiToolTipBorderColor(euiTheme, colorMode))), ";", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.xs), ";", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.xs), ";;label:euiToolTip__title;")
+  };
+};
+
+exports.euiToolTipPopoverStyles = euiToolTipPopoverStyles;
+
+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__
+};
+
+var euiToolTipAnchorStyles = function euiToolTipAnchorStyles() {
+  return {
+    // Elements
+    euiToolTipAnchor: _ref3,
+    // Variants
+    block: _ref2,
+    inlineBlock: _ref
+  };
+};
+
+exports.euiToolTipAnchorStyles = euiToolTipAnchorStyles;