@elastic/eui 66.0.0 → 67.0.0

package/optimize/lib/components/pagination/pagination_button.styles.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiPaginationButtonStyles = exports.euiPaginationButtonArrowStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../global_styling");
+
+var _mixins = require("../../themes/amsterdam/global_styling/mixins");
+
+/*
+ * 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 euiPaginationButtonStyles = function euiPaginationButtonStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var fontSizeS = (0, _global_styling.euiFontSize)(euiThemeContext, 's');
+  var halfSizeM = parseInt(euiTheme.size.m.replace('px', '')) / 2;
+  var disabled = (0, _mixins.euiButtonEmptyColor)(euiThemeContext, 'disabled'); // && to increase specificity. Can likely be removed once EuiButtonEmpty has been converted.
+
+  return {
+    // Base
+    euiPaginationButton: /*#__PURE__*/(0, _react.css)("&&{", fontSizeS, ";padding:0;", (0, _global_styling.logicalTextAlignCSS)('center'), " border-radius:", euiTheme.border.radius.medium, ";outline-offset:-", euiTheme.focus.width, ";};label:euiPaginationButton;"),
+    // States
+    isActive: /*#__PURE__*/(0, _react.css)("&&{font-weight:", euiTheme.font.weight.bold, ";color:", euiTheme.colors.primary, ";.euiButtonEmpty__content{cursor:default;}&&,&&:hover{text-decoration:underline;}};label:isActive;"),
+    isPlaceholder: /*#__PURE__*/(0, _react.css)("&&{align-items:baseline;color:", disabled.color, ";", fontSizeS, ";", (0, _global_styling.logicalCSS)('padding-top', "".concat(halfSizeM, "px")), ";", (0, _global_styling.logicalCSS)('padding-bottom', 0), ";", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), ";", (0, _global_styling.logicalCSS)('height', euiTheme.size.l), ";};label:isPlaceholder;")
+  };
+};
+
+exports.euiPaginationButtonStyles = euiPaginationButtonStyles;
+
+var euiPaginationButtonArrowStyles = function euiPaginationButtonArrowStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    euiPaginationArrowButton: /*#__PURE__*/(0, _react.css)("outline-offset:-", euiTheme.focus.width, ";;label:euiPaginationArrowButton;")
+  };
+};
+
+exports.euiPaginationButtonArrowStyles = euiPaginationButtonArrowStyles;

package/optimize/lib/components/pagination/pagination_button_arrow.js

@@ -19,6 +19,10 @@ var _common = require("../common");
 
 var _i18n = require("../i18n");
 
