From 7bd4791272cb8b4d67c6b037e40a44db16f7a269 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 6 Aug 2026 08:59:26 +0000
Subject: [PATCH 1/2] feat(deps): update react-hook-form to v8 beta and
 re-enable React Compiler

Bump the react-hook-form catalog entry to 8.0.0-beta.3 for
sanity-plugin-media and sanity-plugin-dashboard-widget-vercel. v8 adds
first-class React Compiler support, so the temporary 'use no memo'
opt-out in the media asset details form is removed and the plugin ships
fully compiled again.

None of the v8 breaking changes affect this codebase: no useFieldArray,
Watch component, watch(callback), or setValue on field arrays; the
register() input-ref change is transparent to prop-spreading consumers.

Also convert the remaining inline Footer/Header dialog components to
plain JSX, dropping the react/react-compiler lint suppressions that
pattern required.

@hookform/resolvers has no v8-compatible release yet (peers ^7.0.0); the
resolver contract is unchanged and works with the beta, so allow it via
peerDependencyRules.allowedVersions.
---
 .changeset/media-react-hook-form-v8.md        |  5 +++++
 .../vercel-widget-react-hook-form-v8.md       |  5 +++++
 .../components/DialogAssetEdit/Details.tsx    |  5 -----
 .../src/components/DialogConfirm/index.tsx    | 15 +++----------
 .../components/DialogFolderCreate/index.tsx   | 12 ++--------
 .../src/components/DialogTagCreate/index.tsx  | 12 ++--------
 .../src/components/DialogTagEdit/index.tsx    | 12 ++--------
 pnpm-lock.yaml                                | 22 +++++++++----------
 pnpm-workspace.yaml                           |  5 ++++-
 9 files changed, 34 insertions(+), 59 deletions(-)
 create mode 100644 .changeset/media-react-hook-form-v8.md
 create mode 100644 .changeset/vercel-widget-react-hook-form-v8.md

