react-popper-tooltip - npm Package Compare versions

Comparing version 4.0.1 to 4.1.0

dist/cjs/react-popper-tooltip.js

@@ -65,4 +65,44 @@ 'use strict';
   };
+} // pageX cannot be supplied in the tests, so we fallback to clientX
+// @see https://github.com/testing-library/dom-testing-library/issues/144
+
+var mouseOutsideRect = function mouseOutsideRect(_ref2, _ref3) {
+  var clientX = _ref2.clientX,
+      clientY = _ref2.clientY,
+      pageX = _ref2.pageX,
+      pageY = _ref2.pageY;
+  var bottom = _ref3.bottom,
+      left = _ref3.left,
+      right = _ref3.right,
+      top = _ref3.top;
+  return (// DOMRect contains fractional pixel values but MouseEvent reports integers,
+    // so we round DOMRect boundaries to make DOMRect slightly bigger
+    (pageX || clientX) < Math.floor(left) || (pageX || clientX) > Math.ceil(right) || (pageY || clientY) < Math.floor(top) || (pageY || clientY) > Math.ceil(bottom)
+  );
+};
+/**
+ * Checks if mouseevent is triggered outside triggerRef and tooltipRef.
+ * Counts with potential offset between them.
+ * @param {MouseEvent} mouseEvent
+ * @param {HTMLElement} triggerRef
+ * @param {HTMLElement} tooltipRef - provide only when prop `interactive` is on
+ */
+
+
+function isMouseOutside(mouseEvent, triggerRef, tooltipRef) {
+  var triggerRect = triggerRef.getBoundingClientRect();
+  if (!tooltipRef) return mouseOutsideRect(mouseEvent, triggerRect);
+  var tooltipRect = tooltipRef.getBoundingClientRect(); // triggerRect extended to the tooltipRect boundary, thus will contain cursor
+  // moving from triggerRect to tooltipRect over some non zero offset.
+
+  var triggerRectExtendedToTooltip = {
+    bottom: Math.max(triggerRect.bottom, tooltipRect.top),
+    left: Math.min(triggerRect.left, tooltipRect.right),
+    right: Math.max(triggerRect.right, tooltipRect.left),
+    top: Math.min(triggerRect.top, tooltipRect.bottom)
+  };
+  return mouseOutsideRect(mouseEvent, triggerRectExtendedToTooltip) && mouseOutsideRect(mouseEvent, tooltipRect);
 }
 
+var isArray = Array.isArray;
 var virtualElement = {
@@ -84,3 +124,3 @@ getBoundingClientRect: generateBoundingClientRect()
   },
-  offset: [0, 7],
+  offset: [0, 6],
   trigger: 'hover'
@@ -114,3 +154,4 @@ };
     }];
-  }, [finalConfig.offset]);
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  isArray(finalConfig.offset) ? finalConfig.offset : []);
 
