@base-ui/react 1.4.1 → 1.5.0

package/esm/collapsible/panel/useCollapsiblePanel.js

@@ -3,340 +3,380 @@
 import * as React from 'react';
 import { addEventListener } from '@base-ui/utils/addEventListener';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
-import { useOnMount } from '@base-ui/utils/useOnMount';
-import { AnimationFrame, useAnimationFrame } from '@base-ui/utils/useAnimationFrame';
+import { AnimationFrame } from '@base-ui/utils/useAnimationFrame';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
 import { warn } from '@base-ui/utils/warn';
+import { ownerWindow } from '@base-ui/utils/owner';
 import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
 import { REASONS } from "../../internals/reasons.js";
+import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.js";
+import { useAnimationsFinished } from "../../internals/useAnimationsFinished.js";
 import { CollapsiblePanelDataAttributes } from "./CollapsiblePanelDataAttributes.js";
-import { AccordionRootDataAttributes } from "../../accordion/root/AccordionRootDataAttributes.js";
+const EMPTY_DIMENSIONS = {
+  height: undefined,
+  width: undefined
+};
 export function useCollapsiblePanel(parameters) {
   const {
-    abortControllerRef,
-    animationTypeRef,
     externalRef,
-    height,
     hiddenUntilFound,
-    keepMounted,
     id: idParam,
+    keepMounted,
     mounted,
     onOpenChange,
     open,
-    panelRef,
-    runOnceAnimationsFinish,
-    setDimensions,
     setMounted,
     setOpen,
-    setVisible,
-    transitionDimensionRef,
-    visible,
-    width
+    transitionStatus
   } = parameters;
-  const isBeforeMatchRef = React.useRef(false);
-  const latestAnimationNameRef = React.useRef(null);
-  const shouldCancelInitialOpenAnimationRef = React.useRef(open);
-  const shouldCancelInitialOpenTransitionRef = React.useRef(open);
-  const endingStyleFrame = useAnimationFrame();
-
-  /**
-   * When opening, the `hidden` attribute is removed immediately.
-   * When closing, the `hidden` attribute is set after any exit animations runs.
-   */
-  const hidden = React.useMemo(() => {
-    if (animationTypeRef.current === 'css-animation') {
-      return !visible;
-    }
-    return !open && !mounted;
-  }, [open, mounted, visible, animationTypeRef]);
+  const panelRef = React.useRef(null);
+  const animationTypeRef = React.useRef(null);
+  const [dimensions, setDimensionsUnwrapped] = React.useState(EMPTY_DIMENSIONS);
+  const lastMeasuredDimensionsRef = React.useRef(EMPTY_DIMENSIONS);
+  // `beforematch` should reveal the matched content immediately, so the next
+  // open cycle skips author-defined motion once and then returns to normal.
+  const shouldSkipNextOpenRef = React.useRef(false);
+  // Keyframe mount animations on initially open panels cause a visible layout
+  // shift during the server-rendered first paint, so suppress that first open
+  // lifecycle until the panel has been closed once.
+  const shouldPreventMountAnimationRef = React.useRef(open);
+  // React.Activity tears down Effects while preserving state, so revealing an
+  // already-open panel would otherwise replay its CSS keyframe open animation.
+  const shouldPreventActivityResumeAnimationRef = React.useRef(false);
+  // Some open paths intentionally bypass motion, but the shared root transition
+  // status still advances asynchronously. Override the panel to idle so its data
+  // attributes and dimension cleanup reflect the immediate open state.
+  const [forcePanelIdle, setForcePanelIdle] = React.useState(false);
+  const pendingTemporaryStyleRestoreRef = React.useRef(null);
+  const mergedPanelRef = useMergedRefs(externalRef, panelRef);
+  const latestStateRef = useValueAsRef({
+    mounted,
+    open
+  });
+  // Only used to handle panel close
+  const runOnceCloseAnimationsFinish = useAnimationsFinished(panelRef, false, false);
+  const hidden = !open && !mounted;
+  const panelTransitionStatus = forcePanelIdle ? 'idle' : transitionStatus;
+  const shouldPreventOpenAnimation = open && (
+  // These 2 refs are safe to read in render, they are only written from committed
+  // layout/effect paths and gate one-shot motion suppression for the next open
+  // lifecycle. They intentionally expose the last committed motion snapshot.
+  shouldPreventMountAnimationRef.current || shouldPreventActivityResumeAnimationRef.current);
+  const renderedDimensions = !open && mounted &&
+  // These 2 refs are also safe to read in render, both hold the last committed
+  // animation mode and measurement. This fallback only restores a previously
+  // measured pixel size after the live dimensions state has been reset back to `auto`.
+  animationTypeRef.current === 'css-animation' && dimensions.height === undefined && dimensions.width === undefined ? lastMeasuredDimensionsRef.current : dimensions;
+  const shouldPersistHiddenTransitionStyles = hiddenUntilFound && hidden && animationTypeRef.current !== 'css-animation';
 
-  /**
-   * When `keepMounted` is `true` this runs once as soon as it exists in the DOM
-   * regardless of initial open state.
-   *
-   * When `keepMounted` is `false` this runs on every mount, typically every
-   * time it opens. If the panel is in the middle of a close transition that is
-   * interrupted and re-opens, this won't run as the panel was not unmounted.
-   */
-  const handlePanelRef = useStableCallback(element => {
-    if (!element) {
-      return undefined;
+  // Most measured dimensions are reused later when CSS keyframe closes need a
+  // pixel size after the rendered dimensions have been reset back to `auto`.
+  // Passing `false` is only for clearing the current dimensions state.
+  const setDimensions = useStableCallback((nextDimensions, shouldCacheMeasurement = true) => {
+    if (shouldCacheMeasurement) {
+      lastMeasuredDimensionsRef.current = nextDimensions;
     }
-    if (animationTypeRef.current == null || transitionDimensionRef.current == null) {
-      const panelStyles = getComputedStyle(element);
-      const hasAnimation = panelStyles.animationName !== 'none' && panelStyles.animationName !== '';
-      const hasTransition = panelStyles.transitionDuration !== '0s' && panelStyles.transitionDuration !== '';
-
-      /**
-       * animationTypeRef is safe to read in render because it's only ever set
-       * once here during the first render and never again.
-       * https://react.dev/learn/referencing-values-with-refs#best-practices-for-refs
-       */
-      if (hasAnimation && hasTransition) {
-        if (process.env.NODE_ENV !== 'production') {
-          warn('CSS transitions and CSS animations both detected on Collapsible or Accordion panel.', 'Only one of either animation type should be used.');
-        }
-      } else if (panelStyles.animationName === 'none' && panelStyles.transitionDuration !== '0s') {
-        animationTypeRef.current = 'css-transition';
-      } else if (panelStyles.animationName !== 'none' && panelStyles.transitionDuration === '0s') {
-        animationTypeRef.current = 'css-animation';
-      } else {
-        animationTypeRef.current = 'none';
-      }
+    setDimensionsUnwrapped(nextDimensions);
+  });
+  const restorePendingTemporaryStyle = useStableCallback(() => {
+    pendingTemporaryStyleRestoreRef.current?.();
+    pendingTemporaryStyleRestoreRef.current = null;
+  });
+  const setPendingTemporaryStyleRestore = useStableCallback(restore => {
+    restorePendingTemporaryStyle();
+    pendingTemporaryStyleRestoreRef.current = () => {
+      pendingTemporaryStyleRestoreRef.current = null;
+      restore();
+    };
+  });
 
-      /**
-       * We need to know in advance which side is being collapsed when using CSS
-       * transitions in order to set the value of width/height to `0px` momentarily.
-       * Setting both to `0px` will break layout.
-       */
-      if (element.getAttribute(AccordionRootDataAttributes.orientation) === 'horizontal' || panelStyles.transitionProperty.indexOf('width') > -1) {
-        transitionDimensionRef.current = 'width';
-      } else {
-        transitionDimensionRef.current = 'height';
-      }
-    }
-    if (animationTypeRef.current !== 'css-transition') {
-      return undefined;
+  // React.Activity unmounts Effects while preserving component state. If that
+  // teardown happens while an already-open keyframe panel is visible, remember
+  // to suppress the replayed open animation on the next committed reveal.
+  const markActivityResumeAnimationSuppressed = useStableCallback(() => {
+    if (open && mounted && animationTypeRef.current === 'css-animation') {
+      shouldPreventActivityResumeAnimationRef.current = true;
     }
-    if (height === undefined || width === undefined) {
-      setDimensions({
-        height: element.scrollHeight,
-        width: element.scrollWidth
-      });
-      if (shouldCancelInitialOpenTransitionRef.current) {
-        element.style.setProperty('transition-duration', '0s');
-      }
+  });
+  useIsoLayoutEffect(() => {
+    // `forcePanelIdle` is only a temporary override for open paths that skip
+    // motion. Keep it active while the shared root still reports `starting`,
+    // then drop it once the root transition state catches up.
+    if (!forcePanelIdle || transitionStatus === 'starting') {
+      return;
     }
-    let frame = -1;
-    let nextFrame = -1;
-    frame = AnimationFrame.request(() => {
-      shouldCancelInitialOpenTransitionRef.current = false;
-      nextFrame = AnimationFrame.request(() => {
-        /**
-         * This is slightly faster than another RAF and is the earliest
-         * opportunity to remove the temporary `transition-duration: 0s` that
-         * was applied to cancel opening transitions of initially open panels.
-         * https://nolanlawson.com/2018/09/25/accurately-measuring-layout-on-the-web/
-         */
-        setTimeout(() => {
-          element.style.removeProperty('transition-duration');
-        });
-      });
-    });
+    setForcePanelIdle(false);
+  }, [forcePanelIdle, transitionStatus]);
+  React.useEffect(() => {
     return () => {
-      AnimationFrame.cancel(frame);
-      AnimationFrame.cancel(nextFrame);
+      markActivityResumeAnimationSuppressed();
+      restorePendingTemporaryStyle();
     };
-  });
-  const mergedPanelRef = useMergedRefs(externalRef, panelRef, handlePanelRef);
+  }, [markActivityResumeAnimationSuppressed, restorePendingTemporaryStyle]);
   useIsoLayoutEffect(() => {
-    if (animationTypeRef.current !== 'css-transition') {
-      return undefined;
-    }
     const panel = panelRef.current;
     if (!panel) {
       return undefined;
     }
-    let resizeFrame = -1;
-    if (abortControllerRef.current != null) {
-      abortControllerRef.current.abort();
-      abortControllerRef.current = null;
+
+    // `beforematch` can temporarily force a `0s` motion duration so the matched
+    // content reveals immediately. Restore the authored duration before detecting
+    // the next close animation type, otherwise that first close is misread as
+    // "no motion" and the close transition or keyframe gets skipped.
+    if (!open && pendingTemporaryStyleRestoreRef.current) {
+      restorePendingTemporaryStyle();
     }
-    if (open) {
-      const originalLayoutStyles = {
-        'justify-content': panel.style.justifyContent,
-        'align-items': panel.style.alignItems,
-        'align-content': panel.style.alignContent,
-        'justify-items': panel.style.justifyItems
-      };
+    const animationType = getAnimationType(panel, shouldPreventOpenAnimation);
+    animationTypeRef.current = animationType;
 
-      /* opening */
-      Object.keys(originalLayoutStyles).forEach(key => {
-        panel.style.setProperty(key, 'initial', 'important');
-      });
+    // Initially open keyframe panels skip their first paint animation to avoid
+    // layout shift, but we still need to cache the expanded size so the first
+    // close animation can start from pixels instead of `auto`.
+    if (open && transitionStatus === 'idle' && shouldPreventMountAnimationRef.current && animationType === 'css-animation') {
+      lastMeasuredDimensionsRef.current = getDimensions(panel);
+      return undefined;
+    }
 
-      /**
-       * When `keepMounted={false}` and the panel is initially closed, the very
-       * first time it opens (not any subsequent opens) `data-starting-style` is
-       * off or missing by a frame so we need to set it manually. Otherwise any
-       * CSS properties expected to transition using [data-starting-style] may
-       * be mis-timed and appear to be complete skipped.
-       */
-      if (!shouldCancelInitialOpenTransitionRef.current && !keepMounted) {
-        panel.setAttribute(CollapsiblePanelDataAttributes.startingStyle, '');
-      }
-      setDimensions({
-        height: panel.scrollHeight,
-        width: panel.scrollWidth
-      });
-      resizeFrame = AnimationFrame.request(() => {
-        Object.entries(originalLayoutStyles).forEach(([key, value]) => {
-          if (value === '') {
-            panel.style.removeProperty(key);
-          } else {
-            panel.style.setProperty(key, value);
-          }
-        });
-      });
-    } else {
-      if (panel.scrollHeight === 0 && panel.scrollWidth === 0) {
+    // Handle the opening pass: measure the expanded size and, when necessary,
+    // neutralize author-defined motion so the panel can open immediately.
+    if (open && transitionStatus === 'starting') {
+      // `beforematch` opens should reveal the panel immediately so find-in-page
+      // does not wait for the author-defined transition or animation to finish.
+      const skipNextOpen = shouldSkipNextOpenRef.current;
+      shouldSkipNextOpenRef.current = false;
+      if (animationType === 'none') {
+        setDimensions(getDimensions(panel));
+        setForcePanelIdle(true);
         return undefined;
       }
-
-      /* closing */
-      setDimensions({
-        height: panel.scrollHeight,
-        width: panel.scrollWidth
-      });
-      const abortController = new AbortController();
-      abortControllerRef.current = abortController;
-      const signal = abortController.signal;
-      let attributeObserver = null;
-      const endingStyleAttribute = CollapsiblePanelDataAttributes.endingStyle;
-
-      // Wait for `[data-ending-style]` to be applied.
-      attributeObserver = new MutationObserver(mutationList => {
-        const hasEndingStyle = mutationList.some(mutation => mutation.type === 'attributes' && mutation.attributeName === endingStyleAttribute);
-        if (hasEndingStyle) {
-          attributeObserver?.disconnect();
-          attributeObserver = null;
-          runOnceAnimationsFinish(() => {
-            setDimensions({
-              height: 0,
-              width: 0
-            });
-            panel.style.removeProperty('content-visibility');
-            setMounted(false);
-            if (abortControllerRef.current === abortController) {
-              abortControllerRef.current = null;
-            }
-          }, signal);
+      if (animationType === 'css-transition') {
+        const restoreLayoutStyles = resetLayoutStyles(panel);
+        setDimensions(getDimensions(panel));
+        if (!skipNextOpen) {
+          return restoreLayoutStyles;
         }
-      });
-      attributeObserver.observe(panel, {
-        attributes: true,
-        attributeFilter: [endingStyleAttribute]
-      });
-      return () => {
-        attributeObserver?.disconnect();
-        endingStyleFrame.cancel();
-        if (abortControllerRef.current === abortController) {
-          abortController.abort();
-          abortControllerRef.current = null;
+        const restoreTransitionDuration = setTemporaryStyle(panel, 'transition-duration', '0s');
+        setPendingTemporaryStyleRestore(restoreTransitionDuration);
+        setForcePanelIdle(true);
+        return restoreLayoutStyles;
+      }
+      if (animationType === 'css-animation') {
+        setDimensions(getDimensions(panel));
+        if (!skipNextOpen) {
+          const restoreAnimationName = setTemporaryStyle(panel, 'animation-name', 'none');
+          restoreAnimationName();
+          return undefined;
         }
-      };
+        const restoreAnimationName = setTemporaryStyle(panel, 'animation-name', 'none');
+        const restoreAnimationDuration = setTemporaryStyle(panel, 'animation-duration', '0s');
+        restoreAnimationName();
+        setPendingTemporaryStyleRestore(restoreAnimationDuration);
+        setForcePanelIdle(true);
+        return undefined;
+      }
     }
-    return () => {
-      AnimationFrame.cancel(resizeFrame);
-    };
-  }, [abortControllerRef, animationTypeRef, endingStyleFrame, hiddenUntilFound, keepMounted, mounted, open, panelRef, runOnceAnimationsFinish, setDimensions, setMounted]);
-  useIsoLayoutEffect(() => {
-    if (animationTypeRef.current !== 'css-animation') {
-      return;
+
+    // Capture the current size as soon as close is requested, before the
+    // deferred ending phase applies closed styles. This keeps close transitions
+    // starting from a measured pixel value, including interrupted opens.
+    if (!open && mounted && (transitionStatus === 'idle' || transitionStatus === 'starting')) {
+      if (animationType === 'none') {
+        setDimensions(EMPTY_DIMENSIONS, false);
+        setMounted(false);
+        return undefined;
+      }
+      if (animationType === 'css-animation') {
+        shouldPreventMountAnimationRef.current = false;
+        shouldPreventActivityResumeAnimationRef.current = false;
+      }
+      setDimensions(getDimensions(panel));
+      return undefined;
     }
-    const panel = panelRef.current;
-    if (!panel) {
-      return;
+    if (transitionStatus !== 'ending') {
+      return undefined;
     }
-    latestAnimationNameRef.current = panel.style.animationName || latestAnimationNameRef.current;
-    panel.style.setProperty('animation-name', 'none');
-    setDimensions({
-      height: panel.scrollHeight,
-      width: panel.scrollWidth
-    });
-    if (!shouldCancelInitialOpenAnimationRef.current && !isBeforeMatchRef.current) {
-      panel.style.removeProperty('animation-name');
+    if (animationType === 'none') {
+      setMounted(false);
+      return undefined;
+    }
+    const nextDimensions = getDimensions(panel);
+    const hasMeasuredSize = (nextDimensions.height ?? 0) > 0 || (nextDimensions.width ?? 0) > 0;
+    if (!hasMeasuredSize) {
+      setMounted(false);
+      return undefined;
     }
-    if (open) {
-      if (abortControllerRef.current != null) {
-        abortControllerRef.current.abort();
-        abortControllerRef.current = null;
+    setDimensions(nextDimensions);
+    if (animationType === 'css-animation') {
+      const restoreAnimationName = setTemporaryStyle(panel, 'animation-name', 'none');
+      restoreAnimationName();
+    }
+    return undefined;
+  }, [mounted, open, restorePendingTemporaryStyle, setDimensions, setMounted, setPendingTemporaryStyleRestore, shouldPreventOpenAnimation, transitionStatus]);
+  useOpenChangeComplete({
+    enabled: open && mounted && panelTransitionStatus === 'idle',
+    open: true,
+    ref: panelRef,
+    onComplete() {
+      if (!open) {
+        return;
       }
-      setMounted(true);
-      setVisible(true);
-    } else {
-      abortControllerRef.current = new AbortController();
-      runOnceAnimationsFinish(() => {
-        setMounted(false);
-        setVisible(false);
-        abortControllerRef.current = null;
-      }, abortControllerRef.current.signal);
+      setDimensions(EMPTY_DIMENSIONS, false);
     }
-  }, [abortControllerRef, animationTypeRef, open, panelRef, runOnceAnimationsFinish, setDimensions, setMounted, setVisible, visible]);
-  useOnMount(() => {
-    const frame = AnimationFrame.request(() => {
-      shouldCancelInitialOpenAnimationRef.current = false;
-    });
-    return () => AnimationFrame.cancel(frame);
   });
-  useIsoLayoutEffect(() => {
-    if (!hiddenUntilFound) {
+
+  // Closing panels need extra sequencing beyond `useOpenChangeComplete`.
+  // This passive effect runs after the `ending` render has committed, so
+  // `[data-ending-style]` is already present. Chrome can still register the
+  // exit transition one frame later when an Accordion closes one item while
+  // opening another, so wait one frame before watching animations.
+  // See https://github.com/mui/base-ui/issues/3099
+  React.useEffect(() => {
+    if (open || !mounted || panelTransitionStatus !== 'ending') {
       return undefined;
     }
     const panel = panelRef.current;
     if (!panel) {
       return undefined;
     }
-    let frame = -1;
-    let nextFrame = -1;
-    if (open && isBeforeMatchRef.current) {
-      panel.style.transitionDuration = '0s';
-      setDimensions({
-        height: panel.scrollHeight,
-        width: panel.scrollWidth
-      });
-      frame = AnimationFrame.request(() => {
-        isBeforeMatchRef.current = false;
-        nextFrame = AnimationFrame.request(() => {
-          setTimeout(() => {
-            panel.style.removeProperty('transition-duration');
-          });
-        });
-      });
+    const abortController = new AbortController();
+    let endingStyleFrame = -1;
+    function handleComplete() {
+      if (latestStateRef.current.open) {
+        return;
+      }
+      setMounted(false);
+      setDimensions(EMPTY_DIMENSIONS, false);
     }
+    endingStyleFrame = AnimationFrame.request(() => {
+      if (!abortController.signal.aborted) {
+        runOnceCloseAnimationsFinish(handleComplete, abortController.signal);
+      }
+    });
     return () => {
-      AnimationFrame.cancel(frame);
-      AnimationFrame.cancel(nextFrame);
+      AnimationFrame.cancel(endingStyleFrame);
+      abortController.abort();
     };
-  }, [hiddenUntilFound, open, panelRef, setDimensions]);
+  }, [latestStateRef, mounted, open, panelTransitionStatus, runOnceCloseAnimationsFinish, setDimensions, setMounted]);
   useIsoLayoutEffect(() => {
     const panel = panelRef.current;
-    if (panel && hiddenUntilFound && hidden) {
-      /**
-       * React only supports a boolean for the `hidden` attribute and forces
-       * legit string values to booleans so we have to force it back in the DOM
-       * when necessary: https://github.com/facebook/react/issues/24740
-       */
-      panel.setAttribute('hidden', 'until-found');
-      /**
-       * Set data-starting-style here to persist the closed styles, this is to
-       * prevent transitions from starting when the `hidden` attribute changes
-       * to `'until-found'` as they could have different `display` properties:
-       * https://github.com/tailwindlabs/tailwindcss/pull/14625
-       */
-      if (animationTypeRef.current === 'css-transition') {
-        panel.setAttribute(CollapsiblePanelDataAttributes.startingStyle, '');
-      }
+    if (!panel || !hiddenUntilFound || !hidden) {
+      return;
     }
-  }, [hiddenUntilFound, hidden, animationTypeRef, panelRef]);
+
+    // React only supports a boolean for the `hidden` attribute and forces
+    // legit string values to booleans so we have to force it back in the DOM
+    // when necessary: https://github.com/facebook/react/issues/24740
+    panel.setAttribute('hidden', 'until-found');
+  }, [hidden, hiddenUntilFound]);
   React.useEffect(function registerBeforeMatchListener() {
     const panel = panelRef.current;
     if (!panel) {
       return undefined;
     }
     function handleBeforeMatch(event) {
-      isBeforeMatchRef.current = true;
+      shouldSkipNextOpenRef.current = true;
       setOpen(true);
       onOpenChange(true, createChangeEventDetails(REASONS.none, event));
     }
     return addEventListener(panel, 'beforematch', handleBeforeMatch);
-  }, [onOpenChange, panelRef, setOpen]);
-  return React.useMemo(() => ({
+  }, [onOpenChange, setOpen]);
+  const shouldRender = keepMounted || hiddenUntilFound || mounted || open;
+  return {
+    height: renderedDimensions.height,
     props: {
+      ...(shouldPersistHiddenTransitionStyles ? {
+        [CollapsiblePanelDataAttributes.startingStyle]: ''
+      } : undefined),
       hidden,
-      id: idParam,
-      ref: mergedPanelRef
+      id: idParam
+    },
+    ref: mergedPanelRef,
+    shouldPreventOpenAnimation,
+    shouldRender,
+    transitionStatus: panelTransitionStatus,
+    width: renderedDimensions.width
+  };
+}
+function getDimensions(element) {
+  return {
+    height: element.scrollHeight,
+    width: element.scrollWidth
+  };
+}
+function getAnimationType(element, hasSuppressedMountAnimation = false) {
+  const panelStyles = ownerWindow(element).getComputedStyle(element);
+  const hasAnimation = (panelStyles.animationName.split(',').map(name => name.trim()).some(name => name !== '' && name !== 'none') || hasSuppressedMountAnimation) && hasNonZeroDuration(panelStyles.animationDuration);
+  const hasTransition = hasNonZeroDuration(panelStyles.transitionDuration);
+  if (hasAnimation && hasTransition) {
+    if (process.env.NODE_ENV !== 'production') {
+      warn('CSS transitions and CSS animations both detected on Collapsible or Accordion panel.', 'Only one of either animation type should be used.');
+    }
+    return 'css-transition';
+  }
+  if (hasTransition) {
+    return 'css-transition';
+  }
+  if (hasAnimation) {
+    return 'css-animation';
+  }
+  return 'none';
+}
+function hasNonZeroDuration(value) {
+  return value.split(',').map(part => part.trim()).some(part => part !== '' && Number.parseFloat(part) > 0);
+}
+
+/**
+ * Temporarily overrides an inline style property and returns a cleanup that
+ * restores the previous inline value and priority.
+ * @param element - The element whose inline style should be updated.
+ * @param property - The CSS property name to override.
+ * @param value - The temporary value to assign.
+ * @returns A cleanup function that restores the original inline style state.
+ */
+function setTemporaryStyle(element, property, value) {
+  const previousValue = element.style.getPropertyValue(property);
+  const previousPriority = element.style.getPropertyPriority(property);
+  element.style.setProperty(property, value);
+  return () => {
+    if (previousValue === '') {
+      element.style.removeProperty(property);
+      return;
     }
-  }), [hidden, idParam, mergedPanelRef]);
+    element.style.setProperty(property, previousValue, previousPriority);
+  };
+}
+
+/**
+ * Temporarily resets inline alignment styles that can distort scroll-based
+ * size measurements, then restores them on the next animation frame.
+ * @param element - The panel element being measured.
+ * @returns A cleanup function that cancels the scheduled restore and reapplies
+ * the original inline layout styles immediately.
+ */
+function resetLayoutStyles(element) {
+  const originalLayoutStyles = {
+    'justify-content': element.style.justifyContent,
+    'align-items': element.style.alignItems,
+    'align-content': element.style.alignContent,
+    'justify-items': element.style.justifyItems
+  };
+  Object.keys(originalLayoutStyles).forEach(key => {
+    element.style.setProperty(key, 'initial', 'important');
+  });
+  function restoreLayoutStyles() {
+    Object.entries(originalLayoutStyles).forEach(([key, value]) => {
+      if (value === '') {
+        element.style.removeProperty(key);
+        return;
+      }
+      element.style.setProperty(key, value);
+    });
+  }
+  const frame = AnimationFrame.request(restoreLayoutStyles);
+  return () => {
+    AnimationFrame.cancel(frame);
+    restoreLayoutStyles();
+  };
 }