box-annotations 4.1.1-beta.5 → 5.1.0

package/dist/annotations.js.LICENSE.txt

@@ -0,0 +1,89 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/*!
+  Copyright (c) 2017 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+
+/*!
+ * Box Annotations
+ * 
+ * Copyright 2016-present Box, Inc. All Rights Reserved.
+ * 
+ * This source code is licensed under the Box Software License Agreement found
+ * in the LICENSE file in the root directory of this source tree. Additional
+ * third party license disclosures can be found in the THIRD_PARTY_LICENSES
+ * file in the same directory.
+ */
+
+/*!
+ * UAParser.js v0.7.21
+ * Lightweight JavaScript-based User-Agent string parser
+ * https://github.com/faisalman/ua-parser-js
+ *
+ * Copyright © 2012-2019 Faisal Salman <f@faisalman.com>
+ * Licensed under MIT License
+ */
+
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * use-sync-external-store-with-selector.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v0.18.0
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.12.0
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-annotations",
-    "version": "4.1.1-beta.5",
+    "version": "5.1.0",
     "description": "Box Annotations",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",
@@ -16,18 +16,20 @@
         "yarn": ">=1.10.x"
     },
     "devDependencies": {
-        "@babel/cli": "^7.8.4",
-        "@babel/core": "^7.9.0",
-        "@babel/plugin-proposal-class-properties": "^7.8.3",
-        "@babel/plugin-transform-flow-strip-types": "^7.9.0",
-        "@babel/plugin-transform-object-assign": "^7.8.3",
-        "@babel/plugin-transform-runtime": "^7.9.0",
-        "@babel/polyfill": "^7.8.7",
-        "@babel/preset-env": "^7.9.5",
-        "@babel/preset-react": "^7.9.4",
-        "@babel/preset-typescript": "^7.9.0",
-        "@box/frontend": "^6.4.0",
+        "@babel/cli": "^7.25.9",
+        "@babel/core": "^7.25.9",
+        "@babel/eslint-parser": "^7.24.7",
+        "@babel/plugin-proposal-class-properties": "^7.18.6",
+        "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+        "@babel/plugin-transform-flow-strip-types": "^7.25.9",
+        "@babel/plugin-transform-object-assign": "^7.25.9",
+        "@babel/plugin-transform-runtime": "^7.25.9",
+        "@babel/preset-env": "^7.25.9",
+        "@babel/preset-react": "^7.25.9",
+        "@babel/preset-typescript": "^7.25.9",
+        "@box/frontend": "^10.0.0",
         "@box/languages": "^1.1.0",
+        "@cfaester/enzyme-adapter-react-18": "^0.8.0",
         "@commitlint/cli": "^8.3.5",
         "@commitlint/config-conventional": "^8.2.0",
         "@formatjs/intl-pluralrules": "^1.5.5",
@@ -39,46 +41,45 @@
         "@types/enzyme": "^3.10.5",
         "@types/jest": "^24.9.0",
         "@types/lodash": "^4.14.150",
-        "@types/react": "^17.0.2",
-        "@types/react-dom": "^17.0.1",
-        "@types/react-redux": "^7.1.16",
+        "@types/react": "18.3.12",
+        "@types/react-dom": "18.3.1",
+        "@types/react-redux": "^7.1.33",
         "@types/uuid": "^8.3.0",
-        "@typescript-eslint/eslint-plugin": "^2.29.0",
-        "@typescript-eslint/parser": "^2.29.0",
-        "@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
+        "@typescript-eslint/eslint-plugin": "^7.3.1",
+        "@typescript-eslint/parser": "^7.3.1",
         "autoprefixer": "^9.7.6",
         "axios": "^0.24.0",
         "babel-eslint": "^10.1.0",
         "babel-jest": "^24.9.0",
-        "babel-loader": "^8.1.0",
+        "babel-loader": "^8.3.0",
         "babel-plugin-istanbul": "^6.0.0",
         "babel-plugin-react-intl": "^7.5.1",
         "babel-plugin-transform-require-ignore": "^0.1.1",
         "box-node-sdk": "^1.33.0",
-        "box-ui-elements": "^18.1.0",
+        "box-ui-elements": "^20.0.0",
         "circular-dependency-plugin": "^5.2.0",
         "classnames": "^2.2.5",
         "conventional-github-releaser": "^3.1.3",
-        "core-js": "^3.6.5",
+        "core-js": "^3.38.1",
         "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",
-        "eslint-config-airbnb": "^18.1.0",
-        "eslint-config-prettier": "^6.11.0",
+        "eslint": "^8.57.0",
+        "eslint-config-airbnb": "^19.0.4",
+        "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-babel": "^5.3.0",
         "eslint-plugin-cypress": "^2.10.3",
-        "eslint-plugin-flowtype": "^4.7.0",
-        "eslint-plugin-formatjs": "^1.5.4",
-        "eslint-plugin-import": "^2.20.2",
+        "eslint-plugin-flowtype": "^8.0.3",
+        "eslint-plugin-formatjs": "^4.13.3",
+        "eslint-plugin-import": "^2.26.0",
         "eslint-plugin-jest": "^23.8.2",
         "eslint-plugin-jsx-a11y": "^6.2.3",
-        "eslint-plugin-lodash": "^6.0.0",
-        "eslint-plugin-prettier": "^3.1.3",
-        "eslint-plugin-react": "^7.19.0",
-        "eslint-plugin-react-hooks": "^1.7.0",
+        "eslint-plugin-lodash": "^7.4.0",
+        "eslint-plugin-prettier": "^5.2.1",
+        "eslint-plugin-react": "^7.34.3",
+        "eslint-plugin-react-hooks": "^4.6.0",
         "formik": "^2.1.4",
         "husky": "^3.1.0",
         "jest": "^24.9.0",
@@ -92,13 +93,14 @@
         "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": "18.3.1",
+        "react-dom": "18.3.1",
+        "react-intl": "6.4.2",
+        "react-redux": "^9.1.2",
         "react-tether": "1.0.5",
         "react-textarea-autosize": "^7.1.2",
         "redux": "^4.0.5",
+        "regenerator-runtime": "^0.13.9",
         "sass": "^1.64.1",
         "sass-loader": "^8.0.2",
         "scroll-into-view-if-needed": "^2.2.24",
@@ -108,11 +110,11 @@
         "stylelint-config-standard": "^19.0.0",
         "stylelint-order": "^3.1.1",
         "tabbable": "^1.1.3",
-        "typescript": "^3.8.3",
-        "uglifyjs-webpack-plugin": "^2.2.0",
+        "terser-webpack-plugin": "^4.2.3",
+        "typescript": "4.9.5",
         "uuid": "^8.3.1",
         "wait-on": "^4.0.2",
-        "webpack": "^4.43.0",
+        "webpack": "^4.47.0",
         "webpack-cli": "^3.3.11",
         "webpack-dev-server": "^3.10.3",
         "worker-farm": "^1.7.0"
@@ -120,8 +122,8 @@
     "scripts": {
         "build": "yarn setup && yarn build:prod:dist",
         "build:i18n": "props2es",
-        "build:dev:dist": "LANGUAGE=en-US BABEL_ENV=dev NODE_ENV=dev NODE_OPTIONS=--openssl-legacy-provider webpack --config scripts/webpack.config.js --mode development --progress --colors",
-        "build:prod:dist": "LANGUAGE=en-US BABEL_ENV=production NODE_ENV=production NODE_OPTIONS=--openssl-legacy-provider webpack --config scripts/webpack.config.js --mode production",
+        "build:dev:dist": "LANGUAGE=en-US BABEL_ENV=dev NODE_ENV=dev webpack --config scripts/webpack.config.js --mode development --progress --colors",
+        "build:prod:dist": "LANGUAGE=en-US BABEL_ENV=production NODE_ENV=production webpack --config scripts/webpack.config.js --mode production",
         "clean": "rm -rf dist reports/* i18n/json i18n/*.js",
         "cy:open": "yarn cy:wait; yarn cypress open",
         "cy:run": "yarn cy:wait; yarn cypress run --spec test/integration/**/*.test.js",
@@ -138,7 +140,7 @@
         "release:pre": "scripts/release.sh -x",
         "setup": "yarn install && yarn clean && yarn build:i18n",
         "start": "yarn setup && yarn build:dev:dist --watch",
-        "start:dev": "yarn setup && LANGUAGE=en-US BABEL_ENV=dev NODE_ENV=dev NODE_OPTIONS=--openssl-legacy-provider yarn webpack-dev-server --config scripts/webpack.config.js --mode development",
+        "start:dev": "yarn setup && LANGUAGE=en-US BABEL_ENV=dev NODE_ENV=dev yarn webpack-dev-server --config scripts/webpack.config.js --mode development",
         "start:linked": "IS_LINKED=1 yarn start",
         "test": "BABEL_ENV=test NODE_ENV=test yarn jest",
         "test:e2e": "node scripts/cypress.js",
@@ -153,6 +155,9 @@
         }
     },
     "resolutions": {
-        "uglify-es": "3.3.4"
+        "**/react-intl/**/@types/react": "^18.3.12",
+        "**/@types/react": "^18.3.12",
+        "**/@types/react-dom": "^18.2.0",
+        "acorn": "8.14.0"
     }
 }

