[Sheets] [Pt. 4] Convert Pressable in Menu (WIP) (#5562)

src/components/Dialog/index.tsx

@@ -89,20 +89,12 @@ export function Outer({
     [open, close],
   )
 
-  // @TODO DIALOG REFACTOR - what is this? rm i think?
-  // React.useEffect(() => {
-  //   return () => {
-  //     setDialogIsOpen(control.id, false)
-  //   }
-  // }, [control.id, setDialogIsOpen])
-
   const context = React.useMemo(() => ({close}), [close])
 
   return (
     <Portal>
       <Context.Provider value={context}>
         <BlueskyBottomSheetView
-          // handleIndicatorStyle={{backgroundColor: t.palette.primary_500}} // @TODO DIALOG REFACTOR need to add this to lib!*/
           ref={ref}
           topInset={30}
           bottomInset={insets.bottom}

src/components/Menu/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import {Pressable, StyleProp, View, ViewStyle} from 'react-native'
+import {StyleProp, View, ViewStyle} from 'react-native'
+import {BlueskyBottomSheetPressable as Pressable} from '@haileyok/bluesky-bottom-sheet'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import flattenReactChildren from 'react-keyed-flatten-children'
@@ -102,7 +103,11 @@ export function Outer({
 export function Item({children, label, style, onPress, ...rest}: ItemProps) {
   const t = useTheme()
   const {control} = React.useContext(Context)
-  const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
+  const {
+    state: focused,
+    onIn: onHoverIn,
+    onOut: onHoverOut,
+  } = useInteractionState()
   const {
     state: pressed,
     onIn: onPressIn,
@@ -115,14 +120,9 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
       accessibilityHint=""
       accessibilityLabel={label}
       onPress={e => {
+        control?.close()
         onPress(e)
-
-        if (!e.defaultPrevented) {
-          control?.close()
-        }
       }}
-      onFocus={onFocus}
-      onBlur={onBlur}
       onPressIn={e => {
         onPressIn()
         rest.onPressIn?.(e)
@@ -131,6 +131,8 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
         onPressOut()
         rest.onPressOut?.(e)
       }}
+      onHoverIn={onHoverIn}
+      onHoverOut={onHoverOut}
       style={[
         a.flex_row,
         a.align_center,

src/components/Menu/types.ts

@@ -4,6 +4,8 @@ import {
   GestureResponderEvent,
   PressableProps,
 } from 'react-native'
+import {PressableEvent} from 'react-native-gesture-handler/lib/typescript/components/Pressable/PressableProps'
+import {BueskyBottomSheetPressableProps} from '@haileyok/bluesky-bottom-sheet'
 
 import {TextStyleProp, ViewStyleProp} from '#/alf'
 import * as Dialog from '#/components/Dialog'
@@ -87,10 +89,10 @@ export type TriggerChildProps =
     }
 
 export type ItemProps = React.PropsWithChildren<
-  Omit<PressableProps, 'style'> &
+  Omit<BueskyBottomSheetPressableProps, 'style'> &
     ViewStyleProp & {
       label: string
-      onPress: (e: GestureResponderEvent) => void
+      onPress: (e: PressableEvent | GestureResponderEvent) => void
     }
 >