fix(desk): correct prop typings for pane view components

packages/sanity/src/desk/panes/document/documentPanel/header/DocumentHeaderTabs.tsx

@@ -25,7 +25,7 @@ export function DocumentHeaderTabs() {
 }
 
 function DocumentHeaderTab(props: {
-  icon?: React.ComponentType
+  icon?: React.ComponentType | React.ReactNode
   id: string
   isActive: boolean
   label: React.ReactNode

packages/sanity/src/desk/structureBuilder/Document.ts

@@ -4,9 +4,9 @@ import {ChildResolver} from './ChildResolver'
 import {SerializeOptions, Serializable, Child, DocumentNode, EditorNode} from './StructureNodes'
 import {SerializeError, HELP_URL} from './SerializeError'
 import {validateId} from './util/validateId'
-import {View, ViewBuilder, maybeSerializeView} from './views/View'
+import {ViewBuilder, maybeSerializeView} from './views/View'
 import {form} from './views'
-import {StructureContext} from './types'
+import type {StructureContext, View} from './types'
 
 const createDocumentChildResolver =
   ({resolveDocumentNode}: StructureContext): ChildResolver =>

packages/sanity/src/desk/structureBuilder/StructureNodes.ts

@@ -1,15 +1,15 @@
-import {DocumentListBuilder, DocumentList} from './DocumentList'
-import {ListItemBuilder} from './ListItem'
-import {ListBuilder, List} from './List'
-import {MenuItemBuilder} from './MenuItem'
-import {MenuItemGroupBuilder} from './MenuItemGroup'
-import {Component, ComponentBuilder} from './Component'
-import {DocumentListItemBuilder} from './DocumentListItem'
-import {ChildResolver} from './ChildResolver'
-import {DocumentTypeListBuilder} from './DocumentTypeList'
-import {InitialValueTemplateItemBuilder} from './InitialValueTemplateItem'
-import {DocumentBuilder} from './Document'
-import {View} from './views/View'
+import type {DocumentListBuilder, DocumentList} from './DocumentList'
+import type {ListItemBuilder} from './ListItem'
+import type {ListBuilder, List} from './List'
+import type {MenuItemBuilder} from './MenuItem'
+import type {MenuItemGroupBuilder} from './MenuItemGroup'
+import type {Component, ComponentBuilder} from './Component'
+import type {DocumentListItemBuilder} from './DocumentListItem'
+import type {ChildResolver} from './ChildResolver'
+import type {DocumentTypeListBuilder} from './DocumentTypeList'
+import type {InitialValueTemplateItemBuilder} from './InitialValueTemplateItem'
+import type {DocumentBuilder} from './Document'
+import type {View} from './types'
 
 export interface StructureNode {
   id: string

packages/sanity/src/desk/structureBuilder/createStructureBuilder.ts

@@ -1,5 +1,5 @@
 import {uniqueId} from 'lodash'
-import {SchemaType} from '@sanity/types'
+import type {SchemaType} from '@sanity/types'
 import {isValidElementType} from 'react-is'
 import {Source, getConfigContextFromSource} from '../../config'
 import {getPublishedId} from '../../util'
@@ -13,7 +13,7 @@ import {MenuItemBuilder, getOrderingMenuItemsForSchemaType, getOrderingMenuItem}
 import {ListItemBuilder} from './ListItem'
 import {MenuItemGroupBuilder} from './MenuItemGroup'
 import {DocumentListBuilder} from './DocumentList'
-import {Divider} from './StructureNodes'
+import type {Divider} from './StructureNodes'
 import {DocumentBuilder, documentFromEditor, documentFromEditorWithInitialValue} from './Document'
 import {ComponentInput, ComponentBuilder} from './Component'
 import {DocumentListItemBuilder} from './DocumentListItem'
@@ -23,7 +23,7 @@ import {
   defaultInitialValueTemplateItems,
   menuItemsFromInitialValueTemplateItems,
 } from './InitialValueTemplateItem'
-import {
+import type {
   StructureBuilder,
   UserComponent,
   StructureContext,

packages/sanity/src/desk/structureBuilder/types.ts

@@ -1,20 +1,33 @@
-import {SortOrdering} from '@sanity/types'
-import {ConfigContext, Source} from '../../config'
-import {InitialValueTemplateItem} from '../../templates'
-import {ComponentBuilder, ComponentInput} from './Component'
-import {DocumentBuilder, PartialDocumentNode} from './Document'
-import {DocumentListInput, DocumentListBuilder} from './DocumentList'
-import {DocumentListItemInput, DocumentListItemBuilder} from './DocumentListItem'
-import {DocumentTypeListInput} from './DocumentTypeList'
-import {InitialValueTemplateItemBuilder} from './InitialValueTemplateItem'
-import {ListBuilder, ListInput} from './List'
-import {ListItemBuilder, ListItemInput} from './ListItem'
-import {MenuItem, MenuItemBuilder} from './MenuItem'
-import {MenuItemGroup, MenuItemGroupBuilder} from './MenuItemGroup'
-import {Divider, EditorNode} from './StructureNodes'
-import {ComponentView, ComponentViewBuilder} from './views/ComponentView'
-import {FormViewBuilder} from './views/FormView'
-import {View} from './views/View'
+import type {SanityDocument, SchemaType, SortOrdering} from '@sanity/types'
+import type {ConfigContext, Source} from '../../config'
+import type {InitialValueTemplateItem} from '../../templates'
+import type {ComponentBuilder, ComponentInput} from './Component'
+import type {DocumentBuilder, PartialDocumentNode} from './Document'
+import type {DocumentListInput, DocumentListBuilder} from './DocumentList'
+import type {DocumentListItemInput, DocumentListItemBuilder} from './DocumentListItem'
+import type {DocumentTypeListInput} from './DocumentTypeList'
+import type {InitialValueTemplateItemBuilder} from './InitialValueTemplateItem'
+import type {ListBuilder, ListInput} from './List'
+import type {ListItemBuilder, ListItemInput} from './ListItem'
+import type {MenuItem, MenuItemBuilder} from './MenuItem'
+import type {MenuItemGroup, MenuItemGroupBuilder} from './MenuItemGroup'
+import type {Divider, EditorNode} from './StructureNodes'
+import type {ComponentView, ComponentViewBuilder} from './views/ComponentView'
+import type {FormView, FormViewBuilder} from './views/FormView'
+
+export type View = FormView | ComponentView
+
+export type UserViewComponent<TOptions = Record<string, any>> = React.ComponentType<{
+  document: {
+    draft: SanityDocument | null
+    displayed: Partial<SanityDocument>
+    historical: Partial<SanityDocument> | null
+    published: SanityDocument | null
+  }
+  documentId: string
+  options: TOptions
+  schemaType: SchemaType
+}>
 
 export type UserComponent = React.ComponentType<{
   child?: ComponentBuilder
@@ -78,7 +91,7 @@ export interface StructureBuilder {
   orderingMenuItem: (ordering: SortOrdering) => MenuItemBuilder
   orderingMenuItemsForType: (type: string) => MenuItemBuilder[]
   view: {
-    form: (spec?: Partial<View>) => FormViewBuilder
+    form: (spec?: Partial<FormView>) => FormViewBuilder
     component: (
       componentOrSpec?: Partial<ComponentView> | React.ComponentType<any>
     ) => ComponentViewBuilder

packages/sanity/src/desk/structureBuilder/views/ComponentView.ts

@@ -1,12 +1,13 @@
 import {SerializeOptions} from '../StructureNodes'
 import {SerializeError, HELP_URL} from '../SerializeError'
-import {UserComponent} from '../types'
 import {isRecord} from '../../../util'
-import {View, GenericViewBuilder} from './View'
+import type {UserViewComponent} from '../types'
+import {BaseView, GenericViewBuilder} from './View'
 
-export interface ComponentView extends View {
-  component: UserComponent
-  options: Record<string, unknown>
+export interface ComponentView<TOptions = Record<string, any>> extends BaseView {
+  type: 'component'
+  component: UserViewComponent
+  options: TOptions
 }
 
 const isComponentSpec = (spec: unknown): spec is ComponentView =>
@@ -18,7 +19,7 @@ export class ComponentViewBuilder extends GenericViewBuilder<
 > {
   protected spec: Partial<ComponentView>
 
-  constructor(componentOrSpec?: UserComponent | Partial<ComponentView>) {
+  constructor(componentOrSpec?: UserViewComponent | Partial<ComponentView>) {
     const spec = isComponentSpec(componentOrSpec) ? {...componentOrSpec} : {options: {}}
 
     super()
@@ -33,7 +34,7 @@ export class ComponentViewBuilder extends GenericViewBuilder<
     }
   }
 
-  component(component: UserComponent): ComponentViewBuilder {
+  component(component: UserViewComponent): ComponentViewBuilder {
     return this.clone({component})
   }
 

packages/sanity/src/desk/structureBuilder/views/FormView.ts

@@ -1,9 +1,11 @@
 import {SerializeOptions} from '../StructureNodes'
-import {View, GenericViewBuilder} from './View'
+import {BaseView, GenericViewBuilder} from './View'
 
-export type FormView = View
+export interface FormView extends BaseView {
+  type: 'form'
+}
 
-export class FormViewBuilder extends GenericViewBuilder<Partial<View>, FormViewBuilder> {
+export class FormViewBuilder extends GenericViewBuilder<Partial<BaseView>, FormViewBuilder> {
   protected spec: Partial<FormView>
 
   constructor(spec?: Partial<FormView>) {
@@ -12,12 +14,10 @@ export class FormViewBuilder extends GenericViewBuilder<Partial<View>, FormViewB
   }
 
   serialize(options: SerializeOptions = {path: []}): FormView {
-    const base = super.serialize(options)
-    const formView: FormView = {
-      ...base,
+    return {
+      ...super.serialize(options),
       type: 'form',
     }
-    return formView
   }
 
   clone(withSpec?: Partial<FormView>): FormViewBuilder {

packages/sanity/src/desk/structureBuilder/views/View.ts

@@ -4,16 +4,16 @@ import {HELP_URL, SerializeError} from '../SerializeError'
 import {validateId} from '../util/validateId'
 import {ComponentViewBuilder} from './ComponentView'
 import {FormViewBuilder} from './FormView'
+import {View} from '../types'
 
-export interface View {
-  type: string
+export interface BaseView {
   id: string
   title: string
   icon?: React.ComponentType | React.ReactNode
 }
 
-export abstract class GenericViewBuilder<TView extends Partial<View>, ConcreteImpl>
-  implements Serializable<View>
+export abstract class GenericViewBuilder<TView extends Partial<BaseView>, ConcreteImpl>
+  implements Serializable<BaseView>
 {
   protected spec: TView = {} as TView
 
@@ -41,7 +41,7 @@ export abstract class GenericViewBuilder<TView extends Partial<View>, ConcreteIm
     return this.spec.icon
   }
 
-  serialize(options: SerializeOptions = {path: []}): View {
+  serialize(options: SerializeOptions = {path: []}): BaseView {
     const {id, title, icon} = this.spec
     if (!id) {
       throw new SerializeError(
@@ -63,15 +63,14 @@ export abstract class GenericViewBuilder<TView extends Partial<View>, ConcreteIm
       id: validateId(id, options.path, options.index),
       title,
       icon,
-      type: 'view',
     }
   }
 
-  abstract clone(withSpec?: Partial<View>): ConcreteImpl
+  abstract clone(withSpec?: Partial<BaseView>): ConcreteImpl
 }
 
-function isSerializable(view: View | Serializable<View>): view is Serializable<View> {
-  return typeof (view as Serializable<View>).serialize === 'function'
+function isSerializable(view: BaseView | Serializable<BaseView>): view is Serializable<BaseView> {
+  return typeof (view as Serializable<BaseView>).serialize === 'function'
 }
 
 export function maybeSerializeView(

packages/sanity/src/desk/structureBuilder/views/index.ts

@@ -1,4 +1,4 @@
-import {UserComponent} from '../types'
+import type {UserViewComponent} from '../types'
 import {ComponentView, ComponentViewBuilder} from './ComponentView'
 import {FormView, FormViewBuilder} from './FormView'
 
@@ -8,5 +8,5 @@ export * from './View'
 
 export const form = (spec?: Partial<FormView>): FormViewBuilder => new FormViewBuilder(spec)
 export const component = (
-  componentOrSpec?: UserComponent | Partial<ComponentView>
+  componentOrSpec?: UserViewComponent | Partial<ComponentView>
 ): ComponentViewBuilder => new ComponentViewBuilder(componentOrSpec)

packages/sanity/src/desk/types.ts

@@ -1,10 +1,12 @@
-import {SchemaType, SanityDocument} from '@sanity/types'
+import {SchemaType} from '@sanity/types'
 import {Subscribable} from 'rxjs'
 import {GeneralPreviewLayoutKey} from '../components/previews'
 import {ConfigContext} from '../config'
 import {InitialValueTemplateItem} from '../templates'
 import {
+  ComponentView,
   DefaultDocumentNodeResolver,
+  FormView,
   StructureBuilder,
   StructureContext,
   UserComponent,
@@ -171,31 +173,7 @@ export interface CustomComponentPaneNode extends BaseResolvedPaneNode<'component
   __preserveInstance?: boolean
 }
 
-export type PaneView<TOptions = unknown> =
-  | {
-      id: string
-      type: 'form'
-      title: string
-      icon?: React.ComponentType
-    }
-  | {
-      id: string
-      type: 'component'
-      title: string
-      icon?: React.ComponentType
-      options?: TOptions
-      component?: React.ComponentType<{
-        documentId: string
-        options?: TOptions
-        schemaType: SchemaType
-        document: {
-          draft: SanityDocument | null
-          displayed: Partial<SanityDocument>
-          historical: Partial<SanityDocument> | null
-          published: SanityDocument | null
-        }
-      }>
-    }
+export type PaneView = FormView | ComponentView
 
 export interface DocumentPaneNode extends BaseResolvedPaneNode<'document'> {
   options: {