box-annotations 5.2.1-beta.7 → 5.2.1-beta.8

package/package.json

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

package/src/common/BaseAnnotator.scss

@@ -7,7 +7,8 @@
     @import '~box-ui-elements/es/styles/common/buttons';
 
     &.is-hidden {
-        .ba-Layer {
+        .ba-Layer,
+        .ba-PopupPortal {
             display: none;
         }
     }

package/src/common/BaseAnnotator.ts

@@ -49,6 +49,7 @@ export type Options = {
 
 export const CSS_CONTAINER_CLASS = 'ba';
 export const CSS_LOADED_CLASS = 'ba-annotations-loaded';
+export const CSS_POPUP_PORTAL_CLASS = 'ba-PopupPortal';
 export const ANNOTATION_CLASSES: { [M in store.Mode]?: string } = {
     [store.Mode.HIGHLIGHT]: 'ba-is-create--highlight',
     [store.Mode.REGION]: 'ba-is-create--region',
@@ -59,6 +60,8 @@ export default class BaseAnnotator extends EventEmitter {
 
     containerEl?: HTMLElement | null;
 
+    popupPortalEl?: HTMLElement | null;
+
     container: Container;
 
     deselectManager: DeselectManager | null = null;
@@ -132,6 +135,11 @@ export default class BaseAnnotator extends EventEmitter {
             this.containerEl.classList.remove(CSS_CONTAINER_CLASS);
         }
 
+        if (this.popupPortalEl) {
+            this.popupPortalEl.remove();
+            this.popupPortalEl = null;
+        }
+
         if (this.annotatedEl) {
             this.annotatedEl.classList.remove(CSS_LOADED_CLASS);
         }
@@ -166,6 +174,12 @@ export default class BaseAnnotator extends EventEmitter {
         this.annotatedEl.classList.add(CSS_LOADED_CLASS);
         this.containerEl.classList.add(CSS_CONTAINER_CLASS);
 
+        if (!this.popupPortalEl) {
+            this.popupPortalEl = this.containerEl.ownerDocument.createElement('div');
+            this.popupPortalEl.classList.add(CSS_POPUP_PORTAL_CLASS);
+            this.containerEl.appendChild(this.popupPortalEl);
+        }
+
         // Defer to the child class to render annotations
         this.render();
 

package/src/common/DeselectListener.tsx

@@ -6,7 +6,9 @@ export default function DeselectListener(): null {
     const dispatch = useDispatch();
 
     React.useEffect(() => {
-        const handleMouseDown = (): void => {
+        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;
             dispatch(setActiveAnnotationIdAction(null));
         };
 

package/src/components/Popups/PopupV2.scss

@@ -1,5 +1,8 @@
 .ba-PopupV2 {
-    z-index: 1;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 150;
     width: 348px;
 }
 

package/src/components/Popups/PopupV2.tsx

@@ -1,7 +1,9 @@
-import React from 'react';
 import noop from 'lodash/noop';
-import { useDispatch, useSelector } from 'react-redux';
+import React from 'react';
+import ReactDOM from 'react-dom';
 import { useIntl } from 'react-intl';
+import { useDispatch, useSelector } from 'react-redux';
+
 import { BlueprintModernizationProvider } from '@box/blueprint-web';
 import {
     MentionContextProvider,
@@ -35,6 +37,7 @@ import './PopupV2.scss';
 export type Props = {
     annotationId?: string;
     onSubmit: (text: string) => void;
+    popupPortalEl?: HTMLElement | null;
     reference: PopupReference;
 };
 
@@ -74,7 +77,7 @@ const fetchAvatarBlob = async (apiHost: string, token: string, userId: string):
     }
 };
 
-const PopupV2 = ({ annotationId, onSubmit, reference }: Props): JSX.Element => {
+const PopupV2 = ({ annotationId, onSubmit, popupPortalEl, reference }: Props): JSX.Element | null => {
     const intl = useIntl();
     const dispatch = useDispatch<AppThunkDispatch>();
     const popupRef = React.useRef<HTMLDivElement>(null);
@@ -260,7 +263,9 @@ const PopupV2 = ({ annotationId, onSubmit, reference }: Props): JSX.Element => {
         [annotationId, dispatch],
     );
 
-    return (
+    if (!popupPortalEl) return null;
+
+    return ReactDOM.createPortal(
         <FocusTrap>
             <div
                 ref={popupRef}
@@ -307,7 +312,8 @@ const PopupV2 = ({ annotationId, onSubmit, reference }: Props): JSX.Element => {
                 </BlueprintModernizationProvider>
                 <div data-threaded-annotations-portal />
             </div>
-        </FocusTrap>
+        </FocusTrap>,
+        popupPortalEl,
     );
 };
 

package/src/document/DocumentAnnotator.ts

@@ -24,6 +24,9 @@ import type { ViewMode } from '../store/options/types';
 // Pdf.js textLayer enhancement requires waiting for 300ms (they hardcode this magic number)
 const TEXT_LAYER_ENHANCEMENT = 300;
 
+// Vertical padding on each page element as provided by Preview SDK (see DocumentAnnotator.scss)
+const PAGE_PADDING = 15;
+
 export default class DocumentAnnotator extends BaseAnnotator {
     annotatedEl?: HTMLElement;
 
@@ -99,7 +102,7 @@ export default class DocumentAnnotator extends BaseAnnotator {
             }
 
             // Annotations mode
-            managers.add(new PopupManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }));
+            managers.add(new PopupManager({ location: pageNumber, popupPortalEl: this.popupPortalEl, referenceEl: pageReferenceEl, resinTags }));
             managers.add(new DrawingManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }));
 
             const textLayer = pageEl.querySelector('.textLayer') as HTMLElement;
@@ -200,7 +203,7 @@ export default class DocumentAnnotator extends BaseAnnotator {
 
         // Calculate original (unrotated) page dimensions for annotation layer sizing
         const pageWidth = pageEl.clientWidth;
-        const pageHeight = pageEl.clientHeight;
+        const pageHeight = pageEl.clientHeight - PAGE_PADDING * 2;
         const isOrthogonal = rotation % 180 !== 0;
         const origWidth = isOrthogonal ? pageHeight : pageWidth;
         const origHeight = isOrthogonal ? pageWidth : pageHeight;

package/src/image/ImageAnnotator.ts

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

package/src/media/MediaAnnotator.ts

@@ -46,7 +46,7 @@ export default class MediaAnnotator extends BaseAnnotator {
 
 
     addManagers(referenceEl: HTMLVideoElement, resinTags: { fileid: string|null; iscurrent: boolean }): void {
-        this.managers.add(new PopupManager({ location: MEDIA_LOCATION_INDEX, referenceEl, resinTags, targetType: TARGET_TYPE.FRAME }));
+        this.managers.add(new PopupManager({ location: MEDIA_LOCATION_INDEX, popupPortalEl: this.popupPortalEl, referenceEl, resinTags, targetType: TARGET_TYPE.FRAME }));
         this.managers.add(new DrawingManager({ location: MEDIA_LOCATION_INDEX, referenceEl, resinTags, targetType: TARGET_TYPE.FRAME }));
         this.managers.add(new RegionManager({ location: MEDIA_LOCATION_INDEX, referenceEl, resinTags, targetType: TARGET_TYPE.FRAME }));
         this.managers.add(new RegionCreationManager({ location: MEDIA_LOCATION_INDEX, referenceEl, resinTags, targetType: TARGET_TYPE.FRAME }));

package/src/popup/PopupContainer.tsx

@@ -20,6 +20,13 @@ import { isFeatureEnabled } from '../store/options';
 import { createDrawingAction } from '../drawing/actions';
 import { createHighlightAction } from '../highlight/actions';
 import { createRegionAction } from '../region';
+import { TARGET_TYPE } from '../constants';
+
+export type OwnProps = {
+    location: number;
+    popupPortalEl?: HTMLElement | null;
+    targetType?: TARGET_TYPE;
+};
 
 export type Props = {
     activeAnnotationId: string | null;
@@ -32,7 +39,7 @@ export type Props = {
     status: CreatorStatus;
 };
 
-export const mapStateToProps = (state: AppState, { location }: { location: number }): Props => {
+export const mapStateToProps = (state: AppState, { location }: OwnProps): Props => {
     return {
         activeAnnotationId: getActiveAnnotationId(state),
         isPromoting: getIsPromoting(state),

package/src/popup/PopupLayer.tsx

@@ -29,6 +29,7 @@ export type Props = {
     location: number;
     message: string;
     mode: Mode;
+    popupPortalEl?: HTMLElement | null;
     referenceId: string | null;
     resetCreator: () => void;
     setMessage: (message: string) => void;
@@ -53,6 +54,7 @@ const PopupLayer = (props: Props): JSX.Element | null => {
         isThreadedAnnotation = false,
         message,
         mode,
+        popupPortalEl,
         referenceId,
         resetCreator,
         setMessage,
@@ -111,6 +113,7 @@ const PopupLayer = (props: Props): JSX.Element | null => {
             <div className="ba-PopupLayer-popup">
                 <PopupV2
                     onSubmit={handleSubmit}
+                    popupPortalEl={popupPortalEl}
                     reference={reference}
                 />
             </div>
@@ -138,6 +141,7 @@ const PopupLayer = (props: Props): JSX.Element | null => {
                 <PopupV2
                     annotationId={activeAnnotationId}
                     onSubmit={handleSubmit}
+                    popupPortalEl={popupPortalEl}
                     reference={activeReference}
                 />
             </div>

package/src/popup/PopupManager.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 PopupContainer from './PopupContainer';
 
+export type Options = BaseOptions & {
+    popupPortalEl?: HTMLElement | null;
+};
+
 export default class PopupManager extends BaseManager {
+    popupPortalEl?: HTMLElement | null;
+
+    constructor({ popupPortalEl, ...options }: Options) {
+        super(options);
+        this.popupPortalEl = popupPortalEl;
+    }
+
     decorate(): void {
         this.reactEl.classList.add('ba-Layer--popup');
         this.reactEl.dataset.testid = 'ba-Layer--popup';
@@ -13,7 +24,14 @@ export default class PopupManager extends BaseManager {
         if (!this.root) {
             this.root = ReactDOM.createRoot(this.reactEl);
         }
-       
-        this.root.render(<PopupContainer location={this.location}  {...props} targetType={this.targetType} />);
+
+        this.root.render(
+            <PopupContainer
+                location={this.location}
+                {...props}
+                popupPortalEl={this.popupPortalEl}
+                targetType={this.targetType}
+            />,
+        );
     }
 }