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

@@ -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
 

package.json

@@ -6,7 +6,7 @@
         "email": "[email protected]",
         "url": "http://doist.com"
     },
-    "version": "26.0.0",
+    "version": "26.1.0",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": {

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"

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,14 +149,16 @@ 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)
     if (!menuStore) {
         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>
     )
 })