@cloudflare/component-tooltip 5.0.0 → 5.1.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # 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
 
 ### Major Changes

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() {
@@ -128,7 +130,6 @@ class Tooltip extends React.PureComponent {
       className: className,
       isCapture: isCapture,
       delayHide: delayHide ? delayHide : null,
-      delayShow: delayShow ? DELAY_SHOW_MILLIS : null,
       afterShow: afterShow,
       afterHide: afterHide,
       getContent: [() => message || getContent()],
@@ -160,8 +161,19 @@ class Tooltip extends React.PureComponent {
       onClick: e => {
         e.stopPropagation();
       },
-      onMouseOver: () => ReactTooltip.show(this.tooltipElement),
-      onMouseOut: () => ReactTooltip.hide(this.tooltipElement),
+      onMouseOver: () => {
+        if (delayShow) {
+          this.delayTimer = setTimeout(() => {
+            ReactTooltip.show(this.tooltipElement);
+          }, DELAY_SHOW_MILLIS);
+        } else {
+          ReactTooltip.show(this.tooltipElement);
+        }
+      },
+      onMouseOut: () => {
+        clearTimeout(this.delayTimer);
+        ReactTooltip.hide(this.tooltipElement);
+      },
       "aria-controls": id,
       "aria-label": ariaLabel,
       "aria-describedby": 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",
@@ -187,7 +189,6 @@ var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
         className: className,
         isCapture: isCapture,
         delayHide: delayHide ? delayHide : null,
-        delayShow: delayShow ? DELAY_SHOW_MILLIS : null,
         afterShow: afterShow,
         afterHide: afterHide,
         getContent: [function () {
@@ -226,10 +227,18 @@ var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
           e.stopPropagation();
         },
         onMouseOver: function onMouseOver() {
-          return _reactTooltip.default.show(_this3.tooltipElement);
+          if (delayShow) {
+            _this3.delayTimer = setTimeout(function () {
+              _reactTooltip.default.show(_this3.tooltipElement);
+            }, DELAY_SHOW_MILLIS);
+          } else {
+            _reactTooltip.default.show(_this3.tooltipElement);
+          }
         },
         onMouseOut: function onMouseOut() {
-          return _reactTooltip.default.hide(_this3.tooltipElement);
+          clearTimeout(_this3.delayTimer);
+
+          _reactTooltip.default.hide(_this3.tooltipElement);
         },
         "aria-controls": id,
         "aria-label": ariaLabel,

package/package.json

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