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

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

@@ -33,7 +33,8 @@ const meta: Meta = {
 export default meta
 
 const NextJSLikeLink = forwardRef(
-  ({href, children}: {href: string; children: React.ReactNode}, ref): React.ReactElement => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ({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,8 @@ type ContextProps = {
   // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   afterSelect?: Function
   enableFocusZone?: boolean
-  defaultTrailingVisual?: React.ReactElement
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  defaultTrailingVisual?: React.ReactElement<any>
 }
 
 export const ActionListContainerContext = React.createContext<ContextProps>({})

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

@@ -53,7 +53,8 @@ function ExampleWithTooltip(): JSX.Element {
   )
 }
 
-function ExampleWithTooltipV2(actionMenuTrigger: React.ReactElement): JSX.Element {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function ExampleWithTooltipV2(actionMenuTrigger: React.ReactElement<any>): JSX.Element {
   return (
     <BaseStyles>
       <ActionMenu>

packages/react/src/ActionMenu/ActionMenu.tsx

@@ -35,7 +35,8 @@ export type ActionMenuProps = {
   /**
    * Recommended: `ActionMenu.Button` or `ActionMenu.Anchor` with `ActionMenu.Overlay`
    */
-  children: React.ReactElement[] | React.ReactElement
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  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 +180,13 @@ const Menu: FCWithSlotMarker<React.PropsWithChildren<ActionMenuProps>> = ({
   )
 }
 
-export type ActionMenuAnchorProps = {children: React.ReactElement; id?: string} & React.HTMLAttributes<HTMLElement>
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type ActionMenuAnchorProps = {children: React.ReactElement<any>; id?: string} & React.HTMLAttributes<HTMLElement>
 const Anchor: WithSlotMarker<
   React.ForwardRefExoticComponent<
     {
-      children: React.ReactElement
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      children: React.ReactElement<any>
       id?: string
     } & React.HTMLAttributes<HTMLElement> &
       React.RefAttributes<HTMLElement>

packages/react/src/Autocomplete/AutocompleteMenu.tsx

@@ -19,9 +19,11 @@ import classes from './AutocompleteMenu.module.css'
 
 type OnSelectedChange<T> = (item: T | T[]) => void
 export type AutocompleteMenuItem = MandateProps<ActionListItemProps, 'id'> & {
-  leadingVisual?: React.FunctionComponent<React.PropsWithChildren<IconProps>> | React.ReactElement
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  leadingVisual?: React.FunctionComponent<React.PropsWithChildren<IconProps>> | React.ReactElement<any>
   text?: string
-  trailingVisual?: React.FunctionComponent<React.PropsWithChildren<IconProps>> | React.ReactElement
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  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,8 @@ const BreadcrumbsList = ({children}: React.PropsWithChildren) => {
 }
 
 type BreadcrumbsMenuItemProps = {
-  items: React.ReactElement[]
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  items: React.ReactElement<any>[]
   'aria-label'?: string
 }
 
@@ -141,7 +142,8 @@ const BreadcrumbsMenuItem = React.forwardRef<HTMLDetailsElement, BreadcrumbsMenu
 BreadcrumbsMenuItem.displayName = 'Breadcrumbs.MenuItem'
 
 const getValidChildren = (children: React.ReactNode) => {
-  return React.Children.toArray(children).filter(child => React.isValidElement(child)) as React.ReactElement[]
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  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 +168,12 @@ function Breadcrumbs({className, children, style, overflow = 'wrap', variant = '
 
   const rootItem = childArray[0]
 
-  const [visibleItems, setVisibleItems] = useState<React.ReactElement[]>(() => childArray)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [visibleItems, setVisibleItems] = useState<React.ReactElement<any>[]>(() => childArray)
   const [childArrayWidths, setChildArrayWidths] = useState<number[]>(() => [])
 
-  const [menuItems, setMenuItems] = useState<React.ReactElement[]>([])
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  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 +207,8 @@ function Breadcrumbs({className, children, style, overflow = 'wrap', variant = '
 
       let currentVisibleItems = [...childArray]
       let currentVisibleItemWidths = [...childArrayWidths]
-      let currentMenuItems: React.ReactElement[] = []
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      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,8 @@ 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>) => {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+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,8 @@ import classes from './ButtonBase.module.css'
 import {isElement} from 'react-is'
 
 const renderModuleVisual = (
-  Visual: React.ElementType | React.ReactElement,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Visual: React.ElementType | React.ReactElement<any>,
   loading: boolean,
   visualName: string,
   counterLabel: boolean,

packages/react/src/Button/types.ts

@@ -58,17 +58,20 @@ export type ButtonProps = {
   /**
    * The icon for the IconButton
    */
-  icon?: React.FunctionComponent<IconProps> | React.ElementType | React.ReactElement | null
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  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
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  leadingVisual?: React.ElementType | React.ReactElement<any> | null
 
   /**
    * The trailing visual which comes after the button content
    */
-  trailingVisual?: React.ElementType | React.ReactElement | null
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  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,8 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
   (
     {checked, className, defaultChecked, indeterminate, disabled, onChange, required, validationStatus, value, ...rest},
     ref,
-  ): ReactElement => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ): 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,8 @@ import classes from './Details.module.css'
 import {useMergedRefs} from '../internal/hooks/useMergedRefs'
 
 const Root = React.forwardRef<HTMLDetailsElement, DetailsProps>(
-  ({className, children, ...rest}, forwardRef): ReactElement => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ({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,8 @@ import type {Group} from '../ActionList/Group'
 import type {ActionListGroupProps} from '../deprecated'
 import type {AriaRole} from '../utils/types'
 
-export type RenderItemFn = (props: FilteredActionListItemProps) => React.ReactElement
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+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,8 @@ export const WithReactRouterLink = () => (
 type NextJSLinkProps = {href: string; children: React.ReactNode}
 
 const NextJSLikeLink = React.forwardRef<HTMLAnchorElement, NextJSLinkProps>(
-  ({href, children}, ref): React.ReactElement => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ({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,8 @@
 type NextJSLinkProps = {href: string; children: React.ReactNode}
 
 const NextJSLikeLink = React.forwardRef<HTMLAnchorElement, NextJSLinkProps>(
-  ({href, children}, ref): React.ReactElement => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ({href, children}, ref): React.ReactElement<any> => {
     const child = React.Children.only(children)
     const childProps = {
       ref,
@@ -30,7 +31,7 @@
         <NavList.Item href="/contact">Contact</NavList.Item>
       </NavList>,
     )
     expect(container).toMatchSnapshot()
   })
 
   it('renders with groups', () => {
@@ -46,7 +47,7 @@
         </NavList.Group>
       </NavList>,
     )
     expect(container).toMatchSnapshot()
   })
 
   it('supports TrailingAction', async () => {
@@ -219,7 +220,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 +241,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

@@ -158,7 +158,8 @@ 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>
+        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+        <SubItem>{React.cloneElement(subNav as React.ReactElement<any>, {ref: subNavRef})}</SubItem>
       </ActionList.Item>
     </ItemWithSubNavContext.Provider>
   )

packages/react/src/Overlay/Overlay.tsx

@@ -106,7 +106,8 @@ export const BaseOverlay = React.forwardRef(
       ...rest
     },
     forwardedRef,
-  ): ReactElement => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ): ReactElement<any> => {
     return (
       <Component
         {...rest}
@@ -187,7 +188,8 @@ const Overlay = React.forwardRef<HTMLDivElement, internalOverlayProps>(
       ...props
     },
     forwardedRef,
-  ): ReactElement => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ): 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,8 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
       ...rest
     }: RadioProps,
     ref,
-  ): ReactElement => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ): ReactElement<any> => {
     const radioGroupContext = useContext(RadioGroupContext)
     const handleOnChange: ChangeEventHandler<HTMLInputElement> = e => {
       radioGroupContext?.onChange && radioGroupContext.onChange(e)

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

@@ -44,7 +44,8 @@ figma.connect(
   {
     props: {
       selected: figma.enum('state', {selected: true}),
-      icon: figma.instance('icon').getProps<{name: string; fn: React.ReactElement}>(),
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      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,8 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
   )
     ? React.Children.toArray(children)[selectedIndex]
     : undefined
-  const getChildIcon = (childArg: React.ReactNode): React.ReactElement | null => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const getChildIcon = (childArg: React.ReactNode): React.ReactElement<any> | null => {
     if (
       React.isValidElement<SegmentedControlButtonProps>(childArg) &&
       (childArg.type === Button || isSlot(childArg, Button))

packages/react/src/SegmentedControl/SegmentedControlButton.tsx

@@ -16,9 +16,11 @@ 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
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  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
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  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,8 @@ 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
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  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,8 @@ const NoResultsMessage = (filter: string): {variant: 'empty'; title: string; bod
   }
 }
 
-const EmptyMessage: {variant: 'empty'; title: string; body: React.ReactElement} = {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const EmptyMessage: {variant: 'empty'; title: string; body: React.ReactElement<any>} = {
   variant: 'empty',
   title: `You haven't created any projects yet`,
   body: (
@@ -340,7 +341,8 @@ export const WithNotice = () => {
   const [open, setOpen] = useState(false)
   const [noticeVariant, setNoticeVariant] = useState(0)
 
-  const noticeVariants: Array<{text: string | React.ReactElement; variant: 'info' | 'warning' | 'error'}> = [
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const noticeVariants: Array<{text: string | React.ReactElement<any>; variant: 'info' | 'warning' | 'error'}> = [
     {
       variant: 'info',
       text: 'Try a different search term.',
@@ -637,7 +639,8 @@ export const CustomisedNoInitialItems = () => {
     setIsError(!isError)
   }, [setIsError, isError])
 
-  function getMessage(): {variant: 'empty' | 'error'; title: string; body: string | React.ReactElement} {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  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 +904,12 @@ export const WithMessage = () => {
     | undefined
     | {
         title: string
-        body: string | React.ReactElement
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        body: string | React.ReactElement<any>
         variant: 'empty' | 'error' | 'warning'
         icon?: React.ComponentType<IconProps>
-        action?: React.ReactElement
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        action?: React.ReactElement<any>
       }
   > = [
     undefined, // Default message

packages/react/src/SelectPanel/SelectPanel.tsx

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

packages/react/src/SelectPanel/SelectPanelMessage.tsx

@@ -21,7 +21,8 @@ export type SelectPanelMessageProps = {
    * Ensure the action element is accessible by providing appropriate ARIA attributes
    * and making it keyboard-navigable.
    */
-  action?: React.ReactElement
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  action?: React.ReactElement<any>
 }
 
 export const SelectPanelMessage: React.FC<SelectPanelMessageProps> = ({

packages/react/src/Textarea/Textarea.tsx

@@ -71,7 +71,8 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       ...rest
     }: TextareaProps,
     ref,
-  ): ReactElement => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ): ReactElement<any> => {
     return (
       <TextInputBaseWrapper
         validationStatus={validationStatus}