feat: support React 19 [BREAKING CHANGE]

.yarnrc.yml

@@ -1 +1,5 @@
-yarnPath: .yarn/releases/yarn-1.22.22.cjs
+enableTelemetry: false
+
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.5.3.cjs

package.json

@@ -32,7 +32,8 @@
     "./lib/uswds.css": "./lib/uswds.css"
   },
   "files": [
-    "lib"
+    "lib",
+    "README.md"
   ],
   "engines": {
     "node": ">= 18"
@@ -71,11 +72,11 @@
   "peerDependencies": {
     "@uswds/uswds": "^3.7.1",
     "focus-trap-react": "^10.2.3",
-    "react": "^16.x || ^17.x || ^18.x",
-    "react-dom": "^16.x || ^17.x || ^18.x"
+    "react": "^16.x || ^17.x || ^18.x || ^19.x",
+    "react-dom": "^16.x || ^17.x || ^18.x || ^19.x"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.9",
+    "@babel/core": "^7.26.0",
     "@laynezh/vite-plugin-lib-assets": "^0.5.14",
     "@storybook/addon-a11y": "^8.0.4",
     "@storybook/addon-essentials": "^8.0.4",
@@ -93,9 +94,9 @@
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.0.4",
-    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.2.18",
-    "@types/react-test-renderer": "^18.0.7",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.2",
+    "@types/react-test-renderer": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.1.1",
     "@uswds/uswds": "3.7.1",
@@ -121,9 +122,9 @@
     "husky": "^9.0.10",
     "jsdom": "^24.0.0",
     "prettier": "^3.2.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-test-renderer": "^18.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-test-renderer": "^19.0.0",
     "sass": "^1.26.0",
     "storybook": "^8.0.4",
     "stylelint": "^16.2.1",
@@ -150,8 +151,8 @@
     "glob-parent": "5.1.2",
     "trim": "0.0.3",
     "trim-newlines": "3.0.1",
-    "@types/react": "18.2.48",
-    "@types/react-dom": "18.2.18"
+    "@types/react": "19.0.0",
+    "@types/react-dom": "19.0.0"
   },
-  "packageManager": "yarn@1.22.22"
+  "packageManager": "yarn@4.5.3"
 }

src/components/Accordion/Accordion.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Accordion, AccordionItemProps } from './Accordion'
 
 export default {

src/components/Accordion/Accordion.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 
 import { Accordion, AccordionItemProps } from './Accordion'

src/components/Accordion/Accordion.tsx

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

src/components/Alert/Alert.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Alert } from './Alert'
 
 import { Button } from '../Button/Button'

src/components/Alert/Alert.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { render } from '@testing-library/react'
 
 import { Alert } from './Alert'

src/components/Alert/Alert.tsx

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

src/components/Button/Button.stories.tsx

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

src/components/Button/Button.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 
 vi.mock('../../deprecation')

src/components/Button/Button.tsx

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

src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { ButtonGroup } from './ButtonGroup'
 import { Button } from '../Button/Button'
 import { Link } from '../Link/Link'

src/components/ButtonGroup/ButtonGroup.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { render } from '@testing-library/react'
 
 import { ButtonGroup } from './ButtonGroup'

src/components/ButtonGroup/ButtonGroup.tsx

@@ -1,4 +1,4 @@
-import React 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/Collection/Collection.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Link } from './../Link/Link'
 import { Collection } from './Collection'
 import { CollectionItem } from './CollectionItem'

src/components/Collection/Collection.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { render } from '@testing-library/react'
 
 import { Collection } from './Collection'