package/src/@types/global.ts

@@ -1,8 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-namespace */
-declare namespace Intl {
-    const RelativeTimeFormat: {};
-}
-
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 declare namespace NodeJS {
     interface Global {
         window: any;

package/src/common/BaseAnnotator.scss

@@ -1,17 +1,4 @@
-@font-face {
-    font-weight: normal;
-    font-family: 'Lato';
-    font-style: normal;
-    src: local('Lato Regular'), local('Lato-Regular'), url('https://cdn01.boxcdn.net/fonts/1.0.2/lato/Lato-Regular.woff2') format('woff2'), url('https://cdn01.boxcdn.net/fonts/1.0.2/lato/Lato-Regular.woff') format('woff');
-}
-
-@font-face {
-    font-weight: bold;
-    font-family: 'Lato';
-    font-style: normal;
-    src: local('Lato Bold'), local('Lato-Bold'), url('https://cdn01.boxcdn.net/fonts/1.0.2/lato/Lato-Bold.woff2') format('woff2'), url('https://cdn01.boxcdn.net/fonts/1.0.2/lato/Lato-Bold.woff') format('woff');
-}
-
+@import '~box-ui-elements/es/elements/common/fonts';
 @import '~box-ui-elements/es/styles/variables';
 
 .ba {

package/src/common/BaseManager.ts

@@ -1,4 +1,4 @@
-import * as ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom/client';
 import { IntlShape } from 'react-intl';
 import { Store } from 'redux';
 import { applyResinTags } from '../utils/resin';
@@ -28,6 +28,8 @@ export default class BaseManager implements Manager {
 
     reactEl: HTMLElement;
 
+    root: ReactDOM.Root | null = null;
+
     constructor({ location = 1, referenceEl, resinTags = {} }: Options) {
         this.location = location;
         this.reactEl = this.insert(referenceEl, {
@@ -35,6 +37,8 @@ export default class BaseManager implements Manager {
             feature: 'annotations',
         });
 
+        this.root = ReactDOM.createRoot(this.reactEl);
+
         this.decorate();
     }
 
@@ -43,11 +47,11 @@ export default class BaseManager implements Manager {
     }
 
     destroy(): void {
-        ReactDOM.unmountComponentAtNode(this.reactEl);
-
-        const parentEl = this.reactEl.parentNode;
-        if (parentEl) {
-            parentEl.removeChild(this.reactEl);
+        if (this.root) {
+            this.root.unmount();
+        }
+        if (this.reactEl.parentNode) {
+            this.reactEl.parentNode.removeChild(this.reactEl);
         }
     }
 

package/src/common/DeselectManager.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { Store } from 'redux';
 import BaseManager from './BaseManager';
@@ -20,11 +20,14 @@ export default class DeselectManager extends BaseManager {
     }
 
     render({ store }: Props): void {
-        ReactDOM.render(
+        if (!this.root) {
+            this.root = ReactDOM.createRoot(this.reactEl);
+        }
+
+        this.root.render(
             <Provider store={store}>
                 <DeselectListener />
             </Provider>,
-            this.reactEl,
         );
     }
 }

package/src/common/useAutoScroll/useAutoScroll.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import noop from 'lodash/noop';
 import { getScrollParent } from './util';
 

package/src/components/Popups/Popper.ts

@@ -31,3 +31,21 @@ export default function create(
 ): Instance {
     return popper.createPopper(reference, popup, mergeWith({}, defaults, options, merger) as Options);
 }
+
+export function clientBoundingRect(height: number, width: number, x: number, y: number): DOMRect {
+    const rect = {
+        bottom: y + height,
+        height,
+        left: x,
+        right: x + width,
+        top: y,
+        width,
+        x,
+        y,
+    };
+
+    return {
+        ...rect,
+        toJSON: () => ({ ...rect }),
+    };
+}

package/src/components/Popups/PopupBase.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import createPopper, { Instance, Options, PopupReference } from './Popper';
 import './PopupBase.scss';

package/src/components/Popups/PopupCursor.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react';
+import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import messages from './messages';
 import PopupBase from './PopupBase';
-import { Options, VirtualElement } from './Popper';
+import { clientBoundingRect, Options, VirtualElement } from './Popper';
 import './PopupCursor.scss';
 
 const options: Partial<Options> = {
@@ -18,14 +18,7 @@ const options: Partial<Options> = {
 };
 
 const generateGetBoundingClientRect = (x = 0, y = 0) => {
-    return () => ({
-        width: 0,
-        height: 0,
-        top: y,
-        right: x,
-        bottom: y,
-        left: x,
-    });
+    return () => clientBoundingRect(0, 0, x, y);
 };
 
 export default function PopupCursor(): JSX.Element {

package/src/components/Popups/PopupHighlight.tsx

@@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl';
 import messages from './messages';
 import PopupBase from './PopupBase';
 import useOutsideEvent from '../../common/useOutsideEvent';
-import { Options } from './Popper';
+import { clientBoundingRect, Options } from './Popper';
 import { Shape } from '../../@types/model';
 import './PopupHighlight.scss';
 
@@ -50,14 +50,7 @@ export default function PopupHighlight({ onCancel = noop, onSubmit = noop, shape
     const { height, width, x, y } = shape;
 
     const reference = {
-        getBoundingClientRect: () => ({
-            bottom: y + height,
-            height,
-            left: x,
-            right: x + width,
-            top: y,
-            width,
-        }),
+        getBoundingClientRect: () => clientBoundingRect(height, width, x, y),
     };
 
     const handleKeydownOutside = (event: Event): void => {

package/src/components/Popups/PopupHighlightError.tsx

@@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';
 import messages from './messages';
 import PopupBase from './PopupBase';
 import useOutsideEvent from '../../common/useOutsideEvent';
-import { Options } from './Popper';
+import { clientBoundingRect, Options } from './Popper';
 import { Shape } from '../../@types/model';
 import './PopupHighlightError.scss';
 
@@ -48,14 +48,7 @@ export default function PopupHighlightError({ onCancel = noop, shape }: Props):
     const { height, width, x, y } = shape;
 
     const reference = {
-        getBoundingClientRect: () => ({
-            bottom: y + height,
-            height,
-            left: x,
-            right: x + width,
-            top: y,
-            width,
-        }),
+        getBoundingClientRect: () => clientBoundingRect(height, width, x, y),
     };
 
     useOutsideEvent('mousedown', popupRef.current?.popupRef, onCancel);

package/src/components/Popups/PopupReply.tsx

@@ -1,12 +1,11 @@
-import * as React from 'react';
-import * as Popper from '@popperjs/core';
-import * as ReactRedux from 'react-redux';
+import React from 'react';
+import Popper from '@popperjs/core';
+import { useSelector } from 'react-redux';
 import { useIntl } from 'react-intl';
 import FocusTrap from 'box-ui-elements/es/components/focus-trap/FocusTrap';
 import messages from './messages';
 import PopupBase from './PopupBase';
 import ReplyForm from '../ReplyForm';
-import usePrevious from '../../common/usePrevious';
 import { getScale, getRotation } from '../../store/options';
 import { PopupReference } from './Popper';
 import './PopupReply.scss';
@@ -89,18 +88,16 @@ export default function PopupReply({
     const intl = useIntl();
     const popupRef = React.useRef<PopupBase>(null);
     const popupOptions = React.useRef<Partial<Popper.Options>>(getOptions()); // Keep the options reference the same between renders
-    const rotation = ReactRedux.useSelector(getRotation);
-    const prevRotation = usePrevious(rotation);
-    const scale = ReactRedux.useSelector(getScale);
-    const prevScale = usePrevious(scale);
+    const rotation = useSelector(getRotation);
+    const scale = useSelector(getScale);
 
     React.useEffect(() => {
         const { current: popup } = popupRef;
 
-        if (popup?.popper && (rotation !== prevRotation || scale !== prevScale)) {
+        if (popup?.popper) {
             popup.popper.update();
         }
-    }, [popupRef, prevRotation, prevScale, rotation, scale]);
+    }, [popupRef, rotation, scale]);
 
     return (
         <FocusTrap>

package/src/components/ReplyForm/ReplyButton.tsx

@@ -7,7 +7,7 @@ export type Props = {
     isDisabled?: boolean;
     isPrimary?: boolean;
     onClick?: (event: React.MouseEvent) => void;
-    type: 'button' | 'submit' | 'reset' | undefined;
+    type?: 'button' | 'submit' | 'reset' | undefined;
 } & HTMLAttributes<HTMLButtonElement>;
 
 export default function ReplyButton({ children, isDisabled, isPrimary, onClick = noop, ...rest }: Props): JSX.Element {

package/src/components/ReplyForm/ReplyForm.tsx

@@ -70,7 +70,14 @@ const ReplyForm = (props: Props): JSX.Element => {
     }, [formRef]); // eslint-disable-line react-hooks/exhaustive-deps
 
     return (
-        <Form ref={formRef} className="ba-ReplyForm" data-testid="ba-ReplyForm">
+        <Form
+            ref={formRef}
+            className="ba-ReplyForm"
+            data-testid="ba-ReplyForm"
+            onPointerEnterCapture={undefined}
+            onPointerLeaveCapture={undefined}
+            placeholder={undefined}
+        >
             <div className="ba-Popup-main">
                 <ReplyField
                     className="ba-Popup-field"

package/src/drawing/DrawingAnnotations.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import DecoratedDrawingPath from './DecoratedDrawingPath';
 import DrawingList from './DrawingList';

package/src/drawing/DrawingCreator.tsx

@@ -35,7 +35,7 @@ export default function DrawingCreator({
     const drawingPathRef = React.useRef<DrawingPathRef>(null);
     const drawingSVGRef = React.useRef<DrawingSVGRef>(null);
     const renderHandleRef = React.useRef<number | null>(null);
-    const stroke = { color, size };
+    const stroke = React.useMemo(() => ({ color, size }), [color, size]);
 
     const getPoints = React.useCallback((): Array<Position> => {
         const { current: creatorEl } = creatorElRef;

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;