Function MenuSub

packages/ui/src/menu.tsx:700–736

}

const MenuSub: React.FC<MenuSub> = props => {
  const { children, open = false, onOpenChange } = props
  const parentMenuContext = useMenuContext()
  const [trigger, setTrigger] = React.useState<MenuSubTriggerElement | null>(null)
  const [content, setContent] = React.useState<MenuContentElement | null>(null)
  const handleOpenChange = useCallbackRef(onOpenChange)

  // Prevent the parent menu from reopening with open submenus.
  React.useEffect(() => {
    if (parentMenuContext.open === false) handleOpenChange(false)
    return () => handleOpenChange(false)
  }, [parentMenuContext.open, handleOpenChange])

  return (
    <Popper>
      <MenuContext.Provider
        value={{
          open,
          onOpenChange: handleOpenChange,
          content,
          onContentChange: setContent,
        }}
      >
        <MenuSubContext.Provider
          value={{
            contentId: useId(),
            triggerId: useId(),
            trigger,
            onTriggerChange: setTrigger,
          }}
        >
          {children}
        </MenuSubContext.Provider>
      </MenuContext.Provider>
    </Popper>
  )
}

MenuSub.displayName = SUB_NAME