@canlooks/can-ui 0.0.1

package/dist/esm/components/transfer/transfer.style.js

@@ -0,0 +1,71 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+import { menuListPadding } from '../menuItem/menuItem.style';
+export const classes = defineClasses('transfer', [
+    'panel',
+    'header',
+    'checkbox',
+    'info',
+    'title',
+    'count',
+    'list',
+    'buttons',
+]);
+export const style = defineCss(({ spacing, background, divider, borderRadius, text }) => css `
+    display: inline-flex;
+    gap: ${spacing[3]}px;
+
+    .${classes.panel} {
+        width: 180px;
+        background-color: ${background.card};
+        border: 1px solid ${divider};
+        border-radius: ${borderRadius}px;
+        display: flex;
+        flex-direction: column;
+
+        .${classes.header} {
+            display: flex;
+            gap: ${spacing[2]}px;
+            align-items: center;
+            padding: 10px 16px;
+            border-bottom: 1px solid ${divider};
+
+            .${classes.checkbox} {
+                display: flex;
+            }
+
+            .${classes.title} {
+                flex: 1
+            }
+
+            .${classes.count} {
+                color: ${text.secondary};
+            }
+        }
+
+        .${classes.list} {
+            flex: 1;
+            padding: ${menuListPadding}px;
+
+            > * {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+
+    &[data-full-width=true] {
+        width: 100%;
+
+        .${classes.panel} {
+            flex: 1;
+        }
+    }
+
+    .${classes.buttons} {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: ${spacing[3]}px;
+    }
+`);

package/dist/esm/components/transfer/transferPanel.d.ts

@@ -0,0 +1,16 @@
+import { ReactElement, ReactNode } from 'react';
+import { DIVProps, Id } from '../../../types';
+import { MenuOptionType, OptionsBaseProps } from '../optionsBase';
+type ListProps<O extends MenuOptionType<V>, V extends Id = Id> = Pick<OptionsBaseProps<O, V>, 'options' | 'selectedValue' | 'primaryKey' | 'onToggleSelected'>;
+export interface TransferPanelProps<O extends MenuOptionType<V>, V extends Id = Id> extends Omit<DIVProps, 'title' | 'onChange'> {
+    title?: ReactNode;
+    type?: 'left' | 'right';
+    selectedValue?: V[];
+    onChange?(selectedValue: V[]): void;
+    /** 自定义渲染列表 */
+    renderList?(listProps: ListProps<O, V>): ReactNode;
+    /** 自定义渲染每一项，仅未指定renderList时生效 */
+    renderItem?(item: O, index: number, listProps: ListProps<O, V>): ReactNode;
+}
+export declare const TransferPanel: <O extends MenuOptionType<V>, V extends Id = Id>(props: TransferPanelProps<O, V>) => ReactElement;
+export {};

package/dist/esm/components/transfer/transferPanel.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef, memo, useMemo } from 'react';
+import { classes } from './transfer.style';
+import { Checkbox } from '../checkbox';
+import { useTransferContext } from './transfer';
+import { OptionsBase } from '../optionsBase';
+export const TransferPanel = memo(forwardRef(({ title, type = 'left', selectedValue = [], onChange, renderList, renderItem, ...props }, ref) => {
+    const { options, primaryKey, value, allowSelectAll, showHeader } = useTransferContext();
+    const selfOptions = useMemo(() => {
+        const valueSet = new Set(value);
+        return options.filter(o => {
+            const has = valueSet.has(o[primaryKey]);
+            return type === 'left' ? !has : has;
+        });
+    }, [value, options, primaryKey, type]);
+    const onToggleSelected = (value) => {
+        onChange?.(selectedValue.includes(value)
+            ? selectedValue.filter(v => v !== value)
+            : [...selectedValue, value]);
+    };
+    const toggleAllHandler = () => {
+        onChange?.(selfOptions.length && selfOptions.length === selectedValue.length
+            ? []
+            : selfOptions.map(v => v[primaryKey]));
+    };
+    const renderedList = (() => {
+        const listProps = {
+            options: selfOptions,
+            selectedValue,
+            primaryKey,
+            onToggleSelected
+        };
+        if (renderList) {
+            return renderList(listProps);
+        }
+        if (renderItem) {
+            return selfOptions.map((item, index) => renderItem(item, index, listProps));
+        }
+        return _jsx(OptionsBase, { ...listProps, showCheckbox: true });
+    })();
+    return (_jsxs("div", { ...props, ref: ref, className: classes.panel, children: [showHeader &&
+                _jsxs("div", { className: classes.header, children: [allowSelectAll &&
+                            _jsx("div", { className: classes.checkbox, children: _jsx(Checkbox, { disabled: !selfOptions.length, checked: !!selfOptions.length && selfOptions.length === selectedValue.length, indeterminate: !!selectedValue.length && selectedValue.length < selfOptions.length, onChange: toggleAllHandler }) }), _jsx("div", { className: classes.title, children: title }), _jsxs("small", { className: classes.count, children: [selectedValue.length, " / ", selfOptions.length] })] }), !!renderedList &&
+                _jsx("div", { className: classes.list, children: renderedList })] }));
+}));

