fix: refactor ReactElement to JSX.Element types (#1555)

src/core/components/autocomplete/__workshop__/constrainedHeight.tsx

@@ -81,7 +81,7 @@ function ConstrainedHeightExampleField({id, label}: {id: string; label: string})
   const renderPopover: AutocompleteProps['renderPopover'] = useCallback(
     (
       popoverProps: {
-        content: React.ReactElement<any> | null
+        content: React.JSX.Element | null
         hidden: boolean
         inputElement: HTMLInputElement | null
         onMouseEnter: () => void

src/core/components/autocomplete/autocomplete.tsx

@@ -6,7 +6,6 @@ import {
   HTMLProps,
   KeyboardEvent,
   MouseEvent,
-  ReactElement,
   ReactNode,
   Ref,
   cloneElement,
@@ -73,11 +72,11 @@ export interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseA
   /** @beta */
   relatedElements?: HTMLElement[]
   /** The callback function for rendering each option. */
-  renderOption?: (option: Option) => ReactElement<any>
+  renderOption?: (option: Option) => React.JSX.Element
   /** @beta */
   renderPopover?: (
     props: {
-      content: ReactElement<any> | null
+      content: React.JSX.Element | null
       hidden: boolean
       inputElement: HTMLInputElement | null
       onMouseEnter: () => void
@@ -726,4 +725,4 @@ export const Autocomplete = InnerAutocomplete as <Option extends BaseAutocomplet
     > & {
       ref?: Ref<HTMLInputElement>
     },
-) => ReactElement<any>
+) => React.JSX.Element

src/core/components/autocomplete/autocompleteOption.tsx

@@ -9,7 +9,7 @@ export interface AutocompleteOptionProps {
   value: string
 }
 
-export function AutocompleteOption(props: AutocompleteOptionProps): React.ReactElement<any> {
+export function AutocompleteOption(props: AutocompleteOptionProps): React.JSX.Element {
   const {children, id, onSelect, selected, value} = props
 
   const handleClick = useCallback(() => {

src/core/components/dialog/dialogProvider.tsx

@@ -16,7 +16,7 @@ export interface DialogProviderProps {
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export function DialogProvider(props: DialogProviderProps): React.ReactElement<any> {
+export function DialogProvider(props: DialogProviderProps): React.JSX.Element {
   const {children, position, zOffset} = props
 
   const contextValue: DialogContextValue = useMemo(

src/core/components/menu/__workshop__/asComponent.tsx

@@ -4,7 +4,7 @@ import {forwardRef} from 'react'
 const CustomLink = forwardRef(function CustomLink(
   props: {req: string} & Omit<React.HTMLProps<HTMLAnchorElement>, 'as' | 'href'>,
   ref: React.ForwardedRef<HTMLAnchorElement>,
-): React.ReactElement<any> {
+): React.JSX.Element {
   const {children, req, ...restProps} = props
 
   return (

src/core/components/menu/menuButton.tsx

@@ -25,9 +25,9 @@ export interface MenuButtonProps {
    * @deprecated Use `popover={{boundaryElement: element}}` instead.
    */
   boundaryElement?: HTMLElement
-  button: React.ReactElement<any>
+  button: React.JSX.Element
   id: string
-  menu?: React.ReactElement<any>
+  menu?: React.JSX.Element
   onClose?: () => void
   onOpen?: () => void
   /**

src/core/components/menu/menuGroup.tsx

@@ -41,7 +41,7 @@ export interface MenuGroupProps {
 export function MenuGroup(
   props: Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'popover' | 'ref' | 'tabIndex'> &
     MenuGroupProps,
-): React.ReactElement<any> {
+): React.JSX.Element {
   const {
     as = 'button',
     children,

src/core/components/tab/tabList.tsx

@@ -6,7 +6,7 @@ import {Inline, InlineProps} from '../../primitives'
  * @public
  */
 export interface TabListProps extends Omit<InlineProps, 'as' | 'height'> {
-  children: Array<React.ReactElement<any> | null | undefined | false>
+  children: Array<React.JSX.Element | null | undefined | false>
 }
 
 //Limits the width of tabs in tablist
@@ -29,7 +29,7 @@ export const TabList = forwardRef(function TabList(
   const {children: childrenProp, ...restProps} = props
   const [focusedIndex, setFocusedIndex] = useState(-1)
 
-  const children: React.ReactElement<any>[] = Children.toArray(childrenProp).filter(isValidElement)
+  const children: React.JSX.Element[] = Children.toArray(childrenProp).filter(isValidElement)
 
   const tabs = children.map((child, childIndex) =>
     cloneElement(child, {

src/core/components/toast/toast.tsx

@@ -53,7 +53,7 @@ const StyledToast = styled(Card)<{$duration?: number; tone: ThemeColorStateToneK
  */
 export function Toast(
   props: ToastProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'title'>,
-): React.ReactElement<any> {
+): React.JSX.Element {
   const {closable, description, duration, onClose, radius = 3, title, status, ...restProps} = props
   const cardTone = status ? STATUS_CARD_TONE[status] : 'default'
   const buttonTone = status ? BUTTON_TONE[status] : 'default'

src/core/components/toast/toastProvider.tsx

@@ -49,7 +49,7 @@ const ToastContainer = styled.div`
 /**
  * @public
  */
-export function ToastProvider(props: ToastProviderProps): React.ReactElement<any> {
+export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
   const {children, padding = 4, paddingX, paddingY, zOffset} = props
   const [state, _setState] = useState<ToastState>([])
   const toastsRef = useRef<{[key: string]: {timeoutId: NodeJS.Timeout}}>({})

src/core/components/tree/tree.tsx

@@ -30,7 +30,7 @@ export const Tree = memo(
     props: TreeProps &
       Omit<React.HTMLProps<HTMLDivElement>, 'align' | 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
     forwardedRef: React.ForwardedRef<HTMLDivElement>,
-  ): React.ReactElement<any> {
+  ): React.JSX.Element {
     const {children, space = 1, onFocus, ...restProps} = props
     const ref = useRef<HTMLDivElement | null>(null)
     const [focusedElement, setFocusedElement] = useState<HTMLElement | null>(null)

src/core/components/tree/treeGroup.tsx

@@ -9,7 +9,7 @@ export interface TreeGroupProps {
 export const TreeGroup = memo(function TreeGroup(
   props: TreeGroupProps &
     Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
-): React.ReactElement<any> {
+): React.JSX.Element {
   const {children, expanded = false, ...restProps} = props
   const tree = useTree()
 

src/core/components/tree/treeItem.tsx

@@ -46,7 +46,7 @@ const ToggleArrowText = styled(Text)`
  */
 export const TreeItem = memo(function TreeItem(
   props: TreeItemProps & Omit<React.HTMLProps<HTMLLIElement>, 'as' | 'ref' | 'role'>,
-): React.ReactElement<any> {
+): React.JSX.Element {
   const {
     children,
     expanded: expandedProp = false,

src/core/primitives/avatar/avatarStack.tsx

@@ -68,7 +68,7 @@ export const AvatarStack = forwardRef(function AvatarStack(
     size: sizeProp = 1,
     ...restProps
   } = props
-  const children: React.ReactElement<any>[] = Children.toArray(childrenProp).filter(isValidElement)
+  const children: React.JSX.Element[] = Children.toArray(childrenProp).filter(isValidElement)
   const maxLength = Math.max(maxLengthProp, 0)
   const size = useArrayProp(sizeProp)
 

src/core/primitives/card/__workshop__/asComponent.tsx

@@ -4,7 +4,7 @@ import {forwardRef} from 'react'
 const CustomLink = forwardRef(function CustomLink(
   props: {req: string} & Omit<React.HTMLProps<HTMLAnchorElement>, 'as' | 'href'>,
   ref: React.ForwardedRef<HTMLAnchorElement>,
-): React.ReactElement<any> {
+): React.JSX.Element {
   const {children, req, ...restProps} = props
 
   return (

src/core/primitives/popover/__workshop__/TestStory.tsx

@@ -1,5 +1,5 @@
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {ReactElement, useRef, useState} from 'react'
+import {useRef, useState} from 'react'
 import {
   WORKSHOP_CONTAINER_WIDTH_OPTIONS,
   WORKSHOP_PLACEMENT_OPTIONS,
@@ -12,7 +12,7 @@ import {Text} from '../../text'
 import {Popover} from '../popover'
 import {PopoverUpdateCallback} from '../types'
 
-export default function TestStory(): ReactElement<any> {
+export default function TestStory(): React.JSX.Element {
   const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
 

src/core/primitives/popover/popover.tsx

@@ -59,7 +59,7 @@ export interface PopoverProps
   arrow?: boolean
   /** @deprecated Use `floatingBoundary` and/or `referenceBoundary` instead */
   boundaryElement?: HTMLElement | null
-  children?: React.ReactElement<any>
+  children?: React.JSX.Element
   /**
    * When `true`, prevent overflow within the current boundary:
    * - by flipping on its side axis
@@ -117,7 +117,7 @@ export const Popover = memo(
     props: PopoverProps &
       Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'width'>,
     forwardedRef: React.ForwardedRef<HTMLDivElement>,
-  ): React.ReactElement<any> {
+  ): React.JSX.Element {
     const {container, layer} = useTheme_v2()
     const boundaryElementContext = useBoundaryElement()
 
@@ -449,7 +449,7 @@ Popover.displayName = 'Memo(ForwardRef(Popover))'
 // https://github.com/facebook/react/pull/28348
 //
 // Access the ref using the method that doesn't yield a warning.
-function getElementRef(element: React.ReactElement<any>) {
+function getElementRef(element: React.JSX.Element) {
   // React <=18 in DEV
   let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get
   let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning

src/core/primitives/tooltip/tooltip.tsx

@@ -47,7 +47,7 @@ export interface TooltipProps extends Omit<LayerProps, 'as'> {
   allowedAutoPlacements?: Placement[]
   arrow?: boolean
   boundaryElement?: HTMLElement | null
-  children?: React.ReactElement<any>
+  children?: React.JSX.Element
   content?: React.ReactNode
   disabled?: boolean
   fallbackPlacements?: Placement[]

src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupProvider.tsx

@@ -28,7 +28,7 @@ export interface TooltipDelayGroupProviderProps {
  */
 export function TooltipDelayGroupProvider(
   props: TooltipDelayGroupProviderProps,
-): React.ReactElement<any> {
+): React.JSX.Element {
   const {children, delay} = props
   const [isGroupActive, setIsGroupActive] = useDelayedState(false)
   const [openTooltipId, setOpenTooltipId] = useDelayedState<string | null>(null)

src/core/theme/__workshop__/build/story.tsx

@@ -13,15 +13,14 @@ import {
   ThemeColorInputModeKey,
 } from '@sanity/ui/theme'
 import {buildTheme} from '@sanity/ui/theme'
-import {ReactElement} from 'react'
 import {rem} from '../../../styles'
 import {useTheme_v2} from '../../useTheme'
 import {getCSSProps} from './helpers'
 import {Root} from './Root'
 
 const theme = buildTheme()
 
-export default function BuildStory(): ReactElement<any> {
+export default function BuildStory(): React.JSX.Element {
   return (
     <Root>
       <div

src/core/theme/themeColorProvider.tsx

@@ -14,7 +14,7 @@ export interface ThemeColorProviderProps {
 /**
  * @public
  */
-export function ThemeColorProvider(props: ThemeColorProviderProps): React.ReactElement<any> {
+export function ThemeColorProvider(props: ThemeColorProviderProps): React.JSX.Element {
   const {children, scheme, tone} = props
   const root = useRootTheme()
 

src/core/theme/themeProvider.tsx

@@ -23,7 +23,7 @@ export interface ThemeProviderProps {
 /**
  * @public
  */
-export function ThemeProvider(props: ThemeProviderProps): React.ReactElement<any> {
+export function ThemeProvider(props: ThemeProviderProps): React.JSX.Element {
   const parentTheme = useContext(ThemeContext)
   const {children} = props
   const scheme = props.scheme ?? (parentTheme?.scheme || 'light')

src/core/utils/arrow/arrow.tsx

@@ -1,4 +1,4 @@
-import {ForwardedRef, HTMLProps, ReactElement, forwardRef} from 'react'
+import {ForwardedRef, HTMLProps, forwardRef} from 'react'
 import {styled, css} from 'styled-components'
 import {useTheme_v2} from '../../theme'
 import {Point, compileCommands, getRoundedCommands} from './cmds'
@@ -68,7 +68,7 @@ export const Arrow = forwardRef(function Arrow(
     'width' | 'height'
   >,
   ref: ForwardedRef<HTMLDivElement>,
-): ReactElement<any> {
+): React.JSX.Element {
   const {width: w, height: h, radius = 0, ...restProps} = props
   const {card} = useTheme_v2()
   const strokeWidth = card.shadow.outline

src/core/utils/boundaryElement/boundaryElementProvider.tsx

@@ -13,9 +13,7 @@ export interface BoundaryElementProviderProps {
 /**
  * @public
  */
-export function BoundaryElementProvider(
-  props: BoundaryElementProviderProps,
-): React.ReactElement<any> {
+export function BoundaryElementProvider(props: BoundaryElementProviderProps): React.JSX.Element {
   const {children, element} = props
   const value: BoundaryElementContextValue = useMemo(() => ({version: 0.0, element}), [element])
 

src/core/utils/layer/layerProvider.tsx

@@ -15,7 +15,7 @@ export interface LayerProviderProps {
 /**
  * @public
  */
-export function LayerProvider(props: LayerProviderProps): React.ReactElement<any> {
+export function LayerProvider(props: LayerProviderProps): React.JSX.Element {
   const {children, zOffset: zOffsetProp = 0} = props
 
   // Get parent context values

src/core/utils/portal/portalProvider.tsx

@@ -21,7 +21,7 @@ export interface PortalProviderProps {
 /**
  * @public
  */
-export function PortalProvider(props: PortalProviderProps): React.ReactElement<any> {
+export function PortalProvider(props: PortalProviderProps): React.JSX.Element {
   const {boundaryElement, children, element, __unstable_elements: elementsProp} = props
   const elements = useUnique(elementsProp)
   const fallbackElement = useSyncExternalStore(

src/core/utils/virtualList/virtualList.tsx

@@ -47,7 +47,7 @@ export const VirtualList = forwardRef(function VirtualList(
     StackProps &
     Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'onChange' | 'ref'>,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
-): React.ReactElement<any> {
+): React.JSX.Element {
   const {as = 'div', gap = 0, getItemKey, items = [], onChange, renderItem, ...restProps} = props
   const {space} = useTheme_v2()
   const ref = useRef<HTMLDivElement | null>(null)

test/utils.tsx

@@ -5,7 +5,7 @@ import {
   RenderOptions as _TestRenderOptions,
   RenderResult,
 } from '@testing-library/react'
-import {StrictMode, Fragment, ReactElement, ReactNode} from 'react'
+import {StrictMode, Fragment, ReactNode} from 'react'
 
 export interface TestRenderOptions extends _TestRenderOptions {
   scheme?: ThemeColorSchemeKey
@@ -19,7 +19,7 @@ function DefaultWrapper({children}: {children?: ReactNode}) {
 }
 
 export function render(
-  rootElement: ReactElement<any>,
+  rootElement: React.JSX.Element,
   options: TestRenderOptions = {},
 ): RenderResult {
   const {