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

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

@@ -3,17 +3,91 @@ import "../../../../chunk-5WRI5ZAA.js";
 // src/visualBuilder/components/Collab/ThreadPopup/CommentTextArea.tsx
 import React from "preact/compat";
 import { useEffect } from "preact/hooks";
-import { collabStyles, flexAlignCenter } from "../../../collab.style.js";
 import { useCommentTextArea } from "../../../hooks/useCommentTextArea.js";
+import { collabStyles, flexAlignCenter } from "../../../collab.style.js";
 import classNames from "classnames";
 import Tooltip from "../Tooltip/Tooltip.js";
 import { jsx, jsxs } from "preact/jsx-runtime";
+var ErrorIndicator = ({
+  errorMessage
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: classNames(
+      "collab-thread-input-indicator--error",
+      collabStyles()["collab-thread-input-indicator--error"]
+    ),
+    children: errorMessage
+  }
+);
+var CharacterCounter = ({ currentLength, maxLength }) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: classNames(
+      "collab-thread-input-indicator--count",
+      collabStyles()["collab-thread-input-indicator--count"]
+    ),
+    children: [
+      currentLength,
+      "/",
+      maxLength
+    ]
+  }
+);
+var MentionSuggestionsList = ({
+  filteredUsers,
+  selectedIndex,
+  cursorPosition,
+  inputRef,
+  listRef,
+  itemRefs,
+  insertMention,
+  handleKeyDown
+}) => {
+  if (filteredUsers.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      className: classNames(
+        "collab-thread-body--input--textarea--suggestionsList",
+        collabStyles()["collab-thread-body--input--textarea--suggestionsList"]
+      ),
+      style: {
+        ...cursorPosition.showAbove ? {
+          bottom: `${window.innerHeight - (inputRef.current?.getBoundingClientRect().top || 0) - cursorPosition.top}px`,
+          top: "auto"
+        } : {
+          top: `${(inputRef.current?.getBoundingClientRect().top || 0) + cursorPosition.top}px`
+        }
+      },
+      ref: listRef,
+      children: filteredUsers.map((user, index) => /* @__PURE__ */ jsx(
+        "li",
+        {
+          onClick: () => insertMention(user),
+          className: classNames(
+            "collab-thread-body--input--textarea--suggestionsList--item",
+            collabStyles()["collab-thread-body--input--textarea--suggestionsList--item"],
+            index === selectedIndex ? collabStyles()["collab-thread-body--input--textarea--suggestionsList--item-selected"] : ""
+          ),
+          ref: (el) => itemRefs.current[index] = el,
+          onKeyDown: (e) => e.key === "Enter" ? insertMention(user) : handleKeyDown(e),
+          tabIndex: -1,
+          "aria-selected": index === selectedIndex,
+          children: (user.display?.length || 0) > 20 ? /* @__PURE__ */ jsx(Tooltip, { content: user.display || "", children: (user.display || "").substring(0, 18) + "..." }) : user.display || ""
+        },
+        user.uid
+      ))
+    }
+  );
+};
 var CommentTextArea = React.memo(
   ({ userState, handleOnSaveRef, comment, onClose }) => {
     const {
       state,
       error,
       showSuggestions,
+      cursorPosition,
       selectedIndex,
       filteredUsers,
       inputRef,
@@ -25,6 +99,8 @@ var CommentTextArea = React.memo(
       insertMention,
       maxMessageLength
     } = useCommentTextArea(userState, comment, onClose);
+    const onChangeHandler = (event) => handleInputChange(event);
+    const onKeyDownHandler = (event) => handleKeyDown(event);
     useEffect(() => {
       handleOnSaveRef.current = handleSubmit;
     }, [handleSubmit, handleOnSaveRef]);
@@ -62,47 +138,24 @@ var CommentTextArea = React.memo(
                           collabStyles()["collab-thread-body--input--textarea"]
                         ),
                         value: state.message,
-                        onChange: (event) => handleInputChange(event),
-                        onKeyDown: (event) => handleKeyDown(event),
+                        onChange: onChangeHandler,
+                        onKeyDown: onKeyDownHandler,
                         maxLength: maxMessageLength,
-                        placeholder: "Enter a comment",
+                        placeholder: "Enter a comment or tag others using \u201C@\u201D",
                         ref: inputRef
                       }
                     ),
-                    showSuggestions && filteredUsers.length > 0 && /* @__PURE__ */ jsx(
-                      "ul",
+                    showSuggestions && /* @__PURE__ */ jsx(
+                      MentionSuggestionsList,
                       {
-                        className: classNames(
-                          "collab-thread-body--input--textarea--suggestionsList",
-                          collabStyles()["collab-thread-body--input--textarea--suggestionsList"]
-                        ),
-                        ref: listRef,
-                        children: filteredUsers.map((user, index) => /* @__PURE__ */ jsx(
-                          "li",
-                          {
-                            onClick: () => insertMention(user),
-                            className: classNames(
-                              "collab-thread-body--input--textarea--suggestionsList--item",
-                              collabStyles()["collab-thread-body--input--textarea--suggestionsList--item"],
-                              "collab-thread-body--input--textarea--suggestionsList--item-selected",
-                              index === selectedIndex ? collabStyles()["collab-thread-body--input--textarea--suggestionsList--item-selected"] : ""
-                            ),
-                            ref: (el) => itemRefs.current[index] = el,
-                            onKeyDown: (e) => {
-                              if (e.key === "Enter") {
-                                insertMention(user);
-                              } else {
-                                handleKeyDown(
-                                  e
-                                );
-                              }
-                            },
-                            tabIndex: -1,
-                            "aria-selected": index === selectedIndex,
-                            children: user.display.length > 20 ? /* @__PURE__ */ jsx(Tooltip, { content: user.display, children: user.display.substring(0, 18) + "..." }) : user.display
-                          },
-                          user.uid
-                        ))
+                        filteredUsers,
+                        selectedIndex,
+                        cursorPosition,
+                        inputRef,
+                        listRef,
+                        itemRefs,
+                        insertMention,
+                        handleKeyDown
                       }
                     )
                   ]
@@ -120,28 +173,12 @@ var CommentTextArea = React.memo(
                 flexAlignCenter
               ),
               children: [
+                /* @__PURE__ */ jsx(ErrorIndicator, { errorMessage: error.message }),
                 /* @__PURE__ */ jsx(
-                  "div",
+                  CharacterCounter,
                   {
-                    className: classNames(
-                      "collab-thread-input-indicator--error",
-                      collabStyles()["collab-thread-input-indicator--error"]
-                    ),
-                    children: error.message
-                  }
-                ),
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: classNames(
-                      "collab-thread-input-indicator--count",
-                      collabStyles()["collab-thread-input-indicator--count"]
-                    ),
-                    children: [
-                      state.message.length,
-                      "/",
-                      maxMessageLength
-                    ]
+                    currentLength: state.message.length,
+                    maxLength: maxMessageLength
                   }
                 )
               ]

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/CommentTextArea.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useEffect } from \"preact/hooks\";\nimport { collabStyles, flexAlignCenter } from \"../../../collab.style\";\nimport { ICommentTextAreaProps } from \"../../../types/collab.types\";\nimport { useCommentTextArea } from \"../../../hooks/useCommentTextArea\";\nimport classNames from \"classnames\";\nimport Tooltip from \"../Tooltip/Tooltip\";\n\nconst CommentTextArea: React.FC<ICommentTextAreaProps> = React.memo(\n    ({ userState, handleOnSaveRef, comment, onClose }) => {\n        // Use our custom hook to get all the functionality\n        const {\n            state,\n            error,\n            showSuggestions,\n            selectedIndex,\n            filteredUsers,\n            inputRef,\n            listRef,\n            itemRefs,\n            handleInputChange,\n            handleKeyDown,\n            handleSubmit,\n            insertMention,\n            maxMessageLength,\n        } = useCommentTextArea(userState, comment, onClose);\n\n        // Set up save ref for parent component\n        useEffect(() => {\n            handleOnSaveRef.current = handleSubmit;\n        }, [handleSubmit, handleOnSaveRef]);\n\n        return (\n            <div\n                className={classNames(\n                    \"collab-thread-body--input--wrapper\",\n                    collabStyles()[\"collab-thread-body--input--wrapper\"]\n                )}\n            >\n                <div\n                    className={classNames(\n                        \"collab-thread-body--input\",\n                        collabStyles()[\"collab-thread-body--input\"]\n                    )}\n                >\n                    <div\n                        className={classNames(\n                            \"collab-thread-body--input--textarea--wrapper\",\n                            collabStyles()[\n                                \"collab-thread-body--input--textarea--wrapper\"\n                            ]\n                        )}\n                    >\n                        <textarea\n                            name=\"collab-thread-body--input--textarea\"\n                            id=\"collab-thread-body--input--textarea\"\n                            rows={1}\n                            className={classNames(\n                                \"collab-thread-body--input--textarea\",\n                                collabStyles()[\n                                    \"collab-thread-body--input--textarea\"\n                                ]\n                            )}\n                            value={state.message}\n                            onChange={(event) =>\n                                handleInputChange(event as any)\n                            }\n                            onKeyDown={(event) => handleKeyDown(event as any)}\n                            maxLength={maxMessageLength}\n                            placeholder=\"Enter a comment\"\n                            ref={inputRef}\n                        ></textarea>\n                        {showSuggestions && filteredUsers.length > 0 && (\n                            <ul\n                                className={classNames(\n                                    \"collab-thread-body--input--textarea--suggestionsList\",\n                                    collabStyles()[\n                                        \"collab-thread-body--input--textarea--suggestionsList\"\n                                    ]\n                                )}\n                                // style={{\n                                //     left: `${cursorPosition.left}px`,\n                                //     top: `${cursorPosition.top}px`,\n                                // }}\n                                ref={listRef}\n                            >\n                                {filteredUsers.map((user, index) => (\n                                    <li\n                                        key={user.uid}\n                                        onClick={() => insertMention(user)}\n                                        className={classNames(\n                                            \"collab-thread-body--input--textarea--suggestionsList--item\",\n                                            collabStyles()[\n                                                \"collab-thread-body--input--textarea--suggestionsList--item\"\n                                            ],\n                                            \"collab-thread-body--input--textarea--suggestionsList--item-selected\",\n                                            index === selectedIndex\n                                                ? collabStyles()[\n                                                      \"collab-thread-body--input--textarea--suggestionsList--item-selected\"\n                                                  ]\n                                                : \"\"\n                                        )}\n                                        ref={(el: any) =>\n                                            (itemRefs.current[index] = el)\n                                        }\n                                        onKeyDown={(e) => {\n                                            if (e.key === \"Enter\") {\n                                                insertMention(user);\n                                            } else {\n                                                handleKeyDown(\n                                                    e as KeyboardEvent\n                                                );\n                                            }\n                                        }}\n                                        tabIndex={-1}\n                                        aria-selected={index === selectedIndex}\n                                    >\n                                        {user.display.length > 20 ? (\n                                            <Tooltip content={user.display}>\n                                                {user.display.substring(0, 18) +\n                                                    \"...\"}\n                                            </Tooltip>\n                                        ) : (\n                                            user.display\n                                        )}\n                                    </li>\n                                ))}\n                            </ul>\n                        )}\n                    </div>\n                </div>\n\n                <div\n                    className={classNames(\n                        \"collab-thread-input-indicator--wrapper\",\n                        \"flex-v-center\",\n                        collabStyles()[\n                            \"collab-thread-input-indicator--wrapper\"\n                        ],\n                        flexAlignCenter\n                    )}\n                >\n                    <div\n                        className={classNames(\n                            \"collab-thread-input-indicator--error\",\n                            collabStyles()[\n                                \"collab-thread-input-indicator--error\"\n                            ]\n                        )}\n                    >\n                        {error.message}\n                    </div>\n                    <div\n                        className={classNames(\n                            \"collab-thread-input-indicator--count\",\n                            collabStyles()[\n                                \"collab-thread-input-indicator--count\"\n                            ]\n                        )}\n                    >\n                        {state.message.length}/{maxMessageLength}\n                    </div>\n                </div>\n            </div>\n        );\n    }\n);\n\nexport default CommentTextArea;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/CommentTextArea.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useEffect } from \"preact/hooks\";\nimport { useCommentTextArea } from \"../../../hooks/useCommentTextArea\";\nimport { collabStyles, flexAlignCenter } from \"../../../collab.style\";\nimport {\n    ICommentTextAreaProps,\n    IMentionList,\n} from \"../../../types/collab.types\";\nimport classNames from \"classnames\";\nimport Tooltip from \"../Tooltip/Tooltip\";\n\nconst ErrorIndicator: React.FC<{ errorMessage: string }> = ({\n    errorMessage,\n}) => (\n    <div\n        className={classNames(\n            \"collab-thread-input-indicator--error\",\n            collabStyles()[\"collab-thread-input-indicator--error\"]\n        )}\n    >\n        {errorMessage}\n    </div>\n);\n\nconst CharacterCounter: React.FC<{\n    currentLength: number;\n    maxLength: number;\n}> = ({ currentLength, maxLength }) => (\n    <div\n        className={classNames(\n            \"collab-thread-input-indicator--count\",\n            collabStyles()[\"collab-thread-input-indicator--count\"]\n        )}\n    >\n        {currentLength}/{maxLength}\n    </div>\n);\n\nconst MentionSuggestionsList: React.FC<{\n    filteredUsers: IMentionList[];\n    selectedIndex: number;\n    cursorPosition: { top: number; showAbove: boolean };\n    inputRef: React.RefObject<HTMLTextAreaElement>;\n    listRef: React.RefObject<HTMLUListElement>;\n    itemRefs: React.MutableRefObject<(HTMLLIElement | null)[]>;\n    insertMention: (user: IMentionList) => void;\n    handleKeyDown: (event: KeyboardEvent) => void;\n}> = ({\n    filteredUsers,\n    selectedIndex,\n    cursorPosition,\n    inputRef,\n    listRef,\n    itemRefs,\n    insertMention,\n    handleKeyDown,\n}) => {\n    if (filteredUsers.length === 0) return null;\n\n    return (\n        <ul\n            className={classNames(\n                \"collab-thread-body--input--textarea--suggestionsList\",\n                collabStyles()[\n                    \"collab-thread-body--input--textarea--suggestionsList\"\n                ]\n            )}\n            style={{\n                ...(cursorPosition.showAbove\n                    ? {\n                          bottom: `${window.innerHeight - (inputRef.current?.getBoundingClientRect().top || 0) - cursorPosition.top}px`,\n                          top: \"auto\",\n                      }\n                    : {\n                          top: `${(inputRef.current?.getBoundingClientRect().top || 0) + cursorPosition.top}px`,\n                      }),\n            }}\n            ref={listRef}\n        >\n            {filteredUsers.map((user, index) => (\n                <li\n                    key={user.uid}\n                    onClick={() => insertMention(user)}\n                    className={classNames(\n                        \"collab-thread-body--input--textarea--suggestionsList--item\",\n                        collabStyles()[\n                            \"collab-thread-body--input--textarea--suggestionsList--item\"\n                        ],\n                        index === selectedIndex\n                            ? collabStyles()[\n                                  \"collab-thread-body--input--textarea--suggestionsList--item-selected\"\n                              ]\n                            : \"\"\n                    )}\n                    ref={(el) => (itemRefs.current[index] = el)}\n                    onKeyDown={(e) =>\n                        e.key === \"Enter\"\n                            ? insertMention(user)\n                            : handleKeyDown(e as KeyboardEvent)\n                    }\n                    tabIndex={-1}\n                    aria-selected={index === selectedIndex}\n                >\n                    {(user.display?.length || 0) > 20 ? (\n                        <Tooltip content={user.display || \"\"}>\n                            {(user.display || \"\").substring(0, 18) + \"...\"}\n                        </Tooltip>\n                    ) : (\n                        user.display || \"\"\n                    )}\n                </li>\n            ))}\n        </ul>\n    );\n};\n\nconst CommentTextArea: React.FC<ICommentTextAreaProps> = React.memo(\n    ({ userState, handleOnSaveRef, comment, onClose }) => {\n        const {\n            state,\n            error,\n            showSuggestions,\n            cursorPosition,\n            selectedIndex,\n            filteredUsers,\n            inputRef,\n            listRef,\n            itemRefs,\n            handleInputChange,\n            handleKeyDown,\n            handleSubmit,\n            insertMention,\n            maxMessageLength,\n        } = useCommentTextArea(userState, comment, onClose);\n\n        const onChangeHandler = (event: Event) =>\n            handleInputChange(event as any);\n        const onKeyDownHandler = (event: KeyboardEvent) =>\n            handleKeyDown(event as any);\n\n        useEffect(() => {\n            handleOnSaveRef.current = handleSubmit;\n        }, [handleSubmit, handleOnSaveRef]);\n\n        return (\n            <div\n                className={classNames(\n                    \"collab-thread-body--input--wrapper\",\n                    collabStyles()[\"collab-thread-body--input--wrapper\"]\n                )}\n            >\n                <div\n                    className={classNames(\n                        \"collab-thread-body--input\",\n                        collabStyles()[\"collab-thread-body--input\"]\n                    )}\n                >\n                    <div\n                        className={classNames(\n                            \"collab-thread-body--input--textarea--wrapper\",\n                            collabStyles()[\n                                \"collab-thread-body--input--textarea--wrapper\"\n                            ]\n                        )}\n                    >\n                        <textarea\n                            name=\"collab-thread-body--input--textarea\"\n                            id=\"collab-thread-body--input--textarea\"\n                            rows={1}\n                            className={classNames(\n                                \"collab-thread-body--input--textarea\",\n                                collabStyles()[\n                                    \"collab-thread-body--input--textarea\"\n                                ]\n                            )}\n                            value={state.message}\n                            onChange={onChangeHandler}\n                            onKeyDown={onKeyDownHandler}\n                            maxLength={maxMessageLength}\n                            placeholder=\"Enter a comment or tag others using “@”\"\n                            ref={inputRef}\n                        />\n                        {showSuggestions && (\n                            <MentionSuggestionsList\n                                filteredUsers={filteredUsers}\n                                selectedIndex={selectedIndex}\n                                cursorPosition={cursorPosition}\n                                inputRef={inputRef}\n                                listRef={listRef}\n                                itemRefs={itemRefs}\n                                insertMention={insertMention}\n                                handleKeyDown={handleKeyDown}\n                            />\n                        )}\n                    </div>\n                </div>\n\n                <div\n                    className={classNames(\n                        \"collab-thread-input-indicator--wrapper\",\n                        \"flex-v-center\",\n                        collabStyles()[\n                            \"collab-thread-input-indicator--wrapper\"\n                        ],\n                        flexAlignCenter\n                    )}\n                >\n                    <ErrorIndicator errorMessage={error.message} />\n                    <CharacterCounter\n                        currentLength={state.message.length}\n                        maxLength={maxMessageLength}\n                    />\n                </div>\n            </div>\n        );\n    }\n);\n\nexport default CommentTextArea;\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,92 @@
+"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/ThreadActionBar.tsx
+var ThreadActionBar_exports = {};
+__export(ThreadActionBar_exports, {
+  default: () => ThreadActionBar_default
+});
+module.exports = __toCommonJS(ThreadActionBar_exports);
+var import_classnames = __toESM(require("classnames"), 1);
+var import_Button = __toESM(require("../Button/Button.cjs"), 1);
+var import_collab = require("../../../collab.style.cjs");
+var import_collabUtils = require("../../../utils/collabUtils.cjs");
+var import_jsx_runtime = require("preact/jsx-runtime");
+var ThreadActionBar = ({
+  commentCount,
+  displayResolve,
+  handleResolve,
+  isResolving
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: (0, import_classnames.default)(
+          "collab-thread-header--title",
+          (0, import_collab.collabStyles)()["collab-thread-header--title"]
+        ),
+        children: (0, import_collabUtils.getThreadTitle)(commentCount)
+      }
+    ),
+    displayResolve && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Button.default,
+      {
+        buttonType: "tertiary",
+        className: (0, import_classnames.default)(
+          "collab-thread-header--resolve",
+          (0, import_collab.collabStyles)()["collab-thread-header--resolve"]
+        ),
+        icon: "RightMarkActive",
+        iconProps: {
+          className: (0, import_classnames.default)(
+            (0, import_collab.collabStyles)()["collab-thread-header--resolve--icon"],
+            "collab-thread-header--resolve--icon"
+          )
+        },
+        onClick: handleResolve,
+        testId: "collab-thread-resolve-btn",
+        isLoading: isResolving,
+        loadingColor: "secondary",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: (0, import_classnames.default)(
+              "collab-thread-header--resolve--text",
+              (0, import_collab.collabStyles)()["collab-thread-header--resolve--text"]
+            ),
+            children: "Resolve"
+          }
+        )
+      }
+    )
+  ] });
+};
+var ThreadActionBar_default = ThreadActionBar;
+//# sourceMappingURL=ThreadActionBar.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/ThreadActionBar.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport classNames from \"classnames\";\nimport Button from \"../Button/Button\";\nimport { collabStyles } from \"../../../collab.style\";\nimport { getThreadTitle } from \"../../../utils/collabUtils\";\n\ninterface ThreadActionsProps {\n    commentCount: number;\n    displayResolve: boolean;\n    handleResolve: () => void;\n    isResolving: boolean;\n}\n\nconst ThreadActionBar: React.FC<ThreadActionsProps> = ({\n    commentCount,\n    displayResolve,\n    handleResolve,\n    isResolving,\n}) => {\n    return (\n        <>\n            <div\n                className={classNames(\n                    \"collab-thread-header--title\",\n                    collabStyles()[\"collab-thread-header--title\"]\n                )}\n            >\n                {getThreadTitle(commentCount)}\n            </div>\n            {displayResolve && (\n                <Button\n                    buttonType=\"tertiary\"\n                    className={classNames(\n                        \"collab-thread-header--resolve\",\n                        collabStyles()[\"collab-thread-header--resolve\"]\n                    )}\n                    icon=\"RightMarkActive\"\n                    iconProps={{\n                        className: classNames(\n                            collabStyles()[\n                                \"collab-thread-header--resolve--icon\"\n                            ],\n                            \"collab-thread-header--resolve--icon\"\n                        ),\n                    }}\n                    onClick={handleResolve}\n                    testId=\"collab-thread-resolve-btn\"\n                    isLoading={isResolving}\n                    loadingColor=\"secondary\"\n                >\n                    <span\n                        className={classNames(\n                            \"collab-thread-header--resolve--text\",\n                            collabStyles()[\n                                \"collab-thread-header--resolve--text\"\n                            ]\n                        )}\n                    >\n                        Resolve\n                    </span>\n                </Button>\n            )}\n        </>\n    );\n};\n\nexport default ThreadActionBar;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,wBAAuB;AACvB,oBAAmB;AACnB,oBAA6B;AAC7B,yBAA+B;AAgBvB;AAPR,IAAM,kBAAgD,CAAC;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAM;AACF,SACI,4EACI;AAAA;AAAA,MAAC;AAAA;AAAA,QACG,eAAW,kBAAAA;AAAA,UACP;AAAA,cACA,4BAAa,EAAE,6BAA6B;AAAA,QAChD;AAAA,QAEC,iDAAe,YAAY;AAAA;AAAA,IAChC;AAAA,IACC,kBACG;AAAA,MAAC,cAAAC;AAAA,MAAA;AAAA,QACG,YAAW;AAAA,QACX,eAAW,kBAAAD;AAAA,UACP;AAAA,cACA,4BAAa,EAAE,+BAA+B;AAAA,QAClD;AAAA,QACA,MAAK;AAAA,QACL,WAAW;AAAA,UACP,eAAW,kBAAAA;AAAA,gBACP,4BAAa,EACT,qCACJ;AAAA,YACA;AAAA,UACJ;AAAA,QACJ;AAAA,QACA,SAAS;AAAA,QACT,QAAO;AAAA,QACP,WAAW;AAAA,QACX,cAAa;AAAA,QAEb;AAAA,UAAC;AAAA;AAAA,YACG,eAAW,kBAAAA;AAAA,cACP;AAAA,kBACA,4BAAa,EACT,qCACJ;AAAA,YACJ;AAAA,YACH;AAAA;AAAA,QAED;AAAA;AAAA,IACJ;AAAA,KAER;AAER;AAEA,IAAO,0BAAQ;","names":["classNames","Button"]}

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

