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

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

@@ -2,27 +2,28 @@ import "../../../../chunk-5WRI5ZAA.js";
 
 // src/visualBuilder/components/Collab/ThreadPopup/ThreadHeader.tsx
 import React from "preact/compat";
-import { useCallback } from "preact/hooks";
+import { useCallback, useState } from "preact/hooks";
 import classNames from "classnames";
-import Button from "../Button/Button.js";
+import ThreadActionBar from "./ThreadActionBar.js";
 import { collabStyles, flexAlignCenter } from "../../../collab.style.js";
-import { getThreadTitle } from "../../../utils/collabUtils.js";
-import { jsx, jsxs } from "preact/jsx-runtime";
+import { jsx } from "preact/jsx-runtime";
 var ThreadHeader = React.memo(
   ({ onClose, displayResolve, onResolve, commentCount, activeThread }) => {
+    const [isResolving, setIsResolving] = useState(false);
     const handleResolve = 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__ */ jsx(
       "div",
       {
@@ -32,7 +33,7 @@ var ThreadHeader = React.memo(
           collabStyles()["collab-thread-header--wrapper"],
           flexAlignCenter
         ),
-        children: /* @__PURE__ */ jsxs(
+        children: /* @__PURE__ */ jsx(
           "div",
           {
             className: classNames(
@@ -41,47 +42,15 @@ var ThreadHeader = React.memo(
               collabStyles()["collab-thread-header--container"],
               flexAlignCenter
             ),
-            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",
-                  children: /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: classNames(
-                        "collab-thread-header--resolve--text",
-                        collabStyles()["collab-thread-header--resolve--text"]
-                      ),
-                      children: "Resolve"
-                    }
-                  )
-                }
-              ) : null
-            ]
+            children: /* @__PURE__ */ jsx(
+              ThreadActionBar,
+              {
+                commentCount,
+                displayResolve,
+                handleResolve,
+                isResolving
+              }
+            )
           }
         )
       }

package/dist/modern/visualBuilder/components/Collab/ThreadPopup/ThreadHeader.js.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":";;;AACA,OAAO,WAAW;AAClB,SAAS,mBAAmB;AAC5B,OAAO,gBAAgB;AACvB,OAAO,YAAY;AACnB,SAAS,cAAc,uBAAuB;AAC9C,SAAS,sBAAsB;AAiCf,SAQI,KARJ;AA3BhB,IAAM,eAAwC,MAAM;AAAA,EAChD,CAAC,EAAE,SAAS,gBAAgB,WAAW,cAAc,aAAa,MAAM;AAEpE,UAAM,gBAAgB,YAAY,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,WAAW;AAAA,UACP;AAAA,UACA;AAAA,UACA,aAAa,EAAE,+BAA+B;AAAA,UAC9C;AAAA,QACJ;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACG,WAAW;AAAA,cACP;AAAA,cACA;AAAA,cACA,aAAa,EAAE,iCAAiC;AAAA,cAChD;AAAA,YACJ;AAAA,YAEA;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACG,WAAW;AAAA,oBACP;AAAA,oBACA,aAAa,EAAE,6BAA6B;AAAA,kBAChD;AAAA,kBAEC,yBAAe,YAAY;AAAA;AAAA,cAChC;AAAA,cACC,iBACG;AAAA,gBAAC;AAAA;AAAA,kBACG,YAAW;AAAA,kBACX,WAAW;AAAA,oBACP;AAAA,oBACA,aAAa,EAAE,+BAA+B;AAAA,kBAClD;AAAA,kBACA,MAAK;AAAA,kBACL,WAAW;AAAA,oBACP,WAAW;AAAA,sBACP,aAAa,EACT,qCACJ;AAAA,sBACA;AAAA,oBACJ;AAAA,kBACJ;AAAA,kBACA,SAAS;AAAA,kBACT,QAAO;AAAA,kBAEP;AAAA,oBAAC;AAAA;AAAA,sBACG,WAAW;AAAA,wBACP;AAAA,wBACA,aAAa,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":[]}
+{"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":";;;AACA,OAAO,WAAW;AAClB,SAAS,aAAa,gBAAgB;AACtC,OAAO,gBAAgB;AACvB,OAAO,qBAAqB;AAC5B,SAAS,cAAc,uBAAuB;AAwC1B;AArCpB,IAAM,eAAwC,MAAM;AAAA,EAChD,CAAC,EAAE,SAAS,gBAAgB,WAAW,cAAc,aAAa,MAAM;AACpE,UAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,UAAM,gBAAgB,YAAY,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,WAAW;AAAA,UACP;AAAA,UACA;AAAA,UACA,aAAa,EAAE,+BAA+B;AAAA,UAC9C;AAAA,QACJ;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACG,WAAW;AAAA,cACP;AAAA,cACA;AAAA,cACA,aAAa,EAAE,iCAAiC;AAAA,cAChD;AAAA,YACJ;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACG;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA;AAAA,YACJ;AAAA;AAAA,QACJ;AAAA;AAAA,IACJ;AAAA,EAER;AACJ;AAEA,IAAO,uBAAQ;","names":[]}

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

