bnstooltips 1.5.0 → 1.5.6

package/build/ItemTooltipWrapper/ItemTooltipWrapper.types.d.ts

@@ -1,14 +1,12 @@
 import { BnsItemDto } from "../itemapiclient";
 import { ItemDownloadClient } from "../Utilities/ItemDownloadClient";
-import { Placement } from "tippy.js";
 import { ServerRegion } from "..";
-export interface ItemTooltipWrapperProps {
+import { ITooltipWrapper } from "../Utilities/Models";
+export interface ItemTooltipWrapperProps extends ITooltipWrapper {
     data: BnsItemDto;
     region: ServerRegion;
     offline?: boolean;
     client?: ItemDownloadClient;
-    interactive?: boolean;
-    placement?: Placement;
     jobstyleOverride?: string;
     debug?: boolean;
 }

package/build/SkillTooltipWrapper/SkillTooltipWrapper.types.d.ts

@@ -1,7 +1,5 @@
 import { Skill } from "../Utilities/ISkill";
-import { Placement } from "tippy.js";
-export interface SkillTooltipWrapperProps {
+import { ITooltipWrapper } from "../Utilities/Models";
+export interface SkillTooltipWrapperProps extends ITooltipWrapper {
     data: Skill;
-    interactive?: boolean;
-    placement?: Placement;
 }

package/build/Utilities/Models.d.ts

@@ -1,3 +1,4 @@
+import { Placement } from "tippy.js";
 export interface PatchesList {
     patches: {
         [key: string]: PatchesListPatch;
@@ -18,3 +19,10 @@ export declare enum ServerRegion {
     EUNA = "EUNA",
     Korea = "Korea"
 }
+export interface ITooltipWrapper {
+    followCursor?: boolean;
+    interactive?: boolean;
+    placement?: Placement;
+    trigger?: string;
+    showArrow?: boolean;
+}

package/build/index.es.js

@@ -4920,6 +4920,184 @@ Object.assign({}, applyStyles$1, {
   }
 });
 
+var mouseCoords = {
+  clientX: 0,
+  clientY: 0
+};
+var activeInstances = [];
+
+function storeMouseCoords(_ref) {
+  var clientX = _ref.clientX,
+      clientY = _ref.clientY;
+  mouseCoords = {
+    clientX: clientX,
+    clientY: clientY
+  };
+}
+
+function addMouseCoordsListener(doc) {
+  doc.addEventListener('mousemove', storeMouseCoords);
+}
+
+function removeMouseCoordsListener(doc) {
+  doc.removeEventListener('mousemove', storeMouseCoords);
+}
+
+var followCursor = {
+  name: 'followCursor',
+  defaultValue: false,
+  fn: function fn(instance) {
+    var reference = instance.reference;
+    var doc = getOwnerDocument(instance.props.triggerTarget || reference);
+    var isInternalUpdate = false;
+    var wasFocusEvent = false;
+    var isUnmounted = true;
+    var prevProps = instance.props;
+
+    function getIsInitialBehavior() {
+      return instance.props.followCursor === 'initial' && instance.state.isVisible;
+    }
+
+    function addListener() {
+      doc.addEventListener('mousemove', onMouseMove);
+    }
+
+    function removeListener() {
+      doc.removeEventListener('mousemove', onMouseMove);
+    }
+
+    function unsetGetReferenceClientRect() {
+      isInternalUpdate = true;
+      instance.setProps({
+        getReferenceClientRect: null
+      });
+      isInternalUpdate = false;
+    }
+
+    function onMouseMove(event) {
+      // If the instance is interactive, avoid updating the position unless it's
+      // over the reference element
+      var isCursorOverReference = event.target ? reference.contains(event.target) : true;
+      var followCursor = instance.props.followCursor;
+      var clientX = event.clientX,
+          clientY = event.clientY;
+      var rect = reference.getBoundingClientRect();
+      var relativeX = clientX - rect.left;
+      var relativeY = clientY - rect.top;
+
+      if (isCursorOverReference || !instance.props.interactive) {
+        instance.setProps({
+          // @ts-ignore - unneeded DOMRect properties
+          getReferenceClientRect: function getReferenceClientRect() {
+            var rect = reference.getBoundingClientRect();
+            var x = clientX;
+            var y = clientY;
+
+            if (followCursor === 'initial') {
+              x = rect.left + relativeX;
+              y = rect.top + relativeY;
+            }
+
+            var top = followCursor === 'horizontal' ? rect.top : y;
+            var right = followCursor === 'vertical' ? rect.right : x;
+            var bottom = followCursor === 'horizontal' ? rect.bottom : y;
+            var left = followCursor === 'vertical' ? rect.left : x;
+            return {
+              width: right - left,
+              height: bottom - top,
+              top: top,
+              right: right,
+              bottom: bottom,
+              left: left
+            };
+          }
+        });
+      }
+    }
+
+    function create() {
+      if (instance.props.followCursor) {
+        activeInstances.push({
+          instance: instance,
+          doc: doc
+        });
+        addMouseCoordsListener(doc);
+      }
+    }
+
+    function destroy() {
+      activeInstances = activeInstances.filter(function (data) {
+        return data.instance !== instance;
+      });
+
+      if (activeInstances.filter(function (data) {
+        return data.doc === doc;
+      }).length === 0) {
+        removeMouseCoordsListener(doc);
+      }
+    }
+
+    return {
+      onCreate: create,
+      onDestroy: destroy,
+      onBeforeUpdate: function onBeforeUpdate() {
+        prevProps = instance.props;
+      },
+      onAfterUpdate: function onAfterUpdate(_, _ref2) {
+        var followCursor = _ref2.followCursor;
+
+        if (isInternalUpdate) {
+          return;
+        }
+
+        if (followCursor !== undefined && prevProps.followCursor !== followCursor) {
+          destroy();
+
+          if (followCursor) {
+            create();
+
+            if (instance.state.isMounted && !wasFocusEvent && !getIsInitialBehavior()) {
+              addListener();
+            }
+          } else {
+            removeListener();
+            unsetGetReferenceClientRect();
+          }
+        }
+      },
+      onMount: function onMount() {
+        if (instance.props.followCursor && !wasFocusEvent) {
+          if (isUnmounted) {
+            onMouseMove(mouseCoords);
+            isUnmounted = false;
+          }
+
+          if (!getIsInitialBehavior()) {
+            addListener();
+          }
+        }
+      },
+      onTrigger: function onTrigger(_, event) {
+        if (isMouseEvent(event)) {
+          mouseCoords = {
+            clientX: event.clientX,
+            clientY: event.clientY
+          };
+        }
+
+        wasFocusEvent = event.type === 'focus';
+      },
+      onHidden: function onHidden() {
+        if (instance.props.followCursor) {
+          unsetGetReferenceClientRect();
+          removeListener();
+          isUnmounted = true;
+        }
+      }
+    };
+  }
+};
+
 tippy.setDefaultProps({
   render: render
 });
@@ -5312,9 +5490,9 @@ var css_248z$3 = ".tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[
 styleInject(css_248z$3);
 
 var ItemTooltipWrapper = function (_a) {
-    var data = _a.data, region = _a.region, children = _a.children, client = _a.client, _b = _a.offline, offline = _b === void 0 ? false : _b, _c = _a.interactive, interactive = _c === void 0 ? true : _c, _d = _a.placement, placement = _d === void 0 ? "right" : _d, _e = _a.debug, debug = _e === void 0 ? false : _e, jobstyleOverride = _a.jobstyleOverride;
+    var data = _a.data, region = _a.region, children = _a.children, client = _a.client, _b = _a.offline, offline = _b === void 0 ? false : _b, _c = _a.interactive, interactive = _c === void 0 ? true : _c, _d = _a.placement, placement = _d === void 0 ? "right" : _d, _e = _a.debug, debug = _e === void 0 ? false : _e, jobstyleOverride = _a.jobstyleOverride, _f = _a.followCursor, followCursor$1 = _f === void 0 ? false : _f, _g = _a.trigger, trigger = _g === void 0 ? "mouseenter focus" : _g, _h = _a.showArrow, showArrow = _h === void 0 ? true : _h;
     var spanRef = useRef(null);
-    var _f = useState(null), childRef = _f[0], setChildRef = _f[1];
+    var _j = useState(null), childRef = _j[0], setChildRef = _j[1];
     /**
      * Mount the temporary span element.
      * retrieve and store the target element's reference.
@@ -5325,10 +5503,10 @@ var ItemTooltipWrapper = function (_a) {
         }
         return function () { return setChildRef(null); };
     }, []);
-    var _g = useState(true), isOffline = _g[0], setIsOffline = _g[1];
+    var _k = useState(true), isOffline = _k[0], setIsOffline = _k[1];
     return (React.createElement(React.Fragment, null,
         children,
-        childRef ? (React.createElement(Tippy, { appendTo: document.body, onMount: function () { return setIsOffline(offline); }, placement: placement, animation: "fade", interactive: interactive, content: React.createElement(ItemTooltip, { region: region, jobstyleOverride: jobstyleOverride, data: data, offline: isOffline, client: client, debug: debug }), theme: "grade" + data.grade, reference: childRef })) : (React.createElement("span", { ref: spanRef, style: { display: "none" } }))));
+        childRef ? (React.createElement(Tippy, { arrow: showArrow, trigger: trigger, plugins: [followCursor], followCursor: followCursor$1 && !interactive, appendTo: document.body, onMount: function () { return setIsOffline(offline); }, placement: placement, animation: "fade", interactive: interactive, content: React.createElement(ItemTooltip, { region: region, jobstyleOverride: jobstyleOverride, data: data, offline: isOffline, client: client, debug: debug }), theme: "grade" + data.grade, reference: childRef })) : (React.createElement("span", { ref: spanRef, style: { display: "none" } }))));
 };
 
 function ItemIconNameDiv(_a) {
@@ -6070,9 +6248,9 @@ var css_248z = ".tippy-box {\n  max-width: none !important;\n  background-color:
 styleInject(css_248z);
 
 var SkillTooltipWrapper = function (_a) {
-    var data = _a.data, children = _a.children, _b = _a.interactive, interactive = _b === void 0 ? false : _b, _c = _a.placement, placement = _c === void 0 ? "right" : _c;
+    var data = _a.data, children = _a.children, _b = _a.interactive, interactive = _b === void 0 ? false : _b, _c = _a.placement, placement = _c === void 0 ? "right" : _c, _d = _a.followCursor, followCursor$1 = _d === void 0 ? false : _d, _e = _a.trigger, trigger = _e === void 0 ? "mouseenter focus" : _e, _f = _a.showArrow, showArrow = _f === void 0 ? true : _f;
     var spanRef = useRef(null);
-    var _d = useState(null), childRef = _d[0], setChildRef = _d[1];
+    var _g = useState(null), childRef = _g[0], setChildRef = _g[1];
     /**
      * Mount the temporary span element.
      * retrieve and store the target element's reference.
@@ -6085,7 +6263,7 @@ var SkillTooltipWrapper = function (_a) {
     }, []);
     return (React.createElement(React.Fragment, null,
         children,
-        childRef ? (React.createElement(Tippy, { appendTo: document.body, placement: placement, animation: "fade", interactive: interactive, content: React.createElement(SkillTooltip, { data: data, debug: false }), theme: "grade" + 4, reference: childRef })) : (React.createElement("span", { ref: spanRef, style: { display: "none" } }))));
+        childRef ? (React.createElement(Tippy, { arrow: showArrow, trigger: trigger, plugins: [followCursor], followCursor: followCursor$1 && !interactive, appendTo: document.body, placement: placement, animation: "fade", interactive: interactive, content: React.createElement(SkillTooltip, { data: data, debug: false }), theme: "grade" + 4, reference: childRef })) : (React.createElement("span", { ref: spanRef, style: { display: "none" } }))));
 };
 
 var ServerRegion;