Clean up dialog types

src/view/com/Dialog/context.ts

@@ -0,0 +1,19 @@
+import React from 'react'
+import {DialogContextProps, DialogControlProps} from '#/view/com/Dialog/types'
+
+export const Context = React.createContext<DialogContextProps>({
+  close: () => {},
+})
+
+export function useDialogContext() {
+  return React.useContext(Context)
+}
+
+export function useDialogControl() {
+  const control = React.useRef<DialogControlProps>({
+    open: () => {},
+    close: () => {},
+  })
+
+  return control
+}

src/view/com/Dialog/index.tsx

@@ -5,36 +5,24 @@ import BottomSheet, {BottomSheetBackdrop} from '@gorhom/bottom-sheet'
 import {useTheme, atoms as a} from '#/alf'
 import {Portal} from '#/view/com/Portal'
 
-import {DialogProps, DialogControl} from '#/view/com/Dialog/types'
+import {
+  DialogOuterProps,
+  DialogControlProps,
+  DialogInnerProps,
+} from '#/view/com/Dialog/types'
+import {Context} from '#/view/com/Dialog/context'
 
-const Context = React.createContext<{
+export {useDialogControl} from '#/view/com/Dialog/context'
-  close: () => void
-}>({
-  close: () => {},
-})
-
-export function useDialogControl() {
-  const control = React.useRef<DialogControl>({
-    open: () => {},
-    close: () => {},
-  })
-
-  return control
-}
-
-export function useDialog() {
-  return React.useContext(Context)
-}
 
 export function Outer({
   control,
   onClose,
   children,
-}: React.PropsWithChildren<DialogProps>) {
+}: React.PropsWithChildren<DialogOuterProps>) {
   const t = useTheme()
   const sheet = React.useRef<BottomSheet>(null)
 
-  const open = React.useCallback<DialogControl['open']>((i = 0) => {
+  const open = React.useCallback<DialogControlProps['open']>((i = 0) => {
     sheet.current?.snapToIndex(i)
   }, [])
 
@@ -52,6 +40,8 @@ export function Outer({
     [open, close],
   )
 
+  const context = React.useMemo(() => ({close}), [close])
+
   return (
     <Portal>
       <BottomSheet
@@ -73,13 +63,13 @@ export function Outer({
         handleStyle={{display: 'none'}}
         onChange={() => {}}
         onClose={onClose}>
-        {children}
+        <Context.Provider value={context}>{children}</Context.Provider>
       </BottomSheet>
     </Portal>
   )
 }
 
-export function Inner(props: React.PropsWithChildren<{}>) {
+export function Inner(props: DialogInnerProps) {
   const t = useTheme()
   return (
     <View

src/view/com/Dialog/index.web.tsx

@@ -1,5 +1,5 @@
 import React, {useImperativeHandle} from 'react'
-import {View, TouchableWithoutFeedback, ViewStyle} from 'react-native'
+import {View, TouchableWithoutFeedback} from 'react-native'
 import {FocusScope} from '@tamagui/focus-scope'
 import Animated, {FadeInDown, FadeIn} from 'react-native-reanimated'
 
@@ -8,34 +8,18 @@ import {Text} from '#/view/com/Typography'
 import {Portal} from '#/view/com/Portal'
 import {Button} from '#/view/com/Button'
 
-import {DialogProps, DialogControl} from '#/view/com/Dialog/types'
+import {DialogOuterProps, DialogInnerProps} from '#/view/com/Dialog/types'
+import {Context, useDialogContext} from '#/view/com/Dialog/context'
+
+export {useDialogControl} from '#/view/com/Dialog/context'
 
 const stopPropagation = (e: any) => e.stopPropagation()
 
-const Context = React.createContext<{
-  close: () => void
-}>({
-  close: () => {},
-})
-
-export function useDialogControl() {
-  const control = React.useRef<DialogControl>({
-    open: () => {},
-    close: () => {},
-  })
-
-  return control
-}
-
-export function useDialog() {
-  return React.useContext(Context)
-}
-
 export function Outer({
   control,
   onClose,
   children,
-}: React.PropsWithChildren<DialogProps>) {
+}: React.PropsWithChildren<DialogOuterProps>) {
   const t = useTheme()
   const {gtMobile} = useBreakpoints()
   const [isOpen, setIsOpen] = React.useState(false)
@@ -127,10 +111,7 @@ export function Outer({
   )
 }
 
-export function Inner({
+export function Inner({children, style}: DialogInnerProps) {
-  children,
-  style,
-}: React.PropsWithChildren<{style?: ViewStyle}>) {
   const t = useTheme()
   const {gtMobile} = useBreakpoints()
   return (
@@ -164,7 +145,7 @@ export function Handle() {
 
 export function Close() {
   const t = useTheme()
-  const {close} = useDialog()
+  const {close} = useDialogContext()
   return (
     <View
       style={[

src/view/com/Dialog/types.ts

@@ -1,11 +1,18 @@
 import React from 'react'
+import type {ViewStyle} from 'react-native'
 
-export type DialogControl = {
+export type DialogContextProps = {
+  close: () => void
+}
+
+export type DialogControlProps = {
   open: (index?: number) => void
   close: () => void
 }
 
-export type DialogProps = {
+export type DialogOuterProps = {
-  control: React.RefObject<DialogControl>
+  control: React.RefObject<DialogControlProps>
   onClose?: () => void
 }
+
+export type DialogInnerProps = React.PropsWithChildren<{style?: ViewStyle}>

src/view/screens/DebugNew.tsx

@@ -332,7 +332,7 @@ function Dialogs() {
       </Button>
 
       <Dialog.Outer control={control}>
-        <Dialog.Inner>
+        <Dialog.Inner style={{width: 'auto'}}>
           <Dialog.Handle />
           <View style={[a.gap_md]}>
             <Button