@wordpress/editor 14.34.0 → 14.34.1-next.2f1c7c01b.0

package/build/components/collab-sidebar/comments.js

@@ -26,13 +26,14 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/editor/src/components/collab-sidebar/comments.js
 var comments_exports = {};
 __export(comments_exports, {
   Comments: () => Comments,
   default: () => comments_default
 });
 module.exports = __toCommonJS(comments_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
 var import_clsx = __toESM(require("clsx"));
 var import_element = require("@wordpress/element");
 var import_components = require("@wordpress/components");
@@ -48,15 +49,17 @@ var import_comment_form = __toESM(require("./comment-form"));
 var import_utils = require("./utils");
 var import_hooks = require("./hooks");
 var import_add_comment = require("./add-comment");
-const { useBlockElement } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
-const { Menu } = (0, import_lock_unlock.unlock)(import_components.privateApis);
+var import_store = require("../../store");
+var import_jsx_runtime = require("react/jsx-runtime");
+var { useBlockElement } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
+var { Menu } = (0, import_lock_unlock.unlock)(import_components.privateApis);
 function Comments({
   threads: noteThreads,
   onEditComment,
   onAddReply,
   onCommentDelete,
-  showCommentBoard,
-  setShowCommentBoard,
+  newNoteFormState,
+  setNewNoteFormState,
   commentSidebarRef,
   reflowComments,
   isFloating = false,
@@ -66,20 +69,25 @@ function Comments({
   const [selectedThread, setSelectedThread] = (0, import_element.useState)(null);
   const [boardOffsets, setBoardOffsets] = (0, import_element.useState)({});
   const [blockRefs, setBlockRefs] = (0, import_element.useState)({});
+  const { setCanvasMinHeight } = (0, import_lock_unlock.unlock)((0, import_data.useDispatch)(import_store.store));
   const { blockCommentId, selectedBlockClientId, orderedBlockIds } = (0, import_data.useSelect)((select) => {
-    const { getBlockAttributes, getSelectedBlockClientId } = select(import_block_editor.store);
+    const {
+      getBlockAttributes,
+      getSelectedBlockClientId,
+      getClientIdsWithDescendants
+    } = select(import_block_editor.store);
     const clientId = getSelectedBlockClientId();
     return {
       blockCommentId: clientId ? getBlockAttributes(clientId)?.metadata?.noteId : null,
       selectedBlockClientId: clientId,
-      orderedBlockIds: select(import_block_editor.store).getBlockOrder()
+      orderedBlockIds: getClientIdsWithDescendants()
     };
   }, []);
   const relatedBlockElement = useBlockElement(selectedBlockClientId);
   const threads = (0, import_element.useMemo)(() => {
     const t = [...noteThreads];
     const orderedThreads = [];
-    if (isFloating && showCommentBoard && void 0 === blockCommentId) {
+    if (isFloating && newNoteFormState === "open" && void 0 === blockCommentId) {
       const newNoteThread = {
         id: "new-note-thread",
         blockClientId: selectedBlockClientId,
@@ -103,7 +111,7 @@ function Comments({
   }, [
     noteThreads,
     isFloating,
-    showCommentBoard,
+    newNoteFormState,
     blockCommentId,
     selectedBlockClientId,
     orderedBlockIds
@@ -126,13 +134,14 @@ function Comments({
       (0, import_utils.focusCommentThread)(prevThread.id, commentSidebarRef.current);
     } else {
       setSelectedThread(null);
-      setShowCommentBoard(false);
+      setNewNoteFormState("closed");
       relatedBlockElement?.focus();
     }
   };
   (0, import_element.useEffect)(() => {
-    setSelectedThread(blockCommentId ?? void 0);
-  }, [blockCommentId]);
+    const fallback = newNoteFormState === "open" ? "new-note-thread" : null;
+    setSelectedThread(blockCommentId ?? fallback);
+  }, [blockCommentId, newNoteFormState]);
   const setBlockRef = (0, import_element.useCallback)((id, blockRef) => {
     setBlockRefs((prev) => ({ ...prev, [id]: blockRef }));
   }, []);
@@ -140,7 +149,7 @@ function Comments({
     const calculateAllOffsets = () => {
       const offsets = {};
       if (!isFloating) {
-        return offsets;
+        return { offsets, minHeight: 0 };
       }
       const selectedThreadIndex = threads.findIndex(
         (t) => t.id === selectedThread
@@ -148,7 +157,7 @@ function Comments({
       const breakIndex = selectedThreadIndex === -1 ? 0 : selectedThreadIndex;
       const selectedThreadData = threads[breakIndex];
       if (!selectedThreadData || !blockRefs[selectedThreadData.id]) {
-        return offsets;
+        return { offsets, minHeight: 0 };
       }
       let blockElement = blockRefs[selectedThreadData.id];
       let blockRect = blockElement?.getBoundingClientRect();
@@ -201,36 +210,42 @@ function Comments({
           threadTop: threadTop + additionalOffset
         };
       }
-      return offsets;
+      let editorMinHeight = 0;
+      const lastThread = threads[threads.length - 1];
+      if (blockRefs[lastThread.id]) {
+        const lastBlockElement = blockRefs[lastThread.id];
+        const lastBlockRect = lastBlockElement?.getBoundingClientRect();
+        const lastThreadTop = lastBlockRect?.top || 0;
+        const lastThreadHeight = heights[lastThread.id] || 0;
+        const lastThreadOffset = offsets[lastThread.id] || 0;
+        editorMinHeight = lastThreadTop + lastThreadHeight + lastThreadOffset + 32;
+      }
+      return { offsets, minHeight: editorMinHeight };
     };
-    const newOffsets = calculateAllOffsets();
+    const { offsets: newOffsets, minHeight } = calculateAllOffsets();
     if (Object.keys(newOffsets).length > 0) {
       setBoardOffsets(newOffsets);
     }
-  }, [heights, blockRefs, isFloating, threads, selectedThread]);
+    setCanvasMinHeight(minHeight);
+  }, [
+    heights,
+    blockRefs,
+    isFloating,
+    threads,
+    selectedThread,
+    setCanvasMinHeight
+  ]);
   const hasThreads = Array.isArray(threads) && threads.length > 0;
   if (!hasThreads && !isFloating) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_add_comment.AddComment,
-        {
-          onSubmit: onAddReply,
-          showCommentBoard,
-          setShowCommentBoard,
-          commentSidebarRef
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalText, { as: "p", children: (0, import_i18n.__)("No notes available.") }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalText, { as: "p", variant: "muted", children: (0, import_i18n.__)("Only logged in users can see Notes.") })
-    ] });
+    return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    !isFloating && showCommentBoard && void 0 === blockCommentId && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    !isFloating && newNoteFormState === "open" && void 0 === blockCommentId && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_add_comment.AddComment,
       {
         onSubmit: onAddReply,
-        showCommentBoard,
-        setShowCommentBoard,
+        newNoteFormState,
+        setNewNoteFormState,
         commentSidebarRef
       }
     ),
@@ -243,7 +258,7 @@ function Comments({
         onEditComment,
         isSelected: selectedThread === thread.id,
         setSelectedThread,
-        setShowCommentBoard,
+        setNewNoteFormState,
         commentSidebarRef,
         reflowComments,
         isFloating,
@@ -252,7 +267,7 @@ function Comments({
         setBlockRef,
         selectedThread,
         commentLastUpdated,
-        showCommentBoard
+        newNoteFormState
       },
       thread.id
     ))
@@ -264,7 +279,7 @@ function Thread({
   onAddReply,
   onCommentDelete,
   isSelected,
-  setShowCommentBoard,
+  setNewNoteFormState,
   commentSidebarRef,
   reflowComments,
   isFloating,
@@ -274,7 +289,7 @@ function Thread({
   setSelectedThread,
   selectedThread,
   commentLastUpdated,
-  showCommentBoard
+  newNoteFormState
 }) {
   const { toggleBlockHighlight, selectBlock, toggleBlockSpotlight } = (0, import_lock_unlock.unlock)(
     (0, import_data.useDispatch)(import_block_editor.store)
@@ -299,7 +314,7 @@ function Thread({
     debouncedToggleBlockHighlight(thread.blockClientId, false);
   };
   const handleCommentSelect = () => {
-    setShowCommentBoard(false);
+    setNewNoteFormState("closed");
     setSelectedThread(thread.id);
     if (!!thread.blockClientId) {
       selectBlock(thread.blockClientId, null);
@@ -308,7 +323,7 @@ function Thread({
   };
   const unselectThread = () => {
     setSelectedThread(null);
-    setShowCommentBoard(false);
+    setNewNoteFormState("closed");
     toggleBlockSpotlight(thread.blockClientId, false);
   };
   const allReplies = thread?.reply || [];
@@ -327,13 +342,13 @@ function Thread({
     (0, import_i18n.__)("Original block deleted. Note: %s"),
     commentExcerpt
   );
-  if ("new-note-thread" === thread.id && showCommentBoard && isFloating) {
+  if (thread.id === "new-note-thread" && newNoteFormState === "open" && isFloating) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_add_comment.AddComment,
       {
         onSubmit: onAddReply,
-        showCommentBoard,
-        setShowCommentBoard,
+        newNoteFormState,
+        setNewNoteFormState,
         commentSidebarRef,
         reflowComments,
         isFloating,
@@ -342,188 +357,187 @@ function Thread({
       }
     );
   }
-  return (
-    // Disable reason: role="listitem" does in fact support aria-expanded.
-    // eslint-disable-next-line jsx-a11y/role-supports-aria-props
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_components.__experimentalVStack,
-      {
-        className: (0, import_clsx.default)("editor-collab-sidebar-panel__thread", {
-          "is-selected": isSelected,
-          "is-floating": isFloating
-        }),
-        id: `comment-thread-${thread.id}`,
-        spacing: "3",
-        onClick: handleCommentSelect,
-        onMouseEnter,
-        onMouseLeave,
-        onFocus: onMouseEnter,
-        onBlur: onMouseLeave,
-        onKeyDown: (event) => {
-          if (event.defaultPrevented) {
-            return;
-          }
-          if (event.key === "Enter" && event.currentTarget === event.target) {
-            if (isSelected) {
-              unselectThread();
-            } else {
-              handleCommentSelect();
-            }
-          }
-          if (event.key === "Escape") {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_components.__experimentalVStack,
+    {
+      className: (0, import_clsx.default)("editor-collab-sidebar-panel__thread", {
+        "is-selected": isSelected,
+        "is-floating": isFloating
+      }),
+      id: `comment-thread-${thread.id}`,
+      spacing: "3",
+      onClick: handleCommentSelect,
+      onMouseEnter,
+      onMouseLeave,
+      onFocus: onMouseEnter,
+      onBlur: onMouseLeave,
+      onKeyDown: (event) => {
+        if (event.defaultPrevented) {
+          return;
+        }
+        if (event.key === "Enter" && event.currentTarget === event.target) {
+          if (isSelected) {
             unselectThread();
-            (0, import_utils.focusCommentThread)(thread.id, commentSidebarRef.current);
+          } else {
+            handleCommentSelect();
           }
-        },
-        tabIndex: 0,
-        role: "listitem",
-        "aria-label": ariaLabel,
-        "aria-expanded": isSelected,
-        ref: isFloating ? refs.setFloating : void 0,
-        style: isFloating ? { top: y } : void 0,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_components.Button,
-            {
-              className: "editor-collab-sidebar-panel__skip-to-comment",
-              variant: "secondary",
-              size: "compact",
-              onClick: () => {
-                (0, import_utils.focusCommentThread)(
-                  thread.id,
-                  commentSidebarRef.current,
-                  "textarea"
-                );
-              },
-              children: (0, import_i18n.__)("Add new note")
-            }
-          ),
-          !thread.blockClientId && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalText, { as: "p", weight: 500, variant: "muted", children: (0, import_i18n.__)("Original block deleted.") }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            CommentBoard,
-            {
-              thread,
-              isExpanded: isSelected,
-              onEdit: (params = {}) => {
-                const { status } = params;
-                onEditComment(params);
-                if (status === "approved") {
-                  unselectThread();
+        }
+        if (event.key === "Escape") {
+          unselectThread();
+          (0, import_utils.focusCommentThread)(thread.id, commentSidebarRef.current);
+        }
+      },
+      tabIndex: 0,
+      role: "treeitem",
+      "aria-label": ariaLabel,
+      "aria-expanded": isSelected,
+      ref: isFloating ? refs.setFloating : void 0,
+      style: isFloating ? { top: y } : void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.Button,
+          {
+            className: "editor-collab-sidebar-panel__skip-to-comment",
+            variant: "secondary",
+            size: "compact",
+            onClick: () => {
+              (0, import_utils.focusCommentThread)(
+                thread.id,
+                commentSidebarRef.current,
+                "textarea"
+              );
+            },
+            children: (0, import_i18n.__)("Add new note")
+          }
+        ),
+        !thread.blockClientId && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalText, { as: "p", weight: 500, variant: "muted", children: (0, import_i18n.__)("Original block deleted.") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          CommentBoard,
+          {
+            thread,
+            isExpanded: isSelected,
+            onEdit: (params = {}) => {
+              onEditComment(params);
+              if (params.status === "approved") {
+                unselectThread();
+                if (isFloating) {
+                  relatedBlockElement?.focus();
+                } else {
                   (0, import_utils.focusCommentThread)(
                     thread.id,
                     commentSidebarRef.current
                   );
                 }
-              },
-              onDelete: onCommentDelete,
-              reflowComments
-            }
-          ),
-          isSelected && allReplies.map((reply) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            CommentBoard,
-            {
-              thread: reply,
-              parent: thread,
-              isExpanded: isSelected,
-              onEdit: onEditComment,
-              onDelete: onCommentDelete,
-              reflowComments
+              }
             },
-            reply.id
-          )),
-          !isSelected && restReplies.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalHStack, { className: "editor-collab-sidebar-panel__more-reply-separator", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_components.Button,
+            onDelete: onCommentDelete,
+            reflowComments
+          }
+        ),
+        isSelected && allReplies.map((reply) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          CommentBoard,
+          {
+            thread: reply,
+            parent: thread,
+            isExpanded: isSelected,
+            onEdit: onEditComment,
+            onDelete: onCommentDelete,
+            reflowComments
+          },
+          reply.id
+        )),
+        !isSelected && restReplies.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalHStack, { className: "editor-collab-sidebar-panel__more-reply-separator", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.Button,
+          {
+            size: "compact",
+            variant: "tertiary",
+            className: "editor-collab-sidebar-panel__more-reply-button",
+            onClick: () => {
+              setSelectedThread(thread.id);
+              (0, import_utils.focusCommentThread)(
+                thread.id,
+                commentSidebarRef.current
+              );
+            },
+            children: (0, import_i18n.sprintf)(
+              // translators: %s: number of replies.
+              (0, import_i18n._n)(
+                "%s more reply",
+                "%s more replies",
+                restReplies.length
+              ),
+              restReplies.length
+            )
+          }
+        ) }),
+        !isSelected && lastReply && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          CommentBoard,
+          {
+            thread: lastReply,
+            parent: thread,
+            isExpanded: isSelected,
+            onEdit: onEditComment,
+            onDelete: onCommentDelete,
+            reflowComments
+          }
+        ),
+        isSelected && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: "2", role: "treeitem", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalHStack, { alignment: "left", spacing: "3", justify: "flex-start", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_comment_author_info.default, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalVStack, { spacing: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_comment_form.default,
             {
-              size: "compact",
-              variant: "tertiary",
-              className: "editor-collab-sidebar-panel__more-reply-button",
-              onClick: () => {
-                setSelectedThread(thread.id);
+              onSubmit: (inputComment) => {
+                if ("approved" === thread.status) {
+                  onEditComment({
+                    id: thread.id,
+                    status: "hold",
+                    content: inputComment
+                  });
+                } else {
+                  onAddReply({
+                    content: inputComment,
+                    parent: thread.id
+                  });
+                }
+              },
+              onCancel: (event) => {
+                event.stopPropagation();
+                unselectThread();
                 (0, import_utils.focusCommentThread)(
                   thread.id,
                   commentSidebarRef.current
                 );
               },
-              children: (0, import_i18n.sprintf)(
-                // translators: %s: number of replies.
-                (0, import_i18n._n)(
-                  "%s more reply",
-                  "%s more replies",
-                  restReplies.length
-                ),
-                restReplies.length
-              )
-            }
-          ) }),
-          !isSelected && lastReply && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            CommentBoard,
-            {
-              thread: lastReply,
-              parent: thread,
-              isExpanded: isSelected,
-              onEdit: onEditComment,
-              onDelete: onCommentDelete,
+              submitButtonText: "approved" === thread.status ? (0, import_i18n.__)("Reopen & Reply") : (0, import_i18n.__)("Reply"),
+              rows: "approved" === thread.status ? 2 : 4,
+              labelText: (0, import_i18n.sprintf)(
+                // translators: %1$s: note identifier, %2$s: author name
+                (0, import_i18n.__)("Reply to note %1$s by %2$s"),
+                thread.id,
+                thread.author_name
+              ),
               reflowComments
             }
-          ),
-          isSelected && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: "2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalHStack, { alignment: "left", spacing: "3", justify: "flex-start", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_comment_author_info.default, {}) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalVStack, { spacing: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_comment_form.default,
-              {
-                onSubmit: (inputComment) => {
-                  if ("approved" === thread.status) {
-                    onEditComment({
-                      id: thread.id,
-                      status: "hold",
-                      content: inputComment
-                    });
-                  } else {
-                    onAddReply({
-                      content: inputComment,
-                      parent: thread.id
-                    });
-                  }
-                },
-                onCancel: (event) => {
-                  event.stopPropagation();
-                  unselectThread();
-                  (0, import_utils.focusCommentThread)(
-                    thread.id,
-                    commentSidebarRef.current
-                  );
-                },
-                submitButtonText: "approved" === thread.status ? (0, import_i18n.__)("Reopen & Reply") : (0, import_i18n.__)("Reply"),
-                rows: "approved" === thread.status ? 2 : 4,
-                labelText: (0, import_i18n.sprintf)(
-                  // translators: %1$s: note identifier, %2$s: author name
-                  (0, import_i18n.__)("Reply to note %1$s by %2$s"),
-                  thread.id,
-                  thread.author_name
-                ),
-                reflowComments
-              }
-            ) })
-          ] }),
-          !!thread.blockClientId && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_components.Button,
-            {
-              className: "editor-collab-sidebar-panel__skip-to-block",
-              variant: "secondary",
-              size: "compact",
-              onClick: (event) => {
-                event.stopPropagation();
-                relatedBlockElement?.focus();
-              },
-              children: (0, import_i18n.__)("Back to block")
-            }
-          )
-        ]
-      }
-    )
+          ) })
+        ] }),
+        !!thread.blockClientId && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.Button,
+          {
+            className: "editor-collab-sidebar-panel__skip-to-block",
+            variant: "secondary",
+            size: "compact",
+            onClick: (event) => {
+              event.stopPropagation();
+              relatedBlockElement?.focus();
+            },
+            children: (0, import_i18n.__)("Back to block")
+          }
+        )
+      ]
+    }
   );
 }
