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

package/dist/modern/visualBuilder/components/Collab/SkeletonTile/SkeletonTile.js

@@ -0,0 +1,52 @@
+import "../../../../chunk-5WRI5ZAA.js";
+
+// src/visualBuilder/components/Collab/SkeletonTile/SkeletonTile.tsx
+import { collabStyles } from "../../../collab.style.js";
+import classNames from "classnames";
+import { jsx } from "preact/jsx-runtime";
+var SkeletonTile = (props) => {
+  const {
+    numberOfTiles,
+    tileleftSpace,
+    tileTopSpace,
+    tileHeight,
+    tileBottomSpace,
+    tileWidth,
+    testId,
+    tileRadius = 7
+  } = props;
+  const svgHeight = numberOfTiles * tileHeight + numberOfTiles * tileBottomSpace + numberOfTiles * tileTopSpace;
+  const svgWidth = typeof tileWidth === "string" ? tileWidth : tileWidth + tileleftSpace;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "data-testid": testId,
+      height: svgHeight,
+      width: svgWidth,
+      className: classNames(
+        "collab-skeletonTileSvgClass",
+        collabStyles()["collab-skeletonTileSvgClass"]
+      ),
+      fill: "#EDF1F7",
+      children: Array.from({ length: numberOfTiles }).map((_, index) => /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
+        "rect",
+        {
+          "data-testid": "rect",
+          x: tileleftSpace,
+          y: index * (tileHeight + tileBottomSpace) + tileTopSpace,
+          rx: tileRadius,
+          width: tileWidth,
+          height: tileHeight
+        }
+      ) }, index))
+    }
+  );
+};
+SkeletonTile.defaultProps = {
+  testId: "collab-skeletonTile"
+};
+var SkeletonTile_default = SkeletonTile;
+export {
+  SkeletonTile_default as default
+};
+//# sourceMappingURL=SkeletonTile.js.map

package/dist/modern/visualBuilder/components/Collab/SkeletonTile/SkeletonTile.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/SkeletonTile/SkeletonTile.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { collabStyles } from \"../../../collab.style\";\nimport classNames from \"classnames\";\n\nexport type SkeletonTileProps = {\n    numberOfTiles: number;\n    tileHeight: number;\n    tileWidth: number | string;\n    tileBottomSpace: number;\n    tileTopSpace: number;\n    tileleftSpace: number;\n    tileRadius?: number;\n    testId?: string;\n};\n\nconst SkeletonTile: React.FC<SkeletonTileProps> = (props) => {\n    const {\n        numberOfTiles,\n        tileleftSpace,\n        tileTopSpace,\n        tileHeight,\n        tileBottomSpace,\n        tileWidth,\n        testId,\n        tileRadius = 7,\n    } = props;\n\n    const svgHeight =\n        numberOfTiles * tileHeight +\n        numberOfTiles * tileBottomSpace +\n        numberOfTiles * tileTopSpace;\n\n    const svgWidth =\n        typeof tileWidth === \"string\" ? tileWidth : tileWidth + tileleftSpace;\n\n    return (\n        <svg\n            data-testid={testId}\n            height={svgHeight}\n            width={svgWidth}\n            className={classNames(\n                \"collab-skeletonTileSvgClass\",\n                collabStyles()[\"collab-skeletonTileSvgClass\"]\n            )}\n            fill=\"#EDF1F7\"\n        >\n            {Array.from({ length: numberOfTiles }).map((_, index) => (\n                <g key={index}>\n                    <rect\n                        data-testid=\"rect\"\n                        x={tileleftSpace}\n                        y={\n                            index * (tileHeight + tileBottomSpace) +\n                            tileTopSpace\n                        }\n                        rx={tileRadius}\n                        width={tileWidth}\n                        height={tileHeight}\n                    />\n                </g>\n            ))}\n        </svg>\n    );\n};\n\nSkeletonTile.defaultProps = {\n    testId: \"collab-skeletonTile\",\n} as Partial<SkeletonTileProps>;\n\nexport default SkeletonTile;\n"],"mappings":";;;AAEA,SAAS,oBAAoB;AAC7B,OAAO,gBAAgB;AA8CH;AAjCpB,IAAM,eAA4C,CAAC,UAAU;AACzD,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,EACjB,IAAI;AAEJ,QAAM,YACF,gBAAgB,aAChB,gBAAgB,kBAChB,gBAAgB;AAEpB,QAAM,WACF,OAAO,cAAc,WAAW,YAAY,YAAY;AAE5D,SACI;AAAA,IAAC;AAAA;AAAA,MACG,eAAa;AAAA,MACb,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,QACP;AAAA,QACA,aAAa,EAAE,6BAA6B;AAAA,MAChD;AAAA,MACA,MAAK;AAAA,MAEJ,gBAAM,KAAK,EAAE,QAAQ,cAAc,CAAC,EAAE,IAAI,CAAC,GAAG,UAC3C,oBAAC,OACG;AAAA,QAAC;AAAA;AAAA,UACG,eAAY;AAAA,UACZ,GAAG;AAAA,UACH,GACI,SAAS,aAAa,mBACtB;AAAA,UAEJ,IAAI;AAAA,UACJ,OAAO;AAAA,UACP,QAAQ;AAAA;AAAA,MACZ,KAXI,KAYR,CACH;AAAA;AAAA,EACL;AAER;AAEA,aAAa,eAAe;AAAA,EACxB,QAAQ;AACZ;AAEA,IAAO,uBAAQ;","names":[]}