package/dist/esm/components/transitionBase/collapse.d.ts

@@ -0,0 +1,18 @@
+import { ReactElement } from 'react';
+import { TransitionBaseProps } from './transitionBase';
+export interface CollapseProps<T extends HTMLElement = HTMLElement> extends TransitionBaseProps<T> {
+    /**
+     * 动画实现的方式
+     * @enum {"sweeping"}: 通过修改width或height实现
+     * @enum {"scaling"}: 通过transform实现
+     * @default "sweeping"
+     */
+    transitionType?: 'sweeping' | 'scaling';
+    /**
+     * 设定折叠后的尺寸
+     * {@link transitionType}为"sweeping"时有效
+     * @default 0
+     */
+    collapsedSize?: number | (() => number);
+}
+export declare const Collapse: <T extends HTMLElement>(props: CollapseProps<T>) => ReactElement;

package/dist/esm/components/transitionBase/collapse.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { TransitionBase } from './transitionBase';
+import { cloneRef } from '../../utils';
+export const Collapse = forwardRef(({ transitionType = 'sweeping', ...props }, ref) => {
+    const Component = transitionType === 'sweeping' ? Sweeping : TransitionBase;
+    return (_jsx(Component, { ...props, ref: ref, _mode: transitionType === 'sweeping' ? '_sweeping' : 'collapse' }));
+});
+const Sweeping = forwardRef(({ in: _in = false, appear = true, orientation = 'vertical', collapsedSize = 0, ...props }, ref) => {
+    const innerRef = useRef(null);
+    const styleProperty = orientation === 'vertical' ? 'height' : 'width';
+    const sizeProperty = orientation === 'vertical' ? 'clientHeight' : 'clientWidth';
+    const getCollapsedSize = () => {
+        return typeof collapsedSize === 'function' ? collapsedSize() : collapsedSize;
+    };
+    const [size, setSize] = useState(_in && !appear ? void 0 : getCollapsedSize());
+    const shouldEntering = useRef(appear);
+    useEffect(() => {
+        if (!innerRef.current) {
+            return;
+        }
+        const el = innerRef.current;
+        if (!_in) {
+            el.style[styleProperty] = el[sizeProperty] + 'px';
+            setSize(getCollapsedSize());
+        }
+        else if (shouldEntering.current) {
+            const startSize = el[sizeProperty];
+            el.style.transition = 'none';
+            el.style[styleProperty] = '';
+            const endSize = el[sizeProperty];
+            el.style[styleProperty] = startSize + 'px';
+            requestAnimationFrame(() => {
+                el.style.transition = '';
+                setSize(endSize);
+            });
+        }
+        shouldEntering.current = true;
+    }, [_in]);
+    const onEntered = (a) => {
+        props.onEntered?.(a);
+        setSize(void 0);
+    };
+    const onExited = () => {
+        props.onExited?.();
+        setSize(getCollapsedSize());
+    };
+    return (_jsx(TransitionBase, { ...props, in: _in, ref: cloneRef(ref, innerRef), style: {
+            [styleProperty]: size,
+            opacity: size === 0 ? 0 : 1,
+            ...props.style
+        }, onEntered: onEntered, onExited: onExited }));
+});

