fix(VerticalNavigation): added appropriate z-index value to the popup (…

…#3347)
lumada-design · May 18, 2023 · ace8f29 · ace8f29
1 parent ba9579b
commit ace8f29
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/packages/core/src/components/VerticalNavigation/NavigationPopup/NavigationPopup.styles.tsx b/packages/core/src/components/VerticalNavigation/NavigationPopup/NavigationPopup.styles.tsx
@@ -1,7 +1,14 @@
 import styled from "@emotion/styled";
 
 import { theme } from "@hitachivantara/uikit-styles";
+import { Popper } from "@mui/base";
 
-export const StyledPopupContainer = styled("div")({
+const StyledPopupContainer = styled("div")({
   marginLeft: theme.spacing("xs"),
 });
+
+const StyledPopper = styled(Popper)({
+  zIndex: theme.zIndices.popover,
+});
+
+export { StyledPopupContainer, StyledPopper };
diff --git a/packages/core/src/components/VerticalNavigation/NavigationPopup/NavigationPopup.tsx b/packages/core/src/components/VerticalNavigation/NavigationPopup/NavigationPopup.tsx
@@ -1,4 +1,4 @@
-import { Popper, ClickAwayListener } from "@mui/material";
+import { ClickAwayListener } from "@mui/material";
 import { clsx } from "clsx";
 
 import {
@@ -9,7 +9,7 @@ import {
 } from "@core/components";
 import { setId } from "@core/utils";
 
-import { StyledPopupContainer } from "./NavigationPopup.styles";
+import { StyledPopper, StyledPopupContainer } from "./NavigationPopup.styles";
 
 export interface HvVerticalNavigationPopupProps {
   id?: string;
@@ -45,7 +45,7 @@ export const HvVerticalNavigationPopup = ({
   };
 
   return (
-    <Popper open anchorEl={anchorEl} placement="right-start">
+    <StyledPopper open anchorEl={anchorEl} placement="right-start">
       <ClickAwayListener onClickAway={handleClickAway}>
         <StyledPopupContainer>
           <HvVerticalNavigation open>
@@ -62,6 +62,6 @@ export const HvVerticalNavigationPopup = ({
           </HvVerticalNavigation>
         </StyledPopupContainer>
       </ClickAwayListener>
-    </Popper>
+    </StyledPopper>
   );
 };