From 6147adce12ca54223d3a02b61c351c492ed6ab08 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Fri, 7 Nov 2025 10:19:36 -0600 Subject: [PATCH 1/3] refactor: apply react-element-default-any-props codemod --- .../src/ActionList/ActionList.examples.stories.tsx | 2 +- .../src/ActionList/ActionListContainerContext.tsx | 2 +- packages/react/src/ActionMenu/ActionMenu.test.tsx | 2 +- packages/react/src/ActionMenu/ActionMenu.tsx | 6 +++--- packages/react/src/Autocomplete/AutocompleteMenu.tsx | 4 ++-- packages/react/src/Breadcrumbs/Breadcrumbs.tsx | 10 +++++----- .../src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx | 2 +- packages/react/src/Button/ButtonBase.tsx | 2 +- packages/react/src/Button/types.ts | 6 +++--- packages/react/src/Checkbox/Checkbox.tsx | 2 +- packages/react/src/Details/Details.tsx | 2 +- packages/react/src/FilteredActionList/types.ts | 2 +- .../react/src/NavList/NavList.features.stories.tsx | 2 +- packages/react/src/NavList/NavList.test.tsx | 2 +- packages/react/src/NavList/NavList.tsx | 8 ++++---- packages/react/src/Overlay/Overlay.tsx | 4 ++-- packages/react/src/Radio/Radio.tsx | 2 +- .../src/SegmentedControl/SegmentedControl.figma.tsx | 6 +++--- .../react/src/SegmentedControl/SegmentedControl.tsx | 12 ++++++------ .../src/SegmentedControl/SegmentedControlButton.tsx | 4 ++-- .../SegmentedControl/SegmentedControlIconButton.tsx | 2 +- .../src/SelectPanel/SelectPanel.features.stories.tsx | 10 +++++----- packages/react/src/SelectPanel/SelectPanel.tsx | 12 ++++++------ .../react/src/SelectPanel/SelectPanelMessage.tsx | 2 +- packages/react/src/Textarea/Textarea.tsx | 2 +- .../react/src/TooltipV2/__tests__/Tooltip.test.tsx | 2 +- packages/react/src/UnderlineNav/UnderlineNav.tsx | 10 +++++----- packages/react/src/UnderlineNav/UnderlineNavItem.tsx | 2 +- packages/react/src/UnderlineNav/types.ts | 4 ++-- packages/react/src/deprecated/ActionList/List.tsx | 2 +- .../src/experimental/SelectPanel2/SelectPanel.tsx | 8 ++++---- .../internal/components/UnderlineTabbedInterface.tsx | 2 +- .../src/stories/deprecated/ActionList.stories.tsx | 2 +- packages/react/src/utils/polymorphic.ts | 2 +- 34 files changed, 72 insertions(+), 72 deletions(-) diff --git a/packages/react/src/ActionList/ActionList.examples.stories.tsx b/packages/react/src/ActionList/ActionList.examples.stories.tsx index 5baeed843be..67faac55c17 100644 --- a/packages/react/src/ActionList/ActionList.examples.stories.tsx +++ b/packages/react/src/ActionList/ActionList.examples.stories.tsx @@ -33,7 +33,7 @@ const meta: Meta = { 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 => { const child = React.Children.only(children) const childProps = { ref, diff --git a/packages/react/src/ActionList/ActionListContainerContext.tsx b/packages/react/src/ActionList/ActionListContainerContext.tsx index 9a2aca01b38..c96c2f4be44 100644 --- a/packages/react/src/ActionList/ActionListContainerContext.tsx +++ b/packages/react/src/ActionList/ActionListContainerContext.tsx @@ -14,7 +14,7 @@ type ContextProps = { // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type afterSelect?: Function enableFocusZone?: boolean - defaultTrailingVisual?: React.ReactElement + defaultTrailingVisual?: React.ReactElement } export const ActionListContainerContext = React.createContext({}) diff --git a/packages/react/src/ActionMenu/ActionMenu.test.tsx b/packages/react/src/ActionMenu/ActionMenu.test.tsx index af225bec3ce..4395427b769 100644 --- a/packages/react/src/ActionMenu/ActionMenu.test.tsx +++ b/packages/react/src/ActionMenu/ActionMenu.test.tsx @@ -53,7 +53,7 @@ function ExampleWithTooltip(): JSX.Element { ) } -function ExampleWithTooltipV2(actionMenuTrigger: React.ReactElement): JSX.Element { +function ExampleWithTooltipV2(actionMenuTrigger: React.ReactElement): JSX.Element { return ( diff --git a/packages/react/src/ActionMenu/ActionMenu.tsx b/packages/react/src/ActionMenu/ActionMenu.tsx index d159f98a329..84d183ac0b3 100644 --- a/packages/react/src/ActionMenu/ActionMenu.tsx +++ b/packages/react/src/ActionMenu/ActionMenu.tsx @@ -35,7 +35,7 @@ export type ActionMenuProps = { /** * Recommended: `ActionMenu.Button` or `ActionMenu.Anchor` with `ActionMenu.Overlay` */ - children: React.ReactElement[] | React.ReactElement + children: React.ReactElement[] | React.ReactElement /** * If defined, will control the open/closed state of the overlay. Must be used in conjunction with `onOpenChange`. @@ -179,11 +179,11 @@ const Menu: FCWithSlotMarker> = ({ ) } -export type ActionMenuAnchorProps = {children: React.ReactElement; id?: string} & React.HTMLAttributes +export type ActionMenuAnchorProps = {children: React.ReactElement; id?: string} & React.HTMLAttributes const Anchor: WithSlotMarker< React.ForwardRefExoticComponent< { - children: React.ReactElement + children: React.ReactElement id?: string } & React.HTMLAttributes & React.RefAttributes diff --git a/packages/react/src/Autocomplete/AutocompleteMenu.tsx b/packages/react/src/Autocomplete/AutocompleteMenu.tsx index 12a9fab533d..44b3f07c56c 100644 --- a/packages/react/src/Autocomplete/AutocompleteMenu.tsx +++ b/packages/react/src/Autocomplete/AutocompleteMenu.tsx @@ -19,9 +19,9 @@ import classes from './AutocompleteMenu.module.css' type OnSelectedChange = (item: T | T[]) => void export type AutocompleteMenuItem = MandateProps & { - leadingVisual?: React.FunctionComponent> | React.ReactElement + leadingVisual?: React.FunctionComponent> | React.ReactElement text?: string - trailingVisual?: React.FunctionComponent> | React.ReactElement + trailingVisual?: React.FunctionComponent> | React.ReactElement } const getDefaultSortFn = (isItemSelectedFn: (itemId: string) => boolean) => (itemIdA: string, itemIdB: string) => diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx index f917d3c1ca0..36e12ee36b1 100644 --- a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx +++ b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx @@ -41,7 +41,7 @@ const BreadcrumbsList = ({children}: React.PropsWithChildren) => { } type BreadcrumbsMenuItemProps = { - items: React.ReactElement[] + items: React.ReactElement[] 'aria-label'?: string } @@ -141,7 +141,7 @@ const BreadcrumbsMenuItem = React.forwardRef { - 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[]; } function Breadcrumbs({className, children, style, overflow = 'wrap', variant = 'normal'}: BreadcrumbsProps) { @@ -166,10 +166,10 @@ function Breadcrumbs({className, children, style, overflow = 'wrap', variant = ' const rootItem = childArray[0] - const [visibleItems, setVisibleItems] = useState(() => childArray) + const [visibleItems, setVisibleItems] = useState[]>(() => childArray) const [childArrayWidths, setChildArrayWidths] = useState(() => []) - const [menuItems, setMenuItems] = useState([]) + const [menuItems, setMenuItems] = useState[]>([]) const [rootItemWidth, setRootItemWidth] = useState(0) const MENU_BUTTON_FALLBACK_WIDTH = 32 // Design system small IconButton @@ -203,7 +203,7 @@ function Breadcrumbs({className, children, style, overflow = 'wrap', variant = ' let currentVisibleItems = [...childArray] let currentVisibleItemWidths = [...childArrayWidths] - let currentMenuItems: React.ReactElement[] = [] + let currentMenuItems: React.ReactElement[] = [] let currentMenuItemsWidths: number[] = [] if (availableWidth > 0 && currentVisibleItemWidths.length > 0) { diff --git a/packages/react/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx b/packages/react/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx index abdc253af3f..8c42b6cedfe 100644 --- a/packages/react/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx +++ b/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) => { +const renderWithTheme = (component: React.ReactElement, flags?: Record) => { const wrappedComponent = flags ? {component} : <>{component} return HTMLRender(wrappedComponent) } diff --git a/packages/react/src/Button/ButtonBase.tsx b/packages/react/src/Button/ButtonBase.tsx index db96ec4c305..41f09e6c6b7 100644 --- a/packages/react/src/Button/ButtonBase.tsx +++ b/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, loading: boolean, visualName: string, counterLabel: boolean, diff --git a/packages/react/src/Button/types.ts b/packages/react/src/Button/types.ts index 1394f10962a..5ab17b277bc 100644 --- a/packages/react/src/Button/types.ts +++ b/packages/react/src/Button/types.ts @@ -58,17 +58,17 @@ export type ButtonProps = { /** * The icon for the IconButton */ - icon?: React.FunctionComponent | React.ElementType | React.ReactElement | null + icon?: React.FunctionComponent | React.ElementType | React.ReactElement | null /** * The leading visual which comes before the button content */ - leadingVisual?: React.ElementType | React.ReactElement | null + leadingVisual?: React.ElementType | React.ReactElement | null /** * The trailing visual which comes after the button content */ - trailingVisual?: React.ElementType | React.ReactElement | null + trailingVisual?: React.ElementType | React.ReactElement | null /** * Trailing action which comes after the trailing visual and is always the last element diff --git a/packages/react/src/Checkbox/Checkbox.tsx b/packages/react/src/Checkbox/Checkbox.tsx index d54c372cd80..51696bc1768 100644 --- a/packages/react/src/Checkbox/Checkbox.tsx +++ b/packages/react/src/Checkbox/Checkbox.tsx @@ -43,7 +43,7 @@ const Checkbox = React.forwardRef( ( {checked, className, defaultChecked, indeterminate, disabled, onChange, required, validationStatus, value, ...rest}, ref, - ): ReactElement => { + ): ReactElement => { const checkboxRef = useProvidedRefOrCreate(ref as React.RefObject) const checkboxGroupContext = useContext(CheckboxGroupContext) const handleOnChange: ChangeEventHandler = e => { diff --git a/packages/react/src/Details/Details.tsx b/packages/react/src/Details/Details.tsx index f493bf495e1..8abcb9f23a6 100644 --- a/packages/react/src/Details/Details.tsx +++ b/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( - ({className, children, ...rest}, forwardRef): ReactElement => { + ({className, children, ...rest}, forwardRef): ReactElement => { const detailsRef = React.useRef(null) const ref = useMergedRefs(forwardRef, detailsRef) diff --git a/packages/react/src/FilteredActionList/types.ts b/packages/react/src/FilteredActionList/types.ts index 68e0ca62458..4dde20ae2b5 100644 --- a/packages/react/src/FilteredActionList/types.ts +++ b/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 export type ItemInput = | Merge, FilteredActionListItemProps> diff --git a/packages/react/src/NavList/NavList.features.stories.tsx b/packages/react/src/NavList/NavList.features.stories.tsx index 5501546cb19..8990ca5feb6 100644 --- a/packages/react/src/NavList/NavList.features.stories.tsx +++ b/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( - ({href, children}, ref): React.ReactElement => { + ({href, children}, ref): React.ReactElement => { const child = React.Children.only(children) const childProps = { ref, diff --git a/packages/react/src/NavList/NavList.test.tsx b/packages/react/src/NavList/NavList.test.tsx index 3965a1f987e..cd2f3c85da6 100644 --- a/packages/react/src/NavList/NavList.test.tsx +++ b/packages/react/src/NavList/NavList.test.tsx @@ -8,7 +8,7 @@ import {ReactRouterLikeLink} from '../Pagination/mocks/ReactRouterLink' type NextJSLinkProps = {href: string; children: React.ReactNode} const NextJSLikeLink = React.forwardRef( - ({href, children}, ref): React.ReactElement => { + ({href, children}, ref): React.ReactElement => { const child = React.Children.only(children) const childProps = { ref, diff --git a/packages/react/src/NavList/NavList.tsx b/packages/react/src/NavList/NavList.tsx index 8648957d4aa..4755ea1089d 100644 --- a/packages/react/src/NavList/NavList.tsx +++ b/packages/react/src/NavList/NavList.tsx @@ -144,7 +144,7 @@ function ItemWithSubNav({children, subNav, depth: _depth, defaultOpen, style}: I }, [subNav, buttonId]) return ( - + ( - {React.cloneElement(subNav as React.ReactElement, {ref: subNavRef})} + {React.cloneElement(subNav as React.ReactElement, {ref: subNavRef})} - - ) + ) + ); } // ---------------------------------------------------------------------------- diff --git a/packages/react/src/Overlay/Overlay.tsx b/packages/react/src/Overlay/Overlay.tsx index b4d917154a6..94f397408c2 100644 --- a/packages/react/src/Overlay/Overlay.tsx +++ b/packages/react/src/Overlay/Overlay.tsx @@ -106,7 +106,7 @@ export const BaseOverlay = React.forwardRef( ...rest }, forwardedRef, - ): ReactElement => { + ): ReactElement => { return ( ( ...props }, forwardedRef, - ): ReactElement => { + ): ReactElement => { const overlayRef = useRef(null) useRefObjectAsForwardedRef(forwardedRef, overlayRef) const slideAnimationDistance = 8 // var(--base-size-8), hardcoded to do some math diff --git a/packages/react/src/Radio/Radio.tsx b/packages/react/src/Radio/Radio.tsx index 16a98b94a53..d88b21ed475 100644 --- a/packages/react/src/Radio/Radio.tsx +++ b/packages/react/src/Radio/Radio.tsx @@ -51,7 +51,7 @@ const Radio = React.forwardRef( ...rest }: RadioProps, ref, - ): ReactElement => { + ): ReactElement => { const radioGroupContext = useContext(RadioGroupContext) const handleOnChange: ChangeEventHandler = e => { radioGroupContext?.onChange && radioGroupContext.onChange(e) diff --git a/packages/react/src/SegmentedControl/SegmentedControl.figma.tsx b/packages/react/src/SegmentedControl/SegmentedControl.figma.tsx index 3b6b6598ed7..e8cab84c01b 100644 --- a/packages/react/src/SegmentedControl/SegmentedControl.figma.tsx +++ b/packages/react/src/SegmentedControl/SegmentedControl.figma.tsx @@ -31,9 +31,9 @@ figma.connect( }, example: ({selected, label, leadingIcon}) => ( // @ts-expect-error: leadingIcon is optional - + ( {label} - + ) ), }, ) @@ -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}>(), }, example: ({selected, icon}) => ( diff --git a/packages/react/src/SegmentedControl/SegmentedControl.tsx b/packages/react/src/SegmentedControl/SegmentedControl.tsx index 76d25fbb64c..c2c5fb984b1 100644 --- a/packages/react/src/SegmentedControl/SegmentedControl.tsx +++ b/packages/react/src/SegmentedControl/SegmentedControl.tsx @@ -61,7 +61,7 @@ const Root: React.FC> = ({ ) ? React.Children.toArray(children)[selectedIndex] : undefined - const getChildIcon = (childArg: React.ReactNode): React.ReactElement | null => { + const getChildIcon = (childArg: React.ReactNode): React.ReactElement | null => { if ( React.isValidElement(childArg) && (childArg.type === Button || isSlot(childArg, Button)) @@ -112,7 +112,7 @@ const Root: React.FC> = ({ return responsiveVariant === 'dropdown' ? ( // Render the 'dropdown' variant of the SegmentedControlButton or SegmentedControlIconButton - <> + (<> {/* 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> = ({ - + ) ) : ( // Render a segmented control -
    > = ({ // Render the children as-is and add the shared child props return React.cloneElement(child, sharedChildProps) })} -
- ) + ) + ); } Root.displayName = 'SegmentedControl' diff --git a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx index 94803bb2152..cdd9991afaf 100644 --- a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx +++ b/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.ReactElement + leadingVisual?: React.FunctionComponent> | React.ReactElement /** @deprecated Use `leadingVisual` instead. The leading icon comes before item label */ - leadingIcon?: React.FunctionComponent> | React.ReactElement + leadingIcon?: React.FunctionComponent> | React.ReactElement /** Optional counter to display on the right side of the button */ count?: number | string } & ButtonHTMLAttributes diff --git a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx index ee70b240efd..f86b0d1135f 100644 --- a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx +++ b/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.ReactElement + icon: React.FunctionComponent> | React.ReactElement /** 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. */ diff --git a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx index 448dcfc8f74..46c6c5c25aa 100644 --- a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx +++ b/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} = { 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; 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} { 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 variant: 'empty' | 'error' | 'warning' icon?: React.ComponentType - action?: React.ReactElement + action?: React.ReactElement } > = [ undefined, // Default message diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx index 8fe2e158fed..5f9a8c91e82 100644 --- a/packages/react/src/SelectPanel/SelectPanel.tsx +++ b/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 + subtitle?: string | React.ReactElement 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 variant: 'info' | 'warning' | 'error' } message?: { title: string - body: string | React.ReactElement + body: string | React.ReactElement variant: 'empty' | 'error' | 'warning' icon?: React.ComponentType - action?: React.ReactElement + action?: React.ReactElement } /** * @deprecated Use `secondaryAction` instead. */ - footer?: string | React.ReactElement + footer?: string | React.ReactElement showSelectedOptionsFirst?: boolean /** * Whether to disable fullscreen behavior on narrow viewports. diff --git a/packages/react/src/SelectPanel/SelectPanelMessage.tsx b/packages/react/src/SelectPanel/SelectPanelMessage.tsx index 23a1c171461..a63c1276482 100644 --- a/packages/react/src/SelectPanel/SelectPanelMessage.tsx +++ b/packages/react/src/SelectPanel/SelectPanelMessage.tsx @@ -21,7 +21,7 @@ export type SelectPanelMessageProps = { * Ensure the action element is accessible by providing appropriate ARIA attributes * and making it keyboard-navigable. */ - action?: React.ReactElement + action?: React.ReactElement } export const SelectPanelMessage: React.FC = ({ diff --git a/packages/react/src/Textarea/Textarea.tsx b/packages/react/src/Textarea/Textarea.tsx index 39d86684372..c5f7ff89883 100644 --- a/packages/react/src/Textarea/Textarea.tsx +++ b/packages/react/src/Textarea/Textarea.tsx @@ -71,7 +71,7 @@ const Textarea = React.forwardRef( ...rest }: TextareaProps, ref, - ): ReactElement => { + ): ReactElement => { return ( ) -function ExampleWithActionMenu(actionMenuTrigger: React.ReactElement): JSX.Element { +function ExampleWithActionMenu(actionMenuTrigger: React.ReactElement): JSX.Element { return ( diff --git a/packages/react/src/UnderlineNav/UnderlineNav.tsx b/packages/react/src/UnderlineNav/UnderlineNav.tsx index 2f6386c9a47..5e21b591288 100644 --- a/packages/react/src/UnderlineNav/UnderlineNav.tsx +++ b/packages/react/src/UnderlineNav/UnderlineNav.tsx @@ -43,7 +43,7 @@ const MORE_BTN_HEIGHT = 45 const overflowEffect = ( navWidth: number, moreMenuWidth: number, - childArray: Array, + childArray: Array>, childWidthArray: ChildWidthArray, noIconChildWidthArray: ChildWidthArray, updateListAndMenu: (props: ResponsiveProps, iconsVisible: boolean) => void, @@ -60,8 +60,8 @@ const overflowEffect = ( navWidth, moreMenuWidth || MORE_BTN_WIDTH, ) - const items: Array = [] - const menuItems: Array = [] + const items: Array> = [] + const menuItems: Array> = [] // First, we check if we can fit all the items with their icons if (childArray.length <= numberOfItemsPossible) { @@ -105,7 +105,7 @@ const overflowEffect = ( } export 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[]; } const calculatePossibleItems = (childWidthArray: ChildWidthArray, navWidth: number, moreMenuWidth = 0) => { @@ -201,7 +201,7 @@ export const UnderlineNav = forwardRef( } const swapMenuItemWithListItem = ( - prospectiveListItem: React.ReactElement, + prospectiveListItem: React.ReactElement, indexOfProspectiveListItem: number, event: React.MouseEvent | React.KeyboardEvent, callback: (props: ResponsiveProps, displayIcons: boolean) => void, diff --git a/packages/react/src/UnderlineNav/UnderlineNavItem.tsx b/packages/react/src/UnderlineNav/UnderlineNavItem.tsx index 963f7c033f1..a95c93f8d49 100644 --- a/packages/react/src/UnderlineNav/UnderlineNavItem.tsx +++ b/packages/react/src/UnderlineNav/UnderlineNavItem.tsx @@ -36,7 +36,7 @@ export type UnderlineNavItemProps = { /** * Icon before the text */ - icon?: React.FunctionComponent | React.ReactElement + icon?: React.FunctionComponent | React.ReactElement /** * Renders `UnderlineNav.Item` as given component i.e. react-router's Link **/ diff --git a/packages/react/src/UnderlineNav/types.ts b/packages/react/src/UnderlineNav/types.ts index 55c2e7318c9..90bda9ca9cd 100644 --- a/packages/react/src/UnderlineNav/types.ts +++ b/packages/react/src/UnderlineNav/types.ts @@ -4,6 +4,6 @@ export type ChildSize = { } export type ChildWidthArray = Array export type ResponsiveProps = { - items: Array - menuItems: Array + items: Array> + menuItems: Array> } diff --git a/packages/react/src/deprecated/ActionList/List.tsx b/packages/react/src/deprecated/ActionList/List.tsx index 46c559dd374..19913b7b187 100644 --- a/packages/react/src/deprecated/ActionList/List.tsx +++ b/packages/react/src/deprecated/ActionList/List.tsx @@ -10,7 +10,7 @@ import {clsx} from 'clsx' import type {Merge} from '../../utils/types/Merge' import classes from './List.module.css' -export type RenderItemFn = (props: ItemProps) => React.ReactElement +export type RenderItemFn = (props: ItemProps) => React.ReactElement export type ItemInput = | Merge, ItemProps> diff --git a/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx b/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx index f1fd2fcc16b..ca401b21c53 100644 --- a/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx +++ b/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx @@ -116,7 +116,7 @@ const Panel: React.FC = ({ // 🚨 Hack for good API! // we strip out Anchor from children and wire it up to Dialog // with additional props for accessibility - let Anchor: React.ReactElement | undefined + let Anchor: React.ReactElement | undefined const anchorRef = useProvidedRefOrCreate(providedAnchorRef) const onAnchorClick = () => { @@ -521,10 +521,10 @@ const SecondaryLink: React.FC = ({className, ...props}) => { return ( // @ts-ignore TODO: is as prop is not recognised by button? - - ) + ) + ); } const SecondaryCheckbox: React.FC = ({id, children, className, ...props}) => { diff --git a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx index 7516a0cd4f1..17f440ac8ed 100644 --- a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx +++ b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx @@ -51,7 +51,7 @@ export type UnderlineItemProps = { iconsVisible?: boolean loadingCounters?: boolean counter?: number | string - icon?: FC | React.ReactElement + icon?: FC | React.ReactElement id?: string ref?: React.Ref } & React.ComponentPropsWithoutRef diff --git a/packages/react/src/stories/deprecated/ActionList.stories.tsx b/packages/react/src/stories/deprecated/ActionList.stories.tsx index 40ad442547d..75c10e4a982 100644 --- a/packages/react/src/stories/deprecated/ActionList.stories.tsx +++ b/packages/react/src/stories/deprecated/ActionList.stories.tsx @@ -348,7 +348,7 @@ export function SizeStressTestingStory(): JSX.Element { SizeStressTestingStory.storyName = 'Size Stress Testing' const NextJSLikeLink = forwardRef( - ({href, children}: {href: string; children: React.ReactNode}, ref): React.ReactElement => { + ({href, children}: {href: string; children: React.ReactNode}, ref): React.ReactElement => { const child = React.Children.only(children) const childProps = { ref, diff --git a/packages/react/src/utils/polymorphic.ts b/packages/react/src/utils/polymorphic.ts index 769d7c0cd2b..896d978947e 100644 --- a/packages/react/src/utils/polymorphic.ts +++ b/packages/react/src/utils/polymorphic.ts @@ -57,7 +57,7 @@ interface ForwardRefComponent< : As extends keyof JSX.IntrinsicElements ? Merge : never, - ): React.ReactElement | null + ): React.ReactElement | null } export type {ForwardRefComponent, OwnProps, IntrinsicElement, Merge} From 04fdb28483d65e34c3240b7bdc88d3859cd68c0b Mon Sep 17 00:00:00 2001 From: Josh Black Date: Mon, 17 Nov 2025 16:07:40 -0600 Subject: [PATCH 2/3] chore: run format --- packages/react/src/Breadcrumbs/Breadcrumbs.tsx | 2 +- packages/react/src/NavList/NavList.tsx | 6 +++--- .../src/SegmentedControl/SegmentedControl.figma.tsx | 4 ++-- .../react/src/SegmentedControl/SegmentedControl.tsx | 10 +++++----- packages/react/src/UnderlineNav/UnderlineNav.tsx | 2 +- .../src/experimental/SelectPanel2/SelectPanel.tsx | 6 +++--- 6 files changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx index 36e12ee36b1..2c6152358b2 100644 --- a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx +++ b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx @@ -141,7 +141,7 @@ const BreadcrumbsMenuItem = React.forwardRef { - 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[] } function Breadcrumbs({className, children, style, overflow = 'wrap', variant = 'normal'}: BreadcrumbsProps) { diff --git a/packages/react/src/NavList/NavList.tsx b/packages/react/src/NavList/NavList.tsx index f1bffeb6643..780540b0c22 100644 --- a/packages/react/src/NavList/NavList.tsx +++ b/packages/react/src/NavList/NavList.tsx @@ -144,7 +144,7 @@ function ItemWithSubNav({children, subNav, depth: _depth, defaultOpen, style}: I }, [subNav, buttonId]) return ( - ( + {React.cloneElement(subNav as React.ReactElement, {ref: subNavRef})} - ) - ); + + ) } // ---------------------------------------------------------------------------- diff --git a/packages/react/src/SegmentedControl/SegmentedControl.figma.tsx b/packages/react/src/SegmentedControl/SegmentedControl.figma.tsx index e8cab84c01b..c4d602bb764 100644 --- a/packages/react/src/SegmentedControl/SegmentedControl.figma.tsx +++ b/packages/react/src/SegmentedControl/SegmentedControl.figma.tsx @@ -31,9 +31,9 @@ figma.connect( }, example: ({selected, label, leadingIcon}) => ( // @ts-expect-error: leadingIcon is optional - ( + {label} - ) + ), }, ) diff --git a/packages/react/src/SegmentedControl/SegmentedControl.tsx b/packages/react/src/SegmentedControl/SegmentedControl.tsx index c2c5fb984b1..40b2262d74b 100644 --- a/packages/react/src/SegmentedControl/SegmentedControl.tsx +++ b/packages/react/src/SegmentedControl/SegmentedControl.tsx @@ -112,7 +112,7 @@ const Root: React.FC> = ({ return responsiveVariant === 'dropdown' ? ( // Render the 'dropdown' variant of the SegmentedControlButton or SegmentedControlIconButton - (<> + <> {/* 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> = ({ - ) + ) : ( // Render a segmented control - (
    > = ({ // Render the children as-is and add the shared child props return React.cloneElement(child, sharedChildProps) })} -
) - ); + + ) } Root.displayName = 'SegmentedControl' diff --git a/packages/react/src/UnderlineNav/UnderlineNav.tsx b/packages/react/src/UnderlineNav/UnderlineNav.tsx index 5e21b591288..2031d481a8d 100644 --- a/packages/react/src/UnderlineNav/UnderlineNav.tsx +++ b/packages/react/src/UnderlineNav/UnderlineNav.tsx @@ -105,7 +105,7 @@ const overflowEffect = ( } export 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[] } const calculatePossibleItems = (childWidthArray: ChildWidthArray, navWidth: number, moreMenuWidth = 0) => { diff --git a/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx b/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx index ca401b21c53..f72123d84f0 100644 --- a/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx +++ b/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx @@ -521,10 +521,10 @@ const SecondaryLink: React.FC = ({className, ...props}) => { return ( // @ts-ignore TODO: is as prop is not recognised by button? - () - ); + + ) } const SecondaryCheckbox: React.FC = ({id, children, className, ...props}) => { From bb1001d8ddbc9678f6e2b35a8015df0230a19902 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Mon, 17 Nov 2025 16:58:56 -0600 Subject: [PATCH 3/3] chore: add eslint-disable for any calls --- .../react/src/ActionList/ActionList.examples.stories.tsx | 1 + .../react/src/ActionList/ActionListContainerContext.tsx | 1 + packages/react/src/ActionMenu/ActionMenu.test.tsx | 1 + packages/react/src/ActionMenu/ActionMenu.tsx | 3 +++ packages/react/src/Autocomplete/AutocompleteMenu.tsx | 2 ++ packages/react/src/Breadcrumbs/Breadcrumbs.tsx | 5 +++++ .../react/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx | 1 + packages/react/src/Button/ButtonBase.tsx | 1 + packages/react/src/Button/types.ts | 3 +++ packages/react/src/Checkbox/Checkbox.tsx | 1 + packages/react/src/Details/Details.tsx | 1 + packages/react/src/FilteredActionList/types.ts | 1 + packages/react/src/NavList/NavList.features.stories.tsx | 1 + packages/react/src/NavList/NavList.test.tsx | 1 + packages/react/src/NavList/NavList.tsx | 1 + packages/react/src/Overlay/Overlay.tsx | 2 ++ packages/react/src/Radio/Radio.tsx | 1 + .../react/src/SegmentedControl/SegmentedControl.figma.tsx | 1 + packages/react/src/SegmentedControl/SegmentedControl.tsx | 1 + .../react/src/SegmentedControl/SegmentedControlButton.tsx | 2 ++ .../src/SegmentedControl/SegmentedControlIconButton.tsx | 1 + .../react/src/SelectPanel/SelectPanel.features.stories.tsx | 5 +++++ packages/react/src/SelectPanel/SelectPanel.tsx | 6 ++++++ packages/react/src/SelectPanel/SelectPanelMessage.tsx | 1 + packages/react/src/Textarea/Textarea.tsx | 1 + packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx | 1 + packages/react/src/UnderlineNav/UnderlineNav.tsx | 5 +++++ packages/react/src/UnderlineNav/UnderlineNavItem.tsx | 1 + packages/react/src/UnderlineNav/types.ts | 2 ++ packages/react/src/deprecated/ActionList/List.tsx | 1 + .../react/src/experimental/SelectPanel2/SelectPanel.tsx | 1 + .../src/internal/components/UnderlineTabbedInterface.tsx | 1 + .../react/src/stories/deprecated/ActionList.stories.tsx | 1 + 33 files changed, 58 insertions(+) diff --git a/packages/react/src/ActionList/ActionList.examples.stories.tsx b/packages/react/src/ActionList/ActionList.examples.stories.tsx index 67faac55c17..28498adc788 100644 --- a/packages/react/src/ActionList/ActionList.examples.stories.tsx +++ b/packages/react/src/ActionList/ActionList.examples.stories.tsx @@ -33,6 +33,7 @@ const meta: Meta = { export default meta const NextJSLikeLink = forwardRef( + // eslint-disable-next-line @typescript-eslint/no-explicit-any ({href, children}: {href: string; children: React.ReactNode}, ref): React.ReactElement => { const child = React.Children.only(children) const childProps = { diff --git a/packages/react/src/ActionList/ActionListContainerContext.tsx b/packages/react/src/ActionList/ActionListContainerContext.tsx index c96c2f4be44..439ababd933 100644 --- a/packages/react/src/ActionList/ActionListContainerContext.tsx +++ b/packages/react/src/ActionList/ActionListContainerContext.tsx @@ -14,6 +14,7 @@ type ContextProps = { // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type afterSelect?: Function enableFocusZone?: boolean + // eslint-disable-next-line @typescript-eslint/no-explicit-any defaultTrailingVisual?: React.ReactElement } diff --git a/packages/react/src/ActionMenu/ActionMenu.test.tsx b/packages/react/src/ActionMenu/ActionMenu.test.tsx index 4395427b769..d1c2971b327 100644 --- a/packages/react/src/ActionMenu/ActionMenu.test.tsx +++ b/packages/react/src/ActionMenu/ActionMenu.test.tsx @@ -53,6 +53,7 @@ function ExampleWithTooltip(): JSX.Element { ) } +// eslint-disable-next-line @typescript-eslint/no-explicit-any function ExampleWithTooltipV2(actionMenuTrigger: React.ReactElement): JSX.Element { return ( diff --git a/packages/react/src/ActionMenu/ActionMenu.tsx b/packages/react/src/ActionMenu/ActionMenu.tsx index 84d183ac0b3..7ed22316759 100644 --- a/packages/react/src/ActionMenu/ActionMenu.tsx +++ b/packages/react/src/ActionMenu/ActionMenu.tsx @@ -35,6 +35,7 @@ export type ActionMenuProps = { /** * Recommended: `ActionMenu.Button` or `ActionMenu.Anchor` with `ActionMenu.Overlay` */ + // eslint-disable-next-line @typescript-eslint/no-explicit-any children: React.ReactElement[] | React.ReactElement /** @@ -179,10 +180,12 @@ const Menu: FCWithSlotMarker> = ({ ) } +// eslint-disable-next-line @typescript-eslint/no-explicit-any export type ActionMenuAnchorProps = {children: React.ReactElement; id?: string} & React.HTMLAttributes const Anchor: WithSlotMarker< React.ForwardRefExoticComponent< { + // eslint-disable-next-line @typescript-eslint/no-explicit-any children: React.ReactElement id?: string } & React.HTMLAttributes & diff --git a/packages/react/src/Autocomplete/AutocompleteMenu.tsx b/packages/react/src/Autocomplete/AutocompleteMenu.tsx index 44b3f07c56c..bd987d0068d 100644 --- a/packages/react/src/Autocomplete/AutocompleteMenu.tsx +++ b/packages/react/src/Autocomplete/AutocompleteMenu.tsx @@ -19,8 +19,10 @@ import classes from './AutocompleteMenu.module.css' type OnSelectedChange = (item: T | T[]) => void export type AutocompleteMenuItem = MandateProps & { + // eslint-disable-next-line @typescript-eslint/no-explicit-any leadingVisual?: React.FunctionComponent> | React.ReactElement text?: string + // eslint-disable-next-line @typescript-eslint/no-explicit-any trailingVisual?: React.FunctionComponent> | React.ReactElement } diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx index 2c6152358b2..5a59efe2f4c 100644 --- a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx +++ b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx @@ -41,6 +41,7 @@ const BreadcrumbsList = ({children}: React.PropsWithChildren) => { } type BreadcrumbsMenuItemProps = { + // eslint-disable-next-line @typescript-eslint/no-explicit-any items: React.ReactElement[] 'aria-label'?: string } @@ -141,6 +142,7 @@ const BreadcrumbsMenuItem = React.forwardRef { + // eslint-disable-next-line @typescript-eslint/no-explicit-any return React.Children.toArray(children).filter(child => React.isValidElement(child)) as React.ReactElement[] } @@ -166,9 +168,11 @@ function Breadcrumbs({className, children, style, overflow = 'wrap', variant = ' const rootItem = childArray[0] + // eslint-disable-next-line @typescript-eslint/no-explicit-any const [visibleItems, setVisibleItems] = useState[]>(() => childArray) const [childArrayWidths, setChildArrayWidths] = useState(() => []) + // eslint-disable-next-line @typescript-eslint/no-explicit-any const [menuItems, setMenuItems] = useState[]>([]) const [rootItemWidth, setRootItemWidth] = useState(0) @@ -203,6 +207,7 @@ function Breadcrumbs({className, children, style, overflow = 'wrap', variant = ' let currentVisibleItems = [...childArray] let currentVisibleItemWidths = [...childArrayWidths] + // eslint-disable-next-line @typescript-eslint/no-explicit-any let currentMenuItems: React.ReactElement[] = [] let currentMenuItemsWidths: number[] = [] diff --git a/packages/react/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx b/packages/react/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx index 8c42b6cedfe..a76bdf2f950 100644 --- a/packages/react/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx +++ b/packages/react/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx @@ -5,6 +5,7 @@ import userEvent from '@testing-library/user-event' import {FeatureFlags} from '../../FeatureFlags' // Helper function to render with theme and feature flags +// eslint-disable-next-line @typescript-eslint/no-explicit-any const renderWithTheme = (component: React.ReactElement, flags?: Record) => { const wrappedComponent = flags ? {component} : <>{component} return HTMLRender(wrappedComponent) diff --git a/packages/react/src/Button/ButtonBase.tsx b/packages/react/src/Button/ButtonBase.tsx index 41f09e6c6b7..ba376b52eae 100644 --- a/packages/react/src/Button/ButtonBase.tsx +++ b/packages/react/src/Button/ButtonBase.tsx @@ -13,6 +13,7 @@ import classes from './ButtonBase.module.css' import {isElement} from 'react-is' const renderModuleVisual = ( + // eslint-disable-next-line @typescript-eslint/no-explicit-any Visual: React.ElementType | React.ReactElement, loading: boolean, visualName: string, diff --git a/packages/react/src/Button/types.ts b/packages/react/src/Button/types.ts index 624271602e5..6870562b516 100644 --- a/packages/react/src/Button/types.ts +++ b/packages/react/src/Button/types.ts @@ -58,16 +58,19 @@ export type ButtonProps = { /** * The icon for the IconButton */ + // eslint-disable-next-line @typescript-eslint/no-explicit-any icon?: React.FunctionComponent | React.ElementType | React.ReactElement | null /** * The leading visual which comes before the button content */ + // eslint-disable-next-line @typescript-eslint/no-explicit-any leadingVisual?: React.ElementType | React.ReactElement | null /** * The trailing visual which comes after the button content */ + // eslint-disable-next-line @typescript-eslint/no-explicit-any trailingVisual?: React.ElementType | React.ReactElement | null /** diff --git a/packages/react/src/Checkbox/Checkbox.tsx b/packages/react/src/Checkbox/Checkbox.tsx index 51696bc1768..a83bb60ccf6 100644 --- a/packages/react/src/Checkbox/Checkbox.tsx +++ b/packages/react/src/Checkbox/Checkbox.tsx @@ -43,6 +43,7 @@ const Checkbox = React.forwardRef( ( {checked, className, defaultChecked, indeterminate, disabled, onChange, required, validationStatus, value, ...rest}, ref, + // eslint-disable-next-line @typescript-eslint/no-explicit-any ): ReactElement => { const checkboxRef = useProvidedRefOrCreate(ref as React.RefObject) const checkboxGroupContext = useContext(CheckboxGroupContext) diff --git a/packages/react/src/Details/Details.tsx b/packages/react/src/Details/Details.tsx index 8abcb9f23a6..c9135b2db31 100644 --- a/packages/react/src/Details/Details.tsx +++ b/packages/react/src/Details/Details.tsx @@ -5,6 +5,7 @@ import classes from './Details.module.css' import {useMergedRefs} from '../internal/hooks/useMergedRefs' const Root = React.forwardRef( + // eslint-disable-next-line @typescript-eslint/no-explicit-any ({className, children, ...rest}, forwardRef): ReactElement => { const detailsRef = React.useRef(null) const ref = useMergedRefs(forwardRef, detailsRef) diff --git a/packages/react/src/FilteredActionList/types.ts b/packages/react/src/FilteredActionList/types.ts index 4dde20ae2b5..7ae5343d46b 100644 --- a/packages/react/src/FilteredActionList/types.ts +++ b/packages/react/src/FilteredActionList/types.ts @@ -4,6 +4,7 @@ import type {Group} from '../ActionList/Group' import type {ActionListGroupProps} from '../deprecated' import type {AriaRole} from '../utils/types' +// eslint-disable-next-line @typescript-eslint/no-explicit-any export type RenderItemFn = (props: FilteredActionListItemProps) => React.ReactElement export type ItemInput = diff --git a/packages/react/src/NavList/NavList.features.stories.tsx b/packages/react/src/NavList/NavList.features.stories.tsx index ce09a90b58e..ce3420c4952 100644 --- a/packages/react/src/NavList/NavList.features.stories.tsx +++ b/packages/react/src/NavList/NavList.features.stories.tsx @@ -118,6 +118,7 @@ export const WithReactRouterLink = () => ( type NextJSLinkProps = {href: string; children: React.ReactNode} const NextJSLikeLink = React.forwardRef( + // eslint-disable-next-line @typescript-eslint/no-explicit-any ({href, children}, ref): React.ReactElement => { const child = React.Children.only(children) const childProps = { diff --git a/packages/react/src/NavList/NavList.test.tsx b/packages/react/src/NavList/NavList.test.tsx index cd2f3c85da6..f91ddd2b82d 100644 --- a/packages/react/src/NavList/NavList.test.tsx +++ b/packages/react/src/NavList/NavList.test.tsx @@ -8,6 +8,7 @@ import {ReactRouterLikeLink} from '../Pagination/mocks/ReactRouterLink' type NextJSLinkProps = {href: string; children: React.ReactNode} const NextJSLikeLink = React.forwardRef( + // eslint-disable-next-line @typescript-eslint/no-explicit-any ({href, children}, ref): React.ReactElement => { const child = React.Children.only(children) const childProps = { diff --git a/packages/react/src/NavList/NavList.tsx b/packages/react/src/NavList/NavList.tsx index 780540b0c22..c00ef3813e0 100644 --- a/packages/react/src/NavList/NavList.tsx +++ b/packages/react/src/NavList/NavList.tsx @@ -158,6 +158,7 @@ function ItemWithSubNav({children, subNav, depth: _depth, defaultOpen, style}: I + {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */} {React.cloneElement(subNav as React.ReactElement, {ref: subNavRef})} diff --git a/packages/react/src/Overlay/Overlay.tsx b/packages/react/src/Overlay/Overlay.tsx index 99ecdc04e0a..b2cf178ff32 100644 --- a/packages/react/src/Overlay/Overlay.tsx +++ b/packages/react/src/Overlay/Overlay.tsx @@ -106,6 +106,7 @@ export const BaseOverlay = React.forwardRef( ...rest }, forwardedRef, + // eslint-disable-next-line @typescript-eslint/no-explicit-any ): ReactElement => { return ( ( ...props }, forwardedRef, + // eslint-disable-next-line @typescript-eslint/no-explicit-any ): ReactElement => { const overlayRef = useRef(null) useRefObjectAsForwardedRef(forwardedRef, overlayRef) diff --git a/packages/react/src/Radio/Radio.tsx b/packages/react/src/Radio/Radio.tsx index d88b21ed475..8efa4501af1 100644 --- a/packages/react/src/Radio/Radio.tsx +++ b/packages/react/src/Radio/Radio.tsx @@ -51,6 +51,7 @@ const Radio = React.forwardRef( ...rest }: RadioProps, ref, + // eslint-disable-next-line @typescript-eslint/no-explicit-any ): ReactElement => { const radioGroupContext = useContext(RadioGroupContext) const handleOnChange: ChangeEventHandler = e => { diff --git a/packages/react/src/SegmentedControl/SegmentedControl.figma.tsx b/packages/react/src/SegmentedControl/SegmentedControl.figma.tsx index c4d602bb764..f99587819f5 100644 --- a/packages/react/src/SegmentedControl/SegmentedControl.figma.tsx +++ b/packages/react/src/SegmentedControl/SegmentedControl.figma.tsx @@ -44,6 +44,7 @@ figma.connect( { props: { selected: figma.enum('state', {selected: true}), + // eslint-disable-next-line @typescript-eslint/no-explicit-any icon: figma.instance('icon').getProps<{name: string; fn: React.ReactElement}>(), }, example: ({selected, icon}) => ( diff --git a/packages/react/src/SegmentedControl/SegmentedControl.tsx b/packages/react/src/SegmentedControl/SegmentedControl.tsx index 40b2262d74b..51a24b7b61f 100644 --- a/packages/react/src/SegmentedControl/SegmentedControl.tsx +++ b/packages/react/src/SegmentedControl/SegmentedControl.tsx @@ -61,6 +61,7 @@ const Root: React.FC> = ({ ) ? React.Children.toArray(children)[selectedIndex] : undefined + // eslint-disable-next-line @typescript-eslint/no-explicit-any const getChildIcon = (childArg: React.ReactNode): React.ReactElement | null => { if ( React.isValidElement(childArg) && diff --git a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx index cdd9991afaf..e549b43dc87 100644 --- a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx +++ b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx @@ -16,8 +16,10 @@ 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 */ + // eslint-disable-next-line @typescript-eslint/no-explicit-any leadingVisual?: React.FunctionComponent> | React.ReactElement /** @deprecated Use `leadingVisual` instead. The leading icon comes before item label */ + // eslint-disable-next-line @typescript-eslint/no-explicit-any leadingIcon?: React.FunctionComponent> | React.ReactElement /** Optional counter to display on the right side of the button */ count?: number | string diff --git a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx index f86b0d1135f..230e32aa3b0 100644 --- a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx +++ b/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx @@ -12,6 +12,7 @@ import type {FCWithSlotMarker} from '../utils/types' export type SegmentedControlIconButtonProps = { 'aria-label': string /** The icon that represents the segmented control item */ + // eslint-disable-next-line @typescript-eslint/no-explicit-any icon: React.FunctionComponent> | React.ReactElement /** Whether the segment is selected. This is used for controlled SegmentedControls, and needs to be updated using the onChange handler on SegmentedControl. */ selected?: boolean diff --git a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx index 46c6c5c25aa..1147b1bbd74 100644 --- a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx +++ b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx @@ -43,6 +43,7 @@ const NoResultsMessage = (filter: string): {variant: 'empty'; title: string; bod } } +// eslint-disable-next-line @typescript-eslint/no-explicit-any const EmptyMessage: {variant: 'empty'; title: string; body: React.ReactElement} = { variant: 'empty', title: `You haven't created any projects yet`, @@ -340,6 +341,7 @@ export const WithNotice = () => { const [open, setOpen] = useState(false) const [noticeVariant, setNoticeVariant] = useState(0) + // eslint-disable-next-line @typescript-eslint/no-explicit-any const noticeVariants: Array<{text: string | React.ReactElement; variant: 'info' | 'warning' | 'error'}> = [ { variant: 'info', @@ -637,6 +639,7 @@ export const CustomisedNoInitialItems = () => { setIsError(!isError) }, [setIsError, isError]) + // eslint-disable-next-line @typescript-eslint/no-explicit-any function getMessage(): {variant: 'empty' | 'error'; title: string; body: string | React.ReactElement} { if (isError) return ErrorMessage else if (filter) return NoResultsMessage(filter) @@ -901,9 +904,11 @@ export const WithMessage = () => { | undefined | { title: string + // eslint-disable-next-line @typescript-eslint/no-explicit-any body: string | React.ReactElement variant: 'empty' | 'error' | 'warning' icon?: React.ComponentType + // eslint-disable-next-line @typescript-eslint/no-explicit-any action?: React.ReactElement } > = [ diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx index 52829ea3d38..4e5f84e5df5 100644 --- a/packages/react/src/SelectPanel/SelectPanel.tsx +++ b/packages/react/src/SelectPanel/SelectPanel.tsx @@ -75,7 +75,9 @@ export type SelectPanelSecondaryAction = interface SelectPanelBaseProps { // TODO: Make `title` required in the next major version + // eslint-disable-next-line @typescript-eslint/no-explicit-any title?: string | React.ReactElement + // eslint-disable-next-line @typescript-eslint/no-explicit-any subtitle?: string | React.ReactElement onOpenChange: ( open: boolean, @@ -89,19 +91,23 @@ interface SelectPanelBaseProps { initialLoadingType?: InitialLoadingType className?: string notice?: { + // eslint-disable-next-line @typescript-eslint/no-explicit-any text: string | React.ReactElement variant: 'info' | 'warning' | 'error' } message?: { title: string + // eslint-disable-next-line @typescript-eslint/no-explicit-any body: string | React.ReactElement variant: 'empty' | 'error' | 'warning' icon?: React.ComponentType + // eslint-disable-next-line @typescript-eslint/no-explicit-any action?: React.ReactElement } /** * @deprecated Use `secondaryAction` instead. */ + // eslint-disable-next-line @typescript-eslint/no-explicit-any footer?: string | React.ReactElement showSelectedOptionsFirst?: boolean /** diff --git a/packages/react/src/SelectPanel/SelectPanelMessage.tsx b/packages/react/src/SelectPanel/SelectPanelMessage.tsx index a63c1276482..64fc56f1bf0 100644 --- a/packages/react/src/SelectPanel/SelectPanelMessage.tsx +++ b/packages/react/src/SelectPanel/SelectPanelMessage.tsx @@ -21,6 +21,7 @@ export type SelectPanelMessageProps = { * Ensure the action element is accessible by providing appropriate ARIA attributes * and making it keyboard-navigable. */ + // eslint-disable-next-line @typescript-eslint/no-explicit-any action?: React.ReactElement } diff --git a/packages/react/src/Textarea/Textarea.tsx b/packages/react/src/Textarea/Textarea.tsx index c5f7ff89883..bf777977003 100644 --- a/packages/react/src/Textarea/Textarea.tsx +++ b/packages/react/src/Textarea/Textarea.tsx @@ -71,6 +71,7 @@ const Textarea = React.forwardRef( ...rest }: TextareaProps, ref, + // eslint-disable-next-line @typescript-eslint/no-explicit-any ): ReactElement => { return ( ) +// eslint-disable-next-line @typescript-eslint/no-explicit-any function ExampleWithActionMenu(actionMenuTrigger: React.ReactElement): JSX.Element { return ( diff --git a/packages/react/src/UnderlineNav/UnderlineNav.tsx b/packages/react/src/UnderlineNav/UnderlineNav.tsx index 2031d481a8d..c0a252d3ffe 100644 --- a/packages/react/src/UnderlineNav/UnderlineNav.tsx +++ b/packages/react/src/UnderlineNav/UnderlineNav.tsx @@ -43,6 +43,7 @@ const MORE_BTN_HEIGHT = 45 const overflowEffect = ( navWidth: number, moreMenuWidth: number, + // eslint-disable-next-line @typescript-eslint/no-explicit-any childArray: Array>, childWidthArray: ChildWidthArray, noIconChildWidthArray: ChildWidthArray, @@ -60,7 +61,9 @@ const overflowEffect = ( navWidth, moreMenuWidth || MORE_BTN_WIDTH, ) + // eslint-disable-next-line @typescript-eslint/no-explicit-any const items: Array> = [] + // eslint-disable-next-line @typescript-eslint/no-explicit-any const menuItems: Array> = [] // First, we check if we can fit all the items with their icons @@ -105,6 +108,7 @@ const overflowEffect = ( } export const getValidChildren = (children: React.ReactNode) => { + // eslint-disable-next-line @typescript-eslint/no-explicit-any return React.Children.toArray(children).filter(child => React.isValidElement(child)) as React.ReactElement[] } @@ -201,6 +205,7 @@ export const UnderlineNav = forwardRef( } const swapMenuItemWithListItem = ( + // eslint-disable-next-line @typescript-eslint/no-explicit-any prospectiveListItem: React.ReactElement, indexOfProspectiveListItem: number, event: React.MouseEvent | React.KeyboardEvent, diff --git a/packages/react/src/UnderlineNav/UnderlineNavItem.tsx b/packages/react/src/UnderlineNav/UnderlineNavItem.tsx index a95c93f8d49..dde70d1c9f9 100644 --- a/packages/react/src/UnderlineNav/UnderlineNavItem.tsx +++ b/packages/react/src/UnderlineNav/UnderlineNavItem.tsx @@ -36,6 +36,7 @@ export type UnderlineNavItemProps = { /** * Icon before the text */ + // eslint-disable-next-line @typescript-eslint/no-explicit-any icon?: React.FunctionComponent | React.ReactElement /** * Renders `UnderlineNav.Item` as given component i.e. react-router's Link diff --git a/packages/react/src/UnderlineNav/types.ts b/packages/react/src/UnderlineNav/types.ts index 90bda9ca9cd..8e50e5582f0 100644 --- a/packages/react/src/UnderlineNav/types.ts +++ b/packages/react/src/UnderlineNav/types.ts @@ -4,6 +4,8 @@ export type ChildSize = { } export type ChildWidthArray = Array export type ResponsiveProps = { + // eslint-disable-next-line @typescript-eslint/no-explicit-any items: Array> + // eslint-disable-next-line @typescript-eslint/no-explicit-any menuItems: Array> } diff --git a/packages/react/src/deprecated/ActionList/List.tsx b/packages/react/src/deprecated/ActionList/List.tsx index 19913b7b187..635ffc6c122 100644 --- a/packages/react/src/deprecated/ActionList/List.tsx +++ b/packages/react/src/deprecated/ActionList/List.tsx @@ -10,6 +10,7 @@ import {clsx} from 'clsx' import type {Merge} from '../../utils/types/Merge' import classes from './List.module.css' +// eslint-disable-next-line @typescript-eslint/no-explicit-any export type RenderItemFn = (props: ItemProps) => React.ReactElement export type ItemInput = diff --git a/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx b/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx index f72123d84f0..a8ae8ee2e14 100644 --- a/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx +++ b/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx @@ -116,6 +116,7 @@ const Panel: React.FC = ({ // 🚨 Hack for good API! // we strip out Anchor from children and wire it up to Dialog // with additional props for accessibility + // eslint-disable-next-line @typescript-eslint/no-explicit-any let Anchor: React.ReactElement | undefined const anchorRef = useProvidedRefOrCreate(providedAnchorRef) diff --git a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx index 17f440ac8ed..a6fa4bee785 100644 --- a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx +++ b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx @@ -51,6 +51,7 @@ export type UnderlineItemProps = { iconsVisible?: boolean loadingCounters?: boolean counter?: number | string + // eslint-disable-next-line @typescript-eslint/no-explicit-any icon?: FC | React.ReactElement id?: string ref?: React.Ref diff --git a/packages/react/src/stories/deprecated/ActionList.stories.tsx b/packages/react/src/stories/deprecated/ActionList.stories.tsx index 75c10e4a982..444d838d94c 100644 --- a/packages/react/src/stories/deprecated/ActionList.stories.tsx +++ b/packages/react/src/stories/deprecated/ActionList.stories.tsx @@ -348,6 +348,7 @@ export function SizeStressTestingStory(): JSX.Element { SizeStressTestingStory.storyName = 'Size Stress Testing' const NextJSLikeLink = forwardRef( + // eslint-disable-next-line @typescript-eslint/no-explicit-any ({href, children}: {href: string; children: React.ReactNode}, ref): React.ReactElement => { const child = React.Children.only(children) const childProps = {