box-annotations 4.1.1-beta.4 → 5.0.0

package/dist/annotations.js.LICENSE.txt

@@ -0,0 +1,89 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/*!
+  Copyright (c) 2017 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+
+/*!
+ * 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
+ * file in the same directory.
+ */
+
+/*!
+ * UAParser.js v0.7.21
+ * Lightweight JavaScript-based User-Agent string parser
+ * https://github.com/faisalman/ua-parser-js
+ *
+ * Copyright © 2012-2019 Faisal Salman <f@faisalman.com>
+ * 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
+ *
+ * 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 v16.12.0
+ * react-is.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.
+ */

package/i18n/en-US.js

@@ -5,6 +5,7 @@ export default {
   "ba.annotationsPost": "Post",
   "ba.annotationsSave": "Save",
   "ba.popup.reply.comment": "Comment",
+  "ba.popup.reply.field": "Type a comment",
   "ba.popups.cancel": "Cancel",
   "ba.popups.drawing.addComment": "Add Comment",
   "ba.popups.drawing.delete": "Delete",

package/i18n/en-US.properties

@@ -10,6 +10,8 @@ ba.annotationsPost = Post
 ba.annotationsSave = Save
 # 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
 # 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/Popups/messages.json

@@ -1 +1 @@
-[{"id":"ba.popup.reply.comment","description":"Aria label description for reply popup","defaultMessage":"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.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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-annotations",
-    "version": "4.1.1-beta.4",
+    "version": "5.0.0",
     "description": "Box Annotations",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",
@@ -12,22 +12,24 @@
         "registry": "https://registry.npmjs.org/"
     },
     "engines": {
-        "node": ">=10.x",
+        "node": ">=18.x",
         "yarn": ">=1.10.x"
     },
     "devDependencies": {
-        "@babel/cli": "^7.8.4",
-        "@babel/core": "^7.9.0",
-        "@babel/plugin-proposal-class-properties": "^7.8.3",
-        "@babel/plugin-transform-flow-strip-types": "^7.9.0",
-        "@babel/plugin-transform-object-assign": "^7.8.3",
-        "@babel/plugin-transform-runtime": "^7.9.0",
-        "@babel/polyfill": "^7.8.7",
-        "@babel/preset-env": "^7.9.5",
-        "@babel/preset-react": "^7.9.4",
-        "@babel/preset-typescript": "^7.9.0",
-        "@box/frontend": "^6.4.0",
+        "@babel/cli": "^7.25.9",
+        "@babel/core": "^7.25.9",
+        "@babel/eslint-parser": "^7.24.7",
+        "@babel/plugin-proposal-class-properties": "^7.18.6",
+        "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+        "@babel/plugin-transform-flow-strip-types": "^7.25.9",
+        "@babel/plugin-transform-object-assign": "^7.25.9",
+        "@babel/plugin-transform-runtime": "^7.25.9",
+        "@babel/preset-env": "^7.25.9",
+        "@babel/preset-react": "^7.25.9",
+        "@babel/preset-typescript": "^7.25.9",
+        "@box/frontend": "^10.0.0",
         "@box/languages": "^1.1.0",
+        "@cfaester/enzyme-adapter-react-18": "^0.8.0",
         "@commitlint/cli": "^8.3.5",
         "@commitlint/config-conventional": "^8.2.0",
         "@formatjs/intl-pluralrules": "^1.5.5",
@@ -39,67 +41,67 @@
         "@types/enzyme": "^3.10.5",
         "@types/jest": "^24.9.0",
         "@types/lodash": "^4.14.150",
-        "@types/react": "^17.0.2",
-        "@types/react-dom": "^17.0.1",
-        "@types/react-redux": "^7.1.16",
+        "@types/react": "18.3.12",
+        "@types/react-dom": "18.3.1",
+        "@types/react-redux": "^7.1.33",
         "@types/uuid": "^8.3.0",
-        "@typescript-eslint/eslint-plugin": "^2.29.0",
-        "@typescript-eslint/parser": "^2.29.0",
-        "@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
+        "@typescript-eslint/eslint-plugin": "^7.3.1",
+        "@typescript-eslint/parser": "^7.3.1",
         "autoprefixer": "^9.7.6",
         "axios": "^0.24.0",
         "babel-eslint": "^10.1.0",
         "babel-jest": "^24.9.0",
-        "babel-loader": "^8.1.0",
+        "babel-loader": "^8.3.0",
         "babel-plugin-istanbul": "^6.0.0",
         "babel-plugin-react-intl": "^7.5.1",
         "babel-plugin-transform-require-ignore": "^0.1.1",
         "box-node-sdk": "^1.33.0",
-        "box-ui-elements": "^15.0.0-beta.6",
+        "box-ui-elements": "^20.0.0",
         "circular-dependency-plugin": "^5.2.0",
         "classnames": "^2.2.5",
         "conventional-github-releaser": "^3.1.3",
-        "core-js": "^3.6.5",
+        "core-js": "^3.38.1",
         "css-loader": "^3.5.2",
         "cypress": "^4.4.1",
         "draft-js": "0.10.5",
         "enzyme": "^3.11.0",
         "enzyme-to-json": "^3.4.4",
-        "eslint": "^6.7.2",
-        "eslint-config-airbnb": "^18.1.0",
-        "eslint-config-prettier": "^6.11.0",
+        "eslint": "^8.57.0",
+        "eslint-config-airbnb": "^19.0.4",
+        "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-babel": "^5.3.0",
         "eslint-plugin-cypress": "^2.10.3",
-        "eslint-plugin-flowtype": "^4.7.0",
-        "eslint-plugin-formatjs": "^1.5.4",
-        "eslint-plugin-import": "^2.20.2",
+        "eslint-plugin-flowtype": "^8.0.3",
+        "eslint-plugin-formatjs": "^4.13.3",
+        "eslint-plugin-import": "^2.26.0",
         "eslint-plugin-jest": "^23.8.2",
         "eslint-plugin-jsx-a11y": "^6.2.3",
-        "eslint-plugin-lodash": "^6.0.0",
-        "eslint-plugin-prettier": "^3.1.3",
-        "eslint-plugin-react": "^7.19.0",
-        "eslint-plugin-react-hooks": "^1.7.0",
+        "eslint-plugin-lodash": "^7.4.0",
+        "eslint-plugin-prettier": "^5.2.1",
+        "eslint-plugin-react": "^7.34.3",
+        "eslint-plugin-react-hooks": "^4.6.0",
         "formik": "^2.1.4",
         "husky": "^3.1.0",
         "jest": "^24.9.0",
-        "jest-canvas-mock": "^2.2.0",
+        "jest-canvas-mock": "^2.4.0",
         "jest-environment-jsdom-sixteen": "^1.0.3",
         "lint-staged": "^9.5.0",
         "lodash": "^4.17.15",
         "mini-css-extract-plugin": "^0.9.0",
-        "node-sass": "^4.13.1",
         "npm-run-all": "^4.1.5",
         "optimize-css-assets-webpack-plugin": "^5.0.3",
         "postcss-loader": "^3.0.0",
         "prettier": "^1.19.1",
         "raw-loader": "^4.0.1",
-        "react": "^17.0.1",
-        "react-dom": "^17.0.1",
-        "react-intl": "^3.12.0",
-        "react-redux": "^7.2.2",
+        "react": "18.3.1",
+        "react-dom": "18.3.1",
+        "react-intl": "6.4.2",
+        "react-redux": "^9.1.2",
         "react-tether": "1.0.5",
         "react-textarea-autosize": "^7.1.2",
         "redux": "^4.0.5",
+        "regenerator-runtime": "^0.13.9",
+        "sass": "^1.64.1",
         "sass-loader": "^8.0.2",
         "scroll-into-view-if-needed": "^2.2.24",
         "style-loader": "^1.1.4",
@@ -108,11 +110,11 @@
         "stylelint-config-standard": "^19.0.0",
         "stylelint-order": "^3.1.1",
         "tabbable": "^1.1.3",
-        "typescript": "^3.8.3",
-        "uglifyjs-webpack-plugin": "^2.2.0",
+        "terser-webpack-plugin": "^4.2.3",
+        "typescript": "4.9.5",
         "uuid": "^8.3.1",
         "wait-on": "^4.0.2",
-        "webpack": "^4.43.0",
+        "webpack": "^4.47.0",
         "webpack-cli": "^3.3.11",
         "webpack-dev-server": "^3.10.3",
         "worker-farm": "^1.7.0"
@@ -121,7 +123,7 @@
         "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:prod:dist": "BABEL_ENV=production NODE_ENV=production webpack --config scripts/webpack.config.js --mode production",
+        "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",
         "cy:run": "yarn cy:wait; yarn cypress run --spec test/integration/**/*.test.js",
@@ -153,6 +155,8 @@
         }
     },
     "resolutions": {
-        "uglify-es": "3.3.4"
+        "**/react-intl/**/@types/react": "^18.3.12",
+        "**/@types/react": "^18.3.12",
+        "**/@types/react-dom": "^18.2.0"
     }
 }

