"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { List } from "../list/List.js";
import { useCollapseTransition } from "../transition/useCollapseTransition.js";
import { useTreeContext } from "./TreeProvider.js";
import { treeGroup } from "./styles.js";
/**
 * **Client Component**
 *
 * @internal
 * @since 6.0.0 Removed the collapse options and is no longer a
 * "public" component.
 */ export const TreeGroup = /*#__PURE__*/ forwardRef(function TreeGroup(props, ref) {
    const { className, collapsed, depth, onClick, onMouseDown, children, temporary: propTemporary, disableTransition = false, ...remaining } = props;
    const style = {
        ...remaining.style,
        "--rmd-tree-depth": depth
    };
    const { temporaryChildItems } = useTreeContext();
    const temporary = propTemporary ?? temporaryChildItems;
    const { elementProps, rendered } = useCollapseTransition({
        style,
        nodeRef: ref,
        enter: !disableTransition,
        exit: !disableTransition,
        transitionIn: !collapsed,
        temporary,
        className: treeGroup({
            className
        })
    });
    if (!rendered || !children) {
        return null;
    }
    return /*#__PURE__*/ _jsx(List, {
        ...remaining,
        onClick: (event)=>{
            onClick?.(event);
            // always stop propagation for click events and mousedown for groups
            // so that the parent child item's click and mousedown events aren't
            // also fired while there are disabled child elementsS or
            // non-interactable (like dividers or subheader)
            event.stopPropagation();
        },
        onMouseDown: (event)=>{
            onMouseDown?.(event);
            event.stopPropagation();
        },
        ...elementProps,
        role: "group",
        children: children
    });
});

//# sourceMappingURL=TreeGroup.js.map