fix(NavigationPopover): use react-popper for handling in a better way the positioning

package.json

@@ -42,12 +42,14 @@
     "dependencies": {
         "@headlessui/react": "^1.7.17",
         "@headlessui/tailwindcss": "^0.2.0",
+        "@popperjs/core": "^2.11.8",
         "@tailwindcss/forms": "^0.5.7",
         "@tanstack/react-table": "^8.10.7",
         "@tanstack/react-virtual": "^3.0.1",
         "@tanstack/table-core": "^8.10.7",
         "react-dnd": "^16.0.1",
         "react-dnd-html5-backend": "^16.0.1",
+        "react-popper": "^2.3.0",
         "tslib": "^2.6.2"
     },
     "devDependencies": {

src/components/navigation/navigation-popover-button.tsx

@@ -0,0 +1,26 @@
+import { Popover } from "@headlessui/react";
+import React from "react";
+import { useNavigationPopoverContext } from "./navigation-popover-context";
+
+export interface NavigationPopoverButtonProps {
+    LeftIcon?: React.ElementType;
+    children: React.ReactNode;
+}
+
+export const NavigationPopoverButton = ({ children, LeftIcon }: NavigationPopoverButtonProps) => {
+    const {
+        popoverButton: { setReferenceElement },
+    } = useNavigationPopoverContext();
+
+    return (
+        <Popover.Button
+            ref={(el) => el && setReferenceElement(el)}
+            className="flex w-full items-center gap-x-3 px-4 py-3 text-left text-sm text-neutral-0 hover:bg-primary-900+10 ui-open:bg-primary-900+8 ui-open:font-semibold"
+        >
+            <>
+                {LeftIcon && <LeftIcon className="h-4 w-4" />}
+                {children}
+            </>
+        </Popover.Button>
+    );
+};

src/components/navigation/navigation-popover-context.tsx

@@ -0,0 +1,25 @@
+import { CSSProperties, createContext, useContext } from "react";
+
+export const NavigationPopoverContext = createContext<{
+    popoverButton: {
+        setReferenceElement: React.Dispatch<React.SetStateAction<HTMLButtonElement | undefined>>;
+    };
+    popoverPanel: {
+        setPopperElement: React.Dispatch<React.SetStateAction<HTMLDivElement | undefined>>;
+        styles: CSSProperties;
+        attributes: { [key: string]: string } | undefined;
+    };
+}>({
+    popoverButton: {
+        setReferenceElement: () => {},
+    },
+    popoverPanel: {
+        setPopperElement: () => {},
+        styles: {},
+        attributes: {},
+    },
+});
+
+export const useNavigationPopoverContext = () => useContext(NavigationPopoverContext);
+
+export const NavigationPopoverContextProvider = NavigationPopoverContext.Provider;

src/components/navigation/navigation-popover-panel.tsx

@@ -0,0 +1,40 @@
+import { Popover } from "@headlessui/react";
+import React from "react";
+import { useNavigationPopoverContext } from "./navigation-popover-context";
+
+export interface NavigationPopoverPanelItemProps {
+    children: React.ReactNode;
+}
+
+const NavigationPopoverPanelItem = ({ children }: NavigationPopoverPanelItemProps) => {
+    return (
+        <div className="flex w-full cursor-pointer items-center overflow-hidden p-2">
+            <p className="text-sm font-normal">{children}</p>
+        </div>
+    );
+};
+
+export interface NavigationPopoverPanelProps {
+    children: React.ReactNode;
+}
+
+const NavigationPopoverPanel = ({ children }: NavigationPopoverPanelProps) => {
+    const {
+        popoverPanel: { setPopperElement, styles, attributes },
+    } = useNavigationPopoverContext();
+
+    return (
+        <Popover.Panel
+            ref={(el) => el && setPopperElement(el)}
+            style={styles}
+            {...attributes}
+            className="z-40 ml-2 w-52 rounded bg-neutral-0 p-2 shadow"
+        >
+            {children}
+        </Popover.Panel>
+    );
+};
+
+NavigationPopoverPanel.Item = NavigationPopoverPanelItem;
+
+export { NavigationPopoverPanel };

src/components/navigation/navigation-popover.tsx

@@ -1,63 +1,42 @@
 import { Popover } from "@headlessui/react";
-import React from "react";
-
-export interface NavigationPopoverButtonProps {
-    LeftIcon?: React.ElementType;
-    children: React.ReactNode;
-}
-
-const NavigationPopoverButton = ({ children, LeftIcon }: NavigationPopoverButtonProps) => {
-    return (
-        <Popover.Button className="flex w-full items-center gap-x-3 px-4 py-3 text-left text-sm text-neutral-0 hover:bg-primary-900+10 ui-open:bg-primary-900+8 ui-open:font-semibold">
-            <>
-                {LeftIcon && <LeftIcon className="h-4 w-4" />}
-                {children}
-            </>
-        </Popover.Button>
-    );
-};
-
-export interface NavigationPopoverPanelItemProps {
-    children: React.ReactNode;
-}
-
-const NavigationPopoverPanelItem = ({ children }: NavigationPopoverPanelItemProps) => {
-    return (
-        <div className="flex w-full cursor-pointer items-center overflow-hidden p-2">
-            <p className="text-sm font-normal">{children}</p>
-        </div>
-    );
-};
-
-export interface NavigationPopoverPanelProps {
-    children: React.ReactNode;
-}
-
-const NavigationPopoverPanel = ({ children }: NavigationPopoverPanelProps) => {
-    return (
-        <Popover.Panel className="absolute bottom-0 z-40 ml-2 w-52 translate-x-[180px] rounded bg-neutral-0 p-2">
-            {children}
-        </Popover.Panel>
-    );
-};
-
-NavigationPopoverPanel.Item = NavigationPopoverPanelItem;
+import React, { useState } from "react";
+import { usePopper } from "react-popper";
+import { NavigationPopoverButton } from "./navigation-popover-button";
+import { NavigationPopoverContextProvider } from "./navigation-popover-context";
+import { NavigationPopoverPanel } from "./navigation-popover-panel";
 
 export interface NavigationPopoverProps {
     children: React.ReactNode;
     showOverlay?: boolean;
 }
 
 const NavigationPopover = ({ children, showOverlay }: NavigationPopoverProps) => {
+    const [referenceElement, setReferenceElement] = useState<HTMLButtonElement>();
+    const [popperElement, setPopperElement] = useState<HTMLDivElement>();
+    const { styles, attributes } = usePopper(referenceElement, popperElement, {
+        placement: "right-end",
+    });
+
+    const context = {
+        popoverButton: {
+            setReferenceElement,
+        },
+        popoverPanel: {
+            setPopperElement,
+            styles: styles.popper,
+            attributes: attributes.popper,
+        },
+    };
+
     return (
-        <Popover>
-            <>
+        <NavigationPopoverContextProvider value={context}>
+            <Popover>
                 {showOverlay && (
                     <Popover.Overlay className="fixed inset-0 z-30 translate-x-[180px] bg-modal-background" />
                 )}
-                <div className="relative">{children}</div>
-            </>
-        </Popover>
+                {children}
+            </Popover>
+        </NavigationPopoverContextProvider>
     );
 };
 

src/components/navigation/navigation.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
-import { Navigation } from "./navigation";
 import { CogIcon, HelpIcon, InfoSignIcon } from "../../icons";
+import { Navigation } from "./navigation";
 
 const meta: Meta<typeof Navigation> = {
     title: "Navigation",

src/components/navigation/navigation.tsx

@@ -16,7 +16,11 @@ export interface NavigationProps {
 }
 
 const Navigation = ({ children }: NavigationProps) => {
-    return <div className="flex w-[180px] grow flex-col bg-primary-900 pb-5 pt-3">{children}</div>;
+    return (
+        <div className="flex w-[180px] grow flex-col overflow-y-auto bg-primary-900 pb-5 pt-3">
+            {children}
+        </div>
+    );
 };
 
 Navigation.Logo = NavigationLogo;