fix(typings): use React.JSX namespace

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.10.16",
+  "version": "2.10.17-canary.0",
   "keywords": [
     "sanity",
     "ui",

src/core/components/menu/menuGroup.tsx

@@ -1,5 +1,5 @@
 import {ChevronRightIcon} from '@sanity/icons'
-import {isValidElement, useCallback, useEffect, useState, type JSX} from 'react'
+import {isValidElement, useCallback, useEffect, useState} from 'react'
 import {isValidElementType} from 'react-is'
 import {useArrayProp} from '../../hooks'
 import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives'
@@ -13,7 +13,7 @@ import {useMenu} from './useMenu'
  * @public
  */
 export interface MenuGroupProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   fontSize?: number | number[]
   icon?: React.ElementType | React.ReactNode
   padding?: number | number[]

src/core/components/menu/menuItem.tsx

@@ -7,7 +7,6 @@ import {
   useMemo,
   useRef,
   useState,
-  type JSX,
 } from 'react'
 import {isValidElementType} from 'react-is'
 import {useArrayProp} from '../../hooks'
@@ -23,7 +22,7 @@ import {useMenu} from './useMenu'
  * @public
  */
 export interface MenuItemProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   fontSize?: number | number[]
   hotkeys?: string[]
   icon?: React.ElementType | React.ReactNode

src/core/primitives/avatar/avatar.tsx

@@ -1,5 +1,5 @@
 import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
-import {forwardRef, useCallback, useEffect, useId, useMemo, useState, type JSX} from 'react'
+import {forwardRef, useCallback, useEffect, useId, useMemo, useState} from 'react'
 import ReactIs from 'react-is'
 import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'
@@ -16,7 +16,7 @@ export interface AvatarProps {
   __unstable_hideInnerStroke?: boolean
   animateArrowFrom?: AvatarPosition
   arrowPosition?: AvatarPosition
-  as?: React.ElementType | keyof JSX.IntrinsicElements
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   color?: ThemeColorAvatarColorKey
   initials?: string
   onImageLoadError?: (event: Error) => void

src/core/primitives/badge/badge.tsx

@@ -1,4 +1,4 @@
-import {forwardRef, type JSX} from 'react'
+import {forwardRef} from 'react'
 import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
@@ -13,7 +13,7 @@ import {BadgeStyleProps} from './types'
  * @public
  */
 export interface BadgeProps extends BoxProps, ResponsiveRadiusProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   fontSize?: number | number[]
   /** @deprecated No longer used. */
   mode?: BadgeMode

src/core/primitives/box/box.tsx

@@ -1,4 +1,4 @@
-import {forwardRef, type JSX} from 'react'
+import {forwardRef} from 'react'
 import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {
@@ -31,8 +31,8 @@ export interface BoxProps
     ResponsiveGridItemProps,
     ResponsiveMarginProps,
     ResponsivePaddingProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
-  forwardedAs?: React.ElementType | keyof JSX.IntrinsicElements
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  forwardedAs?: React.ElementType | keyof React.JSX.IntrinsicElements
 }
 
 const Root = styled.div<

src/core/primitives/button/button.tsx

@@ -1,4 +1,4 @@
-import {forwardRef, isValidElement, useMemo, type JSX} from 'react'
+import {forwardRef, isValidElement, useMemo} from 'react'
 import {isValidElementType} from 'react-is'
 import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'
@@ -17,7 +17,7 @@ import {buttonBaseStyles, buttonColorStyles} from './styles'
  * @public
  */
 export interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   fontSize?: number | number[]
   mode?: ButtonMode
   icon?: React.ElementType | React.ReactNode

src/core/primitives/code/code.tsx

@@ -1,4 +1,4 @@
-import {forwardRef, type JSX} from 'react'
+import {forwardRef} from 'react'
 import Refractor from 'react-refractor'
 import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'
@@ -9,7 +9,7 @@ import {codeBaseStyle} from './styles'
  * @public
  */
 export interface CodeProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   /** Define the language to use for syntax highlighting. */
   language?: string
   size?: number | number[]

src/core/primitives/heading/heading.tsx

@@ -1,5 +1,5 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef, type JSX} from 'react'
+import {forwardRef} from 'react'
 import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {
@@ -18,7 +18,7 @@ import {HeadingStyleProps} from './types'
 export interface HeadingProps {
   accent?: boolean
   align?: TextAlign | TextAlign[]
-  as?: React.ElementType | keyof JSX.IntrinsicElements
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   muted?: boolean
   size?: number | number[]
   /**

src/core/primitives/kbd/kbd.tsx

@@ -1,4 +1,4 @@
-import {forwardRef, type JSX} from 'react'
+import {forwardRef} from 'react'
 import {styled, css} from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
@@ -10,7 +10,7 @@ import {Text} from '../text'
  * @public
  */
 export interface KBDProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   fontSize?: number | number[]
   padding?: number | number[]
   radius?: Radius | Radius[]

src/core/primitives/label/label.tsx

@@ -1,5 +1,5 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef, type JSX} from 'react'
+import {forwardRef} from 'react'
 import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {responsiveLabelFont, responsiveTextAlignStyle} from '../../styles/internal'
@@ -12,7 +12,7 @@ import {labelBaseStyle} from './styles'
 export interface LabelProps {
   accent?: boolean
   align?: TextAlign | TextAlign[]
-  as?: React.ElementType | keyof JSX.IntrinsicElements
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   muted?: boolean
   size?: number | number[]
   /**

src/core/primitives/stack/stack.tsx

@@ -1,4 +1,4 @@
-import {forwardRef, type JSX} from 'react'
+import {forwardRef} from 'react'
 import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {Box, BoxProps} from '../box'
@@ -8,7 +8,7 @@ import {stackBaseStyle, responsiveStackSpaceStyle, ResponsiveStackSpaceStyleProp
  * @public
  */
 export interface StackProps extends BoxProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   space?: number | number[]
 }
 

src/core/primitives/text/text.tsx

@@ -1,5 +1,5 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef, type JSX} from 'react'
+import {forwardRef} from 'react'
 import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {
@@ -16,7 +16,7 @@ import {textBaseStyle} from './styles'
 export interface TextProps {
   accent?: boolean
   align?: TextAlign | TextAlign[]
-  as?: React.ElementType | keyof JSX.IntrinsicElements
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   /** When `true` the text color will be muted. */
   muted?: boolean
   size?: number | number[]

src/core/utils/elementQuery/elementQuery.tsx

@@ -1,4 +1,4 @@
-import {forwardRef, useImperativeHandle, useMemo, useState, type JSX} from 'react'
+import {forwardRef, useImperativeHandle, useMemo, useState} from 'react'
 import {useElementSize} from '../../hooks'
 import {useTheme_v2} from '../../theme'
 import {findMaxBreakpoints, findMinBreakpoints} from './helpers'
@@ -8,7 +8,7 @@ import {findMaxBreakpoints, findMinBreakpoints} from './helpers'
  * @beta
  */
 export interface MediaQueryProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   media?: number[]
 }
 

src/core/utils/layer/layer.tsx

@@ -1,12 +1,4 @@
-import {
-  FocusEvent,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  type JSX,
-} from 'react'
+import {FocusEvent, forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
 import {styled} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
 import {containsOrEqualsElement, isHTMLElement} from '../../helpers'
@@ -17,14 +9,14 @@ import {useLayer} from './useLayer'
  * @public
  */
 export interface LayerProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   /** A callback that fires when the layer becomes the top layer when it was not the top layer before. */
   onActivate?: (props: {activeElement: HTMLElement | null}) => void
   zOffset?: number | number[]
 }
 
 interface LayerChildrenProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   onActivate?: LayerProps['onActivate']
 }
 

src/core/utils/srOnly/srOnly.tsx

@@ -1,11 +1,11 @@
-import {forwardRef, type JSX} from 'react'
+import {forwardRef} from 'react'
 import {styled} from 'styled-components'
 
 /**
  * @public
  */
 export interface SrOnlyProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   children?: React.ReactNode
 }
 

