@nergora/ui 0.0.0-stage → 1.0.8

package/dist/esm/components/tree/tree.js

@@ -0,0 +1,592 @@
+"use client";
+import { ChevronDownMini, ChevronRightMini } from "@nergora/icons";
+import * as React from "react";
+import { Checkbox } from "../checkbox/index.js";
+import { Input } from "../input/index.js";
+import { Spinner } from "../spinner/index.js";
+import { clx } from "../../utils/clx.js";
+let activeTreeDrag = null;
+function useControllableState(controlledValue, defaultValue, onChange) {
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+    const value = controlledValue === undefined ? uncontrolledValue : controlledValue;
+    const setValue = React.useCallback((nextValue) => {
+        if (controlledValue === undefined) {
+            setUncontrolledValue(nextValue);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
+    }, [controlledValue, onChange]);
+    return [value, setValue];
+}
+function getNodeLabel(node) {
+    var _a;
+    return typeof node.label === "function"
+        ? node.label()
+        : ((_a = node.label) !== null && _a !== void 0 ? _a : node.key);
+}
+function getFieldValue(node, field) {
+    return field.split(".").reduce((value, segment) => {
+        if (value && typeof value === "object") {
+            return value[segment];
+        }
+        return undefined;
+    }, node);
+}
+function filterTreeNodes(nodes, filterValue, filterBy, filterMode, filterLocale) {
+    const query = filterValue.trim().toLocaleLowerCase(filterLocale);
+    if (!query)
+        return nodes;
+    const fields = Array.isArray(filterBy)
+        ? filterBy
+        : typeof filterBy === "string"
+            ? filterBy.split(",").map((field) => field.trim())
+            : ["label"];
+    const matches = (node) => {
+        if (typeof filterBy === "function") {
+            return filterBy(node).toLocaleLowerCase(filterLocale).includes(query);
+        }
+        return fields.some((field) => {
+            var _a;
+            return String(field === "label"
+                ? getNodeLabel(node)
+                : ((_a = getFieldValue(node, field)) !== null && _a !== void 0 ? _a : ""))
+                .toLocaleLowerCase(filterLocale)
+                .includes(query);
+        });
+    };
+    const visit = (node) => {
+        var _a;
+        const nodeMatches = matches(node);
+        if (nodeMatches && filterMode === "lenient") {
+            return node;
+        }
+        const children = ((_a = node.children) !== null && _a !== void 0 ? _a : [])
+            .map(visit)
+            .filter((child) => child !== null);
+        if (nodeMatches || children.length > 0) {
+            return { ...node, children };
+        }
+        return null;
+    };
+    return nodes.map(visit).filter((node) => node !== null);
+}
+function flattenVisibleNodes(nodes, expandedKeys, filterActive, parentKey = null) {
+    var _a;
+    const flattened = [];
+    for (const node of nodes) {
+        flattened.push({ node, parentKey });
+        if (((_a = node.children) === null || _a === void 0 ? void 0 : _a.length) &&
+            (filterActive || expandedKeys[node.key] === true)) {
+            flattened.push(...flattenVisibleNodes(node.children, expandedKeys, filterActive, node.key));
+        }
+    }
+    return flattened;
+}
+function removeNode(nodes, key) {
+    return nodes.reduce((result, node) => {
+        var _a;
+        if (node.key === key)
+            return result;
+        result.push(((_a = node.children) === null || _a === void 0 ? void 0 : _a.length)
+            ? { ...node, children: removeNode(node.children, key) }
+            : node);
+        return result;
+    }, []);
+}
+function insertNode(nodes, targetKey, nodeToInsert, position) {
+    if (position !== 0) {
+        const targetIndex = nodes.findIndex((node) => node.key === targetKey);
+        if (targetIndex !== -1) {
+            const nextNodes = [...nodes];
+            nextNodes.splice(targetIndex + (position === 1 ? 1 : 0), 0, nodeToInsert);
+            return nextNodes;
+        }
+    }
+    return nodes.map((node) => {
+        var _a, _b;
+        if (node.key === targetKey && position === 0) {
+            return {
+                ...node,
+                leaf: false,
+                children: [...((_a = node.children) !== null && _a !== void 0 ? _a : []), nodeToInsert],
+            };
+        }
+        if ((_b = node.children) === null || _b === void 0 ? void 0 : _b.length) {
+            return {
+                ...node,
+                children: insertNode(node.children, targetKey, nodeToInsert, position),
+            };
+        }
+        return node;
+    });
+}
+function nodeContains(node, key) {
+    var _a;
+    return Boolean((_a = node.children) === null || _a === void 0 ? void 0 : _a.some((child) => child.key === key || nodeContains(child, key)));
+}
+function hasCommonScope(sourceScope, targetScope) {
+    if (targetScope === undefined)
+        return true;
+    if (sourceScope === undefined)
+        return false;
+    const source = Array.isArray(sourceScope) ? sourceScope : [sourceScope];
+    const target = Array.isArray(targetScope) ? targetScope : [targetScope];
+    return source.some((scope) => target.includes(scope));
+}
+function isCheckboxState(value) {
+    return typeof value === "object" && value !== null;
+}
+function reconcileCheckboxSelection(nodes, selectionKeys) {
+    const nextSelection = { ...selectionKeys };
+    const visit = (node) => {
+        var _a;
+        if (!((_a = node.children) === null || _a === void 0 ? void 0 : _a.length)) {
+            const state = nextSelection[node.key];
+            return isCheckboxState(state)
+                ? state
+                : { checked: false, partialChecked: false };
+        }
+        const children = node.children.map(visit);
+        const checkedCount = children.filter((state) => state.checked).length;
+        const partial = children.some((state) => state.partialChecked);
+        const checked = checkedCount === children.length;
+        const partialChecked = !checked && (partial || checkedCount > 0);
+        if (checked || partialChecked) {
+            nextSelection[node.key] = { checked, partialChecked };
+        }
+        else {
+            delete nextSelection[node.key];
+        }
+        return { checked, partialChecked };
+    };
+    nodes.forEach(visit);
+    return nextSelection;
+}
+function setNodeAndDescendantsChecked(node, checked, selectionKeys) {
+    var _a;
+    if (node.selectable !== false) {
+        if (checked) {
+            selectionKeys[node.key] = { checked: true, partialChecked: false };
+        }
+        else {
+            delete selectionKeys[node.key];
+        }
+    }
+    (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach((child) => setNodeAndDescendantsChecked(child, checked, selectionKeys));
+}
+function renderSlot(slot, options) {
+    return typeof slot === "function" ? slot(options) : slot;
+}
+const Tree = React.forwardRef(({ value: controlledValue, defaultValue = [], onValueChange, expandedKeys: controlledExpandedKeys, defaultExpandedKeys = {}, onExpandedKeysChange, selectionKeys: controlledSelectionKeys, defaultSelectionKeys = {}, onSelectionKeysChange, selectionMode, metaKeySelection = false, loading = false, loadingMode = "mask", loadingIcon, filter = false, filterValue: controlledFilterValue, defaultFilterValue = "", onFilterValueChange, filterBy = "label", filterMode = "lenient", filterPlaceholder = "Filter", filterLocale, highlightOnSelect = false, scrollHeight, draggableNodes = false, droppableNodes = false, draggableScope, droppableScope, validateDrop = false, ariaLabel, ariaLabelledby, "aria-label": ariaLabelAttribute, "aria-labelledby": ariaLabelledbyAttribute, nodeTemplates, renderNode, renderNodeIcon, renderToggleIcon, renderCheckbox, header, footer, empty = "No results found.", classNames, onNodeSelect, onNodeUnselect, onNodeExpand, onNodeCollapse, onFilter, onNodeDrop, onNodeDragEnter, onNodeDragLeave, onTreeDragEnter, onTreeDragLeave, onNodeContextMenu, className, style, ...props }, ref) => {
+    const treeId = React.useId();
+    const [value, setValue] = useControllableState(controlledValue, defaultValue, onValueChange);
+    const [expandedKeys, setExpandedKeys] = useControllableState(controlledExpandedKeys, defaultExpandedKeys, onExpandedKeysChange);
+    const [selectionKeys, setSelectionKeys] = useControllableState(controlledSelectionKeys, defaultSelectionKeys, onSelectionKeysChange);
+    const [filterValue, setFilterValue] = useControllableState(controlledFilterValue, defaultFilterValue, onFilterValueChange);
+    const [focusedKey, setFocusedKey] = React.useState(null);
+    const [dropTarget, setDropTarget] = React.useState(null);
+    const nodeRefs = React.useRef(new Map());
+    const filteredValue = React.useMemo(() => filter && filterValue.trim()
+        ? filterTreeNodes(value, filterValue, filterBy, filterMode, filterLocale)
+        : value, [filter, filterBy, filterLocale, filterMode, filterValue, value]);
+    const filterActive = filter && filterValue.trim().length > 0;
+    const visibleNodes = React.useMemo(() => flattenVisibleNodes(filteredValue, expandedKeys, filterActive), [expandedKeys, filterActive, filteredValue]);
+    React.useEffect(() => {
+        var _a;
+        if (visibleNodes.length === 0) {
+            setFocusedKey(null);
+            return;
+        }
+        if (!focusedKey ||
+            !visibleNodes.some(({ node }) => node.key === focusedKey)) {
+            const selectedNode = visibleNodes.find(({ node }) => {
+                const selection = selectionKeys[node.key];
+                return (selection === true ||
+                    (isCheckboxState(selection) && selection.checked));
+            });
+            setFocusedKey((_a = selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.node.key) !== null && _a !== void 0 ? _a : visibleNodes[0].node.key);
+        }
+    }, [focusedKey, selectionKeys, visibleNodes]);
+    const focusNode = React.useCallback((key) => {
+        var _a;
+        setFocusedKey(key);
+        (_a = nodeRefs.current.get(key)) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    const toggleNode = React.useCallback((node, originalEvent) => {
+        const expanded = expandedKeys[node.key] === true;
+        const nextExpandedKeys = { ...expandedKeys };
+        if (expanded) {
+            delete nextExpandedKeys[node.key];
+            onNodeCollapse === null || onNodeCollapse === void 0 ? void 0 : onNodeCollapse({ originalEvent, node });
+        }
+        else {
+            nextExpandedKeys[node.key] = true;
+            onNodeExpand === null || onNodeExpand === void 0 ? void 0 : onNodeExpand({ originalEvent, node });
+        }
+        setExpandedKeys(nextExpandedKeys);
+    }, [expandedKeys, onNodeCollapse, onNodeExpand, setExpandedKeys]);
+    const toggleCheckbox = React.useCallback((node, originalEvent) => {
+        const current = selectionKeys[node.key];
+        const checked = isCheckboxState(current) && current.checked;
+        const nextSelection = { ...selectionKeys };
+        setNodeAndDescendantsChecked(node, !checked, nextSelection);
+        const reconciledSelection = reconcileCheckboxSelection(value, nextSelection);
+        setSelectionKeys(reconciledSelection);
+        if (checked) {
+            onNodeUnselect === null || onNodeUnselect === void 0 ? void 0 : onNodeUnselect({ originalEvent, node });
+        }
+        else {
+            onNodeSelect === null || onNodeSelect === void 0 ? void 0 : onNodeSelect({ originalEvent, node });
+        }
+    }, [onNodeSelect, onNodeUnselect, selectionKeys, setSelectionKeys, value]);
+    const selectNode = React.useCallback((node, originalEvent) => {
+        if (!selectionMode || node.selectable === false)
+            return;
+        if (selectionMode === "checkbox") {
+            toggleCheckbox(node, originalEvent);
+            return;
+        }
+        const selected = selectionKeys[node.key] === true;
+        let nextSelection;
+        if (selectionMode === "single") {
+            nextSelection = selected ? {} : { [node.key]: true };
+        }
+        else if (metaKeySelection) {
+            const metaKey = originalEvent.metaKey || originalEvent.ctrlKey;
+            nextSelection = metaKey ? { ...selectionKeys } : {};
+            if (selected && metaKey) {
+                delete nextSelection[node.key];
+            }
+            else {
+                nextSelection[node.key] = true;
+            }
+        }
+        else {
+            nextSelection = { ...selectionKeys };
+            if (selected)
+                delete nextSelection[node.key];
+            else
+                nextSelection[node.key] = true;
+        }
+        setSelectionKeys(nextSelection);
+        if (nextSelection[node.key] === true) {
+            onNodeSelect === null || onNodeSelect === void 0 ? void 0 : onNodeSelect({ originalEvent, node });
+        }
+        else {
+            onNodeUnselect === null || onNodeUnselect === void 0 ? void 0 : onNodeUnselect({ originalEvent, node });
+        }
+    }, [
+        metaKeySelection,
+        onNodeSelect,
+        onNodeUnselect,
+        selectionKeys,
+        selectionMode,
+        setSelectionKeys,
+        toggleCheckbox,
+    ]);
+    const handleKeyDown = React.useCallback((event, node) => {
+        var _a, _b;
+        if (event.currentTarget !== event.target)
+            return;
+        const index = visibleNodes.findIndex((item) => item.node.key === node.key);
+        const item = visibleNodes[index];
+        const expanded = expandedKeys[node.key] === true;
+        const hasChildren = node.leaf === false || Boolean((_a = node.children) === null || _a === void 0 ? void 0 : _a.length);
+        switch (event.key) {
+            case "ArrowDown":
+                if (visibleNodes[index + 1])
+                    focusNode(visibleNodes[index + 1].node.key);
+                break;
+            case "ArrowUp":
+                if (visibleNodes[index - 1])
+                    focusNode(visibleNodes[index - 1].node.key);
+                break;
+            case "ArrowRight":
+                if (hasChildren && !expanded)
+                    toggleNode(node, event);
+                else if (expanded && ((_b = node.children) === null || _b === void 0 ? void 0 : _b[0]))
+                    focusNode(node.children[0].key);
+                break;
+            case "ArrowLeft":
+                if (hasChildren && expanded)
+                    toggleNode(node, event);
+                else if (item === null || item === void 0 ? void 0 : item.parentKey)
+                    focusNode(item.parentKey);
+                break;
+            case "Home":
+                if (visibleNodes[0])
+                    focusNode(visibleNodes[0].node.key);
+                break;
+            case "End":
+                if (visibleNodes.at(-1))
+                    focusNode(visibleNodes.at(-1).node.key);
+                break;
+            case "Enter":
+            case " ":
+                selectNode(node, event);
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+    }, [expandedKeys, focusNode, selectNode, toggleNode, visibleNodes]);
+    const canDrop = React.useCallback((dropNode, position) => {
+        if (!droppableNodes || !activeTreeDrag)
+            return false;
+        if (!hasCommonScope(activeTreeDrag.scope, droppableScope))
+            return false;
+        if ((dropNode === null || dropNode === void 0 ? void 0 : dropNode.key) === activeTreeDrag.node.key)
+            return false;
+        if (dropNode && nodeContains(activeTreeDrag.node, dropNode.key))
+            return false;
+        if (position === 0 && (dropNode === null || dropNode === void 0 ? void 0 : dropNode.droppable) === false)
+            return false;
+        return true;
+    }, [droppableNodes, droppableScope]);
+    const applyDrop = React.useCallback((event, dropNode, position, index) => {
+        if (!activeTreeDrag || !canDrop(dropNode, position))
+            return;
+        const drag = activeTreeDrag;
+        const sameTree = drag.sourceTreeId === treeId;
+        const sourceWithoutNode = removeNode(drag.sourceValue, drag.node.key);
+        const targetWithoutNode = sameTree
+            ? sourceWithoutNode
+            : removeNode(value, drag.node.key);
+        const nextValue = dropNode
+            ? insertNode(targetWithoutNode, dropNode.key, drag.node, position)
+            : [...targetWithoutNode, drag.node];
+        let accepted = false;
+        const accept = () => {
+            if (accepted)
+                return;
+            accepted = true;
+            if (!sameTree)
+                drag.updateSource(sourceWithoutNode);
+            setValue(nextValue);
+            activeTreeDrag = null;
+            setDropTarget(null);
+        };
+        const dropEvent = {
+            originalEvent: event,
+            value: nextValue,
+            dragNode: drag.node,
+            dropNode,
+            dropPosition: position,
+            index,
+            accept,
+        };
+        if (validateDrop) {
+            onNodeDrop === null || onNodeDrop === void 0 ? void 0 : onNodeDrop(dropEvent);
+        }
+        else {
+            accept();
+            onNodeDrop === null || onNodeDrop === void 0 ? void 0 : onNodeDrop(dropEvent);
+        }
+    }, [canDrop, onNodeDrop, setValue, treeId, validateDrop, value]);
+    const stateOptions = {
+        value,
+        expandedKeys,
+        selectionKeys,
+        filterValue,
+    };
+    const renderNodes = (nodes, level = 1) => {
+        const isRoot = level === 1;
+        return (React.createElement("ul", { "data-slot": isRoot ? "tree-list" : "tree-node-group", role: isRoot ? "tree" : "group", "aria-label": isRoot ? (ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : ariaLabelAttribute) : undefined, "aria-labelledby": isRoot ? (ariaLabelledby !== null && ariaLabelledby !== void 0 ? ariaLabelledby : ariaLabelledbyAttribute) : undefined, "aria-multiselectable": isRoot &&
+                (selectionMode === "multiple" || selectionMode === "checkbox")
+                ? true
+                : undefined, className: clx("m-0 list-none p-0", isRoot
+                ? classNames === null || classNames === void 0 ? void 0 : classNames.tree
+                : "ms-5 border-s border-ui-border-base ps-1", !isRoot && (classNames === null || classNames === void 0 ? void 0 : classNames.group)) }, nodes.map((node, index) => {
+            var _a, _b, _c, _d;
+            const hasLoadedChildren = Boolean((_a = node.children) === null || _a === void 0 ? void 0 : _a.length);
+            const leaf = node.leaf === false ? false : !hasLoadedChildren;
+            const expanded = filterActive
+                ? hasLoadedChildren
+                : expandedKeys[node.key] === true;
+            const selection = selectionKeys[node.key];
+            const selected = selection === true;
+            const checked = isCheckboxState(selection) && selection.checked;
+            const partialChecked = isCheckboxState(selection) && selection.partialChecked;
+            const highlighted = selected ||
+                (selectionMode === "checkbox" && highlightOnSelect && checked);
+            const renderOptions = {
+                node,
+                expanded,
+                selected,
+                checked,
+                partialChecked,
+                leaf,
+            };
+            const template = node.type ? nodeTemplates === null || nodeTemplates === void 0 ? void 0 : nodeTemplates[node.type] : undefined;
+            const dropPosition = (dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.key) === node.key ? dropTarget.position : null;
+            return (React.createElement("li", { key: node.key, ref: (element) => {
+                    if (element)
+                        nodeRefs.current.set(node.key, element);
+                    else
+                        nodeRefs.current.delete(node.key);
+                }, "data-slot": "tree-node", "data-key": node.key, "data-selected": selected || checked ? "true" : undefined, "data-expanded": expanded ? "true" : undefined, role: "treeitem", "aria-label": getNodeLabel(node), "aria-selected": selectionMode === "single" || selectionMode === "multiple"
+                    ? selected
+                    : undefined, "aria-checked": selectionMode === "checkbox"
+                    ? partialChecked
+                        ? "mixed"
+                        : checked
+                    : undefined, "aria-expanded": !leaf ? expanded : undefined, "aria-level": level, "aria-posinset": index + 1, "aria-setsize": nodes.length, tabIndex: (focusedKey !== null && focusedKey !== void 0 ? focusedKey : (_b = visibleNodes[0]) === null || _b === void 0 ? void 0 : _b.node.key) === node.key
+                    ? 0
+                    : -1, className: clx("relative outline-none focus-visible:[&>[data-slot=tree-node-content]]:shadow-borders-focus", node.className, classNames === null || classNames === void 0 ? void 0 : classNames.node), onFocus: () => setFocusedKey(node.key), onKeyDown: (event) => handleKeyDown(event, node) },
+                dropPosition === -1 && (React.createElement("div", { "data-slot": "tree-drop-indicator", "aria-hidden": "true", className: clx("h-0.5 rounded-full bg-ui-border-interactive", classNames === null || classNames === void 0 ? void 0 : classNames.dropIndicator) })),
+                React.createElement("div", { "data-slot": "tree-node-content", "data-drop-target": dropPosition === 0 ? "true" : undefined, className: clx("txt-compact-small flex min-h-8 select-none items-center gap-1.5 rounded-md px-1.5 py-1 text-ui-fg-base outline-none transition-fg", selectionMode && node.selectable !== false
+                        ? "cursor-pointer hover:bg-ui-bg-base-hover"
+                        : "cursor-default", highlighted && "bg-ui-bg-component-hover", dropPosition === 0 &&
+                        "bg-ui-bg-component-hover shadow-borders-interactive-with-active", classNames === null || classNames === void 0 ? void 0 : classNames.nodeContent), style: node.style, draggable: draggableNodes && node.draggable !== false, onClick: (event) => {
+                        const target = event.target;
+                        if (target.closest("button, a, input, select, textarea, [data-tree-interactive]")) {
+                            return;
+                        }
+                        selectNode(node, event);
+                    }, onContextMenu: (originalEvent) => onNodeContextMenu === null || onNodeContextMenu === void 0 ? void 0 : onNodeContextMenu({ originalEvent, node }), onDragStart: (event) => {
+                        if (!draggableNodes || node.draggable === false) {
+                            event.preventDefault();
+                            return;
+                        }
+                        event.dataTransfer.effectAllowed = "move";
+                        event.dataTransfer.setData("text/plain", node.key);
+                        activeTreeDrag = {
+                            node,
+                            sourceTreeId: treeId,
+                            sourceValue: value,
+                            scope: draggableScope,
+                            updateSource: setValue,
+                        };
+                    }, onDragOver: (event) => {
+                        const rect = event.currentTarget.getBoundingClientRect();
+                        const pointerY = event.clientY - rect.top;
+                        const position = pointerY < rect.height * 0.25
+                            ? -1
+                            : pointerY > rect.height * 0.75
+                                ? 1
+                                : 0;
+                        if (canDrop(node, position)) {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            event.dataTransfer.dropEffect = "move";
+                            setDropTarget({ key: node.key, position });
+                        }
+                    }, onDragEnter: (originalEvent) => {
+                        if (!activeTreeDrag || !canDrop(node, 0))
+                            return;
+                        onNodeDragEnter === null || onNodeDragEnter === void 0 ? void 0 : onNodeDragEnter({
+                            originalEvent,
+                            value,
+                            node,
+                            dragNode: activeTreeDrag.node,
+                            dragNodeScope: activeTreeDrag.scope,
+                        });
+                    }, onDragLeave: (originalEvent) => {
+                        if (!activeTreeDrag)
+                            return;
+                        onNodeDragLeave === null || onNodeDragLeave === void 0 ? void 0 : onNodeDragLeave({
+                            originalEvent,
+                            value,
+                            node,
+                            dragNode: activeTreeDrag.node,
+                            dragNodeScope: activeTreeDrag.scope,
+                        });
+                    }, onDrop: (event) => {
+                        if (!dropTarget || dropTarget.key !== node.key)
+                            return;
+                        event.preventDefault();
+                        event.stopPropagation();
+                        applyDrop(event, node, dropTarget.position, index);
+                    }, onDragEnd: () => {
+                        activeTreeDrag = null;
+                        setDropTarget(null);
+                    } },
+                    !leaf ? (React.createElement("button", { type: "button", "data-slot": "tree-node-toggle", tabIndex: -1, "aria-label": `${expanded ? "Collapse" : "Expand"} ${getNodeLabel(node)}`, className: clx("flex size-5 shrink-0 items-center justify-center rounded-sm text-ui-fg-muted outline-none transition-fg hover:bg-ui-bg-base-hover hover:text-ui-fg-base focus-visible:shadow-borders-focus", classNames === null || classNames === void 0 ? void 0 : classNames.toggle), onClick: (event) => {
+                            event.stopPropagation();
+                            toggleNode(node, event);
+                        } }, node.loading && loadingMode === "icon" ? (React.createElement(Spinner, { className: "size-3.5" })) : renderToggleIcon ? (renderToggleIcon(renderOptions)) : expanded ? (((_c = node.expandedIcon) !== null && _c !== void 0 ? _c : React.createElement(ChevronDownMini, null))) : (((_d = node.collapsedIcon) !== null && _d !== void 0 ? _d : (React.createElement(ChevronRightMini, { className: "rtl:rotate-180" })))))) : (React.createElement("span", { "aria-hidden": "true", className: "size-5 shrink-0" })),
+                    selectionMode === "checkbox" &&
+                        node.selectable !== false && (React.createElement("span", { "data-slot": "tree-node-checkbox", className: clx("flex shrink-0", classNames === null || classNames === void 0 ? void 0 : classNames.checkbox), onClick: (event) => {
+                            event.stopPropagation();
+                            toggleCheckbox(node, event);
+                        } }, renderCheckbox ? (renderCheckbox(renderOptions)) : (React.createElement(Checkbox, { "aria-hidden": "true", tabIndex: -1, checked: partialChecked ? "indeterminate" : checked, onCheckedChange: () => undefined })))),
+                    (renderNodeIcon || node.icon) && (React.createElement("span", { "data-slot": "tree-node-icon", "aria-hidden": "true", className: clx("flex size-4 shrink-0 items-center justify-center text-ui-fg-muted [&>svg]:size-4", classNames === null || classNames === void 0 ? void 0 : classNames.icon) }, renderNodeIcon
+                        ? renderNodeIcon(renderOptions)
+                        : node.icon)),
+                    React.createElement("span", { "data-slot": "tree-node-label", className: clx("min-w-0 flex-1", classNames === null || classNames === void 0 ? void 0 : classNames.label) }, template
+                        ? template(renderOptions)
+                        : renderNode
+                            ? renderNode(renderOptions)
+                            : getNodeLabel(node))),
+                dropPosition === 1 && (React.createElement("div", { "data-slot": "tree-drop-indicator", "aria-hidden": "true", className: clx("h-0.5 rounded-full bg-ui-border-interactive", classNames === null || classNames === void 0 ? void 0 : classNames.dropIndicator) })),
+                hasLoadedChildren &&
+                    expanded &&
+                    renderNodes(node.children, level + 1)));
+        })));
+    };
+    const resolvedHeight = scrollHeight === "flex"
+        ? "100%"
+        : typeof scrollHeight === "number"
+            ? `${scrollHeight}px`
+            : scrollHeight;
+    return (React.createElement("div", { ref: ref, "data-slot": "tree", "data-loading": loading ? "true" : undefined, "aria-busy": loading, className: clx("relative rounded-lg border border-ui-border-base bg-ui-bg-base p-2 text-ui-fg-base", scrollHeight === "flex" && "flex h-full flex-col", classNames === null || classNames === void 0 ? void 0 : classNames.root, className), style: style, onDragOver: (event) => {
+            if (canDrop(null, 0)) {
+                event.preventDefault();
+                event.dataTransfer.dropEffect = "move";
+            }
+        }, onDragEnter: (originalEvent) => {
+            if (!activeTreeDrag || !canDrop(null, 0))
+                return;
+            onTreeDragEnter === null || onTreeDragEnter === void 0 ? void 0 : onTreeDragEnter({
+                originalEvent,
+                value,
+                node: activeTreeDrag.node,
+                dragNode: activeTreeDrag.node,
+                dragNodeScope: activeTreeDrag.scope,
+            });
+        }, onDragLeave: (originalEvent) => {
+            if (!activeTreeDrag)
+                return;
+            const relatedTarget = originalEvent.relatedTarget;
+            if (relatedTarget &&
+                originalEvent.currentTarget.contains(relatedTarget))
+                return;
+            onTreeDragLeave === null || onTreeDragLeave === void 0 ? void 0 : onTreeDragLeave({
+                originalEvent,
+                value,
+                node: activeTreeDrag.node,
+                dragNode: activeTreeDrag.node,
+                dragNodeScope: activeTreeDrag.scope,
+            });
+        }, onDrop: (event) => {
+            if (!canDrop(null, 0))
+                return;
+            event.preventDefault();
+            applyDrop(event, null, 0, value.length);
+        }, ...props },
+        loading && loadingMode === "mask" && (React.createElement("div", { "data-slot": "tree-loading-mask", className: clx("absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-ui-bg-base/80", classNames === null || classNames === void 0 ? void 0 : classNames.mask) }, loadingIcon !== null && loadingIcon !== void 0 ? loadingIcon : (React.createElement(Spinner, { className: clx("size-6", classNames === null || classNames === void 0 ? void 0 : classNames.loadingIcon) })))),
+        filter && (React.createElement("div", { "data-slot": "tree-filter", className: clx("px-1 pb-2", classNames === null || classNames === void 0 ? void 0 : classNames.filter) },
+            React.createElement(Input, { type: "search", value: filterValue, placeholder: filterPlaceholder, "aria-label": filterPlaceholder, onChange: (originalEvent) => {
+                    const nextFilterValue = originalEvent.target.value;
+                    setFilterValue(nextFilterValue);
+                    const filteredNodes = nextFilterValue.trim()
+                        ? filterTreeNodes(value, nextFilterValue, filterBy, filterMode, filterLocale)
+                        : value;
+                    onFilter === null || onFilter === void 0 ? void 0 : onFilter({
+                        originalEvent,
+                        value: nextFilterValue,
+                        filteredNodes,
+                    });
+                }, onKeyDown: (event) => {
+                    if (event.key === "Enter")
+                        event.preventDefault();
+                } }))),
+        header && (React.createElement("div", { "data-slot": "tree-header" }, renderSlot(header, stateOptions))),
+        React.createElement("div", { "data-slot": "tree-viewport", className: clx("relative overflow-auto", scrollHeight === "flex" && "min-h-0 flex-1", classNames === null || classNames === void 0 ? void 0 : classNames.viewport), style: {
+                maxHeight: resolvedHeight,
+                height: scrollHeight === "flex" ? resolvedHeight : undefined,
+            } }, filteredValue.length > 0 ? (renderNodes(filteredValue)) : (React.createElement("div", { "data-slot": "tree-empty", className: clx("txt-compact-small px-2 py-6 text-center text-ui-fg-muted", classNames === null || classNames === void 0 ? void 0 : classNames.empty) }, empty))),
+        footer && (React.createElement("div", { "data-slot": "tree-footer" }, renderSlot(footer, stateOptions)))));
+});
+Tree.displayName = "Tree";
+export { Tree };
+//# sourceMappingURL=tree.js.map