cloudscape-design / components

React components for Cloudscape Design System
https://cloudscape.design/
Apache License 2.0
2.3k stars 140 forks source link

fix: Allow controlled state to be resolved asynchronously #2402

Open just-boris opened 1 week ago

just-boris commented 1 week ago

Description

Makes this use-case possible

// undefined on initial render
const [navigationOpen, setNavigationOpen] = useState();

useEffect(() => {
   // load preference asynchronously
   fetchNavigationOpenPreference().then(preference => setNavigationOpen(preference));
}, []);

<AppLayout navigationOpen={navigationOpen} onChange={event => setNavigationOpen(event.detail.open)} />

Before the change it printed a warning, "A component tried to change uncontrolled 'navigationOpen' property to be controlled". After the change, it is no warning, unless user interacted with the navigation.

Related links, issue #, if available: n/a

How has this been tested?

Updated unit tests for the new behavior.

Review checklist _The following items are to be evaluated by the author(s) and the reviewer(s)._ #### Correctness - _Changes include appropriate documentation updates._ - _Changes are backward-compatible if not indicated, see [`CONTRIBUTING.md`](https://github.com/cloudscape-design/components/blob/main/CONTRIBUTING.md#public-apis)._ - _Changes do not include unsupported browser features, see [`CONTRIBUTING.md`](https://github.com/cloudscape-design/components/blob/main/CONTRIBUTING.md#browsers-support)._ - _Changes were manually tested for accessibility, see [accessibility guidelines](https://cloudscape.design/foundation/core-principles/accessibility/)._ #### Security - _If the code handles URLs: all URLs are validated through [the `checkSafeUrl` function](https://github.com/cloudscape-design/components/blob/main/src/internal/utils/check-safe-url.ts)._ #### Testing - _Changes are covered with new/existing unit tests?_ - _Changes are covered with new/existing integration tests?_

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

codecov[bot] commented 1 week ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 95.62%. Comparing base (c5f3ceb) to head (9a83f35). Report is 2 commits behind head on main.

Additional details and impacted files ```diff @@ Coverage Diff @@ ## main #2402 +/- ## ========================================== - Coverage 95.62% 95.62% -0.01% ========================================== Files 720 720 Lines 19143 19136 -7 Branches 6445 6445 ========================================== - Hits 18306 18299 -7 Misses 783 783 Partials 54 54 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.