+var _services = require("../../services");
+
+var _pagination_button = require("./pagination_button.styles");
+
 var _react2 = require("@emotion/react");
 
 /*
@@ -43,6 +47,8 @@ var EuiPaginationButtonArrow = function EuiPaginationButtonArrow(_ref) {
       disabled = _ref.disabled,
       ariaControls = _ref.ariaControls,
       onClick = _ref.onClick;
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _pagination_button.euiPaginationButtonArrowStyles)(euiTheme);
   var labels = {
     first: (0, _i18n.useEuiI18n)('euiPaginationButtonArrow.firstPage', 'First page'),
     previous: (0, _i18n.useEuiI18n)('euiPaginationButtonArrow.previousPage', 'Previous page'),
@@ -57,6 +63,7 @@ var EuiPaginationButtonArrow = function EuiPaginationButtonArrow(_ref) {
   }
 
   return (0, _react2.jsx)(_button_icon.EuiButtonIcon, (0, _extends2.default)({
+    css: styles.euiPaginationArrowButton,
     className: (0, _classnames.default)('euiPaginationArrowButton', className),
     color: "text",
     "aria-label": labels[type],

package/optimize/lib/components/provider/cache/cache_provider.js

@@ -9,8 +9,6 @@ exports.EuiCacheProvider = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _cache = _interopRequireDefault(require("@emotion/cache"));
-
 var _react2 = require("@emotion/react");
 
 /*
@@ -20,18 +18,12 @@ var _react2 = require("@emotion/react");
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var defaultCache = (0, _cache.default)({
-  key: 'css'
-});
-defaultCache.compat = true;
-
 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 (0, _react2.jsx)(_react2.CacheProvider, {
+  return children && cache ? (0, _react2.jsx)(_react2.CacheProvider, {
     value: cache
-  }, children);
+  }, children) : (0, _react2.jsx)(_react.default.Fragment, null, children);
 };
 
 exports.EuiCacheProvider = EuiCacheProvider;

package/optimize/lib/components/provider/provider.js

@@ -9,6 +9,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");
@@ -17,7 +19,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/optimize/lib/components/suggest/suggest.js

@@ -37,7 +37,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 _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -79,6 +79,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,
@@ -243,6 +245,7 @@ var EuiSuggest = function EuiSuggest(_ref) {
       isVirtualized: isVirtualized
     },
     searchable: true,
+    isPreFiltered: isPreFiltered,
     searchProps: _objectSpread({
       id: id,
       append: appendArray.length ? appendArray : undefined,

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

@@ -35,6 +35,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");
@@ -51,10 +55,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) { (0, _defineProperty2.default)(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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -134,16 +134,11 @@ var EuiToolTip = /*#__PURE__*/function (_Component) {
         }
       }
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setAnchorRef", function (ref) {
+      return _this.anchor = ref;
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "showToolTip", function () {
       if (!_this.timeoutId) {
@@ -206,7 +201,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
           });
         }
       });
@@ -262,8 +259,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,
@@ -278,56 +273,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, (0, _extends2.default)({
-          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", (0, _extends2.default)({
-        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, (0, _extends2.default)({}, 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, (0, _extends2.default)({
+        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);
+      }))));
     }
   }]);
   return EuiToolTip;

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

@@ -0,0 +1,125 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiToolTipStyles = exports.euiToolTipPopoverStyles = exports.euiToolTipBorderColor = exports.euiToolTipBackgroundColor = exports.euiToolTipAnchorStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../global_styling");
+
+var _services = require("../../services");
+
+var _amsterdam = require("../../themes/amsterdam");
+
+var _templateObject, _templateObject2;
+
+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 = (0, _taggedTemplateLiteral2.default)(["\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 = (0, _taggedTemplateLiteral2.default)(["\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;

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

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiToolTipAnchor = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _tool_tip = require("./tool_tip.styles");
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["onBlur", "onFocus", "onMouseOver", "onMouseOut", "id", "className", "children", "display", "isVisible"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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) { (0, _defineProperty2.default)(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; }
+
+var EuiToolTipAnchor = /*#__PURE__*/(0, _react.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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var anchorCss = (0, _tool_tip.euiToolTipAnchorStyles)();
+  var cssStyles = [anchorCss.euiToolTipAnchor, anchorCss[display]];
+  var classes = (0, _classnames.default)('euiToolTipAnchor', className);
+  return (// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+    (0, _react2.jsx)("span", (0, _extends2.default)({
+      ref: ref
+    }, rest, {
+      css: cssStyles,
+      className: classes,
+      onMouseOver: onMouseOver,
+      onMouseOut: onMouseOut
+    }), /*#__PURE__*/(0, _react.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
+    })))
+  );
+});
+exports.EuiToolTipAnchor = EuiToolTipAnchor;
+EuiToolTipAnchor.displayName = 'EuiToolTipAnchor';

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

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiToolTipArrow = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _services = require("../../services");
+
+var _tool_tip = require("./tool_tip.styles");
+
+var _react2 = require("@emotion/react");
+
+/*
+ * 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 EuiToolTipArrow = function EuiToolTipArrow(props) {
+  var euiTheme = (0, _services.useEuiTheme)();
+  var toolTipCss = (0, _tool_tip.euiToolTipStyles)(euiTheme);
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: [toolTipCss.euiToolTip__arrow, ";label:EuiToolTipArrow;"]
+  }, props));
+};
+
+exports.EuiToolTipArrow = EuiToolTipArrow;