From 7ef74998bea594634e3c88a8a958481667413530 Mon Sep 17 00:00:00 2001
From: devgioele <gioele.devitti@aboutbits.it>
Date: Mon, 23 Oct 2023 06:52:55 +0000
Subject: [PATCH] Fix cropped menu items list (#296)

* use floating portal to make menu items list always visible

* clarify example of Menu
---
 src/components/menu/Menu.tsx  | 26 ++++++++++++++++++--------
 src/examples/Menu.stories.tsx | 15 +++++++++++----
 2 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index 6206e57a..67695fc3 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -1,6 +1,12 @@
 import { Menu as HeadlessMenu } from '@headlessui/react'
 import { Fragment, ReactElement, ReactNode, ReactPortal } from 'react'
-import { autoUpdate, useFloating, flip, offset } from '@floating-ui/react'
+import {
+  autoUpdate,
+  useFloating,
+  flip,
+  offset,
+  FloatingPortal,
+} from '@floating-ui/react'
 import classNames from 'classnames'
 import { useTheme } from '../../framework'
 import { remToPx } from '../util/remToPx'
@@ -74,13 +80,17 @@ export function Menu({ className, children, button, placement }: MenuProps) {
                 })
               : button}
           </HeadlessMenu.Button>
-          <HeadlessMenu.Items
-            ref={refs.setFloating}
-            className={menu.list.base}
-            style={floatingStyles}
-          >
-            {children}
-          </HeadlessMenu.Items>
+          {open && (
+            <FloatingPortal>
+              <HeadlessMenu.Items
+                ref={refs.setFloating}
+                className={menu.list.base}
+                style={floatingStyles}
+              >
+                {children}
+              </HeadlessMenu.Items>
+            </FloatingPortal>
+          )}
         </>
       )}
     </HeadlessMenu>
diff --git a/src/examples/Menu.stories.tsx b/src/examples/Menu.stories.tsx
index 2d3b491f..fb26767e 100644
--- a/src/examples/Menu.stories.tsx
+++ b/src/examples/Menu.stories.tsx
@@ -36,10 +36,17 @@ const meta = {
       }, [])
 
       return (
-        <div className="h-96 overflow-y-scroll border-2" tabIndex={-1}>
-          <div className="flex h-[70rem] items-center justify-center">
-            <div ref={elementRef}>
-              <Story />
+        <div className="h-screen overflow-y-scroll border-2" tabIndex={-1}>
+          <div className="flex h-[100rem] items-center justify-center">
+            <div>
+              <div className="px-4">
+                Container with &quot;overflow: hidden&quot;
+              </div>
+              <div className="mx-4 flex items-center justify-center overflow-hidden border-2 p-8">
+                <div ref={elementRef}>
+                  <Story />
+                </div>
+              </div>
             </div>
           </div>
         </div>