bnstooltips 2.0.2 → 2.1.0

package/build/index.js

@@ -5641,6 +5641,50 @@ var TooltipWrapperSettings = /** @class */ (function () {
 var css_248z$3 = ".tippy-box {\n  max-width: none !important;\n  background-color: transparent !important;\n  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;\n  transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; }\n  .tippy-box:hover {\n    box-shadow: black 0px 20px 60px 0px !important; }\n\n.tippy-content {\n  padding: 0 !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #ff0084 !important; }\n";
 styleInject(css_248z$3);
 
+var TooltipSettingsBase = /** @class */ (function () {
+    function TooltipSettingsBase() {
+        this.debug = false;
+        this.fullHeight = false;
+    }
+    return TooltipSettingsBase;
+}());
+var TooltipWithNetworkSettings = /** @class */ (function (_super) {
+    __extends(TooltipWithNetworkSettings, _super);
+    function TooltipWithNetworkSettings(region, client, offline) {
+        if (offline === void 0) { offline = false; }
+        var _this = this;
+        var l_offline = offline;
+        if (region == null)
+            l_offline = true;
+        _this = _super.call(this) || this;
+        _this.region = region;
+        _this.client = client;
+        _this.offline = l_offline;
+        return _this;
+    }
+    return TooltipWithNetworkSettings;
+}(TooltipSettingsBase));
+
+var ItemTooltipSettings = /** @class */ (function (_super) {
+    __extends(ItemTooltipSettings, _super);
+    function ItemTooltipSettings(data, region, client, offline) {
+        var _this = _super.call(this, region, client, offline) || this;
+        _this.data = data;
+        return _this;
+    }
+    return ItemTooltipSettings;
+}(TooltipWithNetworkSettings));
+
+var SkillTooltipSettings = /** @class */ (function (_super) {
+    __extends(SkillTooltipSettings, _super);
+    function SkillTooltipSettings(data) {
+        var _this = _super.call(this) || this;
+        _this.data = data;
+        return _this;
+    }
+    return SkillTooltipSettings;
+}(TooltipSettingsBase));
+
 var css_248z$2 = ".SkillTooltip_skillIconContainer {\n  width: 60px;\n  height: 60px;\n  padding: 0;\n  float: left;\n  position: relative; }\n\n.SkillTooltip_skillIcon {\n  width: 60px;\n  height: 60px; }\n\n.SkillTooltip_buttonIcon {\n  position: absolute;\n  right: 1px;\n  bottom: 1px;\n  height: 18px;\n  opacity: 0.9; }\n\n.SkillTooltip_buttonIconMouse {\n  background-color: rgba(0, 0, 0, 0.8); }\n\n.SkillTooltip_mainText {\n  font-weight: 500; }\n\n.SkillTooltip_smallText {\n  font-size: 12px; }\n\n.SkillTooltip_subTextMargin {\n  margin-bottom: 0.3rem; }\n\n.SkillTooltip_boundaryContainer {\n  display: flex;\n  width: 100%;\n  margin-bottom: 0.5rem;\n  line-height: 17px; }\n\n.SkillTooltip_boundary {\n  flex: 1;\n  flex-basis: 0px;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  color: black;\n  margin: 0.15rem; }\n\n.SkillTooltip_boundary:first-of-type > .SkillTooltip_boundaryHead {\n  border-radius: 3px 0 0 0; }\n\n.SkillTooltip_boundary:last-of-type > .SkillTooltip_boundaryHead {\n  border-radius: 0 3px 0 0; }\n\n.SkillTooltip_boundary:first-of-type > .SkillTooltip_boundaryBody {\n  border-radius: 0 0 0 3px; }\n\n.SkillTooltip_boundary:last-of-type > .SkillTooltip_boundaryBody {\n  border-radius: 0 0 3px 0; }\n\n.SkillTooltip_boundaryHead {\n  color: white;\n  font-weight: 500;\n  font-size: 12px;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  padding: 0.3rem;\n  text-align: center;\n  flex: 1;\n  min-height: 26px;\n  background-color: rgba(127, 127, 127, 0.4); }\n\n.SkillTooltip_boundaryBody {\n  color: white;\n  padding: 0.5rem 0.3rem;\n  margin-top: 0.15rem;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 40px;\n  flex: 2;\n  background-color: rgba(127, 127, 127, 0.4); }\n\n.SkillTooltip_boundaryBodyModifier {\n  min-height: 33px !important; }\n\n.SkillTooltip_boundaryHasIcon {\n  min-height: 50px !important; }\n\n.SkillTooltip_conditionRow {\n  display: flex;\n  align-items: center;\n  font-size: 12px; }\n\n.SkillTooltip_conditionRow:not(:last-of-type) {\n  margin-bottom: 0.1rem; }\n\n.SkillTooltip_conditionIcon {\n  width: 20px;\n  height: 20px;\n  margin-right: 0.33rem; }\n\n.SkillTooltip_conditionIconSmall {\n  width: 12px;\n  height: 12px;\n  margin-right: 0.22rem; }\n\n.tooltipArg {\n  color: #46bee1;\n  font-weight: 600; }\n\n.target-360 {\n  background-image: url(\"./360.png\");\n  background-repeat: no-repeat;\n  background-position: 50% 60%;\n  background-size: auto 64px; }\n\n.target-front-180 {\n  background-image: url(\"./180.png\");\n  background-repeat: no-repeat;\n  background-position: 50% 70%;\n  background-size: auto 64px; }\n\n.laser {\n  background-image: url(\"./laser.png\");\n  background-repeat: no-repeat;\n  background-position: 50% 50%;\n  background-size: auto 64px; }\n";
 styleInject(css_248z$2);
 
@@ -5919,6 +5963,18 @@ function AddIds(subInfoGroups, skill) {
     });
 }
 
