Merge branch 'pla-911-fix-popover-overlay-overlapping' of https://git…

…hub.com/abusix/hailstorm into next
abusix · Dec 15, 2023 · a485dee · a485dee
2 parents 7e93a28 + ac8a89a
commit a485dee
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 13 deletions.
diff --git a/src/components/navigation/navigation-popover-overlay.tsx b/src/components/navigation/navigation-popover-overlay.tsx
@@ -1,10 +1,6 @@
 import { Popover } from "@headlessui/react";
 import * as React from "react";
-import { createPortal } from "react-dom";
 
-export const NavigationPopoverOverlay = () => {
-    return createPortal(
-        <Popover.Overlay className="fixed inset-0 z-30 translate-x-[180px] bg-modal-background" />,
-        document.body
-    );
-};
+export const NavigationPopoverOverlay = () => (
+    <Popover.Overlay className="fixed inset-0 z-30 translate-x-[180px] bg-modal-background" />
+);
diff --git a/src/components/navigation/navigation-popover.tsx b/src/components/navigation/navigation-popover.tsx
@@ -8,10 +8,9 @@ import { NavigationPopoverPanel } from "./navigation-popover-panel";
 
 export interface NavigationPopoverProps {
     children: React.ReactNode;
-    showOverlay?: boolean;
 }
 
-const NavigationPopover = ({ children, showOverlay }: NavigationPopoverProps) => {
+const NavigationPopover = ({ children }: NavigationPopoverProps) => {
     const [referenceElement, setReferenceElement] = useState<HTMLButtonElement>();
     const [popperElement, setPopperElement] = useState<HTMLDivElement>();
     const { styles, attributes } = usePopper(referenceElement, popperElement, {
@@ -31,15 +30,13 @@ const NavigationPopover = ({ children, showOverlay }: NavigationPopoverProps) =>
 
     return (
         <NavigationPopoverContextProvider value={context}>
-            <Popover>
-                {showOverlay && <NavigationPopoverOverlay />}
-                {children}
-            </Popover>
+            <Popover>{children}</Popover>
         </NavigationPopoverContextProvider>
     );
 };
 
 NavigationPopover.Button = NavigationPopoverButton;
 NavigationPopover.Panel = NavigationPopoverPanel;
+NavigationPopover.Overlay = NavigationPopoverOverlay;
 
 export { NavigationPopover };
diff --git a/src/components/navigation/navigation.stories.tsx b/src/components/navigation/navigation.stories.tsx
@@ -64,6 +64,7 @@ export const Default: Story = {
                             <Navigation.Popover.Button LeftIcon={HelpIcon}>
                                 Support
                             </Navigation.Popover.Button>
+                            <Navigation.Popover.Overlay />
                             <Navigation.Popover.Panel>
                                 <Navigation.Popover.Panel.Item>
                                     Documentation