feat(next, ui): widget fields

[Copilot]

Adds configurable fields support to dashboard widgets — widgets can now declare a field schema (analogous to Blocks), with data editable via a drawer UI when in dashboard editing mode.

Changes

• Config — Widget type gains an optional fields: Field[] array; sanitizeConfig sanitizes widget fields the same way collection/global fields are sanitized
• Type generation — configToJSONSchema emits per-widget data schemas derived from fields; width type is narrowed to the allowed range based on minWidth/maxWidth constraints
• Typed exports — new TypedWidget, WidgetSlug, DataFromWidgetSlug types added to packages/payload/src/index.ts; WidgetInstance<TSlug> is now generic with typed data and constrained width
• WidgetServerProps<T> — generic parameter narrows both widgetData and widgetSlug for a given widget type
• UI — WidgetConfigDrawer renders a Form over the widget's fields; edit control hidden when widget has no fields; drawer saves data back into layout state
• buildFieldSchemaMap — widget fields included so Lexical/RSC field resolvers work inside widget field editors
• Docs — docs/custom-components/dashboard.mdx updated with field usage example

Example

// payload.config.ts
widgets: [
  {
    slug: 'sales-summary',
    ComponentPath: './components/SalesSummary.tsx#default',
    fields: [
      { name: 'title', type: 'text' },
      { name: 'timeframe', type: 'select', options: ['daily', 'weekly', 'monthly', 'yearly'] },
    ],
    minWidth: 'small',
    maxWidth: 'medium',
  },
]

// SalesSummary.tsx
import type { WidgetServerProps } from 'payload'
import type { SalesSummaryWidget } from '../payload-types'

export default function SalesSummaryWidget({ widgetData }: WidgetServerProps<SalesSummaryWidget>) {
  const title = widgetData?.title ?? 'Sales Summary'
  // widgetData is fully typed from the generated payload-types
}

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.