feat: Allow tab content to be retained in memory

[gethinwebster]

Description

Allow inactive tab content to be rendered into the DOM, for use-cases such as:

• Eager rendering (and/or avoiding re-rendering) of heavy tab content
• Retaining content state in memory

Related links, issue #, if available: AWSUI-25984

How has this been tested?

New unit and integ tests

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.
• Changes do not include unsupported browser features, see CONTRIBUTING.md.
• Changes were manually tested for accessibility, see accessibility guidelines.

Security

• If the code handles URLs: all URLs are validated through the checkSafeUrl function.

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]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.42%. Comparing base (03d0574) to head (38d3b7e).
Report is 29 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3233      +/-   ##
==========================================
- Coverage   96.44%   96.42%   -0.02%     
==========================================
  Files         791      791              
  Lines       22568    22586      +18     
  Branches     7385     7735     +350     
==========================================
+ Hits        21765    21778      +13     
+ Misses        796      754      -42     
- Partials        7       54      +47     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[pan-kot]

This effect can be removed in favour of decorating the setActiveTabId method, e.g.

const setActiveTabIdDecorated = (newActiveTabId) => {
  setActiveTabId(newActiveTabId);
  setViewedTabs(prev => new Set(prev).add(newActiveTabId));
}

This way the related state is set within one render cycle so should be better for performance and is better clear, too.

[gethinwebster]

Given that this is a controllable component, I think we need to use an effect. Although it's unlikely, the active tab could change without setActiveTabId being called

[pan-kot]

Oh, I see. Can the visited tabs be a ref then, e.g.:

const visitedTabsRef = useRef(new Set<string>());
visitedTabsRef.current.add(activeTabId);

Since changing the tab always causes a new render no matter if done in controlled or uncontrolled way, I think this approach should work, too.

[gethinwebster]

good point: there's no explicit re-render required here, and the updated value isn't needed until later (switching away from the tab) anyway