@@ -0,0 +1,13 @@
+import React from 'preact/compat';
+
+/** @jsxImportSource preact */
+
+interface ThreadActionsProps {
+    commentCount: number;
+    displayResolve: boolean;
+    handleResolve: () => void;
+    isResolving: boolean;
+}
+declare const ThreadActionBar: React.FC<ThreadActionsProps>;
+
+export { ThreadActionBar as default };

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

@@ -0,0 +1,13 @@
+import React from 'preact/compat';
+
+/** @jsxImportSource preact */
+
+interface ThreadActionsProps {
+    commentCount: number;
+    displayResolve: boolean;
+    handleResolve: () => void;
+    isResolving: boolean;
+}
+declare const ThreadActionBar: React.FC<ThreadActionsProps>;
+
+export { ThreadActionBar as default };

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

@@ -0,0 +1,63 @@
+import "../../../../chunk-5WRI5ZAA.js";
+
+// src/visualBuilder/components/Collab/ThreadPopup/ThreadActionBar.tsx
+import classNames from "classnames";
+import Button from "../Button/Button.js";
+import { collabStyles } from "../../../collab.style.js";
+import { getThreadTitle } from "../../../utils/collabUtils.js";
+import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
+var ThreadActionBar = ({
+  commentCount,
+  displayResolve,
+  handleResolve,
+  isResolving
+}) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames(
+          "collab-thread-header--title",
+          collabStyles()["collab-thread-header--title"]
+        ),
+        children: getThreadTitle(commentCount)
+      }
+    ),
+    displayResolve && /* @__PURE__ */ jsx(
+      Button,
+      {
+        buttonType: "tertiary",
+        className: classNames(
+          "collab-thread-header--resolve",
+          collabStyles()["collab-thread-header--resolve"]
+        ),
+        icon: "RightMarkActive",
+        iconProps: {
+          className: classNames(
+            collabStyles()["collab-thread-header--resolve--icon"],
+            "collab-thread-header--resolve--icon"
+          )
+        },
+        onClick: handleResolve,
+        testId: "collab-thread-resolve-btn",
+        isLoading: isResolving,
+        loadingColor: "secondary",
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: classNames(
+              "collab-thread-header--resolve--text",
+              collabStyles()["collab-thread-header--resolve--text"]
+            ),
+            children: "Resolve"
+          }
+        )
+      }
+    )
+  ] });
+};
+var ThreadActionBar_default = ThreadActionBar;
+export {
+  ThreadActionBar_default as default
+};
+//# sourceMappingURL=ThreadActionBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/ThreadActionBar.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport classNames from \"classnames\";\nimport Button from \"../Button/Button\";\nimport { collabStyles } from \"../../../collab.style\";\nimport { getThreadTitle } from \"../../../utils/collabUtils\";\n\ninterface ThreadActionsProps {\n    commentCount: number;\n    displayResolve: boolean;\n    handleResolve: () => void;\n    isResolving: boolean;\n}\n\nconst ThreadActionBar: React.FC<ThreadActionsProps> = ({\n    commentCount,\n    displayResolve,\n    handleResolve,\n    isResolving,\n}) => {\n    return (\n        <>\n            <div\n                className={classNames(\n                    \"collab-thread-header--title\",\n                    collabStyles()[\"collab-thread-header--title\"]\n                )}\n            >\n                {getThreadTitle(commentCount)}\n            </div>\n            {displayResolve && (\n                <Button\n                    buttonType=\"tertiary\"\n                    className={classNames(\n                        \"collab-thread-header--resolve\",\n                        collabStyles()[\"collab-thread-header--resolve\"]\n                    )}\n                    icon=\"RightMarkActive\"\n                    iconProps={{\n                        className: classNames(\n                            collabStyles()[\n                                \"collab-thread-header--resolve--icon\"\n                            ],\n                            \"collab-thread-header--resolve--icon\"\n                        ),\n                    }}\n                    onClick={handleResolve}\n                    testId=\"collab-thread-resolve-btn\"\n                    isLoading={isResolving}\n                    loadingColor=\"secondary\"\n                >\n                    <span\n                        className={classNames(\n                            \"collab-thread-header--resolve--text\",\n                            collabStyles()[\n                                \"collab-thread-header--resolve--text\"\n                            ]\n                        )}\n                    >\n                        Resolve\n                    </span>\n                </Button>\n            )}\n        </>\n    );\n};\n\nexport default ThreadActionBar;\n"],"mappings":";;;AAEA,OAAO,gBAAgB;AACvB,OAAO,YAAY;AACnB,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAgBvB,mBACI,KADJ;AAPR,IAAM,kBAAgD,CAAC;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAM;AACF,SACI,iCACI;AAAA;AAAA,MAAC;AAAA;AAAA,QACG,WAAW;AAAA,UACP;AAAA,UACA,aAAa,EAAE,6BAA6B;AAAA,QAChD;AAAA,QAEC,yBAAe,YAAY;AAAA;AAAA,IAChC;AAAA,IACC,kBACG;AAAA,MAAC;AAAA;AAAA,QACG,YAAW;AAAA,QACX,WAAW;AAAA,UACP;AAAA,UACA,aAAa,EAAE,+BAA+B;AAAA,QAClD;AAAA,QACA,MAAK;AAAA,QACL,WAAW;AAAA,UACP,WAAW;AAAA,YACP,aAAa,EACT,qCACJ;AAAA,YACA;AAAA,UACJ;AAAA,QACJ;AAAA,QACA,SAAS;AAAA,QACT,QAAO;AAAA,QACP,WAAW;AAAA,QACX,cAAa;AAAA,QAEb;AAAA,UAAC;AAAA;AAAA,YACG,WAAW;AAAA,cACP;AAAA,cACA,aAAa,EACT,qCACJ;AAAA,YACJ;AAAA,YACH;AAAA;AAAA,QAED;AAAA;AAAA,IACJ;AAAA,KAER;AAER;AAEA,IAAO,0BAAQ;","names":[]}

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

