box-annotations 5.2.1-beta.2 → 5.2.1-beta.20

package/dist/annotations.js.LICENSE.txt

@@ -12,9 +12,9 @@ object-assign
 
 /*!
  * Box Annotations
- * 
+ *
  * Copyright 2016-present Box, Inc. All Rights Reserved.
- * 
+ *
  * This source code is licensed under the Box Software License Agreement found
  * in the LICENSE file in the root directory of this source tree. Additional
  * third party license disclosures can be found in the THIRD_PARTY_LICENSES
@@ -30,46 +30,6 @@ object-assign
  * Licensed under MIT License
  */
 
-/**
- * @license React
- * react-dom.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * react.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * scheduler.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * use-sync-external-store-with-selector.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
 /** @license React v0.18.0
  * scheduler.production.min.js
  *
@@ -79,7 +39,7 @@ object-assign
  * LICENSE file in the root directory of this source tree.
  */
 
-/** @license React v16.12.0
+/** @license React v16.13.1
  * react-is.production.min.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.

package/i18n/en-US.js

@@ -4,8 +4,12 @@ export default {
   "ba.annotationsLoadError": "We’re sorry, the annotations failed to load for this file.",
   "ba.annotationsPost": "Post",
   "ba.annotationsSave": "Save",
+  "ba.boundingBoxHighlight.viewNextReference": "View next reference",
+  "ba.boundingBoxHighlight.viewPrevReference": "View previous reference",
   "ba.popup.reply.comment": "Comment",
   "ba.popup.reply.field": "Type a comment",
+  "ba.popup.reply.mentionLoading": "Loading users...",
+  "ba.popup.reply.mentionSelector": "Mention a collaborator",
   "ba.popups.cancel": "Cancel",
   "ba.popups.drawing.addComment": "Add Comment",
   "ba.popups.drawing.delete": "Delete",

package/i18n/en-US.properties

@@ -8,10 +8,18 @@ ba.annotationsLoadError = We’re sorry, the annotations failed to load for this
 ba.annotationsPost = Post
 # Label for the save button
 ba.annotationsSave = Save
+# Aria label for the button to view the next reference
+ba.boundingBoxHighlight.viewNextReference = View next reference
+# Aria label for the button to view the previous reference
+ba.boundingBoxHighlight.viewPrevReference = View previous reference
 # Aria label description for reply popup
 ba.popup.reply.comment = Comment
 # Aria label description for annotation comment field
 ba.popup.reply.field = Type a comment
+# Aria label for mention selector loading state
+ba.popup.reply.mentionLoading = Loading users...
+# Aria role description for mention user selector
+ba.popup.reply.mentionSelector = Mention a collaborator
 # Button label for cancelling the creation of a description, comment, or reply
 ba.popups.cancel = Cancel
 # Button label for adding a comment in the drawing toolbar

package/i18n/json/src/components/BoundingBoxHighlight/messages.json

@@ -0,0 +1 @@
+[{"id":"ba.boundingBoxHighlight.viewNextReference","description":"Aria label for the button to view the next reference","defaultMessage":"View next reference"},{"id":"ba.boundingBoxHighlight.viewPrevReference","description":"Aria label for the button to view the previous reference","defaultMessage":"View previous reference"}]

package/i18n/json/src/components/Popups/messages.json

@@ -1 +1 @@
-[{"id":"ba.popup.reply.comment","description":"Aria label description for reply popup","defaultMessage":"Comment"},{"id":"ba.popup.reply.field","description":"Aria label description for annotation comment field","defaultMessage":"Type a comment"},{"id":"ba.popups.cancel","description":"Button label for cancelling the creation of a description, comment, or reply","defaultMessage":"Cancel"},{"id":"ba.popups.post","description":"Button label for creating a description, comment, or reply","defaultMessage":"Post"},{"id":"ba.popups.drawing.addComment","description":"Button label for adding a comment in the drawing toolbar","defaultMessage":"Add Comment"},{"id":"ba.popups.drawing.delete","description":"Button title for deleting a staged drawing","defaultMessage":"Delete"},{"id":"ba.popups.drawing.redo","description":"Button title for redoing a staged drawing","defaultMessage":"Redo"},{"id":"ba.popups.drawing.undo","description":"Button title for undoing a staged drawing","defaultMessage":"Undo"},{"id":"ba.popups.replyField.placeholder","description":"Placeholder for reply field editor","defaultMessage":"Type a comment..."},{"id":"ba.popups.popupHighlight.promoter","description":"Popup message for highlight promoter","defaultMessage":"Highlight and Comment"},{"id":"ba.popups.popupHighlight.restrictedPrompt","description":"Prompt message when selection crosses multiple pages","defaultMessage":"Comments restricted to single page"},{"id":"ba.popups.popupList.prompt","description":"Prompt message for empty popup list","defaultMessage":"Mention someone to notify them"},{"id":"ba.popups.popupCursor.regionPrompt","description":"Prompt message following cursor in region annotations mode","defaultMessage":"Draw a box to comment"}]
+[{"id":"ba.popup.reply.comment","description":"Aria label description for reply popup","defaultMessage":"Comment"},{"id":"ba.popup.reply.mentionLoading","description":"Aria label for mention selector loading state","defaultMessage":"Loading users..."},{"id":"ba.popup.reply.mentionSelector","description":"Aria role description for mention user selector","defaultMessage":"Mention a collaborator"},{"id":"ba.popup.reply.field","description":"Aria label description for annotation comment field","defaultMessage":"Type a comment"},{"id":"ba.popups.cancel","description":"Button label for cancelling the creation of a description, comment, or reply","defaultMessage":"Cancel"},{"id":"ba.popups.post","description":"Button label for creating a description, comment, or reply","defaultMessage":"Post"},{"id":"ba.popups.drawing.addComment","description":"Button label for adding a comment in the drawing toolbar","defaultMessage":"Add Comment"},{"id":"ba.popups.drawing.delete","description":"Button title for deleting a staged drawing","defaultMessage":"Delete"},{"id":"ba.popups.drawing.redo","description":"Button title for redoing a staged drawing","defaultMessage":"Redo"},{"id":"ba.popups.drawing.undo","description":"Button title for undoing a staged drawing","defaultMessage":"Undo"},{"id":"ba.popups.replyField.placeholder","description":"Placeholder for reply field editor","defaultMessage":"Type a comment..."},{"id":"ba.popups.popupHighlight.promoter","description":"Popup message for highlight promoter","defaultMessage":"Highlight and Comment"},{"id":"ba.popups.popupHighlight.restrictedPrompt","description":"Prompt message when selection crosses multiple pages","defaultMessage":"Comments restricted to single page"},{"id":"ba.popups.popupList.prompt","description":"Prompt message for empty popup list","defaultMessage":"Mention someone to notify them"},{"id":"ba.popups.popupCursor.regionPrompt","description":"Prompt message following cursor in region annotations mode","defaultMessage":"Draw a box to comment"}]

package/index.js

@@ -1,4 +1,4 @@
 import './dist/annotations.css';
-import './dist/annotations.js';
+import BoxAnnotations from './dist/annotations.js';
 
 export default BoxAnnotations;

package/package.json

@@ -1,9 +1,14 @@
 {
     "name": "box-annotations",
-    "version": "5.2.1-beta.2",
+    "version": "5.2.1-beta.20",
     "description": "Box Annotations",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",
+    "sideEffects": [
+        "./dist/annotations.js",
+        "**/*.css",
+        "**/*.scss"
+    ],
     "repository": {
         "type": "git",
         "url": "git@github.com:box/box-annotations.git"
@@ -28,7 +33,13 @@
         "@babel/preset-react": "^7.25.9",
         "@babel/preset-typescript": "^7.25.9",
         "@box/frontend": "^10.0.0",
+        "@box/blueprint-web": "^16.8.2",
+        "@box/blueprint-web-assets": "^5.5.0",
+        "@box/collaboration-popover": "^2.1.25",
         "@box/languages": "^1.1.0",
+        "@box/readable-time": "^2.1.25",
+        "@box/threaded-annotations": "^4.0.6",
+        "@box/user-selector": "^2.1.27",
         "@cfaester/enzyme-adapter-react-18": "^0.8.0",
         "@commitlint/cli": "^8.3.5",
         "@commitlint/config-conventional": "^8.2.0",
@@ -50,11 +61,11 @@
         "@types/uuid": "^8.3.0",
         "@typescript-eslint/eslint-plugin": "^7.3.1",
         "@typescript-eslint/parser": "^7.3.1",
-        "autoprefixer": "^9.7.6",
+        "autoprefixer": "^10.4.19",
         "axios": "^0.24.0",
         "babel-eslint": "^10.1.0",
         "babel-jest": "^24.9.0",
-        "babel-loader": "^8.3.0",
+        "babel-loader": "^9.2.1",
         "babel-plugin-istanbul": "^6.0.0",
         "babel-plugin-react-intl": "^7.5.1",
         "babel-plugin-transform-require-ignore": "^0.1.1",
@@ -62,9 +73,11 @@
         "box-ui-elements": "^20.0.0",
         "circular-dependency-plugin": "^5.2.0",
         "classnames": "^2.2.5",
+        "clsx": "^2.1.1",
         "conventional-github-releaser": "^3.1.3",
         "core-js": "^3.38.1",
-        "css-loader": "^3.5.2",
+        "css-loader": "^7.1.2",
+        "css-minimizer-webpack-plugin": "^7.0.4",
         "cypress": "^4.4.1",
         "draft-js": "0.10.5",
         "enzyme": "^3.11.0",
@@ -90,12 +103,10 @@
         "jest-environment-jsdom-sixteen": "^1.0.3",
         "lint-staged": "^9.5.0",
         "lodash": "^4.17.15",
-        "mini-css-extract-plugin": "^0.9.0",
+        "mini-css-extract-plugin": "^2.10.1",
         "npm-run-all": "^4.1.5",
-        "optimize-css-assets-webpack-plugin": "^5.0.3",
-        "postcss-loader": "^3.0.0",
+        "postcss-loader": "^8.1.1",
         "prettier": "^1.19.1",
-        "raw-loader": "^4.0.1",
         "react": "18.3.1",
         "react-dom": "18.3.1",
         "react-intl": "6.4.2",
@@ -105,27 +116,34 @@
         "redux": "^4.0.5",
         "regenerator-runtime": "^0.13.9",
         "sass": "^1.64.1",
-        "sass-loader": "^8.0.2",
+        "sass-loader": "^16.0.4",
         "scroll-into-view-if-needed": "^2.2.24",
-        "style-loader": "^1.1.4",
+        "style-loader": "^4.0.0",
         "stylelint": "^12.0.0",
         "stylelint-config-rational-order": "^0.1.2",
         "stylelint-config-standard": "^19.0.0",
         "stylelint-order": "^3.1.1",
         "tabbable": "^1.1.3",
-        "terser-webpack-plugin": "^4.2.3",
         "typescript": "4.9.5",
         "uuid": "^8.3.1",
         "wait-on": "^4.0.2",
-        "webpack": "^4.47.0",
-        "webpack-cli": "^3.3.11",
-        "webpack-dev-server": "^3.10.3",
+        "webpack": "^5.105.4",
+        "webpack-cli": "^5.1.4",
+        "webpack-dev-server": "^5.2.3",
         "worker-farm": "^1.7.0"
     },
