diff --git a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx index 38b466a0b02..3e8345a3f65 100644 --- a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx +++ b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx @@ -84,7 +84,8 @@ export function PresenceMenu() { focused={focusedId === item.user.id} key={item.user.id} onFocus={handleItemFocus} - presence={item} + locations={item.locations} + user={item.user} /> ))} diff --git a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx index 60828024ad8..dd11e19eb3f 100644 --- a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx +++ b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx @@ -1,6 +1,6 @@ import * as PathUtils from '@sanity/util/paths' import {orderBy} from 'lodash' -import {type ForwardedRef, forwardRef, memo, useCallback, useEffect, useMemo, useState} from 'react' +import {memo, useCallback, useEffect, useState} from 'react' import {IntentLink} from 'sanity/router' import {MenuItem} from '../../../../../ui-components' @@ -11,19 +11,15 @@ import {type GlobalPresence} from '../../../../store' interface PresenceListRowProps { focused: boolean onFocus: (id: string) => void - presence: GlobalPresence + locations: GlobalPresence['locations'] + user: GlobalPresence['user'] } export const PresenceMenuItem = memo(function PresenceMenuItem(props: PresenceListRowProps) { - const {presence, focused, onFocus} = props + const {locations, user, focused, onFocus} = props const [menuItemElement, setMenuItemElement] = useState(null) const {t} = useTranslation() - const lastActiveLocation = orderBy(presence.locations || [], ['lastActiveAt'], ['desc']).find( - (location) => location.documentId, - ) - const hasLink = Boolean(lastActiveLocation?.documentId) - /** * This is a workaround to keep focus on the selected menu item * when the list of users in the menu is updated @@ -40,42 +36,47 @@ export const PresenceMenuItem = memo(function PresenceMenuItem(props: PresenceLi }, [menuItemElement, focused]) const handleFocus = useCallback(() => { - onFocus(presence.user.id) - }, [onFocus, presence.user.id]) + onFocus(user.id) + }, [onFocus, user.id]) - const LinkComponent = useMemo( - () => - // eslint-disable-next-line @typescript-eslint/no-shadow - forwardRef(function LinkComponent(linkProps, ref: ForwardedRef) { - if (!lastActiveLocation?.path) return null - - return ( - - ) - }), - [lastActiveLocation], + const lastActiveLocation = orderBy(locations || [], ['lastActiveAt'], ['desc']).find( + (location) => location.documentId, ) + const hasLink = Boolean(lastActiveLocation?.documentId) + + if (lastActiveLocation) { + return ( + } + ref={setMenuItemElement} + text={user.displayName} + /> + ) + } return ( } - ref={setMenuItemElement} - text={presence.user.displayName} tooltipProps={ hasLink ? undefined : {content: t('presence.not-in-a-document'), placement: 'left'} } + // Shared props + data-as="a" + onFocus={handleFocus} + preview={} + ref={setMenuItemElement} + text={user.displayName} /> ) })