Merge branch 'hailey/dialogs-pt7-rework' into hailey/dialogs-pt8

src/components/BottomSheetButton.tsx

@@ -1,110 +1,12 @@
 import React from 'react'
-import {AccessibilityProps, ViewStyle} from 'react-native'
-import {PressableEvent} from 'react-native-gesture-handler/lib/typescript/components/Pressable/PressableProps'
-import {
-  BlueskyBottomSheetPressable,
-  BlueskyBottomSheetPressableProps,
-} from '@haileyok/bluesky-bottom-sheet'
 
-import {atoms as a} from '#/alf'
+import {Button, ButtonProps} from '#/components/Button'
-import {
+import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
-  ButtonContext,
-  useSharedButtonStyles,
-  VariantProps,
-} from '#/components/Button'
-
-export function BottomSheetButton({
-  children,
-  label,
-  color,
-  variant,
-  shape = 'default',
-  size,
-  disabled,
-  style,
-  ...rest
-}: BlueskyBottomSheetPressableProps &
-  AccessibilityProps &
-  VariantProps & {
-    /**
-     * For a11y, try to make this descriptive and clear
-     */
-    label: string
-  }) {
-  const [state, setState] = React.useState({
-    pressed: false,
-    hovered: false,
-    focused: false,
-  })
-
-  const onPressInOuter = rest.onPressIn
-  const onPressIn = React.useCallback(
-    (e: PressableEvent) => {
-      setState(s => ({
-        ...s,
-        pressed: true,
-      }))
-      onPressInOuter?.(e)
-    },
-    [setState, onPressInOuter],
-  )
-  const onPressOutOuter = rest.onPressOut
-  const onPressOut = React.useCallback(
-    (e: PressableEvent) => {
-      setState(s => ({
-        ...s,
-        pressed: false,
-      }))
-      onPressOutOuter?.(e)
-    },
-    [setState, onPressOutOuter],
-  )
-
-  const {baseStyles, hoverStyles} = useSharedButtonStyles({
-    /**
-     * For a11y, try to make this descriptive and clear
-     */
-    color,
-    variant,
-    shape,
-    size,
-    disabled,
-  })
-
-  const context = React.useMemo<ButtonContext>(
-    () => ({
-      ...state,
-      variant,
-      color,
-      size,
-      disabled: disabled || false,
-    }),
-    [state, variant, color, size, disabled],
-  )
 
+export function BottomSheetButton({children, ...rest}: ButtonProps) {
   return (
-    <BlueskyBottomSheetPressable
+    <Button {...rest} Component={NormalizedRNGHPressable}>
-      style={[
+      {children}
-        a.flex_row,
+    </Button>
-        a.align_center,
-        a.justify_center,
-        baseStyles,
-        style as ViewStyle,
-        ...(state.hovered || state.pressed ? [hoverStyles] : []),
-      ]}
-      aria-label={label}
-      aria-pressed={state.pressed}
-      accessibilityLabel={label}
-      accessibilityHint={undefined}
-      accessibilityState={{
-        disabled: disabled || false,
-      }}
-      onPressIn={onPressIn}
-      onPressOut={onPressOut}
-      {...rest}>
-      <ButtonContext.Provider value={context}>
-        {typeof children === 'function' ? children(context) : children}
-      </ButtonContext.Provider>
-    </BlueskyBottomSheetPressable>
   )
 }

src/components/BottomSheetLink.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import {BlueskyBottomSheetPressable} from '@haileyok/bluesky-bottom-sheet'
 import {StackActions, useNavigation} from '@react-navigation/native'
 
 import {NavigationProp} from '#/lib/routes/types'
@@ -7,6 +6,7 @@ import {flatten, useTheme} from '#/alf'
 import {useDialogContext} from '#/components/Dialog'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {InlineLinkProps, useLink} from '#/components/Link'
+import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
 import {Text} from '#/components/Typography'
 import {router} from '#/routes'
 
@@ -64,7 +64,7 @@ export function BottomSheetInlineLinkText({
 
   // eslint-disable-next-line bsky-internal/avoid-unwrapped-text
   return (
-    <BlueskyBottomSheetPressable
+    <NormalizedRNGHPressable
       onPress={onPress}
       onLongPress={onLongPress}
       onPressIn={onPressIn}
@@ -87,6 +87,6 @@ export function BottomSheetInlineLinkText({
         ]}>
         {children}
       </Text>
-    </BlueskyBottomSheetPressable>
+    </NormalizedRNGHPressable>
   )
 }

src/components/Button.tsx

@@ -15,7 +15,9 @@ import {
 import {LinearGradient} from 'expo-linear-gradient'
 
 import {atoms as a, flatten, select, tokens, useTheme, web} from '#/alf'
+import {useDialogContext} from '#/components/Dialog'
 import {Props as SVGIconProps} from '#/components/icons/common'
+import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
 import {Text} from '#/components/Typography'
 
 export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'gradient'
@@ -87,10 +89,10 @@ export type ButtonProps = Pick<
     style?: StyleProp<ViewStyle>
     hoverStyle?: StyleProp<ViewStyle>
     children: NonTextElements | ((context: ButtonContext) => NonTextElements)
+    Component?: React.ComponentType<PressableProps>
   }
 
-export type ButtonTextProps = TextProps &
+export type ButtonTextProps = TextProps & VariantProps & {disabled?: boolean}
-  VariantProps & {disabled?: boolean | null}
 
 const Context = React.createContext<VariantProps & ButtonState>({
   hovered: false,
@@ -98,7 +100,6 @@ const Context = React.createContext<VariantProps & ButtonState>({
   pressed: false,
   disabled: false,
 })
-export const ButtonContext = Context
 
 export function useButtonContext() {
   return React.useContext(Context)
@@ -116,10 +117,23 @@ export const Button = React.forwardRef<View, ButtonProps>(
       disabled = false,
       style,
       hoverStyle: hoverStyleProp,
+      Component,
       ...rest
     },
     ref,
   ) => {
+    // This will pick the correct default pressable to use. If we are inside a dialog, we need to use the RNGH
+    // pressable so that it is usable inside the dialog.
+    const {insideDialog} = useDialogContext()
+    if (!Component) {
+      if (insideDialog) {
+        Component = NormalizedRNGHPressable
+      } else {
+        Component = Pressable
+      }
+    }
+
+    const t = useTheme()
     const [state, setState] = React.useState({
       pressed: false,
       hovered: false,
@@ -183,126 +197,6 @@ export const Button = React.forwardRef<View, ButtonProps>(
       }))
     }, [setState])
 
-    const {baseStyles, hoverStyles} = useSharedButtonStyles({
-      color,
-      variant,
-      disabled,
-      shape,
-      size,
-    })
-
-    const {gradientColors, gradientHoverColors, gradientLocations} =
-      React.useMemo(() => {
-        const colors: string[] = []
-        const hoverColors: string[] = []
-        const locations: number[] = []
-        const gradient = {
-          primary: tokens.gradients.sky,
-          secondary: tokens.gradients.sky,
-          secondary_inverted: tokens.gradients.sky,
-          negative: tokens.gradients.sky,
-          gradient_primary: tokens.gradients.primary,
-          gradient_sky: tokens.gradients.sky,
-          gradient_midnight: tokens.gradients.midnight,
-          gradient_sunrise: tokens.gradients.sunrise,
-          gradient_sunset: tokens.gradients.sunset,
-          gradient_nordic: tokens.gradients.nordic,
-          gradient_bonfire: tokens.gradients.bonfire,
-        }[color || 'primary']
-
-        if (variant === 'gradient') {
-          colors.push(...gradient.values.map(([_, color]) => color))
-          hoverColors.push(...gradient.values.map(_ => gradient.hover_value))
-          locations.push(...gradient.values.map(([location, _]) => location))
-        }
-
-        return {
-          gradientColors: colors,
-          gradientHoverColors: hoverColors,
-          gradientLocations: locations,
-        }
-      }, [variant, color])
-
-    const context = React.useMemo<ButtonContext>(
-      () => ({
-        ...state,
-        variant,
-        color,
-        size,
-        disabled: disabled || false,
-      }),
-      [state, variant, color, size, disabled],
-    )
-
-    const flattenedBaseStyles = flatten([baseStyles, style])
-
-    return (
-      <Pressable
-        role="button"
-        accessibilityHint={undefined} // optional
-        {...rest}
-        ref={ref}
-        aria-label={label}
-        aria-pressed={state.pressed}
-        accessibilityLabel={label}
-        disabled={disabled || false}
-        accessibilityState={{
-          disabled: disabled || false,
-        }}
-        style={[
-          a.flex_row,
-          a.align_center,
-          a.justify_center,
-          flattenedBaseStyles,
-          ...(state.hovered || state.pressed
-            ? [hoverStyles, flatten(hoverStyleProp)]
-            : []),
-        ]}
-        onPressIn={onPressIn}
-        onPressOut={onPressOut}
-        onHoverIn={onHoverIn}
-        onHoverOut={onHoverOut}
-        onFocus={onFocus}
-        onBlur={onBlur}>
-        {variant === 'gradient' && (
-          <View
-            style={[
-              a.absolute,
-              a.inset_0,
-              a.overflow_hidden,
-              {borderRadius: flattenedBaseStyles.borderRadius},
-            ]}>
-            <LinearGradient
-              colors={
-                state.hovered || state.pressed
-                  ? gradientHoverColors
-                  : gradientColors
-              }
-              locations={gradientLocations}
-              start={{x: 0, y: 0}}
-              end={{x: 1, y: 1}}
-              style={[a.absolute, a.inset_0]}
-            />
-          </View>
-        )}
-        <Context.Provider value={context}>
-          {typeof children === 'function' ? children(context) : children}
-        </Context.Provider>
-      </Pressable>
-    )
-  },
-)
-Button.displayName = 'Button'
-
-export function useSharedButtonStyles({
-  color,
-  variant,
-  disabled,
-  shape,
-  size,
-}: VariantProps & {disabled?: boolean | null}) {
-  const t = useTheme()
-
     const {baseStyles, hoverStyles} = React.useMemo(() => {
       const baseStyles: ViewStyle[] = []
       const hoverStyles: ViewStyle[] = []
@@ -524,8 +418,109 @@ export function useSharedButtonStyles({
       }
     }, [t, variant, color, size, shape, disabled])
 
-  return {baseStyles, hoverStyles}
+    const {gradientColors, gradientHoverColors, gradientLocations} =
-}
+      React.useMemo(() => {
+        const colors: string[] = []
+        const hoverColors: string[] = []
+        const locations: number[] = []
+        const gradient = {
+          primary: tokens.gradients.sky,
+          secondary: tokens.gradients.sky,
+          secondary_inverted: tokens.gradients.sky,
+          negative: tokens.gradients.sky,
+          gradient_primary: tokens.gradients.primary,
+          gradient_sky: tokens.gradients.sky,
+          gradient_midnight: tokens.gradients.midnight,
+          gradient_sunrise: tokens.gradients.sunrise,
+          gradient_sunset: tokens.gradients.sunset,
+          gradient_nordic: tokens.gradients.nordic,
+          gradient_bonfire: tokens.gradients.bonfire,
+        }[color || 'primary']
+
+        if (variant === 'gradient') {
+          colors.push(...gradient.values.map(([_, color]) => color))
+          hoverColors.push(...gradient.values.map(_ => gradient.hover_value))
+          locations.push(...gradient.values.map(([location, _]) => location))
+        }
+
+        return {
+          gradientColors: colors,
+          gradientHoverColors: hoverColors,
+          gradientLocations: locations,
+        }
+      }, [variant, color])
+
+    const context = React.useMemo<ButtonContext>(
+      () => ({
+        ...state,
+        variant,
+        color,
+        size,
+        disabled: disabled || false,
+      }),
+      [state, variant, color, size, disabled],
+    )
+
+    const flattenedBaseStyles = flatten([baseStyles, style])
+
+    return (
+      <Component
+        role="button"
+        accessibilityHint={undefined} // optional
+        {...rest}
+        // @ts-expect-error ref type
+        ref={ref}
+        aria-label={label}
+        aria-pressed={state.pressed}
+        accessibilityLabel={label}
+        disabled={disabled || false}
+        accessibilityState={{
+          disabled: disabled || false,
+        }}
+        style={[
+          a.flex_row,
+          a.align_center,
+          a.justify_center,
+          flattenedBaseStyles,
+          ...(state.hovered || state.pressed
+            ? [hoverStyles, flatten(hoverStyleProp)]
+            : []),
+        ]}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        onHoverIn={onHoverIn}
+        onHoverOut={onHoverOut}
+        onFocus={onFocus}
+        onBlur={onBlur}>
+        {variant === 'gradient' && (
+          <View
+            style={[
+              a.absolute,
+              a.inset_0,
+              a.overflow_hidden,
+              {borderRadius: flattenedBaseStyles.borderRadius},
+            ]}>
+            <LinearGradient
+              colors={
+                state.hovered || state.pressed
+                  ? gradientHoverColors
+                  : gradientColors
+              }
+              locations={gradientLocations}
+              start={{x: 0, y: 0}}
+              end={{x: 1, y: 1}}
+              style={[a.absolute, a.inset_0]}
+            />
+          </View>
+        )}
+        <Context.Provider value={context}>
+          {typeof children === 'function' ? children(context) : children}
+        </Context.Provider>
+      </Component>
+    )
+  },
+)
+Button.displayName = 'Button'
 
 export function useSharedButtonTextStyles() {
   const t = useTheme()

src/components/Dialog/context.ts

@@ -9,6 +9,7 @@ import {
 
 export const Context = React.createContext<DialogContextProps>({
   close: () => {},
+  insideDialog: false,
 })
 
 export function useDialogContext() {

src/components/Dialog/index.tsx

@@ -56,7 +56,6 @@ export function OuterWithoutPortal({
   const insets = useSafeAreaInsets()
   const closeCallbacks = React.useRef<(() => void)[]>([])
   const {setDialogIsOpen} = useDialogStateControlContext()
-  // @TODO DIALOG REFACTOR - can i get rid of this? seems pointless tbh
 
   const callQueuedCallbacks = React.useCallback(() => {
     for (const cb of closeCallbacks.current) {
@@ -104,21 +103,13 @@ export function OuterWithoutPortal({
     [open, close],
   )
 
-  // @TODO DIALOG REFACTOR - what is this? rm i think?
+  const context = React.useMemo(() => ({close, insideDialog: true}), [close])
-  // React.useEffect(() => {
-  //   return () => {
-  //     setDialogIsOpen(control.id, false)
-  //   }
-  // }, [control.id, setDialogIsOpen])
-
-  const context = React.useMemo(() => ({close}), [close])
 
   const Wrapper = isIOS ? View : GestureHandlerRootView
 
   return (
     <Context.Provider value={context}>
       <BlueskyBottomSheetView
-        // handleIndicatorStyle={{backgroundColor: t.palette.primary_500}} // @TODO DIALOG REFACTOR need to add this to lib!*/
         ref={ref}
         topInset={30}
         bottomInset={insets.bottom}

src/components/Dialog/index.web.tsx

@@ -229,10 +229,6 @@ export const InnerFlatList = React.forwardRef<
   )
 })
 
-export function Handle() {
-  return null
-}
-
 export function Close() {
   const {_} = useLingui()
   const {close} = React.useContext(Context)

src/components/Dialog/types.ts

@@ -37,6 +37,7 @@ export type DialogControlProps = DialogControlRefProps & {
 
 export type DialogContextProps = {
   close: DialogControlProps['close']
+  insideDialog: boolean
 }
 
 export type DialogControlOpenOptions = {

src/components/Menu/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import {StyleProp, View, ViewStyle} from 'react-native'
-import {BlueskyBottomSheetPressable as Pressable} from '@haileyok/bluesky-bottom-sheet'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import flattenReactChildren from 'react-keyed-flatten-children'
@@ -19,6 +18,7 @@ import {
   ItemTextProps,
   TriggerProps,
 } from '#/components/Menu/types'
+import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
 import {Text} from '#/components/Typography'
 
 export {
@@ -117,7 +117,7 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
   } = useInteractionState()
 
   return (
-    <Pressable
+    <NormalizedRNGHPressable
       {...rest}
       accessibilityHint=""
       accessibilityLabel={label}
@@ -151,7 +151,7 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
       <ItemContext.Provider value={{disabled: Boolean(rest.disabled)}}>
         {children}
       </ItemContext.Provider>
-    </Pressable>
+    </NormalizedRNGHPressable>
   )
 }
 

src/components/Menu/types.ts

@@ -4,8 +4,6 @@ import {
   GestureResponderEvent,
   PressableProps,
 } from 'react-native'
-import {PressableEvent} from 'react-native-gesture-handler/lib/typescript/components/Pressable/PressableProps'
-import {BlueskyBottomSheetPressableProps} from '@haileyok/bluesky-bottom-sheet'
 
 import {TextStyleProp, ViewStyleProp} from '#/alf'
 import * as Dialog from '#/components/Dialog'
@@ -89,10 +87,10 @@ export type TriggerChildProps =
     }
 
 export type ItemProps = React.PropsWithChildren<
-  Omit<BlueskyBottomSheetPressableProps, 'style'> &
+  Omit<PressableProps, 'style'> &
     ViewStyleProp & {
       label: string
-      onPress: (e: PressableEvent | GestureResponderEvent) => void
+      onPress: (e: GestureResponderEvent) => void
     }
 >
 

src/components/NormalizedRNGHPressable.tsx

@@ -0,0 +1,128 @@
+import React from 'react'
+import {
+  GestureResponderEvent,
+  MeasureOnSuccessCallback,
+  NativeMouseEvent,
+  NativeSyntheticEvent,
+  PressableProps,
+} from 'react-native'
+import {Pressable as BSPressable} from 'react-native-gesture-handler'
+import {PressableEvent} from 'react-native-gesture-handler/lib/typescript/components/Pressable/PressableProps'
+
+function pressableEventToGestureResponderEvent(
+  event: PressableEvent,
+  target: NormalizedRNGHPressable,
+): GestureResponderEvent {
+  return {
+    nativeEvent: {
+      ...event.nativeEvent,
+      touches: [],
+      changedTouches: [],
+      identifier: event.nativeEvent.identifier.toString(),
+      target: event.nativeEvent.target.toString(),
+    },
+    // @ts-expect-error
+    target: target,
+    // @ts-expect-error
+    currentTarget: target,
+    preventDefault() {},
+    stopPropagation() {},
+    cancelable: false,
+    defaultPrevented: false,
+    eventPhase: 0,
+    isTrusted: false,
+    bubbles: false,
+    timeStamp: event.nativeEvent.timestamp,
+    isDefaultPrevented(): boolean {
+      return false
+    },
+    isPropagationStopped(): boolean {
+      return false
+    },
+    persist() {},
+    type: 'press',
+  }
+}
+
+function pressableEventToMouseEvent(
+  event: PressableEvent,
+  target: NormalizedRNGHPressable,
+): MouseEvent & NativeSyntheticEvent<NativeMouseEvent> {
+  return {
+    ...event.nativeEvent,
+    // @ts-expect-error
+    target: target,
+    // @ts-expect-error
+    currentTarget: target,
+    preventDefault() {},
+    stopPropagation() {},
+    cancelable: false,
+    defaultPrevented: false,
+    eventPhase: 0,
+    isTrusted: false,
+    bubbles: false,
+    timeStamp: event.nativeEvent.timestamp,
+  }
+}
+
+export class NormalizedRNGHPressable extends React.Component<PressableProps> {
+  static displayName = 'Pressable'
+
+  measure = (_: MeasureOnSuccessCallback) => {}
+
+  measureLayout = (_: number) => {}
+
+  measureInWindow = (
+    _: (x: number, y: number, width: number, height: number) => void,
+  ) => {}
+
+  setNativeProps = (_: PressableProps) => {}
+
+  focus = () => {}
+
+  blur = () => {}
+
+  onPress = (event: PressableEvent) => {
+    if (!this.props.onPress) return
+    this.props.onPress(pressableEventToGestureResponderEvent(event, this))
+  }
+
+  onLongPress = (event: PressableEvent) => {
+    if (!this.props.onLongPress) return
+    this.props.onLongPress(pressableEventToGestureResponderEvent(event, this))
+  }
+
+  onPressIn = (event: PressableEvent) => {
+    if (!this.props.onPressIn) return
+    this.props.onPressIn(pressableEventToGestureResponderEvent(event, this))
+  }
+
+  onPressOut = (event: PressableEvent) => {
+    if (!this.props.onPressOut) return
+    this.props.onPressOut(pressableEventToGestureResponderEvent(event, this))
+  }
+
+  onHoverIn = (event: PressableEvent) => {
+    if (!this.props.onHoverIn) return
+    this.props.onHoverIn(pressableEventToMouseEvent(event, this))
+  }
+
+  onHoverOut = (event: PressableEvent) => {
+    if (!this.props.onHoverOut) return
+    this.props.onHoverOut(pressableEventToMouseEvent(event, this))
+  }
+
+  render() {
+    return (
+      <BSPressable
+        {...this.props}
+        onPress={this.onPress}
+        onLongPress={this.onLongPress}
+        onPressIn={this.onPressIn}
+        onPressOut={this.onPressOut}
+        onHoverIn={this.onHoverIn}
+        onHoverOut={this.onHoverOut}
+      />
+    )
+  }
+}

src/components/NormalizedRNGHPressable.web.tsx

@@ -0,0 +1,3 @@
+import {Pressable as NormalizedRNGHPressable} from 'react-native'
+
+export {NormalizedRNGHPressable}