[daniel-stoian-lgp]

Checklist

• I have read and understand the contribution guide
• A CHANGELOG entry is included
• At least one test case is included for this feature or bug fix
• I have run automated testing and it is passed
• Documentation was added or is not needed
• This is an API breaking change

Issue Resolved / Feature Added

internal/DebounceDecorator and the OptimizedFocusDecorator in PopupTabLayout were still class components. The goal is to convert them to functional components.

Resolution

Converted internal/DebounceDecorator/DebounceDecorator.js and PopupTabLayout/PopupTabLayout.js → OptimizedFocusDecorator to functional components with hooks. Behavior is unchanged.

• DebounceDecorator
  • The Job is created once with useMemo and stopped on unmount.
  • The debounced callback reads the latest props through a ref, so it still calls the current handler when it fires, as this.props did before.
  • handleEvent and handleCancel are wrapped in useCallback with stable dependencies, so TabGroup children receive handlers with the same reference on every render.
• OptimizedFocusDecorator
  • Spotlight is still paused during the first render, as the constructor did, so children can't take focus while they mount. This uses a useState lazy initializer instead of useMemo, so the React Compiler can still optimize the component (react-hooks/preserve-manual-memoization).
  • A single useLayoutEffect on open replaces componentDidMount and componentDidUpdate, with the same timing. It resumes Spotlight and focuses the container on mount, and focuses it again when the layout reopens.
  • Keeps display: none when closed in optimized mode.

Additional Considerations

Links

NXT-21173

Comments

Enact-DCO-1.0-Signed-off-by: Daniel Stoian (daniel.stoian@lgepartner.com)

[codecov]

Codecov Report

❌ Patch coverage is 91.11111% with 4 lines in your changes missing coverage. Please review.
✅ Project coverage is 83.62%. Comparing base (ccf5ec6) to head (c0cbb9a).

Files with missing lines	Patch %	Lines
PopupTabLayout/PopupTabLayout.js	78.94%	3 Missing and 1 partial ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop     #467      +/-   ##
===========================================
+ Coverage    83.54%   83.62%   +0.07%     
===========================================
  Files          158      158              
  Lines         7908     7907       -1     
  Branches      2446     2442       -4     
===========================================
+ Hits          6607     6612       +5     
+ Misses        1011     1008       -3     
+ Partials       290      287       -3     

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

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.