package/dist/esm/components/transitionBase/fade.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { TransitionBaseProps } from './transitionBase';
+export type FadeProps<T extends HTMLElement = HTMLElement> = TransitionBaseProps<T>;
+export declare const Fade: <T extends HTMLElement>(props: FadeProps<T>) => ReactElement;

package/dist/esm/components/transitionBase/fade.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from 'react';
+import { TransitionBase } from './transitionBase';
+export const Fade = forwardRef((props, ref) => {
+    return (_jsx(TransitionBase, { ...props, ref: ref, _mode: "fade" }));
+});

package/dist/esm/components/transitionBase/grow.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { TransitionBaseProps } from './transitionBase';
+export type GrowProps<T extends HTMLElement = HTMLElement> = TransitionBaseProps<T>;
+export declare const Grow: <T extends HTMLElement>(props: GrowProps<T>) => ReactElement;

package/dist/esm/components/transitionBase/grow.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from 'react';
+import { TransitionBase } from './transitionBase';
+export const Grow = forwardRef((props, ref) => {
+    return (_jsx(TransitionBase, { ...props, ref: ref, _mode: "grow" }));
+});

package/dist/esm/components/transitionBase/index.d.ts

@@ -0,0 +1,5 @@
+export * from './collapse';
+export * from './fade';
+export * from './grow';
+export * from './slide';
+export * from './transitionBase';

package/dist/esm/components/transitionBase/index.js

@@ -0,0 +1,5 @@
+export * from './collapse';
+export * from './fade';
+export * from './grow';
+export * from './slide';
+export * from './transitionBase';

package/dist/esm/components/transitionBase/slide.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { TransitionBaseProps } from './transitionBase';
+export type SlideProps<T extends HTMLElement = HTMLElement> = TransitionBaseProps<T>;
+export declare const Slide: <T extends HTMLElement>(props: SlideProps<T>) => ReactElement;

package/dist/esm/components/transitionBase/slide.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from 'react';
+import { TransitionBase } from './transitionBase';
+export const Slide = forwardRef((props, ref) => {
+    return (_jsx(TransitionBase, { ...props, ref: ref, _mode: "slide" }));
+});

package/dist/esm/components/transitionBase/transitionBase.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement } from 'react';
+import { TimeoutProps } from 'react-transition-group/Transition';
+export interface TransitionBaseProps<T extends HTMLElement = HTMLElement> extends Partial<TimeoutProps<T>> {
+    component?: any;
+    /** {@link _mode}"collapse"时生效，展开与收起的方向 @default "vertical" */
+    orientation?: 'vertical' | 'horizontal';
+    /** {@link _mode}"slide"时生效，滑入的方向 */
+    direction?: 'left' | 'right' | 'up' | 'down';
+    /** {@link _mode}"slide"时生效，滑入前的偏移量 */
+    offset?: string | number;
+    /** @private 内部使用，以下预设的过渡组件均继承该组件 */
+    _mode?: '_sweeping' | 'collapse' | 'grow' | 'fade' | 'slide';
+}
+export declare const TransitionBase: <T extends HTMLElement>(props: TransitionBaseProps<T>) => ReactElement;

