@contentstack/live-preview-utils 3.1.1 → 3.2.0-alpha.1

package/dist/legacy/visualBuilder/components/Collab/ThreadPopup/loader/ThreadBody.js

@@ -0,0 +1,72 @@
+import "../../../../../chunk-5WRI5ZAA.js";
+
+// src/visualBuilder/components/Collab/ThreadPopup/loader/ThreadBody.tsx
+import SkeletonTile from "../../SkeletonTile/SkeletonTile.js";
+import { collabStyles } from "../../../../collab.style.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "preact/jsx-runtime";
+var ThreadBodyLoader = () => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames(
+        "collab-thread-body-comment--loader",
+        collabStyles()["collab-thread-body-comment--loader"]
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex" }, children: [
+          /* @__PURE__ */ jsx(
+            SkeletonTile,
+            {
+              numberOfTiles: 1,
+              tileHeight: 32,
+              tileWidth: 32,
+              tileBottomSpace: 0,
+              tileTopSpace: 0,
+              tileleftSpace: 0,
+              tileRadius: 50
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SkeletonTile,
+            {
+              numberOfTiles: 2,
+              tileHeight: 10,
+              tileWidth: 130,
+              tileBottomSpace: 7,
+              tileTopSpace: 3,
+              tileleftSpace: 10
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          SkeletonTile,
+          {
+            numberOfTiles: 1,
+            tileHeight: 14,
+            tileWidth: 300,
+            tileBottomSpace: 5,
+            tileTopSpace: 0,
+            tileleftSpace: 0
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SkeletonTile,
+          {
+            numberOfTiles: 1,
+            tileHeight: 14,
+            tileWidth: 230,
+            tileBottomSpace: 0,
+            tileTopSpace: 0,
+            tileleftSpace: 0
+          }
+        )
+      ]
+    }
+  );
+};
+var ThreadBody_default = ThreadBodyLoader;
+export {
+  ThreadBody_default as default
+};
+//# sourceMappingURL=ThreadBody.js.map

package/dist/legacy/visualBuilder/components/Collab/ThreadPopup/loader/ThreadBody.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/visualBuilder/components/Collab/ThreadPopup/loader/ThreadBody.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport SkeletonTile from \"../../SkeletonTile/SkeletonTile\";\nimport { collabStyles } from \"../../../../collab.style\";\nimport classNames from \"classnames\";\n\nconst ThreadBodyLoader = () => {\n    return (\n        <div\n            className={classNames(\n                \"collab-thread-body-comment--loader\",\n                collabStyles()[\"collab-thread-body-comment--loader\"]\n            )}\n        >\n            <div style={{ display: \"flex\" }}>\n                <SkeletonTile\n                    numberOfTiles={1}\n                    tileHeight={32}\n                    tileWidth={32}\n                    tileBottomSpace={0}\n                    tileTopSpace={0}\n                    tileleftSpace={0}\n                    tileRadius={50}\n                />\n                <SkeletonTile\n                    numberOfTiles={2}\n                    tileHeight={10}\n                    tileWidth={130}\n                    tileBottomSpace={7}\n                    tileTopSpace={3}\n                    tileleftSpace={10}\n                />\n            </div>\n            <SkeletonTile\n                numberOfTiles={1}\n                tileHeight={14}\n                tileWidth={300}\n                tileBottomSpace={5}\n                tileTopSpace={0}\n                tileleftSpace={0}\n            />\n            <SkeletonTile\n                numberOfTiles={1}\n                tileHeight={14}\n                tileWidth={230}\n                tileBottomSpace={0}\n                tileTopSpace={0}\n                tileleftSpace={0}\n            />\n        </div>\n    );\n};\n\nexport default ThreadBodyLoader;\n"],"mappings":";;;AACA,OAAO,kBAAkB;AACzB,SAAS,oBAAoB;AAC7B,OAAO,gBAAgB;AAUX,SACI,KADJ;AARZ,IAAM,mBAAmB,MAAM;AAC3B,SACI;AAAA,IAAC;AAAA;AAAA,MACG,WAAW;AAAA,QACP;AAAA,QACA,aAAa,EAAE,oCAAoC;AAAA,MACvD;AAAA,MAEA;AAAA,6BAAC,SAAI,OAAO,EAAE,SAAS,OAAO,GAC1B;AAAA;AAAA,YAAC;AAAA;AAAA,cACG,eAAe;AAAA,cACf,YAAY;AAAA,cACZ,WAAW;AAAA,cACX,iBAAiB;AAAA,cACjB,cAAc;AAAA,cACd,eAAe;AAAA,cACf,YAAY;AAAA;AAAA,UAChB;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACG,eAAe;AAAA,cACf,YAAY;AAAA,cACZ,WAAW;AAAA,cACX,iBAAiB;AAAA,cACjB,cAAc;AAAA,cACd,eAAe;AAAA;AAAA,UACnB;AAAA,WACJ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACG,eAAe;AAAA,YACf,YAAY;AAAA,YACZ,WAAW;AAAA,YACX,iBAAiB;AAAA,YACjB,cAAc;AAAA,YACd,eAAe;AAAA;AAAA,QACnB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACG,eAAe;AAAA,YACf,YAAY;AAAA,YACZ,WAAW;AAAA,YACX,iBAAiB;AAAA,YACjB,cAAc;AAAA,YACd,eAAe;AAAA;AAAA,QACnB;AAAA;AAAA;AAAA,EACJ;AAER;AAEA,IAAO,qBAAQ;","names":[]}

