revert radix chage

This commit is contained in:
Samuel Newman
2026-05-22 11:05:43 +03:00
parent 51ca00f2d7
commit 743dbe9db6
5 changed files with 23 additions and 29 deletions
+6 -8
View File
@@ -18,9 +18,7 @@ import {
} from 'react-native' } from 'react-native'
import {msg} from '@lingui/core/macro' import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {DismissableLayer} from '@radix-ui/react-dismissable-layer' import {DismissableLayer, FocusGuards, FocusScope} from 'radix-ui/internal'
import {useFocusGuards} from '@radix-ui/react-focus-guards'
import {FocusScope} from '@radix-ui/react-focus-scope'
import {RemoveScrollBar} from 'react-remove-scroll-bar' import {RemoveScrollBar} from 'react-remove-scroll-bar'
import {logger} from '#/logger' import {logger} from '#/logger'
@@ -178,9 +176,9 @@ export function Inner({
const {close} = useContext(Context) const {close} = useContext(Context)
const {gtMobile} = useBreakpoints() const {gtMobile} = useBreakpoints()
const {reduceMotionEnabled} = useA11y() const {reduceMotionEnabled} = useA11y()
useFocusGuards() FocusGuards.useFocusGuards()
return ( return (
<FocusScope loop asChild trapped> <FocusScope.FocusScope loop asChild trapped>
<View <View
role="dialog" role="dialog"
aria-role="dialog" aria-role="dialog"
@@ -209,7 +207,7 @@ export function Inner({
!reduceMotionEnabled && a.zoom_fade_in, !reduceMotionEnabled && a.zoom_fade_in,
style, style,
])}> ])}>
<DismissableLayer <DismissableLayer.DismissableLayer
onInteractOutside={preventDefault} onInteractOutside={preventDefault}
onFocusOutside={preventDefault} onFocusOutside={preventDefault}
onDismiss={close} onDismiss={close}
@@ -218,9 +216,9 @@ export function Inner({
<View style={[gtMobile ? a.p_2xl : a.p_xl, contentContainerStyle]}> <View style={[gtMobile ? a.p_2xl : a.p_xl, contentContainerStyle]}>
{children} {children}
</View> </View>
</DismissableLayer> </DismissableLayer.DismissableLayer>
</View> </View>
</FocusScope> </FocusScope.FocusScope>
) )
} }
+3 -3
View File
@@ -1,4 +1,4 @@
import {FocusScope as RadixFocusScope} from '@radix-ui/react-focus-scope' import {FocusScope as RadixFocusScope} from 'radix-ui/internal'
/* /*
* The web version of the FocusScope component is a proper implementation, we * The web version of the FocusScope component is a proper implementation, we
@@ -7,8 +7,8 @@ import {FocusScope as RadixFocusScope} from '@radix-ui/react-focus-scope'
*/ */
export function FocusScope({children}: {children: React.ReactNode}) { export function FocusScope({children}: {children: React.ReactNode}) {
return ( return (
<RadixFocusScope loop asChild trapped> <RadixFocusScope.FocusScope loop asChild trapped>
{children} {children}
</RadixFocusScope> </RadixFocusScope.FocusScope>
) )
} }
+4 -5
View File
@@ -2,8 +2,7 @@ import {useCallback, useEffect, useRef, useState} from 'react'
import {Pressable, StyleSheet, View} from 'react-native' import {Pressable, StyleSheet, View} from 'react-native'
import {Image} from 'expo-image' import {Image} from 'expo-image'
import {Trans, useLingui} from '@lingui/react/macro' import {Trans, useLingui} from '@lingui/react/macro'
import {useFocusGuards} from '@radix-ui/react-focus-guards' import {FocusGuards, FocusScope} from 'radix-ui/internal'
import {FocusScope} from '@radix-ui/react-focus-scope'
import {RemoveScrollBar} from 'react-remove-scroll-bar' import {RemoveScrollBar} from 'react-remove-scroll-bar'
import {saveImageToMediaLibrary} from '#/lib/media/manip' import {saveImageToMediaLibrary} from '#/lib/media/manip'
@@ -67,7 +66,7 @@ function LightboxContainer({
handleBackgroundPress: () => void handleBackgroundPress: () => void
}) { }) {
const {t: l} = useLingui() const {t: l} = useLingui()
useFocusGuards() FocusGuards.useFocusGuards()
return ( return (
<Pressable <Pressable
accessibilityHint={undefined} accessibilityHint={undefined}
@@ -76,7 +75,7 @@ function LightboxContainer({
style={[a.fixed, a.inset_0, a.z_10]}> style={[a.fixed, a.inset_0, a.z_10]}>
<Backdrop /> <Backdrop />
<RemoveScrollBar /> <RemoveScrollBar />
<FocusScope loop trapped asChild> <FocusScope.FocusScope loop trapped asChild>
<div <div
role="dialog" role="dialog"
aria-modal="true" aria-modal="true"
@@ -84,7 +83,7 @@ function LightboxContainer({
style={{position: 'absolute', inset: 0}}> style={{position: 'absolute', inset: 0}}>
{children} {children}
</div> </div>
</FocusScope> </FocusScope.FocusScope>
</Pressable> </Pressable>
) )
} }
+4 -5
View File
@@ -4,8 +4,7 @@ import {ImageBackground} from 'expo-image'
import {msg} from '@lingui/core/macro' import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {Trans} from '@lingui/react/macro' import {Trans} from '@lingui/react/macro'
import {useFocusGuards} from '@radix-ui/react-focus-guards' import {FocusGuards, FocusScope} from 'radix-ui/internal'
import {FocusScope} from '@radix-ui/react-focus-scope'
import {useLoggedOutViewControls} from '#/state/shell/logged-out' import {useLoggedOutViewControls} from '#/state/shell/logged-out'
import {Logo} from '#/view/icons/Logo' import {Logo} from '#/view/icons/Logo'
@@ -65,7 +64,7 @@ export function WelcomeModal({control}: WelcomeModalProps) {
requestSwitchToAccount({requestedAccount: 'existing'}) requestSwitchToAccount({requestedAccount: 'existing'})
} }
useFocusGuards() FocusGuards.useFocusGuards()
return ( return (
<View <View
@@ -80,7 +79,7 @@ export function WelcomeModal({control}: WelcomeModalProps) {
web({backdropFilter: 'blur(15px)'}), web({backdropFilter: 'blur(15px)'}),
isExiting ? a.fade_out : a.fade_in, isExiting ? a.fade_out : a.fade_in,
]}> ]}>
<FocusScope asChild loop trapped> <FocusScope.FocusScope asChild loop trapped>
<View <View
style={flatten([ style={flatten([
{ {
@@ -245,7 +244,7 @@ export function WelcomeModal({control}: WelcomeModalProps) {
</Button> </Button>
</ImageBackground> </ImageBackground>
</View> </View>
</FocusScope> </FocusScope.FocusScope>
</View> </View>
) )
} }
+6 -8
View File
@@ -1,7 +1,5 @@
import {StyleSheet, View} from 'react-native' import {StyleSheet, View} from 'react-native'
import {DismissableLayer} from '@radix-ui/react-dismissable-layer' import {DismissableLayer, FocusGuards, FocusScope} from 'radix-ui/internal'
import {useFocusGuards} from '@radix-ui/react-focus-guards'
import {FocusScope} from '@radix-ui/react-focus-scope'
import {RemoveScrollBar} from 'react-remove-scroll-bar' import {RemoveScrollBar} from 'react-remove-scroll-bar'
import {useA11y} from '#/state/a11y' import {useA11y} from '#/state/a11y'
@@ -38,11 +36,11 @@ function Inner({state}: {state: ComposerOpts}) {
const {gtMobile} = useBreakpoints() const {gtMobile} = useBreakpoints()
const {reduceMotionEnabled} = useA11y() const {reduceMotionEnabled} = useA11y()
useFocusGuards() FocusGuards.useFocusGuards()
return ( return (
<FocusScope loop trapped asChild> <FocusScope.FocusScope loop trapped asChild>
<DismissableLayer <DismissableLayer.DismissableLayer
role="dialog" role="dialog"
aria-modal aria-modal
style={flatten([ style={flatten([
@@ -86,8 +84,8 @@ function Inner({state}: {state: ComposerOpts}) {
openGallery={state.openGallery} openGallery={state.openGallery}
/> />
</View> </View>
</DismissableLayer> </DismissableLayer.DismissableLayer>
</FocusScope> </FocusScope.FocusScope>
) )
} }