@douyinfe/semi-ui/lib/cjs/treeSelect/index.d.ts

A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.

import React from 'react';
import PropTypes from 'prop-types';
import { Size, BasicTriggerRenderProps, BasicTreeSelectProps, BasicTreeSelectInnerData, TreeSelectAdapter } from '@douyinfe/semi-foundation/lib/cjs/treeSelect/foundation';
import '@douyinfe/semi-foundation/lib/cjs/tree/tree.css';
import '@douyinfe/semi-foundation/lib/cjs/treeSelect/treeSelect.css';
import BaseComponent, { ValidateStatus } from '../_base/baseComponent';
import { ContextValue } from '../configProvider/context';
import Input, { InputProps } from '../input/index';
import TagInput from '../tagInput';
import { TreeProps, TreeState, FlattenNode, TreeNodeData, TreeNodeProps } from '../tree/interface';
import { PopoverProps } from '../popover/index';
export type ExpandAction = false | 'click' | 'doubleClick';
export interface TriggerRenderProps extends Omit<BasicTriggerRenderProps, 'componentProps'> {
    [x: string]: any;
    componentProps: TreeSelectProps;
    value: TreeNodeData[];
    onClear: (e: React.MouseEvent) => void;
}
export interface OnChange {
    (value: TreeNodeData['value'] | Array<TreeNodeData['value']>, node: TreeNodeData[] | TreeNodeData, e: React.MouseEvent): void;
    (node: TreeNodeData[] | TreeNodeData, e: React.MouseEvent): void;
}
export type RenderSelectedItemInSingle = (treeNode: TreeNodeData) => React.ReactNode;
export type RenderSelectedItemInMultiple = (treeNode: TreeNodeData, otherProps: {
    index: number | string;
    onClose: (tagContent: any, e: React.MouseEvent) => void;
}) => {
    isRenderInTag: boolean;
    content: React.ReactNode;
};
export type RenderSelectedItem = RenderSelectedItemInSingle | RenderSelectedItemInMultiple;
export type OverrideCommonProps = 'renderFullLabel' | 'renderLabel' | 'defaultValue' | 'emptyContent' | 'filterTreeNode' | 'style' | 'treeData' | 'value' | 'onExpand' | 'keyMaps' | 'showLine';
/**
* Type definition description:
* TreeSelectProps inherits some properties from BasicTreeSelectProps (from foundation) and TreeProps (from semi-ui-react).
*/
export interface TreeSelectProps extends Omit<BasicTreeSelectProps, OverrideCommonProps | 'validateStatus' | 'searchRender'>, Pick<TreeProps, OverrideCommonProps> {
    'aria-describedby'?: React.AriaAttributes['aria-describedby'];
    'aria-errormessage'?: React.AriaAttributes['aria-errormessage'];
    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
    'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
    'aria-required'?: React.AriaAttributes['aria-required'];
    motion?: boolean;
    mouseEnterDelay?: number;
    mouseLeaveDelay?: number;
    arrowIcon?: React.ReactNode;
    autoAdjustOverflow?: boolean;
    clickToHide?: boolean;
    clearIcon?: React.ReactNode;
    defaultOpen?: boolean;
    dropdownClassName?: string;
    dropdownMatchSelectWidth?: boolean;
    dropdownStyle?: React.CSSProperties;
    dropdownMargin?: PopoverProps['margin'];
    insetLabel?: React.ReactNode;
    insetLabelId?: string;
    maxTagCount?: number;
    motionExpand?: boolean;
    optionListStyle?: React.CSSProperties;
    outerBottomSlot?: React.ReactNode;
    outerTopSlot?: React.ReactNode;
    placeholder?: string;
    prefix?: React.ReactNode;
    position?: PopoverProps['position'];
    searchAutoFocus?: boolean;
    searchPlaceholder?: string;
    showSearchClear?: boolean;
    size?: Size;
    suffix?: React.ReactNode;
    treeNodeLabelProp?: string;
    validateStatus?: ValidateStatus;
    zIndex?: number;
    searchPosition?: string;
    stopPropagation?: boolean | string;
    restTagsPopoverProps?: PopoverProps;
    expandIcon?: React.ReactNode | ((props: {
        onClick: (e: MouseEvent) => void;
        className: string;
        expanded: boolean;
    }) => React.ReactNode);
    searchRender?: boolean | ((inputProps: InputProps) => React.ReactNode);
    onSelect?: (selectedKey: string, selected: boolean, selectedNode: TreeNodeData) => void;
    renderSelectedItem?: RenderSelectedItem;
    getPopupContainer?: () => HTMLElement;
    triggerRender?: (props: TriggerRenderProps) => React.ReactNode;
    onBlur?: (e: React.MouseEvent) => void;
    onChange?: OnChange;
    onFocus?: (e: React.MouseEvent) => void;
    onVisibleChange?: (isVisible: boolean) => void;
    onClear?: (e: React.MouseEvent | React.KeyboardEvent<HTMLDivElement>) => void;
    autoMergeValue?: boolean;
}
export type OverrideCommonState = 'keyEntities' | 'treeData' | 'disabledKeys' | 'flattenNodes';
export interface TreeSelectState extends Omit<BasicTreeSelectInnerData, OverrideCommonState | 'prevProps'>, Pick<TreeState, OverrideCommonState> {
    inputTriggerFocus: boolean;
    isOpen: boolean;
    rePosKey: number;
    dropdownMinWidth: null | number;
    isHovering: boolean;
    prevProps: TreeSelectProps;
    isFocus: boolean;
}
declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
    static contextType: React.Context<ContextValue>;
    static propTypes: {
        'aria-describedby': PropTypes.Requireable<string>;
        'aria-errormessage': PropTypes.Requireable<string>;
        'aria-invalid': PropTypes.Requireable<boolean>;
        'aria-labelledby': PropTypes.Requireable<string>;
        'aria-required': PropTypes.Requireable<boolean>;
        borderless: PropTypes.Requireable<boolean>;
        loadedKeys: PropTypes.Requireable<string[]>;
        loadData: PropTypes.Requireable<(...args: any[]) => any>;
        onLoad: PropTypes.Requireable<(...args: any[]) => any>;
        arrowIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        clearIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        defaultOpen: PropTypes.Requireable<boolean>;
        defaultValue: PropTypes.Requireable<NonNullable<string | object>>;
        defaultExpandAll: PropTypes.Requireable<boolean>;
        defaultExpandedKeys: PropTypes.Requireable<any[]>;
        expandAll: PropTypes.Requireable<boolean>;
        disabled: PropTypes.Requireable<boolean>;
        disableStrictly: PropTypes.Requireable<boolean>;
        filterTreeNode: PropTypes.Requireable<NonNullable<boolean | ((...args: any[]) => any)>>;
        multiple: PropTypes.Requireable<boolean>;
        searchPlaceholder: PropTypes.Requireable<string>;
        searchAutoFocus: PropTypes.Requireable<boolean>;
        virtualize: PropTypes.Requireable<object>;
        treeNodeFilterProp: PropTypes.Requireable<string>;
        onChange: PropTypes.Requireable<(...args: any[]) => any>;
        onClear: PropTypes.Requireable<(...args: any[]) => any>;
        onSearch: PropTypes.Requireable<(...args: any[]) => any>;
        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
        onExpand: PropTypes.Requireable<(...args: any[]) => any>;
        onChangeWithObject: PropTypes.Requireable<boolean>;
        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
        value: PropTypes.Requireable<NonNullable<string | number | object>>;
        expandedKeys: PropTypes.Requireable<any[]>;
        autoExpandParent: PropTypes.Requireable<boolean>;
        showClear: PropTypes.Requireable<boolean>;
        showSearchClear: PropTypes.Requireable<boolean>;
        autoAdjustOverflow: PropTypes.Requireable<boolean>;
        showFilteredOnly: PropTypes.Requireable<boolean>;
        showLine: PropTypes.Requireable<boolean>;
        motionExpand: PropTypes.Requireable<boolean>;
        emptyContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        keyMaps: PropTypes.Requireable<object>;
        leafOnly: PropTypes.Requireable<boolean>;
        treeData: PropTypes.Requireable<PropTypes.InferProps<{
            key: PropTypes.Requireable<string>;
            value: PropTypes.Requireable<NonNullable<string | number>>;
            label: PropTypes.Requireable<any>;
        }>[]>;
        dropdownClassName: PropTypes.Requireable<string>;
        dropdownStyle: PropTypes.Requireable<object>;
        dropdownMargin: PropTypes.Requireable<NonNullable<number | object>>;
        motion: PropTypes.Requireable<boolean>;
        placeholder: PropTypes.Requireable<string>;
        maxTagCount: PropTypes.Requireable<number>;
        size: PropTypes.Requireable<Size>;
        className: PropTypes.Requireable<string>;
        style: PropTypes.Requireable<object>;
        treeNodeLabelProp: PropTypes.Requireable<string>;
        suffix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        prefix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        insetLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        insetLabelId: PropTypes.Requireable<string>;
        zIndex: PropTypes.Requireable<number>;
        getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
        dropdownMatchSelectWidth: PropTypes.Requireable<boolean>;
        validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
        mouseEnterDelay: PropTypes.Requireable<number>;
        mouseLeaveDelay: PropTypes.Requireable<number>;
        triggerRender: PropTypes.Requireable<(...args: any[]) => any>;
        stopPropagation: PropTypes.Requireable<NonNullable<string | boolean>>;
        outerBottomSlot: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        outerTopSlot: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        onVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
        expandAction: PropTypes.Requireable<false | "click" | "doubleClick">;
        searchPosition: PropTypes.Requireable<"trigger" | "dropdown">;
        clickToHide: PropTypes.Requireable<boolean>;
        renderLabel: PropTypes.Requireable<(...args: any[]) => any>;
        renderFullLabel: PropTypes.Requireable<(...args: any[]) => any>;
        labelEllipsis: PropTypes.Requireable<boolean>;
        optionListStyle: PropTypes.Requireable<object>;
        searchRender: PropTypes.Requireable<NonNullable<boolean | ((...args: any[]) => any)>>;
        renderSelectedItem: PropTypes.Requireable<(...args: any[]) => any>;
        checkRelation: PropTypes.Requireable<string>;
        'aria-label': PropTypes.Requireable<string>;
        showRestTagsPopover: PropTypes.Requireable<boolean>;
        restTagsPopoverProps: PropTypes.Requireable<object>;
        preventScroll: PropTypes.Requireable<boolean>;
        clickTriggerToHide: PropTypes.Requireable<boolean>;
        autoMergeValue: PropTypes.Requireable<boolean>;
    };
    static defaultProps: Partial<TreeSelectProps>;
    inputRef: React.RefObject<typeof Input>;
    tagInputRef: React.RefObject<TagInput>;
    triggerRef: React.RefObject<HTMLDivElement>;
    optionsRef: React.RefObject<any>;
    clickOutsideHandler: any;
    onNodeClick: any;
    onNodeDoubleClick: any;
    onMotionEnd: any;
    treeSelectID: string;
    context: ContextValue;
    constructor(props: TreeSelectProps);
    static getDerivedStateFromProps(props: TreeSelectProps, prevState: TreeSelectState): Partial<TreeSelectState>;
    get adapter(): TreeSelectAdapter<TreeSelectProps, TreeSelectState>;
    componentDidMount(): void;
    componentWillUnmount(): void;
    renderSuffix: () => React.JSX.Element;
    renderPrefix: () => React.JSX.Element;
    renderContent: () => React.JSX.Element;
    removeTag: (removedKey: TreeNodeData['key']) => void;
    handleClick: (e: React.MouseEvent) => void;
    getDataForKeyNotInKeyEntities: (key: string) => any;
    handleSelectionEnterPress: (e: React.KeyboardEvent<HTMLDivElement>) => void;
    hasValue: () => boolean;
    showClearBtn: () => boolean;
    renderTagList: (triggerRenderKeys: string[]) => React.ReactNode[];
    /**
     * When single selection and the search box is on trigger, the items displayed in the rendered search box
     */
    renderSingleTriggerSearchItem: () => React.JSX.Element;
    /**
     * Single selection and the search box content rendered when the search box is on trigger
     */
    renderSingleTriggerSearch: () => React.JSX.Element;
    renderSelectContent: (triggerRenderKeys: string[]) => React.JSX.Element;
    handleClear: (e: React.MouseEvent) => void;
    handleClearEnterPress: (e: React.KeyboardEvent<HTMLDivElement>) => void;
    handleMouseOver: (e: React.MouseEvent) => void;
    handleMouseLeave: (e: React.MouseEvent) => void;
    search: (value: string) => void;
    close: () => void;
    renderArrow: () => React.JSX.Element;
    renderClearBtn: () => React.JSX.Element;
    renderSelection: () => React.JSX.Element;
    renderTagItem: (key: string, idx: number) => any;
    renderTagInput: (triggerRenderKeys: string[]) => React.JSX.Element;
    renderInput: () => React.JSX.Element;
    renderEmpty: () => React.JSX.Element;
    onNodeLoad: (data: TreeNodeData) => Promise<unknown>;
    onNodeSelect: (e: React.MouseEvent | React.KeyboardEvent, treeNode: TreeNodeProps) => void;
    onNodeCheck: (e: React.MouseEvent | React.KeyboardEvent, treeNode: TreeNodeProps) => void;
    onNodeExpand: (e: React.MouseEvent | React.KeyboardEvent, treeNode: TreeNodeProps) => void;
    getTreeNodeRequiredProps: () => {
        expandedKeys: Set<string>;
        selectedKeys: string[];
        checkedKeys: Set<string>;
        halfCheckedKeys: Set<string>;
        filteredKeys: Set<string>;
        keyEntities: import("../tree/interface").KeyEntities;
    };
    getTreeNodeKey: (treeNode: TreeNodeData) => string;
    handlePopoverVisibleChange: (isVisible: any) => void;
    afterClose: () => void;
    renderTreeNode: (treeNode: FlattenNode, ind: number, style: React.CSSProperties) => React.JSX.Element;
    itemKey: (index: number, data: Record<string, any>) => any;
    renderNodeList: () => React.JSX.Element;
    renderTree: () => React.JSX.Element;
    render(): React.JSX.Element;
}
export default TreeSelect;