+var NpcTooltipSettings = /** @class */ (function (_super) {
+    __extends(NpcTooltipSettings, _super);
+    function NpcTooltipSettings(npc, region, grade, client, offline) {
+        if (grade === void 0) { grade = 4; }
+        var _this = _super.call(this, region, client, offline) || this;
+        _this.npc = npc;
+        _this.grade = grade;
+        return _this;
+    }
+    return NpcTooltipSettings;
+}(TooltipWithNetworkSettings));
+
 var css_248z$1 = ".NpcTooltip_toggleBarContainer {\n  display: flex; }\n\n.NpcTooltip_toggleButton {\n  border: none;\n  padding: 0.33rem;\n  margin: 0 0.1rem;\n  border-radius: 0;\n  background-color: rgba(233, 233, 233, 0.1);\n  color: #fff;\n  opacity: 0.8;\n  cursor: pointer;\n  transition: background-color 0.1s; }\n  .NpcTooltip_toggleButton:hover {\n    background-color: rgba(255, 255, 255, 0.2);\n    opacity: 1; }\n  .NpcTooltip_toggleButton-active {\n    background-color: rgba(255, 255, 255, 0.3) !important;\n    color: #fff;\n    opacity: 1; }\n  .NpcTooltip_toggleButton img {\n    width: 32px;\n    height: 32px; }\n\n.NpcTooltip_storeEntry {\n  display: flex;\n  align-items: stretch;\n  background-color: rgba(233, 233, 233, 0.1);\n  padding: 0.33rem;\n  font-size: 14px; }\n  .NpcTooltip_storeEntry:not(:last-child) {\n    margin-bottom: 0.2rem; }\n\n.NpcTooltip_storeEntryItemNameLimit {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center; }\n\n.NpcTooltip_storeEntryItemLimit {\n  font-size: 12px; }\n\n.NpcTooltip_storeEntryItemName {\n  flex: 1;\n  display: flex;\n  align-items: center; }\n\n.NpcTooltip_storeEntryItemIconName {\n  display: flex;\n  align-items: center; }\n  .NpcTooltip_storeEntryItemIconName img {\n    width: 48px;\n    height: 48px;\n    margin-right: 0.33rem; }\n\n.NpcTooltip_itemBuyPriceEntriesContainer {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  align-items: flex-end;\n  justify-content: center;\n  padding-left: 2rem; }\n\n.NpcTooltip_itemBuyPriceEntries {\n  display: flex; }\n  .NpcTooltip_itemBuyPriceEntries-moneyMargin {\n    margin-bottom: 0.2rem; }\n\n.NpcTooltip_itemBuyPriceEntry:not(:first-child) {\n  margin-left: 0.33rem; }\n\n.NpcTooltip_itemBuyPriceEntryContainer {\n  position: relative;\n  height: 32px; }\n  .NpcTooltip_itemBuyPriceEntryContainer img {\n    width: 32px;\n    height: 32px; }\n  .NpcTooltip_itemBuyPriceEntryContainer-shadow {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    box-shadow: inset 0 0 2px 0px #000000; }\n\n.NpcTooltip_itemBuyPriceEntryCount {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  color: #ffffff;\n  background-color: rgba(0, 0, 0, 0.4);\n  width: 32px;\n  line-height: 12px;\n  text-align: center; }\n\n.NpcTooltip_moneyContainer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end; }\n  .NpcTooltip_moneyContainer > span {\n    display: flex;\n    align-items: center; }\n    .NpcTooltip_moneyContainer > span:not(:first-child) {\n      margin-left: 0.1rem; }\n    .NpcTooltip_moneyContainer > span > img {\n      width: 16px;\n      height: 16px; }\n";
 styleInject(css_248z$1);
 