@@ -153,4 +194,5 @@ var finalPopperOptions = _extends({}, popperOptions, {
   var isTriggeredBy = React.useCallback(function (trigger) {
-    return Array.isArray(finalConfig.trigger) ? finalConfig.trigger.includes(trigger) : finalConfig.trigger === trigger;
-  }, [finalConfig.trigger]);
+    return isArray(finalConfig.trigger) ? finalConfig.trigger.includes(trigger) : finalConfig.trigger === trigger;
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  isArray(finalConfig.trigger) ? finalConfig.trigger : [finalConfig.trigger]);
   var hideTooltip = React.useCallback(function () {
@@ -238,10 +280,37 @@ clearTimeout(timer.current);
     triggerRef.addEventListener('mouseenter', showTooltip);
-    triggerRef.addEventListener('mouseleave', hideTooltip);
     return function () {
       triggerRef.removeEventListener('mouseenter', showTooltip);
-      triggerRef.removeEventListener('mouseleave', hideTooltip);
     };
-  }, [triggerRef, isTriggeredBy, showTooltip, hideTooltip]); // Trigger: hover on tooltip, keep it open if hovered
+  }, [triggerRef, isTriggeredBy, showTooltip, hideTooltip]); // Listen for mouse exiting the hover area &&
+  // handle the followCursor
 
   React.useEffect(function () {
+    if (!visible || triggerRef == null || !isTriggeredBy('hover') && !finalConfig.followCursor) {
+      return;
+    }
+
+    var lastMouseOutside = false;
+
+    var handleMouseMove = function handleMouseMove(event) {
+      var mouseOutside = isMouseOutside(event, triggerRef, !finalConfig.followCursor && getLatest().finalConfig.interactive && tooltipRef);
+
+      if (mouseOutside && lastMouseOutside !== mouseOutside) {
+        hideTooltip();
+      }
+
+      if (!mouseOutside && finalConfig.followCursor) {
+        virtualElement.getBoundingClientRect = generateBoundingClientRect(event.clientX, event.clientY);
+        update == null ? void 0 : update();
+      }
+
+      lastMouseOutside = mouseOutside;
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+    return function () {
+      window.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, [finalConfig.followCursor, getLatest, hideTooltip, isTriggeredBy, tooltipRef, triggerRef, update, visible]); // Trigger: hover on tooltip, keep it open if hovered
+
+  React.useEffect(function () {
     if (tooltipRef == null || !getLatest().finalConfig.interactive) return;
@@ -259,21 +328,5 @@ tooltipRef.addEventListener('mouseenter', showTooltip);
     if (finalConfig.closeOnTriggerHidden && isReferenceHidden) hideTooltip();
-  }, [finalConfig.closeOnTriggerHidden, hideTooltip, isReferenceHidden]); // Handle follow cursor
+  }, [finalConfig.closeOnTriggerHidden, hideTooltip, isReferenceHidden]); // Handle tooltip DOM mutation changes (aka mutation observer)
 
   React.useEffect(function () {
-    if (!finalConfig.followCursor || triggerRef == null) return;
-
-    function setMousePosition(_ref) {
-      var clientX = _ref.clientX,
-          clientY = _ref.clientY;
-      virtualElement.getBoundingClientRect = generateBoundingClientRect(clientX, clientY);
-      update == null ? void 0 : update();
-    }
-
-    triggerRef.addEventListener('mousemove', setMousePosition);
-    return function () {
-      return triggerRef.removeEventListener('mousemove', setMousePosition);
-    };
-  }, [finalConfig.followCursor, triggerRef, update]); // Handle tooltip DOM mutation changes (aka mutation observer)
-
-  React.useEffect(function () {
     if (tooltipRef == null || update == null || finalConfig.mutationObserverOptions == null) return;
@@ -293,5 +346,3 @@ var observer = new MutationObserver(update);
     return _extends({}, args, {
-      style: _extends({}, args.style, styles.popper, finalConfig.followCursor && {
-        pointerEvents: 'none'
-      })
+      style: _extends({}, args.style, styles.popper)
     }, attributes.popper);
@@ -298,0 +349,0 @@ }; // Arrow props getter

dist/esm/react-popper-tooltip.js

@@ -61,4 +61,44 @@ import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';
   };
+} // pageX cannot be supplied in the tests, so we fallback to clientX
+// @see https://github.com/testing-library/dom-testing-library/issues/144
+
+var mouseOutsideRect = function mouseOutsideRect(_ref2, _ref3) {
+  var clientX = _ref2.clientX,
+      clientY = _ref2.clientY,
+      pageX = _ref2.pageX,
+      pageY = _ref2.pageY;
+  var bottom = _ref3.bottom,
+      left = _ref3.left,
+      right = _ref3.right,
+      top = _ref3.top;
+  return (// DOMRect contains fractional pixel values but MouseEvent reports integers,
+    // so we round DOMRect boundaries to make DOMRect slightly bigger
+    (pageX || clientX) < Math.floor(left) || (pageX || clientX) > Math.ceil(right) || (pageY || clientY) < Math.floor(top) || (pageY || clientY) > Math.ceil(bottom)
+  );
+};
+/**
+ * Checks if mouseevent is triggered outside triggerRef and tooltipRef.
+ * Counts with potential offset between them.
+ * @param {MouseEvent} mouseEvent
+ * @param {HTMLElement} triggerRef
+ * @param {HTMLElement} tooltipRef - provide only when prop `interactive` is on
+ */
+
+
+function isMouseOutside(mouseEvent, triggerRef, tooltipRef) {
+  var triggerRect = triggerRef.getBoundingClientRect();
+  if (!tooltipRef) return mouseOutsideRect(mouseEvent, triggerRect);
+  var tooltipRect = tooltipRef.getBoundingClientRect(); // triggerRect extended to the tooltipRect boundary, thus will contain cursor
+  // moving from triggerRect to tooltipRect over some non zero offset.
+
+  var triggerRectExtendedToTooltip = {
+    bottom: Math.max(triggerRect.bottom, tooltipRect.top),
+    left: Math.min(triggerRect.left, tooltipRect.right),
+    right: Math.max(triggerRect.right, tooltipRect.left),
+    top: Math.min(triggerRect.top, tooltipRect.bottom)
+  };
+  return mouseOutsideRect(mouseEvent, triggerRectExtendedToTooltip) && mouseOutsideRect(mouseEvent, tooltipRect);
 }
 