@@ -80,6 +80,7 @@ var ThreadFooter = ({
             onClick: onSubmit,
             testId: "thread-save-btn",
             disabled: isDisabled || loading,
+            isLoading: loading,
             children: editComment === "" ? "Post" : "Update"
           }
         )

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/ThreadFooter.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { JSX } from \"preact\";\nimport { useState } from \"preact/hooks\";\nimport Button from \"../Button/Button\";\nimport ButtonGroup from \"../ButtonGroup/ButtonGroup\";\nimport classNames from \"classnames\";\nimport { collabStyles, flexAlignCenter } from \"../../../collab.style\";\nimport { IThreadFooter } from \"../../../types/collab.types\";\n\nconst ThreadFooter = ({\n    onClose,\n    handleOnSaveRef,\n    isDisabled,\n    editComment,\n}: IThreadFooter) => {\n    const [loading, setLoading] = useState(false);\n    const onSubmit: JSX.MouseEventHandler<HTMLButtonElement> = async (\n        event\n    ) => {\n        setLoading(true);\n        event.preventDefault();\n        await handleOnSaveRef.current?.();\n        setLoading(false);\n    };\n\n    return (\n        <div\n            className={classNames(\n                \"collab-thread-footer--wrapper\",\n                \"flex-v-center\",\n                collabStyles()[\"collab-thread-footer--wrapper\"],\n                flexAlignCenter\n            )}\n        >\n            <ButtonGroup>\n                <Button\n                    type=\"button\"\n                    buttonType=\"tertiary\"\n                    testId={\"thread-cancel-btn\"}\n                    onClick={() => onClose(false)}\n                >\n                    Cancel\n                </Button>\n                <Button\n                    type=\"button\"\n                    buttonType=\"primary\"\n                    onClick={onSubmit}\n                    testId={\"thread-save-btn\"}\n                    disabled={isDisabled || loading}\n                >\n                    {editComment === \"\" ? \"Post\" : \"Update\"}\n                </Button>\n            </ButtonGroup>\n        </div>\n    );\n};\nexport default ThreadFooter;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,mBAAyB;AACzB,oBAAmB;AACnB,yBAAwB;AACxB,wBAAuB;AACvB,oBAA8C;AA4BlC;AAzBZ,IAAM,eAAe,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAqB;AACjB,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,KAAK;AAC5C,QAAM,WAAqD,OACvD,UACC;AACD,eAAW,IAAI;AACf,UAAM,eAAe;AACrB,UAAM,gBAAgB,UAAU;AAChC,eAAW,KAAK;AAAA,EACpB;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,eAAW,kBAAAA;AAAA,QACP;AAAA,QACA;AAAA,YACA,4BAAa,EAAE,+BAA+B;AAAA,QAC9C;AAAA,MACJ;AAAA,MAEA,uDAAC,mBAAAC,SAAA,EACG;AAAA;AAAA,UAAC,cAAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,YAAW;AAAA,YACX,QAAQ;AAAA,YACR,SAAS,MAAM,QAAQ,KAAK;AAAA,YAC/B;AAAA;AAAA,QAED;AAAA,QACA;AAAA,UAAC,cAAAA;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,YAAW;AAAA,YACX,SAAS;AAAA,YACT,QAAQ;AAAA,YACR,UAAU,cAAc;AAAA,YAEvB,0BAAgB,KAAK,SAAS;AAAA;AAAA,QACnC;AAAA,SACJ;AAAA;AAAA,EACJ;AAER;AACA,IAAO,uBAAQ;","names":["classNames","ButtonGroup","Button"]}
+{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/ThreadFooter.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { JSX } from \"preact\";\nimport { useState } from \"preact/hooks\";\nimport Button from \"../Button/Button\";\nimport ButtonGroup from \"../ButtonGroup/ButtonGroup\";\nimport classNames from \"classnames\";\nimport { collabStyles, flexAlignCenter } from \"../../../collab.style\";\nimport { IThreadFooter } from \"../../../types/collab.types\";\n\nconst ThreadFooter = ({\n    onClose,\n    handleOnSaveRef,\n    isDisabled,\n    editComment,\n}: IThreadFooter) => {\n    const [loading, setLoading] = useState(false);\n    const onSubmit: JSX.MouseEventHandler<HTMLButtonElement> = async (\n        event\n    ) => {\n        setLoading(true);\n        event.preventDefault();\n        await handleOnSaveRef.current?.();\n        setLoading(false);\n    };\n\n    return (\n        <div\n            className={classNames(\n                \"collab-thread-footer--wrapper\",\n                \"flex-v-center\",\n                collabStyles()[\"collab-thread-footer--wrapper\"],\n                flexAlignCenter\n            )}\n        >\n            <ButtonGroup>\n                <Button\n                    type=\"button\"\n                    buttonType=\"tertiary\"\n                    testId={\"thread-cancel-btn\"}\n                    onClick={() => onClose(false)}\n                >\n                    Cancel\n                </Button>\n                <Button\n                    type=\"button\"\n                    buttonType=\"primary\"\n                    onClick={onSubmit}\n                    testId={\"thread-save-btn\"}\n                    disabled={isDisabled || loading}\n                    isLoading={loading}\n                >\n                    {editComment === \"\" ? \"Post\" : \"Update\"}\n                </Button>\n            </ButtonGroup>\n        </div>\n    );\n};\nexport default ThreadFooter;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,mBAAyB;AACzB,oBAAmB;AACnB,yBAAwB;AACxB,wBAAuB;AACvB,oBAA8C;AA4BlC;AAzBZ,IAAM,eAAe,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAqB;AACjB,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,KAAK;AAC5C,QAAM,WAAqD,OACvD,UACC;AACD,eAAW,IAAI;AACf,UAAM,eAAe;AACrB,UAAM,gBAAgB,UAAU;AAChC,eAAW,KAAK;AAAA,EACpB;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,eAAW,kBAAAA;AAAA,QACP;AAAA,QACA;AAAA,YACA,4BAAa,EAAE,+BAA+B;AAAA,QAC9C;AAAA,MACJ;AAAA,MAEA,uDAAC,mBAAAC,SAAA,EACG;AAAA;AAAA,UAAC,cAAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,YAAW;AAAA,YACX,QAAQ;AAAA,YACR,SAAS,MAAM,QAAQ,KAAK;AAAA,YAC/B;AAAA;AAAA,QAED;AAAA,QACA;AAAA,UAAC,cAAAA;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,YAAW;AAAA,YACX,SAAS;AAAA,YACT,QAAQ;AAAA,YACR,UAAU,cAAc;AAAA,YACxB,WAAW;AAAA,YAEV,0BAAgB,KAAK,SAAS;AAAA;AAAA,QACnC;AAAA,SACJ;AAAA;AAAA,EACJ;AAER;AACA,IAAO,uBAAQ;","names":["classNames","ButtonGroup","Button"]}

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

