@splunk/react-ui 4.13.0 → 4.15.0

package/Tooltip.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 149);
+/******/ 	return __webpack_require__(__webpack_require__.s = 201);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,28 +101,42 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 10:
+/***/ 11:
+/***/ (function(module, exports) {
+
+module.exports = require("lodash/has");
+
+/***/ }),
+
+/***/ 13:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/ui-utils/id");
 
 /***/ }),
 
-/***/ 12:
+/***/ 14:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Clickable");
 
 /***/ }),
 
-/***/ 14:
+/***/ 16:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/ScreenReaderContent");
 
 /***/ }),
 
-/***/ 149:
+/***/ 2:
+/***/ (function(module, exports) {
+
+module.exports = require("react");
+
+/***/ }),
+
+/***/ 201:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -140,28 +154,33 @@ var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_)
 var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
-// EXTERNAL MODULE: external "lodash"
-var external_lodash_ = __webpack_require__(4);
+// EXTERNAL MODULE: external "lodash/has"
+var has_ = __webpack_require__(11);
+var has_default = /*#__PURE__*/__webpack_require__.n(has_);
+
+// EXTERNAL MODULE: external "lodash/throttle"
+var throttle_ = __webpack_require__(31);
+var throttle_default = /*#__PURE__*/__webpack_require__.n(throttle_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Popover"
-var Popover_ = __webpack_require__(17);
+var Popover_ = __webpack_require__(23);
 var Popover_default = /*#__PURE__*/__webpack_require__.n(Popover_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
-var ScreenReaderContent_ = __webpack_require__(14);
+var ScreenReaderContent_ = __webpack_require__(16);
 var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_);
 
 // EXTERNAL MODULE: external "@splunk/themes"
 var themes_ = __webpack_require__(0);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/id"
-var id_ = __webpack_require__(10);
+var id_ = __webpack_require__(13);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
-var i18n_ = __webpack_require__(5);
+var i18n_ = __webpack_require__(4);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/SVG"
-var SVG_ = __webpack_require__(24);
+var SVG_ = __webpack_require__(32);
 var SVG_default = /*#__PURE__*/__webpack_require__.n(SVG_);
 
 // CONCATENATED MODULE: ./src/Tooltip/InfoIcon.tsx
@@ -209,7 +228,7 @@ var external_styled_components_ = __webpack_require__(3);
 var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Clickable"
-var Clickable_ = __webpack_require__(12);
+var Clickable_ = __webpack_require__(14);
 var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
 
 // CONCATENATED MODULE: ./src/Tooltip/TooltipStyles.ts
@@ -220,11 +239,11 @@ var TooltipStyles_size = '16px';
 var Styled = external_styled_components_default.a.span.withConfig({
   displayName: "TooltipStyles__Styled",
   componentId: "sc-67fvgm-0"
-})(["", ";"], themes_["mixins"].reset('block'));
+})(["", ";position:relative;"], themes_["mixins"].reset('block'));
 var StyledInline = external_styled_components_default.a.span.withConfig({
   displayName: "TooltipStyles__StyledInline",
   componentId: "sc-67fvgm-1"
-})(["", ";"], themes_["mixins"].reset('inline-block'));
+})(["", ";position:relative;"], themes_["mixins"].reset('inline-block'));
 var StyledToggle = external_styled_components_default.a.span.withConfig({
   displayName: "TooltipStyles__StyledToggle",
   componentId: "sc-67fvgm-2"
@@ -264,6 +283,10 @@ var StyledButton = external_styled_components_default()(Clickable_default.a).wit
     compact: Object(external_styled_components_["css"])(["padding:6px;"])
   }
 }), themes_["variables"].focusShadow);
+var StyledHitArea = external_styled_components_default.a.svg.withConfig({
+  displayName: "TooltipStyles__StyledHitArea",
+  componentId: "sc-67fvgm-6"
+})(["position:absolute;pointer-events:none;path{pointer-events:auto;stroke-width:0;stroke:transparent;fill:transparent;}"]);
 
 // CONCATENATED MODULE: ./src/Tooltip/Tooltip.tsx
 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); }
@@ -306,11 +329,15 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 
 