package/dist/esm/components/transitionBase/transitionBase.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, useRef } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import { classes, fadeStyle, sweepingStyle, useGrowAndCollapseStyle, useSlideStyle, useTransitionBaseStyle } from './transitionBase.style';
+import { classnames, cloneRef } from '../../utils';
+export const TransitionBase = forwardRef(({ component: Component = 'div', orientation = 'vertical', direction = 'down', offset = '100%', timeout = 300, appear = true, _mode, ...props }, ref) => {
+    const cssArr = [
+        useTransitionBaseStyle({ timeout })
+    ];
+    if (typeof _mode !== 'undefined') {
+        if (_mode === '_sweeping') {
+            cssArr.push(sweepingStyle);
+        }
+        else {
+            cssArr.push(fadeStyle);
+            if (_mode === 'collapse' || _mode === 'grow') {
+                cssArr.push(useGrowAndCollapseStyle({ orientation, _mode }));
+            }
+            else if (_mode === 'slide') {
+                cssArr.push(useSlideStyle({ direction, offset }));
+            }
+        }
+    }
+    const innerRef = useRef(null);
+    return (_jsx(CSSTransition, { ...props, nodeRef: innerRef, className: classnames(classes.root, props.className), timeout: timeout, appear: appear, children: _jsx(Component, { ref: cloneRef(ref, innerRef), css: cssArr, children: props.children }) }));
+});

package/dist/esm/components/transitionBase/transitionBase.style.d.ts

@@ -0,0 +1,9 @@
+import { TransitionBaseProps } from './transitionBase';
+export declare const classes: {
+    root: string;
+};
+export declare function useTransitionBaseStyle({ timeout }: Required<Pick<TransitionBaseProps<any>, 'timeout'>>): import("@emotion/react").SerializedStyles;
+export declare const fadeStyle: () => import("@emotion/react").SerializedStyles;
+export declare const sweepingStyle: () => import("@emotion/react").SerializedStyles;
+export declare function useGrowAndCollapseStyle({ orientation, _mode }: Required<Pick<TransitionBaseProps<any>, 'orientation' | '_mode'>>): import("@emotion/react").SerializedStyles;
+export declare function useSlideStyle({ direction, offset }: Required<Pick<TransitionBaseProps<any>, 'direction' | 'offset'>>): import("@emotion/react").SerializedStyles;

package/dist/esm/components/transitionBase/transitionBase.style.js

@@ -0,0 +1,138 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss, useCss } from '../../utils';
+export const classes = defineClasses('transition-base');
+export function useTransitionBaseStyle({ timeout }) {
+    const timeoutIsNumber = typeof timeout === 'number';
+    return useCss(() => css `
+        ${timeoutIsNumber ? `transition-duration: ${timeout}ms;` : ''}
+
+        &.appear-active {
+            ${!timeoutIsNumber ? `transition-duration: ${timeout.appear}ms;` : ''}
+        }
+
+        &.enter-active {
+            ${!timeoutIsNumber ? `transition-duration: ${timeout.enter}ms;` : ''}
+        }
+
+        &.exit-active {
+            ${!timeoutIsNumber ? `transition-duration: ${timeout.exit}ms;` : ''}
+        }
+    `, [timeout]);
+}
+export const fadeStyle = defineCss(({ easing }) => css `
+    transition-property: opacity;
+    transition-timing-function: ${easing.easeOut};
+
+    &,
+    &.appear,
+    &.enter {
+        opacity: 0;
+    }
+
+    &.appear-active,
+    &.enter-active,
+    &.enter-done,
+    &.exit {
+        opacity: 1;
+    }
+
+    &.exit-active,
+    &.exit-done {
+        opacity: 0;
+    }
+`);
+export const sweepingStyle = defineCss(({ easing }) => css `
+    overflow: hidden;
+    transition-property: opacity, width, height;
+
+    &.appear-active,
+    &.enter-active {
+        transition-timing-function: ${easing.easeOut}, ${easing.bounce}, ${easing.bounce};
+    }
+
+    &.exit-active {
+        transition-timing-function: ${easing.easeOut};
+    }
+`);
+export function useGrowAndCollapseStyle({ orientation, _mode }) {
+    return useCss(({ easing }) => {
+        let transformMethod = _mode === 'grow'
+            ? 'scale'
+            : orientation === 'vertical'
+                ? 'scaleY'
+                : 'scaleX';
+        return css `
+            transition-property: opacity, transform;
+            ${_mode === 'collapse' ? `transform-origin: ${orientation === 'vertical' ? 'top' : 'left'};` : ''}
+            
+            &,
+            &.appear,
+            &.enter {
+                transform: ${transformMethod}(0);
+            }
+        
+            &.appear-active,
+            &.enter-active,
+            &.enter-done,
+            &.exit {
+                transform: scale(1);
+            }
+        
+            &.exit-active,
+            &.exit-done {
+                transform: ${transformMethod}(0);
+            }
+        
+            &.appear-active,
+            &.enter-active {
+                transition-timing-function: ${easing.easeOut}, ${easing.bounce};
+            }
+        
+            &.exit-active {
+                transition-timing-function: ${easing.easeOut};
+            }
+        `;
+    }, [orientation, _mode]);
+}
+export function useSlideStyle({ direction, offset }) {
+    return useCss(({ easing }) => {
+        const transformMethod = direction === 'up' || direction === 'down' ? 'translateY' : 'translateX';
+        let offsetValue = typeof offset === 'number' ? `${offset}px` : offset;
+        if (direction === 'down' || direction === 'right') {
+            offsetValue = '-' + offsetValue;
+        }
+        return css `
+            transition-property: opacity, transform;
+            
+            &,
+            &.appear,
+            &.enter {
+                pointer-events: none;
+                transform: ${transformMethod}(${offsetValue});
+            }
+        
+            &.appear-active,
+            &.enter-active,
+            &.enter-done,
+            &.exit {
+                pointer-events: inherit;
+                transform: translate(0);
+            }
+        
+            &.exit-active,
+            &.exit-done {
+                pointer-events: none;
+                transform: ${transformMethod}(${offsetValue});
+            }
+        
+            &.appear-active,
+            &.enter-active {
+                transition-timing-function: ${easing.easeOut}, ${easing.bounce};
+            }
+        
+            &.exit-active {
+                transition-timing-function: ${easing.easeOut};
+            }
+        `;
+    }, [direction, offset]);
+}

