Move Dialogs to Radix (#5648)

* Use Redix FocusTrap (#5638)

* Use Redix FocusTrap

* force resolutions on radix libs

* add focus guards

* use @radix-ui/dismissable-layer for escape handling

* fix banner menu keypress by using `Pressable`

* add menu in dialog example to storybook

---------

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

* use DismissableLayer/FocusScope for composer

* fix storybook dialog

* thread Portal through Prompt and avatar/banner

* fix dialog style regression

* remove tamagui

---------

Co-authored-by: Eric Bailey <git@esb.lol>

1 files changed, 53 insertions, 0 deletions

diff --git a/src/view/screens/Storybook/Dialogs.tsx b/src/view/screens/Storybook/Dialogs.tsx
index a0a2a2755..e6fcef555 100644
--- a/src/view/screens/Storybook/Dialogs.tsx
+++ b/src/view/screens/Storybook/Dialogs.tsx
@@ -7,14 +7,19 @@ import {useDialogStateControlContext} from '#/state/dialogs'
 import {atoms as a} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
+import * as Menu from '#/components/Menu'
+import {createPortalGroup} from '#/components/Portal'
 import * as Prompt from '#/components/Prompt'
 import {H3, P, Text} from '#/components/Typography'
 import {PlatformInfo} from '../../../../modules/expo-bluesky-swiss-army'
 
+const Portal = createPortalGroup()
+
 export function Dialogs() {
   const scrollable = Dialog.useDialogControl()
   const basic = Dialog.useDialogControl()
   const prompt = Prompt.usePromptControl()
+  const withMenu = Dialog.useDialogControl()
   const testDialog = Dialog.useDialogControl()
   const {closeAllDialogs} = useDialogStateControlContext()
   const unmountTestDialog = Dialog.useDialogControl()
@@ -68,6 +73,7 @@ export function Dialogs() {
           scrollable.open()
           prompt.open()
           basic.open()
+          withMenu.open()
         }}
         label="Open basic dialog">
         <ButtonText>Open all dialogs</ButtonText>
@@ -96,6 +102,15 @@ export function Dialogs() {
       </Button>
 
       <Button
+        variant="outline"
+        color="primary"
+        size="small"
+        onPress={() => withMenu.open()}
+        label="Open dialog with menu in it">
+        <ButtonText>Open dialog with menu in it</ButtonText>
+      </Button>
+
+      <Button
         variant="solid"
         color="primary"
         size="small"
@@ -185,6 +200,44 @@ export function Dialogs() {
         </Dialog.Inner>
       </Dialog.Outer>
 
+      <Dialog.Outer control={withMenu}>
+        <Portal.Provider>
+          <Dialog.Inner label="test">
+            <H3 nativeID="dialog-title">Dialog with Menu</H3>
+            <Menu.Root>
+              <Menu.Trigger label="Open menu">
+                {({props}) => (
+                  <Button
+                    style={a.mt_2xl}
+                    label="Open menu"
+                    color="primary"
+                    variant="solid"
+                    size="large"
+                    {...props}>
+                    <ButtonText>Open Menu</ButtonText>
+                  </Button>
+                )}
+              </Menu.Trigger>
+              <Menu.Outer Portal={Portal.Portal}>
+                <Menu.Group>
+                  <Menu.Item
+                    label="Item 1"
+                    onPress={() => console.log('item 1')}>
+                    <Menu.ItemText>Item 1</Menu.ItemText>
+                  </Menu.Item>
+                  <Menu.Item
+                    label="Item 2"
+                    onPress={() => console.log('item 2')}>
+                    <Menu.ItemText>Item 2</Menu.ItemText>
+                  </Menu.Item>
+                </Menu.Group>
+              </Menu.Outer>
+            </Menu.Root>
+          </Dialog.Inner>
+          <Portal.Outlet />
+        </Portal.Provider>
+      </Dialog.Outer>
+
       <Dialog.Outer control={scrollable}>
         <Dialog.ScrollableInner
           accessibilityDescribedBy="dialog-description"