package/dist/legacy/visualBuilder/components/Collab/Tooltip/Tooltip.cjs

@@ -0,0 +1,126 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/visualBuilder/components/Collab/Tooltip/Tooltip.tsx
+var Tooltip_exports = {};
+__export(Tooltip_exports, {
+  default: () => Tooltip_default
+});
+module.exports = __toCommonJS(Tooltip_exports);
+var import_hooks = require("preact/hooks");
+var import_collab = require("../../../collab.style.cjs");
+var import_classnames = __toESM(require("classnames"), 1);
+var import_jsx_runtime = require("preact/jsx-runtime");
+var Tooltip = (props) => {
+  const {
+    content,
+    children,
+    position = "bottom",
+    className,
+    testId,
+    ...otherProps
+  } = props;
+  const [isVisible, setIsVisible] = (0, import_hooks.useState)(false);
+  const tooltipRef = (0, import_hooks.useRef)(null);
+  const targetRef = (0, import_hooks.useRef)(null);
+  (0, import_hooks.useEffect)(() => {
+    const positionTooltip = () => {
+      if (!isVisible || !tooltipRef.current || !targetRef.current) return;
+      const targetRect = targetRef.current.getBoundingClientRect();
+      const tooltipRect = tooltipRef.current.getBoundingClientRect();
+      const margin = 8;
+      const positions = {
+        bottom: {
+          top: targetRect.bottom + margin,
+          left: targetRect.left + (targetRect.width - tooltipRect.width) / 2
+        },
+        top: {
+          top: targetRect.top - tooltipRect.height - margin,
+          left: targetRect.left + (targetRect.width - tooltipRect.width) / 2
+        },
+        left: {
+          top: targetRect.top + (targetRect.height - tooltipRect.height) / 2,
+          left: targetRect.left - tooltipRect.width - margin
+        },
+        right: {
+          top: targetRect.top + (targetRect.height - tooltipRect.height) / 2,
+          left: targetRect.right + margin
+        }
+      };
+      const coords = positions[position];
+      Object.assign(tooltipRef.current.style, {
+        top: `${coords.top}px`,
+        left: `${coords.left}px`
+      });
+    };
+    positionTooltip();
+    window.addEventListener("scroll", positionTooltip);
+    window.addEventListener("resize", positionTooltip);
+    return () => {
+      window.removeEventListener("scroll", positionTooltip);
+      window.removeEventListener("resize", positionTooltip);
+    };
+  }, [isVisible, position]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref: targetRef,
+      className: (0, import_classnames.default)(
+        "collab-tooltip--wrapper",
+        (0, import_collab.collabStyles)()["collab-tooltip--wrapper"],
+        className
+      ),
+      onMouseEnter: () => setIsVisible(true),
+      onMouseLeave: () => setIsVisible(false),
+      "data-testid": testId,
+      ...otherProps,
+      children: [
+        children,
+        isVisible && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            ref: tooltipRef,
+            className: (0, import_classnames.default)(
+              "collab-tooltip",
+              (0, import_collab.collabStyles)()["collab-tooltip"]
+            ),
+            role: "tooltip",
+            "aria-hidden": !isVisible,
+            children: content
+          }
+        )
+      ]
+    }
+  );
+};
+Tooltip.defaultProps = {
+  testId: "collab-tooltip"
+};
+var Tooltip_default = Tooltip;
+//# sourceMappingURL=Tooltip.cjs.map

