box-annotations 4.0.0 → 4.1.0

package/i18n/ja-JP.js

@@ -7,7 +7,7 @@ export default {
   "ba.popups.cancel": "キャンセル",
   "ba.popups.drawing.addComment": "コメントを追加",
   "ba.popups.drawing.delete": "削除",
-  "ba.popups.drawing.redo": "やり直し",
+  "ba.popups.drawing.redo": "やり直す",
   "ba.popups.drawing.undo": "元に戻す",
   "ba.popups.popupCursor.regionPrompt": "四角を描いてコメント",
   "ba.popups.popupHighlight.promoter": "ハイライトとコメント",

package/i18n/ja-JP.properties

@@ -15,7 +15,7 @@ ba.popups.drawing.addComment = コメントを追加
 # Button title for deleting a staged drawing
 ba.popups.drawing.delete = 削除
 # Button title for redoing a staged drawing
-ba.popups.drawing.redo = やり直し
+ba.popups.drawing.redo = やり直す
 # Button title for undoing a staged drawing
 ba.popups.drawing.undo = 元に戻す
 # Prompt message following cursor in region annotations mode

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-annotations",
-    "version": "4.0.0",
+    "version": "4.1.0",
     "description": "Box Annotations",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",
@@ -15,27 +15,6 @@
         "node": ">=10.x",
         "yarn": ">=1.10.x"
     },