-const CommentBoard = ({
+var CommentBoard = ({
   thread,
   parent,
   isExpanded,
@@ -533,6 +547,7 @@ const CommentBoard = ({
 }) => {
   const [actionState, setActionState] = (0, import_element.useState)(false);
   const [showConfirmDialog, setShowConfirmDialog] = (0, import_element.useState)(false);
+  const actionButtonRef = (0, import_element.useRef)(null);
   const handleConfirmDelete = () => {
     onDelete(thread);
     setActionState(false);
@@ -541,6 +556,7 @@ const CommentBoard = ({
   const handleCancel = () => {
     setActionState(false);
     setShowConfirmDialog(false);
+    actionButtonRef.current?.focus();
   };
   const isResolutionComment = thread.type === "note" && thread.meta && (thread.meta._wp_note_status === "resolved" || thread.meta._wp_note_status === "reopen");
   const actions = [
@@ -572,131 +588,140 @@ const CommentBoard = ({
   ];
   const canResolve = thread.parent === 0;
   const moreActions = parent?.status !== "approved" ? actions.filter((item) => item.isEligible(thread)) : [];
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: "2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { alignment: "left", spacing: "3", justify: "flex-start", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_comment_author_info.default,
-        {
-          avatar: thread?.author_avatar_urls?.[48],
-          name: thread?.author_name,
-          date: thread?.date,
-          userId: thread?.author
-        }
-      ),
-      isExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_components.FlexItem,
-        {
-          className: "editor-collab-sidebar-panel__comment-status",
-          onClick: (event) => {
-            event.stopPropagation();
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { spacing: "0", children: [
-            canResolve && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_components.Button,
-              {
-                label: (0, import_i18n._x)(
-                  "Resolve",
-                  "Mark note as resolved"
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_components.__experimentalVStack,
+    {
+      spacing: "2",
+      role: thread.parent !== 0 ? "treeitem" : void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { alignment: "left", spacing: "3", justify: "flex-start", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_comment_author_info.default,
+            {
+              avatar: thread?.author_avatar_urls?.[48],
+              name: thread?.author_name,
+              date: thread?.date,
+              userId: thread?.author
+            }
+          ),
+          isExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.FlexItem,
+            {
+              className: "editor-collab-sidebar-panel__comment-status",
+              onClick: (event) => {
+                event.stopPropagation();
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { spacing: "0", children: [
+                canResolve && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.Button,
+                  {
+                    label: (0, import_i18n._x)(
+                      "Resolve",
+                      "Mark note as resolved"
+                    ),
+                    size: "small",
+                    icon: import_icons.published,
+                    disabled: thread.status === "approved",
+                    accessibleWhenDisabled: thread.status === "approved",
+                    onClick: () => {
+                      onEdit({
+                        id: thread.id,
+                        status: "approved"
+                      });
+                    }
+                  }
                 ),
-                size: "small",
-                icon: import_icons.published,
-                disabled: thread.status === "approved",
-                accessibleWhenDisabled: thread.status === "approved",
-                onClick: () => {
-                  onEdit({
-                    id: thread.id,
-                    status: "approved"
-                  });
-                }
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Menu, { placement: "bottom-end", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                Menu.TriggerButton,
-                {
-                  render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    import_components.Button,
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Menu, { placement: "bottom-end", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    Menu.TriggerButton,
                     {
-                      size: "small",
-                      icon: import_icons.moreVertical,
-                      label: (0, import_i18n.__)("Actions"),
-                      disabled: !moreActions.length,
-                      accessibleWhenDisabled: true
+                      render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_components.Button,
+                        {
+                          ref: actionButtonRef,
+                          size: "small",
+                          icon: import_icons.moreVertical,
+                          label: (0, import_i18n.__)("Actions"),
+                          disabled: !moreActions.length,
+                          accessibleWhenDisabled: true
+                        }
+                      )
                     }
-                  )
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Menu.Popover, { children: moreActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                Menu.Item,
-                {
-                  onClick: () => action.onClick(),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Menu.ItemLabel, { children: action.title })
-                },
-                action.id
-              )) })
-            ] })
-          ] })
-        }
-      )
-    ] }),
-    "edit" === actionState ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_comment_form.default,
-      {
-        onSubmit: (value) => {
-          onEdit({
-            id: thread.id,
-            content: value
-          });
-          setActionState(false);
-        },
-        onCancel: () => handleCancel(),
-        thread,
-        submitButtonText: (0, import_i18n._x)("Update", "verb"),
-        labelText: (0, import_i18n.sprintf)(
-          // translators: %1$s: note identifier, %2$s: author name.
-          (0, import_i18n.__)("Edit note %1$s by %2$s"),
-          thread.id,
-          thread.author_name
-        ),
-        reflowComments
-      }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_element.RawHTML,
-      {
-        className: (0, import_clsx.default)(
-          "editor-collab-sidebar-panel__user-comment",
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Menu.Popover, { children: moreActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    Menu.Item,
+                    {
+                      onClick: () => action.onClick(),
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Menu.ItemLabel, { children: action.title })
+                    },
+                    action.id
+                  )) })
+                ] })
+              ] })
+            }
+          )
+        ] }),
+        "edit" === actionState ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_comment_form.default,
+          {
+            onSubmit: (value) => {
+              onEdit({
+                id: thread.id,
+                content: value
+              });
+              setActionState(false);
+              actionButtonRef.current?.focus();
+            },
+            onCancel: () => handleCancel(),
+            thread,
+            submitButtonText: (0, import_i18n._x)("Update", "verb"),
+            labelText: (0, import_i18n.sprintf)(
+              // translators: %1$s: note identifier, %2$s: author name.
+              (0, import_i18n.__)("Edit note %1$s by %2$s"),
+              thread.id,
+              thread.author_name
+            ),
+            reflowComments
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_element.RawHTML,
           {
-            "editor-collab-sidebar-panel__resolution-text": isResolutionComment
+            className: (0, import_clsx.default)(
+              "editor-collab-sidebar-panel__user-comment",
+              {
+                "editor-collab-sidebar-panel__resolution-text": isResolutionComment
+              }
+            ),
+            children: isResolutionComment ? (() => {
+              const actionText = thread.meta._wp_note_status === "resolved" ? (0, import_i18n.__)("Marked as resolved") : (0, import_i18n.__)("Reopened");
+              const content = thread?.content?.raw;
+              if (content && typeof content === "string" && content.trim() !== "") {
+                return (0, import_i18n.sprintf)(
+                  // translators: %1$s: action label ("Marked as resolved" or "Reopened"); %2$s: note text.
+                  (0, import_i18n.__)("%1$s: %2$s"),
+                  actionText,
+                  content
+                );
+              }
+              return actionText;
+            })() : thread?.content?.rendered
           }
         ),
