@sanity/sdk-react 2.14.1 → 2.16.0

package/package.json

@@ -1,30 +1,37 @@
 {
   "name": "@sanity/sdk-react",
-  "version": "2.14.1",
+  "version": "2.16.0",
   "private": false,
   "description": "Sanity SDK React toolkit for Content OS",
   "keywords": [
-    "sanity",
-    "sdk",
-    "content operating system",
     "cms",
+    "content",
+    "content operating system",
     "headless",
     "realtime",
-    "content"
+    "sanity",
+    "sdk"
   ],
   "homepage": "https://github.com/sanity-io/sdk/tree/main/packages/react/README.md",
   "bugs": {
     "url": "https://github.com/sanity-io/sdk/issues"
   },
+  "license": "MIT",
+  "author": "Sanity <developers@sanity.io>",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/sanity-io/sdk.git",
     "directory": "packages/react"
   },
-  "license": "MIT",
-  "author": "Sanity <developers@sanity.io>",
-  "sideEffects": false,
+  "files": [
+    "dist",
+    "src"
+  ],
   "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "source": "./src/_exports/index.ts",
@@ -33,68 +40,59 @@
     },
     "./package.json": "./package.json"
   },
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist",
-    "src"
-  ],
-  "browserslist": "extends @sanity/browserslist-config",
-  "prettier": "@sanity/prettier-config",
+  "publishConfig": {
+    "access": "public"
+  },
   "dependencies": {
-    "@sanity/client": "^7.22.0",
+    "@sanity/client": "^7.23.1",
     "@sanity/message-protocol": "^0.23.0",
-    "@sanity/types": "^6.0.0",
+    "@sanity/types": "^6.2.0",
     "groq": "3.88.1-typegen-experimental.0",
-    "react-compiler-runtime": "19.1.0-rc.2",
+    "react-compiler-runtime": "^1.0.0",
     "react-error-boundary": "^6.1.2",
     "rxjs": "^7.8.2",
-    "@sanity/sdk": "2.14.1"
+    "@sanity/sdk": "2.16.0"
   },
   "devDependencies": {
     "@sanity/browserslist-config": "^1.0.5",
     "@sanity/comlink": "^4.0.1",
-    "@sanity/pkg-utils": "^10.5.5",
-    "@sanity/prettier-config": "^3.0.0",
+    "@sanity/pkg-utils": "^10.5.8",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/node": "^24.12.4",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@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",
+    "@vitejs/plugin-react": "^6.0.3",
+    "@vitest/coverage-v8": "^4.1.10",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "eslint": "^10.6.0",
     "groq-js": "^1.30.2",
     "jsdom": "^29.1.1",
-    "prettier": "^3.8.4",
+    "oxfmt": "^0.58.0",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "rollup-plugin-visualizer": "^6.0.11",
-    "typescript": "^5.9.3",
-    "vite": "^7.3.5",
-    "vitest": "^4.1.8",
+    "rollup-plugin-visualizer": "^7.0.1",
+    "typescript": "^6.0.3",
+    "vite": "^8.1.4",
+    "vitest": "^4.1.10",
     "@repo/config-test": "0.0.1",
-    "@repo/config-eslint": "0.0.0",
-    "@repo/package.bundle": "3.82.0",
     "@repo/tsconfig": "0.0.1",
-    "@repo/package.config": "0.0.1"
+    "@repo/package.config": "0.0.1",
+    "@repo/package.bundle": "3.82.0",
+    "@repo/config-eslint": "0.0.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
-  "publishConfig": {
-    "access": "public"
-  },
+  "browserslist": "extends @sanity/browserslist-config",
   "scripts": {
     "build": "pkg build --strict --clean --check",
     "build:bundle": "vite build --configLoader runner --config package.bundle.ts",
     "clean": "rimraf dist",
     "dev": "pkg watch",
     "docs": "typedoc --json docs/typedoc.json --tsconfig ./tsconfig.dist.json",
-    "format": "prettier --write --cache --ignore-unknown .",
+    "format": "oxfmt",
     "lint": "eslint .",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",

package/src/_exports/sdk-react.ts

@@ -59,6 +59,7 @@ export {useStudioWorkspacesByProjectIdDataset} from '../hooks/dashboard/useStudi
 export {useWindowTitle} from '../hooks/dashboard/useWindowTitle'
 export {useDatasets} from '../hooks/datasets/useDatasets'
 export {useApplyDocumentActions} from '../hooks/document/useApplyDocumentActions'
+export {type CreateDocumentOverrides, useCreateDocument} from '../hooks/document/useCreateDocument'
 export {useDocument} from '../hooks/document/useDocument'
 export {useDocumentEvent} from '../hooks/document/useDocumentEvent'
 export {useDocumentPermissions} from '../hooks/document/useDocumentPermissions'

package/src/components/SDKProvider.test.tsx

@@ -1,41 +1,67 @@
+import {createSanityInstance, type SanityConfig} from '@sanity/sdk'
 import {render} from '@testing-library/react'
 import React from 'react'
-import {describe, expect, it, vi} from 'vitest'
+import {beforeEach, describe, expect, it, vi} from 'vitest'
 
+import {useDashboardOrganizationId} from '../hooks/auth/useDashboardOrganizationId'
+import {resolveOrgResources} from '../utils/resolveOrgResources'
 import {SDKProvider} from './SDKProvider'
 
-// Mock ResourceProvider to test nesting behavior
+const instance = createSanityInstance()
+
+// Returns the same object on every call so the module-level WeakMap cache works across renders.
+vi.mock('../hooks/context/useSanityInstance', () => {
+  return {useSanityInstance: () => instance}
+})
+
+vi.mock('../hooks/auth/useDashboardOrganizationId', () => ({
+  useDashboardOrganizationId: vi.fn(),
+}))
+
+vi.mock('../utils/resolveOrgResources', () => ({
+  resolveOrgResources: vi.fn(),
+}))
+
 vi.mock('../context/ResourceProvider', () => ({
   ResourceProvider: ({
     children,
-    ...props
+    // exclude fallback: it's a real ResourceProvider prop but not part of config
+    fallback: _fallback,
+    resource,
+    ...config
   }: {
     children: React.ReactNode
-    projectId?: string
-    dataset?: string
-  }) => {
-    return (
-      <div
-        data-testid="resource-provider"
-        data-config={JSON.stringify({
-          projectId: props.projectId,
-          dataset: props.dataset,
-        })}
-      >
-        {children}
-      </div>
-    )
-  },
+    fallback?: React.ReactNode
+    resource?: {projectId?: string; dataset?: string}
+  }) => (
+    <div
+      data-testid="resource-provider"
+      data-config={JSON.stringify(config)}
+      data-resource={JSON.stringify(resource ?? null)}
+    >
+      {children}
+    </div>
+  ),
 }))
 
