box-annotations 4.1.1-beta.4 → 5.0.0

package/src/drawing/DrawingManager.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom/client';
 import BaseManager, { Props } from '../common/BaseManager';
 import DrawingAnnotationsContainer from './DrawingAnnotationsContainer';
 
@@ -10,6 +10,10 @@ export default class DrawingListManager extends BaseManager {
     }
 
     render(props: Props): void {
-        ReactDOM.render(<DrawingAnnotationsContainer location={this.location} {...props} />, this.reactEl);
+        if (!this.root) {
+            this.root = ReactDOM.createRoot(this.reactEl);
+        }
+
+        this.root.render(<DrawingAnnotationsContainer location={this.location} {...props} />);
     }
 }

package/src/drawing/actions.ts

@@ -18,7 +18,6 @@ export const createDrawingAction = (arg: CreateArg) => (dispatch: AppThunkDispat
             message,
             type: 'reply' as const,
         },
-        // eslint-disable-next-line @typescript-eslint/camelcase
         file_version: {
             id: getFileVersionId(state),
         },
@@ -27,7 +26,6 @@ export const createDrawingAction = (arg: CreateArg) => (dispatch: AppThunkDispat
                 type: 'page' as const,
                 value: location,
             },
-            // eslint-disable-next-line @typescript-eslint/camelcase
             path_groups: pathGroups,
             type: 'drawing' as const,
         },

package/src/drawing/drawingUtil.ts

@@ -20,7 +20,6 @@ export function formatDrawing(annotation: AnnotationDrawing): AnnotationDrawing
 
     return {
         target: {
-            // eslint-disable-next-line @typescript-eslint/camelcase
             path_groups: pathGroups.map(pathGroup => addClientIds(pathGroup)),
             ...targetRest,
         },

package/src/highlight/HighlightManager.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom/client';
 import BaseManager, { Props } from '../common/BaseManager';
 import HighlightContainer from './HighlightContainer';
 
@@ -10,6 +10,10 @@ export default class HighlightManager extends BaseManager {
     }
 
     render(props: Props): void {
-        ReactDOM.render(<HighlightContainer location={this.location} {...props} />, this.reactEl);
+        if (!this.root) {
+            this.root = ReactDOM.createRoot(this.reactEl);
+        }
+
+        this.root.render(<HighlightContainer location={this.location} {...props} />);
     }
 }

package/src/highlight/actions.ts

@@ -18,7 +18,6 @@ export const createHighlightAction = (arg: CreateArg) => (dispatch: AppThunkDisp
             message,
             type: 'reply' as const,
         },
-        // eslint-disable-next-line @typescript-eslint/camelcase
         file_version: {
             id: getFileVersionId(state),
         },

package/src/popup/PopupLayer.tsx

@@ -30,7 +30,7 @@ export type Props = {
     status: CreatorStatus;
 };
 
-const modeStagedMap: { [M in Mode]?: Function } = {
+const modeStagedMap: { [M in Mode]?: (staged: CreatorItem | null) => boolean } = {
     [Mode.DRAWING]: isCreatorStagedDrawing,
     [Mode.HIGHLIGHT]: isCreatorStagedHighlight,
     [Mode.REGION]: isCreatorStagedRegion,
@@ -52,7 +52,7 @@ const PopupLayer = (props: Props): JSX.Element | null => {
     } = props;
 
     const [reference, setReference] = React.useState<PopupReference | null>(null);
-    const canCreate = (modeStagedMap[mode] || noop)(staged) || isPromoting;
+    const canCreate = (modeStagedMap[mode]?.(staged ?? null) ?? false) || isPromoting;
     const canReply = status !== CreatorStatus.started && status !== CreatorStatus.init;
     const isPending = status === CreatorStatus.pending;
 

package/src/popup/PopupManager.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom/client';
 import BaseManager, { Props } from '../common/BaseManager';
 import PopupContainer from './PopupContainer';
 
@@ -10,6 +10,10 @@ export default class PopupManager extends BaseManager {
     }
 
     render(props: Props): void {
-        ReactDOM.render(<PopupContainer location={this.location} {...props} />, this.reactEl);
+        if (!this.root) {
+            this.root = ReactDOM.createRoot(this.reactEl);
+        }
+
+        this.root.render(<PopupContainer location={this.location} {...props} />);
     }
 }

package/src/region/RegionCreationManager.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom/client';
 import BaseManager, { Props } from '../common/BaseManager';
 import RegionCreationContainer from './RegionCreationContainer';
 
@@ -10,6 +10,10 @@ export default class RegionManager extends BaseManager {
     }
 
     render(props: Props): void {
-        ReactDOM.render(<RegionCreationContainer location={this.location} {...props} />, this.reactEl);
+        if (!this.root) {
+            this.root = ReactDOM.createRoot(this.reactEl);
+        }
+
+        this.root.render(<RegionCreationContainer location={this.location} {...props} />);
     }
 }

package/src/region/RegionManager.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom/client';
 import BaseManager, { Props } from '../common/BaseManager';
 import RegionAnnotationsContainer from './RegionAnnotationsContainer';
 
@@ -10,6 +10,10 @@ export default class RegionListManager extends BaseManager {
     }
 
     render(props: Props): void {
-        ReactDOM.render(<RegionAnnotationsContainer location={this.location} {...props} />, this.reactEl);
+        if (!this.root) {
+            this.root = ReactDOM.createRoot(this.reactEl);
+        }
+
+        this.root.render(<RegionAnnotationsContainer location={this.location} {...props} />);
     }
 }

package/src/region/actions.ts

@@ -17,7 +17,6 @@ export const createRegionAction = (arg: CreateArg) => (dispatch: AppThunkDispatc
             message,
             type: 'reply' as const,
         },
-        // eslint-disable-next-line @typescript-eslint/camelcase
         file_version: {
             id: getFileVersionId(state),
         },

package/src/store/highlight/actions.ts

@@ -19,7 +19,7 @@ declare global {
         createNodeIterator(
             root: Node,
             whatToShow?: number,
-            filter?: NodeFilter | Function,
+            filter?: NodeFilter | ((node: Node) => number | null),
             entityReferenceExpansion?: boolean,
         ): NodeIterator;
     }

package/src/store/users/actions.ts

@@ -20,9 +20,9 @@ export const fetchCollaboratorsAction = createAsyncThunk<APICollection<Collabora
         // Wrap the client request in a promise to allow it to be returned and cancelled
         return new Promise<APICollection<Collaborator>>((resolve, reject) => {
             client.getFileCollaborators(fileId, resolve, reject, {
-                filter_term: searchString, // eslint-disable-line @typescript-eslint/camelcase
-                include_groups: false, // eslint-disable-line @typescript-eslint/camelcase
-                include_uploader_collabs: false, // eslint-disable-line @typescript-eslint/camelcase
+                filter_term: searchString,
+                include_groups: false,
+                include_uploader_collabs: false,
             });
         });
     },

package/src/common/usePrevious.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-
-// Returns the last provided value, then caches the new value via an effect
-export default function usePrevious<T>(value: T): T | undefined {
-    const ref = React.useRef<T>();
-
-    // The useEffect callback is only invoked after the parent component has rendered
-    React.useEffect(() => {
-        ref.current = value;
-    }, [value]);
-
-    return ref.current;
-}