diff --git a/.changeset/media-react-hook-form-v8.md b/.changeset/media-react-hook-form-v8.md
new file mode 100644
index 0000000000..046284d7ff
--- /dev/null
+++ b/.changeset/media-react-hook-form-v8.md
@@ -0,0 +1,5 @@
+---
+"sanity-plugin-media": patch
+---
+
+Update react-hook-form to v8 (8.0.0-beta.3), which has first-class React Compiler support, and re-enable React Compiler for the asset details form. Dialog footers (and the confirm dialog header) are no longer declared as inline components, so they no longer remount whenever form state changes.
diff --git a/.changeset/vercel-widget-react-hook-form-v8.md b/.changeset/vercel-widget-react-hook-form-v8.md
new file mode 100644
index 0000000000..789a10409b
--- /dev/null
+++ b/.changeset/vercel-widget-react-hook-form-v8.md
@@ -0,0 +1,5 @@
+---
+"sanity-plugin-dashboard-widget-vercel": patch
+---
+
+Update react-hook-form to v8 (8.0.0-beta.3)
diff --git a/plugins/sanity-plugin-media/src/components/DialogAssetEdit/Details.tsx b/plugins/sanity-plugin-media/src/components/DialogAssetEdit/Details.tsx
index 3c0fb19d9b..4a12503666 100644
--- a/plugins/sanity-plugin-media/src/components/DialogAssetEdit/Details.tsx
+++ b/plugins/sanity-plugin-media/src/components/DialogAssetEdit/Details.tsx
@@ -64,11 +64,6 @@ export default function Details({
   creditLine,
   locales,
 }: DetailsProps) {
-  'use no memo'
-  // React Compiler memoizes the register() field JSX using asset-derived deps only.
-  // That can leave Save stuck disabled while the DOM still updates (uncontrolled inputs).
-  // Tags work because they use Controller; string fields use register and need this opt-out.
-
   const hasLocales = locales && locales.length > 0
   const [activeLocaleTab, setActiveLocaleTab] = useState(0)
   const folderId = currentAsset?.opt?.media?.folder?._ref
diff --git a/plugins/sanity-plugin-media/src/components/DialogConfirm/index.tsx b/plugins/sanity-plugin-media/src/components/DialogConfirm/index.tsx
index c600a6b7a3..5b0dfcfe54 100644
--- a/plugins/sanity-plugin-media/src/components/DialogConfirm/index.tsx
+++ b/plugins/sanity-plugin-media/src/components/DialogConfirm/index.tsx
@@ -37,7 +37,7 @@ const DialogConfirm = (props: Props) => {
     handleClose()
   }
 
-  const Footer = () => (
+  const footer = (
     <Box padding={3}>
       <Flex justify="space-between">
         <Button fontSize={1} mode="bleed" onClick={handleClose} text="Cancel" />
@@ -51,7 +51,7 @@ const DialogConfirm = (props: Props) => {
     </Box>
   )
 
-  const Header = () => (
+  const header = (
     <Flex align="center">
       <Box paddingX={1}>
         <WarningOutlineIcon />
@@ -61,16 +61,7 @@ const DialogConfirm = (props: Props) => {
   )
 
   return (
-    <Dialog
-      animate
-      // oxlint-disable-next-line react/react-compiler
-      footer={<Footer />}
-      // oxlint-disable-next-line react/react-compiler
-      header={<Header />}
-      id="confirm"
-      onClose={handleClose}
-      width={1}
-    >
+    <Dialog animate footer={footer} header={header} id="confirm" onClose={handleClose} width={1}>
       <Box paddingX={4} paddingY={4}>
         <Stack space={3}>
           {dialog?.title && <Text size={1}>{dialog.title}</Text>}
diff --git a/plugins/sanity-plugin-media/src/components/DialogFolderCreate/index.tsx b/plugins/sanity-plugin-media/src/components/DialogFolderCreate/index.tsx
index b07c5b3bf5..4a0ea7133b 100644
--- a/plugins/sanity-plugin-media/src/components/DialogFolderCreate/index.tsx
+++ b/plugins/sanity-plugin-media/src/components/DialogFolderCreate/index.tsx
@@ -63,7 +63,7 @@ const DialogFolderCreate = (props: Props) => {
     }
   }, [creatingError, setError])
 
-  const Footer = () => (
+  const footer = (
     <Box padding={3}>
       <Flex justify="flex-end">
         <FormSubmitButton
@@ -76,15 +76,7 @@ const DialogFolderCreate = (props: Props) => {
   )
 
   return (
-    <Dialog
-      animate
-      // oxlint-disable-next-line react/react-compiler
-      footer={<Footer />}
-      header="Create Folder"
-      id={id}
-      onClose={handleClose}
-      width={1}
-    >
+    <Dialog animate footer={footer} header="Create Folder" id={id} onClose={handleClose} width={1}>
       <Box as="form" padding={4} onSubmit={handleSubmit(onSubmit)}>
         <button style={{display: 'none'}} tabIndex={-1} type="submit" />
 
diff --git a/plugins/sanity-plugin-media/src/components/DialogTagCreate/index.tsx b/plugins/sanity-plugin-media/src/components/DialogTagCreate/index.tsx
index 730f87d461..edc9b1969c 100644
--- a/plugins/sanity-plugin-media/src/components/DialogTagCreate/index.tsx
+++ b/plugins/sanity-plugin-media/src/components/DialogTagCreate/index.tsx
@@ -65,7 +65,7 @@ const DialogTagCreate = (props: Props) => {
     }
   }, [creatingError, setError])
 
-  const Footer = () => (
+  const footer = (
     <Box padding={3}>
       <Flex justify="flex-end">
         {/* Submit button */}
@@ -79,15 +79,7 @@ const DialogTagCreate = (props: Props) => {
   )
 
   return (
-    <Dialog
-      animate
-      // oxlint-disable-next-line react/react-compiler
-      footer={<Footer />}
-      header="Create Tag"
-      id={id}
-      onClose={handleClose}
-      width={1}
-    >
+    <Dialog animate footer={footer} header="Create Tag" id={id} onClose={handleClose} width={1}>
       {/* Form fields */}
       <Box as="form" padding={4} onSubmit={handleSubmit(onSubmit)}>
         {/* Hidden button to enable enter key submissions */}
diff --git a/plugins/sanity-plugin-media/src/components/DialogTagEdit/index.tsx b/plugins/sanity-plugin-media/src/components/DialogTagEdit/index.tsx
index a6729ed797..373f529fbc 100644
--- a/plugins/sanity-plugin-media/src/components/DialogTagEdit/index.tsx
+++ b/plugins/sanity-plugin-media/src/components/DialogTagEdit/index.tsx
@@ -133,7 +133,7 @@ const DialogTagEdit = (props: Props) => {
     }
   }, [client, handleTagUpdate, tagItem?.tag])
 
-  const Footer = () => (
+  const footer = (
     <Box padding={3}>
       <Flex justify="space-between">
         {/* Delete button */}
@@ -162,15 +162,7 @@ const DialogTagEdit = (props: Props) => {
   }
 
   return (
-    <Dialog
-      animate
-      // oxlint-disable-next-line react/react-compiler
-      footer={<Footer />}
-      header="Edit Tag"
-      id={id}
-      onClose={handleClose}
-      width={1}
-    >
+    <Dialog animate footer={footer} header="Edit Tag" id={id} onClose={handleClose} width={1}>
       {/* Form fields */}
       <Box as="form" padding={4} onSubmit={handleSubmit(onSubmit)}>
         {/* Deleted notification */}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index df0da1262a..8a2de1fb9f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -134,8 +134,8 @@ catalogs:
       specifier: ^3.2.2
       version: 3.2.2
     react-hook-form:
-      specifier: ^7.84.0
-      version: 7.84.0
+      specifier: 8.0.0-beta.3
+      version: 8.0.0-beta.3
     react-icons:
       specifier: ^5.7.0
       version: 5.7.0
@@ -2148,7 +2148,7 @@ importers:
     dependencies:
       '@hookform/resolvers':
         specifier: 'catalog:'
-        version: 4.1.3(react-hook-form@7.84.0)
+        version: 4.1.3(react-hook-form@8.0.0-beta.3)
       '@sanity/color':
         specifier: 'catalog:'
         version: 3.0.8
@@ -2172,7 +2172,7 @@ importers:
         version: 3.0.0
       react-hook-form:
         specifier: 'catalog:'
-        version: 7.84.0(react@19.2.8)
+        version: 8.0.0-beta.3(react@19.2.8)
       react-time-ago:
         specifier: ^7.4.4
         version: 7.4.4(react-dom@19.2.8)(react@19.2.8)
@@ -2631,7 +2631,7 @@ importers:
     dependencies:
       '@hookform/resolvers':
         specifier: 'catalog:'
-        version: 4.1.3(react-hook-form@7.84.0)
+        version: 4.1.3(react-hook-form@8.0.0-beta.3)
       '@reduxjs/toolkit':
         specifier: ^2.12.0
         version: 2.12.0(react-redux@9.3.0)(react@19.2.8)
@@ -2682,7 +2682,7 @@ importers:
         version: 1.6.0(react-dom@19.2.8)(react@19.2.8)
       react-hook-form:
         specifier: 'catalog:'
-        version: 7.84.0(react@19.2.8)
+        version: 8.0.0-beta.3(react@19.2.8)
       react-redux:
         specifier: ^9.3.0
         version: 9.3.0(@types/react@19.2.18)(react@19.2.8)(redux@5.0.1)
@@ -10477,8 +10477,8 @@ packages:
     peerDependencies:
       react: '*'
 
-  react-hook-form@7.84.0:
-    resolution: {integrity: sha512-+hWvQP6GLco56mDwrbU4XnHix8t1z90ltZsDIrREl+jnQFQxYLX8oAzqe/Xn8nHpmoXTY5M6oEXrAhbP1qevNQ==}
+  react-hook-form@8.0.0-beta.3:
+    resolution: {integrity: sha512-VyAKK5sXyAK1bkcExoa7ab6nZOd04T+gwv8F4y5xM9vXWw3GVFCJNJgTGt+FYW4jrZkglO12+yhDcQtVLEzZRg==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
       react: ^16.8.0 || ^17 || ^18 || ^19
@@ -13662,10 +13662,10 @@ snapshots:
     transitivePeerDependencies:
       - '@types/react'
 
-  '@hookform/resolvers@4.1.3(react-hook-form@7.84.0)':
+  '@hookform/resolvers@4.1.3(react-hook-form@8.0.0-beta.3)':
     dependencies:
       '@standard-schema/utils': 0.3.0
-      react-hook-form: 7.84.0(react@19.2.8)
+      react-hook-form: 8.0.0-beta.3(react@19.2.8)
 
   '@inquirer/ansi@1.0.2': {}
 
@@ -19734,7 +19734,7 @@ snapshots:
     transitivePeerDependencies:
       - preact-render-to-string
 
-  react-hook-form@7.84.0(react@19.2.8):
+  react-hook-form@8.0.0-beta.3(react@19.2.8):
     dependencies:
       react: 19.2.8
 
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 6516aa75b8..1a3c773ad6 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -62,7 +62,7 @@ catalog:
   react: ^19.2.8
   react-dom: ^19.2.8
   react-fast-compare: ^3.2.2
-  react-hook-form: ^7.84.0
+  react-hook-form: 8.0.0-beta.3
   react-icons: ^5.7.0
   react-is: ^19.2.8
   react-photo-album: ^3.6.0
@@ -173,6 +173,9 @@ peerDependencyRules:
     # @bynder/compact-view does not declare react 19 in its peers yet, but works fine with it
     '@bynder/compact-view>react': '19'
     '@bynder/compact-view>react-dom': '19'
+    # @hookform/resolvers has no react-hook-form v8 compatible release yet (peers ^7.0.0);
+    # the resolver contract is unchanged and it works with the v8 beta
+    '@hookform/resolvers>react-hook-form': '8.0.0-beta.3'
 
 publicHoistPattern:
   # Allows setting vite/client in dev/test-studio/tsconfig.json without installing vite

From 5ddb277342b56ac272606646c3ed78815e55b0db Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 6 Aug 2026 10:06:00 +0000
Subject: [PATCH 2/2] fix(media): scope react-hook-form v8 to
 sanity-plugin-media and document the peer warning

Address review feedback on the v8 upgrade:

- Move the react-hook-form v8 beta to a named catalog
  (catalog:react-hook-form-v8) so only sanity-plugin-media upgrades;
  sanity-plugin-dashboard-widget-vercel stays on the default catalog (v7)
  and its changeset is dropped.
- Document the @hookform/resolvers peer dependency warning (and how to
  allow it with npm/pnpm) in the plugin README, mirroring the Bynder
  plugin's React 19 section. No v8-compatible @hookform/resolvers release
  exists yet (latest 5.7.1 declares react-hook-form ^7.55.0).
---
 .../vercel-widget-react-hook-form-v8.md       |  5 ----
 plugins/sanity-plugin-media/README.md         | 13 +++++++++
 plugins/sanity-plugin-media/package.json      |  2 +-
 pnpm-lock.yaml                                | 29 +++++++++++++++----
 pnpm-workspace.yaml                           |  9 ++++--
 5 files changed, 45 insertions(+), 13 deletions(-)
 delete mode 100644 .changeset/vercel-widget-react-hook-form-v8.md

diff --git a/.changeset/vercel-widget-react-hook-form-v8.md b/.changeset/vercel-widget-react-hook-form-v8.md
deleted file mode 100644
index 789a10409b..0000000000
--- a/.changeset/vercel-widget-react-hook-form-v8.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"sanity-plugin-dashboard-widget-vercel": patch
----
-
-Update react-hook-form to v8 (8.0.0-beta.3)
diff --git a/plugins/sanity-plugin-media/README.md b/plugins/sanity-plugin-media/README.md
index 51502b870b..989ed752f4 100644
--- a/plugins/sanity-plugin-media/README.md
+++ b/plugins/sanity-plugin-media/README.md
@@ -60,6 +60,19 @@ or
 yarn add sanity-plugin-media
 ```
 
+### Peer dependency warnings
+
+The plugin uses [`react-hook-form`](https://react-hook-form.com/) v8 together with [`@hookform/resolvers`](https://www.npmjs.com/package/@hookform/resolvers), which doesn't declare react-hook-form v8 in its peer dependencies yet (it declares `react-hook-form ^7.55.0`), even though the resolver contract is unchanged and works fine with v8. Until a v8-compatible release is published, tell your package manager to allow it:
+
+- `npm`: install with the `--legacy-peer-deps` flag
+- `pnpm`: set [`peerDependencyRules.allowedVersions`](https://pnpm.io/settings#peerdependencyrulesallowedversions) in `pnpm-workspace.yaml`:
+
+  ```yaml
+  peerDependencyRules:
+    allowedVersions:
+      '@hookform/resolvers>react-hook-form': '8.0.0-beta.3'
+  ```
+
 ## Usage
 
 Add it as a plugin in your `sanity.config.ts` (or .js) file:
diff --git a/plugins/sanity-plugin-media/package.json b/plugins/sanity-plugin-media/package.json
index 1053dcbcee..8e7797aa87 100644
--- a/plugins/sanity-plugin-media/package.json
+++ b/plugins/sanity-plugin-media/package.json
@@ -60,7 +60,7 @@
     "pluralize": "^8.0.0",
     "react-dropzone": "^11.7.1",
     "react-file-icon": "^1.6.0",
-    "react-hook-form": "catalog:",
+    "react-hook-form": "catalog:react-hook-form-v8",
     "react-redux": "^9.3.0",
     "react-select": "^5.10.2",
     "react-virtuoso": "^4.18.11",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8a2de1fb9f..0b13abcefa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -134,8 +134,8 @@ catalogs:
       specifier: ^3.2.2
       version: 3.2.2
     react-hook-form:
-      specifier: 8.0.0-beta.3
-      version: 8.0.0-beta.3
+      specifier: ^7.84.0
+      version: 7.84.0
     react-icons:
       specifier: ^5.7.0
       version: 5.7.0
@@ -179,6 +179,10 @@ catalogs:
     react:
       specifier: ^19.2
       version: 19.2.8
+  react-hook-form-v8:
+    react-hook-form:
+      specifier: 8.0.0-beta.3
+      version: 8.0.0-beta.3
 
 overrides:
   '@types/node': ^24.13.3
@@ -2148,7 +2152,7 @@ importers:
     dependencies:
       '@hookform/resolvers':
         specifier: 'catalog:'
-        version: 4.1.3(react-hook-form@8.0.0-beta.3)
+        version: 4.1.3(react-hook-form@7.84.0)
       '@sanity/color':
         specifier: 'catalog:'
         version: 3.0.8
@@ -2172,7 +2176,7 @@ importers:
         version: 3.0.0
       react-hook-form:
         specifier: 'catalog:'
-        version: 8.0.0-beta.3(react@19.2.8)
+        version: 7.84.0(react@19.2.8)
       react-time-ago:
         specifier: ^7.4.4
         version: 7.4.4(react-dom@19.2.8)(react@19.2.8)
@@ -2681,7 +2685,7 @@ importers:
         specifier: ^1.6.0
         version: 1.6.0(react-dom@19.2.8)(react@19.2.8)
       react-hook-form:
-        specifier: 'catalog:'
+        specifier: 'catalog:react-hook-form-v8'
         version: 8.0.0-beta.3(react@19.2.8)
       react-redux:
         specifier: ^9.3.0
@@ -10477,6 +10481,12 @@ packages:
     peerDependencies:
       react: '*'
 
+  react-hook-form@7.84.0:
+    resolution: {integrity: sha512-+hWvQP6GLco56mDwrbU4XnHix8t1z90ltZsDIrREl+jnQFQxYLX8oAzqe/Xn8nHpmoXTY5M6oEXrAhbP1qevNQ==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18 || ^19
+
   react-hook-form@8.0.0-beta.3:
     resolution: {integrity: sha512-VyAKK5sXyAK1bkcExoa7ab6nZOd04T+gwv8F4y5xM9vXWw3GVFCJNJgTGt+FYW4jrZkglO12+yhDcQtVLEzZRg==}
     engines: {node: '>=18.0.0'}
@@ -13662,6 +13672,11 @@ snapshots:
     transitivePeerDependencies:
       - '@types/react'
 
+  '@hookform/resolvers@4.1.3(react-hook-form@7.84.0)':
+    dependencies:
+      '@standard-schema/utils': 0.3.0
+      react-hook-form: 7.84.0(react@19.2.8)
+
   '@hookform/resolvers@4.1.3(react-hook-form@8.0.0-beta.3)':
     dependencies:
       '@standard-schema/utils': 0.3.0
@@ -19734,6 +19749,10 @@ snapshots:
     transitivePeerDependencies:
       - preact-render-to-string
 
+  react-hook-form@7.84.0(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+
   react-hook-form@8.0.0-beta.3(react@19.2.8):
     dependencies:
       react: 19.2.8
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 1a3c773ad6..4f725a5c06 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -62,7 +62,7 @@ catalog:
   react: ^19.2.8
   react-dom: ^19.2.8
   react-fast-compare: ^3.2.2
-  react-hook-form: 8.0.0-beta.3
+  react-hook-form: ^7.84.0
   react-icons: ^5.7.0
   react-is: ^19.2.8
   react-photo-album: ^3.6.0
@@ -88,6 +88,10 @@ catalogs:
     react-dom: ^19.2
     sanity: ^5 || ^6.0.0-0
     styled-components: ^6.1
+  # react-hook-form v8 beta (first-class React Compiler support), currently only
+  # used by sanity-plugin-media; the default catalog stays on v7 for other plugins.
+  react-hook-form-v8:
+    react-hook-form: 8.0.0-beta.3
 
 # When running `pnpm add`, reuse a dependency's catalog version automatically if
 # it already exists in a catalog, so shared deps stay aligned on a single version.
@@ -174,7 +178,8 @@ peerDependencyRules:
     '@bynder/compact-view>react': '19'
     '@bynder/compact-view>react-dom': '19'
     # @hookform/resolvers has no react-hook-form v8 compatible release yet (peers ^7.0.0);
-    # the resolver contract is unchanged and it works with the v8 beta
+    # the resolver contract is unchanged and it works with the v8 beta (documented in
+    # the sanity-plugin-media README)
     '@hookform/resolvers>react-hook-form': '8.0.0-beta.3'
 
 publicHoistPattern: