bnstooltips 1.4.9 → 1.5.6

package/build/ItemTooltip/SubComponents/ItemCooldowns.d.ts

@@ -2,3 +2,4 @@
 import { BnsItemDto } from "../../itemapiclient";
 declare function ItemCooldowns(item: BnsItemDto): JSX.Element;
 export default ItemCooldowns;
+export declare function GetCooldownString(cooldownInMs: number): string;

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.d.ts

@@ -12,3 +12,5 @@ import SkillTooltipWrapper from "./SkillTooltipWrapper/SkillTooltipWrapper";
 export { SkillTooltipWrapper };
 import { ServerRegion } from "./Utilities/Models";
 export { ServerRegion };
+import { GetCooldownString } from "./ItemTooltip/SubComponents/ItemCooldowns";
+export { GetCooldownString };

package/build/index.es.js

@@ -35,7 +35,7 @@ styleInject(css_248z$6);
 
 function TooltipBase(_a) {
     var title = _a.title, category = _a.subtitle, grade = _a.grade, _b = _a.icon, icon = _b === void 0 ? "" : _b, _c = _a.mainInfos, mainTexts = _c === void 0 ? [] : _c, _d = _a.subInfoGroups, subTexts = _d === void 0 ? [] : _d, id = _a.id, _e = _a.fullHeight, fullHeight = _e === void 0 ? false : _e;
-    return (React.createElement("div", { id: id !== null && id !== void 0 ? id : "", "data-testid": "TooltipBase", className: "TooltipBase_container TooltipBase_border-grade-".concat(grade, " ").concat(fullHeight ? "TooltipBase_containerFullHeight" : "") },
+    return (React.createElement("div", { "data-contentid": id !== null && id !== void 0 ? id : "", "data-testid": "TooltipBase", className: "TooltipBase_container TooltipBase_border-grade-".concat(grade, " ").concat(fullHeight ? "TooltipBase_containerFullHeight" : "") },
         (title != null && title != "") ||
             (category != null && category != "") ? (React.createElement("div", { className: "TooltipBase_titlesubtitle" },
             React.createElement("div", { className: "TooltipBase_title" },
@@ -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) {
@@ -5482,11 +5660,15 @@ function ItemTooltip(_a) {
         }
     }, [jobstyleOverride]);
     var item = data;
+    var itemCategory = (_c = (_b = item.categories) === null || _b === void 0 ? void 0 : _b.sort(function (a, b) { return b.index - a.index; })[0].localizedName) !== null && _c !== void 0 ? _c : "";
+    if (itemCategory == "none")
+        itemCategory = "";
     var tooltipBaseProps = {
         title: item.name,
         grade: item.grade,
+        id: item.id + "-" + item.level,
         icon: item.icon ? BuildIconPath(item.icon.iconPath) : "",
-        subtitle: (_c = (_b = item.categories) === null || _b === void 0 ? void 0 : _b.sort(function (a, b) { return b.index - a.index; })[0].localizedName) !== null && _c !== void 0 ? _c : "",
+        subtitle: itemCategory,
         mainInfos: [],
         subInfoGroups: [],
         fullHeight: fullHeight,
@@ -5954,6 +6136,7 @@ function SkillTooltip(_a) {
     var skill = data;
     var tooltipBaseProps = {
         title: skill.Name,
+        id: skill.ID + "-" + skill.Variation,
         grade: 4,
         icon: skill.IconPath ? React.createElement(SkillIconWithButton, { skill: skill }) : "",
         subtitle: skill.AdditionalInfo
@@ -6065,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.
@@ -6080,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;
@@ -6089,5 +6272,5 @@ var ServerRegion;
     ServerRegion["Korea"] = "Korea";
 })(ServerRegion || (ServerRegion = {}));
 
-export { ItemTooltip, ItemTooltipWrapper, JsonTooltip, ServerRegion, SkillTooltip, SkillTooltipWrapper, TooltipBase };
+export { GetCooldownString, ItemTooltip, ItemTooltipWrapper, JsonTooltip, ServerRegion, SkillTooltip, SkillTooltipWrapper, TooltipBase };
 //# sourceMappingURL=index.es.js.map