package/dist/legacy/visualBuilder/components/Collab/Tooltip/Tooltip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/Tooltip/Tooltip.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useState, useRef, useEffect } from \"preact/hooks\";\nimport { collabStyles } from \"../../../collab.style\";\nimport classNames from \"classnames\";\n\ninterface TooltipProps {\n    content: string;\n    children: React.ReactNode;\n    position?: \"top\" | \"bottom\" | \"left\" | \"right\";\n    className?: string;\n    testId?: string;\n}\n\ninterface PositionCoords {\n    top: number;\n    left: number;\n}\n\ninterface Positions {\n    bottom: PositionCoords;\n    top: PositionCoords;\n    left: PositionCoords;\n    right: PositionCoords;\n}\n\nconst Tooltip = (props: TooltipProps): JSX.Element => {\n    const {\n        content,\n        children,\n        position = \"bottom\",\n        className,\n        testId,\n        ...otherProps\n    } = props;\n    const [isVisible, setIsVisible] = useState<boolean>(false);\n    const tooltipRef = useRef<HTMLDivElement>(null);\n    const targetRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        const positionTooltip = (): void => {\n            if (!isVisible || !tooltipRef.current || !targetRef.current) return;\n\n            const targetRect: DOMRect =\n                targetRef.current.getBoundingClientRect();\n            const tooltipRect: DOMRect =\n                tooltipRef.current.getBoundingClientRect();\n            const margin: number = 8;\n\n            const positions: Positions = {\n                bottom: {\n                    top: targetRect.bottom + margin,\n                    left:\n                        targetRect.left +\n                        (targetRect.width - tooltipRect.width) / 2,\n                },\n                top: {\n                    top: targetRect.top - tooltipRect.height - margin,\n                    left:\n                        targetRect.left +\n                        (targetRect.width - tooltipRect.width) / 2,\n                },\n                left: {\n                    top:\n                        targetRect.top +\n                        (targetRect.height - tooltipRect.height) / 2,\n                    left: targetRect.left - tooltipRect.width - margin,\n                },\n                right: {\n                    top:\n                        targetRect.top +\n                        (targetRect.height - tooltipRect.height) / 2,\n                    left: targetRect.right + margin,\n                },\n            };\n\n            const coords: PositionCoords = positions[position];\n            Object.assign(tooltipRef.current.style, {\n                top: `${coords.top}px`,\n                left: `${coords.left}px`,\n            });\n        };\n\n        positionTooltip();\n        window.addEventListener(\"scroll\", positionTooltip);\n        window.addEventListener(\"resize\", positionTooltip);\n\n        return () => {\n            window.removeEventListener(\"scroll\", positionTooltip);\n            window.removeEventListener(\"resize\", positionTooltip);\n        };\n    }, [isVisible, position]);\n\n    return (\n        <div\n            ref={targetRef}\n            className={classNames(\n                \"collab-tooltip--wrapper\",\n                collabStyles()[\"collab-tooltip--wrapper\"],\n                className\n            )}\n            onMouseEnter={() => setIsVisible(true)}\n            onMouseLeave={() => setIsVisible(false)}\n            data-testid={testId}\n            {...otherProps}\n        >\n            {children}\n            {isVisible && (\n                <div\n                    ref={tooltipRef}\n                    className={classNames(\n                        \"collab-tooltip\",\n                        collabStyles()[\"collab-tooltip\"]\n                    )}\n                    role=\"tooltip\"\n                    aria-hidden={!isVisible}\n                >\n                    {content}\n                </div>\n            )}\n        </div>\n    );\n};\n\nTooltip.defaultProps = {\n    testId: \"collab-tooltip\",\n} as Partial<TooltipProps>;\n\nexport default Tooltip;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA4C;AAC5C,oBAA6B;AAC7B,wBAAuB;AA0Ff;AApER,IAAM,UAAU,CAAC,UAAqC;AAClD,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACP,IAAI;AACJ,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAkB,KAAK;AACzD,QAAM,iBAAa,qBAAuB,IAAI;AAC9C,QAAM,gBAAY,qBAAuB,IAAI;AAE7C,8BAAU,MAAM;AACZ,UAAM,kBAAkB,MAAY;AAChC,UAAI,CAAC,aAAa,CAAC,WAAW,WAAW,CAAC,UAAU,QAAS;AAE7D,YAAM,aACF,UAAU,QAAQ,sBAAsB;AAC5C,YAAM,cACF,WAAW,QAAQ,sBAAsB;AAC7C,YAAM,SAAiB;AAEvB,YAAM,YAAuB;AAAA,QACzB,QAAQ;AAAA,UACJ,KAAK,WAAW,SAAS;AAAA,UACzB,MACI,WAAW,QACV,WAAW,QAAQ,YAAY,SAAS;AAAA,QACjD;AAAA,QACA,KAAK;AAAA,UACD,KAAK,WAAW,MAAM,YAAY,SAAS;AAAA,UAC3C,MACI,WAAW,QACV,WAAW,QAAQ,YAAY,SAAS;AAAA,QACjD;AAAA,QACA,MAAM;AAAA,UACF,KACI,WAAW,OACV,WAAW,SAAS,YAAY,UAAU;AAAA,UAC/C,MAAM,WAAW,OAAO,YAAY,QAAQ;AAAA,QAChD;AAAA,QACA,OAAO;AAAA,UACH,KACI,WAAW,OACV,WAAW,SAAS,YAAY,UAAU;AAAA,UAC/C,MAAM,WAAW,QAAQ;AAAA,QAC7B;AAAA,MACJ;AAEA,YAAM,SAAyB,UAAU,QAAQ;AACjD,aAAO,OAAO,WAAW,QAAQ,OAAO;AAAA,QACpC,KAAK,GAAG,OAAO,GAAG;AAAA,QAClB,MAAM,GAAG,OAAO,IAAI;AAAA,MACxB,CAAC;AAAA,IACL;AAEA,oBAAgB;AAChB,WAAO,iBAAiB,UAAU,eAAe;AACjD,WAAO,iBAAiB,UAAU,eAAe;AAEjD,WAAO,MAAM;AACT,aAAO,oBAAoB,UAAU,eAAe;AACpD,aAAO,oBAAoB,UAAU,eAAe;AAAA,IACxD;AAAA,EACJ,GAAG,CAAC,WAAW,QAAQ,CAAC;AAExB,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,eAAW,kBAAAA;AAAA,QACP;AAAA,YACA,4BAAa,EAAE,yBAAyB;AAAA,QACxC;AAAA,MACJ;AAAA,MACA,cAAc,MAAM,aAAa,IAAI;AAAA,MACrC,cAAc,MAAM,aAAa,KAAK;AAAA,MACtC,eAAa;AAAA,MACZ,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,aACG;AAAA,UAAC;AAAA;AAAA,YACG,KAAK;AAAA,YACL,eAAW,kBAAAA;AAAA,cACP;AAAA,kBACA,4BAAa,EAAE,gBAAgB;AAAA,YACnC;AAAA,YACA,MAAK;AAAA,YACL,eAAa,CAAC;AAAA,YAEb;AAAA;AAAA,QACL;AAAA;AAAA;AAAA,EAER;AAER;AAEA,QAAQ,eAAe;AAAA,EACnB,QAAQ;AACZ;AAEA,IAAO,kBAAQ;","names":["classNames"]}

