feat: accept null | undefined for PortableText value prop (#306)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: stipsan <81981+stipsan@users.noreply.github.com>

Author: Copilot

.changeset/accept-null-value-prop.md

@@ -0,0 +1,5 @@
+---
+"@portabletext/react": minor
+---
+
+The `value` prop now accepts `null | undefined`, and handles it appropriately, to reduce friction when using `<PortableText>` with [Sanity TypeGen](https://www.sanity.io/docs/apis-and-sdks/sanity-typegen)

.gitignore

@@ -54,3 +54,4 @@ jspm_packages
 
 .yalc
 yalc.lock
+package-lock.json

src/react-portable-text.tsx

@@ -40,7 +40,14 @@ export function PortableText<B extends TypedObject = PortableTextBlock>({
   onMissingComponent: missingComponentHandler = printWarning,
 }: PortableTextProps<B>): JSX.Element {
   const handleMissingComponent = missingComponentHandler || noop
-  const blocks = Array.isArray(input) ? input : [input]
+  let blocks: B[]
+  if (Array.isArray(input)) {
+    blocks = input
+  } else if (input == null) {
+    blocks = []
+  } else {
+    blocks = [input]
+  }
   const nested = nestLists(blocks, listNestingMode || LIST_NEST_MODE_HTML)
 
   const components = useMemo(() => {

src/types.ts

@@ -24,7 +24,7 @@ export interface PortableTextProps<
   /**
    * One or more blocks to render
    */
-  value: B | B[]
+  value: B | B[] | null | undefined
 
   /**
    * React components to use for rendering

test/typegen/typegen.test-d.tsx

@@ -48,26 +48,14 @@ describe('TypeGen value prop compatibility', () => {
     const post = await fetchPost('foo')
 
     // The `content` field from TypeGen is `Array<...> | null`
-    // PortableText's `value` prop currently requires `TypedObject | TypedObject[]`
-    // We want it to accept `null` (render nothing) or the TypeGen array directly
+    // PortableText's `value` prop accepts `null` (renders nothing) and the TypeGen array directly
 
-    // @ts-expect-error - Currently fails because `value` doesn't accept `null`
-    // In the future, this should work without the ts-expect-error
     ;(<PortableText value={post!.content} />)
   })
 
-  test('Non-null PostQueryResult.content is assignable to value prop', async () => {
-    const post = await fetchPost('foo')
-
-    // After removing null, the TypeGen array type IS compatible with value prop
-    const content = post!.content!
-    ;(<PortableText value={content} />)
-  })
-
   test('AuthorQueryResult.bio should be assignable to value prop (currently fails)', async () => {
     const author = await fetchAuthor('123')
 
-    // @ts-expect-error - Same issue as above with null and optional fields
     ;(<PortableText value={author!.bio} />)
   })