@tale-ui/react 0.0.3

package/collapsible/panel/CollapsiblePanel.js

@@ -0,0 +1,138 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CollapsiblePanel = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useIsoLayoutEffect = require("@tale-ui/utils/useIsoLayoutEffect");
+var _warn = require("@tale-ui/utils/warn");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _CollapsibleRootContext = require("../root/CollapsibleRootContext");
+var _stateAttributesMapping = require("../root/stateAttributesMapping");
+var _useCollapsiblePanel = require("./useCollapsiblePanel");
+var _CollapsiblePanelCssVars = require("./CollapsiblePanelCssVars");
+var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
+/**
+ * A panel with the collapsible contents.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Tale UI Collapsible](https://base-ui.com/react/components/collapsible)
+ */
+const CollapsiblePanel = exports.CollapsiblePanel = /*#__PURE__*/React.forwardRef(function CollapsiblePanel(componentProps, forwardedRef) {
+  const {
+    className,
+    hiddenUntilFound: hiddenUntilFoundProp,
+    keepMounted: keepMountedProp,
+    render,
+    id: idProp,
+    ...elementProps
+  } = componentProps;
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+      if (hiddenUntilFoundProp && keepMountedProp === false) {
+        (0, _warn.warn)('The `keepMounted={false}` prop on a Collapsible will be ignored when using `hiddenUntilFound` since it requires the Panel to remain mounted even when closed.');
+      }
+    }, [hiddenUntilFoundProp, keepMountedProp]);
+  }
+  const {
+    abortControllerRef,
+    animationTypeRef,
+    height,
+    mounted,
+    onOpenChange,
+    open,
+    panelId,
+    panelRef,
+    runOnceAnimationsFinish,
+    setDimensions,
+    setHiddenUntilFound,
+    setKeepMounted,
+    setMounted,
+    setPanelIdState,
+    setOpen,
+    setVisible,
+    state,
+    transitionDimensionRef,
+    visible,
+    width,
+    transitionStatus
+  } = (0, _CollapsibleRootContext.useCollapsibleRootContext)();
+  const hiddenUntilFound = hiddenUntilFoundProp ?? false;
+  const keepMounted = keepMountedProp ?? false;
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    if (idProp) {
+      setPanelIdState(idProp);
+      return () => {
+        setPanelIdState(undefined);
+      };
+    }
+    return undefined;
+  }, [idProp, setPanelIdState]);
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    setHiddenUntilFound(hiddenUntilFound);
+  }, [setHiddenUntilFound, hiddenUntilFound]);
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    setKeepMounted(keepMounted);
+  }, [setKeepMounted, keepMounted]);
+  const {
+    props
+  } = (0, _useCollapsiblePanel.useCollapsiblePanel)({
+    abortControllerRef,
+    animationTypeRef,
+    externalRef: forwardedRef,
+    height,
+    hiddenUntilFound,
+    id: panelId,
+    keepMounted,
+    mounted,
+    onOpenChange,
+    open,
+    panelRef,
+    runOnceAnimationsFinish,
+    setDimensions,
+    setMounted,
+    setOpen,
+    setVisible,
+    transitionDimensionRef,
+    visible,
+    width
+  });
+  (0, _useOpenChangeComplete.useOpenChangeComplete)({
+    open: open && transitionStatus === 'idle',
+    ref: panelRef,
+    onComplete() {
+      if (!open) {
+        return;
+      }
+      setDimensions({
+        height: undefined,
+        width: undefined
+      });
+    }
+  });
+  const panelState = React.useMemo(() => ({
+    ...state,
+    transitionStatus
+  }), [state, transitionStatus]);
+  const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    state: panelState,
+    ref: [forwardedRef, panelRef],
+    props: [props, {
+      style: {
+        [_CollapsiblePanelCssVars.CollapsiblePanelCssVars.collapsiblePanelHeight]: height === undefined ? 'auto' : `${height}px`,
+        [_CollapsiblePanelCssVars.CollapsiblePanelCssVars.collapsiblePanelWidth]: width === undefined ? 'auto' : `${width}px`
+      }
+    }, elementProps],
+    stateAttributesMapping: _stateAttributesMapping.collapsibleStateAttributesMapping
+  });
+  const shouldRender = keepMounted || hiddenUntilFound || !keepMounted && mounted;
+  if (!shouldRender) {
+    return null;
+  }
+  return element;
+});
+if (process.env.NODE_ENV !== "production") CollapsiblePanel.displayName = "CollapsiblePanel";

