@wordpress/editor 14.44.0 → 14.45.0

package/build/components/collab-sidebar/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/collab-sidebar/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { __experimentalVStack as VStack } from '@wordpress/components';\nimport { useRef } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { useShortcut } from '@wordpress/keyboard-shortcuts';\nimport { comment as commentIcon } from '@wordpress/icons';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { store as interfaceStore } from '@wordpress/interface';\nimport { store as preferencesStore } from '@wordpress/preferences';\n\n/**\n * Internal dependencies\n */\nimport PluginSidebar from '../plugin-sidebar';\nimport {\n\tALL_NOTES_SIDEBAR,\n\tFLOATING_NOTES_SIDEBAR,\n\tSIDEBARS,\n} from './constants';\nimport { Comments } from './comments';\nimport { store as editorStore } from '../../store';\nimport AddCommentMenuItem from './comment-menu-item';\nimport CommentAvatarIndicator from './comment-indicator-toolbar';\nimport { useGlobalStylesContext } from '../global-styles-provider';\nimport {\n\tuseBlockComments,\n\tuseBlockCommentsActions,\n\tuseEnableFloatingSidebar,\n} from './hooks';\nimport PostTypeSupportCheck from '../post-type-support-check';\nimport { unlock } from '../../lock-unlock';\n\nfunction NotesSidebarContent( {\n\tstyles,\n\tcomments,\n\tcommentSidebarRef,\n\treflowComments,\n\tcommentLastUpdated,\n\tisFloating = false,\n} ) {\n\tconst { onCreate, onEdit, onDelete } =\n\t\tuseBlockCommentsActions( reflowComments );\n\n\treturn (\n\t\t<VStack\n\t\t\tclassName=\"editor-collab-sidebar-panel\"\n\t\t\tstyle={ styles }\n\t\t\trole=\"tree\"\n\t\t\tspacing=\"3\"\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\t// eslint-disable-next-line react-compiler/react-compiler\n\t\t\t\t\tcommentSidebarRef.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<Comments\n\t\t\t\tthreads={ comments }\n\t\t\t\tonEditComment={ onEdit }\n\t\t\t\tonAddReply={ onCreate }\n\t\t\t\tonCommentDelete={ onDelete }\n\t\t\t\tcommentSidebarRef={ commentSidebarRef }\n\t\t\t\treflowComments={ reflowComments }\n\t\t\t\tcommentLastUpdated={ commentLastUpdated }\n\t\t\t\tisFloating={ isFloating }\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n\nfunction NotesSidebar( { postId } ) {\n\tconst { getActiveComplementaryArea } = useSelect( interfaceStore );\n\tconst { enableComplementaryArea } = useDispatch( interfaceStore );\n\tconst { toggleBlockSpotlight, selectBlock } = unlock(\n\t\tuseDispatch( blockEditorStore )\n\t);\n\tconst { selectNote } = unlock( useDispatch( editorStore ) );\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\tconst commentSidebarRef = useRef( null );\n\n\tconst { clientId, blockCommentId, isClassicBlock } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlockAttributes,\n\t\t\t\tgetSelectedBlockClientId,\n\t\t\t\tgetBlockName,\n\t\t\t} = select( blockEditorStore );\n\t\t\tconst _clientId = getSelectedBlockClientId();\n\t\t\treturn {\n\t\t\t\tclientId: _clientId,\n\t\t\t\tblockCommentId: _clientId\n\t\t\t\t\t? getBlockAttributes( _clientId )?.metadata?.noteId\n\t\t\t\t\t: null,\n\t\t\t\tisClassicBlock: _clientId\n\t\t\t\t\t? getBlockName( _clientId ) === 'core/freeform'\n\t\t\t\t\t: false,\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\tconst { isDistractionFree } = useSelect( ( select ) => {\n\t\tconst { get } = select( preferencesStore );\n\t\treturn {\n\t\t\tisDistractionFree: get( 'core', 'distractionFree' ),\n\t\t};\n\t}, [] );\n\tconst selectedNote = useSelect(\n\t\t( select ) => unlock( select( editorStore ) ).getSelectedNote(),\n\t\t[]\n\t);\n\n\tconst {\n\t\tresultComments,\n\t\tunresolvedSortedThreads,\n\t\treflowComments,\n\t\tcommentLastUpdated,\n\t} = useBlockComments( postId );\n\n\t// Only enable the floating sidebar for large viewports.\n\tconst showFloatingSidebar = isLargeViewport;\n\t// Fallback to \"All notes\" sidebar on smaller viewports.\n\tconst showAllNotesSidebar =\n\t\tresultComments.length > 0 || ! showFloatingSidebar;\n\tuseEnableFloatingSidebar(\n\t\tshowFloatingSidebar &&\n\t\t\t( unresolvedSortedThreads.length > 0 || selectedNote !== undefined )\n\t);\n\n\tuseShortcut(\n\t\t'core/editor/new-note',\n\t\t( event ) => {\n\t\t\tevent.preventDefault();\n\t\t\topenTheSidebar();\n\t\t},\n\t\t{\n\t\t\t// When multiple notes per block are supported. Remove note ID check.\n\t\t\t// See: https://github.com/WordPress/gutenberg/pull/75147.\n\t\t\tisDisabled:\n\t\t\t\tisDistractionFree ||\n\t\t\t\tisClassicBlock ||\n\t\t\t\t! clientId ||\n\t\t\t\t!! blockCommentId,\n\t\t}\n\t);\n\n\t// Get the global styles to set the background color of the sidebar.\n\tconst { merged: GlobalStyles } = useGlobalStylesContext();\n\tconst backgroundColor = GlobalStyles?.styles?.color?.background;\n\n\t// Find the current thread for the selected block.\n\tconst currentThread = blockCommentId\n\t\t? resultComments.find( ( thread ) => thread.id === blockCommentId )\n\t\t: null;\n\n\tasync function openTheSidebar( selectedClientId ) {\n\t\tconst prevArea = await getActiveComplementaryArea( 'core' );\n\t\tconst activeNotesArea = SIDEBARS.find( ( name ) => name === prevArea );\n\t\tconst targetClientId =\n\t\t\tselectedClientId && selectedClientId !== clientId\n\t\t\t\t? selectedClientId\n\t\t\t\t: clientId;\n\t\tconst targetNote = resultComments.find(\n\t\t\t( note ) => note.blockClientId === targetClientId\n\t\t);\n\n\t\tif ( targetNote?.status === 'approved' ) {\n\t\t\tenableComplementaryArea( 'core', ALL_NOTES_SIDEBAR );\n\t\t} else if ( ! activeNotesArea || ! showAllNotesSidebar ) {\n\t\t\tenableComplementaryArea(\n\t\t\t\t'core',\n\t\t\t\tshowFloatingSidebar ? FLOATING_NOTES_SIDEBAR : ALL_NOTES_SIDEBAR\n\t\t\t);\n\t\t}\n\n\t\tconst currentArea = await getActiveComplementaryArea( 'core' );\n\t\t// Bail out if the current active area is not one of note sidebars.\n\t\tif ( ! SIDEBARS.includes( currentArea ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// A special case for the List View, where block selection isn't required to trigger an action.\n\t\t// The action won't do anything if the block is already selected.\n\t\tselectBlock( targetClientId, null );\n\t\ttoggleBlockSpotlight( targetClientId, true );\n\t\tselectNote( targetNote ? targetNote.id : 'new', { focus: true } );\n\t}\n\n\tif ( isDistractionFree ) {\n\t\treturn <AddCommentMenuItem isDistractionFree />;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ !! currentThread && (\n\t\t\t\t<CommentAvatarIndicator\n\t\t\t\t\tthread={ currentThread }\n\t\t\t\t\tonClick={ openTheSidebar }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<AddCommentMenuItem onClick={ openTheSidebar } />\n\t\t\t{ showAllNotesSidebar && (\n\t\t\t\t<PluginSidebar\n\t\t\t\t\tidentifier={ ALL_NOTES_SIDEBAR }\n\t\t\t\t\tname={ ALL_NOTES_SIDEBAR }\n\t\t\t\t\ttitle={ __( 'All notes' ) }\n\t\t\t\t\theader={\n\t\t\t\t\t\t<h2 className=\"interface-complementary-area-header__title\">\n\t\t\t\t\t\t\t{ __( 'All notes' ) }\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t}\n\t\t\t\t\ticon={ commentIcon }\n\t\t\t\t\tcloseLabel={ __( 'Close Notes' ) }\n\t\t\t\t>\n\t\t\t\t\t<NotesSidebarContent\n\t\t\t\t\t\tcomments={ resultComments }\n\t\t\t\t\t\tcommentSidebarRef={ commentSidebarRef }\n\t\t\t\t\t/>\n\t\t\t\t</PluginSidebar>\n\t\t\t) }\n\t\t\t{ isLargeViewport && (\n\t\t\t\t<PluginSidebar\n\t\t\t\t\tisPinnable={ false }\n\t\t\t\t\theader={ false }\n\t\t\t\t\tidentifier={ FLOATING_NOTES_SIDEBAR }\n\t\t\t\t\tclassName=\"editor-collab-sidebar\"\n\t\t\t\t\theaderClassName=\"editor-collab-sidebar__header\"\n\t\t\t\t\tbackgroundColor={ backgroundColor }\n\t\t\t\t>\n\t\t\t\t\t<NotesSidebarContent\n\t\t\t\t\t\tcomments={ unresolvedSortedThreads }\n\t\t\t\t\t\tcommentSidebarRef={ commentSidebarRef }\n\t\t\t\t\t\treflowComments={ reflowComments }\n\t\t\t\t\t\tcommentLastUpdated={ commentLastUpdated }\n\t\t\t\t\t\tstyles={ {\n\t\t\t\t\t\t\tbackgroundColor,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisFloating\n\t\t\t\t\t/>\n\t\t\t\t</PluginSidebar>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default function NotesSidebarContainer() {\n\tconst { postId, editorMode, revisionsMode } = useSelect( ( select ) => {\n\t\tconst { getCurrentPostId, getEditorMode, isRevisionsMode } = unlock(\n\t\t\tselect( editorStore )\n\t\t);\n\t\treturn {\n\t\t\tpostId: getCurrentPostId(),\n\t\t\teditorMode: getEditorMode(),\n\t\t\trevisionsMode: isRevisionsMode(),\n\t\t};\n\t}, [] );\n\n\tif ( ! postId || typeof postId !== 'number' ) {\n\t\treturn null;\n\t}\n\n\t// Hide Notes sidebar for Code Editor and in-editor revision mode.\n\tif ( editorMode === 'text' || revisionsMode ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<PostTypeSupportCheck supportKeys=\"editor.notes\">\n\t\t\t<NotesSidebar postId={ postId } />\n\t\t</PostTypeSupportCheck>\n\t);\n}\n"],
-  "mappings": "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",
-  "names": ["VStack", "interfaceStore", "blockEditorStore", "editorStore", "preferencesStore", "AddCommentMenuItem", "CommentAvatarIndicator", "PluginSidebar", "commentIcon", "PostTypeSupportCheck"]
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useRef } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { useShortcut } from '@wordpress/keyboard-shortcuts';\nimport { comment as commentIcon } from '@wordpress/icons';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { store as interfaceStore } from '@wordpress/interface';\nimport { store as preferencesStore } from '@wordpress/preferences';\n\n/**\n * Internal dependencies\n */\nimport PluginSidebar from '../plugin-sidebar';\nimport {\n\tALL_NOTES_SIDEBAR,\n\tFLOATING_NOTES_SIDEBAR,\n\tSIDEBARS,\n} from './constants';\nimport { Notes } from './notes';\nimport { store as editorStore } from '../../store';\nimport { AddNoteMenuItem } from './add-note-menu-item';\nimport { NoteAvatarIndicator } from './note-indicator-toolbar';\nimport { useGlobalStylesContext } from '../global-styles-provider';\nimport { useNoteThreads, useEnableFloatingSidebar } from './hooks';\nimport PostTypeSupportCheck from '../post-type-support-check';\nimport { unlock } from '../../lock-unlock';\n\nfunction NotesSidebar( { postId } ) {\n\tconst { getActiveComplementaryArea } = useSelect( interfaceStore );\n\tconst { enableComplementaryArea } = useDispatch( interfaceStore );\n\tconst { toggleBlockSpotlight, selectBlock } = unlock(\n\t\tuseDispatch( blockEditorStore )\n\t);\n\tconst { selectNote } = unlock( useDispatch( editorStore ) );\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\tconst sidebarRef = useRef( null );\n\n\tconst { clientId, noteId, isClassicBlock } = useSelect( ( select ) => {\n\t\tconst { getBlockAttributes, getSelectedBlockClientId, getBlockName } =\n\t\t\tselect( blockEditorStore );\n\t\tconst _clientId = getSelectedBlockClientId();\n\t\treturn {\n\t\t\tclientId: _clientId,\n\t\t\tnoteId: _clientId\n\t\t\t\t? getBlockAttributes( _clientId )?.metadata?.noteId\n\t\t\t\t: null,\n\t\t\tisClassicBlock: _clientId\n\t\t\t\t? getBlockName( _clientId ) === 'core/freeform'\n\t\t\t\t: false,\n\t\t};\n\t}, [] );\n\tconst { isDistractionFree } = useSelect( ( select ) => {\n\t\tconst { get } = select( preferencesStore );\n\t\treturn {\n\t\t\tisDistractionFree: get( 'core', 'distractionFree' ),\n\t\t};\n\t}, [] );\n\tconst selectedNote = useSelect(\n\t\t( select ) => unlock( select( editorStore ) ).getSelectedNote(),\n\t\t[]\n\t);\n\n\tconst { notes, unresolvedNotes } = useNoteThreads( postId );\n\n\t// Only enable the floating sidebar for large viewports.\n\tconst showFloatingSidebar = isLargeViewport;\n\t// Fallback to \"All notes\" sidebar on smaller viewports.\n\tconst showAllNotesSidebar = notes.length > 0 || ! showFloatingSidebar;\n\tuseEnableFloatingSidebar(\n\t\tshowFloatingSidebar &&\n\t\t\t( unresolvedNotes.length > 0 || selectedNote !== undefined )\n\t);\n\n\tuseShortcut(\n\t\t'core/editor/new-note',\n\t\t( event ) => {\n\t\t\tevent.preventDefault();\n\t\t\topenTheSidebar();\n\t\t},\n\t\t{\n\t\t\t// When multiple notes per block are supported. Remove note ID check.\n\t\t\t// See: https://github.com/WordPress/gutenberg/pull/75147.\n\t\t\tisDisabled:\n\t\t\t\tisDistractionFree || isClassicBlock || ! clientId || !! noteId,\n\t\t}\n\t);\n\n\t// Get the global styles to set the background color of the sidebar.\n\tconst { merged: GlobalStyles } = useGlobalStylesContext();\n\tconst backgroundColor = GlobalStyles?.styles?.color?.background;\n\n\t// Find the current thread for the selected block.\n\tconst currentThread = noteId\n\t\t? notes.find( ( thread ) => thread.id === noteId )\n\t\t: null;\n\n\tasync function openTheSidebar( selectedClientId ) {\n\t\tconst prevArea = await getActiveComplementaryArea( 'core' );\n\t\tconst activeNotesArea = SIDEBARS.find( ( name ) => name === prevArea );\n\t\tconst targetClientId =\n\t\t\tselectedClientId && selectedClientId !== clientId\n\t\t\t\t? selectedClientId\n\t\t\t\t: clientId;\n\t\tconst targetNote = notes.find(\n\t\t\t( note ) => note.blockClientId === targetClientId\n\t\t);\n\n\t\tif ( targetNote?.status === 'approved' ) {\n\t\t\tenableComplementaryArea( 'core', ALL_NOTES_SIDEBAR );\n\t\t} else if ( ! activeNotesArea || ! showAllNotesSidebar ) {\n\t\t\tenableComplementaryArea(\n\t\t\t\t'core',\n\t\t\t\tshowFloatingSidebar ? FLOATING_NOTES_SIDEBAR : ALL_NOTES_SIDEBAR\n\t\t\t);\n\t\t}\n\n\t\tconst currentArea = await getActiveComplementaryArea( 'core' );\n\t\t// Bail out if the current active area is not one of note sidebars.\n\t\tif ( ! SIDEBARS.includes( currentArea ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// A special case for the List View, where block selection isn't required to trigger an action.\n\t\t// The action won't do anything if the block is already selected.\n\t\tselectBlock( targetClientId, null );\n\t\ttoggleBlockSpotlight( targetClientId, true );\n\t\tselectNote( targetNote ? targetNote.id : 'new', { focus: true } );\n\t}\n\n\tif ( isDistractionFree ) {\n\t\treturn <AddNoteMenuItem isDistractionFree />;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ !! currentThread && (\n\t\t\t\t<NoteAvatarIndicator\n\t\t\t\t\tnote={ currentThread }\n\t\t\t\t\tonClick={ openTheSidebar }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<AddNoteMenuItem onClick={ openTheSidebar } />\n\t\t\t{ showAllNotesSidebar && (\n\t\t\t\t<PluginSidebar\n\t\t\t\t\tidentifier={ ALL_NOTES_SIDEBAR }\n\t\t\t\t\tname={ ALL_NOTES_SIDEBAR }\n\t\t\t\t\ttitle={ __( 'All notes' ) }\n\t\t\t\t\theader={\n\t\t\t\t\t\t<h2 className=\"interface-complementary-area-header__title\">\n\t\t\t\t\t\t\t{ __( 'All notes' ) }\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t}\n\t\t\t\t\ticon={ commentIcon }\n\t\t\t\t\tcloseLabel={ __( 'Close Notes' ) }\n\t\t\t\t>\n\t\t\t\t\t<Notes notes={ notes } sidebarRef={ sidebarRef } />\n\t\t\t\t</PluginSidebar>\n\t\t\t) }\n\t\t\t{ isLargeViewport && (\n\t\t\t\t<PluginSidebar\n\t\t\t\t\tisPinnable={ false }\n\t\t\t\t\theader={ false }\n\t\t\t\t\tidentifier={ FLOATING_NOTES_SIDEBAR }\n\t\t\t\t\tclassName=\"editor-collab-sidebar\"\n\t\t\t\t\theaderClassName=\"editor-collab-sidebar__header\"\n\t\t\t\t\tbackgroundColor={ backgroundColor }\n\t\t\t\t>\n\t\t\t\t\t<Notes\n\t\t\t\t\t\tnotes={ unresolvedNotes }\n\t\t\t\t\t\tsidebarRef={ sidebarRef }\n\t\t\t\t\t\tstyles={ { backgroundColor } }\n\t\t\t\t\t\tisFloating\n\t\t\t\t\t/>\n\t\t\t\t</PluginSidebar>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default function NotesSidebarContainer() {\n\tconst { postId, editorMode, revisionsMode } = useSelect( ( select ) => {\n\t\tconst { getCurrentPostId, getEditorMode, isRevisionsMode } = unlock(\n\t\t\tselect( editorStore )\n\t\t);\n\t\treturn {\n\t\t\tpostId: getCurrentPostId(),\n\t\t\teditorMode: getEditorMode(),\n\t\t\trevisionsMode: isRevisionsMode(),\n\t\t};\n\t}, [] );\n\n\tif ( ! postId || typeof postId !== 'number' ) {\n\t\treturn null;\n\t}\n\n\t// Hide Notes sidebar for Code Editor and in-editor revision mode.\n\tif ( editorMode === 'text' || revisionsMode ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<PostTypeSupportCheck supportKeys=\"editor.notes\">\n\t\t\t<NotesSidebar postId={ postId } />\n\t\t</PostTypeSupportCheck>\n\t);\n}\n"],
+  "mappings": "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",
+  "names": ["interfaceStore", "blockEditorStore", "editorStore", "preferencesStore", "PluginSidebar", "commentIcon", "PostTypeSupportCheck"]
 }