-        children: isResolutionComment ? (() => {
-          const actionText = thread.meta._wp_note_status === "resolved" ? (0, import_i18n.__)("Marked as resolved") : (0, import_i18n.__)("Reopened");
-          const content = thread?.content?.raw;
-          if (content && typeof content === "string" && content.trim() !== "") {
-            return (0, import_i18n.sprintf)(
-              // translators: %1$s: action label ("Marked as resolved" or "Reopened"); %2$s: note text.
-              (0, import_i18n.__)("%1$s: %2$s"),
-              actionText,
-              content
-            );
+        "delete" === actionState && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.__experimentalConfirmDialog,
+          {
+            isOpen: showConfirmDialog,
+            onConfirm: handleConfirmDelete,
+            onCancel: handleCancel,
+            confirmButtonText: (0, import_i18n.__)("Delete"),
+            children: (0, import_i18n.__)(
+              "Are you sure you want to delete this note? This will also delete all of this note's replies."
+            )
           }
-          return actionText;
-        })() : thread?.content?.rendered
-      }
-    ),
-    "delete" === actionState && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_components.__experimentalConfirmDialog,
-      {
-        isOpen: showConfirmDialog,
-        onConfirm: handleConfirmDelete,
-        onCancel: handleCancel,
-        confirmButtonText: (0, import_i18n.__)("Delete"),
-        children: (0, import_i18n.__)(
-          "Are you sure you want to delete this note? This will also delete all of this note's replies."
         )
-      }
-    )
-  ] });
+      ]
+    }
+  );
 };
 var comments_default = Comments;
 // Annotate the CommonJS export names for ESM import in node: