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

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# react-router-dom
+
+## 6.4.0-pre.4
+
+### Patch Changes
+
+- Fix missing `dist` files
+
+## 6.4.0-pre.3
+
+### Patch Changes
+
+- Make `fallbackElement` optional and change type to `ReactNode` (type changes only) (#8896)
+- Properly trigger error boundaries on 404 routes

package/{index.d.ts → dist/index.d.ts}

@@ -16,7 +16,7 @@ export { UNSAFE_NavigationContext, UNSAFE_LocationContext, UNSAFE_RouteContext,
 export interface DataBrowserRouterProps {
     children?: React.ReactNode;
     hydrationData?: HydrationState;
-    fallbackElement: React.ReactElement;
+    fallbackElement?: React.ReactNode;
     routes?: RouteObject[];
     window?: Window;
 }
@@ -24,7 +24,7 @@ export declare function DataBrowserRouter({ children, fallbackElement, hydration
 export interface DataHashRouterProps {
     children?: React.ReactNode;
     hydrationData?: HydrationState;
-    fallbackElement: React.ReactElement;
+    fallbackElement?: React.ReactNode;
     routes?: RouteObject[];
     window?: Window;
 }
@@ -89,7 +89,7 @@ export interface NavLinkProps extends Omit<LinkProps, "className" | "style" | "c
     style?: React.CSSProperties | ((props: {
         isActive: boolean;
         isPending: boolean;
-    }) => React.CSSProperties);
+    }) => React.CSSProperties | undefined);
 }
 /**
  * A <Link> wrapper that knows if it's "active" or not.
@@ -152,9 +152,9 @@ export declare function useLinkClickHandler<E extends Element = HTMLAnchorElemen
  * URLSearchParams interface.
  */
 export declare function useSearchParams(defaultInit?: URLSearchParamsInit): readonly [URLSearchParams, (nextInit: URLSearchParamsInit, navigateOptions?: {
-    replace?: boolean | undefined;
+    replace?: boolean;
     state?: any;
-} | undefined) => void];
+}) => void];
 /**
  * Submits a HTML `<form>` to the server without reloading the page.
  */

package/{index.js → dist/index.js}

@@ -1,5 +1,5 @@
 /**
- * React Router DOM v6.4.0-pre.0
+ * React Router DOM v6.4.0-pre.4
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -8,13 +8,13 @@
  *
  * @license MIT
  */
