@canlooks/can-ui 0.0.21 → 0.0.22

package/dist/esm/components/timeline/timelineItem.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo } from 'react';
+import { memo } from 'react';
 import { classnames } from '../../utils';
 import { classes, useTimelineItemStyle } from './timeline.style';
 import { useTimelineContext } from './timeline';
-export const TimelineItem = memo(forwardRef(({ dot, content, oppositeContent, loading, _index = 0, 
+export const TimelineItem = memo(({ dot, content, oppositeContent, loading, _index = 0, 
 // 共享属性，从TimelineSharedProps继承
-variant, labelPosition, color, ...props }, ref) => {
+variant, labelPosition, color, ...props }) => {
     const context = useTimelineContext();
     variant ??= context.variant ?? 'outlined';
     labelPosition ??= context.labelPosition ?? 'end';
     color ??= context.color ?? 'primary';
-    return (_jsxs("div", { ...props, ref: ref, css: useTimelineItemStyle({ color }), className: classnames(classes.item, props.className), "data-variant": variant, "data-reverse": (labelPosition === 'alternate' && _index % 2 !== 0) ||
+    return (_jsxs("div", { ...props, css: useTimelineItemStyle({ color }), className: classnames(classes.item, props.className), "data-variant": variant, "data-reverse": (labelPosition === 'alternate' && _index % 2 !== 0) ||
             (labelPosition === 'alternate-reverse' && _index % 2 === 0), "data-orientation": context.orientation, children: [_jsx("div", { className: classes.opposite, "data-show": !!oppositeContent, children: oppositeContent }), _jsx("div", { className: classes.dotArea, children: _jsx("div", { className: classes.dot }) }), _jsx("div", { className: classes.content, children: content })] }));
-}));
+});

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

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 import { FlexProps } from '../flex';
 import { ButtonProps } from '../button';
-import { Id, Obj } from '../../../types';
+import { Id, Obj, SelectableProps } from '../../../types';
 type ButtonItem = ButtonProps & Obj;
 export interface ToggleButtonBaseProps<I extends ButtonItem> extends Omit<FlexProps, 'defaultValue' | 'onChange'> {
     variant?: 'filled' | 'outlined';
@@ -12,18 +12,6 @@ export interface ToggleButtonBaseProps<I extends ButtonItem> extends Omit<FlexPr
     items?: I[];
     primaryKey?: keyof I;
 }
-export interface ToggleButtonSingleProps<I extends ButtonItem, V extends Id = Id> extends ToggleButtonBaseProps<I> {
-    multiple?: false;
-    defaultValue?: V;
-    value?: V;
-    onChange?(value: V): void;
-}
-export interface ToggleButtonMultipleProps<I extends ButtonItem, V extends Id = Id> extends ToggleButtonBaseProps<I> {
-    multiple: true;
-    defaultValue?: V[];
-    value?: V[];
-    onChange?(value: V[]): void;
-}
-export type ToggleButtonProps<I extends ButtonItem, V extends Id = Id> = ToggleButtonSingleProps<I, V> | ToggleButtonMultipleProps<I, V>;
+export type ToggleButtonProps<I extends ButtonItem, V extends Id = Id> = SelectableProps<V> & ToggleButtonBaseProps<I>;
 export declare const ToggleButton: <I extends ButtonItem, V extends Id = Id>(props: ToggleButtonProps<I, V>) => ReactElement;
 export {};

package/dist/esm/components/toggleButton/toggleButton.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { Children, cloneElement, forwardRef, isValidElement } from 'react';
+import { Children, cloneElement, isValidElement } from 'react';
 import { Flex } from '../flex';
-import { classnames, isSelected, useControlledSelect } from '../../utils';
+import { classnames, isSelected } from '../../utils';
 import { classes } from './toggleButton.style';
 import { Button } from '../button';
-export const ToggleButton = forwardRef(({ variant = 'filled', size, color = 'primary', disabled, readOnly, items, primaryKey = 'value', multiple, defaultValue, value, onChange, ...props }, ref) => {
-    const [innerValue, toggleSelected] = useControlledSelect({
+import { useShallowSelection } from '../selectionContext';
+export const ToggleButton = (({ variant = 'filled', size, color = 'primary', disabled, readOnly, items, primaryKey = 'value', multiple, defaultValue, value, onChange, ...props }) => {
+    const [innerValue, toggleSelected] = useShallowSelection({
         disabled: disabled ?? readOnly,
         multiple,
         defaultValue,
@@ -36,11 +37,11 @@ export const ToggleButton = forwardRef(({ variant = 'filled', size, color = 'pri
         }
         return Children.map(props.children, c => {
             if (isValidElement(c)) {
-                const { value } = c.props;
-                return cloneElement(c, makeProps(c.props, value, isSelected(value, innerValue.current)));
+                const { props } = c;
+                return cloneElement(c, makeProps(props, props.value, isSelected(props.value, innerValue.current)));
             }
             return c;
         });
     };
-    return (_jsx(Flex, { compact: true, ...props, ref: ref, className: classnames(classes.root, props.className), children: renderItems() }));
+    return (_jsx(Flex, { compact: true, ...props, className: classnames(classes.root, props.className), children: renderItems() }));
 });

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

@@ -6,4 +6,4 @@ export interface TooltipProps extends Omit<PopperProps, 'title' | 'content'> {
     color?: ColorPropsValue;
     showArrow?: boolean;
 }
-export declare const Tooltip: import("react").ForwardRefExoticComponent<Omit<TooltipProps, "ref"> & import("react").RefAttributes<unknown>>;
+export declare function Tooltip({ title, color, showArrow, offset, ...props }: TooltipProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/components/tooltip/tooltip.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef } from 'react';
 import { Popper } from '../popper';
 import { classes, useStyle } from './tooltip.style';
 import { classnames } from '../../utils';
-import { useTheme } from '../app';
-export const Tooltip = forwardRef(({ title, color, showArrow = true, offset, ...props }, ref) => {
+import { useTheme } from '../theme';
+export function Tooltip({ title, color, showArrow = true, offset, ...props }) {
     const { spacing } = useTheme();
     offset ??= showArrow ? spacing[3] : spacing[2];
-    return (_jsx(Popper, { ...props, ref: ref, css: useStyle({ color }), className: classnames(classes.root, props.className), offset: offset, content: _jsx("div", { className: classes.title, "data-show-arrow": showArrow, children: title }) }));
-});
+    return (_jsx(Popper, { ...props, css: useStyle({ color }), className: classnames(classes.root, props.className), offset: offset, content: _jsx("div", { className: classes.title, "data-show-arrow": showArrow, children: title }) }));
+}

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

@@ -1,8 +1,8 @@
 import { css } from '@emotion/react';
 import { defineClasses, useColor, useCss } from '../../utils';
-import { zIndex } from '../app';
 import { popperArrowStyle } from '../popper/popper.style';
 import Color from 'color';
+import { zIndex } from '../theme';
 export const classes = defineClasses('tooltip', [
     'title'
 ]);

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

@@ -12,5 +12,5 @@ export declare const TouchRipple: {
 interface RippleProps extends DIVProps {
     color?: ColorPropsValue;
 }
-export declare const Ripple: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<RippleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const Ripple: import("react").MemoExoticComponent<({ ref, color, ...props }: RippleProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
 export {};

package/dist/esm/components/touchRipple/touchRipple.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { cloneElement, forwardRef, memo, useEffect, useRef, useState } from 'react';
+import { cloneElement, memo, useRef, useState, useLayoutEffect } from 'react';
 import { classes, useStyle } from './touchRipple.style';
 import { cloneRef, getEazyID } from '../../utils';
-export const TouchRipple = forwardRef(({ color, rippleProps, children, ...props }, ref) => {
+export const TouchRipple = (({ ref, color, rippleProps, children, ...props }) => {
     const renderedRipple = (_jsx(Ripple, { ...rippleProps, 
         // 有children属性时，ref传递给children
         ref: children ? ref : void 0 }));
@@ -11,32 +11,32 @@ export const TouchRipple = forwardRef(({ color, rippleProps, children, ...props
         ? cloneElement(children, { ...props, ref }, children.props.children, renderedRipple)
         : renderedRipple;
 });
-export const Ripple = memo(forwardRef(({ color = 'primary', ...props }, ref) => {
+export const Ripple = memo(({ ref, color = 'primary', ...props }) => {
     const [ripples, setRipples] = useState([]);
     const rippleRef = useRef(null);
-    useEffect(() => {
+    useLayoutEffect(() => {
         const wrapper = rippleRef.current?.parentElement;
         if (wrapper) {
             const { position } = getComputedStyle(wrapper);
             if (position === 'static') {
                 wrapper.style.position = 'relative';
             }
-            const pointerDown = ({ offsetX, offsetY }) => {
+            const pointerDown = (e) => {
                 setRipples(o => [
                     ...o,
                     {
                         key: getEazyID('touch-ripple'),
-                        leaving: false,
-                        position: [offsetX, offsetY]
+                        r: Math.sqrt(wrapper.clientWidth ** 2 + wrapper.clientHeight ** 2),
+                        left: e.offsetX,
+                        top: e.offsetY,
+                        leaving: false
                     }
                 ]);
                 wrapper.addEventListener('pointerup', leave);
                 wrapper.addEventListener('pointerleave', leave);
             };
             const leave = () => {
-                setRipples(o => {
-                    return o.map(v => ({ ...v, leaving: true }));
-                });
+                setRipples(o => o.map(v => ({ ...v, leaving: true })));
                 removeLeaveListener();
             };
             wrapper.addEventListener('pointerdown', pointerDown);
@@ -51,5 +51,8 @@ export const Ripple = memo(forwardRef(({ color = 'primary', ...props }, ref) =>
         }
         return;
     }, []);
-    return (_jsx("div", { ...props, ref: cloneRef(ref, rippleRef), css: useStyle({ color }), className: classes.root, children: ripples.map(({ key, leaving, position: [x, y] }) => _jsx("div", { className: classes.ripple, style: { left: x, top: y }, "data-leaving": leaving, onTransitionEnd: () => setRipples(o => o.filter(v => v.key !== key)) }, key)) }));
-}));
+    const onTransitionEnd = (key) => {
+        setRipples(o => o.filter(v => v.key !== key));
+    };
+    return (_jsx("div", { ...props, ref: cloneRef(ref, rippleRef), css: useStyle({ color }), className: classes.root, children: ripples.map(({ key, r, left, top, leaving }) => _jsx("div", { className: classes.ripple, style: { width: r * 2, left, top }, "data-leaving": leaving, onTransitionEnd: () => onTransitionEnd(key) }, key)) }));
+});

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

@@ -17,8 +17,6 @@ export function useStyle({ color }) {
             z-index: 0;
 
             .${classes.ripple} {
-                min-width: 100%;
-                min-height: 100%;
                 aspect-ratio: 1;
                 border-radius: 50%;
                 position: absolute;
@@ -40,6 +38,6 @@ const showRippleAnim = keyframes `
     }
 
     100% {
-        scale: ${Math.sqrt(8)};
+        scale: 1;
     }
 `;

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

@@ -1,25 +1,22 @@
 import { ReactElement, ReactNode } from 'react';
-import { DIVProps, Id } from '../../../types';
+import { DIVProps, Id, SelectableMultipleProps } from '../../../types';
 import { MenuOptionType } from '../optionsBase';
 import { ButtonProps } from '../button';
-export interface TransferProps<O extends MenuOptionType<V>, V extends Id = Id> extends Omit<DIVProps, 'defaultValue' | 'value' | 'onChange'> {
+export interface TransferProps<O extends MenuOptionType<V>, V extends Id = Id> extends Omit<DIVProps, 'defaultValue' | 'value' | 'onChange'>, Omit<SelectableMultipleProps<V>, 'multiple'> {
     options?: O[];
-    /** @default "value" */
+    /** 默认为`value` */
     primaryKey?: keyof O;
     fullWidth?: boolean;
-    /** @default true */
+    /** 默认为`true` */
     allowSelectAll?: boolean;
-    /** @default true */
+    /** 默认为`true` */
     showHeader?: boolean;
-    /** @default "选项" */
+    /** 默认为`"选项"` */
     leftTitle?: ReactNode;
-    /** @default "已选" */
+    /** 默认为`"已选"` */
     rightTitle?: ReactNode;
     /** 自定义渲染按钮 */
     renderButtons?(buttonProps: [ButtonProps, ButtonProps]): ReactNode;
-    defaultValue?: V[];
-    value?: V[];
-    onChange?(value: V[]): void;
 }
 type TransferContext<O extends MenuOptionType<V>, V extends Id = Id> = {
     options?: O[];
@@ -28,6 +25,7 @@ type TransferContext<O extends MenuOptionType<V>, V extends Id = Id> = {
     allowSelectAll?: boolean;
     showHeader?: boolean;
 };
+declare const TransferContext: import("react").Context<TransferContext<any, any>>;
 export declare function useTransferContext<O extends MenuOptionType<V>, V extends Id = Id>(): Required<TransferContext<O, V>>;
 export declare const Transfer: <O extends MenuOptionType<V>, V extends Id = Id>(props: TransferProps<O, V>) => ReactElement;
 export {};

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

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { createContext, forwardRef, memo, useContext, useMemo, useState } from 'react';
+import { createContext, memo, useContext, useMemo, useState } from 'react';
 import { classes, style } from './transfer.style';
 import { classnames, useControlled } from '../../utils';
 import { Button } from '../button';
 import { LeftOutlined, RightOutlined } from '@ant-design/icons';
 import { TransferPanel } from './transferPanel';
-const transferContext = createContext({});
+const TransferContext = createContext({});
 export function useTransferContext() {
-    const { options = [], primaryKey = 'value', value = [], allowSelectAll = true, showHeader = true } = useContext(transferContext);
+    const { options = [], primaryKey = 'value', value = [], allowSelectAll = true, showHeader = true } = useContext(TransferContext);
     return { options, primaryKey, value, allowSelectAll, showHeader };
 }
-export const Transfer = memo(forwardRef(({ options = [], primaryKey = 'value', fullWidth, allowSelectAll = true, showHeader = true, leftTitle = '选项', rightTitle = '已选', renderButtons, defaultValue = [], value, onChange, ...props }, ref) => {
+export const Transfer = memo(({ options = [], primaryKey = 'value', fullWidth, allowSelectAll = true, showHeader = true, leftTitle = '选项', rightTitle = '已选', renderButtons, defaultValue = [], value, onChange, ...props }) => {
     const [innerValue, setInnerValue] = useControlled(defaultValue, value, onChange);
     const [leftSelected, setLeftSelected] = useState([]);
     const [rightSelected, setRightSelected] = useState([]);
@@ -44,10 +44,10 @@ export const Transfer = memo(forwardRef(({ options = [], primaryKey = 'value', f
             _jsx(Button, { ...buttonsProps[1] }, "toLeft")
         ];
     })();
-    return (_jsx("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), "data-full-width": fullWidth, children: _jsxs(transferContext.Provider, { value: useMemo(() => ({
+    return (_jsx("div", { ...props, css: style, className: classnames(classes.root, props.className), "data-full-width": fullWidth, children: _jsxs(TransferContext, { value: useMemo(() => ({
                 options, value: innerValue.current, allowSelectAll, showHeader
             }), [
                 options, innerValue.current, allowSelectAll, showHeader
             ]), children: [_jsx(TransferPanel, { title: leftTitle, selectedValue: leftSelected, onChange: setLeftSelected }), !!renderedButtons &&
                     _jsx("div", { className: classes.buttons, children: renderedButtons }), _jsx(TransferPanel, { type: "right", title: rightTitle, selectedValue: rightSelected, onChange: setRightSelected })] }) }));
-}));
+});

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

@@ -1,12 +1,12 @@
 export declare const classes: {
     info: string;
-    title: string;
-    checkbox: string;
     list: string;
+    title: string;
     header: string;
+    checkbox: string;
     count: string;
-    buttons: string;
     panel: string;
+    buttons: string;
 } & {
     root: string;
 };

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

@@ -17,7 +17,7 @@ export const style = defineCss(({ spacing, background, divider, borderRadius, te
 
     .${classes.panel} {
         width: 180px;
-        background-color: ${background.card};
+        background-color: ${background.content};
         border: 1px solid ${divider};
         border-radius: ${borderRadius}px;
         display: flex;

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo, useMemo } from 'react';
+import { 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) => {
+export const TransferPanel = memo(({ title, type = 'left', selectedValue = [], onChange, renderList, renderItem, ...props }) => {
     const { options, primaryKey, value, allowSelectAll, showHeader } = useTransferContext();
     const selfOptions = useMemo(() => {
         const valueSet = new Set(value);
@@ -38,8 +38,8 @@ export const TransferPanel = memo(forwardRef(({ title, type = 'left', selectedVa
         }
         return _jsx(OptionsBase, { ...listProps, showCheckbox: true });
     })();
-    return (_jsxs("div", { ...props, ref: ref, className: classes.panel, children: [showHeader &&
+    return (_jsxs("div", { ...props, 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

@@ -5,13 +5,13 @@ export interface CollapseProps<T extends HTMLElement = HTMLElement> extends Tran
      * 动画实现的方式
      * @enum {"sweeping"}: 通过修改width或height实现
      * @enum {"scaling"}: 通过transform实现
-     * @default "sweeping"
+     * 默认为`sweeping`
      */
     transitionType?: 'sweeping' | 'scaling';
     /**
      * 设定折叠后的尺寸
-     * {@link transitionType}为"sweeping"时有效
-     * @default 0
+     * {@link transitionType}为"`sweeping"`时有效
+     * 默认为0
      */
     collapsedSize?: number | (() => number);
 }

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

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { TransitionBase } from './transitionBase';
 import { cloneRef } from '../../utils';
-export const Collapse = forwardRef(({ transitionType = 'sweeping', ...props }, ref) => {
+export const Collapse = (({ transitionType = 'sweeping', ...props }) => {
     const Component = transitionType === 'sweeping' ? Sweeping : TransitionBase;
-    return (_jsx(Component, { ...props, ref: ref, _mode: transitionType === 'sweeping' ? '_sweeping' : 'collapse' }));
+    return (_jsx(Component, { ...props, _mode: transitionType === 'sweeping' ? '_sweeping' : 'collapse' }));
 });
-const Sweeping = forwardRef(({ in: _in = false, appear = true, orientation = 'vertical', collapsedSize = 0, ...props }, ref) => {
+const Sweeping = (({ ref, in: _in = false, appear = true, orientation = 'vertical', collapsedSize = 0, ...props }) => {
     const innerRef = useRef(null);
     const styleProperty = orientation === 'vertical' ? 'height' : 'width';
     const sizeProperty = orientation === 'vertical' ? 'clientHeight' : 'clientWidth';

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

@@ -1,6 +1,5 @@
 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" }));
+export const Fade = ((props) => {
+    return (_jsx(TransitionBase, { ...props, _mode: "fade" }));
 });

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

@@ -1,6 +1,5 @@
 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" }));
+export const Grow = ((props) => {
+    return (_jsx(TransitionBase, { ...props, _mode: "grow" }));
 });

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

@@ -1,6 +1,5 @@
 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" }));
+export const Slide = ((props) => {
+    return (_jsx(TransitionBase, { ...props, _mode: "slide" }));
 });

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

@@ -2,7 +2,7 @@ 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" */
+    /** {@link _mode}"collapse"时生效，展开与收起的方向 默认为`vertical` */
     orientation?: 'vertical' | 'horizontal';
     /** {@link _mode}"slide"时生效，滑入的方向 */
     direction?: 'left' | 'right' | 'up' | 'down';

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef, useRef } from 'react';
+import { 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) => {
+export const TransitionBase = (({ ref, component: Component = 'div', orientation = 'vertical', direction = 'down', offset = '100%', timeout = 300, appear = true, _mode, ...props }) => {
     const cssArr = [
         useTransitionBaseStyle({ timeout })
     ];

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

@@ -30,4 +30,4 @@ export interface TransportStyleProps extends DIVProps {
     overflowY?: CSSProperties['overflowY'];
     overflow?: CSSProperties['overflow'];
 }
-export declare const TransportStyle: import("react").ForwardRefExoticComponent<Omit<TransportStyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function TransportStyle({ alignItems, justifyContent, alignSelf, justifySelf, flex, width, minWidth, maxWidth, height, minHeight, maxHeight, lineHeight, paddingTop, paddingRight, paddingBottom, paddingLeft, padding, marginTop, marginRight, marginBottom, marginLeft, margin, overflowX, overflowY, overflow, ...props }: TransportStyleProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

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

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

@@ -1,11 +1,12 @@
 import { ReactElement, ReactNode } from 'react';
-import { DIVProps, Id, Obj } from '../../../types';
-import { OptionType, SelectionContextBaseProps, SelectionContextMultipleProps, SelectionContextSingleProps } from '../selectionContext';
+import { DIVProps, Id, SelectableProps } from '../../../types';
+import { OptionType, SelectionContextBaseProps } 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 NodeType<V extends Id = Id> extends Partial<Omit<TreeNodeProps, 'children'>>, Omit<OptionType<V>, 'children'> {
+    children?: NodeType<V>[];
 }
-export interface TreeBaseProps<N extends NodeType<V>, V extends Id = Id> extends Omit<SelectionContextBaseProps<N, V>, 'options'>, Omit<DIVProps, 'defaultValue' | 'onChange'> {
+export interface TreeBaseProps<N extends NodeType<V>, V extends Id = Id> extends Omit<SelectionContextBaseProps<N, V>, 'options'>, Omit<DIVProps, 'defaultValue' | 'onChange' | 'onToggle'> {
     nodes?: N[];
     labelKey?: keyof N;
     searchTokenKey?: keyof N;
@@ -14,7 +15,7 @@ export interface TreeBaseProps<N extends NodeType<V>, V extends Id = Id> extends
     renderExpandIcon?(nodeValue: V, isExpand: boolean, expanded: V[]): ReactNode;
     showCheckbox?: boolean;
     readOnly?: boolean;
-    /** 为true时，点击标签也会展开节点，@default false, 仅点击展开按钮才能展开节点 */
+    /** 为true时，点击标签也会展开节点，默认为`false`, 仅点击展开按钮才能展开节点 */
     clickLabelToExpand?: boolean;
     defaultExpanded?: V[];
     expanded?: V[];
@@ -25,11 +26,7 @@ export interface TreeBaseProps<N extends NodeType<V>, V extends Id = Id> extends
     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>;
+export type TreeProps<N extends NodeType<V>, V extends Id = Id> = TreeBaseProps<N, V> & SelectableProps<V>;
 type TreeContext<V extends Id = Id> = {
     expandedSet?: Set<V>;
     toggleExpanded?(value: V): void;
@@ -40,6 +37,7 @@ type TreeContext<V extends Id = Id> = {
     disabled?: boolean;
     clickLabelToExpand?: boolean;
 };
+declare const TreeContext: import("react").Context<TreeContext<any>>;
 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;

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

@@ -1,6 +1,6 @@
 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 { Children, createContext, isValidElement, memo, useContext, useMemo } from 'react';
 import { SelectionContext } from '../selectionContext';
 import { Input } from '../input';
 import { classes, style } from './tree.style';
@@ -9,13 +9,13 @@ import { SearchOutlined } from '@ant-design/icons';
 import { Highlight } from '../highlight';
 import { Placeholder } from '../placeholder';
 import { TreeNode } from './treeNode';
-const treeContext = createContext({});
+const TreeContext = createContext({});
 export function useTreeContext() {
-    return useContext(treeContext);
+    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, 
+export const Tree = memo(({ nodes, labelKey = 'label', searchTokenKey, showLine = true, indent = 24, renderExpandIcon, multiple, showCheckbox = !!multiple, readOnly, clickLabelToExpand, defaultExpanded, expanded, onExpandedChange, searchable, searchInputProps, defaultSearchValue, searchValue, onSearchChange, 
 // 从SelectionContext继承来的属性
-childrenKey = 'children', relation = 'dependent', integration = 'shallowest', defaultValue, value, onChange, ...props }, ref) => {
+primaryKey = 'value', childrenKey = 'children', relation = 'dependent', integration = 'shallowest', clearable, disabled, defaultValue, value, onChange, onToggle, shallow, ...props }) => {
     const selectionContextProps = {
         options: nodes, primaryKey, childrenKey, relation, integration,
         multiple, defaultValue, value, onChange, disabled
@@ -51,11 +51,11 @@ childrenKey = 'children', relation = 'dependent', integration = 'shallowest', de
         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(() => ({
+    return (_jsxs("div", { ...props, 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(SelectionContext, { ...selectionContextProps, children: _jsx(TreeContext, { value: useMemo(() => ({
                         expandedSet, toggleExpanded, indent, renderExpandIcon,
                         showCheckbox, readOnly, disabled, clickLabelToExpand
                     }), [
@@ -75,6 +75,6 @@ childrenKey = 'children', relation = 'dependent', integration = 'shallowest', de
                             return fn(filteredTreeData);
                         }
                         return _jsx(Placeholder, {});
-                    }, [filteredTreeData]) })] }) }));
-}));
+                    }, [filteredTreeData]) }) })] }));
+});
 Tree.Node = TreeNode;

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

@@ -1,11 +1,11 @@
 export declare const classes: {
     search: string;
+    icon: string;
+    label: string;
     prefix: string;
     checkbox: string;
-    label: string;
-    icon: string;
-    suffix: string;
     indent: string;
+    suffix: string;
     expand: string;
     node: string;
 } & {

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

@@ -13,7 +13,7 @@ export const classes = defineClasses('tree', [
     'suffix'
 ]);
 export const style = defineCss(({ spacing, mode, borderRadius, text, easing, gray, divider, colors }) => {
-    const c = Color(colors.primary);
+    const c = Color(colors.primary.main);
     const hover = gray(mode === 'light' ? .05 : .2);
     const active = gray(mode === 'light' ? .1 : .12);
     const selectedBg = c.alpha(mode === 'light' ? .1 : .2).string();

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

@@ -9,4 +9,4 @@ export interface TreeNodeProps extends Omit<DIVProps, 'prefix'> {
     /** @private 内部使用，表明该节点的层级 */
     _level?: number;
 }
-export declare const TreeNode: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<TreeNodeProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const TreeNode: import("react").MemoExoticComponent<({ value, label, prefix, suffix, disabled, _level, ...props }: TreeNodeProps) => import("@emotion/react/jsx-runtime").JSX.Element>;