chore(react-components): small fixes and bump to 0.46.0 (#4537)

* chore(react-components): bump to 0.46.0

* feat: expose missing option in RevealContext

* chore: don't open context menu on right-clicking canvas

* chore: don't stop propagation of key events

* chore: useState => useMemo

* chore: initialize renderTarget

* chore: deactivate event listeners rather than letting users control it

* chore: expand render target mock

---------

Co-authored-by: cognite-bulldozer[bot] <51074376+cognite-bulldozer[bot]@users.noreply.github.com>

react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cognite/reveal-react-components",
-  "version": "0.45.1",
+  "version": "0.46.0",
   "exports": {
     ".": {
       "import": "./dist/index.js",

react-components/src/architecture/base/renderTarget/ToolController.ts

@@ -171,17 +171,18 @@ export class ToolControllers extends PointerEvents {
     domElement.addEventListener('wheel', this._onWheel);
     domElement.addEventListener('focus', this._onFocus);
     domElement.addEventListener('blur', this._onBlur);
+    domElement.addEventListener('contextmenu', this._onContextMenu);
     this._pointerEventsTarget.addEventListeners();
   }
 
   public removeEventListeners(): void {
     const domElement = this._domElement;
     domElement.removeEventListener('keydown', this._onKeyDown);
-    domElement.addEventListener('contextmenu', this._onContextMenu);
     domElement.removeEventListener('keyup', this._onKeyUp);
     domElement.removeEventListener('wheel', this._onWheel);
     domElement.removeEventListener('focus', this._onFocus);
     domElement.removeEventListener('blur', this._onBlur);
+    domElement.removeEventListener('contextmenu', this._onContextMenu);
     this._pointerEventsTarget.removeEventListeners();
     for (const commands of this._commands) {
       commands.removeEventListeners();
@@ -194,8 +195,6 @@ export class ToolControllers extends PointerEvents {
 
   private readonly _onKeyDown = (event: KeyboardEvent): void => {
     this.onKey(event, true);
-    event.stopPropagation();
-    event.preventDefault();
   };
 
   private readonly _onContextMenu = (event: MouseEvent): void => {
@@ -205,8 +204,6 @@ export class ToolControllers extends PointerEvents {
 
   private readonly _onKeyUp = (event: KeyboardEvent): void => {
     this.onKey(event, false);
-    event.stopPropagation();
-    event.preventDefault();
   };
 
   private readonly _onWheel = async (event: WheelEvent): Promise<void> => {

react-components/src/components/Architecture/CommandButton.tsx

@@ -2,7 +2,7 @@
  * Copyright 2023 Cognite AS
  */
 
-import { type ReactElement, useState, useEffect } from 'react';
+import { type ReactElement, useState, useEffect, useMemo } from 'react';
 import { useRenderTarget } from '../RevealCanvas/ViewerContext';
 import { Button, Tooltip as CogsTooltip, type IconType } from '@cognite/cogs.js';
 import { useTranslation } from '../i18n/I18n';
@@ -17,9 +17,8 @@ export const CreateButton = (command: BaseCommand): ReactElement => {
 export const CommandButton = ({ command }: { command: BaseCommand }): ReactElement => {
   const renderTarget = useRenderTarget();
   const { t } = useTranslation();
-  const [newCommand] = useState<BaseCommand>(getDefaultCommand(command, renderTarget));
+  const newCommand = useMemo<BaseCommand>(() => getDefaultCommand(command, renderTarget), []);
 
-  // These are redundant, but react fore me to add these to update
   const [isChecked, setChecked] = useState<boolean>(false);
   const [isEnabled, setEnabled] = useState<boolean>(true);
   const [isVisible, setVisible] = useState<boolean>(true);

react-components/src/components/RevealContext/RevealContext.tsx

@@ -101,13 +101,14 @@ const useRevealFromKeepAlive = ({
   function getOrInitializeRenderTarget(): RevealRenderTarget {
     let renderTarget = revealKeepAliveData?.renderTargetRef.current;
     if (renderTarget === undefined) {
-      const viewer = new Cognite3DViewer({ ...viewerOptions, sdk });
+      const viewer = new Cognite3DViewer({ ...viewerOptions, sdk, hasEventListeners: false });
       renderTarget = new RevealRenderTarget(viewer);
       if (revealKeepAliveData !== undefined) {
         revealKeepAliveData.renderTargetRef.current = renderTarget;
       }
     }
     renderTarget.viewer.setBackgroundColor({ color, alpha: 1 });
+    renderTarget.initialize();
     setRenderTarget(renderTarget);
     return renderTarget;
   }

react-components/tests/unit-tests/components/RevealContainer.test.tsx

@@ -35,7 +35,8 @@ describe(RevealCanvas.name, () => {
             .setup((viewer) => viewer.domElement)
             .returns(domElement)
             .object();
-        }
+        },
+        initialize(): void {}
       } as unknown as RevealRenderTarget);
       const isRevealContainerMountedRef = useRef<boolean>(true);
       const sceneLoadedRef = useRef<SceneIdentifiers | undefined>();