box-annotations 5.2.1-beta.6 → 5.2.1-beta.8

package/src/components/Popups/PopupV2.tsx

@@ -0,0 +1,320 @@
+import noop from 'lodash/noop';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { useIntl } from 'react-intl';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { BlueprintModernizationProvider } from '@box/blueprint-web';
+import {
+    MentionContextProvider,
+    MessageEditorV2,
+    ThreadedAnnotationsV2,
+    serializeMentionMarkup,
+} from '@box/threaded-annotations';
+import type { DocumentNodeV2, TextMessageTypeV2 } from '@box/threaded-annotations';
+import type { FetchedAvatarUrls, UserContactType } from '@box/user-selector';
+import type { JSONContent } from '@tiptap/core';
+import FocusTrap from 'box-ui-elements/es/components/focus-trap/FocusTrap';
+
+import { annotationToMessages, collaboratorToUserContact } from '../../adapters/threadedAnnotationsAdapters';
+import {
+    createReplyAction,
+    deleteAnnotationAction,
+    setActiveAnnotationIdAction,
+    updateAnnotationAction,
+} from '../../store/annotations/actions';
+import { getAnnotation } from '../../store/annotations/selectors';
+import { getApiHost, getToken } from '../../store/options';
+import { fetchCollaboratorsAction } from '../../store/users/actions';
+
+import type { AppState, AppThunkDispatch } from '../../store/types';
+
+import createPopper, { PopupReference } from './Popper';
+import type { Instance, Options } from './Popper';
+import messages from './messages';
+import './PopupV2.scss';
+
+export type Props = {
+    annotationId?: string;
+    onSubmit: (text: string) => void;
+    popupPortalEl?: HTMLElement | null;
+    reference: PopupReference;
+};
+
+const getPopupOptions = (): Partial<Options> => ({
+    modifiers: [
+        { name: 'flip', options: { altAxis: false, fallbackPlacements: ['top', 'left', 'right'] } },
+        { name: 'offset', options: { offset: [0, 15] } },
+        { name: 'preventOverflow', options: { padding: 5 } },
+    ],
+    placement: 'bottom',
+});
+
+const createDocumentNode = (content: JSONContent | null): DocumentNodeV2 => {
+    if (!content) {
+        return { type: 'doc', content: [] };
+    }
+
+    if (content.type === 'doc' && content.content) {
+        return content as DocumentNodeV2;
+    }
+
+    return { type: 'doc', content: [content] } as DocumentNodeV2;
+};
+
+// Callers render initials as a fallback on null.
+// A persistent null across all users usually indicates a stale token.
+const fetchAvatarBlob = async (apiHost: string, token: string, userId: string): Promise<string | null> => {
+    try {
+        const response = await fetch(`${apiHost}/2.0/users/${userId}/avatar?pic_type=large`, {
+            headers: { Authorization: `Bearer ${token}` },
+        });
+        if (!response.ok) return null;
+        const blob = await response.blob();
+        return URL.createObjectURL(blob);
+    } catch {
+        return null;
+    }
+};
+
+const PopupV2 = ({ annotationId, onSubmit, popupPortalEl, reference }: Props): JSX.Element | null => {
+    const intl = useIntl();
+    const dispatch = useDispatch<AppThunkDispatch>();
+    const popupRef = React.useRef<HTMLDivElement>(null);
+    const popperRef = React.useRef<Instance>();
+    const optionsRef = React.useRef<Partial<Options>>(getPopupOptions());
+
+    const apiHost = useSelector(getApiHost);
+    const token = useSelector(getToken);
+    const annotation = useSelector((state: AppState) =>
+        annotationId ? getAnnotation(state, annotationId) : undefined,
+    );
+
+    const [avatarBlobs, setAvatarBlobs] = React.useState<Record<string, string>>({});
+    const avatarCacheRef = React.useRef<Map<string, string>>(new Map());
+    const credentialsRef = React.useRef({ apiHost, token });
+    credentialsRef.current = { apiHost, token };
+
+    const getOrFetchAvatarBlob = React.useCallback(
+        async (userId: string): Promise<string | null> => {
+            const cached = avatarCacheRef.current.get(userId);
+            if (cached) return cached;
+            const capturedApiHost = apiHost;
+            const capturedToken = token;
+            const url = await fetchAvatarBlob(capturedApiHost, capturedToken, userId);
+            if (!url) return null;
+            if (
+                credentialsRef.current.apiHost !== capturedApiHost ||
+                credentialsRef.current.token !== capturedToken
+            ) {
+                URL.revokeObjectURL(url);
+                return null;
+            }
+            const existing = avatarCacheRef.current.get(userId);
+            if (existing) {
+                URL.revokeObjectURL(url);
+                return existing;
+            }
+            avatarCacheRef.current.set(userId, url);
+            return url;
+        },
+        [apiHost, token],
+    );
+
+    React.useEffect(() => {
+        if (popupRef.current) {
+            popperRef.current = createPopper(reference, popupRef.current, optionsRef.current);
+        }
+
+        return () => {
+            popperRef.current?.destroy();
+        };
+    }, [reference]);
+
+    React.useEffect(() => {
+        const cache = avatarCacheRef.current;
+        return () => {
+            cache.forEach(url => URL.revokeObjectURL(url));
+            cache.clear();
+        };
+    }, []);
+
+    React.useEffect(() => {
+        avatarCacheRef.current.forEach(url => URL.revokeObjectURL(url));
+        avatarCacheRef.current.clear();
+        setAvatarBlobs({});
+    }, [apiHost, token]);
+
+    const handleEvent = React.useCallback((event: React.SyntheticEvent) => {
+        event.stopPropagation();
+    }, []);
+
+    React.useEffect(() => {
+        if (!annotation) return undefined;
+
+        const userIds = Array.from(
+            new Set(annotationToMessages(annotation).map(msg => String(msg.author.id))),
+        );
+        let cancelled = false;
+
+        Promise.all(userIds.map(async id => [id, await getOrFetchAvatarBlob(id)] as const)).then(entries => {
+            if (cancelled) return;
+            setAvatarBlobs(prev => {
+                const next = { ...prev };
+                entries.forEach(([id, url]) => {
+                    if (url) next[id] = url;
+                });
+                return next;
+            });
+        });
+
+        return () => {
+            cancelled = true;
+        };
+    }, [annotation, getOrFetchAvatarBlob]);
+
+    const threadMessages: TextMessageTypeV2[] = React.useMemo(() => {
+        if (!annotation) return [];
+        return annotationToMessages(annotation).map(msg => ({
+            ...msg,
+            author: {
+                ...msg.author,
+                avatarUrl: avatarBlobs[String(msg.author.id)],
+            },
+        }));
+    }, [annotation, avatarBlobs]);
+
+    const isResolved = annotation?.status === 'resolved';
+    const resolvedBy = isResolved
+        ? annotation?.resolution?.resolved_by?.name ?? annotation?.modified_by?.name
+        : undefined;
+    const resolvedAtSource = isResolved
+        ? annotation?.resolution?.resolved_at ?? annotation?.modified_at
+        : undefined;
+    const resolvedAt = resolvedAtSource ? new Date(resolvedAtSource).getTime() : undefined;
+
+    const userSelectorProps = React.useMemo(
+        () => ({
+            allowEmptyQuery: true,
+            ariaRoleDescription: intl.formatMessage(messages.ariaLabelMentionSelector),
+            fetchAvatarUrls: async (userContacts: UserContactType[]): Promise<FetchedAvatarUrls> => {
+                const urls: FetchedAvatarUrls = {};
+                await Promise.all(
+                    userContacts.map(async ({ id }) => {
+                        const key = String(id);
+                        const blobUrl = await getOrFetchAvatarBlob(key);
+                        if (blobUrl) {
+                            urls[key] = blobUrl;
+                        }
+                    }),
+                );
+                return urls;
+            },
+            fetchUsers: async (query: string) => {
+                const action = await dispatch(fetchCollaboratorsAction(query));
+                if (fetchCollaboratorsAction.fulfilled.match(action)) {
+                    return action.payload.entries.map(collaboratorToUserContact);
+                }
+                return [];
+            },
+            loadingAriaLabel: intl.formatMessage(messages.ariaLabelMentionLoading),
+        }),
+        [dispatch, getOrFetchAvatarBlob, intl],
+    );
+
+    const handlePost = React.useCallback(
+        async (content: JSONContent | null): Promise<void> => {
+            const doc = createDocumentNode(content);
+            const { text } = serializeMentionMarkup(doc);
+            if (annotationId) {
+                await dispatch(createReplyAction({ annotationId, message: text }));
+            } else {
+                onSubmit(text);
+            }
+        },
+        [annotationId, dispatch, onSubmit],
+    );
+
+    const handleThreadDelete = React.useCallback(
+        async (): Promise<void> => {
+            if (annotationId) {
+                await dispatch(deleteAnnotationAction(annotationId));
+            }
+        },
+        [annotationId, dispatch],
+    );
+
+    const handleResolve = React.useCallback(
+        async (): Promise<void> => {
+            if (!annotationId) return;
+            const result = await dispatch(updateAnnotationAction({ annotationId, payload: { status: 'resolved' } }));
+            if (updateAnnotationAction.fulfilled.match(result)) {
+                dispatch(setActiveAnnotationIdAction(null));
+            }
+        },
+        [annotationId, dispatch],
+    );
+
+    const handleUnresolve = React.useCallback(
+        async (): Promise<void> => {
+            if (!annotationId) return;
+            await dispatch(updateAnnotationAction({ annotationId, payload: { status: 'open' } }));
+        },
+        [annotationId, dispatch],
+    );
+
+    if (!popupPortalEl) return null;
+
+    return ReactDOM.createPortal(
+        <FocusTrap>
+            <div
+                ref={popupRef}
+                aria-label={intl.formatMessage(messages.ariaLabelComment)}
+                className="ba-PopupV2"
+                data-resin-component={annotationId ? 'popupThreadV2' : 'popupReplyV2'}
+                onClick={handleEvent}
+                onMouseDown={handleEvent}
+                onMouseMove={handleEvent}
+                onMouseUp={handleEvent}
+                onTouchMove={handleEvent}
+                onTouchStart={handleEvent}
+                role="presentation"
+            >
+                <BlueprintModernizationProvider enableModernizedComponents>
+                    <MentionContextProvider value={{
+                        collaborationPopoverProps: {
+                            onSubmit: () => Promise.resolve(),
+                        },
+                    }}>
+                        {annotationId ? (
+                            <ThreadedAnnotationsV2
+                                isAnnotations
+                                isResolved={isResolved}
+                                messages={threadMessages}
+                                onAvatarClick={noop}
+                                onDelete={noop}
+                                onPost={handlePost}
+                                onResolve={handleResolve}
+                                onThreadDelete={handleThreadDelete}
+                                onUnresolve={handleUnresolve}
+                                resolvedAt={resolvedAt}
+                                resolvedBy={resolvedBy}
+                                userSelectorProps={userSelectorProps}
+                            />
+                        ) : (
+                            <MessageEditorV2
+                                isFirstAnnotation
+                                onPost={handlePost}
+                                userSelectorProps={userSelectorProps}
+                            />
+                        )}
+                    </MentionContextProvider>
+                </BlueprintModernizationProvider>
+                <div data-threaded-annotations-portal />
+            </div>
+        </FocusTrap>,
+        popupPortalEl,
+    );
+};
+
+export default PopupV2;

