@wordpress/editor 14.40.2-next.v.202602241322.0 → 14.40.2

package/src/components/collaborators-presence/avatar-group/component.tsx

@@ -0,0 +1,55 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { Children } from '@wordpress/element';
+import { sprintf, _n } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { AvatarGroupProps } from './types';
+
+function AvatarGroup( {
+	className,
+	max = 3,
+	children,
+	...props
+}: AvatarGroupProps &
+	Omit< React.HTMLAttributes< HTMLDivElement >, keyof AvatarGroupProps > ) {
+	const childArray = Children.toArray( children );
+	const visible = childArray.slice( 0, max );
+	const overflowCount = childArray.length - max;
+
+	return (
+		<div
+			role="group"
+			className={ clsx( 'editor-avatar-group', className ) }
+			{ ...props }
+		>
+			{ visible }
+			{ overflowCount > 0 && (
+				<span
+					className="editor-avatar-group__overflow"
+					aria-label={ sprintf(
+						/* translators: %d: number of additional collaborators not shown */
+						_n(
+							'%d more collaborator',
+							'%d more collaborators',
+							overflowCount
+						),
+						overflowCount
+					) }
+				>
+					{ `+${ overflowCount }` }
+				</span>
+			) }
+		</div>
+	);
+}
+
+export default AvatarGroup;

package/src/components/collaborators-presence/avatar-group/index.ts

@@ -0,0 +1,2 @@
+export { default } from './component';
+export type { AvatarGroupProps } from './types';

package/src/components/collaborators-presence/avatar-group/styles.scss

@@ -0,0 +1,33 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
+.editor-avatar-group {
+	display: flex;
+	align-items: center;
+
+	// Overlap subsequent avatars.
+	> .editor-avatar + .editor-avatar {
+		margin-inline-start: -$grid-unit-10;
+	}
+
+	// Stack earlier avatars on top of later ones so the overlap
+	// is visually correct, and elevate on hover for badge expansion.
+	> .editor-avatar {
+		position: relative;
+
+		@for $i from 1 through 10 {
+			&:nth-child(#{$i}) {
+				z-index: #{11 - $i};
+			}
+		}
+	}
+}
+
+.editor-avatar-group__overflow {
+	margin-inline-start: $grid-unit-05;
+	margin-inline-end: $grid-unit-05;
+	font-size: $font-size-small;
+	line-height: $font-line-height-small;
+	color: $gray-900;
+	white-space: nowrap;
+}

package/src/components/collaborators-presence/avatar-group/test/index.tsx