@@ -5933,54 +5989,6 @@ function StoreToggleBar(_a) {
     return (React__default["default"].createElement("div", { className: "NpcTooltip_toggleBarContainer" }, stores.map(function (store, i) { return (React__default["default"].createElement(StoreToggle, { key: i, store: store, isActive: activeTab === i, setActive: function () { return setActiveTab(i); } })); })));
 }
 
-exports.ServerRegion = void 0;
-(function (ServerRegion) {
-    ServerRegion["EUNA"] = "EUNA";
-    ServerRegion["Korea"] = "Korea";
-    ServerRegion["KoreaTest"] = "KoreaTest";
-})(exports.ServerRegion || (exports.ServerRegion = {}));
-var TooltipType;
-(function (TooltipType) {
-    TooltipType[TooltipType["Item"] = 0] = "Item";
-    TooltipType[TooltipType["Skill"] = 1] = "Skill";
-    TooltipType[TooltipType["Npc"] = 2] = "Npc";
-})(TooltipType || (TooltipType = {}));
-var TooltipSettingsBase = /** @class */ (function () {
-    function TooltipSettingsBase(offline) {
-        if (offline === void 0) { offline = false; }
-        this.debug = false;
-        this.fullHeight = false;
-        this.offline = offline;
-    }
-    return TooltipSettingsBase;
-}());
-var TooltipWithNetworkSettings = /** @class */ (function (_super) {
-    __extends(TooltipWithNetworkSettings, _super);
-    function TooltipWithNetworkSettings(region, client, offline) {
-        if (offline === void 0) { offline = false; }
-        var _this = this;
-        var l_offline = offline;
-        if (region == null)
-            l_offline = true;
-        _this = _super.call(this, l_offline) || this;
-        _this.region = region;
-        _this.client = client;
-        return _this;
-    }
-    return TooltipWithNetworkSettings;
-}(TooltipSettingsBase));
-
-var ItemTooltipSettings = /** @class */ (function (_super) {
-    __extends(ItemTooltipSettings, _super);
-    function ItemTooltipSettings(data, region, client, offline) {
-        var _this = _super.call(this, region, client, offline) || this;
-        _this.data = data;
-        _this.type = TooltipType.Item;
-        return _this;
-    }
-    return ItemTooltipSettings;
-}(TooltipWithNetworkSettings));
-
 var BuyLimitReset;
 (function (BuyLimitReset) {
     BuyLimitReset[BuyLimitReset["Day"] = 0] = "Day";
@@ -6067,7 +6075,7 @@ function StoreItemBuyPriceEntry(_a) {
     }, [itemRef, client]);
     var tooltipItemSettings = new ItemTooltipSettings(item, client.region, client);
     var wrapperSettings = new TooltipWrapperSettings(undefined, undefined, undefined, "click", undefined);
-    return (React__default["default"].createElement("div", { className: "NpcTooltip_itemBuyPriceEntry" }, item ? (React__default["default"].createElement(TooltipWrapper, { settings: wrapperSettings, tooltipSettings: tooltipItemSettings },
+    return (React__default["default"].createElement("div", { className: "NpcTooltip_itemBuyPriceEntry" }, item ? (React__default["default"].createElement(TooltipWrapper, { targetSettings: wrapperSettings, contentSettings: tooltipItemSettings },
         React__default["default"].createElement("div", { className: "NpcTooltip_itemBuyPriceEntryContainer" },
             React__default["default"].createElement("div", { className: "NpcTooltip_itemBuyPriceEntryContainer-shadow" }),
             React__default["default"].createElement("img", { className: "TooltipBase_iconbg-grade-" + item.grade, src: BuildIconPath(item.icon.iconPath), alt: "" }),
@@ -6101,7 +6109,7 @@ function NpcStoreEntry(_a) {
         var wrapperSettings = new TooltipWrapperSettings(undefined, undefined, undefined, "click", undefined);
         return (React__default["default"].createElement("div", { className: "NpcTooltip_storeEntry" },
             React__default["default"].createElement("div", { className: "NpcTooltip_storeEntryItemIconName" },
-                React__default["default"].createElement(TooltipWrapper, { settings: wrapperSettings, tooltipSettings: tooltipItemSettings },
+                React__default["default"].createElement(TooltipWrapper, { targetSettings: wrapperSettings, contentSettings: tooltipItemSettings },
                     React__default["default"].createElement("img", { className: "TooltipBase_iconbg-grade-" + item.grade, src: BuildIconPath(item.icon.iconPath), alt: "" })),
                 React__default["default"].createElement("div", { className: "NpcTooltip_storeEntryItemNameLimit" },
                     React__default["default"].createElement("div", { className: "NpcTooltip_storeEntryItemName TooltipBase_grade-" + item.grade, dangerouslySetInnerHTML: { __html: item.name } }),
@@ -6181,14 +6189,15 @@ function AddStores(subInfoGroups, activeTab, client, Stores) {
 }
 
 function TooltipWrapper(_a) {
-    var settings = _a.settings, tooltipSettings = _a.tooltipSettings, children = _a.children, jobstyleOverride = _a.jobstyleOverride;
-    if (settings == undefined) {
-        settings = new TooltipWrapperSettings();
+    var targetSettings = _a.targetSettings, contentSettings = _a.contentSettings, children = _a.children, jobstyleOverride = _a.jobstyleOverride;
+    if (targetSettings == undefined) {
+        targetSettings = new TooltipWrapperSettings();
     }
-    if (settings == null || tooltipSettings == null)
+    if (targetSettings == null || contentSettings == null)
         return null;
     var spanRef = React.useRef(null);
     var _b = React.useState(null), childRef = _b[0], setChildRef = _b[1];
+    var _c = React.useState(true), origOffline = _c[0], setOrigOffline = _c[1];
     /**
      * Mount the temporary span element.
      * retrieve and store the target element's reference.
@@ -6197,37 +6206,41 @@ function TooltipWrapper(_a) {
         if (spanRef.current) {
             setChildRef(spanRef.current.previousElementSibling);
         }
+        var offline = contentSettings instanceof TooltipWithNetworkSettings
+            ? contentSettings.offline
+            : true;
+        setOrigOffline(offline);
         return function () { return setChildRef(null); };
     }, []);
-    var _c = React.useState(true), isOffline = _c[0], setIsOffline = _c[1];
-    var _d = React.useState(4), grade = _d[0], setGrade = _d[1];
-    var _e = React.useState(null), content = _e[0], setContent = _e[1];
+    var _d = React.useState(true), isOffline = _d[0], setIsOffline = _d[1];
+    var _e = React.useState(4), grade = _e[0], setGrade = _e[1];
+    var _f = React.useState(null), content = _f[0], setContent = _f[1];
     React.useEffect(function () {
         var _a;
-        if (tooltipSettings.type == TooltipType.Item) {
-            setContent(React__default["default"].createElement(ItemTooltip, { jobstyleOverride: jobstyleOverride, settings: tooltipSettings }));
-            setGrade(tooltipSettings.data.grade);
+        if (contentSettings == null)
+            return;
+        if (contentSettings instanceof TooltipWithNetworkSettings)
+            contentSettings.offline = isOffline;
+        if (contentSettings instanceof ItemTooltipSettings) {
+            setContent(React__default["default"].createElement(ItemTooltipComponent, { jobstyleOverride: jobstyleOverride, settings: contentSettings }));
+            setGrade(contentSettings.data.grade);
         }
-        else if (tooltipSettings.type == TooltipType.Skill) {
-            setContent(React__default["default"].createElement(SkillTooltip, { settings: tooltipSettings }));
+        if (contentSettings instanceof SkillTooltipSettings) {
+            setContent(React__default["default"].createElement(SkillTooltip, { settings: contentSettings }));
             setGrade(4);
         }
-        else if (tooltipSettings.type == TooltipType.Npc) {
-            setContent(React__default["default"].createElement(NpcTooltip, { settings: tooltipSettings }));
-            setGrade((_a = tooltipSettings.grade) !== null && _a !== void 0 ? _a : 4);
+        if (contentSettings instanceof NpcTooltipSettings) {
+            setContent(React__default["default"].createElement(NpcTooltip, { settings: contentSettings }));
+            setGrade((_a = contentSettings.grade) !== null && _a !== void 0 ? _a : 4);
         }
-    }, [tooltipSettings]);
-    React.useEffect(function () {
-        if (content != null)
-            setContent(function (prev) {
-                var newSettings = JSON.parse(JSON.stringify(tooltipSettings));
-                newSettings.offline = isOffline;
-                return React__default["default"].cloneElement(prev, { tooltipSettings: newSettings });
-            });
-    }, [isOffline]);
+    }, [contentSettings, isOffline]);
+    function mountOfflineState() {
+        if (origOffline != isOffline)
+            setIsOffline(origOffline);
+    }
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         children,
-        childRef && content ? (React__default["default"].createElement(Tippy, { arrow: settings.showArrow, trigger: settings.trigger, plugins: [followCursor], followCursor: settings.followCursor && !settings.interactive, appendTo: document.body, onMount: function () { return setIsOffline(tooltipSettings.offline); }, placement: settings.placement, animation: "fade", interactive: settings.interactive, content: content, theme: "grade" + grade, reference: childRef })) : (React__default["default"].createElement("span", { "data-testid": "TooltipWrapper", ref: spanRef, style: { display: "none" } }))));
+        childRef && content ? (React__default["default"].createElement(Tippy, { arrow: targetSettings.showArrow, trigger: targetSettings.trigger, plugins: [followCursor], followCursor: targetSettings.followCursor && !targetSettings.interactive, appendTo: document.body, onMount: function () { return mountOfflineState(); }, placement: targetSettings.placement, animation: "fade", interactive: targetSettings.interactive, content: content, theme: "grade" + grade, reference: childRef })) : (React__default["default"].createElement("span", { "data-testid": "TooltipWrapper", ref: spanRef, style: { display: "none" } }))));
 }
 
 function ItemIconNameDiv(_a) {
@@ -6253,11 +6266,9 @@ function ItemIconNameDiv(_a) {
     }, [item, client]);
     if (itemData) {
         if (itemData.grade != 0) {
-            var itemSettings = new ItemTooltipSettings(itemData);
-            itemSettings.client = client;
-            itemSettings.region = region;
+            var itemSettings = new ItemTooltipSettings(itemData, region, client);
             return (React__default["default"].createElement("div", { className: "ItemTooltip_itemiconnamediv" },
-                React__default["default"].createElement(TooltipWrapper, { settings: new TooltipWrapperSettings(), tooltipSettings: itemSettings },
+                React__default["default"].createElement(TooltipWrapper, { targetSettings: new TooltipWrapperSettings(), contentSettings: itemSettings },
                     React__default["default"].createElement("img", { className: "ItemTooltip_itemIconSmall", alt: "", src: BuildIconPath((_b = itemData.icon) === null || _b === void 0 ? void 0 : _b.iconPath) })),
                 React__default["default"].createElement("div", { className: "ItemTooltip_itemNameRandomDiv" },
                     React__default["default"].createElement("span", { className: "TooltipBase_grade-" + itemData.grade, dangerouslySetInnerHTML: { __html: itemData.name } }),
@@ -6358,7 +6369,7 @@ function AccountTransfer(_a) {
             "\u00A0copper")) : null));
 }
 
-function ItemTooltip(_a) {
+function ItemTooltipComponent(_a) {
     var _this = this;
     var _b, _c, _d;
     var settings = _a.settings, jobstyleOverride = _a.jobstyleOverride;
@@ -6712,32 +6723,15 @@ function JsonArrayToJsxArray(stringArray) {
     return jsxArray;
 }
 
-var NpcTooltipSettings = /** @class */ (function (_super) {
-    __extends(NpcTooltipSettings, _super);
-    function NpcTooltipSettings(npc, region, grade, client, offline) {
-        if (grade === void 0) { grade = 4; }
-        var _this = _super.call(this, region, client, offline) || this;
-        _this.npc = npc;
-        _this.grade = grade;
-        _this.type = TooltipType.Npc;
-        return _this;
-    }
-    return NpcTooltipSettings;
-}(TooltipWithNetworkSettings));
-
-var SkillTooltipSettings = /** @class */ (function (_super) {
-    __extends(SkillTooltipSettings, _super);
-    function SkillTooltipSettings(data) {
-        var _this = _super.call(this) || this;
-        _this.data = data;
-        _this.type = TooltipType.Skill;
-        return _this;
-    }
-    return SkillTooltipSettings;
-}(TooltipSettingsBase));
+exports.ServerRegion = void 0;
+(function (ServerRegion) {
+    ServerRegion["EUNA"] = "EUNA";
+    ServerRegion["Korea"] = "Korea";
+    ServerRegion["KoreaTest"] = "KoreaTest";
+})(exports.ServerRegion || (exports.ServerRegion = {}));
 
 exports.GetCooldownString = GetCooldownString;
-exports.ItemTooltip = ItemTooltip;
+exports.ItemTooltip = ItemTooltipComponent;
 exports.ItemTooltipSettings = ItemTooltipSettings;
 exports.JsonTooltip = JsonTooltip;
 exports.NpcTooltip = NpcTooltip;