package/dist/legacy/visualBuilder/components/Collab/Tooltip/Tooltip.d.cts

@@ -0,0 +1,17 @@
+import React from 'preact/compat';
+
+/** @jsxImportSource preact */
+
+interface TooltipProps {
+    content: string;
+    children: React.ReactNode;
+    position?: "top" | "bottom" | "left" | "right";
+    className?: string;
+    testId?: string;
+}
+declare const Tooltip: {
+    (props: TooltipProps): JSX.Element;
+    defaultProps: Partial<TooltipProps>;
+};
+
+export { Tooltip as default };

package/dist/legacy/visualBuilder/components/Collab/Tooltip/Tooltip.d.ts

@@ -0,0 +1,17 @@
+import React from 'preact/compat';
+
+/** @jsxImportSource preact */
+
+interface TooltipProps {
+    content: string;
+    children: React.ReactNode;
+    position?: "top" | "bottom" | "left" | "right";
+    className?: string;
+    testId?: string;
+}
+declare const Tooltip: {
+    (props: TooltipProps): JSX.Element;
+    defaultProps: Partial<TooltipProps>;
+};
+
+export { Tooltip as default };

package/dist/legacy/visualBuilder/components/Collab/Tooltip/Tooltip.js

@@ -0,0 +1,97 @@
+import "../../../../chunk-5WRI5ZAA.js";
+
+// src/visualBuilder/components/Collab/Tooltip/Tooltip.tsx
+import { useState, useRef, useEffect } from "preact/hooks";
+import { collabStyles } from "../../../collab.style.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "preact/jsx-runtime";
+var Tooltip = (props) => {
+  const {
+    content,
+    children,
+    position = "bottom",
+    className,
+    testId,
+    ...otherProps
+  } = props;
+  const [isVisible, setIsVisible] = useState(false);
+  const tooltipRef = useRef(null);
+  const targetRef = useRef(null);
+  useEffect(() => {
+    const positionTooltip = () => {
+      if (!isVisible || !tooltipRef.current || !targetRef.current) return;
+      const targetRect = targetRef.current.getBoundingClientRect();
+      const tooltipRect = tooltipRef.current.getBoundingClientRect();
+      const margin = 8;
+      const positions = {
+        bottom: {
+          top: targetRect.bottom + margin,
+          left: targetRect.left + (targetRect.width - tooltipRect.width) / 2
+        },
+        top: {
+          top: targetRect.top - tooltipRect.height - margin,
+          left: targetRect.left + (targetRect.width - tooltipRect.width) / 2
+        },
+        left: {
+          top: targetRect.top + (targetRect.height - tooltipRect.height) / 2,
+          left: targetRect.left - tooltipRect.width - margin
+        },
+        right: {
+          top: targetRect.top + (targetRect.height - tooltipRect.height) / 2,
+          left: targetRect.right + margin
+        }
+      };
+      const coords = positions[position];
+      Object.assign(tooltipRef.current.style, {
+        top: `${coords.top}px`,
+        left: `${coords.left}px`
+      });
+    };
+    positionTooltip();
+    window.addEventListener("scroll", positionTooltip);
+    window.addEventListener("resize", positionTooltip);
+    return () => {
+      window.removeEventListener("scroll", positionTooltip);
+      window.removeEventListener("resize", positionTooltip);
+    };
+  }, [isVisible, position]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: targetRef,
+      className: classNames(
+        "collab-tooltip--wrapper",
+        collabStyles()["collab-tooltip--wrapper"],
+        className
+      ),
+      onMouseEnter: () => setIsVisible(true),
+      onMouseLeave: () => setIsVisible(false),
+      "data-testid": testId,
+      ...otherProps,
+      children: [
+        children,
+        isVisible && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: tooltipRef,
+            className: classNames(
+              "collab-tooltip",
+              collabStyles()["collab-tooltip"]
+            ),
+            role: "tooltip",
+            "aria-hidden": !isVisible,
+            children: content
+          }
+        )
+      ]
+    }
+  );
+};
+Tooltip.defaultProps = {
+  testId: "collab-tooltip"
+};
+var Tooltip_default = Tooltip;
+export {
+  Tooltip_default as default
+};
+//# sourceMappingURL=Tooltip.js.map