-    "dependencies": {
-        "@formatjs/intl-pluralrules": "^1.5.5",
-        "@formatjs/intl-relativetimeformat": "^4.5.12",
-        "@popperjs/core": "^2.4.0",
-        "@reduxjs/toolkit": "^1.3.5",
-        "axios": "^0.19.2",
-        "box-ui-elements": "^12.1.0-beta.42",
-        "classnames": "^2.2.5",
-        "draft-js": "0.10.5",
-        "formik": "^2.1.4",
-        "lodash": "^4.17.15",
-        "react": "^17.0.1",
-        "react-dom": "^17.0.1",
-        "react-intl": "^3.12.0",
-        "react-redux": "^7.2.2",
-        "react-tether": "1.0.5",
-        "react-textarea-autosize": "^7.1.2",
-        "redux": "^4.0.5",
-        "scroll-into-view-if-needed": "^2.2.24",
-        "uuid": "^8.3.1"
-    },
     "devDependencies": {
         "@babel/cli": "^7.8.4",
         "@babel/core": "^7.9.0",
@@ -51,6 +30,10 @@
         "@box/languages": "^1.1.0",
         "@commitlint/cli": "^8.3.5",
         "@commitlint/config-conventional": "^8.2.0",
+        "@formatjs/intl-pluralrules": "^1.5.5",
+        "@formatjs/intl-relativetimeformat": "^4.5.12",
+        "@popperjs/core": "^2.4.0",
+        "@reduxjs/toolkit": "^1.3.5",
         "@types/classnames": "^2.2.10",
         "@types/draft-js": "^0.10.40",
         "@types/enzyme": "^3.10.5",
@@ -64,6 +47,7 @@
         "@typescript-eslint/parser": "^2.29.0",
         "@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
         "autoprefixer": "^9.7.6",
+        "axios": "^0.24.0",
         "babel-eslint": "^10.1.0",
         "babel-jest": "^24.9.0",
         "babel-loader": "^8.1.0",
@@ -71,11 +55,14 @@
         "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",
         "circular-dependency-plugin": "^5.2.0",
+        "classnames": "^2.2.5",
         "conventional-github-releaser": "^3.1.3",
         "core-js": "^3.6.5",
         "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",
@@ -92,11 +79,13 @@
         "eslint-plugin-prettier": "^3.1.3",
         "eslint-plugin-react": "^7.19.0",
         "eslint-plugin-react-hooks": "^1.7.0",
+        "formik": "^2.1.4",
         "husky": "^3.1.0",
         "jest": "^24.9.0",
         "jest-canvas-mock": "^2.2.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",
@@ -104,7 +93,15 @@
         "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-tether": "1.0.5",
+        "react-textarea-autosize": "^7.1.2",
+        "redux": "^4.0.5",
         "sass-loader": "^8.0.2",
+        "scroll-into-view-if-needed": "^2.2.24",
         "style-loader": "^1.1.4",
         "stylelint": "^12.0.0",
         "stylelint-config-rational-order": "^0.1.2",
@@ -112,6 +109,7 @@
         "stylelint-order": "^3.1.1",
         "typescript": "^3.8.3",
         "uglifyjs-webpack-plugin": "^2.2.0",
+        "uuid": "^8.3.1",
         "wait-on": "^4.0.2",
         "webpack": "^4.43.0",
         "webpack-cli": "^3.3.11",

package/src/common/useOutsideEvent.ts

@@ -4,15 +4,15 @@ import * as React from 'react';
 export default function useOutsideEvent(
     type: string,
     ref?: React.RefObject<Element> | Element | null,
-    callback?: () => void,
+    callback?: EventListener,
 ): void {
     React.useEffect(() => {
-        function handleEvent(event: Event): void {
+        function handleEvent<T extends Event>(event: T): void {
             const element = ref instanceof Element ? ref : ref?.current;
             const containsEventTarget = !!element?.contains(event.target as Node);
 
             if (callback && !containsEventTarget) {
-                callback();
+                callback(event);
             }
         }
 

package/src/components/Popups/PopupHighlight.tsx

@@ -11,7 +11,7 @@ import './PopupHighlight.scss';
 
 export type Props = {
     onCancel?: () => void;
-    onClick?: (event: React.MouseEvent) => void;
+    onSubmit?: () => void;
     shape: Shape;
 };
 
@@ -45,7 +45,7 @@ const options: Partial<Options> = {
     placement: 'bottom',
 };
 
-export default function PopupHighlight({ onCancel = noop, onClick = noop, shape }: Props): JSX.Element {
+export default function PopupHighlight({ onCancel = noop, onSubmit = noop, shape }: Props): JSX.Element {
     const buttonRef = React.useRef<HTMLButtonElement>(null);
     const { height, width, x, y } = shape;
 
@@ -60,19 +60,33 @@ export default function PopupHighlight({ onCancel = noop, onClick = noop, shape
         }),
     };
 
-    const handleClick = (event: React.MouseEvent): void => {
-        onClick(event);
+    const handleKeydownOutside = (event: Event): void => {
+        if (!(event instanceof KeyboardEvent) || event.key !== 'Enter' || event.ctrlKey || event.metaKey) {
+            return;
+        }
+
+        event.preventDefault(); // Consume any enter keydown event if the promoter is open
+        event.stopPropagation(); // Prevent the enter keydown event from adding a new line to the textarea
+
+        onSubmit();
     };
 
+    useOutsideEvent('keydown', buttonRef, handleKeydownOutside);
     useOutsideEvent('mousedown', buttonRef, onCancel);
 
     return (
-        <PopupBase className="ba-PopupHighlight" options={options} reference={reference}>
+        <PopupBase
+            aria-live="polite"
+            className="ba-PopupHighlight"
+            options={options}
+            reference={reference}
+            role="dialog"
+        >
             <button
                 ref={buttonRef}
                 className="ba-PopupHighlight-button"
                 data-testid="ba-PopupHighlight-button"
-                onClick={handleClick}
+                onClick={onSubmit}
                 type="button"
             >
                 <IconHighlightTextAnnotation className="ba-PopupHighlight-icon" />

package/src/highlight/HighlightAnnotations.tsx

@@ -70,16 +70,15 @@ const HighlightAnnotations = (props: Props): JSX.Element => {
         setStatus(CreatorStatus.staged);
     }, [selection, setStaged, setStatus]);
 
+    const handleCancel = (): void => {
+        setSelection(null);
+    };
+
     const handlePromote = (): void => {
         stageSelection();
-
         setIsPromoting(true);
     };
 
-    const handleCancel = (): void => {
-        setSelection(null);
-    };
-
     const handleStagedMount = (uuid: string): void => {
         setReferenceId(uuid);
     };
@@ -126,7 +125,7 @@ const HighlightAnnotations = (props: Props): JSX.Element => {
                 <div className="ba-HighlightAnnotations-popup">
                     <PopupHighlight
                         onCancel={handleCancel}
-                        onClick={handlePromote}
+                        onSubmit={handlePromote}
                         shape={getBoundingRect(selection.rects)}
                     />
                 </div>