@gemx-dev/heatmap-react 3.5.92-dev.29 → 3.5.92-dev.30

package/dist/esm/hooks/viz-elm/useElementCalloutVisible.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useElementCalloutVisible.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-elm/useElementCalloutVisible.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAM/C,UAAU,MAAM;IACd,SAAS,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IACjC,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,KAAK,GAAG,CAAC;IAC3B,YAAY,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;CACrC;AAED,eAAO,MAAM,wBAAwB,GAAI,sCAAsC,MAAM,OAuCpF,CAAC"}
+{"version":3,"file":"useElementCalloutVisible.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-elm/useElementCalloutVisible.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAO/C,UAAU,MAAM;IACd,SAAS,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IACjC,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,KAAK,GAAG,CAAC;IAC3B,YAAY,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;CACrC;AAED,eAAO,MAAM,wBAAwB,GAAI,sCAAsC,MAAM,OAyCpF,CAAC"}

package/dist/esm/hooks/viz-elm/useHoveredElement.d.ts

@@ -1,4 +1,4 @@
-import type { IHeatmapRef } from '../../types';
+import type { IHeatmapInfo, IHeatmapRef } from '../../types';
 interface Params {
     iframeRef: IHeatmapRef['Iframe'];
     getRect: (el?: any) => any;
@@ -12,5 +12,6 @@ export declare const convertViewportToIframeCoords: (clientX: number, clientY: n
     x: number;
     y: number;
 };
+export declare const isElmInDataInfo: (hash: string | null, heatmapInfo?: IHeatmapInfo) => boolean;
 export {};
 //# sourceMappingURL=useHoveredElement.d.ts.map

package/dist/esm/hooks/viz-elm/useHoveredElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useHoveredElement.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-elm/useHoveredElement.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAgB,WAAW,EAAE,MAAM,aAAa,CAAC;AAe7D,UAAU,MAAM;IACd,SAAS,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IACjC,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,KAAK,GAAG,CAAC;CAC5B;AAED,eAAO,MAAM,iBAAiB,GAAI,wBAAwB,MAAM;uEAiDpD,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC;;0BA4B/B,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,SAAS,MAAM;CA6B3D,CAAC;AAiBF,eAAO,MAAM,6BAA6B,GACxC,SAAS,MAAM,EACf,SAAS,MAAM,EACf,YAAY,OAAO,EACnB,OAAO,MAAM,KACZ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAUxB,CAAC"}
+{"version":3,"file":"useHoveredElement.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-elm/useHoveredElement.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAe7D,UAAU,MAAM;IACd,SAAS,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IACjC,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,KAAK,GAAG,CAAC;CAC5B;AAED,eAAO,MAAM,iBAAiB,GAAI,wBAAwB,MAAM;uEA8CpD,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC;;0BA4B/B,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,SAAS,MAAM;CA6B3D,CAAC;AAiBF,eAAO,MAAM,6BAA6B,GACxC,SAAS,MAAM,EACf,SAAS,MAAM,EACf,YAAY,OAAO,EACnB,OAAO,MAAM,KACZ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAUxB,CAAC;AAsCF,eAAO,MAAM,eAAe,GAAI,MAAM,MAAM,GAAG,IAAI,EAAE,cAAc,YAAY,KAAG,OAKjF,CAAC"}

package/dist/esm/index.js

@@ -1793,6 +1793,8 @@ const getElementAtPoint = (doc, x, y) => {
     return element;
 };
 function getElementHash(element) {
+    if (!element)
+        return null;
     return element.getAttribute('data-clarity-hashbeta') || element.getAttribute('data-clarity-hashalpha');
 }
 
@@ -3692,104 +3694,6 @@ const useClickedElement = ({ visualRef, getRect }) => {
     return { clickedElement, showMissingElement, shouldShowCallout };
 };
 
-const useElementCalloutVisible = ({ visualRef, getRect, positionMode }) => {
-    const selectedElement = useHeatmapClickContext((s) => s.selectedElement);
-    const setShouldShowCallout = useHeatmapClickContext((s) => s.setShouldShowCallout);
-    const widthScale = useHeatmapVizContext((s) => s.widthScale);
-    const dataInfo = useHeatmapDataContext((s) => s.dataInfo);
-    useEffect(() => {
-        const isAbsolute = positionMode === 'absolute';
-        if (isAbsolute)
-            return;
-        const hash = selectedElement?.hash;
-        if (!hash)
-            return;
-        const elementIsInViewportFn = () => {
-            const elementInfo = dataInfo?.clickMapMetrics?.[hash];
-            if (!elementInfo)
-                return;
-            const rect = getRect({ hash, selector: elementInfo.selector });
-            const isInViewport = isElementInViewport(rect, visualRef, widthScale);
-            setShouldShowCallout(isInViewport);
-        };
-        elementIsInViewportFn();
-        const handleUpdate = () => {
-            requestAnimationFrame(elementIsInViewportFn);
-        };
-        window.addEventListener('scroll', handleUpdate, true);
-        window.addEventListener('resize', handleUpdate);
-        visualRef?.current?.addEventListener('scroll', handleUpdate);
-        return () => {
-            window.removeEventListener('scroll', handleUpdate, true);
-            window.removeEventListener('resize', handleUpdate);
-            visualRef?.current?.removeEventListener('scroll', handleUpdate);
-        };
-    }, [selectedElement?.hash, visualRef, widthScale, dataInfo, getRect, setShouldShowCallout, positionMode]);
-    return {};
-};
-
-const useHeatmapEffects = ({ isVisible }) => {
-    // const selectedElement = useHeatmapClickContext((s) => s.selectedElement);
-    // const setShouldShowCallout = useHeatmapClickContext((s) => s.setShouldShowCallout);
-    const resetAll = () => {
-        // setShouldShowCallout(false);
-    };
-    // Reset khi ẩn
-    useEffect(() => {
-    }, [isVisible, resetAll]);
-    // Ẩn callout khi sidebar mở
-    // useEffect(() => {
-    //   if (isElementSidebarOpen && selectedElement) {
-    //     setShouldShowCallout(false);
-    //   } else if (!isElementSidebarOpen && selectedElement) {
-    //     setShouldShowCallout(true);
-    //   }
-    // }, [isElementSidebarOpen, selectedElement]);
-};
-
-const useHeatmapElementPosition = ({ iframeRef, wrapperRef, visualizer }) => {
-    const viewport = useHeatmapViewportByDevice();
-    const iframeHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
-    const widthScale = useHeatmapVizContext((s) => s.widthScale);
-    const getRect = useCallback((element) => {
-        const hash = element?.hash;
-        if (!iframeRef.current?.contentDocument || !hash || !visualizer)
-            return null;
-        let domElement = null;
-        try {
-            domElement = visualizer.get(hash);
-        }
-        catch (error) {
-            console.error('Visualizer error:', { hash, error });
-            return null;
-        }
-        if (!domElement)
-            return null;
-        const layout = getElementLayout(domElement);
-        if (!layout)
-            return null;
-        const parentEl = wrapperRef.current;
-        if (!parentEl)
-            return null;
-        const scrollOffset = parentEl.scrollTop / widthScale;
-        const adjustedTop = layout.top + scrollOffset;
-        const outOfBounds = adjustedTop < 0 ||
-            adjustedTop > (iframeHeight || Infinity) ||
-            layout.left < 0 ||
-            (typeof viewport.width === 'number' && layout.left > viewport.width);
-        if (outOfBounds)
-            return null;
-        return {
-            left: layout.left,
-            top: adjustedTop,
-            width: Math.min(layout.width, viewport.width || layout.width),
-            height: layout.height,
-            outOfBounds,
-        };
-    }, [iframeRef, wrapperRef, visualizer, viewport, iframeHeight, widthScale]);
-    return { getRect };
-};
-
 function getBoundingBox(element) {
     if (typeof element.getBoundingClientRect !== 'function') {
         return null;
@@ -3904,15 +3808,12 @@ const useHoveredElement = ({ iframeRef, getRect }) => {
         const iframeRect = iframe.getBoundingClientRect();
         const { x, y } = convertViewportToIframeCoords(event.clientX, event.clientY, iframeRect, widthScale);
         const targetElement = findTargetElement(doc, x, y, dataInfo);
-        if (!targetElement || !isValidElement(targetElement, dataInfo)) {
+        const hash = getElementHash(targetElement);
+        if (!targetElement || !hash || !isElmInDataInfo(hash, dataInfo)) {
             reset();
             return;
         }
-        const hash = getElementHash(targetElement);
-        if (hash)
-            return hash;
-        reset();
-        return;
+        return hash;
     }, [dataInfo, iframeRef, widthScale, reset]);
     const onHandleMouseMove = useCallback((event) => {
         if (isLoadingCanvas)
@@ -3924,7 +3825,7 @@ const useHoveredElement = ({ iframeRef, getRect }) => {
         }
         if (isHoveredElement(hash))
             return;
-        const selector = dataInfo?.clickMapMetrics?.[hash];
+        const selector = dataInfo.clickMapMetrics?.[hash];
         const rect = getRect({ hash, selector });
         const elementInfo = buildElementInfo(hash, rect, dataInfo);
         if (!elementInfo) {
@@ -4012,13 +3913,111 @@ const findTargetElement = (doc, x, y, heatmapInfo) => {
 const isIframeReady = (iframeRef, heatmapInfo) => {
     return !!(iframeRef.current?.contentDocument && heatmapInfo?.clickMapMetrics);
 };
-const isValidElement = (element, heatmapInfo) => {
-    if (!element)
-        return false;
-    const hash = getElementHash(element);
+const isElmInDataInfo = (hash, heatmapInfo) => {
     if (!hash)
         return false;
-    return !!heatmapInfo?.clickMapMetrics?.[hash];
+    const isInSortedElements = heatmapInfo?.sortedElements?.some((item) => item.hash === hash);
+    return !!isInSortedElements && !!heatmapInfo?.clickMapMetrics?.[hash];
+};
+
+const useElementCalloutVisible = ({ visualRef, getRect, positionMode }) => {
+    const selectedElement = useHeatmapClickContext((s) => s.selectedElement);
+    const setShouldShowCallout = useHeatmapClickContext((s) => s.setShouldShowCallout);
+    const widthScale = useHeatmapVizContext((s) => s.widthScale);
+    const dataInfo = useHeatmapDataContext((s) => s.dataInfo);
+    useEffect(() => {
+        const isAbsolute = positionMode === 'absolute';
+        if (isAbsolute)
+            return;
+        const hash = selectedElement?.hash;
+        if (!hash)
+            return;
+        const elementIsInViewportFn = () => {
+            if (!isElmInDataInfo(hash, dataInfo))
+                return;
+            const elementInfo = dataInfo?.clickMapMetrics?.[hash];
+            if (!elementInfo)
+                return;
+            const rect = getRect({ hash, selector: elementInfo.selector });
+            const isInViewport = isElementInViewport(rect, visualRef, widthScale);
+            setShouldShowCallout(isInViewport);
+        };
+        elementIsInViewportFn();
+        const handleUpdate = () => {
+            requestAnimationFrame(elementIsInViewportFn);
+        };
+        window.addEventListener('scroll', handleUpdate, true);
+        window.addEventListener('resize', handleUpdate);
+        visualRef?.current?.addEventListener('scroll', handleUpdate);
+        return () => {
+            window.removeEventListener('scroll', handleUpdate, true);
+            window.removeEventListener('resize', handleUpdate);
+            visualRef?.current?.removeEventListener('scroll', handleUpdate);
+        };
+    }, [selectedElement?.hash, visualRef, widthScale, dataInfo, getRect, setShouldShowCallout, positionMode]);
+    return {};
+};
+
+const useHeatmapEffects = ({ isVisible }) => {
+    // const selectedElement = useHeatmapClickContext((s) => s.selectedElement);
+    // const setShouldShowCallout = useHeatmapClickContext((s) => s.setShouldShowCallout);
+    const resetAll = () => {
+        // setShouldShowCallout(false);
+    };
+    // Reset khi ẩn
+    useEffect(() => {
+    }, [isVisible, resetAll]);
+    // Ẩn callout khi sidebar mở
+    // useEffect(() => {
+    //   if (isElementSidebarOpen && selectedElement) {
+    //     setShouldShowCallout(false);
+    //   } else if (!isElementSidebarOpen && selectedElement) {
+    //     setShouldShowCallout(true);
+    //   }
+    // }, [isElementSidebarOpen, selectedElement]);
+};
+
+const useHeatmapElementPosition = ({ iframeRef, wrapperRef, visualizer }) => {
+    const viewport = useHeatmapViewportByDevice();
+    const iframeHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
+    const widthScale = useHeatmapVizContext((s) => s.widthScale);
+    const getRect = useCallback((element) => {
+        const hash = element?.hash;
+        if (!iframeRef.current?.contentDocument || !hash || !visualizer)
+            return null;
+        let domElement = null;
+        try {
+            domElement = visualizer.get(hash);
+        }
+        catch (error) {
+            console.error('Visualizer error:', { hash, error });
+            return null;
+        }
+        if (!domElement)
+            return null;
+        const layout = getElementLayout(domElement);
+        if (!layout)
+            return null;
+        const parentEl = wrapperRef.current;
+        if (!parentEl)
+            return null;
+        const scrollOffset = parentEl.scrollTop / widthScale;
+        const adjustedTop = layout.top + scrollOffset;
+        const outOfBounds = adjustedTop < 0 ||
+            adjustedTop > (iframeHeight || Infinity) ||
+            layout.left < 0 ||
+            (typeof viewport.width === 'number' && layout.left > viewport.width);
+        if (outOfBounds)
+            return null;
+        return {
+            left: layout.left,
+            top: adjustedTop,
+            width: Math.min(layout.width, viewport.width || layout.width),
+            height: layout.height,
+            outOfBounds,
+        };
+    }, [iframeRef, wrapperRef, visualizer, viewport, iframeHeight, widthScale]);
+    return { getRect };
 };
 
 /**
@@ -8959,4 +8958,4 @@ const HeatmapLayout = ({ shopId, data, clickmap, clickAreas, scrollmap, attentio
     }
 };
 
-export { BACKDROP_CONFIG, DEFAULT_SIDEBAR_WIDTH, DEFAULT_VIEW_ID, DEFAULT_ZOOM_RATIO, EClickMode, EClickRankType, EClickType, EDeviceType, EHeatmapDataSource, EHeatmapMode, EHeatmapType, ELM_CALLOUT_CONFIG, EScrollType, GraphView, HEATMAP_CONFIG, HEATMAP_IFRAME, HEATMAP_STYLE, HeatmapLayout, ViewIdContext, Z_INDEX$1 as Z_INDEX, compareViewPerformance, convertViewportToIframeCoords, createStorePerformanceTracker, createViewContextHook, decodeArrayClarity, decodeClarity, downloadPerformanceReport, getCompareViewId, getMetricsByViewId, getPerformanceReportJSON, getScrollGradientColor, performanceLogger, printPerformanceSummary, scrollToElementIfNeeded, sendPerformanceReport, serializeAreas, trackStoreAction, useAreaCreation, useAreaEditMode, useAreaFilterVisible, useAreaHydration, useAreaInteraction, useAreaPositionsUpdater, useAreaRectSync, useAreaRendererContainer, useAreaTopAutoDetect, useClickedElement, useDebounceCallback, useElementCalloutVisible, useHeatmapAreaClickContext, useHeatmapCanvas, useHeatmapClickContext, useHeatmapCompareStore, useHeatmapConfigStore, useHeatmapCopyView, useHeatmapDataContext, useHeatmapEffects, useHeatmapElementPosition, useHeatmapHoverContext, useHeatmapLiveContext, useHeatmapRenderByMode, useHeatmapScale, useHeatmapScroll, useHeatmapScrollContext, useHeatmapSettingContext, useHeatmapViewportByDevice, useHeatmapVizContext, useHeatmapVizRectContext, useHoveredElement, useMeasureFunction, useRegisterConfig, useRegisterControl, useRegisterData, useRegisterHeatmap, useRenderCount, useScrollmapZones, useTrackHookCall, useViewIdContext, useVizLiveRender, useWhyDidYouUpdate, useWrapperRefHeight, useZonePositions, withPerformanceTracking };
+export { BACKDROP_CONFIG, DEFAULT_SIDEBAR_WIDTH, DEFAULT_VIEW_ID, DEFAULT_ZOOM_RATIO, EClickMode, EClickRankType, EClickType, EDeviceType, EHeatmapDataSource, EHeatmapMode, EHeatmapType, ELM_CALLOUT_CONFIG, EScrollType, GraphView, HEATMAP_CONFIG, HEATMAP_IFRAME, HEATMAP_STYLE, HeatmapLayout, ViewIdContext, Z_INDEX$1 as Z_INDEX, compareViewPerformance, convertViewportToIframeCoords, createStorePerformanceTracker, createViewContextHook, decodeArrayClarity, decodeClarity, downloadPerformanceReport, getCompareViewId, getMetricsByViewId, getPerformanceReportJSON, getScrollGradientColor, isElmInDataInfo, performanceLogger, printPerformanceSummary, scrollToElementIfNeeded, sendPerformanceReport, serializeAreas, trackStoreAction, useAreaCreation, useAreaEditMode, useAreaFilterVisible, useAreaHydration, useAreaInteraction, useAreaPositionsUpdater, useAreaRectSync, useAreaRendererContainer, useAreaTopAutoDetect, useClickedElement, useDebounceCallback, useElementCalloutVisible, useHeatmapAreaClickContext, useHeatmapCanvas, useHeatmapClickContext, useHeatmapCompareStore, useHeatmapConfigStore, useHeatmapCopyView, useHeatmapDataContext, useHeatmapEffects, useHeatmapElementPosition, useHeatmapHoverContext, useHeatmapLiveContext, useHeatmapRenderByMode, useHeatmapScale, useHeatmapScroll, useHeatmapScrollContext, useHeatmapSettingContext, useHeatmapViewportByDevice, useHeatmapVizContext, useHeatmapVizRectContext, useHoveredElement, useMeasureFunction, useRegisterConfig, useRegisterControl, useRegisterData, useRegisterHeatmap, useRenderCount, useScrollmapZones, useTrackHookCall, useViewIdContext, useVizLiveRender, useWhyDidYouUpdate, useWrapperRefHeight, useZonePositions, withPerformanceTracking };

package/dist/esm/index.mjs

@@ -1793,6 +1793,8 @@ const getElementAtPoint = (doc, x, y) => {
     return element;
 };
 function getElementHash(element) {
+    if (!element)
+        return null;
     return element.getAttribute('data-clarity-hashbeta') || element.getAttribute('data-clarity-hashalpha');
 }
 
@@ -3692,104 +3694,6 @@ const useClickedElement = ({ visualRef, getRect }) => {
     return { clickedElement, showMissingElement, shouldShowCallout };
 };
 
-const useElementCalloutVisible = ({ visualRef, getRect, positionMode }) => {
-    const selectedElement = useHeatmapClickContext((s) => s.selectedElement);
-    const setShouldShowCallout = useHeatmapClickContext((s) => s.setShouldShowCallout);
-    const widthScale = useHeatmapVizContext((s) => s.widthScale);
-    const dataInfo = useHeatmapDataContext((s) => s.dataInfo);
-    useEffect(() => {
-        const isAbsolute = positionMode === 'absolute';
-        if (isAbsolute)
-            return;
-        const hash = selectedElement?.hash;
-        if (!hash)
-            return;
-        const elementIsInViewportFn = () => {
-            const elementInfo = dataInfo?.clickMapMetrics?.[hash];
-            if (!elementInfo)
-                return;
-            const rect = getRect({ hash, selector: elementInfo.selector });
-            const isInViewport = isElementInViewport(rect, visualRef, widthScale);
-            setShouldShowCallout(isInViewport);
-        };
-        elementIsInViewportFn();
-        const handleUpdate = () => {
-            requestAnimationFrame(elementIsInViewportFn);
-        };
-        window.addEventListener('scroll', handleUpdate, true);
-        window.addEventListener('resize', handleUpdate);
-        visualRef?.current?.addEventListener('scroll', handleUpdate);
-        return () => {
-            window.removeEventListener('scroll', handleUpdate, true);
-            window.removeEventListener('resize', handleUpdate);
-            visualRef?.current?.removeEventListener('scroll', handleUpdate);
-        };
-    }, [selectedElement?.hash, visualRef, widthScale, dataInfo, getRect, setShouldShowCallout, positionMode]);
-    return {};
-};
-
-const useHeatmapEffects = ({ isVisible }) => {
-    // const selectedElement = useHeatmapClickContext((s) => s.selectedElement);
-    // const setShouldShowCallout = useHeatmapClickContext((s) => s.setShouldShowCallout);
-    const resetAll = () => {
-        // setShouldShowCallout(false);
-    };
-    // Reset khi ẩn
-    useEffect(() => {
-    }, [isVisible, resetAll]);
-    // Ẩn callout khi sidebar mở
-    // useEffect(() => {
-    //   if (isElementSidebarOpen && selectedElement) {
-    //     setShouldShowCallout(false);
-    //   } else if (!isElementSidebarOpen && selectedElement) {
-    //     setShouldShowCallout(true);
-    //   }
-    // }, [isElementSidebarOpen, selectedElement]);
-};
-
-const useHeatmapElementPosition = ({ iframeRef, wrapperRef, visualizer }) => {
-    const viewport = useHeatmapViewportByDevice();
-    const iframeHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
-    const widthScale = useHeatmapVizContext((s) => s.widthScale);
-    const getRect = useCallback((element) => {
-        const hash = element?.hash;
-        if (!iframeRef.current?.contentDocument || !hash || !visualizer)
-            return null;
-        let domElement = null;
-        try {
-            domElement = visualizer.get(hash);
-        }
-        catch (error) {
-            console.error('Visualizer error:', { hash, error });
-            return null;
-        }
-        if (!domElement)
-            return null;
-        const layout = getElementLayout(domElement);
-        if (!layout)
-            return null;
-        const parentEl = wrapperRef.current;
-        if (!parentEl)
-            return null;
-        const scrollOffset = parentEl.scrollTop / widthScale;
-        const adjustedTop = layout.top + scrollOffset;
-        const outOfBounds = adjustedTop < 0 ||
-            adjustedTop > (iframeHeight || Infinity) ||
-            layout.left < 0 ||
-            (typeof viewport.width === 'number' && layout.left > viewport.width);
-        if (outOfBounds)
-            return null;
-        return {
-            left: layout.left,
-            top: adjustedTop,
-            width: Math.min(layout.width, viewport.width || layout.width),
-            height: layout.height,
-            outOfBounds,
-        };
-    }, [iframeRef, wrapperRef, visualizer, viewport, iframeHeight, widthScale]);
-    return { getRect };
-};
-
 function getBoundingBox(element) {
     if (typeof element.getBoundingClientRect !== 'function') {
         return null;
@@ -3904,15 +3808,12 @@ const useHoveredElement = ({ iframeRef, getRect }) => {
         const iframeRect = iframe.getBoundingClientRect();
         const { x, y } = convertViewportToIframeCoords(event.clientX, event.clientY, iframeRect, widthScale);
         const targetElement = findTargetElement(doc, x, y, dataInfo);
-        if (!targetElement || !isValidElement(targetElement, dataInfo)) {
+        const hash = getElementHash(targetElement);
+        if (!targetElement || !hash || !isElmInDataInfo(hash, dataInfo)) {
             reset();
             return;
         }
-        const hash = getElementHash(targetElement);
-        if (hash)
-            return hash;
-        reset();
-        return;
+        return hash;
     }, [dataInfo, iframeRef, widthScale, reset]);
     const onHandleMouseMove = useCallback((event) => {
         if (isLoadingCanvas)
@@ -3924,7 +3825,7 @@ const useHoveredElement = ({ iframeRef, getRect }) => {
         }
         if (isHoveredElement(hash))
             return;
-        const selector = dataInfo?.clickMapMetrics?.[hash];
+        const selector = dataInfo.clickMapMetrics?.[hash];
         const rect = getRect({ hash, selector });
         const elementInfo = buildElementInfo(hash, rect, dataInfo);
         if (!elementInfo) {
@@ -4012,13 +3913,111 @@ const findTargetElement = (doc, x, y, heatmapInfo) => {
 const isIframeReady = (iframeRef, heatmapInfo) => {
     return !!(iframeRef.current?.contentDocument && heatmapInfo?.clickMapMetrics);
 };
-const isValidElement = (element, heatmapInfo) => {
-    if (!element)
-        return false;
-    const hash = getElementHash(element);
+const isElmInDataInfo = (hash, heatmapInfo) => {
     if (!hash)
         return false;
-    return !!heatmapInfo?.clickMapMetrics?.[hash];
+    const isInSortedElements = heatmapInfo?.sortedElements?.some((item) => item.hash === hash);
+    return !!isInSortedElements && !!heatmapInfo?.clickMapMetrics?.[hash];
+};
+
+const useElementCalloutVisible = ({ visualRef, getRect, positionMode }) => {
+    const selectedElement = useHeatmapClickContext((s) => s.selectedElement);
+    const setShouldShowCallout = useHeatmapClickContext((s) => s.setShouldShowCallout);
+    const widthScale = useHeatmapVizContext((s) => s.widthScale);
+    const dataInfo = useHeatmapDataContext((s) => s.dataInfo);
+    useEffect(() => {
+        const isAbsolute = positionMode === 'absolute';
+        if (isAbsolute)
+            return;
+        const hash = selectedElement?.hash;
+        if (!hash)
+            return;
+        const elementIsInViewportFn = () => {
+            if (!isElmInDataInfo(hash, dataInfo))
+                return;
+            const elementInfo = dataInfo?.clickMapMetrics?.[hash];
+            if (!elementInfo)
+                return;
+            const rect = getRect({ hash, selector: elementInfo.selector });
+            const isInViewport = isElementInViewport(rect, visualRef, widthScale);
+            setShouldShowCallout(isInViewport);
+        };
+        elementIsInViewportFn();
+        const handleUpdate = () => {
+            requestAnimationFrame(elementIsInViewportFn);
+        };
+        window.addEventListener('scroll', handleUpdate, true);
+        window.addEventListener('resize', handleUpdate);
+        visualRef?.current?.addEventListener('scroll', handleUpdate);
+        return () => {
+            window.removeEventListener('scroll', handleUpdate, true);
+            window.removeEventListener('resize', handleUpdate);
+            visualRef?.current?.removeEventListener('scroll', handleUpdate);
+        };
+    }, [selectedElement?.hash, visualRef, widthScale, dataInfo, getRect, setShouldShowCallout, positionMode]);
+    return {};
+};
+
+const useHeatmapEffects = ({ isVisible }) => {
+    // const selectedElement = useHeatmapClickContext((s) => s.selectedElement);
+    // const setShouldShowCallout = useHeatmapClickContext((s) => s.setShouldShowCallout);
+    const resetAll = () => {
+        // setShouldShowCallout(false);
+    };
+    // Reset khi ẩn
+    useEffect(() => {
+    }, [isVisible, resetAll]);
+    // Ẩn callout khi sidebar mở
+    // useEffect(() => {
+    //   if (isElementSidebarOpen && selectedElement) {
+    //     setShouldShowCallout(false);
+    //   } else if (!isElementSidebarOpen && selectedElement) {
+    //     setShouldShowCallout(true);
+    //   }
+    // }, [isElementSidebarOpen, selectedElement]);
+};
+
+const useHeatmapElementPosition = ({ iframeRef, wrapperRef, visualizer }) => {
+    const viewport = useHeatmapViewportByDevice();
+    const iframeHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
+    const widthScale = useHeatmapVizContext((s) => s.widthScale);
+    const getRect = useCallback((element) => {
+        const hash = element?.hash;
+        if (!iframeRef.current?.contentDocument || !hash || !visualizer)
+            return null;
+        let domElement = null;
+        try {
+            domElement = visualizer.get(hash);
+        }
+        catch (error) {
+            console.error('Visualizer error:', { hash, error });
+            return null;
+        }
+        if (!domElement)
+            return null;
+        const layout = getElementLayout(domElement);
+        if (!layout)
+            return null;
+        const parentEl = wrapperRef.current;
+        if (!parentEl)
+            return null;
+        const scrollOffset = parentEl.scrollTop / widthScale;
+        const adjustedTop = layout.top + scrollOffset;
+        const outOfBounds = adjustedTop < 0 ||
+            adjustedTop > (iframeHeight || Infinity) ||
+            layout.left < 0 ||
+            (typeof viewport.width === 'number' && layout.left > viewport.width);
+        if (outOfBounds)
+            return null;
+        return {
+            left: layout.left,
+            top: adjustedTop,
+            width: Math.min(layout.width, viewport.width || layout.width),
+            height: layout.height,
+            outOfBounds,
+        };
+    }, [iframeRef, wrapperRef, visualizer, viewport, iframeHeight, widthScale]);
+    return { getRect };
 };
 
 /**
@@ -8959,4 +8958,4 @@ const HeatmapLayout = ({ shopId, data, clickmap, clickAreas, scrollmap, attentio
     }
 };
 
-export { BACKDROP_CONFIG, DEFAULT_SIDEBAR_WIDTH, DEFAULT_VIEW_ID, DEFAULT_ZOOM_RATIO, EClickMode, EClickRankType, EClickType, EDeviceType, EHeatmapDataSource, EHeatmapMode, EHeatmapType, ELM_CALLOUT_CONFIG, EScrollType, GraphView, HEATMAP_CONFIG, HEATMAP_IFRAME, HEATMAP_STYLE, HeatmapLayout, ViewIdContext, Z_INDEX$1 as Z_INDEX, compareViewPerformance, convertViewportToIframeCoords, createStorePerformanceTracker, createViewContextHook, decodeArrayClarity, decodeClarity, downloadPerformanceReport, getCompareViewId, getMetricsByViewId, getPerformanceReportJSON, getScrollGradientColor, performanceLogger, printPerformanceSummary, scrollToElementIfNeeded, sendPerformanceReport, serializeAreas, trackStoreAction, useAreaCreation, useAreaEditMode, useAreaFilterVisible, useAreaHydration, useAreaInteraction, useAreaPositionsUpdater, useAreaRectSync, useAreaRendererContainer, useAreaTopAutoDetect, useClickedElement, useDebounceCallback, useElementCalloutVisible, useHeatmapAreaClickContext, useHeatmapCanvas, useHeatmapClickContext, useHeatmapCompareStore, useHeatmapConfigStore, useHeatmapCopyView, useHeatmapDataContext, useHeatmapEffects, useHeatmapElementPosition, useHeatmapHoverContext, useHeatmapLiveContext, useHeatmapRenderByMode, useHeatmapScale, useHeatmapScroll, useHeatmapScrollContext, useHeatmapSettingContext, useHeatmapViewportByDevice, useHeatmapVizContext, useHeatmapVizRectContext, useHoveredElement, useMeasureFunction, useRegisterConfig, useRegisterControl, useRegisterData, useRegisterHeatmap, useRenderCount, useScrollmapZones, useTrackHookCall, useViewIdContext, useVizLiveRender, useWhyDidYouUpdate, useWrapperRefHeight, useZonePositions, withPerformanceTracking };
+export { BACKDROP_CONFIG, DEFAULT_SIDEBAR_WIDTH, DEFAULT_VIEW_ID, DEFAULT_ZOOM_RATIO, EClickMode, EClickRankType, EClickType, EDeviceType, EHeatmapDataSource, EHeatmapMode, EHeatmapType, ELM_CALLOUT_CONFIG, EScrollType, GraphView, HEATMAP_CONFIG, HEATMAP_IFRAME, HEATMAP_STYLE, HeatmapLayout, ViewIdContext, Z_INDEX$1 as Z_INDEX, compareViewPerformance, convertViewportToIframeCoords, createStorePerformanceTracker, createViewContextHook, decodeArrayClarity, decodeClarity, downloadPerformanceReport, getCompareViewId, getMetricsByViewId, getPerformanceReportJSON, getScrollGradientColor, isElmInDataInfo, performanceLogger, printPerformanceSummary, scrollToElementIfNeeded, sendPerformanceReport, serializeAreas, trackStoreAction, useAreaCreation, useAreaEditMode, useAreaFilterVisible, useAreaHydration, useAreaInteraction, useAreaPositionsUpdater, useAreaRectSync, useAreaRendererContainer, useAreaTopAutoDetect, useClickedElement, useDebounceCallback, useElementCalloutVisible, useHeatmapAreaClickContext, useHeatmapCanvas, useHeatmapClickContext, useHeatmapCompareStore, useHeatmapConfigStore, useHeatmapCopyView, useHeatmapDataContext, useHeatmapEffects, useHeatmapElementPosition, useHeatmapHoverContext, useHeatmapLiveContext, useHeatmapRenderByMode, useHeatmapScale, useHeatmapScroll, useHeatmapScrollContext, useHeatmapSettingContext, useHeatmapViewportByDevice, useHeatmapVizContext, useHeatmapVizRectContext, useHoveredElement, useMeasureFunction, useRegisterConfig, useRegisterControl, useRegisterData, useRegisterHeatmap, useRenderCount, useScrollmapZones, useTrackHookCall, useViewIdContext, useVizLiveRender, useWhyDidYouUpdate, useWrapperRefHeight, useZonePositions, withPerformanceTracking };

package/dist/esm/utils/dom.d.ts

@@ -25,5 +25,5 @@ export declare function getElementsAtPoint<T = Element>(doc: Document | ShadowRo
  * Get the element at a specific point (x, y)
  */
 export declare const getElementAtPoint: (doc: Document, x: number, y: number) => HTMLElement | null;
-export declare function getElementHash(element: HTMLElement): string | null;
+export declare function getElementHash(element: HTMLElement | null): string | null;
 //# sourceMappingURL=dom.d.ts.map

package/dist/esm/utils/dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../src/utils/dom.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,OAAO,CAAC;IAEnE;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,GAAG,CAAC,UAAU,CAAC,CAAC;CACtC;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,GAAG,OAAO,EAC5C,GAAG,EAAE,QAAQ,GAAG,UAAU,EAC1B,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,OAAO,GAAE,0BAA+B,GACvC,CAAC,EAAE,CA2BL;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,KAAK,QAAQ,EAAE,GAAG,MAAM,EAAE,GAAG,MAAM,KAAG,WAAW,GAAG,IAcrF,CAAC;AAEF,wBAAgB,cAAc,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM,GAAG,IAAI,CAElE"}
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../src/utils/dom.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,OAAO,CAAC;IAEnE;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,GAAG,CAAC,UAAU,CAAC,CAAC;CACtC;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,GAAG,OAAO,EAC5C,GAAG,EAAE,QAAQ,GAAG,UAAU,EAC1B,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,OAAO,GAAE,0BAA+B,GACvC,CAAC,EAAE,CA2BL;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,KAAK,QAAQ,EAAE,GAAG,MAAM,EAAE,GAAG,MAAM,KAAG,WAAW,GAAG,IAcrF,CAAC;AAEF,wBAAgB,cAAc,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAGzE"}

package/dist/umd/hooks/viz-elm/useElementCalloutVisible.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useElementCalloutVisible.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-elm/useElementCalloutVisible.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAM/C,UAAU,MAAM;IACd,SAAS,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IACjC,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,KAAK,GAAG,CAAC;IAC3B,YAAY,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;CACrC;AAED,eAAO,MAAM,wBAAwB,GAAI,sCAAsC,MAAM,OAuCpF,CAAC"}
+{"version":3,"file":"useElementCalloutVisible.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-elm/useElementCalloutVisible.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAO/C,UAAU,MAAM;IACd,SAAS,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IACjC,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,KAAK,GAAG,CAAC;IAC3B,YAAY,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;CACrC;AAED,eAAO,MAAM,wBAAwB,GAAI,sCAAsC,MAAM,OAyCpF,CAAC"}

package/dist/umd/hooks/viz-elm/useHoveredElement.d.ts

@@ -1,4 +1,4 @@
-import type { IHeatmapRef } from '../../types';
+import type { IHeatmapInfo, IHeatmapRef } from '../../types';
 interface Params {
     iframeRef: IHeatmapRef['Iframe'];
     getRect: (el?: any) => any;
@@ -12,5 +12,6 @@ export declare const convertViewportToIframeCoords: (clientX: number, clientY: n
     x: number;
     y: number;
 };
+export declare const isElmInDataInfo: (hash: string | null, heatmapInfo?: IHeatmapInfo) => boolean;
 export {};
 //# sourceMappingURL=useHoveredElement.d.ts.map

package/dist/umd/hooks/viz-elm/useHoveredElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useHoveredElement.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-elm/useHoveredElement.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAgB,WAAW,EAAE,MAAM,aAAa,CAAC;AAe7D,UAAU,MAAM;IACd,SAAS,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IACjC,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,KAAK,GAAG,CAAC;CAC5B;AAED,eAAO,MAAM,iBAAiB,GAAI,wBAAwB,MAAM;uEAiDpD,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC;;0BA4B/B,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,SAAS,MAAM;CA6B3D,CAAC;AAiBF,eAAO,MAAM,6BAA6B,GACxC,SAAS,MAAM,EACf,SAAS,MAAM,EACf,YAAY,OAAO,EACnB,OAAO,MAAM,KACZ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAUxB,CAAC"}
+{"version":3,"file":"useHoveredElement.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-elm/useHoveredElement.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAe7D,UAAU,MAAM;IACd,SAAS,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IACjC,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,KAAK,GAAG,CAAC;CAC5B;AAED,eAAO,MAAM,iBAAiB,GAAI,wBAAwB,MAAM;uEA8CpD,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC;;0BA4B/B,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,SAAS,MAAM;CA6B3D,CAAC;AAiBF,eAAO,MAAM,6BAA6B,GACxC,SAAS,MAAM,EACf,SAAS,MAAM,EACf,YAAY,OAAO,EACnB,OAAO,MAAM,KACZ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAUxB,CAAC;AAsCF,eAAO,MAAM,eAAe,GAAI,MAAM,MAAM,GAAG,IAAI,EAAE,cAAc,YAAY,KAAG,OAKjF,CAAC"}