package/build/components/collab-sidebar/{comment-author-info.cjs → note-byline.cjs}

@@ -17,13 +17,14 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/editor/src/components/collab-sidebar/comment-author-info.js
-var comment_author_info_exports = {};
-__export(comment_author_info_exports, {
-  default: () => comment_author_info_default
+// packages/editor/src/components/collab-sidebar/note-byline.js
+var note_byline_exports = {};
+__export(note_byline_exports, {
+  NoteByline: () => NoteByline
 });
-module.exports = __toCommonJS(comment_author_info_exports);
+module.exports = __toCommonJS(note_byline_exports);
 var import_components = require("@wordpress/components");
+var import_ui = require("@wordpress/ui");
 var import_i18n = require("@wordpress/i18n");
 var import_date = require("@wordpress/date");
 var import_core_data = require("@wordpress/core-data");
@@ -31,7 +32,7 @@ var import_data = require("@wordpress/data");
 var import_block_editor = require("@wordpress/block-editor");
 var import_utils = require("./utils.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-function CommentAuthorInfo({ avatar, name, date, userId }) {
+function NoteByline({ avatar, name, date, userId }) {
   const hasAvatar = !!avatar;
   const dateSettings = (0, import_date.getSettings)();
   const {
@@ -89,7 +90,7 @@ function CommentAuthorInfo({ avatar, name, date, userId }) {
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: "0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Stack, { direction: "column", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "editor-collab-sidebar-panel__user-name", children: name ?? currentUserName }),
       date && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Tooltip, { text: tooltipText, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "time",
@@ -102,5 +103,8 @@ function CommentAuthorInfo({ avatar, name, date, userId }) {
     ] })
   ] });
 }
-var comment_author_info_default = CommentAuthorInfo;
-//# sourceMappingURL=comment-author-info.cjs.map
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NoteByline
+});
+//# sourceMappingURL=note-byline.cjs.map