src/components/Collection/Collection.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import classnames from 'classnames'
+import { JSX } from 'react'
 
 type CollectionProps = {
   condensed?: boolean

src/components/Collection/CollectionCalendarDate.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { render } from '@testing-library/react'
 import { CollectionCalendarDate } from './CollectionCalendarDate'
 

src/components/Collection/CollectionCalendarDate.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 
 interface CollectionCalendarDateProps {
   datetime: string

src/components/Collection/CollectionDescription.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { render } from '@testing-library/react'
 import { CollectionDescription } from './CollectionDescription'
 

src/components/Collection/CollectionDescription.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { JSX } from 'react'
 import classname from 'classnames'
 
 export const CollectionDescription = ({

src/components/Collection/CollectionHeading.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { render } from '@testing-library/react'
 import { CollectionHeading } from './CollectionHeading'
 import { HeadingLevel } from '../../types/headingLevel'

src/components/Collection/CollectionHeading.tsx

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

src/components/Collection/CollectionItem.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { render } from '@testing-library/react'
 import { CollectionItem } from './CollectionItem'
 

src/components/Collection/CollectionItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { JSX } from 'react'
 import classnames from 'classnames'
 
 interface CollectionItemProps {

src/components/Collection/CollectionMeta.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { render } from '@testing-library/react'
 import { CollectionMeta } from './CollectionMeta'
 import { CollectionMetaItem } from './CollectionMetaItem'

src/components/Collection/CollectionMeta.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { JSX } from 'react'
 import classnames from 'classnames'
 
 export const CollectionMeta = ({

src/components/Collection/CollectionMetaItem.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { render } from '@testing-library/react'
 import { CollectionMetaItem } from './CollectionMetaItem'
 

src/components/Collection/CollectionMetaItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { JSX } from 'react'
 import classnames from 'classnames'
 
 export const CollectionMetaItem = ({

src/components/Collection/CollectionMetaItemTag.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { render } from '@testing-library/react'
 import { CollectionMetaItemTag } from './CollectionMetaItemTag'
 

src/components/Collection/CollectionMetaItemTag.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { JSX } from 'react'
 import classnames from 'classnames'
 
 interface CollectionMetaItemTagProps {

src/components/Collection/CollectionThumbnail.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { render } from '@testing-library/react'
 import { CollectionThumbnail } from './CollectionThumbnail'
 

src/components/Collection/CollectionThumbnail.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { JSX } from 'react'
 import classnames from 'classnames'
 
 export const CollectionThumbnail = ({

src/components/Footer/Address/Address.stories.tsx

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

src/components/Footer/Address/Address.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { render } from '@testing-library/react'
 import { Address } from './Address'
 

src/components/Footer/Address/Address.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import classnames from 'classnames'
 
 type AddressProps = {

src/components/Footer/Footer/Footer.stories.tsx

@@ -1,5 +1,4 @@
 /*  eslint-disable jsx-a11y/anchor-is-valid */
-import React from 'react'
 
 import { Address } from '../Address/Address'
 import { Button } from '../../Button/Button'

src/components/Footer/Footer/Footer.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { render } from '@testing-library/react'
 import { Footer } from './Footer'
 

src/components/Footer/Footer/Footer.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import classnames from 'classnames'
 
 type FooterProps = {

src/components/Footer/FooterExtendedNavList/FooterExtendedNavList.test.tsx

@@ -1,6 +1,5 @@
 /*  eslint-disable jsx-a11y/anchor-is-valid, react/jsx-key */
 
-import React from 'react'
 import { render } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 

src/components/Footer/FooterExtendedNavList/FooterExtendedNavList.tsx

@@ -1,15 +1,15 @@
-import React, { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react'
 import classnames from 'classnames'
 import { NavList } from '../../header/NavList/NavList'
 
 export type ExtendedNavLinksType = React.ReactNode[][]
 
 type FooterExtendedNavListProps = {
   isMobile?: boolean
-  /* 
+  /*
     Turn on mobile styles via prop. If undefined, a fallback is used based on the client window width.
   */
-  /* 
+  /*
     Multidimensional array of grouped nav links. Sub-arrays are column sections, first element is used as a heading.
   */
   nestedLinks: ExtendedNavLinksType
@@ -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/Footer/FooterNav/FooterNav.stories.tsx

@@ -1,5 +1,4 @@
 /*  eslint-disable jsx-a11y/anchor-is-valid */
-import React from 'react'
 
 import { Footer } from '../Footer/Footer'
 import { FooterNav } from './FooterNav'

src/components/Footer/FooterNav/FooterNav.test.tsx

@@ -1,6 +1,5 @@
 /*  eslint-disable jsx-a11y/anchor-is-valid, react/jsx-key */
 
-import React from 'react'
 import { render } from '@testing-library/react'
 import { FooterNav } from './FooterNav'
 

src/components/Footer/FooterNav/FooterNav.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {
   FooterExtendedNavList,
   ExtendedNavLinksType,

src/components/Footer/Logo/Logo.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 
 import { Logo } from './Logo'
 

src/components/Footer/Logo/Logo.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { render } from '@testing-library/react'
 import { Logo } from './Logo'
 

src/components/Footer/Logo/Logo.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import classnames from 'classnames'
 
 type LogoProps = {

src/components/Footer/SocialLinks/SocialLinks.stories.tsx

@@ -1,5 +1,4 @@
 /*  eslint-disable jsx-a11y/anchor-is-valid */
-import React from 'react'
 import { SocialLinks, SocialLink } from './SocialLinks'
 
 export default {

src/components/Footer/SocialLinks/SocialLinks.test.tsx

@@ -1,5 +1,4 @@
 /*  eslint-disable jsx-a11y/anchor-is-valid */
-import React from 'react'
 import { render } from '@testing-library/react'
 
 import { SocialLinks, SocialLink } from './SocialLinks'

src/components/Footer/SocialLinks/SocialLinks.tsx

@@ -1,5 +1,5 @@
 /*  eslint-disable jsx-a11y/anchor-is-valid */
-import React from 'react'
+import { JSX } from 'react'
 import classnames from 'classnames'
 import { Icon } from '../../Icon/Icons'
 import { IconProps } from '../../Icon/Icon'

src/components/Icon/Icon.stories.tsx

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

src/components/Icon/Icon.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { render, screen } from '@testing-library/react'
 
 import { Icon } from './Icons'

src/components/Icon/Icon.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { JSX } from 'react'
 import classnames from 'classnames'
 
 interface USWDSIconProps {

src/components/Icon/Icons.stories.tsx

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

src/components/Icon/Icons.ts

@@ -243,7 +243,6 @@ import ZoomOutMapSvg from '@uswds/uswds/img/usa-icons/zoom_out_map.svg?svgr'
 import ZoomOutSvg from '@uswds/uswds/img/usa-icons/zoom_out.svg?svgr'
 
 import { makeUSWDSIcon, IconProps } from './Icon'
-import React from 'react'
 
 export class Icon {
   public static AccessibilityNew: React.ComponentType<IconProps> =

src/components/IconList/IconList.stories.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react'
+import { ReactElement } from 'react'
 import { Icon } from '../Icon/Icons'
 import { IconList } from './IconList'
 import { IconListItem } from './IconListItem/IconListItem'