@@ -200,25 +200,36 @@ var ThreadPopup = import_compat.default.memo(
               activeThread
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_ThreadBody.default,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
             {
-              handleOnSaveRef,
-              onClose,
-              userState: state.userState,
-              isLoading: state.isLoading,
-              comments: state.comments,
-              fetchingMore: isFetchingMore,
-              editComment: state.editComment
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_ThreadFooter.default,
-            {
-              onClose,
-              handleOnSaveRef,
-              isDisabled: error.hasError,
-              editComment: state.editComment
+              class: (0, import_classnames.default)(
+                "collab-thread--container",
+                (0, import_collab.collabStyles)()["collab-thread--container"]
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_ThreadBody.default,
+                  {
+                    handleOnSaveRef,
+                    onClose,
+                    userState: state.userState,
+                    isLoading: state.isLoading,
+                    comments: state.comments,
+                    fetchingMore: isFetchingMore,
+                    editComment: state.editComment
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_ThreadFooter.default,
+                  {
+                    onClose,
+                    handleOnSaveRef,
+                    isDisabled: error.hasError,
+                    editComment: state.editComment
+                  }
+                )
+              ]
             }
           )
         ]

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/index.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useEffect, useMemo, useRef, useState } from \"preact/hooks\";\nimport ThreadHeader from \"./ThreadHeader\";\nimport ThreadFooter from \"./ThreadFooter\";\nimport ThreadBody from \"./ThreadBody\";\nimport {\n    IThreadPopup,\n    IThreadContext,\n    IThreadPopupState,\n    IErrorState,\n    IMentionList,\n    IFetchComments,\n} from \"../../../types/collab.types\";\nimport { getUserName } from \"../../../utils/collabUtils\";\nimport { ThreadProvider } from \"./ContextProvider/ThreadProvider\";\nimport useInfiniteScroll from \"../../../hooks/use-infinite-scroll/useInfiniteScroll\";\nimport { collabStyles } from \"../../../collab.style\";\nimport classNames from \"classnames\";\n\nconst initialErrorState: IErrorState = {\n    hasError: false,\n    message: \"\",\n};\n\nconst ThreadPopup: React.FC<IThreadPopup> = React.memo(\n    ({\n        onCreateComment,\n        onEditComment,\n        onDeleteComment,\n        onDeleteThread,\n        onClose,\n        onResolve,\n        inviteMetadata,\n        loadMoreMessages,\n        activeThread,\n        setActiveThread,\n        createNewThread,\n    }) => {\n        const handleOnSaveRef = useRef(null);\n\n        const [state, setState] = useState<IThreadPopupState>({\n            isLoading: false,\n            commentCount: 0,\n            comments: [],\n            editComment: \"\",\n            userState: {\n                mentionsList: [],\n                currentUser: inviteMetadata?.currentUser,\n                userMap: {},\n            },\n        });\n\n        const [error, setError] = useState<IErrorState>(initialErrorState);\n\n        const isFetchingMore = useInfiniteScroll({\n            containerId: \"collab-thread-comment--list\",\n            isFetching: false,\n            canFetchMore: state.commentCount > state.comments.length,\n            loadMore: async (offset, limit) => {\n                try {\n                    let payload: IFetchComments = {\n                        offset: offset,\n                        limit: limit,\n                        threadUid: activeThread?._id,\n                    };\n                    const res = await loadMoreMessages(payload);\n                    setState((prevState) => ({\n                        ...prevState,\n                        commentCount: res.count,\n                        comments: [...prevState.comments, ...res.comments],\n                    }));\n                } catch (error) {\n                    console.error(error);\n                }\n            },\n            offset: state.comments.length,\n            limit: 10,\n        });\n\n        useEffect(() => {\n            const userList: Array<IMentionList> = [];\n            const userMap: Record<string, any> = {};\n\n            inviteMetadata?.users?.forEach((user) => {\n                if (user) {\n                    const userName = getUserName(user);\n                    userList.push({\n                        display: userName,\n                        email: user.email,\n                        uid: user.uid,\n                    });\n                    userMap[user.uid] = { ...user, display: userName };\n                }\n            });\n\n            setState((prevState) => ({\n                ...prevState,\n                userState: {\n                    mentionsList: userList,\n                    userMap,\n                    currentUser: inviteMetadata?.currentUser,\n                },\n            }));\n        }, [inviteMetadata]);\n\n        useEffect(() => {\n            if (!activeThread) {\n                setState((prevState) => ({ ...prevState, isLoading: true }));\n                return;\n            }\n            if (activeThread?._id == \"new\") {\n                return;\n            }\n            const fetchInitialMessages = async () => {\n                setState((prevState) => ({ ...prevState, isLoading: true }));\n                try {\n                    let payload: IFetchComments = {\n                        offset: 0,\n                        limit: 10,\n                        threadUid: activeThread?._id,\n                    };\n                    const res = await loadMoreMessages(payload);\n                    setState((prevState) => ({\n                        ...prevState,\n                        isLoading: false,\n                        commentCount: res.count,\n                        comments: res.comments,\n                    }));\n                } catch (error) {\n                    setState((prevState) => ({\n                        ...prevState,\n                        isLoading: false,\n                    }));\n                    console.error(error);\n                }\n            };\n            fetchInitialMessages();\n        }, []);\n\n        const contextValue = useMemo<IThreadContext>(\n            () => ({\n                inviteMetadata,\n                userState: state.userState,\n                commentCount: state.commentCount,\n                setThreadState: setState,\n                error,\n                setError,\n                onCreateComment,\n                onEditComment,\n                onDeleteComment,\n                onDeleteThread,\n                onClose,\n                editComment: state.editComment,\n                activeThread,\n                setActiveThread,\n                createNewThread,\n            }),\n            [\n                inviteMetadata,\n                state.userState,\n                state.commentCount,\n                error,\n                state.editComment,\n                activeThread,\n            ]\n        );\n\n        return (\n            <ThreadProvider.Provider value={contextValue}>\n                <div\n                    className={classNames(\n                        \"collab-thread--wrapper\",\n                        collabStyles()[\"collab-thread--wrapper\"]\n                    )}\n                >\n                    <ThreadHeader\n                        onClose={onClose}\n                        onResolve={onResolve}\n                        displayResolve={\n                            !!activeThread && activeThread?._id !== \"new\"\n                        }\n                        commentCount={state.commentCount}\n                        activeThread={activeThread}\n                    />\n                    <ThreadBody\n                        handleOnSaveRef={handleOnSaveRef}\n                        onClose={onClose}\n                        userState={state.userState}\n                        isLoading={state.isLoading}\n                        comments={state.comments}\n                        fetchingMore={isFetchingMore}\n                        editComment={state.editComment}\n                    />\n                    <ThreadFooter\n                        onClose={onClose}\n                        handleOnSaveRef={handleOnSaveRef}\n                        isDisabled={error.hasError}\n                        editComment={state.editComment}\n                    />\n                </div>\n            </ThreadProvider.Provider>\n        );\n    }\n);\n\nexport default ThreadPopup;\n"],"mappings":"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","names":["React","useInfiniteScroll","error","classNames","ThreadHeader","ThreadBody","ThreadFooter"]}
+{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/index.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useEffect, useMemo, useRef, useState } from \"preact/hooks\";\nimport ThreadHeader from \"./ThreadHeader\";\nimport ThreadFooter from \"./ThreadFooter\";\nimport ThreadBody from \"./ThreadBody\";\nimport {\n    IThreadPopup,\n    IThreadContext,\n    IThreadPopupState,\n    IErrorState,\n    IMentionList,\n    IFetchComments,\n} from \"../../../types/collab.types\";\nimport { getUserName } from \"../../../utils/collabUtils\";\nimport { ThreadProvider } from \"./ContextProvider/ThreadProvider\";\nimport useInfiniteScroll from \"../../../hooks/use-infinite-scroll/useInfiniteScroll\";\nimport { collabStyles } from \"../../../collab.style\";\nimport classNames from \"classnames\";\n\nconst initialErrorState: IErrorState = {\n    hasError: false,\n    message: \"\",\n};\n\nconst ThreadPopup: React.FC<IThreadPopup> = React.memo(\n    ({\n        onCreateComment,\n        onEditComment,\n        onDeleteComment,\n        onDeleteThread,\n        onClose,\n        onResolve,\n        inviteMetadata,\n        loadMoreMessages,\n        activeThread,\n        setActiveThread,\n        createNewThread,\n    }) => {\n        const handleOnSaveRef = useRef(null);\n\n        const [state, setState] = useState<IThreadPopupState>({\n            isLoading: false,\n            commentCount: 0,\n            comments: [],\n            editComment: \"\",\n            userState: {\n                mentionsList: [],\n                currentUser: inviteMetadata?.currentUser,\n                userMap: {},\n            },\n        });\n\n        const [error, setError] = useState<IErrorState>(initialErrorState);\n\n        const isFetchingMore = useInfiniteScroll({\n            containerId: \"collab-thread-comment--list\",\n            isFetching: false,\n            canFetchMore: state.commentCount > state.comments.length,\n            loadMore: async (offset, limit) => {\n                try {\n                    let payload: IFetchComments = {\n                        offset: offset,\n                        limit: limit,\n                        threadUid: activeThread?._id,\n                    };\n                    const res = await loadMoreMessages(payload);\n                    setState((prevState) => ({\n                        ...prevState,\n                        commentCount: res.count,\n                        comments: [...prevState.comments, ...res.comments],\n                    }));\n                } catch (error) {\n                    console.error(error);\n                }\n            },\n            offset: state.comments.length,\n            limit: 10,\n        });\n\n        useEffect(() => {\n            const userList: Array<IMentionList> = [];\n            const userMap: Record<string, any> = {};\n\n            inviteMetadata?.users?.forEach((user) => {\n                if (user) {\n                    const userName = getUserName(user);\n                    userList.push({\n                        display: userName,\n                        email: user.email,\n                        uid: user.uid,\n                    });\n                    userMap[user.uid] = { ...user, display: userName };\n                }\n            });\n\n            setState((prevState) => ({\n                ...prevState,\n                userState: {\n                    mentionsList: userList,\n                    userMap,\n                    currentUser: inviteMetadata?.currentUser,\n                },\n            }));\n        }, [inviteMetadata]);\n\n        useEffect(() => {\n            if (!activeThread) {\n                setState((prevState) => ({ ...prevState, isLoading: true }));\n                return;\n            }\n            if (activeThread?._id == \"new\") {\n                return;\n            }\n            const fetchInitialMessages = async () => {\n                setState((prevState) => ({ ...prevState, isLoading: true }));\n                try {\n                    let payload: IFetchComments = {\n                        offset: 0,\n                        limit: 10,\n                        threadUid: activeThread?._id,\n                    };\n                    const res = await loadMoreMessages(payload);\n                    setState((prevState) => ({\n                        ...prevState,\n                        isLoading: false,\n                        commentCount: res.count,\n                        comments: res.comments,\n                    }));\n                } catch (error) {\n                    setState((prevState) => ({\n                        ...prevState,\n                        isLoading: false,\n                    }));\n                    console.error(error);\n                }\n            };\n            fetchInitialMessages();\n        }, []);\n\n        const contextValue = useMemo<IThreadContext>(\n            () => ({\n                inviteMetadata,\n                userState: state.userState,\n                commentCount: state.commentCount,\n                setThreadState: setState,\n                error,\n                setError,\n                onCreateComment,\n                onEditComment,\n                onDeleteComment,\n                onDeleteThread,\n                onClose,\n                editComment: state.editComment,\n                activeThread,\n                setActiveThread,\n                createNewThread,\n            }),\n            [\n                inviteMetadata,\n                state.userState,\n                state.commentCount,\n                error,\n                state.editComment,\n                activeThread,\n            ]\n        );\n\n        return (\n            <ThreadProvider.Provider value={contextValue}>\n                <div\n                    className={classNames(\n                        \"collab-thread--wrapper\",\n                        collabStyles()[\"collab-thread--wrapper\"]\n                    )}\n                >\n                    <ThreadHeader\n                        onClose={onClose}\n                        onResolve={onResolve}\n                        displayResolve={\n                            !!activeThread && activeThread?._id !== \"new\"\n                        }\n                        commentCount={state.commentCount}\n                        activeThread={activeThread}\n                    />\n                    <div\n                        class={classNames(\n                            \"collab-thread--container\",\n                            collabStyles()[\"collab-thread--container\"]\n                        )}\n                    >\n                        <ThreadBody\n                            handleOnSaveRef={handleOnSaveRef}\n                            onClose={onClose}\n                            userState={state.userState}\n                            isLoading={state.isLoading}\n                            comments={state.comments}\n                            fetchingMore={isFetchingMore}\n                            editComment={state.editComment}\n                        />\n                        <ThreadFooter\n                            onClose={onClose}\n                            handleOnSaveRef={handleOnSaveRef}\n                            isDisabled={error.hasError}\n                            editComment={state.editComment}\n                        />\n                    </div>\n                </div>\n            </ThreadProvider.Provider>\n        );\n    }\n);\n\nexport default ThreadPopup;\n"],"mappings":"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","names":["React","useInfiniteScroll","error","classNames","ThreadHeader","ThreadBody","ThreadFooter"]}

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