@@ -0,0 +1,139 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import AvatarGroup from '..';
+import Avatar from '../../avatar';
+
+describe( 'AvatarGroup', () => {
+	it( 'should render all children when count is within max', () => {
+		render(
+			<AvatarGroup>
+				<Avatar name="Alice" />
+				<Avatar name="Bob" />
+			</AvatarGroup>
+		);
+		expect(
+			screen.getByRole( 'img', { name: 'Alice' } )
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole( 'img', { name: 'Bob' } )
+		).toBeInTheDocument();
+		expect( screen.queryByText( /^\+/ ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'should show overflow indicator when children exceed max', () => {
+		render(
+			<AvatarGroup max={ 2 }>
+				<Avatar name="Alice" />
+				<Avatar name="Bob" />
+				<Avatar name="Charlie" />
+				<Avatar name="Diana" />
+			</AvatarGroup>
+		);
+		expect(
+			screen.getByRole( 'img', { name: 'Alice' } )
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole( 'img', { name: 'Bob' } )
+		).toBeInTheDocument();
+		expect(
+			screen.queryByRole( 'img', { name: 'Charlie' } )
+		).not.toBeInTheDocument();
+		const overflow = screen.getByText( '+2' );
+		expect( overflow ).toBeInTheDocument();
+		expect( overflow ).toHaveAttribute(
+			'aria-label',
+			'2 more collaborators'
+		);
+	} );
+
+	it( 'should use singular form for one overflow collaborator', () => {
+		render(
+			<AvatarGroup max={ 2 }>
+				<Avatar name="Alice" />
+				<Avatar name="Bob" />
+				<Avatar name="Charlie" />
+			</AvatarGroup>
+		);
+		const overflow = screen.getByText( '+1' );
+		expect( overflow ).toHaveAttribute(
+			'aria-label',
+			'1 more collaborator'
+		);
+	} );
+
+	it( 'should default max to 3', () => {
+		render(
+			<AvatarGroup>
+				<Avatar name="A" />
+				<Avatar name="B" />
+				<Avatar name="C" />
+				<Avatar name="D" />
+				<Avatar name="E" />
+			</AvatarGroup>
+		);
+		expect( screen.getByRole( 'img', { name: 'A' } ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'img', { name: 'B' } ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'img', { name: 'C' } ) ).toBeInTheDocument();
+		expect(
+			screen.queryByRole( 'img', { name: 'D' } )
+		).not.toBeInTheDocument();
+		expect( screen.getByText( '+2' ) ).toBeInTheDocument();
+	} );
+
+	it( 'should not show overflow when children equal max', () => {
+		render(
+			<AvatarGroup max={ 3 }>
+				<Avatar name="A" />
+				<Avatar name="B" />
+				<Avatar name="C" />
+			</AvatarGroup>
+		);
+		expect( screen.queryByText( /^\+/ ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'should not show overflow when children are fewer than max', () => {
+		render(
+			<AvatarGroup max={ 5 }>
+				<Avatar name="A" />
+				<Avatar name="B" />
+			</AvatarGroup>
+		);
+		expect( screen.queryByText( /^\+/ ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'should combine custom className with default class', () => {
+		render(
+			<AvatarGroup data-testid="group" className="custom">
+				<Avatar name="A" />
+			</AvatarGroup>
+		);
+		const group = screen.getByTestId( 'group' );
+		expect( group ).toHaveClass( 'editor-avatar-group' );
+		expect( group ).toHaveClass( 'custom' );
+	} );
+
+	it( 'should have group role and support aria-label', () => {
+		render(
+			<AvatarGroup aria-label="Collaborators">
+				<Avatar name="A" />
+			</AvatarGroup>
+		);
+		const group = screen.getByRole( 'group', {
+			name: 'Collaborators',
+		} );
+		expect( group ).toBeInTheDocument();
+	} );
+
+	it( 'should render with no children', () => {
+		render( <AvatarGroup data-testid="group" /> );
+		const group = screen.getByTestId( 'group' );
+		expect( group ).toBeInTheDocument();
+		expect( screen.queryByText( /^\+/ ) ).not.toBeInTheDocument();
+	} );
+} );

package/src/components/collaborators-presence/avatar-group/types.ts

@@ -0,0 +1,13 @@
+export type AvatarGroupProps = {
+	/**
+	 * Maximum number of avatars to display before showing an
+	 * overflow indicator.
+	 *
+	 * @default 3
+	 */
+	max?: number;
+	/**
+	 * Avatar elements to display in the group.
+	 */
+	children: React.ReactNode;
+};

package/src/components/collaborators-presence/index.tsx

@@ -1,24 +1,23 @@
-import {
-	Button,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import { Button } from '@wordpress/components';
+import { useMemo, useState } from '@wordpress/element';
 import {
 	privateApis,
 	type PostEditorAwarenessState,
 } from '@wordpress/core-data';
 import { __, sprintf } from '@wordpress/i18n';
 
+import Avatar from './avatar';
+import AvatarGroup from './avatar-group';
 import { CollaboratorsList } from './list';
 import { unlock } from '../../lock-unlock';
 import { getAvatarUrl } from '../collaborators-overlay/get-avatar-url';
 import { getAvatarBorderColor } from '../collab-sidebar/utils';
+import { createCursorRegistry } from '../collaborators-overlay/cursor-registry';
 
 import './styles/collaborators-presence.scss';
 import { CollaboratorsOverlay } from '../collaborators-overlay';
 
 const { useActiveCollaborators } = unlock( privateApis );
-const { Avatar, AvatarGroup } = unlock( componentsPrivateApis );
 
 interface CollaboratorsPresenceProps {
 	postId: number | null;
@@ -42,11 +41,25 @@ export function CollaboratorsPresence( {
 		postType
 	) as PostEditorAwarenessState[];
 
-	// Filter out current user - we never show ourselves in the list
 	const otherActiveCollaborators = activeCollaborators.filter(
-		( collaborator ) => ! collaborator.isMe
+		( c ) => ! c.isMe
 	);
 
+	// Always include self in the list sorted first.
+	const collaboratorsForList = useMemo( () => {
+		return [ ...activeCollaborators ].sort( ( a, b ) => {
+			if ( a.isMe && ! b.isMe ) {
+				return -1;
+			}
+			if ( ! a.isMe && b.isMe ) {
+				return 1;
+			}
+			return 0;
+		} );
+	}, [ activeCollaborators ] );
+
+	const [ cursorRegistry ] = useState( createCursorRegistry );
+
 	const [ isPopoverVisible, setIsPopoverVisible ] = useState( false );
 	const [ popoverAnchor, setPopoverAnchor ] = useState< HTMLElement | null >(
 		null
@@ -59,6 +72,8 @@ export function CollaboratorsPresence( {
 		return null;
 	}
 
+	const me = activeCollaborators.find( ( c ) => c.isMe );
+
 	return (
 		<>
 			<div className="editor-collaborators-presence">
@@ -71,10 +86,21 @@ export function CollaboratorsPresence( {
 					aria-label={ sprintf(
 						// translators: %d: number of online collaborators.
 						__( 'Collaborators list, %d online' ),
-						otherActiveCollaborators.length
+						collaboratorsForList.length
 					) }
 				>
-					<AvatarGroup max={ 3 }>
+					<AvatarGroup max={ 4 }>
+						{ me && (
+							<Avatar
+								key={ me.clientId }
+								src={ getAvatarUrl(
+									me.collaboratorInfo.avatar_urls
+								) }
+								name={ me.collaboratorInfo.name }
+								borderColor="var(--wp-admin-theme-color)"
+								size="small"
+							/>
+						) }
 						{ otherActiveCollaborators.map(
 							( collaboratorState ) => (
 								<Avatar
@@ -97,13 +123,18 @@ export function CollaboratorsPresence( {
 				</Button>
 				{ isPopoverVisible && (
 					<CollaboratorsList
-						activeCollaborators={ otherActiveCollaborators }
+						activeCollaborators={ collaboratorsForList }
 						popoverAnchor={ popoverAnchor }
 						setIsPopoverVisible={ setIsPopoverVisible }
+						cursorRegistry={ cursorRegistry }
 					/>
 				) }
 			</div>
-			<CollaboratorsOverlay postId={ postId } postType={ postType } />
+			<CollaboratorsOverlay
+				postId={ postId }
+				postType={ postType }
+				cursorRegistry={ cursorRegistry }
+			/>
 		</>
 	);
 }

package/src/components/collaborators-presence/list.tsx

@@ -1,39 +1,53 @@
 import { __ } from '@wordpress/i18n';
-import {
-	Popover,
-	Button,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
-import { close } from '@wordpress/icons';
+import { Popover, Button } from '@wordpress/components';
+import { closeSmall } from '@wordpress/icons';
 import { type PostEditorAwarenessState } from '@wordpress/core-data';
+import { speak } from '@wordpress/a11y';
 
-import { unlock } from '../../lock-unlock';
+import Avatar from './avatar';
 import { getAvatarUrl } from '../collaborators-overlay/get-avatar-url';
 import { getAvatarBorderColor } from '../collab-sidebar/utils';
+import { type CursorRegistry } from '../collaborators-overlay/cursor-registry';
 
 import './styles/collaborators-list.scss';
 
-const { Avatar } = unlock( componentsPrivateApis );
-
 interface CollaboratorsListProps {
 	activeCollaborators: PostEditorAwarenessState[];
 	popoverAnchor?: HTMLElement | null;
 	setIsPopoverVisible: ( isVisible: boolean ) => void;
+	cursorRegistry: CursorRegistry;
 }
 
 /**
  * Renders a list showing all active collaborators with their details.
- * Note: activeUsers should already exclude the current user (filtered by parent component).
+ * When the showCollaborationCursor preference is enabled, the current user
+ * is included and expected to be first in the list.
  * @param props                     Component props
  * @param props.activeCollaborators List of active collaborators
  * @param props.popoverAnchor       Anchor element for the popover
  * @param props.setIsPopoverVisible Callback to set the visibility of the popover
+ * @param props.cursorRegistry      Shared registry for scroll-to-cursor support
  */
 export function CollaboratorsList( {
 	activeCollaborators,
 	popoverAnchor,
 	setIsPopoverVisible,
+	cursorRegistry,
 }: CollaboratorsListProps ) {
+	const handleCollaboratorClick = ( clientId: number ) => {
+		const success = cursorRegistry.scrollToCursor( clientId, {
+			behavior: 'smooth',
+			block: 'center',
+			highlightDuration: 2000,
+		} );
+
+		if ( success ) {
+			speak( __( 'Scrolled to cursor' ), 'polite' );
+
+			setIsPopoverVisible( false );
+		}
+	};
+
 	return (
 		<Popover
 			anchor={ popoverAnchor }
@@ -46,47 +60,61 @@ export function CollaboratorsList( {
 				<div className="editor-collaborators-presence__list-header">
 					<div className="editor-collaborators-presence__list-header-title">
 						{ __( 'Collaborators' ) }
-						<span> { activeCollaborators.length } </span>
+						<span>{ activeCollaborators.length }</span>
 					</div>
 					<div className="editor-collaborators-presence__list-header-action">
 						<Button
 							__next40pxDefaultSize
-							icon={ close }
-							iconSize={ 16 }
+							icon={ closeSmall }
+							iconSize={ 24 }
 							label={ __( 'Close Collaborators List' ) }
 							onClick={ () => setIsPopoverVisible( false ) }
 						/>
 					</div>
 				</div>
 				<div className="editor-collaborators-presence__list-items">
-					{ activeCollaborators.map( ( collaboratorState ) => (
-						<button
-							key={ collaboratorState.clientId }
-							className="editor-collaborators-presence__list-item"
-							disabled
-							style={ {
-								opacity: collaboratorState.isConnected
-									? 1
-									: 0.5,
-							} }
-						>
-							<Avatar
-								src={ getAvatarUrl(
-									collaboratorState.collaboratorInfo
-										.avatar_urls
-								) }
-								name={ collaboratorState.collaboratorInfo.name }
-								borderColor={ getAvatarBorderColor(
-									collaboratorState.collaboratorInfo.id
-								) }
-							/>
-							<div className="editor-collaborators-presence__list-item-info">
-								<div className="editor-collaborators-presence__list-item-name">
-									{ collaboratorState.collaboratorInfo.name }
+					{ activeCollaborators.map( ( collaboratorState ) => {
+						const isCurrentUser = collaboratorState.isMe;
+						return (
+							<button
+								key={ collaboratorState.clientId }
+								className="editor-collaborators-presence__list-item"
+								disabled={ isCurrentUser }
+								onClick={ () =>
+									handleCollaboratorClick(
+										collaboratorState.clientId
+									)
+								}
+							>
+								<Avatar
+									src={ getAvatarUrl(
+										collaboratorState.collaboratorInfo
+											.avatar_urls
+									) }
+									name={
+										collaboratorState.collaboratorInfo.name
+									}
+									borderColor={
+										isCurrentUser
+											? 'var(--wp-admin-theme-color)'
+											: getAvatarBorderColor(
+													collaboratorState
+														.collaboratorInfo.id
+											  )
+									}
+									dimmed={ ! collaboratorState.isConnected }
+								/>
+								<div className="editor-collaborators-presence__list-item-info">
+									<div className="editor-collaborators-presence__list-item-name">
+										{ isCurrentUser
+											? __( 'You' )
+											: collaboratorState.collaboratorInfo
+													.name }
+									</div>
 								</div>
-							</div>
-						</button>
-					) ) }
+							</button>
+						);
+					} ) }
 				</div>
 			</div>
 		</Popover>

package/src/components/collaborators-presence/styles/collaborators-list.scss

@@ -4,15 +4,15 @@
 .editor-collaborators-presence__list.components-popover {
 	// Popover wrapper styles
 	.components-popover__content {
-		border: 1px solid $gray-300;
-		border-width: 1px 0 0 1px;
+		border: $border-width solid $gray-300;
+		border-width: $border-width 0 0 $border-width;
 		border-radius: $radius-large;
 		background: $white;
 		box-shadow: $elevation-small;
 	}
 
 	.editor-collaborators-presence__list-content {
-		min-width: 280px;
+		min-width: $sidebar-width;
 	}
 
 	// Header with title and action button
@@ -20,14 +20,14 @@
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		padding: 0 $grid-unit-20;
+		padding: $grid-unit-10 $grid-unit-20;
 
 		&-title {
 			font-size: $font-size-medium;
 			font-weight: $font-weight-medium;
-			text-transform: uppercase;
 			line-height: $font-line-height-small;
-			padding: 14px 0;
+			display: flex;
+			gap: $grid-unit-05;
 
 			span {
 				color: $gray-700;
@@ -35,12 +35,11 @@
 		}
 
 		&-action {
-			padding: $grid-unit-10 0;
-
+			padding: 0;
 			button {
 				color: $gray-900;
-				height: $button-size-small;
-				width: $button-size-small;
+				height: $button-size-compact;
+				width: $button-size-compact;
 				padding: 0;
 			}
 		}
@@ -50,7 +49,7 @@
 	.editor-collaborators-presence__list-items {
 		display: flex;
 		flex-direction: column;
-		padding: 0 10px $grid-unit-20;
+		padding-bottom: $grid-unit-20;
 	}
 
 	.editor-collaborators-presence__list-item {
@@ -61,24 +60,23 @@
 		// Layout styles
 		display: flex;
 		align-items: center;
-		padding: $grid-unit-05 + 2;
+		padding: $grid-unit-15 $grid-unit-20;
 		gap: $grid-unit-10;
-		border-radius: $radius-large + $grid-unit-05;
 		width: 100%;
 		cursor: pointer;
 		transition: background-color 0.2s ease;
 
 		&:hover:not(:disabled) {
-			background-color: rgba($black, 0.05);
+			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 		}
 
 		&:active:not(:disabled) {
-			background-color: rgba($black, 0.08);
+			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
 		}
 
 		&:focus-visible {
-			outline: 2px solid var(--wp-admin-theme-color, #007cba);
-			outline-offset: -2px;
+			outline: $border-width-focus-fallback solid var(--wp-admin-theme-color, #3858e9);
+			outline-offset: -$border-width-focus-fallback;
 		}
 
 		&:disabled {
@@ -89,8 +87,17 @@
 			display: flex;
 			flex-direction: column;
 			flex: 1;
-			line-height: $font-line-height-x-small;
-			font-size: $font-size-small;
+			min-width: 0;
+		}
+
+		&-name {
+			font-size: $font-size-medium;
+			font-weight: $font-weight-medium;
+			line-height: $font-line-height-small;
+			color: $gray-900;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
 		}
 	}
 }

package/src/components/collaborators-presence/styles/collaborators-presence.scss

@@ -13,6 +13,10 @@
 	&:hover {
 		background-color: $gray-200;
 	}
+
+	&:has(.is-pressed) {
+		background-color: $gray-200;
+	}
 }
 
 .editor-collaborators-presence__button.editor-collaborators-presence__button.components-button {
@@ -33,10 +37,10 @@
 		color: $gray-800;
 	}
 
-	// Override pressed state - keep it like document bar style
+	// Override pressed state - let the container handle the background
 	&.is-pressed,
 	&.is-pressed:hover {
-		background: $gray-300;
+		background: transparent;
 		color: $gray-800;
 	}