@@ -48,6 +48,7 @@ var ThreadFooter = ({
             onClick: onSubmit,
             testId: "thread-save-btn",
             disabled: isDisabled || loading,
+            isLoading: loading,
             children: editComment === "" ? "Post" : "Update"
           }
         )

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/ThreadFooter.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { JSX } from \"preact\";\nimport { useState } from \"preact/hooks\";\nimport Button from \"../Button/Button\";\nimport ButtonGroup from \"../ButtonGroup/ButtonGroup\";\nimport classNames from \"classnames\";\nimport { collabStyles, flexAlignCenter } from \"../../../collab.style\";\nimport { IThreadFooter } from \"../../../types/collab.types\";\n\nconst ThreadFooter = ({\n    onClose,\n    handleOnSaveRef,\n    isDisabled,\n    editComment,\n}: IThreadFooter) => {\n    const [loading, setLoading] = useState(false);\n    const onSubmit: JSX.MouseEventHandler<HTMLButtonElement> = async (\n        event\n    ) => {\n        setLoading(true);\n        event.preventDefault();\n        await handleOnSaveRef.current?.();\n        setLoading(false);\n    };\n\n    return (\n        <div\n            className={classNames(\n                \"collab-thread-footer--wrapper\",\n                \"flex-v-center\",\n                collabStyles()[\"collab-thread-footer--wrapper\"],\n                flexAlignCenter\n            )}\n        >\n            <ButtonGroup>\n                <Button\n                    type=\"button\"\n                    buttonType=\"tertiary\"\n                    testId={\"thread-cancel-btn\"}\n                    onClick={() => onClose(false)}\n                >\n                    Cancel\n                </Button>\n                <Button\n                    type=\"button\"\n                    buttonType=\"primary\"\n                    onClick={onSubmit}\n                    testId={\"thread-save-btn\"}\n                    disabled={isDisabled || loading}\n                >\n                    {editComment === \"\" ? \"Post\" : \"Update\"}\n                </Button>\n            </ButtonGroup>\n        </div>\n    );\n};\nexport default ThreadFooter;\n"],"mappings":";;;AAGA,SAAS,gBAAgB;AACzB,OAAO,YAAY;AACnB,OAAO,iBAAiB;AACxB,OAAO,gBAAgB;AACvB,SAAS,cAAc,uBAAuB;AA4BlC,SACI,KADJ;AAzBZ,IAAM,eAAe,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAqB;AACjB,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,WAAqD,OACvD,UACC;AACD,eAAW,IAAI;AACf,UAAM,eAAe;AACrB,UAAM,gBAAgB,UAAU;AAChC,eAAW,KAAK;AAAA,EACpB;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,WAAW;AAAA,QACP;AAAA,QACA;AAAA,QACA,aAAa,EAAE,+BAA+B;AAAA,QAC9C;AAAA,MACJ;AAAA,MAEA,+BAAC,eACG;AAAA;AAAA,UAAC;AAAA;AAAA,YACG,MAAK;AAAA,YACL,YAAW;AAAA,YACX,QAAQ;AAAA,YACR,SAAS,MAAM,QAAQ,KAAK;AAAA,YAC/B;AAAA;AAAA,QAED;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACG,MAAK;AAAA,YACL,YAAW;AAAA,YACX,SAAS;AAAA,YACT,QAAQ;AAAA,YACR,UAAU,cAAc;AAAA,YAEvB,0BAAgB,KAAK,SAAS;AAAA;AAAA,QACnC;AAAA,SACJ;AAAA;AAAA,EACJ;AAER;AACA,IAAO,uBAAQ;","names":[]}
+{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/ThreadFooter.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { JSX } from \"preact\";\nimport { useState } from \"preact/hooks\";\nimport Button from \"../Button/Button\";\nimport ButtonGroup from \"../ButtonGroup/ButtonGroup\";\nimport classNames from \"classnames\";\nimport { collabStyles, flexAlignCenter } from \"../../../collab.style\";\nimport { IThreadFooter } from \"../../../types/collab.types\";\n\nconst ThreadFooter = ({\n    onClose,\n    handleOnSaveRef,\n    isDisabled,\n    editComment,\n}: IThreadFooter) => {\n    const [loading, setLoading] = useState(false);\n    const onSubmit: JSX.MouseEventHandler<HTMLButtonElement> = async (\n        event\n    ) => {\n        setLoading(true);\n        event.preventDefault();\n        await handleOnSaveRef.current?.();\n        setLoading(false);\n    };\n\n    return (\n        <div\n            className={classNames(\n                \"collab-thread-footer--wrapper\",\n                \"flex-v-center\",\n                collabStyles()[\"collab-thread-footer--wrapper\"],\n                flexAlignCenter\n            )}\n        >\n            <ButtonGroup>\n                <Button\n                    type=\"button\"\n                    buttonType=\"tertiary\"\n                    testId={\"thread-cancel-btn\"}\n                    onClick={() => onClose(false)}\n                >\n                    Cancel\n                </Button>\n                <Button\n                    type=\"button\"\n                    buttonType=\"primary\"\n                    onClick={onSubmit}\n                    testId={\"thread-save-btn\"}\n                    disabled={isDisabled || loading}\n                    isLoading={loading}\n                >\n                    {editComment === \"\" ? \"Post\" : \"Update\"}\n                </Button>\n            </ButtonGroup>\n        </div>\n    );\n};\nexport default ThreadFooter;\n"],"mappings":";;;AAGA,SAAS,gBAAgB;AACzB,OAAO,YAAY;AACnB,OAAO,iBAAiB;AACxB,OAAO,gBAAgB;AACvB,SAAS,cAAc,uBAAuB;AA4BlC,SACI,KADJ;AAzBZ,IAAM,eAAe,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAqB;AACjB,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,WAAqD,OACvD,UACC;AACD,eAAW,IAAI;AACf,UAAM,eAAe;AACrB,UAAM,gBAAgB,UAAU;AAChC,eAAW,KAAK;AAAA,EACpB;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,WAAW;AAAA,QACP;AAAA,QACA;AAAA,QACA,aAAa,EAAE,+BAA+B;AAAA,QAC9C;AAAA,MACJ;AAAA,MAEA,+BAAC,eACG;AAAA;AAAA,UAAC;AAAA;AAAA,YACG,MAAK;AAAA,YACL,YAAW;AAAA,YACX,QAAQ;AAAA,YACR,SAAS,MAAM,QAAQ,KAAK;AAAA,YAC/B;AAAA;AAAA,QAED;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACG,MAAK;AAAA,YACL,YAAW;AAAA,YACX,SAAS;AAAA,YACT,QAAQ;AAAA,YACR,UAAU,cAAc;AAAA,YACxB,WAAW;AAAA,YAEV,0BAAgB,KAAK,SAAS;AAAA;AAAA,QACnC;AAAA,SACJ;AAAA;AAAA,EACJ;AAER;AACA,IAAO,uBAAQ;","names":[]}

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

