react-router-dom 6.3.0 → 6.4.0-pre.0

package/LICENSE.md

@@ -1,7 +1,7 @@
 MIT License
 
 Copyright (c) React Training 2015-2019
-Copyright (c) Remix Software 2020-2021
+Copyright (c) Remix Software 2020-2022
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dom.d.ts

@@ -0,0 +1,68 @@
+import type { FormEncType, FormMethod } from "@remix-run/router";
+export declare const defaultMethod = "get";
+export declare function isHtmlElement(object: any): object is HTMLElement;
+export declare function isButtonElement(object: any): object is HTMLButtonElement;
+export declare function isFormElement(object: any): object is HTMLFormElement;
+export declare function isInputElement(object: any): object is HTMLInputElement;
+declare type LimitedMouseEvent = Pick<MouseEvent, "button" | "metaKey" | "altKey" | "ctrlKey" | "shiftKey">;
+export declare function shouldProcessLinkClick(event: LimitedMouseEvent, target?: string): boolean;
+export declare type ParamKeyValuePair = [string, string];
+export declare type URLSearchParamsInit = string | ParamKeyValuePair[] | Record<string, string | string[]> | URLSearchParams;
+/**
+ * Creates a URLSearchParams object using the given initializer.
+ *
+ * This is identical to `new URLSearchParams(init)` except it also
+ * supports arrays as values in the object form of the initializer
+ * instead of just strings. This is convenient when you need multiple
+ * values for a given key, but don't want to use an array initializer.
+ *
+ * For example, instead of:
+ *
+ *   let searchParams = new URLSearchParams([
+ *     ['sort', 'name'],
+ *     ['sort', 'price']
+ *   ]);
+ *
+ * you can do:
+ *
+ *   let searchParams = createSearchParams({
+ *     sort: ['name', 'price']
+ *   });
+ */
+export declare function createSearchParams(init?: URLSearchParamsInit): URLSearchParams;
+export declare function getSearchParamsForLocation(locationSearch: string, defaultSearchParams: URLSearchParams): URLSearchParams;
+export interface SubmitOptions {
+    /**
+     * The HTTP method used to submit the form. Overrides `<form method>`.
+     * Defaults to "GET".
+     */
+    method?: FormMethod;
+    /**
+     * The action URL path used to submit the form. Overrides `<form action>`.
+     * Defaults to the path of the current route.
+     *
+     * Note: It is assumed the path is already resolved. If you need to resolve a
+     * relative path, use `useFormAction`.
+     */
+    action?: string;
+    /**
+     * The action URL used to submit the form. Overrides `<form encType>`.
+     * Defaults to "application/x-www-form-urlencoded".
+     */
+    encType?: FormEncType;
+    /**
+     * Set `true` to replace the current entry in the browser's history stack
+     * instead of creating a new one (i.e. stay on "the same page"). Defaults
+     * to `false`.
+     */
+    replace?: boolean;
+}
+export declare function getFormSubmissionInfo(target: HTMLFormElement | HTMLButtonElement | HTMLInputElement | FormData | URLSearchParams | {
+    [name: string]: string;
+} | null, defaultAction: string, options: SubmitOptions): {
+    url: URL;
+    method: string;
+    encType: string;
+    formData: FormData;
+};
+export {};

package/index.d.ts

@@ -3,14 +3,32 @@
  * you'll need to update the rollup config for react-router-dom-v5-compat.
  */
 import * as React from "react";
-import type { History } from "history";
-import { MemoryRouter, Navigate, Outlet, Route, Router, Routes, createRoutesFromChildren, generatePath, matchRoutes, matchPath, createPath, parsePath, resolvePath, renderMatches, useHref, useInRouterContext, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useParams, useResolvedPath, useRoutes, useOutletContext } from "react-router";
 import type { To } from "react-router";