@@ -168,25 +168,36 @@ var ThreadPopup = React.memo(
               activeThread
             }
           ),
-          /* @__PURE__ */ jsx(
-            ThreadBody,
+          /* @__PURE__ */ jsxs(
+            "div",
             {
-              handleOnSaveRef,
-              onClose,
-              userState: state.userState,
-              isLoading: state.isLoading,
-              comments: state.comments,
-              fetchingMore: isFetchingMore,
-              editComment: state.editComment
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            ThreadFooter,
-            {
-              onClose,
-              handleOnSaveRef,
-              isDisabled: error.hasError,
-              editComment: state.editComment
+              class: classNames(
+                "collab-thread--container",
+                collabStyles()["collab-thread--container"]
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  ThreadBody,
+                  {
+                    handleOnSaveRef,
+                    onClose,
+                    userState: state.userState,
+                    isLoading: state.isLoading,
+                    comments: state.comments,
+                    fetchingMore: isFetchingMore,
+                    editComment: state.editComment
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  ThreadFooter,
+                  {
+                    onClose,
+                    handleOnSaveRef,
+                    isDisabled: error.hasError,
+                    editComment: state.editComment
+                  }
+                )
+              ]
             }
           )
         ]

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/index.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useEffect, useMemo, useRef, useState } from \"preact/hooks\";\nimport ThreadHeader from \"./ThreadHeader\";\nimport ThreadFooter from \"./ThreadFooter\";\nimport ThreadBody from \"./ThreadBody\";\nimport {\n    IThreadPopup,\n    IThreadContext,\n    IThreadPopupState,\n    IErrorState,\n    IMentionList,\n    IFetchComments,\n} from \"../../../types/collab.types\";\nimport { getUserName } from \"../../../utils/collabUtils\";\nimport { ThreadProvider } from \"./ContextProvider/ThreadProvider\";\nimport useInfiniteScroll from \"../../../hooks/use-infinite-scroll/useInfiniteScroll\";\nimport { collabStyles } from \"../../../collab.style\";\nimport classNames from \"classnames\";\n\nconst initialErrorState: IErrorState = {\n    hasError: false,\n    message: \"\",\n};\n\nconst ThreadPopup: React.FC<IThreadPopup> = React.memo(\n    ({\n        onCreateComment,\n        onEditComment,\n        onDeleteComment,\n        onDeleteThread,\n        onClose,\n        onResolve,\n        inviteMetadata,\n        loadMoreMessages,\n        activeThread,\n        setActiveThread,\n        createNewThread,\n    }) => {\n        const handleOnSaveRef = useRef(null);\n\n        const [state, setState] = useState<IThreadPopupState>({\n            isLoading: false,\n            commentCount: 0,\n            comments: [],\n            editComment: \"\",\n            userState: {\n                mentionsList: [],\n                currentUser: inviteMetadata?.currentUser,\n                userMap: {},\n            },\n        });\n\n        const [error, setError] = useState<IErrorState>(initialErrorState);\n\n        const isFetchingMore = useInfiniteScroll({\n            containerId: \"collab-thread-comment--list\",\n            isFetching: false,\n            canFetchMore: state.commentCount > state.comments.length,\n            loadMore: async (offset, limit) => {\n                try {\n                    let payload: IFetchComments = {\n                        offset: offset,\n                        limit: limit,\n                        threadUid: activeThread?._id,\n                    };\n                    const res = await loadMoreMessages(payload);\n                    setState((prevState) => ({\n                        ...prevState,\n                        commentCount: res.count,\n                        comments: [...prevState.comments, ...res.comments],\n                    }));\n                } catch (error) {\n                    console.error(error);\n                }\n            },\n            offset: state.comments.length,\n            limit: 10,\n        });\n\n        useEffect(() => {\n            const userList: Array<IMentionList> = [];\n            const userMap: Record<string, any> = {};\n\n            inviteMetadata?.users?.forEach((user) => {\n                if (user) {\n                    const userName = getUserName(user);\n                    userList.push({\n                        display: userName,\n                        email: user.email,\n                        uid: user.uid,\n                    });\n                    userMap[user.uid] = { ...user, display: userName };\n                }\n            });\n\n            setState((prevState) => ({\n                ...prevState,\n                userState: {\n                    mentionsList: userList,\n                    userMap,\n                    currentUser: inviteMetadata?.currentUser,\n                },\n            }));\n        }, [inviteMetadata]);\n\n        useEffect(() => {\n            if (!activeThread) {\n                setState((prevState) => ({ ...prevState, isLoading: true }));\n                return;\n            }\n            if (activeThread?._id == \"new\") {\n                return;\n            }\n            const fetchInitialMessages = async () => {\n                setState((prevState) => ({ ...prevState, isLoading: true }));\n                try {\n                    let payload: IFetchComments = {\n                        offset: 0,\n                        limit: 10,\n                        threadUid: activeThread?._id,\n                    };\n                    const res = await loadMoreMessages(payload);\n                    setState((prevState) => ({\n                        ...prevState,\n                        isLoading: false,\n                        commentCount: res.count,\n                        comments: res.comments,\n                    }));\n                } catch (error) {\n                    setState((prevState) => ({\n                        ...prevState,\n                        isLoading: false,\n                    }));\n                    console.error(error);\n                }\n            };\n            fetchInitialMessages();\n        }, []);\n\n        const contextValue = useMemo<IThreadContext>(\n            () => ({\n                inviteMetadata,\n                userState: state.userState,\n                commentCount: state.commentCount,\n                setThreadState: setState,\n                error,\n                setError,\n                onCreateComment,\n                onEditComment,\n                onDeleteComment,\n                onDeleteThread,\n                onClose,\n                editComment: state.editComment,\n                activeThread,\n                setActiveThread,\n                createNewThread,\n            }),\n            [\n                inviteMetadata,\n                state.userState,\n                state.commentCount,\n                error,\n                state.editComment,\n                activeThread,\n            ]\n        );\n\n        return (\n            <ThreadProvider.Provider value={contextValue}>\n                <div\n                    className={classNames(\n                        \"collab-thread--wrapper\",\n                        collabStyles()[\"collab-thread--wrapper\"]\n                    )}\n                >\n                    <ThreadHeader\n                        onClose={onClose}\n                        onResolve={onResolve}\n                        displayResolve={\n                            !!activeThread && activeThread?._id !== \"new\"\n                        }\n                        commentCount={state.commentCount}\n                        activeThread={activeThread}\n                    />\n                    <ThreadBody\n                        handleOnSaveRef={handleOnSaveRef}\n                        onClose={onClose}\n                        userState={state.userState}\n                        isLoading={state.isLoading}\n                        comments={state.comments}\n                        fetchingMore={isFetchingMore}\n                        editComment={state.editComment}\n                    />\n                    <ThreadFooter\n                        onClose={onClose}\n                        handleOnSaveRef={handleOnSaveRef}\n                        isDisabled={error.hasError}\n                        editComment={state.editComment}\n                    />\n                </div>\n            </ThreadProvider.Provider>\n        );\n    }\n);\n\nexport default ThreadPopup;\n"],"mappings":"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","names":["error"]}
+{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/index.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useEffect, useMemo, useRef, useState } from \"preact/hooks\";\nimport ThreadHeader from \"./ThreadHeader\";\nimport ThreadFooter from \"./ThreadFooter\";\nimport ThreadBody from \"./ThreadBody\";\nimport {\n    IThreadPopup,\n    IThreadContext,\n    IThreadPopupState,\n    IErrorState,\n    IMentionList,\n    IFetchComments,\n} from \"../../../types/collab.types\";\nimport { getUserName } from \"../../../utils/collabUtils\";\nimport { ThreadProvider } from \"./ContextProvider/ThreadProvider\";\nimport useInfiniteScroll from \"../../../hooks/use-infinite-scroll/useInfiniteScroll\";\nimport { collabStyles } from \"../../../collab.style\";\nimport classNames from \"classnames\";\n\nconst initialErrorState: IErrorState = {\n    hasError: false,\n    message: \"\",\n};\n\nconst ThreadPopup: React.FC<IThreadPopup> = React.memo(\n    ({\n        onCreateComment,\n        onEditComment,\n        onDeleteComment,\n        onDeleteThread,\n        onClose,\n        onResolve,\n        inviteMetadata,\n        loadMoreMessages,\n        activeThread,\n        setActiveThread,\n        createNewThread,\n    }) => {\n        const handleOnSaveRef = useRef(null);\n\n        const [state, setState] = useState<IThreadPopupState>({\n            isLoading: false,\n            commentCount: 0,\n            comments: [],\n            editComment: \"\",\n            userState: {\n                mentionsList: [],\n                currentUser: inviteMetadata?.currentUser,\n                userMap: {},\n            },\n        });\n\n        const [error, setError] = useState<IErrorState>(initialErrorState);\n\n        const isFetchingMore = useInfiniteScroll({\n            containerId: \"collab-thread-comment--list\",\n            isFetching: false,\n            canFetchMore: state.commentCount > state.comments.length,\n            loadMore: async (offset, limit) => {\n                try {\n                    let payload: IFetchComments = {\n                        offset: offset,\n                        limit: limit,\n                        threadUid: activeThread?._id,\n                    };\n                    const res = await loadMoreMessages(payload);\n                    setState((prevState) => ({\n                        ...prevState,\n                        commentCount: res.count,\n                        comments: [...prevState.comments, ...res.comments],\n                    }));\n                } catch (error) {\n                    console.error(error);\n                }\n            },\n            offset: state.comments.length,\n            limit: 10,\n        });\n\n        useEffect(() => {\n            const userList: Array<IMentionList> = [];\n            const userMap: Record<string, any> = {};\n\n            inviteMetadata?.users?.forEach((user) => {\n                if (user) {\n                    const userName = getUserName(user);\n                    userList.push({\n                        display: userName,\n                        email: user.email,\n                        uid: user.uid,\n                    });\n                    userMap[user.uid] = { ...user, display: userName };\n                }\n            });\n\n            setState((prevState) => ({\n                ...prevState,\n                userState: {\n                    mentionsList: userList,\n                    userMap,\n                    currentUser: inviteMetadata?.currentUser,\n                },\n            }));\n        }, [inviteMetadata]);\n\n        useEffect(() => {\n            if (!activeThread) {\n                setState((prevState) => ({ ...prevState, isLoading: true }));\n                return;\n            }\n            if (activeThread?._id == \"new\") {\n                return;\n            }\n            const fetchInitialMessages = async () => {\n                setState((prevState) => ({ ...prevState, isLoading: true }));\n                try {\n                    let payload: IFetchComments = {\n                        offset: 0,\n                        limit: 10,\n                        threadUid: activeThread?._id,\n                    };\n                    const res = await loadMoreMessages(payload);\n                    setState((prevState) => ({\n                        ...prevState,\n                        isLoading: false,\n                        commentCount: res.count,\n                        comments: res.comments,\n                    }));\n                } catch (error) {\n                    setState((prevState) => ({\n                        ...prevState,\n                        isLoading: false,\n                    }));\n                    console.error(error);\n                }\n            };\n            fetchInitialMessages();\n        }, []);\n\n        const contextValue = useMemo<IThreadContext>(\n            () => ({\n                inviteMetadata,\n                userState: state.userState,\n                commentCount: state.commentCount,\n                setThreadState: setState,\n                error,\n                setError,\n                onCreateComment,\n                onEditComment,\n                onDeleteComment,\n                onDeleteThread,\n                onClose,\n                editComment: state.editComment,\n                activeThread,\n                setActiveThread,\n                createNewThread,\n            }),\n            [\n                inviteMetadata,\n                state.userState,\n                state.commentCount,\n                error,\n                state.editComment,\n                activeThread,\n            ]\n        );\n\n        return (\n            <ThreadProvider.Provider value={contextValue}>\n                <div\n                    className={classNames(\n                        \"collab-thread--wrapper\",\n                        collabStyles()[\"collab-thread--wrapper\"]\n                    )}\n                >\n                    <ThreadHeader\n                        onClose={onClose}\n                        onResolve={onResolve}\n                        displayResolve={\n                            !!activeThread && activeThread?._id !== \"new\"\n                        }\n                        commentCount={state.commentCount}\n                        activeThread={activeThread}\n                    />\n                    <div\n                        class={classNames(\n                            \"collab-thread--container\",\n                            collabStyles()[\"collab-thread--container\"]\n                        )}\n                    >\n                        <ThreadBody\n                            handleOnSaveRef={handleOnSaveRef}\n                            onClose={onClose}\n                            userState={state.userState}\n                            isLoading={state.isLoading}\n                            comments={state.comments}\n                            fetchingMore={isFetchingMore}\n                            editComment={state.editComment}\n                        />\n                        <ThreadFooter\n                            onClose={onClose}\n                            handleOnSaveRef={handleOnSaveRef}\n                            isDisabled={error.hasError}\n                            editComment={state.editComment}\n                        />\n                    </div>\n                </div>\n            </ThreadProvider.Provider>\n        );\n    }\n);\n\nexport default ThreadPopup;\n"],"mappings":"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","names":["error"]}

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