-import { useRef, useState, useLayoutEffect, createElement, forwardRef, useCallback, useContext, useMemo, useEffect } from 'react';
+import * as React from 'react';
 import { useRenderDataRouter, Router, useHref, createPath, useResolvedPath, useMatch, UNSAFE_DataRouterStateContext, useNavigate, useLocation, UNSAFE_DataRouterContext, UNSAFE_RouteContext } from 'react-router';
 export { DataMemoryRouter, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, Routes, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createPath, createRoutesFromChildren, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, renderMatches, resolvePath, useActionData, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useRenderDataRouter, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes } from 'react-router';
 import { createBrowserRouter, createHashRouter, createBrowserHistory, createHashHistory, matchPath, invariant } from '@remix-run/router';
 
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -27,7 +27,6 @@ function _extends() {
 
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 
@@ -71,7 +70,6 @@ function shouldProcessLinkClick(event, target) {
   !isModifiedEvent(event) // Ignore clicks with modifier keys
   ;
 }
-
 /**
  * Creates a URLSearchParams object using the given initializer.
  *
@@ -93,6 +91,7 @@ function shouldProcessLinkClick(event, target) {
  *     sort: ['name', 'price']
  *   });
  */
+
 function createSearchParams(init) {
   if (init === void 0) {
     init = "";
@@ -177,17 +176,6 @@ function getFormSubmissionInfo(target, defaultAction, options) {
     host
   } = window.location;
   let url = new URL(action, protocol + "//" + host);
-
-  if (method.toLowerCase() === "get") {
-    for (let [name, value] of formData) {
-      if (typeof value === "string") {
-        url.searchParams.append(name, value);
-      } else {
-        throw new Error("Cannot submit binary form data using GET");
-      }
-    }
-  }
-
   return {
     url,
     method,
@@ -199,10 +187,6 @@ function getFormSubmissionInfo(target, defaultAction, options) {
 const _excluded = ["onClick", "reloadDocument", "replace", "state", "target", "to", "resetScroll"],
       _excluded2 = ["aria-current", "caseSensitive", "className", "end", "style", "to", "children"],
       _excluded3 = ["replace", "method", "action", "onSubmit", "fetcherKey"];
-////////////////////////////////////////////////////////////////////////////////
-//#region Components
-////////////////////////////////////////////////////////////////////////////////
-
 function DataBrowserRouter(_ref) {
   let {
     children,
@@ -241,17 +225,17 @@ function DataHashRouter(_ref2) {
     })
   });
 }
-
 /**
  * A `<Router>` for use in web browsers. Provides the cleanest URLs.
  */
+
 function BrowserRouter(_ref3) {
   let {
     basename,
     children,
     window
   } = _ref3;
-  let historyRef = useRef();
+  let historyRef = React.useRef();
 
   if (historyRef.current == null) {
     historyRef.current = createBrowserHistory({
@@ -261,12 +245,12 @@ function BrowserRouter(_ref3) {
   }
 
   let history = historyRef.current;
-  let [state, setState] = useState({
+  let [state, setState] = React.useState({
     action: history.action,
     location: history.location
   });
-  useLayoutEffect(() => history.listen(setState), [history]);
-  return /*#__PURE__*/createElement(Router, {
+  React.useLayoutEffect(() => history.listen(setState), [history]);
+  return /*#__PURE__*/React.createElement(Router, {
     basename: basename,
     children: children,
     location: state.location,
@@ -274,18 +258,18 @@ function BrowserRouter(_ref3) {
     navigator: history
   });
 }
-
 /**
  * A `<Router>` for use in web browsers. Stores the location in the hash
  * portion of the URL so it is not sent to the server.
  */
+
 function HashRouter(_ref4) {
   let {
     basename,
     children,
     window
   } = _ref4;
-  let historyRef = useRef();
+  let historyRef = React.useRef();
 
   if (historyRef.current == null) {
     historyRef.current = createHashHistory({
@@ -295,12 +279,12 @@ function HashRouter(_ref4) {
   }
 
   let history = historyRef.current;
-  let [state, setState] = useState({
+  let [state, setState] = React.useState({
     action: history.action,
     location: history.location
   });
-  useLayoutEffect(() => history.listen(setState), [history]);
-  return /*#__PURE__*/createElement(Router, {
+  React.useLayoutEffect(() => history.listen(setState), [history]);
+  return /*#__PURE__*/React.createElement(Router, {
     basename: basename,
     children: children,
     location: state.location,
@@ -308,25 +292,25 @@ function HashRouter(_ref4) {
     navigator: history
   });
 }
-
 /**
  * A `<Router>` that accepts a pre-instantiated history object. It's important
  * to note that using your own history object is highly discouraged and may add
  * two versions of the history library to your bundles unless you use the same
  * version of the history library that React Router uses internally.
  */
+
 function HistoryRouter(_ref5) {
   let {
     basename,
     children,
     history
   } = _ref5;
-  const [state, setState] = useState({
+  const [state, setState] = React.useState({
     action: history.action,
     location: history.location
   });
-  useLayoutEffect(() => history.listen(setState), [history]);
-  return /*#__PURE__*/createElement(Router, {
+  React.useLayoutEffect(() => history.listen(setState), [history]);
+  return /*#__PURE__*/React.createElement(Router, {
     basename: basename,
     children: children,
     location: state.location,
@@ -338,15 +322,15 @@ function HistoryRouter(_ref5) {
 if (process.env.NODE_ENV !== "production") {
   HistoryRouter.displayName = "unstable_HistoryRouter";
 }
-
 /**
  * The public API for rendering a history-aware <a>.
  */
-const Link = /*#__PURE__*/forwardRef(function LinkWithRef(_ref6, ref) {
+
+const Link = /*#__PURE__*/React.forwardRef(function LinkWithRef(_ref6, ref) {
   let {
     onClick,
     reloadDocument,
-    replace = false,
+    replace,
     state,
     target,
     to,
@@ -373,7 +357,7 @@ const Link = /*#__PURE__*/forwardRef(function LinkWithRef(_ref6, ref) {
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/anchor-has-content
-    createElement("a", _extends({}, rest, {
+    React.createElement("a", _extends({}, rest, {
       href: href,
       onClick: handleClick,
       ref: ref,
@@ -385,11 +369,12 @@ const Link = /*#__PURE__*/forwardRef(function LinkWithRef(_ref6, ref) {
 if (process.env.NODE_ENV !== "production") {
   Link.displayName = "Link";
 }
-
 /**
  * A <Link> wrapper that knows if it's "active" or not.
  */
-const NavLink = /*#__PURE__*/forwardRef(function NavLinkWithRef(_ref7, ref) {
+
+
+const NavLink = /*#__PURE__*/React.forwardRef(function NavLinkWithRef(_ref7, ref) {
   let {
     "aria-current": ariaCurrentProp = "page",
     caseSensitive = false,
@@ -407,10 +392,10 @@ const NavLink = /*#__PURE__*/forwardRef(function NavLinkWithRef(_ref7, ref) {
     end,
     caseSensitive
   });
-  let routerState = useContext(UNSAFE_DataRouterStateContext);
+  let routerState = React.useContext(UNSAFE_DataRouterStateContext);
   let nextLocation = routerState == null ? void 0 : routerState.navigation.location;
   let nextPath = useResolvedPath(nextLocation || "");
-  let nextMatch = useMemo(() => nextLocation ? matchPath({
+  let nextMatch = React.useMemo(() => nextLocation ? matchPath({
     path: path.pathname,
     end,
     caseSensitive
@@ -438,7 +423,7 @@ const NavLink = /*#__PURE__*/forwardRef(function NavLinkWithRef(_ref7, ref) {
     isActive,
     isPending
   }) : styleProp;
-  return /*#__PURE__*/createElement(Link, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Link, _extends({}, rest, {
     "aria-current": ariaCurrent,
     className: className,
     ref: ref,
@@ -453,15 +438,16 @@ const NavLink = /*#__PURE__*/forwardRef(function NavLinkWithRef(_ref7, ref) {
 if (process.env.NODE_ENV !== "production") {
   NavLink.displayName = "NavLink";
 }
-
 /**
  * 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.
  */
-const Form = /*#__PURE__*/forwardRef((props, ref) => {
-  return /*#__PURE__*/createElement(FormImpl, _extends({}, props, {
+
+
+const Form = /*#__PURE__*/React.forwardRef((props, ref) => {
+  return /*#__PURE__*/React.createElement(FormImpl, _extends({}, props, {
     ref: ref
   }));
 });
@@ -470,7 +456,7 @@ if (process.env.NODE_ENV !== "production") {
   Form.displayName = "Form";
 }
 
-const FormImpl = /*#__PURE__*/forwardRef((_ref8, forwardedRef) => {
+const FormImpl = /*#__PURE__*/React.forwardRef((_ref8, forwardedRef) => {
   let {
     replace,
     method = defaultMethod,
@@ -495,7 +481,7 @@ const FormImpl = /*#__PURE__*/forwardRef((_ref8, forwardedRef) => {
     });
   };
 
-  return /*#__PURE__*/createElement("form", _extends({
+  return /*#__PURE__*/React.createElement("form", _extends({
     ref: forwardedRef,
     method: formMethod,
     action: formAction,
@@ -506,11 +492,12 @@ const FormImpl = /*#__PURE__*/forwardRef((_ref8, forwardedRef) => {
 if (process.env.NODE_ENV !== "production") {
   Form.displayName = "Form";
 }
-
 /**
  * This component will emulate the browser's scroll restoration on location
  * changes.
  */
+
+
 function ScrollRestoration(_ref9) {
   let {
     getKey,
@@ -547,23 +534,16 @@ function useLinkClickHandler(to, _temp) {
   let navigate = useNavigate();
   let location = useLocation();
   let path = useResolvedPath(to);
-  return useCallback(event => {
+  return React.useCallback(event => {
     if (shouldProcessLinkClick(event, target)) {
       event.preventDefault(); // If the URL hasn't changed, a regular <a> will do a replace instead of
-      // a push, so do the same here.
-
-      let replace = !!replaceProp || createPath(location) === createPath(path);
-      let newState = state;
-
-      if (resetScroll === false) {
-        newState = _extends({}, state, {
-          __resetScrollPosition: false
-        });
-      }
+      // a push, so do the same here unless the replace prop is explcitly set
 
+      let replace = replaceProp !== undefined ? replaceProp : createPath(location) === createPath(path);
       navigate(to, {
         replace,
-        state: newState
+        state,
+        resetScroll
       });
     }
   }, [location, navigate, path, replaceProp, state, target, to, resetScroll]);
@@ -575,31 +555,28 @@ function useLinkClickHandler(to, _temp) {
 
 function useSearchParams(defaultInit) {
   process.env.NODE_ENV !== "production" ? warning(typeof URLSearchParams !== "undefined", "You cannot use the `useSearchParams` hook in a browser that does not " + "support the URLSearchParams API. If you need to support Internet " + "Explorer 11, we recommend you load a polyfill such as " + "https://github.com/ungap/url-search-params\n\n" + "If you're unsure how to load polyfills, we recommend you check out " + "https://polyfill.io/v3/ which provides some recommendations about how " + "to load polyfills only for users that need them, instead of for every " + "user.") : void 0;
-  let defaultSearchParamsRef = useRef(createSearchParams(defaultInit));
+  let defaultSearchParamsRef = React.useRef(createSearchParams(defaultInit));
   let location = useLocation();
-  let searchParams = useMemo(() => getSearchParamsForLocation(location.search, defaultSearchParamsRef.current), [location.search]);
+  let searchParams = React.useMemo(() => getSearchParamsForLocation(location.search, defaultSearchParamsRef.current), [location.search]);
   let navigate = useNavigate();
-  let setSearchParams = useCallback((nextInit, navigateOptions) => {
+  let setSearchParams = React.useCallback((nextInit, navigateOptions) => {
     navigate("?" + createSearchParams(nextInit), navigateOptions);
   }, [navigate]);
   return [searchParams, setSearchParams];
 }
-/**
- * Submits a HTML `<form>` to the server without reloading the page.
- */
-
 /**
  * Returns a function that may be used to programmatically submit a form (or
  * some arbitrary data) to the server.
  */
+
 function useSubmit() {
   return useSubmitImpl();
 }
 
 function useSubmitImpl(fetcherKey) {
-  let router = useContext(UNSAFE_DataRouterContext);
+  let router = React.useContext(UNSAFE_DataRouterContext);
   let defaultAction = useFormAction();
-  return useCallback(function (target, options) {
+  return React.useCallback(function (target, options) {
     if (options === void 0) {
       options = {};
     }
@@ -639,8 +616,8 @@ function useFormAction(action) {
     action = ".";
   }
 
-  let routeContext = useContext(UNSAFE_RouteContext);
-  !routeContext ? process.env.NODE_ENV !== "production" ? invariant(false, "useLoaderData must be used inside a RouteContext") : invariant(false) : void 0;
+  let routeContext = React.useContext(UNSAFE_RouteContext);
+  !routeContext ? process.env.NODE_ENV !== "production" ? invariant(false, "useFormAction must be used inside a RouteContext") : invariant(false) : void 0;
   let [match] = routeContext.matches.slice(-1);
   let {
     pathname,
@@ -655,8 +632,8 @@ function useFormAction(action) {
 }
 
 function createFetcherForm(fetcherKey) {
-  let FetcherForm = /*#__PURE__*/forwardRef((props, ref) => {
-    return /*#__PURE__*/createElement(FormImpl, _extends({}, props, {
+  let FetcherForm = /*#__PURE__*/React.forwardRef((props, ref) => {
+    return /*#__PURE__*/React.createElement(FormImpl, _extends({}, props, {
       ref: ref,
       fetcherKey: fetcherKey
     }));
@@ -670,28 +647,28 @@ function createFetcherForm(fetcherKey) {
 }
 
 let fetcherId = 0;
-
 /**
  * Interacts with route loaders and actions without causing a navigation. Great
  * for any interaction that stays on the same page.
  */
+
 function useFetcher() {
-  let router = useContext(UNSAFE_DataRouterContext);
+  let router = React.useContext(UNSAFE_DataRouterContext);
   !router ? process.env.NODE_ENV !== "production" ? invariant(false, "useFetcher must be used within a DataRouter") : invariant(false) : void 0;
-  let [fetcherKey] = useState(() => String(++fetcherId));
-  let [Form] = useState(() => createFetcherForm(fetcherKey));
-  let [load] = useState(() => href => {
+  let [fetcherKey] = React.useState(() => String(++fetcherId));
+  let [Form] = React.useState(() => createFetcherForm(fetcherKey));
+  let [load] = React.useState(() => href => {
     !router ? process.env.NODE_ENV !== "production" ? invariant(false, "No router available for fetcher.load()") : invariant(false) : void 0;
     router.fetch(fetcherKey, href);
   });
   let submit = useSubmitImpl(fetcherKey);
   let fetcher = router.getFetcher(fetcherKey);
-  let fetcherWithComponents = useMemo(() => _extends({
+  let fetcherWithComponents = React.useMemo(() => _extends({
     Form,
     submit,
     load
   }, fetcher), [fetcher, Form, submit, load]);
-  useEffect(() => {
+  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.
@@ -712,7 +689,7 @@ function useFetcher() {
  */
 
 function useFetchers() {
-  let state = useContext(UNSAFE_DataRouterStateContext);
+  let state = React.useContext(UNSAFE_DataRouterStateContext);
   !state ? process.env.NODE_ENV !== "production" ? invariant(false, "useFetchers must be used within a DataRouter") : invariant(false) : void 0;
   return [...state.fetchers.values()];
 }
@@ -728,22 +705,22 @@ function useScrollRestoration(_temp2) {
     storageKey
   } = _temp2 === void 0 ? {} : _temp2;
   let location = useLocation();
-  let router = useContext(UNSAFE_DataRouterContext);
-  let state = useContext(UNSAFE_DataRouterStateContext);
+  let router = React.useContext(UNSAFE_DataRouterContext);
+  let state = React.useContext(UNSAFE_DataRouterStateContext);
   !(router != null && state != null) ? process.env.NODE_ENV !== "production" ? invariant(false, "useScrollRestoration must be used within a DataRouter") : invariant(false) : void 0;
   let {
     restoreScrollPosition,
     resetScrollPosition
   } = state; // Trigger manual scroll restoration while we're active
 
-  useEffect(() => {
+  React.useEffect(() => {
     window.history.scrollRestoration = "manual";
     return () => {
       window.history.scrollRestoration = "auto";
     };
   }, []); // Save positions on unload
 
-  useBeforeUnload(useCallback(() => {
+  useBeforeUnload(React.useCallback(() => {
     if ((state == null ? void 0 : state.navigation.state) === "idle") {
       let key = (getKey ? getKey(state.location, state.matches) : null) || state.location.key;
       savedScrollPositions[key] = window.scrollY;
@@ -753,7 +730,7 @@ function useScrollRestoration(_temp2) {
     window.history.scrollRestoration = "auto";
   }, [storageKey, getKey, state.navigation.state, state.location, state.matches])); // Read in any saved scroll locations
 
-  useLayoutEffect(() => {
+  React.useLayoutEffect(() => {
     try {
       let sessionPositions = sessionStorage.getItem(storageKey || SCROLL_RESTORATION_STORAGE_KEY);
 
@@ -764,12 +741,12 @@ function useScrollRestoration(_temp2) {
     }
   }, [storageKey]); // Enable scroll restoration in the router
 
-  useLayoutEffect(() => {
+  React.useLayoutEffect(() => {
     let disableScrollRestoration = router == null ? void 0 : router.enableScrollRestoration(savedScrollPositions, () => window.scrollY, getKey);
     return () => disableScrollRestoration && disableScrollRestoration();
   }, [router, getKey]); // Restore scrolling when state.restoreScrollPosition changes
 
-  useLayoutEffect(() => {
+  React.useLayoutEffect(() => {
     // Explicit false means don't do anything (used for submissions)
     if (restoreScrollPosition === false) {
       return;
@@ -802,7 +779,7 @@ function useScrollRestoration(_temp2) {
 }
 
 function useBeforeUnload(callback) {
-  useEffect(() => {
+  React.useEffect(() => {
     window.addEventListener("beforeunload", callback);
     return () => {
       window.removeEventListener("beforeunload", callback);