one 1.22.0 → 1.23.0

package/src/router/web/WebStackView.tsx

@@ -1,47 +1,51 @@
 'use client'
 
+import type { ParamListBase } from '@react-navigation/core'
 import {
   StackActions,
-  type ParamListBase,
   type StackActionHelpers,
   type StackNavigationState,
-} from '@react-navigation/native'
+} from '@react-navigation/routers'
 import type {
   NativeStackNavigationEventMap,
   NativeStackNavigationOptions,
 } from '@react-navigation/native-stack'
-import { NativeStackView } from '@react-navigation/native-stack'
 import {
+  Activity,
   Fragment,
   useCallback,
-  useRef,
+  useEffect,
   useState,
   type ReactElement,
   type ReactNode,
 } from 'react'
+import useLatestCallback from 'use-latest-callback'
 
+import { devHeadlessNote } from '../../headless/devHeadlessNote'
+import { useWebPresentations } from '../../headless/Presentations'
+import type {
+  ModalPresentationOptions,
+  ScreenEntry,
+  SheetPresentationOptions,
+  WebPresentations,
+} from '../../headless/types'
 import {
-  convertStackStateToNonOverlayState,
-  findLastNonOverlayIndex,
-  isOverlayPresentation,
-} from './stackStateUtils'
-import {
-  type StackRender,
-  type StackRenderComponent,
-  type StackRenderProps,
-  useStackRender,
-} from './ScreenRenderContext'
+  StackStateProvider,
+  useStack,
+  type HeadlessStackDescriptors,
+} from '../../headless/useStack'
+import { findLastNonOverlayIndex } from './stackStateUtils'
 