package/build/components/collab-sidebar/note-byline.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/collab-sidebar/note-byline.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Tooltip } from '@wordpress/components';\nimport { Stack } from '@wordpress/ui';\nimport { __, _x } from '@wordpress/i18n';\nimport {\n\tdateI18n,\n\tgetSettings as getDateSettings,\n\thumanTimeDiff,\n\tgetDate,\n} from '@wordpress/date';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { getAvatarBorderColor } from './utils';\n\nexport function NoteByline( { avatar, name, date, userId } ) {\n\tconst hasAvatar = !! avatar;\n\tconst dateSettings = getDateSettings();\n\tconst {\n\t\tcurrentUserAvatar,\n\t\tcurrentUserName,\n\t\tcurrentUserId,\n\t\tdateFormat = dateSettings.formats.date,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tconst { canUser, getCurrentUser, getEntityRecord } =\n\t\t\t\tselect( coreStore );\n\t\t\tconst siteSettings = canUser( 'read', {\n\t\t\t\tkind: 'root',\n\t\t\t\tname: 'site',\n\t\t\t} )\n\t\t\t\t? getEntityRecord( 'root', 'site' )\n\t\t\t\t: undefined;\n\n\t\t\tif ( hasAvatar ) {\n\t\t\t\treturn {\n\t\t\t\t\tdateFormat: siteSettings?.date_format,\n\t\t\t\t};\n\t\t\t}\n\n\t\t\tconst { getSettings } = select( blockEditorStore );\n\t\t\tconst { __experimentalDiscussionSettings } = getSettings();\n\t\t\tconst defaultAvatar = __experimentalDiscussionSettings?.avatarURL;\n\t\t\tconst userData = getCurrentUser();\n\t\t\treturn {\n\t\t\t\tcurrentUserAvatar:\n\t\t\t\t\tuserData?.avatar_urls?.[ 48 ] ?? defaultAvatar,\n\t\t\t\tcurrentUserName: userData?.name,\n\t\t\t\tcurrentUserId: userData?.id,\n\t\t\t\tdateFormat: siteSettings?.date_format,\n\t\t\t};\n\t\t},\n\t\t[ hasAvatar ]\n\t);\n\n\tconst commentDate = getDate( date );\n\tconst commentDateTime = dateI18n( 'c', commentDate );\n\tconst shouldShowHumanTimeDiff =\n\t\tMath.floor( ( new Date() - commentDate ) / ( 1000 * 60 * 60 * 24 ) ) <\n\t\t30;\n\n\tconst commentDateText = shouldShowHumanTimeDiff\n\t\t? humanTimeDiff( commentDate )\n\t\t: dateI18n( dateFormat, commentDate );\n\n\tconst tooltipText = dateI18n(\n\t\t// translators: Use a non-breaking space between 'g:i' and 'a' if appropriate.\n\t\t_x( 'F j, Y g:i\\xa0a', 'Note date full date format' ),\n\t\tdate\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<img\n\t\t\t\tsrc={ avatar || currentUserAvatar }\n\t\t\t\tclassName=\"editor-collab-sidebar-panel__user-avatar\"\n\t\t\t\t// translators: alt text for user avatar image\n\t\t\t\talt={ __( 'User avatar' ) }\n\t\t\t\twidth={ 32 }\n\t\t\t\theight={ 32 }\n\t\t\t\tstyle={ {\n\t\t\t\t\tborderColor: getAvatarBorderColor(\n\t\t\t\t\t\tuserId ?? currentUserId\n\t\t\t\t\t),\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<Stack direction=\"column\">\n\t\t\t\t<span className=\"editor-collab-sidebar-panel__user-name\">\n\t\t\t\t\t{ name ?? currentUserName }\n\t\t\t\t</span>\n\t\t\t\t{ date && (\n\t\t\t\t\t<Tooltip text={ tooltipText }>\n\t\t\t\t\t\t<time\n\t\t\t\t\t\t\tdateTime={ commentDateTime }\n\t\t\t\t\t\t\tclassName=\"editor-collab-sidebar-panel__user-time\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ commentDateText }\n\t\t\t\t\t\t</time>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) }\n\t\t\t</Stack>\n\t\t</>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAAwB;AACxB,gBAAsB;AACtB,kBAAuB;AACvB,kBAKO;AACP,uBAAmC;AACnC,kBAA0B;AAC1B,0BAA0C;AAK1C,mBAAqC;AA2DnC;AAzDK,SAAS,WAAY,EAAE,QAAQ,MAAM,MAAM,OAAO,GAAI;AAC5D,QAAM,YAAY,CAAC,CAAE;AACrB,QAAM,mBAAe,YAAAA,aAAgB;AACrC,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,aAAa,QAAQ;AAAA,EACnC,QAAI;AAAA,IACH,CAAE,WAAY;AACb,YAAM,EAAE,SAAS,gBAAgB,gBAAgB,IAChD,OAAQ,iBAAAC,KAAU;AACnB,YAAM,eAAe,QAAS,QAAQ;AAAA,QACrC,MAAM;AAAA,QACN,MAAM;AAAA,MACP,CAAE,IACC,gBAAiB,QAAQ,MAAO,IAChC;AAEH,UAAK,WAAY;AAChB,eAAO;AAAA,UACN,YAAY,cAAc;AAAA,QAC3B;AAAA,MACD;AAEA,YAAM,EAAE,YAAY,IAAI,OAAQ,oBAAAC,KAAiB;AACjD,YAAM,EAAE,iCAAiC,IAAI,YAAY;AACzD,YAAM,gBAAgB,kCAAkC;AACxD,YAAM,WAAW,eAAe;AAChC,aAAO;AAAA,QACN,mBACC,UAAU,cAAe,EAAG,KAAK;AAAA,QAClC,iBAAiB,UAAU;AAAA,QAC3B,eAAe,UAAU;AAAA,QACzB,YAAY,cAAc;AAAA,MAC3B;AAAA,IACD;AAAA,IACA,CAAE,SAAU;AAAA,EACb;AAEA,QAAM,kBAAc,qBAAS,IAAK;AAClC,QAAM,sBAAkB,sBAAU,KAAK,WAAY;AACnD,QAAM,0BACL,KAAK,OAAS,oBAAI,KAAK,IAAI,gBAAkB,MAAO,KAAK,KAAK,GAAK,IACnE;AAED,QAAM,kBAAkB,8BACrB,2BAAe,WAAY,QAC3B,sBAAU,YAAY,WAAY;AAErC,QAAM,kBAAc;AAAA;AAAA,QAEnB,gBAAI,mBAAmB,4BAA6B;AAAA,IACpD;AAAA,EACD;AAEA,SACC,4EACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,KAAM,UAAU;AAAA,QAChB,WAAU;AAAA,QAEV,SAAM,gBAAI,aAAc;AAAA,QACxB,OAAQ;AAAA,QACR,QAAS;AAAA,QACT,OAAQ;AAAA,UACP,iBAAa;AAAA,YACZ,UAAU;AAAA,UACX;AAAA,QACD;AAAA;AAAA,IACD;AAAA,IACA,6CAAC,mBAAM,WAAU,UAChB;AAAA,kDAAC,UAAK,WAAU,0CACb,kBAAQ,iBACX;AAAA,MACE,QACD,4CAAC,6BAAQ,MAAO,aACf;AAAA,QAAC;AAAA;AAAA,UACA,UAAW;AAAA,UACX,WAAU;AAAA,UAER;AAAA;AAAA,MACH,GACD;AAAA,OAEF;AAAA,KACD;AAEF;",
+  "names": ["getDateSettings", "coreStore", "blockEditorStore"]
+}

