fix: React 19 typings (finally)

dev/embedded-studio/package.json

@@ -15,8 +15,8 @@
     "styled-components": "^6.1.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^19.0.3",
+    "@types/react-dom": "^19.0.2",
     "@vitejs/plugin-react": "^4.3.4",
     "typescript": "5.7.2",
     "vite": "^5.4.11"

dev/test-studio/preview/FieldGroups.tsx

@@ -2,7 +2,7 @@ import {Box, Card, Stack, Text} from '@sanity/ui'
 
 import {useQuery} from './loader'
 
-export function FieldGroups(): JSX.Element {
+export function FieldGroups(): React.JSX.Element {
   const {data, loading, error} = useQuery<
     {
       _id: string

dev/test-studio/preview/SimpleBlockPortableText.tsx

@@ -19,7 +19,7 @@ const components: PortableTextComponents = {
   },
 }
 
-export function SimpleBlockPortableText(): JSX.Element {
+export function SimpleBlockPortableText(): React.JSX.Element {
   const {data, loading, error} = useQuery<
     {
       _id: string

package.json

@@ -122,7 +122,7 @@
     "@types/glob": "^7.2.0",
     "@types/lodash": "^4.17.7",
     "@types/node": "^22.10.0",
-    "@types/react": "^18.3.18",
+    "@types/react": "^19.0.3",
     "@types/semver": "^7.5.6",
     "@types/yargs": "^17.0.7",
     "@typescript-eslint/eslint-plugin": "^7.18.0",

packages/@sanity/block-tools/package.json

@@ -50,7 +50,6 @@
   },
   "dependencies": {
     "@sanity/types": "3.68.3",
-    "@types/react": "^18.3.5",
     "get-random-values-esm": "1.0.2",
     "lodash": "^4.17.21"
   },
@@ -60,11 +59,15 @@
     "@sanity/schema": "3.68.3",
     "@types/jsdom": "^20.0.0",
     "@types/lodash": "^4.17.7",
+    "@types/react": "^19.0.3",
     "@vercel/stega": "0.1.2",
     "@vitest/coverage-v8": "^2.1.8",
     "jsdom": "^23.0.1",
     "vitest": "^2.1.8"
   },
+  "peerDependencies": {
+    "@types/react": "18 || 19"
+  },
   "publishConfig": {
     "access": "public"
   }

packages/@sanity/cli/test/test-template/package.json

@@ -20,8 +20,8 @@
     "@sanity/vision": "^3.62.0",
     "@tailwindcss/typography": "^0.5.15",
     "@types/node": "^22.7.8",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.0.3",
+    "@types/react-dom": "^19.0.2",
     "@vercel/speed-insights": "^1.0.13",
     "autoprefixer": "^10.4.20",
     "date-fns": "^4.1.0",

packages/@sanity/schema/package.json

@@ -78,7 +78,7 @@
     "@sanity/icons": "^3.5.7",
     "@types/lodash": "^4.17.7",
     "@types/object-inspect": "^1.13.0",
-    "@types/react": "^18.3.18",
+    "@types/react": "^19.0.3",
     "rimraf": "^5.0.10",
     "vitest": "^2.1.8"
   }

packages/@sanity/types/package.json

@@ -55,7 +55,7 @@
     "@repo/package.config": "workspace:*",
     "@repo/test-config": "workspace:*",
     "@sanity/insert-menu": "1.0.18",
-    "@types/react": "^18.3.18",
+    "@types/react": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
     "react": "^18.3.1",
     "rimraf": "^5.0.10",

packages/@sanity/types/src/schema/definition/type/common.ts

@@ -1,4 +1,4 @@
-import {type ComponentType, type ReactElement, type ReactNode} from 'react'
+import {type ComponentType, type ReactNode} from 'react'
 
 import {type ConditionalProperty, type DeprecatedProperty, type I18nTextRecord} from '../../types'
 import {type ObjectOptions} from './object'
@@ -55,7 +55,7 @@ export interface BaseSchemaTypeOptions {
 export interface BaseSchemaDefinition {
   name: string
   title?: string
-  description?: string | ReactElement
+  description?: string | React.JSX.Element
   hidden?: ConditionalProperty
   readOnly?: ConditionalProperty
   icon?: ComponentType | ReactNode

packages/@sanity/vision/src/components/ResultView.tsx

@@ -9,7 +9,7 @@ import {ResultViewWrapper} from './ResultView.styled'
 
 const lru = new LRU({maxSize: 50000})
 
-export function ResultView(props: {data: unknown; datasetName: string}): JSX.Element {
+export function ResultView(props: {data: unknown; datasetName: string}): React.JSX.Element {
   const {data, datasetName} = props
   const workspaceDataset = useDataset()
 

packages/@sanity/vision/src/components/VisionGui.tsx

@@ -151,11 +151,11 @@ interface VisionGuiState {
 }
 
 export class VisionGui extends PureComponent<VisionGuiProps, VisionGuiState> {
-  _visionRoot: RefObject<HTMLDivElement>
-  _queryEditorContainer: RefObject<HTMLDivElement>
-  _paramsEditorContainer: RefObject<HTMLDivElement>
-  _operationUrlElement: RefObject<HTMLInputElement>
-  _customApiVersionElement: RefObject<HTMLInputElement>
+  _visionRoot: RefObject<HTMLDivElement | null>
+  _queryEditorContainer: RefObject<HTMLDivElement | null>
+  _paramsEditorContainer: RefObject<HTMLDivElement | null>
+  _operationUrlElement: RefObject<HTMLInputElement | null>
+  _customApiVersionElement: RefObject<HTMLInputElement | null>
   _resizeListener: ResizeObserver | undefined
   _querySubscription: Subscription | undefined
   _listenSubscription: Subscription | undefined

packages/sanity/package.json

@@ -183,7 +183,7 @@
     "@sentry/react": "^8.33.0",
     "@tanstack/react-table": "^8.16.0",
     "@tanstack/react-virtual": "^3.11.2",
-    "@types/react-is": "^18.3.0",
+    "@types/react-is": "^19.0.0",
     "@types/shallow-equals": "^1.0.0",
     "@types/speakingurl": "^13.0.3",
     "@types/tar-stream": "^3.1.3",
@@ -288,8 +288,8 @@
     "@types/log-symbols": "^2.0.0",
     "@types/node": "^22.10.0",
     "@types/raf": "^3.4.0",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^19.0.3",
+    "@types/react-dom": "^19.0.2",
     "@types/refractor": "^3.0.0",
     "@types/resolve-from": "^4.0.0",
     "@types/semver": "^6.2.3",

packages/sanity/playwright-ct/tests/formBuilder/tree-editing/TreeEditingStory.tsx

@@ -162,7 +162,7 @@ interface TreeEditingStoryProps {
   value?: SanityDocument
 }
 
-export function TreeEditingStory(props: TreeEditingStoryProps): JSX.Element {
+export function TreeEditingStory(props: TreeEditingStoryProps): React.JSX.Element {
   const {legacyEditing, openPath, value} = props
 
   const types = getSchemaTypes({legacyEditing})

packages/sanity/playwright-ct/tests/formBuilder/utils/TestWrapper.tsx

@@ -40,7 +40,7 @@ const StyledChangeConnectorRoot = styled(ChangeConnectorRoot)`
  * @description This component is used to wrap all tests in the providers it needs to be able to run successfully.
  * It provides a mock Sanity client and a mock workspace.
  */
-export const TestWrapper = (props: TestWrapperProps): JSX.Element | null => {
+export const TestWrapper = (props: TestWrapperProps): React.JSX.Element | null => {
   const {children, schemaTypes, betaFeatures} = props
   const [mockWorkspace, setMockWorkspace] = useState<Workspace | null>(null)
 

packages/sanity/src/_internal/cli/util/checkStudioDependencyVersions.ts

@@ -19,8 +19,8 @@ interface PackageInfo {
 // NOTE: when doing changes here, also remember to update versions in help docs at
 // https://sanity.io/admin/structure/docs;helpArticle;upgrade-packages
 const PACKAGES = [
-  {name: 'react', supported: ['^18'], deprecatedBelow: null},
-  {name: 'react-dom', supported: ['^18'], deprecatedBelow: null},
+  {name: 'react', supported: ['^18 || ^19'], deprecatedBelow: null},
+  {name: 'react-dom', supported: ['^18 || ^19'], deprecatedBelow: null},
   {name: 'styled-components', supported: ['^6'], deprecatedBelow: null},
   {name: '@sanity/ui', supported: ['^2'], deprecatedBelow: null},
 ]

packages/sanity/src/_internal/manifest/Icon.tsx

@@ -12,15 +12,15 @@ interface SchemaIconProps {
   subtitle?: string
 }
 
-const SchemaIcon = ({icon, title, subtitle}: SchemaIconProps): JSX.Element => {
+const SchemaIcon = ({icon, title, subtitle}: SchemaIconProps): React.JSX.Element => {
   return <ThemeProvider theme={theme}>{normalizeIcon(icon, title, subtitle)}</ThemeProvider>
 }
 
 function normalizeIcon(
   Icon: ComponentType | ReactNode | undefined,
   title: string,
   subtitle = '',
-): JSX.Element {
+): React.JSX.Element {
   if (isValidElementType(Icon)) return <Icon />
   if (isValidElement(Icon)) return Icon
   return createDefaultIcon(title, subtitle)

packages/sanity/src/core/comments/__workshop__/CommentsMessageURLSerializerStory.tsx

@@ -40,7 +40,7 @@ const BLOCKS: CommentMessage = [
   },
 ]
 
-export default function CommentsMessageURLSerializerStory(): JSX.Element {
+export default function CommentsMessageURLSerializerStory(): React.JSX.Element {
   return (
     <Container width={1} padding={4} sizing="border">
       <Stack space={4}>

packages/sanity/src/core/comments/components/pte/CommentMessageSerializer.tsx

@@ -78,7 +78,7 @@ interface CommentMessageSerializerProps {
  * @beta
  * @hidden
  */
-export function CommentMessageSerializer(props: CommentMessageSerializerProps): JSX.Element {
+export function CommentMessageSerializer(props: CommentMessageSerializerProps): React.JSX.Element {
   const {blocks} = props
 
   return (

packages/sanity/src/core/comments/components/pte/blocks/NormalBlock.tsx

@@ -10,7 +10,7 @@ interface NormalBlockProps {
   children: ReactNode
 }
 
-export function NormalBlock(props: NormalBlockProps): JSX.Element {
+export function NormalBlock(props: NormalBlockProps): React.JSX.Element {
   const {children} = props
 
   return <NormalText size={1}>{children}</NormalText>

packages/sanity/src/core/comments/components/reactions/CommentReactionsMenuButton.tsx

@@ -20,7 +20,7 @@ export interface CommentReactionsMenuButtonProps {
     open: boolean
     tooltipContent: string
     t: TFunction
-  }) => React.ReactElement
+  }) => React.JSX.Element
 }
 
 export function CommentReactionsMenuButton(props: CommentReactionsMenuButtonProps) {

packages/sanity/src/core/comments/components/reactions/CommentReactionsUsersTooltip.tsx

@@ -89,7 +89,7 @@ function FormattedUserList({currentUserId, userIds}: {currentUserId: string; use
    * not special case on _comma_ per se, but rather by the presence of a non-whitespace character.
    */
   const parts = listFormat.formatToParts(userIds)
-  const elements: JSX.Element[] = []
+  const elements: React.JSX.Element[] = []
   for (let i = 0; i < parts.length; i++) {
     const item = parts[i]
 

packages/sanity/src/core/components/DefaultDocument.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable i18next/no-literal-string */
-import {type ReactElement} from 'react'
 
 import {Favicons} from './Favicons'
 import {GlobalErrorHandler} from './globalErrorHandler'
@@ -122,7 +121,7 @@ const EMPTY_ARRAY: never[] = []
 /**
  * @hidden
  * @beta */
-export function DefaultDocument(props: DefaultDocumentProps): ReactElement {
+export function DefaultDocument(props: DefaultDocumentProps): React.JSX.Element {
   const {entryPath, css = EMPTY_ARRAY} = props
 
   return (

packages/sanity/src/core/components/WithReferringDocuments.tsx

@@ -1,5 +1,4 @@
 import {type SanityDocument} from '@sanity/types'
-import {type ReactElement} from 'react'
 
 import {useReferringDocuments} from '../hooks/useReferringDocuments'
 import {type DocumentStore} from '../store'
@@ -14,7 +13,7 @@ export function WithReferringDocuments({
   children,
   id,
 }: {
-  children: (props: {isLoading: boolean; referringDocuments: SanityDocument[]}) => ReactElement
+  children: (props: {isLoading: boolean; referringDocuments: SanityDocument[]}) => React.JSX.Element
   /**
    * @deprecated - no longer required
    */

packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx

@@ -7,7 +7,6 @@ import {
   forwardRef,
   Fragment,
   memo,
-  type ReactElement,
   type ReactNode,
   useCallback,
   useMemo,
@@ -30,7 +29,7 @@ export interface CollapseMenuProps {
   gap?: number | number[]
   menuButtonProps?: Omit<MenuButtonProps, 'id' | 'menu' | 'button'> & {
     id?: string
-    button?: ReactElement
+    button?: React.JSX.Element
   }
   onMenuClose?: () => void
 }
@@ -73,13 +72,13 @@ const OptionObserveElement = styled(ObserveElement)`
   ${OPTION_STYLE}
 `
 
-function _isReactElement(node: unknown): node is ReactElement {
+function _isReactElement(node: unknown): node is React.JSX.Element {
   return Boolean(node)
 }
 
 interface IntersectionEntry {
   intersects: boolean
-  element: ReactElement
+  element: React.JSX.Element
   // todo: potentially add bounding rects so we can calculate how many we can fit non-collapsed vs collapsed
 }
 
@@ -126,7 +125,7 @@ export const CollapseMenu = forwardRef(function CollapseMenu(
 
 /** @internal */
 export const AutoCollapseMenu = forwardRef(function AutoCollapseMenu(
-  props: Omit<CollapseMenuProps, 'children' | 'collapsed'> & {menuOptions: ReactElement[]},
+  props: Omit<CollapseMenuProps, 'children' | 'collapsed'> & {menuOptions: React.JSX.Element[]},
   ref: ForwardedRef<HTMLDivElement>,
 ) {
   const {
@@ -180,7 +179,7 @@ export const AutoCollapseMenu = forwardRef(function AutoCollapseMenu(
   )
 
   const handleExpandedIntersection = useCallback(
-    (e: IntersectionObserverEntry, element: ReactElement) => {
+    (e: IntersectionObserverEntry, element: React.JSX.Element) => {
       setExpandedIntersections((current) => {
         const key = element.key
         if (key === null) {
@@ -205,7 +204,7 @@ export const AutoCollapseMenu = forwardRef(function AutoCollapseMenu(
   )
 
   const handleCollapsedIntersection = useCallback(
-    (e: IntersectionObserverEntry, element: ReactElement) => {
+    (e: IntersectionObserverEntry, element: React.JSX.Element) => {
       setCollapsedIntersections((current) => {
         const key = element.key
         if (key === null) {
@@ -335,10 +334,10 @@ export const AutoCollapseMenu = forwardRef(function AutoCollapseMenu(
 })
 
 const RenderHidden = memo(function RenderHidden(props: {
-  elements: ReactElement[]
+  elements: React.JSX.Element[]
   gap?: number | number[]
   intersectionOptions: IntersectionObserverInit
-  onIntersectionChange: (e: IntersectionObserverEntry, element: ReactElement) => void
+  onIntersectionChange: (e: IntersectionObserverEntry, element: React.JSX.Element) => void
 }) {
   const {elements, gap, intersectionOptions, onIntersectionChange} = props
   return (

packages/sanity/src/core/components/collapseMenu/CollapseMenuButton.tsx

@@ -10,7 +10,7 @@ import {Button, type ButtonProps, type TooltipProps} from '../../../ui-component
 
 /** @internal */
 export interface CommonProps extends Omit<ButtonProps, 'text' | 'iconRight'> {
-  as?: ElementType | keyof JSX.IntrinsicElements
+  as?: ElementType | keyof React.JSX.IntrinsicElements
   dividerBefore?: boolean
   focused?: boolean
   tooltipProps?: TooltipProps

packages/sanity/src/core/components/collapseMenu/CollapseOverflowMenu.tsx

@@ -1,5 +1,5 @@
 import {Menu, MenuDivider} from '@sanity/ui'
-import {type ForwardedRef, forwardRef, Fragment, type ReactElement} from 'react'
+import {type ForwardedRef, forwardRef, Fragment} from 'react'
 
 import {MenuButton, type MenuButtonProps, MenuItem} from '../../../ui-components'
 import {type CollapseMenuProps} from './CollapseMenu'
@@ -13,7 +13,7 @@ export const CollapseOverflowMenu = forwardRef(function CollapseOverflowMenu(
   props: Pick<
     CollapseMenuProps,
     'disableRestoreFocusOnClose' | 'menuButtonProps' | 'onMenuClose'
-  > & {menuOptions: ReactElement[]; menuButton: ReactElement},
+  > & {menuOptions: React.JSX.Element[]; menuButton: React.JSX.Element},
   forwardedRef: ForwardedRef<HTMLButtonElement>,
 ) {
   const {disableRestoreFocusOnClose, menuButton, menuButtonProps, menuOptions, onMenuClose} = props

packages/sanity/src/core/components/collapseMenu/ObserveElement.tsx

@@ -1,8 +1,8 @@
 import {Flex} from '@sanity/ui'
-import {type ReactElement, useEffect, useState} from 'react'
+import {useEffect, useState} from 'react'
 
 interface ObserveElementProps {
-  children: ReactElement
+  children: React.JSX.Element
   options?: IntersectionObserverInit
   onIntersectionChange: IntersectionObserverCallback
 }