+
 var propTypes = {
   /** @private */
   appearance: external_prop_types_default.a.string,
   children: external_prop_types_default.a.node,
   closeDelay: external_prop_types_default.a.number,
+
+  /** @private */
+  closeWhen: external_prop_types_default.a.oneOf(['default', 'notOnClick']),
   content: external_prop_types_default.a.node,
   contentRelationship: external_prop_types_default.a.oneOf(['label', 'description']),
   defaultPlacement: external_prop_types_default.a.oneOf(['above', 'below', 'left', 'right', 'theme']),
@@ -326,7 +353,8 @@ var propTypes = {
 };
 var defaultProps = {
   appearance: 'inverted',
-  closeDelay: 0,
+  closeDelay: 300,
+  closeWhen: 'default',
   contentRelationship: 'description',
   defaultPlacement: 'theme',
   inline: true,
@@ -359,20 +387,20 @@ var Tooltip_Tooltip = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "timeout", void 0);
 
     _defineProperty(_assertThisInitialized(_this), "handleMount", function (el) {
-      // Handle mouseenter and mouseleave with native events due to current issues with how they
+      // Handle mouse events with native events due to current issues with how they
       // are handled by react. See https://github.com/facebook/react/issues/4251,
       // https://github.com/facebook/react/issues/19419, and SUI-1232.
       if (el) {
         el.addEventListener('mouseenter', _this.handleMouseEnter);
         el.addEventListener('mouseleave', _this.handleMouseLeave);
-      } else if (_this.state.anchor) {
-        _this.state.anchor.removeEventListener('mouseenter', _this.handleMouseEnter);
+      } else if (_this.state.anchorEl) {
+        _this.state.anchorEl.removeEventListener('mouseenter', _this.handleMouseEnter);
 
-        _this.state.anchor.removeEventListener('mouseleave', _this.handleMouseLeave);
+        _this.state.anchorEl.removeEventListener('mouseleave', _this.handleMouseLeave);
       }
 
       _this.setState({
-        anchor: el
+        anchorEl: el
       });
     });
 
@@ -388,6 +416,35 @@ var Tooltip_Tooltip = /*#__PURE__*/function (_Component) {
 
       _this.setState({
         popoverEl: el
+      }, function () {
+        return _this.updateHitArea;
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handlePopoverOuterMount", function (el) {
+      _this.setState({
+        popoverOuterEl: el
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleHitAreaMount", function (el) {
+      // Handle mouse events with native events due to current issues with how they
+      // are handled by react. See https://github.com/facebook/react/issues/4251,
+      // https://github.com/facebook/react/issues/19419, and SUI-1232.
+      if (el) {
+        el.addEventListener('mouseenter', _this.handleMouseEnterHitArea);
+        el.addEventListener('mousemove', _this.handleMouseMoveHitArea);
+        el.addEventListener('mouseleave', _this.handleMouseLeaveHitArea);
+      } else if (_this.state.hitAreaEl) {
+        _this.state.hitAreaEl.removeEventListener('mouseenter', _this.handleMouseEnterHitArea);
+
+        _this.state.hitAreaEl.removeEventListener('mousemove', _this.handleMouseMoveHitArea);
+
+        _this.state.hitAreaEl.removeEventListener('mouseleave', _this.handleMouseLeaveHitArea);
+      }
+
+      _this.setState({
+        hitAreaEl: el
       });
     });
 
@@ -398,29 +455,49 @@ var Tooltip_Tooltip = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleMouseEnterPopover", function (e) {
-      if (_this.state.lastCloseReason !== 'mouseLeavePopover') {
-        _this.handleRequestOpen(e, {
-          reason: 'mouseEnterPopover'
-        });
-      }
+      _this.handleRequestOpen(e, {
+        reason: 'mouseEnterPopover'
+      });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleMouseLeave", function (e) {
-      _this.handleRequestClose(e, {
-        reason: 'mouseLeaveToggle'
+    _defineProperty(_assertThisInitialized(_this), "handleMouseEnterHitArea", function (e) {
+      _this.handleRequestOpen(e, {
+        reason: 'mouseEnterHitArea'
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this), "handleMouseLeave", function (e) {
+      var reason = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'mouseLeaveToggle';
+
+      if (e.relatedTarget == null || e.relatedTarget !== _this.state.popoverEl && e.relatedTarget !== _this.state.popoverOuterEl) {
+        _this.handleRequestClose(e, {
+          reason: reason
+        });
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "handleMouseLeavePopover", function (e) {
+      _this.handleMouseLeave(e, 'mouseLeavePopover');
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleMouseLeaveHitArea", function (e) {
+      _this.handleMouseLeave(e, 'mouseLeaveHitArea');
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleMouseMoveHitAreaImpl", function (e) {
       _this.handleRequestClose(e, {
-        reason: 'mouseLeavePopover'
+        reason: 'mouseStopHitArea'
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this), "handleMouseMoveHitArea", throttle_default()(_this.handleMouseMoveHitAreaImpl, 10));
+
     _defineProperty(_assertThisInitialized(_this), "handleClick", function (e) {
-      _this.handleRequestClose(e, {
-        reason: 'toggleClick'
-      });
+      if (_this.props.closeWhen !== 'notOnClick') {
+        _this.handleRequestClose(e, {
+          reason: 'toggleClick'
+        });
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleFocus", function (e) {
@@ -455,10 +532,6 @@ var Tooltip_Tooltip = /*#__PURE__*/function (_Component) {
           });
         }
 
-        _this.setState({
-          lastCloseReason: data.reason
-        });
-
         (_this$props$onRequest = (_this$props = _this.props).onRequestClose) === null || _this$props$onRequest === void 0 ? void 0 : _this$props$onRequest.call(_this$props, e, data);
       }, closeDelay);
     });
@@ -473,7 +546,7 @@ var Tooltip_Tooltip = /*#__PURE__*/function (_Component) {
       }
 
       _this.timeout = setTimeout(function () {
-        var _this$props$onRequest2, _this$props2;
+        var wasOpen = _this.isOpen();
 
         if (!_this.isControlled()) {
           _this.setState({
@@ -481,18 +554,114 @@ var Tooltip_Tooltip = /*#__PURE__*/function (_Component) {
           });
         }
 
-        (_this$props$onRequest2 = (_this$props2 = _this.props).onRequestOpen) === null || _this$props$onRequest2 === void 0 ? void 0 : _this$props$onRequest2.call(_this$props2, e, data);
+        if (!wasOpen) {
+          var _this$props$onRequest2, _this$props2;
+
+          (_this$props$onRequest2 = (_this$props2 = _this.props).onRequestOpen) === null || _this$props$onRequest2 === void 0 ? void 0 : _this$props$onRequest2.call(_this$props2, e, data);
+        }
       }, finalDelay);
     });
 
-    _this.controlledExternally = Object(external_lodash_["has"])(props, 'open');
+    _defineProperty(_assertThisInitialized(_this), "updateHitArea", function () {
+      var placementInfo = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var placement = placementInfo.placement;
+
+      _this.setState(function (_ref) {
+        var anchorEl = _ref.anchorEl,
+            popoverEl = _ref.popoverEl,
+            statePopoverPlacement = _ref.popoverPlacement;
+        var popoverPlacement = placement != null ? placement : statePopoverPlacement;
+
+        if (anchorEl != null && popoverEl != null && popoverPlacement != null) {
+          var anchorRect = anchorEl.getBoundingClientRect();
+          var menuRect = popoverEl.getBoundingClientRect();
+
+          if (popoverPlacement === 'above' || popoverPlacement === 'below') {
+            var anchorLeftEdge = anchorRect.x - menuRect.x;
+            var verticalStart = anchorRect.height;
+            var verticalEnd = 0;
+
+            if (popoverPlacement === 'above') {
+              verticalStart = 0;
+              verticalEnd = anchorRect.height;
+            }
+
+            var menuStart = "0 ".concat(verticalStart);
+            var menuEnd = "".concat(menuRect.width, " ").concat(verticalStart);
+            var anchorStartNear = "".concat(anchorLeftEdge, " ").concat(verticalStart);
+            var anchorStartFar = "".concat(anchorLeftEdge, " ").concat(verticalEnd);
+            var anchorEndNear = "".concat(anchorLeftEdge + anchorRect.width, " ").concat(verticalStart);
+            var anchorEndFar = "".concat(anchorLeftEdge + anchorRect.width, " ").concat(verticalEnd);
+            var hitAreaPath = "\n                        M ".concat(menuStart, "\n                        S ").concat(anchorStartNear, " , ").concat(anchorStartFar, "\n                        L ").concat(anchorStartNear, "\n                        L ").concat(anchorEndNear, "\n                        L ").concat(anchorEndFar, "\n                        S ").concat(anchorEndNear, " , ").concat(menuEnd, "\n                    ");
+            return {
+              popoverPlacement: popoverPlacement,
+              hitAreaPath: hitAreaPath,
+              hitAreaStyle: {
+                left: menuRect.left - anchorRect.left,
+                top: 0,
+                width: menuRect.width,
+                height: anchorRect.height
+              }
+            };
+          }
+
+          if (popoverPlacement === 'left' || popoverPlacement === 'right') {
+            var anchorTopEdge = anchorRect.top - menuRect.top;
+            var horizontalStart = 0;
+            var horizontalEnd = anchorRect.width;
+
+            if (popoverPlacement === 'right') {
+              horizontalStart = anchorRect.width;
+              horizontalEnd = 0;
+            }
+
+            var _menuStart = "".concat(horizontalStart, " 0");
+
+            var _menuEnd = "".concat(horizontalStart, " ").concat(menuRect.height);
+
+            var _anchorStartNear = "".concat(horizontalStart, " ").concat(anchorTopEdge);
+
+            var _anchorStartFar = "".concat(horizontalEnd, " ").concat(anchorTopEdge);
+
+            var _anchorEndNear = "".concat(horizontalStart, " ").concat(anchorTopEdge + anchorRect.height);
+
+            var _anchorEndFar = "".concat(horizontalEnd, " ").concat(anchorTopEdge + anchorRect.height);
+
+            var _hitAreaPath = "\n                        M ".concat(_menuStart, "\n                        S ").concat(_anchorStartNear, " , ").concat(_anchorStartFar, "\n                        L ").concat(_anchorStartNear, "\n                        L ").concat(_anchorEndNear, "\n                        L ").concat(_anchorEndFar, "\n                        S ").concat(_anchorEndNear, " , ").concat(_menuEnd, "\n                    ");
+
+            return {
+              popoverPlacement: popoverPlacement,
+              hitAreaPath: _hitAreaPath,
+              hitAreaStyle: {
+                left: 0,
+                top: menuRect.top - anchorRect.top,
+                width: anchorRect.width,
+                height: menuRect.height
+              }
+            };
+          }
+        }
+
+        return {
+          popoverPlacement: popoverPlacement,
+          hitAreaPath: null,
+          hitAreaStyle: {}
+        };
+      });
+    });
+
+    _this.controlledExternally = has_default()(props, 'open');
     _this.popoverId = Object(id_["createDOMID"])('popover');
     _this.ariaId = Object(id_["createDOMID"])('aria-id');
     _this.state = {
-      anchor: null,
+      anchorEl: null,
       open: false,
       popoverEl: null,
-      lastCloseReason: null
+      popoverOuterEl: null,
+      popoverPlacement: null,
+      hitAreaEl: null,
+      hitAreaPath: null,
+      hitAreaStyle: {}
     };
     return _this;
   }
@@ -514,6 +683,12 @@ var Tooltip_Tooltip = /*#__PURE__*/function (_Component) {
     value: function isControlled() {
       return this.controlledExternally;
     }
+  }, {
+    key: "isOpen",
+    value: function isOpen() {
+      var hasContent = !!this.props.content;
+      return !!this.state.anchorEl && this.isControlled() ? this.props.open : hasContent && this.state.open;
+    }
   }, {
     key: "render",
     value: function render() {
@@ -526,14 +701,16 @@ var Tooltip_Tooltip = /*#__PURE__*/function (_Component) {
           inline = _this$props3.inline,
           onRequestClose = _this$props3.onRequestClose,
           onRequestOpen = _this$props3.onRequestOpen,
-          open = _this$props3.open,
           splunkTheme = _this$props3.splunkTheme,
           contentRelationship = _this$props3.contentRelationship,
-          otherProps = _objectWithoutProperties(_this$props3, ["appearance", "children", "content", "defaultPlacement", "elementRef", "inline", "onRequestClose", "onRequestOpen", "open", "splunkTheme", "contentRelationship"]);
+          otherProps = _objectWithoutProperties(_this$props3, ["appearance", "children", "content", "defaultPlacement", "elementRef", "inline", "onRequestClose", "onRequestOpen", "splunkTheme", "contentRelationship"]);
 
-      var anchor = this.state.anchor;
+      var _this$state = this.state,
+          anchorEl = _this$state.anchorEl,
+          hitAreaPath = _this$state.hitAreaPath,
+          hitAreaStyle = _this$state.hitAreaStyle;
       var hasContent = !!content;
-      var openRender = !!anchor && this.isControlled() ? open : hasContent && this.state.open;
+      var openRender = this.isOpen();
       var StyledComp = inline ? StyledInline : Styled;
       var StyledToggleComp = inline ? StyledToggleInline : StyledToggle;
       var isPrisma = splunkTheme.isPrisma;
@@ -577,17 +754,30 @@ var Tooltip_Tooltip = /*#__PURE__*/function (_Component) {
         "aria-hidden": "true"
       }, "?"), /*#__PURE__*/external_react_default.a.createElement(ScreenReaderContent_default.a, null, Object(i18n_["_"])('More info')))), hasContent && /*#__PURE__*/external_react_default.a.createElement(ScreenReaderContent_default.a, {
         id: this.ariaId
-      }, content)), /*#__PURE__*/external_react_default.a.createElement(Popover_default.a, {
+      }, content)), openRender && hitAreaPath != null && /*#__PURE__*/external_react_default.a.createElement(StyledHitArea, {
+        style: hitAreaStyle
+      }, /*#__PURE__*/external_react_default.a.createElement("path", {
+        d: hitAreaPath,
+        ref: this.handleHitAreaMount
+      })), /*#__PURE__*/external_react_default.a.createElement(Popover_default.a, {
         role: "tooltip",
         align: "center",
-        anchor: anchor,
+        anchor: anchorEl // override Popver's default animation to make it faster
+        // this keeps the overall amount of time the Tooltip is on-screen the same
+        // even with the increased default closeDelay to address SUI-5116
+        ,
+        animationConfig: {
+          tension: 400
+        },
         appearance: appearance,
         closeReasons: ['offScreen', 'escapeKey'],
         defaultPlacement: defaultPlacement === 'theme' ? placement : defaultPlacement,
         id: this.popoverId,
         open: openRender,
+        onReposition: this.updateHitArea,
         onRequestClose: this.handlePopoverOnRequestClose,
-        elementRef: this.handlePopoverMount
+        elementRef: this.handlePopoverMount,
+        outerRef: this.handlePopoverOuterMount
       }, /*#__PURE__*/external_react_default.a.createElement(StyledContent, {
         $isLabel: contentRelationship === 'label'
       }, content)));
@@ -610,44 +800,37 @@ TooltipWithTheme.propTypes = Tooltip_Tooltip.propTypes;
 
 /***/ }),
 
-/***/ 17:
+/***/ 23:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Popover");
 
 /***/ }),
 
-/***/ 2:
+/***/ 3:
 /***/ (function(module, exports) {
 
-module.exports = require("react");
+module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 24:
+/***/ 31:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-icons/SVG");
+module.exports = require("lodash/throttle");
 
 /***/ }),
 
-/***/ 3:
+/***/ 32:
 /***/ (function(module, exports) {
 
-module.exports = require("styled-components");
+module.exports = require("@splunk/react-icons/SVG");
 
 /***/ }),
 
 /***/ 4:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash");
-
-/***/ }),
-
-/***/ 5:
-/***/ (function(module, exports) {
-
 module.exports = require("@splunk/ui-utils/i18n");
 
 /***/ })