one 1.21.13 → 1.23.0

package/src/fallbackViews/Sitemap.web.tsx

@@ -0,0 +1,149 @@
+import type { NativeStackNavigationOptions } from '@react-navigation/native-stack'
+import * as React from 'react'
+import { Link } from '../link/Link'
+import { matchDeepDynamicRouteName } from '../router/matchers'
+import type { RouteNode } from '../router/Route'
+import { getSortedRoutes } from '../router/router'
+
+const INDENT = 24
+
+export function getNavOptions(): NativeStackNavigationOptions {
+  return {
+    title: 'sitemap',
+    headerShown: false,
+    presentation: 'modal',
+    animation: 'default',
+    headerLargeTitle: false,
+    headerTitleStyle: { color: 'white' },
+    headerTintColor: 'white',
+    headerLargeTitleStyle: { color: 'white' },
+    headerStyle: { backgroundColor: 'black' },
+  }
+}
+
+export function Sitemap() {
+  return (
+    <main
+      style={{
+        minHeight: '100vh',
+        boxSizing: 'border-box',
+        backgroundColor: 'black',
+        color: 'white',
+        padding: 12,
+      }}
+    >
+      <div style={{ width: 'min(960px, 90vw)', margin: '0 auto' }}>
+        <h1 style={{ fontSize: 28, margin: '12px 0 20px' }}>Sitemap</h1>
+        {getSortedRoutes().map((route) => (
+          <div
+            key={route.contextKey}
+            style={{
+              border: '1px solid #323232',
+              borderRadius: 19,
+              marginBottom: 12,
+              overflow: 'hidden',
+            }}
+          >
+            <FileItem route={route} />
+          </div>
+        ))}
+      </div>
+    </main>
+  )
+}
+
+function FileItem({
+  route,
+  level = 0,
+  parents = [],
+  isInitial = false,
+}: {
+  route: RouteNode
+  level?: number
+  parents?: string[]
+  isInitial?: boolean
+}) {
+  const disabled = route.children.length > 0
+  const segments = React.useMemo(
+    () => [...parents, ...route.route.split('/')],
+    [parents, route.route]
+  )
+  const href = React.useMemo(
+    () =>
+      '/' +
+      segments
+        .map((segment) => {
+          if (matchDeepDynamicRouteName(segment)) {
+            return `${segment}/${Date.now()}`
+          }
+          return segment === 'index' ? '' : segment
+        })
+        .filter(Boolean)
+        .join('/'),
+    [segments]
+  )
+  const filename = React.useMemo(() => {
+    const contextSegments = route.contextKey.split('/')
+    if (route.contextKey.match(/_layout\.[jt]sx?$/)) {
+      return contextSegments.slice(-2).join('/')
+    }
+    return contextSegments.slice(-route.route.split('/').length).join('/')
+  }, [route])
+  const content = (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 16,
+        minHeight: 56,
+        boxSizing: 'border-box',
+        padding: `16px ${INDENT}px 16px ${INDENT + level * INDENT}px`,
+        color: 'white',
+        opacity: disabled ? 0.6 : 1,
+      }}
+    >
+      <span style={{ fontSize: 20 }}>
+        {route.children.length ? '🗀' : '📄'} {filename}
+      </span>
+      <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        {(isInitial || route.generated) && (
+          <span style={{ fontSize: 13 }}>{isInitial ? 'Initial' : 'Virtual'}</span>
+        )}
+        {!disabled && <span aria-hidden="true">›</span>}
+      </span>
+    </div>
+  )
+
+  return (
+    <>
+      {!route.internal &&
+        (disabled ? (
+          content
+        ) : (
+          <Link
+            href={href}
+            replace
+            accessibilityLabel={route.contextKey}
+            style={
+              {
+                display: 'block',
+                textDecoration: 'none',
+              } satisfies React.CSSProperties as any
+            }
+          >
+            {content}
+          </Link>
+        ))}
+      {route.children.map((child) => (
+        <FileItem
+          key={child.contextKey}
+          route={child}
+          isInitial={route.initialRouteName === child.route}
+          parents={segments}
+          level={level + (route.generated ? 0 : 1)}
+        />
+      ))}
+    </>
+  )
+}

