@tamagui/menu 2.0.0-rc.4 → 2.0.0-rc.40

package/src/createNonNativeMenu.tsx

@@ -1,5 +1,23 @@
-import type BaseMenuTypes from '@tamagui/create-menu'
-import { createBaseMenu, type CreateBaseMenuProps } from '@tamagui/create-menu'
+import type * as BaseMenuTypes from '@tamagui/create-menu'
+import {
+  type MenuArrowProps as BaseMenuArrowProps,
+  type MenuCheckboxItemProps as BaseMenuCheckboxItemProps,
+  type MenuContentProps as BaseMenuContentProps,
+  type MenuGroupProps as BaseMenuGroupProps,
+  type MenuItemIndicatorProps as BaseMenuItemIndicatorProps,
+  type MenuItemProps as BaseMenuItemProps,
+  type MenuLabelProps as BaseMenuLabelProps,
+  type MenuPortalProps as BaseMenuPortalProps,
+  type MenuRadioGroupProps as BaseMenuRadioGroupProps,
+  type MenuRadioItemProps as BaseMenuRadioItemProps,
+  type MenuSeparatorProps as BaseMenuSeparatorProps,
+  type MenuSubContentProps as BaseMenuSubContentProps,
+  type MenuSubTriggerProps as BaseMenuSubTriggerProps,
+  createBaseMenu,
+  type CreateBaseMenuProps,
+} from '@tamagui/create-menu'
+import { usePopperContextSlow } from '@tamagui/popper'
+import { ScrollView, type ScrollViewProps } from '@tamagui/scroll-view'
 import { useControllableState } from '@tamagui/use-controllable-state'
 import {
   composeEventHandlers,
@@ -8,7 +26,9 @@ import {
   isAndroid,
   isWeb,
   Slot,
+  styled,
   type TamaguiElement,
+  useEvent,
   useIsTouchDevice,
   View,
   type ViewProps,
@@ -27,14 +47,61 @@ export const DROPDOWN_MENU_CONTEXT = 'MenuContext'
 
 type ScopedProps<P> = P & { scope?: string }
 
+type MenuTriggerStateSetter = React.Dispatch<React.SetStateAction<boolean>>
+
 type MenuContextValue = {
   triggerId: string
   triggerRef: React.RefObject<TamaguiElement | null>
   contentId: string
-  open: boolean
+  openRef: React.RefObject<boolean>
   onOpenChange(open: boolean): void
   onOpenToggle(): void
   modal: boolean
+  setActiveTrigger(id: string | null): void
+  registerTrigger(id: string, setOpen: MenuTriggerStateSetter): void
+  unregisterTrigger(id: string): void
+}
+
+function useMenuTriggerSetup(open: boolean) {
+  const triggerStateSettersRef = React.useRef(new Map<string, MenuTriggerStateSetter>())
+  const activeTriggerIdRef = React.useRef<string | null>(null)
+
+  const setActiveTrigger = useEvent((id: string | null) => {
+    const prevId = activeTriggerIdRef.current
+    if (prevId === id) return
+    if (prevId) {
+      triggerStateSettersRef.current.get(prevId)?.(false)
+    }
+    activeTriggerIdRef.current = id
+    if (id && open) {
+      triggerStateSettersRef.current.get(id)?.(true)
+    }
+  })
+
+  const registerTrigger = useEvent((id: string, setOpenState: MenuTriggerStateSetter) => {
+    triggerStateSettersRef.current.set(id, setOpenState)
+    setOpenState(activeTriggerIdRef.current === id && open)
+  })
+
+  const unregisterTrigger = useEvent((id: string) => {
+    triggerStateSettersRef.current.delete(id)
+    if (activeTriggerIdRef.current === id) {
+      activeTriggerIdRef.current = null
+    }
+  })
+
+  React.useEffect(() => {
+    if (!open) {
+      setActiveTrigger(null)
+      return
+    }
+    const activeId = activeTriggerIdRef.current
+    if (activeId) {
+      triggerStateSettersRef.current.get(activeId)?.(true)
+    }
+  }, [open, setActiveTrigger])
+
+  return { setActiveTrigger, registerTrigger, unregisterTrigger }
 }
 
 interface MenuProps extends BaseMenuTypes.MenuProps {
@@ -46,8 +113,6 @@ interface MenuProps extends BaseMenuTypes.MenuProps {
   modal?: boolean
 }
 
-type BaseMenu = ReturnType<typeof createBaseMenu>['Menu']
-
 /* -------------------------------------------------------------------------------------------------
  * MenuTrigger
  * -----------------------------------------------------------------------------------------------*/
@@ -60,54 +125,51 @@ interface MenuTriggerProps extends ViewProps {
  * MenuPortal
  * -----------------------------------------------------------------------------------------------*/
 
-type MenuPortalProps = React.ComponentPropsWithoutRef<BaseMenu['Portal']>
+type MenuPortalProps = BaseMenuPortalProps
 
 /* -------------------------------------------------------------------------------------------------
  * MenuContent
  * -----------------------------------------------------------------------------------------------*/
 
-type MenuContentElement = React.ElementRef<BaseMenu['Content']>
-interface MenuContentProps extends Omit<
-  React.ComponentPropsWithoutRef<BaseMenu['Content']>,
-  'onEntryFocus'
-> {}
+type MenuContentElement = TamaguiElement
+interface MenuContentProps extends Omit<BaseMenuContentProps, 'onEntryFocus'> {}
 
 /* -------------------------------------------------------------------------------------------------
  * MenuGroup
  * -----------------------------------------------------------------------------------------------*/
 
-type MenuGroupProps = React.ComponentPropsWithoutRef<BaseMenu['Group']>
+type MenuGroupProps = BaseMenuGroupProps
 
 /* -------------------------------------------------------------------------------------------------
  * MenuLabel
  * -----------------------------------------------------------------------------------------------*/
 
-type MenuLabelProps = React.ComponentPropsWithoutRef<BaseMenu['Label']>
+type MenuLabelProps = BaseMenuLabelProps
 
 /* -------------------------------------------------------------------------------------------------
  * MenuItem
  * -----------------------------------------------------------------------------------------------*/
 
-type MenuItemProps = React.ComponentPropsWithoutRef<BaseMenu['Item']>
+type MenuItemProps = BaseMenuItemProps
 
-type MenuCheckboxItemProps = React.ComponentPropsWithoutRef<BaseMenu['CheckboxItem']>
+type MenuCheckboxItemProps = BaseMenuCheckboxItemProps
 
-type MenuRadioGroupElement = React.ElementRef<BaseMenu['RadioGroup']>
-type MenuRadioGroupProps = React.ComponentPropsWithoutRef<BaseMenu['RadioGroup']>
-type MenuRadioItemProps = React.ComponentPropsWithoutRef<BaseMenu['RadioItem']>
-type MenuItemIndicatorProps = React.ComponentPropsWithoutRef<BaseMenu['ItemIndicator']>
+type MenuRadioGroupElement = TamaguiElement
+type MenuRadioGroupProps = BaseMenuRadioGroupProps
+type MenuRadioItemProps = BaseMenuRadioItemProps
+type MenuItemIndicatorProps = BaseMenuItemIndicatorProps
 
 /* -------------------------------------------------------------------------------------------------
  * MenuSeparator
  * -----------------------------------------------------------------------------------------------*/
 
-type MenuSeparatorProps = React.ComponentPropsWithoutRef<BaseMenu['Separator']>
+type MenuSeparatorProps = BaseMenuSeparatorProps
 
 /* -------------------------------------------------------------------------------------------------
  * MenuArrow
  * -----------------------------------------------------------------------------------------------*/
 
-type MenuArrowProps = React.ComponentPropsWithoutRef<BaseMenu['Arrow']>
+type MenuArrowProps = BaseMenuArrowProps
 
 /* -------------------------------------------------------------------------------------------------
  * MenuSub
@@ -124,14 +186,20 @@ type MenuSubProps = BaseMenuTypes.MenuSubProps & {
  * MenuSubTrigger
  * -----------------------------------------------------------------------------------------------*/
 
-type MenuSubTriggerProps = React.ComponentPropsWithoutRef<BaseMenu['SubTrigger']>
+type MenuSubTriggerProps = BaseMenuSubTriggerProps
 
 /* -------------------------------------------------------------------------------------------------
  * MenuSubContent
  * -----------------------------------------------------------------------------------------------*/
 
-type MenuSubContentElement = React.ElementRef<BaseMenu['Content']>
-type MenuSubContentProps = React.ComponentPropsWithoutRef<BaseMenu['SubContent']>
+type MenuSubContentElement = TamaguiElement
+type MenuSubContentProps = BaseMenuSubContentProps
+
+/* -------------------------------------------------------------------------------------------------
+ * MenuScrollView
+ * -----------------------------------------------------------------------------------------------*/
+
+type MenuScrollViewProps = ScrollViewProps
 
 /* -----------------------------------------------------------------------------------------------*/
 
@@ -164,21 +232,30 @@ export function createNonNativeMenu(params: CreateBaseMenuProps) {
       defaultProp: defaultOpen!,
       onChange: onOpenChange,
     })
+    const openRef = React.useRef(open)
+    openRef.current = open
+    const { setActiveTrigger, registerTrigger, unregisterTrigger } =
+      useMenuTriggerSetup(open)
 
     return (
       <MenuProvider
         scope={scope}
         triggerId={useId()}
-        // TODO
         triggerRef={triggerRef}
         contentId={useId()}
-        open={open}
-        onOpenChange={setOpen}
+        openRef={openRef}
+        onOpenChange={React.useCallback(
+          (nextOpen: boolean) => setOpen(nextOpen),
+          [setOpen]
+        )}
         onOpenToggle={React.useCallback(
           () => setOpen((prevOpen) => !prevOpen),
           [setOpen]
         )}
         modal={modal}
+        setActiveTrigger={setActiveTrigger}
+        registerTrigger={registerTrigger}
+        unregisterTrigger={unregisterTrigger}
       >
         <Menu
           scope={scope || DROPDOWN_MENU_CONTEXT}
@@ -215,8 +292,35 @@ export function createNonNativeMenu(params: CreateBaseMenuProps) {
         ...triggerProps
       } = props
       const context = useMenuContext(scope)
+      const popperCtx = usePopperContextSlow(scope || DROPDOWN_MENU_CONTEXT)
       const Comp = asChild ? Slot : View
       const isTouchDevice = useIsTouchDevice()
+      const triggerElRef = React.useRef<TamaguiElement>(null)
+
+      // multi-trigger: per-trigger open state
+      const triggerId = React.useId()
+      const [triggerOpen, setTriggerOpen] = React.useState(false)
+
+      // extract stable refs so re-registration doesn't happen when context object changes
+      const { registerTrigger, unregisterTrigger } = context
+      React.useEffect(() => {
+        registerTrigger(triggerId, setTriggerOpen)
+        return () => unregisterTrigger(triggerId)
+      }, [registerTrigger, unregisterTrigger, triggerId])
+
+      // activate this trigger: set popper reference and update shared triggerRef for close-auto-focus
+      const activateSelf = React.useCallback(() => {
+        context.setActiveTrigger(triggerId)
+        const el = triggerElRef.current
+        if (el) {
+          // update shared ref so close-auto-focus returns to the active trigger
+          context.triggerRef.current = el
+          if (el instanceof HTMLElement) {
+            popperCtx.refs?.setReference(el)
+            requestAnimationFrame(() => popperCtx.update?.())
+          }
+        }
+      }, [context, triggerId, popperCtx])
 
       // Use onClick for touch devices to avoid race condition with Dismissable
       // Use onPointerDown for mouse for faster feedback
@@ -232,12 +336,12 @@ export function createNonNativeMenu(params: CreateBaseMenuProps) {
             role="button"
             id={context.triggerId}
             aria-haspopup="menu"
-            aria-expanded={context.open}
-            aria-controls={context.open ? context.contentId : undefined}
-            data-state={context.open ? 'open' : 'closed'}
+            aria-expanded={triggerOpen}
+            aria-controls={triggerOpen ? context.contentId : undefined}
+            data-state={triggerOpen ? 'open' : 'closed'}
             data-disabled={disabled ? '' : undefined}
             aria-disabled={disabled || undefined}
-            ref={composeRefs(forwardedRef, context.triggerRef)}
+            ref={composeRefs(forwardedRef, context.triggerRef, triggerElRef)}
             {...{
               [pressEvent]: composeEventHandlers(
                 //@ts-ignore
@@ -253,10 +357,15 @@ export function createNonNativeMenu(params: CreateBaseMenuProps) {
                       event.ctrlKey === true
                     )
                       return
+                    if (context.openRef.current) {
+                      context.setActiveTrigger(null)
+                    } else {
+                      activateSelf()
+                    }
                     context.onOpenToggle()
                     // prevent trigger focusing when opening
                     // this allows the content to be given focus without competition
-                    if (!context.open) event.preventDefault()
+                    if (!context.openRef.current) event.preventDefault()
                   }
                 }
               ),
@@ -264,8 +373,18 @@ export function createNonNativeMenu(params: CreateBaseMenuProps) {
             {...(isWeb && {
               onKeyDown: composeEventHandlers(onKeydown, (event) => {
                 if (disabled) return
-                if (['Enter', ' '].includes(event.key)) context.onOpenToggle()
-                if (event.key === 'ArrowDown') context.onOpenChange(true)
+                if (['Enter', ' '].includes(event.key)) {
+                  if (context.openRef.current) {
+                    context.setActiveTrigger(null)
+                  } else {
+                    activateSelf()
+                  }
+                  context.onOpenToggle()
+                }
+                if (event.key === 'ArrowDown') {
+                  activateSelf()
+                  context.onOpenChange(true)
+                }
                 // prevent keydown from scrolling window / first focused item to execute
                 // that keydown (inadvertently closing the menu)
                 if (['Enter', ' ', 'ArrowDown'].includes(event.key))
@@ -328,7 +447,15 @@ export function createNonNativeMenu(params: CreateBaseMenuProps) {
           {...contentProps}
           ref={forwardedRef}
           onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {
-            if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus()
+            if (!hasInteractedOutsideRef.current) {
+              // delay to let React render new components and run their autoFocus effects
+              requestAnimationFrame(() => {
+                const activeEl = document.activeElement
+                if (!activeEl || activeEl === document.body) {
+                  context.triggerRef.current?.focus()
+                }
+              })
+            }
             hasInteractedOutsideRef.current = false
             // Always prevent auto focus because we either focus manually or want user agent focus
             event.preventDefault()
@@ -340,7 +467,24 @@ export function createNonNativeMenu(params: CreateBaseMenuProps) {
             const isRightClick = originalEvent.button === 2 || ctrlLeftClick
             if (!context.modal || isRightClick) hasInteractedOutsideRef.current = true
           })}
-          {...(props.style as object)}
+          style={
+            isWeb
+              ? {
+                  ...(props.style as object),
+                  ...({
+                    '--tamagui-menu-content-transform-origin':
+                      'var(--tamagui-popper-transform-origin)',
+                    '--tamagui-menu-content-available-width':
+                      'var(--tamagui-popper-available-width)',
+                    '--tamagui-menu-content-available-height':
+                      'var(--tamagui-popper-available-height)',
+                    '--tamagui-menu-trigger-width': 'var(--tamagui-popper-anchor-width)',
+                    '--tamagui-menu-trigger-height':
+                      'var(--tamagui-popper-anchor-height)',
+                  } as React.CSSProperties),
+                }
+              : props.style
+          }
         />
       )
     }
@@ -348,214 +492,12 @@ export function createNonNativeMenu(params: CreateBaseMenuProps) {
 
   MenuContent.displayName = CONTENT_NAME
 
-  /* -------------------------------------------------------------------------------------------------
-   * MenuGroup
-   * -----------------------------------------------------------------------------------------------*/
-
-  const GROUP_NAME = 'MenuGroup'
-
-  const MenuGroup = Menu.Group
-
-  MenuGroup.displayName = GROUP_NAME
-
-  /* -------------------------------------------------------------------------------------------------
-   * MenuLabel
-   * -----------------------------------------------------------------------------------------------*/
-
-  const LABEL_NAME = 'MenuLabel'
-
-  const MenuLabel = Menu.Label
-
-  MenuLabel.displayName = LABEL_NAME
-
-  /* -------------------------------------------------------------------------------------------------
-   * MenuItem
-   * -----------------------------------------------------------------------------------------------*/
-
-  const ITEM_NAME = 'MenuItem'
-
-  const MenuItemFrame = Menu.Item
-
-  const MenuItem = React.forwardRef<TamaguiElement, ScopedProps<MenuItemProps>>(
-    (props, forwardedRef) => {
-      const { scope, ...itemProps } = props
-      return (
-        <MenuItemFrame
-          componentName={ITEM_NAME}
-          scope={scope || DROPDOWN_MENU_CONTEXT}
-          {...itemProps}
-          ref={forwardedRef}
-        />
-      )
-    }
-  )
-
-  MenuItem.displayName = ITEM_NAME
-
-  /* -------------------------------------------------------------------------------------------------
-   * MenuItemTitle
-   * -----------------------------------------------------------------------------------------------*/
-
-  const ITEM_TITLE_NAME = 'MenuItemTitle'
-  const MenuItemTitle = Menu.ItemTitle
-  MenuItemTitle.displayName = ITEM_TITLE_NAME
-
-  /* -------------------------------------------------------------------------------------------------
-   * MenuItemSubTitle
-   * -----------------------------------------------------------------------------------------------*/
-
-  const ITEM_SUB_TITLE_NAME = 'MenuItemSubTitle'
-  const MenuItemSubTitle = Menu.ItemSubtitle
-  MenuItemSubTitle.displayName = ITEM_SUB_TITLE_NAME
-
-  /* -------------------------------------------------------------------------------------------------
-   * MenuItemImage
-   * -----------------------------------------------------------------------------------------------*/
-
-  const ITEM_IMAGE_NAME = 'MenuItemImage'
-  const MenuItemImage = Menu.ItemImage
-  MenuItemImage.displayName = ITEM_IMAGE_NAME
-
-  /* -------------------------------------------------------------------------------------------------
-   * MenuItemIcon
-   * -----------------------------------------------------------------------------------------------*/
-
-  const ITEM_ICON_NAME = 'MenuItemIcon'
-  const MenuItemIcon = Menu.ItemIcon
-  MenuItemIcon.displayName = ITEM_ICON_NAME
-  /* -------------------------------------------------------------------------------------------------
-   * MenuCheckboxItem
-   * -----------------------------------------------------------------------------------------------*/
-
-  const CHECKBOX_ITEM_NAME = 'MenuCheckboxItem'
-
-  const MenuCheckboxItemFrame = Menu.CheckboxItem
-
-  const MenuCheckboxItem = React.forwardRef<
-    TamaguiElement,
-    ScopedProps<MenuCheckboxItemProps>
-  >((props, forwardedRef) => {
-    const { scope, ...checkboxItemProps } = props
-    return (
-      <MenuCheckboxItemFrame
-        componentName={CHECKBOX_ITEM_NAME}
-        scope={scope || DROPDOWN_MENU_CONTEXT}
-        {...checkboxItemProps}
-        ref={forwardedRef}
-      />
-    )
-  })
-
-  MenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME
-
-  /* -------------------------------------------------------------------------------------------------
-   * MenuRadioGroup
-   * -----------------------------------------------------------------------------------------------*/
-
-  const RADIO_GROUP_NAME = 'MenuRadioGroup'
-
-  const MenuRadioGroup = React.forwardRef<
-    MenuRadioGroupElement,
-    ScopedProps<MenuRadioGroupProps>
-  >((props, forwardedRef) => {
-    const { scope, ...radioGroupProps } = props
-    return (
-      <Menu.RadioGroup
-        scope={scope || DROPDOWN_MENU_CONTEXT}
-        {...radioGroupProps}
-        ref={forwardedRef}
-      />
-    )
-  })
-
-  MenuRadioGroup.displayName = RADIO_GROUP_NAME
-
-  /* -------------------------------------------------------------------------------------------------
-   * MenuRadioItem
-   * -----------------------------------------------------------------------------------------------*/
-
-  const RADIO_ITEM_NAME = 'MenuRadioItem'
-
-  const MenuRadioItemFrame = Menu.RadioItem
-
-  const MenuRadioItem = React.forwardRef<TamaguiElement, ScopedProps<MenuRadioItemProps>>(
-    (props, forwardedRef) => {
-      const { scope, ...radioItemProps } = props
-      return (
-        // @ts-ignore explanation: deeply nested types typescript limitation
-        <MenuRadioItemFrame
-          componentName={RADIO_ITEM_NAME}
-          scope={scope || DROPDOWN_MENU_CONTEXT}
-          {...radioItemProps}
-          ref={forwardedRef}
-        />
-      )
-    }
-  )
-
-  MenuRadioItem.displayName = RADIO_ITEM_NAME
-
-  /* -------------------------------------------------------------------------------------------------
-   * MenuItemIndicator
-   * -----------------------------------------------------------------------------------------------*/
-
-  const INDICATOR_NAME = 'MenuItemIndicator'
-
-  const MenuItemIndicatorFrame = Menu.ItemIndicator
-
-  const MenuItemIndicator = MenuItemIndicatorFrame.styleable<
-    ScopedProps<MenuItemIndicatorProps>
-  >((props, forwardedRef) => {
-    const { scope, ...itemIndicatorProps } = props
-    return (
-      <MenuItemIndicatorFrame
-        componentName={INDICATOR_NAME}
-        scope={scope || DROPDOWN_MENU_CONTEXT}
-        {...itemIndicatorProps}
-        ref={forwardedRef}
-      />
-    )
-  })
-
-  MenuItemIndicator.displayName = INDICATOR_NAME
-
-  /* -------------------------------------------------------------------------------------------------
-   * MenuSeparator
-   * -----------------------------------------------------------------------------------------------*/
-
-  const SEPARATOR_NAME = 'MenuSeparator'
-
-  const MenuSeparator = Menu.Separator
-
-  MenuSeparator.displayName = SEPARATOR_NAME
-
-  /* -------------------------------------------------------------------------------------------------
-   * MenuArrow
-   * -----------------------------------------------------------------------------------------------*/
-
-  const ARROW_NAME = 'MenuArrow'
-
-  const MenuArrow = React.forwardRef<TamaguiElement, ScopedProps<MenuArrowProps>>(
-    (props, forwardedRef) => {
-      const { scope, ...arrowProps } = props
-      return (
-        <Menu.Arrow
-          componentName={ARROW_NAME}
-          scope={scope || DROPDOWN_MENU_CONTEXT}
-          {...arrowProps}
-          ref={forwardedRef}
-        />
-      )
-    }
-  )
-
-  MenuArrow.displayName = ARROW_NAME
-
   /* -------------------------------------------------------------------------------------------------
    * MenuSub
    * -----------------------------------------------------------------------------------------------*/
 
   const DROPDOWN_MENU_SUB_NAME = 'MenuSub'
+
   const MenuSub = (props: ScopedProps<MenuSubProps>) => {
     const { scope, children, open: openProp, onOpenChange, defaultOpen, ...rest } = props
     const [open = false, setOpen] = useControllableState({
@@ -578,29 +520,6 @@ export function createNonNativeMenu(params: CreateBaseMenuProps) {
 
   MenuSub.displayName = DROPDOWN_MENU_SUB_NAME
 
-  /* -------------------------------------------------------------------------------------------------
-   * MenuSubTrigger
-   * -----------------------------------------------------------------------------------------------*/
-
-  const SUB_TRIGGER_NAME = 'MenuSubTrigger'
-
-  const MenuSubTrigger = View.styleable<ScopedProps<MenuSubTriggerProps>>(
-    (props, forwardedRef) => {
-      // TODO: having asChild will create a problem, find a fix for that
-      const { scope, asChild, ...subTriggerProps } = props
-      return (
-        <Menu.SubTrigger
-          componentName={SUB_TRIGGER_NAME}
-          scope={scope || DROPDOWN_MENU_CONTEXT}
-          {...subTriggerProps}
-          ref={forwardedRef}
-        />
-      )
-    }
-  )
-
-  MenuSubTrigger.displayName = SUB_TRIGGER_NAME
-
   /* -------------------------------------------------------------------------------------------------
    * MenuSubContent
    * -----------------------------------------------------------------------------------------------*/
@@ -622,8 +541,6 @@ export function createNonNativeMenu(params: CreateBaseMenuProps) {
           isWeb
             ? {
                 ...(props.style as object),
-                // re-namespace exposed content custom properties
-                // TODO: find a better way to do this, or maybe not do it at all
                 ...({
                   '--tamagui-menu-content-transform-origin':
                     'var(--tamagui-popper-transform-origin)',
@@ -643,34 +560,45 @@ export function createNonNativeMenu(params: CreateBaseMenuProps) {
 
   MenuSubContent.displayName = SUB_CONTENT_NAME
 
+  /* -------------------------------------------------------------------------------------------------
+   * MenuScrollView
+   * -----------------------------------------------------------------------------------------------*/
+
+  const MenuScrollView = styled(ScrollView, {
+    flexShrink: 1,
+    alignSelf: 'stretch',
+    showsHorizontalScrollIndicator: false,
+    showsVerticalScrollIndicator: false,
+
+    '$platform-web': {
+      maxHeight: 'var(--tamagui-menu-content-available-height)',
+    },
+  })
+
   /* -----------------------------------------------------------------------------------------------*/
 
-  const Root = MenuComp
-  const Trigger = MenuTrigger
-  const Portal = MenuPortal
-  const Content = MenuContent
-  const Group = MenuGroup
-  const Label = MenuLabel
-  const Item = MenuItem
-  const CheckboxItem = MenuCheckboxItem
-  const RadioGroup = MenuRadioGroup
-  const RadioItem = MenuRadioItem
-  const ItemIndicator = MenuItemIndicator
-  const Separator = MenuSeparator
-  const Arrow = MenuArrow
-  const Sub = MenuSub
-  const SubTrigger = MenuSubTrigger
-  const SubContent = MenuSubContent
-  const ItemTitle = MenuItemTitle
-  const ItemSubtitle = MenuItemSubTitle
-  const ItemImage = MenuItemImage
-  const ItemIcon = MenuItemIcon
+  // direct pass-through from base menu (preserves styleable)
+  const Group = Menu.Group
+  const Label = Menu.Label
+  const Item = Menu.Item
+  const CheckboxItem = Menu.CheckboxItem
+  const RadioGroup = Menu.RadioGroup
+  const RadioItem = Menu.RadioItem
+  const ItemIndicator = Menu.ItemIndicator
+  const Separator = Menu.Separator
+  const Arrow = Menu.Arrow
+  const SubTrigger = Menu.SubTrigger
+
+  const ItemTitle = Menu.ItemTitle
+  const ItemSubtitle = Menu.ItemSubtitle
+  const ItemImage = Menu.ItemImage
+  const ItemIcon = Menu.ItemIcon
 
   return withStaticProperties(MenuComp, {
-    Root,
-    Trigger,
-    Portal,
-    Content,
+    Root: MenuComp,
+    Trigger: MenuTrigger,
+    Portal: MenuPortal,
+    Content: MenuContent,
     Group,
     Label,
     Item,
@@ -680,13 +608,14 @@ export function createNonNativeMenu(params: CreateBaseMenuProps) {
     ItemIndicator,
     Separator,
     Arrow,
-    Sub,
+    Sub: MenuSub,
     SubTrigger,
-    SubContent,
+    SubContent: MenuSubContent,
     ItemTitle,
     ItemSubtitle,
     ItemImage,
     ItemIcon,
+    ScrollView: MenuScrollView,
   })
 }
 
@@ -702,6 +631,7 @@ export type {
   MenuProps,
   MenuRadioGroupProps,
   MenuRadioItemProps,
+  MenuScrollViewProps,
   MenuSubContentProps,
   MenuSubProps,
   MenuSubTriggerProps,