@@ -35,6 +35,7 @@ __export(Tooltip_exports, {
 module.exports = __toCommonJS(Tooltip_exports);
 var import_hooks = require("preact/hooks");
 var import_collab = require("../../../collab.style.cjs");
+var import_collabUtils = require("../../../utils/collabUtils.cjs");
 var import_classnames = __toESM(require("classnames"), 1);
 var import_jsx_runtime = require("preact/jsx-runtime");
 var Tooltip = (props) => {
@@ -47,44 +48,24 @@ var Tooltip = (props) => {
     ...otherProps
   } = props;
   const [isVisible, setIsVisible] = (0, import_hooks.useState)(false);
+  const [actualPosition, setActualPosition] = (0, import_hooks.useState)(position);
   const tooltipRef = (0, import_hooks.useRef)(null);
   const targetRef = (0, import_hooks.useRef)(null);
+  const prevChildrenRef = (0, import_hooks.useRef)(children);
   (0, import_hooks.useEffect)(() => {
-    const positionTooltip = () => {
-      if (!isVisible || !tooltipRef.current || !targetRef.current) return;
-      const targetRect = targetRef.current.getBoundingClientRect();
-      const tooltipRect = tooltipRef.current.getBoundingClientRect();
-      const margin = 8;
-      const positions = {
-        bottom: {
-          top: targetRect.bottom + margin,
-          left: targetRect.left + (targetRect.width - tooltipRect.width) / 2
-        },
-        top: {
-          top: targetRect.top - tooltipRect.height - margin,
-          left: targetRect.left + (targetRect.width - tooltipRect.width) / 2
-        },
-        left: {
-          top: targetRect.top + (targetRect.height - tooltipRect.height) / 2,
-          left: targetRect.left - tooltipRect.width - margin
-        },
-        right: {
-          top: targetRect.top + (targetRect.height - tooltipRect.height) / 2,
-          left: targetRect.right + margin
-        }
-      };
-      const coords = positions[position];
-      Object.assign(tooltipRef.current.style, {
-        top: `${coords.top}px`,
-        left: `${coords.left}px`
-      });
-    };
-    positionTooltip();
-    window.addEventListener("scroll", positionTooltip);
-    window.addEventListener("resize", positionTooltip);
+    if (prevChildrenRef.current !== children) {
+      setIsVisible(false);
+      prevChildrenRef.current = children;
+    }
+  }, [children]);
+  (0, import_hooks.useEffect)(() => {
+    const updateTooltip = () => (0, import_collabUtils.positionTooltip)(tooltipRef, targetRef, position, setActualPosition);
+    updateTooltip();
+    window.addEventListener("scroll", updateTooltip);
+    window.addEventListener("resize", updateTooltip);
     return () => {
-      window.removeEventListener("scroll", positionTooltip);
-      window.removeEventListener("resize", positionTooltip);
+      window.removeEventListener("scroll", updateTooltip);
+      window.removeEventListener("resize", updateTooltip);
     };
   }, [isVisible, position]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -108,10 +89,13 @@ var Tooltip = (props) => {
             ref: tooltipRef,
             className: (0, import_classnames.default)(
               "collab-tooltip",
-              (0, import_collab.collabStyles)()["collab-tooltip"]
+              `collab-tooltip--${actualPosition}`,
+              (0, import_collab.collabStyles)()["collab-tooltip"],
+              (0, import_collab.collabStyles)()[`collab-tooltip--${actualPosition}`]
             ),
             role: "tooltip",
             "aria-hidden": !isVisible,
+            "data-position": actualPosition,
             children: content
           }
         )

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

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

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

@@ -3,6 +3,7 @@ import "../../../../chunk-5WRI5ZAA.js";
 // src/visualBuilder/components/Collab/Tooltip/Tooltip.tsx
 import { useState, useRef, useEffect } from "preact/hooks";
 import { collabStyles } from "../../../collab.style.js";
+import { positionTooltip } from "../../../utils/collabUtils.js";
 import classNames from "classnames";
 import { jsx, jsxs } from "preact/jsx-runtime";
 var Tooltip = (props) => {
@@ -15,44 +16,24 @@ var Tooltip = (props) => {
     ...otherProps
   } = props;
   const [isVisible, setIsVisible] = useState(false);
+  const [actualPosition, setActualPosition] = useState(position);
   const tooltipRef = useRef(null);
   const targetRef = useRef(null);
+  const prevChildrenRef = useRef(children);
   useEffect(() => {
-    const positionTooltip = () => {
-      if (!isVisible || !tooltipRef.current || !targetRef.current) return;
-      const targetRect = targetRef.current.getBoundingClientRect();
-      const tooltipRect = tooltipRef.current.getBoundingClientRect();
-      const margin = 8;
-      const positions = {
-        bottom: {
-          top: targetRect.bottom + margin,
-          left: targetRect.left + (targetRect.width - tooltipRect.width) / 2
-        },
-        top: {
-          top: targetRect.top - tooltipRect.height - margin,
-          left: targetRect.left + (targetRect.width - tooltipRect.width) / 2
-        },
-        left: {
-          top: targetRect.top + (targetRect.height - tooltipRect.height) / 2,
-          left: targetRect.left - tooltipRect.width - margin
-        },
-        right: {
-          top: targetRect.top + (targetRect.height - tooltipRect.height) / 2,
-          left: targetRect.right + margin
-        }
-      };
-      const coords = positions[position];
-      Object.assign(tooltipRef.current.style, {
-        top: `${coords.top}px`,
-        left: `${coords.left}px`
-      });
-    };
-    positionTooltip();
-    window.addEventListener("scroll", positionTooltip);
-    window.addEventListener("resize", positionTooltip);
+    if (prevChildrenRef.current !== children) {
+      setIsVisible(false);
+      prevChildrenRef.current = children;
+    }
+  }, [children]);
+  useEffect(() => {
+    const updateTooltip = () => positionTooltip(tooltipRef, targetRef, position, setActualPosition);
+    updateTooltip();
+    window.addEventListener("scroll", updateTooltip);
+    window.addEventListener("resize", updateTooltip);
     return () => {
-      window.removeEventListener("scroll", positionTooltip);
-      window.removeEventListener("resize", positionTooltip);
+      window.removeEventListener("scroll", updateTooltip);
+      window.removeEventListener("resize", updateTooltip);
     };
   }, [isVisible, position]);
   return /* @__PURE__ */ jsxs(
@@ -76,10 +57,13 @@ var Tooltip = (props) => {
             ref: tooltipRef,
             className: classNames(
               "collab-tooltip",
-              collabStyles()["collab-tooltip"]
+              `collab-tooltip--${actualPosition}`,
+              collabStyles()["collab-tooltip"],
+              collabStyles()[`collab-tooltip--${actualPosition}`]
             ),
             role: "tooltip",
             "aria-hidden": !isVisible,
+            "data-position": actualPosition,
             children: content
           }
         )

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

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