one 1.22.0 → 1.23.0

package/src/ui/TabTrigger.tsx

@@ -1,87 +1,25 @@
 import { Slot } from '@radix-ui/react-slot'
-import type { TabNavigationState } from '@react-navigation/native'
-import {
-  type ComponentProps,
-  type ReactElement,
-  type ReactNode,
-  use,
-  useCallback,
-} from 'react'
-import {
-  type GestureResponderEvent,
-  Pressable,
-  type PressableProps,
-  StyleSheet,
-  type View,
-} from 'react-native'
-import { appendBaseUrl } from '../fork/getPathFromState-mods'
-import type { OneRouter } from '../interfaces/router'
-import { router } from '../router/imperative-api'
-import { stripGroupSegmentsFromPath } from '../router/matchers'
-import { useNavigatorContext } from '../views/Navigator'
-import type { TriggerMap } from './common'
-import { TabTriggerMapContext } from './TabContext'
-
-type PressablePropsWithoutFunctionChildren = Omit<PressableProps, 'children'> & {
-  children?: ReactNode | undefined
-}
-
-export type TabTriggerProps = PressablePropsWithoutFunctionChildren & {
-  /**
-   *  Name of tab. When used within a `TabList` this sets the name of the tab.
-   * Otherwise, this references the name.
-   */
-  name: string
-  /**
-   * Name of tab. Required when used within a `TabList`.
-   */
-  href?: OneRouter.Href
-  /**
-   * Forward props to child component. Useful for custom wrappers.
-   */
-  asChild?: boolean
-  /**
-   * Resets the route when switching to a tab.
-   */
-  resetOnFocus?: boolean
-}
-
-export type TabTriggerOptions = {
-  name: string
-  href: OneRouter.Href
-}
-
-export type TabTriggerSlotProps = PressablePropsWithoutFunctionChildren &
-  React.RefAttributes<View> & {
-    isFocused?: boolean
-    href?: string
-  }
-
-const TabTriggerSlot = Slot as React.ForwardRefExoticComponent<TabTriggerSlotProps>
-
-/**
- * Helper function to determine if a mouse event should be handled
- */
-function shouldHandleMouseEvent(
-  e?: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
-): boolean {
-  if (!e) return true
-
-  // Check if it's a MouseEvent
-  if ('button' in e) {
-    // Only handle left clicks without modifier keys
-    return (
-      !e.metaKey &&
-      !e.altKey &&
-      !e.ctrlKey &&
-      !e.shiftKey &&
-      (e.button == null || e.button === 0) &&
-      [undefined, null, '', 'self'].includes((e.currentTarget as any).target)
-    )
-  }
+import type { ComponentProps, ForwardRefExoticComponent, ReactElement } from 'react'
+import { Pressable, StyleSheet } from 'react-native'
 
-  return true
-}
+import {
+  useTabTrigger,
+  type TabTriggerProps,
+  type TabTriggerSlotProps,
+} from './useTabTrigger'
+
+export type {
+  SwitchToOptions,
+  TabTriggerOptions,
+  TabTriggerProps,
+  TabTriggerSlotProps,
+  Trigger,
+  TriggerProps,
+  UseTabTriggerResult,
+} from './useTabTrigger'
+export { useTabTrigger } from './useTabTrigger'
+
+const TabTriggerSlot = Slot as ForwardRefExoticComponent<TabTriggerSlotProps>
 
 /**
  * Creates a trigger to navigate to a tab. When used as child of `TabList`, its
@@ -89,16 +27,6 @@ function shouldHandleMouseEvent(
  * and the trigger also defines what routes are present in the `Tabs`.
  *
  * When used outside of `TabList`, this component no longer requires an `href`.
- *
- * @example
- * ```tsx
- * <Tabs>
- *  <TabSlot />
- *  <TabList>
- *   <TabTrigger name="home" href="/" />
- *  </TabList>
- * </Tabs>
- * ```
  */
 export function TabTrigger({
   asChild,
@@ -113,7 +41,6 @@ export function TabTrigger({
     ...props,
   })
 
-  // Pressable doesn't accept the extra props, so only pass them if we are using asChild
   if (asChild) {
     return (
       <TabTriggerSlot
@@ -125,21 +52,20 @@ export function TabTrigger({
         {props.children}
       </TabTriggerSlot>
     )
-  } else {
-    // These props are not typed, but are allowed by React Native Web
-    const reactNativeWebProps = { href: trigger?.resolvedHref }
-
-    return (
-      <Pressable
-        style={styles.tabTrigger}
-        {...reactNativeWebProps}
-        {...props}
-        {...triggerProps}
-      >
-        {props.children}
-      </Pressable>
-    )
   }
+
+  const reactNativeWebProps = { href: trigger?.resolvedHref }
+
+  return (
+    <Pressable
+      style={styles.tabTrigger}
+      {...reactNativeWebProps}
+      {...props}
+      {...triggerProps}
+    >
+      {props.children}
+    </Pressable>
+  )
 }
 
 /**
@@ -151,148 +77,6 @@ export function isTabTrigger(
   return child.type === TabTrigger
 }
 
-/**
- * Options for `switchTab` function.
- */
-export type SwitchToOptions = {
-  /**
-   * Navigate and reset the history on route focus.
-   */
-  resetOnFocus?: boolean
-}
-
-export type Trigger = TriggerMap[string] & {
-  isFocused: boolean
-  resolvedHref: string
-  route: TabNavigationState<any>['routes'][number]
-}
-
-export type UseTabTriggerResult = {
-  switchTab: (name: string, options: SwitchToOptions) => void
-  getTrigger: (name: string) => Trigger | undefined
-  trigger?: Trigger
-  triggerProps: TriggerProps
-}
-
-export type TriggerProps = {
-  isFocused: boolean
-  onPress: PressableProps['onPress']
-  onLongPress: PressableProps['onLongPress']
-}
-
-/**
- * Utility hook creating custom `TabTrigger`.
- */
-export function useTabTrigger(options: TabTriggerProps): UseTabTriggerResult {
-  const { state, navigation } = useNavigatorContext()
-  const { name, resetOnFocus, onPress, onLongPress } = options
-  const triggerMap = use(TabTriggerMapContext)
-
-  const getTrigger = useCallback(
-    (name: string) => {
-      const config = triggerMap[name]
-
-      if (!config) {
-        return
-      }
-
-      return {
-        isFocused: state.index === config.index,
-        route: state.routes[config.index],
-        resolvedHref: stripGroupSegmentsFromPath(appendBaseUrl(config.href)),
-        ...config,
-      }
-    },
-    [triggerMap, state]
-  )
-
-  const trigger = name !== undefined ? getTrigger(name) : undefined
-
-  const switchTab = useCallback(
-    (name: string, options?: SwitchToOptions) => {
-      const config = triggerMap[name]
-
-      if (config) {
-        if (config.type === 'external') {
-          return router.navigate(config.href)
-        } else {
-          return navigation?.dispatch({
-            ...config.action,
-            type: 'JUMP_TO',
-            payload: {
-              ...config.action.payload,
-              ...options,
-            },
-          })
-        }
-      } else {
-        return navigation?.dispatch({
-          type: 'JUMP_TO',
-          payload: {
-            name,
-          },
-        })
-      }
-    },
-    [navigation, triggerMap]
-  )
-
-  const handleOnPress = useCallback<NonNullable<PressableProps['onPress']>>(
-    (event) => {
-      onPress?.(event)
-      if (!trigger) return
-      if (event?.isDefaultPrevented()) return
-
-      navigation?.emit({
-        type: 'tabPress',
-        target: trigger.type === 'internal' ? trigger.route.key : trigger?.href,
-        canPreventDefault: true,
-      })
-
-      if (!shouldHandleMouseEvent(event)) return
-
-      // skip dispatch if this trigger's tab is already focused
-      if (trigger.isFocused) return
-
-      switchTab(name, { resetOnFocus })
-    },
-    [onPress, name, resetOnFocus, trigger, navigation, switchTab]
-  )
-
-  const handleOnLongPress = useCallback<NonNullable<PressableProps['onLongPress']>>(
-    (event) => {
-      onLongPress?.(event)
-      if (!trigger) return
-      if (event?.isDefaultPrevented()) return
-
-      navigation?.emit({
-        type: 'tabLongPress',
-        target: trigger.type === 'internal' ? trigger.route.key : trigger?.href,
-      })
-
-      if (!shouldHandleMouseEvent(event)) return
-
-      switchTab(name, {
-        resetOnFocus,
-      })
-    },
-    [onLongPress, name, resetOnFocus, trigger, navigation, switchTab]
-  )
-
-  const triggerProps = {
-    isFocused: Boolean(trigger?.isFocused),
-    onPress: handleOnPress,
-    onLongPress: handleOnLongPress,
-  }
-
-  return {
-    switchTab,
-    getTrigger,
-    trigger,
-    triggerProps,
-  }
-}
-
 const styles = StyleSheet.create({
   tabTrigger: {
     flexDirection: 'row',

package/src/ui/TabTrigger.web.tsx

@@ -0,0 +1,71 @@
+import type { ComponentProps, ReactElement } from 'react'
+
+import { Link } from '../link/Link'
+import {
+  shouldHandleMouseEvent,
+  useTabTrigger,
+  type TabTriggerProps as SharedTabTriggerProps,
+} from './useTabTrigger'
+
+export type {
+  SwitchToOptions,
+  TabTriggerOptions,
+  TabTriggerSlotProps,
+  Trigger,
+  TriggerProps,
+  UseTabTriggerResult,
+} from './useTabTrigger'
+export { useTabTrigger } from './useTabTrigger'
+
+export type TabTriggerProps = Omit<SharedTabTriggerProps, 'style'>
+
+export function TabTrigger({
+  asChild,
+  name,
+  href,
+  resetOnFocus,
+  ...props
+}: TabTriggerProps) {
+  const { trigger, triggerProps } = useTabTrigger({
+    name,
+    resetOnFocus,
+    ...props,
+  })
+  const resolvedHref = trigger?.resolvedHref ?? href
+
+  if (!resolvedHref) {
+    return (
+      <button type="button" onClick={(event) => triggerProps.onPress?.(event as any)}>
+        {props.children}
+      </button>
+    )
+  }
+
+  return (
+    <Link
+      {...(props as any)}
+      href={resolvedHref}
+      asChild={asChild}
+      onPress={(event) => {
+        // modifier clicks stay browser-native (new tab / window), no tab switch
+        if (!shouldHandleMouseEvent(event as any)) return
+        event.preventDefault()
+        triggerProps.onPress?.(event as any)
+      }}
+      onLongPress={triggerProps.onLongPress}
+      aria-current={trigger?.isFocused ? 'page' : undefined}
+      {...(asChild ? { isFocused: Boolean(trigger?.isFocused) } : null)}
+    >
+      {props.children}
+    </Link>
+  )
+}
+
+/**
+ * @hidden
+ */
+export function isTabTrigger(
+  child: ReactElement<any>
+): child is ReactElement<ComponentProps<typeof TabTrigger>> {
+  return child.type === TabTrigger
+}

package/src/ui/Tabs.shared.tsx

@@ -0,0 +1,230 @@
+import type { RouterFactory } from '@react-navigation/native'
+import {
+  type DefaultNavigatorOptions,
+  LinkingContext,
+  type ParamListBase,
+  type TabActionHelpers,
+  type TabNavigationState,
+  type TabRouterOptions,
+  useNavigationBuilder,
+} from '@react-navigation/native'
+import {
+  Children,
+  type ComponentProps,
+  Fragment,
+  isValidElement,
+  type MutableRefObject,
+  type PropsWithChildren,
+  type ReactElement,
+  type ReactNode,
+  use,
+  useMemo,
+  useRef,
+} from 'react'
+import type { ViewProps } from 'react-native'
+
+import { useRouteInfo } from '../hooks'
+import { resolveHref } from '../link/href'
+import { useContextKey, useRouteNode } from '../router/Route'
+import { shouldLinkExternally } from '../utils/url'
+import { NavigatorContext } from '../views/Navigator'
+import { type ScreenTrigger, triggersToScreens } from './common'
+import {
+  type ExpoTabsScreenOptions,
+  type TabNavigationEventMap,
+  type TabsContextValue,
+  TabTriggerMapContext,
+} from './TabContext'
+import { isTabList } from './TabList'
+import { ExpoTabRouter, type ExpoTabRouterOptions } from './TabRouter'
+import { isTabSlot } from './TabSlot'
+import { isTabTrigger } from './TabTrigger'
+import { useComponent } from './useComponent'
+
+type NavigatorContextValue = {
+  contextKey: string
+  state: ReturnType<typeof useNavigationBuilder>['state']
+  navigation: ReturnType<typeof useNavigationBuilder>['navigation']
+  descriptorsRef: MutableRefObject<ReturnType<typeof useNavigationBuilder>['descriptors']>
+  router: RouterFactory<any, any, any>
+}
+
+export type UseTabsOptions = Omit<
+  DefaultNavigatorOptions<
+    ParamListBase,
+    any,
+    TabNavigationState<any>,
+    ExpoTabsScreenOptions,
+    TabNavigationEventMap,
+    any
+  >,
+  'children'
+> & {
+  backBehavior?: TabRouterOptions['backBehavior']
+}
+
+export type TabsProps = ViewProps & {
+  asChild?: boolean
+  options?: UseTabsOptions
+}
+
+export type UseTabsWithChildrenOptions = PropsWithChildren<UseTabsOptions>
+
+export type UseTabsWithTriggersOptions = UseTabsOptions & {
+  triggers: ScreenTrigger[]
+}
+
+export function useTabsWithChildren(options: UseTabsWithChildrenOptions) {
+  const { children, ...rest } = options
+  return useTabsWithTriggers({
+    triggers: parseTriggersFromChildren(children),
+    ...rest,
+  })
+}
+
+export function useTabsWithTriggers(
+  options: UseTabsWithTriggersOptions
+): TabsContextValue {
+  const { triggers, ...rest } = options
+  const parentTriggerMap = use(TabTriggerMapContext)
+  const routeNode = useRouteNode()
+  const contextKey = useContextKey()
+  const linking = use(LinkingContext).options
+  const routeInfo = useRouteInfo()
+
+  if (!routeNode || !linking) {
+    throw new Error('No RouteNode. This is likely a bug in one router.')
+  }
+
+  const { children, triggerMap } = triggersToScreens(
+    triggers,
+    routeNode,
+    linking,
+    routeNode.initialRouteName,
+    parentTriggerMap,
+    routeInfo,
+    contextKey
+  )
+
+  const navigatorContext = useNavigationBuilder<
+    TabNavigationState<any>,
+    ExpoTabRouterOptions,
+    TabActionHelpers<ParamListBase>,
+    ExpoTabsScreenOptions,
+    TabNavigationEventMap
+  >(ExpoTabRouter, {
+    children,
+    ...rest,
+    triggerMap,
+    id: contextKey,
+    initialRouteName: routeNode.initialRouteName,
+  })
+
+  const {
+    state,
+    descriptors,
+    navigation,
+    describe,
+    NavigationContent: RNNavigationContent,
+  } = navigatorContext
+  const descriptorsRef = useRef(descriptors)
+  descriptorsRef.current = descriptors
+
+  const navigatorContextValue = useMemo(
+    () => ({
+      state,
+      navigation,
+      contextKey,
+      router: ExpoTabRouter,
+      descriptorsRef,
+    }),
+    [state, navigation, contextKey]
+  ) as unknown as NavigatorContextValue
+
+  const NavigationContent = useComponent((children: ReactNode) => (
+    <TabTriggerMapContext.Provider value={triggerMap}>
+      <NavigatorContext.Provider value={navigatorContextValue}>
+        <RNNavigationContent>{children}</RNNavigationContent>
+      </NavigatorContext.Provider>
+    </TabTriggerMapContext.Provider>
+  )) as TabsContextValue['NavigationContent']
+
+  return { state, descriptors, navigation, NavigationContent, describe }
+}
+
+function parseTriggersFromChildren(
+  children: ReactNode,
+  screenTriggers: ScreenTrigger[] = [],
+  isInTabList = false
+) {
+  Children.forEach(children, (child) => {
+    if (!child || !isValidElement(child) || isTabSlot(child)) return
+
+    if (isFragment(child) && typeof child.props.children !== 'function') {
+      return parseTriggersFromChildren(
+        child.props.children,
+        screenTriggers,
+        isInTabList || isTabList(child)
+      )
+    }
+
+    if (isTabList(child) && typeof child.props.children !== 'function') {
+      let children = child.props.children
+
+      if (
+        child.props.asChild &&
+        isValidElement(children) &&
+        children.props &&
+        typeof children.props === 'object' &&
+        'children' in children.props
+      ) {
+        children = children.props.children as ReactNode
+      }
+
+      return parseTriggersFromChildren(
+        children,
+        screenTriggers,
+        isInTabList || isTabList(child)
+      )
+    }
+
+    if (!isInTabList || !isTabTrigger(child)) return
+
+    const { href, name } = child.props
+
+    if (!href) {
+      if (process.env.NODE_ENV === 'development') {
+        console.warn(
+          `<TabTrigger name={${name}}> does not have a 'href' prop. TabTriggers within a <TabList /> are required to have an href.`
+        )
+      }
+      return
+    }
+
+    const resolvedHref = resolveHref(href)
+
+    if (shouldLinkExternally(resolvedHref)) {
+      screenTriggers.push({ type: 'external', name, href: resolvedHref })
+      return
+    }
+
+    if (!name) {
+      if (process.env.NODE_ENV === 'development') {
+        console.warn(
+          `<TabTrigger> does not have a 'name' prop. TabTriggers within a <TabList /> are required to have a name.`
+        )
+      }
+      return
+    }
+
+    screenTriggers.push({ type: 'internal', href: resolvedHref, name })
+  })
+
+  return screenTriggers
+}
+
+function isFragment(
+  child: ReactElement<any>
+): child is ReactElement<ComponentProps<typeof Fragment>> {
+  return child.type === Fragment
+}