Merge branch 'release-changesets' into changesets

Author: chaance

.changeset/eighty-forks-search.md

@@ -0,0 +1,6 @@
+---
+"react-router": patch
+"react-router-dom": patch
+---
+
+Fix broken require for CJS builds

contributors.yml

@@ -23,10 +23,12 @@
 - hyesungoh
 - IbraRouisDev
 - Isammoc
+- JaffParker
 - JakubDrozd
 - janpaepke
 - jimniels
 - jmargeta
+- johnpangalos
 - jonkoops
 - kantuni
 - kddnewton
@@ -48,6 +50,7 @@
 - noisypigeon
 - paulsmithkc
 - petersendidit
+- promet99
 - RobHannay
 - rtmann
 - ryanflorence
@@ -65,6 +68,5 @@
 - turansky
 - underager
 - vijaypushkin
-- rtmann
-- williamsdyyz
 - vikingviolinist
+- williamsdyyz

docs/hooks/use-search-params-rn.md

@@ -26,19 +26,22 @@ type URLSearchParamsInit =
   | URLSearchParams;
 
 type SetURLSearchParams = (
-  nextInit?: URLSearchParamsInit,
+  nextInit?:
+    | URLSearchParamsInit
+    | ((prev: URLSearchParams) => URLSearchParamsInit),
   navigateOpts?: : NavigateOptions
 ) => void;
 
 interface NavigateOptions {
   replace?: boolean;
   state?: any;
+  resetScroll?: boolean;
 }
 ```
 
 </details>
 
-The `useSearchParams` hook is used to read and modify the query string in the URL for the current location. Like React's own [`useState` hook](https://reactjs.org/docs/hooks-reference.html#usestate), `useSearchParams` returns an array of two values: the current location's [search params](https://developer.mozilla.org/en-US/docs/Web/API/URL/searchParams) and a function that may be used to update them.
+The `useSearchParams` hook is used to read and modify the query string in the URL for the current location. Like React's own [`useState` hook][usestate], `useSearchParams` returns an array of two values: the current location's [search params][searchparams] and a function that may be used to update them. Just as React's [`useState` hook][usestate], `setSearchParams` also supports [functional updates][functional-updates]. Therefore, you may provide a function that takes a `searchParams` and returns an updated version.
 
 ```tsx
 import * as React from "react";
@@ -65,4 +68,7 @@ function App() {
 }
 ```
 
+[functional-updates]: https://reactjs.org/docs/hooks-reference.html#functional-updates
+[searchparams]: https://developer.mozilla.org/en-US/docs/Web/API/URL/searchParams
 [usesearchparams]: ./use-search-params.md
+[usestate]: https://reactjs.org/docs/hooks-reference.html#usestate

docs/hooks/use-search-params.md

@@ -26,14 +26,22 @@ type URLSearchParamsInit =
   | URLSearchParams;
 
 type SetURLSearchParams = (
-  nextInit?: URLSearchParamsInit,
-  navigateOpts?: : { replace?: boolean; state?: any }
+  nextInit?:
+    | URLSearchParamsInit
+    | ((prev: URLSearchParams) => URLSearchParamsInit),
+  navigateOpts?: : NavigateOptions
 ) => void;
+
+interface NavigateOptions {
+  replace?: boolean;
+  state?: any;
+  resetScroll?: boolean;
+}
 ```
 
 </details>
 