package/build/components/collab-sidebar/note-card.cjs

@@ -0,0 +1,58 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/editor/src/components/collab-sidebar/note-card.js
+var note_card_exports = {};
+__export(note_card_exports, {
+  NoteCard: () => NoteCard
+});
+module.exports = __toCommonJS(note_card_exports);
+var import_components = require("@wordpress/components");
+var import_ui = require("@wordpress/ui");
+var import_note_byline = require("./note-byline.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function NoteCard({ note, actions, className, children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Stack, { direction: "column", gap: "sm", className, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Stack, { direction: "row", align: "center", justify: "flex-start", gap: "md", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_note_byline.NoteByline,
+        {
+          avatar: note?.author_avatar_urls?.[48],
+          name: note?.author_name,
+          date: note?.date,
+          userId: note?.author
+        }
+      ),
+      actions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.FlexItem,
+        {
+          className: "editor-collab-sidebar-panel__note-actions",
+          onClick: (event) => event.stopPropagation(),
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Stack, { direction: "row", align: "center", children: actions })
+        }
+      )
+    ] }),
+    children
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NoteCard
+});
+//# sourceMappingURL=note-card.cjs.map

package/build/components/collab-sidebar/note-card.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/collab-sidebar/note-card.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { FlexItem } from '@wordpress/components';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport { NoteByline } from './note-byline';\n\nexport function NoteCard( { note, actions, className, children, ...props } ) {\n\treturn (\n\t\t<Stack direction=\"column\" gap=\"sm\" className={ className } { ...props }>\n\t\t\t<Stack direction=\"row\" align=\"center\" justify=\"flex-start\" gap=\"md\">\n\t\t\t\t<NoteByline\n\t\t\t\t\tavatar={ note?.author_avatar_urls?.[ 48 ] }\n\t\t\t\t\tname={ note?.author_name }\n\t\t\t\t\tdate={ note?.date }\n\t\t\t\t\tuserId={ note?.author }\n\t\t\t\t/>\n\t\t\t\t{ actions && (\n\t\t\t\t\t<FlexItem\n\t\t\t\t\t\tclassName=\"editor-collab-sidebar-panel__note-actions\"\n\t\t\t\t\t\tonClick={ ( event ) => event.stopPropagation() }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Stack direction=\"row\" align=\"center\">\n\t\t\t\t\t\t\t{ actions }\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</Stack>\n\t\t\t{ children }\n\t\t</Stack>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAAyB;AACzB,gBAAsB;AAKtB,yBAA2B;AAKxB;AAHI,SAAS,SAAU,EAAE,MAAM,SAAS,WAAW,UAAU,GAAG,MAAM,GAAI;AAC5E,SACC,6CAAC,mBAAM,WAAU,UAAS,KAAI,MAAK,WAA0B,GAAG,OAC/D;AAAA,iDAAC,mBAAM,WAAU,OAAM,OAAM,UAAS,SAAQ,cAAa,KAAI,MAC9D;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,QAAS,MAAM,qBAAsB,EAAG;AAAA,UACxC,MAAO,MAAM;AAAA,UACb,MAAO,MAAM;AAAA,UACb,QAAS,MAAM;AAAA;AAAA,MAChB;AAAA,MACE,WACD;AAAA,QAAC;AAAA;AAAA,UACA,WAAU;AAAA,UACV,SAAU,CAAE,UAAW,MAAM,gBAAgB;AAAA,UAE7C,sDAAC,mBAAM,WAAU,OAAM,OAAM,UAC1B,mBACH;AAAA;AAAA,MACD;AAAA,OAEF;AAAA,IACE;AAAA,KACH;AAEF;",
+  "names": []
+}

package/build/components/collab-sidebar/{comment-form.cjs → note-form.cjs}

@@ -27,59 +27,47 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/editor/src/components/collab-sidebar/comment-form.js
-var comment_form_exports = {};
-__export(comment_form_exports, {
-  default: () => comment_form_default
+// packages/editor/src/components/collab-sidebar/note-form.js
+var note_form_exports = {};
+__export(note_form_exports, {
+  NoteForm: () => NoteForm
 });
-module.exports = __toCommonJS(comment_form_exports);
+module.exports = __toCommonJS(note_form_exports);
 var import_react_autosize_textarea = __toESM(require("react-autosize-textarea"));
 var import_element = require("@wordpress/element");
 var import_components = require("@wordpress/components");
+var import_ui = require("@wordpress/ui");
 var import_i18n = require("@wordpress/i18n");
 var import_compose = require("@wordpress/compose");
 var import_keycodes = require("@wordpress/keycodes");
 var import_utils = require("./utils.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-function CommentForm({
-  onSubmit,
-  onCancel,
-  thread,
-  submitButtonText,
-  labelText,
-  reflowComments = import_utils.noop
-}) {
+function NoteForm({ onSubmit, onCancel, note, labels }) {
   const [inputComment, setInputComment] = (0, import_element.useState)(
-    thread?.content?.raw ?? ""
+    note?.content?.raw ?? ""
   );
-  const debouncedCommentUpdated = (0, import_compose.useDebounce)(reflowComments, 100);
-  const updateComment = (value) => {
-    setInputComment(value);
-  };
-  const inputId = (0, import_compose.useInstanceId)(CommentForm, "comment-input");
-  const isDisabled = inputComment === thread?.content?.raw || !(0, import_utils.sanitizeCommentString)(inputComment).length;
+  const inputId = (0, import_compose.useInstanceId)(NoteForm, "comment-input");
+  const isDisabled = inputComment === note?.content?.raw || !(0, import_utils.sanitizeNoteContent)(inputComment).length;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_components.__experimentalVStack,
+    import_ui.Stack,
     {
-      className: "editor-collab-sidebar-panel__comment-form",
-      spacing: "4",
-      as: "form",
+      className: "editor-collab-sidebar-panel__note-form",
+      direction: "column",
+      gap: "lg",
+      render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("form", {}),
       onSubmit: (event) => {
         event.preventDefault();
         onSubmit(inputComment);
         setInputComment("");
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.VisuallyHidden, { as: "label", htmlFor: inputId, children: labelText ?? (0, import_i18n.__)("Note") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.VisuallyHidden, { render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: inputId }), children: labels?.input ?? (0, import_i18n.__)("Note") }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_react_autosize_textarea.default,
           {
             id: inputId,
             value: inputComment ?? "",
-            onChange: (comment) => {
-              updateComment(comment.target.value);
-              debouncedCommentUpdated();
-            },
+            onChange: (comment) => setInputComment(comment.target.value),
             rows: 1,
             maxRows: 20,
             onKeyDown: (event) => {
@@ -93,23 +81,36 @@ function CommentForm({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { spacing: "2", justify: "flex-end", wrap: true, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Button, { size: "compact", variant: "tertiary", onClick: onCancel, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalTruncate, { children: (0, import_i18n.__)("Cancel") }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_components.Button,
-            {
-              size: "compact",
-              accessibleWhenDisabled: true,
-              variant: "primary",
-              type: "submit",
-              disabled: isDisabled,
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalTruncate, { children: submitButtonText })
-            }
-          )
-        ] })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_ui.Stack,
+          {
+            direction: "row",
+            align: "center",
+            justify: "flex-end",
+            gap: "sm",
+            wrap: "wrap",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Button, { size: "compact", variant: "tertiary", onClick: onCancel, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalTruncate, { children: (0, import_i18n.__)("Cancel") }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_components.Button,
+                {
+                  size: "compact",
+                  accessibleWhenDisabled: true,
+                  variant: "primary",
+                  type: "submit",
+                  disabled: isDisabled,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalTruncate, { children: labels?.submit ?? (0, import_i18n.__)("Add note") })
+                }
+              )
+            ]
+          }
+        )
       ]
     }
   );
 }
