@planningcenter/tapestry-react 2.1.2 → 2.3.0

package/dist/cjs/Tabs/Tabs.js

@@ -11,130 +11,96 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _StackView = _interopRequireDefault(require("../StackView"));
 
 var _utils = require("../utils");
 
-var _Tab = _interopRequireDefault(require("./Tab"));
+var _system = require("../system");
 
-var _TabList = _interopRequireWildcard(require("./TabList"));
+var _TabList = require("./TabList");
 
-var _TabPanel = _interopRequireDefault(require("./TabPanel"));
+var _TabPanels = require("./TabPanels");
 
-var _TabPanels = _interopRequireWildcard(require("./TabPanels"));
+function Tabs(props) {
+  var _useThemeProps = (0, _system.useThemeProps)('tabs', props),
+      _useThemeProps$active = _useThemeProps.activeIndex,
+      activeIndex = _useThemeProps$active === void 0 ? null : _useThemeProps$active,
+      children = _useThemeProps.children,
+      _useThemeProps$defaul = _useThemeProps.defaultActiveIndex,
+      defaultActiveIndex = _useThemeProps$defaul === void 0 ? 0 : _useThemeProps$defaul,
+      onChange = _useThemeProps.onChange,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["activeIndex", "children", "defaultActiveIndex", "onChange"]);
 
-var Tabs = /*#__PURE__*/function (_Component) {
-  (0, _inheritsLoose2["default"])(Tabs, _Component);
+  var id = (0, _utils.generateId)('tabs');
 
-  function Tabs() {
-    var _this;
+  var _useState = (0, _react.useState)(defaultActiveIndex),
+      localActiveIndex = _useState[0],
+      setLocalActiveIndex = _useState[1];
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+  var tabListRef = (0, _react.useRef)(null);
+  var setActiveIndex = (0, _react.useCallback)(function (index) {
+    if (onChange) {
+      onChange(index);
     }
 
-    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "id", (0, _utils.generateId)('tabs'));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
-      activeIndex: _this.props.defaultActiveIndex
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setTabList", function (node) {
-      if (node) {
-        _this.tabList = node.querySelector('[role="tablist"]');
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setActiveIndex", function (activeIndex) {
-      if (_this.props.onChange) {
-        _this.props.onChange(activeIndex);
-      }
+    if (activeIndex === null) {
+      setLocalActiveIndex(index);
+    }
+  });
+  var getActiveIndex = (0, _react.useCallback)(function () {
+    return activeIndex === null ? localActiveIndex : activeIndex;
+  });
+  var getNextTab = (0, _react.useCallback)(function (startIndex, direction) {
+    var tabCount = tabListRef.current.children.length;
+    var nextIndex = startIndex + direction;
+
+    if (nextIndex < 0) {
+      nextIndex = tabCount - 1;
+    } else if (nextIndex >= tabCount) {
+      nextIndex = 0;
+    }
 
-      if (_this.props.activeIndex === null) {
-        _this.setState({
-          activeIndex: activeIndex
-        });
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getActiveIndex", function () {
-      return _this.props.activeIndex === null ? _this.state.activeIndex : _this.props.activeIndex;
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getNextTab", function (startIndex, direction) {
-      var tabCount = _this.tabList.children.length;
-      var nextIndex = startIndex + direction;
-
-      if (nextIndex < 0) {
-        nextIndex = tabCount - 1;
-      } else if (nextIndex >= tabCount) {
-        nextIndex = 0;
-      }
+    var nextTab = tabListRef.current.children[nextIndex];
 
-      var nextTab = _this.tabList.children[nextIndex];
+    if (nextTab.getAttribute('aria-disabled') === 'true') {
+      return getNextTab(nextIndex, direction);
+    } else {
+      return nextTab;
+    }
+  });
+  var moveTabFocus = (0, _react.useCallback)(function (direction) {
+    var nextTab = getNextTab(getActiveIndex(), direction);
 
-      if (nextTab.getAttribute('aria-disabled') === 'true') {
-        return _this.getNextTab(nextIndex, direction);
-      } else {
-        return nextTab;
+    if (nextTab) {
+      nextTab.focus();
+    }
+  });
+  return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+    innerRef: function innerRef(node) {
+      if (node) {
+        tabListRef.current = node.querySelector('[role="tablist"]');
       }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "moveTabFocus", function (direction) {
-      var nextTab = _this.getNextTab(_this.getActiveIndex(), direction);
+    }
+  }, restProps), _react.Children.map(children, function (child, index) {
+    if (child && child.type.displayName === _TabList.TABLIST_DISPLAY_NAME) {
+      return /*#__PURE__*/_react["default"].cloneElement(child, {
+        id: id,
+        activeIndex: getActiveIndex(),
+        moveTabFocus: moveTabFocus,
+        setActiveIndex: setActiveIndex
+      });
+    } else if (child && child.type.displayName === _TabPanels.TABPANELS_DISPLAY_NAME) {
+      return /*#__PURE__*/_react["default"].cloneElement(child, {
+        id: id,
+        activeIndex: getActiveIndex()
+      });
+    } else {
+      return child;
+    }
+  }));
+}
 
-      if (nextTab) {
-        nextTab.focus();
-      }
-    });
-    return _this;
-  }
-
-  var _proto = Tabs.prototype;
-
-  _proto.render = function render() {
-    var _this2 = this;
-
-    var _this$props = this.props,
-        activeIndex = _this$props.activeIndex,
-        children = _this$props.children,
-        defaultActiveIndex = _this$props.defaultActiveIndex,
-        onChange = _this$props.onChange,
-        restProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["activeIndex", "children", "defaultActiveIndex", "onChange"]);
-    return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
-      innerRef: this.setTabList
-    }, restProps), _react.Children.map(children, function (child, index) {
-      if (child && child.type.displayName === _TabList.TABLIST_DISPLAY_NAME) {
-        return /*#__PURE__*/_react["default"].cloneElement(child, {
-          id: _this2.id,
-          activeIndex: _this2.getActiveIndex(),
-          moveTabFocus: _this2.moveTabFocus,
-          setActiveIndex: _this2.setActiveIndex
-        });
-      } else if (child && child.type.displayName === _TabPanels.TABPANELS_DISPLAY_NAME) {
-        return /*#__PURE__*/_react["default"].cloneElement(child, {
-          id: _this2.id,
-          activeIndex: _this2.getActiveIndex()
-        });
-      } else {
-        return child;
-      }
-    }));
-  };
-
-  return Tabs;
-}(_react.Component);
-
-(0, _defineProperty2["default"])(Tabs, "Tab", _Tab["default"]);
-(0, _defineProperty2["default"])(Tabs, "TabList", _TabList["default"]);
-(0, _defineProperty2["default"])(Tabs, "TabPanel", _TabPanel["default"]);
-(0, _defineProperty2["default"])(Tabs, "TabPanels", _TabPanels["default"]);
-(0, _defineProperty2["default"])(Tabs, "defaultProps", {
-  activeIndex: null,
-  defaultActiveIndex: 0
-});
 var _default = Tabs;
 exports["default"] = _default;

