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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-annotations",
-    "version": "5.2.1-beta.0",
+    "version": "5.2.1-beta.1",
     "description": "Box Annotations",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",
@@ -36,6 +36,9 @@
         "@formatjs/intl-relativetimeformat": "^4.5.12",
         "@popperjs/core": "^2.4.0",
         "@reduxjs/toolkit": "^1.3.5",
+        "@testing-library/dom": "^10.4.1",
+        "@testing-library/jest-dom": "^6.9.1",
+        "@testing-library/react": "^16.3.2",
         "@types/classnames": "^2.2.10",
         "@types/draft-js": "^0.10.40",
         "@types/enzyme": "^3.10.5",

package/src/BoxAnnotations.ts

@@ -19,7 +19,8 @@ type AnnotationsOptions = {
 };
 
 export type Features = {
-    [key: string]: boolean;
+    isThreadedAnnotation?: boolean;
+    [key: string]: boolean | undefined;
 };
 
 type PreviewOptions = {

package/src/components/Popups/PopupReply.tsx

@@ -5,14 +5,19 @@ import { useIntl } from 'react-intl';
 import FocusTrap from 'box-ui-elements/es/components/focus-trap/FocusTrap';
 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';
 
-export type Props = {
+type BaseProps = {
     className?: string;
+};
+
+type LegacyProps = BaseProps & {
     isPending: boolean;
+    isThreadedAnnotation?: false;
     onCancel: (text?: string) => void;
     onChange: (text?: string) => void;
     onSubmit: (text: string) => void;
@@ -20,6 +25,18 @@ export type Props = {
     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;
@@ -77,14 +94,7 @@ const getOptions = (): Partial<Popper.Options> => {
     };
 };
 
-export default function PopupReply({
-    isPending,
-    onCancel,
-    onChange,
-    onSubmit,
-    value = '',
-    ...rest
-}: Props): JSX.Element {
+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
@@ -99,6 +109,14 @@ export default function PopupReply({
         }
     }, [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;
+
     return (
         <FocusTrap>
             <PopupBase

package/src/components/Popups/PopupReplyV2.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+/**
+ * Placeholder for the threaded annotation reply popup (V2).
+ * Replaces PopupReply when the isThreadedAnnotation feature flag is enabled.
+ * Currently renders an empty container — props will be wired up when V2 is implemented.
+ */
+export default function PopupReplyV2(): JSX.Element {
+    return <div data-testid="popup-reply-v2" />;
+}

package/src/popup/PopupContainer.tsx

@@ -15,12 +15,14 @@ import {
     setMessageAction,
     getCreatorReferenceId,
 } from '../store';
+import { isFeatureEnabled } from '../store/options';
 import { createDrawingAction } from '../drawing/actions';
 import { createHighlightAction } from '../highlight/actions';
 import { createRegionAction } from '../region';
 
 export type Props = {
     isPromoting: boolean;
+    isThreadedAnnotation?: boolean;
     message: string;
     mode: Mode;
     referenceId: string | null;
@@ -31,6 +33,7 @@ export type Props = {
 export const mapStateToProps = (state: AppState, { location }: { location: number }): Props => {
     return {
         isPromoting: getIsPromoting(state),
+        isThreadedAnnotation: isFeatureEnabled(state, 'isThreadedAnnotation'),
         message: getCreatorMessage(state),
         mode: getAnnotationMode(state),
         referenceId: getCreatorReferenceId(state),

package/src/popup/PopupLayer.tsx

@@ -21,6 +21,7 @@ export type Props = {
     createHighlight?: (arg: HighlightCreateArg) => void;
     createRegion?: (arg: RegionCreateArg) => void;
     isPromoting: boolean;
+    isThreadedAnnotation?: boolean;
     location: number;
     message: string;
     mode: Mode;
@@ -44,6 +45,7 @@ const PopupLayer = (props: Props): JSX.Element | null => {
         createHighlight = noop,
         createRegion = noop,
         isPromoting = false,
+        isThreadedAnnotation = false,
         message,
         mode,
         referenceId,
@@ -92,6 +94,7 @@ const PopupLayer = (props: Props): JSX.Element | null => {
                 <div className="ba-PopupLayer-popup">
                     <PopupReply
                         isPending={isPending}
+                        isThreadedAnnotation={isThreadedAnnotation}
                         onCancel={handleCancel}
                         onChange={handleChange}
                         onSubmit={handleSubmit}