-export { MemoryRouter, Navigate, Outlet, Route, Router, Routes, createRoutesFromChildren, generatePath, matchRoutes, matchPath, createPath, parsePath, renderMatches, resolvePath, useHref, useInRouterContext, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useParams, useResolvedPath, useRoutes, useOutletContext, };
-export { NavigationType } from "react-router";
-export type { Hash, Location, Path, To, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigator, OutletProps, Params, PathMatch, RouteMatch, RouteObject, RouteProps, PathRouteProps, LayoutRouteProps, IndexRouteProps, RouterProps, Pathname, Search, RoutesProps, } from "react-router";
+import type { Fetcher, FormMethod, History, HydrationState, GetScrollRestorationKeyFunction, RouteObject } from "@remix-run/router";
+import type { SubmitOptions, ParamKeyValuePair, URLSearchParamsInit } from "./dom";
+import { createSearchParams } from "./dom";
+export type { ParamKeyValuePair, URLSearchParamsInit };
+export { createSearchParams };
+export type { ActionFunction, DataMemoryRouterProps, DataRouteMatch, Fetcher, Hash, IndexRouteProps, JsonFunction, LayoutRouteProps, LoaderFunction, Location, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigation, Navigator, OutletProps, Params, Path, PathMatch, Pathname, PathPattern, PathRouteProps, RedirectFunction, RouteMatch, RouteObject, RouteProps, RouterProps, RoutesProps, Search, ShouldRevalidateFunction, To, } from "react-router";
+export { DataMemoryRouter, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, Routes, createPath, createRoutesFromChildren, isRouteErrorResponse, generatePath, json, matchPath, matchRoutes, parsePath, redirect, renderMatches, resolvePath, useActionData, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, } from "react-router";
 /** @internal */
-export { UNSAFE_NavigationContext, UNSAFE_LocationContext, UNSAFE_RouteContext, } from "react-router";
+export { UNSAFE_NavigationContext, UNSAFE_LocationContext, UNSAFE_RouteContext, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, useRenderDataRouter, } from "react-router";
+export interface DataBrowserRouterProps {
+    children?: React.ReactNode;
+    hydrationData?: HydrationState;
+    fallbackElement: React.ReactElement;
+    routes?: RouteObject[];
+    window?: Window;
+}
+export declare function DataBrowserRouter({ children, fallbackElement, hydrationData, routes, window, }: DataBrowserRouterProps): React.ReactElement;
+export interface DataHashRouterProps {
+    children?: React.ReactNode;
+    hydrationData?: HydrationState;
+    fallbackElement: React.ReactElement;
+    routes?: RouteObject[];
+    window?: Window;
+}
+export declare function DataHashRouter({ children, hydrationData, fallbackElement, routes, window, }: DataBrowserRouterProps): React.ReactElement;
 export interface BrowserRouterProps {
     basename?: string;
     children?: React.ReactNode;
@@ -50,6 +68,7 @@ export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorEle
     reloadDocument?: boolean;
     replace?: boolean;
     state?: any;
+    resetScroll?: boolean;
     to: To;
 }
 /**
@@ -59,29 +78,74 @@ export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.Ref
 export interface NavLinkProps extends Omit<LinkProps, "className" | "style" | "children"> {
     children?: React.ReactNode | ((props: {
         isActive: boolean;
+        isPending: boolean;
     }) => React.ReactNode);
     caseSensitive?: boolean;
     className?: string | ((props: {
         isActive: boolean;
+        isPending: boolean;
     }) => string | undefined);
     end?: boolean;
     style?: React.CSSProperties | ((props: {
         isActive: boolean;
+        isPending: boolean;
     }) => React.CSSProperties);
 }
 /**
  * A <Link> wrapper that knows if it's "active" or not.
  */
 export declare const NavLink: React.ForwardRefExoticComponent<NavLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
+    /**
+     * The HTTP verb to use when the form is submit. Supports "get", "post",
+     * "put", "delete", "patch".
+     */
+    method?: FormMethod;
+    /**
+     * Normal `<form action>` but supports React Router's relative paths.
+     */
+    action?: string;
+    /**
+     * Replaces the current entry in the browser history stack when the form
+     * navigates. Use this if you don't want the user to be able to click "back"
+     * to the page with the form on it.
+     */
+    replace?: boolean;
+    /**
+     * A function to call when the form is submitted. If you call
+     * `event.preventDefault()` then this form will not do anything.
+     */
+    onSubmit?: React.FormEventHandler<HTMLFormElement>;
+}
+/**
+ * A `@remix-run/router`-aware `<form>`. It behaves like a normal form except
+ * that the interaction with the server is with `fetch` instead of new document
+ * requests, allowing components to add nicer UX to the page as the form is
+ * submitted and returns with data.
+ */
+export declare const Form: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
+interface ScrollRestorationProps {
+    getKey?: GetScrollRestorationKeyFunction;
+    storageKey?: string;
+}
+/**
+ * This component will emulate the browser's scroll restoration on location
+ * changes.
+ */
+export declare function ScrollRestoration({ getKey, storageKey, }: ScrollRestorationProps): null;
+export declare namespace ScrollRestoration {
+    var displayName: string;
+}
 /**
  * Handles the click behavior for router `<Link>` components. This is useful if
  * you need to create custom `<Link>` components with the same click behavior we
  * use in our exported `<Link>`.
  */