package/dist/legacy/visualBuilder/components/Collab/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/Tooltip/Tooltip.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useState, useRef, useEffect } from \"preact/hooks\";\nimport { collabStyles } from \"../../../collab.style\";\nimport classNames from \"classnames\";\n\ninterface TooltipProps {\n    content: string;\n    children: React.ReactNode;\n    position?: \"top\" | \"bottom\" | \"left\" | \"right\";\n    className?: string;\n    testId?: string;\n}\n\ninterface PositionCoords {\n    top: number;\n    left: number;\n}\n\ninterface Positions {\n    bottom: PositionCoords;\n    top: PositionCoords;\n    left: PositionCoords;\n    right: PositionCoords;\n}\n\nconst Tooltip = (props: TooltipProps): JSX.Element => {\n    const {\n        content,\n        children,\n        position = \"bottom\",\n        className,\n        testId,\n        ...otherProps\n    } = props;\n    const [isVisible, setIsVisible] = useState<boolean>(false);\n    const tooltipRef = useRef<HTMLDivElement>(null);\n    const targetRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        const positionTooltip = (): void => {\n            if (!isVisible || !tooltipRef.current || !targetRef.current) return;\n\n            const targetRect: DOMRect =\n                targetRef.current.getBoundingClientRect();\n            const tooltipRect: DOMRect =\n                tooltipRef.current.getBoundingClientRect();\n            const margin: number = 8;\n\n            const positions: Positions = {\n                bottom: {\n                    top: targetRect.bottom + margin,\n                    left:\n                        targetRect.left +\n                        (targetRect.width - tooltipRect.width) / 2,\n                },\n                top: {\n                    top: targetRect.top - tooltipRect.height - margin,\n                    left:\n                        targetRect.left +\n                        (targetRect.width - tooltipRect.width) / 2,\n                },\n                left: {\n                    top:\n                        targetRect.top +\n                        (targetRect.height - tooltipRect.height) / 2,\n                    left: targetRect.left - tooltipRect.width - margin,\n                },\n                right: {\n                    top:\n                        targetRect.top +\n                        (targetRect.height - tooltipRect.height) / 2,\n                    left: targetRect.right + margin,\n                },\n            };\n\n            const coords: PositionCoords = positions[position];\n            Object.assign(tooltipRef.current.style, {\n                top: `${coords.top}px`,\n                left: `${coords.left}px`,\n            });\n        };\n\n        positionTooltip();\n        window.addEventListener(\"scroll\", positionTooltip);\n        window.addEventListener(\"resize\", positionTooltip);\n\n        return () => {\n            window.removeEventListener(\"scroll\", positionTooltip);\n            window.removeEventListener(\"resize\", positionTooltip);\n        };\n    }, [isVisible, position]);\n\n    return (\n        <div\n            ref={targetRef}\n            className={classNames(\n                \"collab-tooltip--wrapper\",\n                collabStyles()[\"collab-tooltip--wrapper\"],\n                className\n            )}\n            onMouseEnter={() => setIsVisible(true)}\n            onMouseLeave={() => setIsVisible(false)}\n            data-testid={testId}\n            {...otherProps}\n        >\n            {children}\n            {isVisible && (\n                <div\n                    ref={tooltipRef}\n                    className={classNames(\n                        \"collab-tooltip\",\n                        collabStyles()[\"collab-tooltip\"]\n                    )}\n                    role=\"tooltip\"\n                    aria-hidden={!isVisible}\n                >\n                    {content}\n                </div>\n            )}\n        </div>\n    );\n};\n\nTooltip.defaultProps = {\n    testId: \"collab-tooltip\",\n} as Partial<TooltipProps>;\n\nexport default Tooltip;\n"],"mappings":";;;AAEA,SAAS,UAAU,QAAQ,iBAAiB;AAC5C,SAAS,oBAAoB;AAC7B,OAAO,gBAAgB;AA0Ff,SAcQ,KAdR;AApER,IAAM,UAAU,CAAC,UAAqC;AAClD,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACP,IAAI;AACJ,QAAM,CAAC,WAAW,YAAY,IAAI,SAAkB,KAAK;AACzD,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,YAAY,OAAuB,IAAI;AAE7C,YAAU,MAAM;AACZ,UAAM,kBAAkB,MAAY;AAChC,UAAI,CAAC,aAAa,CAAC,WAAW,WAAW,CAAC,UAAU,QAAS;AAE7D,YAAM,aACF,UAAU,QAAQ,sBAAsB;AAC5C,YAAM,cACF,WAAW,QAAQ,sBAAsB;AAC7C,YAAM,SAAiB;AAEvB,YAAM,YAAuB;AAAA,QACzB,QAAQ;AAAA,UACJ,KAAK,WAAW,SAAS;AAAA,UACzB,MACI,WAAW,QACV,WAAW,QAAQ,YAAY,SAAS;AAAA,QACjD;AAAA,QACA,KAAK;AAAA,UACD,KAAK,WAAW,MAAM,YAAY,SAAS;AAAA,UAC3C,MACI,WAAW,QACV,WAAW,QAAQ,YAAY,SAAS;AAAA,QACjD;AAAA,QACA,MAAM;AAAA,UACF,KACI,WAAW,OACV,WAAW,SAAS,YAAY,UAAU;AAAA,UAC/C,MAAM,WAAW,OAAO,YAAY,QAAQ;AAAA,QAChD;AAAA,QACA,OAAO;AAAA,UACH,KACI,WAAW,OACV,WAAW,SAAS,YAAY,UAAU;AAAA,UAC/C,MAAM,WAAW,QAAQ;AAAA,QAC7B;AAAA,MACJ;AAEA,YAAM,SAAyB,UAAU,QAAQ;AACjD,aAAO,OAAO,WAAW,QAAQ,OAAO;AAAA,QACpC,KAAK,GAAG,OAAO,GAAG;AAAA,QAClB,MAAM,GAAG,OAAO,IAAI;AAAA,MACxB,CAAC;AAAA,IACL;AAEA,oBAAgB;AAChB,WAAO,iBAAiB,UAAU,eAAe;AACjD,WAAO,iBAAiB,UAAU,eAAe;AAEjD,WAAO,MAAM;AACT,aAAO,oBAAoB,UAAU,eAAe;AACpD,aAAO,oBAAoB,UAAU,eAAe;AAAA,IACxD;AAAA,EACJ,GAAG,CAAC,WAAW,QAAQ,CAAC;AAExB,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,WAAW;AAAA,QACP;AAAA,QACA,aAAa,EAAE,yBAAyB;AAAA,QACxC;AAAA,MACJ;AAAA,MACA,cAAc,MAAM,aAAa,IAAI;AAAA,MACrC,cAAc,MAAM,aAAa,KAAK;AAAA,MACtC,eAAa;AAAA,MACZ,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,aACG;AAAA,UAAC;AAAA;AAAA,YACG,KAAK;AAAA,YACL,WAAW;AAAA,cACP;AAAA,cACA,aAAa,EAAE,gBAAgB;AAAA,YACnC;AAAA,YACA,MAAK;AAAA,YACL,eAAa,CAAC;AAAA,YAEb;AAAA;AAAA,QACL;AAAA;AAAA;AAAA,EAER;AAER;AAEA,QAAQ,eAAe;AAAA,EACnB,QAAQ;AACZ;AAEA,IAAO,kBAAQ;","names":[]}