@@ -36,25 +36,26 @@ module.exports = __toCommonJS(ThreadHeader_exports);
 var import_compat = __toESM(require("preact/compat"), 1);
 var import_hooks = require("preact/hooks");
 var import_classnames = __toESM(require("classnames"), 1);
-var import_Button = __toESM(require("../Button/Button.cjs"), 1);
+var import_ThreadActionBar = __toESM(require("./ThreadActionBar.cjs"), 1);
 var import_collab = require("../../../collab.style.cjs");
-var import_collabUtils = require("../../../utils/collabUtils.cjs");
 var import_jsx_runtime = require("preact/jsx-runtime");
 var ThreadHeader = import_compat.default.memo(
   ({ onClose, displayResolve, onResolve, commentCount, activeThread }) => {
+    const [isResolving, setIsResolving] = (0, import_hooks.useState)(false);
     const handleResolve = (0, import_hooks.useCallback)(async () => {
+      if (isResolving) return;
       try {
+        setIsResolving(true);
         const payload = {
           threadUid: activeThread._id,
-          payload: {
-            threadState: 2
-          }
+          payload: { threadState: 2 }
         };
-        const resolveResponse = await onResolve(payload);
+        await onResolve(payload);
+      } finally {
         onClose(true);
-      } catch (error) {
+        setIsResolving(false);
       }
-    }, [activeThread]);
+    }, [activeThread, isResolving, onResolve, onClose]);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
@@ -64,7 +65,7 @@ var ThreadHeader = import_compat.default.memo(
           (0, import_collab.collabStyles)()["collab-thread-header--wrapper"],
           import_collab.flexAlignCenter
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
           {
             className: (0, import_classnames.default)(
@@ -73,47 +74,15 @@ var ThreadHeader = import_compat.default.memo(
               (0, import_collab.collabStyles)()["collab-thread-header--container"],
               import_collab.flexAlignCenter
             ),
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "div",
-                {
-                  className: (0, import_classnames.default)(
-                    "collab-thread-header--title",
-                    (0, import_collab.collabStyles)()["collab-thread-header--title"]
-                  ),
-                  children: (0, import_collabUtils.getThreadTitle)(commentCount)
-                }
-              ),
-              displayResolve ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_Button.default,
-                {
-                  buttonType: "tertiary",
-                  className: (0, import_classnames.default)(
-                    "collab-thread-header--resolve",
-                    (0, import_collab.collabStyles)()["collab-thread-header--resolve"]
-                  ),
-                  icon: "RightMarkActive",
-                  iconProps: {
-                    className: (0, import_classnames.default)(
-                      (0, import_collab.collabStyles)()["collab-thread-header--resolve--icon"],
-                      "collab-thread-header--resolve--icon"
-                    )
-                  },
-                  onClick: handleResolve,
-                  testId: "collab-thread-resolve-btn",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    "span",
-                    {
-                      className: (0, import_classnames.default)(
-                        "collab-thread-header--resolve--text",
-                        (0, import_collab.collabStyles)()["collab-thread-header--resolve--text"]
-                      ),
-                      children: "Resolve"
-                    }
-                  )
-                }
-              ) : null
-            ]
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_ThreadActionBar.default,
+              {
+                commentCount,
+                displayResolve,
+                handleResolve,
+                isResolving
+              }
+            )
           }
         )
       }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/ThreadHeader.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useCallback } from \"preact/hooks\";\nimport classNames from \"classnames\";\nimport Button from \"../Button/Button\";\nimport { collabStyles, flexAlignCenter } from \"../../../collab.style\";\nimport { getThreadTitle } from \"../../../utils/collabUtils\";\nimport {\n    IDefaultAPIResponse,\n    IThreadHeader,\n} from \"../../../types/collab.types\";\n\nconst ThreadHeader: React.FC<IThreadHeader> = React.memo(\n    ({ onClose, displayResolve, onResolve, commentCount, activeThread }) => {\n        // Handler for deleting a comment\n        const handleResolve = useCallback(async () => {\n            try {\n                // Call the onResolveComment function\n                const payload = {\n                    threadUid: activeThread._id,\n                    payload: {\n                        threadState: 2,\n                    },\n                };\n                const resolveResponse: IDefaultAPIResponse =\n                    await onResolve(payload);\n                onClose(true);\n            } catch (error: any) {}\n        }, [activeThread]);\n\n        return (\n            <div\n                className={classNames(\n                    \"collab-thread-header--wrapper\",\n                    \"flex-v-center\",\n                    collabStyles()[\"collab-thread-header--wrapper\"],\n                    flexAlignCenter\n                )}\n            >\n                <div\n                    className={classNames(\n                        \"collab-thread-header--container\",\n                        \"flex-v-center\",\n                        collabStyles()[\"collab-thread-header--container\"],\n                        flexAlignCenter\n                    )}\n                >\n                    <div\n                        className={classNames(\n                            \"collab-thread-header--title\",\n                            collabStyles()[\"collab-thread-header--title\"]\n                        )}\n                    >\n                        {getThreadTitle(commentCount)}\n                    </div>\n                    {displayResolve ? (\n                        <Button\n                            buttonType=\"tertiary\"\n                            className={classNames(\n                                \"collab-thread-header--resolve\",\n                                collabStyles()[\"collab-thread-header--resolve\"]\n                            )}\n                            icon=\"RightMarkActive\"\n                            iconProps={{\n                                className: classNames(\n                                    collabStyles()[\n                                        \"collab-thread-header--resolve--icon\"\n                                    ],\n                                    \"collab-thread-header--resolve--icon\"\n                                ),\n                            }}\n                            onClick={handleResolve}\n                            testId=\"collab-thread-resolve-btn\"\n                        >\n                            <span\n                                className={classNames(\n                                    \"collab-thread-header--resolve--text\",\n                                    collabStyles()[\n                                        \"collab-thread-header--resolve--text\"\n                                    ]\n                                )}\n                            >\n                                Resolve\n                            </span>\n                        </Button>\n                    ) : null}\n                </div>\n            </div>\n        );\n    }\n);\n\nexport default ThreadHeader;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,oBAAkB;AAClB,mBAA4B;AAC5B,wBAAuB;AACvB,oBAAmB;AACnB,oBAA8C;AAC9C,yBAA+B;AAiCf;AA3BhB,IAAM,eAAwC,cAAAA,QAAM;AAAA,EAChD,CAAC,EAAE,SAAS,gBAAgB,WAAW,cAAc,aAAa,MAAM;AAEpE,UAAM,oBAAgB,0BAAY,YAAY;AAC1C,UAAI;AAEA,cAAM,UAAU;AAAA,UACZ,WAAW,aAAa;AAAA,UACxB,SAAS;AAAA,YACL,aAAa;AAAA,UACjB;AAAA,QACJ;AACA,cAAM,kBACF,MAAM,UAAU,OAAO;AAC3B,gBAAQ,IAAI;AAAA,MAChB,SAAS,OAAY;AAAA,MAAC;AAAA,IAC1B,GAAG,CAAC,YAAY,CAAC;AAEjB,WACI;AAAA,MAAC;AAAA;AAAA,QACG,eAAW,kBAAAC;AAAA,UACP;AAAA,UACA;AAAA,cACA,4BAAa,EAAE,+BAA+B;AAAA,UAC9C;AAAA,QACJ;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACG,eAAW,kBAAAA;AAAA,cACP;AAAA,cACA;AAAA,kBACA,4BAAa,EAAE,iCAAiC;AAAA,cAChD;AAAA,YACJ;AAAA,YAEA;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACG,eAAW,kBAAAA;AAAA,oBACP;AAAA,wBACA,4BAAa,EAAE,6BAA6B;AAAA,kBAChD;AAAA,kBAEC,iDAAe,YAAY;AAAA;AAAA,cAChC;AAAA,cACC,iBACG;AAAA,gBAAC,cAAAC;AAAA,gBAAA;AAAA,kBACG,YAAW;AAAA,kBACX,eAAW,kBAAAD;AAAA,oBACP;AAAA,wBACA,4BAAa,EAAE,+BAA+B;AAAA,kBAClD;AAAA,kBACA,MAAK;AAAA,kBACL,WAAW;AAAA,oBACP,eAAW,kBAAAA;AAAA,0BACP,4BAAa,EACT,qCACJ;AAAA,sBACA;AAAA,oBACJ;AAAA,kBACJ;AAAA,kBACA,SAAS;AAAA,kBACT,QAAO;AAAA,kBAEP;AAAA,oBAAC;AAAA;AAAA,sBACG,eAAW,kBAAAA;AAAA,wBACP;AAAA,4BACA,4BAAa,EACT,qCACJ;AAAA,sBACJ;AAAA,sBACH;AAAA;AAAA,kBAED;AAAA;AAAA,cACJ,IACA;AAAA;AAAA;AAAA,QACR;AAAA;AAAA,IACJ;AAAA,EAER;AACJ;AAEA,IAAO,uBAAQ;","names":["React","classNames","Button"]}