package/dist/modern/visualBuilder/components/Collab/ThreadPopup/CommentActionBar.cjs

@@ -0,0 +1,145 @@
+"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/ThreadPopup/CommentActionBar.tsx
+var CommentActionBar_exports = {};
+__export(CommentActionBar_exports, {
+  default: () => CommentActionBar_default
+});
+module.exports = __toCommonJS(CommentActionBar_exports);
+var import_hooks = require("preact/hooks");
+var import_Icon = __toESM(require("../Icon/Icon.cjs"), 1);
+var import_ContextProvider = require("./ContextProvider/index.cjs");
+var import_collab = require("../../../collab.style.cjs");
+var import_classnames = __toESM(require("classnames"), 1);
+var import_jsx_runtime = require("preact/jsx-runtime");
+var CommentActionBar = ({
+  mode,
+  commentUser,
+  currentUser,
+  commentUID
+}) => {
+  const { setThreadState, onDeleteComment, activeThread, onDeleteThread } = (0, import_hooks.useContext)(import_ContextProvider.ThreadProvider);
+  const setEditComment = (uid) => {
+    setThreadState((prevState) => ({
+      ...prevState,
+      editComment: uid || ""
+    }));
+  };
+  const handleCancel = () => {
+    setEditComment(null);
+  };
+  const handleCommentEdit = () => {
+    if (commentUID) {
+      setEditComment(commentUID);
+    }
+  };
+  const handleCommentDelete = async () => {
+    if (!commentUID) {
+      return;
+    }
+    try {
+      const deleteResponse = await onDeleteComment({
+        threadUid: activeThread?._id,
+        commentUid: commentUID
+      });
+      setThreadState((prevState) => {
+        const updatedComments = prevState.comments.filter(
+          (comment) => comment._id !== commentUID
+        );
+        if (prevState.commentCount - 1 === 0) {
+          onDeleteThread({ threadUid: activeThread?._id });
+        }
+        return {
+          ...prevState,
+          comments: updatedComments,
+          commentCount: prevState.commentCount - 1
+        };
+      });
+    } catch (error) {
+    }
+  };
+  if (mode === "edit" && commentUID) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: (0, import_classnames.default)(
+          "collab-thread-comment-action--wrapper",
+          (0, import_collab.collabStyles)()["collab-thread-comment-action--wrapper"]
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_Icon.default,
+          {
+            icon: "Cancel",
+            withTooltip: true,
+            tooltipContent: "Cancel",
+            onClick: handleCancel
+          }
+        )
+      }
+    );
+  }
+  if (commentUser.uid !== currentUser.uid || !commentUID) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: (0, import_classnames.default)(
+        "collab-thread-comment-action--wrapper",
+        (0, import_collab.collabStyles)()["collab-thread-comment-action--wrapper"]
+      ),
+      "data-testid": "collab-thread-comment-action--wrapper",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_Icon.default,
+          {
+            icon: "Edit",
+            tooltipContent: "Edit",
+            withTooltip: true,
+            testId: "collab-thread-comment-edit",
+            onClick: handleCommentEdit
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_Icon.default,
+          {
+            icon: "Delete",
+            tooltipContent: "Delete",
+            withTooltip: true,
+            testId: "collab-thread-comment-delete",
+            onClick: handleCommentDelete
+          }
+        )
+      ]
+    }
+  );
+};
+var CommentActionBar_default = CommentActionBar;
+//# sourceMappingURL=CommentActionBar.cjs.map

