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';
export type TreeViewItemId = string;
/**
 * Public styling contract for TreeView. Descended from the old
 * theme/treeview.ts `TreeViewStyles`; every remaining key is live. The
 * `theme` field selects the variant (rendered as data-theme); the remaining
 * fields are caller-supplied overrides applied via the small JS dynamicStyle
 * objects. Per-state item overrides (the itemHover, itemSelected,
 * itemExpanded, and itemDisabled groups) follow the state cascade
 * disabled > selected > expanded > hover, with the itemFocused overrides
 * layered last on top.
 */
export interface TreeViewStyles {
    theme?: 'light' | 'dark' | 'sacred';
    backgroundColor?: string;
    borderColor?: string;
    borderRadius?: string;
    borderWidth?: string;
    boxShadow?: string;
    backdropFilter?: string;
    backgroundImage?: string;
    color?: string;
    fontFamily?: string;
    fontSize?: string;
    lineHeight?: string | number;
    padding?: string;
    width?: string;
    minWidth?: string;
    maxWidth?: string;
    height?: string;
    minHeight?: string;
    maxHeight?: string;
    itemBackgroundColor?: string;
    itemBorderColor?: string;
    itemBorderRadius?: string;
    itemColor?: string;
    itemFontFamily?: string;
    itemFontSize?: string;
    itemFontWeight?: string | number;
    itemLetterSpacing?: string;
    itemTextShadow?: string;
    itemPadding?: string;
    itemMinHeight?: string;
    itemMargin?: string;
    itemHoverBackgroundColor?: string;
    itemHoverBorderColor?: string;
    itemHoverColor?: string;
    itemHoverTransform?: string;
    itemHoverTextShadow?: string;
    itemHoverBoxShadow?: string;
    itemSelectedBackgroundColor?: string;
    itemSelectedBorderColor?: string;
    itemSelectedColor?: string;
    itemSelectedFontWeight?: string | number;
    itemSelectedTextShadow?: string;
    itemSelectedBoxShadow?: string;
    itemSelectedBackgroundImage?: string;
    itemExpandedBackgroundColor?: string;
    itemExpandedBorderColor?: string;
    itemExpandedColor?: string;
    itemExpandedFontWeight?: string | number;
    itemExpandedTextShadow?: string;
    itemDisabledBackgroundColor?: string;
    itemDisabledColor?: string;
    itemDisabledOpacity?: number;
    itemDisabledBorderColor?: string;
    itemFocusedOutline?: string;
    itemFocusedOutlineOffset?: string;
    itemFocusedBoxShadow?: string;
    itemFocusedBackgroundColor?: string;
    iconContainerWidth?: string;
    iconContainerHeight?: string;
    iconContainerMarginRight?: string;
    expandIconColor?: string;
    expandIconFontSize?: string;
    expandIconHoverColor?: string;
    expandIconHoverTransform?: string;
    expandIconExpandedTransform?: string;
    expandIconExpandedColor?: string;
    checkboxWidth?: string;
    checkboxHeight?: string;
    checkboxMarginRight?: string;
    checkboxAccentColor?: string;
    checkboxBorderRadius?: string;
    checkboxBorder?: string;
    checkboxBackground?: string;
    contentPaddingLeft?: string;
    contentBorderLeft?: string;
    contentMarginLeft?: string;
    labelFontSize?: string;
    labelFontWeight?: string | number;
    labelColor?: string;
    labelTextShadow?: string;
    levelIndentBase?: number;
    levelIndentIncrement?: number;
    /**
     * Fill + glow color of the drifting SACRED_GLYPHS hieroglyph particles on
     * the sacred theme's background canvas. Defaults to gold (#FFD700).
     */
    sacredBackgroundGlyphColor?: string;
    margin?: string;
    marginTop?: string;
    marginBottom?: string;
    marginLeft?: string;
    marginRight?: string;
    transitionDuration?: string;
    transitionEasing?: string;
    disabled?: boolean;
    /** @deprecated No-op since the CSS-module migration — scheduled for removal. */
    outline?: boolean;
}
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>;
}
/**
 * Access the internal TreeView context from a descendant (custom tree-item
 * renderers or controls composed inside a `<TreeView>`). Exposes the current
 * selection / expansion / focus / disabled sets, the item / parent / children
 * lookup maps, the behavior flags (multiSelect, checkboxSelection, …), the
 * resolved `styles` object, and the toggle / focus callbacks.
 *
 * Must be called from a component rendered INSIDE a `<TreeView>` — it throws
 * `Error('useTreeViewContext must be used within a TreeView')` when no
 * provider is above it in the React tree.
 */
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 };
//# sourceMappingURL=index.d.ts.map