@gemx-dev/heatmap-react 3.5.29 → 3.5.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"version":3,"file":"HeatmapLayout.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/HeatmapLayout.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAI5D,UAAU,kBAAkB;IAC1B,IAAI,CAAC,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;IAC3B,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AACD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAiDtD,CAAC"}
1
+ {"version":3,"file":"HeatmapLayout.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/HeatmapLayout.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAI5D,UAAU,kBAAkB;IAC1B,IAAI,CAAC,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;IAC3B,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AACD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAoDtD,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"ElementCallout.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/ElementCallout.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,UAAU,mBAAmB;IAC3B,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;CAC1C;AAID,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA2TxD,CAAC"}
1
+ {"version":3,"file":"ElementCallout.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/ElementCallout.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,UAAU,mBAAmB;IAC3B,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;CAC1C;AAID,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA0UxD,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"VizElements.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/VizElements.tsx"],"names":[],"mappings":"AAKA,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACrD,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C,UAAU,EAAE,MAAM,CAAC;CACpB;AACD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAmElD,CAAC"}
1
+ {"version":3,"file":"VizElements.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/VizElements.tsx"],"names":[],"mappings":"AAIA,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACrD,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C,UAAU,EAAE,MAAM,CAAC;CACpB;AACD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAiElD,CAAC"}
@@ -1,3 +1,3 @@
1
1
  import { IHeatmapConfig } from '../types';
2
- export declare const recreateIframe: (iframeRef: React.RefObject<HTMLIFrameElement | null>, config?: IHeatmapConfig) => HTMLIFrameElement | null | undefined;
2
+ export declare const recreateIframe: (iframeRef: React.RefObject<HTMLIFrameElement | null>, config?: IHeatmapConfig) => HTMLIFrameElement | undefined;
3
3
  //# sourceMappingURL=iframe.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"iframe.d.ts","sourceRoot":"","sources":["../../src/helpers/iframe.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,eAAO,MAAM,cAAc,GACzB,WAAW,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,EACpD,SAAS,cAAc,yCA2BxB,CAAC"}
1
+ {"version":3,"file":"iframe.d.ts","sourceRoot":"","sources":["../../src/helpers/iframe.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,eAAO,MAAM,cAAc,GACzB,WAAW,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,EACpD,SAAS,cAAc,kCA2BxB,CAAC"}
package/dist/esm/index.js CHANGED
@@ -4,7 +4,6 @@ import { useNodesState, ReactFlow, Controls, Background } from '@xyflow/react';
4
4
  import { useEffect, useMemo, useState, useCallback, useRef, Fragment as Fragment$1 } from 'react';
5
5
  import { create } from 'zustand';
6
6
  import { Visualizer } from '@gemx-dev/clarity-visualize';
7
- import { createPortal } from 'react-dom';
8
7
 
9
8
  const initialNodes = { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } };
10
9
  const GraphView = ({ children, width, height }) => {
@@ -857,7 +856,7 @@ const ElementCallout = ({ element, target, totalClicks, isSecondary, isRecording
857
856
  parentRef?.current?.removeEventListener('scroll', handleUpdate);
858
857
  };
859
858
  }, [target, parentRef]);
860
- const calloutContent = (jsxs("div", { ref: calloutRef, className: `clarity-callout clarity-callout--${position.placement} ${isSecondary ? 'clarity-callout--secondary' : ''}`, style: {
859
+ (jsxs("div", { ref: calloutRef, className: `clarity-callout clarity-callout--${position.placement} ${isSecondary ? 'clarity-callout--secondary' : ''}`, style: {
861
860
  position: 'fixed',
862
861
  top: position.top,
863
862
  left: position.left,
@@ -1006,8 +1005,20 @@ const ElementCallout = ({ element, target, totalClicks, isSecondary, isRecording
1006
1005
  height: 14px;
1007
1006
  }
1008
1007
  ` })] }));
1009
- // Render to body using Portal
1010
- return createPortal(calloutContent, document.body);
1008
+ const [portalContainer, setPortalContainer] = useState(null);
1009
+ useEffect(() => {
1010
+ const container = document.querySelector('#gx-hm-project-portal');
1011
+ if (container instanceof HTMLElement) {
1012
+ setPortalContainer(container);
1013
+ }
1014
+ else {
1015
+ console.warn('Portal container #gx-hm-project-portal not found!');
1016
+ }
1017
+ }, []);
1018
+ if (!portalContainer) {
1019
+ return jsx(Fragment, {});
1020
+ }
1021
+ // return createPortal(calloutContent, portalContainer);
1011
1022
  };
1012
1023
 
1013
1024
  const RankBadge = ({ index, elementRect, widthScale, clickOnElement, }) => {
@@ -1108,7 +1119,6 @@ const HeatmapElements = (props) => {
1108
1119
  };
1109
1120
 
1110
1121
  const VizElements = ({ width, height, iframeRef, wrapperRef, widthScale, }) => {
1111
- useHeatmapDataStore((state) => state.data);
1112
1122
  const heatmapInfo = {
1113
1123
  sortedElements: [
1114
1124
  {
@@ -1279,10 +1289,10 @@ const HeatmapLayout = ({ data, clickmap, header, toolbar, sidebar, }) => {
1279
1289
  useEffect(() => {
1280
1290
  handleSetClickmap(clickmap);
1281
1291
  }, [clickmap]);
1282
- return (jsx(BoxStack, { id: "gx-hm-project", flexDirection: "column", flex: "1", height: "100%", children: jsx(BoxStack, { id: "gx-hm-project-content", flexDirection: "column", flex: "1", children: jsx("div", { style: {
1283
- minHeight: '100%',
1284
- display: 'flex',
1285
- }, children: jsx(WrapperLayout, { header: header, toolbar: toolbar, sidebar: sidebar }) }) }) }));
1292
+ return (jsxs(Fragment, { children: [jsx(BoxStack, { id: "gx-hm-project", flexDirection: "column", flex: "1", height: "100%", children: jsx(BoxStack, { id: "gx-hm-project-content", flexDirection: "column", flex: "1", children: jsx("div", { style: {
1293
+ minHeight: '100%',
1294
+ display: 'flex',
1295
+ }, children: jsx(WrapperLayout, { header: header, toolbar: toolbar, sidebar: sidebar }) }) }) }), jsx("div", { id: "gx-hm-project-portal" })] }));
1286
1296
  };
1287
1297
 
1288
1298
  var PanelContent;
@@ -4,7 +4,6 @@ import { useNodesState, ReactFlow, Controls, Background } from '@xyflow/react';
4
4
  import { useEffect, useMemo, useState, useCallback, useRef, Fragment as Fragment$1 } from 'react';
5
5
  import { create } from 'zustand';
6
6
  import { Visualizer } from '@gemx-dev/clarity-visualize';
7
- import { createPortal } from 'react-dom';
8
7
 
9
8
  const initialNodes = { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } };
10
9
  const GraphView = ({ children, width, height }) => {
@@ -857,7 +856,7 @@ const ElementCallout = ({ element, target, totalClicks, isSecondary, isRecording
857
856
  parentRef?.current?.removeEventListener('scroll', handleUpdate);
858
857
  };
859
858
  }, [target, parentRef]);
860
- const calloutContent = (jsxs("div", { ref: calloutRef, className: `clarity-callout clarity-callout--${position.placement} ${isSecondary ? 'clarity-callout--secondary' : ''}`, style: {
859
+ (jsxs("div", { ref: calloutRef, className: `clarity-callout clarity-callout--${position.placement} ${isSecondary ? 'clarity-callout--secondary' : ''}`, style: {
861
860
  position: 'fixed',
862
861
  top: position.top,
863
862
  left: position.left,
@@ -1006,8 +1005,20 @@ const ElementCallout = ({ element, target, totalClicks, isSecondary, isRecording
1006
1005
  height: 14px;
1007
1006
  }
1008
1007
  ` })] }));
1009
- // Render to body using Portal
1010
- return createPortal(calloutContent, document.body);
1008
+ const [portalContainer, setPortalContainer] = useState(null);
1009
+ useEffect(() => {
1010
+ const container = document.querySelector('#gx-hm-project-portal');
1011
+ if (container instanceof HTMLElement) {
1012
+ setPortalContainer(container);
1013
+ }
1014
+ else {
1015
+ console.warn('Portal container #gx-hm-project-portal not found!');
1016
+ }
1017
+ }, []);
1018
+ if (!portalContainer) {
1019
+ return jsx(Fragment, {});
1020
+ }
1021
+ // return createPortal(calloutContent, portalContainer);
1011
1022
  };
1012
1023
 
1013
1024
  const RankBadge = ({ index, elementRect, widthScale, clickOnElement, }) => {
@@ -1108,7 +1119,6 @@ const HeatmapElements = (props) => {
1108
1119
  };
1109
1120
 
1110
1121
  const VizElements = ({ width, height, iframeRef, wrapperRef, widthScale, }) => {
1111
- useHeatmapDataStore((state) => state.data);
1112
1122
  const heatmapInfo = {
1113
1123
  sortedElements: [
1114
1124
  {
@@ -1279,10 +1289,10 @@ const HeatmapLayout = ({ data, clickmap, header, toolbar, sidebar, }) => {
1279
1289
  useEffect(() => {
1280
1290
  handleSetClickmap(clickmap);
1281
1291
  }, [clickmap]);
1282
- return (jsx(BoxStack, { id: "gx-hm-project", flexDirection: "column", flex: "1", height: "100%", children: jsx(BoxStack, { id: "gx-hm-project-content", flexDirection: "column", flex: "1", children: jsx("div", { style: {
1283
- minHeight: '100%',
1284
- display: 'flex',
1285
- }, children: jsx(WrapperLayout, { header: header, toolbar: toolbar, sidebar: sidebar }) }) }) }));
1292
+ return (jsxs(Fragment, { children: [jsx(BoxStack, { id: "gx-hm-project", flexDirection: "column", flex: "1", height: "100%", children: jsx(BoxStack, { id: "gx-hm-project-content", flexDirection: "column", flex: "1", children: jsx("div", { style: {
1293
+ minHeight: '100%',
1294
+ display: 'flex',
1295
+ }, children: jsx(WrapperLayout, { header: header, toolbar: toolbar, sidebar: sidebar }) }) }) }), jsx("div", { id: "gx-hm-project-portal" })] }));
1286
1296
  };
1287
1297
 
1288
1298
  var PanelContent;
@@ -1 +1 @@
1
- {"version":3,"file":"HeatmapLayout.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/HeatmapLayout.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAI5D,UAAU,kBAAkB;IAC1B,IAAI,CAAC,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;IAC3B,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AACD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAiDtD,CAAC"}
1
+ {"version":3,"file":"HeatmapLayout.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/HeatmapLayout.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAI5D,UAAU,kBAAkB;IAC1B,IAAI,CAAC,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;IAC3B,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AACD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAoDtD,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"ElementCallout.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/ElementCallout.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,UAAU,mBAAmB;IAC3B,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;CAC1C;AAID,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA2TxD,CAAC"}
1
+ {"version":3,"file":"ElementCallout.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/ElementCallout.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,UAAU,mBAAmB;IAC3B,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;CAC1C;AAID,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA0UxD,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"VizElements.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/VizElements.tsx"],"names":[],"mappings":"AAKA,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACrD,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C,UAAU,EAAE,MAAM,CAAC;CACpB;AACD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAmElD,CAAC"}
1
+ {"version":3,"file":"VizElements.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/VizElements.tsx"],"names":[],"mappings":"AAIA,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACrD,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C,UAAU,EAAE,MAAM,CAAC;CACpB;AACD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAiElD,CAAC"}
@@ -1,3 +1,3 @@
1
1
  import { IHeatmapConfig } from '../types';
2
- export declare const recreateIframe: (iframeRef: React.RefObject<HTMLIFrameElement | null>, config?: IHeatmapConfig) => HTMLIFrameElement | null | undefined;
2
+ export declare const recreateIframe: (iframeRef: React.RefObject<HTMLIFrameElement | null>, config?: IHeatmapConfig) => HTMLIFrameElement | undefined;
3
3
  //# sourceMappingURL=iframe.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"iframe.d.ts","sourceRoot":"","sources":["../../src/helpers/iframe.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,eAAO,MAAM,cAAc,GACzB,WAAW,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,EACpD,SAAS,cAAc,yCA2BxB,CAAC"}
1
+ {"version":3,"file":"iframe.d.ts","sourceRoot":"","sources":["../../src/helpers/iframe.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,eAAO,MAAM,cAAc,GACzB,WAAW,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,EACpD,SAAS,cAAc,kCA2BxB,CAAC"}