@laser-ui/components 0.0.1

package/transfer/Transfer.js

@@ -0,0 +1,156 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ReactComponent as KeyboardArrowLeftOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg';
+import { ReactComponent as KeyboardArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg';
+import { isUndefined } from 'lodash';
+import { useMemo } from 'react';
+import { TransferPanel } from './internal/TransferPanel';
+import { CLASSES, IS_SELECTED } from './vars';
+import { Button } from '../button';
+import { useComponentProps, useControlled, useDesign, useNamespace, useScopedProps, useStyled } from '../hooks';
+import { Icon } from '../icon';
+import { mergeCS } from '../utils';
+export function Transfer(props) {
+    var _a, _b;
+    const _c = useComponentProps('Transfer', props), { styleOverrides, styleProvider, formControl, list: listProp, model, defaultModel, selected: selectedProp, defaultSelected, searchable = false, searchValue: searchValueProp, defaultSearchValue, title, loading = [false, false], disabled: disabledProp = false, virtual = false, customItem, customSearch, onModelChange, onSelectedChange, onSearch, onScrollBottom } = _c, restProps = __rest(_c, ["styleOverrides", "styleProvider", "formControl", "list", "model", "defaultModel", "selected", "defaultSelected", "searchable", "searchValue", "defaultSearchValue", "title", "loading", "disabled", "virtual", "customItem", "customSearch", "onModelChange", "onSelectedChange", "onSearch", "onScrollBottom"]);
+    const namespace = useNamespace();
+    const styled = useStyled(CLASSES, { transfer: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.transfer }, styleOverrides);
+    const itemsMap = useMemo(() => new Map(listProp.map((item) => [item.value, item])), [listProp]);
+    const [_valueRight, changeValueRight] = useControlled(defaultModel !== null && defaultModel !== void 0 ? defaultModel : [], model, (value) => {
+        if (onModelChange) {
+            onModelChange(value, value.map((v) => itemsMap.get(v)));
+        }
+    }, undefined, formControl === null || formControl === void 0 ? void 0 : formControl.control);
+    const valueRight = useMemo(() => new Set(_valueRight), [_valueRight]);
+    const [_selected, changeSelected] = useControlled(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : [], selectedProp, (value) => {
+        if (onSelectedChange) {
+            onSelectedChange(value, value.map((v) => itemsMap.get(v)));
+        }
+    });
+    const selected = useMemo(() => new Set(_selected), [_selected]);
+    const [searchValue, changeSearchValue] = useControlled(defaultSearchValue !== null && defaultSearchValue !== void 0 ? defaultSearchValue : ['', ''], searchValueProp, onSearch);
+    const { disabled } = useScopedProps({ disabled: disabledProp || (formControl === null || formControl === void 0 ? void 0 : formControl.control.disabled) });
+    const [list, selectedCount, state] = (() => {
+        const list = [[], []];
+        const selectedCount = [0, 0];
+        const empty = [true, true];
+        const allSelected = [true, true];
+        const hasSelected = [false, false];
+        const filterFn = isUndefined(customSearch === null || customSearch === void 0 ? void 0 : customSearch.filter)
+            ? (item, searchValue) => item.label.includes(searchValue)
+            : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                (item, searchValue) => customSearch.filter(searchValue, item);
+        const sortFn = customSearch === null || customSearch === void 0 ? void 0 : customSearch.sort;
+        listProp.forEach((item) => {
+            const index = valueRight.has(item.value) ? 1 : 0;
+            const newItem = Object.assign({ [IS_SELECTED]: false }, item);
+            const search = searchValue[index];
+            if (!search || filterFn(item, search)) {
+                if (selected.has(item.value)) {
+                    newItem[IS_SELECTED] = true;
+                    selectedCount[index] += 1;
+                    if (!item.disabled) {
+                        hasSelected[index] = true;
+                    }
+                }
+                else {
+                    if (!item.disabled) {
+                        allSelected[index] = false;
+                    }
+                }
+                list[index].push(newItem);
+                if (!item.disabled) {
+                    empty[index] = false;
+                }
+            }
+        });
+        if (searchValue[0] && sortFn) {
+            list[0].sort(sortFn);
+        }
+        if (searchValue[1] && sortFn) {
+            list[1].sort(sortFn);
+        }
+        const state = [0, 1].map((index) => (empty[index] ? false : allSelected[index] ? true : hasSelected[index] ? 'mixed' : false));
+        return [list, selectedCount, state];
+    })();
+    const handleSelectedChange = (val) => {
+        changeSelected((draft) => {
+            const index = draft.findIndex((v) => v === val);
+            if (index !== -1) {
+                draft.splice(index, 1);
+            }
+            else {
+                draft.push(val);
+            }
+        });
+    };
+    const handleAllSelectedChange = (selected, isLeft) => {
+        changeSelected((draft) => {
+            const newSelected = new Set(draft);
+            for (const item of isLeft ? list[0] : list[1]) {
+                if (item.disabled) {
+                    continue;
+                }
+                if (selected && !item[IS_SELECTED]) {
+                    newSelected.add(item.value);
+                }
+                else if (!selected && item[IS_SELECTED]) {
+                    newSelected.delete(item.value);
+                }
+            }
+            return Array.from(newSelected);
+        });
+    };
+    const handleButtonClick = (isLeft) => {
+        changeValueRight((draft) => {
+            const newValueRight = new Set(draft);
+            (isLeft ? list[0] : list[1]).forEach((item) => {
+                if (item[IS_SELECTED]) {
+                    if (isLeft) {
+                        newValueRight.add(item.value);
+                    }
+                    else {
+                        newValueRight.delete(item.value);
+                    }
+                }
+            });
+            return Array.from(newValueRight);
+        });
+        changeSelected((draft) => {
+            const newSelected = new Set(draft);
+            (isLeft ? list[0] : list[1]).forEach((item) => {
+                if (item[IS_SELECTED]) {
+                    newSelected.delete(item.value);
+                }
+            });
+            return Array.from(newSelected);
+        });
+    };
+    const designProps = useDesign({ form: formControl });
+    return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('transfer', {
+        'transfer.is-disabled': disabled,
+    }), {
+        className: restProps.className,
+        style: restProps.style,
+    }), designProps, { children: [_jsx(TransferPanel, { namespace: namespace, styled: styled, list: list[0], selectedCount: selectedCount[0], state: state[0], title: title === null || title === void 0 ? void 0 : title[0], loading: (_a = loading[0]) !== null && _a !== void 0 ? _a : false, searchable: searchable, virtual: virtual, customItem: customItem, onSelectedChange: handleSelectedChange, onAllSelectedChange: (selected) => {
+                    handleAllSelectedChange(selected, true);
+                }, onSearch: (val) => {
+                    changeSearchValue((draft) => {
+                        draft[0] = val;
+                    });
+                }, onScrollBottom: () => {
+                    onScrollBottom === null || onScrollBottom === void 0 ? void 0 : onScrollBottom('left');
+                } }), _jsxs("div", Object.assign({}, styled('transfer__actions'), { children: [_jsx(Button, { disabled: state[0] === false, pattern: "secondary", icon: _jsx(Icon, { children: _jsx(KeyboardArrowRightOutlined, {}) }), onClick: () => {
+                            handleButtonClick(true);
+                        } }), _jsx(Button, { disabled: state[1] === false, pattern: "secondary", icon: _jsx(Icon, { children: _jsx(KeyboardArrowLeftOutlined, {}) }), onClick: () => {
+                            handleButtonClick(false);
+                        } })] })), _jsx(TransferPanel, { namespace: namespace, styled: styled, list: list[1], selectedCount: selectedCount[1], state: state[1], title: title === null || title === void 0 ? void 0 : title[1], loading: (_b = loading[1]) !== null && _b !== void 0 ? _b : false, searchable: searchable, virtual: virtual, customItem: customItem, onSelectedChange: handleSelectedChange, onAllSelectedChange: (selected) => {
+                    handleAllSelectedChange(selected, false);
+                }, onSearch: (val) => {
+                    changeSearchValue((draft) => {
+                        draft[1] = val;
+                    });
+                }, onScrollBottom: () => {
+                    onScrollBottom === null || onScrollBottom === void 0 ? void 0 : onScrollBottom('right');
+                } })] })));
+}

