box-annotations 5.2.1-beta.8 → 5.3.1-beta.0

package/src/adapters/threadedAnnotationsAdapters.ts

@@ -1,4 +1,11 @@
-import type { DocumentNodeV2, MentionNodeV2, ParagraphNodeV2, TextMessageTypeV2, TextNodeV2 } from '@box/threaded-annotations';
+import type {
+    DocumentNodeV2,
+    MentionNodeV2,
+    ParagraphNodeV2,
+    TextMessageTypeV2,
+    TextNodeV2,
+} from '@box/threaded-annotations';
+import { parseMessageMarkdown } from '@box/threaded-annotations';
 
 import type { Annotation, Collaborator, Reply, UserMini } from '../@types';
 
@@ -69,10 +76,27 @@ export const deserializeMentionMarkup = (text: string): DocumentNodeV2 => {
     return { type: 'doc', content };
 };
 
+const toDocumentNode = (text: string, isRichTextEnabled = false): DocumentNodeV2 =>
+    isRichTextEnabled ? (parseMessageMarkdown(text) as DocumentNodeV2) : deserializeMentionMarkup(text);
+
+/**
+ * Returns the edit timestamp consumers use to render an edited indicator.
+ * Compares parsed instants, not raw strings, so equivalent ISO formats
+ * (Z vs +00:00, fractional precision) are treated as unedited.
+ */
+const toUpdatedAt = (createdAt: string, modifiedAt: string | undefined): number | undefined => {
+    if (!modifiedAt) return undefined;
+    const modifiedMs = new Date(modifiedAt).getTime();
+    if (Number.isNaN(modifiedMs)) return undefined;
+    const createdMs = new Date(createdAt).getTime();
+    if (modifiedMs === createdMs) return undefined;
+    return modifiedMs;
+};
+
 /**
  * Converts a box-annotations Reply to a threaded-annotations TextMessageType.
  */