package/src/@types/global.ts

@@ -1,8 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-namespace */
-declare namespace Intl {
-    const RelativeTimeFormat: {};
-}
-
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 declare namespace NodeJS {
     interface Global {
         window: any;

package/src/common/BaseAnnotator.scss

@@ -1,17 +1,4 @@
-@font-face {
-    font-weight: normal;
-    font-family: 'Lato';
-    font-style: normal;
-    src: local('Lato Regular'), local('Lato-Regular'), url('https://cdn01.boxcdn.net/fonts/1.0.2/lato/Lato-Regular.woff2') format('woff2'), url('https://cdn01.boxcdn.net/fonts/1.0.2/lato/Lato-Regular.woff') format('woff');
-}
-
-@font-face {
-    font-weight: bold;
-    font-family: 'Lato';
-    font-style: normal;
-    src: local('Lato Bold'), local('Lato-Bold'), url('https://cdn01.boxcdn.net/fonts/1.0.2/lato/Lato-Bold.woff2') format('woff2'), url('https://cdn01.boxcdn.net/fonts/1.0.2/lato/Lato-Bold.woff') format('woff');
-}
-
+@import '~box-ui-elements/es/elements/common/fonts';
 @import '~box-ui-elements/es/styles/variables';
 
 .ba {

package/src/common/BaseManager.ts

@@ -1,4 +1,4 @@
-import * as ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom/client';
 import { IntlShape } from 'react-intl';
 import { Store } from 'redux';
 import { applyResinTags } from '../utils/resin';
@@ -28,6 +28,8 @@ export default class BaseManager implements Manager {
 
     reactEl: HTMLElement;
 
+    root: ReactDOM.Root | null = null;
+
     constructor({ location = 1, referenceEl, resinTags = {} }: Options) {
         this.location = location;
         this.reactEl = this.insert(referenceEl, {
@@ -35,6 +37,8 @@ export default class BaseManager implements Manager {
             feature: 'annotations',
         });
 
+        this.root = ReactDOM.createRoot(this.reactEl);
+
         this.decorate();
     }
 
@@ -43,11 +47,11 @@ export default class BaseManager implements Manager {
     }
 
     destroy(): void {
-        ReactDOM.unmountComponentAtNode(this.reactEl);
-
-        const parentEl = this.reactEl.parentNode;
-        if (parentEl) {
-            parentEl.removeChild(this.reactEl);
+        if (this.root) {
+            this.root.unmount();
+        }
+        if (this.reactEl.parentNode) {
+            this.reactEl.parentNode.removeChild(this.reactEl);
         }
     }
 

package/src/common/DeselectManager.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { Store } from 'redux';
 import BaseManager from './BaseManager';
@@ -20,11 +20,14 @@ export default class DeselectManager extends BaseManager {
     }
 
     render({ store }: Props): void {
-        ReactDOM.render(
+        if (!this.root) {
+            this.root = ReactDOM.createRoot(this.reactEl);
+        }
+
+        this.root.render(
             <Provider store={store}>
                 <DeselectListener />
             </Provider>,
-            this.reactEl,
         );
     }
 }

package/src/common/useAutoScroll/useAutoScroll.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import noop from 'lodash/noop';
 import { getScrollParent } from './util';
 

package/src/components/Popups/Popper.ts

@@ -31,3 +31,21 @@ export default function create(
 ): Instance {
     return popper.createPopper(reference, popup, mergeWith({}, defaults, options, merger) as Options);
 }
+
+export function clientBoundingRect(height: number, width: number, x: number, y: number): DOMRect {
+    const rect = {
+        bottom: y + height,
+        height,
+        left: x,
+        right: x + width,
+        top: y,
+        width,
+        x,
+        y,
+    };
+
+    return {
+        ...rect,
+        toJSON: () => ({ ...rect }),
+    };
+}

package/src/components/Popups/PopupBase.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import createPopper, { Instance, Options, PopupReference } from './Popper';
 import './PopupBase.scss';

package/src/components/Popups/PopupCursor.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react';
+import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import messages from './messages';
 import PopupBase from './PopupBase';
-import { Options, VirtualElement } from './Popper';
+import { clientBoundingRect, Options, VirtualElement } from './Popper';
 import './PopupCursor.scss';
 
 const options: Partial<Options> = {
@@ -18,14 +18,7 @@ const options: Partial<Options> = {
 };
 
 const generateGetBoundingClientRect = (x = 0, y = 0) => {
-    return () => ({
-        width: 0,
-        height: 0,
-        top: y,
-        right: x,
-        bottom: y,
-        left: x,
-    });
+    return () => clientBoundingRect(0, 0, x, y);
 };
 
 export default function PopupCursor(): JSX.Element {

package/src/components/Popups/PopupHighlight.tsx

@@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl';
 import messages from './messages';
 import PopupBase from './PopupBase';
 import useOutsideEvent from '../../common/useOutsideEvent';
-import { Options } from './Popper';
+import { clientBoundingRect, Options } from './Popper';
 import { Shape } from '../../@types/model';
 import './PopupHighlight.scss';
 
@@ -50,14 +50,7 @@ export default function PopupHighlight({ onCancel = noop, onSubmit = noop, shape
     const { height, width, x, y } = shape;
 
     const reference = {
-        getBoundingClientRect: () => ({
-            bottom: y + height,
-            height,
-            left: x,
-            right: x + width,
-            top: y,
-            width,
-        }),
+        getBoundingClientRect: () => clientBoundingRect(height, width, x, y),
     };
 
     const handleKeydownOutside = (event: Event): void => {

package/src/components/Popups/PopupHighlightError.tsx

@@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';
 import messages from './messages';
 import PopupBase from './PopupBase';
 import useOutsideEvent from '../../common/useOutsideEvent';
-import { Options } from './Popper';
+import { clientBoundingRect, Options } from './Popper';
 import { Shape } from '../../@types/model';
 import './PopupHighlightError.scss';
 
@@ -48,14 +48,7 @@ export default function PopupHighlightError({ onCancel = noop, shape }: Props):
     const { height, width, x, y } = shape;
 
     const reference = {
-        getBoundingClientRect: () => ({
-            bottom: y + height,
-            height,
-            left: x,
-            right: x + width,
-            top: y,
-            width,
-        }),
+        getBoundingClientRect: () => clientBoundingRect(height, width, x, y),
     };
 
     useOutsideEvent('mousedown', popupRef.current?.popupRef, onCancel);

package/src/components/Popups/PopupReply.tsx

@@ -1,12 +1,11 @@
-import * as React from 'react';
-import * as Popper from '@popperjs/core';
-import * as ReactRedux from 'react-redux';
+import React from 'react';
+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 messages from './messages';
 import PopupBase from './PopupBase';
 import ReplyForm from '../ReplyForm';
-import usePrevious from '../../common/usePrevious';
 import { getScale, getRotation } from '../../store/options';
 import { PopupReference } from './Popper';
 import './PopupReply.scss';
@@ -89,18 +88,16 @@ export default function PopupReply({
     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 rotation = ReactRedux.useSelector(getRotation);
-    const prevRotation = usePrevious(rotation);
-    const scale = ReactRedux.useSelector(getScale);
-    const prevScale = usePrevious(scale);
+    const rotation = useSelector(getRotation);
+    const scale = useSelector(getScale);
 
     React.useEffect(() => {
         const { current: popup } = popupRef;
 
-        if (popup?.popper && (rotation !== prevRotation || scale !== prevScale)) {
+        if (popup?.popper) {
             popup.popper.update();
         }
-    }, [popupRef, prevRotation, prevScale, rotation, scale]);
+    }, [popupRef, rotation, scale]);
 
     return (
         <FocusTrap>

package/src/components/Popups/messages.ts

@@ -6,6 +6,11 @@ export default defineMessages({
         description: 'Aria label description for reply popup',
         defaultMessage: 'Comment',
     },
+    ariaLabelReplyField: {
+        id: 'ba.popup.reply.field',
+        description: 'Aria label description for annotation comment field',
+        defaultMessage: 'Type a comment',
+    },
     buttonCancel: {
         id: 'ba.popups.cancel',
         description: 'Button label for cancelling the creation of a description, comment, or reply',

package/src/components/ReplyField/ReplyField.tsx

@@ -6,8 +6,10 @@ import {
     getActiveMentionForEditorState,
 } from 'box-ui-elements/es/components/form-elements/draft-js-mention-selector/utils';
 import { DraftHandleValue, Editor, EditorState } from 'draft-js';
+import { IntlShape } from 'react-intl';
 import PopupList from '../Popups/PopupList';
 import { Collaborator } from '../../@types';
+import messages from '../Popups/messages';
 import { VirtualElement } from '../Popups/Popper';
 import './ReplyField.scss';
 
@@ -29,6 +31,7 @@ export type Props = {
     onChange: (editorState: EditorState) => void;
     placeholder?: string;
     setCursorPosition: (cursorPosition: number) => void;
+    intl: IntlShape;
 };
 
 export type State = {
@@ -197,13 +200,14 @@ export default class ReplyField extends React.Component<Props, State> {
     handleMouseDown = (event: React.SyntheticEvent): void => event.preventDefault(); // prevent the blur event so that Editor can remain focus
 
     render(): JSX.Element {
-        const { className, collaborators, editorState, isDisabled, placeholder, ...rest } = this.props;
+        const { className, collaborators, intl, editorState, isDisabled, placeholder, ...rest } = this.props;
         const { activeItemIndex, popupAutoScroll, popupReference } = this.state;
 
         return (
             <div className={classnames(className, 'ba-ReplyField')}>
                 <Editor
                     {...rest}
+                    ariaLabel={intl.formatMessage(messages.ariaLabelReplyField)}
                     ariaMultiline
                     editorState={editorState}
                     handleReturn={this.handleReturn}

package/src/components/ReplyForm/ReplyButton.tsx

@@ -7,7 +7,7 @@ export type Props = {
     isDisabled?: boolean;
     isPrimary?: boolean;
     onClick?: (event: React.MouseEvent) => void;
-    type: 'button' | 'submit' | 'reset' | undefined;
+    type?: 'button' | 'submit' | 'reset' | undefined;
 } & HTMLAttributes<HTMLButtonElement>;
 
 export default function ReplyButton({ children, isDisabled, isPrimary, onClick = noop, ...rest }: Props): JSX.Element {

package/src/components/ReplyForm/ReplyForm.tsx

@@ -70,12 +70,20 @@ const ReplyForm = (props: Props): JSX.Element => {
     }, [formRef]); // eslint-disable-line react-hooks/exhaustive-deps
 
     return (
-        <Form ref={formRef} className="ba-ReplyForm" data-testid="ba-ReplyForm">
+        <Form
+            ref={formRef}
+            className="ba-ReplyForm"
+            data-testid="ba-ReplyForm"
+            onPointerEnterCapture={undefined}
+            onPointerLeaveCapture={undefined}
+            placeholder={undefined}
+        >
             <div className="ba-Popup-main">
                 <ReplyField
                     className="ba-Popup-field"
                     data-testid="ba-Popup-field"
                     editorState={editorState}
+                    intl={intl}
                     isDisabled={isPending}
                     onChange={handleChange}
                     placeholder={intl.formatMessage(messages.fieldPlaceholder)}

package/src/drawing/DrawingAnnotations.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import DecoratedDrawingPath from './DecoratedDrawingPath';
 import DrawingList from './DrawingList';

package/src/drawing/DrawingCreator.tsx

@@ -35,7 +35,7 @@ export default function DrawingCreator({
     const drawingPathRef = React.useRef<DrawingPathRef>(null);
     const drawingSVGRef = React.useRef<DrawingSVGRef>(null);
     const renderHandleRef = React.useRef<number | null>(null);
-    const stroke = { color, size };
+    const stroke = React.useMemo(() => ({ color, size }), [color, size]);
 
     const getPoints = React.useCallback((): Array<Position> => {
         const { current: creatorEl } = creatorElRef;