@sanity/sdk-react 2.12.0 → 2.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/sdk-react",
-  "version": "2.12.0",
+  "version": "2.13.0",
   "private": false,
   "description": "Sanity SDK React toolkit for Content OS",
   "keywords": [
@@ -48,38 +48,38 @@
     "@sanity/types": "^5.26.0",
     "groq": "3.88.1-typegen-experimental.0",
     "react-compiler-runtime": "19.1.0-rc.2",
-    "react-error-boundary": "^6.1.1",
+    "react-error-boundary": "^6.1.2",
     "rxjs": "^7.8.2",
-    "@sanity/sdk": "2.12.0"
+    "@sanity/sdk": "2.13.0"
   },
   "devDependencies": {
     "@sanity/browserslist-config": "^1.0.5",
     "@sanity/comlink": "^4.0.1",
-    "@sanity/pkg-utils": "^8.1.29",
+    "@sanity/pkg-utils": "^9.2.3",
     "@sanity/prettier-config": "^1.0.6",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/node": "^24.12.4",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^4.7.0",
-    "@vitest/coverage-v8": "4.1.6",
+    "@vitejs/plugin-react": "^5.2.0",
+    "@vitest/coverage-v8": "^4.1.8",
     "babel-plugin-react-compiler": "19.1.0-rc.1",
     "eslint": "^9.39.4",
-    "groq-js": "^1.30.1",
+    "groq-js": "^1.30.2",
     "jsdom": "^29.1.1",
     "prettier": "^3.8.3",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "rollup-plugin-visualizer": "^5.14.0",
     "typescript": "^5.9.3",
-    "vite": "^7.3.3",
-    "vitest": "^4.1.6",
+    "vite": "^7.3.5",
+    "vitest": "^4.1.8",
     "@repo/config-eslint": "0.0.0",
     "@repo/config-test": "0.0.1",
-    "@repo/tsconfig": "0.0.1",
+    "@repo/package.bundle": "3.82.0",
     "@repo/package.config": "0.0.1",
-    "@repo/package.bundle": "3.82.0"
+    "@repo/tsconfig": "0.0.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/_exports/sdk-react.ts

@@ -92,6 +92,7 @@ export {type ProjectWithoutMembers, useProjects} from '../hooks/projects/useProj
 export {useQuery} from '../hooks/query/useQuery'
 export {useActiveReleases} from '../hooks/releases/useActiveReleases'
 export {useAllReleases} from '../hooks/releases/useAllReleases'
+export {useApplyReleaseActions} from '../hooks/releases/useApplyReleaseActions'
 export {usePerspective} from '../hooks/releases/usePerspective'
 export {type UserResult, useUser} from '../hooks/users/useUser'
 export {type UsersResult, useUsers} from '../hooks/users/useUsers'

package/src/hooks/document/useApplyDocumentActions.test.tsx

@@ -1,12 +1,15 @@
 import {applyDocumentActions, createSanityInstance} from '@sanity/sdk'
-import {renderHook as reactRenderHook} from '@testing-library/react'
 import {describe, it} from 'vitest'
 
 import {renderHook} from '../../../test/test-utils'
-import {SanityInstanceContext} from '../../context/SanityInstanceContext'
 import {useSanityInstance} from '../context/useSanityInstance'
 import {useApplyDocumentActions} from './useApplyDocumentActions'
 
+// Resource resolution, mismatch detection, and context fallback are covered
+// by hooks/helpers/useApplyActions.test.tsx — both this hook and
+// useApplyReleaseActions are typed wrappers over that shared implementation.
+// These tests just verify the wrapper forwards document actions through.
+
 vi.mock('@sanity/sdk', async (importOriginal) => {
   const original = await importOriginal<typeof import('@sanity/sdk')>()
   return {...original, applyDocumentActions: vi.fn()}
@@ -22,7 +25,7 @@ describe('useApplyDocumentActions', () => {
     vi.mocked(useSanityInstance).mockReturnValueOnce(instance)
   })
 
-  it('uses the effective context resource', async () => {
+  it('forwards a document action to applyDocumentActions with the resolved resource', () => {
     const {result} = renderHook(() => useApplyDocumentActions())
     result.current({
       type: 'document.edit',
@@ -36,168 +39,10 @@ describe('useApplyDocumentActions', () => {
           type: 'document.edit',
           documentType: 'post',
           documentId: 'abc',
-          // resource named in test-utils
           resource: {projectId: 'test', dataset: 'test'},
         },
       ],
       resource: {projectId: 'test', dataset: 'test'},
     })
   })
-
-  it('uses the SanityInstance when resource is not provided', async () => {
-    const {result} = reactRenderHook(() => useApplyDocumentActions(), {
-      wrapper: ({children}) => (
-        <SanityInstanceContext.Provider value={instance}>{children}</SanityInstanceContext.Provider>
-      ),
-    })
-    result.current(
-      {
-        type: 'document.edit',
-        documentType: 'post',
-        documentId: 'abc',
-      },
-      {},
-    )
-
-    expect(applyDocumentActions).toHaveBeenCalledExactlyOnceWith(instance, {
-      actions: [
-        {
-          type: 'document.edit',
-          documentType: 'post',
-          documentId: 'abc',
-          resource: {projectId: 'p', dataset: 'd'},
-        },
-      ],
-      resource: {projectId: 'p', dataset: 'd'},
-    })
-  })
-
-  it('resolves resource from projectId and dataset in action', async () => {
-    const {result} = renderHook(() => useApplyDocumentActions())
-    result.current({
-      type: 'document.edit',
-      documentType: 'post',
-      documentId: 'abc',
-      projectId: 'p',
-      dataset: 'd123',
-    })
-
-    expect(applyDocumentActions).toHaveBeenCalledExactlyOnceWith(instance, {
-      actions: [
-        {
-          type: 'document.edit',
-          documentType: 'post',
-          documentId: 'abc',
-          resource: {projectId: 'p', dataset: 'd123'},
-        },
-      ],
-      resource: {projectId: 'p', dataset: 'd123'},
-    })
-  })
-
-  it('throws when actions have mismatched project IDs', async () => {
-    const {result} = renderHook(() => useApplyDocumentActions())
-    expect(() => {
-      result.current([
-        {
-          type: 'document.edit',
-          documentType: 'post',
-          documentId: 'abc',
-          projectId: 'p123',
-          dataset: 'd',
-        },
-        {
-          type: 'document.edit',
-          documentType: 'post',
-          documentId: 'def',
-          projectId: 'p456',
-          dataset: 'd',
-        },
-      ])
-    }).toThrow(/Mismatched resources found in actions/)
-  })
-
-  it('throws when actions have mismatched datasets', async () => {
-    const {result} = renderHook(() => useApplyDocumentActions())
-    expect(() => {
-      result.current([
-        {
-          type: 'document.edit',
-          documentType: 'post',
-          documentId: 'abc',
-          projectId: 'p',
-          dataset: 'd1',
-        },
-        {
-          type: 'document.edit',
-          documentType: 'post',
-          documentId: 'def',
-          projectId: 'p',
-          dataset: 'd2',
-        },
-      ])
-    }).toThrow(/Mismatched resources found in actions/)
-  })
-
-  it('throws when actions have mismatched resources', async () => {
-    const {result} = renderHook(() => useApplyDocumentActions())
-    expect(() => {
-      result.current([
-        {
-          type: 'document.edit',
-          documentType: 'post',
-          documentId: 'abc',
-          resource: {projectId: 'p', dataset: 'd1'},
-        },
-        {
-          type: 'document.edit',
-          documentType: 'post',
-          documentId: 'def',
-          resource: {projectId: 'p', dataset: 'd2'},
-        },
-      ])
-    }).toThrow(/Mismatched resources found in actions/)
-  })
-
-  it('throws when mixing projectId/dataset and resource with a mismatch (projectId first)', async () => {
-    const {result} = renderHook(() => useApplyDocumentActions())
-    expect(() => {
-      result.current([
-        {
-          type: 'document.edit',
-          documentType: 'post',
-          documentId: 'abc',
-          projectId: 'p1',
-          dataset: 'd',
-        },
-        {
-          type: 'document.edit',
-          documentType: 'post',
-          documentId: 'def',
-          resource: {projectId: 'p2', dataset: 'd'},
-        },
-      ])
-    }).toThrow(/Mismatched resources found in actions/)
-  })
-
-  it('throws when mixing resource and projectId/dataset with a mismatch (resource first)', async () => {
-    const {result} = renderHook(() => useApplyDocumentActions())
-    expect(() => {
-      result.current([
-        {
-          type: 'document.edit',
-          documentType: 'post',
-          documentId: 'abc',
-          resource: {projectId: 'p1', dataset: 'd'},
-        },
-        {
-          type: 'document.edit',
-          documentType: 'post',
-          documentId: 'def',
-          projectId: 'p2',
-          dataset: 'd',
-        },
-      ])
-    }).toThrow(/Mismatched resources found in actions/)
-  })
 })

package/src/hooks/document/useApplyDocumentActions.ts

@@ -1,15 +1,8 @@
-import {type ActionsResult, applyDocumentActions, type DocumentAction} from '@sanity/sdk'
-import {isDeepEqual} from '@sanity/sdk/_internal'
+import {type ActionsResult, type DocumentAction} from '@sanity/sdk'
 import {type SanityDocument} from 'groq'
-import {useContext} from 'react'
 
 import {type ResourceHandle} from '../../config/handles'
-import {ResourcesContext} from '../../context/ResourcesContext'
-import {useSanityInstance} from '../context/useSanityInstance'
-import {
-  normalizeResourceOptions,
-  useEffectiveContextResource,
-} from '../helpers/useNormalizedResourceOptions'
+import {useApplyActions} from '../helpers/useApplyActions'
 // this import is used in an `{@link useEditDocument}`
 // eslint-disable-next-line import/consistent-type-specifier-style
 import type {useEditDocument} from './useEditDocument'
@@ -214,44 +207,5 @@ interface UseApplyDocumentActions {
  * ```
  */
 export const useApplyDocumentActions: UseApplyDocumentActions = () => {
-  const instance = useSanityInstance()
-  const resources = useContext(ResourcesContext)
-  const effectiveContextResource = useEffectiveContextResource()
-
-  return (actionOrActions, options) => {
-    const actions = Array.isArray(actionOrActions) ? actionOrActions : [actionOrActions]
-    const optionsResource = options
-      ? normalizeResourceOptions(options, resources, effectiveContextResource).resource
-      : undefined
-
-    const normalizedActions = actions.map((action) =>
-      normalizeResourceOptions(action, resources, effectiveContextResource),
-    )
-    let resource
-
-    for (const action of normalizedActions) {
-      if (!resource && action.resource) resource = action.resource
-      if (!isDeepEqual(action.resource, resource)) {
-        throw new Error(
-          `Mismatched resources found in actions. All actions must belong to the same resource. Found "${JSON.stringify(action.resource)}" but expected "${JSON.stringify(resource)}".`,
-        )
-      }
-    }
-
-    if (optionsResource && resource && !isDeepEqual(optionsResource, resource)) {
-      throw new Error(
-        `Mismatched resources found in actions. Found top-level resource "${JSON.stringify(optionsResource)}" but expected resource from action handles "${JSON.stringify(resource)}".`,
-      )
-    }
-
-    const effectiveResource = resource ?? optionsResource ?? effectiveContextResource
-    if (!effectiveResource) {
-      throw new Error('No resource found. Provide a resource via the action handle or context.')
-    }
-
-    return applyDocumentActions(instance, {
-      actions: normalizedActions as DocumentAction[],
-      resource: effectiveResource,
-    })
-  }
+  return useApplyActions() as ReturnType<UseApplyDocumentActions>
 }

package/src/hooks/helpers/useApplyActions.test.tsx

@@ -0,0 +1,220 @@
+import {applyDocumentActions, createSanityInstance} from '@sanity/sdk'
+import {renderHook as reactRenderHook} from '@testing-library/react'
+import {describe, it} from 'vitest'
+
+import {renderHook} from '../../../test/test-utils'
+import {SanityInstanceContext} from '../../context/SanityInstanceContext'
+import {useSanityInstance} from '../context/useSanityInstance'
+import {useApplyActions} from './useApplyActions'
+
+vi.mock('@sanity/sdk', async (importOriginal) => {
+  const original = await importOriginal<typeof import('@sanity/sdk')>()
+  return {...original, applyDocumentActions: vi.fn()}
+})
+
+vi.mock('../context/useSanityInstance')
+
+const instance = createSanityInstance({projectId: 'p', dataset: 'd'})
+
+describe('useApplyActions', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+    vi.mocked(useSanityInstance).mockReturnValueOnce(instance)
+  })
+
+  it('uses the effective context resource', async () => {
+    const {result} = renderHook(() => useApplyActions())
+    result.current({
+      type: 'document.edit',
+      documentType: 'post',
+      documentId: 'abc',
+    })
+
+    expect(applyDocumentActions).toHaveBeenCalledExactlyOnceWith(instance, {
+      actions: [
+        {
+          type: 'document.edit',
+          documentType: 'post',
+          documentId: 'abc',
+          // resource named in test-utils
+          resource: {projectId: 'test', dataset: 'test'},
+        },
+      ],
+      resource: {projectId: 'test', dataset: 'test'},
+    })
+  })
+
+  it('uses the SanityInstance when resource is not provided', async () => {
+    const {result} = reactRenderHook(() => useApplyActions(), {
+      wrapper: ({children}) => (
+        <SanityInstanceContext.Provider value={instance}>{children}</SanityInstanceContext.Provider>
+      ),
+    })
+    result.current(
+      {
+        type: 'document.edit',
+        documentType: 'post',
+        documentId: 'abc',
+      },
+      {},
+    )
+
+    expect(applyDocumentActions).toHaveBeenCalledExactlyOnceWith(instance, {
+      actions: [
+        {
+          type: 'document.edit',
+          documentType: 'post',
+          documentId: 'abc',
+          resource: {projectId: 'p', dataset: 'd'},
+        },
+      ],
+      resource: {projectId: 'p', dataset: 'd'},
+    })
+  })
+
+  it('resolves resource from projectId and dataset on the action', async () => {
+    const {result} = renderHook(() => useApplyActions())
+    result.current({
+      type: 'document.edit',
+      documentType: 'post',
+      documentId: 'abc',
+      projectId: 'p',
+      dataset: 'd123',
+    })
+
+    expect(applyDocumentActions).toHaveBeenCalledExactlyOnceWith(instance, {
+      actions: [
+        {
+          type: 'document.edit',
+          documentType: 'post',
+          documentId: 'abc',
+          resource: {projectId: 'p', dataset: 'd123'},
+        },
+      ],
+      resource: {projectId: 'p', dataset: 'd123'},
+    })
+  })
+
+  it('throws when actions have mismatched project IDs', async () => {
+    const {result} = renderHook(() => useApplyActions())
+    expect(() => {
+      result.current([
+        {
+          type: 'document.edit',
+          documentType: 'post',
+          documentId: 'abc',
+          projectId: 'p123',
+          dataset: 'd',
+        },
+        {
+          type: 'document.edit',
+          documentType: 'post',
+          documentId: 'def',
+          projectId: 'p456',
+          dataset: 'd',
+        },
+      ])
+    }).toThrow(/Mismatched resources found in actions/)
+  })
+
+  it('throws when actions have mismatched datasets', async () => {
+    const {result} = renderHook(() => useApplyActions())
+    expect(() => {
+      result.current([
+        {
+          type: 'document.edit',
+          documentType: 'post',
+          documentId: 'abc',
+          projectId: 'p',
+          dataset: 'd1',
+        },
+        {
+          type: 'document.edit',
+          documentType: 'post',
+          documentId: 'def',
+          projectId: 'p',
+          dataset: 'd2',
+        },
+      ])
+    }).toThrow(/Mismatched resources found in actions/)
+  })
+
+  it('throws when actions have mismatched resources', async () => {
+    const {result} = renderHook(() => useApplyActions())
+    expect(() => {
+      result.current([
+        {
+          type: 'document.edit',
+          documentType: 'post',
+          documentId: 'abc',
+          resource: {projectId: 'p', dataset: 'd1'},
+        },
+        {
+          type: 'document.edit',
+          documentType: 'post',
+          documentId: 'def',
+          resource: {projectId: 'p', dataset: 'd2'},
+        },
+      ])
+    }).toThrow(/Mismatched resources found in actions/)
+  })
+
+  it('throws when mixing projectId/dataset and resource with a mismatch (projectId first)', async () => {
+    const {result} = renderHook(() => useApplyActions())
+    expect(() => {
+      result.current([
+        {
+          type: 'document.edit',
+          documentType: 'post',
+          documentId: 'abc',
+          projectId: 'p1',
+          dataset: 'd',
+        },
+        {
+          type: 'document.edit',
+          documentType: 'post',
+          documentId: 'def',
+          resource: {projectId: 'p2', dataset: 'd'},
+        },
+      ])
+    }).toThrow(/Mismatched resources found in actions/)
+  })
+
+  it('throws when mixing resource and projectId/dataset with a mismatch (resource first)', async () => {
+    const {result} = renderHook(() => useApplyActions())
+    expect(() => {
+      result.current([
+        {
+          type: 'document.edit',
+          documentType: 'post',
+          documentId: 'abc',
+          resource: {projectId: 'p1', dataset: 'd'},
+        },
+        {
+          type: 'document.edit',
+          documentType: 'post',
+          documentId: 'def',
+          projectId: 'p2',
+          dataset: 'd',
+        },
+      ])
+    }).toThrow(/Mismatched resources found in actions/)
+  })
+
+  it('throws when a top-level options resource conflicts with an action resource', async () => {
+    const {result} = renderHook(() => useApplyActions())
+    expect(() => {
+      result.current(
+        [
+          {
+            type: 'document.edit',
+            documentType: 'post',
+            documentId: 'abc',
+            resource: {projectId: 'p', dataset: 'd1'},
+          },
+        ],
+        {resource: {projectId: 'p', dataset: 'd2'}},
+      )
+    }).toThrow(/Mismatched resources found in actions/)
+  })
+})

package/src/hooks/helpers/useApplyActions.ts

@@ -0,0 +1,68 @@
+import {type Action, type ActionsResult, applyDocumentActions} from '@sanity/sdk'
+import {isDeepEqual} from '@sanity/sdk/_internal'
+import {useContext} from 'react'
+
+import {type ResourceHandle} from '../../config/handles'
+import {ResourcesContext} from '../../context/ResourcesContext'
+import {useSanityInstance} from '../context/useSanityInstance'
+import {normalizeResourceOptions, useEffectiveContextResource} from './useNormalizedResourceOptions'
+
+/**
+ * @internal
+ *
+ * Shared implementation behind `useApplyDocumentActions` and
+ * `useApplyReleaseActions`. Resolves the effective resource from the action
+ * handles, top-level `options`, or context (in that order), validates that
+ * everything agrees on a single resource, and forwards to
+ * `applyDocumentActions`.
+ *
+ * The two public hooks differ only in their input/output types — at runtime
+ * they're identical because core's `applyDocumentActions` accepts the full
+ * `Action` union.
+ */
+export function useApplyActions(): (
+  actionOrActions: Action | Action[],
+  options?: ResourceHandle,
+) => Promise<ActionsResult> {
+  const instance = useSanityInstance()
+  const resources = useContext(ResourcesContext)
+  const effectiveContextResource = useEffectiveContextResource()
+
+  return (actionOrActions, options) => {
+    const actions = Array.isArray(actionOrActions) ? actionOrActions : [actionOrActions]
+    const optionsResource = options
+      ? normalizeResourceOptions(options, resources, effectiveContextResource).resource
+      : undefined
+
+    const normalizedActions = actions.map((action) =>
+      normalizeResourceOptions(action, resources, effectiveContextResource),
+    )
+
+    let resource
+    for (const action of normalizedActions) {
+      const actionResource = action['resource']
+      if (!resource && actionResource) resource = actionResource
+      if (!isDeepEqual(actionResource, resource)) {
+        throw new Error(
+          `Mismatched resources found in actions. All actions must belong to the same resource. Found "${JSON.stringify(actionResource)}" but expected "${JSON.stringify(resource)}".`,
+        )
+      }
+    }
+
+    if (optionsResource && resource && !isDeepEqual(optionsResource, resource)) {
+      throw new Error(
+        `Mismatched resources found in actions. Found top-level resource "${JSON.stringify(optionsResource)}" but expected resource from action handles "${JSON.stringify(resource)}".`,
+      )
+    }
+
+    const effectiveResource = resource ?? optionsResource ?? effectiveContextResource
+    if (!effectiveResource) {
+      throw new Error('No resource found. Provide a resource via the action handle or context.')
+    }
+
+    return applyDocumentActions(instance, {
+      actions: normalizedActions as Action[],
+      resource: effectiveResource,
+    })
+  }
+}

package/src/hooks/projection/useDocumentProjection.test.tsx

@@ -114,6 +114,47 @@ describe('useDocumentProjection', () => {
     expect(eventsUnsubscribe).toHaveBeenCalled()
   })
 
+  test('it re-reads the current snapshot when the element becomes visible again after an off-screen update', async () => {
+    // The store notifies subscribers only on changes *after* subscribe (it skips the
+    // value current at subscribe time), so the mocked subscribe never invokes its
+    // callback — matching real behavior. The hook must therefore re-read getCurrent()
+    // itself whenever the visibility gate (re)opens, otherwise a value that updated
+    // while the element was off-screen stays frozen on screen.
+    getCurrent.mockReturnValue({
+      data: {title: 'Initial Title', description: 'Initial Description'},
+      isPending: false,
+    })
+    const eventsUnsubscribe = vi.fn()
+    subscribe.mockImplementation(() => eventsUnsubscribe)
+
+    render(
+      <ResourceProvider fallback={<div>Loading...</div>}>
+        <TestComponent document={mockDocument} projection="{name, description}" />
+      </ResourceProvider>,
+    )
+
+    // Become visible, then hidden — mirrors a card being scrolled out of view.
+    await act(async () => {
+      intersectionObserverCallback([{isIntersecting: true} as IntersectionObserverEntry])
+    })
+    await act(async () => {
+      intersectionObserverCallback([{isIntersecting: false} as IntersectionObserverEntry])
+    })
+
+    // The underlying document changes while the element is off-screen.
+    getCurrent.mockReturnValue({
+      data: {title: 'Updated Title', description: 'Updated Description'},
+      isPending: false,
+    })
+
+    // Becoming visible again must surface the value that changed while hidden.
+    await act(async () => {
+      intersectionObserverCallback([{isIntersecting: true} as IntersectionObserverEntry])
+    })
+
+    expect(screen.getByText('Updated Title')).toBeInTheDocument()
+  })
+
   test('it suspends and resolves data when element becomes visible', async () => {
     // Mock the initial state to trigger suspense
     getCurrent.mockReturnValueOnce({

package/src/hooks/projection/useDocumentProjection.ts

@@ -235,6 +235,12 @@ export function useDocumentProjection<TData extends object>({
           switchMap((isVisible) =>
             isVisible
               ? new Observable<void>((obs) => {
+                  // `stateSource.subscribe` skips the value current at subscribe time;
+                  // (intentionally -- we only want new events)
+                  // but in this case the store might have updated while the element was off-screen;
+                  // so we fire an immediate notification here to make useSyncExternalStore
+                  // re-read getCurrent() and pick up the fresh value.
+                  obs.next()
                   return stateSource.subscribe(() => obs.next())
                 })
               : EMPTY,