"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cnb } from "cnbuilder";
import { forwardRef } from "react";
import { Card } from "../card/Card.js";
import { CardContent } from "../card/CardContent.js";
import { useCollapseTransition } from "../transition/useCollapseTransition.js";
import { useEnsuredId } from "../useEnsuredId.js";
import { bem } from "../utils/bem.js";
import { ExpansionPanelHeader } from "./ExpansionPanelHeader.js";
const styles = bem("rmd-expansion-panel");
/**
 * @since 6.0.0
 */ export function expansionPanel(options = {}) {
    const { className, expanded = false, disableTransition = false } = options;
    return cnb(styles({
        expanded,
        animate: !disableTransition
    }), className);
}
/**
 * **Client Component**
 *
 * @see `useExpansionPanels` for examples.
 * @since 6.0.0 The content will be persistent and invisible using `display: none`
 * instead of unmounting and also animate the `margin-top` style.
 */ export const ExpansionPanel = /*#__PURE__*/ forwardRef(function ExpansionPanel(props, ref) {
    const { id: propId, className, contentProps, contentStyle, contentClassName, header: propHeader, headerProps, headerStyle, headerClassName, headerChildren, children, expanded, onExpandClick, disabled = false, fullWidth = true, temporary = false, disableTransition = false, disableContentPadding = false, ...remaining } = props;
    const id = useEnsuredId(propId, "expansion-panel");
    const { elementProps, rendered } = useCollapseTransition({
        nodeRef: contentProps?.ref,
        style: contentStyle,
        className: contentClassName,
        timeout: disableTransition ? 0 : undefined,
        temporary,
        transitionIn: expanded
    });
    let header = propHeader;
    if (typeof header === "undefined") {
        header = /*#__PURE__*/ _jsx(ExpansionPanelHeader, {
            style: headerStyle,
            className: headerClassName,
            disableTransition: disableTransition,
            ...headerProps,
            "aria-disabled": disabled || undefined,
            id: id,
            onClick: onExpandClick,
            expanded: expanded,
            children: headerChildren
        });
    }
    return /*#__PURE__*/ _jsxs(Card, {
        ...remaining,
        id: `${id}-container`,
        ref: ref,
        fullWidth: fullWidth,
        className: expansionPanel({
            expanded,
            disableTransition,
            className
        }),
        children: [
            header,
            rendered && /*#__PURE__*/ _jsx(CardContent, {
                id: `${id}-content`,
                "aria-labelledby": id,
                disablePadding: disableContentPadding,
                disableSecondaryColor: true,
                disableLastChildPadding: true,
                ...contentProps,
                ...elementProps,
                role: "region",
                children: children
            })
        ]
    });
});

//# sourceMappingURL=ExpansionPanel.js.map