-var comment_form_default = CommentForm;
-//# sourceMappingURL=comment-form.cjs.map
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NoteForm
+});
+//# sourceMappingURL=note-form.cjs.map

package/build/components/collab-sidebar/note-form.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/collab-sidebar/note-form.js"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport TextareaAutosize from 'react-autosize-textarea';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport {\n\t__experimentalTruncate as Truncate,\n\tButton,\n} from '@wordpress/components';\nimport { Stack, VisuallyHidden } from '@wordpress/ui';\nimport { __ } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { isKeyboardEvent } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { sanitizeNoteContent } from './utils';\n\nexport function NoteForm( { onSubmit, onCancel, note, labels } ) {\n\tconst [ inputComment, setInputComment ] = useState(\n\t\tnote?.content?.raw ?? ''\n\t);\n\n\tconst inputId = useInstanceId( NoteForm, 'comment-input' );\n\tconst isDisabled =\n\t\tinputComment === note?.content?.raw ||\n\t\t! sanitizeNoteContent( inputComment ).length;\n\n\treturn (\n\t\t<Stack\n\t\t\tclassName=\"editor-collab-sidebar-panel__note-form\"\n\t\t\tdirection=\"column\"\n\t\t\tgap=\"lg\"\n\t\t\trender={ <form /> }\n\t\t\tonSubmit={ ( event ) => {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tonSubmit( inputComment );\n\t\t\t\tsetInputComment( '' );\n\t\t\t} }\n\t\t>\n\t\t\t{ /* eslint-disable-next-line jsx-a11y/label-has-associated-control */ }\n\t\t\t<VisuallyHidden render={ <label htmlFor={ inputId } /> }>\n\t\t\t\t{ labels?.input ?? __( 'Note' ) }\n\t\t\t</VisuallyHidden>\n\t\t\t<TextareaAutosize\n\t\t\t\tid={ inputId }\n\t\t\t\tvalue={ inputComment ?? '' }\n\t\t\t\tonChange={ ( comment ) =>\n\t\t\t\t\tsetInputComment( comment.target.value )\n\t\t\t\t}\n\t\t\t\trows={ 1 }\n\t\t\t\tmaxRows={ 20 }\n\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\tif (\n\t\t\t\t\t\tisKeyboardEvent.primary( event, 'Enter' ) &&\n\t\t\t\t\t\t! isDisabled\n\t\t\t\t\t) {\n\t\t\t\t\t\tevent.target.parentNode.requestSubmit();\n\t\t\t\t\t}\n\n\t\t\t\t\tif ( event.key === 'Escape' ) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t// Passing event for reply forms.\n\t\t\t\t\t\tonCancel( event );\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<Stack\n\t\t\t\tdirection=\"row\"\n\t\t\t\talign=\"center\"\n\t\t\t\tjustify=\"flex-end\"\n\t\t\t\tgap=\"sm\"\n\t\t\t\twrap=\"wrap\"\n\t\t\t>\n\t\t\t\t<Button size=\"compact\" variant=\"tertiary\" onClick={ onCancel }>\n\t\t\t\t\t<Truncate>{ __( 'Cancel' ) }</Truncate>\n\t\t\t\t</Button>\n\t\t\t\t<Button\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\tdisabled={ isDisabled }\n\t\t\t\t>\n\t\t\t\t\t<Truncate>{ labels?.submit ?? __( 'Add note' ) }</Truncate>\n\t\t\t\t</Button>\n\t\t\t</Stack>\n\t\t</Stack>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qCAA6B;AAK7B,qBAAyB;AACzB,wBAGO;AACP,gBAAsC;AACtC,kBAAmB;AACnB,qBAA8B;AAC9B,sBAAgC;AAKhC,mBAAoC;AAiBxB;AAfL,SAAS,SAAU,EAAE,UAAU,UAAU,MAAM,OAAO,GAAI;AAChE,QAAM,CAAE,cAAc,eAAgB,QAAI;AAAA,IACzC,MAAM,SAAS,OAAO;AAAA,EACvB;AAEA,QAAM,cAAU,8BAAe,UAAU,eAAgB;AACzD,QAAM,aACL,iBAAiB,MAAM,SAAS,OAChC,KAAE,kCAAqB,YAAa,EAAE;AAEvC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,WAAU;AAAA,MACV,KAAI;AAAA,MACJ,QAAS,4CAAC,UAAK;AAAA,MACf,UAAW,CAAE,UAAW;AACvB,cAAM,eAAe;AACrB,iBAAU,YAAa;AACvB,wBAAiB,EAAG;AAAA,MACrB;AAAA,MAGA;AAAA,oDAAC,4BAAe,QAAS,4CAAC,WAAM,SAAU,SAAU,GACjD,kBAAQ,aAAS,gBAAI,MAAO,GAC/B;AAAA,QACA;AAAA,UAAC,+BAAAA;AAAA,UAAA;AAAA,YACA,IAAK;AAAA,YACL,OAAQ,gBAAgB;AAAA,YACxB,UAAW,CAAE,YACZ,gBAAiB,QAAQ,OAAO,KAAM;AAAA,YAEvC,MAAO;AAAA,YACP,SAAU;AAAA,YACV,WAAY,CAAE,UAAW;AACxB,kBACC,gCAAgB,QAAS,OAAO,OAAQ,KACxC,CAAE,YACD;AACD,sBAAM,OAAO,WAAW,cAAc;AAAA,cACvC;AAEA,kBAAK,MAAM,QAAQ,UAAW;AAC7B,sBAAM,eAAe;AAErB,yBAAU,KAAM;AAAA,cACjB;AAAA,YACD;AAAA;AAAA,QACD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,OAAM;AAAA,YACN,SAAQ;AAAA,YACR,KAAI;AAAA,YACJ,MAAK;AAAA,YAEL;AAAA,0DAAC,4BAAO,MAAK,WAAU,SAAQ,YAAW,SAAU,UACnD,sDAAC,kBAAAC,wBAAA,EAAW,8BAAI,QAAS,GAAG,GAC7B;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACA,MAAK;AAAA,kBACL,wBAAsB;AAAA,kBACtB,SAAQ;AAAA,kBACR,MAAK;AAAA,kBACL,UAAW;AAAA,kBAEX,sDAAC,kBAAAA,wBAAA,EAAW,kBAAQ,cAAU,gBAAI,UAAW,GAAG;AAAA;AAAA,cACjD;AAAA;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EACD;AAEF;",
+  "names": ["TextareaAutosize", "Truncate"]
+}

