@wordpress/editor 14.44.0 → 14.45.0

package/build-module/components/collab-sidebar/notes.mjs

@@ -0,0 +1,215 @@
+// packages/editor/src/components/collab-sidebar/notes.js
+import { useEffect, useMemo } from "@wordpress/element";
+import { __ } from "@wordpress/i18n";
+import { useSelect, useDispatch } from "@wordpress/data";
+import { Stack } from "@wordpress/ui";
+import {
+  store as blockEditorStore,
+  privateApis as blockEditorPrivateApis
+} from "@wordpress/block-editor";
+import { unlock } from "../../lock-unlock.mjs";
+import { NoteThread } from "./note-thread.mjs";
+import { focusNoteThread } from "./utils.mjs";
+import { useFloatingBoard, useNoteActions } from "./hooks.mjs";
+import { AddNote } from "./add-note.mjs";
+import { store as editorStore } from "../../store/index.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var { useBlockElement } = unlock(blockEditorPrivateApis);
+function Notes({ notes, sidebarRef, isFloating = false, styles }) {
+  const {
+    onCreate: onAddReply,
+    onEdit: onEditNote,
+    onDelete
+  } = useNoteActions();
+  const { selectNote } = unlock(useDispatch(editorStore));
+  const { selectBlock, toggleBlockSpotlight } = unlock(
+    useDispatch(blockEditorStore)
+  );
+  const { blockNoteId, selectedBlockClientId, orderedBlockIds } = useSelect(
+    (select) => {
+      const {
+        getBlockAttributes,
+        getSelectedBlockClientId,
+        getClientIdsWithDescendants
+      } = select(blockEditorStore);
+      const clientId = getSelectedBlockClientId();
+      return {
+        blockNoteId: clientId ? getBlockAttributes(clientId)?.metadata?.noteId : null,
+        selectedBlockClientId: clientId,
+        orderedBlockIds: getClientIdsWithDescendants()
+      };
+    },
+    []
+  );
+  const { selectedNote, noteFocused } = useSelect((select) => {
+    const { getSelectedNote, isNoteFocused } = unlock(
+      select(editorStore)
+    );
+    return {
+      selectedNote: getSelectedNote(),
+      noteFocused: isNoteFocused()
+    };
+  }, []);
+  const relatedBlockElement = useBlockElement(selectedBlockClientId);
+  const threads = useMemo(() => {
+    if (!isFloating || selectedNote !== "new") {
+      return notes;
+    }
+    const newNoteThread = {
+      id: "new",
+      blockClientId: selectedBlockClientId,
+      content: { rendered: "" }
+    };
+    const out = [];
+    orderedBlockIds.forEach((blockId) => {
+      if (blockId === selectedBlockClientId) {
+        out.push(newNoteThread);
+      } else {
+        const threadForBlock = notes.find(
+          (t) => t.blockClientId === blockId
+        );
+        if (threadForBlock) {
+          out.push(threadForBlock);
+        }
+      }
+    });
+    return out;
+  }, [
+    notes,
+    isFloating,
+    selectedNote,
+    selectedBlockClientId,
+    orderedBlockIds
+  ]);
+  const handleDelete = async (note) => {
+    const currentIndex = threads.findIndex((t) => t.id === note.id);
+    const nextThread = threads[currentIndex + 1];
+    const prevThread = threads[currentIndex - 1];
+    await onDelete(note);
+    if (note.parent !== 0) {
+      selectNote(note.parent);
+      focusNoteThread(note.parent, sidebarRef.current);
+      return;
+    }
+    if (nextThread) {
+      selectNote(nextThread.id);
+      focusNoteThread(nextThread.id, sidebarRef.current);
+    } else if (prevThread) {
+      selectNote(prevThread.id);
+      focusNoteThread(prevThread.id, sidebarRef.current);
+    } else {
+      selectNote(void 0);
+      toggleBlockSpotlight(note.blockClientId, false);
+      relatedBlockElement?.focus();
+    }
+  };
+  useEffect(() => {
+    selectNote(blockNoteId ?? void 0);
+  }, [blockNoteId, selectNote]);
+  useEffect(() => {
+    if (noteFocused && selectedNote) {
+      focusNoteThread(
+        selectedNote,
+        sidebarRef.current,
+        selectedNote === "new" ? "textarea" : void 0
+      );
+      selectNote(selectedNote);
+    }
+  }, [noteFocused, selectedNote, selectNote, sidebarRef]);
+  const { notePositions, registerThread, unregisterThread } = useFloatingBoard({
+    threads,
+    selectedNoteId: selectedNote,
+    isFloating,
+    sidebarRef
+  });
+  const hasThreads = Array.isArray(threads) && threads.length > 0;
+  const navigate = (event, thread, isSelected) => {
+    if (event.defaultPrevented) {
+      return;
+    }
+    const currentIndex = threads.findIndex((t) => t.id === thread.id);
+    const isSelfTarget = event.currentTarget === event.target;
+    if ((event.key === "Enter" || event.key === "ArrowRight") && isSelfTarget && !isSelected) {
+      selectNote(thread.id);
+      if (!!thread.blockClientId) {
+        selectBlock(thread.blockClientId, null);
+        toggleBlockSpotlight(thread.blockClientId, true);
+      }
+    } else if ((event.key === "Enter" || event.key === "ArrowLeft") && isSelfTarget && isSelected || event.key === "Escape") {
+      selectNote(void 0);
+      if (thread.blockClientId) {
+        toggleBlockSpotlight(thread.blockClientId, false);
+      }
+      focusNoteThread(thread.id, sidebarRef.current);
+    } else if (event.key === "ArrowDown" && currentIndex < threads.length - 1 && isSelfTarget) {
+      focusNoteThread(
+        threads[currentIndex + 1].id,
+        sidebarRef.current
+      );
+    } else if (event.key === "ArrowUp" && currentIndex > 0 && isSelfTarget) {
+      focusNoteThread(
+        threads[currentIndex - 1].id,
+        sidebarRef.current
+      );
+    } else if (event.key === "Home" && isSelfTarget) {
+      focusNoteThread(threads[0].id, sidebarRef.current);
+    } else if (event.key === "End" && isSelfTarget) {
+      focusNoteThread(
+        threads[threads.length - 1].id,
+        sidebarRef.current
+      );
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Stack,
+    {
+      className: "editor-collab-sidebar-panel",
+      style: styles,
+      role: "tree",
+      direction: "column",
+      gap: "md",
+      justify: "flex-start",
+      ref: (node) => {
+        if (node) {
+          sidebarRef.current = node;
+        }
+      },
+      "aria-label": isFloating ? __("Unresolved notes") : __("All notes"),
+      children: !hasThreads && !isFloating ? /* @__PURE__ */ jsx(AddNote, { onSubmit: onAddReply, sidebarRef }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        !isFloating && selectedNote === "new" && /* @__PURE__ */ jsx(
+          AddNote,
+          {
+            onSubmit: onAddReply,
+            sidebarRef
+          }
+        ),
+        threads.map((thread) => /* @__PURE__ */ jsx(
+          NoteThread,
+          {
+            note: thread,
+            onAddReply,
+            onDeleteNote: handleDelete,
+            onEditNote,
+            isSelected: selectedNote === thread.id,
+            sidebarRef,
+            floating: isFloating ? {
+              y: notePositions[thread.id],
+              registerThread,
+              unregisterThread
+            } : void 0,
+            onKeyDown: (event) => navigate(
+              event,
+              thread,
+              selectedNote === thread.id
+            )
+          },
+          thread.id
+        ))
+      ] })
+    }
+  );
+}
+export {
+  Notes
+};
+//# sourceMappingURL=notes.mjs.map

