Add controlled dropdown

src/components/Dialog/context.ts

@@ -21,7 +21,8 @@ export function useDialogControl(): DialogOuterProps['control'] {
     open: () => {},
     close: () => {},
   })
-  const {activeDialogs} = useDialogStateContext()
+  const {activeDialogs, openDialogs} = useDialogStateContext()
+  const isOpen = openDialogs.includes(id)
 
   React.useEffect(() => {
     activeDialogs.current.set(id, control)
@@ -31,14 +32,18 @@ export function useDialogControl(): DialogOuterProps['control'] {
     }
   }, [id, activeDialogs])
 
-  return {
-    id,
-    ref: control,
-    open: () => {
-      control.current.open()
-    },
-    close: cb => {
-      control.current.close(cb)
-    },
-  }
+  return React.useMemo<DialogOuterProps['control']>(
+    () => ({
+      id,
+      ref: control,
+      isOpen,
+      open: () => {
+        control.current.open()
+      },
+      close: cb => {
+        control.current.close(cb)
+      },
+    }),
+    [id, control, isOpen],
+  )
 }

src/components/Dialog/types.ts

@@ -22,6 +22,7 @@ export type DialogControlRefProps = {
 export type DialogControlProps = DialogControlRefProps & {
   id: string
   ref: React.RefObject<DialogControlRefProps>
+  isOpen: boolean
 }
 
 export type DialogContextProps = {

src/components/Menu/index.tsx

@@ -18,6 +18,10 @@ import {
 
 export {useDialogControl as useMenuControl} from '#/components/Dialog'
 
+export function useMemoControlContext() {
+  return React.useContext(Context)
+}
+
 export function Root({
   children,
   control,
@@ -157,7 +161,7 @@ export function Group({children, style}: GroupProps) {
       {React.Children.toArray(children).map((child, i) => {
         // ignore null children, like Dividers
         return React.isValidElement(child) && child.props.children ? (
-          <React.Fragment>
+          <React.Fragment key={i}>
             {i > 0 ? (
               <View style={[a.border_b, t.atoms.border_contrast_low]} />
             ) : null}

src/components/Menu/index.web.tsx

@@ -18,34 +18,60 @@ import {
 import {Context} from '#/components/Menu/context'
 
 export function useMenuControl(): Dialog.DialogControlProps {
-  return {
-    id: '',
-    // @ts-ignore
-    ref: null,
-    open: () => {
-      throw new Error(`Menu controls are only available on native platforms`)
-    },
-    close: () => {
-      throw new Error(`Menu controls are only available on native platforms`)
-    },
-  }
+  const id = React.useId()
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  return React.useMemo(
+    () => ({
+      id,
+      ref: {current: null},
+      isOpen,
+      open() {
+        setIsOpen(true)
+      },
+      close() {
+        setIsOpen(false)
+      },
+    }),
+    [id, isOpen, setIsOpen],
+  )
+}
+
+export function useMemoControlContext() {
+  return React.useContext(Context)
 }
 
 export function Root({
   children,
+  control,
 }: React.PropsWithChildren<{
   control?: Dialog.DialogOuterProps['control']
 }>) {
+  const defaultControl = useMenuControl()
   const context = React.useMemo<ContextType>(
     () => ({
-      control: null,
+      control: control || defaultControl,
     }),
-    [],
+    [control, defaultControl],
+  )
+  const onOpenChange = React.useCallback(
+    (open: boolean) => {
+      if (context.control.isOpen && !open) {
+        context.control.close()
+      } else if (!context.control.isOpen && open) {
+        context.control.open()
+      }
+    },
+    [context.control],
   )
 
   return (
     <Context.Provider value={context}>
-      <DropdownMenu.Root>{children}</DropdownMenu.Root>
+      <DropdownMenu.Root
+        open={context.control.isOpen}
+        onOpenChange={onOpenChange}>
+        {children}
+      </DropdownMenu.Root>
     </Context.Provider>
   )
 }
@@ -56,6 +82,7 @@ export function Trigger({
 }: ViewStyleProp & {
   children(props: TriggerChildProps): React.ReactNode
 }) {
+  const {control} = React.useContext(Context)
   const {
     state: hovered,
     onIn: onMouseEnter,
@@ -69,13 +96,16 @@ export function Trigger({
         onFocus={onFocus}
         onBlur={onBlur}
         style={flatten([style, web({outline: 0})])}
+        onPointerDown={() => {
+          control.open()
+        }}
         {...web({
           onMouseEnter,
           onMouseLeave,
         })}>
         {children({
           isNative: false,
-          control: null,
+          control,
           state: {
             hovered,
             focused,
@@ -94,7 +124,7 @@ export function Outer({children}: React.PropsWithChildren<{}>) {
   return (
     <DropdownMenu.Portal>
       <DropdownMenu.Content sideOffset={5} loop>
-        <View style={[a.rounded_sm, t.atoms.bg_contrast_50, {padding: 6}]}>
+        <View style={[a.rounded_sm, a.p_xs, t.atoms.bg_contrast_50]}>
           {children}
         </View>
 
@@ -122,6 +152,7 @@ export function Item({children, label, onPress}: ItemProps) {
         className="radix-dropdown-item"
         accessibilityHint=""
         accessibilityLabel={label}
+        onPress={onPress}
         onFocus={onFocus}
         onBlur={onBlur}
         style={flatten([
@@ -129,7 +160,7 @@ export function Item({children, label, onPress}: ItemProps) {
           a.align_center,
           a.gap_sm,
           a.py_sm,
-          a.px_md,
+          a.px_sm,
           a.rounded_xs,
           {minHeight: 36},
           web({outline: 0}),
@@ -181,12 +212,13 @@ export function Divider() {
   const t = useTheme()
   return (
     <DropdownMenu.Separator
-      style={{
-        height: 1,
-        backgroundColor: t.atoms.bg_contrast_100.backgroundColor,
-        marginTop: 6,
-        marginBottom: 6,
-      }}
+      style={flatten([
+        a.my_xs,
+        t.atoms.bg_contrast_100,
+        {
+          height: 1,
+        },
+      ])}
     />
   )
 }

src/components/Menu/types.ts

@@ -5,7 +5,7 @@ import * as Dialog from '#/components/Dialog'
 import {TextStyleProp, ViewStyleProp} from '#/alf'
 
 export type ContextType = {
-  control: Dialog.DialogOuterProps['control'] | null
+  control: Dialog.DialogOuterProps['control']
 }
 
 export type TriggerChildProps =
@@ -30,7 +30,7 @@ export type TriggerChildProps =
     }
   | {
       isNative: false
-      control: null
+      control: Dialog.DialogOuterProps['control']
       state: {
         hovered: boolean
         focused: boolean

src/view/screens/Storybook/Menus.tsx

@@ -1,22 +1,38 @@
 import React from 'react'
 import {View} from 'react-native'
 
-import {atoms as a} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 import {Text} from '#/components/Typography'
 import * as Menu from '#/components/Menu'
 import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2'
 // import {useDialogStateControlContext} from '#/state/dialogs'
 
 export function Menus() {
+  const t = useTheme()
+  const menuControl = Menu.useMenuControl()
   // const {closeAllDialogs} = useDialogStateControlContext()
 
   return (
     <View style={[a.gap_md]}>
       <View style={[a.flex_row, a.align_start]}>
-        <Menu.Root>
+        <Menu.Root control={menuControl}>
           <Menu.Trigger style={[a.flex_1]}>
-            {({handlers}) => {
-              return <Text {...handlers}>Open</Text>
+            {({state, handlers}) => {
+              return (
+                <Text
+                  {...handlers}
+                  style={[
+                    a.py_sm,
+                    a.px_md,
+                    a.rounded_sm,
+                    t.atoms.bg_contrast_50,
+                    (state.hovered || state.focused || state.pressed) && [
+                      t.atoms.bg_contrast_200,
+                    ],
+                  ]}>
+                  Open
+                </Text>
+              )
             }}
           </Menu.Trigger>
 
@@ -29,7 +45,9 @@ export function Menus() {
 
               <Menu.Divider />
 
-              <Menu.Item label="Another item" onPress={() => {}}>
+              <Menu.Item
+                label="Another item"
+                onPress={() => menuControl.close()}>
                 <Menu.ItemText>Another item</Menu.ItemText>
               </Menu.Item>
             </Menu.Group>