@base-ui/react 1.6.0 → 1.7.0

package/checkbox-group/CheckboxGroupContext.js

@@ -2,20 +2,14 @@
 'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CheckboxGroupContext = void 0;
 exports.useCheckboxGroupContext = useCheckboxGroupContext;
-var _formatErrorMessage2 = _interopRequireDefault(require("@base-ui/utils/formatErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
 const CheckboxGroupContext = exports.CheckboxGroupContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== "production") CheckboxGroupContext.displayName = "CheckboxGroupContext";
-function useCheckboxGroupContext(optional = true) {
-  const context = React.useContext(CheckboxGroupContext);
-  if (context === undefined && !optional) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: CheckboxGroupContext is missing. CheckboxGroup parts must be placed within <CheckboxGroup>.' : (0, _formatErrorMessage2.default)(3));
-  }
-  return context;
+function useCheckboxGroupContext() {
+  return React.useContext(CheckboxGroupContext);
 }

package/checkbox-group/CheckboxGroupContext.mjs

@@ -1,13 +1,8 @@
 'use client';
 
-import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 export const CheckboxGroupContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== "production") CheckboxGroupContext.displayName = "CheckboxGroupContext";
-export function useCheckboxGroupContext(optional = true) {
-  const context = React.useContext(CheckboxGroupContext);
-  if (context === undefined && !optional) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: CheckboxGroupContext is missing. CheckboxGroup parts must be placed within <CheckboxGroup>.' : _formatErrorMessage(3));
-  }
-  return context;
+export function useCheckboxGroupContext() {
+  return React.useContext(CheckboxGroupContext);
 }

package/checkbox-group/useCheckboxGroupParent.d.mts

@@ -4,12 +4,11 @@ import type { BaseUIEventReasons } from "../internals/reasons.mjs";
 export declare function useCheckboxGroupParent(params: UseCheckboxGroupParentParameters): UseCheckboxGroupParentReturnValue;
 export interface UseCheckboxGroupParentParameters {
   allValues?: string[] | undefined;
-  value?: string[] | undefined;
+  value: string[];
   onValueChange?: ((value: string[], eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void) | undefined;
 }
 export interface UseCheckboxGroupParentReturnValue {
   id: string | undefined;
-  indeterminate: boolean;
   disabledStatesRef: React.RefObject<Map<string, boolean>>;
   getParentProps: () => {
     id: string | undefined;
@@ -22,5 +21,4 @@ export interface UseCheckboxGroupParentReturnValue {
     checked: boolean;
     onCheckedChange: (checked: boolean, eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void;
   };
-}
-export interface UseCheckboxGroupParentState {}
+}

package/checkbox-group/useCheckboxGroupParent.d.ts

@@ -4,12 +4,11 @@ import type { BaseUIEventReasons } from "../internals/reasons.js";
 export declare function useCheckboxGroupParent(params: UseCheckboxGroupParentParameters): UseCheckboxGroupParentReturnValue;
 export interface UseCheckboxGroupParentParameters {
   allValues?: string[] | undefined;
-  value?: string[] | undefined;
+  value: string[];
   onValueChange?: ((value: string[], eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void) | undefined;
 }
 export interface UseCheckboxGroupParentReturnValue {
   id: string | undefined;
-  indeterminate: boolean;
   disabledStatesRef: React.RefObject<Map<string, boolean>>;
   getParentProps: () => {
     id: string | undefined;
@@ -22,5 +21,4 @@ export interface UseCheckboxGroupParentReturnValue {
     checked: boolean;
     onCheckedChange: (checked: boolean, eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void;
   };
-}
-export interface UseCheckboxGroupParentState {}
+}

package/checkbox-group/useCheckboxGroupParent.js

@@ -8,12 +8,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.useCheckboxGroupParent = useCheckboxGroupParent;
 var React = _interopRequireWildcard(require("react"));
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _empty = require("@base-ui/utils/empty");
 var _useBaseUiId = require("../internals/useBaseUiId");
-const EMPTY = [];
 function useCheckboxGroupParent(params) {
   const {
-    allValues = EMPTY,
-    value = EMPTY,
+    allValues = _empty.EMPTY_ARRAY,
+    value,
     onValueChange: onValueChangeProp
   } = params;
   const uncontrolledStateRef = React.useRef(value);
@@ -38,7 +38,7 @@ function useCheckboxGroupParent(params) {
       // "All" that are valid:
       // - any that aren't disabled
       // - disabled ones that are checked
-      const all = allValues.filter(v => !disabledStatesRef.current.get(v) || disabledStatesRef.current.get(v) && uncontrolledState.includes(v));
+      const all = allValues.filter(v => !disabledStatesRef.current.get(v) || uncontrolledState.includes(v));
       const allOnOrOff = uncontrolledState.length === all.length || uncontrolledState.length === 0;
       if (allOnOrOff) {
         if (value.length === all.length) {
@@ -81,9 +81,8 @@ function useCheckboxGroupParent(params) {
   }), [onValueChange, value]);
   return React.useMemo(() => ({
     id,
-    indeterminate,
     getParentProps,
     getChildProps,
     disabledStatesRef
-  }), [id, indeterminate, getParentProps, getChildProps]);
+  }), [id, getParentProps, getChildProps]);
 }

package/checkbox-group/useCheckboxGroupParent.mjs

@@ -2,12 +2,12 @@
 
 import * as React from 'react';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { EMPTY_ARRAY } from '@base-ui/utils/empty';
 import { useBaseUiId } from "../internals/useBaseUiId.mjs";
-const EMPTY = [];
 export function useCheckboxGroupParent(params) {
   const {
-    allValues = EMPTY,
-    value = EMPTY,
+    allValues = EMPTY_ARRAY,
+    value,
     onValueChange: onValueChangeProp
   } = params;
   const uncontrolledStateRef = React.useRef(value);
@@ -32,7 +32,7 @@ export function useCheckboxGroupParent(params) {
       // "All" that are valid:
       // - any that aren't disabled
       // - disabled ones that are checked
-      const all = allValues.filter(v => !disabledStatesRef.current.get(v) || disabledStatesRef.current.get(v) && uncontrolledState.includes(v));
+      const all = allValues.filter(v => !disabledStatesRef.current.get(v) || uncontrolledState.includes(v));
       const allOnOrOff = uncontrolledState.length === all.length || uncontrolledState.length === 0;
       if (allOnOrOff) {
         if (value.length === all.length) {
@@ -75,9 +75,8 @@ export function useCheckboxGroupParent(params) {
   }), [onValueChange, value]);
   return React.useMemo(() => ({
     id,
-    indeterminate,
     getParentProps,
     getChildProps,
     disabledStatesRef
-  }), [id, indeterminate, getParentProps, getChildProps]);
+  }), [id, getParentProps, getChildProps]);
 }

