Merge branch 'main' into export-css

.github/dependabot.yml

@@ -28,4 +28,35 @@ updates:
       - dependency-name: '@types/react-dom'
         versions:
           - '>=18.0.0'
+      - dependency-name: '@types/react-test-renderer'
+        versions:
+          - '>=18.0.0'
       - dependency-name: 'uswds'
+    groups:
+      storybook:
+        patterns:
+          - 'storybook'
+          - '@storybook/*'
+          - 'happo-plugin-storybook'
+      testing-library:
+        patterns:
+          - 'testing-library/*'
+      eslint:
+        patterns:
+          - 'eslint'
+          - 'eslint-*'
+      typescript:
+        patterns:
+          - 'typescript'
+          - '@typescript-eslint*'
+      vite:
+        patterns:
+          - 'vite*'
+          - '@vitejs*'
+          - 'vitest'
+          - '@vitest*'
+          - '@laynezh/vite-plugin-lib-assets'
+      stylelint:
+        patterns:
+          - 'stylelint'
+          - 'stylelint-*'

docs/codespace_pr_reviews.md

@@ -1,4 +1,4 @@
-# Using Codesapces to review PRs without pulling a repo to your machine
+# Using Codespaces to review PRs without pulling a repo to your machine
 
 1. go to the PR
 2. click the `Code` button in the top right corner

docs/contributing.md

@@ -70,6 +70,8 @@ For example: `hw-accordion-component-112`
 - Maintain a high standard of unit test coverage and cross-browser/device support, so that projects including this dependency can focus on integration and implementation.
 - Provide thorough documentation (in Storybook) so that users can view the components as they render in the UI, the source code required to use them, and specifications such as how props are used, a11y support, and test coverage.
 - Consistent and transparent versioning so that multiple projects can rely on this package, and it can be maintained as React and USWDS release new versions while also providing backwards compatibility.
