one 1.21.13 → 1.23.0

package/src/screensFeatureFlags.native.ts

@@ -0,0 +1,23 @@
+// enables synchronous layout updates for react-native-screens
+// this fixes issues like flex: 1 not working properly in formSheet presentations
+// and ensures header config updates are applied synchronously
+// also prevents dismissed screens from being reattached on iOS
+
+let hasInitialized = false
+
+export function initScreensFeatureFlags() {
+  if (hasInitialized) return
+  hasInitialized = true
+
+  try {
+    const { featureFlags } = require('react-native-screens')
+    if (featureFlags?.experiment) {
+      featureFlags.experiment.synchronousScreenUpdatesEnabled = true
+      featureFlags.experiment.synchronousHeaderConfigUpdatesEnabled = true
+      featureFlags.experiment.synchronousHeaderSubviewUpdatesEnabled = true
+      featureFlags.experiment.iosPreventReattachmentOfDismissedScreens = true
+    }
+  } catch {
+    // react-native-screens may not be available (e.g. web-only builds)
+  }
+}

package/src/screensFeatureFlags.ts

@@ -1,23 +1,3 @@
-// enables synchronous layout updates for react-native-screens
-// this fixes issues like flex: 1 not working properly in formSheet presentations
-// and ensures header config updates are applied synchronously
-// also prevents dismissed screens from being reattached on iOS
-
-let hasInitialized = false
-
-export function initScreensFeatureFlags() {
-  if (hasInitialized) return
-  hasInitialized = true
-
-  try {
-    const { featureFlags } = require('react-native-screens')
-    if (featureFlags?.experiment) {
-      featureFlags.experiment.synchronousScreenUpdatesEnabled = true
-      featureFlags.experiment.synchronousHeaderConfigUpdatesEnabled = true
-      featureFlags.experiment.synchronousHeaderSubviewUpdatesEnabled = true
-      featureFlags.experiment.iosPreventReattachmentOfDismissedScreens = true
-    }
-  } catch {
-    // react-native-screens may not be available (e.g. web-only builds)
-  }
-}
+// react-native-screens has no place in the web graph, the .native sibling does
+// the real work
+export function initScreensFeatureFlags() {}

package/src/typed-routes/generateRouteTypes.ts

@@ -1,10 +1,9 @@
 import { readFile, writeFile } from 'node:fs/promises'
 import { dirname, join } from 'node:path'
 import FSExtra from 'fs-extra'
-import micromatch from 'micromatch'
 import { removeSupportedExtensions } from '../router/matchers'
 import { globbedRoutesToRouteContext } from '../router/useViteRoutes'
-import { globDir } from '../utils/globDir'
+import { getRoutePaths } from '../utils/routeIndex'
 import type { One } from '../vite/types'
 import { getTypedRoutesDeclarationFile } from './getTypedRoutesDeclarationFile'
 import { type InjectMode, injectRouteHelpers } from './injectRouteHelpers'