package/src/fallbackViews/Unmatched.web.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react'
+import { usePathname, useRouter } from '../hooks'
+import { Link } from '../link/Link'
+
+function NoSSR({ children }: { children: React.ReactNode }) {
+  const [render, setRender] = React.useState(false)
+
+  React.useEffect(() => {
+    setRender(true)
+  }, [])
+
+  return render ? <>{children}</> : null
+}
+
+function CurrentURL() {
+  return <>{window.location.href}</>
+}
+
+export function Unmatched() {
+  const router = useRouter()
+  const pathname = usePathname()
+
+  return (
+    <main
+      style={{
+        minHeight: '100vh',
+        boxSizing: 'border-box',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'black',
+        color: 'white',
+        padding: 24,
+        textAlign: 'center',
+      }}
+    >
+      <h1
+        style={{
+          fontSize: 36,
+          paddingBottom: 12,
+          margin: '0 0 12px',
+          borderBottom: '1px solid #323232',
+        }}
+      >
+        Unmatched Route
+      </h1>
+      <p style={{ fontSize: 18, margin: '0 0 12px' }}>
+        Page could not be found.{' '}
+        <button
+          type="button"
+          onClick={() => {
+            if (router.canGoBack()) {
+              router.back()
+            } else {
+              router.replace('/')
+            }
+          }}
+          style={{
+            appearance: 'none',
+            border: 0,
+            padding: 0,
+            background: 'transparent',
+            color: 'rgba(255,255,255,0.6)',
+            cursor: 'pointer',
+            font: 'inherit',
+            textDecoration: 'underline',
+          }}
+        >
+          Go back.
+        </button>
+      </p>
+      <NoSSR>
+        <Link
+          href={pathname}
+          replace
+          style={{ color: 'rgba(255,255,255,0.4)', textAlign: 'center' }}
+        >
+          <CurrentURL />
+        </Link>
+      </NoSSR>
+      <Link
+        href="/_sitemap"
+        replace
+        style={{ color: 'rgba(255,255,255,0.4)', marginTop: 8, textAlign: 'center' }}
+      >
+        Sitemap
+      </Link>
+    </main>
+  )
+}

package/src/fork/NavigationContainer.tsx

