react-router-dom 0.0.0-experimental-e192105b → 0.0.0-experimental-178bc9ee

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # `react-router-dom`
 
+## 6.19.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`
+  - `@remix-run/router@1.12.0`
+
 ## 6.18.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -9,7 +9,7 @@ import type { SubmitOptions, ParamKeyValuePair, URLSearchParamsInit, SubmitTarge
 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 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, PathParam, 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, 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";
@@ -95,7 +95,6 @@ export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorEle
     preventScrollReset?: boolean;
     relative?: RelativeRoutingType;
     to: To;
-    unstable_flushSync?: boolean;
     unstable_viewTransition?: boolean;
 }
 /**
@@ -173,10 +172,6 @@ export interface FormProps extends FetcherFormProps {
      * State object to add to the history stack entry for this navigation
      */
     state?: any;
-    /**
-     * Enable flushSync navigation's staten updates
-     */
-    unstable_flushSync?: boolean;
     /**
      * Enable view transitions on this Form navigation
      */
@@ -206,13 +201,12 @@ export declare namespace ScrollRestoration {
  * you need to create custom `<Link>` components with the same click behavior we
  * use in our exported `<Link>`.
  */
-export declare function useLinkClickHandler<E extends Element = HTMLAnchorElement>(to: To, { target, replace: replaceProp, state, preventScrollReset, relative, unstable_flushSync, unstable_viewTransition, }?: {
+export declare function useLinkClickHandler<E extends Element = HTMLAnchorElement>(to: To, { target, replace: replaceProp, state, preventScrollReset, relative, unstable_viewTransition, }?: {
     target?: React.HTMLAttributeAnchorTarget;
     replace?: boolean;
     state?: any;
     preventScrollReset?: boolean;
     relative?: RelativeRoutingType;
-    unstable_flushSync?: boolean;
     unstable_viewTransition?: boolean;
 }): (event: React.MouseEvent<E, MouseEvent>) => void;
 /**
@@ -258,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

package/dist/index.js

@@ -1,5 +1,5 @@
 /**
- * React Router DOM v0.0.0-experimental-e192105b
+ * React Router DOM v0.0.0-experimental-178bc9ee
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -207,9 +207,9 @@ function getFormSubmissionInfo(target, basename) {
   };
 }
 
-const _excluded = ["onClick", "relative", "reloadDocument", "replace", "state", "target", "to", "preventScrollReset", "unstable_flushSync", "unstable_viewTransition"],
+const _excluded = ["onClick", "relative", "reloadDocument", "replace", "state", "target", "to", "preventScrollReset", "unstable_viewTransition"],
   _excluded2 = ["aria-current", "caseSensitive", "className", "end", "style", "to", "unstable_viewTransition", "children"],
-  _excluded3 = ["fetcherKey", "navigate", "reloadDocument", "replace", "state", "method", "action", "onSubmit", "relative", "preventScrollReset", "unstable_flushSync", "unstable_viewTransition"];
+  _excluded3 = ["fetcherKey", "navigate", "reloadDocument", "replace", "state", "method", "action", "onSubmit", "relative", "preventScrollReset", "unstable_viewTransition"];
 function createBrowserRouter(routes, opts) {
   return createRouter({
     basename: opts == null ? void 0 : opts.basename,
@@ -521,6 +521,11 @@ function RouterProvider(_ref) {
       setInterruption(undefined);
     }
   }, [vtContext.isTransitioning, interruption]);
+  React.useEffect(() => {
+    process.env.NODE_ENV !== "production" ? UNSAFE_warning(fallbackElement == null || !router.future.v7_partialHydration, "`<RouterProvider fallbackElement>` is deprecated when using `v7_partialHydration`") : void 0;
+    // Only log this once on initial mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   let navigator = React.useMemo(() => {
     return {
       createHref: router.createHref,
@@ -565,15 +570,17 @@ function RouterProvider(_ref) {
     navigator: navigator
   }, state.initialized ? /*#__PURE__*/React.createElement(DataRoutes, {
     routes: router.routes,
+    future: router.future,
     state: state
   }) : fallbackElement))))), null);
 }
 function DataRoutes(_ref3) {
   let {
     routes,
+    future,
     state
   } = _ref3;
-  return UNSAFE_useRoutesImpl(routes, undefined, state);
+  return UNSAFE_useRoutesImpl(routes, undefined, state, future);
 }
 /**
  * A `<Router>` for use in web browsers. Provides the cleanest URLs.
@@ -700,7 +707,6 @@ const Link = /*#__PURE__*/React.forwardRef(function LinkWithRef(_ref7, ref) {
       target,
       to,
       preventScrollReset,
-      unstable_flushSync,
       unstable_viewTransition
     } = _ref7,
     rest = _objectWithoutPropertiesLoose(_ref7, _excluded);
@@ -741,7 +747,6 @@ const Link = /*#__PURE__*/React.forwardRef(function LinkWithRef(_ref7, ref) {
     target,
     preventScrollReset,
     relative,
-    unstable_flushSync,
     unstable_viewTransition
   });
   function handleClick(event) {
@@ -855,7 +860,6 @@ const Form = /*#__PURE__*/React.forwardRef((_ref9, forwardedRef) => {
       onSubmit,
       relative,
       preventScrollReset,
-      unstable_flushSync,
       unstable_viewTransition
     } = _ref9,
     props = _objectWithoutPropertiesLoose(_ref9, _excluded3);
@@ -878,7 +882,6 @@ const Form = /*#__PURE__*/React.forwardRef((_ref9, forwardedRef) => {
       state,
       relative,
       preventScrollReset,
-      unstable_flushSync,
       unstable_viewTransition
     });
   };
@@ -955,7 +958,6 @@ function useLinkClickHandler(to, _temp) {
     state,
     preventScrollReset,
     relative,
-    unstable_flushSync,
     unstable_viewTransition
   } = _temp === void 0 ? {} : _temp;
   let navigate = useNavigate();
@@ -974,11 +976,10 @@ function useLinkClickHandler(to, _temp) {
         state,
         preventScrollReset,
         relative,
-        unstable_flushSync,
         unstable_viewTransition
       });
     }
-  }, [location, navigate, path, replaceProp, state, target, to, preventScrollReset, relative, unstable_flushSync, unstable_viewTransition]);
+  }, [location, navigate, path, replaceProp, state, target, to, preventScrollReset, relative, unstable_viewTransition]);
 }
 /**
  * A convenient wrapper for reading and writing search parameters via the
@@ -1084,11 +1085,11 @@ function useFormAction(action, _temp2) {
     // 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() : "";
     }
@@ -1127,7 +1128,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