feat: upgrade to USWDS 3.8.1

package.json

@@ -69,7 +69,7 @@
   },
   "homepage": "https://github.com/trussworks/react-uswds#readme",
   "peerDependencies": {
-    "@uswds/uswds": "^3.7.1",
+    "@uswds/uswds": "^3.8.1",
     "focus-trap-react": "^10.2.3",
     "react": "^16.x || ^17.x || ^18.x",
     "react-dom": "^16.x || ^17.x || ^18.x"
@@ -98,7 +98,7 @@
     "@types/react-test-renderer": "^18.0.7",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.1.1",
-    "@uswds/uswds": "3.7.1",
+    "@uswds/uswds": "3.8.1",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-istanbul": "^1.2.1",
     "all-contributors-cli": "^6.24.0",

src/components/InPageNavigation/InPageNavigation.stories.tsx

@@ -20,12 +20,17 @@ export default {
     title: {
       control: 'text',
     },
+    headingElements: {
+      control: 'check',
+      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+    },
   },
   args: {
     headingLevel: 'h4',
     rootMargin: '0px 0px 0px 0px',
     threshold: 1,
     title: 'On this page',
+    headingElements: ['h2', 'h3'],
   },
   parameters: {
     docs: {
@@ -46,6 +51,7 @@ type StorybookArguments = {
   scrollOffset: string
   threshold: number
   title: string
+  headingElements: HeadingLevel[]
 }
 
 export const Default = (argTypes: StorybookArguments): React.ReactElement => (
@@ -56,6 +62,7 @@ export const Default = (argTypes: StorybookArguments): React.ReactElement => (
     rootMargin={argTypes.rootMargin}
     threshold={argTypes.threshold}
     title={argTypes.title}
+    headingElements={argTypes.headingElements}
   />
 )
 
@@ -72,5 +79,6 @@ export const ScrollOffset = (
     scrollOffset="2rem"
     threshold={argTypes.threshold}
     title={argTypes.title}
+    headingElements={argTypes.headingElements}
   />
 )

src/components/InPageNavigation/InPageNavigation.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { screen, render, getByRole } from '@testing-library/react'
+import { screen, render, getByRole, within } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import { InPageNavigation } from './InPageNavigation'
 import { HeadingLevel } from '../../types/headingLevel'
@@ -13,14 +13,15 @@ describe('InPageNavigation component', () => {
     title: 'What do we have <i>here</i>?',
   }
 
-  const setup = (plain?: boolean) => {
+  const setup = (plain?: boolean, headingElements?: HeadingLevel[]) => {
     const utils = plain
       ? render(<InPageNavigation content={props.content} />)
       : render(
           <InPageNavigation
             content={props.content}
             headingLevel={props.headingLevel}
             title={props.title}
+            headingElements={headingElements}
           />
         )
     const nav = screen.getByTestId('InPageNavigation')
@@ -62,4 +63,22 @@ describe('InPageNavigation component', () => {
     })
     expect(heading).toBeInTheDocument()
   })
+
+  describe('lists the right heading types if', () => {
+    it('is undefined', () => {
+      const { nav } = setup(true)
+      const contentHeadingsTwo = screen.getAllByRole('heading', { level: 2 })
+      const contentHeadingsThree = screen.getAllByRole('heading', { level: 3 })
+      const contentHeadings = contentHeadingsTwo.concat(contentHeadingsThree)
+      const headingLinks = within(nav).getAllByRole('link')
+      expect(contentHeadings.length).toBe(headingLinks.length)
+    })
+
+    it('is defined', () => {
+      const { nav } = setup(false, ['h2' as HeadingLevel])
+      const contentHeadingsTwo = screen.getAllByRole('heading', { level: 2 })
+      const headingLinks = within(nav).getAllByRole('link')
+      expect(contentHeadingsTwo.length).toBe(headingLinks.length)
+    })
+  })
 })

src/components/InPageNavigation/InPageNavigation.tsx

@@ -14,6 +14,7 @@ type InPageNavigationProps = {
   scrollOffset?: string
   threshold?: number
   title?: string
+  headingElements?: HeadingLevel[]
 }
 
 export const InPageNavigation = ({
@@ -26,6 +27,7 @@ export const InPageNavigation = ({
   scrollOffset,
   threshold = 1,
   title = 'On this page',
+  headingElements = ['h2', 'h3'],
   ...divProps
 }: InPageNavigationProps &
   Omit<JSX.IntrinsicElements['div'], 'content'>): React.ReactElement => {
@@ -39,8 +41,9 @@ export const InPageNavigation = ({
     '--margin-offset': scrollOffset,
   } as React.CSSProperties
   const [currentSection, setCurrentSection] = useState('')
+  if (headingElements.length === 0) headingElements = ['h2', 'h3']
   const sectionHeadings: JSX.Element[] = content.props.children.filter(
-    (el: JSX.Element) => el.type === 'h2' || el.type === 'h3'
+    (el: JSX.Element) => headingElements.includes(el.type)
   )
   const handleIntersection = (entries: IntersectionObserverEntry[]) => {
     entries.forEach((entry) => {
@@ -78,7 +81,8 @@ export const InPageNavigation = ({
               const heading: JSX.Element = el.props.children
               const href: string = el.props.id
               const hClass = classnames('usa-in-page-nav__item', {
-                'usa-in-page-nav__item--sub-item': el.type === 'h3',
+                'usa-in-page-nav__item--primary':
+                  el.type === headingElements[0],
               })
               const lClass = classnames('usa-in-page-nav__link', {
                 'usa-current': href === currentSection,

src/components/Table/Table.stories.tsx

@@ -29,9 +29,15 @@ Source: https://designsystem.digital.gov/components/table/
     stackedStyle: {
       control: {
         type: 'select',
-        options: ['default', 'headers'],
+        options: ['default', 'headers', 'none'],
       },
     },
+    stickyHeader: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'This is not compatible with stacked and scrollable',
+    },
   },
   args: {
     stackedStyle: 'default',
@@ -41,7 +47,8 @@ Source: https://designsystem.digital.gov/components/table/
 type StorybookArguments = {
   bordered: boolean
   striped: boolean
-  stackedStyle: 'default' | 'headers'
+  stackedStyle: 'default' | 'headers' | 'none'
+  stickyHeader: boolean
 }
 
 const testContent = (
@@ -343,6 +350,14 @@ export const Scrollable = (): React.ReactElement => (
   </>
 )
 
+export const StickyHeader = {
+  render: (argTypes: StorybookArguments): React.ReactElement => (
+    <Table stickyHeader={argTypes.stickyHeader} bordered={argTypes.bordered}>
+      {testContent}
+    </Table>
+  ),
+}
+
 export const Striped = {
   render: (argTypes: StorybookArguments): React.ReactElement => (
     <Table

src/components/Table/Table.test.tsx

@@ -104,6 +104,12 @@ describe('Table component', () => {
     )
   })
 
+  it('renders sticky header table', () => {
+    const { getByRole } = render(<Table stickyHeader>{testContent}</Table>)
+
+    expect(getByRole('table')).toHaveClass('usa-table--sticky-header')
+  })
+
   it('passes the class onto the root table element', () => {
     const { getByRole } = render(
       <Table className="custom-class">{testContent}</Table>

src/components/Table/Table.tsx

@@ -14,6 +14,7 @@ type TableProps = {
   striped?: boolean
   compact?: boolean
   stackedStyle?: 'none' | 'default' | 'headers'
+  stickyHeader?: boolean
 }
 
 export const Table = ({
@@ -27,6 +28,7 @@ export const Table = ({
   striped,
   compact,
   stackedStyle = 'none',
+  stickyHeader,
 }: TableProps): React.ReactElement => {
   const classes = classnames(
     'usa-table',
@@ -38,6 +40,7 @@ export const Table = ({
       'usa-table--compact': compact,
       'usa-table--stacked': stackedStyle === 'default',
       'usa-table--stacked-header': stackedStyle === 'headers',
+      'usa-table--sticky-header': stickyHeader,
     },
     className
   )
@@ -48,6 +51,12 @@ export const Table = ({
     )
   }
 
+  if (stickyHeader && (scrollable || stackedStyle !== 'none')) {
+    console.warn(
+      'USWDS states that sticky headers are not compatible with scrollable or stacked variants. See USWDS Table component, Table variants for more information: https://designsystem.digital.gov/components/table'
+    )
+  }
+
   const table = (
     <table className={classes} data-testid="table">
       {caption && <caption>{caption}</caption>}

src/components/Tooltip/Tooltip.test.tsx

@@ -81,7 +81,7 @@ describe('Tooltip component', () => {
     expect(bodyEl).toHaveClass('is-visible')
     expect(bodyEl).toHaveAttribute('aria-hidden', 'false')
 
-    fireEvent.mouseLeave(screen.getByTestId('triggerElement'))
+    fireEvent.mouseLeave(screen.getByTestId('tooltipWrapper'))
     expect(bodyEl).not.toHaveClass('is-visible')
     expect(bodyEl).toHaveAttribute('aria-hidden', 'true')
   })
@@ -110,14 +110,19 @@ describe('Tooltip component', () => {
     expect(bodyEl).toHaveAttribute('aria-hidden', 'true')
   })
 
-  it('hides tooltip on keydown after focus', () => {
+  it('hides tooltip on Escape keydown after focus', () => {
     render(<Tooltip label="Click me">My Tooltip</Tooltip>)
     const bodyEl = screen.queryByRole('tooltip', { hidden: true })
 
     fireEvent.focus(screen.getByTestId('triggerElement'))
     expect(bodyEl).toHaveClass('is-visible')
     expect(bodyEl).toHaveAttribute('aria-hidden', 'false')
 
+    fireEvent.keyDown(screen.getByTestId('triggerElement'), { key: 'a' })
+
+    expect(bodyEl).toHaveClass('is-visible')
+    expect(bodyEl).not.toHaveAttribute('aria-hidden', 'true')
+
     fireEvent.keyDown(screen.getByTestId('triggerElement'), { key: 'Escape' })
 
     expect(bodyEl).not.toHaveClass('is-visible')

src/components/Tooltip/Tooltip.tsx

@@ -189,6 +189,9 @@ export function Tooltip<
   const hideTooltip = (): void => {
     setVisible(false)
   }
+  const escapeTooltip = (e: React.KeyboardEvent<HTMLButtonElement>): void => {
+    if (e.key === 'Escape') hideTooltip()
+  }
 
   const wrapperClasses = classnames('usa-tooltip', wrapperclasses)
 
@@ -220,16 +223,18 @@ export function Tooltip<
         onMouseEnter: showTooltip,
         onMouseOver: showTooltip,
         onFocus: showTooltip,
-        onMouseLeave: hideTooltip,
         onBlur: hideTooltip,
-        onKeyDown: hideTooltip,
+        onKeyDown: escapeTooltip,
         className: triggerClasses,
       },
       children
     )
 
     return (
-      <span data-testid="tooltipWrapper" className={wrapperClasses}>
+      <span
+        data-testid="tooltipWrapper"
+        className={wrapperClasses}
+        onMouseLeave={hideTooltip}>
         {triggerElement}
         <span
           data-testid="tooltipBody"
@@ -254,7 +259,10 @@ export function Tooltip<
     )
 
     return (
-      <span data-testid="tooltipWrapper" className={wrapperClasses}>
+      <span
+        data-testid="tooltipWrapper"
+        className={wrapperClasses}
+        onMouseLeave={hideTooltip}>
         <button
           {...remainingProps}
           data-testid="triggerElement"
@@ -267,9 +275,8 @@ export function Tooltip<
           onMouseEnter={showTooltip}
           onMouseOver={showTooltip}
           onFocus={showTooltip}
-          onMouseLeave={hideTooltip}
           onBlur={hideTooltip}
-          onKeyDown={hideTooltip}>
+          onKeyDown={escapeTooltip}>
           {children}
         </button>
         <span