-The `useSearchParams` hook is used to read and modify the query string in the URL for the current location. Like React's own [`useState` hook](https://reactjs.org/docs/hooks-reference.html#usestate), `useSearchParams` returns an array of two values: the current location's [search params](https://developer.mozilla.org/en-US/docs/Web/API/URL/searchParams) and a function that may be used to update them.
+The `useSearchParams` hook is used to read and modify the query string in the URL for the current location. Like React's own [`useState` hook][usestate], `useSearchParams` returns an array of two values: the current location's [search params][searchparams] and a function that may be used to update them. Just as React's [`useState` hook][usestate], `setSearchParams` also supports [functional updates][functional-updates]. Therefore, you may provide a function that takes a `searchParams` and returns an updated version.
 
 ```tsx
 import * as React from "react";
@@ -66,5 +74,8 @@ function App() {
 > of the URL. Also note that the second arg to `setSearchParams` is
 > the same type as the second arg to `navigate`.
 
+[functional-updates]: https://reactjs.org/docs/hooks-reference.html#functional-updates
+[searchparams]: https://developer.mozilla.org/en-US/docs/Web/API/URL/searchParams
 [usesearchparams-native]: ./use-search-params-rn
+[usestate]: https://reactjs.org/docs/hooks-reference.html#usestate
 [usenavigate]: ./use-navigate

packages/react-router-dom-v5-compat/CHANGELOG.md

@@ -1,5 +1,11 @@
 # react-router-dom-v5-compat
 
+## 6.4.0-pre.4
+
+### Patch Changes
+
+- Fix missing `dist` files
+
 ## 6.4.0-pre.3
 
 ### Patch Changes

packages/react-router-dom-v5-compat/index.ts

@@ -58,6 +58,7 @@ export type {
   Navigator,
   OutletProps,
   Params,
+  ParamParseKey,
   PathMatch,
   RouteMatch,
   RouteObject,

packages/react-router-dom-v5-compat/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-router-dom-v5-compat",
-  "version": "6.4.0-pre.3",
+  "version": "6.4.0-pre.4",
   "description": "Migration path to React Router v6 from v4/5",
   "keywords": [
     "react",
@@ -24,12 +24,12 @@
   "types": "./dist/index.d.ts",
   "dependencies": {
     "history": "^5.3.0",
-    "react-router": "6.4.0-pre.3"
+    "react-router": "6.4.0-pre.4"
   },
   "peerDependencies": {
     "react": ">=16.8",
     "react-dom": ">=16.8",
-    "react-router-dom": "6.4.0-pre.3"
+    "react-router-dom": "6.4.0-pre.4"
   },
   "files": [
     "dist/",

packages/react-router-dom/CHANGELOG.md

@@ -1,5 +1,11 @@
 # react-router-dom
 
+## 6.4.0-pre.4
+
+### Patch Changes
+
+- Fix missing `dist` files
+
 ## 6.4.0-pre.3
 
 ### Patch Changes

packages/react-router-dom/__tests__/search-params-test.tsx

@@ -4,28 +4,6 @@ import { act } from "react-dom/test-utils";
 import { MemoryRouter, Routes, Route, useSearchParams } from "react-router-dom";
 
 describe("useSearchParams", () => {
-  function SearchPage() {
-    let queryRef = React.useRef<HTMLInputElement>(null);
-    let [searchParams, setSearchParams] = useSearchParams({ q: "" });
-    let query = searchParams.get("q")!;
-
-    function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
-      event.preventDefault();
-      if (queryRef.current) {
-        setSearchParams({ q: queryRef.current.value });
-      }
-    }
-
-    return (
-      <div>
-        <p>The current query is "{query}".</p>
-        <form onSubmit={handleSubmit}>
-          <input name="q" defaultValue={query} ref={queryRef} />
-        </form>
-      </div>
-    );
-  }
-
   let node: HTMLDivElement;
   beforeEach(() => {
     node = document.createElement("div");
@@ -38,6 +16,28 @@ describe("useSearchParams", () => {
   });
 
   it("reads and writes the search string", () => {
+    function SearchPage() {
+      let queryRef = React.useRef<HTMLInputElement>(null);
+      let [searchParams, setSearchParams] = useSearchParams({ q: "" });
+      let query = searchParams.get("q")!;
+
+      function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+        event.preventDefault();
+        if (queryRef.current) {
+          setSearchParams({ q: queryRef.current.value });
+        }
+      }
+
+      return (
+        <div>
+          <p>The current query is "{query}".</p>
+          <form onSubmit={handleSubmit}>
+            <input name="q" defaultValue={query} ref={queryRef} />
+          </form>
+        </div>
+      );
+    }
+
     act(() => {
       ReactDOM.render(
         <MemoryRouter initialEntries={["/search?q=Michael+Jackson"]}>
@@ -66,4 +66,65 @@ describe("useSearchParams", () => {
 
     expect(node.innerHTML).toMatch(/The current query is "Ryan Florence"/);
   });
+
+  it("updates searchParams when a function is provided to setSearchParams (functional updates)", () => {
+    function SearchPage() {
+      let queryRef = React.useRef<HTMLInputElement>(null);
+      let [searchParams, setSearchParams] = useSearchParams({ q: "" });
+      let query = searchParams.get("q")!;
+      let queryNew = searchParams.get("new")!;
+
+      function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+        event.preventDefault();
+        if (queryRef.current) {
+          setSearchParams((cur) => {
+            cur.set("q", `${cur.get("q")} - appended`);
+            cur.set("new", "Ryan Florence");
+            return cur;
+          });
+        }
+      }
+
+      return (
+        <div>
+          <p>The current query is "{query}".</p>
+          <p>The new query is "{queryNew}"</p>
+          <form onSubmit={handleSubmit}>
+            <input name="q" defaultValue={query} ref={queryRef} />
+          </form>
+        </div>
+      );
+    }
+
+    act(() => {
+      ReactDOM.render(
+        <MemoryRouter initialEntries={["/search?q=Michael+Jackson"]}>
+          <Routes>
+            <Route path="search" element={<SearchPage />} />
+          </Routes>
+        </MemoryRouter>,
+        node
+      );
+    });
+
+    let form = node.querySelector("form")!;
+    expect(form).toBeDefined();
+
+    let queryInput = node.querySelector<HTMLInputElement>("input[name=q]")!;
+    expect(queryInput).toBeDefined();
+
+    expect(node.innerHTML).toMatch(/The current query is "Michael Jackson"/);
+    expect(node.innerHTML).toMatch(/The new query is ""/);
+
+    act(() => {
+      form.dispatchEvent(
+        new Event("submit", { bubbles: true, cancelable: true })
+      );
+    });
+
+    expect(node.innerHTML).toMatch(
+      /The current query is "Michael Jackson - appended"/
+    );
+    expect(node.innerHTML).toMatch(/The new query is "Ryan Florence"/);
+  });
 });

packages/react-router-dom/index.tsx

@@ -3,6 +3,7 @@
  * you'll need to update the rollup config for react-router-dom-v5-compat.
  */
 import * as React from "react";
+import type { NavigateOptions, To } from "react-router";
 import {
   Router,
   createPath,
@@ -16,16 +17,15 @@ import {
   UNSAFE_DataRouterContext,
   UNSAFE_DataRouterStateContext,
 } from "react-router";
-import type { To } from "react-router";
 import type {
   BrowserHistory,
   Fetcher,
   FormEncType,
   FormMethod,
+  GetScrollRestorationKeyFunction,
   HashHistory,
   History,
   HydrationState,
-  GetScrollRestorationKeyFunction,
   RouteObject,
 } from "@remix-run/router";
 import {
@@ -77,6 +77,7 @@ export type {
   Navigator,
   OutletProps,
   Params,
+  ParamParseKey,
   Path,
   PathMatch,
   Pathname,
@@ -658,7 +659,9 @@ export function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
  * A convenient wrapper for reading and writing search parameters via the
  * URLSearchParams interface.
  */
-export function useSearchParams(defaultInit?: URLSearchParamsInit) {
+export function useSearchParams(
+  defaultInit?: URLSearchParamsInit
+): [URLSearchParams, SetURLSearchParams] {
   warning(
     typeof URLSearchParams !== "undefined",
     `You cannot use the \`useSearchParams\` hook in a browser that does not ` +
@@ -684,19 +687,26 @@ export function useSearchParams(defaultInit?: URLSearchParamsInit) {
   );
 
   let navigate = useNavigate();
-  let setSearchParams = React.useCallback(
-    (
-      nextInit: URLSearchParamsInit,
-      navigateOptions?: { replace?: boolean; state?: any }
-    ) => {
-      navigate("?" + createSearchParams(nextInit), navigateOptions);
+  let setSearchParams = React.useCallback<SetURLSearchParams>(
+    (nextInit, navigateOptions) => {
+      const newSearchParams = createSearchParams(
+        typeof nextInit === "function" ? nextInit(searchParams) : nextInit
+      );
+      navigate("?" + newSearchParams, navigateOptions);
     },
-    [navigate]
+    [navigate, searchParams]
   );
 
-  return [searchParams, setSearchParams] as const;
+  return [searchParams, setSearchParams];
 }
 
+type SetURLSearchParams = (
+  nextInit?:
+    | URLSearchParamsInit
+    | ((prev: URLSearchParams) => URLSearchParamsInit),
+  navigateOpts?: NavigateOptions
+) => void;
+
 /**
  * Submits a HTML `<form>` to the server without reloading the page.
  */