-export declare function useLinkClickHandler<E extends Element = HTMLAnchorElement>(to: To, { target, replace: replaceProp, state, }?: {
+export declare function useLinkClickHandler<E extends Element = HTMLAnchorElement>(to: To, { target, replace: replaceProp, state, resetScroll, }?: {
     target?: React.HTMLAttributeAnchorTarget;
     replace?: boolean;
     state?: any;
+    resetScroll?: boolean;
 }): (event: React.MouseEvent<E, MouseEvent>) => void;
 /**
  * A convenient wrapper for reading and writing search parameters via the
@@ -91,27 +155,48 @@ export declare function useSearchParams(defaultInit?: URLSearchParamsInit): read
     replace?: boolean | undefined;
     state?: any;
 } | undefined) => void];
-export declare type ParamKeyValuePair = [string, string];
-export declare type URLSearchParamsInit = string | ParamKeyValuePair[] | Record<string, string | string[]> | URLSearchParams;
 /**
- * Creates a URLSearchParams object using the given initializer.
- *
- * This is identical to `new URLSearchParams(init)` except it also
- * supports arrays as values in the object form of the initializer
- * instead of just strings. This is convenient when you need multiple
- * values for a given key, but don't want to use an array initializer.
- *
- * For example, instead of:
- *
- *   let searchParams = new URLSearchParams([
- *     ['sort', 'name'],
- *     ['sort', 'price']
- *   ]);
- *
- * you can do:
- *
- *   let searchParams = createSearchParams({
- *     sort: ['name', 'price']
- *   });
+ * Submits a HTML `<form>` to the server without reloading the page.
+ */
+export interface SubmitFunction {
+    (
+    /**
+     * Specifies the `<form>` to be submitted to the server, a specific
+     * `<button>` or `<input type="submit">` to use to submit the form, or some
+     * arbitrary data to submit.
+     *
+     * Note: When using a `<button>` its `name` and `value` will also be
+     * included in the form data that is submitted.
+     */
+    target: HTMLFormElement | HTMLButtonElement | HTMLInputElement | FormData | URLSearchParams | {
+        [name: string]: string;
+    } | null, 
+    /**
+     * Options that override the `<form>`'s own attributes. Required when
+     * submitting arbitrary data without a backing `<form>`.
+     */
+    options?: SubmitOptions): void;
+}
+/**
+ * Returns a function that may be used to programmatically submit a form (or
+ * some arbitrary data) to the server.
+ */
+export declare function useSubmit(): SubmitFunction;
+declare function useSubmitImpl(fetcherKey?: string): SubmitFunction;
+export declare function useFormAction(action?: string): string;
+declare function createFetcherForm(fetcherKey: string): React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
+declare type FetcherWithComponents<TData> = Fetcher<TData> & {
+    Form: ReturnType<typeof createFetcherForm>;
+    submit: ReturnType<typeof useSubmitImpl>;
+    load: (href: string) => void;
+};
+/**
+ * Interacts with route loaders and actions without causing a navigation. Great
+ * for any interaction that stays on the same page.
+ */
+export declare function useFetcher<TData = any>(): FetcherWithComponents<TData>;
+/**
+ * Provides all fetchers currently on the page. Useful for layouts and parent
+ * routes that need to provide pending/optimistic UI regarding the fetch.
  */
-export declare function createSearchParams(init?: URLSearchParamsInit): URLSearchParams;
+export declare function useFetchers(): Fetcher[];