package/transfer/index.d.ts

@@ -0,0 +1,2 @@
+export type { TransferProps } from './types';
+export { Transfer } from './Transfer';

package/transfer/index.js

@@ -0,0 +1 @@
+export { Transfer } from './Transfer';

package/transfer/internal/TransferPanel.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import type { Styled } from '../../hooks/useStyled';
+import type { TransferItem } from '../types';
+import { type CLASSES } from '../vars';
+export interface TransferPanelProps<V extends React.Key, T extends TransferItem<V>> {
+    namespace: string;
+    styled: Styled<typeof CLASSES>;
+    list: T[];
+    selectedCount: number;
+    state: boolean | 'mixed';
+    title: React.ReactNode;
+    loading: boolean;
+    searchable: boolean;
+    virtual: boolean | number;
+    customItem: ((item: T) => React.ReactNode) | undefined;
+    onSelectedChange: (value: V) => void;
+    onAllSelectedChange: (selected: boolean) => void;
+    onSearch: (value: string) => void;
+    onScrollBottom: () => void;
+}
+export declare function TransferPanel<V extends React.Key, T extends TransferItem<V>>(props: TransferPanelProps<V, T>): JSX.Element | null;

package/transfer/internal/TransferPanel.js

@@ -0,0 +1,42 @@
+import { createElement as _createElement } from "react";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { checkNodeExist } from '@laser-ui/utils';
+import { ReactComponent as SearchOutlined } from '@material-design-icons/svg/outlined/search.svg';
+import { isNumber } from 'lodash';
+import { useCallback, useId, useMemo, useRef } from 'react';
+import { Checkbox } from '../../checkbox';
+import { Empty } from '../../empty';
+import { useTranslation } from '../../hooks';
+import { Icon } from '../../icon';
+import { Input } from '../../input';
+import { CircularProgress } from '../../internal/circular-progress';
+import { VirtualScroll } from '../../virtual-scroll';
+import { IS_SELECTED } from '../vars';
+export function TransferPanel(props) {
+    const { namespace, styled, list, selectedCount, state, title, loading, searchable, virtual, customItem, onSelectedChange, onAllSelectedChange, onSearch, onScrollBottom, } = props;
+    const { t } = useTranslation();
+    const vsRef = useRef(null);
+    const uniqueId = useId();
+    const getItemId = (val) => `${namespace}-transfer-item-${val}-${uniqueId}`;
+    const canSelectedItem = useCallback((item) => !item.disabled, []);
+    const vsProps = useMemo(() => ({
+        list,
+        itemKey: (item) => item.value,
+        itemSize: isNumber(virtual) ? virtual : 32,
+        itemFocusable: canSelectedItem,
+    }), [canSelectedItem, list, virtual]);
+    return (_jsxs("div", Object.assign({}, styled('transfer__panel'), { children: [_jsxs("div", Object.assign({}, styled('transfer__header'), { children: [_jsxs(Checkbox, { model: state === true, indeterminate: state === 'mixed', disabled: list.length === 0, onModelChange: (checked) => {
+                            onAllSelectedChange(checked);
+                        }, children: [selectedCount, "/", list.length] }), checkNodeExist(title) && _jsx("div", Object.assign({}, styled('transfer__header-title'), { children: title }))] })), searchable && (_jsx("div", Object.assign({}, styled('transfer__search'), { children: _jsx(Input, { style: { display: 'flex' }, placeholder: t('Search'), prefix: _jsx(Icon, { children: _jsx(SearchOutlined, {}) }), clearable: true, onModelChange: onSearch }) }))), _jsxs("div", Object.assign({}, styled('transfer__list-container'), { children: [loading && (_jsx("div", Object.assign({}, styled('transfer__loading'), { children: _jsx(Icon, { children: _jsx(CircularProgress, {}) }) }))), _jsx(VirtualScroll, Object.assign({}, vsProps, { ref: vsRef, enable: virtual !== false, listSize: 192, listPadding: 0, itemRender: (item, index, props) => {
+                            const { label: itemLabel, value: itemValue, disabled: itemDisabled } = item;
+                            return (_createElement("li", Object.assign({}, styled('transfer__option', {
+                                'transfer__option.is-disabled': itemDisabled,
+                            }), props, { key: itemValue, id: getItemId(itemValue), title: itemLabel, onClick: () => {
+                                    if (!itemDisabled) {
+                                        onSelectedChange === null || onSelectedChange === void 0 ? void 0 : onSelectedChange(itemValue);
+                                    }
+                                } }),
+                                _jsx("div", Object.assign({}, styled('transfer__option-prefix'), { children: _jsx(Checkbox, { model: item[IS_SELECTED], disabled: itemDisabled }) })),
+                                _jsx("div", Object.assign({}, styled('transfer__option-content'), { children: customItem ? customItem(item) : itemLabel }))));
+                        }, placeholder: "li", onScrollEnd: onScrollBottom, children: (vsList, onScroll) => (_jsx("ul", Object.assign({}, styled('transfer__list'), { onScroll: onScroll, children: list.length === 0 ? _jsx(Empty, { style: { marginTop: 32 }, image: Empty.SIMPLE_IMG }) : vsList }))) }))] }))] })));
+}