package/src/components/Popups/messages.ts

@@ -6,6 +6,16 @@ export default defineMessages({
         description: 'Aria label description for reply popup',
         defaultMessage: 'Comment',
     },
+    ariaLabelMentionLoading: {
+        id: 'ba.popup.reply.mentionLoading',
+        description: 'Aria label for mention selector loading state',
+        defaultMessage: 'Loading users...',
+    },
+    ariaLabelMentionSelector: {
+        id: 'ba.popup.reply.mentionSelector',
+        description: 'Aria role description for mention user selector',
+        defaultMessage: 'Mention a collaborator',
+    },
     ariaLabelReplyField: {
         id: 'ba.popup.reply.field',
         description: 'Aria label description for annotation comment field',

package/src/document/DocumentAnnotator.ts

@@ -15,7 +15,7 @@ import { getAnnotation } from '../store/annotations';
 import { BoundingBox } from '../store/boundingBoxHighlights';
 import { getSelection } from './docUtil';
 import { Manager } from '../common/BaseManager';
-import { getFileId, getIsCurrentFileVersion, getViewMode, Mode } from '../store';
+import { getFileId, getIsCurrentFileVersion, getRotation, getViewMode, Mode } from '../store';
 import { scrollToLocation } from '../utils/scroll';
 import './DocumentAnnotator.scss';
 
@@ -24,6 +24,9 @@ import type { ViewMode } from '../store/options/types';
 // Pdf.js textLayer enhancement requires waiting for 300ms (they hardcode this magic number)
 const TEXT_LAYER_ENHANCEMENT = 300;
 
+// Vertical padding on each page element as provided by Preview SDK (see DocumentAnnotator.scss)
+const PAGE_PADDING = 15;
+
 export default class DocumentAnnotator extends BaseAnnotator {
     annotatedEl?: HTMLElement;
 
@@ -99,7 +102,7 @@ export default class DocumentAnnotator extends BaseAnnotator {
             }
 
             // Annotations mode
-            managers.add(new PopupManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }));
+            managers.add(new PopupManager({ location: pageNumber, popupPortalEl: this.popupPortalEl, referenceEl: pageReferenceEl, resinTags }));
             managers.add(new DrawingManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }));
 
             const textLayer = pageEl.querySelector('.textLayer') as HTMLElement;