-// Mock AuthBoundary
 vi.mock('./auth/AuthBoundary', () => ({
-  AuthBoundary: ({children}: {children: React.ReactNode}) => {
-    return <div data-testid="auth-boundary">{children}</div>
-  },
+  AuthBoundary: ({children, projectIds}: {children: React.ReactNode; projectIds?: string[]}) => (
+    <div data-testid="auth-boundary" data-project-ids={JSON.stringify(projectIds ?? [])}>
+      {children}
+    </div>
+  ),
 }))
 
+const mockResolveOrgResources = vi.mocked(resolveOrgResources)
+const mockUseDashboardOrganizationId = vi.mocked(useDashboardOrganizationId)
+
 describe('SDKProvider', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockResolveOrgResources.mockResolvedValue({})
+    mockUseDashboardOrganizationId.mockReturnValue(undefined)
+  })
+
   it('renders single ResourceProvider with AuthBoundary for a single config', () => {
     const config = {
       projectId: 'test-project',
@@ -93,4 +119,91 @@ describe('SDKProvider', () => {
       dataset: 'production',
     })
   })
+
+  it('preserves non-resource config fields (e.g. studio auth, perspective) on the root provider', () => {
+    const tokenSource = {subscribe: () => ({unsubscribe: () => {}})}
+    const config: SanityConfig = {
+      projectId: 'test-project',
+      dataset: 'production',
+      perspective: 'published',
+      studio: {authenticated: true, auth: {token: tokenSource}},
+    }
+
+    const {getAllByTestId} = render(
+      <SDKProvider config={config} fallback={<div>Loading...</div>}>
+        <div>Child Content</div>
+      </SDKProvider>,
+    )
+
+    const providers = getAllByTestId('resource-provider')
+    // The full first config is spread onto the root ResourceProvider so the
+    // root SanityInstance retains auth/perspective/etc. (The token source is a
+    // function and doesn't survive JSON serialization, so assert on the
+    // serializable fields and that the studio config object is carried through.)
+    const spreadConfig = JSON.parse(providers[0].getAttribute('data-config') || '{}')
+    expect(spreadConfig).toMatchObject({
+      projectId: 'test-project',
+      dataset: 'production',
+      perspective: 'published',
+      studio: {authenticated: true},
+    })
+  })
+
+  it('synthesizes the default resource from the first config when none is explicit', () => {
+    const config = {projectId: 'test-project', dataset: 'production'}
+
+    const {getAllByTestId} = render(
+      <SDKProvider config={config} fallback={<div>Loading...</div>}>
+        <div>Child Content</div>
+      </SDKProvider>,
+    )
+
+    const providers = getAllByTestId('resource-provider')
+    expect(JSON.parse(providers[0].getAttribute('data-resource') || 'null')).toEqual({
+      projectId: 'test-project',
+      dataset: 'production',
+    })
+  })
+
+  it('uses an explicitly provided "default" resource over the config-derived one', () => {
+    const config = {projectId: 'config-project', dataset: 'production'}
+    const resources = {default: {projectId: 'explicit-project', dataset: 'staging'}}
+
+    const {getAllByTestId} = render(
+      <SDKProvider config={config} resources={resources} fallback={<div>Loading...</div>}>
+        <div>Child Content</div>
+      </SDKProvider>,
+    )
+
+    const providers = getAllByTestId('resource-provider')
+    // Config fields still flow through for instance creation…
+    expect(JSON.parse(providers[0].getAttribute('data-config') || '{}')).toEqual(config)
+    // …but the explicit default resource wins as the resource context value.
+    expect(JSON.parse(providers[0].getAttribute('data-resource') || 'null')).toEqual(
+      resources.default,
+    )
+  })
+
+  it('collects deduped projectIds from both config and explicit resources', () => {
+    const configs = [
+      {projectId: 'project-1', dataset: 'production'},
+      {projectId: 'project-2', dataset: 'production'},
+    ]
+    const resources = {
+      // duplicates project-1 (should be deduped)
+      default: {projectId: 'project-1', dataset: 'production'},
+      other: {projectId: 'project-3', dataset: 'production'},
+    }
+
+    const {getByTestId} = render(
+      <SDKProvider config={configs} resources={resources} fallback={<div>Loading...</div>}>
+        <div>Child Content</div>
+      </SDKProvider>,
+    )
+
+    const projectIds = JSON.parse(
+      getByTestId('auth-boundary').getAttribute('data-project-ids') || '[]',
+    )
+    expect([...projectIds].sort()).toEqual(['project-1', 'project-2', 'project-3'])
+  })
 })