+- If you are introducing a breaking change, consider taking a staged approach if it gives consumers a chance to change their code to avoid the break. That is, create a non-breaking change using [`withDeprecationWarning`](../src/components/hoc/withDeprecationWarning.tsx) to be merged first, and create a follow-up PR or issue with a due date to finally implement the breaking change.
+  - For example, if you are [deprecating](https://github.com/trussworks/react-uswds/pull/825) or [renaming](https://github.com/trussworks/react-uswds/pull/2415) a component, you may wrap it (or the new component, if renaming) with `withDeprecationWarning`. Your message will show up as a console warning in consumers' development environments, so describe what they should do and by when, and link to the PR/issue for the eventual breaking change.
 
 More guidance for preferred React practices can be found in the [adding new components](./adding_new_components.md) documentation.
 

docs/for_maintainers.md

@@ -20,7 +20,7 @@ This will be Truss billable work for Truss staff, assuming your project teams us
 
 ### Support users of the library
 
-- Watch and moderate discussions on Github in alignment with [Truss values](https://truss.works/values)
+- Watch and moderate [discussions](https://github.com/trussworks/react-uswds/discussions) on Github in alignment with [Truss values](https://truss.works/values)
 - Respond to initial issues and questions on the repo, ideally within ~ one week
 - Encourage outside contributors to put up PRs
 - Ensure storybook is deployed and up to date
@@ -32,6 +32,7 @@ This will be Truss billable work for Truss staff, assuming your project teams us
 - Advocate for closing long standing pull requests.
 - Triage incoming issues, ensure they have the right labels, and announce issues that are time sensitive to #react-uswds Truss slack channel
 - Watch [@uswds/uswds](https://github.com/uswds/uswds) for updates, create new issues in @trussworks/react-uswds as needed
+- Mitigate the impact of breaking changes by seeking community and Trussel input, combining multiple breaking changes into the same release, and preceding its release with a non-breaking change using [withDeprecationWarning](../src/components/hoc/withDeprecationWarning.tsx). In the latter case, ensure a new issue is created with a due date to finally remove the deprecated component.
 
 ### Manage our Github tools
 

package.json

@@ -81,7 +81,7 @@
     "@storybook/addon-interactions": "^7.6.10",
     "@storybook/addon-links": "^7.6.10",
     "@storybook/addons": "^7.6.10",
-    "@storybook/blocks": "^7.6.10",
+    "@storybook/blocks": "^8.0.0",
     "@storybook/manager-api": "^7.1.1",
     "@storybook/react": "^7.6.10",
     "@storybook/react-vite": "^7.6.10",
@@ -95,7 +95,7 @@
     "@types/react-dom": "^18.2.18",
     "@types/react-test-renderer": "^18.0.7",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
-    "@typescript-eslint/parser": "^6.21.0",
+    "@typescript-eslint/parser": "^7.1.1",
     "@uswds/uswds": "3.7.1",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-istanbul": "^1.2.1",
@@ -111,7 +111,7 @@
     "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-security": "^2.1.0",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-vitest": "^0.3.21",
     "focus-trap-react": "^10.2.3",
     "happo-plugin-storybook": "^4.1.0",

src/components/forms/ComboBox/ComboBox.stories.tsx

@@ -1,11 +1,11 @@
-import React, { useRef } from 'react'
+import React, { useRef, useState } from 'react'
 
 import { ComboBox, ComboBoxRef } from './ComboBox'
 import { Form } from '../Form/Form'
 import { Label } from '../Label/Label'
-import { TextInput } from '../TextInput/TextInput'
 import { Button } from '../../Button/Button'
-import { fruits } from './fruits'
+import { fruits, veggies } from './foods'
+import { Radio } from '../Radio/Radio'
 
 export default {
   title: 'Components/Combo box',
@@ -112,12 +112,42 @@ export const WithOtherFields = (): React.ReactElement => {
     label: key,
   }))
 
+  const veggieList = Object.entries(veggies).map(([value, key]) => ({
+    value: value,
+    label: key,
+  }))
+
+  const [options, setOptions] = useState(fruitList)
+
+  const ref = useRef<ComboBoxRef>(null)
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    ref.current?.clearSelection()
+    const selection = e.target.id
+    setOptions(selection === 'fruit' ? fruitList : veggieList)
+  }
+
   return (
     <Form onSubmit={noop}>
-      <Label htmlFor="fruit">Select a fruit</Label>
-      <ComboBox id="fruit" name="fruit" options={fruitList} onChange={noop} />
-      <Label htmlFor="fruitDescription">Description</Label>
-      <TextInput id="fruitDescription" name="fruitDescription" type="text" />
+      <Label htmlFor="food">Select a group</Label>
+      <Radio
+        name="food"
+        id="fruit"
+        label="Fruits"
+        onChange={handleChange}
+        defaultChecked></Radio>
+      <Radio
+        name="food"
+        id="veggie"
+        label="Vegetables"
+        onChange={handleChange}></Radio>
+      <Label htmlFor="food">Select a food</Label>
+      <ComboBox
+        id="fruit"
+        name="fruit"
+        options={options}
+        onChange={noop}
+        ref={ref}
+      />
     </Form>
   )
 }

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

@@ -2,20 +2,29 @@ import React from 'react'
 import { screen, render, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 
-import { ComboBox, ComboBoxRef } from './ComboBox'
+import { ComboBox, ComboBoxOption, ComboBoxRef } from './ComboBox'
 import { TextInput } from '../TextInput/TextInput'
-import { fruits } from './fruits'
+import { fruits, veggies } from './foods'
 
 /*
   Source of truth for combo box behavior is USWDS storybook examples and tests. For more:
   - https://designsystem.digital.gov/form-controls/03-combo-box/
   - https://github.com/uswds/uswds/tree/7a89611fe649650922e4d431b78c39fed6a867e1/spec/unit/combo-box
 */
 
-const fruitOptions = Object.entries(fruits).map(([value, key]) => ({
-  value: value,
-  label: key,
-}))
+const fruitOptions: ComboBoxOption[] = Object.entries(fruits).map(
+  ([value, key]) => ({
+    value: value,
+    label: key,
+  })
+)
+
+const veggieOptions: ComboBoxOption[] = Object.entries(veggies).map(
+  ([value, key]) => ({
+    value: value,
+    label: key,
+  })
+)
 
 describe('ComboBox component', () => {
   it('renders the expected markup without errors', () => {
@@ -87,6 +96,24 @@ describe('ComboBox component', () => {
     expect(comboBoxInput).toHaveValue('Avocado')
   })
 
+  it('updates options when prop changes', async () => {
+    const Wrapper = (props: { options: ComboBoxOption[] }) => {
+      return (
+        <ComboBox
+          id="favorite-fruit"
+          name="favorite-fruit"
+          options={props.options}
+          onChange={vi.fn()}
+        />
+      )
+    }
+    const { rerender } = render(<Wrapper options={fruitOptions} />)
+    const comboBoxSelect = screen.getByTestId('combo-box-select')
+    expect(comboBoxSelect).toHaveValue(fruitOptions[0].value)
+    rerender(<Wrapper options={veggieOptions} />)
+    expect(comboBoxSelect).toHaveValue(veggieOptions[0].value)
+  })
+
   describe('toggling the list', () => {
     it('renders all options when the list is open', async () => {
       const fruitAbridged = fruitOptions.slice(0, 3)

src/components/forms/ComboBox/ComboBox.tsx

@@ -146,6 +146,10 @@ const ComboBoxForwardRef: React.ForwardRefRenderFunction<
   const listRef = useRef<HTMLUListElement>(null)
   const focusedItemRef = useRef<HTMLLIElement>(null)
 
+  useEffect(() => {
+    state.filteredOptions = options
+  }, [options])
+
   useEffect(() => {
     onChange && onChange(state.selectedOption?.value || undefined)
   }, [state.selectedOption])

src/components/forms/ComboBox/fruits.ts → src/components/forms/ComboBox/foods.ts

@@ -64,3 +64,9 @@ export const fruits = {
   'white currant': 'White currant',
   yuzu: 'Yuzu',
 }
+
+export const veggies = {
+  celery: 'Celery',
+  onion: 'Onion',
+  pepper: 'Pepper',
+}