package/dist/esm/components/transportStyle/index.d.ts

@@ -0,0 +1 @@
+export * from './transportStyle';

package/dist/esm/components/transportStyle/index.js

@@ -0,0 +1 @@
+export * from './transportStyle';

package/dist/esm/components/transportStyle/transportStyle.d.ts

@@ -0,0 +1,30 @@
+import { CSSProperties } from 'react';
+import { DIVProps } from '../../../types';
+export interface TransportStyleProps extends DIVProps {
+    /** 交叉轴对齐方式 */
+    alignItems?: CSSProperties['alignItems'];
+    /** 平行轴对齐方式 */
+    justifyContent?: CSSProperties['justifyContent'];
+    alignSelf?: CSSProperties['alignSelf'];
+    justifySelf?: CSSProperties['justifySelf'];
+    flex?: CSSProperties['flex'];
+    /** 传递其他常用样式 */
+    width?: CSSProperties['width'];
+    minWidth?: CSSProperties['minWidth'];
+    maxWidth?: CSSProperties['maxWidth'];
+    height?: CSSProperties['height'];
+    minHeight?: CSSProperties['minHeight'];
+    maxHeight?: CSSProperties['maxHeight'];
+    lineHeight?: CSSProperties['lineHeight'];
+    padding?: CSSProperties['padding'];
+    paddingTop?: CSSProperties['paddingTop'];
+    paddingRight?: CSSProperties['paddingRight'];
+    paddingBottom?: CSSProperties['paddingBottom'];
+    paddingLeft?: CSSProperties['paddingLeft'];
+    margin?: CSSProperties['margin'];
+    marginTop?: CSSProperties['marginTop'];
+    marginRight?: CSSProperties['marginRight'];
+    marginBottom?: CSSProperties['marginBottom'];
+    marginLeft?: CSSProperties['marginLeft'];
+}
+export declare const TransportStyle: import("react").ForwardRefExoticComponent<Omit<TransportStyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/components/transportStyle/transportStyle.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from 'react';
+export const TransportStyle = forwardRef(({ alignItems, justifyContent, alignSelf, justifySelf, flex, width, minWidth, maxWidth, height, minHeight, maxHeight, lineHeight, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, margin, marginTop, marginRight, marginBottom, marginLeft, ...props }, ref) => {
+    return (_jsx("div", { ...props, ref: ref, style: {
+            alignItems, justifyContent, alignSelf, justifySelf, flex,
+            width, minWidth, maxWidth, height, minHeight, maxHeight, lineHeight,
+            padding, paddingTop, paddingRight, paddingBottom, paddingLeft,
+            margin, marginTop, marginRight, marginBottom, marginLeft,
+            ...props.style
+        } }));
+});

