@gpa-gemstone/react-forms 1.1.110 → 1.1.111

package/lib/ToolTip.js

@@ -86,6 +86,7 @@ var Tooltip = function (props) {
             closeTimer.current = window.setTimeout(function () { return setDelayedShow(false); }, 250);
         }
     }, [props.Show, isTooltipHovered]);
+    //Effect to get colors from alert class
     React.useLayoutEffect(function () {
         if (alertRef.current == null)
             return;
@@ -93,17 +94,49 @@ var Tooltip = function (props) {
         setBackgroundColor(style.backgroundColor);
         setColor(style.color);
     });
+    //effect to get target element position
     React.useEffect(function () {
-        var target = document.querySelectorAll("[data-tooltip".concat(props.Target === undefined ? '' : "=\"".concat(props.Target, "\""), "]"));
-        if (target.length === 0) {
-            setTargetElementPosition(defaultTargetPosition);
+        var updateTargetPosition = function () {
+            var target = getTarget(props.Target);
+            if (target == null) {
+                setTargetElementPosition(defaultTargetPosition);
+                setDelayedShow(false);
+                setIsTooltipHovered(false);
+                return;
+            }
+            var targetLocation = (0, helper_functions_1.GetNodeSize)(target);
+            var newPosition = {
+                Height: targetLocation.height,
+                Top: targetLocation.top,
+                Left: targetLocation.left,
+                Width: targetLocation.width
+            };
+            setTargetElementPosition(function (prev) {
+                if (!(0, lodash_1.isEqual)(newPosition, prev))
+                    return newPosition;
+                return prev;
+            });
+        };
+        // Initial position calculation
+        updateTargetPosition();
+        // Only set up observers when tooltip is visible
+        if (!shouldShow)
             return;
-        }
-        var targetLocation = (0, helper_functions_1.GetNodeSize)(target[0]);
-        var newPosition = { Height: targetLocation.height, Top: targetLocation.top, Left: targetLocation.left, Width: targetLocation.width };
-        if (!(0, lodash_1.isEqual)(newPosition, targetElementPosition))
-            setTargetElementPosition(newPosition);
-    }, [shouldShow, props.Target, targetElementPosition]);
+        var target = getTarget(props.Target);
+        if (target == null)
+            return;
+        window.addEventListener('scroll', updateTargetPosition, true);
+        window.addEventListener('resize', updateTargetPosition);
+        var resizeObserver = new ResizeObserver(updateTargetPosition);
+        resizeObserver.observe(document.body);
+        resizeObserver.observe(target);
+        return function () {
+            window.removeEventListener('scroll', updateTargetPosition, true);
+            window.removeEventListener('resize', updateTargetPosition);
+            resizeObserver.disconnect();
+        };
+    }, [shouldShow, props.Target]);
+    //Effect to position tooltip
     React.useLayoutEffect(function () {
         var _a = getPosition(toolTip, targetElementPosition, targetPosition), t = _a[0], l = _a[1], arrowLeft = _a[2], actPosition = _a[3];
         setTop(t);
@@ -185,5 +218,9 @@ var getPosition = function (toolTip, targetPosition, position) {
     }
     return [top, left, arrowPositionPercent, effectivePosition];
 };
+var getTarget = function (target) {
+    var targets = document.querySelectorAll("[data-tooltip".concat(target === undefined ? '' : "=\"".concat(target, "\""), "]"));
+    return targets.length > 0 ? targets[0] : null;
+};
 exports.default = exports.Tooltip;
 var templateObject_1, templateObject_2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-forms",
-  "version": "1.1.110",
+  "version": "1.1.111",
   "description": "React Form modules for gpa webapps",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -45,9 +45,9 @@
     "typescript": "5.5.3"
   },
   "dependencies":   {
-    "@gpa-gemstone/application-typings": "0.0.95",
+    "@gpa-gemstone/application-typings": "0.0.96",
     "@gpa-gemstone/gpa-symbols": "0.0.59",
-    "@gpa-gemstone/helper-functions": "0.0.54",
+    "@gpa-gemstone/helper-functions": "0.0.55",
     "@types/react": "^17.0.14",
     "@types/styled-components": "^5.1.11",
     "lodash": "^4.17.21",