fix(react-components): Toolbar styling and missing buttons toggle

react-components/src/components/RevealToolbar/HelpButton.tsx

@@ -2,7 +2,7 @@
  * Copyright 2023 Cognite AS
  */
 
-import { type ReactElement } from 'react';
+import { useState, type ReactElement } from 'react';
 
 import { Button, Dropdown, Tooltip as CogsTooltip } from '@cognite/cogs.js';
 import styled from 'styled-components';
@@ -11,10 +11,15 @@ import { TouchNavigation } from './Help/TouchNavigation';
 import { KeyboardNavigation } from './Help/KeyboardNavigation';
 
 export const HelpButton = (): ReactElement => {
+  const [helpActive, setHelpActive] = useState<boolean>(false);
+
   return (
     <CogsTooltip content={'Help'} placement="right" appendTo={document.body}>
       <Dropdown
         appendTo={document.body}
+        onClickOutside={() => {
+          setHelpActive(false);
+        }}
         content={
           <StyledMenu>
             <MouseNavigation />
@@ -23,7 +28,15 @@ export const HelpButton = (): ReactElement => {
           </StyledMenu>
         }
         placement="right">
-        <Button type="ghost" icon="Help" aria-label="help-button" />
+        <Button
+          type="ghost"
+          icon="Help"
+          aria-label="help-button"
+          toggled={helpActive}
+          onClick={() => {
+            setHelpActive((prevState) => !prevState);
+          }}
+        />
       </Dropdown>
     </CogsTooltip>
   );

react-components/src/components/RevealToolbar/LayersButton.tsx

@@ -2,7 +2,7 @@
  * Copyright 2023 Cognite AS
  */
 
-import { type ReactElement, useState, useEffect, useMemo, useRef } from 'react';
+import { type ReactElement, useState, useEffect, useMemo, useRef, type RefObject } from 'react';
 import { Button, Dropdown, Tooltip as CogsTooltip } from '@cognite/cogs.js';
 import { type Reveal3DResourcesLayerStates } from './LayersContainer/types';
 import LayersContainer from './LayersContainer/LayersContainer';
@@ -40,6 +40,25 @@ export const LayersButton = (): ReactElement => {
     setVisible((prevState) => !prevState);
   };
 
+  const useOutsideClick = (ref: RefObject<HTMLElement | null>): void => {
+    useEffect(() => {
+      const handleClick = (event: MouseEvent): void => {
+        if (ref.current !== null && !ref.current.contains(event.target as Node)) {
+          setVisible(false);
+        }
+      };
+
+      document.addEventListener('click', handleClick);
+
+      return () => {
+        document.removeEventListener('click', handleClick);
+      };
+    }, [ref]);
+  };
+
+  const ref = useRef<HTMLButtonElement | null>(null);
+  useOutsideClick(ref);
+
   useEffect(() => {
     const currentModels = viewer.models;
     // Compare the previous and current models to avoid infinite loop
@@ -148,12 +167,6 @@ export const LayersButton = (): ReactElement => {
     setReveal3DResourcesLayerData(updated3DResourcesLayerData);
   }, [updated3DResourcesLayerData]);
 
-  useEffect(() => {
-    viewer.on('click', () => {
-      setVisible(false);
-    });
-  }, [viewer]);
-
   return (
     <CogsTooltip content={'Filter 3D resource layers'} placement="right" appendTo={document.body}>
       <Dropdown
@@ -167,8 +180,15 @@ export const LayersButton = (): ReactElement => {
           />
         }
         visible={visible}
-        placement="auto">
-        <Button type="ghost" icon="Layers" aria-label="3D Resource layers" onClick={showLayers} />
+        placement="right-start">
+        <Button
+          ref={ref}
+          type="ghost"
+          icon="Layers"
+          aria-label="3D Resource layers"
+          onClick={showLayers}
+          toggled={visible}
+        />
       </Dropdown>
     </CogsTooltip>
   );

react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx

@@ -64,7 +64,10 @@ export const CadModelLayersContainer = ({
 
   const cadModelContent = (): ReactElement => {
     return (
-      <StyledSubMenu>
+      <StyledSubMenu
+        onClick={(event: MouseEvent) => {
+          event.stopPropagation();
+        }}>
         {cadLayerData.map((data) => (
           <Menu.Item
             key={uniqueId()}
@@ -85,7 +88,10 @@ export const CadModelLayersContainer = ({
   };
 
   return (
-    <>
+    <div
+      onClick={() => {
+        setVisible((prevState) => !prevState);
+      }}>
       {cadLayerData.length > 0 && (
         <Menu.Submenu
           appendTo={revealContainerElement ?? document.body}
@@ -95,13 +101,7 @@ export const CadModelLayersContainer = ({
           }}
           content={cadModelContent()}
           title="CAD models">
-          <Flex
-            direction="row"
-            justifyContent="space-between"
-            gap={4}
-            onClick={() => {
-              setVisible((prevState) => !prevState);
-            }}>
+          <Flex direction="row" justifyContent="space-between" gap={4}>
             <Checkbox
               checked={someModelVisible}
               indeterminate={indeterminate}
@@ -116,6 +116,6 @@ export const CadModelLayersContainer = ({
           </Flex>
         </Menu.Submenu>
       )}
-    </>
+    </div>
   );
 };

react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx

@@ -62,7 +62,10 @@ export const Image360CollectionLayerContainer = ({
 
   const image360Content = (): ReactElement => {
     return (
-      <StyledSubMenu>
+      <StyledSubMenu
+        onClick={(event: MouseEvent) => {
+          event.stopPropagation();
+        }}>
         {image360LayerData.map((data) => (
           <Menu.Item
             key={uniqueId()}
@@ -82,7 +85,10 @@ export const Image360CollectionLayerContainer = ({
   };
 
   return (
-    <>
+    <div
+      onClick={() => {
+        setVisible((prevState) => !prevState);
+      }}>
       {image360LayerData.length > 0 && (
         <Menu.Submenu
           appendTo={revealContainerElement ?? document.body}
@@ -92,12 +98,7 @@ export const Image360CollectionLayerContainer = ({
           }}
           content={image360Content()}
           title="360 images">
-          <Flex
-            direction="row"
-            justifyContent="space-between"
-            onClick={() => {
-              setVisible((prevState) => !prevState);
-            }}>
+          <Flex direction="row" justifyContent="space-between">
             <Checkbox
               checked={someImagesVisible}
               indeterminate={indeterminate}
@@ -112,6 +113,6 @@ export const Image360CollectionLayerContainer = ({
           </Flex>
         </Menu.Submenu>
       )}
-    </>
+    </div>
   );
 };

react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx

@@ -17,7 +17,10 @@ const LayersContainer = ({ props }: { props: Reveal3DResourcesLayersProps }): Re
     <>
       {(viewer.models.length > 0 || viewer.get360ImageCollections().length > 0) && (
         <Container>
-          <StyledMenu>
+          <StyledMenu
+            onClick={(event: MouseEvent) => {
+              event.stopPropagation();
+            }}>
             <CadModelLayersContainer layerProps={props} />
             <PointCloudLayersContainer layerProps={props} />
             <Image360CollectionLayerContainer layerProps={props} />
@@ -35,6 +38,7 @@ const Container = styled.div`
 const StyledMenu = styled(Menu)`
   padding: 6px;
   width: 214px;
+  border: 1px solid rgba(83, 88, 127, 0.24);
 `;
 
 export default LayersContainer;

react-components/src/components/RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx

@@ -57,7 +57,10 @@ export const PointCloudLayersContainer = ({
 
   const pointCloudModelContent = (): ReactElement => {
     return (
-      <StyledSubMenu>
+      <StyledSubMenu
+        onClick={(event: MouseEvent) => {
+          event.stopPropagation();
+        }}>
         {pointCloudLayerData.map((data) => (
           <Menu.Item
             key={uniqueId()}
@@ -77,7 +80,10 @@ export const PointCloudLayersContainer = ({
   };
 
   return (
-    <>
+    <div
+      onClick={() => {
+        setVisible((prevState) => !prevState);
+      }}>
       {pointCloudLayerData.length > 0 && (
         <Menu.Submenu
           appendTo={revealContainerElement ?? document.body}
@@ -87,12 +93,7 @@ export const PointCloudLayersContainer = ({
           }}
           content={pointCloudModelContent()}
           title="Point clouds">
-          <Flex
-            direction="row"
-            justifyContent="space-between"
-            onClick={() => {
-              setVisible((prevState) => !prevState);
-            }}>
+          <Flex direction="row" justifyContent="space-between">
             <Checkbox
               checked={someModelVisible}
               indeterminate={indeterminate}
@@ -107,6 +108,6 @@ export const PointCloudLayersContainer = ({
           </Flex>
         </Menu.Submenu>
       )}
-    </>
+    </div>
   );
 };

react-components/src/components/RevealToolbar/LayersContainer/elements.ts

@@ -8,6 +8,7 @@ import styled from 'styled-components';
 export const StyledSubMenu = styled(Menu)`
   padding: 8px;
   overflow-y: auto;
+  border: 1px solid rgba(83, 88, 127, 0.24);
   max-height: 300px;
   ::-webkit-scrollbar {
     width: 8px;

react-components/src/components/RevealToolbar/RevealToolbar.tsx

@@ -2,7 +2,7 @@
  * Copyright 2023 Cognite AS
  */
 
-import { type ReactElement, type JSX } from 'react';
+import { type ReactElement, type JSX, forwardRef, type Ref } from 'react';
 import { I18nWrapper } from '@cognite/cdf-i18n-utils';
 import { ToolBar, type ToolBarProps } from '@cognite/cogs.js';
 import { FitModelsButton } from './FitModelsButton';
@@ -14,14 +14,18 @@ import { MeasurementButton } from './MeasurementButton';
 import { HelpButton } from './HelpButton';
 import { type QualitySettings } from './SettingsContainer/types';
 import { translations } from '../../common/i18n';
+import styled from 'styled-components';
 
-const defaultStyle: ToolBarProps = {
-  style: {
-    position: 'absolute',
-    left: '20px',
-    top: '70px'
-  }
-};
+const StyledToolBar = styled(ToolBar)`
+  position: absolute;
+  left: 20px;
+  top: 70px;
+  width: 48px;
+  padding: 6px;
+  gap: 8px;
+  border-radius: 8px;
+  border: 1px solid rgba(83, 88, 127, 0.24);
+`;
 
 type RevealToolbarProps = ToolBarProps & CustomContent;
 
@@ -54,30 +58,34 @@ const DefaultContentWrapper = (props: CustomContent): ReactElement => {
   );
 };
 
-const RevealToolbarContainer = ({
-  customSettingsContent,
-  lowFidelitySettings,
-  highFidelitySettings,
-  toolBarContent,
-  ...restProps
-}: RevealToolbarProps & { toolBarContent?: JSX.Element }): ReactElement => {
-  if (restProps.className === undefined && restProps.style === undefined) {
-    restProps = { ...restProps, ...defaultStyle };
+const RevealToolbarContainer = forwardRef(
+  (
+    {
+      customSettingsContent,
+      lowFidelitySettings,
+      highFidelitySettings,
+      toolBarContent,
+      ...restProps
+    }: RevealToolbarProps & { toolBarContent?: JSX.Element },
+    ref: Ref<HTMLDivElement>
+  ): ReactElement => {
+    return (
+      <I18nWrapper translations={translations} addNamespace="reveal-react-components">
+        <StyledToolBar {...restProps} ref={ref}>
+          {toolBarContent ?? (
+            <DefaultContentWrapper
+              customSettingsContent={customSettingsContent}
+              highFidelitySettings={highFidelitySettings}
+              lowFidelitySettings={lowFidelitySettings}
+            />
+          )}
+        </StyledToolBar>
+      </I18nWrapper>
+    );
   }
-  return (
-    <I18nWrapper translations={translations} addNamespace="reveal-react-components">
-      <ToolBar {...restProps}>
-        {toolBarContent ?? (
-          <DefaultContentWrapper
-            customSettingsContent={customSettingsContent}
-            highFidelitySettings={highFidelitySettings}
-            lowFidelitySettings={lowFidelitySettings}
-          />
-        )}
-      </ToolBar>
-    </I18nWrapper>
-  );
-};
+);
+
+RevealToolbarContainer.displayName = 'RevealToolbarContainer';
 
 export const RevealToolbar = withSuppressRevealEvents(
   RevealToolbarContainer