refactor: apply react-element-default-any-props codemod

packages/react/src/ActionList/ActionList.examples.stories.tsx

@@ -33,7 +33,7 @@
 export default meta
 
 const NextJSLikeLink = forwardRef(
-  ({href, children}: {href: string; children: React.ReactNode}, ref): React.ReactElement => {
+  ({href, children}: {href: string; children: React.ReactNode}, ref): React.ReactElement<any> => {
     const child = React.Children.only(children)
     const childProps = {
       ref,

packages/react/src/ActionList/ActionListContainerContext.tsx

@@ -14,7 +14,7 @@
   // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   afterSelect?: Function
   enableFocusZone?: boolean
-  defaultTrailingVisual?: React.ReactElement
+  defaultTrailingVisual?: React.ReactElement<any>
 }
 
 export const ActionListContainerContext = React.createContext<ContextProps>({})

packages/react/src/ActionMenu/ActionMenu.test.tsx

@@ -53,7 +53,7 @@
   )
 }
 
-function ExampleWithTooltipV2(actionMenuTrigger: React.ReactElement): JSX.Element {
+function ExampleWithTooltipV2(actionMenuTrigger: React.ReactElement<any>): JSX.Element {
   return (
     <BaseStyles>
       <ActionMenu>

packages/react/src/ActionMenu/ActionMenu.tsx

@@ -35,7 +35,7 @@
   /**
    * Recommended: `ActionMenu.Button` or `ActionMenu.Anchor` with `ActionMenu.Overlay`
    */
-  children: React.ReactElement[] | React.ReactElement
+  children: React.ReactElement<any>[] | React.ReactElement<any>
 
   /**
    * If defined, will control the open/closed state of the overlay. Must be used in conjunction with `onOpenChange`.
@@ -179,11 +179,11 @@
   )
 }
 
-export type ActionMenuAnchorProps = {children: React.ReactElement; id?: string} & React.HTMLAttributes<HTMLElement>
+export type ActionMenuAnchorProps = {children: React.ReactElement<any>; id?: string} & React.HTMLAttributes<HTMLElement>
 const Anchor: WithSlotMarker<
   React.ForwardRefExoticComponent<
     {
-      children: React.ReactElement
+      children: React.ReactElement<any>
       id?: string
     } & React.HTMLAttributes<HTMLElement> &
       React.RefAttributes<HTMLElement>

packages/react/src/Autocomplete/AutocompleteMenu.tsx

@@ -19,9 +19,9 @@
 
 type OnSelectedChange<T> = (item: T | T[]) => void
 export type AutocompleteMenuItem = MandateProps<ActionListItemProps, 'id'> & {
-  leadingVisual?: React.FunctionComponent<React.PropsWithChildren<IconProps>> | React.ReactElement
+  leadingVisual?: React.FunctionComponent<React.PropsWithChildren<IconProps>> | React.ReactElement<any>
   text?: string
-  trailingVisual?: React.FunctionComponent<React.PropsWithChildren<IconProps>> | React.ReactElement
+  trailingVisual?: React.FunctionComponent<React.PropsWithChildren<IconProps>> | React.ReactElement<any>
 }
 
 const getDefaultSortFn = (isItemSelectedFn: (itemId: string) => boolean) => (itemIdA: string, itemIdB: string) =>

packages/react/src/Breadcrumbs/Breadcrumbs.tsx

@@ -41,7 +41,7 @@
 }
 
 type BreadcrumbsMenuItemProps = {
-  items: React.ReactElement[]
+  items: React.ReactElement<any>[]
   'aria-label'?: string
 }
 
@@ -141,7 +141,7 @@
 BreadcrumbsMenuItem.displayName = 'Breadcrumbs.MenuItem'
 
 const getValidChildren = (children: React.ReactNode) => {
-  return React.Children.toArray(children).filter(child => React.isValidElement(child)) as React.ReactElement[]
+  return React.Children.toArray(children).filter(child => React.isValidElement(child)) as React.ReactElement<any>[];
 }
 
 function Breadcrumbs({className, children, style, overflow = 'wrap', variant = 'normal'}: BreadcrumbsProps) {
@@ -166,10 +166,10 @@
 
   const rootItem = childArray[0]
 
-  const [visibleItems, setVisibleItems] = useState<React.ReactElement[]>(() => childArray)
+  const [visibleItems, setVisibleItems] = useState<React.ReactElement<any>[]>(() => childArray)
   const [childArrayWidths, setChildArrayWidths] = useState<number[]>(() => [])
 
-  const [menuItems, setMenuItems] = useState<React.ReactElement[]>([])
+  const [menuItems, setMenuItems] = useState<React.ReactElement<any>[]>([])
   const [rootItemWidth, setRootItemWidth] = useState<number>(0)
 
   const MENU_BUTTON_FALLBACK_WIDTH = 32 // Design system small IconButton
@@ -203,7 +203,7 @@
 
       let currentVisibleItems = [...childArray]
       let currentVisibleItemWidths = [...childArrayWidths]
-      let currentMenuItems: React.ReactElement[] = []
+      let currentMenuItems: React.ReactElement<any>[] = []
       let currentMenuItemsWidths: number[] = []
 
       if (availableWidth > 0 && currentVisibleItemWidths.length > 0) {

packages/react/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx

@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event'
 import {FeatureFlags} from '../../FeatureFlags'
 
 // Helper function to render with theme and feature flags
-const renderWithTheme = (component: React.ReactElement, flags?: Record<string, boolean>) => {
+const renderWithTheme = (component: React.ReactElement<any>, flags?: Record<string, boolean>) => {
   const wrappedComponent = flags ? <FeatureFlags flags={flags}>{component}</FeatureFlags> : <>{component}</>
   return HTMLRender(wrappedComponent)
 }

packages/react/src/Button/ButtonBase.tsx

@@ -13,7 +13,7 @@ import classes from './ButtonBase.module.css'
 import {isElement} from 'react-is'
 
 const renderModuleVisual = (
-  Visual: React.ElementType | React.ReactElement,
+  Visual: React.ElementType | React.ReactElement<any>,
   loading: boolean,
   visualName: string,
   counterLabel: boolean,

packages/react/src/Button/types.ts

@@ -58,17 +58,17 @@ export type ButtonProps = {
   /**
    * The icon for the IconButton
    */
-  icon?: React.FunctionComponent<IconProps> | React.ElementType | React.ReactElement | null
+  icon?: React.FunctionComponent<IconProps> | React.ElementType | React.ReactElement<any> | null
 
   /**
    * The leading visual which comes before the button content
    */
-  leadingVisual?: React.ElementType | React.ReactElement | null
+  leadingVisual?: React.ElementType | React.ReactElement<any> | null
 
   /**
    * The trailing visual which comes after the button content
    */
-  trailingVisual?: React.ElementType | React.ReactElement | null
+  trailingVisual?: React.ElementType | React.ReactElement<any> | null
 
   /**
    * Trailing action which comes after the trailing visual and is always the last element

packages/react/src/Checkbox/Checkbox.tsx

@@ -43,7 +43,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
   (
     {checked, className, defaultChecked, indeterminate, disabled, onChange, required, validationStatus, value, ...rest},
     ref,
-  ): ReactElement => {
+  ): ReactElement<any> => {
     const checkboxRef = useProvidedRefOrCreate(ref as React.RefObject<HTMLInputElement>)
     const checkboxGroupContext = useContext(CheckboxGroupContext)
     const handleOnChange: ChangeEventHandler<HTMLInputElement> = e => {

packages/react/src/Details/Details.tsx

@@ -5,7 +5,7 @@ import classes from './Details.module.css'
 import {useMergedRefs} from '../internal/hooks/useMergedRefs'
 
 const Root = React.forwardRef<HTMLDetailsElement, DetailsProps>(
-  ({className, children, ...rest}, forwardRef): ReactElement => {
+  ({className, children, ...rest}, forwardRef): ReactElement<any> => {
     const detailsRef = React.useRef<HTMLDetailsElement>(null)
     const ref = useMergedRefs(forwardRef, detailsRef)
 

packages/react/src/FilteredActionList/types.ts

@@ -4,7 +4,7 @@ import type {Group} from '../ActionList/Group'
 import type {ActionListGroupProps} from '../deprecated'
 import type {AriaRole} from '../utils/types'
 
-export type RenderItemFn = (props: FilteredActionListItemProps) => React.ReactElement
+export type RenderItemFn = (props: FilteredActionListItemProps) => React.ReactElement<any>
 
 export type ItemInput =
   | Merge<React.ComponentPropsWithoutRef<'div'>, FilteredActionListItemProps>

packages/react/src/NavList/NavList.features.stories.tsx

@@ -118,7 +118,7 @@ export const WithReactRouterLink = () => (
 type NextJSLinkProps = {href: string; children: React.ReactNode}
 
 const NextJSLikeLink = React.forwardRef<HTMLAnchorElement, NextJSLinkProps>(
-  ({href, children}, ref): React.ReactElement => {
+  ({href, children}, ref): React.ReactElement<any> => {
     const child = React.Children.only(children)
     const childProps = {
       ref,

packages/react/src/NavList/NavList.test.tsx

@@ -8,7 +8,7 @@
 type NextJSLinkProps = {href: string; children: React.ReactNode}
 
 const NextJSLikeLink = React.forwardRef<HTMLAnchorElement, NextJSLinkProps>(
-  ({href, children}, ref): React.ReactElement => {
+  ({href, children}, ref): React.ReactElement<any> => {
     const child = React.Children.only(children)
     const childProps = {
       ref,
@@ -30,7 +30,7 @@
         <NavList.Item href="/contact">Contact</NavList.Item>
       </NavList>,
     )
     expect(container).toMatchSnapshot()
   })
 
   it('renders with groups', () => {
@@ -46,7 +46,7 @@
         </NavList.Group>
       </NavList>,
     )
     expect(container).toMatchSnapshot()
   })
 
   it('supports TrailingAction', async () => {
@@ -219,7 +219,7 @@
     expect(queryByRole('list', {name: 'Item'})).toBeNull()
 
     // Snapshot styles
     expect(container).toMatchSnapshot()
   })
 
   it('does not have active styles if SubNav contains the current item and is open', () => {
@@ -240,7 +240,7 @@
     expect(queryByRole('list', {name: 'Item'})).toBeVisible()
 
     // Snapshot styles
     expect(container).toMatchSnapshot()
   })
 
   it('prevents more than 4 levels of nested SubNavs', () => {

packages/react/src/NavList/NavList.tsx

@@ -144,7 +144,7 @@ function ItemWithSubNav({children, subNav, depth: _depth, defaultOpen, style}: I
   }, [subNav, buttonId])
 
   return (
-    <ItemWithSubNavContext.Provider value={{buttonId, subNavId, isOpen}}>
+    (<ItemWithSubNavContext.Provider value={{buttonId, subNavId, isOpen}}>
       <ActionList.Item
         id={buttonId}
         aria-expanded={isOpen}
@@ -158,10 +158,10 @@ function ItemWithSubNav({children, subNav, depth: _depth, defaultOpen, style}: I
         <ActionList.TrailingVisual>
           <ChevronDownIcon className={classes.ExpandIcon} />
         </ActionList.TrailingVisual>
-        <SubItem>{React.cloneElement(subNav as React.ReactElement, {ref: subNavRef})}</SubItem>
+        <SubItem>{React.cloneElement(subNav as React.ReactElement<any>, {ref: subNavRef})}</SubItem>
       </ActionList.Item>
-    </ItemWithSubNavContext.Provider>
-  )
+    </ItemWithSubNavContext.Provider>)
+  );
 }
 
 // ----------------------------------------------------------------------------

packages/react/src/Overlay/Overlay.tsx

@@ -106,7 +106,7 @@ export const BaseOverlay = React.forwardRef(
       ...rest
     },
     forwardedRef,
-  ): ReactElement => {
+  ): ReactElement<any> => {
     return (
       <Component
         {...rest}
@@ -187,7 +187,7 @@ const Overlay = React.forwardRef<HTMLDivElement, internalOverlayProps>(
       ...props
     },
     forwardedRef,
-  ): ReactElement => {
+  ): ReactElement<any> => {
     const overlayRef = useRef<HTMLDivElement>(null)
     useRefObjectAsForwardedRef(forwardedRef, overlayRef)
     const slideAnimationDistance = 8 // var(--base-size-8), hardcoded to do some math

packages/react/src/Radio/Radio.tsx

@@ -51,7 +51,7 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
       ...rest
     }: RadioProps,
     ref,
-  ): ReactElement => {
+  ): ReactElement<any> => {
     const radioGroupContext = useContext(RadioGroupContext)
     const handleOnChange: ChangeEventHandler<HTMLInputElement> = e => {
       radioGroupContext?.onChange && radioGroupContext.onChange(e)

packages/react/src/SegmentedControl/SegmentedControl.figma.tsx

@@ -31,9 +31,9 @@ figma.connect(
     },
     example: ({selected, label, leadingIcon}) => (
       // @ts-expect-error: leadingIcon is optional
-      <SegmentedControl.Button selected={selected} leadingVisual={leadingIcon.fn}>
+      (<SegmentedControl.Button selected={selected} leadingVisual={leadingIcon.fn}>
         {label}
-      </SegmentedControl.Button>
+      </SegmentedControl.Button>)
     ),
   },
 )
@@ -44,7 +44,7 @@ figma.connect(
   {
     props: {
       selected: figma.enum('state', {selected: true}),
-      icon: figma.instance('icon').getProps<{name: string; fn: React.ReactElement}>(),
+      icon: figma.instance('icon').getProps<{name: string; fn: React.ReactElement<any>}>(),
     },
     example: ({selected, icon}) => (
       <SegmentedControl.IconButton aria-label="Describe action" selected={selected} icon={icon.fn} />

packages/react/src/SegmentedControl/SegmentedControl.tsx

@@ -61,7 +61,7 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
   )
     ? React.Children.toArray(children)[selectedIndex]
     : undefined
-  const getChildIcon = (childArg: React.ReactNode): React.ReactElement | null => {
+  const getChildIcon = (childArg: React.ReactNode): React.ReactElement<any> | null => {
     if (
       React.isValidElement<SegmentedControlButtonProps>(childArg) &&
       (childArg.type === Button || isSlot(childArg, Button))
@@ -112,7 +112,7 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
 
   return responsiveVariant === 'dropdown' ? (
     // Render the 'dropdown' variant of the SegmentedControlButton or SegmentedControlIconButton
-    <>
+    (<>
       <ActionMenu>
         {/*
           The aria-label is only provided as a backup when the designer or engineer neglects to show a label for the SegmentedControl.
@@ -150,10 +150,10 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
           </ActionList>
         </ActionMenu.Overlay>
       </ActionMenu>
-    </>
+    </>)
   ) : (
     // Render a segmented control
-    <ul
+    (<ul
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledby}
       ref={segmentedControlContainerRef}
@@ -221,8 +221,8 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
         // Render the children as-is and add the shared child props
         return React.cloneElement(child, sharedChildProps)
       })}
-    </ul>
-  )
+    </ul>)
+  );
 }
 
 Root.displayName = 'SegmentedControl'

packages/react/src/SegmentedControl/SegmentedControlButton.tsx

@@ -16,9 +16,9 @@ export type SegmentedControlButtonProps = {
   /** Whether the segment is selected. This is used for uncontrolled `SegmentedControls` to pick one `SegmentedControlButton` that is selected on the initial render. */
   defaultSelected?: boolean
   /** The leading visual comes before item label */
-  leadingVisual?: React.FunctionComponent<React.PropsWithChildren<IconProps>> | React.ReactElement
+  leadingVisual?: React.FunctionComponent<React.PropsWithChildren<IconProps>> | React.ReactElement<any>
   /** @deprecated Use `leadingVisual` instead. The leading icon comes before item label */
-  leadingIcon?: React.FunctionComponent<React.PropsWithChildren<IconProps>> | React.ReactElement
+  leadingIcon?: React.FunctionComponent<React.PropsWithChildren<IconProps>> | React.ReactElement<any>
   /** Optional counter to display on the right side of the button */
   count?: number | string
 } & ButtonHTMLAttributes<HTMLButtonElement | HTMLLIElement>

packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx

@@ -12,7 +12,7 @@ import type {FCWithSlotMarker} from '../utils/types'
 export type SegmentedControlIconButtonProps = {
   'aria-label': string
   /** The icon that represents the segmented control item */
-  icon: React.FunctionComponent<React.PropsWithChildren<IconProps>> | React.ReactElement
+  icon: React.FunctionComponent<React.PropsWithChildren<IconProps>> | React.ReactElement<any>
   /** Whether the segment is selected. This is used for controlled SegmentedControls, and needs to be updated using the onChange handler on SegmentedControl. */
   selected?: boolean
   /** Whether the segment is selected. This is used for uncontrolled SegmentedControls to pick one SegmentedControlButton that is selected on the initial render. */

packages/react/src/SelectPanel/SelectPanel.features.stories.tsx

@@ -43,7 +43,7 @@ const NoResultsMessage = (filter: string): {variant: 'empty'; title: string; bod
   }
 }
 
-const EmptyMessage: {variant: 'empty'; title: string; body: React.ReactElement} = {
+const EmptyMessage: {variant: 'empty'; title: string; body: React.ReactElement<any>} = {
   variant: 'empty',
   title: `You haven't created any projects yet`,
   body: (
@@ -340,7 +340,7 @@ export const WithNotice = () => {
   const [open, setOpen] = useState(false)
   const [noticeVariant, setNoticeVariant] = useState(0)
 
-  const noticeVariants: Array<{text: string | React.ReactElement; variant: 'info' | 'warning' | 'error'}> = [
+  const noticeVariants: Array<{text: string | React.ReactElement<any>; variant: 'info' | 'warning' | 'error'}> = [
     {
       variant: 'info',
       text: 'Try a different search term.',
@@ -637,7 +637,7 @@ export const CustomisedNoInitialItems = () => {
     setIsError(!isError)
   }, [setIsError, isError])
 
-  function getMessage(): {variant: 'empty' | 'error'; title: string; body: string | React.ReactElement} {
+  function getMessage(): {variant: 'empty' | 'error'; title: string; body: string | React.ReactElement<any>} {
     if (isError) return ErrorMessage
     else if (filter) return NoResultsMessage(filter)
     else return EmptyMessage
@@ -901,10 +901,10 @@ export const WithMessage = () => {
     | undefined
     | {
         title: string
-        body: string | React.ReactElement
+        body: string | React.ReactElement<any>
         variant: 'empty' | 'error' | 'warning'
         icon?: React.ComponentType<IconProps>
-        action?: React.ReactElement
+        action?: React.ReactElement<any>
       }
   > = [
     undefined, // Default message

packages/react/src/SelectPanel/SelectPanel.tsx

@@ -75,8 +75,8 @@ export type SelectPanelSecondaryAction =
 
 interface SelectPanelBaseProps {
   // TODO: Make `title` required in the next major version
-  title?: string | React.ReactElement
-  subtitle?: string | React.ReactElement
+  title?: string | React.ReactElement<any>
+  subtitle?: string | React.ReactElement<any>
   onOpenChange: (
     open: boolean,
     gesture: 'anchor-click' | 'anchor-key-press' | 'click-outside' | 'escape' | 'selection' | 'cancel',
@@ -89,20 +89,20 @@ interface SelectPanelBaseProps {
   initialLoadingType?: InitialLoadingType
   className?: string
   notice?: {
-    text: string | React.ReactElement
+    text: string | React.ReactElement<any>
     variant: 'info' | 'warning' | 'error'
   }
   message?: {
     title: string
-    body: string | React.ReactElement
+    body: string | React.ReactElement<any>
     variant: 'empty' | 'error' | 'warning'
     icon?: React.ComponentType<IconProps>
-    action?: React.ReactElement
+    action?: React.ReactElement<any>
   }
   /**
    * @deprecated Use `secondaryAction` instead.
    */
-  footer?: string | React.ReactElement
+  footer?: string | React.ReactElement<any>
   showSelectedOptionsFirst?: boolean
   /**
    * Whether to disable fullscreen behavior on narrow viewports.