@@ -25,7 +25,6 @@ import {
 // import type { DocumentTitleOptions, LinkingOptions, LocaleDirection } from './types'
 // import { UnhandledLinkingContext } from './UnhandledLinkingContext'
 import {
-  DefaultTheme,
   type DocumentTitleOptions,
   LinkingContext,
   type LinkingOptions,
@@ -34,9 +33,10 @@ import {
   UNSTABLE_UnhandledLinkingContext as UnhandledLinkingContext,
 } from '@react-navigation/native'
 import * as React from 'react'
-import { I18nManager } from 'react-native'
 import useLatestCallback from 'use-latest-callback'
 // @modified - end
+import { getLocaleDirection } from './localeDirection'
+import { DefaultTheme } from './theme'
 import { useBackButton } from './useBackButton'
 import { useDocumentTitle } from './useDocumentTitle'
 import { useLinking } from './useLinking'
@@ -53,9 +53,6 @@ declare global {
 
 globalThis.REACT_NAVIGATION_DEVTOOLS = new WeakMap()
 
-// @modified - SSR-optimized container (bypasses BaseNavigationContainer's 32+ hooks)
-import { SSRNavigationContainer } from './SSRNavigationContainer'
-
 type Props<ParamList extends {}> = NavigationContainerProps & {
   direction?: LocaleDirection
   linking?: LinkingOptions<ParamList>
@@ -80,42 +77,18 @@ type Props<ParamList extends {}> = NavigationContainerProps & {
  * @param props.ref Ref object which refers to the navigation object containing helper methods.
  */
 function NavigationContainerInner(
-  props: Props<ParamListBase>,
+  {
+    direction = getLocaleDirection(),
+    theme = DefaultTheme,
+    linking,
+    fallback = null,
+    documentTitle,
+    onReady,
+    onStateChange,
+    ...rest
+  }: Props<ParamListBase>,
   ref?: React.Ref<NavigationContainerRef<ParamListBase> | null>
 ) {
-  // @modified - SSR fast path: bypass BaseNavigationContainer entirely
-  // BaseNavigationContainer has 32+ hooks and 7 providers that are all
-  // unnecessary on SSR (event emitters, child listeners, state sync, etc.)
-  // we provide only the minimal contexts that child navigators read
-  // @modified - SSR fast path: bypass BaseNavigationContainer entirely
-  // eliminates 32+ hooks and reduces 8 providers to 4
-  if (typeof window === 'undefined') {
-    const { theme = DefaultTheme, initialState, linking, children } = props
-    return (
-      <SSRNavigationContainer initialState={initialState} theme={theme} linking={linking}>
-        {children}
-      </SSRNavigationContainer>
-    )
-  }
-
-  return <NavigationContainerClientInner {...props} forwardedRef={ref} />
-}
-
-// @modified - full client NavigationContainer with all hooks and providers
-function NavigationContainerClientInner({
-  forwardedRef,
-  direction = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr',
-  theme = DefaultTheme,
-  linking,
-  fallback = null,
-  documentTitle,
-  onReady,
-  onStateChange,
-  ...rest
-}: Props<ParamListBase> & {
-  forwardedRef?: React.Ref<NavigationContainerRef<ParamListBase> | null>
-}) {
-  const ref = forwardedRef
   const isLinkingEnabled = linking ? linking.enabled !== false : false
 
   if (linking?.config) {

package/src/fork/localeDirection.native.ts

@@ -0,0 +1,6 @@
+import type { LocaleDirection } from '@react-navigation/native'
+import { I18nManager } from 'react-native'
+
+export function getLocaleDirection(): LocaleDirection {
+  return I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'
+}

package/src/fork/localeDirection.ts

@@ -0,0 +1,11 @@
+import type { LocaleDirection } from '@react-navigation/native'
+
+/**
+ * Web is always ltr here: this only feeds react-navigation's LocaleDirContext,
+ * which drives native gestures and animations, and reading the document on the
+ * client would render differently than SSR. Style your rtl layout with css.
+ * The .native sibling reads the real value from I18nManager.
+ */
+export function getLocaleDirection(): LocaleDirection {
+  return 'ltr'
+}

package/src/fork/theme.native.ts

@@ -0,0 +1 @@
+export { DarkTheme, DefaultTheme } from '@react-navigation/native'

package/src/fork/theme.ts

@@ -0,0 +1,41 @@
+import type { Theme } from '@react-navigation/native'
+
+// web copy of react-navigation's themes (MIT). importing them from the package
+// pulls in its theming/fonts, which reads react-native's Platform. the .native
+// sibling re-exports the real ones so native stays byte-identical.
+
+const WEB_FONT_STACK =
+  'system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
+
+const fonts = {
+  regular: { fontFamily: WEB_FONT_STACK, fontWeight: '400' },
+  medium: { fontFamily: WEB_FONT_STACK, fontWeight: '500' },
+  bold: { fontFamily: WEB_FONT_STACK, fontWeight: '600' },
+  heavy: { fontFamily: WEB_FONT_STACK, fontWeight: '700' },
+} as const
+
+export const DefaultTheme: Theme = {
+  dark: false,
+  colors: {
+    primary: 'rgb(0, 122, 255)',
+    background: 'rgb(242, 242, 242)',
+    card: 'rgb(255, 255, 255)',
+    text: 'rgb(28, 28, 30)',
+    border: 'rgb(216, 216, 216)',
+    notification: 'rgb(255, 59, 48)',
+  },
+  fonts,
+}
+
+export const DarkTheme: Theme = {
+  dark: true,
+  colors: {
+    primary: 'rgb(10, 132, 255)',
+    background: 'rgb(1, 1, 1)',
+    card: 'rgb(18, 18, 18)',
+    text: 'rgb(229, 229, 231)',
+    border: 'rgb(39, 39, 41)',
+    notification: 'rgb(255, 69, 58)',
+  },
+  fonts,
+}

package/src/headless/Presentations.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import { createContext, useContext, useMemo, type ReactNode } from 'react'
+
+import type { WebPresentations } from './types'
+
+const WebPresentationsContext = createContext<WebPresentations | undefined>(undefined)
+
+export type PresentationsProps = {
+  /**
+   * components that render `presentation` screens on web. omit one and that
+   * presentation keeps rendering its content inline with no chrome.
+   */
+  web?: WebPresentations
+  children?: ReactNode
+}
+
+export function Presentations({ web, children }: PresentationsProps) {
+  const sheet = web?.sheet
+  const modal = web?.modal
+  // memo on the components themselves so an inline `web={{ ... }}` object
+  // literal doesn't re-render every mounted presentation
+  const value = useMemo(
+    () => (sheet || modal ? { sheet, modal } : undefined),
+    [sheet, modal]
+  )
+
+  return (
+    <WebPresentationsContext.Provider value={value}>
+      {children}
+    </WebPresentationsContext.Provider>
+  )
+}
+
+export function useWebPresentations() {
+  return useContext(WebPresentationsContext)
+}

package/src/headless/children.ts

@@ -0,0 +1,25 @@
+import { Children, isValidElement, type ReactNode } from 'react'
+
+// config components (Screen, Header, Toolbar, ...) mark themselves with this
+// static so navigators can tell config children from custom layout children
+export const NAVIGATOR_CONFIG = '__oneNavigatorConfig'
+
+export function isNavigatorConfigChild(child: unknown): boolean {
+  return (
+    isValidElement(child) &&
+    typeof child.type === 'function' &&
+    (child.type as any)[NAVIGATOR_CONFIG] === true
+  )
+}
+
+// the one mechanical rule from plans/headless-navigators.md: a navigator
+// child that is not config replaces the headless default on web
+export function getCustomNavigatorChildren(children: ReactNode): ReactNode[] {
+  const custom: ReactNode[] = []
+  Children.forEach(children, (child) => {
+    if (child != null && !isNavigatorConfigChild(child)) {
+      custom.push(child)
+    }
+  })
+  return custom
+}

package/src/headless/devHeadlessNote.ts

@@ -0,0 +1,13 @@
+const noted = new Set<string>()
+
+// one-line dev note the first time a navigator renders headless on web,
+// so the missing native chrome never reads as breakage
+export function devHeadlessNote(navigator: string) {
+  if (process.env.NODE_ENV === 'development' && !noted.has(navigator)) {
+    noted.add(navigator)
+    console.info(
+      `[one] <${navigator}> renders headless on web (just the matched route). ` +
+        `Pass your own layout as a child, or build one with use${navigator}().`
+    )
+  }
+}

package/src/headless/keepMounted.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import { Activity, Fragment, useEffect, useState } from 'react'
+
+import type { ScreenEntry } from './types'
+
+/**
+ * Tabs and Drawer hold every route in navigation state from the start, so a
+ * `keepMounted` screen must only stay mounted once it has actually been
+ * focused. Matches react-navigation's lazy behavior on native.
+ */
+export function useVisitedScreens(focusedKey: string) {
+  const [visited, setVisited] = useState<string[]>(() => [focusedKey])
+
+  useEffect(() => {
+    setVisited((prev) => (prev.includes(focusedKey) ? prev : [...prev, focusedKey]))
+  }, [focusedKey])
+
+  return visited
+}
+
+export function renderKeptMountedScreens(screens: ScreenEntry[], visited: string[]) {
+  return (
+    <Fragment>
+      {screens.map((screen) => {
+        if (screen.isFocused) {
+          return screen.keepMounted ? (
+            <Activity key={screen.key} mode="visible">
+              {screen.element}
+            </Activity>
+          ) : (
+            <Fragment key={screen.key}>{screen.element}</Fragment>
+          )
+        }
+
+        if (!screen.keepMounted || !visited.includes(screen.key)) return null
+
+        return (
+          <Activity key={screen.key} mode="hidden">
+            {screen.element}
+          </Activity>
+        )
+      })}
+    </Fragment>
+  )
+}

package/src/headless/types.ts

@@ -0,0 +1,72 @@
+import type { ComponentType, ReactElement, ReactNode } from 'react'
+
+// shared contract for headless web navigators. see plans/headless-navigators.md
+
+export type ScreenEntry = {
+  key: string
+  name: string
+  params: Record<string, any>
+  href: string
+  isFocused: boolean
+  keepMounted: boolean
+  // compiled options: semantic keys plus opaque passthrough of preset keys
+  options: Record<string, any>
+  // lazy: rendering it mounts the route (descriptor.render underneath)
+  element: ReactElement
+}
+
+export type UseStackResult = {
+  screens: ScreenEntry[]
+  focused: ScreenEntry
+}
+
+export type UseTabsResult = {
+  screens: ScreenEntry[]
+  focused: ScreenEntry
+}
+
+export type UseDrawerResult = {
+  screens: ScreenEntry[]
+  focused: ScreenEntry
+  isOpen: boolean
+  open: () => void
+  close: () => void
+  toggle: () => void
+}
+
+// the subset of Stack.Screen options each presentation understands. these are a
+// narrowed view of ScreenEntry['options'], never a copy of it
+export type SheetPresentationOptions = {
+  sheetAllowedDetents?: number[] | 'fitToContents'
+  sheetGrabberVisible?: boolean
+  sheetCornerRadius?: number
+  sheetExpandsWhenScrolledToEdge?: boolean
+  gestureEnabled?: boolean
+  title?: string
+}
+
+export type ModalPresentationOptions = {
+  gestureEnabled?: boolean
+  title?: string
+}
+
+type PresentationProps<Options> = {
+  /** whether the presentation should be visible. toggles as you navigate */
+  open: boolean
+  /** call with false when your UI dismisses. pops the screen */
+  onOpenChange: (open: boolean) => void
+  /** the presentation options set on the screen, same vocabulary as native */
+  options: Options
+  /** the full screen entry: name, params, complete options */
+  screen: ScreenEntry
+  /** the screen's content */
+  children: ReactNode
+}
+
+export type SheetPresentationProps = PresentationProps<SheetPresentationOptions>
+export type ModalPresentationProps = PresentationProps<ModalPresentationOptions>
+
+export type WebPresentations = {
+  sheet?: ComponentType<SheetPresentationProps>
+  modal?: ComponentType<ModalPresentationProps>
+}

package/src/headless/useDrawer.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+import {
+  DrawerActions,
+  type DrawerActionHelpers,
+  type DrawerNavigationState,
+  type ParamListBase,
+} from '@react-navigation/routers'
+import {
+  createContext,
+  useContext,
+  useMemo,
+  type PropsWithChildren,
+  type ReactElement,
+} from 'react'
+
+import { getPathFromState } from '../fork/getPathFromState'
+import { getResolvedLinking } from '../router/linkingConfig'
+import type { UseDrawerResult } from './types'
+
+export type HeadlessDrawerDescriptors = Record<
+  string,
+  {
+    options: Record<string, any>
+    render: () => ReactElement
+  }
+>
+
+type HeadlessDrawerNavigation = DrawerActionHelpers<ParamListBase> & {
+  dispatch: (action: any) => void
+}
+
+type DrawerStateProviderProps = PropsWithChildren<{
+  state: DrawerNavigationState<ParamListBase>
+  descriptors: HeadlessDrawerDescriptors
+  navigation: HeadlessDrawerNavigation
+}>
+
+const DrawerContext = createContext<UseDrawerResult | null>(null)
+
+export function DrawerStateProvider({
+  state,
+  descriptors,
+  navigation,
+  children,
+}: DrawerStateProviderProps) {
+  const linking = getResolvedLinking()
+  const value = useMemo<UseDrawerResult>(() => {
+    const screens = state.routes.map((route, index) => {
+      const descriptor = descriptors[route.key]!
+      const options = descriptor.options
+      const href = (linking?.getPathFromState ?? getPathFromState)(
+        { ...state, index },
+        linking?.config
+      )
+
+      return {
+        key: route.key,
+        name: route.name,
+        params: (route.params ?? {}) as Record<string, any>,
+        href,
+        isFocused: index === state.index,
+        keepMounted: options.keepMounted === true,
+        options,
+        element: descriptor.render(),
+      }
+    })
+
+    return {
+      screens,
+      focused: screens[state.index]!,
+      isOpen: state.history.some((entry) => entry.type === 'drawer'),
+      open: () => navigation.dispatch(DrawerActions.openDrawer()),
+      close: () => navigation.dispatch(DrawerActions.closeDrawer()),
+      toggle: () => navigation.dispatch(DrawerActions.toggleDrawer()),
+    }
+  }, [descriptors, linking, navigation, state])
+
+  return <DrawerContext.Provider value={value}>{children}</DrawerContext.Provider>
+}
+
+export function useDrawer(): UseDrawerResult {
+  const value = useContext(DrawerContext)
+  if (!value) {
+    throw new Error('useDrawer must be used inside a Drawer navigator')
+  }
+  return value
+}