@uipath/apollo-wind 0.10.0 → 0.11.0-pr295.af4e744

package/dist/components/ui/tree-view.js

@@ -0,0 +1,1083 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "./button.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./collapsible.js";
+import { Box, ChevronRight, Folder, Info, MoreHorizontal, Search, X } from "lucide-react";
+import { AnimatePresence, motion } from "framer-motion";
+import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "./context-menu.js";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "./hover-card.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./dropdown-menu.js";
+import { Badge } from "./badge.js";
+import { cn } from "../../lib/index.js";
+import { Input } from "./input.js";
+import { Checkbox } from "./checkbox.js";
+const buildItemMap = (items)=>{
+    const map = new Map();
+    const processItem = (item)=>{
+        map.set(item.id, item);
+        item.children?.forEach(processItem);
+    };
+    items.forEach(processItem);
+    return map;
+};
+const getCheckState = (item, itemMap)=>{
+    const originalItem = itemMap.get(item.id);
+    if (!originalItem) return "unchecked";
+    if (!originalItem.children || 0 === originalItem.children.length) return originalItem.checked ? "checked" : "unchecked";
+    let checkedCount = 0;
+    let indeterminateCount = 0;
+    originalItem.children.forEach((child)=>{
+        const childState = getCheckState(child, itemMap);
+        if ("checked" === childState) checkedCount++;
+        if ("indeterminate" === childState) indeterminateCount++;
+    });
+    const totalChildren = originalItem.children.length;
+    if (checkedCount === totalChildren) return "checked";
+    if (checkedCount > 0 || indeterminateCount > 0) return "indeterminate";
+    return "unchecked";
+};
+const defaultIconMap = {
+    file: /*#__PURE__*/ jsx(Box, {
+        className: "h-4 w-4 text-red-600"
+    }),
+    folder: /*#__PURE__*/ jsx(Folder, {
+        className: "h-4 w-4 text-primary/80"
+    })
+};
+function TreeItem({ item, depth = 0, selectedIds, lastSelectedId, onSelect, expandedIds, onToggleExpand, selectionMode, getIcon, onAction, onAccessChange, allItems, showAccessRights, showSelectionCheckboxes, itemMap, iconMap = defaultIconMap, menuItems, getSelectedItems }) {
+    const isOpen = expandedIds.has(item.id);
+    const isSelected = selectedIds.has(item.id);
+    const isDisabled = true === item.disabled;
+    const itemRef = useRef(null);
+    const [selectionStyle, setSelectionStyle] = useState("");
+    const getVisibleItems = useCallback((items)=>{
+        let visibleItems = [];
+        items.forEach((item)=>{
+            visibleItems.push(item);
+            if (item.children && expandedIds.has(item.id)) visibleItems = [
+                ...visibleItems,
+                ...getVisibleItems(item.children)
+            ];
+        });
+        return visibleItems;
+    }, [
+        expandedIds
+    ]);
+    useEffect(()=>{
+        if (!isSelected) return void setSelectionStyle("");
+        const visibleItems = getVisibleItems(allItems);
+        const currentIndex = visibleItems.findIndex((i)=>i.id === item.id);
+        const prevItem = visibleItems[currentIndex - 1];
+        const nextItem = visibleItems[currentIndex + 1];
+        const isPrevSelected = prevItem && selectedIds.has(prevItem.id);
+        const isNextSelected = nextItem && selectedIds.has(nextItem.id);
+        const roundTop = !isPrevSelected;
+        const roundBottom = !isNextSelected;
+        setSelectionStyle(`${roundTop ? "rounded-t-md" : ""} ${roundBottom ? "rounded-b-md" : ""}`);
+    }, [
+        isSelected,
+        selectedIds,
+        expandedIds,
+        item.id,
+        getVisibleItems,
+        allItems
+    ]);
+    const handleClick = (e)=>{
+        e.stopPropagation();
+        e.preventDefault();
+        if (isDisabled || "none" === selectionMode) return;
+        let newSelection = new Set(selectedIds);
+        if (!itemRef.current) return;
+        if ("single" === selectionMode) {
+            newSelection = new Set([
+                item.id
+            ]);
+            lastSelectedId.current = item.id;
+            onSelect(newSelection);
+            if (item.children && isSelected) onToggleExpand(item.id, !isOpen);
+            return;
+        }
+        if (e.shiftKey && null !== lastSelectedId.current) {
+            const items = Array.from(document.querySelectorAll("[data-tree-item]"));
+            const lastIndex = items.findIndex((el)=>el.getAttribute("data-id") === lastSelectedId.current);
+            const currentIndex = items.findIndex((el)=>el === itemRef.current);
+            const [start, end] = [
+                Math.min(lastIndex, currentIndex),
+                Math.max(lastIndex, currentIndex)
+            ];
+            items.slice(start, end + 1).forEach((el)=>{
+                const id = el.getAttribute("data-id");
+                const isDisabledEl = "true" === el.getAttribute("data-disabled");
+                const parentFolderClosed = el.closest('[data-folder-closed="true"]');
+                const isClosedFolder = "true" === el.getAttribute("data-folder-closed");
+                if (id && !isDisabledEl && (isClosedFolder || !parentFolderClosed)) newSelection.add(id);
+            });
+        } else if (e.ctrlKey || e.metaKey) if (newSelection.has(item.id)) newSelection.delete(item.id);
+        else newSelection.add(item.id);
+        else {
+            newSelection = new Set([
+                item.id
+            ]);
+            if (item.children && isSelected) onToggleExpand(item.id, !isOpen);
+        }
+        lastSelectedId.current = item.id;
+        onSelect(newSelection);
+    };
+    const handleAccessClick = (e)=>{
+        e.stopPropagation();
+        if (onAccessChange) {
+            const currentState = getCheckState(item, itemMap);
+            const newChecked = "checked" !== currentState;
+            onAccessChange(item, newChecked);
+        }
+    };
+    const renderIcon = ()=>{
+        if (getIcon) return getIcon(item, depth);
+        return iconMap[item.type] || iconMap.folder || defaultIconMap.folder;
+    };
+    const getItemPath = (item, items)=>{
+        const path = [
+            item.name
+        ];
+        const findParent = (currentItem, allItems)=>{
+            for (const potentialParent of allItems){
+                if (potentialParent.children?.some((child)=>child.id === currentItem.id)) {
+                    path.unshift(potentialParent.name);
+                    findParent(potentialParent, allItems);
+                    break;
+                }
+                if (potentialParent.children) findParent(currentItem, potentialParent.children);
+            }
+        };
+        findParent(item, items);
+        return path.join(" → ");
+    };
+    const getSelectedChildrenCount = (item)=>{
+        let count = 0;
+        if (!item.children) return 0;
+        item.children.forEach((child)=>{
+            if (selectedIds.has(child.id)) count++;
+            if (child.children) count += getSelectedChildrenCount(child);
+        });
+        return count;
+    };
+    const selectedCount = item.children && !isOpen && getSelectedChildrenCount(item) || null;
+    return /*#__PURE__*/ jsxs(ContextMenu, {
+        children: [
+            /*#__PURE__*/ jsx(ContextMenuTrigger, {
+                children: /*#__PURE__*/ jsxs("div", {
+                    children: [
+                        /*#__PURE__*/ jsx("div", {
+                            ref: itemRef,
+                            role: "treeitem",
+                            "aria-expanded": item.children ? isOpen : void 0,
+                            "aria-selected": isSelected && "none" !== selectionMode,
+                            "aria-disabled": isDisabled,
+                            tabIndex: 0,
+                            "data-tree-item": true,
+                            "data-id": item.id,
+                            "data-depth": depth,
+                            "data-folder-closed": item.children && !isOpen,
+                            "data-disabled": isDisabled,
+                            className: `select-none rounded-md px-1 ${isDisabled ? "cursor-not-allowed opacity-50 text-muted-foreground" : `cursor-pointer ${isSelected && "none" !== selectionMode ? `bg-accent ${selectionStyle}` : "text-foreground hover:bg-muted/50"}`}`,
+                            style: {
+                                paddingLeft: `${20 * depth}px`
+                            },
+                            onClick: handleClick,
+                            onKeyDown: (e)=>{
+                                if ('Enter' === e.key || ' ' === e.key) {
+                                    e.preventDefault();
+                                    handleClick(e);
+                                }
+                            },
+                            children: /*#__PURE__*/ jsx("div", {
+                                className: "flex items-center h-8 min-w-0",
+                                children: item.children ? /*#__PURE__*/ jsxs("div", {
+                                    className: "flex items-center gap-2 flex-1 min-w-0 group",
+                                    children: [
+                                        /*#__PURE__*/ jsx(Collapsible, {
+                                            open: isOpen,
+                                            onOpenChange: (open)=>onToggleExpand(item.id, open),
+                                            children: /*#__PURE__*/ jsx(CollapsibleTrigger, {
+                                                asChild: true,
+                                                onClick: (e)=>e.stopPropagation(),
+                                                children: /*#__PURE__*/ jsx(Button, {
+                                                    variant: "ghost",
+                                                    size: "icon",
+                                                    className: "h-6 w-6",
+                                                    children: /*#__PURE__*/ jsx(motion.div, {
+                                                        initial: false,
+                                                        animate: {
+                                                            rotate: isOpen ? 90 : 0
+                                                        },
+                                                        transition: {
+                                                            duration: 0.1
+                                                        },
+                                                        children: /*#__PURE__*/ jsx(ChevronRight, {
+                                                            className: "h-4 w-4"
+                                                        })
+                                                    })
+                                                })
+                                            })
+                                        }),
+                                        showAccessRights && /*#__PURE__*/ jsxs("button", {
+                                            type: "button",
+                                            className: "relative flex items-center justify-center w-4 h-4 cursor-pointer hover:opacity-80 bg-transparent border-0 p-0",
+                                            onClick: handleAccessClick,
+                                            "aria-label": `Toggle access for ${item.name}`,
+                                            children: [
+                                                "checked" === getCheckState(item, itemMap) && /*#__PURE__*/ jsx("div", {
+                                                    className: "w-4 h-4 border rounded bg-primary border-primary flex items-center justify-center",
+                                                    children: /*#__PURE__*/ jsx("svg", {
+                                                        className: "h-3 w-3 text-primary-foreground",
+                                                        fill: "none",
+                                                        viewBox: "0 0 24 24",
+                                                        stroke: "currentColor",
+                                                        children: /*#__PURE__*/ jsx("path", {
+                                                            strokeLinecap: "round",
+                                                            strokeLinejoin: "round",
+                                                            strokeWidth: 2,
+                                                            d: "M5 13l4 4L19 7"
+                                                        })
+                                                    })
+                                                }),
+                                                "unchecked" === getCheckState(item, itemMap) && /*#__PURE__*/ jsx("div", {
+                                                    className: "w-4 h-4 border rounded border-input"
+                                                }),
+                                                "indeterminate" === getCheckState(item, itemMap) && /*#__PURE__*/ jsx("div", {
+                                                    className: "w-4 h-4 border rounded bg-primary border-primary flex items-center justify-center",
+                                                    children: /*#__PURE__*/ jsx("div", {
+                                                        className: "h-0.5 w-2 bg-primary-foreground"
+                                                    })
+                                                })
+                                            ]
+                                        }),
+                                        renderIcon(),
+                                        /*#__PURE__*/ jsx("span", {
+                                            className: "flex-1 min-w-0 truncate",
+                                            children: item.name
+                                        }),
+                                        item.badge && /*#__PURE__*/ jsx("span", {
+                                            className: "shrink-0 ml-1",
+                                            children: item.badge
+                                        }),
+                                        item.meta && /*#__PURE__*/ jsx("span", {
+                                            className: "text-xs text-muted-foreground shrink-0 ml-1 truncate max-w-[6rem]",
+                                            children: item.meta
+                                        }),
+                                        null !== selectedCount && selectedCount > 0 && /*#__PURE__*/ jsxs(Badge, {
+                                            variant: "secondary",
+                                            className: "shrink-0 mr-1 bg-blue-100 hover:bg-blue-100",
+                                            children: [
+                                                selectedCount,
+                                                " selected"
+                                            ]
+                                        }),
+                                        (item.actions?.length ?? 0) > 0 ? /*#__PURE__*/ jsxs(DropdownMenu, {
+                                            children: [
+                                                /*#__PURE__*/ jsx(DropdownMenuTrigger, {
+                                                    asChild: true,
+                                                    children: /*#__PURE__*/ jsx(Button, {
+                                                        variant: "ghost",
+                                                        size: "icon",
+                                                        className: "h-6 w-6 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity",
+                                                        onClick: (e)=>e.stopPropagation(),
+                                                        children: /*#__PURE__*/ jsx(MoreHorizontal, {
+                                                            className: "h-4 w-4 text-muted-foreground"
+                                                        })
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ jsxs(DropdownMenuContent, {
+                                                    align: "end",
+                                                    className: "w-48",
+                                                    children: [
+                                                        item.actions?.map((action)=>/*#__PURE__*/ jsxs(DropdownMenuItem, {
+                                                                disabled: isDisabled,
+                                                                onClick: (e)=>{
+                                                                    e.stopPropagation();
+                                                                    action.onClick(item);
+                                                                },
+                                                                children: [
+                                                                    action.icon,
+                                                                    action.label ?? action.id
+                                                                ]
+                                                            }, action.id)),
+                                                        /*#__PURE__*/ jsxs(DropdownMenuSub, {
+                                                            children: [
+                                                                /*#__PURE__*/ jsx(DropdownMenuSubTrigger, {
+                                                                    children: "View details"
+                                                                }),
+                                                                /*#__PURE__*/ jsx(DropdownMenuSubContent, {
+                                                                    className: "w-64 p-3",
+                                                                    children: /*#__PURE__*/ jsxs("div", {
+                                                                        className: "space-y-2 text-sm",
+                                                                        children: [
+                                                                            /*#__PURE__*/ jsx("h4", {
+                                                                                className: "font-semibold",
+                                                                                children: item.name
+                                                                            }),
+                                                                            /*#__PURE__*/ jsxs("div", {
+                                                                                className: "text-muted-foreground space-y-1",
+                                                                                children: [
+                                                                                    /*#__PURE__*/ jsxs("div", {
+                                                                                        children: [
+                                                                                            /*#__PURE__*/ jsx("span", {
+                                                                                                className: "font-medium",
+                                                                                                children: "Type:"
+                                                                                            }),
+                                                                                            " ",
+                                                                                            item.type.charAt(0).toUpperCase() + item.type.slice(1).replace("_", " ")
+                                                                                        ]
+                                                                                    }),
+                                                                                    /*#__PURE__*/ jsxs("div", {
+                                                                                        children: [
+                                                                                            /*#__PURE__*/ jsx("span", {
+                                                                                                className: "font-medium",
+                                                                                                children: "ID:"
+                                                                                            }),
+                                                                                            " ",
+                                                                                            item.id
+                                                                                        ]
+                                                                                    }),
+                                                                                    /*#__PURE__*/ jsxs("div", {
+                                                                                        children: [
+                                                                                            /*#__PURE__*/ jsx("span", {
+                                                                                                className: "font-medium",
+                                                                                                children: "Location:"
+                                                                                            }),
+                                                                                            " ",
+                                                                                            getItemPath(item, allItems)
+                                                                                        ]
+                                                                                    }),
+                                                                                    /*#__PURE__*/ jsxs("div", {
+                                                                                        children: [
+                                                                                            /*#__PURE__*/ jsx("span", {
+                                                                                                className: "font-medium",
+                                                                                                children: "Items:"
+                                                                                            }),
+                                                                                            " ",
+                                                                                            item.children?.length ?? 0,
+                                                                                            " direct items"
+                                                                                        ]
+                                                                                    })
+                                                                                ]
+                                                                            })
+                                                                        ]
+                                                                    })
+                                                                })
+                                                            ]
+                                                        })
+                                                    ]
+                                                })
+                                            ]
+                                        }) : /*#__PURE__*/ jsxs(HoverCard, {
+                                            children: [
+                                                /*#__PURE__*/ jsx(HoverCardTrigger, {
+                                                    asChild: true,
+                                                    children: /*#__PURE__*/ jsx(Button, {
+                                                        variant: "ghost",
+                                                        size: "icon",
+                                                        className: "h-6 w-6 shrink-0 p-0 opacity-0 group-hover:opacity-100 transition-opacity",
+                                                        onClick: (e)=>e.stopPropagation(),
+                                                        children: /*#__PURE__*/ jsx(Info, {
+                                                            className: "h-4 w-4 text-muted-foreground"
+                                                        })
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ jsx(HoverCardContent, {
+                                                    className: "w-80",
+                                                    children: /*#__PURE__*/ jsxs("div", {
+                                                        className: "space-y-2",
+                                                        children: [
+                                                            /*#__PURE__*/ jsx("h4", {
+                                                                className: "text-sm font-semibold",
+                                                                children: item.name
+                                                            }),
+                                                            /*#__PURE__*/ jsxs("div", {
+                                                                className: "text-sm text-muted-foreground space-y-1",
+                                                                children: [
+                                                                    /*#__PURE__*/ jsxs("div", {
+                                                                        children: [
+                                                                            /*#__PURE__*/ jsx("span", {
+                                                                                className: "font-medium",
+                                                                                children: "Type:"
+                                                                            }),
+                                                                            " ",
+                                                                            item.type.charAt(0).toUpperCase() + item.type.slice(1).replace("_", " ")
+                                                                        ]
+                                                                    }),
+                                                                    /*#__PURE__*/ jsxs("div", {
+                                                                        children: [
+                                                                            /*#__PURE__*/ jsx("span", {
+                                                                                className: "font-medium",
+                                                                                children: "ID:"
+                                                                            }),
+                                                                            " ",
+                                                                            item.id
+                                                                        ]
+                                                                    }),
+                                                                    /*#__PURE__*/ jsxs("div", {
+                                                                        children: [
+                                                                            /*#__PURE__*/ jsx("span", {
+                                                                                className: "font-medium",
+                                                                                children: "Location:"
+                                                                            }),
+                                                                            " ",
+                                                                            getItemPath(item, allItems)
+                                                                        ]
+                                                                    }),
+                                                                    /*#__PURE__*/ jsxs("div", {
+                                                                        children: [
+                                                                            /*#__PURE__*/ jsx("span", {
+                                                                                className: "font-medium",
+                                                                                children: "Items:"
+                                                                            }),
+                                                                            " ",
+                                                                            item.children?.length ?? 0,
+                                                                            " direct items"
+                                                                        ]
+                                                                    })
+                                                                ]
+                                                            })
+                                                        ]
+                                                    })
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                }) : /*#__PURE__*/ jsxs("div", {
+                                    className: "flex items-center gap-2 flex-1 min-w-0 pl-8 group",
+                                    children: [
+                                        showSelectionCheckboxes && !item.children && !isDisabled && /*#__PURE__*/ jsx(Checkbox, {
+                                            checked: isSelected,
+                                            onCheckedChange: (checked)=>{
+                                                if ("none" === selectionMode) return;
+                                                const newSelection = "single" === selectionMode ? new Set(checked ? [
+                                                    item.id
+                                                ] : []) : new Set(selectedIds);
+                                                if ("multiple" === selectionMode) if (checked) newSelection.add(item.id);
+                                                else newSelection.delete(item.id);
+                                                lastSelectedId.current = item.id;
+                                                onSelect(newSelection);
+                                            },
+                                            onClick: (e)=>e.stopPropagation(),
+                                            "aria-label": `Select ${item.name}`
+                                        }),
+                                        showAccessRights && /*#__PURE__*/ jsx("button", {
+                                            type: "button",
+                                            className: "relative flex items-center justify-center w-4 h-4 cursor-pointer hover:opacity-80 bg-transparent border-0 p-0",
+                                            onClick: handleAccessClick,
+                                            "aria-label": `Toggle access for ${item.name}`,
+                                            children: item.checked ? /*#__PURE__*/ jsx("div", {
+                                                className: "w-4 h-4 border rounded bg-primary border-primary flex items-center justify-center",
+                                                children: /*#__PURE__*/ jsx("svg", {
+                                                    className: "h-3 w-3 text-primary-foreground",
+                                                    fill: "none",
+                                                    viewBox: "0 0 24 24",
+                                                    stroke: "currentColor",
+                                                    children: /*#__PURE__*/ jsx("path", {
+                                                        strokeLinecap: "round",
+                                                        strokeLinejoin: "round",
+                                                        strokeWidth: 2,
+                                                        d: "M5 13l4 4L19 7"
+                                                    })
+                                                })
+                                            }) : /*#__PURE__*/ jsx("div", {
+                                                className: "w-4 h-4 border rounded border-input"
+                                            })
+                                        }),
+                                        renderIcon(),
+                                        /*#__PURE__*/ jsx("span", {
+                                            className: "flex-1 min-w-0 truncate",
+                                            children: item.name
+                                        }),
+                                        item.badge && /*#__PURE__*/ jsx("span", {
+                                            className: "shrink-0 ml-1",
+                                            children: item.badge
+                                        }),
+                                        item.meta && /*#__PURE__*/ jsx("span", {
+                                            className: "text-xs text-muted-foreground shrink-0 ml-1 truncate max-w-[6rem]",
+                                            children: item.meta
+                                        }),
+                                        (item.actions?.length ?? 0) > 0 ? /*#__PURE__*/ jsxs(DropdownMenu, {
+                                            children: [
+                                                /*#__PURE__*/ jsx(DropdownMenuTrigger, {
+                                                    asChild: true,
+                                                    children: /*#__PURE__*/ jsx(Button, {
+                                                        variant: "ghost",
+                                                        size: "icon",
+                                                        className: "h-6 w-6 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity",
+                                                        onClick: (e)=>e.stopPropagation(),
+                                                        children: /*#__PURE__*/ jsx(MoreHorizontal, {
+                                                            className: "h-4 w-4 text-muted-foreground"
+                                                        })
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ jsxs(DropdownMenuContent, {
+                                                    align: "end",
+                                                    className: "w-48",
+                                                    children: [
+                                                        item.actions?.map((action)=>/*#__PURE__*/ jsxs(DropdownMenuItem, {
+                                                                disabled: isDisabled,
+                                                                onClick: (e)=>{
+                                                                    e.stopPropagation();
+                                                                    action.onClick(item);
+                                                                },
+                                                                children: [
+                                                                    action.icon,
+                                                                    action.label ?? action.id
+                                                                ]
+                                                            }, action.id)),
+                                                        /*#__PURE__*/ jsxs(DropdownMenuSub, {
+                                                            children: [
+                                                                /*#__PURE__*/ jsx(DropdownMenuSubTrigger, {
+                                                                    children: "View details"
+                                                                }),
+                                                                /*#__PURE__*/ jsx(DropdownMenuSubContent, {
+                                                                    className: "w-64 p-3",
+                                                                    children: /*#__PURE__*/ jsxs("div", {
+                                                                        className: "space-y-2 text-sm",
+                                                                        children: [
+                                                                            /*#__PURE__*/ jsx("h4", {
+                                                                                className: "font-semibold",
+                                                                                children: item.name
+                                                                            }),
+                                                                            /*#__PURE__*/ jsxs("div", {
+                                                                                className: "text-muted-foreground space-y-1",
+                                                                                children: [
+                                                                                    /*#__PURE__*/ jsxs("div", {
+                                                                                        children: [
+                                                                                            /*#__PURE__*/ jsx("span", {
+                                                                                                className: "font-medium",
+                                                                                                children: "Type:"
+                                                                                            }),
+                                                                                            " ",
+                                                                                            item.type.charAt(0).toUpperCase() + item.type.slice(1).replace("_", " ")
+                                                                                        ]
+                                                                                    }),
+                                                                                    /*#__PURE__*/ jsxs("div", {
+                                                                                        children: [
+                                                                                            /*#__PURE__*/ jsx("span", {
+                                                                                                className: "font-medium",
+                                                                                                children: "ID:"
+                                                                                            }),
+                                                                                            " ",
+                                                                                            item.id
+                                                                                        ]
+                                                                                    }),
+                                                                                    /*#__PURE__*/ jsxs("div", {
+                                                                                        children: [
+                                                                                            /*#__PURE__*/ jsx("span", {
+                                                                                                className: "font-medium",
+                                                                                                children: "Location:"
+                                                                                            }),
+                                                                                            " ",
+                                                                                            getItemPath(item, allItems)
+                                                                                        ]
+                                                                                    })
+                                                                                ]
+                                                                            })
+                                                                        ]
+                                                                    })
+                                                                })
+                                                            ]
+                                                        })
+                                                    ]
+                                                })
+                                            ]
+                                        }) : /*#__PURE__*/ jsxs(HoverCard, {
+                                            children: [
+                                                /*#__PURE__*/ jsx(HoverCardTrigger, {
+                                                    asChild: true,
+                                                    children: /*#__PURE__*/ jsx(Button, {
+                                                        variant: "ghost",
+                                                        size: "icon",
+                                                        className: "h-6 w-6 shrink-0 p-0 opacity-0 group-hover:opacity-100 transition-opacity",
+                                                        onClick: (e)=>e.stopPropagation(),
+                                                        children: /*#__PURE__*/ jsx(Info, {
+                                                            className: "h-4 w-4 text-muted-foreground"
+                                                        })
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ jsx(HoverCardContent, {
+                                                    className: "w-80",
+                                                    children: /*#__PURE__*/ jsxs("div", {
+                                                        className: "space-y-2",
+                                                        children: [
+                                                            /*#__PURE__*/ jsx("h4", {
+                                                                className: "text-sm font-semibold",
+                                                                children: item.name
+                                                            }),
+                                                            /*#__PURE__*/ jsxs("div", {
+                                                                className: "text-sm text-muted-foreground space-y-1",
+                                                                children: [
+                                                                    /*#__PURE__*/ jsxs("div", {
+                                                                        children: [
+                                                                            /*#__PURE__*/ jsx("span", {
+                                                                                className: "font-medium",
+                                                                                children: "Type:"
+                                                                            }),
+                                                                            " ",
+                                                                            item.type.charAt(0).toUpperCase() + item.type.slice(1).replace("_", " ")
+                                                                        ]
+                                                                    }),
+                                                                    /*#__PURE__*/ jsxs("div", {
+                                                                        children: [
+                                                                            /*#__PURE__*/ jsx("span", {
+                                                                                className: "font-medium",
+                                                                                children: "ID:"
+                                                                            }),
+                                                                            " ",
+                                                                            item.id
+                                                                        ]
+                                                                    }),
+                                                                    /*#__PURE__*/ jsxs("div", {
+                                                                        children: [
+                                                                            /*#__PURE__*/ jsx("span", {
+                                                                                className: "font-medium",
+                                                                                children: "Location:"
+                                                                            }),
+                                                                            " ",
+                                                                            getItemPath(item, allItems)
+                                                                        ]
+                                                                    })
+                                                                ]
+                                                            })
+                                                        ]
+                                                    })
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            })
+                        }),
+                        item.children && /*#__PURE__*/ jsx(Collapsible, {
+                            open: isOpen,
+                            onOpenChange: (open)=>onToggleExpand(item.id, open),
+                            children: /*#__PURE__*/ jsx(AnimatePresence, {
+                                initial: false,
+                                children: isOpen && /*#__PURE__*/ jsx(CollapsibleContent, {
+                                    forceMount: true,
+                                    asChild: true,
+                                    children: /*#__PURE__*/ jsx(motion.div, {
+                                        initial: {
+                                            height: 0,
+                                            opacity: 0
+                                        },
+                                        animate: {
+                                            height: "auto",
+                                            opacity: 1
+                                        },
+                                        exit: {
+                                            height: 0,
+                                            opacity: 0
+                                        },
+                                        transition: {
+                                            duration: 0.05
+                                        },
+                                        children: item.children?.map((child)=>/*#__PURE__*/ jsx(TreeItem, {
+                                                item: child,
+                                                depth: depth + 1,
+                                                selectedIds: selectedIds,
+                                                lastSelectedId: lastSelectedId,
+                                                onSelect: onSelect,
+                                                expandedIds: expandedIds,
+                                                onToggleExpand: onToggleExpand,
+                                                selectionMode: selectionMode,
+                                                getIcon: getIcon,
+                                                onAction: onAction,
+                                                onAccessChange: onAccessChange,
+                                                allItems: allItems,
+                                                showAccessRights: showAccessRights,
+                                                showSelectionCheckboxes: showSelectionCheckboxes,
+                                                itemMap: itemMap,
+                                                iconMap: iconMap,
+                                                menuItems: menuItems,
+                                                getSelectedItems: getSelectedItems
+                                            }, child.id))
+                                    })
+                                })
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx(ContextMenuContent, {
+                className: "w-64",
+                children: menuItems?.map((menuItem)=>/*#__PURE__*/ jsxs(ContextMenuItem, {
+                        onClick: ()=>{
+                            const items = selectedIds.has(item.id) ? getSelectedItems() : [
+                                item
+                            ];
+                            menuItem.action(items);
+                        },
+                        children: [
+                            menuItem.icon && /*#__PURE__*/ jsx("span", {
+                                className: "mr-2 h-4 w-4",
+                                children: menuItem.icon
+                            }),
+                            menuItem.label
+                        ]
+                    }, menuItem.id))
+            })
+        ]
+    });
+}
+function TreeView({ className, containerClassName, checkboxLabels = {
+    check: "Check",
+    uncheck: "Uncheck"
+}, data, iconMap, searchPlaceholder = "Search...", selectionText = "selected", showExpandAll = true, showCheckboxes = false, showSelectionCheckboxes = false, selectionMode = "multiple", title, getIcon, onSelectionChange, onAction, onCheckChange, menuItems }) {
+    const [currentMousePos, setCurrentMousePos] = useState(0);
+    const [dragStart, setDragStart] = useState(null);
+    const [dragStartPosition, setDragStartPosition] = useState(null);
+    const [expandedIds, setExpandedIds] = useState(new Set());
+    const [isDragging, setIsDragging] = useState(false);
+    const [selectedIds, setSelectedIds] = useState(new Set());
+    const [searchQuery, setSearchQuery] = useState("");
+    const dragRef = useRef(null);
+    const lastSelectedId = useRef(null);
+    const treeRef = useRef(null);
+    const DRAG_THRESHOLD = 10;
+    const itemMap = useMemo(()=>buildItemMap(data), [
+        data
+    ]);
+    const { filteredData, searchExpandedIds } = useMemo(()=>{
+        if (!searchQuery.trim()) return {
+            filteredData: data,
+            searchExpandedIds: new Set()
+        };
+        const searchLower = searchQuery.toLowerCase();
+        const newExpandedIds = new Set();
+        const itemMatches = (item)=>{
+            const nameMatches = item.name.toLowerCase().includes(searchLower);
+            if (nameMatches) return true;
+            if (item.children) return item.children.some((child)=>itemMatches(child));
+            return false;
+        };
+        const filterTree = (items)=>items.map((item)=>{
+                if (!item.children) return itemMatches(item) ? item : null;
+                const filteredChildren = filterTree(item.children);
+                if (filteredChildren.length > 0 || itemMatches(item)) {
+                    if (item.children) newExpandedIds.add(item.id);
+                    return {
+                        ...item,
+                        children: filteredChildren
+                    };
+                }
+                return null;
+            }).filter((item)=>null !== item);
+        return {
+            filteredData: filterTree(data),
+            searchExpandedIds: newExpandedIds
+        };
+    }, [
+        data,
+        searchQuery
+    ]);
+    useEffect(()=>{
+        if (searchQuery.trim()) setExpandedIds((prev)=>new Set([
+                ...prev,
+                ...searchExpandedIds
+            ]));
+    }, [
+        searchExpandedIds,
+        searchQuery
+    ]);
+    useEffect(()=>{
+        const handleClickAway = (e)=>{
+            const target = e.target;
+            const clickedInside = treeRef.current && treeRef.current.contains(target) || dragRef.current && dragRef.current.contains(target) || target.closest('[role="menu"]') || target.closest("[data-radix-popper-content-wrapper]");
+            if (!clickedInside) {
+                setSelectedIds(new Set());
+                lastSelectedId.current = null;
+            }
+        };
+        document.addEventListener("mousedown", handleClickAway);
+        return ()=>document.removeEventListener("mousedown", handleClickAway);
+    }, []);
+    const getAllFolderIds = (items)=>{
+        let ids = [];
+        items.forEach((item)=>{
+            if (item.children) {
+                ids.push(item.id);
+                ids = [
+                    ...ids,
+                    ...getAllFolderIds(item.children)
+                ];
+            }
+        });
+        return ids;
+    };
+    const handleExpandAll = ()=>{
+        setExpandedIds(new Set(getAllFolderIds(data)));
+    };
+    const handleCollapseAll = ()=>{
+        setExpandedIds(new Set());
+    };
+    const handleToggleExpand = (id, isOpen)=>{
+        const newExpandedIds = new Set(expandedIds);
+        if (isOpen) newExpandedIds.add(id);
+        else newExpandedIds.delete(id);
+        setExpandedIds(newExpandedIds);
+    };
+    const getSelectedItems = useCallback(()=>{
+        const items = [];
+        const processItem = (item)=>{
+            if (selectedIds.has(item.id)) items.push(item);
+            item.children?.forEach(processItem);
+        };
+        data.forEach(processItem);
+        return items;
+    }, [
+        selectedIds,
+        data
+    ]);
+    const getEffectiveSelectedItems = useCallback(()=>{
+        const selectedItems = getSelectedItems();
+        const selectedIdsSet = new Set(selectedItems.map((item)=>item.id));
+        return selectedItems.filter((item)=>{
+            if (!item.children) return true;
+            const hasSelectedChildren = item.children.some((child)=>selectedIdsSet.has(child.id));
+            return !hasSelectedChildren;
+        });
+    }, [
+        getSelectedItems
+    ]);
+    const handleMouseDown = useCallback((e)=>{
+        if (0 !== e.button || e.target.closest("button")) return;
+        setDragStartPosition({
+            x: e.clientX,
+            y: e.clientY
+        });
+    }, []);
+    const handleMouseMove = useCallback((e)=>{
+        if ("none" === selectionMode) return;
+        if (!(1 & e.buttons)) {
+            setIsDragging(false);
+            setDragStart(null);
+            setDragStartPosition(null);
+            return;
+        }
+        if (!dragStartPosition) return;
+        const deltaX = e.clientX - dragStartPosition.x;
+        const deltaY = e.clientY - dragStartPosition.y;
+        const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+        if (!isDragging) {
+            if (distance > DRAG_THRESHOLD) {
+                setIsDragging(true);
+                setDragStart(dragStartPosition.y);
+                if (!e.shiftKey && !e.ctrlKey) {
+                    setSelectedIds(new Set());
+                    lastSelectedId.current = null;
+                }
+            }
+            return;
+        }
+        if (!dragRef.current) return;
+        const items = Array.from(dragRef.current.querySelectorAll("[data-tree-item]"));
+        const startY = dragStart;
+        const currentY = e.clientY;
+        const [selectionStart, selectionEnd] = [
+            Math.min(startY || 0, currentY),
+            Math.max(startY || 0, currentY)
+        ];
+        const newSelection = new Set(e.shiftKey || e.ctrlKey ? Array.from(selectedIds) : []);
+        items.forEach((item)=>{
+            const rect = item.getBoundingClientRect();
+            const itemTop = rect.top;
+            const itemBottom = rect.top + rect.height;
+            if (itemBottom >= selectionStart && itemTop <= selectionEnd) {
+                const id = item.getAttribute("data-id");
+                const isDisabledEl = "true" === item.getAttribute("data-disabled");
+                const isClosedFolder = "true" === item.getAttribute("data-folder-closed");
+                const parentFolderClosed = item.closest('[data-folder-closed="true"]');
+                if (id && !isDisabledEl && (isClosedFolder || !parentFolderClosed)) newSelection.add(id);
+            }
+        });
+        setSelectedIds(newSelection);
+        setCurrentMousePos(e.clientY);
+    }, [
+        isDragging,
+        dragStart,
+        selectedIds,
+        dragStartPosition,
+        selectionMode
+    ]);
+    const handleMouseUp = useCallback(()=>{
+        setIsDragging(false);
+        setDragStart(null);
+        setDragStartPosition(null);
+    }, []);
+    useEffect(()=>{
+        if (isDragging) {
+            document.addEventListener("mouseup", handleMouseUp);
+            document.addEventListener("mouseleave", handleMouseUp);
+        }
+        return ()=>{
+            document.removeEventListener("mouseup", handleMouseUp);
+            document.removeEventListener("mouseleave", handleMouseUp);
+        };
+    }, [
+        isDragging,
+        handleMouseUp
+    ]);
+    useEffect(()=>{
+        if (onSelectionChange) onSelectionChange(getSelectedItems());
+    }, [
+        selectedIds,
+        onSelectionChange,
+        getSelectedItems
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        className: cn("flex gap-4 min-w-0", containerClassName ? "w-full" : ""),
+        children: /*#__PURE__*/ jsxs("div", {
+            ref: treeRef,
+            className: cn("bg-background rounded-xl border space-y-4 relative shadow-lg flex flex-col min-w-0 overflow-hidden", containerClassName ?? "p-6 max-w-2xl w-[600px]"),
+            children: [
+                title && /*#__PURE__*/ jsx("div", {
+                    className: "text-sm font-medium text-foreground shrink-0",
+                    children: title
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: "relative w-full shrink-0",
+                    children: [
+                        /*#__PURE__*/ jsx(Search, {
+                            className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground"
+                        }),
+                        /*#__PURE__*/ jsx(Input, {
+                            placeholder: searchPlaceholder,
+                            value: searchQuery,
+                            onChange: (e)=>setSearchQuery(e.target.value),
+                            className: "h-10 w-full pl-9"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: "flex items-center justify-between gap-2 shrink-0",
+                    children: [
+                        /*#__PURE__*/ jsx("div", {
+                            className: "flex gap-2",
+                            children: showExpandAll && /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    /*#__PURE__*/ jsx(Button, {
+                                        variant: "ghost",
+                                        size: "sm",
+                                        className: "h-6 px-1.5 text-xs",
+                                        onClick: handleExpandAll,
+                                        children: "Expand"
+                                    }),
+                                    /*#__PURE__*/ jsx(Button, {
+                                        variant: "ghost",
+                                        size: "sm",
+                                        className: "h-6 px-1.5 text-xs",
+                                        onClick: handleCollapseAll,
+                                        children: "Collapse"
+                                    })
+                                ]
+                            })
+                        }),
+                        "none" !== selectionMode && selectedIds.size > 0 ? /*#__PURE__*/ jsxs("div", {
+                            className: "flex items-center gap-2",
+                            children: [
+                                /*#__PURE__*/ jsxs("span", {
+                                    className: "text-xs text-muted-foreground",
+                                    children: [
+                                        selectedIds.size,
+                                        " ",
+                                        selectionText
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxs(Button, {
+                                    variant: "ghost",
+                                    size: "sm",
+                                    className: "h-6 px-1.5 text-xs",
+                                    onClick: ()=>{
+                                        setSelectedIds(new Set());
+                                        lastSelectedId.current = null;
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ jsx(X, {
+                                            className: "h-3 w-3 mr-1"
+                                        }),
+                                        "Clear"
+                                    ]
+                                }),
+                                showCheckboxes && /*#__PURE__*/ jsxs("div", {
+                                    className: "flex gap-2",
+                                    children: [
+                                        /*#__PURE__*/ jsx(Button, {
+                                            variant: "ghost",
+                                            size: "sm",
+                                            className: "h-8 px-2 text-green-600 hover:text-green-700 hover:bg-green-50",
+                                            onClick: ()=>{
+                                                const effectiveItems = getEffectiveSelectedItems();
+                                                const processItem = (item)=>{
+                                                    onCheckChange?.(item, true);
+                                                    item.children?.forEach(processItem);
+                                                };
+                                                effectiveItems.forEach(processItem);
+                                            },
+                                            children: checkboxLabels.check
+                                        }),
+                                        /*#__PURE__*/ jsx(Button, {
+                                            variant: "ghost",
+                                            size: "sm",
+                                            className: "h-8 px-2 text-red-600 hover:text-red-700 hover:bg-red-50",
+                                            onClick: ()=>{
+                                                const effectiveItems = getEffectiveSelectedItems();
+                                                const processItem = (item)=>{
+                                                    onCheckChange?.(item, false);
+                                                    item.children?.forEach(processItem);
+                                                };
+                                                effectiveItems.forEach(processItem);
+                                            },
+                                            children: checkboxLabels.uncheck
+                                        })
+                                    ]
+                                })
+                            ]
+                        }) : null
+                    ]
+                }),
+                /*#__PURE__*/ jsxs("section", {
+                    ref: dragRef,
+                    "aria-label": "Tree view content",
+                    className: cn("rounded-lg relative select-none min-w-0 overflow-x-hidden", className),
+                    onMouseDown: handleMouseDown,
+                    onMouseMove: handleMouseMove,
+                    children: [
+                        isDragging && /*#__PURE__*/ jsx("div", {
+                            className: "absolute inset-0 bg-blue-500/0 pointer-events-none",
+                            style: {
+                                top: Math.min(dragStart || 0, null === dragStart ? 0 : currentMousePos),
+                                height: Math.abs((dragStart || 0) - (null === dragStart ? 0 : currentMousePos))
+                            }
+                        }),
+                        filteredData.map((item)=>/*#__PURE__*/ jsx(TreeItem, {
+                                item: item,
+                                selectedIds: selectedIds,
+                                lastSelectedId: lastSelectedId,
+                                onSelect: setSelectedIds,
+                                expandedIds: expandedIds,
+                                onToggleExpand: handleToggleExpand,
+                                selectionMode: selectionMode,
+                                getIcon: getIcon,
+                                onAction: onAction,
+                                onAccessChange: onCheckChange,
+                                allItems: data,
+                                showAccessRights: showCheckboxes,
+                                showSelectionCheckboxes: showSelectionCheckboxes,
+                                itemMap: itemMap,
+                                iconMap: iconMap,
+                                menuItems: menuItems,
+                                getSelectedItems: getSelectedItems
+                            }, item.id))
+                    ]
+                })
+            ]
+        })
+    });
+}
+export { TreeView as default };