@@ -196,14 +199,35 @@ export default class DocumentAnnotator extends BaseAnnotator {
     renderPage(pageEl: HTMLElement): void {
         const pageManagers = this.getPageManagers(pageEl);
         const pageNumber = this.getPageNumber(pageEl);
+        const rotation = getRotation(this.store.getState()) || 0;
+
+        // Calculate original (unrotated) page dimensions for annotation layer sizing
+        const pageWidth = pageEl.clientWidth;
+        const pageHeight = pageEl.clientHeight - PAGE_PADDING * 2;
+        const isOrthogonal = rotation % 180 !== 0;
+        const origWidth = isOrthogonal ? pageHeight : pageWidth;
+        const origHeight = isOrthogonal ? pageWidth : pageHeight;
 
         // Render annotations for every page
-        pageManagers.forEach(manager =>
+        pageManagers.forEach(manager => {
+            // Apply rotation transform to annotation layers
+            if (rotation) {
+                manager.style({
+                    height: `${origHeight}px`,
+                    left: '50%',
+                    top: '50%',
+                    transform: `translate(-50%, -50%) rotate(${rotation}deg)`,
+                    width: `${origWidth}px`,
+                });
+            } else {
+                manager.style({height: '', left: '', top: '', transform: '', width: ''});
+            }
+
             manager.render({
                 intl: this.intl,
                 store: this.store,
-            }),
-        );
+            });
+        });
 
         this.managers.set(pageNumber, pageManagers);
     }