+    "peerDependencies": {
+        "@box/blueprint-web": "^16.8.2",
+        "@box/blueprint-web-assets": "^5.5.0",
+        "@box/collaboration-popover": "^2.1.25",
+        "@box/readable-time": "^2.1.25",
+        "@box/threaded-annotations": "^4.0.6",
+        "@box/user-selector": "^2.1.27"
+    },
     "scripts": {
         "build": "yarn setup && yarn build:prod:dist",
         "build:i18n": "props2es",
-        "build:dev:dist": "LANGUAGE=en-US BABEL_ENV=dev NODE_ENV=dev webpack --config scripts/webpack.config.js --mode development --progress --colors",
+        "build:dev:dist": "LANGUAGE=en-US BABEL_ENV=dev NODE_ENV=dev webpack --config scripts/webpack.config.js --mode development --progress",
         "build:prod:dist": "LANGUAGE=en-US BABEL_ENV=production NODE_ENV=production webpack --config scripts/webpack.config.js --mode production",
         "clean": "rm -rf dist reports/* i18n/json i18n/*.js",
         "cy:open": "yarn cy:wait; yarn cypress open",

package/src/@types/api.ts

@@ -10,5 +10,6 @@ export interface Permissions {
 }
 
 export type TokenLiteral = null | undefined | string | { read: string; write?: string };
-export type TokenResolver = () => TokenLiteral | Promise<TokenLiteral>;
-export type Token = TokenLiteral | TokenResolver;
+export type TokenMap = { [typedFileId: string]: TokenLiteral };
+export type TokenResolver = (typedFileId?: string) => TokenLiteral | TokenMap | Promise<TokenLiteral | TokenMap>;
+export type Token = TokenLiteral | TokenMap | TokenResolver;

package/src/@types/events.ts

@@ -1,15 +1,36 @@
 enum Event {
-    ACTIVE_CHANGE = 'annotations_active_change',
+    // Inbound: emitted by the host; box-annotations listens.
     ACTIVE_SET = 'annotations_active_set',
-    CREATOR_STAGED_CHANGE = 'creator_staged_change',
-    CREATOR_STATUS_CHANGE = 'creator_status_change',
+    ANNOTATION_REMOVE = 'annotations_remove',
+    BOUNDING_BOX_HIGHLIGHTS_SET = 'bounding_box_highlights_set',
+    BOUNDING_BOX_HIGHLIGHT_SELECT = 'bounding_box_highlight_select',
+    COLOR_SET = 'annotations_color_set',
+    VIEW_MODE_SET = 'view_mode_set',
+    VISIBLE_SET = 'annotations_visible_set',
+
+    // Outbound: emitted by box-annotations; the host listens.
+    ACTIVE_CHANGE = 'annotations_active_change',
     ANNOTATION_CREATE = 'annotations_create',
+    ANNOTATION_DELETE = 'annotations_delete',
     ANNOTATION_FETCH_ERROR = 'annotations_fetch_error',
-    ANNOTATION_REMOVE = 'annotations_remove',
+    ANNOTATION_REPLY_CREATE = 'annotations_reply_create',
+    ANNOTATION_REPLY_DELETE = 'annotations_reply_delete',
+    ANNOTATION_REPLY_UPDATE = 'annotations_reply_update',
+    ANNOTATION_UPDATE = 'annotations_update',
     ANNOTATIONS_INITIALIZED = 'annotations_initialized',
     ANNOTATIONS_MODE_CHANGE = 'annotations_mode_change',
-    COLOR_SET = 'annotations_color_set',
-    VISIBLE_SET = 'annotations_visible_set',
+    CREATOR_STAGED_CHANGE = 'creator_staged_change',
+    CREATOR_STATUS_CHANGE = 'creator_status_change',
+
+    // Internal: box-annotations emits and listens to itself (redux state change → DOM side effect).
+    BOUNDING_BOX_HIGHLIGHT_NAVIGATE = 'bounding_box_highlight_navigate',
+}
+
+enum SidebarEvent {
+    SIDEBAR_ANNOTATION_UPDATE = 'sidebar.annotations_update',
+    SIDEBAR_REPLY_CREATE = 'sidebar.annotations_reply_create',
+    SIDEBAR_REPLY_DELETE = 'sidebar.annotations_reply_delete',
+    SIDEBAR_REPLY_UPDATE = 'sidebar.annotations_reply_update',
 }
 
 // Existing legacy events, don't rename
@@ -19,4 +40,4 @@ enum LegacyEvent {
     SCALE = 'scaleannotations',
 }
 
-export { Event, LegacyEvent };
+export { Event, LegacyEvent, SidebarEvent };

package/src/@types/global.ts

@@ -1,12 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-namespace */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-declare namespace NodeJS {
-    interface Global {
-        window: any;
-        BoxAnnotations: any;
-    }
-}
-
 declare module 'box-annotations-locale-data';
 declare module 'box-elements-messages';
 declare module 'box-ui-elements/es/*'; // TODO: Figure out why types don't register properly

package/src/@types/model.ts

@@ -12,6 +12,11 @@ export interface Annotation {
     modified_by: User;
     permissions: Permissions;
     replies?: Array<Reply>;
+    resolution?: {
+        resolved_at: string;
+        resolved_by: User;
+    } | null;
+    status?: 'open' | 'resolved';
     target: Target;
     type: 'annotation';
 }
@@ -81,15 +86,24 @@ export interface Rect extends Position {
     width: number;
 }
 
+export interface ReplyPermissions {
+    can_delete?: boolean;
+    can_edit?: boolean;
+    can_reply?: boolean;
+    can_resolve?: boolean;
+}
+
 export interface Reply {
     created_at: string;
     created_by: User;
     id: string;
     message: string;
+    modified_at?: string;
     parent: {
         id: string;
         type: string;
     };
+    permissions?: ReplyPermissions;
     type: 'reply';
 }
 

package/src/BoxAnnotations.ts

@@ -16,6 +16,7 @@ type Annotator = {
 type AnnotationsOptions = {
     features: Features;
     intl: IntlOptions;
+    onCopyLink?: (params: { annotationId: string; fileVersionId: string }) => void;
 };
 
 export type Features = {
@@ -43,6 +44,8 @@ type ViewerOption = {
 
 type ViewerOptions = Record<string, ViewerOption>;
 
+type GlobalWithBoxAnnotations = typeof globalThis & { BoxAnnotations: typeof BoxAnnotations };
+
 /**
  * NAME: The name of the annotator.
  * CONSTRUCTOR: Constructor for the annotator.
@@ -145,5 +148,5 @@ class BoxAnnotations {
     }
 }
 
-global.BoxAnnotations = BoxAnnotations;
+(globalThis as GlobalWithBoxAnnotations).BoxAnnotations = BoxAnnotations;
 export default BoxAnnotations;

package/src/adapters/threadedAnnotationsAdapters.ts

@@ -0,0 +1,164 @@
+import type { DocumentNodeV2, MentionNodeV2, ParagraphNodeV2, TextMessageTypeV2, TextNodeV2 } from '@box/threaded-annotations';
+
+import type { Annotation, Collaborator, Reply, UserMini } from '../@types';
+
+const MENTION_REGEX = /@\[(\d+):([^\]]+)\]/g;
+
+/**
+ * Parses a plain-text line into paragraph content nodes.
+ * Recognizes @[userId:userName] mention markup and converts to MentionNode / TextNode.
+ */
+const parseLine = (line: string): (MentionNodeV2 | TextNodeV2)[] => {
+    const nodes: (MentionNodeV2 | TextNodeV2)[] = [];
+    let lastIndex = 0;
+
+    // Reset regex state since it's global
+    MENTION_REGEX.lastIndex = 0;
+
+    let match = MENTION_REGEX.exec(line);
+    while (match !== null) {
+        const [fullMatch, userId, userName] = match;
+        const { index } = match;
+
+        if (index > lastIndex) {
+            nodes.push({ type: 'text', text: line.slice(lastIndex, index) });
+        }
+
+        nodes.push({
+            type: 'mention',
+            attrs: {
+                authorId: '',
+                mentionId: userId,
+                mentionedUserId: userId,
+                mentionedUserName: userName,
+            },
+        });
+
+        lastIndex = index + fullMatch.length;
+        match = MENTION_REGEX.exec(line);
+    }
+
+    if (lastIndex < line.length) {
+        nodes.push({ type: 'text', text: line.slice(lastIndex) });
+    }
+
+    return nodes;
+};
+
+/**
+ * Deserializes plain text with @[userId:userName] mention markup into a TipTap DocumentNode.
+ * This is the reverse of serializeMentionMarkup from @box/threaded-annotations.
+ *
+ * Newlines are treated as paragraph breaks.
+ */
+export const deserializeMentionMarkup = (text: string): DocumentNodeV2 => {
+    if (!text) {
+        return { type: 'doc', content: [] };
+    }
+
+    const lines = text.split('\n');
+    const content: ParagraphNodeV2[] = lines.map(line => {
+        const nodes = parseLine(line);
+
+        return {
+            type: 'paragraph',
+            ...(nodes.length > 0 ? { content: nodes } : {}),
+        };
+    });
+
+    return { type: 'doc', content };
+};
+
+/**
+ * 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 => ({
+    author: {
+        email: reply.created_by?.login ?? '',
+        id: parseInt(reply.created_by?.id ?? '0', 10),
+        name: reply.created_by?.name ?? '',
+    },
+    createdAt: new Date(reply.created_at).getTime(),
+    id: reply.id,
+    message: deserializeMentionMarkup(reply.message),
+    permissions: {
+        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),
+});
+
+// The root message shares the annotation's author and permissions; description
+// comes back sparse ({ message } only) from the list endpoint.
+const descriptionToTextMessage = (annotation: Annotation): TextMessageTypeV2 => ({
+    author: {
+        email: annotation.created_by?.login ?? '',
+        id: parseInt(annotation.created_by?.id ?? '0', 10),
+        name: annotation.created_by?.name ?? '',
+    },
+    createdAt: new Date(annotation.created_at).getTime(),
+    id: annotation.id,
+    message: deserializeMentionMarkup(annotation.description?.message ?? ''),
+    permissions: {
+        canDelete: annotation.permissions?.can_delete ?? false,
+        canEdit: annotation.permissions?.can_edit ?? false,
+        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[] => {
+    const messages: TextMessageTypeV2[] = [];
+
+    if (annotation.description) {
+        messages.push(descriptionToTextMessage(annotation));
+    }
+
+    if (annotation.replies) {
+        annotation.replies.forEach(reply => {
+            messages.push(replyToTextMessage(reply));
+        });
+    }
+
+    return messages;
+};
+
+/**
+ * Converts a box-annotations Collaborator to a @box/user-selector UserContactType.
+ */
+export const collaboratorToUserContact = (collaborator: Collaborator): {
+    email: string;
+    id: number;
+    name: string;
+    value: string;
+} => {
+    const item = collaborator.item as UserMini | undefined;
+
+    return {
+        email: item?.email ?? item?.login ?? '',
+        id: parseInt(item?.id ?? collaborator.id, 10),
+        name: item?.name ?? collaborator.name,
+        value: collaborator.id,
+    };
+};

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, Token } from '../@types';
+import { Annotation, Collaborator, NewAnnotation, Permissions, Reply, ReplyPermissions, Token } from '../@types';
 
 export type APICollection<R> = {
     entries: R[];
@@ -33,6 +33,23 @@ export interface AnnotationsAPI {
         errorCallback: (error: APIError) => void,
     ): Promise<void>;
 
+    createAnnotationReply(
+        fileId: string | null,
+        annotationId: string,
+        permissions: Permissions,
+        message: string,
+        successCallback: (result: Reply) => void,
+        errorCallback: (error: APIError) => void,
+    ): Promise<void>;
+
+    deleteAnnotation(
+        fileId: string | null,
+        annotationId: string,
+        permissions: Permissions,
+        successCallback: () => void,
+        errorCallback: (error: APIError) => void,
+    ): Promise<void>;
+
     getAnnotations(
         fileId: string | null,
         fileVersionId: string | null,
@@ -41,8 +58,40 @@ export interface AnnotationsAPI {
         errorCallback: (error: APIError) => void,
         limit?: number,
         shouldFetchAll?: boolean,
+        shouldFetchReplies?: boolean,
     ): Promise<void>;
 
+    updateAnnotation(
+        fileId: string | null,
+        annotationId: string,
+        permissions: Permissions,
+        payload: { message?: string; status?: string },
+        successCallback: (result: Annotation) => void,
+        errorCallback: (error: APIError) => void,
+    ): Promise<void>;
+
+    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;
 }
 

package/src/boundingBoxHighlight/BoundingBoxHighlightContainer.tsx

@@ -0,0 +1,33 @@
+import { connect } from 'react-redux';
+import { BoundingBoxHighlightList } from '../components/BoundingBoxHighlight';
+import withProviders from '../common/withProviders';
+import {
+    AppState,
+    BoundingBox,
+    getBoundingBoxHighlights,
+    getBoundingBoxHighlightsForPage,
+    getSelectedBoundingBoxHighlightId,
+    navigateBoundingBoxHighlightAction,
+    setSelectedBoundingBoxHighlightAction,
+} from '../store';
+
+export type Props = {
+    location: number;
+};
+
+const mapStateToProps = (state: AppState, { location }: Props): {
+    allBoundingBoxes: BoundingBox[];
+    boundingBoxes: BoundingBox[];
+    selectedId: string | null;
+} => ({
+    allBoundingBoxes: getBoundingBoxHighlights(state),
+    boundingBoxes: getBoundingBoxHighlightsForPage(state, location),
+    selectedId: getSelectedBoundingBoxHighlightId(state),
+});
+
+const mapDispatchToProps = {
+    onNavigate: navigateBoundingBoxHighlightAction,
+    onSelect: setSelectedBoundingBoxHighlightAction,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(withProviders(BoundingBoxHighlightList));