package/build/components/collab-sidebar/{comment-indicator-toolbar.cjs → note-indicator-toolbar.cjs}

@@ -17,42 +17,43 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/editor/src/components/collab-sidebar/comment-indicator-toolbar.js
-var comment_indicator_toolbar_exports = {};
-__export(comment_indicator_toolbar_exports, {
-  default: () => comment_indicator_toolbar_default
+// packages/editor/src/components/collab-sidebar/note-indicator-toolbar.js
+var note_indicator_toolbar_exports = {};
+__export(note_indicator_toolbar_exports, {
+  NoteAvatarIndicator: () => NoteAvatarIndicator
 });
-module.exports = __toCommonJS(comment_indicator_toolbar_exports);
+module.exports = __toCommonJS(note_indicator_toolbar_exports);
 var import_components = require("@wordpress/components");
+var import_ui = require("@wordpress/ui");
 var import_i18n = require("@wordpress/i18n");
 var import_element = require("@wordpress/element");
 var import_block_editor = require("@wordpress/block-editor");
 var import_lock_unlock = require("../../lock-unlock.cjs");
 var import_utils = require("./utils.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-var { CommentIconToolbarSlotFill } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
-var CommentAvatarIndicator = ({ onClick, thread }) => {
+var { NoteIconToolbarSlotFill } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
+function NoteAvatarIndicator({ onClick, note }) {
   const threadParticipants = (0, import_element.useMemo)(() => {
-    if (!thread) {
+    if (!note) {
       return [];
     }
     const participantsMap = /* @__PURE__ */ new Map();
-    const allComments = [thread, ...thread.reply];
-    allComments.sort((a, b) => new Date(a.date) - new Date(b.date));
-    allComments.forEach((comment) => {
-      if (comment.author_name && comment.author_avatar_urls) {
-        if (!participantsMap.has(comment.author)) {
-          participantsMap.set(comment.author, {
-            name: comment.author_name,
-            avatar: comment.author_avatar_urls?.["48"] || comment.author_avatar_urls?.["96"],
-            id: comment.author,
-            date: comment.date
+    const allNotes = [note, ...note.reply];
+    allNotes.sort((a, b) => new Date(a.date) - new Date(b.date));
+    allNotes.forEach((entry) => {
+      if (entry.author_name && entry.author_avatar_urls) {
+        if (!participantsMap.has(entry.author)) {
+          participantsMap.set(entry.author, {
+            name: entry.author_name,
+            avatar: entry.author_avatar_urls?.["48"] || entry.author_avatar_urls?.["96"],
+            id: entry.author,
+            date: entry.date
           });
         }
       }
     });
     return Array.from(participantsMap.values());
-  }, [thread]);
+  }, [note]);
   if (!threadParticipants.length) {
     return null;
   }
@@ -69,20 +70,20 @@ var CommentAvatarIndicator = ({ onClick, thread }) => {
     (0, import_i18n.__)("+%s"),
     overflowCount
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CommentIconToolbarSlotFill.Fill, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NoteIconToolbarSlotFill.Fill, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_components.ToolbarButton,
     {
-      className: "comment-avatar-indicator",
+      className: "editor-note-indicator",
       label: (0, import_i18n.__)("View notes"),
       onClick: () => onClick(),
       showTooltip: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { spacing: "1", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Stack, { direction: "row", align: "center", gap: "xs", children: [
         visibleParticipants.map((participant) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "img",
           {
             src: participant.avatar,
             alt: participant.name,
-            className: "comment-avatar",
+            className: "editor-note-indicator__avatar",
             style: {
               borderColor: (0, import_utils.getAvatarBorderColor)(
                 participant.id
@@ -91,10 +92,13 @@ var CommentAvatarIndicator = ({ onClick, thread }) => {
           },
           participant.id
         )),
-        overflowCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalText, { weight: 500, children: overflowText })
+        overflowCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "editor-note-indicator__overflow", children: overflowText })
       ] })
     }
   ) });
-};
-var comment_indicator_toolbar_default = CommentAvatarIndicator;
-//# sourceMappingURL=comment-indicator-toolbar.cjs.map
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NoteAvatarIndicator
+});
+//# sourceMappingURL=note-indicator-toolbar.cjs.map

package/build/components/collab-sidebar/note-indicator-toolbar.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/collab-sidebar/note-indicator-toolbar.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { ToolbarButton } from '@wordpress/components';\nimport { Stack } from '@wordpress/ui';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useMemo } from '@wordpress/element';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { getAvatarBorderColor } from './utils';\n\nconst { NoteIconToolbarSlotFill } = unlock( blockEditorPrivateApis );\n\nexport function NoteAvatarIndicator( { onClick, note } ) {\n\tconst threadParticipants = useMemo( () => {\n\t\tif ( ! note ) {\n\t\t\treturn [];\n\t\t}\n\n\t\tconst participantsMap = new Map();\n\t\tconst allNotes = [ note, ...note.reply ];\n\n\t\t// Sort by date to show participants in chronological order.\n\t\tallNotes.sort( ( a, b ) => new Date( a.date ) - new Date( b.date ) );\n\n\t\tallNotes.forEach( ( entry ) => {\n\t\t\t// Track thread participants (original author + repliers).\n\t\t\tif ( entry.author_name && entry.author_avatar_urls ) {\n\t\t\t\tif ( ! participantsMap.has( entry.author ) ) {\n\t\t\t\t\tparticipantsMap.set( entry.author, {\n\t\t\t\t\t\tname: entry.author_name,\n\t\t\t\t\t\tavatar:\n\t\t\t\t\t\t\tentry.author_avatar_urls?.[ '48' ] ||\n\t\t\t\t\t\t\tentry.author_avatar_urls?.[ '96' ],\n\t\t\t\t\t\tid: entry.author,\n\t\t\t\t\t\tdate: entry.date,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\n\t\treturn Array.from( participantsMap.values() );\n\t}, [ note ] );\n\n\tif ( ! threadParticipants.length ) {\n\t\treturn null;\n\t}\n\n\t// If there are more than 3 participants, show 2 avatars and a \"+n\" number.\n\tconst maxAvatars = 3;\n\tconst isOverflow = threadParticipants.length > maxAvatars;\n\tconst visibleParticipants = isOverflow\n\t\t? threadParticipants.slice( 0, maxAvatars - 1 )\n\t\t: threadParticipants;\n\tconst overflowCount = Math.max(\n\t\t0,\n\t\tthreadParticipants.length - visibleParticipants.length\n\t);\n\tconst threadHasMoreParticipants = threadParticipants.length > 100;\n\n\t// If we hit the note limit, show \"100+\" instead of exact overflow count.\n\tconst overflowText =\n\t\tthreadHasMoreParticipants && overflowCount > 0\n\t\t\t? __( '100+' )\n\t\t\t: sprintf(\n\t\t\t\t\t// translators: %s: Number of participants.\n\t\t\t\t\t__( '+%s' ),\n\t\t\t\t\toverflowCount\n\t\t\t  );\n\n\treturn (\n\t\t<NoteIconToolbarSlotFill.Fill>\n\t\t\t<ToolbarButton\n\t\t\t\tclassName=\"editor-note-indicator\"\n\t\t\t\tlabel={ __( 'View notes' ) }\n\t\t\t\tonClick={ () => onClick() }\n\t\t\t\tshowTooltip\n\t\t\t>\n\t\t\t\t<Stack direction=\"row\" align=\"center\" gap=\"xs\">\n\t\t\t\t\t{ visibleParticipants.map( ( participant ) => (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tkey={ participant.id }\n\t\t\t\t\t\t\tsrc={ participant.avatar }\n\t\t\t\t\t\t\talt={ participant.name }\n\t\t\t\t\t\t\tclassName=\"editor-note-indicator__avatar\"\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tborderColor: getAvatarBorderColor(\n\t\t\t\t\t\t\t\t\tparticipant.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\t{ overflowCount > 0 && (\n\t\t\t\t\t\t<span className=\"editor-note-indicator__overflow\">\n\t\t\t\t\t\t\t{ overflowText }\n\t\t\t\t\t\t</span>\n\t\t\t\t\t) }\n\t\t\t\t</Stack>\n\t\t\t</ToolbarButton>\n\t\t</NoteIconToolbarSlotFill.Fill>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAA8B;AAC9B,gBAAsB;AACtB,kBAA4B;AAC5B,qBAAwB;AACxB,0BAAsD;AAKtD,yBAAuB;AACvB,mBAAqC;AAqEjC;AAnEJ,IAAM,EAAE,wBAAwB,QAAI,2BAAQ,oBAAAA,WAAuB;AAE5D,SAAS,oBAAqB,EAAE,SAAS,KAAK,GAAI;AACxD,QAAM,yBAAqB,wBAAS,MAAM;AACzC,QAAK,CAAE,MAAO;AACb,aAAO,CAAC;AAAA,IACT;AAEA,UAAM,kBAAkB,oBAAI,IAAI;AAChC,UAAM,WAAW,CAAE,MAAM,GAAG,KAAK,KAAM;AAGvC,aAAS,KAAM,CAAE,GAAG,MAAO,IAAI,KAAM,EAAE,IAAK,IAAI,IAAI,KAAM,EAAE,IAAK,CAAE;AAEnE,aAAS,QAAS,CAAE,UAAW;AAE9B,UAAK,MAAM,eAAe,MAAM,oBAAqB;AACpD,YAAK,CAAE,gBAAgB,IAAK,MAAM,MAAO,GAAI;AAC5C,0BAAgB,IAAK,MAAM,QAAQ;AAAA,YAClC,MAAM,MAAM;AAAA,YACZ,QACC,MAAM,qBAAsB,IAAK,KACjC,MAAM,qBAAsB,IAAK;AAAA,YAClC,IAAI,MAAM;AAAA,YACV,MAAM,MAAM;AAAA,UACb,CAAE;AAAA,QACH;AAAA,MACD;AAAA,IACD,CAAE;AAEF,WAAO,MAAM,KAAM,gBAAgB,OAAO,CAAE;AAAA,EAC7C,GAAG,CAAE,IAAK,CAAE;AAEZ,MAAK,CAAE,mBAAmB,QAAS;AAClC,WAAO;AAAA,EACR;AAGA,QAAM,aAAa;AACnB,QAAM,aAAa,mBAAmB,SAAS;AAC/C,QAAM,sBAAsB,aACzB,mBAAmB,MAAO,GAAG,aAAa,CAAE,IAC5C;AACH,QAAM,gBAAgB,KAAK;AAAA,IAC1B;AAAA,IACA,mBAAmB,SAAS,oBAAoB;AAAA,EACjD;AACA,QAAM,4BAA4B,mBAAmB,SAAS;AAG9D,QAAM,eACL,6BAA6B,gBAAgB,QAC1C,gBAAI,MAAO,QACX;AAAA;AAAA,QAEA,gBAAI,KAAM;AAAA,IACV;AAAA,EACA;AAEJ,SACC,4CAAC,wBAAwB,MAAxB,EACA;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,WAAQ,gBAAI,YAAa;AAAA,MACzB,SAAU,MAAM,QAAQ;AAAA,MACxB,aAAW;AAAA,MAEX,uDAAC,mBAAM,WAAU,OAAM,OAAM,UAAS,KAAI,MACvC;AAAA,4BAAoB,IAAK,CAAE,gBAC5B;AAAA,UAAC;AAAA;AAAA,YAEA,KAAM,YAAY;AAAA,YAClB,KAAM,YAAY;AAAA,YAClB,WAAU;AAAA,YACV,OAAQ;AAAA,cACP,iBAAa;AAAA,gBACZ,YAAY;AAAA,cACb;AAAA,YACD;AAAA;AAAA,UARM,YAAY;AAAA,QASnB,CACC;AAAA,QACA,gBAAgB,KACjB,4CAAC,UAAK,WAAU,mCACb,wBACH;AAAA,SAEF;AAAA;AAAA,EACD,GACD;AAEF;",
+  "names": ["blockEditorPrivateApis"]
+}