package/src/drawing/DrawingTarget.tsx

@@ -64,6 +64,7 @@ export const DrawingTarget = (props: Props, ref: React.Ref<DrawingTargetRef>): J
         <a
             ref={ref}
             className={classNames('ba-DrawingTarget', className, { 'is-active': isActive })}
+            data-ba-annotation-id={annotationId}
             data-resin-itemid={annotationId}
             data-resin-target="highlightDrawing"
             data-testid={`ba-AnnotationTarget-${annotationId}`}

package/src/highlight/HighlightTarget.tsx

@@ -69,6 +69,7 @@ const HighlightTarget = (props: Props, ref: React.Ref<HighlightTargetRef>): JSX.
         <a
             ref={ref}
             className={classNames('ba-HighlightTarget', className, { 'is-active': isActive })}
+            data-ba-annotation-id={annotationId}
             data-ba-reference-id={uuid}
             data-resin-itemid={annotationId}
             data-resin-target="highlightText"

package/src/image/ImageAnnotator.ts

@@ -73,7 +73,7 @@ export default class ImageAnnotator extends BaseAnnotator {
                 return this.managers;
             }
 
-            this.managers.add(new PopupManager({ referenceEl, resinTags }));
+            this.managers.add(new PopupManager({ popupPortalEl: this.popupPortalEl, referenceEl, resinTags }));
             this.managers.add(new DrawingManager({ referenceEl, resinTags }));
             this.managers.add(new RegionManager({ referenceEl, resinTags }));
             this.managers.add(new RegionCreationManager({ referenceEl, resinTags }));

package/src/media/MediaAnnotator.ts