package/transfer/types.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import type { CLASSES } from './vars';
+import type { FormControlProvider } from '../form/types';
+import type { BaseProps } from '../types';
+export {};
+export interface TransferItem<V extends React.Key> {
+    label: string;
+    value: V;
+    disabled?: boolean;
+}
+export interface TransferProps<V extends React.Key, T extends TransferItem<V>> extends BaseProps<'transfer', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {
+    formControl?: FormControlProvider;
+    list: T[];
+    model?: V[];
+    defaultModel?: V[];
+    selected?: V[];
+    defaultSelected?: V[];
+    searchable?: boolean;
+    searchValue?: [string, string];
+    defaultSearchValue?: [string, string];
+    title?: [React.ReactNode?, React.ReactNode?];
+    loading?: [boolean?, boolean?];
+    disabled?: boolean;
+    virtual?: boolean | number;
+    customItem?: (item: T) => React.ReactNode;
+    customSearch?: {
+        filter?: (value: string, item: T) => boolean;
+        sort?: (a: T, b: T) => number;
+    };
+    onModelChange?: (value: V[], item: T[]) => void;
+    onSelectedChange?: (value: V[], item: T[]) => void;
+    onSearch?: (value: [string, string]) => void;
+    onScrollBottom?: (direction: 'left' | 'right') => void;
+}

