test(core): use context selector for DocumentPaneProvider

packages/sanity/package.json

@@ -259,6 +259,7 @@
     "speakingurl": "^14.0.1",
     "tar-fs": "^2.1.1",
     "tar-stream": "^3.1.7",
+    "use-context-selector": "^2.0.0",
     "use-device-pixel-ratio": "^1.1.0",
     "use-hot-module-reload": "^2.0.0",
     "use-sync-external-store": "^1.2.0",

packages/sanity/src/_singletons/context/DocumentPaneContext.ts

@@ -1,9 +1,11 @@
-import {createContext} from 'sanity/_createContext'
+// import {createContext} from 'sanity/_createContext'
+
+import {createContext} from 'use-context-selector'
 
 import type {DocumentPaneContextValue} from '../../structure/panes/document/DocumentPaneContext'
 
 /** @internal */
 export const DocumentPaneContext = createContext<DocumentPaneContextValue | null>(
-  'sanity/_singletons/context/document-pane',
+  // 'sanity/_singletons/context/document-pane',
   null,
 )

packages/sanity/src/structure/panes/document/document-layout/DocumentLayout.tsx

@@ -61,23 +61,38 @@ const StyledChangeConnectorRoot = styled(ChangeConnectorRoot)`
 `
 
 export function DocumentLayout() {
-  const {
-    changesOpen,
-    documentId,
-    documentType,
-    fieldActions,
-    focusPath,
-    inspectOpen,
-    inspector,
-    inspectors,
-    onFocus,
-    onHistoryOpen,
-    onMenuAction,
-    onPathOpen,
-    paneKey,
-    schemaType,
-    value,
-  } = useDocumentPane()
+  // const {
+  //   changesOpen,
+  //   documentId,
+  //   documentType,
+  //   fieldActions,
+  //   focusPath,
+  //   inspectOpen,
+  //   inspector,
+  //   inspectors,
+  //   onFocus,
+  //   onHistoryOpen,
+  //   onMenuAction,
+  //   onPathOpen,
+  //   paneKey,
+  //   schemaType,
+  //   value,
+  // } = useDocumentPane()
+  const changesOpen = useDocumentPane((state) => state.changesOpen)
+  const inspectOpen = useDocumentPane((state) => state.inspectOpen)
+  const documentId = useDocumentPane((state) => state.documentId)
+  const documentType = useDocumentPane((state) => state.documentType)
+  const fieldActions = useDocumentPane((state) => state.fieldActions)
+  const focusPath = useDocumentPane((state) => state.focusPath)
+  const inspector = useDocumentPane((state) => state.inspector)
+  const inspectors = useDocumentPane((state) => state.inspectors)
+  const onFocus = useDocumentPane((state) => state.onFocus)
+  const onHistoryOpen = useDocumentPane((state) => state.onHistoryOpen)
+  const onMenuAction = useDocumentPane((state) => state.onMenuAction)
+  const onPathOpen = useDocumentPane((state) => state.onPathOpen)
+  const paneKey = useDocumentPane((state) => state.paneKey)
+  const schemaType = useDocumentPane((state) => state.schemaType)
+  const value = useDocumentPane((state) => state.value)
 
   const {features} = useStructureTool()
   const {t} = useTranslation(structureLocaleNamespace)

packages/sanity/src/structure/panes/document/useDocumentPane.tsx

@@ -1,15 +1,17 @@
-import {useContext} from 'react'
 import {DocumentPaneContext} from 'sanity/_singletons'
+import {type Context, useContextSelector} from 'use-context-selector'
 
 import {type DocumentPaneContextValue} from './DocumentPaneContext'
 
 /** @internal */
-export function useDocumentPane(): DocumentPaneContextValue {
-  const documentPane = useContext(DocumentPaneContext)
-
-  if (!documentPane) {
-    throw new Error('DocumentPane: missing context value')
-  }
+export function useDocumentPane<T = DocumentPaneContextValue>(
+  selector?: (value: DocumentPaneContextValue) => T,
+): T {
+  const selectorFn = selector || ((value: DocumentPaneContextValue) => value as T)
+  const documentPane = useContextSelector<DocumentPaneContextValue, T>(
+    DocumentPaneContext as Context<DocumentPaneContextValue>,
+    selectorFn,
+  )
 
   return documentPane
 }