its-just-ui/dist/components/TreeSelect/TreeSelect.d.ts

ITS Just UI - The easiest and best React UI component library. Modern, accessible, and customizable components built with TypeScript and Tailwind CSS. Simple to use, production-ready components for building beautiful user interfaces with ease.

import { default as React, ReactNode, KeyboardEvent, FocusEvent, MouseEvent } from 'react';

export interface TreeNode {
    key: string;
    title: ReactNode;
    value?: any;
    children?: TreeNode[];
    disabled?: boolean;
    checkable?: boolean;
    selectable?: boolean;
    isLeaf?: boolean;
    loading?: boolean;
    icon?: ReactNode;
    className?: string;
    style?: React.CSSProperties;
    [key: string]: any;
}
export type CheckStrategy = 'SHOW_PARENT' | 'SHOW_CHILD' | 'SHOW_ALL';
export type TreeSelectVariant = 'bordered' | 'minimal' | 'inline-tree' | 'popup-tree' | 'searchable' | 'multi-select';
export type TreeSelectSize = 'sm' | 'md' | 'lg';
export type NodeStatus = 'selected' | 'checked' | 'half-checked' | 'disabled' | 'hovered' | 'loading';
export interface TreeSelectValue {
    key: string;
    title: ReactNode;
    value?: any;
}
export interface TreeSelectProps {
    value?: TreeSelectValue | TreeSelectValue[];
    defaultValue?: TreeSelectValue | TreeSelectValue[];
    treeData?: TreeNode[];
    placeholder?: string;
    mode?: 'single' | 'multiple';
    checkable?: boolean;
    checkStrategy?: CheckStrategy;
    open?: boolean;
    defaultOpen?: boolean;
    expandedKeys?: string[];
    defaultExpandedKeys?: string[];
    searchValue?: string;
    defaultSearchValue?: string;
    disabled?: boolean;
    loading?: boolean;
    clearable?: boolean;
    variant?: TreeSelectVariant;
    size?: TreeSelectSize;
    inline?: boolean;
    maxTagCount?: number;
    maxTagPlaceholder?: (omittedValues: TreeSelectValue[]) => ReactNode;
    searchable?: boolean;
    filterTreeNode?: (inputValue: string, node: TreeNode) => boolean;
    showSearch?: boolean;
    searchPlaceholder?: string;
    loadData?: (node: TreeNode) => Promise<void>;
    className?: string;
    style?: React.CSSProperties;
    popupClassName?: string;
    popupStyle?: React.CSSProperties;
    dropdownStyle?: React.CSSProperties;
    borderRadius?: string;
    borderColor?: string;
    borderWidth?: string;
    borderStyle?: string;
    backgroundColor?: string;
    hoverColor?: string;
    selectedColor?: string;
    disabledColor?: string;
    focusRingColor?: string;
    fontSize?: string;
    fontWeight?: string;
    placeholderColor?: string;
    textColor?: string;
    selectedTextColor?: string;
    paddingX?: string;
    paddingY?: string;
    indentSize?: string;
    dropdownIcon?: ReactNode;
    clearIcon?: ReactNode;
    expandIcon?: ReactNode;
    collapseIcon?: ReactNode;
    checkIcon?: ReactNode;
    switcherIcon?: (props: {
        expanded: boolean;
        loading: boolean;
    }) => ReactNode;
    renderNode?: (node: TreeNode, options: {
        selected: boolean;
        checked: boolean;
        halfChecked: boolean;
        expanded: boolean;
        level: number;
    }) => ReactNode;
    renderTag?: (props: {
        value: TreeSelectValue;
        onClose: () => void;
        disabled: boolean;
    }) => ReactNode;
    renderEmpty?: () => ReactNode;
    renderLoading?: () => ReactNode;
    onChange?: (value: TreeSelectValue | TreeSelectValue[] | undefined, selectedNodes: TreeNode | TreeNode[] | undefined) => void;
    onSelect?: (selectedKeys: string[], info: {
        selected: boolean;
        selectedNodes: TreeNode[];
        node: TreeNode;
        event: MouseEvent;
    }) => void;
    onDeselect?: (value: TreeSelectValue, node: TreeNode) => void;
    onSearch?: (value: string) => void;
    onClear?: () => void;
    onExpand?: (expandedKeys: string[], info: {
        expanded: boolean;
        node: TreeNode;
    }) => void;
    onLoad?: (loadedKeys: string[], info: {
        event: 'load';
        node: TreeNode;
    }) => void;
    onFocus?: (event: FocusEvent<HTMLElement>) => void;
    onBlur?: (event: FocusEvent<HTMLElement>) => void;
    onDropdownVisibleChange?: (open: boolean) => void;
    'aria-label'?: string;
    'aria-labelledby'?: string;
    'aria-describedby'?: string;
    id?: string;
    children?: ReactNode;
}
interface TreeSelectContextValue {
    value: TreeSelectValue | TreeSelectValue[] | undefined;
    treeData: TreeNode[];
    expandedKeys: string[];
    searchValue: string;
    selectedKeys: string[];
    checkedKeys: string[];
    halfCheckedKeys: string[];
    loadedKeys: string[];
    open: boolean;
    focused: boolean;
    mode: 'single' | 'multiple';
    checkable: boolean;
    checkStrategy: CheckStrategy;
    variant: TreeSelectVariant;
    size: TreeSelectSize;
    disabled: boolean;
    loading: boolean;
    setValue: (value: TreeSelectValue | TreeSelectValue[] | undefined) => void;
    setOpen: (open: boolean) => void;
    setSearchValue: (value: string) => void;
    setExpandedKeys: (keys: string[]) => void;
    toggleExpanded: (key: string) => void;
    selectNode: (node: TreeNode, selected: boolean) => void;
    checkNode: (node: TreeNode, checked: boolean) => void;
    clearSelection: () => void;
    getNodeByKey: (key: string) => TreeNode | undefined;
    getSelectedNodes: () => TreeNode[];
    getCheckedNodes: () => TreeNode[];
    isNodeSelected: (key: string) => boolean;
    isNodeChecked: (key: string) => boolean;
    isNodeHalfChecked: (key: string) => boolean;
    isNodeExpanded: (key: string) => boolean;
    isNodeDisabled: (node: TreeNode) => boolean;
    props: TreeSelectProps;
}
export declare const useTreeSelectContext: () => TreeSelectContextValue;
export declare const TreeSelectInput: React.ForwardRefExoticComponent<{
    className?: string;
    style?: React.CSSProperties;
    placeholder?: string;
    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
} & React.RefAttributes<HTMLInputElement>>;
export declare const TreeSelectPopup: React.ForwardRefExoticComponent<{
    className?: string;
    style?: React.CSSProperties;
    children?: ReactNode;
} & React.RefAttributes<HTMLDivElement>>;
export declare const TreeSelectNode: React.ForwardRefExoticComponent<{
    node: TreeNode;
    level?: number;
    className?: string;
    style?: React.CSSProperties;
} & React.RefAttributes<HTMLDivElement>>;
export declare const TreeSelectCheckbox: React.ForwardRefExoticComponent<{
    checked?: boolean;
    halfChecked?: boolean;
    disabled?: boolean;
    onChange?: (event: React.MouseEvent) => void;
    className?: string;
    style?: React.CSSProperties;
} & React.RefAttributes<HTMLInputElement>>;
export declare const TreeSelectClearButton: React.ForwardRefExoticComponent<{
    className?: string;
    style?: React.CSSProperties;
    onClear?: () => void;
} & React.RefAttributes<HTMLButtonElement>>;
export declare const TreeSelectExpandIcon: React.ForwardRefExoticComponent<{
    expanded?: boolean;
    loading?: boolean;
    className?: string;
    style?: React.CSSProperties;
} & React.RefAttributes<HTMLSpanElement>>;
interface TreeSelectComponent extends React.ForwardRefExoticComponent<TreeSelectProps & React.RefAttributes<HTMLDivElement>> {
    Input: typeof TreeSelectInput;
    Popup: typeof TreeSelectPopup;
    Node: typeof TreeSelectNode;
    Checkbox: typeof TreeSelectCheckbox;
    ClearButton: typeof TreeSelectClearButton;
    ExpandIcon: typeof TreeSelectExpandIcon;
}
declare const TreeSelectWithSubComponents: TreeSelectComponent;
export { TreeSelectWithSubComponents as TreeSelect };
export default TreeSelectWithSubComponents;