react-router-dom
Advanced tools
Comparing version 6.17.0 to 6.21.1
209
CHANGELOG.md
# `react-router-dom` | ||
## 6.21.1 | ||
### Patch Changes | ||
- Updated dependencies: | ||
- `react-router@6.21.1` | ||
- `@remix-run/router@1.14.1` | ||
## 6.21.0 | ||
### Minor Changes | ||
- Add a new `future.v7_relativeSplatPath` flag to implement a breaking bug fix to relative routing when inside a splat route. ([#11087](https://github.com/remix-run/react-router/pull/11087)) | ||
This fix was originally added in [#10983](https://github.com/remix-run/react-router/issues/10983) and was later reverted in [#11078](https://github.com/remix-run/react-router/pull/11078) because it was determined that a large number of existing applications were relying on the buggy behavior (see [#11052](https://github.com/remix-run/react-router/issues/11052)) | ||
**The Bug** | ||
The buggy behavior is that without this flag, the default behavior when resolving relative paths is to _ignore_ any splat (`*`) portion of the current route path. | ||
**The Background** | ||
This decision was originally made thinking that it would make the concept of nested different sections of your apps in `<Routes>` easier if relative routing would _replace_ the current splat: | ||
```jsx | ||
<BrowserRouter> | ||
<Routes> | ||
<Route path="/" element={<Home />} /> | ||
<Route path="dashboard/*" element={<Dashboard />} /> | ||
</Routes> | ||
</BrowserRouter> | ||
``` | ||
Any paths like `/dashboard`, `/dashboard/team`, `/dashboard/projects` will match the `Dashboard` route. The dashboard component itself can then render nested `<Routes>`: | ||
```jsx | ||
function Dashboard() { | ||
return ( | ||
<div> | ||
<h2>Dashboard</h2> | ||
<nav> | ||
<Link to="/">Dashboard Home</Link> | ||
<Link to="team">Team</Link> | ||
<Link to="projects">Projects</Link> | ||
</nav> | ||
<Routes> | ||
<Route path="/" element={<DashboardHome />} /> | ||
<Route path="team" element={<DashboardTeam />} /> | ||
<Route path="projects" element={<DashboardProjects />} /> | ||
</Routes> | ||
</div> | ||
); | ||
} | ||
``` | ||
Now, all links and route paths are relative to the router above them. This makes code splitting and compartmentalizing your app really easy. You could render the `Dashboard` as its own independent app, or embed it into your large app without making any changes to it. | ||
**The Problem** | ||
The problem is that this concept of ignoring part of a path breaks a lot of other assumptions in React Router - namely that `"."` always means the current location pathname for that route. When we ignore the splat portion, we start getting invalid paths when using `"."`: | ||
```jsx | ||
// If we are on URL /dashboard/team, and we want to link to /dashboard/team: | ||
function DashboardTeam() { | ||
// ❌ This is broken and results in <a href="/dashboard"> | ||
return <Link to=".">A broken link to the Current URL</Link>; | ||
// ✅ This is fixed but super unintuitive since we're already at /dashboard/team! | ||
return <Link to="./team">A broken link to the Current URL</Link>; | ||
} | ||
``` | ||
We've also introduced an issue that we can no longer move our `DashboardTeam` component around our route hierarchy easily - since it behaves differently if we're underneath a non-splat route, such as `/dashboard/:widget`. Now, our `"."` links will, properly point to ourself _inclusive of the dynamic param value_ so behavior will break from it's corresponding usage in a `/dashboard/*` route. | ||
Even worse, consider a nested splat route configuration: | ||
```jsx | ||
<BrowserRouter> | ||
<Routes> | ||
<Route path="dashboard"> | ||
<Route path="*" element={<Dashboard />} /> | ||
</Route> | ||
</Routes> | ||
</BrowserRouter> | ||
``` | ||
Now, a `<Link to=".">` and a `<Link to="..">` inside the `Dashboard` component go to the same place! That is definitely not correct! | ||
Another common issue arose in Data Routers (and Remix) where any `<Form>` should post to it's own route `action` if you the user doesn't specify a form action: | ||
```jsx | ||
let router = createBrowserRouter({ | ||
path: "/dashboard", | ||
children: [ | ||
{ | ||
path: "*", | ||
action: dashboardAction, | ||
Component() { | ||
// ❌ This form is broken! It throws a 405 error when it submits because | ||
// it tries to submit to /dashboard (without the splat value) and the parent | ||
// `/dashboard` route doesn't have an action | ||
return <Form method="post">...</Form>; | ||
}, | ||
}, | ||
], | ||
}); | ||
``` | ||
This is just a compounded issue from the above because the default location for a `Form` to submit to is itself (`"."`) - and if we ignore the splat portion, that now resolves to the parent route. | ||
**The Solution** | ||
If you are leveraging this behavior, it's recommended to enable the future flag, move your splat to it's own route, and leverage `../` for any links to "sibling" pages: | ||
```jsx | ||
<BrowserRouter> | ||
<Routes> | ||
<Route path="dashboard"> | ||
<Route index path="*" element={<Dashboard />} /> | ||
</Route> | ||
</Routes> | ||
</BrowserRouter> | ||
function Dashboard() { | ||
return ( | ||
<div> | ||
<h2>Dashboard</h2> | ||
<nav> | ||
<Link to="..">Dashboard Home</Link> | ||
<Link to="../team">Team</Link> | ||
<Link to="../projects">Projects</Link> | ||
</nav> | ||
<Routes> | ||
<Route path="/" element={<DashboardHome />} /> | ||
<Route path="team" element={<DashboardTeam />} /> | ||
<Route path="projects" element={<DashboardProjects />} /> | ||
</Router> | ||
</div> | ||
); | ||
} | ||
``` | ||
This way, `.` means "the full current pathname for my route" in all cases (including static, dynamic, and splat routes) and `..` always means "my parents pathname". | ||
### Patch Changes | ||
- Updated dependencies: | ||
- `@remix-run/router@1.14.0` | ||
- `react-router@6.21.0` | ||
## 6.20.1 | ||
### Patch Changes | ||
- Revert the `useResolvedPath` fix for splat routes due to a large number of applications that were relying on the buggy behavior (see https://github.com/remix-run/react-router/issues/11052#issuecomment-1836589329). We plan to re-introduce this fix behind a future flag in the next minor version. ([#11078](https://github.com/remix-run/react-router/pull/11078)) | ||
- Updated dependencies: | ||
- `react-router@6.20.1` | ||
- `@remix-run/router@1.13.1` | ||
## 6.20.0 | ||
### Minor Changes | ||
- Export the `PathParam` type from the public API ([#10719](https://github.com/remix-run/react-router/pull/10719)) | ||
### Patch Changes | ||
- Updated dependencies: | ||
- `react-router@6.20.0` | ||
- `@remix-run/router@1.13.0` | ||
## 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 | ||
- Add support for manual fetcher key specification via `useFetcher({ key: string })` so you can access the same fetcher instance from different components in your application without prop-drilling ([RFC](https://github.com/remix-run/remix/discussions/7698)) ([#10960](https://github.com/remix-run/react-router/pull/10960)) | ||
- Fetcher keys are now also exposed on the fetchers returned from `useFetchers` so that they can be looked up by `key` | ||
- Add `navigate`/`fetcherKey` params/props to `useSumbit`/`Form` to support kicking off a fetcher submission under the hood with an optionally user-specified `key` ([#10960](https://github.com/remix-run/react-router/pull/10960)) | ||
- Invoking a fetcher in this way is ephemeral and stateless | ||
- If you need to access the state of one of these fetchers, you will need to leverage `useFetcher({ key })` to look it up elsewhere | ||
### Patch Changes | ||
- Adds a fetcher context to `RouterProvider` that holds completed fetcher data, in preparation for the upcoming future flag that will change the fetcher persistence/cleanup behavior ([#10961](https://github.com/remix-run/react-router/pull/10961)) | ||
- Fix the `future` prop on `BrowserRouter`, `HashRouter` and `MemoryRouter` so that it accepts a `Partial<FutureConfig>` instead of requiring all flags to be included. ([#10962](https://github.com/remix-run/react-router/pull/10962)) | ||
- Updated dependencies: | ||
- `@remix-run/router@1.11.0` | ||
- `react-router@6.18.0` | ||
## 6.17.0 | ||
@@ -204,3 +411,3 @@ | ||
> **Warning** | ||
> [!WARNING] | ||
> Please use version `6.13.0` or later instead of `6.12.1`. This version suffers from a `webpack`/`terser` minification issue resulting in invalid minified code in your resulting production bundles which can cause issues in your application. See [#10579](https://github.com/remix-run/react-router/issues/10579) for more details. | ||
@@ -207,0 +414,0 @@ |
@@ -60,2 +60,10 @@ import type { FormEncType, HTMLFormMethod, RelativeRoutingType } from "@remix-run/router"; | ||
/** | ||
* Indicate a specific fetcherKey to use when using navigate=false | ||
*/ | ||
fetcherKey?: string; | ||
/** | ||
* navigate=false will use a fetcher instead of a navigation | ||
*/ | ||
navigate?: boolean; | ||
/** | ||
* Set `true` to replace the current entry in the browser's history stack | ||
@@ -82,2 +90,6 @@ * instead of creating a new one (i.e. stay on "the same page"). Defaults | ||
/** | ||
* Enable flushSync for this navigation's state updates | ||
*/ | ||
unstable_flushSync?: boolean; | ||
/** | ||
* Enable view transitions on this submission navigation | ||
@@ -84,0 +96,0 @@ */ |
@@ -7,3 +7,3 @@ /** | ||
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"; | ||
@@ -13,4 +13,4 @@ import { createSearchParams } from "./dom"; | ||
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 type { ActionFunction, ActionFunctionArgs, AwaitProps, unstable_Blocker, unstable_BlockerFunction, DataRouteMatch, DataRouteObject, ErrorResponse, Fetcher, FutureConfig, 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 */ | ||
@@ -36,2 +36,3 @@ export { UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_NavigationContext, UNSAFE_LocationContext, UNSAFE_RouteContext, UNSAFE_useRouteId, } from "react-router"; | ||
isTransitioning: true; | ||
flushSync: boolean; | ||
currentLocation: Location; | ||
@@ -42,2 +43,5 @@ nextLocation: Location; | ||
export { ViewTransitionContext as UNSAFE_ViewTransitionContext }; | ||
type FetchersContextObject = Map<string, any>; | ||
declare const FetchersContext: React.Context<FetchersContextObject>; | ||
export { FetchersContext as UNSAFE_FetchersContext }; | ||
interface ViewTransition { | ||
@@ -56,3 +60,3 @@ finished: Promise<void>; | ||
children?: React.ReactNode; | ||
future?: FutureConfig; | ||
future?: Partial<FutureConfig>; | ||
window?: Window; | ||
@@ -67,3 +71,3 @@ } | ||
children?: React.ReactNode; | ||
future?: FutureConfig; | ||
future?: Partial<FutureConfig>; | ||
window?: Window; | ||
@@ -117,3 +121,2 @@ } | ||
style?: React.CSSProperties | ((props: NavLinkRenderProps) => React.CSSProperties | undefined); | ||
unstable_viewTransition?: boolean; | ||
} | ||
@@ -158,2 +161,10 @@ /** | ||
/** | ||
* Indicate a specific fetcherKey to use when using navigate=false | ||
*/ | ||
fetcherKey?: string; | ||
/** | ||
* navigate=false will use a fetcher instead of a navigation | ||
*/ | ||
navigate?: boolean; | ||
/** | ||
* Forces a full document navigation instead of a fetch. | ||
@@ -249,7 +260,8 @@ */ | ||
}): string; | ||
declare function createFetcherForm(fetcherKey: string, routeId: string): React.ForwardRefExoticComponent<FetcherFormProps & React.RefAttributes<HTMLFormElement>>; | ||
export type FetcherWithComponents<TData> = Fetcher<TData> & { | ||
Form: ReturnType<typeof createFetcherForm>; | ||
Form: React.ForwardRefExoticComponent<FetcherFormProps & React.RefAttributes<HTMLFormElement>>; | ||
submit: FetcherSubmitFunction; | ||
load: (href: string) => void; | ||
load: (href: string, opts?: { | ||
unstable_flushSync?: boolean; | ||
}) => void; | ||
}; | ||
@@ -260,3 +272,5 @@ /** | ||
*/ | ||
export declare function useFetcher<TData = any>(): FetcherWithComponents<TData>; | ||
export declare function useFetcher<TData = any>({ key, }?: { | ||
key?: string; | ||
}): FetcherWithComponents<TData>; | ||
/** | ||
@@ -266,3 +280,5 @@ * Provides all fetchers currently on the page. Useful for layouts and parent | ||
*/ | ||
export declare function useFetchers(): Fetcher[]; | ||
export declare function useFetchers(): (Fetcher & { | ||
key: string; | ||
})[]; | ||
/** | ||
@@ -295,4 +311,4 @@ * When rendered inside a RouterProvider, will restore scroll positions on navigations | ||
*/ | ||
declare function usePrompt({ when, message }: { | ||
when: boolean; | ||
declare function usePrompt({ when, message, }: { | ||
when: boolean | BlockerFunction; | ||
message: string; | ||
@@ -299,0 +315,0 @@ }): void; |
/** | ||
* React Router DOM v6.17.0 | ||
* React Router DOM v6.21.1 | ||
* | ||
@@ -12,5 +12,6 @@ * Copyright (c) Remix Software Inc. | ||
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 { stripBasename, UNSAFE_warning, createRouter, createBrowserHistory, createHashHistory, UNSAFE_ErrorResponseImpl, UNSAFE_invariant, joinPaths, matchPath } from '@remix-run/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'; | ||
@@ -212,3 +213,3 @@ function _extends() { | ||
_excluded2 = ["aria-current", "caseSensitive", "className", "end", "style", "to", "unstable_viewTransition", "children"], | ||
_excluded3 = ["reloadDocument", "replace", "state", "method", "action", "onSubmit", "submit", "relative", "preventScrollReset", "unstable_viewTransition"]; | ||
_excluded3 = ["fetcherKey", "navigate", "reloadDocument", "replace", "state", "method", "action", "onSubmit", "relative", "preventScrollReset", "unstable_viewTransition"]; | ||
function createBrowserRouter(routes, opts) { | ||
@@ -299,2 +300,6 @@ return createRouter({ | ||
} | ||
const FetchersContext = /*#__PURE__*/React.createContext(new Map()); | ||
if (process.env.NODE_ENV !== "production") { | ||
FetchersContext.displayName = "Fetchers"; | ||
} | ||
//#endregion | ||
@@ -327,2 +332,4 @@ //////////////////////////////////////////////////////////////////////////////// | ||
const startTransitionImpl = React[START_TRANSITION]; | ||
const FLUSH_SYNC = "flushSync"; | ||
const flushSyncImpl = ReactDOM[FLUSH_SYNC]; | ||
function startTransitionSafe(cb) { | ||
@@ -335,2 +342,9 @@ if (startTransitionImpl) { | ||
} | ||
function flushSyncSafe(cb) { | ||
if (flushSyncImpl) { | ||
flushSyncImpl(cb); | ||
} else { | ||
cb(); | ||
} | ||
} | ||
class Deferred { | ||
@@ -372,2 +386,3 @@ constructor() { | ||
let [interruption, setInterruption] = React.useState(); | ||
let fetcherData = React.useRef(new Map()); | ||
let { | ||
@@ -385,11 +400,62 @@ v7_startTransition | ||
let { | ||
deletedFetchers, | ||
unstable_flushSync: flushSync, | ||
unstable_viewTransitionOpts: viewTransitionOpts | ||
} = _ref2; | ||
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) { | ||
deletedFetchers.forEach(key => fetcherData.current.delete(key)); | ||
newState.fetchers.forEach((fetcher, key) => { | ||
if (fetcher.data !== undefined) { | ||
fetcherData.current.set(key, fetcher.data); | ||
} | ||
}); | ||
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(); | ||
@@ -406,2 +472,3 @@ setInterruption({ | ||
isTransitioning: true, | ||
flushSync: false, | ||
currentLocation: viewTransitionOpts.currentLocation, | ||
@@ -411,3 +478,3 @@ nextLocation: viewTransitionOpts.nextLocation | ||
} | ||
}, [optInStartTransition, transition, renderDfd, router.window]); | ||
}, [router.window, transition, renderDfd, fetcherData, optInStartTransition]); | ||
// Need to use a layout effect here so we are subscribed early enough to | ||
@@ -419,6 +486,6 @@ // pick up on any render-driven redirects/navigations (useEffect/<Navigate>) | ||
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 | ||
@@ -460,2 +527,3 @@ // DOM and then wait on the Deferred to resolve (indicating the DOM update has | ||
isTransitioning: true, | ||
flushSync: false, | ||
currentLocation: interruption.currentLocation, | ||
@@ -467,2 +535,7 @@ nextLocation: interruption.nextLocation | ||
}, [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`, use a `HydrateFallback` component instead") : void 0; | ||
// Only log this once on initial mount | ||
// eslint-disable-next-line react-hooks/exhaustive-deps | ||
}, []); | ||
let navigator = React.useMemo(() => { | ||
@@ -501,2 +574,4 @@ return { | ||
value: state | ||
}, /*#__PURE__*/React.createElement(FetchersContext.Provider, { | ||
value: fetcherData.current | ||
}, /*#__PURE__*/React.createElement(ViewTransitionContext.Provider, { | ||
@@ -508,7 +583,11 @@ value: vtContext | ||
navigationType: state.historyAction, | ||
navigator: navigator | ||
}, state.initialized ? /*#__PURE__*/React.createElement(DataRoutes, { | ||
navigator: navigator, | ||
future: { | ||
v7_relativeSplatPath: router.future.v7_relativeSplatPath | ||
} | ||
}, state.initialized || router.future.v7_partialHydration ? /*#__PURE__*/React.createElement(DataRoutes, { | ||
routes: router.routes, | ||
future: router.future, | ||
state: state | ||
}) : fallbackElement)))), null); | ||
}) : fallbackElement))))), null); | ||
} | ||
@@ -518,5 +597,6 @@ function DataRoutes(_ref3) { | ||
routes, | ||
future, | ||
state | ||
} = _ref3; | ||
return UNSAFE_useRoutesImpl(routes, undefined, state); | ||
return UNSAFE_useRoutesImpl(routes, undefined, state, future); | ||
} | ||
@@ -557,3 +637,4 @@ /** | ||
navigationType: state.action, | ||
navigator: history | ||
navigator: history, | ||
future: future | ||
}); | ||
@@ -596,3 +677,4 @@ } | ||
navigationType: state.action, | ||
navigator: history | ||
navigator: history, | ||
future: future | ||
}); | ||
@@ -629,3 +711,4 @@ } | ||
navigationType: state.action, | ||
navigator: history | ||
navigator: history, | ||
future: future | ||
}); | ||
@@ -748,3 +831,9 @@ } | ||
} | ||
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) === "/"); | ||
@@ -787,14 +876,6 @@ let renderProps = { | ||
*/ | ||
const Form = /*#__PURE__*/React.forwardRef((props, ref) => { | ||
let submit = useSubmit(); | ||
return /*#__PURE__*/React.createElement(FormImpl, _extends({}, props, { | ||
submit: submit, | ||
ref: ref | ||
})); | ||
}); | ||
if (process.env.NODE_ENV !== "production") { | ||
Form.displayName = "Form"; | ||
} | ||
const FormImpl = /*#__PURE__*/React.forwardRef((_ref9, forwardedRef) => { | ||
const Form = /*#__PURE__*/React.forwardRef((_ref9, forwardedRef) => { | ||
let { | ||
fetcherKey, | ||
navigate, | ||
reloadDocument, | ||
@@ -806,3 +887,2 @@ replace, | ||
onSubmit, | ||
submit, | ||
relative, | ||
@@ -813,6 +893,7 @@ preventScrollReset, | ||
props = _objectWithoutPropertiesLoose(_ref9, _excluded3); | ||
let formMethod = method.toLowerCase() === "get" ? "get" : "post"; | ||
let submit = useSubmit(); | ||
let formAction = useFormAction(action, { | ||
relative | ||
}); | ||
let formMethod = method.toLowerCase() === "get" ? "get" : "post"; | ||
let submitHandler = event => { | ||
@@ -825,3 +906,5 @@ onSubmit && onSubmit(event); | ||
submit(submitter || event.currentTarget, { | ||
fetcherKey, | ||
method: submitMethod, | ||
navigate, | ||
replace, | ||
@@ -842,3 +925,3 @@ state, | ||
if (process.env.NODE_ENV !== "production") { | ||
FormImpl.displayName = "FormImpl"; | ||
Form.displayName = "Form"; | ||
} | ||
@@ -877,5 +960,7 @@ /** | ||
(function (DataRouterStateHook) { | ||
DataRouterStateHook["UseFetcher"] = "useFetcher"; | ||
DataRouterStateHook["UseFetchers"] = "useFetchers"; | ||
DataRouterStateHook["UseScrollRestoration"] = "useScrollRestoration"; | ||
})(DataRouterStateHook || (DataRouterStateHook = {})); | ||
// Internal hooks | ||
function getDataRouterConsoleError(hookName) { | ||
@@ -894,2 +979,3 @@ return hookName + " must be used within a data router. See https://reactrouter.com/routers/picking-a-router."; | ||
} | ||
// External hooks | ||
/** | ||
@@ -957,2 +1043,4 @@ * Handles the click behavior for router `<Link>` components. This is useful if | ||
} | ||
let fetcherId = 0; | ||
let getUniqueFetcherId = () => "__" + String(++fetcherId) + "__"; | ||
/** | ||
@@ -982,47 +1070,28 @@ * Returns a function that may be used to programmatically submit a form (or | ||
} = getFormSubmissionInfo(target, basename); | ||
router.navigate(options.action || action, { | ||
preventScrollReset: options.preventScrollReset, | ||
formData, | ||
body, | ||
formMethod: options.method || method, | ||
formEncType: options.encType || encType, | ||
replace: options.replace, | ||
state: options.state, | ||
fromRouteId: currentRouteId, | ||
unstable_viewTransition: options.unstable_viewTransition | ||
}); | ||
if (options.navigate === false) { | ||
let key = options.fetcherKey || getUniqueFetcherId(); | ||
router.fetch(key, currentRouteId, options.action || action, { | ||
preventScrollReset: options.preventScrollReset, | ||
formData, | ||
body, | ||
formMethod: options.method || method, | ||
formEncType: options.encType || encType, | ||
unstable_flushSync: options.unstable_flushSync | ||
}); | ||
} else { | ||
router.navigate(options.action || action, { | ||
preventScrollReset: options.preventScrollReset, | ||
formData, | ||
body, | ||
formMethod: options.method || method, | ||
formEncType: options.encType || encType, | ||
replace: options.replace, | ||
state: options.state, | ||
fromRouteId: currentRouteId, | ||
unstable_flushSync: options.unstable_flushSync, | ||
unstable_viewTransition: options.unstable_viewTransition | ||
}); | ||
} | ||
}, [router, basename, currentRouteId]); | ||
} | ||
/** | ||
* Returns the implementation for fetcher.submit | ||
*/ | ||
function useSubmitFetcher(fetcherKey, fetcherRouteId) { | ||
let { | ||
router | ||
} = useDataRouterContext(DataRouterHook.UseSubmitFetcher); | ||
let { | ||
basename | ||
} = React.useContext(UNSAFE_NavigationContext); | ||
return React.useCallback(function (target, options) { | ||
if (options === void 0) { | ||
options = {}; | ||
} | ||
validateClientSideSubmission(); | ||
let { | ||
action, | ||
method, | ||
encType, | ||
formData, | ||
body | ||
} = getFormSubmissionInfo(target, basename); | ||
!(fetcherRouteId != null) ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "No routeId available for useFetcher()") : UNSAFE_invariant(false) : void 0; | ||
router.fetch(fetcherKey, fetcherRouteId, options.action || action, { | ||
preventScrollReset: options.preventScrollReset, | ||
formData, | ||
body, | ||
formMethod: options.method || method, | ||
formEncType: options.encType || encType | ||
}); | ||
}, [router, basename, fetcherKey, fetcherRouteId]); | ||
} | ||
// v7: Eventually we should deprecate this entirely in favor of using the | ||
@@ -1045,6 +1114,4 @@ // router method directly? | ||
})); | ||
// 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 | ||
@@ -1056,7 +1123,7 @@ let location = useLocation(); | ||
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"); | ||
@@ -1078,16 +1145,2 @@ path.search = params.toString() ? "?" + params.toString() : ""; | ||
} | ||
function createFetcherForm(fetcherKey, routeId) { | ||
let FetcherForm = /*#__PURE__*/React.forwardRef((props, ref) => { | ||
let submit = useSubmitFetcher(fetcherKey, routeId); | ||
return /*#__PURE__*/React.createElement(FormImpl, _extends({}, props, { | ||
ref: ref, | ||
submit: submit | ||
})); | ||
}); | ||
if (process.env.NODE_ENV !== "production") { | ||
FetcherForm.displayName = "fetcher.Form"; | ||
} | ||
return FetcherForm; | ||
} | ||
let fetcherId = 0; | ||
// TODO: (v7) Change the useFetcher generic default from `any` to `unknown` | ||
@@ -1098,40 +1151,69 @@ /** | ||
*/ | ||
function useFetcher() { | ||
function useFetcher(_temp3) { | ||
var _route$matches; | ||
let { | ||
key | ||
} = _temp3 === void 0 ? {} : _temp3; | ||
let { | ||
router | ||
} = useDataRouterContext(DataRouterHook.UseFetcher); | ||
let state = useDataRouterState(DataRouterStateHook.UseFetcher); | ||
let fetcherData = React.useContext(FetchersContext); | ||
let route = React.useContext(UNSAFE_RouteContext); | ||
let routeId = (_route$matches = route.matches[route.matches.length - 1]) == null ? void 0 : _route$matches.route.id; | ||
!fetcherData ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "useFetcher must be used inside a FetchersContext") : UNSAFE_invariant(false) : void 0; | ||
!route ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "useFetcher must be used inside a RouteContext") : UNSAFE_invariant(false) : void 0; | ||
let routeId = (_route$matches = route.matches[route.matches.length - 1]) == null ? void 0 : _route$matches.route.id; | ||
!(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; | ||
let [fetcherKey] = React.useState(() => String(++fetcherId)); | ||
let [Form] = React.useState(() => { | ||
!routeId ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "No routeId available for fetcher.Form()") : UNSAFE_invariant(false) : void 0; | ||
return createFetcherForm(fetcherKey, routeId); | ||
}); | ||
let [load] = React.useState(() => href => { | ||
!router ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "No router available for fetcher.load()") : UNSAFE_invariant(false) : void 0; | ||
!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); | ||
}); | ||
let submit = useSubmitFetcher(fetcherKey, routeId); | ||
let fetcher = router.getFetcher(fetcherKey); | ||
let fetcherWithComponents = React.useMemo(() => _extends({ | ||
Form, | ||
submit, | ||
load | ||
}, fetcher), [fetcher, Form, submit, load]); | ||
// Fetcher key handling | ||
let [fetcherKey, setFetcherKey] = React.useState(key || ""); | ||
if (key && key !== fetcherKey) { | ||
setFetcherKey(key); | ||
} else if (!fetcherKey) { | ||
setFetcherKey(getUniqueFetcherId()); | ||
} | ||
// Registration/cleanup | ||
React.useEffect(() => { | ||
// Is this busted when the React team gets real weird and calls effects | ||
// twice on mount? We really just need to garbage collect here when this | ||
// fetcher is no longer around. | ||
router.getFetcher(fetcherKey); | ||
return () => { | ||
if (!router) { | ||
console.warn("No router available to clean up from useFetcher()"); | ||
return; | ||
} | ||
// Tell the router we've unmounted - if v7_fetcherPersist is enabled this | ||
// will not delete immediately but instead queue up a delete after the | ||
// fetcher returns to an `idle` state | ||
router.deleteFetcher(fetcherKey); | ||
}; | ||
}, [router, fetcherKey]); | ||
// Fetcher additions | ||
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, opts); | ||
}, [fetcherKey, routeId, router]); | ||
let submitImpl = useSubmit(); | ||
let submit = React.useCallback((target, opts) => { | ||
submitImpl(target, _extends({}, opts, { | ||
navigate: false, | ||
fetcherKey | ||
})); | ||
}, [fetcherKey, submitImpl]); | ||
let FetcherForm = React.useMemo(() => { | ||
let FetcherForm = /*#__PURE__*/React.forwardRef((props, ref) => { | ||
return /*#__PURE__*/React.createElement(Form, _extends({}, props, { | ||
navigate: false, | ||
fetcherKey: fetcherKey, | ||
ref: ref | ||
})); | ||
}); | ||
if (process.env.NODE_ENV !== "production") { | ||
FetcherForm.displayName = "fetcher.Form"; | ||
} | ||
return FetcherForm; | ||
}, [fetcherKey]); | ||
// Exposed FetcherWithComponents | ||
let fetcher = state.fetchers.get(fetcherKey) || IDLE_FETCHER; | ||
let data = fetcherData.get(fetcherKey); | ||
let fetcherWithComponents = React.useMemo(() => _extends({ | ||
Form: FetcherForm, | ||
submit, | ||
load | ||
}, fetcher, { | ||
data | ||
}), [FetcherForm, submit, load, fetcher, data]); | ||
return fetcherWithComponents; | ||
@@ -1145,3 +1227,8 @@ } | ||
let state = useDataRouterState(DataRouterStateHook.UseFetchers); | ||
return [...state.fetchers.values()]; | ||
return Array.from(state.fetchers.entries()).map(_ref11 => { | ||
let [key, fetcher] = _ref11; | ||
return _extends({}, fetcher, { | ||
key | ||
}); | ||
}); | ||
} | ||
@@ -1153,7 +1240,7 @@ const SCROLL_RESTORATION_STORAGE_KEY = "react-router-scroll-positions"; | ||
*/ | ||
function useScrollRestoration(_temp3) { | ||
function useScrollRestoration(_temp4) { | ||
let { | ||
getKey, | ||
storageKey | ||
} = _temp3 === void 0 ? {} : _temp3; | ||
} = _temp4 === void 0 ? {} : _temp4; | ||
let { | ||
@@ -1296,8 +1383,8 @@ router | ||
*/ | ||
function usePrompt(_ref11) { | ||
function usePrompt(_ref12) { | ||
let { | ||
when, | ||
message | ||
} = _ref11; | ||
let blocker = unstable_useBlocker(when); | ||
} = _ref12; | ||
let blocker = useBlocker(when); | ||
React.useEffect(() => { | ||
@@ -1364,3 +1451,3 @@ if (blocker.state === "blocked") { | ||
export { BrowserRouter, Form, HashRouter, Link, NavLink, RouterProvider, ScrollRestoration, ViewTransitionContext as UNSAFE_ViewTransitionContext, useScrollRestoration as UNSAFE_useScrollRestoration, createBrowserRouter, createHashRouter, createSearchParams, HistoryRouter as unstable_HistoryRouter, usePrompt as unstable_usePrompt, useViewTransitionState as unstable_useViewTransitionState, useBeforeUnload, useFetcher, useFetchers, useFormAction, useLinkClickHandler, useSearchParams, useSubmit }; | ||
export { BrowserRouter, Form, HashRouter, Link, NavLink, RouterProvider, ScrollRestoration, FetchersContext as UNSAFE_FetchersContext, ViewTransitionContext as UNSAFE_ViewTransitionContext, useScrollRestoration as UNSAFE_useScrollRestoration, createBrowserRouter, createHashRouter, createSearchParams, HistoryRouter as unstable_HistoryRouter, usePrompt as unstable_usePrompt, useViewTransitionState as unstable_useViewTransitionState, useBeforeUnload, useFetcher, useFetchers, useFormAction, useLinkClickHandler, useSearchParams, useSubmit }; | ||
//# sourceMappingURL=index.js.map |
/** | ||
* React Router DOM v6.17.0 | ||
* React Router DOM v6.21.1 | ||
* | ||
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc. |
/** | ||
* React Router DOM v6.17.0 | ||
* React Router DOM v6.21.1 | ||
* | ||
@@ -12,5 +12,6 @@ * Copyright (c) Remix Software Inc. | ||
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 { stripBasename, UNSAFE_warning, createRouter, createBrowserHistory, createHashHistory, UNSAFE_ErrorResponseImpl, UNSAFE_invariant, joinPaths, matchPath } from '@remix-run/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'; | ||
@@ -292,2 +293,9 @@ const defaultMethod = "get"; | ||
// TODO: (v7) Change the useFetcher data from `any` to `unknown` | ||
const FetchersContext = /*#__PURE__*/React.createContext(new Map()); | ||
{ | ||
FetchersContext.displayName = "Fetchers"; | ||
} | ||
//#endregion | ||
@@ -322,2 +330,4 @@ | ||
const startTransitionImpl = React[START_TRANSITION]; | ||
const FLUSH_SYNC = "flushSync"; | ||
const flushSyncImpl = ReactDOM[FLUSH_SYNC]; | ||
function startTransitionSafe(cb) { | ||
@@ -330,2 +340,9 @@ if (startTransitionImpl) { | ||
} | ||
function flushSyncSafe(cb) { | ||
if (flushSyncImpl) { | ||
flushSyncImpl(cb); | ||
} else { | ||
cb(); | ||
} | ||
} | ||
class Deferred { | ||
@@ -372,2 +389,3 @@ status = "pending"; | ||
let [interruption, setInterruption] = React.useState(); | ||
let fetcherData = React.useRef(new Map()); | ||
let { | ||
@@ -384,11 +402,67 @@ v7_startTransition | ||
let setState = React.useCallback((newState, { | ||
deletedFetchers, | ||
unstable_flushSync: flushSync, | ||
unstable_viewTransitionOpts: viewTransitionOpts | ||
}) => { | ||
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) { | ||
deletedFetchers.forEach(key => fetcherData.current.delete(key)); | ||
newState.fetchers.forEach((fetcher, key) => { | ||
if (fetcher.data !== undefined) { | ||
fetcherData.current.set(key, fetcher.data); | ||
} | ||
}); | ||
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(); | ||
@@ -405,2 +479,3 @@ setInterruption({ | ||
isTransitioning: true, | ||
flushSync: false, | ||
currentLocation: viewTransitionOpts.currentLocation, | ||
@@ -410,3 +485,3 @@ nextLocation: viewTransitionOpts.nextLocation | ||
} | ||
}, [optInStartTransition, transition, renderDfd, router.window]); | ||
}, [router.window, transition, renderDfd, fetcherData, optInStartTransition]); | ||
@@ -420,6 +495,6 @@ // Need to use a layout effect here so we are subscribed early enough to | ||
React.useEffect(() => { | ||
if (vtContext.isTransitioning) { | ||
if (vtContext.isTransitioning && !vtContext.flushSync) { | ||
setRenderDfd(new Deferred()); | ||
} | ||
}, [vtContext.isTransitioning]); | ||
}, [vtContext]); | ||
@@ -464,2 +539,3 @@ // Once the deferred is created, kick off startViewTransition() to update the | ||
isTransitioning: true, | ||
flushSync: false, | ||
currentLocation: interruption.currentLocation, | ||
@@ -471,2 +547,7 @@ nextLocation: interruption.nextLocation | ||
}, [vtContext.isTransitioning, interruption]); | ||
React.useEffect(() => { | ||
UNSAFE_warning(fallbackElement == null || !router.future.v7_partialHydration, "`<RouterProvider fallbackElement>` is deprecated when using " + "`v7_partialHydration`, use a `HydrateFallback` component instead") ; | ||
// Only log this once on initial mount | ||
// eslint-disable-next-line react-hooks/exhaustive-deps | ||
}, []); | ||
let navigator = React.useMemo(() => { | ||
@@ -506,2 +587,4 @@ return { | ||
value: state | ||
}, /*#__PURE__*/React.createElement(FetchersContext.Provider, { | ||
value: fetcherData.current | ||
}, /*#__PURE__*/React.createElement(ViewTransitionContext.Provider, { | ||
@@ -513,13 +596,18 @@ value: vtContext | ||
navigationType: state.historyAction, | ||
navigator: navigator | ||
}, state.initialized ? /*#__PURE__*/React.createElement(DataRoutes, { | ||
navigator: navigator, | ||
future: { | ||
v7_relativeSplatPath: router.future.v7_relativeSplatPath | ||
} | ||
}, state.initialized || router.future.v7_partialHydration ? /*#__PURE__*/React.createElement(DataRoutes, { | ||
routes: router.routes, | ||
future: router.future, | ||
state: state | ||
}) : fallbackElement)))), null); | ||
}) : fallbackElement))))), null); | ||
} | ||
function DataRoutes({ | ||
routes, | ||
future, | ||
state | ||
}) { | ||
return UNSAFE_useRoutesImpl(routes, undefined, state); | ||
return UNSAFE_useRoutesImpl(routes, undefined, state, future); | ||
} | ||
@@ -559,3 +647,4 @@ /** | ||
navigationType: state.action, | ||
navigator: history | ||
navigator: history, | ||
future: future | ||
}); | ||
@@ -597,3 +686,4 @@ } | ||
navigationType: state.action, | ||
navigator: history | ||
navigator: history, | ||
future: future | ||
}); | ||
@@ -629,3 +719,4 @@ } | ||
navigationType: state.action, | ||
navigator: history | ||
navigator: history, | ||
future: future | ||
}); | ||
@@ -750,3 +841,10 @@ } | ||
} | ||
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) === "/"); | ||
@@ -789,13 +887,5 @@ let renderProps = { | ||
*/ | ||
const Form = /*#__PURE__*/React.forwardRef((props, ref) => { | ||
let submit = useSubmit(); | ||
return /*#__PURE__*/React.createElement(FormImpl, Object.assign({}, props, { | ||
submit: submit, | ||
ref: ref | ||
})); | ||
}); | ||
{ | ||
Form.displayName = "Form"; | ||
} | ||
const FormImpl = /*#__PURE__*/React.forwardRef(({ | ||
const Form = /*#__PURE__*/React.forwardRef(({ | ||
fetcherKey, | ||
navigate, | ||
reloadDocument, | ||
@@ -807,3 +897,2 @@ replace, | ||
onSubmit, | ||
submit, | ||
relative, | ||
@@ -814,6 +903,7 @@ preventScrollReset, | ||
}, forwardedRef) => { | ||
let formMethod = _method.toLowerCase() === "get" ? "get" : "post"; | ||
let submit = useSubmit(); | ||
let formAction = useFormAction(action, { | ||
relative | ||
}); | ||
let formMethod = _method.toLowerCase() === "get" ? "get" : "post"; | ||
let submitHandler = event => { | ||
@@ -826,3 +916,5 @@ onSubmit && onSubmit(event); | ||
submit(submitter || event.currentTarget, { | ||
fetcherKey, | ||
method: submitMethod, | ||
navigate, | ||
replace, | ||
@@ -843,3 +935,3 @@ state, | ||
{ | ||
FormImpl.displayName = "FormImpl"; | ||
Form.displayName = "Form"; | ||
} | ||
@@ -877,6 +969,7 @@ /** | ||
var DataRouterStateHook = /*#__PURE__*/function (DataRouterStateHook) { | ||
DataRouterStateHook["UseFetcher"] = "useFetcher"; | ||
DataRouterStateHook["UseFetchers"] = "useFetchers"; | ||
DataRouterStateHook["UseScrollRestoration"] = "useScrollRestoration"; | ||
return DataRouterStateHook; | ||
}(DataRouterStateHook || {}); | ||
}(DataRouterStateHook || {}); // Internal hooks | ||
function getDataRouterConsoleError(hookName) { | ||
@@ -896,2 +989,4 @@ return `${hookName} must be used within a data router. See https://reactrouter.com/routers/picking-a-router.`; | ||
// External hooks | ||
/** | ||
@@ -969,2 +1064,4 @@ * Handles the click behavior for router `<Link>` components. This is useful if | ||
} | ||
let fetcherId = 0; | ||
let getUniqueFetcherId = () => `__${String(++fetcherId)}__`; | ||
@@ -992,46 +1089,29 @@ /** | ||
} = getFormSubmissionInfo(target, basename); | ||
router.navigate(options.action || action, { | ||
preventScrollReset: options.preventScrollReset, | ||
formData, | ||
body, | ||
formMethod: options.method || method, | ||
formEncType: options.encType || encType, | ||
replace: options.replace, | ||
state: options.state, | ||
fromRouteId: currentRouteId, | ||
unstable_viewTransition: options.unstable_viewTransition | ||
}); | ||
if (options.navigate === false) { | ||
let key = options.fetcherKey || getUniqueFetcherId(); | ||
router.fetch(key, currentRouteId, options.action || action, { | ||
preventScrollReset: options.preventScrollReset, | ||
formData, | ||
body, | ||
formMethod: options.method || method, | ||
formEncType: options.encType || encType, | ||
unstable_flushSync: options.unstable_flushSync | ||
}); | ||
} else { | ||
router.navigate(options.action || action, { | ||
preventScrollReset: options.preventScrollReset, | ||
formData, | ||
body, | ||
formMethod: options.method || method, | ||
formEncType: options.encType || encType, | ||
replace: options.replace, | ||
state: options.state, | ||
fromRouteId: currentRouteId, | ||
unstable_flushSync: options.unstable_flushSync, | ||
unstable_viewTransition: options.unstable_viewTransition | ||
}); | ||
} | ||
}, [router, basename, currentRouteId]); | ||
} | ||
/** | ||
* Returns the implementation for fetcher.submit | ||
*/ | ||
function useSubmitFetcher(fetcherKey, fetcherRouteId) { | ||
let { | ||
router | ||
} = useDataRouterContext(DataRouterHook.UseSubmitFetcher); | ||
let { | ||
basename | ||
} = React.useContext(UNSAFE_NavigationContext); | ||
return React.useCallback((target, options = {}) => { | ||
validateClientSideSubmission(); | ||
let { | ||
action, | ||
method, | ||
encType, | ||
formData, | ||
body | ||
} = getFormSubmissionInfo(target, basename); | ||
!(fetcherRouteId != null) ? UNSAFE_invariant(false, "No routeId available for useFetcher()") : void 0; | ||
router.fetch(fetcherKey, fetcherRouteId, options.action || action, { | ||
preventScrollReset: options.preventScrollReset, | ||
formData, | ||
body, | ||
formMethod: options.method || method, | ||
formEncType: options.encType || encType | ||
}); | ||
}, [router, basename, fetcherKey, fetcherRouteId]); | ||
} | ||
// v7: Eventually we should deprecate this entirely in favor of using the | ||
@@ -1056,6 +1136,4 @@ // router method directly? | ||
// 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 | ||
@@ -1068,7 +1146,7 @@ let location = useLocation(); | ||
// 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"); | ||
@@ -1091,16 +1169,2 @@ path.search = params.toString() ? `?${params.toString()}` : ""; | ||
} | ||
function createFetcherForm(fetcherKey, routeId) { | ||
let FetcherForm = /*#__PURE__*/React.forwardRef((props, ref) => { | ||
let submit = useSubmitFetcher(fetcherKey, routeId); | ||
return /*#__PURE__*/React.createElement(FormImpl, Object.assign({}, props, { | ||
ref: ref, | ||
submit: submit | ||
})); | ||
}); | ||
{ | ||
FetcherForm.displayName = "fetcher.Form"; | ||
} | ||
return FetcherForm; | ||
} | ||
let fetcherId = 0; | ||
// TODO: (v7) Change the useFetcher generic default from `any` to `unknown` | ||
@@ -1111,40 +1175,72 @@ /** | ||
*/ | ||
function useFetcher() { | ||
function useFetcher({ | ||
key | ||
} = {}) { | ||
let { | ||
router | ||
} = useDataRouterContext(DataRouterHook.UseFetcher); | ||
let state = useDataRouterState(DataRouterStateHook.UseFetcher); | ||
let fetcherData = React.useContext(FetchersContext); | ||
let route = React.useContext(UNSAFE_RouteContext); | ||
let routeId = route.matches[route.matches.length - 1]?.route.id; | ||
!fetcherData ? UNSAFE_invariant(false, `useFetcher must be used inside a FetchersContext`) : void 0; | ||
!route ? UNSAFE_invariant(false, `useFetcher must be used inside a RouteContext`) : void 0; | ||
let routeId = route.matches[route.matches.length - 1]?.route.id; | ||
!(routeId != null) ? UNSAFE_invariant(false, `useFetcher can only be used on routes that contain a unique "id"`) : void 0; | ||
let [fetcherKey] = React.useState(() => String(++fetcherId)); | ||
let [Form] = React.useState(() => { | ||
!routeId ? UNSAFE_invariant(false, `No routeId available for fetcher.Form()`) : void 0; | ||
return createFetcherForm(fetcherKey, routeId); | ||
}); | ||
let [load] = React.useState(() => href => { | ||
!router ? UNSAFE_invariant(false, "No router available for fetcher.load()") : void 0; | ||
!routeId ? UNSAFE_invariant(false, "No routeId available for fetcher.load()") : void 0; | ||
router.fetch(fetcherKey, routeId, href); | ||
}); | ||
let submit = useSubmitFetcher(fetcherKey, routeId); | ||
let fetcher = router.getFetcher(fetcherKey); | ||
let fetcherWithComponents = React.useMemo(() => ({ | ||
Form, | ||
submit, | ||
load, | ||
...fetcher | ||
}), [fetcher, Form, submit, load]); | ||
// Fetcher key handling | ||
let [fetcherKey, setFetcherKey] = React.useState(key || ""); | ||
if (key && key !== fetcherKey) { | ||
setFetcherKey(key); | ||
} else if (!fetcherKey) { | ||
setFetcherKey(getUniqueFetcherId()); | ||
} | ||
// Registration/cleanup | ||
React.useEffect(() => { | ||
// Is this busted when the React team gets real weird and calls effects | ||
// twice on mount? We really just need to garbage collect here when this | ||
// fetcher is no longer around. | ||
router.getFetcher(fetcherKey); | ||
return () => { | ||
if (!router) { | ||
console.warn(`No router available to clean up from useFetcher()`); | ||
return; | ||
} | ||
// Tell the router we've unmounted - if v7_fetcherPersist is enabled this | ||
// will not delete immediately but instead queue up a delete after the | ||
// fetcher returns to an `idle` state | ||
router.deleteFetcher(fetcherKey); | ||
}; | ||
}, [router, fetcherKey]); | ||
// Fetcher additions | ||
let load = React.useCallback((href, opts) => { | ||
!routeId ? UNSAFE_invariant(false, "No routeId available for fetcher.load()") : void 0; | ||
router.fetch(fetcherKey, routeId, href, opts); | ||
}, [fetcherKey, routeId, router]); | ||
let submitImpl = useSubmit(); | ||
let submit = React.useCallback((target, opts) => { | ||
submitImpl(target, { | ||
...opts, | ||
navigate: false, | ||
fetcherKey | ||
}); | ||
}, [fetcherKey, submitImpl]); | ||
let FetcherForm = React.useMemo(() => { | ||
let FetcherForm = /*#__PURE__*/React.forwardRef((props, ref) => { | ||
return /*#__PURE__*/React.createElement(Form, Object.assign({}, props, { | ||
navigate: false, | ||
fetcherKey: fetcherKey, | ||
ref: ref | ||
})); | ||
}); | ||
{ | ||
FetcherForm.displayName = "fetcher.Form"; | ||
} | ||
return FetcherForm; | ||
}, [fetcherKey]); | ||
// Exposed FetcherWithComponents | ||
let fetcher = state.fetchers.get(fetcherKey) || IDLE_FETCHER; | ||
let data = fetcherData.get(fetcherKey); | ||
let fetcherWithComponents = React.useMemo(() => ({ | ||
Form: FetcherForm, | ||
submit, | ||
load, | ||
...fetcher, | ||
data | ||
}), [FetcherForm, submit, load, fetcher, data]); | ||
return fetcherWithComponents; | ||
@@ -1159,3 +1255,6 @@ } | ||
let state = useDataRouterState(DataRouterStateHook.UseFetchers); | ||
return [...state.fetchers.values()]; | ||
return Array.from(state.fetchers.entries()).map(([key, fetcher]) => ({ | ||
...fetcher, | ||
key | ||
})); | ||
} | ||
@@ -1327,3 +1426,3 @@ const SCROLL_RESTORATION_STORAGE_KEY = "react-router-scroll-positions"; | ||
}) { | ||
let blocker = unstable_useBlocker(when); | ||
let blocker = useBlocker(when); | ||
React.useEffect(() => { | ||
@@ -1390,3 +1489,3 @@ if (blocker.state === "blocked") { | ||
export { BrowserRouter, Form, HashRouter, Link, NavLink, RouterProvider, ScrollRestoration, ViewTransitionContext as UNSAFE_ViewTransitionContext, useScrollRestoration as UNSAFE_useScrollRestoration, createBrowserRouter, createHashRouter, createSearchParams, HistoryRouter as unstable_HistoryRouter, usePrompt as unstable_usePrompt, useViewTransitionState as unstable_useViewTransitionState, useBeforeUnload, useFetcher, useFetchers, useFormAction, useLinkClickHandler, useSearchParams, useSubmit }; | ||
export { BrowserRouter, Form, HashRouter, Link, NavLink, RouterProvider, ScrollRestoration, FetchersContext as UNSAFE_FetchersContext, ViewTransitionContext as UNSAFE_ViewTransitionContext, useScrollRestoration as UNSAFE_useScrollRestoration, createBrowserRouter, createHashRouter, createSearchParams, HistoryRouter as unstable_HistoryRouter, usePrompt as unstable_usePrompt, useViewTransitionState as unstable_useViewTransitionState, useBeforeUnload, useFetcher, useFetchers, useFormAction, useLinkClickHandler, useSearchParams, useSubmit }; | ||
//# sourceMappingURL=react-router-dom.development.js.map |
/** | ||
* React Router DOM v6.17.0 | ||
* React Router DOM v6.21.1 | ||
* | ||
@@ -11,3 +11,3 @@ * Copyright (c) Remix Software Inc. | ||
*/ | ||
import*as e from"react";import{UNSAFE_mapRouteProperties as t,UNSAFE_DataRouterContext as n,UNSAFE_DataRouterStateContext as r,Router as o,UNSAFE_useRoutesImpl as a,UNSAFE_NavigationContext as i,useHref as s,useResolvedPath as u,useLocation as l,useNavigate as c,createPath as f,UNSAFE_useRouteId as m,UNSAFE_RouteContext as d,useMatches as p,useNavigation as h,unstable_useBlocker as w}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{stripBasename as v,createRouter as g,createBrowserHistory as b,createHashHistory as y,UNSAFE_ErrorResponseImpl as R,UNSAFE_invariant as S,joinPaths as E,matchPath as T}from"@remix-run/router";const L="application/x-www-form-urlencoded";function C(e){return null!=e&&"string"==typeof e.tagName}function x(e=""){return new URLSearchParams("string"==typeof e||Array.isArray(e)||e instanceof URLSearchParams?e:Object.keys(e).reduce(((t,n)=>{let r=e[n];return t.concat(Array.isArray(r)?r.map((e=>[n,e])):[[n,r]])}),[]))}let _=null;const A=new Set(["application/x-www-form-urlencoded","multipart/form-data","text/plain"]);function F(e){return null==e||A.has(e)?e:null}function U(e,t){let n,r,o,a,i;if(C(s=e)&&"form"===s.tagName.toLowerCase()){let i=e.getAttribute("action");r=i?v(i,t):null,n=e.getAttribute("method")||"get",o=F(e.getAttribute("enctype"))||L,a=new FormData(e)}else if(function(e){return C(e)&&"button"===e.tagName.toLowerCase()}(e)||function(e){return C(e)&&"input"===e.tagName.toLowerCase()}(e)&&("submit"===e.type||"image"===e.type)){let i=e.form;if(null==i)throw new Error('Cannot submit a <button> or <input type="submit"> without a <form>');let s=e.getAttribute("formaction")||i.getAttribute("action");if(r=s?v(s,t):null,n=e.getAttribute("formmethod")||i.getAttribute("method")||"get",o=F(e.getAttribute("formenctype"))||F(i.getAttribute("enctype"))||L,a=new FormData(i,e),!function(){if(null===_)try{new FormData(document.createElement("form"),0),_=!1}catch(e){_=!0}return _}()){let{name:t,type:n,value:r}=e;if("image"===n){let e=t?`${t}.`:"";a.append(`${e}x`,"0"),a.append(`${e}y`,"0")}else t&&a.append(t,r)}}else{if(C(e))throw new Error('Cannot submit element that is not <form>, <button>, or <input type="submit|image">');n="get",r=null,o=L,i=e}var s;return a&&"text/plain"===o&&(i=a,a=void 0),{action:r,method:n.toLowerCase(),encType:o,formData:a,body:i}}function k(e,n){return g({basename:n?.basename,future:{...n?.future,v7_prependBasename:!0},history:b({window:n?.window}),hydrationData:n?.hydrationData||N(),routes:e,mapRouteProperties:t,window:n?.window}).initialize()}function D(e,n){return g({basename:n?.basename,future:{...n?.future,v7_prependBasename:!0},history:y({window:n?.window}),hydrationData:n?.hydrationData||N(),routes:e,mapRouteProperties:t,window:n?.window}).initialize()}function N(){let e=window?.__staticRouterHydrationData;return e&&e.errors&&(e={...e,errors:P(e.errors)}),e}function P(e){if(!e)return null;let t=Object.entries(e),n={};for(let[o,a]of t)if(a&&"RouteErrorResponse"===a.__type)n[o]=new R(a.status,a.statusText,a.data,!0===a.internal);else if(a&&"Error"===a.__type){if(a.__subType){let e=window[a.__subType];if("function"==typeof e)try{let t=new e(a.message);t.stack="",n[o]=t}catch(r){}}if(null==n[o]){let e=new Error(a.message);e.stack="",n[o]=e}}else n[o]=a;return n}const O=e.createContext({isTransitioning:!1}),j=e.startTransition;class M{status="pending";constructor(){this.promise=new Promise(((e,t)=>{this.resolve=t=>{"pending"===this.status&&(this.status="resolved",e(t))},this.reject=e=>{"pending"===this.status&&(this.status="rejected",t(e))}}))}}function K({fallbackElement:t,router:a,future:i}){let[s,u]=e.useState(a.state),[l,c]=e.useState(),[f,m]=e.useState({isTransitioning:!1}),[d,p]=e.useState(),[h,w]=e.useState(),[v,g]=e.useState(),{v7_startTransition:b}=i||{},y=e.useCallback((e=>{b?function(e){j?j(e):e()}(e):e()}),[b]),R=e.useCallback(((e,{unstable_viewTransitionOpts:t})=>{t&&null!=a.window&&"function"==typeof a.window.document.startViewTransition?h&&d?(d.resolve(),h.skipTransition(),g({state:e,currentLocation:t.currentLocation,nextLocation:t.nextLocation})):(c(e),m({isTransitioning:!0,currentLocation:t.currentLocation,nextLocation:t.nextLocation})):y((()=>u(e)))}),[y,h,d,a.window]);e.useLayoutEffect((()=>a.subscribe(R)),[a,R]),e.useEffect((()=>{f.isTransitioning&&p(new M)}),[f.isTransitioning]),e.useEffect((()=>{if(d&&l&&a.window){let e=l,t=d.promise,n=a.window.document.startViewTransition((async()=>{y((()=>u(e))),await t}));n.finished.finally((()=>{p(void 0),w(void 0),c(void 0),m({isTransitioning:!1})})),w(n)}}),[y,l,d,a.window]),e.useEffect((()=>{d&&l&&s.location.key===l.location.key&&d.resolve()}),[d,h,s.location,l]),e.useEffect((()=>{!f.isTransitioning&&v&&(c(v.state),m({isTransitioning:!0,currentLocation:v.currentLocation,nextLocation:v.nextLocation}),g(void 0))}),[f.isTransitioning,v]);let S=e.useMemo((()=>({createHref:a.createHref,encodeLocation:a.encodeLocation,go:e=>a.navigate(e),push:(e,t,n)=>a.navigate(e,{state:t,preventScrollReset:n?.preventScrollReset}),replace:(e,t,n)=>a.navigate(e,{replace:!0,state:t,preventScrollReset:n?.preventScrollReset})})),[a]),E=a.basename||"/",T=e.useMemo((()=>({router:a,navigator:S,static:!1,basename:E})),[a,S,E]);return e.createElement(e.Fragment,null,e.createElement(n.Provider,{value:T},e.createElement(r.Provider,{value:s},e.createElement(O.Provider,{value:f},e.createElement(o,{basename:E,location:s.location,navigationType:s.historyAction,navigator:S},s.initialized?e.createElement(V,{routes:a.routes,state:s}):t)))),null)}function V({routes:e,state:t}){return a(e,void 0,t)}function I({basename:t,children:n,future:r,window:a}){let i=e.useRef();null==i.current&&(i.current=b({window:a,v5Compat:!0}));let s=i.current,[u,l]=e.useState({action:s.action,location:s.location}),{v7_startTransition:c}=r||{},f=e.useCallback((e=>{c&&j?j((()=>l(e))):l(e)}),[l,c]);return e.useLayoutEffect((()=>s.listen(f)),[s,f]),e.createElement(o,{basename:t,children:n,location:u.location,navigationType:u.action,navigator:s})}function z({basename:t,children:n,future:r,window:a}){let i=e.useRef();null==i.current&&(i.current=y({window:a,v5Compat:!0}));let s=i.current,[u,l]=e.useState({action:s.action,location:s.location}),{v7_startTransition:c}=r||{},f=e.useCallback((e=>{c&&j?j((()=>l(e))):l(e)}),[l,c]);return e.useLayoutEffect((()=>s.listen(f)),[s,f]),e.createElement(o,{basename:t,children:n,location:u.location,navigationType:u.action,navigator:s})}function B({basename:t,children:n,future:r,history:a}){let[i,s]=e.useState({action:a.action,location:a.location}),{v7_startTransition:u}=r||{},l=e.useCallback((e=>{u&&j?j((()=>s(e))):s(e)}),[s,u]);return e.useLayoutEffect((()=>a.listen(l)),[a,l]),e.createElement(o,{basename:t,children:n,location:i.location,navigationType:i.action,navigator:a})}const H="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement,$=/^(?:[a-z][a-z0-9+.-]*:|\/\/)/i,W=e.forwardRef((function({onClick:t,relative:n,reloadDocument:r,replace:o,state:a,target:u,to:l,preventScrollReset:c,unstable_viewTransition:f,...m},d){let p,{basename:h}=e.useContext(i),w=!1;if("string"==typeof l&&$.test(l)&&(p=l,H))try{let e=new URL(window.location.href),t=l.startsWith("//")?new URL(e.protocol+l):new URL(l),n=v(t.pathname,h);t.origin===e.origin&&null!=n?l=n+t.search+t.hash:w=!0}catch(y){}let g=s(l,{relative:n}),b=te(l,{replace:o,state:a,target:u,preventScrollReset:c,relative:n,unstable_viewTransition:f});return e.createElement("a",Object.assign({},m,{href:p||g,onClick:w||r?t:function(e){t&&t(e),e.defaultPrevented||b(e)},ref:d,target:u}))})),Y=e.forwardRef((function({"aria-current":t="page",caseSensitive:n=!1,className:o="",end:a=!1,style:s,to:c,unstable_viewTransition:f,children:m,...d},p){let h=u(c,{relative:d.relative}),w=l(),v=e.useContext(r),{navigator:g}=e.useContext(i),b=null!=v&&pe(h)&&!0===f,y=g.encodeLocation?g.encodeLocation(h).pathname:h.pathname,R=w.pathname,S=v&&v.navigation&&v.navigation.location?v.navigation.location.pathname:null;n||(R=R.toLowerCase(),S=S?S.toLowerCase():null,y=y.toLowerCase());let E,T=R===y||!a&&R.startsWith(y)&&"/"===R.charAt(y.length),L=null!=S&&(S===y||!a&&S.startsWith(y)&&"/"===S.charAt(y.length)),C={isActive:T,isPending:L,isTransitioning:b},x=T?t:void 0;E="function"==typeof o?o(C):[o,T?"active":null,L?"pending":null,b?"transitioning":null].filter(Boolean).join(" ");let _="function"==typeof s?s(C):s;return e.createElement(W,Object.assign({},d,{"aria-current":x,className:E,ref:p,style:_,to:c,unstable_viewTransition:f}),"function"==typeof m?m(C):m)})),J=e.forwardRef(((t,n)=>{let r=oe();return e.createElement(q,Object.assign({},t,{submit:r,ref:n}))})),q=e.forwardRef((({reloadDocument:t,replace:n,state:r,method:o="get",action:a,onSubmit:i,submit:s,relative:u,preventScrollReset:l,unstable_viewTransition:c,...f},m)=>{let d="get"===o.toLowerCase()?"get":"post",p=ie(a,{relative:u});return e.createElement("form",Object.assign({ref:m,method:d,action:p,onSubmit:t?i:e=>{if(i&&i(e),e.defaultPrevented)return;e.preventDefault();let t=e.nativeEvent.submitter,a=t?.getAttribute("formmethod")||o;s(t||e.currentTarget,{method:a,replace:n,state:r,relative:u,preventScrollReset:l,unstable_viewTransition:c})}},f))}));function G({getKey:e,storageKey:t}){return fe({getKey:e,storageKey:t}),null}var Q=function(e){return e.UseScrollRestoration="useScrollRestoration",e.UseSubmit="useSubmit",e.UseSubmitFetcher="useSubmitFetcher",e.UseFetcher="useFetcher",e.useViewTransitionState="useViewTransitionState",e}(Q||{}),X=function(e){return e.UseFetchers="useFetchers",e.UseScrollRestoration="useScrollRestoration",e}(X||{});function Z(t){let r=e.useContext(n);return r||S(!1),r}function ee(t){let n=e.useContext(r);return n||S(!1),n}function te(t,{target:n,replace:r,state:o,preventScrollReset:a,relative:i,unstable_viewTransition:s}={}){let m=c(),d=l(),p=u(t,{relative:i});return e.useCallback((e=>{if(function(e,t){return!(0!==e.button||t&&"_self"!==t||function(e){return!!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)}(e))}(e,n)){e.preventDefault();let n=void 0!==r?r:f(d)===f(p);m(t,{replace:n,state:o,preventScrollReset:a,relative:i,unstable_viewTransition:s})}}),[d,m,p,r,o,n,t,a,i,s])}function ne(t){let n=e.useRef(x(t)),r=e.useRef(!1),o=l(),a=e.useMemo((()=>function(e,t){let n=x(e);return t&&t.forEach(((e,r)=>{n.has(r)||t.getAll(r).forEach((e=>{n.append(r,e)}))})),n}(o.search,r.current?null:n.current)),[o.search]),i=c(),s=e.useCallback(((e,t)=>{const n=x("function"==typeof e?e(a):e);r.current=!0,i("?"+n,t)}),[i,a]);return[a,s]}function re(){if("undefined"==typeof document)throw new Error("You are calling submit during the server render. Try calling submit within a `useEffect` or callback instead.")}function oe(){let{router:t}=Z(Q.UseSubmit),{basename:n}=e.useContext(i),r=m();return e.useCallback(((e,o={})=>{re();let{action:a,method:i,encType:s,formData:u,body:l}=U(e,n);t.navigate(o.action||a,{preventScrollReset:o.preventScrollReset,formData:u,body:l,formMethod:o.method||i,formEncType:o.encType||s,replace:o.replace,state:o.state,fromRouteId:r,unstable_viewTransition:o.unstable_viewTransition})}),[t,n,r])}function ae(t,n){let{router:r}=Z(Q.UseSubmitFetcher),{basename:o}=e.useContext(i);return e.useCallback(((e,a={})=>{re();let{action:i,method:s,encType:u,formData:l,body:c}=U(e,o);null==n&&S(!1),r.fetch(t,n,a.action||i,{preventScrollReset:a.preventScrollReset,formData:l,body:c,formMethod:a.method||s,formEncType:a.encType||u})}),[r,o,t,n])}function ie(t,{relative:n}={}){let{basename:r}=e.useContext(i),o=e.useContext(d);o||S(!1);let[a]=o.matches.slice(-1),s={...u(t||".",{relative:n})},c=l();if(null==t&&(s.search=c.search,a.route.index)){let e=new URLSearchParams(s.search);e.delete("index"),s.search=e.toString()?`?${e.toString()}`:""}return t&&"."!==t||!a.route.index||(s.search=s.search?s.search.replace(/^\?/,"?index&"):"?index"),"/"!==r&&(s.pathname="/"===s.pathname?r:E([r,s.pathname])),f(s)}let se=0;function ue(){let{router:t}=Z(Q.UseFetcher),n=e.useContext(d);n||S(!1);let r=n.matches[n.matches.length-1]?.route.id;null==r&&S(!1);let[o]=e.useState((()=>String(++se))),[a]=e.useState((()=>(r||S(!1),function(t,n){return e.forwardRef(((r,o)=>{let a=ae(t,n);return e.createElement(q,Object.assign({},r,{ref:o,submit:a}))}))}(o,r)))),[i]=e.useState((()=>e=>{t||S(!1),r||S(!1),t.fetch(o,r,e)})),s=ae(o,r),u=t.getFetcher(o),l=e.useMemo((()=>({Form:a,submit:s,load:i,...u})),[u,a,s,i]);return e.useEffect((()=>()=>{t?t.deleteFetcher(o):console.warn("No router available to clean up from useFetcher()")}),[t,o]),l}function le(){return[...ee(X.UseFetchers).fetchers.values()]}let ce={};function fe({getKey:t,storageKey:n}={}){let{router:r}=Z(Q.UseScrollRestoration),{restoreScrollPosition:o,preventScrollReset:a}=ee(X.UseScrollRestoration),{basename:s}=e.useContext(i),u=l(),c=p(),f=h();e.useEffect((()=>(window.history.scrollRestoration="manual",()=>{window.history.scrollRestoration="auto"})),[]),function(t,n){let{capture:r}=n||{};e.useEffect((()=>{let e=null!=r?{capture:r}:void 0;return window.addEventListener("pagehide",t,e),()=>{window.removeEventListener("pagehide",t,e)}}),[t,r])}(e.useCallback((()=>{if("idle"===f.state){let e=(t?t(u,c):null)||u.key;ce[e]=window.scrollY}try{sessionStorage.setItem(n||"react-router-scroll-positions",JSON.stringify(ce))}catch(e){}window.history.scrollRestoration="auto"}),[n,t,f.state,u,c])),"undefined"!=typeof document&&(e.useLayoutEffect((()=>{try{let e=sessionStorage.getItem(n||"react-router-scroll-positions");e&&(ce=JSON.parse(e))}catch(e){}}),[n]),e.useLayoutEffect((()=>{let e=t&&"/"!==s?(e,n)=>t({...e,pathname:v(e.pathname,s)||e.pathname},n):t,n=r?.enableScrollRestoration(ce,(()=>window.scrollY),e);return()=>n&&n()}),[r,s,t]),e.useLayoutEffect((()=>{if(!1!==o)if("number"!=typeof o){if(u.hash){let e=document.getElementById(decodeURIComponent(u.hash.slice(1)));if(e)return void e.scrollIntoView()}!0!==a&&window.scrollTo(0,0)}else window.scrollTo(0,o)}),[u,o,a]))}function me(t,n){let{capture:r}=n||{};e.useEffect((()=>{let e=null!=r?{capture:r}:void 0;return window.addEventListener("beforeunload",t,e),()=>{window.removeEventListener("beforeunload",t,e)}}),[t,r])}function de({when:t,message:n}){let r=w(t);e.useEffect((()=>{if("blocked"===r.state){window.confirm(n)?setTimeout(r.proceed,0):r.reset()}}),[r,n]),e.useEffect((()=>{"blocked"!==r.state||t||r.reset()}),[r,t])}function pe(t,n={}){let r=e.useContext(O);null==r&&S(!1);let{basename:o}=Z(Q.useViewTransitionState),a=u(t,{relative:n.relative});if(!r.isTransitioning)return!1;let i=v(r.currentLocation.pathname,o)||r.currentLocation.pathname,s=v(r.nextLocation.pathname,o)||r.nextLocation.pathname;return null!=T(a.pathname,s)||null!=T(a.pathname,i)}export{I as BrowserRouter,J as Form,z as HashRouter,W as Link,Y as NavLink,K as RouterProvider,G as ScrollRestoration,O as UNSAFE_ViewTransitionContext,fe as UNSAFE_useScrollRestoration,k as createBrowserRouter,D as createHashRouter,x as createSearchParams,B as unstable_HistoryRouter,de as unstable_usePrompt,pe as unstable_useViewTransitionState,me as useBeforeUnload,ue as useFetcher,le as useFetchers,ie as useFormAction,te as useLinkClickHandler,ne as useSearchParams,oe as useSubmit}; | ||
import*as e from"react";import*as t from"react-dom";import{UNSAFE_mapRouteProperties as n,UNSAFE_DataRouterContext as r,UNSAFE_DataRouterStateContext as a,Router as o,UNSAFE_useRoutesImpl as i,UNSAFE_NavigationContext as s,useHref as u,useResolvedPath as l,useLocation as c,useNavigate as f,createPath as d,UNSAFE_useRouteId as m,UNSAFE_RouteContext as h,useMatches as p,useNavigation as w,useBlocker as v}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 as g,createRouter as y,createBrowserHistory as b,createHashHistory as S,UNSAFE_ErrorResponseImpl as R,UNSAFE_invariant as E,joinPaths as T,IDLE_FETCHER as L,matchPath as _}from"@remix-run/router";const C="application/x-www-form-urlencoded";function x(e){return null!=e&&"string"==typeof e.tagName}function A(e=""){return new URLSearchParams("string"==typeof e||Array.isArray(e)||e instanceof URLSearchParams?e:Object.keys(e).reduce(((t,n)=>{let r=e[n];return t.concat(Array.isArray(r)?r.map((e=>[n,e])):[[n,r]])}),[]))}let F=null;const U=new Set(["application/x-www-form-urlencoded","multipart/form-data","text/plain"]);function k(e){return null==e||U.has(e)?e:null}function P(e,t){let n,r,a,o,i;if(x(s=e)&&"form"===s.tagName.toLowerCase()){let i=e.getAttribute("action");r=i?g(i,t):null,n=e.getAttribute("method")||"get",a=k(e.getAttribute("enctype"))||C,o=new FormData(e)}else if(function(e){return x(e)&&"button"===e.tagName.toLowerCase()}(e)||function(e){return x(e)&&"input"===e.tagName.toLowerCase()}(e)&&("submit"===e.type||"image"===e.type)){let i=e.form;if(null==i)throw new Error('Cannot submit a <button> or <input type="submit"> without a <form>');let s=e.getAttribute("formaction")||i.getAttribute("action");if(r=s?g(s,t):null,n=e.getAttribute("formmethod")||i.getAttribute("method")||"get",a=k(e.getAttribute("formenctype"))||k(i.getAttribute("enctype"))||C,o=new FormData(i,e),!function(){if(null===F)try{new FormData(document.createElement("form"),0),F=!1}catch(e){F=!0}return F}()){let{name:t,type:n,value:r}=e;if("image"===n){let e=t?`${t}.`:"";o.append(`${e}x`,"0"),o.append(`${e}y`,"0")}else t&&o.append(t,r)}}else{if(x(e))throw new Error('Cannot submit element that is not <form>, <button>, or <input type="submit|image">');n="get",r=null,a=C,i=e}var s;return o&&"text/plain"===a&&(i=o,o=void 0),{action:r,method:n.toLowerCase(),encType:a,formData:o,body:i}}function D(e,t){return y({basename:t?.basename,future:{...t?.future,v7_prependBasename:!0},history:b({window:t?.window}),hydrationData:t?.hydrationData||K(),routes:e,mapRouteProperties:n,window:t?.window}).initialize()}function N(e,t){return y({basename:t?.basename,future:{...t?.future,v7_prependBasename:!0},history:S({window:t?.window}),hydrationData:t?.hydrationData||K(),routes:e,mapRouteProperties:n,window:t?.window}).initialize()}function K(){let e=window?.__staticRouterHydrationData;return e&&e.errors&&(e={...e,errors:M(e.errors)}),e}function M(e){if(!e)return null;let t=Object.entries(e),n={};for(let[a,o]of t)if(o&&"RouteErrorResponse"===o.__type)n[a]=new R(o.status,o.statusText,o.data,!0===o.internal);else if(o&&"Error"===o.__type){if(o.__subType){let e=window[o.__subType];if("function"==typeof e)try{let t=new e(o.message);t.stack="",n[a]=t}catch(r){}}if(null==n[a]){let e=new Error(o.message);e.stack="",n[a]=e}}else n[a]=o;return n}const O=e.createContext({isTransitioning:!1}),j=e.createContext(new Map),V=e.startTransition,I=t.flushSync;function H(e){I?I(e):e()}class z{status="pending";constructor(){this.promise=new Promise(((e,t)=>{this.resolve=t=>{"pending"===this.status&&(this.status="resolved",e(t))},this.reject=e=>{"pending"===this.status&&(this.status="rejected",t(e))}}))}}function B({fallbackElement:t,router:n,future:i}){let[s,u]=e.useState(n.state),[l,c]=e.useState(),[f,d]=e.useState({isTransitioning:!1}),[m,h]=e.useState(),[p,w]=e.useState(),[v,g]=e.useState(),y=e.useRef(new Map),{v7_startTransition:b}=i||{},S=e.useCallback((e=>{b?function(e){V?V(e):e()}(e):e()}),[b]),R=e.useCallback(((e,{deletedFetchers:t,unstable_flushSync:r,unstable_viewTransitionOpts:a})=>{t.forEach((e=>y.current.delete(e))),e.fetchers.forEach(((e,t)=>{void 0!==e.data&&y.current.set(t,e.data)}));let o=null==n.window||"function"!=typeof n.window.document.startViewTransition;if(a&&!o){if(r){H((()=>{p&&(m&&m.resolve(),p.skipTransition()),d({isTransitioning:!0,flushSync:!0,currentLocation:a.currentLocation,nextLocation:a.nextLocation})}));let t=n.window.document.startViewTransition((()=>{H((()=>u(e)))}));return t.finished.finally((()=>{H((()=>{h(void 0),w(void 0),c(void 0),d({isTransitioning:!1})}))})),void H((()=>w(t)))}p?(m&&m.resolve(),p.skipTransition(),g({state:e,currentLocation:a.currentLocation,nextLocation:a.nextLocation})):(c(e),d({isTransitioning:!0,flushSync:!1,currentLocation:a.currentLocation,nextLocation:a.nextLocation}))}else r?H((()=>u(e))):S((()=>u(e)))}),[n.window,p,m,y,S]);e.useLayoutEffect((()=>n.subscribe(R)),[n,R]),e.useEffect((()=>{f.isTransitioning&&!f.flushSync&&h(new z)}),[f]),e.useEffect((()=>{if(m&&l&&n.window){let e=l,t=m.promise,r=n.window.document.startViewTransition((async()=>{S((()=>u(e))),await t}));r.finished.finally((()=>{h(void 0),w(void 0),c(void 0),d({isTransitioning:!1})})),w(r)}}),[S,l,m,n.window]),e.useEffect((()=>{m&&l&&s.location.key===l.location.key&&m.resolve()}),[m,p,s.location,l]),e.useEffect((()=>{!f.isTransitioning&&v&&(c(v.state),d({isTransitioning:!0,flushSync:!1,currentLocation:v.currentLocation,nextLocation:v.nextLocation}),g(void 0))}),[f.isTransitioning,v]),e.useEffect((()=>{}),[]);let E=e.useMemo((()=>({createHref:n.createHref,encodeLocation:n.encodeLocation,go:e=>n.navigate(e),push:(e,t,r)=>n.navigate(e,{state:t,preventScrollReset:r?.preventScrollReset}),replace:(e,t,r)=>n.navigate(e,{replace:!0,state:t,preventScrollReset:r?.preventScrollReset})})),[n]),T=n.basename||"/",L=e.useMemo((()=>({router:n,navigator:E,static:!1,basename:T})),[n,E,T]);return e.createElement(e.Fragment,null,e.createElement(r.Provider,{value:L},e.createElement(a.Provider,{value:s},e.createElement(j.Provider,{value:y.current},e.createElement(O.Provider,{value:f},e.createElement(o,{basename:T,location:s.location,navigationType:s.historyAction,navigator:E,future:{v7_relativeSplatPath:n.future.v7_relativeSplatPath}},s.initialized||n.future.v7_partialHydration?e.createElement($,{routes:n.routes,future:n.future,state:s}):t))))),null)}function $({routes:e,future:t,state:n}){return i(e,void 0,n,t)}function W({basename:t,children:n,future:r,window:a}){let i=e.useRef();null==i.current&&(i.current=b({window:a,v5Compat:!0}));let s=i.current,[u,l]=e.useState({action:s.action,location:s.location}),{v7_startTransition:c}=r||{},f=e.useCallback((e=>{c&&V?V((()=>l(e))):l(e)}),[l,c]);return e.useLayoutEffect((()=>s.listen(f)),[s,f]),e.createElement(o,{basename:t,children:n,location:u.location,navigationType:u.action,navigator:s,future:r})}function Y({basename:t,children:n,future:r,window:a}){let i=e.useRef();null==i.current&&(i.current=S({window:a,v5Compat:!0}));let s=i.current,[u,l]=e.useState({action:s.action,location:s.location}),{v7_startTransition:c}=r||{},f=e.useCallback((e=>{c&&V?V((()=>l(e))):l(e)}),[l,c]);return e.useLayoutEffect((()=>s.listen(f)),[s,f]),e.createElement(o,{basename:t,children:n,location:u.location,navigationType:u.action,navigator:s,future:r})}function J({basename:t,children:n,future:r,history:a}){let[i,s]=e.useState({action:a.action,location:a.location}),{v7_startTransition:u}=r||{},l=e.useCallback((e=>{u&&V?V((()=>s(e))):s(e)}),[s,u]);return e.useLayoutEffect((()=>a.listen(l)),[a,l]),e.createElement(o,{basename:t,children:n,location:i.location,navigationType:i.action,navigator:a,future:r})}const q="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement,G=/^(?:[a-z][a-z0-9+.-]*:|\/\/)/i,Q=e.forwardRef((function({onClick:t,relative:n,reloadDocument:r,replace:a,state:o,target:i,to:l,preventScrollReset:c,unstable_viewTransition:f,...d},m){let h,{basename:p}=e.useContext(s),w=!1;if("string"==typeof l&&G.test(l)&&(h=l,q))try{let e=new URL(window.location.href),t=l.startsWith("//")?new URL(e.protocol+l):new URL(l),n=g(t.pathname,p);t.origin===e.origin&&null!=n?l=n+t.search+t.hash:w=!0}catch(b){}let v=u(l,{relative:n}),y=oe(l,{replace:a,state:o,target:i,preventScrollReset:c,relative:n,unstable_viewTransition:f});return e.createElement("a",Object.assign({},d,{href:h||v,onClick:w||r?t:function(e){t&&t(e),e.defaultPrevented||y(e)},ref:m,target:i}))})),X=e.forwardRef((function({"aria-current":t="page",caseSensitive:n=!1,className:r="",end:o=!1,style:i,to:u,unstable_viewTransition:f,children:d,...m},h){let p=l(u,{relative:m.relative}),w=c(),v=e.useContext(a),{navigator:g}=e.useContext(s),y=null!=v&&ve(p)&&!0===f,b=g.encodeLocation?g.encodeLocation(p).pathname:p.pathname,S=w.pathname,R=v&&v.navigation&&v.navigation.location?v.navigation.location.pathname:null;n||(S=S.toLowerCase(),R=R?R.toLowerCase():null,b=b.toLowerCase());const E="/"!==b&&b.endsWith("/")?b.length-1:b.length;let T,L=S===b||!o&&S.startsWith(b)&&"/"===S.charAt(E),_=null!=R&&(R===b||!o&&R.startsWith(b)&&"/"===R.charAt(b.length)),C={isActive:L,isPending:_,isTransitioning:y},x=L?t:void 0;T="function"==typeof r?r(C):[r,L?"active":null,_?"pending":null,y?"transitioning":null].filter(Boolean).join(" ");let A="function"==typeof i?i(C):i;return e.createElement(Q,Object.assign({},m,{"aria-current":x,className:T,ref:h,style:A,to:u,unstable_viewTransition:f}),"function"==typeof d?d(C):d)})),Z=e.forwardRef((({fetcherKey:t,navigate:n,reloadDocument:r,replace:a,state:o,method:i="get",action:s,onSubmit:u,relative:l,preventScrollReset:c,unstable_viewTransition:f,...d},m)=>{let h=le(),p=ce(s,{relative:l}),w="get"===i.toLowerCase()?"get":"post";return e.createElement("form",Object.assign({ref:m,method:w,action:p,onSubmit:r?u:e=>{if(u&&u(e),e.defaultPrevented)return;e.preventDefault();let r=e.nativeEvent.submitter,s=r?.getAttribute("formmethod")||i;h(r||e.currentTarget,{fetcherKey:t,method:s,navigate:n,replace:a,state:o,relative:l,preventScrollReset:c,unstable_viewTransition:f})}},d))}));function ee({getKey:e,storageKey:t}){return he({getKey:e,storageKey:t}),null}var te=function(e){return e.UseScrollRestoration="useScrollRestoration",e.UseSubmit="useSubmit",e.UseSubmitFetcher="useSubmitFetcher",e.UseFetcher="useFetcher",e.useViewTransitionState="useViewTransitionState",e}(te||{}),ne=function(e){return e.UseFetcher="useFetcher",e.UseFetchers="useFetchers",e.UseScrollRestoration="useScrollRestoration",e}(ne||{});function re(t){let n=e.useContext(r);return n||E(!1),n}function ae(t){let n=e.useContext(a);return n||E(!1),n}function oe(t,{target:n,replace:r,state:a,preventScrollReset:o,relative:i,unstable_viewTransition:s}={}){let u=f(),m=c(),h=l(t,{relative:i});return e.useCallback((e=>{if(function(e,t){return!(0!==e.button||t&&"_self"!==t||function(e){return!!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)}(e))}(e,n)){e.preventDefault();let n=void 0!==r?r:d(m)===d(h);u(t,{replace:n,state:a,preventScrollReset:o,relative:i,unstable_viewTransition:s})}}),[m,u,h,r,a,n,t,o,i,s])}function ie(t){let n=e.useRef(A(t)),r=e.useRef(!1),a=c(),o=e.useMemo((()=>function(e,t){let n=A(e);return t&&t.forEach(((e,r)=>{n.has(r)||t.getAll(r).forEach((e=>{n.append(r,e)}))})),n}(a.search,r.current?null:n.current)),[a.search]),i=f(),s=e.useCallback(((e,t)=>{const n=A("function"==typeof e?e(o):e);r.current=!0,i("?"+n,t)}),[i,o]);return[o,s]}let se=0,ue=()=>`__${String(++se)}__`;function le(){let{router:t}=re(te.UseSubmit),{basename:n}=e.useContext(s),r=m();return e.useCallback(((e,a={})=>{!function(){if("undefined"==typeof document)throw new Error("You are calling submit during the server render. Try calling submit within a `useEffect` or callback instead.")}();let{action:o,method:i,encType:s,formData:u,body:l}=P(e,n);if(!1===a.navigate){let e=a.fetcherKey||ue();t.fetch(e,r,a.action||o,{preventScrollReset:a.preventScrollReset,formData:u,body:l,formMethod:a.method||i,formEncType:a.encType||s,unstable_flushSync:a.unstable_flushSync})}else t.navigate(a.action||o,{preventScrollReset:a.preventScrollReset,formData:u,body:l,formMethod:a.method||i,formEncType:a.encType||s,replace:a.replace,state:a.state,fromRouteId:r,unstable_flushSync:a.unstable_flushSync,unstable_viewTransition:a.unstable_viewTransition})}),[t,n,r])}function ce(t,{relative:n}={}){let{basename:r}=e.useContext(s),a=e.useContext(h);a||E(!1);let[o]=a.matches.slice(-1),i={...l(t||".",{relative:n})},u=c();if(null==t){i.search=u.search;let e=new URLSearchParams(i.search);e.has("index")&&""===e.get("index")&&(e.delete("index"),i.search=e.toString()?`?${e.toString()}`:"")}return t&&"."!==t||!o.route.index||(i.search=i.search?i.search.replace(/^\?/,"?index&"):"?index"),"/"!==r&&(i.pathname="/"===i.pathname?r:T([r,i.pathname])),d(i)}function fe({key:t}={}){let{router:n}=re(te.UseFetcher),r=ae(ne.UseFetcher),a=e.useContext(j),o=e.useContext(h),i=o.matches[o.matches.length-1]?.route.id;a||E(!1),o||E(!1),null==i&&E(!1);let[s,u]=e.useState(t||"");t&&t!==s?u(t):s||u(ue()),e.useEffect((()=>(n.getFetcher(s),()=>{n.deleteFetcher(s)})),[n,s]);let l=e.useCallback(((e,t)=>{i||E(!1),n.fetch(s,i,e,t)}),[s,i,n]),c=le(),f=e.useCallback(((e,t)=>{c(e,{...t,navigate:!1,fetcherKey:s})}),[s,c]),d=e.useMemo((()=>e.forwardRef(((t,n)=>e.createElement(Z,Object.assign({},t,{navigate:!1,fetcherKey:s,ref:n}))))),[s]),m=r.fetchers.get(s)||L,p=a.get(s);return e.useMemo((()=>({Form:d,submit:f,load:l,...m,data:p})),[d,f,l,m,p])}function de(){let e=ae(ne.UseFetchers);return Array.from(e.fetchers.entries()).map((([e,t])=>({...t,key:e})))}let me={};function he({getKey:t,storageKey:n}={}){let{router:r}=re(te.UseScrollRestoration),{restoreScrollPosition:a,preventScrollReset:o}=ae(ne.UseScrollRestoration),{basename:i}=e.useContext(s),u=c(),l=p(),f=w();e.useEffect((()=>(window.history.scrollRestoration="manual",()=>{window.history.scrollRestoration="auto"})),[]),function(t,n){let{capture:r}=n||{};e.useEffect((()=>{let e=null!=r?{capture:r}:void 0;return window.addEventListener("pagehide",t,e),()=>{window.removeEventListener("pagehide",t,e)}}),[t,r])}(e.useCallback((()=>{if("idle"===f.state){let e=(t?t(u,l):null)||u.key;me[e]=window.scrollY}try{sessionStorage.setItem(n||"react-router-scroll-positions",JSON.stringify(me))}catch(e){}window.history.scrollRestoration="auto"}),[n,t,f.state,u,l])),"undefined"!=typeof document&&(e.useLayoutEffect((()=>{try{let e=sessionStorage.getItem(n||"react-router-scroll-positions");e&&(me=JSON.parse(e))}catch(e){}}),[n]),e.useLayoutEffect((()=>{let e=t&&"/"!==i?(e,n)=>t({...e,pathname:g(e.pathname,i)||e.pathname},n):t,n=r?.enableScrollRestoration(me,(()=>window.scrollY),e);return()=>n&&n()}),[r,i,t]),e.useLayoutEffect((()=>{if(!1!==a)if("number"!=typeof a){if(u.hash){let e=document.getElementById(decodeURIComponent(u.hash.slice(1)));if(e)return void e.scrollIntoView()}!0!==o&&window.scrollTo(0,0)}else window.scrollTo(0,a)}),[u,a,o]))}function pe(t,n){let{capture:r}=n||{};e.useEffect((()=>{let e=null!=r?{capture:r}:void 0;return window.addEventListener("beforeunload",t,e),()=>{window.removeEventListener("beforeunload",t,e)}}),[t,r])}function we({when:t,message:n}){let r=v(t);e.useEffect((()=>{if("blocked"===r.state){window.confirm(n)?setTimeout(r.proceed,0):r.reset()}}),[r,n]),e.useEffect((()=>{"blocked"!==r.state||t||r.reset()}),[r,t])}function ve(t,n={}){let r=e.useContext(O);null==r&&E(!1);let{basename:a}=re(te.useViewTransitionState),o=l(t,{relative:n.relative});if(!r.isTransitioning)return!1;let i=g(r.currentLocation.pathname,a)||r.currentLocation.pathname,s=g(r.nextLocation.pathname,a)||r.nextLocation.pathname;return null!=_(o.pathname,s)||null!=_(o.pathname,i)}export{W as BrowserRouter,Z as Form,Y as HashRouter,Q as Link,X as NavLink,B as RouterProvider,ee as ScrollRestoration,j as UNSAFE_FetchersContext,O as UNSAFE_ViewTransitionContext,he as UNSAFE_useScrollRestoration,D as createBrowserRouter,N as createHashRouter,A as createSearchParams,J as unstable_HistoryRouter,we as unstable_usePrompt,ve as unstable_useViewTransitionState,pe as useBeforeUnload,fe as useFetcher,de as useFetchers,ce as useFormAction,oe as useLinkClickHandler,ie as useSearchParams,le as useSubmit}; | ||
//# sourceMappingURL=react-router-dom.production.min.js.map |
import * as React from "react"; | ||
import type { Router as RemixRouter, StaticHandlerContext, CreateStaticHandlerOptions as RouterCreateStaticHandlerOptions } from "@remix-run/router"; | ||
import type { Location, RouteObject } from "react-router-dom"; | ||
import type { Router as RemixRouter, StaticHandlerContext, CreateStaticHandlerOptions as RouterCreateStaticHandlerOptions, FutureConfig as RouterFutureConfig } from "@remix-run/router"; | ||
import type { FutureConfig, Location, RouteObject } from "react-router-dom"; | ||
export interface StaticRouterProps { | ||
@@ -8,2 +8,3 @@ basename?: string; | ||
location: Partial<Location> | string; | ||
future?: Partial<FutureConfig>; | ||
} | ||
@@ -14,3 +15,3 @@ /** | ||
*/ | ||
export declare function StaticRouter({ basename, children, location: locationProp, }: StaticRouterProps): React.JSX.Element; | ||
export declare function StaticRouter({ basename, children, location: locationProp, future, }: StaticRouterProps): React.JSX.Element; | ||
export { StaticHandlerContext }; | ||
@@ -30,2 +31,4 @@ export interface StaticRouterProviderProps { | ||
export declare function createStaticHandler(routes: RouteObject[], opts?: CreateStaticHandlerOptions): import("@remix-run/router").StaticHandler; | ||
export declare function createStaticRouter(routes: RouteObject[], context: StaticHandlerContext): RemixRouter; | ||
export declare function createStaticRouter(routes: RouteObject[], context: StaticHandlerContext, opts?: { | ||
future?: Partial<Pick<RouterFutureConfig, "v7_partialHydration" | "v7_relativeSplatPath">>; | ||
}): RemixRouter; |
@@ -37,3 +37,4 @@ 'use strict'; | ||
children, | ||
location: locationProp = "/" | ||
location: locationProp = "/", | ||
future | ||
}) { | ||
@@ -58,2 +59,3 @@ if (typeof locationProp === "string") { | ||
navigator: staticNavigator, | ||
future: future, | ||
static: true | ||
@@ -80,2 +82,3 @@ }); | ||
}; | ||
let fetchersContext = new Map(); | ||
let hydrateScript = ""; | ||
@@ -102,2 +105,4 @@ if (hydrate !== false) { | ||
value: state | ||
}, /*#__PURE__*/React__namespace.createElement(reactRouterDom.UNSAFE_FetchersContext.Provider, { | ||
value: fetchersContext | ||
}, /*#__PURE__*/React__namespace.createElement(reactRouterDom.UNSAFE_ViewTransitionContext.Provider, { | ||
@@ -112,7 +117,11 @@ value: { | ||
navigator: dataRouterContext.navigator, | ||
static: dataRouterContext.static | ||
static: dataRouterContext.static, | ||
future: { | ||
v7_relativeSplatPath: router$1.future.v7_relativeSplatPath | ||
} | ||
}, /*#__PURE__*/React__namespace.createElement(DataRoutes, { | ||
routes: router$1.routes, | ||
future: router$1.future, | ||
state: state | ||
}))))), hydrateScript ? /*#__PURE__*/React__namespace.createElement("script", { | ||
})))))), hydrateScript ? /*#__PURE__*/React__namespace.createElement("script", { | ||
suppressHydrationWarning: true, | ||
@@ -127,5 +136,6 @@ nonce: nonce, | ||
routes, | ||
future, | ||
state | ||
}) { | ||
return reactRouter.UNSAFE_useRoutesImpl(routes, undefined, state); | ||
return reactRouter.UNSAFE_useRoutesImpl(routes, undefined, state, future); | ||
} | ||
@@ -188,3 +198,3 @@ function serializeErrors(errors) { | ||
} | ||
function createStaticRouter(routes, context) { | ||
function createStaticRouter(routes, context, opts = {}) { | ||
let manifest = {}; | ||
@@ -207,2 +217,11 @@ let dataRoutes = router.UNSAFE_convertRoutesToDataRoutes(routes, reactRouter.UNSAFE_mapRouteProperties, undefined, manifest); | ||
}, | ||
get future() { | ||
return { | ||
v7_fetcherPersist: false, | ||
v7_normalizeFormMethod: false, | ||
v7_partialHydration: opts.future?.v7_partialHydration === true, | ||
v7_prependBasename: false, | ||
v7_relativeSplatPath: opts.future?.v7_relativeSplatPath === true | ||
}; | ||
}, | ||
get state() { | ||
@@ -209,0 +228,0 @@ return { |
/** | ||
* React Router DOM v6.17.0 | ||
* React Router DOM v6.21.1 | ||
* | ||
@@ -11,3 +11,3 @@ * Copyright (c) Remix Software Inc. | ||
*/ | ||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react-router"),require("@remix-run/router")):"function"==typeof define&&define.amd?define(["exports","react","react-router","@remix-run/router"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactRouterDOM={},e.React,e.ReactRouter,e.RemixRouter)}(this,(function(e,t,n,r){"use strict";function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var a=o(t);function i(){return i=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},i.apply(this,arguments)}function u(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}const s="get",c="application/x-www-form-urlencoded";function l(e){return null!=e&&"string"==typeof e.tagName}function f(e){return void 0===e&&(e=""),new URLSearchParams("string"==typeof e||Array.isArray(e)||e instanceof URLSearchParams?e:Object.keys(e).reduce(((t,n)=>{let r=e[n];return t.concat(Array.isArray(r)?r.map((e=>[n,e])):[[n,r]])}),[]))}let d=null;const m=new Set(["application/x-www-form-urlencoded","multipart/form-data","text/plain"]);function p(e){return null==e||m.has(e)?e:null}function b(e,t){let n,o,a,i,u;if(l(f=e)&&"form"===f.tagName.toLowerCase()){let u=e.getAttribute("action");o=u?r.stripBasename(u,t):null,n=e.getAttribute("method")||s,a=p(e.getAttribute("enctype"))||c,i=new FormData(e)}else if(function(e){return l(e)&&"button"===e.tagName.toLowerCase()}(e)||function(e){return l(e)&&"input"===e.tagName.toLowerCase()}(e)&&("submit"===e.type||"image"===e.type)){let u=e.form;if(null==u)throw new Error('Cannot submit a <button> or <input type="submit"> without a <form>');let l=e.getAttribute("formaction")||u.getAttribute("action");if(o=l?r.stripBasename(l,t):null,n=e.getAttribute("formmethod")||u.getAttribute("method")||s,a=p(e.getAttribute("formenctype"))||p(u.getAttribute("enctype"))||c,i=new FormData(u,e),!function(){if(null===d)try{new FormData(document.createElement("form"),0),d=!1}catch(e){d=!0}return d}()){let{name:t,type:n,value:r}=e;if("image"===n){let e=t?t+".":"";i.append(e+"x","0"),i.append(e+"y","0")}else t&&i.append(t,r)}}else{if(l(e))throw new Error('Cannot submit element that is not <form>, <button>, or <input type="submit|image">');n=s,o=null,a=c,u=e}var f;return i&&"text/plain"===a&&(u=i,i=void 0),{action:o,method:n.toLowerCase(),encType:a,formData:i,body:u}}const v=["onClick","relative","reloadDocument","replace","state","target","to","preventScrollReset","unstable_viewTransition"],h=["aria-current","caseSensitive","className","end","style","to","unstable_viewTransition","children"],g=["reloadDocument","replace","state","method","action","onSubmit","submit","relative","preventScrollReset","unstable_viewTransition"];function y(){var e;let t=null==(e=window)?void 0:e.__staticRouterHydrationData;return t&&t.errors&&(t=i({},t,{errors:w(t.errors)})),t}function w(e){if(!e)return null;let t=Object.entries(e),n={};for(let[e,o]of t)if(o&&"RouteErrorResponse"===o.__type)n[e]=new r.UNSAFE_ErrorResponseImpl(o.status,o.statusText,o.data,!0===o.internal);else if(o&&"Error"===o.__type){if(o.__subType){let t=window[o.__subType];if("function"==typeof t)try{let r=new t(o.message);r.stack="",n[e]=r}catch(e){}}if(null==n[e]){let t=new Error(o.message);t.stack="",n[e]=t}}else n[e]=o;return n}const R=a.createContext({isTransitioning:!1}),S=a.startTransition;class E{constructor(){this.status="pending",this.promise=new Promise(((e,t)=>{this.resolve=t=>{"pending"===this.status&&(this.status="resolved",e(t))},this.reject=e=>{"pending"===this.status&&(this.status="rejected",t(e))}}))}}function P(e){let{routes:t,state:r}=e;return n.UNSAFE_useRoutesImpl(t,void 0,r)}const _="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement,O=/^(?:[a-z][a-z0-9+.-]*:|\/\/)/i,N=a.forwardRef((function(e,t){let o,{onClick:s,relative:c,reloadDocument:l,replace:f,state:d,target:m,to:p,preventScrollReset:b,unstable_viewTransition:h}=e,g=u(e,v),{basename:y}=a.useContext(n.UNSAFE_NavigationContext),w=!1;if("string"==typeof p&&O.test(p)&&(o=p,_))try{let e=new URL(window.location.href),t=p.startsWith("//")?new URL(e.protocol+p):new URL(p),n=r.stripBasename(t.pathname,y);t.origin===e.origin&&null!=n?p=n+t.search+t.hash:w=!0}catch(e){}let R=n.useHref(p,{relative:c}),S=L(p,{replace:f,state:d,target:m,preventScrollReset:b,relative:c,unstable_viewTransition:h});return a.createElement("a",i({},g,{href:o||R,onClick:w||l?s:function(e){s&&s(e),e.defaultPrevented||S(e)},ref:t,target:m}))})),A=a.forwardRef((function(e,t){let{"aria-current":r="page",caseSensitive:o=!1,className:s="",end:c=!1,style:l,to:f,unstable_viewTransition:d,children:m}=e,p=u(e,h),b=n.useResolvedPath(f,{relative:p.relative}),v=n.useLocation(),g=a.useContext(n.UNSAFE_DataRouterStateContext),{navigator:y}=a.useContext(n.UNSAFE_NavigationContext),w=null!=g&&z(b)&&!0===d,R=y.encodeLocation?y.encodeLocation(b).pathname:b.pathname,S=v.pathname,E=g&&g.navigation&&g.navigation.location?g.navigation.location.pathname:null;o||(S=S.toLowerCase(),E=E?E.toLowerCase():null,R=R.toLowerCase());let P,_=S===R||!c&&S.startsWith(R)&&"/"===S.charAt(R.length),O=null!=E&&(E===R||!c&&E.startsWith(R)&&"/"===E.charAt(R.length)),A={isActive:_,isPending:O,isTransitioning:w},j=_?r:void 0;P="function"==typeof s?s(A):[s,_?"active":null,O?"pending":null,w?"transitioning":null].filter(Boolean).join(" ");let C="function"==typeof l?l(A):l;return a.createElement(N,i({},p,{"aria-current":j,className:P,ref:t,style:C,to:f,unstable_viewTransition:d}),"function"==typeof m?m(A):m)})),j=a.forwardRef(((e,t)=>{let n=k();return a.createElement(C,i({},e,{submit:n,ref:t}))})),C=a.forwardRef(((e,t)=>{let{reloadDocument:n,replace:r,state:o,method:c=s,action:l,onSubmit:f,submit:d,relative:m,preventScrollReset:p,unstable_viewTransition:b}=e,v=u(e,g),h="get"===c.toLowerCase()?"get":"post",y=B(l,{relative:m});return a.createElement("form",i({ref:t,method:h,action:y,onSubmit:n?f:e=>{if(f&&f(e),e.defaultPrevented)return;e.preventDefault();let t=e.nativeEvent.submitter,n=(null==t?void 0:t.getAttribute("formmethod"))||c;d(t||e.currentTarget,{method:n,replace:r,state:o,relative:m,preventScrollReset:p,unstable_viewTransition:b})}},v))}));var x=function(e){return e.UseScrollRestoration="useScrollRestoration",e.UseSubmit="useSubmit",e.UseSubmitFetcher="useSubmitFetcher",e.UseFetcher="useFetcher",e.useViewTransitionState="useViewTransitionState",e}(x||{}),F=function(e){return e.UseFetchers="useFetchers",e.UseScrollRestoration="useScrollRestoration",e}(F||{});function T(e){let t=a.useContext(n.UNSAFE_DataRouterContext);return t||r.UNSAFE_invariant(!1),t}function U(e){let t=a.useContext(n.UNSAFE_DataRouterStateContext);return t||r.UNSAFE_invariant(!1),t}function L(e,t){let{target:r,replace:o,state:i,preventScrollReset:u,relative:s,unstable_viewTransition:c}=void 0===t?{}:t,l=n.useNavigate(),f=n.useLocation(),d=n.useResolvedPath(e,{relative:s});return a.useCallback((t=>{if(function(e,t){return!(0!==e.button||t&&"_self"!==t||function(e){return!!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)}(e))}(t,r)){t.preventDefault();let r=void 0!==o?o:n.createPath(f)===n.createPath(d);l(e,{replace:r,state:i,preventScrollReset:u,relative:s,unstable_viewTransition:c})}}),[f,l,d,o,i,r,e,u,s,c])}function D(){if("undefined"==typeof document)throw new Error("You are calling submit during the server render. Try calling submit within a `useEffect` or callback instead.")}function k(){let{router:e}=T(x.UseSubmit),{basename:t}=a.useContext(n.UNSAFE_NavigationContext),r=n.UNSAFE_useRouteId();return a.useCallback((function(n,o){void 0===o&&(o={}),D();let{action:a,method:i,encType:u,formData:s,body:c}=b(n,t);e.navigate(o.action||a,{preventScrollReset:o.preventScrollReset,formData:s,body:c,formMethod:o.method||i,formEncType:o.encType||u,replace:o.replace,state:o.state,fromRouteId:r,unstable_viewTransition:o.unstable_viewTransition})}),[e,t,r])}function M(e,t){let{router:o}=T(x.UseSubmitFetcher),{basename:i}=a.useContext(n.UNSAFE_NavigationContext);return a.useCallback((function(n,a){void 0===a&&(a={}),D();let{action:u,method:s,encType:c,formData:l,body:f}=b(n,i);null==t&&r.UNSAFE_invariant(!1),o.fetch(e,t,a.action||u,{preventScrollReset:a.preventScrollReset,formData:l,body:f,formMethod:a.method||s,formEncType:a.encType||c})}),[o,i,e,t])}function B(e,t){let{relative:o}=void 0===t?{}:t,{basename:u}=a.useContext(n.UNSAFE_NavigationContext),s=a.useContext(n.UNSAFE_RouteContext);s||r.UNSAFE_invariant(!1);let[c]=s.matches.slice(-1),l=i({},n.useResolvedPath(e||".",{relative:o})),f=n.useLocation();if(null==e&&(l.search=f.search,c.route.index)){let e=new URLSearchParams(l.search);e.delete("index"),l.search=e.toString()?"?"+e.toString():""}return e&&"."!==e||!c.route.index||(l.search=l.search?l.search.replace(/^\?/,"?index&"):"?index"),"/"!==u&&(l.pathname="/"===l.pathname?u:r.joinPaths([u,l.pathname])),n.createPath(l)}let H=0;const I="react-router-scroll-positions";let K={};function V(e){let{getKey:t,storageKey:o}=void 0===e?{}:e,{router:u}=T(x.UseScrollRestoration),{restoreScrollPosition:s,preventScrollReset:c}=U(F.UseScrollRestoration),{basename:l}=a.useContext(n.UNSAFE_NavigationContext),f=n.useLocation(),d=n.useMatches(),m=n.useNavigation();a.useEffect((()=>(window.history.scrollRestoration="manual",()=>{window.history.scrollRestoration="auto"})),[]),function(e,t){let{capture:n}=t||{};a.useEffect((()=>{let t=null!=n?{capture:n}:void 0;return window.addEventListener("pagehide",e,t),()=>{window.removeEventListener("pagehide",e,t)}}),[e,n])}(a.useCallback((()=>{if("idle"===m.state){let e=(t?t(f,d):null)||f.key;K[e]=window.scrollY}try{sessionStorage.setItem(o||I,JSON.stringify(K))}catch(e){}window.history.scrollRestoration="auto"}),[o,t,m.state,f,d])),"undefined"!=typeof document&&(a.useLayoutEffect((()=>{try{let e=sessionStorage.getItem(o||I);e&&(K=JSON.parse(e))}catch(e){}}),[o]),a.useLayoutEffect((()=>{let e=t&&"/"!==l?(e,n)=>t(i({},e,{pathname:r.stripBasename(e.pathname,l)||e.pathname}),n):t,n=null==u?void 0:u.enableScrollRestoration(K,(()=>window.scrollY),e);return()=>n&&n()}),[u,l,t]),a.useLayoutEffect((()=>{if(!1!==s)if("number"!=typeof s){if(f.hash){let e=document.getElementById(decodeURIComponent(f.hash.slice(1)));if(e)return void e.scrollIntoView()}!0!==c&&window.scrollTo(0,0)}else window.scrollTo(0,s)}),[f,s,c]))}function z(e,t){void 0===t&&(t={});let o=a.useContext(R);null==o&&r.UNSAFE_invariant(!1);let{basename:i}=T(x.useViewTransitionState),u=n.useResolvedPath(e,{relative:t.relative});if(!o.isTransitioning)return!1;let s=r.stripBasename(o.currentLocation.pathname,i)||o.currentLocation.pathname,c=r.stripBasename(o.nextLocation.pathname,i)||o.nextLocation.pathname;return null!=r.matchPath(u.pathname,c)||null!=r.matchPath(u.pathname,s)}Object.defineProperty(e,"AbortedDeferredError",{enumerable:!0,get:function(){return n.AbortedDeferredError}}),Object.defineProperty(e,"Await",{enumerable:!0,get:function(){return n.Await}}),Object.defineProperty(e,"MemoryRouter",{enumerable:!0,get:function(){return n.MemoryRouter}}),Object.defineProperty(e,"Navigate",{enumerable:!0,get:function(){return n.Navigate}}),Object.defineProperty(e,"NavigationType",{enumerable:!0,get:function(){return n.NavigationType}}),Object.defineProperty(e,"Outlet",{enumerable:!0,get:function(){return n.Outlet}}),Object.defineProperty(e,"Route",{enumerable:!0,get:function(){return n.Route}}),Object.defineProperty(e,"Router",{enumerable:!0,get:function(){return n.Router}}),Object.defineProperty(e,"Routes",{enumerable:!0,get:function(){return n.Routes}}),Object.defineProperty(e,"UNSAFE_DataRouterContext",{enumerable:!0,get:function(){return n.UNSAFE_DataRouterContext}}),Object.defineProperty(e,"UNSAFE_DataRouterStateContext",{enumerable:!0,get:function(){return n.UNSAFE_DataRouterStateContext}}),Object.defineProperty(e,"UNSAFE_LocationContext",{enumerable:!0,get:function(){return n.UNSAFE_LocationContext}}),Object.defineProperty(e,"UNSAFE_NavigationContext",{enumerable:!0,get:function(){return n.UNSAFE_NavigationContext}}),Object.defineProperty(e,"UNSAFE_RouteContext",{enumerable:!0,get:function(){return n.UNSAFE_RouteContext}}),Object.defineProperty(e,"UNSAFE_useRouteId",{enumerable:!0,get:function(){return n.UNSAFE_useRouteId}}),Object.defineProperty(e,"createMemoryRouter",{enumerable:!0,get:function(){return n.createMemoryRouter}}),Object.defineProperty(e,"createPath",{enumerable:!0,get:function(){return n.createPath}}),Object.defineProperty(e,"createRoutesFromChildren",{enumerable:!0,get:function(){return n.createRoutesFromChildren}}),Object.defineProperty(e,"createRoutesFromElements",{enumerable:!0,get:function(){return n.createRoutesFromElements}}),Object.defineProperty(e,"defer",{enumerable:!0,get:function(){return n.defer}}),Object.defineProperty(e,"generatePath",{enumerable:!0,get:function(){return n.generatePath}}),Object.defineProperty(e,"isRouteErrorResponse",{enumerable:!0,get:function(){return n.isRouteErrorResponse}}),Object.defineProperty(e,"json",{enumerable:!0,get:function(){return n.json}}),Object.defineProperty(e,"matchPath",{enumerable:!0,get:function(){return n.matchPath}}),Object.defineProperty(e,"matchRoutes",{enumerable:!0,get:function(){return n.matchRoutes}}),Object.defineProperty(e,"parsePath",{enumerable:!0,get:function(){return n.parsePath}}),Object.defineProperty(e,"redirect",{enumerable:!0,get:function(){return n.redirect}}),Object.defineProperty(e,"redirectDocument",{enumerable:!0,get:function(){return n.redirectDocument}}),Object.defineProperty(e,"renderMatches",{enumerable:!0,get:function(){return n.renderMatches}}),Object.defineProperty(e,"resolvePath",{enumerable:!0,get:function(){return n.resolvePath}}),Object.defineProperty(e,"unstable_useBlocker",{enumerable:!0,get:function(){return n.unstable_useBlocker}}),Object.defineProperty(e,"useActionData",{enumerable:!0,get:function(){return n.useActionData}}),Object.defineProperty(e,"useAsyncError",{enumerable:!0,get:function(){return n.useAsyncError}}),Object.defineProperty(e,"useAsyncValue",{enumerable:!0,get:function(){return n.useAsyncValue}}),Object.defineProperty(e,"useHref",{enumerable:!0,get:function(){return n.useHref}}),Object.defineProperty(e,"useInRouterContext",{enumerable:!0,get:function(){return n.useInRouterContext}}),Object.defineProperty(e,"useLoaderData",{enumerable:!0,get:function(){return n.useLoaderData}}),Object.defineProperty(e,"useLocation",{enumerable:!0,get:function(){return n.useLocation}}),Object.defineProperty(e,"useMatch",{enumerable:!0,get:function(){return n.useMatch}}),Object.defineProperty(e,"useMatches",{enumerable:!0,get:function(){return n.useMatches}}),Object.defineProperty(e,"useNavigate",{enumerable:!0,get:function(){return n.useNavigate}}),Object.defineProperty(e,"useNavigation",{enumerable:!0,get:function(){return n.useNavigation}}),Object.defineProperty(e,"useNavigationType",{enumerable:!0,get:function(){return n.useNavigationType}}),Object.defineProperty(e,"useOutlet",{enumerable:!0,get:function(){return n.useOutlet}}),Object.defineProperty(e,"useOutletContext",{enumerable:!0,get:function(){return n.useOutletContext}}),Object.defineProperty(e,"useParams",{enumerable:!0,get:function(){return n.useParams}}),Object.defineProperty(e,"useResolvedPath",{enumerable:!0,get:function(){return n.useResolvedPath}}),Object.defineProperty(e,"useRevalidator",{enumerable:!0,get:function(){return n.useRevalidator}}),Object.defineProperty(e,"useRouteError",{enumerable:!0,get:function(){return n.useRouteError}}),Object.defineProperty(e,"useRouteLoaderData",{enumerable:!0,get:function(){return n.useRouteLoaderData}}),Object.defineProperty(e,"useRoutes",{enumerable:!0,get:function(){return n.useRoutes}}),e.BrowserRouter=function(e){let{basename:t,children:o,future:i,window:u}=e,s=a.useRef();null==s.current&&(s.current=r.createBrowserHistory({window:u,v5Compat:!0}));let c=s.current,[l,f]=a.useState({action:c.action,location:c.location}),{v7_startTransition:d}=i||{},m=a.useCallback((e=>{d&&S?S((()=>f(e))):f(e)}),[f,d]);return a.useLayoutEffect((()=>c.listen(m)),[c,m]),a.createElement(n.Router,{basename:t,children:o,location:l.location,navigationType:l.action,navigator:c})},e.Form=j,e.HashRouter=function(e){let{basename:t,children:o,future:i,window:u}=e,s=a.useRef();null==s.current&&(s.current=r.createHashHistory({window:u,v5Compat:!0}));let c=s.current,[l,f]=a.useState({action:c.action,location:c.location}),{v7_startTransition:d}=i||{},m=a.useCallback((e=>{d&&S?S((()=>f(e))):f(e)}),[f,d]);return a.useLayoutEffect((()=>c.listen(m)),[c,m]),a.createElement(n.Router,{basename:t,children:o,location:l.location,navigationType:l.action,navigator:c})},e.Link=N,e.NavLink=A,e.RouterProvider=function(e){let{fallbackElement:t,router:r,future:o}=e,[i,u]=a.useState(r.state),[s,c]=a.useState(),[l,f]=a.useState({isTransitioning:!1}),[d,m]=a.useState(),[p,b]=a.useState(),[v,h]=a.useState(),{v7_startTransition:g}=o||{},y=a.useCallback((e=>{g?function(e){S?S(e):e()}(e):e()}),[g]),w=a.useCallback(((e,t)=>{let{unstable_viewTransitionOpts:n}=t;n&&null!=r.window&&"function"==typeof r.window.document.startViewTransition?p&&d?(d.resolve(),p.skipTransition(),h({state:e,currentLocation:n.currentLocation,nextLocation:n.nextLocation})):(c(e),f({isTransitioning:!0,currentLocation:n.currentLocation,nextLocation:n.nextLocation})):y((()=>u(e)))}),[y,p,d,r.window]);a.useLayoutEffect((()=>r.subscribe(w)),[r,w]),a.useEffect((()=>{l.isTransitioning&&m(new E)}),[l.isTransitioning]),a.useEffect((()=>{if(d&&s&&r.window){let e=s,t=d.promise,n=r.window.document.startViewTransition((async()=>{y((()=>u(e))),await t}));n.finished.finally((()=>{m(void 0),b(void 0),c(void 0),f({isTransitioning:!1})})),b(n)}}),[y,s,d,r.window]),a.useEffect((()=>{d&&s&&i.location.key===s.location.key&&d.resolve()}),[d,p,i.location,s]),a.useEffect((()=>{!l.isTransitioning&&v&&(c(v.state),f({isTransitioning:!0,currentLocation:v.currentLocation,nextLocation:v.nextLocation}),h(void 0))}),[l.isTransitioning,v]);let _=a.useMemo((()=>({createHref:r.createHref,encodeLocation:r.encodeLocation,go:e=>r.navigate(e),push:(e,t,n)=>r.navigate(e,{state:t,preventScrollReset:null==n?void 0:n.preventScrollReset}),replace:(e,t,n)=>r.navigate(e,{replace:!0,state:t,preventScrollReset:null==n?void 0:n.preventScrollReset})})),[r]),O=r.basename||"/",N=a.useMemo((()=>({router:r,navigator:_,static:!1,basename:O})),[r,_,O]);return a.createElement(a.Fragment,null,a.createElement(n.UNSAFE_DataRouterContext.Provider,{value:N},a.createElement(n.UNSAFE_DataRouterStateContext.Provider,{value:i},a.createElement(R.Provider,{value:l},a.createElement(n.Router,{basename:O,location:i.location,navigationType:i.historyAction,navigator:_},i.initialized?a.createElement(P,{routes:r.routes,state:i}):t)))),null)},e.ScrollRestoration=function(e){let{getKey:t,storageKey:n}=e;return V({getKey:t,storageKey:n}),null},e.UNSAFE_ViewTransitionContext=R,e.UNSAFE_useScrollRestoration=V,e.createBrowserRouter=function(e,t){return r.createRouter({basename:null==t?void 0:t.basename,future:i({},null==t?void 0:t.future,{v7_prependBasename:!0}),history:r.createBrowserHistory({window:null==t?void 0:t.window}),hydrationData:(null==t?void 0:t.hydrationData)||y(),routes:e,mapRouteProperties:n.UNSAFE_mapRouteProperties,window:null==t?void 0:t.window}).initialize()},e.createHashRouter=function(e,t){return r.createRouter({basename:null==t?void 0:t.basename,future:i({},null==t?void 0:t.future,{v7_prependBasename:!0}),history:r.createHashHistory({window:null==t?void 0:t.window}),hydrationData:(null==t?void 0:t.hydrationData)||y(),routes:e,mapRouteProperties:n.UNSAFE_mapRouteProperties,window:null==t?void 0:t.window}).initialize()},e.createSearchParams=f,e.unstable_HistoryRouter=function(e){let{basename:t,children:r,future:o,history:i}=e,[u,s]=a.useState({action:i.action,location:i.location}),{v7_startTransition:c}=o||{},l=a.useCallback((e=>{c&&S?S((()=>s(e))):s(e)}),[s,c]);return a.useLayoutEffect((()=>i.listen(l)),[i,l]),a.createElement(n.Router,{basename:t,children:r,location:u.location,navigationType:u.action,navigator:i})},e.unstable_usePrompt=function(e){let{when:t,message:r}=e,o=n.unstable_useBlocker(t);a.useEffect((()=>{if("blocked"===o.state){window.confirm(r)?setTimeout(o.proceed,0):o.reset()}}),[o,r]),a.useEffect((()=>{"blocked"!==o.state||t||o.reset()}),[o,t])},e.unstable_useViewTransitionState=z,e.useBeforeUnload=function(e,t){let{capture:n}=t||{};a.useEffect((()=>{let t=null!=n?{capture:n}:void 0;return window.addEventListener("beforeunload",e,t),()=>{window.removeEventListener("beforeunload",e,t)}}),[e,n])},e.useFetcher=function(){var e;let{router:t}=T(x.UseFetcher),o=a.useContext(n.UNSAFE_RouteContext);o||r.UNSAFE_invariant(!1);let u=null==(e=o.matches[o.matches.length-1])?void 0:e.route.id;null==u&&r.UNSAFE_invariant(!1);let[s]=a.useState((()=>String(++H))),[c]=a.useState((()=>(u||r.UNSAFE_invariant(!1),function(e,t){return a.forwardRef(((n,r)=>{let o=M(e,t);return a.createElement(C,i({},n,{ref:r,submit:o}))}))}(s,u)))),[l]=a.useState((()=>e=>{t||r.UNSAFE_invariant(!1),u||r.UNSAFE_invariant(!1),t.fetch(s,u,e)})),f=M(s,u),d=t.getFetcher(s),m=a.useMemo((()=>i({Form:c,submit:f,load:l},d)),[d,c,f,l]);return a.useEffect((()=>()=>{t?t.deleteFetcher(s):console.warn("No router available to clean up from useFetcher()")}),[t,s]),m},e.useFetchers=function(){return[...U(F.UseFetchers).fetchers.values()]},e.useFormAction=B,e.useLinkClickHandler=L,e.useSearchParams=function(e){let t=a.useRef(f(e)),r=a.useRef(!1),o=n.useLocation(),i=a.useMemo((()=>function(e,t){let n=f(e);return t&&t.forEach(((e,r)=>{n.has(r)||t.getAll(r).forEach((e=>{n.append(r,e)}))})),n}(o.search,r.current?null:t.current)),[o.search]),u=n.useNavigate(),s=a.useCallback(((e,t)=>{const n=f("function"==typeof e?e(i):e);r.current=!0,u("?"+n,t)}),[u,i]);return[i,s]},e.useSubmit=k,Object.defineProperty(e,"__esModule",{value:!0})})); | ||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react-dom"),require("react-router"),require("@remix-run/router")):"function"==typeof define&&define.amd?define(["exports","react","react-dom","react-router","@remix-run/router"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactRouterDOM={},e.React,e.ReactDOM,e.ReactRouter,e.RemixRouter)}(this,(function(e,t,n,r,o){"use strict";function a(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var i=a(t),u=a(n);function s(){return s=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},s.apply(this,arguments)}function c(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}const l="get",f="application/x-www-form-urlencoded";function d(e){return null!=e&&"string"==typeof e.tagName}function m(e){return void 0===e&&(e=""),new URLSearchParams("string"==typeof e||Array.isArray(e)||e instanceof URLSearchParams?e:Object.keys(e).reduce(((t,n)=>{let r=e[n];return t.concat(Array.isArray(r)?r.map((e=>[n,e])):[[n,r]])}),[]))}let p=null;const b=new Set(["application/x-www-form-urlencoded","multipart/form-data","text/plain"]);function h(e){return null==e||b.has(e)?e:null}function v(e,t){let n,r,a,i,u;if(d(s=e)&&"form"===s.tagName.toLowerCase()){let u=e.getAttribute("action");r=u?o.stripBasename(u,t):null,n=e.getAttribute("method")||l,a=h(e.getAttribute("enctype"))||f,i=new FormData(e)}else if(function(e){return d(e)&&"button"===e.tagName.toLowerCase()}(e)||function(e){return d(e)&&"input"===e.tagName.toLowerCase()}(e)&&("submit"===e.type||"image"===e.type)){let u=e.form;if(null==u)throw new Error('Cannot submit a <button> or <input type="submit"> without a <form>');let s=e.getAttribute("formaction")||u.getAttribute("action");if(r=s?o.stripBasename(s,t):null,n=e.getAttribute("formmethod")||u.getAttribute("method")||l,a=h(e.getAttribute("formenctype"))||h(u.getAttribute("enctype"))||f,i=new FormData(u,e),!function(){if(null===p)try{new FormData(document.createElement("form"),0),p=!1}catch(e){p=!0}return p}()){let{name:t,type:n,value:r}=e;if("image"===n){let e=t?t+".":"";i.append(e+"x","0"),i.append(e+"y","0")}else t&&i.append(t,r)}}else{if(d(e))throw new Error('Cannot submit element that is not <form>, <button>, or <input type="submit|image">');n=l,r=null,a=f,u=e}var s;return i&&"text/plain"===a&&(u=i,i=void 0),{action:r,method:n.toLowerCase(),encType:a,formData:i,body:u}}const y=["onClick","relative","reloadDocument","replace","state","target","to","preventScrollReset","unstable_viewTransition"],g=["aria-current","caseSensitive","className","end","style","to","unstable_viewTransition","children"],w=["fetcherKey","navigate","reloadDocument","replace","state","method","action","onSubmit","relative","preventScrollReset","unstable_viewTransition"];function R(){var e;let t=null==(e=window)?void 0:e.__staticRouterHydrationData;return t&&t.errors&&(t=s({},t,{errors:S(t.errors)})),t}function S(e){if(!e)return null;let t=Object.entries(e),n={};for(let[e,r]of t)if(r&&"RouteErrorResponse"===r.__type)n[e]=new o.UNSAFE_ErrorResponseImpl(r.status,r.statusText,r.data,!0===r.internal);else if(r&&"Error"===r.__type){if(r.__subType){let t=window[r.__subType];if("function"==typeof t)try{let o=new t(r.message);o.stack="",n[e]=o}catch(e){}}if(null==n[e]){let t=new Error(r.message);t.stack="",n[e]=t}}else n[e]=r;return n}const E=i.createContext({isTransitioning:!1}),P=i.createContext(new Map),_=i.startTransition,O=u.flushSync;function C(e){O?O(e):e()}class x{constructor(){this.status="pending",this.promise=new Promise(((e,t)=>{this.resolve=t=>{"pending"===this.status&&(this.status="resolved",e(t))},this.reject=e=>{"pending"===this.status&&(this.status="rejected",t(e))}}))}}function A(e){let{routes:t,future:n,state:o}=e;return r.UNSAFE_useRoutesImpl(t,void 0,o,n)}const j="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement,N=/^(?:[a-z][a-z0-9+.-]*:|\/\/)/i,F=i.forwardRef((function(e,t){let n,{onClick:a,relative:u,reloadDocument:l,replace:f,state:d,target:m,to:p,preventScrollReset:b,unstable_viewTransition:h}=e,v=c(e,y),{basename:g}=i.useContext(r.UNSAFE_NavigationContext),w=!1;if("string"==typeof p&&N.test(p)&&(n=p,j))try{let e=new URL(window.location.href),t=p.startsWith("//")?new URL(e.protocol+p):new URL(p),n=o.stripBasename(t.pathname,g);t.origin===e.origin&&null!=n?p=n+t.search+t.hash:w=!0}catch(e){}let R=r.useHref(p,{relative:u}),S=B(p,{replace:f,state:d,target:m,preventScrollReset:b,relative:u,unstable_viewTransition:h});return i.createElement("a",s({},v,{href:n||R,onClick:w||l?a:function(e){a&&a(e),e.defaultPrevented||S(e)},ref:t,target:m}))})),L=i.forwardRef((function(e,t){let{"aria-current":n="page",caseSensitive:o=!1,className:a="",end:u=!1,style:l,to:f,unstable_viewTransition:d,children:m}=e,p=c(e,g),b=r.useResolvedPath(f,{relative:p.relative}),h=r.useLocation(),v=i.useContext(r.UNSAFE_DataRouterStateContext),{navigator:y}=i.useContext(r.UNSAFE_NavigationContext),w=null!=v&&Y(b)&&!0===d,R=y.encodeLocation?y.encodeLocation(b).pathname:b.pathname,S=h.pathname,E=v&&v.navigation&&v.navigation.location?v.navigation.location.pathname:null;o||(S=S.toLowerCase(),E=E?E.toLowerCase():null,R=R.toLowerCase());const P="/"!==R&&R.endsWith("/")?R.length-1:R.length;let _,O=S===R||!u&&S.startsWith(R)&&"/"===S.charAt(P),C=null!=E&&(E===R||!u&&E.startsWith(R)&&"/"===E.charAt(R.length)),x={isActive:O,isPending:C,isTransitioning:w},A=O?n:void 0;_="function"==typeof a?a(x):[a,O?"active":null,C?"pending":null,w?"transitioning":null].filter(Boolean).join(" ");let j="function"==typeof l?l(x):l;return i.createElement(F,s({},p,{"aria-current":A,className:_,ref:t,style:j,to:f,unstable_viewTransition:d}),"function"==typeof m?m(x):m)})),T=i.forwardRef(((e,t)=>{let{fetcherKey:n,navigate:r,reloadDocument:o,replace:a,state:u,method:f=l,action:d,onSubmit:m,relative:p,preventScrollReset:b,unstable_viewTransition:h}=e,v=c(e,w),y=I(),g=V(d,{relative:p}),R="get"===f.toLowerCase()?"get":"post";return i.createElement("form",s({ref:t,method:R,action:g,onSubmit:o?m:e=>{if(m&&m(e),e.defaultPrevented)return;e.preventDefault();let t=e.nativeEvent.submitter,o=(null==t?void 0:t.getAttribute("formmethod"))||f;y(t||e.currentTarget,{fetcherKey:n,method:o,navigate:r,replace:a,state:u,relative:p,preventScrollReset:b,unstable_viewTransition:h})}},v))}));var U=function(e){return e.UseScrollRestoration="useScrollRestoration",e.UseSubmit="useSubmit",e.UseSubmitFetcher="useSubmitFetcher",e.UseFetcher="useFetcher",e.useViewTransitionState="useViewTransitionState",e}(U||{}),D=function(e){return e.UseFetcher="useFetcher",e.UseFetchers="useFetchers",e.UseScrollRestoration="useScrollRestoration",e}(D||{});function k(e){let t=i.useContext(r.UNSAFE_DataRouterContext);return t||o.UNSAFE_invariant(!1),t}function M(e){let t=i.useContext(r.UNSAFE_DataRouterStateContext);return t||o.UNSAFE_invariant(!1),t}function B(e,t){let{target:n,replace:o,state:a,preventScrollReset:u,relative:s,unstable_viewTransition:c}=void 0===t?{}:t,l=r.useNavigate(),f=r.useLocation(),d=r.useResolvedPath(e,{relative:s});return i.useCallback((t=>{if(function(e,t){return!(0!==e.button||t&&"_self"!==t||function(e){return!!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)}(e))}(t,n)){t.preventDefault();let n=void 0!==o?o:r.createPath(f)===r.createPath(d);l(e,{replace:n,state:a,preventScrollReset:u,relative:s,unstable_viewTransition:c})}}),[f,l,d,o,a,n,e,u,s,c])}let H=0,K=()=>"__"+String(++H)+"__";function I(){let{router:e}=k(U.UseSubmit),{basename:t}=i.useContext(r.UNSAFE_NavigationContext),n=r.UNSAFE_useRouteId();return i.useCallback((function(r,o){void 0===o&&(o={}),function(){if("undefined"==typeof document)throw new Error("You are calling submit during the server render. Try calling submit within a `useEffect` or callback instead.")}();let{action:a,method:i,encType:u,formData:s,body:c}=v(r,t);if(!1===o.navigate){let t=o.fetcherKey||K();e.fetch(t,n,o.action||a,{preventScrollReset:o.preventScrollReset,formData:s,body:c,formMethod:o.method||i,formEncType:o.encType||u,unstable_flushSync:o.unstable_flushSync})}else e.navigate(o.action||a,{preventScrollReset:o.preventScrollReset,formData:s,body:c,formMethod:o.method||i,formEncType:o.encType||u,replace:o.replace,state:o.state,fromRouteId:n,unstable_flushSync:o.unstable_flushSync,unstable_viewTransition:o.unstable_viewTransition})}),[e,t,n])}function V(e,t){let{relative:n}=void 0===t?{}:t,{basename:a}=i.useContext(r.UNSAFE_NavigationContext),u=i.useContext(r.UNSAFE_RouteContext);u||o.UNSAFE_invariant(!1);let[c]=u.matches.slice(-1),l=s({},r.useResolvedPath(e||".",{relative:n})),f=r.useLocation();if(null==e){l.search=f.search;let e=new URLSearchParams(l.search);e.has("index")&&""===e.get("index")&&(e.delete("index"),l.search=e.toString()?"?"+e.toString():"")}return e&&"."!==e||!c.route.index||(l.search=l.search?l.search.replace(/^\?/,"?index&"):"?index"),"/"!==a&&(l.pathname="/"===l.pathname?a:o.joinPaths([a,l.pathname])),r.createPath(l)}const z="react-router-scroll-positions";let q={};function W(e){let{getKey:t,storageKey:n}=void 0===e?{}:e,{router:a}=k(U.UseScrollRestoration),{restoreScrollPosition:u,preventScrollReset:c}=M(D.UseScrollRestoration),{basename:l}=i.useContext(r.UNSAFE_NavigationContext),f=r.useLocation(),d=r.useMatches(),m=r.useNavigation();i.useEffect((()=>(window.history.scrollRestoration="manual",()=>{window.history.scrollRestoration="auto"})),[]),function(e,t){let{capture:n}=t||{};i.useEffect((()=>{let t=null!=n?{capture:n}:void 0;return window.addEventListener("pagehide",e,t),()=>{window.removeEventListener("pagehide",e,t)}}),[e,n])}(i.useCallback((()=>{if("idle"===m.state){let e=(t?t(f,d):null)||f.key;q[e]=window.scrollY}try{sessionStorage.setItem(n||z,JSON.stringify(q))}catch(e){}window.history.scrollRestoration="auto"}),[n,t,m.state,f,d])),"undefined"!=typeof document&&(i.useLayoutEffect((()=>{try{let e=sessionStorage.getItem(n||z);e&&(q=JSON.parse(e))}catch(e){}}),[n]),i.useLayoutEffect((()=>{let e=t&&"/"!==l?(e,n)=>t(s({},e,{pathname:o.stripBasename(e.pathname,l)||e.pathname}),n):t,n=null==a?void 0:a.enableScrollRestoration(q,(()=>window.scrollY),e);return()=>n&&n()}),[a,l,t]),i.useLayoutEffect((()=>{if(!1!==u)if("number"!=typeof u){if(f.hash){let e=document.getElementById(decodeURIComponent(f.hash.slice(1)));if(e)return void e.scrollIntoView()}!0!==c&&window.scrollTo(0,0)}else window.scrollTo(0,u)}),[f,u,c]))}function Y(e,t){void 0===t&&(t={});let n=i.useContext(E);null==n&&o.UNSAFE_invariant(!1);let{basename:a}=k(U.useViewTransitionState),u=r.useResolvedPath(e,{relative:t.relative});if(!n.isTransitioning)return!1;let s=o.stripBasename(n.currentLocation.pathname,a)||n.currentLocation.pathname,c=o.stripBasename(n.nextLocation.pathname,a)||n.nextLocation.pathname;return null!=o.matchPath(u.pathname,c)||null!=o.matchPath(u.pathname,s)}Object.defineProperty(e,"AbortedDeferredError",{enumerable:!0,get:function(){return r.AbortedDeferredError}}),Object.defineProperty(e,"Await",{enumerable:!0,get:function(){return r.Await}}),Object.defineProperty(e,"MemoryRouter",{enumerable:!0,get:function(){return r.MemoryRouter}}),Object.defineProperty(e,"Navigate",{enumerable:!0,get:function(){return r.Navigate}}),Object.defineProperty(e,"NavigationType",{enumerable:!0,get:function(){return r.NavigationType}}),Object.defineProperty(e,"Outlet",{enumerable:!0,get:function(){return r.Outlet}}),Object.defineProperty(e,"Route",{enumerable:!0,get:function(){return r.Route}}),Object.defineProperty(e,"Router",{enumerable:!0,get:function(){return r.Router}}),Object.defineProperty(e,"Routes",{enumerable:!0,get:function(){return r.Routes}}),Object.defineProperty(e,"UNSAFE_DataRouterContext",{enumerable:!0,get:function(){return r.UNSAFE_DataRouterContext}}),Object.defineProperty(e,"UNSAFE_DataRouterStateContext",{enumerable:!0,get:function(){return r.UNSAFE_DataRouterStateContext}}),Object.defineProperty(e,"UNSAFE_LocationContext",{enumerable:!0,get:function(){return r.UNSAFE_LocationContext}}),Object.defineProperty(e,"UNSAFE_NavigationContext",{enumerable:!0,get:function(){return r.UNSAFE_NavigationContext}}),Object.defineProperty(e,"UNSAFE_RouteContext",{enumerable:!0,get:function(){return r.UNSAFE_RouteContext}}),Object.defineProperty(e,"UNSAFE_useRouteId",{enumerable:!0,get:function(){return r.UNSAFE_useRouteId}}),Object.defineProperty(e,"createMemoryRouter",{enumerable:!0,get:function(){return r.createMemoryRouter}}),Object.defineProperty(e,"createPath",{enumerable:!0,get:function(){return r.createPath}}),Object.defineProperty(e,"createRoutesFromChildren",{enumerable:!0,get:function(){return r.createRoutesFromChildren}}),Object.defineProperty(e,"createRoutesFromElements",{enumerable:!0,get:function(){return r.createRoutesFromElements}}),Object.defineProperty(e,"defer",{enumerable:!0,get:function(){return r.defer}}),Object.defineProperty(e,"generatePath",{enumerable:!0,get:function(){return r.generatePath}}),Object.defineProperty(e,"isRouteErrorResponse",{enumerable:!0,get:function(){return r.isRouteErrorResponse}}),Object.defineProperty(e,"json",{enumerable:!0,get:function(){return r.json}}),Object.defineProperty(e,"matchPath",{enumerable:!0,get:function(){return r.matchPath}}),Object.defineProperty(e,"matchRoutes",{enumerable:!0,get:function(){return r.matchRoutes}}),Object.defineProperty(e,"parsePath",{enumerable:!0,get:function(){return r.parsePath}}),Object.defineProperty(e,"redirect",{enumerable:!0,get:function(){return r.redirect}}),Object.defineProperty(e,"redirectDocument",{enumerable:!0,get:function(){return r.redirectDocument}}),Object.defineProperty(e,"renderMatches",{enumerable:!0,get:function(){return r.renderMatches}}),Object.defineProperty(e,"resolvePath",{enumerable:!0,get:function(){return r.resolvePath}}),Object.defineProperty(e,"useActionData",{enumerable:!0,get:function(){return r.useActionData}}),Object.defineProperty(e,"useAsyncError",{enumerable:!0,get:function(){return r.useAsyncError}}),Object.defineProperty(e,"useAsyncValue",{enumerable:!0,get:function(){return r.useAsyncValue}}),Object.defineProperty(e,"useBlocker",{enumerable:!0,get:function(){return r.useBlocker}}),Object.defineProperty(e,"useHref",{enumerable:!0,get:function(){return r.useHref}}),Object.defineProperty(e,"useInRouterContext",{enumerable:!0,get:function(){return r.useInRouterContext}}),Object.defineProperty(e,"useLoaderData",{enumerable:!0,get:function(){return r.useLoaderData}}),Object.defineProperty(e,"useLocation",{enumerable:!0,get:function(){return r.useLocation}}),Object.defineProperty(e,"useMatch",{enumerable:!0,get:function(){return r.useMatch}}),Object.defineProperty(e,"useMatches",{enumerable:!0,get:function(){return r.useMatches}}),Object.defineProperty(e,"useNavigate",{enumerable:!0,get:function(){return r.useNavigate}}),Object.defineProperty(e,"useNavigation",{enumerable:!0,get:function(){return r.useNavigation}}),Object.defineProperty(e,"useNavigationType",{enumerable:!0,get:function(){return r.useNavigationType}}),Object.defineProperty(e,"useOutlet",{enumerable:!0,get:function(){return r.useOutlet}}),Object.defineProperty(e,"useOutletContext",{enumerable:!0,get:function(){return r.useOutletContext}}),Object.defineProperty(e,"useParams",{enumerable:!0,get:function(){return r.useParams}}),Object.defineProperty(e,"useResolvedPath",{enumerable:!0,get:function(){return r.useResolvedPath}}),Object.defineProperty(e,"useRevalidator",{enumerable:!0,get:function(){return r.useRevalidator}}),Object.defineProperty(e,"useRouteError",{enumerable:!0,get:function(){return r.useRouteError}}),Object.defineProperty(e,"useRouteLoaderData",{enumerable:!0,get:function(){return r.useRouteLoaderData}}),Object.defineProperty(e,"useRoutes",{enumerable:!0,get:function(){return r.useRoutes}}),e.BrowserRouter=function(e){let{basename:t,children:n,future:a,window:u}=e,s=i.useRef();null==s.current&&(s.current=o.createBrowserHistory({window:u,v5Compat:!0}));let c=s.current,[l,f]=i.useState({action:c.action,location:c.location}),{v7_startTransition:d}=a||{},m=i.useCallback((e=>{d&&_?_((()=>f(e))):f(e)}),[f,d]);return i.useLayoutEffect((()=>c.listen(m)),[c,m]),i.createElement(r.Router,{basename:t,children:n,location:l.location,navigationType:l.action,navigator:c,future:a})},e.Form=T,e.HashRouter=function(e){let{basename:t,children:n,future:a,window:u}=e,s=i.useRef();null==s.current&&(s.current=o.createHashHistory({window:u,v5Compat:!0}));let c=s.current,[l,f]=i.useState({action:c.action,location:c.location}),{v7_startTransition:d}=a||{},m=i.useCallback((e=>{d&&_?_((()=>f(e))):f(e)}),[f,d]);return i.useLayoutEffect((()=>c.listen(m)),[c,m]),i.createElement(r.Router,{basename:t,children:n,location:l.location,navigationType:l.action,navigator:c,future:a})},e.Link=F,e.NavLink=L,e.RouterProvider=function(e){let{fallbackElement:t,router:n,future:o}=e,[a,u]=i.useState(n.state),[s,c]=i.useState(),[l,f]=i.useState({isTransitioning:!1}),[d,m]=i.useState(),[p,b]=i.useState(),[h,v]=i.useState(),y=i.useRef(new Map),{v7_startTransition:g}=o||{},w=i.useCallback((e=>{g?function(e){_?_(e):e()}(e):e()}),[g]),R=i.useCallback(((e,t)=>{let{deletedFetchers:r,unstable_flushSync:o,unstable_viewTransitionOpts:a}=t;r.forEach((e=>y.current.delete(e))),e.fetchers.forEach(((e,t)=>{void 0!==e.data&&y.current.set(t,e.data)}));let i=null==n.window||"function"!=typeof n.window.document.startViewTransition;if(a&&!i){if(o){C((()=>{p&&(d&&d.resolve(),p.skipTransition()),f({isTransitioning:!0,flushSync:!0,currentLocation:a.currentLocation,nextLocation:a.nextLocation})}));let t=n.window.document.startViewTransition((()=>{C((()=>u(e)))}));return t.finished.finally((()=>{C((()=>{m(void 0),b(void 0),c(void 0),f({isTransitioning:!1})}))})),void C((()=>b(t)))}p?(d&&d.resolve(),p.skipTransition(),v({state:e,currentLocation:a.currentLocation,nextLocation:a.nextLocation})):(c(e),f({isTransitioning:!0,flushSync:!1,currentLocation:a.currentLocation,nextLocation:a.nextLocation}))}else o?C((()=>u(e))):w((()=>u(e)))}),[n.window,p,d,y,w]);i.useLayoutEffect((()=>n.subscribe(R)),[n,R]),i.useEffect((()=>{l.isTransitioning&&!l.flushSync&&m(new x)}),[l]),i.useEffect((()=>{if(d&&s&&n.window){let e=s,t=d.promise,r=n.window.document.startViewTransition((async()=>{w((()=>u(e))),await t}));r.finished.finally((()=>{m(void 0),b(void 0),c(void 0),f({isTransitioning:!1})})),b(r)}}),[w,s,d,n.window]),i.useEffect((()=>{d&&s&&a.location.key===s.location.key&&d.resolve()}),[d,p,a.location,s]),i.useEffect((()=>{!l.isTransitioning&&h&&(c(h.state),f({isTransitioning:!0,flushSync:!1,currentLocation:h.currentLocation,nextLocation:h.nextLocation}),v(void 0))}),[l.isTransitioning,h]),i.useEffect((()=>{}),[]);let S=i.useMemo((()=>({createHref:n.createHref,encodeLocation:n.encodeLocation,go:e=>n.navigate(e),push:(e,t,r)=>n.navigate(e,{state:t,preventScrollReset:null==r?void 0:r.preventScrollReset}),replace:(e,t,r)=>n.navigate(e,{replace:!0,state:t,preventScrollReset:null==r?void 0:r.preventScrollReset})})),[n]),O=n.basename||"/",j=i.useMemo((()=>({router:n,navigator:S,static:!1,basename:O})),[n,S,O]);return i.createElement(i.Fragment,null,i.createElement(r.UNSAFE_DataRouterContext.Provider,{value:j},i.createElement(r.UNSAFE_DataRouterStateContext.Provider,{value:a},i.createElement(P.Provider,{value:y.current},i.createElement(E.Provider,{value:l},i.createElement(r.Router,{basename:O,location:a.location,navigationType:a.historyAction,navigator:S,future:{v7_relativeSplatPath:n.future.v7_relativeSplatPath}},a.initialized||n.future.v7_partialHydration?i.createElement(A,{routes:n.routes,future:n.future,state:a}):t))))),null)},e.ScrollRestoration=function(e){let{getKey:t,storageKey:n}=e;return W({getKey:t,storageKey:n}),null},e.UNSAFE_FetchersContext=P,e.UNSAFE_ViewTransitionContext=E,e.UNSAFE_useScrollRestoration=W,e.createBrowserRouter=function(e,t){return o.createRouter({basename:null==t?void 0:t.basename,future:s({},null==t?void 0:t.future,{v7_prependBasename:!0}),history:o.createBrowserHistory({window:null==t?void 0:t.window}),hydrationData:(null==t?void 0:t.hydrationData)||R(),routes:e,mapRouteProperties:r.UNSAFE_mapRouteProperties,window:null==t?void 0:t.window}).initialize()},e.createHashRouter=function(e,t){return o.createRouter({basename:null==t?void 0:t.basename,future:s({},null==t?void 0:t.future,{v7_prependBasename:!0}),history:o.createHashHistory({window:null==t?void 0:t.window}),hydrationData:(null==t?void 0:t.hydrationData)||R(),routes:e,mapRouteProperties:r.UNSAFE_mapRouteProperties,window:null==t?void 0:t.window}).initialize()},e.createSearchParams=m,e.unstable_HistoryRouter=function(e){let{basename:t,children:n,future:o,history:a}=e,[u,s]=i.useState({action:a.action,location:a.location}),{v7_startTransition:c}=o||{},l=i.useCallback((e=>{c&&_?_((()=>s(e))):s(e)}),[s,c]);return i.useLayoutEffect((()=>a.listen(l)),[a,l]),i.createElement(r.Router,{basename:t,children:n,location:u.location,navigationType:u.action,navigator:a,future:o})},e.unstable_usePrompt=function(e){let{when:t,message:n}=e,o=r.useBlocker(t);i.useEffect((()=>{if("blocked"===o.state){window.confirm(n)?setTimeout(o.proceed,0):o.reset()}}),[o,n]),i.useEffect((()=>{"blocked"!==o.state||t||o.reset()}),[o,t])},e.unstable_useViewTransitionState=Y,e.useBeforeUnload=function(e,t){let{capture:n}=t||{};i.useEffect((()=>{let t=null!=n?{capture:n}:void 0;return window.addEventListener("beforeunload",e,t),()=>{window.removeEventListener("beforeunload",e,t)}}),[e,n])},e.useFetcher=function(e){var t;let{key:n}=void 0===e?{}:e,{router:a}=k(U.UseFetcher),u=M(D.UseFetcher),c=i.useContext(P),l=i.useContext(r.UNSAFE_RouteContext),f=null==(t=l.matches[l.matches.length-1])?void 0:t.route.id;c||o.UNSAFE_invariant(!1),l||o.UNSAFE_invariant(!1),null==f&&o.UNSAFE_invariant(!1);let[d,m]=i.useState(n||"");n&&n!==d?m(n):d||m(K()),i.useEffect((()=>(a.getFetcher(d),()=>{a.deleteFetcher(d)})),[a,d]);let p=i.useCallback(((e,t)=>{f||o.UNSAFE_invariant(!1),a.fetch(d,f,e,t)}),[d,f,a]),b=I(),h=i.useCallback(((e,t)=>{b(e,s({},t,{navigate:!1,fetcherKey:d}))}),[d,b]),v=i.useMemo((()=>i.forwardRef(((e,t)=>i.createElement(T,s({},e,{navigate:!1,fetcherKey:d,ref:t}))))),[d]),y=u.fetchers.get(d)||o.IDLE_FETCHER,g=c.get(d);return i.useMemo((()=>s({Form:v,submit:h,load:p},y,{data:g})),[v,h,p,y,g])},e.useFetchers=function(){let e=M(D.UseFetchers);return Array.from(e.fetchers.entries()).map((e=>{let[t,n]=e;return s({},n,{key:t})}))},e.useFormAction=V,e.useLinkClickHandler=B,e.useSearchParams=function(e){let t=i.useRef(m(e)),n=i.useRef(!1),o=r.useLocation(),a=i.useMemo((()=>function(e,t){let n=m(e);return t&&t.forEach(((e,r)=>{n.has(r)||t.getAll(r).forEach((e=>{n.append(r,e)}))})),n}(o.search,n.current?null:t.current)),[o.search]),u=r.useNavigate(),s=i.useCallback(((e,t)=>{const r=m("function"==typeof e?e(a):e);n.current=!0,u("?"+r,t)}),[u,a]);return[a,s]},e.useSubmit=I,Object.defineProperty(e,"__esModule",{value:!0})})); | ||
//# sourceMappingURL=react-router-dom.production.min.js.map |
{ | ||
"name": "react-router-dom", | ||
"version": "6.17.0", | ||
"version": "6.21.1", | ||
"description": "Declarative routing for React web applications", | ||
@@ -26,4 +26,4 @@ "keywords": [ | ||
"dependencies": { | ||
"@remix-run/router": "1.10.0", | ||
"react-router": "6.17.0" | ||
"@remix-run/router": "1.14.1", | ||
"react-router": "6.21.1" | ||
}, | ||
@@ -30,0 +30,0 @@ "devDependencies": { |
import * as React from "react"; | ||
import type { Router as RemixRouter, StaticHandlerContext, CreateStaticHandlerOptions as RouterCreateStaticHandlerOptions } from "@remix-run/router"; | ||
import type { Location, RouteObject } from "react-router-dom"; | ||
import type { Router as RemixRouter, StaticHandlerContext, CreateStaticHandlerOptions as RouterCreateStaticHandlerOptions, FutureConfig as RouterFutureConfig } from "@remix-run/router"; | ||
import type { FutureConfig, Location, RouteObject } from "react-router-dom"; | ||
export interface StaticRouterProps { | ||
@@ -8,2 +8,3 @@ basename?: string; | ||
location: Partial<Location> | string; | ||
future?: Partial<FutureConfig>; | ||
} | ||
@@ -14,3 +15,3 @@ /** | ||
*/ | ||
export declare function StaticRouter({ basename, children, location: locationProp, }: StaticRouterProps): React.JSX.Element; | ||
export declare function StaticRouter({ basename, children, location: locationProp, future, }: StaticRouterProps): React.JSX.Element; | ||
export { StaticHandlerContext }; | ||
@@ -30,2 +31,4 @@ export interface StaticRouterProviderProps { | ||
export declare function createStaticHandler(routes: RouteObject[], opts?: CreateStaticHandlerOptions): import("@remix-run/router").StaticHandler; | ||
export declare function createStaticRouter(routes: RouteObject[], context: StaticHandlerContext): RemixRouter; | ||
export declare function createStaticRouter(routes: RouteObject[], context: StaticHandlerContext, opts?: { | ||
future?: Partial<Pick<RouterFutureConfig, "v7_partialHydration" | "v7_relativeSplatPath">>; | ||
}): RemixRouter; |
@@ -37,3 +37,4 @@ 'use strict'; | ||
children, | ||
location: locationProp = "/" | ||
location: locationProp = "/", | ||
future | ||
}) { | ||
@@ -58,2 +59,3 @@ if (typeof locationProp === "string") { | ||
navigator: staticNavigator, | ||
future: future, | ||
static: true | ||
@@ -80,2 +82,3 @@ }); | ||
}; | ||
let fetchersContext = new Map(); | ||
let hydrateScript = ""; | ||
@@ -102,2 +105,4 @@ if (hydrate !== false) { | ||
value: state | ||
}, /*#__PURE__*/React__namespace.createElement(reactRouterDom.UNSAFE_FetchersContext.Provider, { | ||
value: fetchersContext | ||
}, /*#__PURE__*/React__namespace.createElement(reactRouterDom.UNSAFE_ViewTransitionContext.Provider, { | ||
@@ -112,7 +117,11 @@ value: { | ||
navigator: dataRouterContext.navigator, | ||
static: dataRouterContext.static | ||
static: dataRouterContext.static, | ||
future: { | ||
v7_relativeSplatPath: router$1.future.v7_relativeSplatPath | ||
} | ||
}, /*#__PURE__*/React__namespace.createElement(DataRoutes, { | ||
routes: router$1.routes, | ||
future: router$1.future, | ||
state: state | ||
}))))), hydrateScript ? /*#__PURE__*/React__namespace.createElement("script", { | ||
})))))), hydrateScript ? /*#__PURE__*/React__namespace.createElement("script", { | ||
suppressHydrationWarning: true, | ||
@@ -127,5 +136,6 @@ nonce: nonce, | ||
routes, | ||
future, | ||
state | ||
}) { | ||
return reactRouter.UNSAFE_useRoutesImpl(routes, undefined, state); | ||
return reactRouter.UNSAFE_useRoutesImpl(routes, undefined, state, future); | ||
} | ||
@@ -188,3 +198,3 @@ function serializeErrors(errors) { | ||
} | ||
function createStaticRouter(routes, context) { | ||
function createStaticRouter(routes, context, opts = {}) { | ||
let manifest = {}; | ||
@@ -207,2 +217,11 @@ let dataRoutes = router.UNSAFE_convertRoutesToDataRoutes(routes, reactRouter.UNSAFE_mapRouteProperties, undefined, manifest); | ||
}, | ||
get future() { | ||
return { | ||
v7_fetcherPersist: false, | ||
v7_normalizeFormMethod: false, | ||
v7_partialHydration: opts.future?.v7_partialHydration === true, | ||
v7_prependBasename: false, | ||
v7_relativeSplatPath: opts.future?.v7_relativeSplatPath === true | ||
}; | ||
}, | ||
get state() { | ||
@@ -209,0 +228,0 @@ return { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
864306
6344
26
+ Added@remix-run/router@1.14.1(transitive)
+ Addedreact-router@6.21.1(transitive)
- Removed@remix-run/router@1.10.0(transitive)
- Removedreact-router@6.17.0(transitive)
Updated@remix-run/router@1.14.1
Updatedreact-router@6.21.1