package/collapsible/panel/CollapsiblePanel.js

@@ -31,19 +31,21 @@ const CollapsiblePanel = exports.CollapsiblePanel = /*#__PURE__*/React.forwardRe
     style,
     ...elementProps
   } = componentProps;
+
+  /* istanbul ignore else -- `process.env.NODE_ENV` is a build-time constant under test */
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    React.useEffect(() => {
       if (hiddenUntilFoundProp && keepMountedProp === false) {
         (0, _warn.warn)('The `keepMounted={false}` prop on `Collapsible.Panel` is ignored when `hiddenUntilFound` is enabled, since the panel must remain mounted while closed.');
       }
     }, [hiddenUntilFoundProp, keepMountedProp]);
   }
   const {
+    defaultPanelId,
     mounted,
     onOpenChange,
     open,
-    panelId,
     setMounted,
     setPanelIdState,
     setOpen,
@@ -52,15 +54,14 @@ const CollapsiblePanel = exports.CollapsiblePanel = /*#__PURE__*/React.forwardRe
   } = (0, _CollapsibleRootContext.useCollapsibleRootContext)();
   const hiddenUntilFound = hiddenUntilFoundProp ?? false;
   const keepMounted = keepMountedProp ?? false;
+  const registeredId = idProp || undefined;
+  const id = registeredId ?? defaultPanelId;
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    if (idProp) {
-      setPanelIdState(idProp);
-      return () => {
-        setPanelIdState(undefined);
-      };
-    }
-    return undefined;
-  }, [idProp, setPanelIdState]);
+    setPanelIdState(currentId => registeredId ?? (currentId === null ? undefined : currentId));
+    return () => {
+      setPanelIdState(currentId => currentId === registeredId ? null : currentId);
+    };
+  }, [registeredId, setPanelIdState]);
   const {
     height,
     props,
@@ -72,7 +73,7 @@ const CollapsiblePanel = exports.CollapsiblePanel = /*#__PURE__*/React.forwardRe
   } = (0, _useCollapsiblePanel.useCollapsiblePanel)({
     externalRef: forwardedRef,
     hiddenUntilFound,
-    id: panelId,
+    id,
     keepMounted,
     mounted,
     onOpenChange,

package/collapsible/panel/CollapsiblePanel.mjs

@@ -25,19 +25,21 @@ export const CollapsiblePanel = /*#__PURE__*/React.forwardRef(function Collapsib
     style,
     ...elementProps
   } = componentProps;
+
+  /* istanbul ignore else -- `process.env.NODE_ENV` is a build-time constant under test */
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useIsoLayoutEffect(() => {
+    React.useEffect(() => {
       if (hiddenUntilFoundProp && keepMountedProp === false) {
         warn('The `keepMounted={false}` prop on `Collapsible.Panel` is ignored when `hiddenUntilFound` is enabled, since the panel must remain mounted while closed.');
       }
     }, [hiddenUntilFoundProp, keepMountedProp]);
   }
   const {
+    defaultPanelId,
     mounted,
     onOpenChange,
     open,
-    panelId,
     setMounted,
     setPanelIdState,
     setOpen,
@@ -46,15 +48,14 @@ export const CollapsiblePanel = /*#__PURE__*/React.forwardRef(function Collapsib
   } = useCollapsibleRootContext();
   const hiddenUntilFound = hiddenUntilFoundProp ?? false;
   const keepMounted = keepMountedProp ?? false;
+  const registeredId = idProp || undefined;
+  const id = registeredId ?? defaultPanelId;
   useIsoLayoutEffect(() => {
-    if (idProp) {
-      setPanelIdState(idProp);
-      return () => {
-        setPanelIdState(undefined);
-      };
-    }
-    return undefined;
-  }, [idProp, setPanelIdState]);
+    setPanelIdState(currentId => registeredId ?? (currentId === null ? undefined : currentId));
+    return () => {
+      setPanelIdState(currentId => currentId === registeredId ? null : currentId);
+    };
+  }, [registeredId, setPanelIdState]);
   const {
     height,
     props,
@@ -66,7 +67,7 @@ export const CollapsiblePanel = /*#__PURE__*/React.forwardRef(function Collapsib
   } = useCollapsiblePanel({
     externalRef: forwardedRef,
     hiddenUntilFound,
-    id: panelId,
+    id,
     keepMounted,
     mounted,
     onOpenChange,

package/collapsible/panel/CollapsiblePanelDataAttributes.d.mts

@@ -8,7 +8,7 @@ export declare enum CollapsiblePanelDataAttributes {
    */
   closed = "data-closed",
   /**
-   * Present when the panel is animating in.
+   * Present when the panel begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/collapsible/panel/CollapsiblePanelDataAttributes.d.ts

@@ -8,7 +8,7 @@ export declare enum CollapsiblePanelDataAttributes {
    */
   closed = "data-closed",
   /**
-   * Present when the panel is animating in.
+   * Present when the panel begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/collapsible/panel/CollapsiblePanelDataAttributes.js

@@ -15,7 +15,7 @@ let CollapsiblePanelDataAttributes = exports.CollapsiblePanelDataAttributes = fu
    */
   CollapsiblePanelDataAttributes["closed"] = "data-closed";
   /**
-   * Present when the panel is animating in.
+   * Present when the panel begins animating in.
    */
   CollapsiblePanelDataAttributes[CollapsiblePanelDataAttributes["startingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.startingStyle] = "startingStyle";
   /**

package/collapsible/panel/CollapsiblePanelDataAttributes.mjs

@@ -9,7 +9,7 @@ export let CollapsiblePanelDataAttributes = function (CollapsiblePanelDataAttrib
    */
   CollapsiblePanelDataAttributes["closed"] = "data-closed";
   /**
-   * Present when the panel is animating in.
+   * Present when the panel begins animating in.
    */
   CollapsiblePanelDataAttributes[CollapsiblePanelDataAttributes["startingStyle"] = TransitionStatusDataAttributes.startingStyle] = "startingStyle";
   /**

package/collapsible/panel/useCollapsiblePanel.js

@@ -57,12 +57,9 @@ function useCollapsiblePanel(parameters) {
   const [forcePanelIdle, setForcePanelIdle] = React.useState(false);
   const pendingTemporaryStyleRestoreRef = React.useRef(null);
   const mergedPanelRef = (0, _useMergedRefs.useMergedRefs)(externalRef, panelRef);
-  const latestStateRef = (0, _useValueAsRef.useValueAsRef)({
-    mounted,
-    open
-  });
+  const latestOpenRef = (0, _useValueAsRef.useValueAsRef)(open);
   // Only used to handle panel close
-  const runOnceCloseAnimationsFinish = (0, _useAnimationsFinished.useAnimationsFinished)(panelRef, false, false);
+  const runOnceCloseAnimationsFinish = (0, _useAnimationsFinished.useAnimationsFinished)(panelRef);
   const hidden = !open && !mounted;
   const panelTransitionStatus = forcePanelIdle ? 'idle' : transitionStatus;
   const shouldPreventOpenAnimation = open && (
@@ -168,20 +165,17 @@ function useCollapsiblePanel(parameters) {
         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');
+      setDimensions(getDimensions(panel));
+      const restoreAnimationName = setTemporaryStyle(panel, 'animation-name', 'none');
+      if (!skipNextOpen) {
         restoreAnimationName();
-        setPendingTemporaryStyleRestore(restoreAnimationDuration);
-        setForcePanelIdle(true);
         return undefined;
       }
+      const restoreAnimationDuration = setTemporaryStyle(panel, 'animation-duration', '0s');
+      restoreAnimationName();
+      setPendingTemporaryStyleRestore(restoreAnimationDuration);
+      setForcePanelIdle(true);
+      return undefined;
     }
 
     // Capture the current size as soon as close is requested, before the
@@ -201,12 +195,16 @@ function useCollapsiblePanel(parameters) {
     if (transitionStatus !== 'ending') {
       return undefined;
     }
+
+    // Reachable when `transitionStatus` already flipped to `ending` before this effect ran, so
+    // the close branch above was skipped. Without motion there is nothing to wait for, so unmount
+    // here instead of deferring to the animation-finished path below.
     if (animationType === 'none') {
       setMounted(false);
       return undefined;
     }
     const nextDimensions = getDimensions(panel);
-    const hasMeasuredSize = (nextDimensions.height ?? 0) > 0 || (nextDimensions.width ?? 0) > 0;
+    const hasMeasuredSize = nextDimensions.height > 0 || nextDimensions.width > 0;
     if (!hasMeasuredSize) {
       setMounted(false);
       return undefined;
@@ -223,6 +221,11 @@ function useCollapsiblePanel(parameters) {
     open: true,
     ref: panelRef,
     onComplete() {
+      // `useOpenChangeComplete` only aborts from its effect cleanup, which React runs in the
+      // post-paint passive flush. An animation's `finished` microtask can resolve after the render
+      // that set `open` to `false` but before that cleanup, so re-check the latest value here.
+      // Clearing the measured size in that window would make the close transition start from
+      // `height: 0` instead of the expanded pixel height.
       if (!open) {
         return;
       }
@@ -247,22 +250,23 @@ function useCollapsiblePanel(parameters) {
     const abortController = new AbortController();
     let endingStyleFrame = -1;
     function handleComplete() {
-      if (latestStateRef.current.open) {
+      // Same post-paint race as the `useOpenChangeComplete` callback above, except `open` is
+      // captured by this effect's closure and always `false` here, so read the latest value from
+      // a ref. Unmounting a panel that has already reopened would drop it from the DOM.
+      if (latestOpenRef.current) {
         return;
       }
       setMounted(false);
       setDimensions(EMPTY_DIMENSIONS, false);
     }
     endingStyleFrame = _useAnimationFrame.AnimationFrame.request(() => {
-      if (!abortController.signal.aborted) {
-        runOnceCloseAnimationsFinish(handleComplete, abortController.signal);
-      }
+      runOnceCloseAnimationsFinish(handleComplete, abortController.signal);
     });
     return () => {
       _useAnimationFrame.AnimationFrame.cancel(endingStyleFrame);
       abortController.abort();
     };
-  }, [latestStateRef, mounted, open, panelTransitionStatus, runOnceCloseAnimationsFinish, setDimensions, setMounted]);
+  }, [latestOpenRef, mounted, open, panelTransitionStatus, runOnceCloseAnimationsFinish, setDimensions, setMounted]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     const panel = panelRef.current;
     if (!panel || !hiddenUntilFound || !hidden) {
@@ -271,7 +275,7 @@ function useCollapsiblePanel(parameters) {
 
     // 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
+    // when necessary: https://github.com/react/react/issues/24740
     panel.setAttribute('hidden', 'until-found');
   }, [hidden, hiddenUntilFound]);
   React.useEffect(function registerBeforeMatchListener() {
@@ -313,11 +317,12 @@ function getDimensions(element) {
     width: element.scrollWidth
   };
 }
-function getAnimationType(element, hasSuppressedMountAnimation = false) {
+function getAnimationType(element, hasSuppressedMountAnimation) {
   const panelStyles = (0, _owner.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) {
+    /* istanbul ignore else -- `process.env.NODE_ENV` is a build-time constant under test */
     if (process.env.NODE_ENV !== 'production') {
       (0, _warn.warn)('CSS transitions and CSS animations both detected on Collapsible or Accordion panel.', 'Only one of either animation type should be used.');
     }

package/collapsible/panel/useCollapsiblePanel.mjs

@@ -51,12 +51,9 @@ export function useCollapsiblePanel(parameters) {
   const [forcePanelIdle, setForcePanelIdle] = React.useState(false);
   const pendingTemporaryStyleRestoreRef = React.useRef(null);
   const mergedPanelRef = useMergedRefs(externalRef, panelRef);
-  const latestStateRef = useValueAsRef({
-    mounted,
-    open
-  });
+  const latestOpenRef = useValueAsRef(open);
   // Only used to handle panel close
-  const runOnceCloseAnimationsFinish = useAnimationsFinished(panelRef, false, false);
+  const runOnceCloseAnimationsFinish = useAnimationsFinished(panelRef);
   const hidden = !open && !mounted;
   const panelTransitionStatus = forcePanelIdle ? 'idle' : transitionStatus;
   const shouldPreventOpenAnimation = open && (
@@ -162,20 +159,17 @@ export function useCollapsiblePanel(parameters) {
         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');
+      setDimensions(getDimensions(panel));
+      const restoreAnimationName = setTemporaryStyle(panel, 'animation-name', 'none');
+      if (!skipNextOpen) {
         restoreAnimationName();
-        setPendingTemporaryStyleRestore(restoreAnimationDuration);
-        setForcePanelIdle(true);
         return undefined;
       }
+      const restoreAnimationDuration = setTemporaryStyle(panel, 'animation-duration', '0s');
+      restoreAnimationName();
+      setPendingTemporaryStyleRestore(restoreAnimationDuration);
+      setForcePanelIdle(true);
+      return undefined;
     }
 
     // Capture the current size as soon as close is requested, before the
@@ -195,12 +189,16 @@ export function useCollapsiblePanel(parameters) {
     if (transitionStatus !== 'ending') {
       return undefined;
     }
+
+    // Reachable when `transitionStatus` already flipped to `ending` before this effect ran, so
+    // the close branch above was skipped. Without motion there is nothing to wait for, so unmount
+    // here instead of deferring to the animation-finished path below.
     if (animationType === 'none') {
       setMounted(false);
       return undefined;
     }
     const nextDimensions = getDimensions(panel);
-    const hasMeasuredSize = (nextDimensions.height ?? 0) > 0 || (nextDimensions.width ?? 0) > 0;
+    const hasMeasuredSize = nextDimensions.height > 0 || nextDimensions.width > 0;
     if (!hasMeasuredSize) {
       setMounted(false);
       return undefined;
@@ -217,6 +215,11 @@ export function useCollapsiblePanel(parameters) {
     open: true,
     ref: panelRef,
     onComplete() {
+      // `useOpenChangeComplete` only aborts from its effect cleanup, which React runs in the
+      // post-paint passive flush. An animation's `finished` microtask can resolve after the render
+      // that set `open` to `false` but before that cleanup, so re-check the latest value here.
+      // Clearing the measured size in that window would make the close transition start from
+      // `height: 0` instead of the expanded pixel height.
       if (!open) {
         return;
       }
@@ -241,22 +244,23 @@ export function useCollapsiblePanel(parameters) {
     const abortController = new AbortController();
     let endingStyleFrame = -1;
     function handleComplete() {
-      if (latestStateRef.current.open) {
+      // Same post-paint race as the `useOpenChangeComplete` callback above, except `open` is
+      // captured by this effect's closure and always `false` here, so read the latest value from
+      // a ref. Unmounting a panel that has already reopened would drop it from the DOM.
+      if (latestOpenRef.current) {
         return;
       }
       setMounted(false);
       setDimensions(EMPTY_DIMENSIONS, false);
     }
     endingStyleFrame = AnimationFrame.request(() => {
-      if (!abortController.signal.aborted) {
-        runOnceCloseAnimationsFinish(handleComplete, abortController.signal);
-      }
+      runOnceCloseAnimationsFinish(handleComplete, abortController.signal);
     });
     return () => {
       AnimationFrame.cancel(endingStyleFrame);
       abortController.abort();
     };
-  }, [latestStateRef, mounted, open, panelTransitionStatus, runOnceCloseAnimationsFinish, setDimensions, setMounted]);
+  }, [latestOpenRef, mounted, open, panelTransitionStatus, runOnceCloseAnimationsFinish, setDimensions, setMounted]);
   useIsoLayoutEffect(() => {
     const panel = panelRef.current;
     if (!panel || !hiddenUntilFound || !hidden) {
@@ -265,7 +269,7 @@ export function useCollapsiblePanel(parameters) {
 
     // 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
+    // when necessary: https://github.com/react/react/issues/24740
     panel.setAttribute('hidden', 'until-found');
   }, [hidden, hiddenUntilFound]);
   React.useEffect(function registerBeforeMatchListener() {
@@ -307,11 +311,12 @@ function getDimensions(element) {
     width: element.scrollWidth
   };
 }
-function getAnimationType(element, hasSuppressedMountAnimation = false) {
+function getAnimationType(element, hasSuppressedMountAnimation) {
   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) {
+    /* istanbul ignore else -- `process.env.NODE_ENV` is a build-time constant under test */
     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.');
     }

package/collapsible/root/CollapsibleRootDataAttributes.d.mts

@@ -0,0 +1,18 @@
+export declare enum CollapsibleRootDataAttributes {
+  /**
+   * Present when the collapsible is open.
+   */
+  open = "data-open",
+  /**
+   * Present when the collapsible is closed.
+   */
+  closed = "data-closed",
+  /**
+   * Present when the collapsible begins animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the collapsible is animating out.
+   */
+  endingStyle = "data-ending-style",
+}

package/collapsible/root/CollapsibleRootDataAttributes.d.ts

@@ -0,0 +1,18 @@
+export declare enum CollapsibleRootDataAttributes {
+  /**
+   * Present when the collapsible is open.
+   */
+  open = "data-open",
+  /**
+   * Present when the collapsible is closed.
+   */
+  closed = "data-closed",
+  /**
+   * Present when the collapsible begins animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the collapsible is animating out.
+   */
+  endingStyle = "data-ending-style",
+}

package/collapsible/root/CollapsibleRootDataAttributes.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CollapsibleRootDataAttributes = void 0;
+var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
+let CollapsibleRootDataAttributes = exports.CollapsibleRootDataAttributes = function (CollapsibleRootDataAttributes) {
+  /**
+   * Present when the collapsible is open.
+   */
+  CollapsibleRootDataAttributes["open"] = "data-open";
+  /**
+   * Present when the collapsible is closed.
+   */
+  CollapsibleRootDataAttributes["closed"] = "data-closed";
+  /**
+   * Present when the collapsible begins animating in.
+   */
+  CollapsibleRootDataAttributes[CollapsibleRootDataAttributes["startingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the collapsible is animating out.
+   */
+  CollapsibleRootDataAttributes[CollapsibleRootDataAttributes["endingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.endingStyle] = "endingStyle";
+  return CollapsibleRootDataAttributes;
+}({});

package/collapsible/root/CollapsibleRootDataAttributes.mjs

@@ -0,0 +1,20 @@
+import { TransitionStatusDataAttributes } from "../../internals/stateAttributesMapping.mjs";
+export let CollapsibleRootDataAttributes = function (CollapsibleRootDataAttributes) {
+  /**
+   * Present when the collapsible is open.
+   */
+  CollapsibleRootDataAttributes["open"] = "data-open";
+  /**
+   * Present when the collapsible is closed.
+   */
+  CollapsibleRootDataAttributes["closed"] = "data-closed";
+  /**
+   * Present when the collapsible begins animating in.
+   */
+  CollapsibleRootDataAttributes[CollapsibleRootDataAttributes["startingStyle"] = TransitionStatusDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the collapsible is animating out.
+   */
+  CollapsibleRootDataAttributes[CollapsibleRootDataAttributes["endingStyle"] = TransitionStatusDataAttributes.endingStyle] = "endingStyle";
+  return CollapsibleRootDataAttributes;
+}({});