@cloudflare/component-tooltip 5.1.0 → 5.1.2

package/CHANGELOG.md

@@ -1,10 +1,23 @@
 # Change Log
 
+## 5.1.2
+
+### Patch Changes
+
+- 028f888926: Updated Tooltip to support portaling to fix stacking context bug
+
+## 5.1.1
+
+### Patch Changes
+
+- db8427aad9: This changeset is in attempts to fix an issue with Tooltip KV registry where 5.1.0 didn't get the code it should have
+
 ## 5.1.0
 
 ### Minor Changes
 
 - 0a4b7280c9: Fix bug where multiple tooltips on one page with delay do not dismiss correctly
+- efc3f4a27d: Fix Tooltip to clear internal timers on unmount
 
 ## 5.0.0
 

package/es/Tooltip.js

@@ -1,6 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 
 import React from 'react';
+import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import { Button } from '@cloudflare/elements';
 import { createComponent } from '@cloudflare/style-container';
@@ -68,6 +69,7 @@ class Tooltip extends React.PureComponent {
     super(props);
     this.id = uniqueId('cf_component_tooltip_');
     this.escFunction = this.escFunction.bind(this);
+    this.delayTimer = null;
   }
 
   escFunction(event) {
@@ -95,6 +97,7 @@ class Tooltip extends React.PureComponent {
     document.removeEventListener('keydown', this.escFunction, {
       capture: true
     });
+    clearTimeout(this.delayTimer);
   }
 
   render() {
@@ -116,11 +119,26 @@ class Tooltip extends React.PureComponent {
       display,
       ariaLabel,
       Component = Button,
-      componentRef
+      componentRef,
+      portal = false
     } = this.props;
     var id = this.props.id ? this.props.id : this.id;
-    var timer;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReactTooltip, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, portal ? /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(ReactTooltip, {
+      id: id,
+      disable: disable,
+      place: place,
+      type: type,
+      effect: anchored ? 'solid' : 'float',
+      className: className,
+      isCapture: isCapture,
+      delayHide: delayHide ? delayHide : null,
+      afterShow: afterShow,
+      afterHide: afterHide,
+      getContent: [() => message || getContent()],
+      onClick: this.props.onClick,
+      event: "click",
+      role: "status"
+    }), document.body) : /*#__PURE__*/React.createElement(ReactTooltip, {
       id: id,
       disable: disable,
       place: place,
@@ -162,7 +180,7 @@ class Tooltip extends React.PureComponent {
       },
       onMouseOver: () => {
         if (delayShow) {
-          timer = setTimeout(() => {
+          this.delayTimer = setTimeout(() => {
             ReactTooltip.show(this.tooltipElement);
           }, DELAY_SHOW_MILLIS);
         } else {
@@ -170,7 +188,7 @@ class Tooltip extends React.PureComponent {
         }
       },
       onMouseOut: () => {
-        clearTimeout(timer);
+        clearTimeout(this.delayTimer);
         ReactTooltip.hide(this.tooltipElement);
       },
       "aria-controls": id,
@@ -204,7 +222,8 @@ Tooltip.propTypes = {
   Component: PropTypes.func,
   // Allow the Component element to be referenced from a parent. innerRef
   // is swallowed by createComponent.
-  componentRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  componentRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  portal: PropTypes.bool
 };
 Tooltip.defaultProps = {
   disable: false,
@@ -213,7 +232,8 @@ Tooltip.defaultProps = {
   anchored: true,
   isCapture: true,
   forceRebuild: false,
-  delayShow: true
+  delayShow: true,
+  portal: false
 };
 Tooltip.displayName = 'Tooltip';
 export default createComponent(tooltipStyles, Tooltip);

package/index.d.ts

@@ -21,6 +21,7 @@ interface TooltipProps extends React.CSSProperties, TfelaMProps {
   buttonProps?: React.ComponentProps<typeof Button>;
   Component?: React.ComponentType<any>;
   componentRef?: React.Ref<HTMLElement>;
+  portal?: boolean;
 }
 
 export const Tooltip: React.FC<TooltipProps>;

package/lib/Tooltip.js

@@ -9,6 +9,8 @@ exports.tooltipStyles = exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _reactDom = require("react-dom");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _elements = require("@cloudflare/elements");
@@ -113,6 +115,7 @@ var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
     _this = _super.call(this, props);
     _this.id = (0, _lodash.default)('cf_component_tooltip_');
     _this.escFunction = _this.escFunction.bind(_assertThisInitialized(_this));
+    _this.delayTimer = null;
     return _this;
   }
 
@@ -151,6 +154,7 @@ var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
       document.removeEventListener('keydown', this.escFunction, {
         capture: true
       });
+      clearTimeout(this.delayTimer);
     }
   }, {
     key: "render",
@@ -176,10 +180,28 @@ var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
           ariaLabel = _this$props.ariaLabel,
           _this$props$Component = _this$props.Component,
           Component = _this$props$Component === void 0 ? _elements.Button : _this$props$Component,
-          componentRef = _this$props.componentRef;
+          componentRef = _this$props.componentRef,
+          _this$props$portal = _this$props.portal,
+          portal = _this$props$portal === void 0 ? false : _this$props$portal;
       var id = this.props.id ? this.props.id : this.id;
-      var timer;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactTooltip.default, {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, portal ? /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement(_reactTooltip.default, {
+        id: id,
+        disable: disable,
+        place: place,
+        type: type,
+        effect: anchored ? 'solid' : 'float',
+        className: className,
+        isCapture: isCapture,
+        delayHide: delayHide ? delayHide : null,
+        afterShow: afterShow,
+        afterHide: afterHide,
+        getContent: [function () {
+          return message || getContent();
+        }],
+        onClick: this.props.onClick,
+        event: "click",
+        role: "status"
+      }), document.body) : /*#__PURE__*/_react.default.createElement(_reactTooltip.default, {
         id: id,
         disable: disable,
         place: place,
@@ -227,7 +249,7 @@ var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
         },
         onMouseOver: function onMouseOver() {
           if (delayShow) {
-            timer = setTimeout(function () {
+            _this3.delayTimer = setTimeout(function () {
               _reactTooltip.default.show(_this3.tooltipElement);
             }, DELAY_SHOW_MILLIS);
           } else {
@@ -235,7 +257,7 @@ var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
           }
         },
         onMouseOut: function onMouseOut() {
-          clearTimeout(timer);
+          clearTimeout(_this3.delayTimer);
 
           _reactTooltip.default.hide(_this3.tooltipElement);
         },
@@ -272,7 +294,8 @@ Tooltip.propTypes = {
   Component: _propTypes.default.func,
   // Allow the Component element to be referenced from a parent. innerRef
   // is swallowed by createComponent.
-  componentRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  componentRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  portal: _propTypes.default.bool
 };
 Tooltip.defaultProps = {
   disable: false,
@@ -281,7 +304,8 @@ Tooltip.defaultProps = {
   anchored: true,
   isCapture: true,
   forceRebuild: false,
-  delayShow: true
+  delayShow: true,
+  portal: false
 };
 Tooltip.displayName = 'Tooltip';
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudflare/component-tooltip",
   "description": "Cloudflare Tooltip Component",
-  "version": "5.1.0",
+  "version": "5.1.2",
   "main": "lib/index.js",
   "module": "es/index.js",
   "author": "James Kyle <jkyle@cloudflare.com>",