fix: correct lint errors

src/bundles.test.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import jsxRuntime from 'react/jsx-runtime'
 import reactDom from 'react-dom'
 import FocusTrap from 'focus-trap-react'

src/components/ButtonGroup/ButtonGroup.tsx

@@ -1,4 +1,4 @@
-import { JSX } from 'react'
+import { Children, JSX } from 'react'
 import classnames from 'classnames'
 
 type ButtonGroupProps = {
@@ -23,7 +23,7 @@ export const ButtonGroup = ({
 
   return (
     <ul className={classes} {...restProps}>
-      {React.Children.map(children, (child: React.ReactNode) => {
+      {Children.map(children, (child: React.ReactNode) => {
         return <li className="usa-button-group__item">{child}</li>
       })}
     </ul>

src/components/Footer/FooterExtendedNavList/FooterExtendedNavList.tsx

@@ -24,7 +24,7 @@ export const FooterExtendedNavList = ({
   const classes = classnames('grid-row grid-gap-4', className)
   const isClient = window && typeof window === 'object'
 
-  const [isMobileFallback, setIsMobileFallback] = React.useState<boolean>(
+  const [isMobileFallback, setIsMobileFallback] = useState<boolean>(
     isClient && window.innerWidth < 480
   )
   const [sectionsOpenState, setSectionsOpenState] = useState<boolean[]>(

src/components/IconList/IconList.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, JSX } from 'react'
+import { JSX } from 'react'
 import classnames from 'classnames'
 
 interface IconListProps {
@@ -9,7 +9,7 @@ interface IconListProps {
 export const IconList = ({
   children,
   className,
-}: IconListProps & JSX.IntrinsicElements['ul']): ReactElement => {
+}: IconListProps & JSX.IntrinsicElements['ul']): React.ReactElement => {
   const classes = classnames(className, 'usa-icon-list')
 
   return (

src/components/Identifier/IdentifierLogos/IdentifierLogos.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react'
 import classnames from 'classnames'
 
 interface IdentifierLogosProps {

src/components/Identifier/IdentifierMasthead/IdentifierMasthead.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react'
 import classnames from 'classnames'
 
 interface IdentifierMastheadProps {

src/components/LanguageSelector/LanguageSelector.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, JSX } from 'react'
 import classnames from 'classnames'
 import { LanguageSelectorButton } from './LanguageSelectorButton'
 import LanguageSelectorDropdown from './LanguageSelectorDropdown'

src/components/LanguageSelector/LanguageSelectorButton.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react'
 import classnames from 'classnames'
 
 type LanguageSelectorButtonProps = {

src/components/Link/Link.stories.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react'
 import { Link } from './Link'
 
 export default {

src/components/Link/Link.tsx

@@ -1,4 +1,4 @@
-import { JSX } from 'react'
+import { createElement, JSX } from 'react'
 import classnames from 'classnames'
 
 // These props we want to require always, even on custom components
@@ -74,7 +74,7 @@ export function Link<
     //
     const linkProps: FCProps = remainingProps as unknown as FCProps
     const classes = linkClasses(variant, className)
-    return React.createElement(
+    return createElement(
       asCustom,
       {
         className: classes,

src/components/Modal/ModalCloseButton/ModalCloseButton.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react'
 import { Icon } from '../../Icon/Icons'
 import { Button } from '../../Button/Button'
 

src/components/Modal/ModalFooter/ModalFooter.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react'
 import classnames from 'classnames'
 
 interface ModalFooterProps {

src/components/Modal/ModalOpenLink.test.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react'
 import { render, screen, waitFor } from '@testing-library/react'
 
 import { ModalRef } from './Modal'

src/components/Modal/ModalToggleButton.tsx

@@ -1,4 +1,4 @@
-
+import { JSX } from 'react'
 import { ModalRef } from './Modal'
 import { ButtonProps, Button } from '../Button/Button'
 

src/components/Pagination/Pagination.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react'
 import classnames from 'classnames'
 import { Icon } from '../Icon/Icons'
 import { Link } from '../Link/Link'

src/components/ProcessList/ProcessList/ProcessList.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react'
 import classnames from 'classnames'
 import { ProcessListItemProps } from '../ProcessListItem/ProcessListItem'
 

src/components/ProcessList/ProcessListHeading/ProcessListHeading.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react'
 import classnames from 'classnames'
 import { HeadingLevel } from '../../../types/headingLevel'
 

src/components/ProcessList/ProcessListItem/ProcessListItem.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react'
 import classnames from 'classnames'
 
 export interface ProcessListItemProps {

src/components/SiteAlert/SiteAlert.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react'
 import classnames from 'classnames'
 
 type SiteAlertProps = {

src/components/SummaryBox/SummaryBox/SummaryBox.tsx

@@ -1,4 +1,4 @@
-
+import { JSX } from 'react'
 import classnames from 'classnames'
 
 type SummaryBoxProps = {

src/components/SummaryBox/SummaryBoxContent/SummaryBoxContent.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react'
 import classnames from 'classnames'
 
 interface SummaryBoxTextProps {

src/components/Tag/Tag.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react'
 import classnames from 'classnames'
 
 type TagProps = {

src/components/Tooltip/Tooltip.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { forwardRef, JSX } from 'react'
 import { Tooltip } from './Tooltip'
 
 export default {

src/components/Tooltip/Tooltip.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { JSX } from 'react'
 import { fireEvent, render, screen } from '@testing-library/react'
 
 import { Tooltip } from './Tooltip'

src/components/forms/CharacterCount/CharacterCount.test.tsx

@@ -1,3 +1,4 @@
+import { createRef } from 'react'
 import { render, fireEvent } from '@testing-library/react'
 
 import { CharacterCount } from './CharacterCount'
@@ -46,7 +47,7 @@ describe('CharacterCount component', () => {
     })
 
     it('handles own props', () => {
-      const tRef = React.createRef<HTMLTextAreaElement>()
+      const tRef = createRef<HTMLTextAreaElement>()
       const { getByRole } = render(
         <CharacterCount
           id="character-count-id"
@@ -145,7 +146,7 @@ describe('CharacterCount component', () => {
     })
 
     it('handles own props', () => {
-      const tRef = React.createRef<HTMLTextAreaElement>()
+      const tRef = createRef<HTMLTextAreaElement>()
       const { getByDisplayValue } = render(
         <>
           <CharacterCount

src/components/forms/ComboBox/ComboBox.test.tsx

@@ -1,3 +1,4 @@
+import { createRef } from 'react'
 import { screen, render, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 
@@ -1754,7 +1755,7 @@ describe('ComboBox component', () => {
 
   describe('exposed ref', () => {
     it('can be used to focus on the text input', async () => {
-      const comboRef = React.createRef<ComboBoxRef>()
+      const comboRef = createRef<ComboBoxRef>()
       const onChange = vi.fn()
       const handleFocus = (): void => comboRef.current?.focus()
 
@@ -1781,7 +1782,7 @@ describe('ComboBox component', () => {
     })
 
     it('can be used to clear the selected value', async () => {
-      const comboRef = React.createRef<ComboBoxRef>()
+      const comboRef = createRef<ComboBoxRef>()
       const onChange = vi.fn()
       const handleClearSelection = (): void =>
         comboRef.current?.clearSelection()

src/components/forms/FileInput/FileInput.test.tsx

@@ -1,3 +1,4 @@
+import { createRef } from 'react'
 import { fireEvent, render, screen, within } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 
@@ -363,7 +364,7 @@ describe('FileInput component', () => {
 
   describe('exposed ref', () => {
     it('can be used to access the files', async () => {
-      const fileInputRef = React.createRef<FileInputRef>()
+      const fileInputRef = createRef<FileInputRef>()
 
       render(<FileInput {...testProps} ref={fileInputRef} />)
 
@@ -376,7 +377,7 @@ describe('FileInput component', () => {
     })
 
     it('can be used to clear the files', async () => {
-      const fileInputRef = React.createRef<FileInputRef>()
+      const fileInputRef = createRef<FileInputRef>()
       const handleClearFiles = (): void => fileInputRef.current?.clearFiles()
 
       render(

src/components/forms/Form/Form.stories.tsx

@@ -1,6 +1,6 @@
 /*  eslint-disable jsx-a11y/anchor-is-valid */
+import { useState } from 'react'
 import { Form } from './Form'
-
 import { Alert } from '../../Alert/Alert'
 import { Button } from '../../Button/Button'
 import { ErrorMessage } from '../ErrorMessage/ErrorMessage'
@@ -205,7 +205,7 @@ export const AddressForm = (): React.ReactElement => (
 )
 
 export const SignInForm = (): React.ReactElement => {
-  const [showPassword, setShowPassword] = React.useState(false)
+  const [showPassword, setShowPassword] = useState(false)
 
   return (
     <Form onSubmit={mockSubmit} large>
@@ -254,7 +254,7 @@ export const SignInForm = (): React.ReactElement => {
   )
 }
 export const PasswordResetForm = (): React.ReactElement => {
-  const [showPassword, setShowPassword] = React.useState(false)
+  const [showPassword, setShowPassword] = useState(false)
 
   return (
     <Form onSubmit={mockSubmit} large>

src/components/forms/RangeInput/RangeInput.test.tsx

@@ -1,3 +1,4 @@
+import { createRef } from 'react'
 import { render } from '@testing-library/react'
 
 import { RangeInput } from './RangeInput'
@@ -67,7 +68,7 @@ describe('RangeInput component', () => {
   })
 
   it('renders with attached ref', () => {
-    const rangeRef: React.RefObject<HTMLInputElement> = React.createRef()
+    const rangeRef: React.RefObject<HTMLInputElement> = createRef()
 
     const { queryByTestId } = render(
       <RangeInput id="range-slider-id" name="rangeName" inputRef={rangeRef} />

src/components/forms/Textarea/Textarea.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react'
 import classnames from 'classnames'
 
 type TextareaRef =

src/components/grid/Grid/Grid.tsx

@@ -1,4 +1,4 @@
-import { JSX } from 'react'
+import { createElement, JSX } from 'react'
 import classnames from 'classnames'
 
 import { GridItemProps, BreakpointKeys, breakpoints } from '../types'
@@ -138,7 +138,7 @@ export function Grid<FCProps = DefaultGridProps>(
     const { asCustom, ...remainingProps } = otherProps
 
     const gridProps: FCProps = remainingProps as unknown as FCProps
-    return React.createElement(
+    return createElement(
       asCustom,
       {
         className: classes,

src/components/grid/GridContainer/GridContainer.tsx

@@ -1,3 +1,4 @@
+import { createElement } from 'react'
 import classnames from 'classnames'
 
 import { ContainerSizes } from '../types'
@@ -53,7 +54,7 @@ export function GridContainer<
       props
     const gridContainerProps: FCProps = remainingProps as unknown as FCProps
     const classes = gridContainerClasses(className, containerSize)
-    return React.createElement(
+    return createElement(
       asCustom,
       {
         'data-testid': 'gridContainer',

src/components/mediablock/MediaBlockBody/MediaBlockBody.tsx

@@ -1,11 +1,11 @@
-import { ReactElement } from 'react'
+import { JSX } from 'react'
 import classNames from 'classnames'
 
 export const MediaBlockBody = ({
   children,
   className,
   ...divProps
-}: JSX.IntrinsicElements['div']): ReactElement => {
+}: JSX.IntrinsicElements['div']): React.ReactElement => {
   const classes = classNames('usa-media-block__body', className)
 
   return (

src/components/stepindicator/StepIndicatorStep/StepIndicatorStep.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react'
 import classnames from 'classnames'
 
 import { StepStatusText } from '../StepIndicator/StepIndicator'