+{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/ThreadHeader.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useCallback, useState } from \"preact/hooks\";\nimport classNames from \"classnames\";\nimport ThreadActionBar from \"./ThreadActionBar\";\nimport { collabStyles, flexAlignCenter } from \"../../../collab.style\";\nimport { IThreadHeader } from \"../../../types/collab.types\";\n\nconst ThreadHeader: React.FC<IThreadHeader> = React.memo(\n    ({ onClose, displayResolve, onResolve, commentCount, activeThread }) => {\n        const [isResolving, setIsResolving] = useState(false);\n\n        const handleResolve = useCallback(async () => {\n            if (isResolving) return;\n\n            try {\n                setIsResolving(true);\n                const payload = {\n                    threadUid: activeThread._id,\n                    payload: { threadState: 2 },\n                };\n                await onResolve(payload);\n            } finally {\n                onClose(true);\n                setIsResolving(false);\n            }\n        }, [activeThread, isResolving, onResolve, onClose]);\n\n        return (\n            <div\n                className={classNames(\n                    \"collab-thread-header--wrapper\",\n                    \"flex-v-center\",\n                    collabStyles()[\"collab-thread-header--wrapper\"],\n                    flexAlignCenter\n                )}\n            >\n                <div\n                    className={classNames(\n                        \"collab-thread-header--container\",\n                        \"flex-v-center\",\n                        collabStyles()[\"collab-thread-header--container\"],\n                        flexAlignCenter\n                    )}\n                >\n                    <ThreadActionBar\n                        commentCount={commentCount}\n                        displayResolve={displayResolve}\n                        handleResolve={handleResolve}\n                        isResolving={isResolving}\n                    />\n                </div>\n            </div>\n        );\n    }\n);\n\nexport default ThreadHeader;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,oBAAkB;AAClB,mBAAsC;AACtC,wBAAuB;AACvB,6BAA4B;AAC5B,oBAA8C;AAwC1B;AArCpB,IAAM,eAAwC,cAAAA,QAAM;AAAA,EAChD,CAAC,EAAE,SAAS,gBAAgB,WAAW,cAAc,aAAa,MAAM;AACpE,UAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AAEpD,UAAM,oBAAgB,0BAAY,YAAY;AAC1C,UAAI,YAAa;AAEjB,UAAI;AACA,uBAAe,IAAI;AACnB,cAAM,UAAU;AAAA,UACZ,WAAW,aAAa;AAAA,UACxB,SAAS,EAAE,aAAa,EAAE;AAAA,QAC9B;AACA,cAAM,UAAU,OAAO;AAAA,MAC3B,UAAE;AACE,gBAAQ,IAAI;AACZ,uBAAe,KAAK;AAAA,MACxB;AAAA,IACJ,GAAG,CAAC,cAAc,aAAa,WAAW,OAAO,CAAC;AAElD,WACI;AAAA,MAAC;AAAA;AAAA,QACG,eAAW,kBAAAC;AAAA,UACP;AAAA,UACA;AAAA,cACA,4BAAa,EAAE,+BAA+B;AAAA,UAC9C;AAAA,QACJ;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACG,eAAW,kBAAAA;AAAA,cACP;AAAA,cACA;AAAA,kBACA,4BAAa,EAAE,iCAAiC;AAAA,cAChD;AAAA,YACJ;AAAA,YAEA;AAAA,cAAC,uBAAAC;AAAA,cAAA;AAAA,gBACG;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA;AAAA,YACJ;AAAA;AAAA,QACJ;AAAA;AAAA,IACJ;AAAA,EAER;AACJ;AAEA,IAAO,uBAAQ;","names":["React","classNames","ThreadActionBar"]}