@elastic/eui 65.0.1 → 67.0.0

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;

package/lib/components/tool_tip/tool_tip_anchor.js

@@ -0,0 +1,87 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiToolTipAnchor = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 _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; }
+
+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 = _objectWithoutProperties(_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", _extends({
+      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.propTypes = {
+  onBlur: _propTypes.default.func.isRequired,
+  onFocus: _propTypes.default.func.isRequired,
+  children: _propTypes.default.element.isRequired,
+  isVisible: _propTypes.default.bool.isRequired,
+  display: _propTypes.default.oneOf(["block", "inlineBlock"]).isRequired
+};
+EuiToolTipAnchor.displayName = 'EuiToolTipAnchor';

package/lib/components/tool_tip/tool_tip_arrow.js

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

package/lib/components/tool_tip/tool_tip_popover.js

@@ -13,9 +13,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _services = require("../../services");
+
+var _tool_tip = require("./tool_tip.styles");
+
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "title", "className", "positionToolTip", "popoverRef"];
+var _excluded = ["children", "title", "className", "positionToolTip", "popoverRef", "calculatedPosition"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -29,107 +33,53 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-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; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-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 EuiToolTipPopover = /*#__PURE__*/function (_Component) {
-  _inherits(EuiToolTipPopover, _Component);
-
-  var _super = _createSuper(EuiToolTipPopover);
-
-  function EuiToolTipPopover() {
-    var _this;
-
-    _classCallCheck(this, EuiToolTipPopover);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "popover", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "updateDimensions", function () {
-      requestAnimationFrame(function () {
-        // Because of this delay, sometimes `positionToolTip` becomes unavailable.
-        if (_this.popover) {
-          _this.props.positionToolTip();
-        }
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "setPopoverRef", function (ref) {
-      _this.popover = ref;
-
-      if (_this.props.popoverRef) {
-        _this.props.popoverRef(ref);
+var EuiToolTipPopover = function EuiToolTipPopover(_ref) {
+  var children = _ref.children,
+      title = _ref.title,
+      className = _ref.className,
+      positionToolTip = _ref.positionToolTip,
+      popoverRef = _ref.popoverRef,
+      calculatedPosition = _ref.calculatedPosition,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var popover = (0, _react.useRef)();
+  var euiTheme = (0, _services.useEuiTheme)();
+  var toolTipCss = (0, _tool_tip.euiToolTipStyles)(euiTheme);
+  var popoverStyles = (0, _tool_tip.euiToolTipPopoverStyles)(euiTheme);
+  var titleCss = [popoverStyles.euiToolTip__title];
+  var updateDimensions = (0, _react.useCallback)(function () {
+    requestAnimationFrame(function () {
+      // Because of this delay, sometimes `positionToolTip` becomes unavailable.
+      if (popover.current) {
+        positionToolTip();
       }
     });
+  }, [positionToolTip]);
 
-    return _this;
-  }
-
-  _createClass(EuiToolTipPopover, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      document.body.classList.add('euiBody-hasPortalContent');
-      window.addEventListener('resize', this.updateDimensions);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      document.body.classList.remove('euiBody-hasPortalContent');
-      window.removeEventListener('resize', this.updateDimensions);
+  var setPopoverRef = function setPopoverRef(ref) {
+    if (popoverRef) {
+      popoverRef(ref);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          children = _this$props.children,
-          title = _this$props.title,
-          className = _this$props.className,
-          positionToolTip = _this$props.positionToolTip,
-          popoverRef = _this$props.popoverRef,
-          rest = _objectWithoutProperties(_this$props, _excluded);
-
-      var classes = (0, _classnames.default)('euiToolTipPopover', className);
-      var optionalTitle;
-
-      if (title) {
-        optionalTitle = (0, _react2.jsx)("div", {
-          className: "euiToolTip__title"
-        }, title);
-      }
+  };
 
-      return (0, _react2.jsx)("div", _extends({
-        className: classes,
-        ref: this.setPopoverRef
-      }, rest), optionalTitle, children);
-    }
-  }]);
-
-  return EuiToolTipPopover;
-}(_react.Component);
+  (0, _react.useEffect)(function () {
+    document.body.classList.add('euiBody-hasPortalContent');
+    window.addEventListener('resize', updateDimensions);
+    return function () {
+      document.body.classList.remove('euiBody-hasPortalContent');
+      window.removeEventListener('resize', updateDimensions);
+    };
+  }, [updateDimensions]);
+  var classes = (0, _classnames.default)('euiToolTipPopover', className);
+  return (0, _react2.jsx)("div", _extends({
+    css: [toolTipCss.euiToolTip, calculatedPosition && toolTipCss[calculatedPosition], ";label:EuiToolTipPopover;"],
+    className: classes,
+    ref: setPopoverRef
+  }, rest), title && (0, _react2.jsx)("div", {
+    css: titleCss,
+    className: "euiToolTip__title"
+  }, title), children);
+};
 
 exports.EuiToolTipPopover = EuiToolTipPopover;
 EuiToolTipPopover.propTypes = {
@@ -140,5 +90,6 @@ EuiToolTipPopover.propTypes = {
   positionToolTip: _propTypes.default.func.isRequired,
   children: _propTypes.default.node,
   title: _propTypes.default.node,
-  popoverRef: _propTypes.default.func
+  popoverRef: _propTypes.default.func,
+  calculatedPosition: _propTypes.default.oneOf(["top", "right", "bottom", "left"])
 };

package/lib/global_styling/functions/logicals.json

@@ -0,0 +1,56 @@
+{
+  "height": "block-size",
+  "width": "inline-size",
+  "max-height": "max-block-size",
+  "max-width": "max-inline-size",
+  "min-height": "min-block-size",
+  "min-width": "min-inline-size",
+  "top": "inset-block-start",
+  "right": "inset-inline-end",
+  "bottom": "inset-block-end",
+  "left": "inset-inline-start",
+  "horizontal": "inset-block",
+  "vertical": "inset-inline",
+  "margin-left": "margin-inline-start",
+  "margin-right": "margin-inline-end",
+  "margin-top": "margin-block-start",
+  "margin-bottom": "margin-block-end",
+  "margin-horizontal": "margin-inline",
+  "margin-vertical": "margin-block",
+  "padding-left": "padding-inline-start",
+  "padding-right": "padding-inline-end",
+  "padding-top": "padding-block-start",
+  "padding-bottom": "padding-block-end",
+  "padding-horizontal": "padding-inline",
+  "padding-vertical": "padding-block",
+  "overflow-x": "overflow-inline",
+  "overflow-y": "overflow-block",
+  "border-horizontal": "border-inline",
+  "border-horizontal-color": "border-inline-color",
+  "border-horizontal-width": "border-inline-width",
+  "border-horizontal-style": "border-inline-style",
+  "border-vertical": "border-block",
+  "border-vertical-color": "border-block-color",
+  "border-vertical-width": "border-block-width",
+  "border-vertical-style": "border-block-style",
+  "border-bottom": "border-block-end",
+  "border-bottom-color": "border-block-end-color",
+  "border-bottom-style": "border-block-end-style",
+  "border-bottom-width": "border-block-end-width",
+  "border-top": "border-block-start",
+  "border-top-color": "border-block-start-color",
+  "border-top-style": "border-block-start-style",
+  "border-top-width": "border-block-start-width",
+  "border-right": "border-inline-end",
+  "border-right-color": "border-inline-end-color",
+  "border-right-style": "border-inline-end-style",
+  "border-right-width": "border-inline-end-width",
+  "border-left": "border-inline-start",
+  "border-left-color": "border-inline-start-color",
+  "border-left-style": "border-inline-start-style",
+  "border-left-width": "border-inline-start-width",
+  "border-top-left-radius": "border-start-start-radius",
+  "border-top-right-radius": "border-start-end-radius",
+  "border-bottom-left-radius": "border-end-start-radius",
+  "border-bottom-right-radius": "border-end-end-radius"
+}

package/lib/global_styling/index.js

@@ -54,4 +54,17 @@ Object.keys(_mixins).forEach(function (key) {
       return _mixins[key];
     }
   });
+});
+
+var _animations = require("./utility/animations");
+
+Object.keys(_animations).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _animations[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _animations[key];
+    }
+  });
 });

package/lib/global_styling/mixins/_typography.js

@@ -45,7 +45,7 @@ var useEuiFontSize = function useEuiFontSize(scale, options) {
 exports.useEuiFontSize = useEuiFontSize;
 
 var euiTextBreakWord = function euiTextBreakWord() {
-  return "\n  overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container\n  word-wrap: break-word !important; // spec says, they are literally just alternate names for each other but some browsers support one and not the other\n  word-break: break-word; // IE doesn't understand but that's ok\n";
+  return "\n  overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container\n  word-break: break-word;\n";
 };
 /**
  * Prevent text from wrapping onto multiple lines, and truncate with an ellipsis.