package/dist/esm/components/tree/index.d.ts

@@ -0,0 +1,2 @@
+export * from './tree';
+export * from './treeNode';

package/dist/esm/components/tree/index.js

@@ -0,0 +1,2 @@
+export * from './tree';
+export * from './treeNode';

package/dist/esm/components/tree/tree.d.ts

@@ -0,0 +1,48 @@
+import { ReactElement, ReactNode } from 'react';
+import { DIVProps, Id, Obj } from '../../../types';
+import { OptionType, SelectionContextBaseProps, SelectionContextMultipleProps, SelectionContextSingleProps } from '../selectionContext';
+import { InputProps } from '../input';
+import { TreeNode, TreeNodeProps } from './treeNode';
+export interface NodeType<V extends Id = Id> extends Omit<Partial<TreeNodeProps>, 'children'>, OptionType<V>, Obj {
+}
+export interface TreeBaseProps<N extends NodeType<V>, V extends Id = Id> extends Omit<SelectionContextBaseProps<N, V>, 'options'>, Omit<DIVProps, 'defaultValue' | 'onChange'> {
+    nodes?: N[];
+    labelKey?: keyof N;
+    searchTokenKey?: keyof N;
+    showLine?: boolean;
+    indent?: number;
+    renderExpandIcon?(nodeValue: V, isExpand: boolean, expanded: V[]): ReactNode;
+    showCheckbox?: boolean;
+    readOnly?: boolean;
+    /** 为true时，点击标签也会展开节点，@default false, 仅点击展开按钮才能展开节点 */
+    clickLabelToExpand?: boolean;
+    defaultExpanded?: V[];
+    expanded?: V[];
+    onExpandedChange?(expanded: V[], nodeValue: V, isExpand: boolean): void;
+    searchable?: boolean;
+    searchInputProps?: InputProps;
+    defaultSearchValue?: string;
+    searchValue?: string;
+    onSearchChange?(searchValue: string): void;
+}
+export interface TreeSingleProps<N extends NodeType<V>, V extends Id = Id> extends TreeBaseProps<N, V>, Omit<SelectionContextSingleProps<N, V>, 'options'> {
+}
+export interface TreeMultipleProps<N extends NodeType<V>, V extends Id = Id> extends TreeBaseProps<N, V>, Omit<SelectionContextMultipleProps<N, V>, 'options'> {
+}
+export type TreeProps<N extends NodeType<V>, V extends Id = Id> = TreeSingleProps<N, V> | TreeMultipleProps<N, V>;
+type TreeContext<V extends Id = Id> = {
+    expandedSet?: Set<V>;
+    toggleExpanded?(value: V): void;
+    indent?: number;
+    renderExpandIcon?: TreeBaseProps<any, V>['renderExpandIcon'];
+    showCheckbox?: boolean;
+    readOnly?: boolean;
+    disabled?: boolean;
+    clickLabelToExpand?: boolean;
+};
+export declare function useTreeContext<V extends Id = Id>(): TreeContext<V>;
+export declare const Tree: {
+    <N extends NodeType<V>, V extends Id = Id>(props: TreeProps<N, V>): ReactElement;
+    Node: typeof TreeNode;
+};
+export {};

package/dist/esm/components/tree/tree.js

