From aff755830fa807d9415e2da5104a4f7ad9c33af4 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Tue, 5 Mar 2024 14:22:38 -0600
Subject: [PATCH] Rename handlers to props

---
 src/components/Menu/index.tsx        | 18 +++---------------
 src/components/Menu/index.web.tsx    |  2 +-
 src/components/Menu/types.ts         | 12 ++++++++++--
 src/view/screens/Storybook/Menus.tsx |  4 ++--
 4 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
index f9d6fd8832..f46185592f 100644
--- a/src/components/Menu/index.tsx
+++ b/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<{}>) {
diff --git a/src/components/Menu/index.web.tsx b/src/components/Menu/index.web.tsx
index 88452c8939..c0f70a69a7 100644
--- a/src/components/Menu/index.web.tsx
+++ b/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>
diff --git a/src/components/Menu/types.ts b/src/components/Menu/types.ts
index a29ef16f9e..ac999a4358 100644
--- a/src/components/Menu/types.ts
+++ b/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
diff --git a/src/view/screens/Storybook/Menus.tsx b/src/view/screens/Storybook/Menus.tsx
index 65c48acf52..082fb2b6e1 100644
--- a/src/view/screens/Storybook/Menus.tsx
+++ b/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,