package/collapsible/panel/CollapsiblePanelCssVars.d.ts

@@ -0,0 +1,12 @@
+export declare enum CollapsiblePanelCssVars {
+  /**
+   * The collapsible panel's height.
+   * @type {number}
+   */
+  collapsiblePanelHeight = "--collapsible-panel-height",
+  /**
+   * The collapsible panel's width.
+   * @type {number}
+   */
+  collapsiblePanelWidth = "--collapsible-panel-width",
+}

package/collapsible/panel/CollapsiblePanelCssVars.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CollapsiblePanelCssVars = void 0;
+let CollapsiblePanelCssVars = exports.CollapsiblePanelCssVars = /*#__PURE__*/function (CollapsiblePanelCssVars) {
+  /**
+   * The collapsible panel's height.
+   * @type {number}
+   */
+  CollapsiblePanelCssVars["collapsiblePanelHeight"] = "--collapsible-panel-height";
+  /**
+   * The collapsible panel's width.
+   * @type {number}
+   */
+  CollapsiblePanelCssVars["collapsiblePanelWidth"] = "--collapsible-panel-width";
+  return CollapsiblePanelCssVars;
+}({});

package/collapsible/panel/CollapsiblePanelDataAttributes.d.ts

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

package/collapsible/panel/CollapsiblePanelDataAttributes.js

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

package/collapsible/panel/useCollapsiblePanel.d.ts

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { HTMLProps } from "../../utils/types.js";
+import type { AnimationType, Dimensions } from "../root/useCollapsibleRoot.js";
+import type { CollapsibleRoot } from "../root/CollapsibleRoot.js";
+export declare function useCollapsiblePanel(parameters: useCollapsiblePanel.Parameters): useCollapsiblePanel.ReturnValue;
+export interface UseCollapsiblePanelParameters {
+  abortControllerRef: React.RefObject<AbortController | null>;
+  animationTypeRef: React.RefObject<AnimationType>;
+  externalRef: React.ForwardedRef<HTMLDivElement>;
+  /**
+   * The height of the panel.
+   */
+  height: number | undefined;
+  /**
+   * Allows the browser’s built-in page search to find and expand the panel contents.
+   *
+   * Overrides the `keepMounted` prop and uses `hidden="until-found"`
+   * to hide the element without removing it from the DOM.
+   */
+  hiddenUntilFound: boolean;
+  /**
+   * The `id` attribute of the panel.
+   */
+  id: React.HTMLAttributes<Element>['id'];
+  /**
+   * Whether to keep the element in the DOM while the panel is closed.
+   * This prop is ignored when `hiddenUntilFound` is used.
+   */
+  keepMounted: boolean;
+  /**
+   * Whether the collapsible panel is currently mounted.
+   */
+  mounted: boolean;
+  onOpenChange: (open: boolean, eventDetails: CollapsibleRoot.ChangeEventDetails) => void;
+  /**
+   * Whether the collapsible panel is currently open.
+   */
+  open: boolean;
+  panelRef: React.RefObject<HTMLElement | null>;
+  runOnceAnimationsFinish: (fnToExecute: () => void, signal?: AbortSignal | null) => void;
+  setDimensions: React.Dispatch<React.SetStateAction<Dimensions>>;
+  setMounted: (nextMounted: boolean) => void;
+  setOpen: (nextOpen: boolean) => void;
+  setVisible: React.Dispatch<React.SetStateAction<boolean>>;
+  transitionDimensionRef: React.RefObject<'height' | 'width' | null>;
+  /**
+   * The visible state of the panel used to determine the `[hidden]` attribute
+   * only when CSS keyframe animations are used.
+   */
+  visible: boolean;
+  /**
+   * The width of the panel.
+   */
+  width: number | undefined;
+}
+export interface UseCollapsiblePanelReturnValue {
+  props: HTMLProps;
+}
+export declare namespace useCollapsiblePanel {
+  type Parameters = UseCollapsiblePanelParameters;
+  type ReturnValue = UseCollapsiblePanelReturnValue;
+}

package/collapsible/panel/useCollapsiblePanel.js

