"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
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 { ExpansionPanelHeader } from "./ExpansionPanelHeader.js";
import { expansionPanel } from "./styles.js";
/**
 * **Client Component**
 *
 * An expansion panel enables content to be either collapsed (hidden) or
 * expanded (visible) following the disclosure pattern.
 *
 * @example Simple Example
 * ```tsx
 * "use client";
 *
 * import { ExpansionList } from "@react-md/core/expansion-panel/ExpansionList";
 * import { ExpansionPanel } from "@react-md/core/expansion-panel/ExpansionPanel";
 * import { useExpansionPanels } from "@react-md/core/expansion-panel/useExpansionPanels";
 * import { type ReactElement } from "react";
 *
 * export default function ExpansionPanelGroupExample(): ReactElement {
 *   const { getPanelProps } = useExpansionPanels();
 *
 *   return (
 *     <ExpansionList style={{ width: "100%" }}>
 *       <ExpansionPanel {...getPanelProps(0)} headerChildren="Panel 1">
 *         Panel 1 Contents
 *       </ExpansionPanel>
 *       <ExpansionPanel {...getPanelProps(1)} headerChildren="Panel 2">
 *         Panel 2 Contents
 *       </ExpansionPanel>
 *       <ExpansionPanel {...getPanelProps(2)} headerChildren="Panel 3">
 *         Panel 3 Contents
 *       </ExpansionPanel>
 *     </ExpansionList>
 *   );
 * }
 * ```
 *
 * @see {@link https://react-md.dev/components/expansion-panel | ExpansionPanel Demos}
 * @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