package/dist/modern/visualBuilder/components/Collab/ThreadPopup/CommentActionBar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/CommentActionBar.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useContext } from \"preact/hooks\";\nimport {\n    IThreadPopupState,\n    ICommentActionBar,\n} from \"../../../types/collab.types\";\nimport Icon from \"../Icon/Icon\";\nimport { ThreadProvider } from \"./ContextProvider\";\nimport { collabStyles } from \"../../../collab.style\";\nimport classNames from \"classnames\";\n\n// Define the CommentActionBar component\nconst CommentActionBar: React.FC<ICommentActionBar> = ({\n    mode,\n    commentUser,\n    currentUser,\n    commentUID,\n}) => {\n    const { setThreadState, onDeleteComment, activeThread, onDeleteThread } =\n        useContext(ThreadProvider)!;\n\n    const setEditComment = (uid: string | null) => {\n        setThreadState((prevState: IThreadPopupState) => ({\n            ...prevState,\n            editComment: uid || \"\",\n        }));\n    };\n\n    // Handler for cancel action\n    const handleCancel = () => {\n        setEditComment(null);\n    };\n\n    // Handler for editing a comment\n    const handleCommentEdit = () => {\n        if (commentUID) {\n            setEditComment(commentUID);\n        }\n    };\n\n    // Handler for deleting a comment\n    const handleCommentDelete = async () => {\n        if (!commentUID) {\n            return;\n        }\n        try {\n            // Call the onDeleteComment function\n            const deleteResponse = await onDeleteComment({\n                threadUid: activeThread?._id,\n                commentUid: commentUID,\n            });\n\n            // Update the thread state after successful deletion\n            setThreadState((prevState: IThreadPopupState) => {\n                const updatedComments = prevState.comments.filter(\n                    (comment) => comment._id !== commentUID\n                );\n                if (prevState.commentCount - 1 === 0) {\n                    onDeleteThread({ threadUid: activeThread?._id });\n                }\n                return {\n                    ...prevState,\n                    comments: updatedComments,\n                    commentCount: prevState.commentCount - 1,\n                };\n            });\n        } catch (error: any) {}\n    };\n\n    // Render based on the mode and user permissions\n    if (mode === \"edit\" && commentUID) {\n        return (\n            <div\n                className={classNames(\n                    \"collab-thread-comment-action--wrapper\",\n                    collabStyles()[\"collab-thread-comment-action--wrapper\"]\n                )}\n            >\n                <Icon\n                    icon=\"Cancel\"\n                    withTooltip\n                    tooltipContent=\"Cancel\"\n                    onClick={handleCancel}\n                />\n            </div>\n        );\n    }\n\n    if (commentUser.uid !== currentUser.uid || !commentUID) {\n        return null;\n    }\n\n    return (\n        <div\n            className={classNames(\n                \"collab-thread-comment-action--wrapper\",\n                collabStyles()[\"collab-thread-comment-action--wrapper\"]\n            )}\n            data-testid=\"collab-thread-comment-action--wrapper\"\n        >\n            <Icon\n                icon=\"Edit\"\n                tooltipContent=\"Edit\"\n                withTooltip\n                testId=\"collab-thread-comment-edit\"\n                onClick={handleCommentEdit}\n            />\n            <Icon\n                icon=\"Delete\"\n                tooltipContent=\"Delete\"\n                withTooltip\n                testId=\"collab-thread-comment-delete\"\n                onClick={handleCommentDelete}\n            />\n        </div>\n    );\n};\n\nexport default CommentActionBar;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA2B;AAK3B,kBAAiB;AACjB,6BAA+B;AAC/B,oBAA6B;AAC7B,wBAAuB;AAqEP;AAlEhB,IAAM,mBAAgD,CAAC;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAM;AACF,QAAM,EAAE,gBAAgB,iBAAiB,cAAc,eAAe,QAClE,yBAAW,qCAAc;AAE7B,QAAM,iBAAiB,CAAC,QAAuB;AAC3C,mBAAe,CAAC,eAAkC;AAAA,MAC9C,GAAG;AAAA,MACH,aAAa,OAAO;AAAA,IACxB,EAAE;AAAA,EACN;AAGA,QAAM,eAAe,MAAM;AACvB,mBAAe,IAAI;AAAA,EACvB;AAGA,QAAM,oBAAoB,MAAM;AAC5B,QAAI,YAAY;AACZ,qBAAe,UAAU;AAAA,IAC7B;AAAA,EACJ;AAGA,QAAM,sBAAsB,YAAY;AACpC,QAAI,CAAC,YAAY;AACb;AAAA,IACJ;AACA,QAAI;AAEA,YAAM,iBAAiB,MAAM,gBAAgB;AAAA,QACzC,WAAW,cAAc;AAAA,QACzB,YAAY;AAAA,MAChB,CAAC;AAGD,qBAAe,CAAC,cAAiC;AAC7C,cAAM,kBAAkB,UAAU,SAAS;AAAA,UACvC,CAAC,YAAY,QAAQ,QAAQ;AAAA,QACjC;AACA,YAAI,UAAU,eAAe,MAAM,GAAG;AAClC,yBAAe,EAAE,WAAW,cAAc,IAAI,CAAC;AAAA,QACnD;AACA,eAAO;AAAA,UACH,GAAG;AAAA,UACH,UAAU;AAAA,UACV,cAAc,UAAU,eAAe;AAAA,QAC3C;AAAA,MACJ,CAAC;AAAA,IACL,SAAS,OAAY;AAAA,IAAC;AAAA,EAC1B;AAGA,MAAI,SAAS,UAAU,YAAY;AAC/B,WACI;AAAA,MAAC;AAAA;AAAA,QACG,eAAW,kBAAAA;AAAA,UACP;AAAA,cACA,4BAAa,EAAE,uCAAuC;AAAA,QAC1D;AAAA,QAEA;AAAA,UAAC,YAAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,aAAW;AAAA,YACX,gBAAe;AAAA,YACf,SAAS;AAAA;AAAA,QACb;AAAA;AAAA,IACJ;AAAA,EAER;AAEA,MAAI,YAAY,QAAQ,YAAY,OAAO,CAAC,YAAY;AACpD,WAAO;AAAA,EACX;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,eAAW,kBAAAD;AAAA,QACP;AAAA,YACA,4BAAa,EAAE,uCAAuC;AAAA,MAC1D;AAAA,MACA,eAAY;AAAA,MAEZ;AAAA;AAAA,UAAC,YAAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,gBAAe;AAAA,YACf,aAAW;AAAA,YACX,QAAO;AAAA,YACP,SAAS;AAAA;AAAA,QACb;AAAA,QACA;AAAA,UAAC,YAAAA;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,gBAAe;AAAA,YACf,aAAW;AAAA,YACX,QAAO;AAAA,YACP,SAAS;AAAA;AAAA,QACb;AAAA;AAAA;AAAA,EACJ;AAER;AAEA,IAAO,2BAAQ;","names":["classNames","Icon"]}

