remove Dialog.Handle uses

src/components/Dialog/index.tsx

@@ -21,7 +21,6 @@ import {
   DialogOuterProps,
 } from '#/components/Dialog/types'
 import {createInput} from '#/components/forms/TextField'
-import {FullWindowOverlay} from '#/components/FullWindowOverlay'
 import {Portal} from '#/components/Portal'
 
 export {useDialogContext, useDialogControl} from '#/components/Dialog/context'
@@ -93,53 +92,47 @@ export function Outer({
     [open, close],
   )
 
-  React.useEffect(() => {
-    return () => {
-      setDialogIsOpen(control.id, false)
-    }
-  }, [control.id, setDialogIsOpen])
+  // @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 (
     isOpen && (
       <Portal>
-        <FullWindowOverlay>
-          <View
-            // iOS
-            accessibilityViewIsModal
-            style={[a.absolute, a.inset_0]}
-            testID={testID}
-            onTouchMove={() => Keyboard.dismiss()}>
-            <BottomSheet
-              enablePanDownToClose
-              keyboardBehavior="interactive"
-              android_keyboardInputMode="adjustResize"
-              keyboardBlurBehavior="restore"
-              topInset={insets.top}
-              ref={sheet}
-              backgroundStyle={{backgroundColor: 'transparent'}}
-              handleIndicatorStyle={{backgroundColor: t.palette.primary_500}}
-              handleStyle={{display: 'none'}}
-              onClose={onCloseAnimationComplete}>
-              <Context.Provider value={context}>
-                <View
-                  style={[
-                    a.absolute,
-                    a.inset_0,
-                    t.atoms.bg,
-                    {
-                      borderTopLeftRadius: 40,
-                      borderTopRightRadius: 40,
-                      height: Dimensions.get('window').height * 2,
-                    },
-                  ]}
-                />
-                {children}
-              </Context.Provider>
-            </BottomSheet>
-          </View>
-        </FullWindowOverlay>
+        <View
+          // iOS
+          accessibilityViewIsModal
+          style={[a.absolute, a.inset_0]}
+          testID={testID}
+          onTouchMove={() => Keyboard.dismiss()}>
+          <BottomSheet
+            topInset={insets.top}
+            bottomInset={insets.bottom}
+            ref={sheet}
+            // handleIndicatorStyle={{backgroundColor: t.palette.primary_500}} // @TODO DIALOG REFACTOR need to add this to lib!
+            onClose={onCloseAnimationComplete}>
+            <Context.Provider value={context}>
+              <View
+                style={[
+                  a.absolute,
+                  a.inset_0,
+                  t.atoms.bg,
+                  {
+                    borderTopLeftRadius: 40,
+                    borderTopRightRadius: 40,
+                    height: Dimensions.get('window').height * 2,
+                  },
+                ]}
+              />
+              {children}
+            </Context.Provider>
+          </BottomSheet>
+        </View>
       </Portal>
     )
   )

src/components/LikesDialog.tsx

@@ -1,20 +1,19 @@
-import React, {useMemo, useCallback} from 'react'
+import React, {useCallback, useMemo} from 'react'
 import {ActivityIndicator, FlatList, View} from 'react-native'
+import {AppBskyFeedGetLikes as GetLikes} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {AppBskyFeedGetLikes as GetLikes} from '@atproto/api'
 
-import {useResolveUriQuery} from '#/state/queries/resolve-uri'
-import {useLikedByQuery} from '#/state/queries/post-liked-by'
 import {cleanError} from '#/lib/strings/errors'
 import {logger} from '#/logger'
-
-import {atoms as a, useTheme} from '#/alf'
-import {Text} from '#/components/Typography'
-import * as Dialog from '#/components/Dialog'
-import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
+import {useLikedByQuery} from '#/state/queries/post-liked-by'
+import {useResolveUriQuery} from '#/state/queries/resolve-uri'
 import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard'
+import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
+import {atoms as a, useTheme} from '#/alf'
+import * as Dialog from '#/components/Dialog'
 import {Loader} from '#/components/Loader'
