react-router-dom-v5-compat 6.4.0-pre.8 → 6.4.0

package/CHANGELOG.md

@@ -1,46 +1,8 @@
 # react-router-dom-v5-compat
 
-## 6.4.0-pre.8
+## 6.4.0
 
-### Patch Changes
+**Updated dependencies**
 
-- Updated dependencies
-  - react-router@6.4.0-pre.8
-  - react-router-dom@6.4.0-pre.8
-
-## 6.4.0-pre.7
-
-### Patch Changes
-
-- Updated dependencies
-  - `react-router@6.4.0-pre.7`
-  - `react-router-dom@6.4.0-pre.7`
-
-## 6.4.0-pre.6
-
-### Patch Changes
-
-- Fix `react-router-dom` peer dependency version
-- Updated dependencies
-  - `react-router@6.4.0-pre.6`
-  - `react-router-dom@6.4.0-pre.6`
-
-## 6.4.0-pre.5
-
-### Patch Changes
-
-- Updated dependencies
-  - `react-router@6.4.0-pre.5`
-  - `react-router-dom@6.4.0-pre.5`
-
-## 6.4.0-pre.4
-
-### Patch Changes
-
-- Fix missing `dist` files
-
-## 6.4.0-pre.3
-
-### Patch Changes
-
-- Updated dependencies
+- react-router-dom@6.4.0
+- react-router@6.4.0

package/dist/index.js

@@ -1,5 +1,5 @@
 /**
- * React Router DOM v5 Compat v6.4.0-pre.8
+ * React Router DOM v5 Compat v6.4.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -144,10 +144,11 @@ function getFormSubmissionInfo(target, defaultAction, options) {
     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>
+    formData = new FormData(form); // Include name + value from a <button>, appending in case the button name
+    // matches an existing input name
 
     if (target.name) {
-      formData.set(target.name, target.value);
+      formData.append(target.name, target.value);
     }
   } else if (isHtmlElement(target)) {
     throw new Error("Cannot submit element that is not <form>, <button>, or " + "<input type=\"submit|image\">");
@@ -186,19 +187,19 @@ function getFormSubmissionInfo(target, defaultAction, options) {
   };
 }
 
-const _excluded = ["onClick", "reloadDocument", "replace", "state", "target", "to", "resetScroll"],
+const _excluded = ["onClick", "relative", "reloadDocument", "replace", "state", "target", "to", "preventScrollReset"],
       _excluded2 = ["aria-current", "caseSensitive", "className", "end", "style", "to", "children"],
-      _excluded3 = ["replace", "method", "action", "onSubmit", "fetcherKey", "routeId"];
+      _excluded3 = ["reloadDocument", "replace", "method", "action", "onSubmit", "fetcherKey", "routeId", "relative"];
 /**
  * A `<Router>` for use in web browsers. Provides the cleanest URLs.
  */
 