src/core/utils/virtualList/virtualList.tsx

@@ -1,12 +1,4 @@
-import {
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-  type JSX,
-} from 'react'
+import {forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'
 import {styled} from 'styled-components'
 import {_isScrollable} from '../../helpers'
 import {_ResizeObserver} from '../../observers'
@@ -29,7 +21,7 @@ export interface VirtualListChangeOpts {
  * @beta
  */
 export interface VirtualListProps<Item = any> {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   gap?: number
   getItemKey?: (item: Item, itemIndex: number) => string
   items?: Item[]

stories/components/Autocomplete.stories.tsx

@@ -1,6 +1,5 @@
 import {SearchIcon} from '@sanity/icons'
 import type {Meta, StoryFn, StoryObj} from '@storybook/react'
-import type {JSX} from 'react'
 import {Autocomplete} from '../../src/core/components'
 import {Card} from '../../src/core/primitives'
 import {RADII} from '../constants'
@@ -14,7 +13,7 @@ const meta: Meta<typeof Autocomplete> = {
   },
   component: Autocomplete,
   decorators: [
-    (Story: StoryFn): JSX.Element => (
+    (Story: StoryFn): React.JSX.Element => (
       <Card paddingBottom={8} paddingTop={3}>
         {/* @ts-expect-error fix later */}
         <Story />

stories/components/Dialog.stories.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import {ArrowDownIcon, ArrowUpIcon} from '@sanity/icons'
 import type {Meta, StoryFn, StoryObj} from '@storybook/react'
-import {useCallback, useState, type JSX} from 'react'
+import {useCallback, useState} from 'react'
 import {Dialog} from '../../src/core/components'
 import {Box, Button, Card, Flex, Inline, Stack, Text} from '../../src/core/primitives'
 import {BoundaryElementProvider, PortalProvider} from '../../src/core/utils'
@@ -58,7 +58,7 @@ const meta: Meta<typeof Dialog> = {
   },
   component: Dialog,
   decorators: [
-    (Story: StoryFn): JSX.Element => {
+    (Story: StoryFn): React.JSX.Element => {
       const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
       const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
 

stories/components/MenuItem.stories.tsx

@@ -1,5 +1,4 @@
 import type {Meta, StoryFn, StoryObj} from '@storybook/react'
-import type {JSX} from 'react'
 import {Menu, MenuItem} from '../../src/core/components'
 import {Card, Container} from '../../src/core/primitives'
 import {LayerProvider} from '../../src/core/utils'
@@ -22,7 +21,7 @@ const meta: Meta<typeof MenuItem> = {
   },
   component: MenuItem,
   decorators: [
-    (Story: StoryFn): JSX.Element => (
+    (Story: StoryFn): React.JSX.Element => (
       <Container width={0}>
         <Card radius={3} shadow={2}>
           <LayerProvider>

stories/components/Toast.stories.tsx

@@ -1,14 +1,13 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import type {Meta, StoryFn, StoryObj} from '@storybook/react'
-import type {JSX} from 'react'
 import {Toast, ToastProvider, useToast} from '../../src/core/components'
 import {Button, Inline} from '../../src/core/primitives'
 
 const meta: Meta<typeof Toast> = {
   args: {title: 'Toast title', description: 'Toast description'},
   component: Toast,
   decorators: [
-    (Story: StoryFn): JSX.Element => (
+    (Story: StoryFn): React.JSX.Element => (
       <ToastProvider>
         {/* @ts-expect-error fix later */}
         <Story />

stories/helpers/matrixBuilder.tsx

@@ -1,4 +1,3 @@
-import type {JSX} from 'react'
 import {Card, Flex, Grid, Text} from '../../src/core/primitives'
 import {ThemeColorSchemeKey} from '../../src/theme'
 
@@ -96,7 +95,7 @@ export function matrixBuilder<Rows extends string[], Cols extends string[]>({
   title,
   renderItem,
   subHeader,
-}: MatrixBuilderProps<Rows, Cols>): JSX.Element {
+}: MatrixBuilderProps<Rows, Cols>): React.JSX.Element {
   return (
     <Table scheme={scheme} columns={columns} rows={rows} title={title} subHeader={subHeader}>
       {rows.map((row) => (

stories/primitives/AvatarCounter.stories.tsx

@@ -1,5 +1,4 @@
 import type {Meta, StoryFn, StoryObj} from '@storybook/react'
-import type {JSX} from 'react'
 import {AvatarCounter, AvatarStack} from '../../src/core/primitives'
 import {getAvatarSizeControls} from '../controls'
 
@@ -12,7 +11,7 @@ const meta: Meta<typeof AvatarCounter> = {
   },
   component: AvatarCounter,
   decorators: [
-    (Story: StoryFn): JSX.Element => (
+    (Story: StoryFn): React.JSX.Element => (
       <AvatarStack>
         {/* @ts-expect-error fix later */}
         <Story />

stories/primitives/Tooltip.stories.tsx

@@ -1,6 +1,5 @@
 import type {Meta, StoryFn, StoryObj} from '@storybook/react'
 import {userEvent, within} from '@storybook/test'
-import type {JSX} from 'react'
 import {Button, Card, Text, Tooltip, TooltipDelayGroupProvider} from '../../src/core/primitives'
 import {PLACEMENT_OPTIONS} from '../constants'
 import {getShadowControls, getSpaceControls} from '../controls'
@@ -16,7 +15,7 @@ const meta: Meta<typeof Tooltip> = {
     shadow: getShadowControls(),
   },
   decorators: [
-    (Story: StoryFn): JSX.Element => (
+    (Story: StoryFn): React.JSX.Element => (
       <Card padding={6}>
         {/* @ts-expect-error fix later */}
         <Story />