@@ -0,0 +1,80 @@
+import { createElement as _createElement } from "@emotion/react";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { Children, createContext, forwardRef, isValidElement, memo, useContext, useMemo } from 'react';
+import { SelectionContext } from '../selectionContext';
+import { Input } from '../input';
+import { classes, style } from './tree.style';
+import { classnames, useTreeSearch } from '../../utils';
+import { SearchOutlined } from '@ant-design/icons';
+import { Highlight } from '../highlight';
+import { Placeholder } from '../placeholder';
+import { TreeNode } from './treeNode';
+const treeContext = createContext({});
+export function useTreeContext() {
+    return useContext(treeContext);
+}
+export const Tree = memo(forwardRef(({ nodes, primaryKey = 'value', labelKey = 'label', searchTokenKey, showLine = true, indent = 24, renderExpandIcon, multiple, showCheckbox = !!multiple, readOnly, disabled, clickLabelToExpand, defaultExpanded, expanded, onExpandedChange, searchable, searchInputProps, defaultSearchValue, searchValue, onSearchChange, 
+// 从SelectionContext继承来的属性
+childrenKey = 'children', relation = 'dependent', integration = 'shallowest', defaultValue, value, onChange, ...props }, ref) => {
+    const selectionContextProps = {
+        options: nodes, primaryKey, childrenKey, relation, integration,
+        multiple, defaultValue, value, onChange, disabled
+    };
+    /**
+     * --------------------------------------------------------------
+     * 统一处理nodes与children
+     */
+    const actualTreeNodes = useMemo(() => {
+        if (nodes) {
+            return nodes;
+        }
+        const fn = (arr) => {
+            return arr?.map(node => {
+                if (isValidElement(node)) {
+                    const { props } = node;
+                    return {
+                        ...props,
+                        children: fn(Children.toArray(props.children))
+                    };
+                }
+                return node;
+            });
+        };
+        return fn(Children.toArray(props.children));
+    }, [nodes, props.children]);
+    /**
+     * ----------------------------------------------------------------
+     * 搜索与展开
+     */
+    const { innerSearchValue, setInnerSearchValue, filteredTreeData, deferredSearchValue, expandedSet, toggleExpanded } = useTreeSearch({
+        nodes: actualTreeNodes, primaryKey, labelKey, searchTokenKey, childrenKey,
+        defaultExpanded, expanded, onExpandedChange,
+        defaultSearchValue, searchValue, onSearchChange
+    });
+    return (_jsx(SelectionContext, { ...selectionContextProps, children: _jsxs("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), "data-show-line": showLine, children: [searchable &&
+                    _jsx(Input, { className: classes.search, prefix: _jsx(SearchOutlined, {}), placeholder: "\u641C\u7D22", value: innerSearchValue.current, ...searchInputProps, onChange: e => {
+                            searchInputProps?.onChange?.(e);
+                            setInnerSearchValue(e.target.value);
+                        } }), _jsx(treeContext.Provider, { value: useMemo(() => ({
+                        expandedSet, toggleExpanded, indent, renderExpandIcon,
+                        showCheckbox, readOnly, disabled, clickLabelToExpand
+                    }), [
+                        expandedSet, indent, renderExpandIcon,
+                        showCheckbox, readOnly, disabled, clickLabelToExpand
+                    ]), children: useMemo(() => {
+                        if (filteredTreeData?.length) {
+                            const fn = (arr) => {
+                                return arr?.map(({ _parentId, ...nodeProps }) => {
+                                    const currentValue = nodeProps[primaryKey];
+                                    const label = nodeProps[labelKey];
+                                    return (_createElement(TreeNode, { ...nodeProps, key: currentValue, value: currentValue, label: typeof label === 'string' && deferredSearchValue
+                                            ? _jsx(Highlight, { keywords: deferredSearchValue.split(' '), children: label })
+                                            : label }, fn(nodeProps[childrenKey])));
+                                });
+                            };
+                            return fn(filteredTreeData);
+                        }
+                        return _jsx(Placeholder, {});
+                    }, [filteredTreeData]) })] }) }));
+}));
+Tree.Node = TreeNode;