-export const replyToTextMessage = (reply: Reply): TextMessageTypeV2 => ({
+export const replyToTextMessage = (reply: Reply, isRichTextEnabled = false): TextMessageTypeV2 => ({
     author: {
         email: reply.created_by?.login ?? '',
         id: parseInt(reply.created_by?.id ?? '0', 10),
@@ -80,55 +104,50 @@ export const replyToTextMessage = (reply: Reply): TextMessageTypeV2 => ({
     },
     createdAt: new Date(reply.created_at).getTime(),
     id: reply.id,
-    message: deserializeMentionMarkup(reply.message),
+    message: toDocumentNode(reply.message, isRichTextEnabled),
     permissions: {
-        canDelete: false,
-        canEdit: false,
-        canReply: true,
-        canResolve: false,
+        canDelete: reply.permissions?.can_delete ?? false,
+        canEdit: reply.permissions?.can_edit ?? false,
+        canReply: reply.permissions?.can_reply ?? false,
+        canResolve: reply.permissions?.can_resolve ?? false,
     },
+    updatedAt: toUpdatedAt(reply.created_at, reply.modified_at),
 });
 
-/**
- * Converts an Annotation's description (root message) to a TextMessageType.
- * The root message gets resolve permission from the annotation's permissions.
- * Falls back to annotation-level fields when the description object is sparse
- * (the list endpoint returns description with only { message }).
- */
-const descriptionToTextMessage = (
-    annotation: Annotation,
-    reply: Reply,
-): TextMessageTypeV2 => ({
+// The root message shares the annotation's author and permissions; description
+// comes back sparse ({ message } only) from the list endpoint.
+const descriptionToTextMessage = (annotation: Annotation, isRichTextEnabled = false): TextMessageTypeV2 => ({
     author: {
-        email: (reply.created_by ?? annotation.created_by)?.login ?? '',
-        id: parseInt((reply.created_by ?? annotation.created_by)?.id ?? '0', 10),
-        name: (reply.created_by ?? annotation.created_by)?.name ?? '',
+        email: annotation.created_by?.login ?? '',
+        id: parseInt(annotation.created_by?.id ?? '0', 10),
+        name: annotation.created_by?.name ?? '',
     },
-    createdAt: new Date(reply.created_at ?? annotation.created_at).getTime(),
-    id: reply.id ?? annotation.id,
-    message: deserializeMentionMarkup(reply.message),
+    createdAt: new Date(annotation.created_at).getTime(),
+    id: annotation.id,
+    message: toDocumentNode(annotation.description?.message ?? '', isRichTextEnabled),
     permissions: {
         canDelete: annotation.permissions?.can_delete ?? false,
         canEdit: annotation.permissions?.can_edit ?? false,
-        canReply: true,
+        canReply: annotation.permissions?.can_reply ?? false,
         canResolve: annotation.permissions?.can_resolve ?? false,
     },
+    updatedAt: toUpdatedAt(annotation.created_at, annotation.modified_at),
 });
 
 /**
  * Maps a full Annotation (description + replies) to an array of TextMessageType
  * suitable for ThreadedAnnotationsV2.
  */
-export const annotationToMessages = (annotation: Annotation): TextMessageTypeV2[] => {
+export const annotationToMessages = (annotation: Annotation, isRichTextEnabled = false): TextMessageTypeV2[] => {
     const messages: TextMessageTypeV2[] = [];
 
     if (annotation.description) {
-        messages.push(descriptionToTextMessage(annotation, annotation.description));
+        messages.push(descriptionToTextMessage(annotation, isRichTextEnabled));
     }
 
     if (annotation.replies) {
         annotation.replies.forEach(reply => {
-            messages.push(replyToTextMessage(reply));
+            messages.push(replyToTextMessage(reply, isRichTextEnabled));
         });
     }
 
@@ -138,7 +157,9 @@ export const annotationToMessages = (annotation: Annotation): TextMessageTypeV2[
 /**
  * Converts a box-annotations Collaborator to a @box/user-selector UserContactType.
  */
-export const collaboratorToUserContact = (collaborator: Collaborator): {
+export const collaboratorToUserContact = (
+    collaborator: Collaborator,
+): {
     email: string;
     id: number;
     name: string;

package/src/api/APIFactory.ts

@@ -1,7 +1,8 @@
 import Annotations from 'box-ui-elements/es/api/Annotations';
 import FileCollaborators from 'box-ui-elements/es/api/FileCollaborators';
+import ThreadedComments from 'box-ui-elements/es/api/ThreadedComments';
 import { DEFAULT_HOSTNAME_API } from 'box-ui-elements/es/constants';
-import { AnnotationsAPI, CollaboratorsAPI, APIOptions } from './types';
+import { AnnotationsAPI, CollaboratorsAPI, APIOptions, ThreadedCommentsAPI } from './types';
 
 export default class APIFactory {
     options: APIOptions;
@@ -21,4 +22,8 @@ export default class APIFactory {
     getCollaboratorsAPI(): CollaboratorsAPI {
         return new FileCollaborators(this.options);
     }
+
+    getThreadedCommentsAPI(): ThreadedCommentsAPI {
+        return new ThreadedComments(this.options);
+    }
 }

package/src/api/types.ts

@@ -1,4 +1,4 @@
-import { Annotation, Collaborator, NewAnnotation, Permissions, Reply, Token } from '../@types';
+import { Annotation, Collaborator, NewAnnotation, Permissions, Reply, ReplyPermissions, Token } from '../@types';
 
 export type APICollection<R> = {
     entries: R[];
@@ -73,6 +73,28 @@ export interface AnnotationsAPI {
     destroy(): void;
 }
 
+export interface ThreadedCommentsAPI {
+    deleteComment(args: {
+        commentId: string;
+        errorCallback: (error: APIError) => void;
+        fileId: string | null;
+        permissions: ReplyPermissions;
+        successCallback: () => void;
+    }): void;
+
+    updateComment(args: {
+        commentId: string;
+        errorCallback: (error: APIError) => void;
+        fileId: string | null;
+        message?: string;
+        permissions: ReplyPermissions;
+        status?: string;
+        successCallback: (reply: Reply) => void;
+    }): void;
+
+    destroy(): void;
+}
+
 export interface CollaboratorsAPI {
     getFileCollaborators(
         fileId: string | null,

package/src/boundingBoxHighlight/BoundingBoxHighlightContainer.tsx

@@ -15,7 +15,10 @@ export type Props = {
     location: number;
 };
 
-const mapStateToProps = (state: AppState, { location }: Props): {
+const mapStateToProps = (
+    state: AppState,
+    { location }: Props,
+): {
     allBoundingBoxes: BoundingBox[];
     boundingBoxes: BoundingBox[];
     selectedId: string | null;

package/src/common/AnnotationCallbacksContext.ts

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+export type AnnotationCallbacks = {
+    onCopyLink?: (params: { annotationId: string; fileVersionId: string }) => void;
+};
+
+export default createContext<AnnotationCallbacks>({});

package/src/common/BaseAnnotator.scss

@@ -28,3 +28,15 @@
 .ba-Layer--popup {
     z-index: 4;
 }
+
+.ba-PopupPortal {
+    position: relative;
+    z-index: 10;
+    pointer-events: none;
+
+    .ba-Popup,
+    .ba-PopupAnnotation {
+        z-index: 150;
+        pointer-events: auto;
+    }
+}

package/src/common/BaseAnnotator.ts

@@ -6,7 +6,7 @@ import DeselectManager from './DeselectManager';
 import EventEmitter from './EventEmitter';
 import i18n from '../utils/i18n';
 import messages from '../messages';
-import { Event, IntlOptions, LegacyEvent, Permissions } from '../@types';
+import { Event, IntlOptions, LegacyEvent, Permissions, SidebarEvent, Token } from '../@types';
 import { BoundingBox, getBoundingBoxHighlights } from '../store/boundingBoxHighlights';
 import { ViewMode } from '../store/options/types';
 import { Features } from '../BoxAnnotations';
@@ -44,7 +44,8 @@ export type Options = {
     initialViewMode?: ViewMode;
     intl: IntlOptions;
     locale?: string;
-    token: string;
+    onCopyLink?: (params: { annotationId: string; fileVersionId: string }) => void;
+    token: Token;
 };
 
 export const CSS_CONTAINER_CLASS = 'ba';
@@ -70,6 +71,8 @@ export default class BaseAnnotator extends EventEmitter {
 
     intl: IntlShape;
 
+    onCopyLink?: (params: { annotationId: string; fileVersionId: string }) => void;
+
     store: store.AppStore;
 
     constructor({
@@ -82,6 +85,7 @@ export default class BaseAnnotator extends EventEmitter {
         initialMode,
         initialViewMode = 'annotations',
         intl,
+        onCopyLink,
         token,
     }: Options) {
         super();
@@ -111,6 +115,7 @@ export default class BaseAnnotator extends EventEmitter {
         this.container = container;
         this.features = features;
         this.intl = i18n.createIntlProvider(intl);
+        this.onCopyLink = onCopyLink;
         this.store = store.createStore(initialState, {
             api: new API({ apiHost, token }),
         });
@@ -126,6 +131,11 @@ export default class BaseAnnotator extends EventEmitter {
         this.addListener(Event.BOUNDING_BOX_HIGHLIGHT_SELECT, this.handleSelectBoundingBoxHighlight);
         this.addListener(Event.VIEW_MODE_SET, this.handleSetViewMode);
 
+        this.addListener(SidebarEvent.SIDEBAR_ANNOTATION_UPDATE, this.handleSidebarAnnotationUpdate);
+        this.addListener(SidebarEvent.SIDEBAR_REPLY_CREATE, this.handleSidebarReplyCreate);
+        this.addListener(SidebarEvent.SIDEBAR_REPLY_UPDATE, this.handleSidebarReplyUpdate);
+        this.addListener(SidebarEvent.SIDEBAR_REPLY_DELETE, this.handleSidebarReplyDelete);
+
         // Load any required data at startup
         this.hydrate();
     }
@@ -159,6 +169,10 @@ export default class BaseAnnotator extends EventEmitter {
         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);
+        this.removeListener(SidebarEvent.SIDEBAR_ANNOTATION_UPDATE, this.handleSidebarAnnotationUpdate);
+        this.removeListener(SidebarEvent.SIDEBAR_REPLY_CREATE, this.handleSidebarReplyCreate);
+        this.removeListener(SidebarEvent.SIDEBAR_REPLY_UPDATE, this.handleSidebarReplyUpdate);
+        this.removeListener(SidebarEvent.SIDEBAR_REPLY_DELETE, this.handleSidebarReplyDelete);
     }
 
     public init(scale = 1, rotation = 0): void {
@@ -352,6 +366,22 @@ export default class BaseAnnotator extends EventEmitter {
         this.setViewMode(viewMode);
     };
 
+    protected handleSidebarAnnotationUpdate = (annotation: store.SidebarAnnotationUpdatePayload): void => {
+        this.store.dispatch(store.applySidebarAnnotationUpdateAction(annotation));
+    };
+
+    protected handleSidebarReplyCreate = (payload: store.SidebarReplyMutationPayload): void => {
+        this.store.dispatch(store.applySidebarReplyCreateAction(payload));
+    };
+
+    protected handleSidebarReplyUpdate = (payload: store.SidebarReplyMutationPayload): void => {
+        this.store.dispatch(store.applySidebarReplyUpdateAction(payload));
+    };
+
+    protected handleSidebarReplyDelete = ({ annotationId, id }: { annotationId: string; id: string }): void => {
+        this.store.dispatch(store.applySidebarReplyDeleteAction({ annotationId, replyId: id }));
+    };
+
     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/BaseManager.ts

@@ -1,6 +1,7 @@
 import * as ReactDOM from 'react-dom/client';
 import { IntlShape } from 'react-intl';
 import { Store } from 'redux';
+import { AnnotationCallbacks } from './AnnotationCallbacksContext';
 import { applyResinTags } from '../utils/resin';
 import { TARGET_TYPE } from '../constants';
 
@@ -14,6 +15,7 @@ export type Options = {
 };
 
 export type Props = {
+    callbacks?: AnnotationCallbacks;
     intl: IntlShape;
     store: Store;
 };

package/src/common/DeselectListener.tsx

@@ -8,7 +8,7 @@ export default function DeselectListener(): null {
     React.useEffect(() => {
         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')) return;
+            if ((event.target as Element | null)?.closest?.('.ba-PopupAnnotation, .ba-Popup')) return;
             dispatch(setActiveAnnotationIdAction(null));
         };
 

package/src/common/withProviders.tsx

@@ -2,8 +2,10 @@ import * as React from 'react';
 import { IntlShape, RawIntlProvider } from 'react-intl';
 import { Provider as StoreProvider } from 'react-redux';
 import { Store } from 'redux';
+import AnnotationCallbacksContext, { AnnotationCallbacks } from './AnnotationCallbacksContext';
 
 type WrapperProps = {
+    callbacks?: AnnotationCallbacks;
     intl: IntlShape;
     store: Store;
 };
@@ -11,11 +13,13 @@ type WrapperProps = {
 type WrapperReturn<P> = React.FC<P & WrapperProps>;
 
 export default function withProviders<P extends object>(WrappedComponent: React.ComponentType<P>): WrapperReturn<P> {
-    return function RootProvider({ intl, store, ...rest }: P & WrapperProps): JSX.Element {
+    return function RootProvider({ callbacks, intl, store, ...rest }: P & WrapperProps): JSX.Element {
         return (
             <RawIntlProvider value={intl}>
                 <StoreProvider store={store}>
-                    <WrappedComponent {...(rest as P)} />
+                    <AnnotationCallbacksContext.Provider value={callbacks ?? {}}>
+                        <WrappedComponent {...(rest as P)} />
+                    </AnnotationCallbacksContext.Provider>
                 </StoreProvider>
             </RawIntlProvider>
         );

package/src/components/BoundingBoxHighlight/BoundingBoxHighlightNav.scss

@@ -1,5 +1,5 @@
 $ba-BoundingBoxHighlightNav-bg: #fff;
-$ba-BoundingBoxHighlightNav-shadow: 0 6px 20px rgba(0, 0, 0, .1);
+$ba-BoundingBoxHighlightNav-shadow: 0 6px 20px rgb(0 0 0 / 10%);
 $ba-BoundingBoxHighlightNav-arrow: #909090;
 $ba-BoundingBoxHighlightNav-border: #e8e8e8;
 $ba-BoundingBoxHighlightNav-counter: #222;
@@ -45,11 +45,11 @@ $ba-BoundingBoxHighlightNav-counter: #222;
     }
 
     &:hover:not(:disabled) {
-        background: rgba(0, 0, 0, .06);
+        background: rgb(0 0 0 / 6%);
     }
 
     &:active:not(:disabled) {
-        background: rgba(0, 0, 0, .12);
+        background: rgb(0 0 0 / 12%);
     }
 
     &:disabled {

package/src/components/BoundingBoxHighlight/BoundingBoxHighlightRect.scss

@@ -1,22 +1,27 @@
 $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-BoundingBoxHighlight-bgColor--default: rgba($ba-BoundingBoxHighlight-color, 0.05);
+$ba-BoundingBoxHighlight-bgColor--hover: rgba($ba-BoundingBoxHighlight-color, 0.16);
+$ba-BoundingBoxHighlight-bgColor--selected: rgba($ba-BoundingBoxHighlight-color, 0.1);
 
 .ba-BoundingBoxHighlightRect {
     position: absolute;
     box-sizing: border-box;
     background-color: $ba-BoundingBoxHighlight-bgColor--default;
-    border: 2px solid rgba($ba-BoundingBoxHighlight-color, .2);
+    border: 2px solid rgba($ba-BoundingBoxHighlight-color, 0.2);
     border-radius: 8px;
     outline: none;
     cursor: pointer;
-    transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
+    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);
+        box-shadow:
+            0 0 0 2px rgba($ba-BoundingBoxHighlight-color, 0.3),
+            0 4px 12px rgb(0 0 0 / 15%);
     }
 }

package/src/components/Popups/PopupBase.scss

@@ -25,7 +25,7 @@
         }
 
         .ba-ReplyForm {
-            opacity: .99; // Creates a new stacking context so that the collaborators list shows on top of the ba-Popup-footer
+            opacity: 0.99; // Creates a new stacking context so that the collaborators list shows on top of the ba-Popup-footer
         }
     }
 
@@ -34,7 +34,7 @@
         background-color: $popup-content-bg;
         border: 1px solid $popup-border-color;
         border-radius: 6px;
-        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .15);
+        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 15%);
     }
 
     .ba-Popup-footer {

package/src/components/Popups/PopupDrawingToolbar.scss

@@ -13,7 +13,7 @@
     border-radius: $bdl-border-radius-size;
     outline: none;
     cursor: pointer;
-    opacity: .7;
+    opacity: 0.7;
     transition: opacity 200ms ease;
 
     &:focus,
@@ -23,7 +23,7 @@
 
     &[disabled] {
         cursor: default;
-        opacity: .2;
+        opacity: 0.2;
     }
 }
 
@@ -53,7 +53,7 @@
     .ba-Popup-content {
         gap: 4px;
         padding: 8px;
-        background-color: rgba(0, 0, 0, .8);
+        background-color: rgb(0 0 0 / 80%);
         border-radius: 46px;
     }
 }
@@ -75,7 +75,7 @@
 
 // Modernized border-left for adjacent groups
 .ba-PopupDrawingToolbar--modernized .ba-PopupDrawingToolbar-group + .ba-PopupDrawingToolbar-group {
-    border-left: 1px solid rgb(255, 255, 255, 8%);
+    border-left: 1px solid rgb(255 255 255 / 8%);
 }
 
 .ba-PopupDrawingToolbar-delete,

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/PopupList.scss

@@ -8,7 +8,7 @@
     .ba-Popup-content {
         border: solid 1px $bdl-gray-30;
         border-radius: $bdl-border-radius-size;
-        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
+        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
     }
 
     .ba-PopupList-prompt {

package/src/components/Popups/PopupV2.scss

@@ -1,4 +1,4 @@
-.ba-PopupV2 {
+.ba-PopupAnnotation {
     position: absolute;
     top: 0;
     left: 0;
@@ -8,7 +8,7 @@
 
 // Specificity must beat .ba selectors from box-ui-elements globals
 // (forms, buttons, links) that cascade into threaded-annotations components.
-.ba .ba-PopupV2 {
+.ba .ba-PopupAnnotation {
     div[contenteditable='true'],
     div[contenteditable='true']:hover,
     div[contenteditable='true']:focus {