-function BrowserRouter(_ref3) {
+function BrowserRouter(_ref) {
   let {
     basename,
     children,
     window
-  } = _ref3;
+  } = _ref;
   let historyRef = React.useRef();
 
   if (historyRef.current == null) {
@@ -227,12 +228,12 @@ function BrowserRouter(_ref3) {
  * portion of the URL so it is not sent to the server.
  */
 
-function HashRouter(_ref4) {
+function HashRouter(_ref2) {
   let {
     basename,
     children,
     window
-  } = _ref4;
+  } = _ref2;
   let historyRef = React.useRef();
 
   if (historyRef.current == null) {
@@ -263,12 +264,12 @@ function HashRouter(_ref4) {
  * version of the history library that React Router uses internally.
  */
 
-function HistoryRouter(_ref5) {
+function HistoryRouter(_ref3) {
   let {
     basename,
     children,
     history
-  } = _ref5;
+  } = _ref3;
   const [state, setState] = React.useState({
     action: history.action,
     location: history.location
@@ -290,30 +291,34 @@ if (process.env.NODE_ENV !== "production") {
  * The public API for rendering a history-aware <a>.
  */
 
-const Link = /*#__PURE__*/React.forwardRef(function LinkWithRef(_ref6, ref) {
+const Link = /*#__PURE__*/React.forwardRef(function LinkWithRef(_ref4, ref) {
   let {
     onClick,
+    relative,
     reloadDocument,
     replace,
     state,
     target,
     to,
-    resetScroll
-  } = _ref6,
-      rest = _objectWithoutPropertiesLoose(_ref6, _excluded);
+    preventScrollReset
+  } = _ref4,
+      rest = _objectWithoutPropertiesLoose(_ref4, _excluded);
 
-  let href = useHref(to);
+  let href = useHref(to, {
+    relative
+  });
   let internalOnClick = useLinkClickHandler(to, {
     replace,
     state,
     target,
-    resetScroll
+    preventScrollReset,
+    relative
   });
 
   function handleClick(event) {
     if (onClick) onClick(event);
 
-    if (!event.defaultPrevented && !reloadDocument) {
+    if (!event.defaultPrevented) {
       internalOnClick(event);
     }
   }
@@ -323,7 +328,7 @@ const Link = /*#__PURE__*/React.forwardRef(function LinkWithRef(_ref6, ref) {
     // eslint-disable-next-line jsx-a11y/anchor-has-content
     React.createElement("a", _extends({}, rest, {
       href: href,
-      onClick: handleClick,
+      onClick: reloadDocument ? onClick : handleClick,
       ref: ref,
       target: target
     }))
@@ -338,7 +343,7 @@ if (process.env.NODE_ENV !== "production") {
  */
 
 
-const NavLink = /*#__PURE__*/React.forwardRef(function NavLinkWithRef(_ref7, ref) {
+const NavLink = /*#__PURE__*/React.forwardRef(function NavLinkWithRef(_ref5, ref) {
   let {
     "aria-current": ariaCurrentProp = "page",
     caseSensitive = false,
@@ -347,8 +352,8 @@ const NavLink = /*#__PURE__*/React.forwardRef(function NavLinkWithRef(_ref7, ref
     style: styleProp,
     to,
     children
-  } = _ref7,
-      rest = _objectWithoutPropertiesLoose(_ref7, _excluded2);
+  } = _ref5,
+      rest = _objectWithoutPropertiesLoose(_ref5, _excluded2);
 
   let path = useResolvedPath(to);
   let match = useMatch({
@@ -420,20 +425,24 @@ if (process.env.NODE_ENV !== "production") {
   Form.displayName = "Form";
 }
 
-const FormImpl = /*#__PURE__*/React.forwardRef((_ref8, forwardedRef) => {
+const FormImpl = /*#__PURE__*/React.forwardRef((_ref6, forwardedRef) => {
   let {
+    reloadDocument,
     replace,
     method = defaultMethod,
-    action = ".",
+    action,
     onSubmit,
     fetcherKey,
-    routeId
-  } = _ref8,
-      props = _objectWithoutPropertiesLoose(_ref8, _excluded3);
+    routeId,
+    relative
+  } = _ref6,
+      props = _objectWithoutPropertiesLoose(_ref6, _excluded3);
 
   let submit = useSubmitImpl(fetcherKey, routeId);
   let formMethod = method.toLowerCase() === "get" ? "get" : "post";
-  let formAction = useFormAction(action);
+  let formAction = useFormAction(action, {
+    relative
+  });
 
   let submitHandler = event => {
     onSubmit && onSubmit(event);
@@ -442,7 +451,8 @@ const FormImpl = /*#__PURE__*/React.forwardRef((_ref8, forwardedRef) => {
     let submitter = event.nativeEvent.submitter;
     submit(submitter || event.currentTarget, {
       method,
-      replace
+      replace,
+      relative
     });
   };
 
@@ -450,7 +460,7 @@ const FormImpl = /*#__PURE__*/React.forwardRef((_ref8, forwardedRef) => {
     ref: forwardedRef,
     method: formMethod,
     action: formAction,
-    onSubmit: submitHandler
+    onSubmit: reloadDocument ? onSubmit : submitHandler
   }, props));
 });
 
@@ -475,24 +485,28 @@ function useLinkClickHandler(to, _temp) {
     target,
     replace: replaceProp,
     state,
-    resetScroll
+    preventScrollReset,
+    relative
   } = _temp === void 0 ? {} : _temp;
   let navigate = useNavigate();
   let location = useLocation();
-  let path = useResolvedPath(to);
+  let path = useResolvedPath(to, {
+    relative
+  });
   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 unless the replace prop is explcitly set
+      // a push, so do the same here unless the replace prop is explicitly set
 
       let replace = replaceProp !== undefined ? replaceProp : createPath(location) === createPath(path);
       navigate(to, {
         replace,
         state,
-        resetScroll
+        preventScrollReset,
+        relative
       });
     }
-  }, [location, navigate, path, replaceProp, state, target, to, resetScroll]);
+  }, [location, navigate, path, replaceProp, state, target, to, preventScrollReset, relative]);
 }
 /**
  * A convenient wrapper for reading and writing search parameters via the
@@ -513,15 +527,17 @@ function useSearchParams(defaultInit) {
 }
 
 function useSubmitImpl(fetcherKey, routeId) {
-  let router = React.useContext(UNSAFE_DataRouterContext);
+  let dataRouterContext = React.useContext(UNSAFE_DataRouterContext);
+  !dataRouterContext ? process.env.NODE_ENV !== "production" ? invariant(false, "useSubmitImpl must be used within a Data Router") : invariant(false) : void 0;
+  let {
+    router
+  } = dataRouterContext;
   let defaultAction = useFormAction();
   return React.useCallback(function (target, options) {
     if (options === void 0) {
       options = {};
     }
 
-    !(router != null) ? process.env.NODE_ENV !== "production" ? invariant(false, "useSubmit() must be used within a <DataRouter>") : invariant(false) : 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.");
     }
@@ -549,24 +565,45 @@ function useSubmitImpl(fetcherKey, routeId) {
   }, [defaultAction, router, fetcherKey, routeId]);
 }
 
-function useFormAction(action) {
-  if (action === void 0) {
-    action = ".";
-  }
-
+function useFormAction(action, _temp2) {
+  let {
+    relative
+  } = _temp2 === void 0 ? {} : _temp2;
   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,
-    search
-  } = useResolvedPath(action);
+  let resolvedAction = action != null ? action : ".";
+  let path = useResolvedPath(resolvedAction, {
+    relative
+  }); // Previously we set the default action to ".". The problem with this is that
+  // `useResolvedPath(".")` excludes search params and the hash 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.
+  // https://github.com/remix-run/remix/issues/927
+
+  let location = useLocation();
+
+  if (action == null) {
+    // Safe to write to these directly here since if action was undefined, we
+    // would have called useResolvedPath(".") which will never include a search
+    // or hash
+    path.search = location.search;
+    path.hash = location.hash; // 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);
+      params.delete("index");
+      path.search = params.toString() ? "?" + params.toString() : "";
+    }
+  }
 
-  if (action === "." && match.route.index) {
-    search = search ? search.replace(/^\?/, "?index&") : "?index";
+  if ((!action || action === ".") && match.route.index) {
+    path.search = path.search ? path.search.replace(/^\?/, "?index&") : "?index";
   }
 
-  return pathname + search;
+  return createPath(path);
 }
 ////////////////////////////////////////////////////////////////////////////////
 //#region Utils