package/src/components/SDKProvider.tsx

@@ -1,10 +1,15 @@
-import {type DocumentResource, isImportError, type SanityConfig} from '@sanity/sdk'
+import {
+  type DocumentResource,
+  isDatasetResource,
+  isImportError,
+  type SanityConfig,
+} from '@sanity/sdk'
 import {type ReactElement, type ReactNode, useEffect, useMemo} from 'react'
 import {ErrorBoundary, type FallbackProps} from 'react-error-boundary'
 
 import {DEFAULT_RESOURCE_NAME} from '../constants'
+import {OrganizationResourcesProvider} from '../context/OrganizationResourcesProvider'
 import {ResourceProvider} from '../context/ResourceProvider'
-import {ResourcesContext} from '../context/ResourcesContext'
 import {AuthBoundary, type AuthBoundaryProps} from './auth/AuthBoundary'
 import {ChunkLoadError} from './errors/ChunkLoadError'
 import {clearChunkReloadFlag} from './errors/chunkReloadStorage'
@@ -17,6 +22,8 @@ export interface SDKProviderProps extends AuthBoundaryProps {
   config: SanityConfig | SanityConfig[]
   fallback: ReactNode
   resources?: Record<string, DocumentResource>
+  /** When set, automatically fetches and registers the organization's media library and canvas as named resources. */
+  inferMediaLibraryAndCanvas?: boolean
 }
 
 /**
@@ -40,38 +47,68 @@ export function SDKProvider({
   children,
   config,
   fallback,
+  inferMediaLibraryAndCanvas,
   ...props
 }: SDKProviderProps): ReactElement {
-  const allConfigs = Array.isArray(config) ? config : [config]
-  const resolvedConfig = allConfigs[0]
-  const projectIds = allConfigs.map((c) => c.projectId).filter((id): id is string => !!id)
+  // For legacy config support, extract the first config object as a default resource,
+  // matching the legacy behavior nesting ResourceProviders with the first config closest to users' application code.
+  // This should be removed when we remove legacy config support.
+  const defaultConfig = Array.isArray(config) ? config[0] : config
+  const defaultProjectId = defaultConfig?.projectId
+  const defaultDataset = defaultConfig?.dataset
 
-  // Extract static fields so the memo below doesn't take a reference dependency
-  // on `config` — inline config objects change identity on every render.
-  const singleConfig = Array.isArray(config) ? null : config
-  const defaultProjectId = singleConfig?.projectId
-  const defaultDataset = singleConfig?.dataset
-
-  // For a single config, synthesize a 'default' resource from its projectId/dataset
-  // so that hooks can resolve it via resourceName: 'default' or fall back to it
-  // automatically when no resource info is provided.
   const resourcesValue = useMemo(() => {
     const explicit = props.resources ?? {}
     if (defaultProjectId && defaultDataset && !Object.hasOwn(explicit, DEFAULT_RESOURCE_NAME)) {
       return {
-        [DEFAULT_RESOURCE_NAME]: {projectId: defaultProjectId, dataset: defaultDataset},
+        [DEFAULT_RESOURCE_NAME]: {
+          projectId: defaultProjectId,
+          dataset: defaultDataset,
+        },
         ...explicit,
       }
     }
     return explicit
   }, [defaultProjectId, defaultDataset, props.resources])
 
+  // Collect all projectIds from both resources and config, deduped so
+  // AuthBoundary doesn't verify the same project more than once.
+  const projectIds = useMemo(
+    () =>
+      Array.from(
+        new Set(
+          [
+            ...Object.values(resourcesValue)
+              .filter(isDatasetResource)
+              .map((resource) => resource.projectId),
+            ...(Array.isArray(config) ? config : [config]).map((configObj) => configObj.projectId),
+          ].filter((id): id is string => !!id),
+        ),
+      ),
+    [resourcesValue, config],
+  )
+
   return (
     <ErrorBoundary FallbackComponent={ChunkAwareFallback}>
       <ResetChunkReloadFlagOnMount />
-      <ResourceProvider {...resolvedConfig} fallback={fallback}>
+      {/* Spread the first config so SanityInstance can use the auth,
+        perspective, and other config fields; `resource` lets an explicitly
+        provided `default` resource override the config-derived resource. */}
+      <ResourceProvider
+        {...defaultConfig}
+        resource={resourcesValue[DEFAULT_RESOURCE_NAME]}
+        fallback={fallback}
+      >
         <AuthBoundary {...props} projectIds={projectIds}>