-type RouteOptions = NativeStackNavigationOptions & {
-  render?: StackRender
+type RouteOptions = Omit<NativeStackNavigationOptions, 'presentation'> & {
   keepMounted?: boolean
+  presentation?: NativeStackNavigationOptions['presentation'] | 'sheet' | string
 }
 
 type Descriptors = Record<
   string,
   {
     options: RouteOptions
-    render: () => ReactNode
+    render: () => ReactElement
     navigation: any
   }
 >
@@ -49,216 +53,172 @@ type Descriptors = Record<
 type WebStackViewProps = {
   state: StackNavigationState<ParamListBase>
   navigation: StackActionHelpers<ParamListBase> & {
+    goBack: () => void
     dispatch: (action: any) => void
   }
   descriptors: Descriptors
-  describe?: (route: any, placeholder?: boolean) => any
+  customChildren?: ReactNode[]
   eventMap?: NativeStackNavigationEventMap
 }
 
-/**
- * Resolve which render component to use for an overlay route, in order:
- *   1. options.render?.web        (per-route override)
- *   2. context.web                (Stack-level default; also fed by setupRendering)
- * Returns undefined when neither is set.
- */
-export function resolveOverlayRender(
-  options: RouteOptions | undefined,
-  contextRender: StackRender | undefined
-): StackRenderComponent | undefined {
-  return options?.render?.web ?? contextRender?.web
-}
-
-type PersistentSlot = {
-  routeName: string
-  Render: StackRenderComponent
-  options: RouteOptions
-  content: ReactElement
-}
-
 export function WebStackView({
   state,
   navigation,
   descriptors,
-  describe,
+  customChildren,
 }: WebStackViewProps) {
-  const contextRender = useStackRender()
+  return (
+    <StackStateProvider state={state} descriptors={descriptors as HeadlessStackDescriptors}>
+      <HeadlessStackView
+        state={state}
+        navigation={navigation}
+        descriptors={descriptors}
+        customChildren={customChildren}
+      />
+    </StackStateProvider>
+  )
+}
 
-  // Persistent slots survive route pops for routes with `keepMounted: true`.
-  // Keyed by route NAME (not key) so re-navigation reuses the same mount.
-  const persistentSlotsRef = useRef<Map<string, PersistentSlot>>(new Map())
+function HeadlessStackView({
+  state,
+  navigation,
+  descriptors,
+  customChildren,
+}: WebStackViewProps) {
+  const stack = useStack()
+  const presentations = useWebPresentations()
 
-  // Capture / refresh persistent slots from current descriptors.
-  for (const route of state.routes) {
-    const desc = descriptors[route.key]
-    if (!desc) continue
-    const { options } = desc
-    if (!options.keepMounted) continue
-    if (!isOverlayPresentation(options)) continue
-    const Render = resolveOverlayRender(options, contextRender)
-    if (!Render) continue
-    if (persistentSlotsRef.current.has(route.name)) continue
-    persistentSlotsRef.current.set(route.name, {
-      routeName: route.name,
-      Render,
-      options,
-      content: desc.render() as ReactElement,
-    })
+  if (customChildren?.length) {
+    return <Fragment>{customChildren}</Fragment>
   }
 
-  // Compute which routes are currently focused as overlays (trailing).
-  const isOverlayCandidate = (options: NativeStackNavigationOptions | undefined | null) =>
-    isOverlayPresentation(options) &&
-    resolveOverlayRender(options ?? undefined, contextRender) !== undefined
+  devHeadlessNote('Stack')
 
-  const nonOverlay = convertStackStateToNonOverlayState(
+  const lastBaseIndex = findLastNonOverlayIndex(
     state,
     descriptors,
-    isOverlayCandidate
+    (options) => getPresentationType(options) !== undefined
   )
-  const underlyingState = {
-    ...state,
-    routes: nonOverlay.routes,
-    index: nonOverlay.index,
-  } as StackNavigationState<ParamListBase>
-
-  const lastNonOverlay = findLastNonOverlayIndex(state, descriptors, isOverlayCandidate)
-  const trailingOverlays = state.routes.slice(lastNonOverlay + 1)
-
-  // Track which route NAMES are currently focused as a trailing overlay, so
-  // persistent slots know whether to be open or just kept-mounted-hidden.
-  const focusedOverlayNames = new Set(trailingOverlays.map((r) => r.name))
-
-  // Trailing overlays that AREN'T keepMounted render in the regular slot.
-  const regularOverlays = trailingOverlays.filter(
-    (r) => !descriptors[r.key]?.options.keepMounted
+  const baseRouteKeys = new Set(
+    state.routes.slice(0, lastBaseIndex + 1).map((route) => route.key)
   )
+  const baseFocusedKey = state.routes[lastBaseIndex]?.key
+  const overlayRoutes = state.routes.slice(lastBaseIndex + 1)
 
   return (
     <Fragment>
-      <NativeStackView
-        state={underlyingState}
-        descriptors={descriptors as any}
-        navigation={navigation as any}
-        describe={describe as any}
-      />
-
-      {regularOverlays.map((route) => (
-        <OverlayHost
-          key={route.key}
-          route={route}
-          descriptor={descriptors[route.key]!}
-          contextRender={contextRender}
-          open
-          onDismiss={() =>
-            navigation.dispatch({
-              ...StackActions.pop(),
-              source: route.key,
-              target: state.key,
-            })
-          }
-        />
-      ))}
-
-      {/* Persistent slots - render once each, never unmount. `open` toggles
-          based on whether the route is the current trailing overlay. */}
-      {Array.from(persistentSlotsRef.current.values()).map((slot) => (
-        <PersistentOverlayHost
-          key={slot.routeName}
-          slot={slot}
-          open={focusedOverlayNames.has(slot.routeName)}
-          onDismiss={() => {
-            // Find the live route key for this name (if any) and pop it.
-            const live = state.routes.find((r) => r.name === slot.routeName)
-            if (live) {
+      {stack.screens.map((screen) => {
+        if (!baseRouteKeys.has(screen.key)) return null
+
+        if (screen.key === baseFocusedKey) {
+          return screen.keepMounted ? (
+            <Activity key={screen.key} mode="visible">
+              {screen.element}
+            </Activity>
+          ) : (
+            <Fragment key={screen.key}>{screen.element}</Fragment>
+          )
+        }
+
+        if (!screen.keepMounted) return null
+
+        return (
+          <Activity key={screen.key} mode="hidden">
+            {screen.element}
+          </Activity>
+        )
+      })}
+
+      {overlayRoutes.map((route) => {
+        const screen = stack.screens.find((entry) => entry.key === route.key)
+        const type = getPresentationType(descriptors[route.key]?.options)
+        if (!screen || !type) return null
+
+        return (
+          <PresentationScreen
+            key={route.key}
+            screen={screen}
+            type={type}
+            presentations={presentations}
+            onDismiss={() =>
               navigation.dispatch({
                 ...StackActions.pop(),
-                source: live.key,
+                source: route.key,
                 target: state.key,
               })
             }
-          }}
-        />
-      ))}
+          />
+        )
+      })}
     </Fragment>
   )
 }
 
-export function OverlayHost({
-  route,
-  descriptor,
-  contextRender,
-  open,
+function PresentationScreen({
+  screen,
+  type,
+  presentations,
   onDismiss,
 }: {
-  route: { key: string; name: string }
-  descriptor: Descriptors[string]
-  contextRender: StackRender | undefined
-  open: boolean
+  screen: ScreenEntry
+  type: 'sheet' | 'modal'
+  presentations: WebPresentations | undefined
   onDismiss: () => void
 }) {
-  const dismiss = useStableCallback(onDismiss)
-
-  const options = descriptor.options
-  const Render = resolveOverlayRender(options, contextRender)
-  const content = descriptor.render()
-
-  if (!Render || !isOverlayPresentation(options)) {
-    return <Fragment>{content}</Fragment>
-  }
-
-  const renderProps: StackRenderProps = {
-    routeKey: route.key,
-    routeName: route.name,
-    presentation: options.presentation!,
-    open,
-    dismiss,
-    dismissible: options.gestureEnabled ?? true,
-    sheetAllowedDetents: options.sheetAllowedDetents,
-    sheetGrabberVisible: options.sheetGrabberVisible,
-    sheetCornerRadius: options.sheetCornerRadius,
-    sheetInitialDetentIndex: options.sheetInitialDetentIndex,
-    sheetLargestUndimmedDetentIndex: options.sheetLargestUndimmedDetentIndex,
-    sheetExpandsWhenScrolledToEdge: options.sheetExpandsWhenScrolledToEdge,
-    children: content,
+  const dismiss = useLatestCallback(onDismiss)
+  const onOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (!nextOpen) dismiss()
+    },
+    [dismiss]
+  )
+  // mount closed and open on the next commit, so sheet/modal components that
+  // animate on a false -> true transition still play their enter animation
+  const [open, setOpen] = useState(false)
+  useEffect(() => setOpen(true), [])
+
+  if (type === 'sheet') {
+    const Sheet = presentations?.sheet
+    if (!Sheet) return screen.element
+    return (
+      <Sheet
+        open={open}
+        onOpenChange={onOpenChange}
+        options={screen.options as SheetPresentationOptions}
+        screen={screen}
+      >
+        {screen.element}
+      </Sheet>
+    )
   }
 
-  return <Render {...renderProps} />
+  const Modal = presentations?.modal
+  if (!Modal) return screen.element
+  return (
+    <Modal
+      open={open}
+      onOpenChange={onOpenChange}
+      options={screen.options as ModalPresentationOptions}
+      screen={screen}
+    >
+      {screen.element}
+    </Modal>
+  )
 }
 
-function PersistentOverlayHost({
-  slot,
-  open,
-  onDismiss,
-}: {
-  slot: PersistentSlot
-  open: boolean
-  onDismiss: () => void
-}) {
-  const dismiss = useStableCallback(onDismiss)
-  const { Render, options, content, routeName } = slot
-
-  const renderProps: StackRenderProps = {
-    routeKey: `__keepMounted:${routeName}`,
-    routeName,
-    presentation: options.presentation!,
-    open,
-    dismiss,
-    dismissible: options.gestureEnabled ?? true,
-    sheetAllowedDetents: options.sheetAllowedDetents,
-    sheetGrabberVisible: options.sheetGrabberVisible,
-    sheetCornerRadius: options.sheetCornerRadius,
-    sheetInitialDetentIndex: options.sheetInitialDetentIndex,
-    sheetLargestUndimmedDetentIndex: options.sheetLargestUndimmedDetentIndex,
-    sheetExpandsWhenScrolledToEdge: options.sheetExpandsWhenScrolledToEdge,
-    children: content,
+function getPresentationType(
+  options: { presentation?: string } | undefined | null
+): 'sheet' | 'modal' | undefined {
+  const presentation = options?.presentation
+  if (!presentation || presentation === 'card' || presentation === 'push') {
+    return undefined
   }
-
-  return <Render {...renderProps} />
-}
-
-function useStableCallback<T extends (...args: any[]) => any>(fn: T): T {
-  const [ref] = useState(() => ({ current: fn }))
-  ref.current = fn
-  return useCallback(((...args: any[]) => ref.current(...args)) as T, [ref])
+  if (
+    presentation === 'sheet' ||
+    presentation === 'formSheet' ||
+    presentation === 'pageSheet'
+  ) {
+    return 'sheet'
+  }
+  return 'modal'
 }

package/src/router/web/stackStateUtils.ts

@@ -13,7 +13,8 @@ const OVERLAY_PRESENTATIONS = [
 
 type OverlayPresentation = (typeof OVERLAY_PRESENTATIONS)[number]
 
-type DescriptorMap = Record<string, { options: NativeStackNavigationOptions }>
+// structural minimum: callers pass descriptor maps with widened option types
+type DescriptorMap = Record<string, { options: Record<string, any> }>
 
 export function isOverlayPresentation(
   options: NativeStackNavigationOptions | undefined | null

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