@@ -46,7 +46,7 @@ export default class MediaAnnotator extends BaseAnnotator {
 
 
     addManagers(referenceEl: HTMLVideoElement, resinTags: { fileid: string|null; iscurrent: boolean }): void {
-        this.managers.add(new PopupManager({ location: MEDIA_LOCATION_INDEX, referenceEl, resinTags, targetType: TARGET_TYPE.FRAME }));
+        this.managers.add(new PopupManager({ location: MEDIA_LOCATION_INDEX, popupPortalEl: this.popupPortalEl, referenceEl, resinTags, targetType: TARGET_TYPE.FRAME }));
         this.managers.add(new DrawingManager({ location: MEDIA_LOCATION_INDEX, referenceEl, resinTags, targetType: TARGET_TYPE.FRAME }));
         this.managers.add(new RegionManager({ location: MEDIA_LOCATION_INDEX, referenceEl, resinTags, targetType: TARGET_TYPE.FRAME }));
         this.managers.add(new RegionCreationManager({ location: MEDIA_LOCATION_INDEX, referenceEl, resinTags, targetType: TARGET_TYPE.FRAME }));

package/src/popup/PopupContainer.tsx

@@ -15,12 +15,21 @@ import {
     setMessageAction,
     getCreatorReferenceId,
 } from '../store';
+import { getActiveAnnotationId } from '../store/annotations/selectors';
 import { isFeatureEnabled } from '../store/options';
 import { createDrawingAction } from '../drawing/actions';
 import { createHighlightAction } from '../highlight/actions';
 import { createRegionAction } from '../region';
+import { TARGET_TYPE } from '../constants';
+
+export type OwnProps = {
+    location: number;
+    popupPortalEl?: HTMLElement | null;
+    targetType?: TARGET_TYPE;
+};
 
 export type Props = {
+    activeAnnotationId: string | null;
     isPromoting: boolean;
     isThreadedAnnotation?: boolean;
     message: string;
@@ -30,8 +39,9 @@ export type Props = {
     status: CreatorStatus;
 };
 
-export const mapStateToProps = (state: AppState, { location }: { location: number }): Props => {
+export const mapStateToProps = (state: AppState, { location }: OwnProps): Props => {
     return {
+        activeAnnotationId: getActiveAnnotationId(state),
         isPromoting: getIsPromoting(state),
         isThreadedAnnotation: isFeatureEnabled(state, 'isThreadedAnnotation'),
         message: getCreatorMessage(state),

package/src/popup/PopupLayer.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import noop from 'lodash/noop';
 import PopupReply from '../components/Popups/PopupReply';
+import PopupV2 from '../components/Popups/PopupV2';
 import { CreateArg as DrawingCreateArg } from '../drawing/actions';
 import { CreateArg as HighlightCreateArg } from '../highlight/actions';
 import { CreateArg as RegionCreateArg } from '../region/actions';
@@ -13,10 +14,13 @@ import {
     Mode,
 } from '../store';
 import { PopupReference } from '../components/Popups/Popper';
-import './PopupLayer.scss';
+
 import { TARGET_TYPE } from '../constants';
 
+import './PopupLayer.scss';
+
 export type Props = {
+    activeAnnotationId: string | null;
     createDrawing?: (arg: DrawingCreateArg) => void;
     createHighlight?: (arg: HighlightCreateArg) => void;
     createRegion?: (arg: RegionCreateArg) => void;
@@ -25,6 +29,7 @@ export type Props = {
     location: number;
     message: string;
     mode: Mode;
+    popupPortalEl?: HTMLElement | null;
     referenceId: string | null;
     resetCreator: () => void;
     setMessage: (message: string) => void;
@@ -41,6 +46,7 @@ const modeStagedMap: { [M in Mode]?: (staged: CreatorItem | null) => boolean } =
 
 const PopupLayer = (props: Props): JSX.Element | null => {
     const {
+        activeAnnotationId,
         createDrawing = noop,
         createHighlight = noop,
         createRegion = noop,
@@ -48,6 +54,7 @@ const PopupLayer = (props: Props): JSX.Element | null => {
         isThreadedAnnotation = false,
         message,
         mode,
+        popupPortalEl,
         referenceId,
         resetCreator,
         setMessage,
@@ -57,6 +64,7 @@ const PopupLayer = (props: Props): JSX.Element | null => {
     } = props;
 
     const [reference, setReference] = React.useState<PopupReference | null>(null);
+    const [activeReference, setActiveReference] = React.useState<PopupReference | null>(null);
     const canCreate = (modeStagedMap[mode]?.(staged ?? null) ?? false) || isPromoting;
     const canReply = status !== CreatorStatus.started && status !== CreatorStatus.init;
     const isPending = status === CreatorStatus.pending;
@@ -69,17 +77,19 @@ const PopupLayer = (props: Props): JSX.Element | null => {
         setMessage(text);
     };
 
-    const handleSubmit = (): void => {
+    const handleSubmit = (text?: string): void => {
         if (!staged) {
             return;
         }
 
+        const submitMessage = text ?? message;
+
         if (isCreatorStagedHighlight(staged)) {
-            createHighlight({ ...staged, message, targetType });
+            createHighlight({ ...staged, message: submitMessage, targetType });
         } else if (isCreatorStagedRegion(staged)) {
-            createRegion({ ...staged, message, targetType });
+            createRegion({ ...staged, message: submitMessage, targetType });
         } else if (isCreatorStagedDrawing(staged)) {
-            createDrawing({ ...staged, message, targetType });
+            createDrawing({ ...staged, message: submitMessage, targetType });
         }
     };
 
@@ -87,24 +97,58 @@ const PopupLayer = (props: Props): JSX.Element | null => {
         setReference(referenceId ? document.querySelector(`[data-ba-reference-id="${referenceId}"]`) : null);
     }, [referenceId]);
 
+    React.useEffect(() => {
+        if (activeAnnotationId && isThreadedAnnotation) {
+            const el = document.querySelector(`[data-ba-annotation-id="${CSS.escape(activeAnnotationId)}"]`);
+            setActiveReference(el);
+        } else {
+            setActiveReference(null);
+        }
+    }, [activeAnnotationId, isThreadedAnnotation]);
+
+    const showCreator = canCreate && canReply && reference && staged;
+
+    if (showCreator && isThreadedAnnotation) {
+        return (
+            <div className="ba-PopupLayer-popup">
+                <PopupV2
+                    onSubmit={handleSubmit}
+                    popupPortalEl={popupPortalEl}
+                    reference={reference}
+                />
+            </div>
+        );
+    }
+
+    if (showCreator) {
+        return (
+            <div className="ba-PopupLayer-popup">
+                <PopupReply
+                    isPending={isPending}
+                    onCancel={handleCancel}
+                    onChange={handleChange}
+                    onSubmit={handleSubmit}
+                    reference={reference}
+                    value={message}
+                />
+            </div>
+        );
+    }
+
+    if (isThreadedAnnotation && activeAnnotationId && activeReference) {
+        return (
+            <div className="ba-PopupLayer-popup">
+                <PopupV2
+                    annotationId={activeAnnotationId}
+                    onSubmit={handleSubmit}
+                    popupPortalEl={popupPortalEl}
+                    reference={activeReference}
+                />
+            </div>
+        );
+    }
 
-    return (
-        <>
-            {canCreate && canReply && reference && staged && (
-                <div className="ba-PopupLayer-popup">
-                    <PopupReply
-                        isPending={isPending}
-                        isThreadedAnnotation={isThreadedAnnotation}
-                        onCancel={handleCancel}
-                        onChange={handleChange}
-                        onSubmit={handleSubmit}
-                        reference={reference}
-                        value={message}
-                    />
-                </div>
-            )}
-        </>
-    );
+    return null;
 };
 
 export default PopupLayer;

package/src/popup/PopupManager.tsx

@@ -1,9 +1,20 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
-import BaseManager, { Props } from '../common/BaseManager';
+import BaseManager, { Options as BaseOptions, Props } from '../common/BaseManager';
 import PopupContainer from './PopupContainer';
 
+export type Options = BaseOptions & {
+    popupPortalEl?: HTMLElement | null;
+};
+
 export default class PopupManager extends BaseManager {
+    popupPortalEl?: HTMLElement | null;
+
+    constructor({ popupPortalEl, ...options }: Options) {
+        super(options);
+        this.popupPortalEl = popupPortalEl;
+    }
+
     decorate(): void {
         this.reactEl.classList.add('ba-Layer--popup');
         this.reactEl.dataset.testid = 'ba-Layer--popup';
@@ -13,7 +24,14 @@ export default class PopupManager extends BaseManager {
         if (!this.root) {
             this.root = ReactDOM.createRoot(this.reactEl);
         }
-       
-        this.root.render(<PopupContainer location={this.location}  {...props} targetType={this.targetType} />);
+
+        this.root.render(
+            <PopupContainer
+                location={this.location}
+                {...props}
+                popupPortalEl={this.popupPortalEl}
+                targetType={this.targetType}
+            />,
+        );
     }
 }

package/src/region/RegionAnnotation.tsx

@@ -36,6 +36,7 @@ export const RegionAnnotation = (props: Props, ref: React.Ref<RegionAnnotationRe
         <button
             ref={ref}
             className={classNames('ba-RegionAnnotation', className, { 'is-active': isActive })}
+            data-ba-annotation-id={annotationId}
             data-resin-itemid={annotationId}
             data-resin-target="highlightRegion"
             data-testid={`ba-AnnotationTarget-${annotationId}`}