package/transfer/types.js

@@ -0,0 +1 @@
+export {};

package/transfer/vars.d.ts

@@ -0,0 +1,17 @@
+export declare const CLASSES: {
+    transfer: string;
+    'transfer.is-disabled': string;
+    transfer__panel: string;
+    transfer__actions: string;
+    transfer__header: string;
+    'transfer__header-title': string;
+    transfer__search: string;
+    'transfer__list-container': string;
+    transfer__list: string;
+    transfer__loading: string;
+    transfer__option: string;
+    'transfer__option.is-disabled': string;
+    'transfer__option-prefix': string;
+    'transfer__option-content': string;
+};
+export declare const IS_SELECTED: unique symbol;

package/transfer/vars.js

@@ -0,0 +1,17 @@
+export const CLASSES = {
+    transfer: '^transfer',
+    'transfer.is-disabled': 'is-disabled',
+    transfer__panel: '^transfer__panel',
+    transfer__actions: '^transfer__actions',
+    transfer__header: '^transfer__header',
+    'transfer__header-title': '^transfer__header-title',
+    transfer__search: '^transfer__search',
+    'transfer__list-container': '^transfer__list-container',
+    transfer__list: '^transfer__list',
+    transfer__loading: '^transfer__loading',
+    transfer__option: '^transfer__option',
+    'transfer__option.is-disabled': 'is-disabled',
+    'transfer__option-prefix': '^transfer__option-prefix',
+    'transfer__option-content': '^transfer__option-content',
+};
+export const IS_SELECTED = Symbol();

package/tree/Tree.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { TreeItem, TreeProps } from './types';
+export declare function Tree<V extends React.Key, T extends TreeItem<V>>(props: TreeProps<V, T>): JSX.Element | null;

package/tree/Tree.js

