From c10e64cedbb253c9f47f7c1a3e4ccbe2aa42bb52 Mon Sep 17 00:00:00 2001
From: anitavincent <paes.anita@gmail.com>
Date: Thu, 23 Nov 2023 14:45:33 -0300
Subject: [PATCH 1/3] fix(menu): popover misaligning inside stacks

---
 packages/components/src/menu/menu.tsx                 | 1 +
 packages/components/src/menu/stories/menu.stories.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/menu/menu.tsx b/packages/components/src/menu/menu.tsx
index 4e22d94c83..a90a2534ba 100644
--- a/packages/components/src/menu/menu.tsx
+++ b/packages/components/src/menu/menu.tsx
@@ -15,6 +15,7 @@ export const Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu(
       ref={ref}
       render={asChild && (children as any)}
       gutter={4}
+      portal
       {...otherProps}
     >
       {children}
diff --git a/packages/components/src/menu/stories/menu.stories.tsx b/packages/components/src/menu/stories/menu.stories.tsx
index ea4f047afd..3277dc4e69 100644
--- a/packages/components/src/menu/stories/menu.stories.tsx
+++ b/packages/components/src/menu/stories/menu.stories.tsx
@@ -63,7 +63,7 @@ export function Composition() {
 export function MoreActions() {
   return (
     <Stack>
-      <Stack direction="row">
+      <Stack direction="row" space="5rem">
         <MenuProvider>
           <MenuTrigger asChild>
             <Button variant="primary">

From a15e8b9717818ae8aaf2fbdfd31a6ee24b624413 Mon Sep 17 00:00:00 2001
From: anitavincent <paes.anita@gmail.com>
Date: Thu, 23 Nov 2023 15:14:00 -0300
Subject: [PATCH 2/3] feat(menu): change popover position as designed

---
 .../components/src/menu/menu-provider.tsx     | 10 ++-
 .../src/menu/stories/menu.stories.tsx         | 69 ++++++++++---------
 .../components/src/menu/stories/style.css     |  3 +
 3 files changed, 49 insertions(+), 33 deletions(-)
 create mode 100644 packages/components/src/menu/stories/style.css

diff --git a/packages/components/src/menu/menu-provider.tsx b/packages/components/src/menu/menu-provider.tsx
index cd32598067..02d28ea370 100644
--- a/packages/components/src/menu/menu-provider.tsx
+++ b/packages/components/src/menu/menu-provider.tsx
@@ -1,3 +1,9 @@
-import { MenuProvider } from '@ariakit/react'
+import type { MenuProviderProps } from '@ariakit/react'
+import { MenuProvider as Provider } from '@ariakit/react'
+import React from 'react'
 
-export { MenuProvider }
+export function MenuProvider(props: MenuProviderProps) {
+  const { placement = 'bottom-end', ...otherProps } = props
+
+  return <Provider placement={placement} {...otherProps} />
+}
diff --git a/packages/components/src/menu/stories/menu.stories.tsx b/packages/components/src/menu/stories/menu.stories.tsx
index 3277dc4e69..dd2cba6586 100644
--- a/packages/components/src/menu/stories/menu.stories.tsx
+++ b/packages/components/src/menu/stories/menu.stories.tsx
@@ -1,3 +1,6 @@
+import '../../../dist/styles.min.css'
+import '../menu.css'
+import './style.css'
 import React from 'react'
 import {
   IconCaretDown,
@@ -24,45 +27,49 @@ export default {
 
 export function Default() {
   return (
-    <MenuProvider>
-      <MenuTrigger>Open</MenuTrigger>
-      <Menu>
-        <MenuItem>New Tab</MenuItem>
-        <MenuItem>New Item</MenuItem>
-        <MenuSeparator />
-        <MenuItem>Downloads</MenuItem>
-      </Menu>
-    </MenuProvider>
+    <div className="base-story">
+      <MenuProvider>
+        <MenuTrigger>Open</MenuTrigger>
+        <Menu>
+          <MenuItem>New Tab</MenuItem>
+          <MenuItem>New Item</MenuItem>
+          <MenuSeparator />
+          <MenuItem>Downloads</MenuItem>
+        </Menu>
+      </MenuProvider>
+    </div>
   )
 }
 
 export function Composition() {
   return (
-    <MenuProvider>
-      <MenuTrigger asChild>
-        <Button>
-          Open <IconCaretDown />
-        </Button>
-      </MenuTrigger>
-      <Menu asChild>
-        <div style={{ border: '5px solid red' }}>
-          <MenuItem>New Tab</MenuItem>
-          <MenuItem>New Item</MenuItem>
-          <MenuSeparator />
-          <MenuItem asChild>
-            <a href="htpps://vtex.com" target="_blank" rel="noreferrer">
-              Downloads
-            </a>
-          </MenuItem>
-        </div>
-      </Menu>
-    </MenuProvider>
+    <div className="base-story">
+      <MenuProvider placement="bottom-end">
+        <MenuTrigger asChild>
+          <Button>
+            Open <IconCaretDown />
+          </Button>
+        </MenuTrigger>
+        <Menu asChild>
+          <div style={{ border: '5px solid red' }}>
+            <MenuItem>New Tab</MenuItem>
+            <MenuItem>New Item</MenuItem>
+            <MenuSeparator />
+            <MenuItem asChild>
+              <a href="htpps://vtex.com" target="_blank" rel="noreferrer">
+                Downloads
+              </a>
+            </MenuItem>
+          </div>
+        </Menu>
+      </MenuProvider>
+    </div>
   )
 }
 
 export function MoreActions() {
   return (
-    <Stack>
+    <Stack className="base-story">
       <Stack direction="row" space="5rem">
         <MenuProvider>
           <MenuTrigger asChild>
@@ -204,7 +211,7 @@ export function MoreActions() {
 
 export function CustomLabel() {
   return (
-    <Stack>
+    <Stack className="base-story">
       <MenuProvider>
         <MenuTrigger asChild>
           <Button variant="primary">
@@ -237,7 +244,7 @@ export function CustomLabel() {
 
 export function ItemVariants() {
   return (
-    <Stack>
+    <Stack className="base-story">
       <MenuProvider>
         <MenuTrigger asChild>
           <Button variant="primary">
diff --git a/packages/components/src/menu/stories/style.css b/packages/components/src/menu/stories/style.css
new file mode 100644
index 0000000000..d76134db0a
--- /dev/null
+++ b/packages/components/src/menu/stories/style.css
@@ -0,0 +1,3 @@
+.base-story {
+  padding: 2rem;
+}

From eb9a97bf120f0d1293dbb576617c974477f141ce Mon Sep 17 00:00:00 2001
From: anitavincent <paes.anita@gmail.com>
Date: Tue, 28 Nov 2023 17:18:20 -0300
Subject: [PATCH 3/3] test(menu): fix test not passing after change to portal

---
 packages/components/src/menu/stories/menu.stories.tsx | 2 --
 packages/components/src/menu/tests/menu.test.tsx      | 6 ++++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/menu/stories/menu.stories.tsx b/packages/components/src/menu/stories/menu.stories.tsx
index dd2cba6586..82550f4d8e 100644
--- a/packages/components/src/menu/stories/menu.stories.tsx
+++ b/packages/components/src/menu/stories/menu.stories.tsx
@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../menu.css'
 import './style.css'
 import React from 'react'
 import {
diff --git a/packages/components/src/menu/tests/menu.test.tsx b/packages/components/src/menu/tests/menu.test.tsx
index aafe7084b2..c01f19d230 100644
--- a/packages/components/src/menu/tests/menu.test.tsx
+++ b/packages/components/src/menu/tests/menu.test.tsx
@@ -9,7 +9,7 @@ import { MenuSeparator } from '../menu-separator'
 
 describe('menu', () => {
   it('renders', () => {
-    const { container } = render(
+    const { container, unmount } = render(
       <MenuProvider>
         <MenuTrigger asChild>
           <button>Open</button>
@@ -20,7 +20,7 @@ describe('menu', () => {
           <MenuSeparator />
           <MenuItem>Item 3</MenuItem>
         </Menu>
-      </MenuProvider>
+      </MenuProvider>, {container: document.body}
     )
 
     expect(container.querySelector('[data-sl-menu]')).toBeInTheDocument()
@@ -31,5 +31,7 @@ describe('menu', () => {
     expect(
       container.querySelector('[data-sl-menu-separator]')
     ).toBeInTheDocument()
+
+    unmount()
   })
 })