@uipath/apollo-wind 0.9.1 → 0.10.0-pr219.61d64eb

package/dist/components/ui/tree-view.d.ts

@@ -0,0 +1,95 @@
+import * as React from "react";
+/**
+ * Action shown in the item's dropdown menu (Edit, Delete, etc.).
+ * Actions appear as a single "more" icon that opens a dropdown to avoid horizontal overflow.
+ */
+export interface TreeViewItemAction {
+    /** Unique action identifier */
+    id: string;
+    /** Icon to display in the dropdown menu item */
+    icon: React.ReactNode;
+    /** Accessible label for the action */
+    label?: string;
+    /** Called when the action is clicked */
+    onClick: (item: TreeViewItem) => void;
+}
+/**
+ * A single item in the tree. Supports hierarchical structure, selection, and rich metadata.
+ */
+export interface TreeViewItem {
+    /** Unique identifier (must be unique across the entire tree) */
+    id: string;
+    /** Display name */
+    name: string;
+    /** Type used for icon lookup in iconMap */
+    type: string;
+    /** Child items for expandable folders */
+    children?: TreeViewItem[];
+    /** Checked state when using access-rights checkboxes (showCheckboxes) */
+    checked?: boolean;
+    /** When true, item is greyed out and cannot be selected */
+    disabled?: boolean;
+    /** Badge or tag shown after the name (e.g. status, version) */
+    badge?: React.ReactNode;
+    /** Secondary metadata shown after the badge (e.g. "Production", "2 workflows") */
+    meta?: string | React.ReactNode;
+    /** Actions shown in a dropdown menu (Edit, Delete, etc.). Uses a single "more" icon to prevent horizontal scroll. */
+    actions?: TreeViewItemAction[];
+}
+export interface TreeViewIconMap {
+    [key: string]: React.ReactNode | undefined;
+}
+export interface TreeViewMenuItem {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+    action: (items: TreeViewItem[]) => void;
+}
+/**
+ * Controls how items can be selected.
+ * - `"multiple"`: Shift/ctrl-click for multi-select, drag to select range (default)
+ * - `"single"`: Only one item can be selected at a time
+ * - `"none"`: No selection; expand/collapse only
+ */
+export type TreeViewSelectionMode = "single" | "multiple" | "none";
+export interface TreeViewProps {
+    className?: string;
+    containerClassName?: string;
+    data: TreeViewItem[];
+    title?: string;
+    showExpandAll?: boolean;
+    showCheckboxes?: boolean;
+    /** Show selection checkboxes on leaf items only (folders do not get checkboxes) */
+    showSelectionCheckboxes?: boolean;
+    /** Selection behavior: "multiple" (default), "single", or "none" */
+    selectionMode?: TreeViewSelectionMode;
+    checkboxPosition?: "left" | "right";
+    searchPlaceholder?: string;
+    selectionText?: string;
+    checkboxLabels?: {
+        check: string;
+        uncheck: string;
+    };
+    getIcon?: (item: TreeViewItem, depth: number) => React.ReactNode;
+    onSelectionChange?: (selectedItems: TreeViewItem[]) => void;
+    onAction?: (action: string, items: TreeViewItem[]) => void;
+    onCheckChange?: (item: TreeViewItem, checked: boolean) => void;
+    iconMap?: TreeViewIconMap;
+    menuItems?: TreeViewMenuItem[];
+}
+/**
+ * TreeView displays hierarchical data with expand/collapse, search, selection, and optional actions.
+ *
+ * **Features:**
+ * - **Search**: Filters items by name and auto-expands matching branches
+ * - **Selection**: Single, multiple, or none via `selectionMode`
+ * - **Selection checkboxes**: Shown only on leaf items (not on folders) when `showSelectionCheckboxes` is true
+ * - **Disabled items**: Use `disabled: true` on items to grey them out and prevent selection
+ * - **Badges & metadata**: Add `badge` and `meta` to items for status, version, or counts
+ * - **Item actions**: Add `actions` for Edit/Delete; shown in a compact dropdown to prevent horizontal scroll
+ * - **Right-click context menu**: Use `menuItems` for custom context menu actions
+ * - **Access-rights checkboxes**: Use `showCheckboxes` for check/uncheck with `onCheckChange`
+ *
+ * **Layout**: Title → Search bar → Expand/Collapse + Selected count + Clear → Tree. No horizontal scroll.
+ */
+export default function TreeView({ className, containerClassName, checkboxLabels, data, iconMap, searchPlaceholder, selectionText, showExpandAll, showCheckboxes, showSelectionCheckboxes, selectionMode, title, getIcon, onSelectionChange, onAction, onCheckChange, menuItems, }: TreeViewProps): import("react/jsx-runtime").JSX.Element;