package/dist/cjs/Tabs/index.js

@@ -7,5 +7,17 @@ exports["default"] = void 0;
 
 var _Tabs = _interopRequireDefault(require("./Tabs"));
 
+var _Tab = _interopRequireDefault(require("./Tab"));
+
+var _TabList = _interopRequireDefault(require("./TabList"));
+
+var _TabPanel = _interopRequireDefault(require("./TabPanel"));
+
+var _TabPanels = _interopRequireDefault(require("./TabPanels"));
+
+_Tabs["default"].Tab = _Tab["default"];
+_Tabs["default"].TabList = _TabList["default"];
+_Tabs["default"].TabPanel = _TabPanel["default"];
+_Tabs["default"].TabPanels = _TabPanels["default"];
 var _default = _Tabs["default"];
 exports["default"] = _default;

package/dist/cjs/ThemeProvider/ThemeProvider.js

@@ -47,7 +47,7 @@ var themeStorage = {
   }
 };
 exports.themeStorage = themeStorage;
-var themeInitializerScript = "\ntry {\n  var theme = window.localStorage.getItem('" + STORAGE_KEY + "')\n  if (theme) {\n    document.body.dataset.theme = theme\n  }\n} catch (e) {}\n";
+var themeInitializerScript = "\ntry {\n  var theme = window.localStorage.getItem('" + STORAGE_KEY + "')\n  if (theme) {\n    document.documentElement.dataset.theme = theme\n  }\n} catch (e) {}\n";
 exports.themeInitializerScript = themeInitializerScript;
 var emptyTheme = {};
 

package/dist/cjs/Tooltip/Tooltip.js

@@ -11,12 +11,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _mitt = _interopRequireDefault(require("mitt"));
@@ -25,6 +19,8 @@ var _Popover = _interopRequireDefault(require("../Popover"));
 
 var _utils = require("../utils");
 