package/build-module/components/collab-sidebar/notes.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/collab-sidebar/notes.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect, useMemo } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { Stack } from '@wordpress/ui';\nimport {\n\tstore as blockEditorStore,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { NoteThread } from './note-thread';\nimport { focusNoteThread } from './utils';\nimport { useFloatingBoard, useNoteActions } from './hooks';\nimport { AddNote } from './add-note';\nimport { store as editorStore } from '../../store';\n\nconst { useBlockElement } = unlock( blockEditorPrivateApis );\n\nexport function Notes( { notes, sidebarRef, isFloating = false, styles } ) {\n\tconst {\n\t\tonCreate: onAddReply,\n\t\tonEdit: onEditNote,\n\t\tonDelete,\n\t} = useNoteActions();\n\tconst { selectNote } = unlock( useDispatch( editorStore ) );\n\tconst { selectBlock, toggleBlockSpotlight } = unlock(\n\t\tuseDispatch( blockEditorStore )\n\t);\n\n\tconst { blockNoteId, selectedBlockClientId, orderedBlockIds } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlockAttributes,\n\t\t\t\tgetSelectedBlockClientId,\n\t\t\t\tgetClientIdsWithDescendants,\n\t\t\t} = select( blockEditorStore );\n\t\t\tconst clientId = getSelectedBlockClientId();\n\t\t\treturn {\n\t\t\t\tblockNoteId: clientId\n\t\t\t\t\t? getBlockAttributes( clientId )?.metadata?.noteId\n\t\t\t\t\t: null,\n\t\t\t\tselectedBlockClientId: clientId,\n\t\t\t\torderedBlockIds: getClientIdsWithDescendants(),\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\tconst { selectedNote, noteFocused } = useSelect( ( select ) => {\n\t\tconst { getSelectedNote, isNoteFocused } = unlock(\n\t\t\tselect( editorStore )\n\t\t);\n\t\treturn {\n\t\t\tselectedNote: getSelectedNote(),\n\t\t\tnoteFocused: isNoteFocused(),\n\t\t};\n\t}, [] );\n\n\tconst relatedBlockElement = useBlockElement( selectedBlockClientId );\n\n\tconst threads = useMemo( () => {\n\t\t// In floating mode with a pending new note, splice a placeholder\n\t\t// entry at the selected block's position so the board can float it\n\t\t// alongside regular threads.\n\t\tif ( ! isFloating || selectedNote !== 'new' ) {\n\t\t\treturn notes;\n\t\t}\n\t\tconst newNoteThread = {\n\t\t\tid: 'new',\n\t\t\tblockClientId: selectedBlockClientId,\n\t\t\tcontent: { rendered: '' },\n\t\t};\n\t\tconst out = [];\n\t\torderedBlockIds.forEach( ( blockId ) => {\n\t\t\tif ( blockId === selectedBlockClientId ) {\n\t\t\t\tout.push( newNoteThread );\n\t\t\t} else {\n\t\t\t\tconst threadForBlock = notes.find(\n\t\t\t\t\t( t ) => t.blockClientId === blockId\n\t\t\t\t);\n\t\t\t\tif ( threadForBlock ) {\n\t\t\t\t\tout.push( threadForBlock );\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\t\treturn out;\n\t}, [\n\t\tnotes,\n\t\tisFloating,\n\t\tselectedNote,\n\t\tselectedBlockClientId,\n\t\torderedBlockIds,\n\t] );\n\n\tconst handleDelete = async ( note ) => {\n\t\tconst currentIndex = threads.findIndex( ( t ) => t.id === note.id );\n\t\tconst nextThread = threads[ currentIndex + 1 ];\n\t\tconst prevThread = threads[ currentIndex - 1 ];\n\n\t\tawait onDelete( note );\n\n\t\tif ( note.parent !== 0 ) {\n\t\t\t// Move focus to the parent thread when a reply was deleted.\n\t\t\tselectNote( note.parent );\n\t\t\tfocusNoteThread( note.parent, sidebarRef.current );\n\t\t\treturn;\n\t\t}\n\n\t\tif ( nextThread ) {\n\t\t\tselectNote( nextThread.id );\n\t\t\tfocusNoteThread( nextThread.id, sidebarRef.current );\n\t\t} else if ( prevThread ) {\n\t\t\tselectNote( prevThread.id );\n\t\t\tfocusNoteThread( prevThread.id, sidebarRef.current );\n\t\t} else {\n\t\t\tselectNote( undefined );\n\t\t\ttoggleBlockSpotlight( note.blockClientId, false );\n\t\t\t// Move focus to the related block.\n\t\t\trelatedBlockElement?.focus();\n\t\t}\n\t};\n\n\t// Auto-select the related note thread when a block is selected.\n\tuseEffect( () => {\n\t\tselectNote( blockNoteId ?? undefined );\n\t}, [ blockNoteId, selectNote ] );\n\n\t// Focus the selected note when requested.\n\tuseEffect( () => {\n\t\tif ( noteFocused && selectedNote ) {\n\t\t\tfocusNoteThread(\n\t\t\t\tselectedNote,\n\t\t\t\tsidebarRef.current,\n\t\t\t\tselectedNote === 'new' ? 'textarea' : undefined\n\t\t\t);\n\t\t\t// Clear focus flag to avoid re-triggering.\n\t\t\tselectNote( selectedNote );\n\t\t}\n\t}, [ noteFocused, selectedNote, selectNote, sidebarRef ] );\n\n\tconst { notePositions, registerThread, unregisterThread } =\n\t\tuseFloatingBoard( {\n\t\t\tthreads,\n\t\t\tselectedNoteId: selectedNote,\n\t\t\tisFloating,\n\t\t\tsidebarRef,\n\t\t} );\n\n\tconst hasThreads = Array.isArray( threads ) && threads.length > 0;\n\n\tconst navigate = ( event, thread, isSelected ) => {\n\t\tif ( event.defaultPrevented ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst currentIndex = threads.findIndex( ( t ) => t.id === thread.id );\n\t\tconst isSelfTarget = event.currentTarget === event.target;\n\n\t\tif (\n\t\t\t( event.key === 'Enter' || event.key === 'ArrowRight' ) &&\n\t\t\tisSelfTarget &&\n\t\t\t! isSelected\n\t\t) {\n\t\t\t// Expand thread.\n\t\t\tselectNote( thread.id );\n\t\t\tif ( !! thread.blockClientId ) {\n\t\t\t\t// Pass `null` as the second parameter to prevent focusing the block.\n\t\t\t\tselectBlock( thread.blockClientId, null );\n\t\t\t\ttoggleBlockSpotlight( thread.blockClientId, true );\n\t\t\t}\n\t\t} else if (\n\t\t\t( ( event.key === 'Enter' || event.key === 'ArrowLeft' ) &&\n\t\t\t\tisSelfTarget &&\n\t\t\t\tisSelected ) ||\n\t\t\tevent.key === 'Escape'\n\t\t) {\n\t\t\t// Collapse thread.\n\t\t\tselectNote( undefined );\n\t\t\tif ( thread.blockClientId ) {\n\t\t\t\ttoggleBlockSpotlight( thread.blockClientId, false );\n\t\t\t}\n\t\t\tfocusNoteThread( thread.id, sidebarRef.current );\n\t\t} else if (\n\t\t\tevent.key === 'ArrowDown' &&\n\t\t\tcurrentIndex < threads.length - 1 &&\n\t\t\tisSelfTarget\n\t\t) {\n\t\t\tfocusNoteThread(\n\t\t\t\tthreads[ currentIndex + 1 ].id,\n\t\t\t\tsidebarRef.current\n\t\t\t);\n\t\t} else if (\n\t\t\tevent.key === 'ArrowUp' &&\n\t\t\tcurrentIndex > 0 &&\n\t\t\tisSelfTarget\n\t\t) {\n\t\t\tfocusNoteThread(\n\t\t\t\tthreads[ currentIndex - 1 ].id,\n\t\t\t\tsidebarRef.current\n\t\t\t);\n\t\t} else if ( event.key === 'Home' && isSelfTarget ) {\n\t\t\tfocusNoteThread( threads[ 0 ].id, sidebarRef.current );\n\t\t} else if ( event.key === 'End' && isSelfTarget ) {\n\t\t\tfocusNoteThread(\n\t\t\t\tthreads[ threads.length - 1 ].id,\n\t\t\t\tsidebarRef.current\n\t\t\t);\n\t\t}\n\t};\n\n\treturn (\n\t\t<Stack\n\t\t\tclassName=\"editor-collab-sidebar-panel\"\n\t\t\tstyle={ styles }\n\t\t\trole=\"tree\"\n\t\t\tdirection=\"column\"\n\t\t\tgap=\"md\"\n\t\t\tjustify=\"flex-start\"\n\t\t\tref={ ( node ) => {\n\t\t\t\t// Sometimes previous sidebar unmounts after the new one mounts.\n\t\t\t\t// This ensures we always have the latest reference.\n\t\t\t\tif ( node ) {\n\t\t\t\t\tsidebarRef.current = node;\n\t\t\t\t}\n\t\t\t} }\n\t\t\taria-label={\n\t\t\t\tisFloating ? __( 'Unresolved notes' ) : __( 'All notes' )\n\t\t\t}\n\t\t>\n\t\t\t{ ! hasThreads && ! isFloating ? (\n\t\t\t\t<AddNote onSubmit={ onAddReply } sidebarRef={ sidebarRef } />\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t{ ! isFloating && selectedNote === 'new' && (\n\t\t\t\t\t\t<AddNote\n\t\t\t\t\t\t\tonSubmit={ onAddReply }\n\t\t\t\t\t\t\tsidebarRef={ sidebarRef }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ threads.map( ( thread ) => (\n\t\t\t\t\t\t<NoteThread\n\t\t\t\t\t\t\tkey={ thread.id }\n\t\t\t\t\t\t\tnote={ thread }\n\t\t\t\t\t\t\tonAddReply={ onAddReply }\n\t\t\t\t\t\t\tonDeleteNote={ handleDelete }\n\t\t\t\t\t\t\tonEditNote={ onEditNote }\n\t\t\t\t\t\t\tisSelected={ selectedNote === thread.id }\n\t\t\t\t\t\t\tsidebarRef={ sidebarRef }\n\t\t\t\t\t\t\tfloating={\n\t\t\t\t\t\t\t\tisFloating\n\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\ty: notePositions[ thread.id ],\n\t\t\t\t\t\t\t\t\t\t\tregisterThread,\n\t\t\t\t\t\t\t\t\t\t\tunregisterThread,\n\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonKeyDown={ ( event ) =>\n\t\t\t\t\t\t\t\tnavigate(\n\t\t\t\t\t\t\t\t\tevent,\n\t\t\t\t\t\t\t\t\tthread,\n\t\t\t\t\t\t\t\t\tselectedNote === thread.id\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t</Stack>\n\t);\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/build-module/components/collab-sidebar/utils.mjs

@@ -1,10 +1,11 @@
 // packages/editor/src/components/collab-sidebar/utils.js
 import { _x } from "@wordpress/i18n";
-function sanitizeCommentString(str) {
+function sanitizeNoteContent(str) {
   return str.trim();
 }
-function noop() {
-}
+var THREAD_ALIGN_OFFSET = -16;
+var THREAD_GAP = 16;
+var OVERLAP_MARGIN = 20;
 var AVATAR_BORDER_COLORS = [
   "#C36EFF",
   // Purple
@@ -24,7 +25,7 @@ var AVATAR_BORDER_COLORS = [
 function getAvatarBorderColor(userId) {
   return AVATAR_BORDER_COLORS[userId % AVATAR_BORDER_COLORS.length];
 }
-function getCommentExcerpt(text, excerptLength = 10) {
+function getNoteExcerpt(text, excerptLength = 10) {
   if (!text) {
     return "";
   }
@@ -43,11 +44,76 @@ function getCommentExcerpt(text, excerptLength = 10) {
   const isTrimmed = trimmedExcerpt !== rawText;
   return isTrimmed ? trimmedExcerpt + "\u2026" : trimmedExcerpt;
 }
-function focusCommentThread(commentId, container, additionalSelector) {
+function calculateNotePositions({
+  threads,
+  selectedNoteId,
+  blockRects,
+  heights,
+  scrollTop = 0
+}) {
+  const offsets = {};
+  const anchorIndex = Math.max(
+    0,
+    threads.findIndex((thread) => thread.id === selectedNoteId)
+  );
+  const anchorThread = threads[anchorIndex];
+  if (!anchorThread || !blockRects[anchorThread.id]) {
+    return { positions: {} };
+  }
+  const anchorRect = blockRects[anchorThread.id];
+  const anchorTop = anchorRect.top || 0;
+  const anchorHeight = heights[anchorThread.id] || 0;
+  offsets[anchorThread.id] = THREAD_ALIGN_OFFSET;
+  let prevAdjustedTop = anchorTop + THREAD_ALIGN_OFFSET;
+  let prevHeight = anchorHeight;
+  for (let i = anchorIndex + 1; i < threads.length; i++) {
+    const thread = threads[i];
+    const threadRect = blockRects[thread.id];
+    if (!threadRect) {
+      continue;
+    }
+    const threadTop = threadRect.top || 0;
+    const threadHeight = heights[thread.id] || 0;
+    let offset = THREAD_ALIGN_OFFSET;
+    const prevBottom = prevAdjustedTop + prevHeight;
+    if (threadTop < prevBottom + THREAD_GAP) {
+      offset = prevBottom - threadTop + OVERLAP_MARGIN;
+    }
+    offsets[thread.id] = offset;
+    prevAdjustedTop = threadTop + offset;
+    prevHeight = threadHeight;
+  }
+  let belowAdjustedTop = anchorTop + THREAD_ALIGN_OFFSET;
+  for (let i = anchorIndex - 1; i >= 0; i--) {
+    const thread = threads[i];
+    const threadRect = blockRects[thread.id];
+    if (!threadRect) {
+      continue;
+    }
+    const threadTop = threadRect.top || 0;
+    const threadHeight = heights[thread.id] || 0;
+    let offset = THREAD_ALIGN_OFFSET;
+    const threadBottom = threadTop + threadHeight;
+    if (threadBottom > belowAdjustedTop) {
+      offset = belowAdjustedTop - threadTop - threadHeight - OVERLAP_MARGIN;
+    }
+    offsets[thread.id] = offset;
+    belowAdjustedTop = threadTop + offset;
+  }
+  const positions = {};
+  for (const thread of threads) {
+    const blockRect = blockRects[thread.id];
+    if (blockRect && offsets[thread.id] !== void 0) {
+      positions[thread.id] = blockRect.top + scrollTop + offsets[thread.id];
+    }
+  }
+  return { positions };
+}
+function focusNoteThread(noteId, container, additionalSelector) {
   if (!container) {
     return;
   }
-  const threadSelector = commentId && commentId !== "new" ? `[role=treeitem][id="comment-thread-${commentId}"]` : "[role=treeitem]:not([id])";
+  const threadSelector = noteId && noteId !== "new" ? `[role=treeitem][id="note-thread-${noteId}"]` : "[role=treeitem]:not([id])";
   const selector = additionalSelector ? `${threadSelector} ${additionalSelector}` : threadSelector;
   return new Promise((resolve) => {
     if (container.querySelector(selector)) {
@@ -72,10 +138,10 @@ function focusCommentThread(commentId, container, additionalSelector) {
   }).then((element) => element?.focus());
 }
 export {
-  focusCommentThread,
+  calculateNotePositions,
+  focusNoteThread,
   getAvatarBorderColor,
-  getCommentExcerpt,
-  noop,
-  sanitizeCommentString
+  getNoteExcerpt,
+  sanitizeNoteContent
 };
 //# sourceMappingURL=utils.mjs.map

package/build-module/components/collab-sidebar/utils.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/collab-sidebar/utils.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { _x } from '@wordpress/i18n';\n\n/**\n * Sanitizes a comment string by removing non-printable ASCII characters.\n *\n * @param {string} str - The comment string to sanitize.\n * @return {string} - The sanitized comment string.\n */\nexport function sanitizeCommentString( str ) {\n\treturn str.trim();\n}\n\n/**\n * A no-operation function that does nothing.\n */\nexport function noop() {}\n\n/**\n * Avatar border colors chosen to be visually distinct from each other and from\n * the editor's semantic UI colors (Delta E > 10 between all pairs).\n */\nconst AVATAR_BORDER_COLORS = [\n\t'#C36EFF', // Purple\n\t'#FF51A8', // Pink\n\t'#E4780A', // Orange\n\t'#FF35EE', // Magenta\n\t'#879F11', // Olive\n\t'#46A494', // Teal\n\t'#00A2C3', // Cyan\n];\n\n/**\n * Gets the border color for an avatar based on the user ID.\n *\n * @param {number} userId - The user ID.\n * @return {string} - The border color.\n */\nexport function getAvatarBorderColor( userId ) {\n\treturn AVATAR_BORDER_COLORS[ userId % AVATAR_BORDER_COLORS.length ];\n}\n\n/**\n * Generates a comment excerpt from text based on word count type and length.\n *\n * @param {string} text          - The comment text to generate excerpt from.\n * @param {number} excerptLength - The maximum length for the commentexcerpt.\n * @return {string} - The generated comment excerpt.\n */\nexport function getCommentExcerpt( text, excerptLength = 10 ) {\n\tif ( ! text ) {\n\t\treturn '';\n\t}\n\n\t/*\n\t * translators: If your word count is based on single characters (e.g. East Asian characters),\n\t * enter 'characters_excluding_spaces' or 'characters_including_spaces'. Otherwise, enter 'words'.\n\t * Do not translate into your own language.\n\t */\n\tconst wordCountType = _x( 'words', 'Word count type. Do not translate!' );\n\n\tconst rawText = text.trim();\n\tlet trimmedExcerpt = '';\n\n\tif ( wordCountType === 'words' ) {\n\t\ttrimmedExcerpt = rawText.split( ' ', excerptLength ).join( ' ' );\n\t} else if ( wordCountType === 'characters_excluding_spaces' ) {\n\t\t/*\n\t\t * 1. Split the text at the character limit,\n\t\t * then join the substrings back into one string.\n\t\t * 2. Count the number of spaces in the text\n\t\t * by comparing the lengths of the string with and without spaces.\n\t\t * 3. Add the number to the length of the visible excerpt,\n\t\t * so that the spaces are excluded from the word count.\n\t\t */\n\t\tconst textWithSpaces = rawText.split( '', excerptLength ).join( '' );\n\n\t\tconst numberOfSpaces =\n\t\t\ttextWithSpaces.length - textWithSpaces.replaceAll( ' ', '' ).length;\n\n\t\ttrimmedExcerpt = rawText\n\t\t\t.split( '', excerptLength + numberOfSpaces )\n\t\t\t.join( '' );\n\t} else if ( wordCountType === 'characters_including_spaces' ) {\n\t\ttrimmedExcerpt = rawText.split( '', excerptLength ).join( '' );\n\t}\n\n\tconst isTrimmed = trimmedExcerpt !== rawText;\n\treturn isTrimmed ? trimmedExcerpt + '\u2026' : trimmedExcerpt;\n}\n\n/**\n * Shift focus to the comment thread associated with a particular comment ID.\n * If an additional selector is provided, the focus will be shifted to the element matching the selector.\n *\n * @typedef {import('@wordpress/element').RefObject} RefObject\n *\n * @param {string}       commentId          The ID of the comment thread to focus.\n * @param {?HTMLElement} container          The container element to search within.\n * @param {string}       additionalSelector The additional selector to focus on.\n */\nexport function focusCommentThread( commentId, container, additionalSelector ) {\n\tif ( ! container ) {\n\t\treturn;\n\t}\n\n\t// A thread without a commentId is a new comment thread.\n\tconst threadSelector =\n\t\tcommentId && commentId !== 'new'\n\t\t\t? `[role=treeitem][id=\"comment-thread-${ commentId }\"]`\n\t\t\t: '[role=treeitem]:not([id])';\n\tconst selector = additionalSelector\n\t\t? `${ threadSelector } ${ additionalSelector }`\n\t\t: threadSelector;\n\n\treturn new Promise( ( resolve ) => {\n\t\tif ( container.querySelector( selector ) ) {\n\t\t\treturn resolve( container.querySelector( selector ) );\n\t\t}\n\n\t\tlet timer = null;\n\t\t// Wait for the element to be added to the DOM.\n\t\tconst observer = new window.MutationObserver( () => {\n\t\t\tif ( container.querySelector( selector ) ) {\n\t\t\t\tclearTimeout( timer );\n\t\t\t\tobserver.disconnect();\n\t\t\t\tresolve( container.querySelector( selector ) );\n\t\t\t}\n\t\t} );\n\n\t\tobserver.observe( container, {\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t} );\n\n\t\t// Stop trying after 3 seconds.\n\t\ttimer = setTimeout( () => {\n\t\t\tobserver.disconnect();\n\t\t\tresolve( null );\n\t\t}, 3000 );\n\t} ).then( ( element ) => element?.focus() );\n}\n"],
-  "mappings": ";AAGA,SAAS,UAAU;AAQZ,SAAS,sBAAuB,KAAM;AAC5C,SAAO,IAAI,KAAK;AACjB;AAKO,SAAS,OAAO;AAAC;AAMxB,IAAM,uBAAuB;AAAA,EAC5B;AAAA;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AACD;AAQO,SAAS,qBAAsB,QAAS;AAC9C,SAAO,qBAAsB,SAAS,qBAAqB,MAAO;AACnE;AASO,SAAS,kBAAmB,MAAM,gBAAgB,IAAK;AAC7D,MAAK,CAAE,MAAO;AACb,WAAO;AAAA,EACR;AAOA,QAAM,gBAAgB,GAAI,SAAS,oCAAqC;AAExE,QAAM,UAAU,KAAK,KAAK;AAC1B,MAAI,iBAAiB;AAErB,MAAK,kBAAkB,SAAU;AAChC,qBAAiB,QAAQ,MAAO,KAAK,aAAc,EAAE,KAAM,GAAI;AAAA,EAChE,WAAY,kBAAkB,+BAAgC;AAS7D,UAAM,iBAAiB,QAAQ,MAAO,IAAI,aAAc,EAAE,KAAM,EAAG;AAEnE,UAAM,iBACL,eAAe,SAAS,eAAe,WAAY,KAAK,EAAG,EAAE;AAE9D,qBAAiB,QACf,MAAO,IAAI,gBAAgB,cAAe,EAC1C,KAAM,EAAG;AAAA,EACZ,WAAY,kBAAkB,+BAAgC;AAC7D,qBAAiB,QAAQ,MAAO,IAAI,aAAc,EAAE,KAAM,EAAG;AAAA,EAC9D;AAEA,QAAM,YAAY,mBAAmB;AACrC,SAAO,YAAY,iBAAiB,WAAM;AAC3C;AAYO,SAAS,mBAAoB,WAAW,WAAW,oBAAqB;AAC9E,MAAK,CAAE,WAAY;AAClB;AAAA,EACD;AAGA,QAAM,iBACL,aAAa,cAAc,QACxB,sCAAuC,SAAU,OACjD;AACJ,QAAM,WAAW,qBACd,GAAI,cAAe,IAAK,kBAAmB,KAC3C;AAEH,SAAO,IAAI,QAAS,CAAE,YAAa;AAClC,QAAK,UAAU,cAAe,QAAS,GAAI;AAC1C,aAAO,QAAS,UAAU,cAAe,QAAS,CAAE;AAAA,IACrD;AAEA,QAAI,QAAQ;AAEZ,UAAM,WAAW,IAAI,OAAO,iBAAkB,MAAM;AACnD,UAAK,UAAU,cAAe,QAAS,GAAI;AAC1C,qBAAc,KAAM;AACpB,iBAAS,WAAW;AACpB,gBAAS,UAAU,cAAe,QAAS,CAAE;AAAA,MAC9C;AAAA,IACD,CAAE;AAEF,aAAS,QAAS,WAAW;AAAA,MAC5B,WAAW;AAAA,MACX,SAAS;AAAA,IACV,CAAE;AAGF,YAAQ,WAAY,MAAM;AACzB,eAAS,WAAW;AACpB,cAAS,IAAK;AAAA,IACf,GAAG,GAAK;AAAA,EACT,CAAE,EAAE,KAAM,CAAE,YAAa,SAAS,MAAM,CAAE;AAC3C;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { _x } from '@wordpress/i18n';\n\n/**\n * Sanitizes a note string by removing non-printable ASCII characters.\n *\n * @param {string} str - The note string to sanitize.\n * @return {string} - The sanitized note string.\n */\nexport function sanitizeNoteContent( str ) {\n\treturn str.trim();\n}\n\nconst THREAD_ALIGN_OFFSET = -16;\nconst THREAD_GAP = 16;\nconst OVERLAP_MARGIN = 20;\n\n/**\n * Avatar border colors chosen to be visually distinct from each other and from\n * the editor's semantic UI colors (Delta E > 10 between all pairs).\n */\nconst AVATAR_BORDER_COLORS = [\n\t'#C36EFF', // Purple\n\t'#FF51A8', // Pink\n\t'#E4780A', // Orange\n\t'#FF35EE', // Magenta\n\t'#879F11', // Olive\n\t'#46A494', // Teal\n\t'#00A2C3', // Cyan\n];\n\n/**\n * Gets the border color for an avatar based on the user ID.\n *\n * @param {number} userId - The user ID.\n * @return {string} - The border color.\n */\nexport function getAvatarBorderColor( userId ) {\n\treturn AVATAR_BORDER_COLORS[ userId % AVATAR_BORDER_COLORS.length ];\n}\n\n/**\n * Generates a note excerpt from text based on word count type and length.\n *\n * @param {string} text          - The note text to generate excerpt from.\n * @param {number} excerptLength - The maximum length for the note excerpt.\n * @return {string} - The generated note excerpt.\n */\nexport function getNoteExcerpt( text, excerptLength = 10 ) {\n\tif ( ! text ) {\n\t\treturn '';\n\t}\n\n\t/*\n\t * translators: If your word count is based on single characters (e.g. East Asian characters),\n\t * enter 'characters_excluding_spaces' or 'characters_including_spaces'. Otherwise, enter 'words'.\n\t * Do not translate into your own language.\n\t */\n\tconst wordCountType = _x( 'words', 'Word count type. Do not translate!' );\n\n\tconst rawText = text.trim();\n\tlet trimmedExcerpt = '';\n\n\tif ( wordCountType === 'words' ) {\n\t\ttrimmedExcerpt = rawText.split( ' ', excerptLength ).join( ' ' );\n\t} else if ( wordCountType === 'characters_excluding_spaces' ) {\n\t\t/*\n\t\t * 1. Split the text at the character limit,\n\t\t * then join the substrings back into one string.\n\t\t * 2. Count the number of spaces in the text\n\t\t * by comparing the lengths of the string with and without spaces.\n\t\t * 3. Add the number to the length of the visible excerpt,\n\t\t * so that the spaces are excluded from the word count.\n\t\t */\n\t\tconst textWithSpaces = rawText.split( '', excerptLength ).join( '' );\n\n\t\tconst numberOfSpaces =\n\t\t\ttextWithSpaces.length - textWithSpaces.replaceAll( ' ', '' ).length;\n\n\t\ttrimmedExcerpt = rawText\n\t\t\t.split( '', excerptLength + numberOfSpaces )\n\t\t\t.join( '' );\n\t} else if ( wordCountType === 'characters_including_spaces' ) {\n\t\ttrimmedExcerpt = rawText.split( '', excerptLength ).join( '' );\n\t}\n\n\tconst isTrimmed = trimmedExcerpt !== rawText;\n\treturn isTrimmed ? trimmedExcerpt + '\u2026' : trimmedExcerpt;\n}\n\n/**\n * Calculate final top positions for all floating note threads in the\n * editor's content coordinate space. Adjusts positions to prevent overlapping\n * by pushing threads above the selected one upward and threads below it downward.\n *\n * @param {Object}                  params\n * @param {Array}                   params.threads        Ordered list of thread objects.\n * @param {string|number|undefined} params.selectedNoteId ID of the currently selected thread.\n * @param {Object<string,DOMRect>}  params.blockRects     Pre-read bounding rects keyed by thread ID.\n * @param {Object<string,number>}   params.heights        Rendered heights keyed by thread ID.\n * @param {number}                  params.scrollTop      Current scroll offset of the editor content.\n * @return {{ positions: Object<string,number> }} Computed top positions.\n */\nexport function calculateNotePositions( {\n\tthreads,\n\tselectedNoteId,\n\tblockRects,\n\theights,\n\tscrollTop = 0,\n} ) {\n\tconst offsets = {};\n\n\tconst anchorIndex = Math.max(\n\t\t0,\n\t\tthreads.findIndex( ( thread ) => thread.id === selectedNoteId )\n\t);\n\n\tconst anchorThread = threads[ anchorIndex ];\n\n\tif ( ! anchorThread || ! blockRects[ anchorThread.id ] ) {\n\t\treturn { positions: {} };\n\t}\n\n\tconst anchorRect = blockRects[ anchorThread.id ];\n\tconst anchorTop = anchorRect.top || 0;\n\tconst anchorHeight = heights[ anchorThread.id ] || 0;\n\n\toffsets[ anchorThread.id ] = THREAD_ALIGN_OFFSET;\n\n\t// Process threads after the anchor, offsetting overlapping threads downward.\n\tlet prevAdjustedTop = anchorTop + THREAD_ALIGN_OFFSET;\n\tlet prevHeight = anchorHeight;\n\n\tfor ( let i = anchorIndex + 1; i < threads.length; i++ ) {\n\t\tconst thread = threads[ i ];\n\t\tconst threadRect = blockRects[ thread.id ];\n\t\tif ( ! threadRect ) {\n\t\t\tcontinue;\n\t\t}\n\n\t\tconst threadTop = threadRect.top || 0;\n\t\tconst threadHeight = heights[ thread.id ] || 0;\n\n\t\tlet offset = THREAD_ALIGN_OFFSET;\n\n\t\tconst prevBottom = prevAdjustedTop + prevHeight;\n\t\tif ( threadTop < prevBottom + THREAD_GAP ) {\n\t\t\toffset = prevBottom - threadTop + OVERLAP_MARGIN;\n\t\t}\n\n\t\toffsets[ thread.id ] = offset;\n\n\t\tprevAdjustedTop = threadTop + offset;\n\t\tprevHeight = threadHeight;\n\t}\n\n\t// Process threads before the anchor, offsetting overlapping threads upward.\n\tlet belowAdjustedTop = anchorTop + THREAD_ALIGN_OFFSET;\n\n\tfor ( let i = anchorIndex - 1; i >= 0; i-- ) {\n\t\tconst thread = threads[ i ];\n\t\tconst threadRect = blockRects[ thread.id ];\n\t\tif ( ! threadRect ) {\n\t\t\tcontinue;\n\t\t}\n\n\t\tconst threadTop = threadRect.top || 0;\n\t\tconst threadHeight = heights[ thread.id ] || 0;\n\n\t\tlet offset = THREAD_ALIGN_OFFSET;\n\n\t\tconst threadBottom = threadTop + threadHeight;\n\n\t\tif ( threadBottom > belowAdjustedTop ) {\n\t\t\toffset =\n\t\t\t\tbelowAdjustedTop - threadTop - threadHeight - OVERLAP_MARGIN;\n\t\t}\n\n\t\toffsets[ thread.id ] = offset;\n\n\t\tbelowAdjustedTop = threadTop + offset;\n\t}\n\n\t// blockRect.top + scrollTop is the block's absolute y within the editor's\n\t// scroll content; CSS translates each thread by -scrollTop at render time.\n\tconst positions = {};\n\tfor ( const thread of threads ) {\n\t\tconst blockRect = blockRects[ thread.id ];\n\t\tif ( blockRect && offsets[ thread.id ] !== undefined ) {\n\t\t\tpositions[ thread.id ] =\n\t\t\t\tblockRect.top + scrollTop + offsets[ thread.id ];\n\t\t}\n\t}\n\n\treturn { positions };\n}\n\n/**\n * Shift focus to the note thread associated with a particular note ID.\n * If an additional selector is provided, the focus will be shifted to the element matching the selector.\n *\n * @typedef {import('@wordpress/element').RefObject} RefObject\n *\n * @param {string}       noteId             The ID of the note thread to focus.\n * @param {?HTMLElement} container          The container element to search within.\n * @param {string}       additionalSelector The additional selector to focus on.\n */\nexport function focusNoteThread( noteId, container, additionalSelector ) {\n\tif ( ! container ) {\n\t\treturn;\n\t}\n\n\t// A thread without a noteId is a new note thread.\n\tconst threadSelector =\n\t\tnoteId && noteId !== 'new'\n\t\t\t? `[role=treeitem][id=\"note-thread-${ noteId }\"]`\n\t\t\t: '[role=treeitem]:not([id])';\n\tconst selector = additionalSelector\n\t\t? `${ threadSelector } ${ additionalSelector }`\n\t\t: threadSelector;\n\n\treturn new Promise( ( resolve ) => {\n\t\tif ( container.querySelector( selector ) ) {\n\t\t\treturn resolve( container.querySelector( selector ) );\n\t\t}\n\n\t\tlet timer = null;\n\t\t// Wait for the element to be added to the DOM.\n\t\tconst observer = new window.MutationObserver( () => {\n\t\t\tif ( container.querySelector( selector ) ) {\n\t\t\t\tclearTimeout( timer );\n\t\t\t\tobserver.disconnect();\n\t\t\t\tresolve( container.querySelector( selector ) );\n\t\t\t}\n\t\t} );\n\n\t\tobserver.observe( container, {\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t} );\n\n\t\t// Stop trying after 3 seconds.\n\t\ttimer = setTimeout( () => {\n\t\t\tobserver.disconnect();\n\t\t\tresolve( null );\n\t\t}, 3000 );\n\t} ).then( ( element ) => element?.focus() );\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/collaborators-presence/avatar/component.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/collaborators-presence/avatar/component.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport { colord, extend } from 'colord';\nimport a11yPlugin from 'colord/plugins/a11y';\n\nextend( [ a11yPlugin ] );\n\n/**\n * WordPress dependencies\n */\nimport { Icon, Tooltip } from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { AvatarProps } from './types';\nimport { useImageLoadingStatus } from './use-image-loading-status';\n\n// Runtime equivalents of @wordpress/base-styles tokens ($gray-900, $white).\nconst GRAY_900 = '#1e1e1e';\nconst WHITE = '#fff';\n\nfunction Avatar( {\n\tclassName,\n\tsrc,\n\tname,\n\tlabel,\n\tvariant,\n\tsize = 'default',\n\tborderColor,\n\tdimmed = false,\n\tstatusIndicator,\n\tstyle,\n\t...props\n}: AvatarProps &\n\tOmit< React.HTMLAttributes< HTMLDivElement >, keyof AvatarProps > ) {\n\tconst {\n\t\tstatus: imageStatus,\n\t\thandleLoad,\n\t\thandleError,\n\t} = useImageLoadingStatus( src );\n\tconst imageLoaded = imageStatus === 'loaded';\n\n\tconst showBadge = variant === 'badge' && !! name;\n\tconst initials = name\n\t\t? name\n\t\t\t\t.split( /\\s+/ )\n\t\t\t\t.slice( 0, 2 )\n\t\t\t\t.map( ( word ) => word[ 0 ] )\n\t\t\t\t.join( '' )\n\t\t\t\t.toUpperCase()\n\t\t: undefined;\n\tconst nameColor = useMemo(\n\t\t() =>\n\t\t\tborderColor &&\n\t\t\tcolord( borderColor ).isReadable( GRAY_900, {\n\t\t\t\tlevel: 'AA',\n\t\t\t\tsize: 'normal',\n\t\t\t} )\n\t\t\t\t? GRAY_900\n\t\t\t\t: WHITE,\n\t\t[ borderColor ]\n\t);\n\n\tconst customProperties = {\n\t\t...style,\n\t\t...( borderColor\n\t\t\t? {\n\t\t\t\t\t'--editor-avatar-outline-color': borderColor,\n\t\t\t\t\t'--editor-avatar-name-color': nameColor,\n\t\t\t  }\n\t\t\t: {} ),\n\t} as React.CSSProperties;\n\n\tconst avatar = (\n\t\t<div\n\t\t\tclassName={ clsx( 'editor-avatar', className, {\n\t\t\t\t'has-avatar-border-color': !! borderColor,\n\t\t\t\t'has-src': imageLoaded,\n\t\t\t\t'is-badge': showBadge,\n\t\t\t\t'is-small': size === 'small',\n\t\t\t\t'is-dimmed': dimmed,\n\t\t\t} ) }\n\t\t\tstyle={ customProperties }\n\t\t\trole={ name ? 'img' : undefined }\n\t\t\taria-label={ name || undefined }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t<span className=\"editor-avatar__image\">\n\t\t\t\t{ src && (\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc={ src }\n\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\tcrossOrigin=\"anonymous\"\n\t\t\t\t\t\tclassName=\"editor-avatar__img\"\n\t\t\t\t\t\tonLoad={ handleLoad }\n\t\t\t\t\t\tonError={ handleError }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ ! imageLoaded && initials }\n\t\t\t</span>\n\t\t\t{ dimmed && !! statusIndicator && (\n\t\t\t\t<span className=\"editor-avatar__status-indicator\">\n\t\t\t\t\t<Icon icon={ statusIndicator } />\n\t\t\t\t</span>\n\t\t\t) }\n\t\t\t{ showBadge && (\n\t\t\t\t<span className=\"editor-avatar__name\">{ label || name }</span>\n\t\t\t) }\n\t\t</div>\n\t);\n\n\tif ( name && ( ! showBadge || label ) ) {\n\t\treturn <Tooltip text={ name }>{ avatar }</Tooltip>;\n\t}\n\n\treturn avatar;\n}\n\nexport default Avatar;\n"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport { colord, extend } from 'colord';\nimport a11yPlugin from 'colord/plugins/a11y';\n\nextend( [ a11yPlugin ] );\n\n/**\n * WordPress dependencies\n */\nimport { Icon, Tooltip } from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { AvatarProps } from './types';\nimport { useImageLoadingStatus } from './use-image-loading-status';\n\n// Runtime equivalents of @wordpress/base-styles tokens ($gray-900, $white).\nconst GRAY_900 = '#1e1e1e';\nconst WHITE = '#fff';\n\nfunction Avatar( {\n\tclassName,\n\tsrc,\n\tname,\n\tlabel,\n\tvariant,\n\tsize = 'default',\n\tborderColor,\n\tdimmed = false,\n\tstatusIndicator,\n\tstyle,\n\t...props\n}: AvatarProps &\n\tOmit< React.HTMLAttributes< HTMLDivElement >, keyof AvatarProps > ) {\n\tconst {\n\t\tstatus: imageStatus,\n\t\thandleLoad,\n\t\thandleError,\n\t} = useImageLoadingStatus( src );\n\tconst imageLoaded = imageStatus === 'loaded';\n\n\tconst showBadge = variant === 'badge' && !! name;\n\tconst initials = name\n\t\t? name\n\t\t\t\t.split( /\\s+/ )\n\t\t\t\t.slice( 0, 2 )\n\t\t\t\t.map( ( word ) => word[ 0 ] )\n\t\t\t\t.join( '' )\n\t\t\t\t.toUpperCase()\n\t\t: undefined;\n\tconst nameColor = useMemo(\n\t\t() =>\n\t\t\tborderColor &&\n\t\t\tcolord( borderColor ).isReadable( GRAY_900, {\n\t\t\t\tlevel: 'AA',\n\t\t\t\tsize: 'normal',\n\t\t\t} )\n\t\t\t\t? GRAY_900\n\t\t\t\t: WHITE,\n\t\t[ borderColor ]\n\t);\n\n\tconst customProperties = {\n\t\t...style,\n\t\t...( borderColor\n\t\t\t? {\n\t\t\t\t\t'--editor-avatar-outline-color': borderColor,\n\t\t\t\t\t'--editor-avatar-name-color': nameColor,\n\t\t\t  }\n\t\t\t: {} ),\n\t};\n\n\tconst avatar = (\n\t\t<div\n\t\t\tclassName={ clsx( 'editor-avatar', className, {\n\t\t\t\t'has-avatar-border-color': !! borderColor,\n\t\t\t\t'has-src': imageLoaded,\n\t\t\t\t'is-badge': showBadge,\n\t\t\t\t'is-small': size === 'small',\n\t\t\t\t'is-dimmed': dimmed,\n\t\t\t} ) }\n\t\t\tstyle={ customProperties }\n\t\t\trole={ name ? 'img' : undefined }\n\t\t\taria-label={ name || undefined }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t<span className=\"editor-avatar__image\">\n\t\t\t\t{ src && (\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc={ src }\n\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\tcrossOrigin=\"anonymous\"\n\t\t\t\t\t\tclassName=\"editor-avatar__img\"\n\t\t\t\t\t\tonLoad={ handleLoad }\n\t\t\t\t\t\tonError={ handleError }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ ! imageLoaded && initials }\n\t\t\t</span>\n\t\t\t{ dimmed && !! statusIndicator && (\n\t\t\t\t<span className=\"editor-avatar__status-indicator\">\n\t\t\t\t\t<Icon icon={ statusIndicator } />\n\t\t\t\t</span>\n\t\t\t) }\n\t\t\t{ showBadge && (\n\t\t\t\t<span className=\"editor-avatar__name\">{ label || name }</span>\n\t\t\t) }\n\t\t</div>\n\t);\n\n\tif ( name && ( ! showBadge || label ) ) {\n\t\treturn <Tooltip text={ name }>{ avatar }</Tooltip>;\n\t}\n\n\treturn avatar;\n}\n\nexport default Avatar;\n"],
   "mappings": ";AAGA,OAAO,UAAU;AACjB,SAAS,QAAQ,cAAc;AAC/B,OAAO,gBAAgB;AAOvB,SAAS,MAAM,eAAe;AAC9B,SAAS,eAAe;AAMxB,SAAS,6BAA6B;AAwEnC,SAEE,KAFF;AApFH,OAAQ,CAAE,UAAW,CAAE;AAevB,IAAM,WAAW;AACjB,IAAM,QAAQ;AAEd,SAAS,OAAQ;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GACqE;AACpE,QAAM;AAAA,IACL,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EACD,IAAI,sBAAuB,GAAI;AAC/B,QAAM,cAAc,gBAAgB;AAEpC,QAAM,YAAY,YAAY,WAAW,CAAC,CAAE;AAC5C,QAAM,WAAW,OACd,KACC,MAAO,KAAM,EACb,MAAO,GAAG,CAAE,EACZ,IAAK,CAAE,SAAU,KAAM,CAAE,CAAE,EAC3B,KAAM,EAAG,EACT,YAAY,IACb;AACH,QAAM,YAAY;AAAA,IACjB,MACC,eACA,OAAQ,WAAY,EAAE,WAAY,UAAU;AAAA,MAC3C,OAAO;AAAA,MACP,MAAM;AAAA,IACP,CAAE,IACC,WACA;AAAA,IACJ,CAAE,WAAY;AAAA,EACf;AAEA,QAAM,mBAAmB;AAAA,IACxB,GAAG;AAAA,IACH,GAAK,cACF;AAAA,MACA,iCAAiC;AAAA,MACjC,8BAA8B;AAAA,IAC9B,IACA,CAAC;AAAA,EACL;AAEA,QAAM,SACL;AAAA,IAAC;AAAA;AAAA,MACA,WAAY,KAAM,iBAAiB,WAAW;AAAA,QAC7C,2BAA2B,CAAC,CAAE;AAAA,QAC9B,WAAW;AAAA,QACX,YAAY;AAAA,QACZ,YAAY,SAAS;AAAA,QACrB,aAAa;AAAA,MACd,CAAE;AAAA,MACF,OAAQ;AAAA,MACR,MAAO,OAAO,QAAQ;AAAA,MACtB,cAAa,QAAQ;AAAA,MACnB,GAAG;AAAA,MAEL;AAAA,6BAAC,UAAK,WAAU,wBACb;AAAA,iBACD;AAAA,YAAC;AAAA;AAAA,cACA;AAAA,cACA,KAAI;AAAA,cACJ,aAAY;AAAA,cACZ,WAAU;AAAA,cACV,QAAS;AAAA,cACT,SAAU;AAAA;AAAA,UACX;AAAA,UAEC,CAAE,eAAe;AAAA,WACpB;AAAA,QACE,UAAU,CAAC,CAAE,mBACd,oBAAC,UAAK,WAAU,mCACf,8BAAC,QAAK,MAAO,iBAAkB,GAChC;AAAA,QAEC,aACD,oBAAC,UAAK,WAAU,uBAAwB,mBAAS,MAAM;AAAA;AAAA;AAAA,EAEzD;AAGD,MAAK,SAAU,CAAE,aAAa,QAAU;AACvC,WAAO,oBAAC,WAAQ,MAAO,MAAS,kBAAQ;AAAA,EACzC;AAEA,SAAO;AACR;AAEA,IAAO,oBAAQ;",
   "names": []
 }

package/build-module/components/collaborators-presence/index.mjs

@@ -14,10 +14,10 @@ import { getAvatarBorderColor } from "../collab-sidebar/utils.mjs";
 import { createCursorRegistry } from "../collaborators-overlay/cursor-registry.mjs";
 
 // packages/editor/src/components/collaborators-presence/styles/collaborators-presence.scss
-if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='5ffe927286']")) {
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='9907eeab15']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "5ffe927286");
-  style.appendChild(document.createTextNode(".editor-collaborators-presence{align-items:center;background:#f0f0f0;border-radius:4px;display:flex;flex-shrink:0;height:32px;margin-right:8px}.editor-collaborators-presence:has(.is-pressed),.editor-collaborators-presence:hover{background-color:#e0e0e0}.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button{align-items:center;background:#0000;border-radius:4px;box-sizing:border-box;color:#2f2f2f;cursor:pointer;display:flex;height:100%;padding:4px;position:relative}.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button.is-pressed,.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button.is-pressed:hover,.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button:hover{background:#0000;color:#2f2f2f}.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button:focus:not(:active){box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus,2px) var(--wp-admin-theme-color,#007cba);outline:none}"));
+  style.setAttribute("data-wp-hash", "9907eeab15");
+  style.appendChild(document.createTextNode(".editor-collaborators-presence{align-items:center;background:#f0f0f0;border-radius:4px;display:flex;flex-shrink:0;height:32px;margin-right:8px}.editor-collaborators-presence:has(.is-pressed),.editor-collaborators-presence:hover{background-color:#e0e0e0}.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button{align-items:center;background:#0000;border-radius:4px;box-sizing:border-box;color:#2f2f2f;cursor:var(--wpds-cursor-control,pointer);display:flex;height:100%;padding:4px;position:relative}.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button.is-pressed,.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button.is-pressed:hover,.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button:hover{background:#0000;color:#2f2f2f}.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button:focus:not(:active){box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus,2px) var(--wp-admin-theme-color,#007cba);outline:none}"));
   document.head.appendChild(style);
 }
 

package/build-module/components/collaborators-presence/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/collaborators-presence/index.tsx", "../../../src/components/collaborators-presence/styles/collaborators-presence.scss"],
-  "sourcesContent": ["import { Button } from '@wordpress/components';\nimport { useMemo, useState } from '@wordpress/element';\nimport {\n\tprivateApis,\n\ttype PostEditorAwarenessState,\n} from '@wordpress/core-data';\nimport { __, sprintf } from '@wordpress/i18n';\n\nimport Avatar from './avatar';\nimport AvatarGroup from './avatar-group';\nimport { CollaboratorsList } from './list';\nimport { unlock } from '../../lock-unlock';\nimport { getAvatarUrl } from '../collaborators-overlay/get-avatar-url';\nimport { getAvatarBorderColor } from '../collab-sidebar/utils';\nimport { createCursorRegistry } from '../collaborators-overlay/cursor-registry';\n\nimport './styles/collaborators-presence.scss';\nimport { CollaboratorsOverlay } from '../collaborators-overlay';\n\nconst { useActiveCollaborators } = unlock( privateApis );\n\ninterface CollaboratorsPresenceProps {\n\tpostId: number | null;\n\tpostType: string | null;\n}\n\n/**\n * Renders a list of avatars for the active collaborators, with a maximum of 3 visible avatars.\n * Shows a popover with all collaborators on hover.\n *\n * @param props          CollaboratorsPresence component props\n * @param props.postId   ID of the post\n * @param props.postType Type of the post\n */\nexport function CollaboratorsPresence( {\n\tpostId,\n\tpostType,\n}: CollaboratorsPresenceProps ) {\n\tconst activeCollaborators = useActiveCollaborators(\n\t\tpostId,\n\t\tpostType\n\t) as PostEditorAwarenessState[];\n\n\tconst otherActiveCollaborators = activeCollaborators.filter(\n\t\t( c ) => ! c.isMe\n\t);\n\n\t// Always include self in the list sorted first.\n\tconst collaboratorsForList = useMemo( () => {\n\t\treturn [ ...activeCollaborators ].sort( ( a, b ) => {\n\t\t\tif ( a.isMe && ! b.isMe ) {\n\t\t\t\treturn -1;\n\t\t\t}\n\t\t\tif ( ! a.isMe && b.isMe ) {\n\t\t\t\treturn 1;\n\t\t\t}\n\t\t\treturn 0;\n\t\t} );\n\t}, [ activeCollaborators ] );\n\n\tconst [ cursorRegistry ] = useState( createCursorRegistry );\n\n\tconst [ isPopoverVisible, setIsPopoverVisible ] = useState( false );\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState< HTMLElement | null >(\n\t\tnull\n\t);\n\n\t// When there are no other collaborators, this component should not render\n\t// at all. This will always be the case when collaboration is not enabled, but\n\t// also when the current user is the only editor with the post open.\n\tif ( otherActiveCollaborators.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst me = activeCollaborators.find( ( c ) => c.isMe );\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"editor-collaborators-presence\">\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tclassName=\"editor-collaborators-presence__button\"\n\t\t\t\t\tonClick={ () => setIsPopoverVisible( ! isPopoverVisible ) }\n\t\t\t\t\tisPressed={ isPopoverVisible }\n\t\t\t\t\tref={ setPopoverAnchor }\n\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t// translators: %d: number of online collaborators.\n\t\t\t\t\t\t__( 'Collaborators list, %d online' ),\n\t\t\t\t\t\tcollaboratorsForList.length\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t<AvatarGroup max={ 4 }>\n\t\t\t\t\t\t{ me && (\n\t\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\t\tkey={ me.clientId }\n\t\t\t\t\t\t\t\tsrc={ getAvatarUrl(\n\t\t\t\t\t\t\t\t\tme.collaboratorInfo.avatar_urls\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tname={ me.collaboratorInfo.name }\n\t\t\t\t\t\t\t\tborderColor=\"var(--wp-admin-theme-color)\"\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ otherActiveCollaborators.map(\n\t\t\t\t\t\t\t( collaboratorState ) => (\n\t\t\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\t\t\tkey={ collaboratorState.clientId }\n\t\t\t\t\t\t\t\t\tsrc={ getAvatarUrl(\n\t\t\t\t\t\t\t\t\t\tcollaboratorState.collaboratorInfo\n\t\t\t\t\t\t\t\t\t\t\t.avatar_urls\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tname={\n\t\t\t\t\t\t\t\t\t\tcollaboratorState.collaboratorInfo.name\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tborderColor={ getAvatarBorderColor(\n\t\t\t\t\t\t\t\t\t\tcollaboratorState.collaboratorInfo.id\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) }\n\t\t\t\t\t</AvatarGroup>\n\t\t\t\t</Button>\n\t\t\t\t{ isPopoverVisible && (\n\t\t\t\t\t<CollaboratorsList\n\t\t\t\t\t\tactiveCollaborators={ collaboratorsForList }\n\t\t\t\t\t\tpopoverAnchor={ popoverAnchor }\n\t\t\t\t\t\tsetIsPopoverVisible={ setIsPopoverVisible }\n\t\t\t\t\t\tcursorRegistry={ cursorRegistry }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t\t<CollaboratorsOverlay\n\t\t\t\tpostId={ postId }\n\t\t\t\tpostType={ postType }\n\t\t\t\tcursorRegistry={ cursorRegistry }\n\t\t\t/>\n\t\t</>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='5ffe927286']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"5ffe927286\");\n\tstyle.appendChild(document.createTextNode(\".editor-collaborators-presence{align-items:center;background:#f0f0f0;border-radius:4px;display:flex;flex-shrink:0;height:32px;margin-right:8px}.editor-collaborators-presence:has(.is-pressed),.editor-collaborators-presence:hover{background-color:#e0e0e0}.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button{align-items:center;background:#0000;border-radius:4px;box-sizing:border-box;color:#2f2f2f;cursor:pointer;display:flex;height:100%;padding:4px;position:relative}.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button.is-pressed,.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button.is-pressed:hover,.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button:hover{background:#0000;color:#2f2f2f}.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button:focus:not(:active){box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus,2px) var(--wp-admin-theme-color,#007cba);outline:none}\"));\n\tdocument.head.appendChild(style);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Button } from '@wordpress/components';\nimport { useMemo, useState } from '@wordpress/element';\nimport {\n\tprivateApis,\n\ttype PostEditorAwarenessState,\n} from '@wordpress/core-data';\nimport { __, sprintf } from '@wordpress/i18n';\n\nimport Avatar from './avatar';\nimport AvatarGroup from './avatar-group';\nimport { CollaboratorsList } from './list';\nimport { unlock } from '../../lock-unlock';\nimport { getAvatarUrl } from '../collaborators-overlay/get-avatar-url';\nimport { getAvatarBorderColor } from '../collab-sidebar/utils';\nimport { createCursorRegistry } from '../collaborators-overlay/cursor-registry';\n\nimport './styles/collaborators-presence.scss';\nimport { CollaboratorsOverlay } from '../collaborators-overlay';\n\nconst { useActiveCollaborators } = unlock( privateApis );\n\ninterface CollaboratorsPresenceProps {\n\tpostId: number | null;\n\tpostType: string | null;\n}\n\n/**\n * Renders a list of avatars for the active collaborators, with a maximum of 3 visible avatars.\n * Shows a popover with all collaborators on hover.\n *\n * @param props          CollaboratorsPresence component props\n * @param props.postId   ID of the post\n * @param props.postType Type of the post\n */\nexport function CollaboratorsPresence( {\n\tpostId,\n\tpostType,\n}: CollaboratorsPresenceProps ) {\n\tconst activeCollaborators = useActiveCollaborators(\n\t\tpostId,\n\t\tpostType\n\t) as PostEditorAwarenessState[];\n\n\tconst otherActiveCollaborators = activeCollaborators.filter(\n\t\t( c ) => ! c.isMe\n\t);\n\n\t// Always include self in the list sorted first.\n\tconst collaboratorsForList = useMemo( () => {\n\t\treturn [ ...activeCollaborators ].sort( ( a, b ) => {\n\t\t\tif ( a.isMe && ! b.isMe ) {\n\t\t\t\treturn -1;\n\t\t\t}\n\t\t\tif ( ! a.isMe && b.isMe ) {\n\t\t\t\treturn 1;\n\t\t\t}\n\t\t\treturn 0;\n\t\t} );\n\t}, [ activeCollaborators ] );\n\n\tconst [ cursorRegistry ] = useState( createCursorRegistry );\n\n\tconst [ isPopoverVisible, setIsPopoverVisible ] = useState( false );\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState< HTMLElement | null >(\n\t\tnull\n\t);\n\n\t// When there are no other collaborators, this component should not render\n\t// at all. This will always be the case when collaboration is not enabled, but\n\t// also when the current user is the only editor with the post open.\n\tif ( otherActiveCollaborators.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst me = activeCollaborators.find( ( c ) => c.isMe );\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"editor-collaborators-presence\">\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tclassName=\"editor-collaborators-presence__button\"\n\t\t\t\t\tonClick={ () => setIsPopoverVisible( ! isPopoverVisible ) }\n\t\t\t\t\tisPressed={ isPopoverVisible }\n\t\t\t\t\tref={ setPopoverAnchor }\n\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t// translators: %d: number of online collaborators.\n\t\t\t\t\t\t__( 'Collaborators list, %d online' ),\n\t\t\t\t\t\tcollaboratorsForList.length\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t<AvatarGroup max={ 4 }>\n\t\t\t\t\t\t{ me && (\n\t\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\t\tkey={ me.clientId }\n\t\t\t\t\t\t\t\tsrc={ getAvatarUrl(\n\t\t\t\t\t\t\t\t\tme.collaboratorInfo.avatar_urls\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tname={ me.collaboratorInfo.name }\n\t\t\t\t\t\t\t\tborderColor=\"var(--wp-admin-theme-color)\"\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ otherActiveCollaborators.map(\n\t\t\t\t\t\t\t( collaboratorState ) => (\n\t\t\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\t\t\tkey={ collaboratorState.clientId }\n\t\t\t\t\t\t\t\t\tsrc={ getAvatarUrl(\n\t\t\t\t\t\t\t\t\t\tcollaboratorState.collaboratorInfo\n\t\t\t\t\t\t\t\t\t\t\t.avatar_urls\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tname={\n\t\t\t\t\t\t\t\t\t\tcollaboratorState.collaboratorInfo.name\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tborderColor={ getAvatarBorderColor(\n\t\t\t\t\t\t\t\t\t\tcollaboratorState.collaboratorInfo.id\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) }\n\t\t\t\t\t</AvatarGroup>\n\t\t\t\t</Button>\n\t\t\t\t{ isPopoverVisible && (\n\t\t\t\t\t<CollaboratorsList\n\t\t\t\t\t\tactiveCollaborators={ collaboratorsForList }\n\t\t\t\t\t\tpopoverAnchor={ popoverAnchor }\n\t\t\t\t\t\tsetIsPopoverVisible={ setIsPopoverVisible }\n\t\t\t\t\t\tcursorRegistry={ cursorRegistry }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t\t<CollaboratorsOverlay\n\t\t\t\tpostId={ postId }\n\t\t\t\tpostType={ postType }\n\t\t\t\tcursorRegistry={ cursorRegistry }\n\t\t\t/>\n\t\t</>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='9907eeab15']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"9907eeab15\");\n\tstyle.appendChild(document.createTextNode(\".editor-collaborators-presence{align-items:center;background:#f0f0f0;border-radius:4px;display:flex;flex-shrink:0;height:32px;margin-right:8px}.editor-collaborators-presence:has(.is-pressed),.editor-collaborators-presence:hover{background-color:#e0e0e0}.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button{align-items:center;background:#0000;border-radius:4px;box-sizing:border-box;color:#2f2f2f;cursor:var(--wpds-cursor-control,pointer);display:flex;height:100%;padding:4px;position:relative}.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button.is-pressed,.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button.is-pressed:hover,.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button:hover{background:#0000;color:#2f2f2f}.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button:focus:not(:active){box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus,2px) var(--wp-admin-theme-color,#007cba);outline:none}\"));\n\tdocument.head.appendChild(style);\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/collaborators-presence/list.mjs

@@ -8,10 +8,10 @@ import { getAvatarUrl } from "../collaborators-overlay/get-avatar-url.mjs";
 import { getAvatarBorderColor } from "../collab-sidebar/utils.mjs";
 
 // packages/editor/src/components/collaborators-presence/styles/collaborators-list.scss
-if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='0f8400f482']")) {
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='b52a84ee9f']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "0f8400f482");
-  style.appendChild(document.createTextNode(".editor-collaborators-presence__list.components-popover .components-popover__content{background:#fff;border:1px solid #ddd;border-radius:8px;border-width:1px 0 0 1px;box-shadow:0 1px 2px #0000000d,0 2px 3px #0000000a,0 6px 6px #00000008,0 8px 8px #00000005}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-content{min-width:280px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header{align-items:center;display:flex;justify-content:space-between;padding:8px 16px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-title{display:flex;font-size:13px;font-weight:499;gap:4px;line-height:20px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-title span{color:#757575}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-action{padding:0}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-action button{color:#1e1e1e;height:32px;padding:0;width:32px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-items{display:flex;flex-direction:column;padding-bottom:16px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item{all:unset;align-items:center;box-sizing:border-box;cursor:pointer;display:flex;gap:8px;padding:12px 16px;transition:background-color .2s ease;width:100%}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:hover:not(:disabled){background-color:rgba(var(--wp-admin-theme-color--rgb),.04)}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:active:not(:disabled){background-color:rgba(var(--wp-admin-theme-color--rgb),.08)}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:focus-visible{outline:2px solid var(--wp-admin-theme-color,#3858e9);outline-offset:-2px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:disabled{cursor:default}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item-info{display:flex;flex:1;flex-direction:column;min-width:0}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item-name{color:#1e1e1e;font-size:13px;font-weight:499;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}"));
+  style.setAttribute("data-wp-hash", "b52a84ee9f");
+  style.appendChild(document.createTextNode(".editor-collaborators-presence__list.components-popover .components-popover__content{background:#fff;border:1px solid #ddd;border-radius:8px;border-width:1px 0 0 1px;box-shadow:0 1px 2px #0000000d,0 2px 3px #0000000a,0 6px 6px #00000008,0 8px 8px #00000005}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-content{min-width:280px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header{align-items:center;display:flex;justify-content:space-between;padding:8px 16px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-title{display:flex;font-size:13px;font-weight:499;gap:4px;line-height:20px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-title span{color:#757575}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-action{padding:0}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-action button{color:#1e1e1e;height:32px;padding:0;width:32px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-items{display:flex;flex-direction:column;padding-bottom:16px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item{all:unset;align-items:center;box-sizing:border-box;cursor:var(--wpds-cursor-control,pointer);display:flex;gap:8px;padding:12px 16px;transition:background-color .2s ease;width:100%}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:hover:not(:disabled){background-color:rgba(var(--wp-admin-theme-color--rgb),.04)}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:active:not(:disabled){background-color:rgba(var(--wp-admin-theme-color--rgb),.08)}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:focus-visible{outline:2px solid var(--wp-admin-theme-color,#3858e9);outline-offset:-2px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:disabled{cursor:default}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item-info{display:flex;flex:1;flex-direction:column;min-width:0}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item-name{color:#1e1e1e;font-size:13px;font-weight:499;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}"));
   document.head.appendChild(style);
 }
 

package/build-module/components/collaborators-presence/list.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/collaborators-presence/list.tsx", "../../../src/components/collaborators-presence/styles/collaborators-list.scss"],
-  "sourcesContent": ["import { __ } from '@wordpress/i18n';\nimport { Popover, Button } from '@wordpress/components';\nimport { closeSmall } from '@wordpress/icons';\nimport { type PostEditorAwarenessState } from '@wordpress/core-data';\nimport { speak } from '@wordpress/a11y';\n\nimport Avatar from './avatar';\nimport { getAvatarUrl } from '../collaborators-overlay/get-avatar-url';\nimport { getAvatarBorderColor } from '../collab-sidebar/utils';\nimport { type CursorRegistry } from '../collaborators-overlay/cursor-registry';\n\nimport './styles/collaborators-list.scss';\n\ninterface CollaboratorsListProps {\n\tactiveCollaborators: PostEditorAwarenessState[];\n\tpopoverAnchor?: HTMLElement | null;\n\tsetIsPopoverVisible: ( isVisible: boolean ) => void;\n\tcursorRegistry: CursorRegistry;\n}\n\n/**\n * Renders a list showing all active collaborators with their details.\n * When the showCollaborationCursor preference is enabled, the current user\n * is included and expected to be first in the list.\n * @param props                     Component props\n * @param props.activeCollaborators List of active collaborators\n * @param props.popoverAnchor       Anchor element for the popover\n * @param props.setIsPopoverVisible Callback to set the visibility of the popover\n * @param props.cursorRegistry      Shared registry for scroll-to-cursor support\n */\nexport function CollaboratorsList( {\n\tactiveCollaborators,\n\tpopoverAnchor,\n\tsetIsPopoverVisible,\n\tcursorRegistry,\n}: CollaboratorsListProps ) {\n\tconst handleCollaboratorClick = ( clientId: number ) => {\n\t\tconst success = cursorRegistry.scrollToCursor( clientId, {\n\t\t\tbehavior: 'smooth',\n\t\t\tblock: 'center',\n\t\t\thighlightDuration: 2000,\n\t\t} );\n\n\t\tif ( success ) {\n\t\t\tspeak( __( 'Scrolled to cursor' ), 'polite' );\n\n\t\t\tsetIsPopoverVisible( false );\n\t\t}\n\t};\n\n\treturn (\n\t\t<Popover\n\t\t\tanchor={ popoverAnchor }\n\t\t\tplacement=\"bottom\"\n\t\t\toffset={ 8 }\n\t\t\tclassName=\"editor-collaborators-presence__list\"\n\t\t\tonClose={ () => setIsPopoverVisible( false ) }\n\t\t>\n\t\t\t<div className=\"editor-collaborators-presence__list-content\">\n\t\t\t\t<div className=\"editor-collaborators-presence__list-header\">\n\t\t\t\t\t<div className=\"editor-collaborators-presence__list-header-title\">\n\t\t\t\t\t\t{ __( 'Collaborators' ) }\n\t\t\t\t\t\t<span>{ activeCollaborators.length }</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"editor-collaborators-presence__list-header-action\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\ticonSize={ 24 }\n\t\t\t\t\t\t\tlabel={ __( 'Close Collaborators List' ) }\n\t\t\t\t\t\t\tonClick={ () => setIsPopoverVisible( false ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"editor-collaborators-presence__list-items\">\n\t\t\t\t\t{ activeCollaborators.map( ( collaboratorState ) => {\n\t\t\t\t\t\tconst isCurrentUser = collaboratorState.isMe;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tkey={ collaboratorState.clientId }\n\t\t\t\t\t\t\t\tclassName=\"editor-collaborators-presence__list-item\"\n\t\t\t\t\t\t\t\tdisabled={ isCurrentUser }\n\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\thandleCollaboratorClick(\n\t\t\t\t\t\t\t\t\t\tcollaboratorState.clientId\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\t\t\tsrc={ getAvatarUrl(\n\t\t\t\t\t\t\t\t\t\tcollaboratorState.collaboratorInfo\n\t\t\t\t\t\t\t\t\t\t\t.avatar_urls\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tname={\n\t\t\t\t\t\t\t\t\t\tcollaboratorState.collaboratorInfo.name\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tborderColor={\n\t\t\t\t\t\t\t\t\t\tisCurrentUser\n\t\t\t\t\t\t\t\t\t\t\t? 'var(--wp-admin-theme-color)'\n\t\t\t\t\t\t\t\t\t\t\t: getAvatarBorderColor(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcollaboratorState\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t.collaboratorInfo.id\n\t\t\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tdimmed={ ! collaboratorState.isConnected }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<div className=\"editor-collaborators-presence__list-item-info\">\n\t\t\t\t\t\t\t\t\t<div className=\"editor-collaborators-presence__list-item-name\">\n\t\t\t\t\t\t\t\t\t\t{ isCurrentUser\n\t\t\t\t\t\t\t\t\t\t\t? __( 'You' )\n\t\t\t\t\t\t\t\t\t\t\t: collaboratorState.collaboratorInfo\n\t\t\t\t\t\t\t\t\t\t\t\t\t.name }\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Popover>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='0f8400f482']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"0f8400f482\");\n\tstyle.appendChild(document.createTextNode(\".editor-collaborators-presence__list.components-popover .components-popover__content{background:#fff;border:1px solid #ddd;border-radius:8px;border-width:1px 0 0 1px;box-shadow:0 1px 2px #0000000d,0 2px 3px #0000000a,0 6px 6px #00000008,0 8px 8px #00000005}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-content{min-width:280px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header{align-items:center;display:flex;justify-content:space-between;padding:8px 16px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-title{display:flex;font-size:13px;font-weight:499;gap:4px;line-height:20px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-title span{color:#757575}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-action{padding:0}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-action button{color:#1e1e1e;height:32px;padding:0;width:32px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-items{display:flex;flex-direction:column;padding-bottom:16px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item{all:unset;align-items:center;box-sizing:border-box;cursor:pointer;display:flex;gap:8px;padding:12px 16px;transition:background-color .2s ease;width:100%}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:hover:not(:disabled){background-color:rgba(var(--wp-admin-theme-color--rgb),.04)}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:active:not(:disabled){background-color:rgba(var(--wp-admin-theme-color--rgb),.08)}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:focus-visible{outline:2px solid var(--wp-admin-theme-color,#3858e9);outline-offset:-2px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:disabled{cursor:default}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item-info{display:flex;flex:1;flex-direction:column;min-width:0}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item-name{color:#1e1e1e;font-size:13px;font-weight:499;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\"));\n\tdocument.head.appendChild(style);\n}\n"],
-  "mappings": ";AAAA,SAAS,UAAU;AACnB,SAAS,SAAS,cAAc;AAChC,SAAS,kBAAkB;AAE3B,SAAS,aAAa;AAEtB,OAAO,YAAY;AACnB,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;;;ACRrC,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,yhFAAyhF,CAAC;AACpkF,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADuDK,SAEC,KAFD;AA9BE,SAAS,kBAAmB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA4B;AAC3B,QAAM,0BAA0B,CAAE,aAAsB;AACvD,UAAM,UAAU,eAAe,eAAgB,UAAU;AAAA,MACxD,UAAU;AAAA,MACV,OAAO;AAAA,MACP,mBAAmB;AAAA,IACpB,CAAE;AAEF,QAAK,SAAU;AACd,YAAO,GAAI,oBAAqB,GAAG,QAAS;AAE5C,0BAAqB,KAAM;AAAA,IAC5B;AAAA,EACD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,QAAS;AAAA,MACT,WAAU;AAAA,MACV,QAAS;AAAA,MACT,WAAU;AAAA,MACV,SAAU,MAAM,oBAAqB,KAAM;AAAA,MAE3C,+BAAC,SAAI,WAAU,+CACd;AAAA,6BAAC,SAAI,WAAU,8CACd;AAAA,+BAAC,SAAI,WAAU,oDACZ;AAAA,eAAI,eAAgB;AAAA,YACtB,oBAAC,UAAO,8BAAoB,QAAQ;AAAA,aACrC;AAAA,UACA,oBAAC,SAAI,WAAU,qDACd;AAAA,YAAC;AAAA;AAAA,cACA,uBAAqB;AAAA,cACrB,MAAO;AAAA,cACP,UAAW;AAAA,cACX,OAAQ,GAAI,0BAA2B;AAAA,cACvC,SAAU,MAAM,oBAAqB,KAAM;AAAA;AAAA,UAC5C,GACD;AAAA,WACD;AAAA,QACA,oBAAC,SAAI,WAAU,6CACZ,8BAAoB,IAAK,CAAE,sBAAuB;AACnD,gBAAM,gBAAgB,kBAAkB;AACxC,iBACC;AAAA,YAAC;AAAA;AAAA,cAEA,WAAU;AAAA,cACV,UAAW;AAAA,cACX,SAAU,MACT;AAAA,gBACC,kBAAkB;AAAA,cACnB;AAAA,cAGD;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACA,KAAM;AAAA,sBACL,kBAAkB,iBAChB;AAAA,oBACH;AAAA,oBACA,MACC,kBAAkB,iBAAiB;AAAA,oBAEpC,aACC,gBACG,gCACA;AAAA,sBACA,kBACE,iBAAiB;AAAA,oBACnB;AAAA,oBAEJ,QAAS,CAAE,kBAAkB;AAAA;AAAA,gBAC9B;AAAA,gBACA,oBAAC,SAAI,WAAU,iDACd,8BAAC,SAAI,WAAU,iDACZ,0BACC,GAAI,KAAM,IACV,kBAAkB,iBACjB,MACL,GACD;AAAA;AAAA;AAAA,YAlCM,kBAAkB;AAAA,UAmCzB;AAAA,QAEF,CAAE,GACH;AAAA,SACD;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["import { __ } from '@wordpress/i18n';\nimport { Popover, Button } from '@wordpress/components';\nimport { closeSmall } from '@wordpress/icons';\nimport { type PostEditorAwarenessState } from '@wordpress/core-data';\nimport { speak } from '@wordpress/a11y';\n\nimport Avatar from './avatar';\nimport { getAvatarUrl } from '../collaborators-overlay/get-avatar-url';\nimport { getAvatarBorderColor } from '../collab-sidebar/utils';\nimport { type CursorRegistry } from '../collaborators-overlay/cursor-registry';\n\nimport './styles/collaborators-list.scss';\n\ninterface CollaboratorsListProps {\n\tactiveCollaborators: PostEditorAwarenessState[];\n\tpopoverAnchor?: HTMLElement | null;\n\tsetIsPopoverVisible: ( isVisible: boolean ) => void;\n\tcursorRegistry: CursorRegistry;\n}\n\n/**\n * Renders a list showing all active collaborators with their details.\n * When the showCollaborationCursor preference is enabled, the current user\n * is included and expected to be first in the list.\n * @param props                     Component props\n * @param props.activeCollaborators List of active collaborators\n * @param props.popoverAnchor       Anchor element for the popover\n * @param props.setIsPopoverVisible Callback to set the visibility of the popover\n * @param props.cursorRegistry      Shared registry for scroll-to-cursor support\n */\nexport function CollaboratorsList( {\n\tactiveCollaborators,\n\tpopoverAnchor,\n\tsetIsPopoverVisible,\n\tcursorRegistry,\n}: CollaboratorsListProps ) {\n\tconst handleCollaboratorClick = ( clientId: number ) => {\n\t\tconst success = cursorRegistry.scrollToCursor( clientId, {\n\t\t\tbehavior: 'smooth',\n\t\t\tblock: 'center',\n\t\t\thighlightDuration: 2000,\n\t\t} );\n\n\t\tif ( success ) {\n\t\t\tspeak( __( 'Scrolled to cursor' ), 'polite' );\n\n\t\t\tsetIsPopoverVisible( false );\n\t\t}\n\t};\n\n\treturn (\n\t\t<Popover\n\t\t\tanchor={ popoverAnchor }\n\t\t\tplacement=\"bottom\"\n\t\t\toffset={ 8 }\n\t\t\tclassName=\"editor-collaborators-presence__list\"\n\t\t\tonClose={ () => setIsPopoverVisible( false ) }\n\t\t>\n\t\t\t<div className=\"editor-collaborators-presence__list-content\">\n\t\t\t\t<div className=\"editor-collaborators-presence__list-header\">\n\t\t\t\t\t<div className=\"editor-collaborators-presence__list-header-title\">\n\t\t\t\t\t\t{ __( 'Collaborators' ) }\n\t\t\t\t\t\t<span>{ activeCollaborators.length }</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"editor-collaborators-presence__list-header-action\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\ticonSize={ 24 }\n\t\t\t\t\t\t\tlabel={ __( 'Close Collaborators List' ) }\n\t\t\t\t\t\t\tonClick={ () => setIsPopoverVisible( false ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"editor-collaborators-presence__list-items\">\n\t\t\t\t\t{ activeCollaborators.map( ( collaboratorState ) => {\n\t\t\t\t\t\tconst isCurrentUser = collaboratorState.isMe;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tkey={ collaboratorState.clientId }\n\t\t\t\t\t\t\t\tclassName=\"editor-collaborators-presence__list-item\"\n\t\t\t\t\t\t\t\tdisabled={ isCurrentUser }\n\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\thandleCollaboratorClick(\n\t\t\t\t\t\t\t\t\t\tcollaboratorState.clientId\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\t\t\tsrc={ getAvatarUrl(\n\t\t\t\t\t\t\t\t\t\tcollaboratorState.collaboratorInfo\n\t\t\t\t\t\t\t\t\t\t\t.avatar_urls\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tname={\n\t\t\t\t\t\t\t\t\t\tcollaboratorState.collaboratorInfo.name\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tborderColor={\n\t\t\t\t\t\t\t\t\t\tisCurrentUser\n\t\t\t\t\t\t\t\t\t\t\t? 'var(--wp-admin-theme-color)'\n\t\t\t\t\t\t\t\t\t\t\t: getAvatarBorderColor(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcollaboratorState\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t.collaboratorInfo.id\n\t\t\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tdimmed={ ! collaboratorState.isConnected }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<div className=\"editor-collaborators-presence__list-item-info\">\n\t\t\t\t\t\t\t\t\t<div className=\"editor-collaborators-presence__list-item-name\">\n\t\t\t\t\t\t\t\t\t\t{ isCurrentUser\n\t\t\t\t\t\t\t\t\t\t\t? __( 'You' )\n\t\t\t\t\t\t\t\t\t\t\t: collaboratorState.collaboratorInfo\n\t\t\t\t\t\t\t\t\t\t\t\t\t.name }\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Popover>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='b52a84ee9f']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"b52a84ee9f\");\n\tstyle.appendChild(document.createTextNode(\".editor-collaborators-presence__list.components-popover .components-popover__content{background:#fff;border:1px solid #ddd;border-radius:8px;border-width:1px 0 0 1px;box-shadow:0 1px 2px #0000000d,0 2px 3px #0000000a,0 6px 6px #00000008,0 8px 8px #00000005}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-content{min-width:280px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header{align-items:center;display:flex;justify-content:space-between;padding:8px 16px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-title{display:flex;font-size:13px;font-weight:499;gap:4px;line-height:20px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-title span{color:#757575}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-action{padding:0}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-action button{color:#1e1e1e;height:32px;padding:0;width:32px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-items{display:flex;flex-direction:column;padding-bottom:16px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item{all:unset;align-items:center;box-sizing:border-box;cursor:var(--wpds-cursor-control,pointer);display:flex;gap:8px;padding:12px 16px;transition:background-color .2s ease;width:100%}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:hover:not(:disabled){background-color:rgba(var(--wp-admin-theme-color--rgb),.04)}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:active:not(:disabled){background-color:rgba(var(--wp-admin-theme-color--rgb),.08)}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:focus-visible{outline:2px solid var(--wp-admin-theme-color,#3858e9);outline-offset:-2px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:disabled{cursor:default}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item-info{display:flex;flex:1;flex-direction:column;min-width:0}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item-name{color:#1e1e1e;font-size:13px;font-weight:499;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\"));\n\tdocument.head.appendChild(style);\n}\n"],
+  "mappings": ";AAAA,SAAS,UAAU;AACnB,SAAS,SAAS,cAAc;AAChC,SAAS,kBAAkB;AAE3B,SAAS,aAAa;AAEtB,OAAO,YAAY;AACnB,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;;;ACRrC,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,ojFAAojF,CAAC;AAC/lF,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADuDK,SAEC,KAFD;AA9BE,SAAS,kBAAmB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA4B;AAC3B,QAAM,0BAA0B,CAAE,aAAsB;AACvD,UAAM,UAAU,eAAe,eAAgB,UAAU;AAAA,MACxD,UAAU;AAAA,MACV,OAAO;AAAA,MACP,mBAAmB;AAAA,IACpB,CAAE;AAEF,QAAK,SAAU;AACd,YAAO,GAAI,oBAAqB,GAAG,QAAS;AAE5C,0BAAqB,KAAM;AAAA,IAC5B;AAAA,EACD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,QAAS;AAAA,MACT,WAAU;AAAA,MACV,QAAS;AAAA,MACT,WAAU;AAAA,MACV,SAAU,MAAM,oBAAqB,KAAM;AAAA,MAE3C,+BAAC,SAAI,WAAU,+CACd;AAAA,6BAAC,SAAI,WAAU,8CACd;AAAA,+BAAC,SAAI,WAAU,oDACZ;AAAA,eAAI,eAAgB;AAAA,YACtB,oBAAC,UAAO,8BAAoB,QAAQ;AAAA,aACrC;AAAA,UACA,oBAAC,SAAI,WAAU,qDACd;AAAA,YAAC;AAAA;AAAA,cACA,uBAAqB;AAAA,cACrB,MAAO;AAAA,cACP,UAAW;AAAA,cACX,OAAQ,GAAI,0BAA2B;AAAA,cACvC,SAAU,MAAM,oBAAqB,KAAM;AAAA;AAAA,UAC5C,GACD;AAAA,WACD;AAAA,QACA,oBAAC,SAAI,WAAU,6CACZ,8BAAoB,IAAK,CAAE,sBAAuB;AACnD,gBAAM,gBAAgB,kBAAkB;AACxC,iBACC;AAAA,YAAC;AAAA;AAAA,cAEA,WAAU;AAAA,cACV,UAAW;AAAA,cACX,SAAU,MACT;AAAA,gBACC,kBAAkB;AAAA,cACnB;AAAA,cAGD;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACA,KAAM;AAAA,sBACL,kBAAkB,iBAChB;AAAA,oBACH;AAAA,oBACA,MACC,kBAAkB,iBAAiB;AAAA,oBAEpC,aACC,gBACG,gCACA;AAAA,sBACA,kBACE,iBAAiB;AAAA,oBACnB;AAAA,oBAEJ,QAAS,CAAE,kBAAkB;AAAA;AAAA,gBAC9B;AAAA,gBACA,oBAAC,SAAI,WAAU,iDACd,8BAAC,SAAI,WAAU,iDACZ,0BACC,GAAI,KAAM,IACV,kBAAkB,iBACjB,MACL,GACD;AAAA;AAAA;AAAA,YAlCM,kBAAkB;AAAA,UAmCzB;AAAA,QAEF,CAAE,GACH;AAAA,SACD;AAAA;AAAA,EACD;AAEF;",
   "names": []
 }

package/build-module/components/document-bar/index.mjs

@@ -4,7 +4,7 @@ import { __, isRTL } from "@wordpress/i18n";
 import { useSelect, useDispatch } from "@wordpress/data";
 import {
   Button,
-  __experimentalText as Text,
+  __experimentalText as WCText,
   __unstableMotion as motion,
   __unstableAnimatePresence as AnimatePresence
 } from "@wordpress/components";
@@ -141,7 +141,7 @@ function DocumentBar(props) {
             className: "editor-document-bar__icon-layout"
           }
         ),
-        isNotFound ? /* @__PURE__ */ jsx(Text, { children: __("Document not found") }) : /* @__PURE__ */ jsxs(
+        isNotFound ? /* @__PURE__ */ jsx(WCText, { children: __("Document not found") }) : /* @__PURE__ */ jsxs(
           Button,
           {
             className: "editor-document-bar__command",
@@ -163,7 +163,7 @@ function DocumentBar(props) {
                   transition: isReducedMotion ? { duration: 0 } : void 0,
                   children: [
                     icon && /* @__PURE__ */ jsx(BlockIcon, { icon }),
-                    /* @__PURE__ */ jsxs(Text, { size: "body", as: "h1", children: [
+                    /* @__PURE__ */ jsxs(WCText, { size: "body", as: "h1", children: [
                       /* @__PURE__ */ jsx("span", { className: "editor-document-bar__post-title", children: title ? stripHTML(title) : __("No title") }),
                       unlockedPatternInfo && /* @__PURE__ */ jsx("span", { className: "editor-document-bar__post-type-label", children: unlockedPatternInfo.type === "template-part" ? `\xB7 ${__("Template Part")}` : `\xB7 ${__("Pattern")}` }),
                       !unlockedPatternInfo && pageTypeBadge && /* @__PURE__ */ jsx("span", { className: "editor-document-bar__post-type-label", children: `\xB7 ${pageTypeBadge}` }),