-          <ResourcesContext.Provider value={resourcesValue}>{children}</ResourcesContext.Provider>
+          {/* OrganizationResourcesProvider wraps ResourcesContext.
+            It merges explicit resources with lazily inferred org resources (media
+            library, canvas) and provides the combined map to the subtree. */}
+          <OrganizationResourcesProvider
+            resources={resourcesValue}
+            inferMediaLibraryAndCanvas={inferMediaLibraryAndCanvas}
+          >
+            {children}
+          </OrganizationResourcesProvider>
         </AuthBoundary>
       </ResourceProvider>
     </ErrorBoundary>

package/src/components/SanityApp.tsx

@@ -23,6 +23,35 @@ export interface SanityAppProps {
   children: React.ReactNode
   /* Fallback content to show when child components are suspending. Same as the `fallback` prop for React Suspense. */
   fallback: React.ReactNode
+  /**
+   * Set this to automatically fetch and register the organization's media library and canvas as named resources.
+   * These resources will be available to hooks as `media-library` and `canvas`.
+   *
+   * The SDK App must be running in the organization's Dashboard to use this feature.
+   *
+   * @example
+   * ```tsx
+   *
+   * const MyApp = () => {
+   *   // should "just work" because of inferMediaLibraryAndCanvas.
+   *   const {data: assets} = useDocuments({
+   *     documentType: 'sanity.asset',
+   *     resourceName: 'media-library',
+   *   })
+   *   return (
+   *     <div>
+   *       {assets.map((asset) => (
+   *         <div key={asset._id}>{asset.originalFilename}</div>
+   *       ))}
+   *     </div>
+   *   )
+   * }
+   * <SanityApp inferMediaLibraryAndCanvas>
+   *   <MyApp />
+   * </SanityApp>
+   * ```
+   */
+  inferMediaLibraryAndCanvas?: boolean
 }
 
 const REDIRECT_URL = 'https://sanity.io/welcome'

