goobs-frontend/dist/components/TreeView/index.d.ts

A comprehensive React-based libary for building modern web applications

import { default as React, ReactNode, FC } from 'react';
import { TreeViewStyles } from '../../theme';
import { getTreeItemStyles } from '../../theme/treeview';
export type TreeViewItemId = string;
export interface TreeViewItem {
    id: TreeViewItemId;
    label: string;
    children?: TreeViewItem[];
    disabled?: boolean;
    [key: string]: any;
}
export interface TreeViewSelectionPropagation {
    descendants?: boolean;
    parents?: boolean;
}
export interface TreeViewApiRef {
    focusItem: (itemId: TreeViewItemId) => void;
    getItem: (itemId: TreeViewItemId) => TreeViewItem | null;
    getItemDOMElement: (itemId: TreeViewItemId) => HTMLElement | null;
    getItemOrderedChildrenIds: (itemId: TreeViewItemId) => TreeViewItemId[];
    getItemTree: () => TreeViewItem[];
    getParentId: (itemId: TreeViewItemId) => TreeViewItemId | null;
    setItemExpansion: (params: {
        itemId: TreeViewItemId;
        isExpanded?: boolean;
        event?: React.SyntheticEvent;
    }) => void;
    setItemSelection: (params: {
        itemId: TreeViewItemId;
        shouldBeSelected?: boolean;
        keepExistingSelection?: boolean;
        event?: React.SyntheticEvent;
    }) => void;
    setIsItemDisabled: (params: {
        itemId: TreeViewItemId;
        shouldBeDisabled?: boolean;
    }) => void;
}
export interface TreeViewProps {
    /** The items to display in the tree */
    items?: TreeViewItem[];
    /** Function to extract the item ID */
    getItemId?: (item: TreeViewItem) => TreeViewItemId;
    /** Function to extract the item label */
    getItemLabel?: (item: TreeViewItem) => string;
    /** Function to extract the item children */
    getItemChildren?: (item: TreeViewItem) => TreeViewItem[] | undefined;
    /** Function to determine if an item is disabled */
    isItemDisabled?: (item: TreeViewItem) => boolean;
    /** Selected item IDs (controlled) */
    selectedItems?: TreeViewItemId[] | TreeViewItemId;
    /** Default selected item IDs (uncontrolled) */
    defaultSelectedItems?: TreeViewItemId[] | TreeViewItemId;
    /** Expanded item IDs (controlled) */
    expandedItems?: TreeViewItemId[];
    /** Default expanded item IDs (uncontrolled) */
    defaultExpandedItems?: TreeViewItemId[];
    /** Enable multi-selection */
    multiSelect?: boolean;
    /** Enable checkbox selection */
    checkboxSelection?: boolean;
    /** Disable selection entirely */
    disableSelection?: boolean;
    /** Allow focusing disabled items */
    disabledItemsFocusable?: boolean;
    /** Selection propagation settings */
    selectionPropagation?: TreeViewSelectionPropagation;
    /** What triggers expansion: content click or icon click only */
    expansionTrigger?: 'content' | 'iconContainer';
    /** Horizontal indentation between item and children */
    itemChildrenIndentation?: string | number;
    /** Callback when selected items change */
    onSelectedItemsChange?: (event: React.SyntheticEvent, itemIds: TreeViewItemId[] | TreeViewItemId) => void;
    /** Callback when a single item selection changes */
    onItemSelectionToggle?: (event: React.SyntheticEvent, itemId: TreeViewItemId, isSelected: boolean) => void;
    /** Callback when expanded items change */
    onExpandedItemsChange?: (event: React.SyntheticEvent, itemIds: TreeViewItemId[]) => void;
    /** Callback when a single item expansion changes */
    onItemExpansionToggle?: (event: React.SyntheticEvent | null, itemId: TreeViewItemId, isExpanded: boolean) => void;
    /** Callback when an item is clicked */
    onItemClick?: (event: React.MouseEvent, itemId: TreeViewItemId) => void;
    /** Callback when an item is focused */
    onItemFocus?: (event: React.SyntheticEvent | null, itemId: TreeViewItemId) => void;
    /** API reference for imperative operations */
    apiRef?: React.MutableRefObject<TreeViewApiRef | undefined>;
    /** Component styling */
    styles?: TreeViewStyles;
    /** Component children (for SimpleTreeView style usage) */
    children?: ReactNode;
    /** HTML id attribute */
    id?: string;
    /** Additional props */
    [key: string]: any;
}
export interface TreeItemProps {
    /** Item data */
    item: TreeViewItem;
    /** Nesting level */
    level?: number;
    /** Whether item is selected */
    isSelected?: boolean;
    /** Whether item is expanded */
    isExpanded?: boolean;
    /** Whether item is focused */
    isFocused?: boolean;
    /** Whether item has children */
    hasChildren?: boolean;
    /** Component styling */
    styles?: TreeViewStyles;
    /** Click handlers */
    onClick?: (event: React.MouseEvent, itemId: TreeViewItemId) => void;
    onToggleExpansion?: (event: React.SyntheticEvent, itemId: TreeViewItemId) => void;
    onToggleSelection?: (event: React.SyntheticEvent, itemId: TreeViewItemId) => void;
    onFocus?: (event: React.FocusEvent, itemId: TreeViewItemId) => void;
    /** Checkbox selection enabled */
    checkboxSelection?: boolean;
    /** Multi-select enabled */
    multiSelect?: boolean;
    /** Expansion trigger mode */
    expansionTrigger?: 'content' | 'iconContainer';
    /** Disabled items focusable */
    disabledItemsFocusable?: boolean;
}
interface TreeViewContextValue {
    selectedItems: Set<TreeViewItemId>;
    expandedItems: Set<TreeViewItemId>;
    focusedItem: TreeViewItemId | null;
    disabledItems: Set<TreeViewItemId>;
    itemMap: Map<TreeViewItemId, TreeViewItem>;
    parentMap: Map<TreeViewItemId, TreeViewItemId>;
    childrenMap: Map<TreeViewItemId, TreeViewItemId[]>;
    multiSelect: boolean;
    checkboxSelection: boolean;
    disableSelection: boolean;
    disabledItemsFocusable: boolean;
    selectionPropagation: TreeViewSelectionPropagation;
    expansionTrigger: 'content' | 'iconContainer';
    styles: TreeViewStyles;
    getItemId: (item: TreeViewItem) => TreeViewItemId;
    getItemLabel: (item: TreeViewItem) => string;
    getItemChildren: (item: TreeViewItem) => TreeViewItem[] | undefined;
    isItemDisabled: (item: TreeViewItem) => boolean;
    onItemClick?: (event: React.MouseEvent, itemId: TreeViewItemId) => void;
    onItemFocus?: (event: React.SyntheticEvent | null, itemId: TreeViewItemId) => void;
    onToggleExpansion: (event: React.SyntheticEvent, itemId: TreeViewItemId) => void;
    onToggleSelection: (event: React.SyntheticEvent, itemId: TreeViewItemId) => void;
    setFocusedItem: (itemId: TreeViewItemId | null) => void;
    apiRef?: React.MutableRefObject<TreeViewApiRef | undefined>;
}
declare const useTreeViewContext: () => TreeViewContextValue;
declare const useTreeViewApiRef: () => React.MutableRefObject<TreeViewApiRef | undefined>;
declare const TreeItem: FC<TreeItemProps>;
declare const TreeView: React.ForwardRefExoticComponent<Omit<TreeViewProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
export default TreeView;
export { TreeView, TreeItem, useTreeViewContext, useTreeViewApiRef, getTreeItemStyles, };
//# sourceMappingURL=index.d.ts.map