Skip to content

Conversation

devongovett
Copy link
Member

Closes #7528

Adds --disclosure-panel-width and --disclosure-panel-height CSS variables, which are set to the scrollWidth and scrollHeight of the panel when expanding and collapsing. If any animations are triggered, then we wait to set the hidden attribute until they complete.

In the future this may be possible in native CSS with the interpolate-size: allow-keywords property (currently only in Chrome) along with transition-behavior: allow-discrete, which allows using height: auto and display: none directly. In the meantime, this is a pretty simple polyfill that must be done within the hooks to ensure correct timing.

@rspbot
Copy link

rspbot commented Sep 15, 2025

@rspbot
Copy link

rspbot commented Sep 15, 2025

## API Changes

@react-aria/disclosure

/@react-aria/disclosure:useDisclosure

 useDisclosure {
   props: AriaDisclosureProps
   state: DisclosureState
-  ref: RefObject<Element | null>
+  ref: RefObject<HTMLElement | null>
   returnVal: undefined
 }

@devongovett devongovett added this pull request to the merge queue Sep 18, 2025
Merged via the queue into main with commit f36100b Sep 18, 2025
32 checks passed
@devongovett devongovett deleted the disclosure-animation branch September 18, 2025 03:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Make Disclosure Animatable
5 participants