package/dist/modern/visualBuilder/components/Collab/ThreadPopup/CommentActionBar.d.cts

@@ -0,0 +1,8 @@
+import React from 'preact/compat';
+import { ICommentActionBar } from '../../../types/collab.types.cjs';
+
+/** @jsxImportSource preact */
+
+declare const CommentActionBar: React.FC<ICommentActionBar>;
+
+export { CommentActionBar as default };

package/dist/modern/visualBuilder/components/Collab/ThreadPopup/CommentActionBar.d.ts

@@ -0,0 +1,8 @@
+import React from 'preact/compat';
+import { ICommentActionBar } from '../../../types/collab.types.js';
+
+/** @jsxImportSource preact */
+
+declare const CommentActionBar: React.FC<ICommentActionBar>;
+
+export { CommentActionBar as default };

package/dist/modern/visualBuilder/components/Collab/ThreadPopup/CommentActionBar.js

@@ -0,0 +1,116 @@
+import "../../../../chunk-5WRI5ZAA.js";
+
+// src/visualBuilder/components/Collab/ThreadPopup/CommentActionBar.tsx
+import { useContext } from "preact/hooks";
+import Icon from "../Icon/Icon.js";
+import { ThreadProvider } from "./ContextProvider/index.js";
+import { collabStyles } from "../../../collab.style.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "preact/jsx-runtime";
+var CommentActionBar = ({
+  mode,
+  commentUser,
+  currentUser,
+  commentUID
+}) => {
+  const { setThreadState, onDeleteComment, activeThread, onDeleteThread } = useContext(ThreadProvider);
+  const setEditComment = (uid) => {
+    setThreadState((prevState) => ({
+      ...prevState,
+      editComment: uid || ""
+    }));
+  };
+  const handleCancel = () => {
+    setEditComment(null);
+  };
+  const handleCommentEdit = () => {
+    if (commentUID) {
+      setEditComment(commentUID);
+    }
+  };
+  const handleCommentDelete = async () => {
+    if (!commentUID) {
+      return;
+    }
+    try {
+      const deleteResponse = await onDeleteComment({
+        threadUid: activeThread?._id,
+        commentUid: commentUID
+      });
+      setThreadState((prevState) => {
+        const updatedComments = prevState.comments.filter(
+          (comment) => comment._id !== commentUID
+        );
+        if (prevState.commentCount - 1 === 0) {
+          onDeleteThread({ threadUid: activeThread?._id });
+        }
+        return {
+          ...prevState,
+          comments: updatedComments,
+          commentCount: prevState.commentCount - 1
+        };
+      });
+    } catch (error) {
+    }
+  };
+  if (mode === "edit" && commentUID) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames(
+          "collab-thread-comment-action--wrapper",
+          collabStyles()["collab-thread-comment-action--wrapper"]
+        ),
+        children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: "Cancel",
+            withTooltip: true,
+            tooltipContent: "Cancel",
+            onClick: handleCancel
+          }
+        )
+      }
+    );
+  }
+  if (commentUser.uid !== currentUser.uid || !commentUID) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames(
+        "collab-thread-comment-action--wrapper",
+        collabStyles()["collab-thread-comment-action--wrapper"]
+      ),
+      "data-testid": "collab-thread-comment-action--wrapper",
+      children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: "Edit",
+            tooltipContent: "Edit",
+            withTooltip: true,
+            testId: "collab-thread-comment-edit",
+            onClick: handleCommentEdit
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: "Delete",
+            tooltipContent: "Delete",
+            withTooltip: true,
+            testId: "collab-thread-comment-delete",
+            onClick: handleCommentDelete
+          }
+        )
+      ]
+    }
+  );
+};
+var CommentActionBar_default = CommentActionBar;
+export {
+  CommentActionBar_default as default
+};
+//# sourceMappingURL=CommentActionBar.js.map

