box-annotations 5.2.1-beta.5 → 5.2.1-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-annotations",
-    "version": "5.2.1-beta.5",
+    "version": "5.2.1-beta.6",
     "description": "Box Annotations",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",

package/src/components/BoundingBoxHighlight/BoundingBoxHighlightNav.tsx

@@ -8,8 +8,8 @@ import './BoundingBoxHighlightNav.scss';
 type Props = {
     currentIndex: number;
     total: number;
-    onPrev: (event: React.MouseEvent) => void;
-    onNext: (event: React.MouseEvent) => void;
+    onPrev: (event: React.MouseEvent | KeyboardEvent) => void;
+    onNext: (event: React.MouseEvent | KeyboardEvent) => void;
 };
 
 const BoundingBoxHighlightNav = ({ currentIndex, total, onPrev, onNext }: Props): JSX.Element => {
@@ -17,6 +17,25 @@ const BoundingBoxHighlightNav = ({ currentIndex, total, onPrev, onNext }: Props)
     const isPrevDisabled = currentIndex === 0;
     const isNextDisabled = currentIndex === total - 1;
 
+    React.useEffect(() => {
+        const handleKeyDown = (event: KeyboardEvent): void => {
+            if (event.key === 'ArrowLeft') {
+                event.stopPropagation();
+                if (!isPrevDisabled) {
+                    onPrev(event);
+                }
+            } else if (event.key === 'ArrowRight') {
+                event.stopPropagation();
+                if (!isNextDisabled) {
+                    onNext(event);
+                }
+            }
+        };
+
+        document.addEventListener('keydown', handleKeyDown, { capture: true });
+        return () => document.removeEventListener('keydown', handleKeyDown, { capture: true });
+    }, [isPrevDisabled, isNextDisabled, onPrev, onNext]);
+
     return (
         <div className="ba-BoundingBoxHighlightNav" data-testid="ba-BoundingBoxHighlightNav">
             <button

package/src/components/BoundingBoxHighlight/BoundingBoxHighlightRect.tsx

@@ -40,14 +40,14 @@ const BoundingBoxHighlightRect = ({
         onSelect?.(id);
     };
 
-    const handlePrev = (event: React.MouseEvent): void => {
+    const handlePrev = (event: React.MouseEvent | KeyboardEvent): void => {
         event.stopPropagation();
         if (prevId) {
             onNavigate?.(prevId);
         }
     };
 
-    const handleNext = (event: React.MouseEvent): void => {
+    const handleNext = (event: React.MouseEvent | KeyboardEvent): void => {
         event.stopPropagation();
         if (nextId) {
             onNavigate?.(nextId);