fix(react-components): settings Menu UI going out of the viewer (#4841)

* fixed Settings Menu UI going out of the viewer * added max-height for setting menu and fixed layer menu alignment * bumped react-components to v0.63.1
cognitedata · Nov 4, 2024 · 5b99d8d · 5b99d8d
1 parent 5f2de74
commit 5b99d8d
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 16 deletions.
diff --git a/react-components/package.json b/react-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cognite/reveal-react-components",
-  "version": "0.64.0",
+  "version": "0.64.1",
   "exports": {
     ".": {
       "import": "./dist/index.js",

diff --git a/react-components/src/components/Architecture/FilterButton.tsx b/react-components/src/components/Architecture/FilterButton.tsx
@@ -89,6 +89,7 @@ export const FilterButton = ({
       label={label}
       selectedLabel={selectedLabel}
       isOpen={isOpen}
+      setOpen={setOpen}
       PanelContent={PanelContent}
     />
   ) : (
@@ -133,8 +134,7 @@ const FilterMenu = ({
     <Menu
       floatingProps={{ middleware: [offset(TOOLBAR_HORIZONTAL_PANEL_OFFSET)] }}
       onOpenChange={setOpen}
-      appendTo={'parent'}
-      placement={'right-start'}
+      placement={'right-end'}
       disableCloseOnClickInside
       renderTrigger={(props: any) => (
         <CogsTooltip
@@ -168,17 +168,19 @@ const FilterDropdown = ({
   label,
   selectedLabel,
   isOpen,
+  setOpen,
   PanelContent
 }: {
   label: string;
   selectedLabel: string;
   isOpen: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
   PanelContent: ReactElement;
 }): ReactElement => {
   return (
     <StyledDropdownRow>
       <label>{label}</label>
-      <StyledSelectPanel appendTo="parent">
+      <StyledSelectPanel appendTo={'parent'} placement={'right-end'}>
         <SelectPanel.Trigger>
           <Button
             color="#000044"
@@ -188,6 +190,9 @@ const FilterDropdown = ({
               minWidth: OPTION_MIN_WIDTH,
               paddingRight: '8px',
               paddingLeft: '8px'
+            }}
+            onClick={() => {
+              setOpen((prev) => !prev);
             }}>
             <StyledDropdownSelectionLabel>{selectedLabel}</StyledDropdownSelectionLabel>
             {isOpen ? (
@@ -197,9 +202,7 @@ const FilterDropdown = ({
             )}
           </Button>
         </SelectPanel.Trigger>
-        <SelectPanel.Body style={{ overflow: 'hidden', zindex: 2000 }}>
-          {PanelContent}
-        </SelectPanel.Body>
+        <SelectPanel.Body style={{ overflow: 'hidden' }}>{PanelContent}</SelectPanel.Body>
       </StyledSelectPanel>
     </StyledDropdownRow>
   );

diff --git a/react-components/src/components/Architecture/SettingsButton.tsx b/react-components/src/components/Architecture/SettingsButton.tsx
@@ -71,14 +71,14 @@ export const SettingsButton = ({
   const flexDirection = getFlexDirection(placement);
   const children = command.children;
   return (
-    <Menu
+    <StyledMenu
       hideOnSelect={false}
       onOpenChange={(open: boolean) => {
         setOpen(open);
       }}
       floatingProps={{ middleware: [offset(TOOLBAR_HORIZONTAL_PANEL_OFFSET)] }}
-      appendTo={'parent'}
-      placement="right-start"
+      container={'parent'}
+      placement="right-end"
       style={{
         flexDirection,
         padding: DEFAULT_PADDING
@@ -104,7 +104,7 @@ export const SettingsButton = ({
         </CogsTooltip>
       )}>
       {children.map((child) => createMenuItem(child, t))}
-    </Menu>
+    </StyledMenu>
   );
 };
 
@@ -346,3 +346,9 @@ const StyledSlider = styled(Slider)`
   display: flex;
   justify-content: space-around;
 `;
+
+const StyledMenu = styled(Menu)`
+  z-index: 998 !important;
+  max-height: 300px !important;
+  overflow-y: auto !important;
+`;
diff --git a/react-components/src/components/RevealToolbar/LayersButton/LayersButton.tsx b/react-components/src/components/RevealToolbar/LayersButton/LayersButton.tsx
@@ -51,7 +51,11 @@ export const LayersButton = ({
 
   return (
     <>
-      <SelectPanel placement="right" hideOnOutsideClick offset={TOOLBAR_HORIZONTAL_PANEL_OFFSET}>
+      <SelectPanel
+        placement="right"
+        appendTo={'parent'}
+        hideOnOutsideClick
+        offset={TOOLBAR_HORIZONTAL_PANEL_OFFSET}>
         <SelectPanel.Trigger>
           <Tooltip
             content={
@@ -103,7 +107,11 @@ const ModelLayerSelection = ({
   }, [update]);
 
   return (
-    <SelectPanel placement="right" hideOnOutsideClick={true} openOnHover={!isDisabled}>
+    <SelectPanel
+      placement="right"
+      appendTo={'parent'}
+      hideOnOutsideClick={true}
+      openOnHover={!isDisabled}>
       <SelectPanel.Trigger>
         <WholeLayerVisibilitySelectItem
           label={label}

diff --git a/react-components/src/components/RevealToolbar/SettingsButton.tsx b/react-components/src/components/RevealToolbar/SettingsButton.tsx
@@ -11,6 +11,7 @@ import { useTranslation } from '../i18n/I18n';
 import { TOOLBAR_HORIZONTAL_PANEL_OFFSET } from '../constants';
 
 import { offset } from '@floating-ui/dom';
+import styled from 'styled-components';
 
 type CustomSettingsProps = {
   customSettingsContent?: ReactElement;
@@ -27,8 +28,9 @@ export const SettingsButton = ({
   const [settingsActive, setSettingsActive] = useState<boolean>(false);
 
   return (
-    <Menu
+    <StyledMenu
       placement="right"
+      container={'parent'}
       floatingProps={{ middleware: [offset(TOOLBAR_HORIZONTAL_PANEL_OFFSET)] }}
       disableCloseOnClickInside
       renderTrigger={(props: any) => (
@@ -54,6 +56,12 @@ export const SettingsButton = ({
         highQualitySettings={highQualitySettings}
       />
       {customSettingsContent ?? <></>}
-    </Menu>
+    </StyledMenu>
   );
 };
+
+const StyledMenu = styled(Menu)`
+  z-index: 998 !important;
+  max-height: 300px !important;
+  overflow-y: auto !important;
+`;
diff --git a/react-components/src/components/constants.ts b/react-components/src/components/constants.ts
@@ -1,4 +1,4 @@
 /*!
  * Copyright 2024 Cognite AS
  */
-export const TOOLBAR_HORIZONTAL_PANEL_OFFSET = 6;
+export const TOOLBAR_HORIZONTAL_PANEL_OFFSET = 12;