var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { useContext } from 'react';
import { UdpTreeContext } from './UdpTree';
/**
 * Tree item component for composable tree construction.
 * Use inside UdpTree (without treeItems prop) when you need custom JSX in slots.
 *
 * Renders fluent-tree-item directly (no Stencil wrapper) so that
 * fluent-tree's nesting detection works correctly.
 *
 * Inherits size and appearance from the parent UdpTree via context.
 * These can be overridden per-item if needed.
 */
const slotted = (content, slotName) => {
    if (!content)
        return null;
    if (React.isValidElement(content) && content.type !== React.Fragment) {
        return React.cloneElement(content, { slot: slotName });
    }
    return React.createElement("span", { slot: slotName }, content);
};
export const UdpTreeItem = (_a) => {
    var { children, start, end, aside, size, appearance } = _a, props = __rest(_a, ["children", "start", "end", "aside", "size", "appearance"]);
    const treeContext = useContext(UdpTreeContext);
    return (React.createElement("fluent-tree-item", Object.assign({ size: size !== null && size !== void 0 ? size : treeContext.size, appearance: appearance !== null && appearance !== void 0 ? appearance : treeContext.appearance }, props), slotted(start, 'start'), children, slotted(end, 'end'), slotted(aside, 'aside')));
};
//# sourceMappingURL=UdpTreeItem.js.map