box-annotations 4.1.1-beta.3 → 4.1.1-beta.5

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.3",
+    "version": "4.1.1-beta.5",
     "description": "Box Annotations",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",
@@ -12,7 +12,7 @@
         "registry": "https://registry.npmjs.org/"
     },
     "engines": {
-        "node": ">=10.x",
+        "node": ">=18.x",
         "yarn": ">=1.10.x"
     },
     "devDependencies": {
@@ -55,7 +55,7 @@
         "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": "^18.1.0",
         "circular-dependency-plugin": "^5.2.0",
         "classnames": "^2.2.5",
         "conventional-github-releaser": "^3.1.3",
@@ -82,12 +82,11 @@
         "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",
@@ -100,6 +99,7 @@
         "react-tether": "1.0.5",
         "react-textarea-autosize": "^7.1.2",
         "redux": "^4.0.5",
+        "sass": "^1.64.1",
         "sass-loader": "^8.0.2",
         "scroll-into-view-if-needed": "^2.2.24",
         "style-loader": "^1.1.4",
@@ -120,8 +120,8 @@
     "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:prod:dist": "BABEL_ENV=production NODE_ENV=production webpack --config scripts/webpack.config.js --mode production",
+        "build:dev:dist": "LANGUAGE=en-US BABEL_ENV=dev NODE_ENV=dev NODE_OPTIONS=--openssl-legacy-provider webpack --config scripts/webpack.config.js --mode development --progress --colors",
+        "build:prod:dist": "LANGUAGE=en-US BABEL_ENV=production NODE_ENV=production NODE_OPTIONS=--openssl-legacy-provider 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",
@@ -138,7 +138,7 @@
         "release:pre": "scripts/release.sh -x",
         "setup": "yarn install && yarn clean && yarn build:i18n",
         "start": "yarn setup && yarn build:dev:dist --watch",
-        "start:dev": "yarn setup && LANGUAGE=en-US BABEL_ENV=dev NODE_ENV=dev yarn webpack-dev-server --config scripts/webpack.config.js --mode development",
+        "start:dev": "yarn setup && LANGUAGE=en-US BABEL_ENV=dev NODE_ENV=dev NODE_OPTIONS=--openssl-legacy-provider yarn webpack-dev-server --config scripts/webpack.config.js --mode development",
         "start:linked": "IS_LINKED=1 yarn start",
         "test": "BABEL_ENV=test NODE_ENV=test yarn jest",
         "test:e2e": "node scripts/cypress.js",

package/src/common/BaseAnnotator.scss

@@ -30,3 +30,13 @@
     @include box-sizing;
     @include common-typography;
 }
+
+.ba-Layer--drawing,
+.ba-Layer--highlight,
+.ba-Layer--region {
+    z-index: 3;
+}
+
+.ba-Layer--popup {
+    z-index: 4;
+}

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/ReplyForm.tsx

@@ -76,6 +76,7 @@ const ReplyForm = (props: Props): JSX.Element => {
                     className="ba-Popup-field"
                     data-testid="ba-Popup-field"
                     editorState={editorState}
+                    intl={intl}
                     isDisabled={isPending}
                     onChange={handleChange}
                     placeholder={intl.formatMessage(messages.fieldPlaceholder)}

package/src/image/ImageAnnotator.scss

@@ -15,6 +15,6 @@
     // transform applied to each of the managers' react mount element to account for
     // rotation
     .ba-Layer--popup {
-        z-index: 1;
+        z-index: 4;
     }
 }