@cloudflare/component-tooltip 5.1.0 → 5.1.1

package/CHANGELOG.md

@@ -1,10 +1,17 @@
 # Change Log
 
+## 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

@@ -68,6 +68,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 +96,7 @@ class Tooltip extends React.PureComponent {
     document.removeEventListener('keydown', this.escFunction, {
       capture: true
     });
+    clearTimeout(this.delayTimer);
   }
 
   render() {
@@ -119,7 +121,6 @@ class Tooltip extends React.PureComponent {
       componentRef
     } = 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, {
       id: id,
       disable: disable,
@@ -162,7 +163,7 @@ class Tooltip extends React.PureComponent {
       },
       onMouseOver: () => {
         if (delayShow) {
-          timer = setTimeout(() => {
+          this.delayTimer = setTimeout(() => {
             ReactTooltip.show(this.tooltipElement);
           }, DELAY_SHOW_MILLIS);
         } else {
@@ -170,7 +171,7 @@ class Tooltip extends React.PureComponent {
         }
       },
       onMouseOut: () => {
-        clearTimeout(timer);
+        clearTimeout(this.delayTimer);
         ReactTooltip.hide(this.tooltipElement);
       },
       "aria-controls": id,

package/lib/Tooltip.js

@@ -113,6 +113,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 +152,7 @@ var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
       document.removeEventListener('keydown', this.escFunction, {
         capture: true
       });
+      clearTimeout(this.delayTimer);
     }
   }, {
     key: "render",
@@ -178,7 +180,6 @@ var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
           Component = _this$props$Component === void 0 ? _elements.Button : _this$props$Component,
           componentRef = _this$props.componentRef;
       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, {
         id: id,
         disable: disable,
@@ -227,7 +228,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 +236,7 @@ var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
           }
         },
         onMouseOut: function onMouseOut() {
-          clearTimeout(timer);
+          clearTimeout(_this3.delayTimer);
 
           _reactTooltip.default.hide(_this3.tooltipElement);
         },

package/package.json

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