fix: [useCollapse] cleanup resize observer, overflow css

[renrizzolo]

Description

• as per ResizeObserver#observe() firing the callback immediately results in infinite loop WICG/resize-observer#38, wrap the observer in requestAnimationFrame so we don't get the Loop limit exceeded error.
• Fix panel overflow/dispaly styles by adding transition state to useCollapse, so we can hide overflow only when animating
  • previously I set hidden overflow on the panel so you wouldn't see the content outside of the panel when toggling the collapse. Discovered we have some useage of Panel with Select inside them, which would be hidden by the overflow.
• some cleanup to the collapse internals

Does this PR introduce a breaking change?

• Yes
• No

Manual testing step?

Screenshots (if appropriate):

no overflow / without fix

with overflow/display transition classes

[codecov]

Codecov Report

Merging #1577 (38345fd) into master (70db3fd) will not change coverage.
The diff coverage is 100.00%.

@@            Coverage Diff            @@
##            master     #1577   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           96        96           
  Lines         1695      1706   +11     
  Branches       471       478    +7     
=========================================
+ Hits          1695      1706   +11     

Impacted Files	Coverage Δ
src/components/Panel/index.jsx	100.00% <100.00%> (ø)
src/components/Paragraph/index.jsx	100.00% <100.00%> (ø)
src/hooks/useCollapse.js	100.00% <100.00%> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[knilink]

guess this is because both collapsedProp and toggleCollapsed are trying control collapsed state
i think should be either
(defaultCollapsed, ...) => {collapsed, toggleCollapsed, ...}
or
(colleapsed, ...) => {...}

[renrizzolo]

yes, defaultCollapsed is better

[knilink]

then i guess this can be removed as default props shouldn't be affecting the element state during its life cycle, the same as defaultValue to input component

adslot-ui/src/hooks/useCollapse.js

Lines 53 to 55 in 28fcf38

	React.useEffect(() => {
	setCollapsed(defaultCollapsed);
	}, [defaultCollapsed]);

[renrizzolo]

oh, it's still being used to control the component, so I think I'll revert the naming to what it was before

[knilink]

what i mean was both toggleCollapsed and collapsedProp control the collapse state, should be just keeping one.

[renrizzolo]

I see what you mean, I'll remove the toggleCollapsed

[renrizzolo]

@knilink removed internal collapsed state and toggle function

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
1 Code Smell

No Coverage information
0.0% Duplication