+import {Text} from '#/components/Typography'
 
 interface LikesDialogProps {
   control: Dialog.DialogOuterProps['control']
@@ -24,8 +23,6 @@ interface LikesDialogProps {
 export function LikesDialog(props: LikesDialogProps) {
   return (
     <Dialog.Outer control={props.control}>
-      <Dialog.Handle />
-
       <LikesDialogInner {...props} />
     </Dialog.Outer>
   )

src/components/Menu/index.tsx

@@ -4,7 +4,7 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import flattenReactChildren from 'react-keyed-flatten-children'
 
-import {isNative} from 'platform/detection'
+import {isNative} from '#/platform/detection'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
@@ -85,8 +85,6 @@ export function Outer({
 
   return (
     <Dialog.Outer control={context.control}>
-      <Dialog.Handle />
-
       {/* Re-wrap with context since Dialogs are portal-ed to root */}
       <Context.Provider value={context}>
         <Dialog.ScrollableInner label="Menu TODO">

src/components/NewskieDialog.tsx

@@ -5,12 +5,12 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {differenceInSeconds} from 'date-fns'
 
+import {HITSLOP_10} from '#/lib/constants'
 import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo'
+import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {isNative} from '#/platform/detection'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
-import {HITSLOP_10} from 'lib/constants'
-import {sanitizeDisplayName} from 'lib/strings/display-names'
-import {useSession} from 'state/session'
+import {useSession} from '#/state/session'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
@@ -78,7 +78,6 @@ export function NewskieDialog({
       </Button>
 
       <Dialog.Outer control={control}>
-        <Dialog.Handle />
         <Dialog.ScrollableInner
           label={_(msg`New user info dialog`)}
           style={[{width: 'auto', maxWidth: 400, minWidth: 200}]}>

src/components/Prompt.tsx

@@ -41,8 +41,6 @@ export function Outer({
   return (
     <Dialog.Outer control={control} testID={testID}>
       <Context.Provider value={context}>
-        <Dialog.Handle />
-
         <Dialog.ScrollableInner
           accessibilityLabelledBy={titleId}
           accessibilityDescribedBy={descriptionId}

src/components/ReportDialog/index.tsx

@@ -24,8 +24,6 @@ import {ReportDialogProps} from './types'
 export function ReportDialog(props: ReportDialogProps) {
   return (
     <Dialog.Outer control={props.control}>
-      <Dialog.Handle />
-
       <ReportDialogInner {...props} />
     </Dialog.Outer>
   )

src/components/StarterPack/QrCodeDialog.tsx

@@ -149,7 +149,6 @@ export function QrCodeDialog({
 
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
       <Dialog.ScrollableInner
         label={_(msg`Create a QR code for a starter pack`)}>
         <View style={[a.flex_1, a.align_center, a.gap_5xl]}>

src/components/StarterPack/ShareDialog.tsx

@@ -6,14 +6,14 @@ import {AppBskyGraphDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {saveImageToMediaLibrary} from '#/lib/media/manip'
+import {shareUrl} from '#/lib/sharing'
+import {logEvent} from '#/lib/statsig/statsig'
+import {getStarterPackOgCard} from '#/lib/strings/starter-pack'
 import {logger} from '#/logger'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {saveImageToMediaLibrary} from 'lib/media/manip'
-import {shareUrl} from 'lib/sharing'
-import {logEvent} from 'lib/statsig/statsig'
-import {getStarterPackOgCard} from 'lib/strings/starter-pack'
-import {isNative, isWeb} from 'platform/detection'
-import * as Toast from 'view/com/util/Toast'
+import {isNative, isWeb} from '#/platform/detection'
+import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {DialogControlProps} from '#/components/Dialog'
@@ -84,7 +84,6 @@ function ShareDialogInner({
 
   return (
     <>
-      <Dialog.Handle />
       <Dialog.ScrollableInner label={_(msg`Share link dialog`)}>
         {!imageLoaded || !link ? (
           <View style={[a.p_xl, a.align_center]}>

src/components/StarterPack/Wizard/WizardEditListDialog.tsx

@@ -7,9 +7,9 @@ import {BottomSheetFlatListMethods} from '@discord/bottom-sheet'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
-import {isWeb} from 'platform/detection'
-import {useSession} from 'state/session'
+import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
+import {isWeb} from '#/platform/detection'
+import {useSession} from '#/state/session'
 import {WizardAction, WizardState} from '#/screens/StarterPack/Wizard/State'
 import {atoms as a, native, useTheme, web} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
@@ -80,7 +80,6 @@ export function WizardEditListDialog({
       control={control}
       testID="newChatDialog"
       nativeOptions={{sheet: {snapPoints: ['95%']}}}>
-      <Dialog.Handle />
       <Dialog.InnerFlatList
         ref={listRef}
         data={getData()}

src/components/TagMenu/index.tsx

@@ -84,8 +84,6 @@ export function TagMenu({
       {children}
 
       <Dialog.Outer control={control}>
-        <Dialog.Handle />
-
         <Dialog.Inner label={_(msg`Tag menu: ${displayTag}`)}>
           {isPreferencesLoading ? (
             <View style={[a.w_full, a.align_center]}>

src/components/WhoCanReply.tsx

@@ -170,7 +170,6 @@ function WhoCanReplyDialog({
   const {_} = useLingui()
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
       <Dialog.ScrollableInner
         label={_(msg`Dialog: adjust who can interact with this post`)}
         style={[{width: 'auto', maxWidth: 400, minWidth: 200}]}>

src/components/dialogs/BirthDateSettings.tsx

@@ -30,8 +30,6 @@ export function BirthDateSettingsDialog({
 
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
-
       <Dialog.ScrollableInner label={_(msg`My Birthday`)}>
         <View style={[a.gap_sm, a.pb_lg]}>
           <Text style={[a.text_2xl, a.font_bold]}>

src/components/dialogs/Embed.tsx

@@ -27,7 +27,6 @@ type EmbedDialogProps = {
 let EmbedDialog = ({control, ...rest}: EmbedDialogProps): React.ReactNode => {
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
       <EmbedDialogInner {...rest} />
     </Dialog.Outer>
   )

src/components/dialogs/EmbedConsent.tsx

@@ -49,8 +49,6 @@ export function EmbedConsentDialog({
 
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
-
       <Dialog.ScrollableInner
         label={_(msg`External Media`)}
         style={[gtMobile ? {width: 'auto', maxWidth: 400} : a.w_full]}>

src/components/dialogs/GifSelect.tsx

@@ -61,7 +61,6 @@ export function GifSelectDialog({
       control={control}
       nativeOptions={{sheet: {snapPoints: ['100%']}}}
       onClose={onClose}>
-      <Dialog.Handle />
       <ErrorBoundary renderError={renderErrorBoundary}>
         <GifList control={control} onSelectGif={onSelectGif} />
       </ErrorBoundary>

src/components/dialogs/MutedWords.tsx

@@ -39,7 +39,6 @@ export function MutedWordsDialog() {
   const {mutedWordsDialogControl: control} = useGlobalDialogsControlContext()
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
       <MutedWordsInner />
     </Dialog.Outer>
   )

src/components/dialogs/PostInteractionSettingsDialog.tsx

@@ -61,7 +61,6 @@ export function PostInteractionSettingsControlledDialog({
   const {_} = useLingui()
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
       <Dialog.ScrollableInner
         label={_(msg`Edit post interaction settings`)}
         style={[{maxWidth: 500}, a.w_full]}>
@@ -96,7 +95,6 @@ export function PostInteractionSettingsDialog(
 ) {
   return (
     <Dialog.Outer control={props.control}>
-      <Dialog.Handle />
       <PostInteractionSettingsDialogControlledInner {...props} />
     </Dialog.Outer>
   )

src/components/dialogs/Signin.tsx

@@ -18,7 +18,6 @@ export function SigninDialog() {
   const {signinDialogControl: control} = useGlobalDialogsControlContext()
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
       <SigninDialogInner control={control} />
     </Dialog.Outer>
   )

src/components/dialogs/SwitchAccount.tsx

@@ -42,8 +42,6 @@ export function SwitchAccountDialog({
 
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
-
       <Dialog.ScrollableInner label={_(msg`Switch Account`)}>
         <View style={[a.gap_lg]}>
           <Text style={[a.text_2xl, a.font_bold]}>

src/components/dialogs/nuxs/NeueTypography.tsx

@@ -43,8 +43,6 @@ export function NeueTypography() {
 
   return (
     <Dialog.Outer control={control} onClose={onClose}>
-      <Dialog.Handle />
-
       <Dialog.ScrollableInner label={_(msg`Introducing new font settings`)}>
         <View style={[a.gap_xl]}>
           <View style={[a.gap_md]}>

src/components/dms/MessagesNUX.tsx

@@ -39,7 +39,6 @@ export function MessagesNUX() {
 
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
       <DialogInner chatDeclation={profile.associated?.chat} />
     </Dialog.Outer>
   )

src/components/dms/ReportDialog.tsx

@@ -44,7 +44,6 @@ let ReportDialog = ({
     <Dialog.Outer
       control={control}
       nativeOptions={isAndroid ? {sheet: {snapPoints: ['100%']}} : {}}>
-      <Dialog.Handle />
       <Dialog.ScrollableInner label={_(msg`Report this message`)}>
         <DialogInner params={params} />
         <Dialog.Close />

src/components/forms/DateField/index.tsx

@@ -57,7 +57,6 @@ export function DateField({
         accessibilityHint={accessibilityHint}
       />
       <Dialog.Outer control={control} testID={testID}>
-        <Dialog.Handle />
         <Dialog.Inner label={label}>
           <View style={a.gap_lg}>
             <View style={[a.relative, a.w_full, a.align_center]}>

src/components/intents/VerifyEmailIntentDialog.tsx

@@ -3,7 +3,7 @@ import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {useAgent, useSession} from 'state/session'
+import {useAgent, useSession} from '#/state/session'
 import {atoms as a} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
@@ -17,7 +17,6 @@ export function VerifyEmailIntentDialog() {
 
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
       <Inner control={control} />
     </Dialog.Outer>
   )

src/components/moderation/LabelsOnMeDialog.tsx

@@ -31,8 +31,6 @@ export interface LabelsOnMeDialogProps {
 export function LabelsOnMeDialog(props: LabelsOnMeDialogProps) {
   return (
     <Dialog.Outer control={props.control}>
-      <Dialog.Handle />
-
       <LabelsOnMeDialogInner {...props} />
     </Dialog.Outer>
   )

src/components/moderation/ModerationDetailsDialog.tsx

@@ -26,7 +26,6 @@ export interface ModerationDetailsDialogProps {
 export function ModerationDetailsDialog(props: ModerationDetailsDialogProps) {
   return (
     <Dialog.Outer control={props.control}>
-      <Dialog.Handle />
       <ModerationDetailsDialogInner {...props} />
     </Dialog.Outer>
   )

src/screens/Messages/Conversation/ChatDisabled.tsx

@@ -54,7 +54,6 @@ function AppealDialog() {
       </Button>
 
       <Dialog.Outer control={control}>
-        <Dialog.Handle />
         <DialogInner />
       </Dialog.Outer>
     </>

src/screens/Onboarding/StepProfile/index.tsx

@@ -286,7 +286,6 @@ export function StepProfile() {
       </View>
 
       <Dialog.Outer control={creatorControl}>
-        <Dialog.Handle />
         <Dialog.Inner
           label="Avatar creator"
           style={[

src/view/com/auth/server-input/index.tsx

@@ -70,8 +70,6 @@ export function ServerInputDialog({
       control={control}
       nativeOptions={{sheet: {snapPoints: ['100%']}}}
       onClose={onClose}>
-      <Dialog.Handle />
-
       <Dialog.ScrollableInner
         accessibilityDescribedBy="dialog-description"
         accessibilityLabelledBy="dialog-title">

src/view/com/composer/GifAltText.tsx

@@ -99,7 +99,6 @@ export function GifAltText({
       <Dialog.Outer
         control={control}
         nativeOptions={isAndroid ? {sheet: {snapPoints: ['100%']}} : {}}>
-        <Dialog.Handle />
         <AltTextInner
           onSubmit={onPressSubmit}
           link={link}

src/view/com/composer/photos/ImageAltTextDialog.tsx

@@ -22,8 +22,6 @@ type Props = {
 export const ImageAltTextDialog = (props: Props): React.ReactNode => {
   return (
     <Dialog.Outer control={props.control}>
-      <Dialog.Handle />
-
       <ImageAltTextInner {...props} />
     </Dialog.Outer>
   )

src/view/com/composer/videos/SubtitleDialog.tsx

@@ -59,7 +59,6 @@ export function SubtitleDialogBtn(props: Props) {
       <Dialog.Outer
         control={control}
         nativeOptions={isAndroid ? {sheet: {snapPoints: ['60%']}} : {}}>
-        <Dialog.Handle />
         <SubtitleDialogInner {...props} />
       </Dialog.Outer>
     </View>

src/view/com/util/post-ctrls/RepostButton.tsx

@@ -87,7 +87,6 @@ let RepostButton = ({
         ) : undefined}
       </Button>
       <Dialog.Outer control={dialogControl}>
-        <Dialog.Handle />
         <Dialog.Inner label={_(msg`Repost or quote post`)}>
           <View style={a.gap_xl}>
             <View style={a.gap_xs}>

src/view/screens/Settings/DisableEmail2FADialog.tsx

@@ -78,8 +78,6 @@ export function DisableEmail2FADialog({
 
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
-
       <Dialog.ScrollableInner
         accessibilityDescribedBy="dialog-description"
         accessibilityLabelledBy="dialog-title">

src/view/screens/Settings/ExportCarDialog.tsx

@@ -52,8 +52,6 @@ export function ExportCarDialog({
 
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
-
       <Dialog.ScrollableInner
         accessibilityDescribedBy="dialog-description"
         accessibilityLabelledBy="dialog-title">

src/view/screens/Storybook/Dialogs.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 import {View} from 'react-native'
 import {useNavigation} from '@react-navigation/native'
 
+import {NavigationProp} from '#/lib/routes/types'
 import {useDialogStateControlContext} from '#/state/dialogs'
-import {NavigationProp} from 'lib/routes/types'
 import {atoms as a} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
@@ -179,8 +179,6 @@ export function Dialogs() {
       </Prompt.Outer>
 
       <Dialog.Outer control={basic}>
-        <Dialog.Handle />
-
         <Dialog.Inner label="test">
           <H3 nativeID="dialog-title">Dialog</H3>
           <P nativeID="dialog-description">A basic dialog</P>
@@ -190,8 +188,6 @@ export function Dialogs() {
       <Dialog.Outer
         control={scrollable}
         nativeOptions={{sheet: {snapPoints: ['100%']}}}>
-        <Dialog.Handle />
-
         <Dialog.ScrollableInner
           accessibilityDescribedBy="dialog-description"
           accessibilityLabelledBy="dialog-title">
@@ -230,8 +226,6 @@ export function Dialogs() {
       </Dialog.Outer>
 
       <Dialog.Outer control={testDialog}>
-        <Dialog.Handle />
-
         <Dialog.ScrollableInner
           accessibilityDescribedBy="dialog-description"
           accessibilityLabelledBy="dialog-title">
@@ -356,8 +350,6 @@ export function Dialogs() {
 
       {shouldRenderUnmountTest && (
         <Dialog.Outer control={unmountTestDialog}>
-          <Dialog.Handle />
-
           <Dialog.Inner label="test">
             <H3 nativeID="dialog-title">Unmount Test Dialog</H3>
             <P nativeID="dialog-description">Will unmount in about 5 seconds</P>