react-router-dom 6.18.0 → 6.19.0-pre.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # `react-router-dom`
 
+## 6.19.0-pre.0
+
+### Minor Changes
+
+- Add `unstable_flushSync` option to `useNavigate`/`useSumbit`/`fetcher.load`/`fetcher.submit` to opt-out of `React.startTransition` and into `ReactDOM.flushSync` for state updates ([#11005](https://github.com/remix-run/react-router/pull/11005))
+- Allow `unstable_usePrompt` to accept a `BlockerFunction` in addition to a `boolean` ([#10991](https://github.com/remix-run/react-router/pull/10991))
+
+### Patch Changes
+
+- Fix issue where a changing fetcher `key` in a `useFetcher` that remains mounted wasn't getting picked up ([#11009](https://github.com/remix-run/react-router/pull/11009))
+- Fix `useFormAction` which was incorrectly inheriting the `?index` query param from child route `action` submissions ([#11025](https://github.com/remix-run/react-router/pull/11025))
+- Fix `NavLink` `active` logic when `to` location has a trailing slash ([#10734](https://github.com/remix-run/react-router/pull/10734))
+- Updated dependencies:
+  - `react-router@6.19.0-pre.0`
+  - `@remix-run/router@1.12.0-pre.0`
+
 ## 6.18.0
 
 ### Minor Changes

package/dist/dom.d.ts

@@ -85,6 +85,10 @@ export interface SubmitOptions {
      * navigation when using the <ScrollRestoration> component
      */
     preventScrollReset?: boolean;
+    /**
+     * Enable flushSync for this navigation's state updates
+     */
+    unstable_flushSync?: boolean;
     /**
      * Enable view transitions on this submission navigation
      */

package/dist/index.d.ts

@@ -4,13 +4,13 @@
  */
 import * as React from "react";
 import type { FutureConfig, Location, NavigateOptions, RelativeRoutingType, RouteObject, RouterProviderProps, To } from "react-router";
-import type { Fetcher, FormEncType, FormMethod, FutureConfig as RouterFutureConfig, GetScrollRestorationKeyFunction, History, HTMLFormMethod, HydrationState, Router as RemixRouter, V7_FormMethod } from "@remix-run/router";
+import type { Fetcher, FormEncType, FormMethod, FutureConfig as RouterFutureConfig, GetScrollRestorationKeyFunction, History, HTMLFormMethod, HydrationState, Router as RemixRouter, V7_FormMethod, BlockerFunction } from "@remix-run/router";
 import type { SubmitOptions, ParamKeyValuePair, URLSearchParamsInit, SubmitTarget } from "./dom";
 import { createSearchParams } from "./dom";
 export type { FormEncType, FormMethod, GetScrollRestorationKeyFunction, ParamKeyValuePair, SubmitOptions, URLSearchParamsInit, V7_FormMethod, };
 export { createSearchParams };
 export type { ActionFunction, ActionFunctionArgs, AwaitProps, unstable_Blocker, unstable_BlockerFunction, DataRouteMatch, DataRouteObject, ErrorResponse, Fetcher, Hash, IndexRouteObject, IndexRouteProps, JsonFunction, LazyRouteFunction, LayoutRouteProps, LoaderFunction, LoaderFunctionArgs, Location, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigation, Navigator, NonIndexRouteObject, OutletProps, Params, ParamParseKey, Path, PathMatch, Pathname, PathPattern, PathRouteProps, RedirectFunction, RelativeRoutingType, RouteMatch, RouteObject, RouteProps, RouterProps, RouterProviderProps, RoutesProps, Search, ShouldRevalidateFunction, ShouldRevalidateFunctionArgs, To, UIMatch, } from "react-router";
-export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, Routes, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, defer, isRouteErrorResponse, generatePath, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, renderMatches, resolvePath, useActionData, useAsyncError, useAsyncValue, unstable_useBlocker, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, } from "react-router";
+export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, Routes, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, defer, isRouteErrorResponse, generatePath, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, renderMatches, resolvePath, useActionData, useAsyncError, useAsyncValue, useBlocker, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, } from "react-router";
 /** @internal */
 export { UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_NavigationContext, UNSAFE_LocationContext, UNSAFE_RouteContext, UNSAFE_useRouteId, } from "react-router";
 declare global {
@@ -31,6 +31,7 @@ type ViewTransitionContextObject = {
     isTransitioning: false;
 } | {
     isTransitioning: true;
+    flushSync: boolean;
     currentLocation: Location;
     nextLocation: Location;
 };
@@ -111,7 +112,6 @@ export interface NavLinkProps extends Omit<LinkProps, "className" | "style" | "c
     className?: string | ((props: NavLinkRenderProps) => string | undefined);
     end?: boolean;
     style?: React.CSSProperties | ((props: NavLinkRenderProps) => React.CSSProperties | undefined);
-    unstable_viewTransition?: boolean;
 }
 /**
  * A `<Link>` wrapper that knows if it's "active" or not.
@@ -252,7 +252,9 @@ export declare function useFormAction(action?: string, { relative }?: {
 export type FetcherWithComponents<TData> = Fetcher<TData> & {
     Form: React.ForwardRefExoticComponent<FetcherFormProps & React.RefAttributes<HTMLFormElement>>;
     submit: FetcherSubmitFunction;
-    load: (href: string) => void;
+    load: (href: string, opts?: {
+        unstable_flushSync?: boolean;
+    }) => void;
 };
 /**
  * Interacts with route loaders and actions without causing a navigation. Great
@@ -295,8 +297,8 @@ export declare function useBeforeUnload(callback: (event: BeforeUnloadEvent) =>
  * very incorrectly in some cases) across browsers if user click addition
  * back/forward navigations while the confirm is open.  Use at your own risk.
  */
-declare function usePrompt({ when, message }: {
-    when: boolean;
+declare function usePrompt({ when, message, }: {
+    when: boolean | BlockerFunction;
     message: string;
 }): void;
 export { usePrompt as unstable_usePrompt };

package/dist/index.js

@@ -1,5 +1,5 @@
 /**
- * React Router DOM v6.18.0
+ * React Router DOM v6.19.0-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -9,8 +9,9 @@
  * @license MIT
  */
 import * as React from 'react';
-import { UNSAFE_mapRouteProperties, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, Router, UNSAFE_useRoutesImpl, UNSAFE_NavigationContext, useHref, useResolvedPath, useLocation, useNavigate, createPath, UNSAFE_useRouteId, UNSAFE_RouteContext, useMatches, useNavigation, unstable_useBlocker } from 'react-router';
-export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, Routes, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_useRouteId, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, renderMatches, resolvePath, unstable_useBlocker, useActionData, useAsyncError, useAsyncValue, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes } from 'react-router';
+import * as ReactDOM from 'react-dom';
+import { UNSAFE_mapRouteProperties, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, Router, UNSAFE_useRoutesImpl, UNSAFE_NavigationContext, useHref, useResolvedPath, useLocation, useNavigate, createPath, UNSAFE_useRouteId, UNSAFE_RouteContext, useMatches, useNavigation, useBlocker } from 'react-router';
+export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, Routes, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_useRouteId, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, renderMatches, resolvePath, useActionData, useAsyncError, useAsyncValue, useBlocker, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes } from 'react-router';
 import { stripBasename, UNSAFE_warning, createRouter, createBrowserHistory, createHashHistory, UNSAFE_ErrorResponseImpl, UNSAFE_invariant, joinPaths, IDLE_FETCHER, matchPath } from '@remix-run/router';
 
 function _extends() {
@@ -325,6 +326,8 @@ if (process.env.NODE_ENV !== "production") {
 */
 const START_TRANSITION = "startTransition";
 const startTransitionImpl = React[START_TRANSITION];
+const FLUSH_SYNC = "flushSync";
+const flushSyncImpl = ReactDOM[FLUSH_SYNC];
 function startTransitionSafe(cb) {
   if (startTransitionImpl) {
     startTransitionImpl(cb);
@@ -332,6 +335,13 @@ function startTransitionSafe(cb) {
     cb();
   }
 }
+function flushSyncSafe(cb) {
+  if (flushSyncImpl) {
+    flushSyncImpl(cb);
+  } else {
+    cb();
+  }
+}
 class Deferred {
   constructor() {
     this.status = "pending";
@@ -382,6 +392,7 @@ function RouterProvider(_ref) {
   let setState = React.useCallback((newState, _ref2) => {
     let {
       deletedFetchers,
+      unstable_flushSync: flushSync,
       unstable_viewTransitionOpts: viewTransitionOpts
     } = _ref2;
     deletedFetchers.forEach(key => fetcherData.current.delete(key));
@@ -390,13 +401,56 @@ function RouterProvider(_ref) {
         fetcherData.current.set(key, fetcher.data);
       }
     });
-    if (!viewTransitionOpts || router.window == null || typeof router.window.document.startViewTransition !== "function") {
-      // Mid-navigation state update, or startViewTransition isn't available
-      optInStartTransition(() => setStateImpl(newState));
-    } else if (transition && renderDfd) {
+    let isViewTransitionUnavailable = router.window == null || typeof router.window.document.startViewTransition !== "function";
+    // If this isn't a view transition or it's not available in this browser,
+    // just update and be done with it
+    if (!viewTransitionOpts || isViewTransitionUnavailable) {
+      if (flushSync) {
+        flushSyncSafe(() => setStateImpl(newState));
+      } else {
+        optInStartTransition(() => setStateImpl(newState));
+      }
+      return;
+    }
+    // flushSync + startViewTransition
+    if (flushSync) {
+      // Flush through the context to mark DOM elements as transition=ing
+      flushSyncSafe(() => {
+        // Cancel any pending transitions
+        if (transition) {
+          renderDfd && renderDfd.resolve();
+          transition.skipTransition();
+        }
+        setVtContext({
+          isTransitioning: true,
+          flushSync: true,
+          currentLocation: viewTransitionOpts.currentLocation,
+          nextLocation: viewTransitionOpts.nextLocation
+        });
+      });
+      // Update the DOM
+      let t = router.window.document.startViewTransition(() => {
+        flushSyncSafe(() => setStateImpl(newState));
+      });
+      // Clean up after the animation completes
+      t.finished.finally(() => {
+        flushSyncSafe(() => {
+          setRenderDfd(undefined);
+          setTransition(undefined);
+          setPendingState(undefined);
+          setVtContext({
+            isTransitioning: false
+          });
+        });
+      });
+      flushSyncSafe(() => setTransition(t));
+      return;
+    }
+    // startTransition + startViewTransition
+    if (transition) {
       // Interrupting an in-progress transition, cancel and let everything flush
       // out, and then kick off a new transition from the interruption state
-      renderDfd.resolve();
+      renderDfd && renderDfd.resolve();
       transition.skipTransition();
       setInterruption({
         state: newState,
@@ -408,6 +462,7 @@ function RouterProvider(_ref) {
       setPendingState(newState);
       setVtContext({
         isTransitioning: true,
+        flushSync: false,
         currentLocation: viewTransitionOpts.currentLocation,
         nextLocation: viewTransitionOpts.nextLocation
       });
@@ -419,10 +474,10 @@ function RouterProvider(_ref) {
   // When we start a view transition, create a Deferred we can use for the
   // eventual "completed" render
   React.useEffect(() => {
-    if (vtContext.isTransitioning) {
+    if (vtContext.isTransitioning && !vtContext.flushSync) {
       setRenderDfd(new Deferred());
     }
-  }, [vtContext.isTransitioning]);
+  }, [vtContext]);
   // Once the deferred is created, kick off startViewTransition() to update the
   // DOM and then wait on the Deferred to resolve (indicating the DOM update has
   // happened)
@@ -459,6 +514,7 @@ function RouterProvider(_ref) {
       setPendingState(interruption.state);
       setVtContext({
         isTransitioning: true,
+        flushSync: false,
         currentLocation: interruption.currentLocation,
         nextLocation: interruption.nextLocation
       });
@@ -741,7 +797,13 @@ const NavLink = /*#__PURE__*/React.forwardRef(function NavLinkWithRef(_ref8, ref
     nextLocationPathname = nextLocationPathname ? nextLocationPathname.toLowerCase() : null;
     toPathname = toPathname.toLowerCase();
   }
-  let isActive = locationPathname === toPathname || !end && locationPathname.startsWith(toPathname) && locationPathname.charAt(toPathname.length) === "/";
+  // If the `to` has a trailing slash, look at that exact spot.  Otherwise,
+  // we're looking for a slash _after_ what's in `to`.  For example:
+  //
+  // <NavLink to="/users"> and <NavLink to="/users/">
+  // both want to look for a / at index 6 to match URL `/users/matt`
+  const endSlashPosition = toPathname !== "/" && toPathname.endsWith("/") ? toPathname.length - 1 : toPathname.length;
+  let isActive = locationPathname === toPathname || !end && locationPathname.startsWith(toPathname) && locationPathname.charAt(endSlashPosition) === "/";
   let isPending = nextLocationPathname != null && (nextLocationPathname === toPathname || !end && nextLocationPathname.startsWith(toPathname) && nextLocationPathname.charAt(toPathname.length) === "/");
   let renderProps = {
     isActive,
@@ -972,7 +1034,8 @@ function useSubmit() {
         formData,
         body,
         formMethod: options.method || method,
-        formEncType: options.encType || encType
+        formEncType: options.encType || encType,
+        unstable_flushSync: options.unstable_flushSync
       });
     } else {
       router.navigate(options.action || action, {
@@ -984,6 +1047,7 @@ function useSubmit() {
         replace: options.replace,
         state: options.state,
         fromRouteId: currentRouteId,
+        unstable_flushSync: options.unstable_flushSync,
         unstable_viewTransition: options.unstable_viewTransition
       });
     }
@@ -1006,21 +1070,19 @@ function useFormAction(action, _temp2) {
   let path = _extends({}, useResolvedPath(action ? action : ".", {
     relative
   }));
-  // Previously we set the default action to ".". The problem with this is that
-  // `useResolvedPath(".")` excludes search params of the resolved URL. This is
-  // the intended behavior of when "." is specifically provided as
-  // the form action, but inconsistent w/ browsers when the action is omitted.
+  // If no action was specified, browsers will persist current search params
+  // when determining the path, so match that behavior
   // https://github.com/remix-run/remix/issues/927
   let location = useLocation();
   if (action == null) {
     // Safe to write to this directly here since if action was undefined, we
     // would have called useResolvedPath(".") which will never include a search
     path.search = location.search;
-    // When grabbing search params from the URL, remove the automatically
-    // inserted ?index param so we match the useResolvedPath search behavior
-    // which would not include ?index
-    if (match.route.index) {
-      let params = new URLSearchParams(path.search);
+    // When grabbing search params from the URL, remove any included ?index param
+    // since it might not apply to our contextual route.  We add it back based
+    // on match.route.index below
+    let params = new URLSearchParams(path.search);
+    if (params.has("index") && params.get("index") === "") {
       params.delete("index");
       path.search = params.toString() ? "?" + params.toString() : "";
     }
@@ -1059,7 +1121,9 @@ function useFetcher(_temp3) {
   !(routeId != null) ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "useFetcher can only be used on routes that contain a unique \"id\"") : UNSAFE_invariant(false) : void 0;
   // Fetcher key handling
   let [fetcherKey, setFetcherKey] = React.useState(key || "");
-  if (!fetcherKey) {
+  if (key && key !== fetcherKey) {
+    setFetcherKey(key);
+  } else if (!fetcherKey) {
     setFetcherKey(getUniqueFetcherId());
   }
   // Registration/cleanup
@@ -1073,9 +1137,9 @@ function useFetcher(_temp3) {
     };
   }, [router, fetcherKey]);
   // Fetcher additions
-  let load = React.useCallback(href => {
+  let load = React.useCallback((href, opts) => {
     !routeId ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "No routeId available for fetcher.load()") : UNSAFE_invariant(false) : void 0;
-    router.fetch(fetcherKey, routeId, href);
+    router.fetch(fetcherKey, routeId, href, opts);
   }, [fetcherKey, routeId, router]);
   let submitImpl = useSubmit();
   let submit = React.useCallback((target, opts) => {
@@ -1274,7 +1338,7 @@ function usePrompt(_ref12) {
     when,
     message
   } = _ref12;
-  let blocker = unstable_useBlocker(when);
+  let blocker = useBlocker(when);
   React.useEffect(() => {
     if (blocker.state === "blocked") {
       let proceed = window.confirm(message);