package/src/components/auth/AuthBoundary.recovery.test.tsx

@@ -0,0 +1,86 @@
+import {AuthStateType, getIsInDashboardState} from '@sanity/sdk'
+import {render, screen, waitFor} from '@testing-library/react'
+import {beforeEach, describe, expect, it, type Mock, vi} from 'vitest'
+
+import {ResourceProvider} from '../../context/ResourceProvider'
+import {useAuthState} from '../../hooks/auth/useAuthState'
+import {AuthBoundary} from './AuthBoundary'
+
+// NOTE: unlike AuthBoundary.test.tsx this file does NOT mock react-error-boundary
+// — we want the REAL ErrorBoundary so we can observe whether it recovers when the
+// auth store transitions back to LOGGED_IN (e.g. after a successful silent token
+// refresh via ComlinkTokenRefresh -> setAuthToken).
+
+vi.mock('@sanity/sdk', async () => {
+  const actual = await vi.importActual('@sanity/sdk')
+  return {
+    ...actual,
+    getIsInDashboardState: vi.fn(() => ({getCurrent: () => true})),
+  }
+})
+
+vi.mock('../../hooks/auth/useAuthState', () => ({useAuthState: vi.fn()}))
+vi.mock('../../hooks/auth/useLoginUrl', () => ({
+  useLoginUrl: vi.fn(() => 'https://example.com/login'),
+}))
+vi.mock('../../hooks/auth/useVerifyOrgProjects', () => ({useVerifyOrgProjects: vi.fn(() => null)}))
+vi.mock('../../hooks/auth/useLogOut', () => ({useLogOut: vi.fn(() => async () => {})}))
+vi.mock('../../hooks/auth/useHandleAuthCallback', () => ({
+  useHandleAuthCallback: vi.fn(() => async () => {}),
+}))
+vi.mock('../../hooks/comlink/useWindowConnection', () => ({
+  useWindowConnection: vi.fn(() => ({fetch: vi.fn().mockResolvedValue({token: 'fresh-token'})})),
+}))
+// Avoid injecting the SanityOS bridge.js <script> during import.
+vi.mock('../utils', () => ({isInIframe: vi.fn(() => false)}))
+
+const mockUseAuthState = useAuthState as Mock
+
+describe('AuthBoundary — recovery after silent token refresh (dashboard)', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    ;(getIsInDashboardState as Mock).mockReturnValue({getCurrent: () => true})
+  })
+
+  it('renders the app again once the session is re-established (LOGGED_IN)', async () => {
+    // 1. Session expires: a request 401s and the auth store goes to ERROR.
+    mockUseAuthState.mockReturnValue({
+      type: AuthStateType.ERROR,
+      error: Object.assign(new Error('Unauthorized'), {statusCode: 401}),
+    })
+
+    const {rerender} = render(
+      <ResourceProvider projectId="p" dataset="d" fallback={null}>
+        <AuthBoundary projectIds={['p']}>
+          <div>Protected Content</div>
+        </AuthBoundary>
+      </ResourceProvider>,
+    )
+
+    // The error boundary catches the AuthError and shows the auth-error screen.
+    await waitFor(() => {
+      expect(screen.getByText('Authentication Error')).toBeInTheDocument()
+    })
+
+    // 2. ComlinkTokenRefresh fetches a fresh token from the Dashboard, setAuthToken
+    //    lands it, /users/me re-fetches and the store returns to LOGGED_IN.
+    mockUseAuthState.mockReturnValue({
+      type: AuthStateType.LOGGED_IN,
+      currentUser: null,
+      token: 'fresh-token',
+    })
+    rerender(
+      <ResourceProvider projectId="p" dataset="d" fallback={null}>
+        <AuthBoundary projectIds={['p']}>
+          <div>Protected Content</div>
+        </AuthBoundary>
+      </ResourceProvider>,
+    )
+
+    // EXPECTED (desired) behaviour: the app recovers automatically, no Retry click.
+    await waitFor(() => {
+      expect(screen.getByText('Protected Content')).toBeInTheDocument()
+    })
+    expect(screen.queryByText('Authentication Error')).not.toBeInTheDocument()
+  })
+})

