From c9c74066e05e307fe8edd4f663a7ae87ddbd472b Mon Sep 17 00:00:00 2001
From: Frankie Yan <frankieyan@users.noreply.github.com>
Date: Wed, 23 Oct 2024 16:54:48 -0700
Subject: [PATCH] fix: Render submenus at the bottom when there isn't enough
 space (#844)

* fix: Render submenus at the bottom when there isn't enough space

* Update changelog

* Bump version to 26.1.0
---
 CHANGELOG.md              |  3 ++-
 package-lock.json         |  4 ++--
 package.json              |  2 +-
 src/menu/menu.stories.mdx |  2 ++
 src/menu/menu.tsx         | 10 ++++++++--
 5 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8138cfda0..c46b3c619 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,10 +2,11 @@
 
 Reactist follows [semantic versioning](https://semver.org/) and doesn't introduce breaking changes (API-wise) in minor or patch releases. However, the appearance of a component might change in a minor or patch release so keep an eye on redesigns and make sure your app still looks and feels like you expect it.
 
-# Next
+# v26.1.0
 
 -   [Feat] Expose `showTimeout` and `hideTimeout` props for `Tooltip`
 -   [Fix] The center alignment between the `Alert` component's icon and message is now more accurate when the message is only one-line long.
+-   [Fix] Render submenus at the bottom when there isn't enough space
 
 # v26.0.0
 
diff --git a/package-lock.json b/package-lock.json
index 3ef2df877..aef43574e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@doist/reactist",
-    "version": "26.0.0",
+    "version": "26.1.0",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "@doist/reactist",
-            "version": "26.0.0",
+            "version": "26.1.0",
             "hasInstallScript": true,
             "license": "MIT",
             "dependencies": {
diff --git a/package.json b/package.json
index 9a7fc5daf..007e7d505 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
         "email": "henning@doist.com",
         "url": "http://doist.com"
     },
-    "version": "26.0.0",
+    "version": "26.1.0",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": {
diff --git a/src/menu/menu.stories.mdx b/src/menu/menu.stories.mdx
index cb6766cf9..52ddd31ec 100644
--- a/src/menu/menu.stories.mdx
+++ b/src/menu/menu.stories.mdx
@@ -126,6 +126,8 @@ be changed by passing `modal={false}` to `<MenuList>`
 
 You may nest the `<SubMenu>` component within `<Menu>` to create submenus.
 
+On smaller viewports where there isn't enough space to render the submenu on the side, it will be rendered under its parent menu item instead.
+
 <Canvas>
     <Story
         name="SubMenu Story"
diff --git a/src/menu/menu.tsx b/src/menu/menu.tsx
index f9beff24b..f9b26287f 100644
--- a/src/menu/menu.tsx
+++ b/src/menu/menu.tsx
@@ -34,6 +34,8 @@ const MenuContext = React.createContext<MenuContextState>({
     setAnchorRect: () => undefined,
 })
 
+const SubMenuContext = React.createContext<{ isSubMenu: boolean }>({ isSubMenu: false })
+
 //
 // Menu
 //
@@ -147,7 +149,7 @@ interface MenuListProps
  * The dropdown menu itself, containing a list of menu items.
  */
 const MenuList = React.forwardRef<HTMLDivElement, MenuListProps>(function MenuList(
-    { exceptionallySetClassName, modal = true, ...props },
+    { exceptionallySetClassName, modal = true, flip, ...props },
     ref,
 ) {
     const { menuStore, getAnchorRect } = React.useContext(MenuContext)
@@ -155,6 +157,8 @@ const MenuList = React.forwardRef<HTMLDivElement, MenuListProps>(function MenuLi
         throw new Error('MenuList must be wrapped in <Menu/>')
     }
 
+    const { isSubMenu } = React.useContext(SubMenuContext)
+
     const isOpen = menuStore.useState('open')
 
     return isOpen ? (
@@ -168,6 +172,7 @@ const MenuList = React.forwardRef<HTMLDivElement, MenuListProps>(function MenuLi
                 className={classNames('reactist_menulist', exceptionallySetClassName)}
                 getAnchorRect={getAnchorRect ?? undefined}
                 modal={modal}
+                flip={flip ?? (isSubMenu ? 'bottom' : undefined)}
             />
         </Portal>
     ) : null
@@ -324,13 +329,14 @@ const SubMenu = React.forwardRef<HTMLDivElement, SubMenuProps>(function SubMenu(
 
     const [button, list] = React.Children.toArray(children)
     const buttonElement = button as React.ReactElement<MenuButtonProps>
+    const subMenuContextValue = React.useMemo(() => ({ isSubMenu: true }), [])
 
     return (
         <Menu onItemSelect={handleSubItemSelect}>
             <AriakitMenuItem store={menuStore} ref={ref} hideOnClick={false} render={buttonElement}>
                 {buttonElement.props.children}
             </AriakitMenuItem>
-            {list}
+            <SubMenuContext.Provider value={subMenuContextValue}>{list}</SubMenuContext.Provider>
         </Menu>
     )
 })