+var _system = require("../system");
+
 var emitter = (0, _mitt["default"])();
 var globalTimeoutId = null;
 var instantDelay = false;
@@ -40,193 +36,173 @@ function clearGlobalTimeout() {
   clearTimeout(globalTimeoutId);
 }
 
-var Tooltip = /*#__PURE__*/function (_Component) {
-  (0, _inheritsLoose2["default"])(Tooltip, _Component);
-
-  function Tooltip() {
-    var _this;
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
-      isPopoverOpen: _this.props.defaultOpen
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "isPageInView", true);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "isFocused", false);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "isMouseDown", false);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "openTimeoutId", null);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "closeTimeoutId", null);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "cleanupPageViewChange", (0, _utils.pageViewChange)(function (inView) {
-      return setTimeout(function () {
-        return _this.isPageInView = inView;
-      });
-    }));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleCloseOpenTooltips", function (instance) {
-      if ((0, _assertThisInitialized2["default"])(_this) !== instance) {
-        _this.close();
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "createOpenTimeout", function () {
-      clearGlobalTimeout();
-
-      if (_this.openTimeoutId === null) {
-        clearTimeout(_this.closeTimeoutId);
-        _this.closeTimeoutId = null;
-
-        if (_this.state.isPopoverOpen === false) {
-          emitter.emit('CLOSE_OPEN_TOOLTIPS');
-          _this.openTimeoutId = setTimeout(function () {
-            return _this.open();
-          }, instantDelay ? 0 : _this.props.openDelay);
-        }
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "createCloseTimeout", function () {
-      startGlobalTimeout();
-
-      if (_this.closeTimeoutId === null) {
-        clearTimeout(_this.openTimeoutId);
-        _this.openTimeoutId = null;
-        _this.closeTimeoutId = setTimeout(function () {
-          _this.close();
-        }, _this.props.closeDelay);
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "open", function () {
-      clearTimeout(_this.closeTimeoutId);
-      _this.closeTimeoutId = null;
-
-      _this.setState({
-        isPopoverOpen: true
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "close", function () {
-      clearTimeout(_this.openTimeoutId);
-      _this.openTimeoutId = null;
-
-      _this.setState({
-        isPopoverOpen: false
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toggle", function () {
-      _this.setState(function (state) {
-        return {
-          isPopoverOpen: !state.isPopoverOpen
-        };
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleFocus", function () {
-      if (_this.isPageInView && !_this.isMouseDown) {
-        _this.open();
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseDown", function () {
-      _this.isMouseDown = true;
-
-      _this.close();
+function Tooltip(props, ref) {
+  var _useThemeProps = (0, _system.useThemeProps)('tooltip', props),
+      children = _useThemeProps.children,
+      _useThemeProps$openDe = _useThemeProps.openDelay,
+      openDelay = _useThemeProps$openDe === void 0 ? 500 : _useThemeProps$openDe,
+      _useThemeProps$closeD = _useThemeProps.closeDelay,
+      closeDelay = _useThemeProps$closeD === void 0 ? 300 : _useThemeProps$closeD,
+      _useThemeProps$defaul = _useThemeProps.defaultOpen,
+      defaultOpen = _useThemeProps$defaul === void 0 ? false : _useThemeProps$defaul,
+      _useThemeProps$keepIn = _useThemeProps.keepInView,
+      keepInView = _useThemeProps$keepIn === void 0 ? true : _useThemeProps$keepIn,
+      placement = _useThemeProps.placement,
+      popoverProps = _useThemeProps.popoverProps,
+      renderTo = _useThemeProps.renderTo,
+      title = _useThemeProps.title,
+      _useThemeProps$trigge = _useThemeProps.triggerOnFocus,
+      triggerOnFocus = _useThemeProps$trigge === void 0 ? true : _useThemeProps$trigge,
+      _useThemeProps$trigge2 = _useThemeProps.triggerOnHover,
+      triggerOnHover = _useThemeProps$trigge2 === void 0 ? true : _useThemeProps$trigge2,
+      childProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["children", "openDelay", "closeDelay", "defaultOpen", "keepInView", "placement", "popoverProps", "renderTo", "title", "triggerOnFocus", "triggerOnHover"]);
+
+  var isPageInView = true;
+  var isFocused = false;
+  var isMouseDown = false;
+  var openTimeoutId = null;
+  var closeTimeoutId = null; // prevents tooltips showing when focused and navigating back to a page after leaving
+
+  var cleanupPageViewChange = (0, _react.useCallback)((0, _utils.pageViewChange)(function (inView) {
+    return setTimeout(function () {
+      return isPageInView = inView;
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseUp", function () {
-      _this.isMouseDown = false;
-    });
-    return _this;
-  }
-
-  var _proto = Tooltip.prototype;
-
-  _proto.componentDidMount = function componentDidMount() {
-    emitter.on('CLOSE_OPEN_TOOLTIPS', this.handleCloseOpenTooltips);
+  }));
+
+  var _useState = (0, _react.useState)(defaultOpen),
+      isPopoverOpen = _useState[0],
+      setIsPopoverOpen = _useState[1];
+
+  (0, _react.useEffect)(function () {
+    emitter.on('CLOSE_OPEN_TOOLTIPS', close);
+    return function () {
+      emitter.off('CLOSE_OPEN_TOOLTIPS', close);
+      clearTimeout(openTimeoutId);
+      clearTimeout(closeTimeoutId);
+      cleanupPageViewChange();
+    };
+  }, []);
+
+  var open = function open() {
+    clearTimeout(closeTimeoutId);
+    closeTimeoutId = null;
+    setIsPopoverOpen(true);
   };
 
-  _proto.componentDidUpdate = function componentDidUpdate(lastProps) {
-    if (lastProps.triggerOnFocus !== this.props.triggerOnFocus && this.props.triggerOnFocus === false || lastProps.triggerOnHover !== this.props.triggerOnHover && this.triggerOnHover === false) {
-      this.close();
-    }
+  var close = function close() {
+    clearTimeout(openTimeoutId);
+    openTimeoutId = null;
+    setIsPopoverOpen(false);
   };
 
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    emitter.off('CLOSE_OPEN_TOOLTIPS', this.handleCloseOpenTooltips);
-    clearTimeout(this.openTimeoutId);
-    clearTimeout(this.closeTimeoutId);
-    this.cleanupPageViewChange();
+  var toggle = function toggle() {
+    setIsPopoverOpen(!isPopoverOpen);
   };
 
-  _proto.render = function render() {
-    var _this$props = this.props,
-        children = _this$props.children,
-        openDelay = _this$props.openDelay,
-        closeDelay = _this$props.closeDelay,
-        defaultOpen = _this$props.defaultOpen,
-        keepInView = _this$props.keepInView,
-        placement = _this$props.placement,
-        popoverProps = _this$props.popoverProps,
-        renderTo = _this$props.renderTo,
-        title = _this$props.title,
-        triggerOnFocus = _this$props.triggerOnFocus,
-        triggerOnHover = _this$props.triggerOnHover,
-        childProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["children", "openDelay", "closeDelay", "defaultOpen", "keepInView", "placement", "popoverProps", "renderTo", "title", "triggerOnFocus", "triggerOnHover"]);
-    var isPopoverOpen = this.state.isPopoverOpen;
-
-    var child = _react.Children.only(children);
-
-    var _child$props = child.props,
-        onFocus = _child$props.onFocus,
-        onBlur = _child$props.onBlur,
-        onMouseEnter = _child$props.onMouseEnter,
-        onMouseLeave = _child$props.onMouseLeave,
-        onMouseDown = _child$props.onMouseDown,
-        onMouseUp = _child$props.onMouseUp;
-
-    if (!title) {
-      return /*#__PURE__*/(0, _react.cloneElement)(child, childProps);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      open: open,
+      close: close,
+      toggle: toggle
+    };
+  });
+  (0, _react.useEffect)(function () {
+    if (triggerOnFocus === false) {
+      close();
     }
-
-    if (triggerOnFocus) {
-      childProps.onFocus = (0, _utils.composeEvents)(this.handleFocus, onFocus);
-      childProps.onBlur = (0, _utils.composeEvents)(this.close, onBlur);
-      childProps.onMouseDown = (0, _utils.composeEvents)(this.handleMouseDown, onMouseDown);
-      childProps.onMouseUp = (0, _utils.composeEvents)(this.handleMouseUp, onMouseUp);
+  }, [triggerOnFocus]);
+  (0, _react.useEffect)(function () {
+    if (triggerOnHover === false) {
+      close();
     }
-
-    if (triggerOnHover) {
-      childProps.onMouseEnter = (0, _utils.composeEvents)(this.createOpenTimeout, onMouseEnter);
-      childProps.onMouseLeave = (0, _utils.composeEvents)(this.createCloseTimeout, onMouseLeave);
+  }, [triggerOnHover]);
+  var createOpenTimeout = (0, _react.useCallback)(function () {
+    clearGlobalTimeout();
+
+    if (openTimeoutId === null) {
+      clearTimeout(closeTimeoutId);
+      closeTimeoutId = null;
+
+      if (isPopoverOpen === false) {
+        emitter.emit('CLOSE_OPEN_TOOLTIPS');
+        openTimeoutId = setTimeout(function () {
+          return open();
+        }, instantDelay ? 0 : openDelay);
+      }
+    }
+  });
+  var createCloseTimeout = (0, _react.useCallback)(function () {
+    startGlobalTimeout();
+
+    if (closeTimeoutId === null) {
+      clearTimeout(openTimeoutId);
+      openTimeoutId = null;
+      closeTimeoutId = setTimeout(function () {
+        close();
+      }, closeDelay);
+    }
+  });
+  var handleFocus = (0, _react.useCallback)(function () {
+    if (isPageInView && !isMouseDown) {
+      open();
     }
+  });
+  var handleMouseDown = (0, _react.useCallback)(function () {
+    isMouseDown = true;
+    close();
+  });
+  var handleMouseUp = (0, _react.useCallback)(function () {
+    isMouseDown = false;
+  });
+
+  var child = _react.Children.only(children);
+
+  var _child$props = child.props,
+      onFocus = _child$props.onFocus,
+      onBlur = _child$props.onBlur,
+      onMouseEnter = _child$props.onMouseEnter,
+      onMouseLeave = _child$props.onMouseLeave,
+      onMouseDown = _child$props.onMouseDown,
+      onMouseUp = _child$props.onMouseUp;
+
+  if (!title) {
+    return /*#__PURE__*/(0, _react.cloneElement)(child, childProps);
+  }
 
-    return /*#__PURE__*/_react["default"].createElement(_Popover["default"], (0, _extends2["default"])({
-      shouldFlip: true,
-      paddingHorizontal: 0.75,
-      paddingVertical: 0.25,
-      fontSize: 5,
-      textAlign: "center",
-      radius: 2,
-      backgroundColor: "grey-9",
-      color: "rgba(255,255,255,0.94)",
-      zIndex: 9999
-    }, popoverProps, {
-      anchorElement: /*#__PURE__*/(0, _react.cloneElement)(child, childProps),
-      onMouseEnter: this.createOpenTimeout,
-      onMouseLeave: this.createCloseTimeout,
-      keepInView: keepInView,
-      placement: placement,
-      renderTo: renderTo,
-      children: title,
-      open: isPopoverOpen
-    }));
-  };
+  if (triggerOnFocus) {
+    childProps.onFocus = (0, _utils.composeEvents)(handleFocus, onFocus);
+    childProps.onBlur = (0, _utils.composeEvents)(close, onBlur);
+    childProps.onMouseDown = (0, _utils.composeEvents)(handleMouseDown, onMouseDown);
+    childProps.onMouseUp = (0, _utils.composeEvents)(handleMouseUp, onMouseUp);
+  }
+
+  if (triggerOnHover) {
+    childProps.onMouseEnter = (0, _utils.composeEvents)(createOpenTimeout, onMouseEnter);
+    childProps.onMouseLeave = (0, _utils.composeEvents)(createCloseTimeout, onMouseLeave);
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_Popover["default"], (0, _extends2["default"])({
+    shouldFlip: true,
+    paddingHorizontal: 0.75,
+    paddingVertical: 0.25,
+    fontSize: 5,
+    textAlign: "center",
+    radius: 2,
+    backgroundColor: "grey-9",
+    color: "rgba(255,255,255,0.94)",
+    zIndex: 9999
+  }, popoverProps, {
+    anchorElement: /*#__PURE__*/(0, _react.cloneElement)(child, childProps),
+    onMouseEnter: createOpenTimeout,
+    onMouseLeave: createCloseTimeout,
+    keepInView: keepInView,
+    placement: placement,
+    renderTo: renderTo,
+    children: title,
+    open: isPopoverOpen
+  }));
+}
 
-  return Tooltip;
-}(_react.Component);
-
-(0, _defineProperty2["default"])(Tooltip, "defaultProps", {
-  openDelay: 500,
-  closeDelay: 300,
-  keepInView: true,
-  triggerOnFocus: true,
-  triggerOnHover: true,
-  defaultOpen: false
-});
+Tooltip = /*#__PURE__*/(0, _react.forwardRef)(Tooltip);
 var _default = Tooltip;
 exports["default"] = _default;