package/dist/modern/visualBuilder/components/Collab/ThreadPopup/CommentActionBar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/CommentActionBar.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useContext } from \"preact/hooks\";\nimport {\n    IThreadPopupState,\n    ICommentActionBar,\n} from \"../../../types/collab.types\";\nimport Icon from \"../Icon/Icon\";\nimport { ThreadProvider } from \"./ContextProvider\";\nimport { collabStyles } from \"../../../collab.style\";\nimport classNames from \"classnames\";\n\n// Define the CommentActionBar component\nconst CommentActionBar: React.FC<ICommentActionBar> = ({\n    mode,\n    commentUser,\n    currentUser,\n    commentUID,\n}) => {\n    const { setThreadState, onDeleteComment, activeThread, onDeleteThread } =\n        useContext(ThreadProvider)!;\n\n    const setEditComment = (uid: string | null) => {\n        setThreadState((prevState: IThreadPopupState) => ({\n            ...prevState,\n            editComment: uid || \"\",\n        }));\n    };\n\n    // Handler for cancel action\n    const handleCancel = () => {\n        setEditComment(null);\n    };\n\n    // Handler for editing a comment\n    const handleCommentEdit = () => {\n        if (commentUID) {\n            setEditComment(commentUID);\n        }\n    };\n\n    // Handler for deleting a comment\n    const handleCommentDelete = async () => {\n        if (!commentUID) {\n            return;\n        }\n        try {\n            // Call the onDeleteComment function\n            const deleteResponse = await onDeleteComment({\n                threadUid: activeThread?._id,\n                commentUid: commentUID,\n            });\n\n            // Update the thread state after successful deletion\n            setThreadState((prevState: IThreadPopupState) => {\n                const updatedComments = prevState.comments.filter(\n                    (comment) => comment._id !== commentUID\n                );\n                if (prevState.commentCount - 1 === 0) {\n                    onDeleteThread({ threadUid: activeThread?._id });\n                }\n                return {\n                    ...prevState,\n                    comments: updatedComments,\n                    commentCount: prevState.commentCount - 1,\n                };\n            });\n        } catch (error: any) {}\n    };\n\n    // Render based on the mode and user permissions\n    if (mode === \"edit\" && commentUID) {\n        return (\n            <div\n                className={classNames(\n                    \"collab-thread-comment-action--wrapper\",\n                    collabStyles()[\"collab-thread-comment-action--wrapper\"]\n                )}\n            >\n                <Icon\n                    icon=\"Cancel\"\n                    withTooltip\n                    tooltipContent=\"Cancel\"\n                    onClick={handleCancel}\n                />\n            </div>\n        );\n    }\n\n    if (commentUser.uid !== currentUser.uid || !commentUID) {\n        return null;\n    }\n\n    return (\n        <div\n            className={classNames(\n                \"collab-thread-comment-action--wrapper\",\n                collabStyles()[\"collab-thread-comment-action--wrapper\"]\n            )}\n            data-testid=\"collab-thread-comment-action--wrapper\"\n        >\n            <Icon\n                icon=\"Edit\"\n                tooltipContent=\"Edit\"\n                withTooltip\n                testId=\"collab-thread-comment-edit\"\n                onClick={handleCommentEdit}\n            />\n            <Icon\n                icon=\"Delete\"\n                tooltipContent=\"Delete\"\n                withTooltip\n                testId=\"collab-thread-comment-delete\"\n                onClick={handleCommentDelete}\n            />\n        </div>\n    );\n};\n\nexport default CommentActionBar;\n"],"mappings":";;;AAEA,SAAS,kBAAkB;AAK3B,OAAO,UAAU;AACjB,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,OAAO,gBAAgB;AAqEP,cAeR,YAfQ;AAlEhB,IAAM,mBAAgD,CAAC;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAM;AACF,QAAM,EAAE,gBAAgB,iBAAiB,cAAc,eAAe,IAClE,WAAW,cAAc;AAE7B,QAAM,iBAAiB,CAAC,QAAuB;AAC3C,mBAAe,CAAC,eAAkC;AAAA,MAC9C,GAAG;AAAA,MACH,aAAa,OAAO;AAAA,IACxB,EAAE;AAAA,EACN;AAGA,QAAM,eAAe,MAAM;AACvB,mBAAe,IAAI;AAAA,EACvB;AAGA,QAAM,oBAAoB,MAAM;AAC5B,QAAI,YAAY;AACZ,qBAAe,UAAU;AAAA,IAC7B;AAAA,EACJ;AAGA,QAAM,sBAAsB,YAAY;AACpC,QAAI,CAAC,YAAY;AACb;AAAA,IACJ;AACA,QAAI;AAEA,YAAM,iBAAiB,MAAM,gBAAgB;AAAA,QACzC,WAAW,cAAc;AAAA,QACzB,YAAY;AAAA,MAChB,CAAC;AAGD,qBAAe,CAAC,cAAiC;AAC7C,cAAM,kBAAkB,UAAU,SAAS;AAAA,UACvC,CAAC,YAAY,QAAQ,QAAQ;AAAA,QACjC;AACA,YAAI,UAAU,eAAe,MAAM,GAAG;AAClC,yBAAe,EAAE,WAAW,cAAc,IAAI,CAAC;AAAA,QACnD;AACA,eAAO;AAAA,UACH,GAAG;AAAA,UACH,UAAU;AAAA,UACV,cAAc,UAAU,eAAe;AAAA,QAC3C;AAAA,MACJ,CAAC;AAAA,IACL,SAAS,OAAY;AAAA,IAAC;AAAA,EAC1B;AAGA,MAAI,SAAS,UAAU,YAAY;AAC/B,WACI;AAAA,MAAC;AAAA;AAAA,QACG,WAAW;AAAA,UACP;AAAA,UACA,aAAa,EAAE,uCAAuC;AAAA,QAC1D;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACG,MAAK;AAAA,YACL,aAAW;AAAA,YACX,gBAAe;AAAA,YACf,SAAS;AAAA;AAAA,QACb;AAAA;AAAA,IACJ;AAAA,EAER;AAEA,MAAI,YAAY,QAAQ,YAAY,OAAO,CAAC,YAAY;AACpD,WAAO;AAAA,EACX;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,WAAW;AAAA,QACP;AAAA,QACA,aAAa,EAAE,uCAAuC;AAAA,MAC1D;AAAA,MACA,eAAY;AAAA,MAEZ;AAAA;AAAA,UAAC;AAAA;AAAA,YACG,MAAK;AAAA,YACL,gBAAe;AAAA,YACf,aAAW;AAAA,YACX,QAAO;AAAA,YACP,SAAS;AAAA;AAAA,QACb;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACG,MAAK;AAAA,YACL,gBAAe;AAAA,YACf,aAAW;AAAA,YACX,QAAO;AAAA,YACP,SAAS;AAAA;AAAA,QACb;AAAA;AAAA;AAAA,EACJ;AAER;AAEA,IAAO,2BAAQ;","names":[]}