package/dist/legacy/visualBuilder/components/HighlightedCommentIcon.cjs

@@ -36,9 +36,12 @@ module.exports = __toCommonJS(HighlightedCommentIcon_exports);
 var import_icons = require("./icons/index.cjs");
 var import_visualBuilderPostMessage = __toESM(require("../utils/visualBuilderPostMessage.cjs"), 1);
 var import_postMessage = require("../utils/types/postMessage.types.cjs");
+var import_configManager = __toESM(require("../../configManager/configManager.cjs"), 1);
+var import_generateThread = require("../generators/generateThread.cjs");
 var import_jsx_runtime = require("preact/jsx-runtime");
 var HighlightedCommentIcon = (props) => {
   const { data } = props;
+  const config = import_configManager.default.get();
   const handleCommentModal = async () => {
     var _a;
     (_a = import_visualBuilderPostMessage.default) == null ? void 0 : _a.send(
@@ -50,8 +53,10 @@ var HighlightedCommentIcon = (props) => {
         absolutePath: data.absolutePath
       }
     );
+    (0, import_generateThread.toggleCollabPopup)({ threadUid: "", action: "close" });
+    import_configManager.default.set("collab.isFeedbackMode", true);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { onClick: handleCommentModal, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.HighlightCommentIcon, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "collab-icon", onClick: handleCommentModal, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.HighlightCommentIcon, {}) });
 };
 var HighlightedCommentIcon_default = HighlightedCommentIcon;
 //# sourceMappingURL=HighlightedCommentIcon.cjs.map

