Function useDisclosure

packages/react-aria/src/disclosure/useDisclosure.ts:48–167

(
  props: AriaDisclosureProps,
  state: DisclosureState,
  ref: RefObject<HTMLElement | null>
)

 * @param ref - A ref for the disclosure panel.
 */
export function useDisclosure(
  props: AriaDisclosureProps,
  state: DisclosureState,
  ref: RefObject<HTMLElement | null>
): DisclosureAria {
  let {isDisabled} = props;
  let triggerId = useId();
  let panelId = useId();
  let isSSR = useIsSSR();

  let raf = useRef<number | null>(null);

  let handleBeforeMatch = useCallback(() => {
    // Wait a frame to revert browser's removal of hidden attribute
    raf.current = requestAnimationFrame(() => {
      if (ref.current) {
        ref.current.setAttribute('hidden', 'until-found');
      }
    });
    // Force sync state update
    flushSync(() => {
      state.toggle();
    });
  }, [ref, state]);

  // @ts-ignore https://github.com/facebook/react/pull/24741
  useEvent(ref, 'beforematch', handleBeforeMatch);

  let isExpandedRef = useRef<boolean | null>(null);
  useLayoutEffect(() => {
    // Cancel any pending RAF to prevent stale updates
    if (raf.current) {
      cancelAnimationFrame(raf.current);
    }
    if (ref.current && !isSSR) {
      let panel = ref.current;

      if (isExpandedRef.current == null || typeof panel.getAnimations !== 'function') {
        // On initial render (and in tests), set attributes without animation.
        if (state.isExpanded) {
          panel.removeAttribute('hidden');
          panel.style.setProperty('--disclosure-panel-width', 'auto');
          panel.style.setProperty('--disclosure-panel-height', 'auto');
        } else {
          panel.setAttribute('hidden', 'until-found');
          panel.style.setProperty('--disclosure-panel-width', '0px');
          panel.style.setProperty('--disclosure-panel-height', '0px');
        }
      } else if (state.isExpanded !== isExpandedRef.current) {
        if (state.isExpanded) {
          panel.removeAttribute('hidden');

          // Set the width and height as pixels so they can be animated.
          panel.style.setProperty('--disclosure-panel-width', panel.scrollWidth + 'px');
          panel.style.setProperty('--disclosure-panel-height', panel.scrollHeight + 'px');

          Promise.all(panel.getAnimations().map(a => a.finished))
            .then(() => {