package/dist/modern/visualBuilder/components/Collab/ThreadPopup/CommentCard.cjs

@@ -0,0 +1,160 @@
+"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/ThreadPopup/CommentCard.tsx
+var CommentCard_exports = {};
+__export(CommentCard_exports, {
+  default: () => CommentCard_default
+});
+module.exports = __toCommonJS(CommentCard_exports);
+var import_hooks = require("preact/hooks");
+var import_CommentTextArea = __toESM(require("./CommentTextArea.cjs"), 1);
+var import_moment = __toESM(require("moment"), 1);
+var import_collabUtils = require("../../../utils/collabUtils.cjs");
+var import_CommentActionBar = __toESM(require("./CommentActionBar.cjs"), 1);
+var import_CommentResolvedText = __toESM(require("./CommentResolvedText.cjs"), 1);
+var import_Avatar = __toESM(require("../Avatar/Avatar.cjs"), 1);
+var import_ThreadBody = __toESM(require("./loader/ThreadBody.cjs"), 1);
+var import_collab = require("../../../collab.style.cjs");
+var import_classnames = __toESM(require("classnames"), 1);
+var import_jsx_runtime = require("preact/jsx-runtime");
+var formatCommentDate = (comment) => {
+  return comment ? (0, import_moment.default)(comment.createdAt).format("MMM DD, YYYY, hh:mm A") : "";
+};
+var CommentCard = ({
+  userState,
+  comment,
+  onClose,
+  handleOnSaveRef,
+  mode
+}) => {
+  const [commentUser, setCommentUser] = (0, import_hooks.useState)(null);
+  const [isHovered, setIsHovered] = (0, import_hooks.useState)(false);
+  (0, import_hooks.useEffect)(() => {
+    setCommentUser(
+      comment ? userState.userMap[comment.createdBy] : userState.currentUser
+    );
+  }, [comment, userState]);
+  const formattedDate = (0, import_hooks.useMemo)(() => formatCommentDate(comment), [comment]);
+  if (!commentUser) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThreadBody.default, {}, "collab-thread-body--comment-loader");
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: (0, import_classnames.default)(
+        "collab-thread-comment--wrapper",
+        (0, import_collab.collabStyles)()["collab-thread-comment--wrapper"]
+      ),
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            className: (0, import_classnames.default)(
+              "collab-thread-comment--user-details",
+              "flex-v-center",
+              (0, import_collab.collabStyles)()["collab-thread-comment--user-details"],
+              import_collab.flexAlignCenter
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_Avatar.default,
+                {
+                  avatar: {
+                    name: (0, import_collabUtils.getUserName)(commentUser),
+                    id: commentUser.uid
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "div",
+                {
+                  className: (0, import_classnames.default)(
+                    "collab-thread-comment--user-details__text",
+                    (0, import_collab.collabStyles)()["collab-thread-comment--user-details__text"]
+                  ),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "div",
+                      {
+                        className: (0, import_classnames.default)(
+                          "collab-thread-comment--user-name",
+                          (0, import_collab.collabStyles)()["collab-thread-comment--user-name"]
+                        ),
+                        children: (0, import_collabUtils.getUserName)(commentUser)
+                      }
+                    ),
+                    comment && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "div",
+                      {
+                        className: (0, import_classnames.default)(
+                          "collab-thread-comment--time-details",
+                          (0, import_collab.collabStyles)()["collab-thread-comment--time-details"]
+                        ),
+                        children: formattedDate
+                      }
+                    )
+                  ]
+                }
+              ),
+              isHovered && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_CommentActionBar.default,
+                {
+                  mode,
+                  commentUser,
+                  currentUser: userState.currentUser,
+                  commentUID: comment?._id
+                }
+              )
+            ]
+          }
+        ),
+        mode === "edit" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_CommentTextArea.default,
+          {
+            onClose,
+            userState,
+            handleOnSaveRef,
+            comment
+          }
+        ) : comment && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_CommentResolvedText.default,
+          {
+            comment,
+            userState
+          }
+        )
+      ]
+    }
+  );
+};
+var CommentCard_default = CommentCard;
+//# sourceMappingURL=CommentCard.cjs.map

