Rename handlers to props

src/components/Menu/index.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import {View, Pressable} from 'react-native'
 import flattenReactChildren from 'react-keyed-flatten-children'
 
-import {logger} from '#/logger'
 import {atoms as a, useTheme} from '#/alf'
 import * as Dialog from '#/components/Dialog'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
@@ -50,7 +49,7 @@ export function Trigger({children, label}: TriggerProps) {
     onOut: onPressOut,
   } = useInteractionState()
 
-  const child = children({
+  return children({
     isNative: true,
     control,
     state: {
@@ -58,26 +57,15 @@ export function Trigger({children, label}: TriggerProps) {
       focused,
       pressed,
     },
-    handlers: {
+    props: {
       onPress: control.open,
       onFocus,
       onBlur,
       onPressIn,
       onPressOut,
+      accessibilityLabel: label,
     },
   })
-
-  if (!React.isValidElement(child)) {
-    logger.error(
-      'Menu.Trigger children must be a function that returns a valid element',
-    )
-    return null
-  }
-
-  return React.cloneElement(child, {
-    ...child.props,
-    accessibilityLabel: label,
-  })
 }
 
 export function Outer({children}: React.PropsWithChildren<{}>) {

src/components/Menu/index.web.tsx

@@ -108,7 +108,7 @@ export function Trigger({children, label, style}: TriggerProps) {
             focused,
             pressed: false,
           },
-          handlers: {},
+          props: {},
         })}
       </Pressable>
     </DropdownMenu.Trigger>

src/components/Menu/types.ts

@@ -25,12 +25,20 @@ export type TriggerChildProps =
         focused: boolean
         pressed: boolean
       }
-      handlers: {
+      /**
+       * We don't necessarily know what these will be spread on to, so we
+       * should add props one-by-one.
+       *
+       * On web, these properties are applied to a parent `Pressable`, so this
+       * object is empty.
+       */
+      props: {
         onPress: () => void
         onFocus: () => void
         onBlur: () => void
         onPressIn: () => void
         onPressOut: () => void
+        accessibilityLabel: string
       }
     }
   | {
@@ -44,7 +52,7 @@ export type TriggerChildProps =
          */
         pressed: false
       }
-      handlers: {}
+      props: {}
     }
 
 // TODO test id

src/view/screens/Storybook/Menus.tsx

@@ -17,10 +17,10 @@ export function Menus() {
       <View style={[a.flex_row, a.align_start]}>
         <Menu.Root control={menuControl}>
           <Menu.Trigger label="Open basic menu" style={[a.flex_1]}>
-            {({state, handlers}) => {
+            {({state, props}) => {
               return (
                 <Text
-                  {...handlers}
+                  {...props}
                   style={[
                     a.py_sm,
                     a.px_md,