@@ -0,0 +1,165 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { findNested } from '@laser-ui/utils';
+import { isNull, isUndefined } from 'lodash';
+import { useId, useMemo, useRef, useState } from 'react';
+import { TreePanel } from './internal/TreePanel';
+import { MultipleTreeNode } from './node/multiple-node';
+import { SingleTreeNode } from './node/single-node';
+import { CLASSES } from './vars';
+import { useComponentProps, useControlled, useFocusVisible, useNamespace, useScopedProps, useStyled } from '../hooks';
+export function Tree(props) {
+    var _a;
+    const _b = useComponentProps('Tree', props), { styleOverrides, styleProvider, formControl, list, model, defaultModel, expands: expandsProp, defaultExpands, showLine = false, multiple = false, onlyLeafSelectable = true, disabled: disabledProp = false, virtual, customItem, onModelChange, onFirstExpand, onExpandsChange, onScrollBottom } = _b, restProps = __rest(_b, ["styleOverrides", "styleProvider", "formControl", "list", "model", "defaultModel", "expands", "defaultExpands", "showLine", "multiple", "onlyLeafSelectable", "disabled", "virtual", "customItem", "onModelChange", "onFirstExpand", "onExpandsChange", "onScrollBottom"]);
+    const namespace = useNamespace();
+    const styled = useStyled(CLASSES, { tree: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.tree }, styleOverrides);
+    const focusRef = useRef(null);
+    const dataRef = useRef({
+        expands: new Set(),
+    });
+    const uniqueId = useId();
+    const getItemId = (val) => `${namespace}-tree-item-${val}-${uniqueId}`;
+    const [nodes, nodesMap] = useMemo(() => {
+        const nodes = list.map((item) => multiple
+            ? new MultipleTreeNode(item, (origin) => origin.value, {
+                disabled: item.disabled,
+            })
+            : new SingleTreeNode(item, (origin) => origin.value, {
+                disabled: item.disabled,
+            }));
+        const nodesMap = new Map();
+        const reduceArr = (arr) => {
+            for (const item of arr) {
+                nodesMap.set(item.id, item);
+                if (item.children) {
+                    reduceArr(item.children);
+                }
+            }
+        };
+        reduceArr(nodes);
+        return [nodes, nodesMap];
+    }, [list, multiple]);
+    const [_selected, changeSelected] = useControlled(defaultModel !== null && defaultModel !== void 0 ? defaultModel : (multiple ? [] : null), model, (value) => {
+        if (onModelChange) {
+            if (multiple) {
+                onModelChange(value, value.map((v) => nodesMap.get(v).origin));
+            }
+            else {
+                onModelChange(value, isNull(value) ? null : nodesMap.get(value).origin);
+            }
+        }
+    }, undefined, formControl === null || formControl === void 0 ? void 0 : formControl.control);
+    const selected = useMemo(() => (multiple ? new Set(_selected) : _selected), [_selected, multiple]);
+    nodesMap.forEach((node) => {
+        node.updateStatus(selected);
+    });
+    const [_expands, changeExpands] = useControlled(defaultExpands !== null && defaultExpands !== void 0 ? defaultExpands : [], expandsProp, (value) => {
+        if (onExpandsChange) {
+            onExpandsChange(value, value.map((v) => nodesMap.get(v).origin));
+        }
+    });
+    const expands = useMemo(() => new Set(_expands), [_expands]);
+    const { disabled } = useScopedProps({ disabled: disabledProp || (formControl === null || formControl === void 0 ? void 0 : formControl.control.disabled) });
+    const hasSelected = multiple ? selected.size > 0 : !isNull(selected);
+    const [focusVisible, focusVisibleWrapper] = useFocusVisible((code) => code.startsWith('Arrow') || ['Home', 'End', 'Enter', 'Space'].includes(code));
+    const [_focused, setFocused] = useState();
+    const focused = (() => {
+        let node;
+        if (_focused) {
+            node = nodesMap.get(_focused.id);
+            if (node && node.enabled) {
+                return node;
+            }
+        }
+        if (hasSelected) {
+            node = findNested(nodes, (node) => node.enabled && node.checked);
+        }
+        if (isUndefined(node)) {
+            node = findNested(nodes, (node) => node.enabled);
+        }
+        return node;
+    })();
+    const handleExpand = (node) => {
+        const isExpand = expands.has(node.id);
+        if (!node.origin.loading) {
+            if (isExpand) {
+                changeExpands((draft) => {
+                    draft.splice(draft.findIndex((id) => id === node.id), 1);
+                });
+            }
+            else {
+                if (!dataRef.current.expands.has(node.id)) {
+                    dataRef.current.expands.add(node.id);
+                    onFirstExpand === null || onFirstExpand === void 0 ? void 0 : onFirstExpand(node.id, node.origin);
+                }
+                changeExpands((draft) => {
+                    draft.push(node.id);
+                });
+            }
+        }
+    };
+    const handleClick = (node) => {
+        if (multiple) {
+            const checkeds = node.changeStatus(node.checked ? 'UNCHECKED' : 'CHECKED', selected);
+            changeSelected(Array.from(checkeds.keys()));
+        }
+        else {
+            if (node.isLeaf || !onlyLeafSelectable) {
+                changeSelected(node.id);
+            }
+        }
+    };
+    return focusVisibleWrapper(_jsx(TreePanel, Object.assign({}, restProps, { ref: focusRef, tabIndex: (_a = restProps.tabIndex) !== null && _a !== void 0 ? _a : (disabled ? -1 : 0), onKeyDown: (e) => {
+            var _a;
+            (_a = restProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+            const focusItem = (code) => {
+                if (focusRef.current) {
+                    const item = focusRef.current(code);
+                    if (item) {
+                        setFocused(item);
+                        if (!virtual && !code.includes('level')) {
+                            const el = document.getElementById(getItemId(item.id));
+                            if (el) {
+                                focusRef.current(el);
+                            }
+                        }
+                    }
+                }
+            };
+            switch (e.code) {
+                case 'ArrowUp':
+                    e.preventDefault();
+                    focusItem('prev');
+                    break;
+                case 'ArrowDown':
+                    e.preventDefault();
+                    focusItem('next');
+                    break;
+                case 'ArrowLeft':
+                    e.preventDefault();
+                    focusItem('prev-level');
+                    break;
+                case 'ArrowRight':
+                    e.preventDefault();
+                    focusItem('next-level');
+                    break;
+                case 'Home':
+                    e.preventDefault();
+                    focusItem('first');
+                    break;
+                case 'End':
+                    e.preventDefault();
+                    focusItem('last');
+                    break;
+                case 'Enter':
+                case 'Space':
+                    e.preventDefault();
+                    if (focused) {
+                        handleClick(focused);
+                    }
+                    break;
+                default:
+                    break;
+            }
+        }, namespace: namespace, styled: styled, list: nodes, itemId: getItemId, itemSelected: !multiple && hasSelected ? nodesMap.get(selected) : undefined, itemFocused: focused, expands: expands, customItem: customItem, showLine: showLine, multiple: multiple, onlyLeafSelectable: onlyLeafSelectable, disabled: disabled, virtual: virtual, focusVisible: focusVisible, onNodeFocus: setFocused, onNodeExpand: handleExpand, onNodeClick: handleClick, onScrollBottom: onScrollBottom })));
+}

package/tree/index.d.ts

@@ -0,0 +1,2 @@
+export type { TreeProps } from './types';
+export { Tree } from './Tree';

package/tree/index.js

@@ -0,0 +1 @@
+export { Tree } from './Tree';

package/tree/internal/TreePanel.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import type { Styled } from '../../hooks/useStyled';
+import type { AbstractTreeNode } from '../node/abstract-node';
+import type { TreeItem } from '../types';
+import type { CLASSES } from '../vars';
+interface TreePanelProps<V extends React.Key, T extends TreeItem<V>> extends Omit<React.HTMLAttributes<HTMLUListElement>, 'children'> {
+    namespace: string;
+    styled: Styled<typeof CLASSES>;
+    list: AbstractTreeNode<V, T>[];
+    itemId: (value: V) => string;
+    itemSelected: AbstractTreeNode<V, T> | undefined;
+    itemFocused: AbstractTreeNode<V, T> | undefined;
+    expands: Set<V>;
+    customItem: ((item: T) => React.ReactNode) | undefined;
+    showLine: boolean;
+    multiple: boolean;
+    onlyLeafSelectable: boolean;
+    disabled: boolean;
+    virtual: {
+        listSize: number;
+        listPadding: number;
+        itemSize?: number;
+    } | undefined;
+    focusVisible: boolean;
+    onNodeFocus: (node: AbstractTreeNode<V, T>) => void;
+    onNodeExpand: (node: AbstractTreeNode<V, T>) => void;
+    onNodeClick: (node: AbstractTreeNode<V, T>) => void;
+    onScrollBottom: (() => void) | undefined;
+}
+declare function TreePanelFC<V extends React.Key, T extends TreeItem<V>>(props: TreePanelProps<V, T>, ref: React.ForwardedRef<any>): JSX.Element | null;
+export declare const TreePanel: <V extends React.Key, T extends TreeItem<V>>(props: TreePanelProps<V, T> & React.RefAttributes<any>) => ReturnType<typeof TreePanelFC>;
+export {};