package/dist/modern/visualBuilder/components/Collab/ThreadPopup/CommentCard.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/CommentCard.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useEffect, useState, useMemo } from \"preact/hooks\";\nimport CommentTextArea from \"./CommentTextArea\";\nimport {\n    ICommentCard,\n    IMessageDTO,\n    IUserDTO,\n} from \"../../../types/collab.types\";\nimport moment from \"moment\";\nimport { getUserName } from \"../../../utils/collabUtils\";\nimport CommentActionBar from \"./CommentActionBar\";\nimport CommentResolvedText from \"./CommentResolvedText\";\nimport Avatar from \"../Avatar/Avatar\";\nimport ThreadBodyLoader from \"./loader/ThreadBody\";\nimport { collabStyles, flexAlignCenter } from \"../../../collab.style\";\nimport classNames from \"classnames\";\n\nconst formatCommentDate = (comment: IMessageDTO | null): string => {\n    return comment\n        ? moment(comment.createdAt).format(\"MMM DD, YYYY, hh:mm A\")\n        : \"\";\n};\n\nconst CommentCard = ({\n    userState,\n    comment,\n    onClose,\n    handleOnSaveRef,\n    mode,\n}: ICommentCard) => {\n    const [commentUser, setCommentUser] = useState<IUserDTO | null>(null);\n    const [isHovered, setIsHovered] = useState(false);\n\n    useEffect(() => {\n        setCommentUser(\n            comment\n                ? userState.userMap[comment.createdBy]\n                : userState.currentUser\n        );\n    }, [comment, userState]);\n\n    const formattedDate = useMemo(() => formatCommentDate(comment), [comment]);\n\n    if (!commentUser) {\n        return <ThreadBodyLoader key=\"collab-thread-body--comment-loader\" />;\n    }\n\n    return (\n        <div\n            className={classNames(\n                \"collab-thread-comment--wrapper\",\n                collabStyles()[\"collab-thread-comment--wrapper\"]\n            )}\n            onMouseEnter={() => setIsHovered(true)}\n            onMouseLeave={() => setIsHovered(false)}\n        >\n            <div\n                className={classNames(\n                    \"collab-thread-comment--user-details\",\n                    \"flex-v-center\",\n                    collabStyles()[\"collab-thread-comment--user-details\"],\n                    flexAlignCenter\n                )}\n            >\n                <Avatar\n                    avatar={\n                        {\n                            name: getUserName(commentUser),\n                            id: commentUser.uid,\n                        } as any\n                    }\n                />\n                <div\n                    className={classNames(\n                        \"collab-thread-comment--user-details__text\",\n                        collabStyles()[\n                            \"collab-thread-comment--user-details__text\"\n                        ]\n                    )}\n                >\n                    <div\n                        className={classNames(\n                            \"collab-thread-comment--user-name\",\n                            collabStyles()[\"collab-thread-comment--user-name\"]\n                        )}\n                    >\n                        {getUserName(commentUser)}\n                    </div>\n                    {comment && (\n                        <div\n                            className={classNames(\n                                \"collab-thread-comment--time-details\",\n                                collabStyles()[\n                                    \"collab-thread-comment--time-details\"\n                                ]\n                            )}\n                        >\n                            {formattedDate}\n                        </div>\n                    )}\n                </div>\n                {isHovered && (\n                    <CommentActionBar\n                        mode={mode}\n                        commentUser={commentUser}\n                        currentUser={userState.currentUser}\n                        commentUID={comment?._id}\n                    />\n                )}\n            </div>\n            {mode === \"edit\" ? (\n                <CommentTextArea\n                    onClose={onClose}\n                    userState={userState}\n                    handleOnSaveRef={handleOnSaveRef}\n                    comment={comment}\n                />\n            ) : (\n                comment && (\n                    <CommentResolvedText\n                        comment={comment}\n                        userState={userState}\n                    />\n                )\n            )}\n        </div>\n    );\n};\n\nexport default CommentCard;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA6C;AAC7C,6BAA4B;AAM5B,oBAAmB;AACnB,yBAA4B;AAC5B,8BAA6B;AAC7B,iCAAgC;AAChC,oBAAmB;AACnB,wBAA6B;AAC7B,oBAA8C;AAC9C,wBAAuB;AA6BR;AA3Bf,IAAM,oBAAoB,CAAC,YAAwC;AAC/D,SAAO,cACD,cAAAA,SAAO,QAAQ,SAAS,EAAE,OAAO,uBAAuB,IACxD;AACV;AAEA,IAAM,cAAc,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAoB;AAChB,QAAM,CAAC,aAAa,cAAc,QAAI,uBAA0B,IAAI;AACpE,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAEhD,8BAAU,MAAM;AACZ;AAAA,MACI,UACM,UAAU,QAAQ,QAAQ,SAAS,IACnC,UAAU;AAAA,IACpB;AAAA,EACJ,GAAG,CAAC,SAAS,SAAS,CAAC;AAEvB,QAAM,oBAAgB,sBAAQ,MAAM,kBAAkB,OAAO,GAAG,CAAC,OAAO,CAAC;AAEzE,MAAI,CAAC,aAAa;AACd,WAAO,4CAAC,kBAAAC,SAAA,IAAqB,oCAAqC;AAAA,EACtE;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,eAAW,kBAAAC;AAAA,QACP;AAAA,YACA,4BAAa,EAAE,gCAAgC;AAAA,MACnD;AAAA,MACA,cAAc,MAAM,aAAa,IAAI;AAAA,MACrC,cAAc,MAAM,aAAa,KAAK;AAAA,MAEtC;AAAA;AAAA,UAAC;AAAA;AAAA,YACG,eAAW,kBAAAA;AAAA,cACP;AAAA,cACA;AAAA,kBACA,4BAAa,EAAE,qCAAqC;AAAA,cACpD;AAAA,YACJ;AAAA,YAEA;AAAA;AAAA,gBAAC,cAAAC;AAAA,gBAAA;AAAA,kBACG,QACI;AAAA,oBACI,UAAM,gCAAY,WAAW;AAAA,oBAC7B,IAAI,YAAY;AAAA,kBACpB;AAAA;AAAA,cAER;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACG,eAAW,kBAAAD;AAAA,oBACP;AAAA,wBACA,4BAAa,EACT,2CACJ;AAAA,kBACJ;AAAA,kBAEA;AAAA;AAAA,sBAAC;AAAA;AAAA,wBACG,eAAW,kBAAAA;AAAA,0BACP;AAAA,8BACA,4BAAa,EAAE,kCAAkC;AAAA,wBACrD;AAAA,wBAEC,8CAAY,WAAW;AAAA;AAAA,oBAC5B;AAAA,oBACC,WACG;AAAA,sBAAC;AAAA;AAAA,wBACG,eAAW,kBAAAA;AAAA,0BACP;AAAA,8BACA,4BAAa,EACT,qCACJ;AAAA,wBACJ;AAAA,wBAEC;AAAA;AAAA,oBACL;AAAA;AAAA;AAAA,cAER;AAAA,cACC,aACG;AAAA,gBAAC,wBAAAE;AAAA,gBAAA;AAAA,kBACG;AAAA,kBACA;AAAA,kBACA,aAAa,UAAU;AAAA,kBACvB,YAAY,SAAS;AAAA;AAAA,cACzB;AAAA;AAAA;AAAA,QAER;AAAA,QACC,SAAS,SACN;AAAA,UAAC,uBAAAC;AAAA,UAAA;AAAA,YACG;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACJ,IAEA,WACI;AAAA,UAAC,2BAAAC;AAAA,UAAA;AAAA,YACG;AAAA,YACA;AAAA;AAAA,QACJ;AAAA;AAAA;AAAA,EAGZ;AAER;AAEA,IAAO,sBAAQ;","names":["moment","ThreadBodyLoader","classNames","Avatar","CommentActionBar","CommentTextArea","CommentResolvedText"]}

package/dist/modern/visualBuilder/components/Collab/ThreadPopup/CommentCard.d.cts

@@ -0,0 +1,8 @@
+import React from 'preact/compat';
+import { ICommentCard } from '../../../types/collab.types.cjs';
+
+/** @jsxImportSource preact */
+
+declare const CommentCard: ({ userState, comment, onClose, handleOnSaveRef, mode, }: ICommentCard) => React.JSX.Element;
+
+export { CommentCard as default };

package/dist/modern/visualBuilder/components/Collab/ThreadPopup/CommentCard.d.ts

@@ -0,0 +1,8 @@
+import React from 'preact/compat';
+import { ICommentCard } from '../../../types/collab.types.js';
+
+/** @jsxImportSource preact */
+
+declare const CommentCard: ({ userState, comment, onClose, handleOnSaveRef, mode, }: ICommentCard) => React.JSX.Element;
+
+export { CommentCard as default };