[Sheets] [Pt. 14] Portaling behaviors for nested dialogs (#5588)

Co-authored-by: Eric Bailey <git@esb.lol>
Co-authored-by: Samuel Newman <mozzius@protonmail.com>

src/components/Prompt.tsx

@@ -3,10 +3,10 @@ import {GestureResponderEvent, View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {isNative} from '#/platform/detection'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonColor, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
+import {PortalComponent} from '#/components/Portal'
 import {Text} from '#/components/Typography'
 
 export {
@@ -26,11 +26,11 @@ export function Outer({
   children,
   control,
   testID,
-  withoutPortal,
+  Portal,
 }: React.PropsWithChildren<{
   control: Dialog.DialogControlProps
   testID?: string
-  withoutPortal?: boolean
+  Portal?: PortalComponent
 }>) {
   const {gtMobile} = useBreakpoints()
   const titleId = React.useId()
@@ -41,11 +41,8 @@ export function Outer({
     [titleId, descriptionId],
   )
 
-  const Wrapper =
-    withoutPortal && isNative ? Dialog.OuterWithoutPortal : Dialog.Outer
-
   return (
-    <Wrapper control={control} testID={testID}>
+    <Dialog.Outer control={control} testID={testID} Portal={Portal}>
       <Context.Provider value={context}>
         <Dialog.ScrollableInner
           accessibilityLabelledBy={titleId}
@@ -56,7 +53,7 @@ export function Outer({
           {children}
         </Dialog.ScrollableInner>
       </Context.Provider>
-    </Wrapper>
+    </Dialog.Outer>
   )
 }
 
@@ -185,7 +182,7 @@ export function Basic({
   onConfirm,
   confirmButtonColor,
   showCancel = true,
-  withoutPortal,
+  Portal,
 }: React.PropsWithChildren<{
   control: Dialog.DialogOuterProps['control']
   title: string
@@ -202,13 +199,10 @@ export function Basic({
   onConfirm: (e: GestureResponderEvent) => void
   confirmButtonColor?: ButtonColor
   showCancel?: boolean
-  withoutPortal?: boolean
+  Portal?: PortalComponent
 }>) {
   return (
-    <Outer
-      control={control}
-      testID="confirmModal"
-      withoutPortal={withoutPortal}>
+    <Outer control={control} testID="confirmModal" Portal={Portal}>
       <TitleText>{title}</TitleText>
       <DescriptionText>{description}</DescriptionText>
       <Actions>