@@ -13,15 +12,10 @@ export async function generateRouteTypes(
   outFile: string,
   routerRoot: string,
   ignoredRouteFiles?: string[],
-  typedRoutesMode?: 'type' | 'runtime'
+  typedRoutesMode?: 'type' | 'runtime',
+  routePathsIn?: string[]
 ) {
-  let routePaths = globDir(routerRoot)
-  if (ignoredRouteFiles && ignoredRouteFiles.length > 0) {
-    routePaths = micromatch.not(routePaths, ignoredRouteFiles, {
-      // The path starts with './', such as './foo/bar/baz.test.tsx', and ignoredRouteFiles is like ['**/*.test.*'], so we need matchBase here.
-      matchBase: true,
-    })
-  }
+  const routePaths = routePathsIn ?? getRoutePaths(routerRoot, ignoredRouteFiles)
   // globDir returns paths relative to routerRoot (e.g. "./app/data.tsx" for a file at <routerRoot>/app/data.tsx).
   // globbedRoutesToRouteContext expects Vite-style paths with the routerRoot as a prefix
   // (e.g. "/app/app/data.tsx"), so it can strip it via `path.replace(`/${routerRoot}/`, './')`.

package/src/ui/Slot.web.tsx

@@ -0,0 +1,9 @@
+import { Slot as RUISlot } from '@radix-ui/react-slot'
+import type { ForwardRefExoticComponent, HTMLAttributes, RefAttributes } from 'react'
+
+export interface Slot<
+  Props = HTMLAttributes<HTMLElement>,
+  Ref = HTMLElement,
+> extends ForwardRefExoticComponent<Props & RefAttributes<Ref>> {}
+
+export const Slot = RUISlot as Slot

package/src/ui/TabList.web.tsx

@@ -0,0 +1,27 @@
+import type { ComponentProps, HTMLAttributes, ReactElement } from 'react'
+
+// runtime specifier must stay extensionless: the web build emits Slot.web.tsx as Slot.mjs
+import { Slot as SlotImpl } from './Slot'
+import type { Slot as WebSlot } from './Slot.web'
+
+const Slot = SlotImpl as unknown as WebSlot
+
+export type TabListProps = HTMLAttributes<HTMLElement> & {
+  /** Forward props to child component and removes the extra `<nav>`. Useful for custom wrappers. */
+  asChild?: boolean
+}
+
+export function TabList({ asChild, ...props }: TabListProps) {
+  const Comp = asChild ? Slot : 'nav'
+
+  return <Comp {...props} />
+}
+
+/**
+ * @hidden
+ */
+export function isTabList(
+  child: ReactElement<any>
+): child is ReactElement<ComponentProps<typeof TabList>> {
+  return child.type === TabList
+}

package/src/ui/TabSlot.web.tsx

@@ -0,0 +1,90 @@
+import {
+  Activity,
+  type ComponentProps,
+  Fragment,
+  type ReactElement,
+  useState,
+} from 'react'
+import type { ScreenContainer } from 'react-native-screens'
+
+import { useNavigatorContext } from '../views/Navigator'
+import { TabContext, type TabsDescriptor } from './TabContext'
+import type { TabListProps } from './TabList'
+
+export type TabSlotProps = ComponentProps<typeof ScreenContainer> & {
+  /** Remove inactive screens from the visible DOM tree. */
+  detachInactiveScreens?: boolean
+  /** Override how each screen is rendered. */
+  renderFn?: typeof defaultTabsSlotRender
+}
+
+export type TabsSlotRenderOptions = {
+  index: number
+  isFocused: boolean
+  loaded: boolean
+  detachInactiveScreens: boolean
+}
+
+export function useTabSlot({
+  detachInactiveScreens = true,
+  renderFn = defaultTabsSlotRender,
+}: TabSlotProps = {}) {
+  const { state, descriptorsRef } = useNavigatorContext()
+  const descriptors = descriptorsRef.current
+  const focusedRouteKey = state.routes[state.index].key
+  const [loaded, setLoaded] = useState({ [focusedRouteKey]: true })
+
+  if (!loaded[focusedRouteKey]) {
+    setLoaded({ ...loaded, [focusedRouteKey]: true })
+  }
+
+  return (
+    <Fragment>
+      {state.routes.map((route, index) => {
+        const descriptor = descriptors[route.key] as unknown as TabsDescriptor
+
+        return (
+          <TabContext.Provider key={descriptor.route.key} value={descriptor.options}>
+            {renderFn(descriptor, {
+              index,
+              isFocused: state.index === index,
+              loaded: loaded[route.key],
+              detachInactiveScreens,
+            })}
+          </TabContext.Provider>
+        )
+      })}
+    </Fragment>
+  )
+}
+
+export function TabSlot(props: TabSlotProps) {
+  return useTabSlot(props)
+}
+
+export function defaultTabsSlotRender(
+  descriptor: TabsDescriptor,
+  { isFocused, loaded, detachInactiveScreens }: TabsSlotRenderOptions
+) {
+  const { lazy = true, unmountOnBlur } = descriptor.options
+
+  if ((unmountOnBlur || detachInactiveScreens) && !isFocused) return null
+  if (lazy && !loaded && !isFocused) return null
+
+  if (!isFocused) {
+    return (
+      <Activity key={descriptor.route.key} mode="hidden">
+        {descriptor.render()}
+      </Activity>
+    )
+  }
+
+  return <Fragment key={descriptor.route.key}>{descriptor.render()}</Fragment>
+}
+
+/**
+ * @hidden
+ */
+export function isTabSlot(child: ReactElement<any>): child is ReactElement<TabListProps> {
+  return child.type === TabSlot
+}

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
+}