box-annotations 5.2.1-beta.1 → 5.2.1-beta.12

package/src/common/BaseAnnotator.ts

@@ -7,7 +7,10 @@ import EventEmitter from './EventEmitter';
 import i18n from '../utils/i18n';
 import messages from '../messages';
 import { Event, IntlOptions, LegacyEvent, Permissions } from '../@types';
+import { BoundingBox, getBoundingBoxHighlights } from '../store/boundingBoxHighlights';
+import { ViewMode } from '../store/options/types';
 import { Features } from '../BoxAnnotations';
+import { scrollToLocation } from '../utils/scroll';
 import './BaseAnnotator.scss';
 
 export type Container = string | HTMLElement;
@@ -37,6 +40,8 @@ export type Options = {
     hasTouch?: boolean;
     initialColor?: string;
     initialMode?: store.Mode;
+    /** View mode: annotations and bounding boxes are mutually exclusive. Defaults to 'annotations'. */
+    initialViewMode?: ViewMode;
     intl: IntlOptions;
     locale?: string;
     token: string;
@@ -44,6 +49,7 @@ export type Options = {
 
 export const CSS_CONTAINER_CLASS = 'ba';
 export const CSS_LOADED_CLASS = 'ba-annotations-loaded';
+export const CSS_POPUP_PORTAL_CLASS = 'ba-PopupPortal';
 export const ANNOTATION_CLASSES: { [M in store.Mode]?: string } = {
     [store.Mode.HIGHLIGHT]: 'ba-is-create--highlight',
     [store.Mode.REGION]: 'ba-is-create--region',
@@ -54,6 +60,8 @@ export default class BaseAnnotator extends EventEmitter {
 
     containerEl?: HTMLElement | null;
 
+    popupPortalEl?: HTMLElement | null;
+
     container: Container;
 
     deselectManager: DeselectManager | null = null;
@@ -72,6 +80,7 @@ export default class BaseAnnotator extends EventEmitter {
         fileOptions,
         initialColor,
         initialMode,
+        initialViewMode = 'annotations',
         intl,
         token,
     }: Options) {
@@ -88,11 +97,14 @@ export default class BaseAnnotator extends EventEmitter {
             },
             common: { color: initialColor, mode: initialMode },
             options: {
+                apiHost,
                 features,
                 fileId: file.id,
                 fileVersionId: fileOptionsVersionId ?? fileVersionId,
                 isCurrentFileVersion: !fileOptionsVersionId || fileOptionsVersionId === currentFileVersionId,
                 permissions: file.permissions,
+                token,
+                viewMode: initialViewMode,
             },
         };
 
@@ -109,6 +121,10 @@ export default class BaseAnnotator extends EventEmitter {
         this.addListener(Event.ANNOTATION_REMOVE, this.handleRemove);
         this.addListener(Event.COLOR_SET, this.handleSetColor);
         this.addListener(Event.VISIBLE_SET, this.handleSetVisible);
+        this.addListener(Event.BOUNDING_BOX_HIGHLIGHTS_SET, this.handleSetBoundingBoxHighlights);
+        this.addListener(Event.BOUNDING_BOX_HIGHLIGHT_NAVIGATE, this.handleNavigateBoundingBoxHighlight);
+        this.addListener(Event.BOUNDING_BOX_HIGHLIGHT_SELECT, this.handleSelectBoundingBoxHighlight);
+        this.addListener(Event.VIEW_MODE_SET, this.handleSetViewMode);
 
         // Load any required data at startup
         this.hydrate();
@@ -119,6 +135,11 @@ export default class BaseAnnotator extends EventEmitter {
             this.containerEl.classList.remove(CSS_CONTAINER_CLASS);
         }
 
+        if (this.popupPortalEl) {
+            this.popupPortalEl.remove();
+            this.popupPortalEl = null;
+        }
+
         if (this.annotatedEl) {
             this.annotatedEl.classList.remove(CSS_LOADED_CLASS);
         }
@@ -134,6 +155,10 @@ export default class BaseAnnotator extends EventEmitter {
         this.removeListener(Event.ANNOTATION_REMOVE, this.handleRemove);
         this.removeListener(Event.COLOR_SET, this.handleSetColor);
         this.removeListener(Event.VISIBLE_SET, this.handleSetVisible);
+        this.removeListener(Event.BOUNDING_BOX_HIGHLIGHTS_SET, this.handleSetBoundingBoxHighlights);
+        this.removeListener(Event.BOUNDING_BOX_HIGHLIGHT_NAVIGATE, this.handleNavigateBoundingBoxHighlight);
+        this.removeListener(Event.BOUNDING_BOX_HIGHLIGHT_SELECT, this.handleSelectBoundingBoxHighlight);
+        this.removeListener(Event.VIEW_MODE_SET, this.handleSetViewMode);
     }
 
     public init(scale = 1, rotation = 0): void {
@@ -149,6 +174,12 @@ export default class BaseAnnotator extends EventEmitter {
         this.annotatedEl.classList.add(CSS_LOADED_CLASS);
         this.containerEl.classList.add(CSS_CONTAINER_CLASS);
 
+        if (!this.popupPortalEl) {
+            this.popupPortalEl = this.containerEl.ownerDocument.createElement('div');
+            this.popupPortalEl.classList.add(CSS_POPUP_PORTAL_CLASS);
+            this.containerEl.appendChild(this.popupPortalEl);
+        }
+
         // Defer to the child class to render annotations
         this.render();
 
@@ -171,6 +202,88 @@ export default class BaseAnnotator extends EventEmitter {
         // Called by box-content-preview
     }
 
+    public scrollToBoundingBoxHighlight(highlightId: string | null): void {
+        if (!highlightId || !this.annotatedEl) {
+            return;
+        }
+
+        const highlights = getBoundingBoxHighlights(this.store.getState());
+        const highlight = highlights.find((h: BoundingBox) => h.id === highlightId);
+
+        if (!highlight) {
+            return;
+        }
+
+        const referenceEl = this.getScrollReferenceForHighlight(highlight);
+        if (!referenceEl) {
+            return;
+        }
+
+        const offsets = {
+            x: highlight.x + highlight.width / 2,
+            y: highlight.y + highlight.height / 2,
+        };
+
+        scrollToLocation(this.annotatedEl, referenceEl, {
+            offsets: this.getAdjustedScrollOffsets(offsets),
+            smooth: true,
+        });
+    }
+
+    /** Returns the element to scroll relative to for the given bounding box highlight. */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    protected getScrollReferenceForHighlight(_highlight: BoundingBox): HTMLElement | null | undefined {
+        return undefined; // Must be implemented in child class
+    }
+
+    /** Adjusts scroll offsets before passing to scrollToLocation (e.g. to apply rotation). */
+    protected getAdjustedScrollOffsets(offsets: { x: number; y: number }): { x: number; y: number } {
+        return offsets;
+    }
+
+    /**
+     * Sets the bounding box highlights to display. This replaces all existing bounding boxes.
+     * Triggers a re-render.
+     *
+     * Note: Bounding boxes are only visible when viewMode is set to 'boundingBoxes'.
+     *
+     * @param {BoundingBox[]} boundingBoxes - Array of bounding box definitions with coordinates and page numbers
+     */
+    public setBoundingBoxHighlights(boundingBoxes: BoundingBox[]): void {
+        this.store.dispatch(store.setBoundingBoxHighlightsAction(boundingBoxes));
+        this.render();
+    }
+
+    /**
+     * Sets the view mode for the annotator. Annotations and bounding boxes are mutually exclusive.
+     * Triggers a re-render.
+     *
+     * Side effects:
+     * - Switching to 'boundingBoxes': Clears active annotation ID
+     * - Switching to 'annotations': Clears selected bounding box ID
+     *
+     * @param {ViewMode} viewMode - Either 'annotations' (default) or 'boundingBoxes'
+     */
+    public setViewMode(viewMode: ViewMode): void {
+        this.store.dispatch(store.setViewModeAction(viewMode));
+        this.render();
+    }
+
+    /**
+     * Selects a bounding box highlight and scrolls to it. Pass null to deselect.
+     *
+     * Note: For programmatic navigation (prev/next), use the navigateBoundingBoxHighlightAction
+     * which emits BOUNDING_BOX_HIGHLIGHT_NAVIGATE events.
+     *
+     * @param {string | null} highlightId - The ID of the bounding box to select, or null to clear selection
+     */
+    public selectBoundingBoxHighlight(highlightId: string | null): void {
+        this.store.dispatch(store.setSelectedBoundingBoxHighlightAction(highlightId));
+        if (highlightId) {
+            this.scrollToBoundingBoxHighlight(highlightId);
+        }
+    }
+
     public setActiveId(annotationId: string | null): void {
         this.store.dispatch(store.setActiveAnnotationIdAction(annotationId));
     }
@@ -223,6 +336,22 @@ export default class BaseAnnotator extends EventEmitter {
         this.setColor(color);
     };
 
+    protected handleSetBoundingBoxHighlights = (boundingBoxes: BoundingBox[]): void => {
+        this.setBoundingBoxHighlights(boundingBoxes);
+    };
+
+    protected handleNavigateBoundingBoxHighlight = (highlightId: string): void => {
+        this.scrollToBoundingBoxHighlight(highlightId);
+    };
+
+    protected handleSelectBoundingBoxHighlight = (highlightId: string | null): void => {
+        this.selectBoundingBoxHighlight(highlightId);
+    };
+
+    protected handleSetViewMode = ({ viewMode }: { viewMode: ViewMode }): void => {
+        this.setViewMode(viewMode);
+    };
+
     protected hydrate(): void {
         // Redux dispatch method signature doesn't seem to like async actions
         this.store.dispatch<any>(store.fetchAnnotationsAction()); // eslint-disable-line @typescript-eslint/no-explicit-any

package/src/common/DeselectListener.tsx

@@ -6,7 +6,9 @@ export default function DeselectListener(): null {
     const dispatch = useDispatch();
 
     React.useEffect(() => {
-        const handleMouseDown = (): void => {
+        const handleMouseDown = (event: MouseEvent): void => {
+            // Popup is portaled outside .ba-Layer; native mousedown still bubbles here.
+            if ((event.target as Element | null)?.closest?.('.ba-PopupV2, .ba-Popup')) return;
             dispatch(setActiveAnnotationIdAction(null));
         };
 

package/src/components/BoundingBoxHighlight/BoundingBoxHighlightList.scss

@@ -0,0 +1,8 @@
+.ba-BoundingBoxHighlightList {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}

package/src/components/BoundingBoxHighlight/BoundingBoxHighlightList.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import BoundingBoxHighlightRect from './BoundingBoxHighlightRect';
+import { BoundingBox } from '../../store/boundingBoxHighlights/types';
+import './BoundingBoxHighlightList.scss';
+
+type Props = {
+    /**
+     * All bounding box highlights in the document.
+     */
+    allBoundingBoxes: BoundingBox[];
+    /**
+     * Bounding boxes on the current page.
+     */
+    boundingBoxes: BoundingBox[];
+    /**
+     * Callback invoked to navigate to the previous or next bounding box highlight.
+     */
+    onNavigate?: (id: string) => void;
+    /**
+     * Callback invoked when the user clicks on a bounding box highlight.
+     */
+    onSelect?: (id: string) => void;
+    /**
+     * The ID of the selected bounding box highlight.
+     */
+    selectedId: string | null;
+};
+
+const BoundingBoxHighlightList = ({
+    allBoundingBoxes,
+    boundingBoxes,
+    onNavigate,
+    onSelect,
+    selectedId,
+}: Props): React.ReactElement | null => {
+    const total = allBoundingBoxes.length;
+
+    if (total === 0) {
+        return null;
+    }
+
+    const selectedIndex = allBoundingBoxes.findIndex(h => h.id === selectedId);
+    const prevId = selectedIndex > 0 ? allBoundingBoxes[selectedIndex - 1].id : undefined;
+    const nextId = selectedIndex < total - 1 ? allBoundingBoxes[selectedIndex + 1].id : undefined;
+
+    return (
+        <div className="ba-BoundingBoxHighlightList" data-testid="ba-BoundingBoxHighlightList">
+            {boundingBoxes.map(bbox => {
+                return (
+                    <BoundingBoxHighlightRect
+                        key={bbox.id}
+                        boundingBox={bbox}
+                        currentIndex={selectedIndex}
+                        isSelected={selectedId === bbox.id}
+                        nextId={nextId}
+                        onNavigate={onNavigate}
+                        onSelect={onSelect}
+                        prevId={prevId}
+                        total={total}
+                    />
+                );
+            })}
+        </div>
+    );
+};
+
+export default React.memo(BoundingBoxHighlightList);

package/src/components/BoundingBoxHighlight/BoundingBoxHighlightNav.scss

@@ -0,0 +1,73 @@
+$ba-BoundingBoxHighlightNav-bg: #fff;
+$ba-BoundingBoxHighlightNav-shadow: 0 6px 20px rgba(0, 0, 0, .1);
+$ba-BoundingBoxHighlightNav-arrow: #909090;
+$ba-BoundingBoxHighlightNav-border: #e8e8e8;
+$ba-BoundingBoxHighlightNav-counter: #222;
+
+.ba-BoundingBoxHighlightNav {
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    z-index: 1;
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    margin-bottom: 6px;
+    padding: 3px;
+    white-space: nowrap;
+    background: $ba-BoundingBoxHighlightNav-bg;
+    border: 1px solid $ba-BoundingBoxHighlightNav-border;
+    border-radius: 20px;
+    box-shadow: $ba-BoundingBoxHighlightNav-shadow;
+    transform: translateX(-50%);
+    cursor: default;
+    pointer-events: auto;
+}
+
+.ba-BoundingBoxHighlightNav-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    line-height: 1;
+    background: transparent;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: background-color 150ms ease;
+
+    svg {
+        path {
+            fill: $ba-BoundingBoxHighlightNav-arrow;
+        }
+    }
+
+    &:hover:not(:disabled) {
+        background: rgba(0, 0, 0, .06);
+    }
+
+    &:active:not(:disabled) {
+        background: rgba(0, 0, 0, .12);
+    }
+
+    &:disabled {
+        cursor: default;
+
+        svg {
+            path {
+                fill: $ba-BoundingBoxHighlightNav-border;
+            }
+        }
+    }
+}
+
+.ba-BoundingBoxHighlightNav-counter {
+    padding: 0 4px;
+    color: $ba-BoundingBoxHighlightNav-counter;
+    font-weight: normal;
+    font-size: 15px;
+    font-family: Lato, Arial, sans-serif;
+    user-select: none;
+}

package/src/components/BoundingBoxHighlight/BoundingBoxHighlightNav.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { useIntl } from 'react-intl';
+import ChevronLeft from '../../icons/ChevronLeft';
+import ChevronRight from '../../icons/ChevronRight';
+import messages from './messages';
+import './BoundingBoxHighlightNav.scss';
+
+type Props = {
+    currentIndex: number;
+    total: number;
+    onPrev: (event: React.MouseEvent | KeyboardEvent) => void;
+    onNext: (event: React.MouseEvent | KeyboardEvent) => void;
+};
+
+const BoundingBoxHighlightNav = ({ currentIndex, total, onPrev, onNext }: Props): JSX.Element => {
+    const intl = useIntl();
+    const isPrevDisabled = currentIndex === 0;
+    const isNextDisabled = currentIndex === total - 1;
+
+    React.useEffect(() => {
+        const handleKeyDown = (event: KeyboardEvent): void => {
+            if (event.key === 'ArrowLeft') {
+                event.stopPropagation();
+                if (!isPrevDisabled) {
+                    onPrev(event);
+                }
+            } else if (event.key === 'ArrowRight') {
+                event.stopPropagation();
+                if (!isNextDisabled) {
+                    onNext(event);
+                }
+            }
+        };
+
+        document.addEventListener('keydown', handleKeyDown, { capture: true });
+        return () => document.removeEventListener('keydown', handleKeyDown, { capture: true });
+    }, [isPrevDisabled, isNextDisabled, onPrev, onNext]);
+
+    return (
+        <div className="ba-BoundingBoxHighlightNav" data-testid="ba-BoundingBoxHighlightNav">
+            <button
+                aria-label={intl.formatMessage(messages.ariaLabelViewPrevReference)}
+                className="ba-BoundingBoxHighlightNav-btn"
+                data-testid="ba-BoundingBoxHighlightNav-prev"
+                disabled={isPrevDisabled}
+                onClick={onPrev}
+                type="button"
+            >
+                <ChevronLeft width={20} height={20} />
+            </button>
+            <span className="ba-BoundingBoxHighlightNav-counter">
+                {currentIndex + 1} / {total}
+            </span>
+            <button
+                aria-label={intl.formatMessage(messages.ariaLabelViewNextReference)}
+                className="ba-BoundingBoxHighlightNav-btn"
+                data-testid="ba-BoundingBoxHighlightNav-next"
+                disabled={isNextDisabled}
+                onClick={onNext}
+                type="button"
+            >
+                <ChevronRight width={20} height={20} />
+            </button>
+        </div>
+    );
+};
+
+export default BoundingBoxHighlightNav;

package/src/components/BoundingBoxHighlight/BoundingBoxHighlightRect.scss

@@ -0,0 +1,22 @@
+$ba-BoundingBoxHighlight-color: #0061d5;
+$ba-BoundingBoxHighlight-bgColor--default: rgba($ba-BoundingBoxHighlight-color, .05);
+$ba-BoundingBoxHighlight-bgColor--hover: rgba($ba-BoundingBoxHighlight-color, .16);
+$ba-BoundingBoxHighlight-bgColor--selected: rgba($ba-BoundingBoxHighlight-color, .1);
+
+.ba-BoundingBoxHighlightRect {
+    position: absolute;
+    box-sizing: border-box;
+    background-color: $ba-BoundingBoxHighlight-bgColor--default;
+    border: 2px solid rgba($ba-BoundingBoxHighlight-color, .2);
+    border-radius: 8px;
+    outline: none;
+    cursor: pointer;
+    transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
+    pointer-events: auto;
+
+    &.is-selected {
+        background-color: $ba-BoundingBoxHighlight-bgColor--selected;
+        border-color: $ba-BoundingBoxHighlight-color;
+        box-shadow: 0 0 0 2px rgba($ba-BoundingBoxHighlight-color, .3), 0 4px 12px rgba(0, 0, 0, .15);
+    }
+}

package/src/components/BoundingBoxHighlight/BoundingBoxHighlightRect.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import BoundingBoxHighlightNav from './BoundingBoxHighlightNav';
+import { BoundingBox } from '../../store/boundingBoxHighlights/types';
+import './BoundingBoxHighlightRect.scss';
+
+type Props = {
+    boundingBox: BoundingBox;
+    currentIndex: number;
+    isSelected?: boolean;
+    onNavigate?: (id: string) => void;
+    onSelect?: (id: string) => void;
+    total: number;
+    prevId?: string;
+    nextId?: string;
+};
+
+const BoundingBoxHighlightRect = ({
+    boundingBox,
+    currentIndex,
+    isSelected,
+    onNavigate,
+    onSelect,
+    total,
+    prevId,
+    nextId,
+}: Props): JSX.Element => {
+    const { id, x, y, width, height } = boundingBox;
+
+    const style: React.CSSProperties = {
+        display: 'block',
+        left: `${x}%`,
+        top: `${y}%`,
+        width: `${width}%`,
+        height: `${height}%`,
+    };
+
+    const handleClick = (event: React.MouseEvent): void => {
+        event.stopPropagation();
+        onSelect?.(id);
+    };
+
+    const handlePrev = (event: React.MouseEvent | KeyboardEvent): void => {
+        event.stopPropagation();
+        if (prevId) {
+            onNavigate?.(prevId);
+        }
+    };
+
+    const handleNext = (event: React.MouseEvent | KeyboardEvent): void => {
+        event.stopPropagation();
+        if (nextId) {
+            onNavigate?.(nextId);
+        }
+    };
+
+    return (
+        <div
+            className={classNames('ba-BoundingBoxHighlightRect', { 'is-selected': isSelected })}
+            data-testid={`ba-BoundingBoxHighlightRect-${id}`}
+            onClick={handleClick}
+            role="presentation"
+            style={style}
+        >
+            {isSelected && total > 1 && (
+                <BoundingBoxHighlightNav
+                    currentIndex={currentIndex}
+                    onNext={handleNext}
+                    onPrev={handlePrev}
+                    total={total}
+                />
+            )}
+        </div>
+    );
+};
+
+export default BoundingBoxHighlightRect;

package/src/components/BoundingBoxHighlight/index.ts

@@ -0,0 +1,4 @@
+export { default as BoundingBoxHighlightList } from './BoundingBoxHighlightList';
+export { default as BoundingBoxHighlightNav } from './BoundingBoxHighlightNav';
+export { default as BoundingBoxHighlightRect } from './BoundingBoxHighlightRect';
+export type { BoundingBox } from '../../store/boundingBoxHighlights/types';

package/src/components/BoundingBoxHighlight/messages.ts

@@ -0,0 +1,14 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+    ariaLabelViewNextReference: {
+        id: 'ba.boundingBoxHighlight.viewNextReference',
+        description: 'Aria label for the button to view the next reference',
+        defaultMessage: 'View next reference',
+    },
+    ariaLabelViewPrevReference: {
+        id: 'ba.boundingBoxHighlight.viewPrevReference',
+        description: 'Aria label for the button to view the previous reference',
+        defaultMessage: 'View previous reference',
+    },
+});

package/src/components/Popups/PopupDrawingToolbar.tsx

@@ -33,12 +33,6 @@ export type Props = {
 
 const options: Partial<Options> = {
     modifiers: [
-        {
-            name: 'eventListeners',
-            options: {
-                scroll: false,
-            },
-        },
         {
             name: 'offset',
             options: {
@@ -48,7 +42,6 @@ const options: Partial<Options> = {
         {
             name: 'preventOverflow',
             options: {
-                altAxis: true,
                 padding: 50,
             },
         },

package/src/components/Popups/PopupReply.tsx

@@ -3,21 +3,19 @@ import Popper from '@popperjs/core';
 import { useSelector } from 'react-redux';
 import { useIntl } from 'react-intl';
 import FocusTrap from 'box-ui-elements/es/components/focus-trap/FocusTrap';
+
+import ReplyForm from '../ReplyForm';
+
+import { getRotation, getScale } from '../../store/options';
+
 import messages from './messages';
 import PopupBase from './PopupBase';
-import PopupReplyV2 from './PopupReplyV2';
-import ReplyForm from '../ReplyForm';
-import { getScale, getRotation } from '../../store/options';
 import { PopupReference } from './Popper';
 import './PopupReply.scss';
 
-type BaseProps = {
+export type Props = {
     className?: string;
-};
-
-type LegacyProps = BaseProps & {
     isPending: boolean;
-    isThreadedAnnotation?: false;
     onCancel: (text?: string) => void;
     onChange: (text?: string) => void;
     onSubmit: (text: string) => void;
@@ -25,18 +23,6 @@ type LegacyProps = BaseProps & {
     value?: string;
 };
 
-type ThreadedProps = BaseProps & {
-    isThreadedAnnotation: true;
-    isPending?: boolean;
-    onCancel?: (text?: string) => void;
-    onChange?: (text?: string) => void;
-    onSubmit?: (text: string) => void;
-    reference?: PopupReference;
-    value?: string;
-};
-
-export type Props = LegacyProps | ThreadedProps;
-
 const isIE = (): boolean => {
     const { userAgent } = navigator;
     return userAgent.indexOf('Trident/') > 0;
@@ -97,7 +83,7 @@ const getOptions = (): Partial<Popper.Options> => {
 export default function PopupReply(props: Props): JSX.Element {
     const intl = useIntl();
     const popupRef = React.useRef<PopupBase>(null);
-    const popupOptions = React.useRef<Partial<Popper.Options>>(getOptions()); // Keep the options reference the same between renders
+    const popupOptions = React.useRef<Partial<Popper.Options>>(getOptions());
     const rotation = useSelector(getRotation);
     const scale = useSelector(getScale);
 
@@ -109,13 +95,7 @@ export default function PopupReply(props: Props): JSX.Element {
         }
     }, [popupRef, rotation, scale]);
 
-    // TODO: PopupReplyV2 is a placeholder stub. Props (isPending, onCancel, etc.)
-    // are not yet forwarded and will need to be wired up when V2 is implemented.
-    if (props.isThreadedAnnotation) {
-        return <PopupReplyV2 />;
-    }
-
-    const { isPending, onCancel, onChange, onSubmit, value = '', isThreadedAnnotation: _, ...rest } = props as LegacyProps;
+    const { isPending, onCancel, onChange, onSubmit, value = '', ...rest } = props;
 
     return (
         <FocusTrap>

package/src/components/Popups/PopupV2.scss

@@ -0,0 +1,28 @@
+.ba-PopupV2 {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 150;
+    width: 348px;
+}
+
+// Specificity must beat .ba selectors from box-ui-elements globals
+// (forms, buttons, links) that cascade into threaded-annotations components.
+.ba .ba-PopupV2 {
+    div[contenteditable='true'],
+    div[contenteditable='true']:hover,
+    div[contenteditable='true']:focus {
+        width: auto;
+        padding: 0;
+        color: inherit;
+        border: none;
+        border-radius: 0;
+        outline: none;
+        box-shadow: none;
+        transition: none;
+    }
+
+    button svg {
+        pointer-events: auto;
+    }
+}