box-annotations 5.2.1-beta.11 → 5.2.1-beta.12

package/package.json

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

package/src/common/BaseAnnotator.scss

@@ -28,3 +28,14 @@
 .ba-Layer--popup {
     z-index: 4;
 }
+
+.ba-PopupPortal {
+    position: relative;
+    z-index: 10;
+    pointer-events: none;
+
+    .ba-Popup {
+        z-index: 150;
+        pointer-events: auto;
+    }
+}

package/src/common/DeselectListener.tsx

@@ -8,7 +8,7 @@ export default function DeselectListener(): null {
     React.useEffect(() => {
         const handleMouseDown = (event: MouseEvent): void => {
             // Popup is portaled outside .ba-Layer; native mousedown still bubbles here.
-            if ((event.target as Element | null)?.closest?.('.ba-PopupV2')) return;
+            if ((event.target as Element | null)?.closest?.('.ba-PopupV2, .ba-Popup')) return;
             dispatch(setActiveAnnotationIdAction(null));
         };
 

package/src/components/Popups/PopupDrawingToolbar.tsx

@@ -33,12 +33,6 @@ export type Props = {
 
 const options: Partial<Options> = {
     modifiers: [
-        {
-            name: 'eventListeners',
-            options: {
-                scroll: false,
-            },
-        },
         {
             name: 'offset',
             options: {
@@ -48,7 +42,6 @@ const options: Partial<Options> = {
         {
             name: 'preventOverflow',
             options: {
-                altAxis: true,
                 padding: 50,
             },
         },

package/src/document/DocumentAnnotator.ts

@@ -103,7 +103,7 @@ export default class DocumentAnnotator extends BaseAnnotator {
 
             // Annotations mode
             managers.add(new PopupManager({ location: pageNumber, popupPortalEl: this.popupPortalEl, referenceEl: pageReferenceEl, resinTags }));
-            managers.add(new DrawingManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }));
+            managers.add(new DrawingManager({ location: pageNumber, popupPortalEl: this.popupPortalEl, referenceEl: pageReferenceEl, resinTags }));
 
             const textLayer = pageEl.querySelector('.textLayer') as HTMLElement;
 

package/src/drawing/DrawingAnnotations.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import DecoratedDrawingPath from './DecoratedDrawingPath';
 import DrawingList from './DrawingList';
@@ -22,6 +23,7 @@ export type Props = {
     drawnPathGroups: Array<PathGroup>;
     isCreating: boolean;
     location: number;
+    popupPortalEl?: HTMLElement | null;
     redoDrawingPathGroup: () => void;
     resetDrawing: () => void;
     rotation: number;
@@ -46,6 +48,7 @@ const DrawingAnnotations = (props: Props): JSX.Element => {
         drawnPathGroups,
         isCreating,
         location,
+        popupPortalEl,
         redoDrawingPathGroup,
         resetDrawing,
         rotation,
@@ -176,20 +179,22 @@ const DrawingAnnotations = (props: Props): JSX.Element => {
                 />
             )}
 
-            {isCreating && hasPathGroups && drawingSVGGroup && canShowPopupToolbar && (
-                <PopupDrawingToolbar
-                    ref={popupDrawingToolbarRef}
-                    canComment={hasDrawnPathGroups}
-                    canRedo={hasStashedPathGroups}
-                    canUndo={hasDrawnPathGroups}
-                    className={classNames('ba-DrawingAnnotations-toolbar', { 'ba-is-drawing': isDrawing })}
-                    onDelete={handleDelete}
-                    onRedo={handleRedo}
-                    onReply={handleReply}
-                    onUndo={handleUndo}
-                    reference={drawingSVGGroup}
-                />
-            )}
+            {isCreating && hasPathGroups && drawingSVGGroup && canShowPopupToolbar && popupPortalEl &&
+                ReactDOM.createPortal(
+                    <PopupDrawingToolbar
+                        ref={popupDrawingToolbarRef}
+                        canComment={hasDrawnPathGroups}
+                        canRedo={hasStashedPathGroups}
+                        canUndo={hasDrawnPathGroups}
+                        className={classNames('ba-DrawingAnnotations-toolbar', { 'ba-is-drawing': isDrawing })}
+                        onDelete={handleDelete}
+                        onRedo={handleRedo}
+                        onReply={handleReply}
+                        onUndo={handleUndo}
+                        reference={drawingSVGGroup}
+                    />,
+                    popupPortalEl,
+                )}
         </>
     );
 };

package/src/drawing/DrawingManager.tsx

@@ -1,9 +1,20 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
-import BaseManager, { Props } from '../common/BaseManager';
+import BaseManager, { Options as BaseOptions, Props } from '../common/BaseManager';
 import DrawingAnnotationsContainer from './DrawingAnnotationsContainer';
 
+export type Options = BaseOptions & {
+    popupPortalEl?: HTMLElement | null;
+};
+
 export default class DrawingListManager extends BaseManager {
+    popupPortalEl?: HTMLElement | null;
+
+    constructor({ popupPortalEl, ...options }: Options) {
+        super(options);
+        this.popupPortalEl = popupPortalEl;
+    }
+
     decorate(): void {
         this.reactEl.classList.add('ba-Layer--drawing');
         this.reactEl.dataset.testid = 'ba-Layer--drawing';
@@ -14,6 +25,6 @@ export default class DrawingListManager extends BaseManager {
             this.root = ReactDOM.createRoot(this.reactEl);
         }
 
-        this.root.render(<DrawingAnnotationsContainer referenceEl={this.referenceEl} targetType={this.targetType} location={this.location} {...props} />);
+        this.root.render(<DrawingAnnotationsContainer referenceEl={this.referenceEl} targetType={this.targetType} location={this.location} popupPortalEl={this.popupPortalEl} {...props} />);
     }
 }

package/src/image/ImageAnnotator.ts

@@ -74,7 +74,7 @@ export default class ImageAnnotator extends BaseAnnotator {
             }
 
             this.managers.add(new PopupManager({ popupPortalEl: this.popupPortalEl, referenceEl, resinTags }));
-            this.managers.add(new DrawingManager({ referenceEl, resinTags }));
+            this.managers.add(new DrawingManager({ popupPortalEl: this.popupPortalEl, referenceEl, resinTags }));
             this.managers.add(new RegionManager({ referenceEl, resinTags }));
             this.managers.add(new RegionCreationManager({ referenceEl, resinTags }));
         }

package/src/popup/PopupLayer.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import noop from 'lodash/noop';
 import PopupReply from '../components/Popups/PopupReply';
 import PopupV2 from '../components/Popups/PopupV2';
@@ -121,7 +122,8 @@ const PopupLayer = (props: Props): JSX.Element | null => {
     }
 
     if (showCreator) {
-        return (
+        if (!popupPortalEl) return null;
+        return ReactDOM.createPortal(
             <div className="ba-PopupLayer-popup">
                 <PopupReply
                     isPending={isPending}
@@ -131,7 +133,8 @@ const PopupLayer = (props: Props): JSX.Element | null => {
                     reference={reference}
                     value={message}
                 />
-            </div>
+            </div>,
+            popupPortalEl,
         );
     }