package/src/components/auth/AuthBoundary.tsx

@@ -109,6 +109,16 @@ export function AuthBoundary({
   LoginErrorComponent = LoginError,
   ...props
 }: AuthBoundaryProps): React.ReactNode {
+  /**
+   * When the session is re-established (e.g. ComlinkTokenRefresh silently mints a
+   * fresh token via setAuthToken), the auth store returns to LOGGED_IN but the
+   * ErrorBoundary stays latched on its fallback until reset. Keying it on the
+   * recovered session lets it clear automatically
+   */
+  const authState = useAuthState()
+  const sessionResetKey =
+    authState.type === AuthStateType.LOGGED_IN ? authState.token : authState.type
+
   const FallbackComponent = useMemo(() => {
     return function LoginComponentWithLayoutProps(fallbackProps: FallbackProps) {
       // Chunk-load errors from any lazy-loaded code beneath this boundary
@@ -131,7 +141,7 @@ export function AuthBoundary({
 
   return (
     <ComlinkTokenRefreshProvider>
-      <ErrorBoundary FallbackComponent={FallbackComponent}>
+      <ErrorBoundary FallbackComponent={FallbackComponent} resetKeys={[sessionResetKey]}>
         <AuthSwitch {...props} />
       </ErrorBoundary>
     </ComlinkTokenRefreshProvider>