package/dist/legacy/visualBuilder/components/HighlightedCommentIcon.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/components/HighlightedCommentIcon.tsx"],"sourcesContent":["import { h } from \"preact\";\nimport { VNode } from \"preact\";\nimport { HighlightCommentIcon } from \"./icons\";\nimport React from \"preact/compat\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport { IHighlightCommentData } from \"../eventManager/useHighlightCommentIcon\";\n\nconst HighlightedCommentIcon = (props: {\n    data: IHighlightCommentData;\n}): VNode => {\n    const { data } = props;\n\n    const handleCommentModal = async () => {\n        visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.OPEN_FIELD_COMMENT_MODAL,\n            {\n                fieldMetadata: data?.fieldMetadata,\n                discussion: data?.discussion,\n                fieldSchema: data?.fieldSchema,\n                absolutePath: data.absolutePath,\n            }\n        );\n    };\n    return (\n        <div onClick={handleCommentModal}>\n            <HighlightCommentIcon />\n        </div>\n    );\n};\n\nexport default HighlightedCommentIcon;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAqC;AAErC,sCAAqC;AACrC,yBAA+C;AAqBnC;AAlBZ,IAAM,yBAAyB,CAAC,UAEnB;AACT,QAAM,EAAE,KAAK,IAAI;AAEjB,QAAM,qBAAqB,YAAY;AAb3C;AAcQ,0CAAAA,YAAA,mBAA0B;AAAA,MACtB,kDAA+B;AAAA,MAC/B;AAAA,QACI,eAAe,6BAAM;AAAA,QACrB,YAAY,6BAAM;AAAA,QAClB,aAAa,6BAAM;AAAA,QACnB,cAAc,KAAK;AAAA,MACvB;AAAA;AAAA,EAER;AACA,SACI,4CAAC,SAAI,SAAS,oBACV,sDAAC,qCAAqB,GAC1B;AAER;AAEA,IAAO,iCAAQ;","names":["visualBuilderPostMessage"]}
+{"version":3,"sources":["../../../../src/visualBuilder/components/HighlightedCommentIcon.tsx"],"sourcesContent":["import { h } from \"preact\";\nimport { VNode } from \"preact\";\nimport { HighlightCommentIcon } from \"./icons\";\nimport React from \"preact/compat\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport { IHighlightCommentData } from \"../eventManager/useHighlightCommentIcon\";\nimport Config from \"../../configManager/configManager\";\nimport { toggleCollabPopup } from \"../generators/generateThread\";\n\nconst HighlightedCommentIcon = (props: {\n    data: IHighlightCommentData;\n}): VNode => {\n    const { data } = props;\n    const config = Config.get();\n\n    const handleCommentModal = async () => {\n        visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.OPEN_FIELD_COMMENT_MODAL,\n            {\n                fieldMetadata: data?.fieldMetadata,\n                discussion: data?.discussion,\n                fieldSchema: data?.fieldSchema,\n                absolutePath: data.absolutePath,\n            }\n        );\n\n        toggleCollabPopup({ threadUid: \"\", action: \"close\" });\n        Config.set(\"collab.isFeedbackMode\", true);\n    };\n    return (\n        <div className=\"collab-icon\" onClick={handleCommentModal}>\n            <HighlightCommentIcon />\n        </div>\n    );\n};\n\nexport default HighlightedCommentIcon;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAqC;AAErC,sCAAqC;AACrC,yBAA+C;AAE/C,2BAAmB;AACnB,4BAAkC;AAwBtB;AAtBZ,IAAM,yBAAyB,CAAC,UAEnB;AACT,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,SAAS,qBAAAA,QAAO,IAAI;AAE1B,QAAM,qBAAqB,YAAY;AAhB3C;AAiBQ,0CAAAC,YAAA,mBAA0B;AAAA,MACtB,kDAA+B;AAAA,MAC/B;AAAA,QACI,eAAe,6BAAM;AAAA,QACrB,YAAY,6BAAM;AAAA,QAClB,aAAa,6BAAM;AAAA,QACnB,cAAc,KAAK;AAAA,MACvB;AAAA;AAGJ,iDAAkB,EAAE,WAAW,IAAI,QAAQ,QAAQ,CAAC;AACpD,yBAAAD,QAAO,IAAI,yBAAyB,IAAI;AAAA,EAC5C;AACA,SACI,4CAAC,SAAI,WAAU,eAAc,SAAS,oBAClC,sDAAC,qCAAqB,GAC1B;AAER;AAEA,IAAO,iCAAQ;","names":["Config","visualBuilderPostMessage"]}

package/dist/legacy/visualBuilder/components/HighlightedCommentIcon.js

@@ -4,9 +4,12 @@ import "../../chunk-5WRI5ZAA.js";
 import { HighlightCommentIcon } from "./icons/index.js";
 import visualBuilderPostMessage from "../utils/visualBuilderPostMessage.js";
 import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types.js";
+import Config from "../../configManager/configManager.js";
+import { toggleCollabPopup } from "../generators/generateThread.js";
 import { jsx } from "preact/jsx-runtime";
 var HighlightedCommentIcon = (props) => {
   const { data } = props;
+  const config = Config.get();
   const handleCommentModal = async () => {
     var _a;
     (_a = visualBuilderPostMessage) == null ? void 0 : _a.send(
@@ -18,8 +21,10 @@ var HighlightedCommentIcon = (props) => {
         absolutePath: data.absolutePath
       }
     );
+    toggleCollabPopup({ threadUid: "", action: "close" });
+    Config.set("collab.isFeedbackMode", true);
   };
-  return /* @__PURE__ */ jsx("div", { onClick: handleCommentModal, children: /* @__PURE__ */ jsx(HighlightCommentIcon, {}) });
+  return /* @__PURE__ */ jsx("div", { className: "collab-icon", onClick: handleCommentModal, children: /* @__PURE__ */ jsx(HighlightCommentIcon, {}) });
 };
 var HighlightedCommentIcon_default = HighlightedCommentIcon;
 export {

package/dist/legacy/visualBuilder/components/HighlightedCommentIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/components/HighlightedCommentIcon.tsx"],"sourcesContent":["import { h } from \"preact\";\nimport { VNode } from \"preact\";\nimport { HighlightCommentIcon } from \"./icons\";\nimport React from \"preact/compat\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport { IHighlightCommentData } from \"../eventManager/useHighlightCommentIcon\";\n\nconst HighlightedCommentIcon = (props: {\n    data: IHighlightCommentData;\n}): VNode => {\n    const { data } = props;\n\n    const handleCommentModal = async () => {\n        visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.OPEN_FIELD_COMMENT_MODAL,\n            {\n                fieldMetadata: data?.fieldMetadata,\n                discussion: data?.discussion,\n                fieldSchema: data?.fieldSchema,\n                absolutePath: data.absolutePath,\n            }\n        );\n    };\n    return (\n        <div onClick={handleCommentModal}>\n            <HighlightCommentIcon />\n        </div>\n    );\n};\n\nexport default HighlightedCommentIcon;\n"],"mappings":";;;AAEA,SAAS,4BAA4B;AAErC,OAAO,8BAA8B;AACrC,SAAS,sCAAsC;AAqBnC;AAlBZ,IAAM,yBAAyB,CAAC,UAEnB;AACT,QAAM,EAAE,KAAK,IAAI;AAEjB,QAAM,qBAAqB,YAAY;AAb3C;AAcQ,0DAA0B;AAAA,MACtB,+BAA+B;AAAA,MAC/B;AAAA,QACI,eAAe,6BAAM;AAAA,QACrB,YAAY,6BAAM;AAAA,QAClB,aAAa,6BAAM;AAAA,QACnB,cAAc,KAAK;AAAA,MACvB;AAAA;AAAA,EAER;AACA,SACI,oBAAC,SAAI,SAAS,oBACV,8BAAC,wBAAqB,GAC1B;AAER;AAEA,IAAO,iCAAQ;","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/components/HighlightedCommentIcon.tsx"],"sourcesContent":["import { h } from \"preact\";\nimport { VNode } from \"preact\";\nimport { HighlightCommentIcon } from \"./icons\";\nimport React from \"preact/compat\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport { IHighlightCommentData } from \"../eventManager/useHighlightCommentIcon\";\nimport Config from \"../../configManager/configManager\";\nimport { toggleCollabPopup } from \"../generators/generateThread\";\n\nconst HighlightedCommentIcon = (props: {\n    data: IHighlightCommentData;\n}): VNode => {\n    const { data } = props;\n    const config = Config.get();\n\n    const handleCommentModal = async () => {\n        visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.OPEN_FIELD_COMMENT_MODAL,\n            {\n                fieldMetadata: data?.fieldMetadata,\n                discussion: data?.discussion,\n                fieldSchema: data?.fieldSchema,\n                absolutePath: data.absolutePath,\n            }\n        );\n\n        toggleCollabPopup({ threadUid: \"\", action: \"close\" });\n        Config.set(\"collab.isFeedbackMode\", true);\n    };\n    return (\n        <div className=\"collab-icon\" onClick={handleCommentModal}>\n            <HighlightCommentIcon />\n        </div>\n    );\n};\n\nexport default HighlightedCommentIcon;\n"],"mappings":";;;AAEA,SAAS,4BAA4B;AAErC,OAAO,8BAA8B;AACrC,SAAS,sCAAsC;AAE/C,OAAO,YAAY;AACnB,SAAS,yBAAyB;AAwBtB;AAtBZ,IAAM,yBAAyB,CAAC,UAEnB;AACT,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,SAAS,OAAO,IAAI;AAE1B,QAAM,qBAAqB,YAAY;AAhB3C;AAiBQ,0DAA0B;AAAA,MACtB,+BAA+B;AAAA,MAC/B;AAAA,QACI,eAAe,6BAAM;AAAA,QACrB,YAAY,6BAAM;AAAA,QAClB,aAAa,6BAAM;AAAA,QACnB,cAAc,KAAK;AAAA,MACvB;AAAA;AAGJ,sBAAkB,EAAE,WAAW,IAAI,QAAQ,QAAQ,CAAC;AACpD,WAAO,IAAI,yBAAyB,IAAI;AAAA,EAC5C;AACA,SACI,oBAAC,SAAI,WAAU,eAAc,SAAS,oBAClC,8BAAC,wBAAqB,GAC1B;AAER;AAEA,IAAO,iCAAQ;","names":[]}