@@ -0,0 +1,350 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCollapsiblePanel = useCollapsiblePanel;
+var React = _interopRequireWildcard(require("react"));
+var _useIsoLayoutEffect = require("@tale-ui/utils/useIsoLayoutEffect");
+var _useStableCallback = require("@tale-ui/utils/useStableCallback");
+var _useMergedRefs = require("@tale-ui/utils/useMergedRefs");
+var _useOnMount = require("@tale-ui/utils/useOnMount");
+var _useAnimationFrame = require("@tale-ui/utils/useAnimationFrame");
+var _warn = require("@tale-ui/utils/warn");
+var _createTaleUIEventDetails = require("../../utils/createTaleUIEventDetails");
+var _reasons = require("../../utils/reasons");
+var _CollapsiblePanelDataAttributes = require("./CollapsiblePanelDataAttributes");
+var _AccordionRootDataAttributes = require("../../accordion/root/AccordionRootDataAttributes");
+function useCollapsiblePanel(parameters) {
+  const {
+    abortControllerRef,
+    animationTypeRef,
+    externalRef,
+    height,
+    hiddenUntilFound,
+    keepMounted,
+    id: idParam,
+    mounted,
+    onOpenChange,
+    open,
+    panelRef,
+    runOnceAnimationsFinish,
+    setDimensions,
+    setMounted,
+    setOpen,
+    setVisible,
+    transitionDimensionRef,
+    visible,
+    width
+  } = parameters;
+  const isBeforeMatchRef = React.useRef(false);
+  const latestAnimationNameRef = React.useRef(null);
+  const shouldCancelInitialOpenAnimationRef = React.useRef(open);
+  const shouldCancelInitialOpenTransitionRef = React.useRef(open);
+  const endingStyleFrame = (0, _useAnimationFrame.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]);
+
+  /**
+   * 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 = (0, _useStableCallback.useStableCallback)(element => {
+    if (!element) {
+      return undefined;
+    }
+    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') {
+          (0, _warn.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';
+      }
+
+      /**
+       * 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.AccordionRootDataAttributes.orientation) === 'horizontal' || panelStyles.transitionProperty.indexOf('width') > -1) {
+        transitionDimensionRef.current = 'width';
+      } else {
+        transitionDimensionRef.current = 'height';
+      }
+    }
+    if (animationTypeRef.current !== 'css-transition') {
+      return undefined;
+    }
+    if (height === undefined || width === undefined) {
+      setDimensions({
+        height: element.scrollHeight,
+        width: element.scrollWidth
+      });
+      if (shouldCancelInitialOpenTransitionRef.current) {
+        element.style.setProperty('transition-duration', '0s');
+      }
+    }
+    let frame = -1;
+    let nextFrame = -1;
+    frame = _useAnimationFrame.AnimationFrame.request(() => {
+      shouldCancelInitialOpenTransitionRef.current = false;
+      nextFrame = _useAnimationFrame.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');
+        });
+      });
+    });
+    return () => {
+      _useAnimationFrame.AnimationFrame.cancel(frame);
+      _useAnimationFrame.AnimationFrame.cancel(nextFrame);
+    };
+  });
+  const mergedPanelRef = (0, _useMergedRefs.useMergedRefs)(externalRef, panelRef, handlePanelRef);
+  (0, _useIsoLayoutEffect.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;
+    }
+    if (open) {
+      const originalLayoutStyles = {
+        'justify-content': panel.style.justifyContent,
+        'align-items': panel.style.alignItems,
+        'align-content': panel.style.alignContent,
+        'justify-items': panel.style.justifyItems
+      };
+
+      /* opening */
+      Object.keys(originalLayoutStyles).forEach(key => {
+        panel.style.setProperty(key, 'initial', 'important');
+      });
+
+      /**
+       * 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.CollapsiblePanelDataAttributes.startingStyle, '');
+      }
+      setDimensions({
+        height: panel.scrollHeight,
+        width: panel.scrollWidth
+      });
+      resizeFrame = _useAnimationFrame.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) {
+        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.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);
+        }
+      });
+      attributeObserver.observe(panel, {
+        attributes: true,
+        attributeFilter: [endingStyleAttribute]
+      });
+      return () => {
+        attributeObserver?.disconnect();
+        endingStyleFrame.cancel();
+        if (abortControllerRef.current === abortController) {
+          abortController.abort();
+          abortControllerRef.current = null;
+        }
+      };
+    }
+    return () => {
+      _useAnimationFrame.AnimationFrame.cancel(resizeFrame);
+    };
+  }, [abortControllerRef, animationTypeRef, endingStyleFrame, hiddenUntilFound, keepMounted, mounted, open, panelRef, runOnceAnimationsFinish, setDimensions, setMounted]);
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    if (animationTypeRef.current !== 'css-animation') {
+      return;
+    }
+    const panel = panelRef.current;
+    if (!panel) {
+      return;
+    }
+    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 (open) {
+      if (abortControllerRef.current != null) {
+        abortControllerRef.current.abort();
+        abortControllerRef.current = null;
+      }
+      setMounted(true);
+      setVisible(true);
+    } else {
+      abortControllerRef.current = new AbortController();
+      runOnceAnimationsFinish(() => {
+        setMounted(false);
+        setVisible(false);
+        abortControllerRef.current = null;
+      }, abortControllerRef.current.signal);
+    }
+  }, [abortControllerRef, animationTypeRef, open, panelRef, runOnceAnimationsFinish, setDimensions, setMounted, setVisible, visible]);
+  (0, _useOnMount.useOnMount)(() => {
+    const frame = _useAnimationFrame.AnimationFrame.request(() => {
+      shouldCancelInitialOpenAnimationRef.current = false;
+    });
+    return () => _useAnimationFrame.AnimationFrame.cancel(frame);
+  });
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    if (!hiddenUntilFound) {
+      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 = _useAnimationFrame.AnimationFrame.request(() => {
+        isBeforeMatchRef.current = false;
+        nextFrame = _useAnimationFrame.AnimationFrame.request(() => {
+          setTimeout(() => {
+            panel.style.removeProperty('transition-duration');
+          });
+        });
+      });
+    }
+    return () => {
+      _useAnimationFrame.AnimationFrame.cancel(frame);
+      _useAnimationFrame.AnimationFrame.cancel(nextFrame);
+    };
+  }, [hiddenUntilFound, open, panelRef, setDimensions]);
+  (0, _useIsoLayoutEffect.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.CollapsiblePanelDataAttributes.startingStyle, '');
+      }
+    }
+  }, [hiddenUntilFound, hidden, animationTypeRef, panelRef]);
+  React.useEffect(function registerBeforeMatchListener() {
+    const panel = panelRef.current;
+    if (!panel) {
+      return undefined;
+    }
+    function handleBeforeMatch(event) {
+      isBeforeMatchRef.current = true;
+      setOpen(true);
+      onOpenChange(true, (0, _createTaleUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none, event));
+    }
+    panel.addEventListener('beforematch', handleBeforeMatch);
+    return () => {
+      panel.removeEventListener('beforematch', handleBeforeMatch);
+    };
+  }, [onOpenChange, panelRef, setOpen]);
+  return React.useMemo(() => ({
+    props: {
+      hidden,
+      id: idParam,
+      ref: mergedPanelRef
+    }
+  }), [hidden, idParam, mergedPanelRef]);
+}

package/collapsible/root/CollapsibleRoot.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { TaleUIComponentProps } from "../../utils/types.js";
+import { useCollapsibleRoot } from "./useCollapsibleRoot.js";
+import type { TaleUIChangeEventDetails } from "../../utils/createTaleUIEventDetails.js";
+import { REASONS } from "../../utils/reasons.js";
+/**
+ * Groups all parts of the collapsible.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Tale UI Collapsible](https://base-ui.com/react/components/collapsible)
+ */
+export declare const CollapsibleRoot: React.ForwardRefExoticComponent<Omit<CollapsibleRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface CollapsibleRootState extends Pick<useCollapsibleRoot.ReturnValue, 'open' | 'disabled'> {}
+export interface CollapsibleRootProps extends TaleUIComponentProps<'div', CollapsibleRoot.State> {
+  /**
+   * Whether the collapsible panel is currently open.
+   *
+   * To render an uncontrolled collapsible, use the `defaultOpen` prop instead.
+   */
+  open?: boolean | undefined;
+  /**
+   * Whether the collapsible panel is initially open.
+   *
+   * To render a controlled collapsible, use the `open` prop instead.
+   * @default false
+   */
+  defaultOpen?: boolean | undefined;
+  /**
+   * Event handler called when the panel is opened or closed.
+   */
+  onOpenChange?: ((open: boolean, eventDetails: CollapsibleRootChangeEventDetails) => void) | undefined;
+  /**
+   * Whether the component should ignore user interaction.
+   * @default false
+   */
+  disabled?: boolean | undefined;
+}
+export type CollapsibleRootChangeEventReason = typeof REASONS.triggerPress | typeof REASONS.none;
+export type CollapsibleRootChangeEventDetails = TaleUIChangeEventDetails<CollapsibleRootChangeEventReason>;
+export declare namespace CollapsibleRoot {
+  type State = CollapsibleRootState;
+  type Props = CollapsibleRootProps;
+  type ChangeEventReason = CollapsibleRootChangeEventReason;
+  type ChangeEventDetails = CollapsibleRootChangeEventDetails;
+}