+var isArray = Array.isArray;
 var virtualElement = {
@@ -80,3 +120,3 @@ getBoundingClientRect: generateBoundingClientRect()
   },
-  offset: [0, 7],
+  offset: [0, 6],
   trigger: 'hover'
@@ -110,3 +150,4 @@ };
     }];
-  }, [finalConfig.offset]);
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  isArray(finalConfig.offset) ? finalConfig.offset : []);
 
@@ -149,4 +190,5 @@ var finalPopperOptions = _extends({}, popperOptions, {
   var isTriggeredBy = useCallback(function (trigger) {
-    return Array.isArray(finalConfig.trigger) ? finalConfig.trigger.includes(trigger) : finalConfig.trigger === trigger;
-  }, [finalConfig.trigger]);
+    return isArray(finalConfig.trigger) ? finalConfig.trigger.includes(trigger) : finalConfig.trigger === trigger;
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  isArray(finalConfig.trigger) ? finalConfig.trigger : [finalConfig.trigger]);
   var hideTooltip = useCallback(function () {
@@ -234,10 +276,37 @@ clearTimeout(timer.current);
     triggerRef.addEventListener('mouseenter', showTooltip);
-    triggerRef.addEventListener('mouseleave', hideTooltip);
     return function () {
       triggerRef.removeEventListener('mouseenter', showTooltip);
-      triggerRef.removeEventListener('mouseleave', hideTooltip);
     };
-  }, [triggerRef, isTriggeredBy, showTooltip, hideTooltip]); // Trigger: hover on tooltip, keep it open if hovered
+  }, [triggerRef, isTriggeredBy, showTooltip, hideTooltip]); // Listen for mouse exiting the hover area &&
+  // handle the followCursor
 
   useEffect(function () {
+    if (!visible || triggerRef == null || !isTriggeredBy('hover') && !finalConfig.followCursor) {
+      return;
+    }
+
+    var lastMouseOutside = false;
+
+    var handleMouseMove = function handleMouseMove(event) {
+      var mouseOutside = isMouseOutside(event, triggerRef, !finalConfig.followCursor && getLatest().finalConfig.interactive && tooltipRef);
+
+      if (mouseOutside && lastMouseOutside !== mouseOutside) {
+        hideTooltip();
+      }
+
+      if (!mouseOutside && finalConfig.followCursor) {
+        virtualElement.getBoundingClientRect = generateBoundingClientRect(event.clientX, event.clientY);
+        update == null ? void 0 : update();
+      }
+
+      lastMouseOutside = mouseOutside;
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+    return function () {
+      window.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, [finalConfig.followCursor, getLatest, hideTooltip, isTriggeredBy, tooltipRef, triggerRef, update, visible]); // Trigger: hover on tooltip, keep it open if hovered
+
+  useEffect(function () {
     if (tooltipRef == null || !getLatest().finalConfig.interactive) return;
@@ -255,21 +324,5 @@ tooltipRef.addEventListener('mouseenter', showTooltip);
     if (finalConfig.closeOnTriggerHidden && isReferenceHidden) hideTooltip();
-  }, [finalConfig.closeOnTriggerHidden, hideTooltip, isReferenceHidden]); // Handle follow cursor
+  }, [finalConfig.closeOnTriggerHidden, hideTooltip, isReferenceHidden]); // Handle tooltip DOM mutation changes (aka mutation observer)
 
   useEffect(function () {
-    if (!finalConfig.followCursor || triggerRef == null) return;
-
-    function setMousePosition(_ref) {
-      var clientX = _ref.clientX,
-          clientY = _ref.clientY;
-      virtualElement.getBoundingClientRect = generateBoundingClientRect(clientX, clientY);
-      update == null ? void 0 : update();
-    }
-
-    triggerRef.addEventListener('mousemove', setMousePosition);
-    return function () {
-      return triggerRef.removeEventListener('mousemove', setMousePosition);
-    };
-  }, [finalConfig.followCursor, triggerRef, update]); // Handle tooltip DOM mutation changes (aka mutation observer)
-
-  useEffect(function () {
     if (tooltipRef == null || update == null || finalConfig.mutationObserverOptions == null) return;
@@ -289,5 +342,3 @@ var observer = new MutationObserver(update);
     return _extends({}, args, {
-      style: _extends({}, args.style, styles.popper, finalConfig.followCursor && {
-        pointerEvents: 'none'
-      })
+      style: _extends({}, args.style, styles.popper)
     }, attributes.popper);
@@ -294,0 +345,0 @@ }; // Arrow props getter

dist/types.d.ts

@@ -66,3 +66,3 @@ import * as React from 'react';
      * Shorthand for popper.js offset modifier, see https://popper.js.org/docs/v2/modifiers/offset/
-     * @default [0, 7]
+     * @default [0, 6]
      */
@@ -69,0 +69,0 @@ offset?: [number, number];

dist/utils.d.ts

@@ -15,1 +15,9 @@ export declare function useGetLatest<T>(val: T): () => T;
 };
+/**
+ * Checks if mouseevent is triggered outside triggerRef and tooltipRef.
+ * Counts with potential offset between them.
+ * @param {MouseEvent} mouseEvent
+ * @param {HTMLElement} triggerRef
+ * @param {HTMLElement} tooltipRef - provide only when prop `interactive` is on
+ */
+export declare function isMouseOutside(mouseEvent: MouseEvent, triggerRef: HTMLElement, tooltipRef?: HTMLElement | false | null): boolean;

package.json

 {
   "name": "react-popper-tooltip",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "description": "React tooltip library built around react-popper",
@@ -50,3 +50,3 @@ "author": "Mohsin Ul Haq <[e-mail]>",
     "hooks": {
-      "pre-commit": "yarn typecheck && yarn build && yarn test && lint-staged"
+      "pre-commit": "yarn typecheck && yarn build && yarn test && lint-staged && git add .size-snapshot.json"
     }
@@ -53,0 +53,0 @@ },

README.md

@@ -167,3 +167,3 @@ # react-popper-tooltip
 
-- `offset: [number, number]`, defaults to `[0, 7]`
+- `offset: [number, number]`, defaults to `[0, 6]`
 
@@ -170,0 +170,0 @@ This is a shorthand for `popperOptions.modifiers` offset modifier option. The default value means the tooltip will be

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

571119

decreased by-44.59%

Lines of code

3277

decreased by-41.68%

No dependency changes