react-router-dom-v5-compat 6.2.2 → 6.4.0-pre.2

package/umd/react-router-dom-v5-compat.development.js

@@ -1,5 +1,5 @@
 /**
- * React Router DOM v5 Compat v6.2.2
+ * React Router DOM v5 Compat v6.4.0-pre.2
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -9,10 +9,10 @@
  * @license MIT
  */
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('history'), require('react-router'), require('react-router-dom')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'history', 'react-router', 'react-router-dom'], factory) :
-  (global = global || self, factory(global.ReactRouterDOMv5Compat = {}, global.React, global.HistoryLibrary, global.ReactRouter, global.ReactRouterDOM));
-}(this, (function (exports, React, history, reactRouter, reactRouterDom) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-router'), require('@remix-run/router'), require('history'), require('react-router-dom')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-router', '@remix-run/router', 'history', 'react-router-dom'], factory) :
+  (global = global || self, factory(global.ReactRouterDOMv5Compat = {}, global.React, global.ReactRouter, global.Router, global.HistoryLibrary, global.ReactRouterDOM));
+}(this, (function (exports, React, reactRouter, router, history, reactRouterDom) { 'use strict';
 
   function _extends() {
     _extends = Object.assign || function (target) {
@@ -47,56 +47,190 @@
     return target;
   }
 
-  const _excluded = ["onClick", "reloadDocument", "replace", "state", "target", "to"],
-        _excluded2 = ["aria-current", "caseSensitive", "className", "end", "style", "to", "children"];
+  const defaultMethod = "get";
+  const defaultEncType = "application/x-www-form-urlencoded";
+  function isHtmlElement(object) {
+    return object != null && typeof object.tagName === "string";
+  }
+  function isButtonElement(object) {
+    return isHtmlElement(object) && object.tagName.toLowerCase() === "button";
+  }
+  function isFormElement(object) {
+    return isHtmlElement(object) && object.tagName.toLowerCase() === "form";
+  }
+  function isInputElement(object) {
+    return isHtmlElement(object) && object.tagName.toLowerCase() === "input";
+  }
 
-  function warning(cond, message) {
-    if (!cond) {
-      // eslint-disable-next-line no-console
-      if (typeof console !== "undefined") console.warn(message);
+  function isModifiedEvent(event) {
+    return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
+  }
 
-      try {
-        // Welcome to debugging React Router!
-        //
-        // This error is thrown as a convenience so you can more easily
-        // find the source for a warning that appears in the console by
-        // enabling "pause on exceptions" in your JavaScript debugger.
-        throw new Error(message); // eslint-disable-next-line no-empty
-      } catch (e) {}
+  function shouldProcessLinkClick(event, target) {
+    return event.button === 0 && ( // Ignore everything but left clicks
+    !target || target === "_self") && // Let browser handle "target=_blank" etc.
+    !isModifiedEvent(event) // Ignore clicks with modifier keys
+    ;
+  }
+
+  /**
+   * 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']
+   *   });
+   */
+  function createSearchParams(init) {
+    if (init === void 0) {
+      init = "";
     }
-  } ////////////////////////////////////////////////////////////////////////////////
-  // COMPONENTS
-  ////////////////////////////////////////////////////////////////////////////////
+
+    return new URLSearchParams(typeof init === "string" || Array.isArray(init) || init instanceof URLSearchParams ? init : Object.keys(init).reduce((memo, key) => {
+      let value = init[key];
+      return memo.concat(Array.isArray(value) ? value.map(v => [key, v]) : [[key, value]]);
+    }, []));
+  }
+  function getSearchParamsForLocation(locationSearch, defaultSearchParams) {
+    let searchParams = createSearchParams(locationSearch);
+
+    for (let key of defaultSearchParams.keys()) {
+      if (!searchParams.has(key)) {
+        defaultSearchParams.getAll(key).forEach(value => {
+          searchParams.append(key, value);
+        });
+      }
+    }
+
+    return searchParams;
+  }
+  function getFormSubmissionInfo(target, defaultAction, options) {
+    let method;
+    let action;
+    let encType;
+    let formData;
+
+    if (isFormElement(target)) {
+      let submissionTrigger = options.submissionTrigger;
+      method = options.method || target.getAttribute("method") || defaultMethod;
+      action = options.action || target.getAttribute("action") || defaultAction;
+      encType = options.encType || target.getAttribute("enctype") || defaultEncType;
+      formData = new FormData(target);
+
+      if (submissionTrigger && submissionTrigger.name) {
+        formData.append(submissionTrigger.name, submissionTrigger.value);
+      }
+    } else if (isButtonElement(target) || isInputElement(target) && (target.type === "submit" || target.type === "image")) {
+      let form = target.form;
+
+      if (form == null) {
+        throw new Error("Cannot submit a <button> or <input type=\"submit\"> without a <form>");
+      } // <button>/<input type="submit"> may override attributes of <form>
+
+
+      method = options.method || target.getAttribute("formmethod") || form.getAttribute("method") || defaultMethod;
+      action = options.action || target.getAttribute("formaction") || form.getAttribute("action") || defaultAction;
+      encType = options.encType || target.getAttribute("formenctype") || form.getAttribute("enctype") || defaultEncType;
+      formData = new FormData(form); // Include name + value from a <button>
+
+      if (target.name) {
+        formData.set(target.name, target.value);
+      }
+    } else if (isHtmlElement(target)) {
+      throw new Error("Cannot submit element that is not <form>, <button>, or " + "<input type=\"submit|image\">");
+    } else {
+      method = options.method || defaultMethod;
+      action = options.action || defaultAction;
+      encType = options.encType || defaultEncType;
+
+      if (target instanceof FormData) {
+        formData = target;
+      } else {
+        formData = new FormData();
+
+        if (target instanceof URLSearchParams) {
+          for (let [name, value] of target) {
+            formData.append(name, value);
+          }
+        } else if (target != null) {
+          for (let name of Object.keys(target)) {
+            formData.append(name, target[name]);
+          }
+        }
+      }
+    }
+
+    let {
+      protocol,
+      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,
+      encType,
+      formData
+    };
+  }
+
+  const _excluded = ["onClick", "reloadDocument", "replace", "state", "target", "to", "resetScroll"],
+        _excluded2 = ["aria-current", "caseSensitive", "className", "end", "style", "to", "children"],
+        _excluded3 = ["replace", "method", "action", "onSubmit", "fetcherKey"];
 
   /**
    * A `<Router>` for use in web browsers. Provides the cleanest URLs.
    */
-  function BrowserRouter(_ref) {
+  function BrowserRouter(_ref3) {
     let {
       basename,
       children,
       window
-    } = _ref;
+    } = _ref3;
     let historyRef = React.useRef();
 
     if (historyRef.current == null) {
-      historyRef.current = history.createBrowserHistory({
-        window
+      historyRef.current = router.createBrowserHistory({
+        window,
+        v5Compat: true
       });
     }
 
-    let history$1 = historyRef.current;
+    let history = historyRef.current;
     let [state, setState] = React.useState({
-      action: history$1.action,
-      location: history$1.location
+      action: history.action,
+      location: history.location
     });
-    React.useLayoutEffect(() => history$1.listen(setState), [history$1]);
+    React.useLayoutEffect(() => history.listen(setState), [history]);
     return /*#__PURE__*/React.createElement(reactRouter.Router, {
       basename: basename,
       children: children,
       location: state.location,
       navigationType: state.action,
-      navigator: history$1
+      navigator: history
     });
   }
 
@@ -104,32 +238,33 @@
    * 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(_ref2) {
+  function HashRouter(_ref4) {
     let {
       basename,
       children,
       window
-    } = _ref2;
+    } = _ref4;
     let historyRef = React.useRef();
 
     if (historyRef.current == null) {
-      historyRef.current = history.createHashHistory({
-        window
+      historyRef.current = router.createHashHistory({
+        window,
+        v5Compat: true
       });
     }
 
-    let history$1 = historyRef.current;
+    let history = historyRef.current;
     let [state, setState] = React.useState({
-      action: history$1.action,
-      location: history$1.location
+      action: history.action,
+      location: history.location
     });
-    React.useLayoutEffect(() => history$1.listen(setState), [history$1]);
+    React.useLayoutEffect(() => history.listen(setState), [history]);
     return /*#__PURE__*/React.createElement(reactRouter.Router, {
       basename: basename,
       children: children,
       location: state.location,
       navigationType: state.action,
-      navigator: history$1
+      navigator: history
     });
   }
 
@@ -139,12 +274,12 @@
    * 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(_ref3) {
+  function HistoryRouter(_ref5) {
     let {
       basename,
       children,
       history
-    } = _ref3;
+    } = _ref5;
     const [state, setState] = React.useState({
       action: history.action,
       location: history.location
@@ -163,29 +298,27 @@
     HistoryRouter.displayName = "unstable_HistoryRouter";
   }
 
-  function isModifiedEvent(event) {
-    return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
-  }
-
   /**
    * The public API for rendering a history-aware <a>.
    */
-  const Link = /*#__PURE__*/React.forwardRef(function LinkWithRef(_ref4, ref) {
+  const Link = /*#__PURE__*/React.forwardRef(function LinkWithRef(_ref6, ref) {
     let {
       onClick,
       reloadDocument,
       replace = false,
       state,
       target,
-      to
-    } = _ref4,
-        rest = _objectWithoutPropertiesLoose(_ref4, _excluded);
+      to,
+      resetScroll
+    } = _ref6,
+        rest = _objectWithoutPropertiesLoose(_ref6, _excluded);
 
     let href = reactRouter.useHref(to);
     let internalOnClick = useLinkClickHandler(to, {
       replace,
       state,
-      target
+      target,
+      resetScroll
     });
 
     function handleClick(event) {
@@ -215,7 +348,7 @@
   /**
    * A <Link> wrapper that knows if it's "active" or not.
    */
-  const NavLink = /*#__PURE__*/React.forwardRef(function NavLinkWithRef(_ref5, ref) {
+  const NavLink = /*#__PURE__*/React.forwardRef(function NavLinkWithRef(_ref7, ref) {
     let {
       "aria-current": ariaCurrentProp = "page",
       caseSensitive = false,
@@ -224,26 +357,32 @@
       style: styleProp,
       to,
       children
-    } = _ref5,
-        rest = _objectWithoutPropertiesLoose(_ref5, _excluded2);
+    } = _ref7,
+        rest = _objectWithoutPropertiesLoose(_ref7, _excluded2);
 
-    let location = reactRouter.useLocation();
     let path = reactRouter.useResolvedPath(to);
-    let locationPathname = location.pathname;
-    let toPathname = path.pathname;
-
-    if (!caseSensitive) {
-      locationPathname = locationPathname.toLowerCase();
-      toPathname = toPathname.toLowerCase();
-    }
-
-    let isActive = locationPathname === toPathname || !end && locationPathname.startsWith(toPathname) && locationPathname.charAt(toPathname.length) === "/";
+    let match = reactRouter.useMatch({
+      path: path.pathname,
+      end,
+      caseSensitive
+    });
+    let routerState = React.useContext(reactRouter.UNSAFE_DataRouterStateContext);
+    let nextLocation = routerState == null ? void 0 : routerState.navigation.location;
+    let nextPath = reactRouter.useResolvedPath(nextLocation || "");
+    let nextMatch = React.useMemo(() => nextLocation ? router.matchPath({
+      path: path.pathname,
+      end,
+      caseSensitive
+    }, nextPath.pathname) : null, [nextLocation, path.pathname, caseSensitive, end, nextPath.pathname]);
+    let isPending = nextMatch != null;
+    let isActive = match != null;
     let ariaCurrent = isActive ? ariaCurrentProp : undefined;
     let className;
 
     if (typeof classNameProp === "function") {
       className = classNameProp({
-        isActive
+        isActive,
+        isPending
       });
     } else {
       // If the className prop is not a function, we use a default `active`
@@ -251,11 +390,12 @@
       // value for `activeClassName`, but we are removing that API and can still
       // use the old default behavior for a cleaner upgrade path and keep the
       // simple styling rules working as they currently do.
-      className = [classNameProp, isActive ? "active" : null].filter(Boolean).join(" ");
+      className = [classNameProp, isActive ? "active" : null, isPending ? "pending" : null].filter(Boolean).join(" ");
     }
 
     let style = typeof styleProp === "function" ? styleProp({
-      isActive
+      isActive,
+      isPending
     }) : styleProp;
     return /*#__PURE__*/React.createElement(Link, _extends({}, rest, {
       "aria-current": ariaCurrent,
@@ -264,14 +404,69 @@
       style: style,
       to: to
     }), typeof children === "function" ? children({
-      isActive
+      isActive,
+      isPending
     }) : children);
   });
 
   {
     NavLink.displayName = "NavLink";
-  } ////////////////////////////////////////////////////////////////////////////////
-  // HOOKS
+  }
+
+  /**
+   * 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__*/React.forwardRef((props, ref) => {
+    return /*#__PURE__*/React.createElement(FormImpl, _extends({}, props, {
+      ref: ref
+    }));
+  });
+
+  {
+    Form.displayName = "Form";
+  }
+
+  const FormImpl = /*#__PURE__*/React.forwardRef((_ref8, forwardedRef) => {
+    let {
+      replace,
+      method = defaultMethod,
+      action = ".",
+      onSubmit,
+      fetcherKey
+    } = _ref8,
+        props = _objectWithoutPropertiesLoose(_ref8, _excluded3);
+
+    let submit = useSubmitImpl(fetcherKey);
+    let formMethod = method.toLowerCase() === "get" ? "get" : "post";
+    let formAction = useFormAction(action);
+
+    let submitHandler = event => {
+      onSubmit && onSubmit(event);
+      if (event.defaultPrevented) return;
+      event.preventDefault();
+      let submitter = event.nativeEvent.submitter;
+      submit(submitter || event.currentTarget, {
+        method,
+        replace
+      });
+    };
+
+    return /*#__PURE__*/React.createElement("form", _extends({
+      ref: forwardedRef,
+      method: formMethod,
+      action: formAction,
+      onSubmit: submitHandler
+    }, props));
+  });
+
+  {
+    Form.displayName = "Form";
+  }
+  ////////////////////////////////////////////////////////////////////////////////
+  //#region Hooks
   ////////////////////////////////////////////////////////////////////////////////
 
   /**
@@ -285,26 +480,32 @@
     let {
       target,
       replace: replaceProp,
-      state
+      state,
+      resetScroll
     } = _temp === void 0 ? {} : _temp;
     let navigate = reactRouter.useNavigate();
     let location = reactRouter.useLocation();
     let path = reactRouter.useResolvedPath(to);
     return React.useCallback(event => {
-      if (event.button === 0 && ( // Ignore everything but left clicks
-      !target || target === "_self") && // Let browser handle "target=_blank" etc.
-      !isModifiedEvent(event) // Ignore clicks with modifier keys
-      ) {
+      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 || reactRouter.createPath(location) === reactRouter.createPath(path);
+        let newState = state;
+
+        if (resetScroll === false) {
+          newState = _extends({}, state, {
+            __resetScrollPosition: false
+          });
+        }
+
         navigate(to, {
           replace,
-          state
+          state: newState
         });
       }
-    }, [location, navigate, path, replaceProp, state, target, to]);
+    }, [location, navigate, path, replaceProp, state, target, to, resetScroll]);
   }
   /**
    * A convenient wrapper for reading and writing search parameters via the
@@ -315,19 +516,7 @@
      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.") ;
     let defaultSearchParamsRef = React.useRef(createSearchParams(defaultInit));
     let location = reactRouter.useLocation();
-    let searchParams = React.useMemo(() => {
-      let searchParams = createSearchParams(location.search);
-
-      for (let key of defaultSearchParamsRef.current.keys()) {
-        if (!searchParams.has(key)) {
-          defaultSearchParamsRef.current.getAll(key).forEach(value => {
-            searchParams.append(key, value);
-          });
-        }
-      }
-
-      return searchParams;
-    }, [location.search]);
+    let searchParams = React.useMemo(() => getSearchParamsForLocation(location.search, defaultSearchParamsRef.current), [location.search]);
     let navigate = reactRouter.useNavigate();
     let setSearchParams = React.useCallback((nextInit, navigateOptions) => {
       navigate("?" + createSearchParams(nextInit), navigateOptions);
@@ -335,38 +524,96 @@
     return [searchParams, setSearchParams];
   }
 
-  /**
-   * 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']
-   *   });
-   */
-  function createSearchParams(init) {
-    if (init === void 0) {
-      init = "";
+  function useSubmitImpl(fetcherKey) {
+    let router$1 = React.useContext(reactRouter.UNSAFE_DataRouterContext);
+    let defaultAction = useFormAction();
+    return React.useCallback(function (target, options) {
+      if (options === void 0) {
+        options = {};
+      }
+
+      !(router$1 != null) ?  router.invariant(false, "useSubmit() must be used within a <DataRouter>")  : void 0;
+
+      if (typeof document === "undefined") {
+        throw new Error("You are calling submit during the server render. " + "Try calling submit within a `useEffect` or callback instead.");
+      }
+
+      let {
+        method,
+        encType,
+        formData,
+        url
+      } = getFormSubmissionInfo(target, defaultAction, options);
+      let href = url.pathname + url.search;
+      let opts = {
+        // If replace is not specified, we'll default to false for GET and
+        // true otherwise
+        replace: options.replace != null ? options.replace === true : method !== "get",
+        formData,
+        formMethod: method,
+        formEncType: encType
+      };
+
+      if (fetcherKey) {
+        router$1.fetch(fetcherKey, href, opts);
+      } else {
+        router$1.navigate(href, opts);
+      }
+    }, [defaultAction, router$1, fetcherKey]);
+  }
+
+  function useFormAction(action) {
+    if (action === void 0) {
+      action = ".";
     }
 
-    return new URLSearchParams(typeof init === "string" || Array.isArray(init) || init instanceof URLSearchParams ? init : Object.keys(init).reduce((memo, key) => {
-      let value = init[key];
-      return memo.concat(Array.isArray(value) ? value.map(v => [key, v]) : [[key, value]]);
-    }, []));
+    let routeContext = React.useContext(reactRouter.UNSAFE_RouteContext);
+    !routeContext ?  router.invariant(false, "useLoaderData must be used inside a RouteContext")  : void 0;
+    let [match] = routeContext.matches.slice(-1);
+    let {
+      pathname,
+      search
+    } = reactRouter.useResolvedPath(action);
+
+    if (action === "." && match.route.index) {
+      search = search ? search.replace(/^\?/, "?index&") : "?index";
+    }
+
+    return pathname + search;
   }
+  ////////////////////////////////////////////////////////////////////////////////
+  //#region Utils
+  ////////////////////////////////////////////////////////////////////////////////
+
+
+  function warning(cond, message) {
+    if (!cond) {
+      // eslint-disable-next-line no-console
+      if (typeof console !== "undefined") console.warn(message);
+
+      try {
+        // Welcome to debugging React Router!
+        //
+        // This error is thrown as a convenience so you can more easily
+        // find the source for a warning that appears in the console by
+        // enabling "pause on exceptions" in your JavaScript debugger.
+        throw new Error(message); // eslint-disable-next-line no-empty
+      } catch (e) {}
+    }
+  } //#endregion
+
+  // but not worried about that for now.
 
+  function CompatRoute(props) {
+    let {
+      path
+    } = props;
+    if (!props.exact) path += "/*";
+    return /*#__PURE__*/React.createElement(reactRouter.Routes, null, /*#__PURE__*/React.createElement(reactRouter.Route, {
+      path: path,
+      element: /*#__PURE__*/React.createElement(reactRouterDom.Route, props)
+    }));
+  }
   function CompatRouter(_ref) {
     let {
       children
@@ -376,7 +623,7 @@
       location: history.location,
       action: history.action
     }));
-    React.useEffect(() => {
+    React.useLayoutEffect(() => {
       history.listen((location, action) => setState({
         location,
         action
@@ -393,7 +640,7 @@
   }
 
   /**
-   * A <Router> that may not transition to any other location. This is useful
+   * A <Router> that may not navigate to any other location. This is useful
    * on the server where there is no stateful UI.
    */
   function StaticRouter(_ref2) {
@@ -626,6 +873,7 @@
     }
   });
   exports.BrowserRouter = BrowserRouter;
+  exports.CompatRoute = CompatRoute;
   exports.CompatRouter = CompatRouter;
   exports.HashRouter = HashRouter;
   exports.Link = Link;