From 578e9f267737b179285b0c0a3060767dd2b882d2 Mon Sep 17 00:00:00 2001
From: Nikita Lobachev <nikita@miro.com>
Date: Wed, 20 Nov 2024 16:53:05 +0100
Subject: [PATCH 1/3] Fix positioning of dropdown-menu's SubContent component

---
 .yarn/versions/588134e5.yml          | 13 +++++++++++++
 packages/react/popper/src/Popper.tsx | 12 ++++++++----
 2 files changed, 21 insertions(+), 4 deletions(-)
 create mode 100644 .yarn/versions/588134e5.yml

diff --git a/.yarn/versions/588134e5.yml b/.yarn/versions/588134e5.yml
new file mode 100644
index 0000000000..b094e0a870
--- /dev/null
+++ b/.yarn/versions/588134e5.yml
@@ -0,0 +1,13 @@
+releases:
+  "@radix-ui/react-context-menu": patch
+  "@radix-ui/react-dropdown-menu": patch
+  "@radix-ui/react-hover-card": patch
+  "@radix-ui/react-menu": patch
+  "@radix-ui/react-menubar": patch
+  "@radix-ui/react-popover": patch
+  "@radix-ui/react-popper": patch
+  "@radix-ui/react-select": patch
+  "@radix-ui/react-tooltip": patch
+
+declined:
+  - primitives
diff --git a/packages/react/popper/src/Popper.tsx b/packages/react/popper/src/Popper.tsx
index 16ab3da7fa..2261d585d3 100644
--- a/packages/react/popper/src/Popper.tsx
+++ b/packages/react/popper/src/Popper.tsx
@@ -135,7 +135,7 @@ const PopperContent = React.forwardRef<PopperContentElement, PopperContentProps>
       alignOffset = 0,
       arrowPadding = 0,
       avoidCollisions = true,
-      collisionBoundary = [],
+      collisionBoundary,
       collisionPadding: collisionPaddingProp = 0,
       sticky = 'partial',
       hideWhenDetached = false,
@@ -161,12 +161,16 @@ const PopperContent = React.forwardRef<PopperContentElement, PopperContentProps>
         ? collisionPaddingProp
         : { top: 0, right: 0, bottom: 0, left: 0, ...collisionPaddingProp };
 
-    const boundary = Array.isArray(collisionBoundary) ? collisionBoundary : [collisionBoundary];
-    const hasExplicitBoundaries = boundary.length > 0;
+    const boundary = collisionBoundary
+      ? Array.isArray(collisionBoundary)
+        ? collisionBoundary
+        : [collisionBoundary]
+      : undefined;
+    const hasExplicitBoundaries = boundary !== undefined && boundary.length > 0;
 
     const detectOverflowOptions = {
       padding: collisionPadding,
-      boundary: boundary.filter(isNotNull),
+      boundary: boundary ? boundary.filter(isNotNull) : undefined,
       // with `strategy: 'fixed'`, this is the only way to get it to respect boundaries
       altBoundary: hasExplicitBoundaries,
     };

From 447c15d4215902f49380106904b7e7fcea2281e0 Mon Sep 17 00:00:00 2001
From: Nikita Lobachev <nikita@miro.com>
Date: Wed, 20 Nov 2024 17:07:47 +0100
Subject: [PATCH 2/3] Add scrollable menu example to storybook

---
 packages/react/menu/src/Menu.stories.tsx | 42 ++++++++++++++++--------
 1 file changed, 29 insertions(+), 13 deletions(-)

diff --git a/packages/react/menu/src/Menu.stories.tsx b/packages/react/menu/src/Menu.stories.tsx
index 9702e7ef01..ad5c749519 100644
--- a/packages/react/menu/src/Menu.stories.tsx
+++ b/packages/react/menu/src/Menu.stories.tsx
@@ -37,6 +37,7 @@ export const Submenus = () => {
   const [open4, setOpen4] = React.useState(false);
   const [rtl, setRtl] = React.useState(false);
   const [animated, setAnimated] = React.useState(false);
+  const [scrollable, setScrollable] = React.useState(false);
 
   React.useEffect(() => {
     if (rtl) {
@@ -64,12 +65,38 @@ export const Submenus = () => {
           />
           Animated
         </label>
+        <label>
+          <input
+            type="checkbox"
+            checked={scrollable}
+            onChange={(event) => setScrollable(event.currentTarget.checked)}
+          />
+          Scrollable
+        </label>
       </div>
-      <MenuWithAnchor>
+      <MenuWithAnchor style={scrollable ? { overflow: 'scroll', height: 100 } : undefined}>
         <Menu.Item className={itemClass()} onSelect={() => window.alert('undo')}>
           Undo
         </Menu.Item>
-        <Submenu open={open1} onOpenChange={setOpen1} animated={animated}>
+
+        <Menu.Separator className={separatorClass()} />
+        <Menu.Item className={itemClass()} disabled onSelect={() => window.alert('cut')}>
+          Cut
+        </Menu.Item>
+        <Menu.Item className={itemClass()} onSelect={() => window.alert('copy')}>
+          Copy
+        </Menu.Item>
+        <Menu.Item className={itemClass()} onSelect={() => window.alert('paste')}>
+          Paste
+        </Menu.Item>
+
+        <Menu.Separator className={separatorClass()} />
+        <Submenu
+          open={open1}
+          onOpenChange={setOpen1}
+          animated={animated}
+          hideWhenDetached={scrollable}
+        >
           <Menu.Item className={itemClass()} disabled>
             Disabled
           </Menu.Item>
@@ -125,17 +152,6 @@ export const Submenus = () => {
             Three
           </Menu.Item>
         </Submenu>
-
-        <Menu.Separator className={separatorClass()} />
-        <Menu.Item className={itemClass()} disabled onSelect={() => window.alert('cut')}>
-          Cut
-        </Menu.Item>
-        <Menu.Item className={itemClass()} onSelect={() => window.alert('copy')}>
-          Copy
-        </Menu.Item>
-        <Menu.Item className={itemClass()} onSelect={() => window.alert('paste')}>
-          Paste
-        </Menu.Item>
       </MenuWithAnchor>
     </DirectionProvider>
   );

From 7ea9248b6b8a4a5beb337de2cd4d548a862d7cc4 Mon Sep 17 00:00:00 2001
From: Nikita Lobachev <nikita@miro.com>
Date: Thu, 28 Nov 2024 10:53:10 +0100
Subject: [PATCH 3/3] Replace inline styling with a css rule in storybook

---
 packages/react/menu/src/Menu.stories.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/react/menu/src/Menu.stories.tsx b/packages/react/menu/src/Menu.stories.tsx
index ad5c749519..bab48fe5e6 100644
--- a/packages/react/menu/src/Menu.stories.tsx
+++ b/packages/react/menu/src/Menu.stories.tsx
@@ -74,7 +74,7 @@ export const Submenus = () => {
           Scrollable
         </label>
       </div>
-      <MenuWithAnchor style={scrollable ? { overflow: 'scroll', height: 100 } : undefined}>
+      <MenuWithAnchor className={scrollable ? scrollableMenuClass() : undefined}>
         <Menu.Item className={itemClass()} onSelect={() => window.alert('undo')}>
           Undo
         </Menu.Item>
@@ -520,6 +520,11 @@ const animatedItemIndicatorClass = css({
   },
 });
 
+const scrollableMenuClass = css({
+  overflow: 'scroll',
+  height: 100,
+});
+
 export const TickIcon = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -542,4 +547,5 @@ export const classes = {
   itemClass,
   separatorClass,
   subTriggerClass,
+  scrollableMenuClass,
 };