Collapsible

1"use client";
2 
3import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";
4import { mergeProps } from "@base-ui/react/merge-props";
5import * as React from "react";
6 
7type RenderProps = React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLElement> };
8type CollapsibleContentStyle = React.CSSProperties & {
9  "--radix-collapsible-content-height"?: string;
10  "--radix-collapsible-content-width"?: string;
11};
12 
13const collapsibleContentCssVariables: CollapsibleContentStyle = {
14  "--radix-collapsible-content-height": "var(--collapsible-panel-height)",
15  "--radix-collapsible-content-width": "var(--collapsible-panel-width)",
16};
17 
18function mergeContentStyle(
19  style: CollapsiblePrimitive.Panel.Props["style"],
20): CollapsiblePrimitive.Panel.Props["style"] {
21  if (typeof style === "function") {
22    return (state) => ({ ...collapsibleContentCssVariables, ...style(state) });
23  }
24 
25  return { ...collapsibleContentCssVariables, ...style };
26}
27 
28function mergeRefs(...refs: (React.Ref<HTMLElement> | undefined)[]) {
29  return (element: HTMLElement | null) => {
30    refs.forEach((ref) => {
31      if (typeof ref === "function") {
32        ref(element);
33      } else if (ref) {
34        ref.current = element;
35      }
36    });
37  };
38}
39 
40function preserveRadixEventCancellation(
41  child: React.ReactElement<{ [key: string]: unknown; children?: React.ReactNode }>,
42) {
43  const eventProps: Record<string, unknown> = {};
44 
45  for (const [name, handler] of Object.entries(child.props)) {
46    if (/^on[A-Z]/.test(name) && typeof handler === "function") {
47      eventProps[name] = (...args: unknown[]) => {
48        (handler as (...handlerArgs: unknown[]) => void)(...args);
49        const event = args[0] as
50          | { defaultPrevented?: boolean; preventBaseUIHandler?: () => void }
51          | undefined;
52        if (event?.defaultPrevented) event.preventBaseUIHandler?.();
53      };
54    }
55  }
56 
57  return React.cloneElement(child, eventProps);
58}
59 
60function renderWithAliases<State>(
61  render:
62    | React.ReactElement
63    | ((props: RenderProps, state: State) => React.ReactElement)
64    | undefined,
65  fallback: React.ReactElement,
66) {
67  return (elementProps: RenderProps, state: State & { disabled: boolean; open: boolean }) => {
68    const aliasedProps = mergeProps(
69      elementProps as React.ComponentPropsWithRef<"div">,
70      {
71        "data-disabled": state.disabled ? "" : undefined,
72        "data-state": state.open ? "open" : "closed",
73      } as React.ComponentPropsWithRef<"div">,
74// … truncated