@canlooks/can-ui 0.0.21 → 0.0.23

package/dist/cjs/components/toggleButton/toggleButton.js

@@ -7,8 +7,9 @@ const flex_1 = require("../flex");
 const utils_1 = require("../../utils");
 const toggleButton_style_1 = require("./toggleButton.style");
 const button_1 = require("../button");
-exports.ToggleButton = (0, react_1.forwardRef)(({ variant = 'filled', size, color = 'primary', disabled, readOnly, items, primaryKey = 'value', multiple, defaultValue, value, onChange, ...props }, ref) => {
-    const [innerValue, toggleSelected] = (0, utils_1.useControlledSelect)({
+const selectionContext_1 = require("../selectionContext");
+exports.ToggleButton = (({ variant = 'filled', size, color = 'primary', disabled, readOnly, items, primaryKey = 'value', multiple, defaultValue, value, onChange, ...props }) => {
+    const [innerValue, toggleSelected] = (0, selectionContext_1.useShallowSelection)({
         disabled: disabled ?? readOnly,
         multiple,
         defaultValue,
@@ -39,11 +40,11 @@ exports.ToggleButton = (0, react_1.forwardRef)(({ variant = 'filled', size, colo
         }
         return react_1.Children.map(props.children, c => {
             if ((0, react_1.isValidElement)(c)) {
-                const { value } = c.props;
-                return (0, react_1.cloneElement)(c, makeProps(c.props, value, (0, utils_1.isSelected)(value, innerValue.current)));
+                const { props } = c;
+                return (0, react_1.cloneElement)(c, makeProps(props, props.value, (0, utils_1.isSelected)(props.value, innerValue.current)));
             }
             return c;
         });
     };
-    return ((0, jsx_runtime_1.jsx)(flex_1.Flex, { compact: true, ...props, ref: ref, className: (0, utils_1.classnames)(toggleButton_style_1.classes.root, props.className), children: renderItems() }));
+    return ((0, jsx_runtime_1.jsx)(flex_1.Flex, { compact: true, ...props, className: (0, utils_1.classnames)(toggleButton_style_1.classes.root, props.className), children: renderItems() }));
 });

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

@@ -1,9 +1,9 @@
 import { ReactNode } from 'react';
 import { PopperProps } from '../popper';
-import { ColorPropsValue } from '../../../types';
+import { ColorPropsValue } from '../../types';
 export interface TooltipProps extends Omit<PopperProps, 'title' | 'content'> {
     title?: ReactNode;
     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/cjs/components/tooltip/tooltip.js

@@ -1,14 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tooltip = void 0;
+exports.Tooltip = Tooltip;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
 const popper_1 = require("../popper");
 const tooltip_style_1 = require("./tooltip.style");
 const utils_1 = require("../../utils");
-const app_1 = require("../app");
-exports.Tooltip = (0, react_1.forwardRef)(({ title, color, showArrow = true, offset, ...props }, ref) => {
-    const { spacing } = (0, app_1.useTheme)();
+const theme_1 = require("../theme");
+function Tooltip({ title, color, showArrow = true, offset, ...props }) {
+    const { spacing } = (0, theme_1.useTheme)();
     offset ??= showArrow ? spacing[3] : spacing[2];
-    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { ...props, ref: ref, css: (0, tooltip_style_1.useStyle)({ color }), className: (0, utils_1.classnames)(tooltip_style_1.classes.root, props.className), offset: offset, content: (0, jsx_runtime_1.jsx)("div", { className: tooltip_style_1.classes.title, "data-show-arrow": showArrow, children: title }) }));
-});
+    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { ...props, css: (0, tooltip_style_1.useStyle)({ color }), className: (0, utils_1.classnames)(tooltip_style_1.classes.root, props.className), offset: offset, content: (0, jsx_runtime_1.jsx)("div", { className: tooltip_style_1.classes.title, "data-show-arrow": showArrow, children: title }) }));
+}

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

@@ -5,9 +5,9 @@ exports.useStyle = useStyle;
 const tslib_1 = require("tslib");
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-const app_1 = require("../app");
 const popper_style_1 = require("../popper/popper.style");
 const color_1 = tslib_1.__importDefault(require("color"));
+const theme_1 = require("../theme");
 exports.classes = (0, utils_1.defineClasses)('tooltip', [
     'title'
 ]);
@@ -15,7 +15,7 @@ function useStyle({ color }) {
     let colorValue = color ? (0, utils_1.useColor)(color) : '#000000';
     colorValue = (0, color_1.default)(colorValue).alpha(.7).string();
     return (0, utils_1.useCss)(({ spacing, borderRadius, boxShadow }) => (0, react_1.css) `
-        z-index: ${app_1.zIndex.tooltip};
+        z-index: ${theme_1.zIndex.tooltip};
 
         .${exports.classes.title} {
             font-size: ${13 / 14}em;

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

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { ColorPropsValue, DIVProps } from '../../../types';
+import { ColorPropsValue, DIVProps } from '../../types';
 export interface TouchRippleProps extends Omit<DIVProps, 'children'> {
     color?: ColorPropsValue;
     rippleProps?: DIVProps;
@@ -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/cjs/components/touchRipple/touchRipple.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const touchRipple_style_1 = require("./touchRipple.style");
 const utils_1 = require("../../utils");
-exports.TouchRipple = (0, react_1.forwardRef)(({ color, rippleProps, children, ...props }, ref) => {
+exports.TouchRipple = (({ ref, color, rippleProps, children, ...props }) => {
     const renderedRipple = ((0, jsx_runtime_1.jsx)(exports.Ripple, { ...rippleProps, 
         // 有children属性时，ref传递给children
         ref: children ? ref : void 0 }));
@@ -14,32 +14,32 @@ exports.TouchRipple = (0, react_1.forwardRef)(({ color, rippleProps, children, .
         ? (0, react_1.cloneElement)(children, { ...props, ref }, children.props.children, renderedRipple)
         : renderedRipple;
 });
-exports.Ripple = (0, react_1.memo)((0, react_1.forwardRef)(({ color = 'primary', ...props }, ref) => {
+exports.Ripple = (0, react_1.memo)(({ ref, color = 'primary', ...props }) => {
     const [ripples, setRipples] = (0, react_1.useState)([]);
     const rippleRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
+    (0, react_1.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: (0, utils_1.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);
@@ -54,5 +54,8 @@ exports.Ripple = (0, react_1.memo)((0, react_1.forwardRef)(({ color = 'primary',
         }
         return;
     }, []);
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: (0, utils_1.cloneRef)(ref, rippleRef), css: (0, touchRipple_style_1.useStyle)({ color }), className: touchRipple_style_1.classes.root, children: ripples.map(({ key, leaving, position: [x, y] }) => (0, jsx_runtime_1.jsx)("div", { className: touchRipple_style_1.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 ((0, jsx_runtime_1.jsx)("div", { ...props, ref: (0, utils_1.cloneRef)(ref, rippleRef), css: (0, touchRipple_style_1.useStyle)({ color }), className: touchRipple_style_1.classes.root, children: ripples.map(({ key, r, left, top, leaving }) => (0, jsx_runtime_1.jsx)("div", { className: touchRipple_style_1.classes.ripple, style: { width: r * 2, left, top }, "data-leaving": leaving, onTransitionEnd: () => onTransitionEnd(key) }, key)) }));
+});

package/dist/cjs/components/touchRipple/touchRipple.style.d.ts

@@ -1,4 +1,4 @@
-import { ColorPropsValue } from '../../../types';
+import { ColorPropsValue } from '../../types';
 export declare const classes: {
     ripple: string;
 } & {

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

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

package/dist/cjs/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/cjs/components/transfer/transfer.js

@@ -9,12 +9,12 @@ const utils_1 = require("../../utils");
 const button_1 = require("../button");
 const icons_1 = require("@ant-design/icons");
 const transferPanel_1 = require("./transferPanel");
-const transferContext = (0, react_1.createContext)({});
+const TransferContext = (0, react_1.createContext)({});
 function useTransferContext() {
-    const { options = [], primaryKey = 'value', value = [], allowSelectAll = true, showHeader = true } = (0, react_1.useContext)(transferContext);
+    const { options = [], primaryKey = 'value', value = [], allowSelectAll = true, showHeader = true } = (0, react_1.useContext)(TransferContext);
     return { options, primaryKey, value, allowSelectAll, showHeader };
 }
-exports.Transfer = (0, react_1.memo)((0, react_1.forwardRef)(({ options = [], primaryKey = 'value', fullWidth, allowSelectAll = true, showHeader = true, leftTitle = '选项', rightTitle = '已选', renderButtons, defaultValue = [], value, onChange, ...props }, ref) => {
+exports.Transfer = (0, react_1.memo)(({ options = [], primaryKey = 'value', fullWidth, allowSelectAll = true, showHeader = true, leftTitle = '选项', rightTitle = '已选', renderButtons, defaultValue = [], value, onChange, ...props }) => {
     const [innerValue, setInnerValue] = (0, utils_1.useControlled)(defaultValue, value, onChange);
     const [leftSelected, setLeftSelected] = (0, react_1.useState)([]);
     const [rightSelected, setRightSelected] = (0, react_1.useState)([]);
@@ -48,10 +48,10 @@ exports.Transfer = (0, react_1.memo)((0, react_1.forwardRef)(({ options = [], pr
             (0, jsx_runtime_1.jsx)(button_1.Button, { ...buttonsProps[1] }, "toLeft")
         ];
     })();
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, css: transfer_style_1.style, className: (0, utils_1.classnames)(transfer_style_1.classes.root, props.className), "data-full-width": fullWidth, children: (0, jsx_runtime_1.jsxs)(transferContext.Provider, { value: (0, react_1.useMemo)(() => ({
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: transfer_style_1.style, className: (0, utils_1.classnames)(transfer_style_1.classes.root, props.className), "data-full-width": fullWidth, children: (0, jsx_runtime_1.jsxs)(TransferContext, { value: (0, react_1.useMemo)(() => ({
                 options, value: innerValue.current, allowSelectAll, showHeader
             }), [
                 options, innerValue.current, allowSelectAll, showHeader
             ]), children: [(0, jsx_runtime_1.jsx)(transferPanel_1.TransferPanel, { title: leftTitle, selectedValue: leftSelected, onChange: setLeftSelected }), !!renderedButtons &&
                     (0, jsx_runtime_1.jsx)("div", { className: transfer_style_1.classes.buttons, children: renderedButtons }), (0, jsx_runtime_1.jsx)(transferPanel_1.TransferPanel, { type: "right", title: rightTitle, selectedValue: rightSelected, onChange: setRightSelected })] }) }));
-}));
+});

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

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

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

@@ -20,7 +20,7 @@ exports.style = (0, utils_1.defineCss)(({ spacing, background, divider, borderRa
 
     .${exports.classes.panel} {
         width: 180px;
-        background-color: ${background.card};
+        background-color: ${background.content};
         border: 1px solid ${divider};
         border-radius: ${borderRadius}px;
         display: flex;

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

@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode } from 'react';
-import { DIVProps, Id } from '../../../types';
+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'> {

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

@@ -7,7 +7,7 @@ const transfer_style_1 = require("./transfer.style");
 const checkbox_1 = require("../checkbox");
 const transfer_1 = require("./transfer");
 const optionsBase_1 = require("../optionsBase");
-exports.TransferPanel = (0, react_1.memo)((0, react_1.forwardRef)(({ title, type = 'left', selectedValue = [], onChange, renderList, renderItem, ...props }, ref) => {
+exports.TransferPanel = (0, react_1.memo)(({ title, type = 'left', selectedValue = [], onChange, renderList, renderItem, ...props }) => {
     const { options, primaryKey, value, allowSelectAll, showHeader } = (0, transfer_1.useTransferContext)();
     const selfOptions = (0, react_1.useMemo)(() => {
         const valueSet = new Set(value);
@@ -41,8 +41,8 @@ exports.TransferPanel = (0, react_1.memo)((0, react_1.forwardRef)(({ title, type
         }
         return (0, jsx_runtime_1.jsx)(optionsBase_1.OptionsBase, { ...listProps, showCheckbox: true });
     })();
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, className: transfer_style_1.classes.panel, children: [showHeader &&
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, className: transfer_style_1.classes.panel, children: [showHeader &&
                 (0, jsx_runtime_1.jsxs)("div", { className: transfer_style_1.classes.header, children: [allowSelectAll &&
                             (0, jsx_runtime_1.jsx)("div", { className: transfer_style_1.classes.checkbox, children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { disabled: !selfOptions.length, checked: !!selfOptions.length && selfOptions.length === selectedValue.length, indeterminate: !!selectedValue.length && selectedValue.length < selfOptions.length, onChange: toggleAllHandler }) }), (0, jsx_runtime_1.jsx)("div", { className: transfer_style_1.classes.title, children: title }), (0, jsx_runtime_1.jsxs)("small", { className: transfer_style_1.classes.count, children: [selectedValue.length, " / ", selfOptions.length] })] }), !!renderedList &&
                 (0, jsx_runtime_1.jsx)("div", { className: transfer_style_1.classes.list, children: renderedList })] }));
-}));
+});

package/dist/cjs/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/cjs/components/transitionBase/collapse.js

@@ -5,11 +5,11 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const transitionBase_1 = require("./transitionBase");
 const utils_1 = require("../../utils");
-exports.Collapse = (0, react_1.forwardRef)(({ transitionType = 'sweeping', ...props }, ref) => {
+exports.Collapse = (({ transitionType = 'sweeping', ...props }) => {
     const Component = transitionType === 'sweeping' ? Sweeping : transitionBase_1.TransitionBase;
-    return ((0, jsx_runtime_1.jsx)(Component, { ...props, ref: ref, _mode: transitionType === 'sweeping' ? '_sweeping' : 'collapse' }));
+    return ((0, jsx_runtime_1.jsx)(Component, { ...props, _mode: transitionType === 'sweeping' ? '_sweeping' : 'collapse' }));
 });
-const Sweeping = (0, react_1.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 = (0, react_1.useRef)(null);
     const styleProperty = orientation === 'vertical' ? 'height' : 'width';
     const sizeProperty = orientation === 'vertical' ? 'clientHeight' : 'clientWidth';

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

@@ -2,8 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Fade = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
 const transitionBase_1 = require("./transitionBase");
-exports.Fade = (0, react_1.forwardRef)((props, ref) => {
-    return ((0, jsx_runtime_1.jsx)(transitionBase_1.TransitionBase, { ...props, ref: ref, _mode: "fade" }));
+exports.Fade = ((props) => {
+    return ((0, jsx_runtime_1.jsx)(transitionBase_1.TransitionBase, { ...props, _mode: "fade" }));
 });

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

@@ -2,8 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Grow = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
 const transitionBase_1 = require("./transitionBase");
-exports.Grow = (0, react_1.forwardRef)((props, ref) => {
-    return ((0, jsx_runtime_1.jsx)(transitionBase_1.TransitionBase, { ...props, ref: ref, _mode: "grow" }));
+exports.Grow = ((props) => {
+    return ((0, jsx_runtime_1.jsx)(transitionBase_1.TransitionBase, { ...props, _mode: "grow" }));
 });

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

@@ -2,8 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Slide = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
 const transitionBase_1 = require("./transitionBase");
-exports.Slide = (0, react_1.forwardRef)((props, ref) => {
-    return ((0, jsx_runtime_1.jsx)(transitionBase_1.TransitionBase, { ...props, ref: ref, _mode: "slide" }));
+exports.Slide = ((props) => {
+    return ((0, jsx_runtime_1.jsx)(transitionBase_1.TransitionBase, { ...props, _mode: "slide" }));
 });

package/dist/cjs/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/cjs/components/transitionBase/transitionBase.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const react_transition_group_1 = require("react-transition-group");
 const transitionBase_style_1 = require("./transitionBase.style");
 const utils_1 = require("../../utils");
-exports.TransitionBase = (0, react_1.forwardRef)(({ component: Component = 'div', orientation = 'vertical', direction = 'down', offset = '100%', timeout = 300, appear = true, _mode, ...props }, ref) => {
+exports.TransitionBase = (({ ref, component: Component = 'div', orientation = 'vertical', direction = 'down', offset = '100%', timeout = 300, appear = true, _mode, ...props }) => {
     const cssArr = [
         (0, transitionBase_style_1.useTransitionBaseStyle)({ timeout })
     ];

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

@@ -1,5 +1,5 @@
 import { CSSProperties } from 'react';
-import { DIVProps } from '../../../types';
+import { DIVProps } from '../../types';
 export interface TransportStyleProps extends DIVProps {
     /** 交叉轴对齐方式 */
     alignItems?: CSSProperties['alignItems'];
@@ -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/cjs/components/transportStyle/transportStyle.js

@@ -1,11 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TransportStyle = void 0;
+exports.TransportStyle = TransportStyle;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
 const utils_1 = require("../../utils");
-exports.TransportStyle = (0, react_1.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 ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, style: (0, utils_1.filterProperties)({
+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 ((0, jsx_runtime_1.jsx)("div", { ...props, style: (0, utils_1.filterProperties)({
             alignItems, justifyContent, alignSelf, justifySelf, flex,
             width, minWidth, maxWidth, height, minHeight, maxHeight, lineHeight,
             padding, paddingTop, paddingRight, paddingBottom, paddingLeft,
@@ -13,4 +12,4 @@ exports.TransportStyle = (0, react_1.forwardRef)(({ alignItems, justifyContent,
             overflow, overflowX, overflowY,
             ...props.style
         }) }));
-});
+}

package/dist/cjs/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/cjs/components/tree/tree.js

@@ -13,13 +13,13 @@ const icons_1 = require("@ant-design/icons");
 const highlight_1 = require("../highlight");
 const placeholder_1 = require("../placeholder");
 const treeNode_1 = require("./treeNode");
-const treeContext = (0, react_2.createContext)({});
+const TreeContext = (0, react_2.createContext)({});
 function useTreeContext() {
-    return (0, react_2.useContext)(treeContext);
+    return (0, react_2.useContext)(TreeContext);
 }
-exports.Tree = (0, react_2.memo)((0, react_2.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, 
+exports.Tree = (0, react_2.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
@@ -55,11 +55,11 @@ childrenKey = 'children', relation = 'dependent', integration = 'shallowest', de
         defaultExpanded, expanded, onExpandedChange,
         defaultSearchValue, searchValue, onSearchChange
     });
-    return ((0, jsx_runtime_1.jsx)(selectionContext_1.SelectionContext, { ...selectionContextProps, children: (0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: tree_style_1.style, className: (0, utils_1.classnames)(tree_style_1.classes.root, props.className), "data-show-line": showLine, children: [searchable &&
-                    (0, jsx_runtime_1.jsx)(input_1.Input, { className: tree_style_1.classes.search, prefix: (0, jsx_runtime_1.jsx)(icons_1.SearchOutlined, {}), placeholder: "\u641C\u7D22", value: innerSearchValue.current, ...searchInputProps, onChange: e => {
-                            searchInputProps?.onChange?.(e);
-                            setInnerSearchValue(e.target.value);
-                        } }), (0, jsx_runtime_1.jsx)(treeContext.Provider, { value: (0, react_2.useMemo)(() => ({
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: tree_style_1.style, className: (0, utils_1.classnames)(tree_style_1.classes.root, props.className), "data-show-line": showLine, children: [searchable &&
+                (0, jsx_runtime_1.jsx)(input_1.Input, { className: tree_style_1.classes.search, prefix: (0, jsx_runtime_1.jsx)(icons_1.SearchOutlined, {}), placeholder: "\u641C\u7D22", value: innerSearchValue.current, ...searchInputProps, onChange: e => {
+                        searchInputProps?.onChange?.(e);
+                        setInnerSearchValue(e.target.value);
+                    } }), (0, jsx_runtime_1.jsx)(selectionContext_1.SelectionContext, { ...selectionContextProps, children: (0, jsx_runtime_1.jsx)(TreeContext, { value: (0, react_2.useMemo)(() => ({
                         expandedSet, toggleExpanded, indent, renderExpandIcon,
                         showCheckbox, readOnly, disabled, clickLabelToExpand
                     }), [
@@ -79,6 +79,6 @@ childrenKey = 'children', relation = 'dependent', integration = 'shallowest', de
                             return fn(filteredTreeData);
                         }
                         return (0, jsx_runtime_1.jsx)(placeholder_1.Placeholder, {});
-                    }, [filteredTreeData]) })] }) }));
-}));
+                    }, [filteredTreeData]) }) })] }));
+});
 exports.Tree.Node = treeNode_1.TreeNode;

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

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

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

@@ -17,7 +17,7 @@ exports.classes = (0, utils_1.defineClasses)('tree', [
     'suffix'
 ]);
 exports.style = (0, utils_1.defineCss)(({ spacing, mode, borderRadius, text, easing, gray, divider, colors }) => {
-    const c = (0, color_1.default)(colors.primary);
+    const c = (0, color_1.default)(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/cjs/components/tree/treeNode.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { DIVProps, Id } from '../../../types';
+import { DIVProps, Id } from '../../types';
 export interface TreeNodeProps extends Omit<DIVProps, 'prefix'> {
     value: Id;
     label?: ReactNode;
@@ -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>;

package/dist/cjs/components/tree/treeNode.js

@@ -11,7 +11,7 @@ const button_1 = require("../button");
 const checkbox_1 = require("../checkbox");
 const tree_1 = require("./tree");
 const selectionContext_1 = require("../selectionContext");
-exports.TreeNode = (0, react_1.memo)((0, react_1.forwardRef)(({ value, label, prefix, suffix, disabled, _level = 0, ...props }, ref) => {
+exports.TreeNode = (0, react_1.memo)(({ value, label, prefix, suffix, disabled, _level = 0, ...props }) => {
     const { expandedSet = new Set(), toggleExpanded, indent, renderExpandIcon, showCheckbox, readOnly, clickLabelToExpand, ...context } = (0, tree_1.useTreeContext)();
     disabled ??= context.disabled;
     const { selectionStatus, toggleSelected } = (0, selectionContext_1.useSelectionContext)();
@@ -22,7 +22,7 @@ exports.TreeNode = (0, react_1.memo)((0, react_1.forwardRef)(({ value, label, pr
         clickLabelToExpand && toggleExpanded?.(value);
     };
     const hasChildren = !!props.children && (!Array.isArray(props.children) || props.children.length > 0);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, className: (0, utils_1.classnames)(tree_style_1.classes.node, props.className), "data-selected": status === 2, "data-read-only": readOnly, "data-disabled": disabled, onClick: clickHandler, children: [Array(_level).fill(void 0).map((_, i) => (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.indent, style: { width: indent } }, i)), (0, jsx_runtime_1.jsx)(button_1.Button, { className: tree_style_1.classes.expand, variant: "plain", color: "text", onClick: e => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, utils_1.classnames)(tree_style_1.classes.node, props.className), "data-selected": status === 2, "data-read-only": readOnly, "data-disabled": disabled, onClick: clickHandler, children: [Array(_level).fill(void 0).map((_, i) => (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.indent, style: { width: indent } }, i)), (0, jsx_runtime_1.jsx)(button_1.Button, { className: tree_style_1.classes.expand, variant: "plain", color: "text", onClick: e => {
                             e.stopPropagation();
                             toggleExpanded?.(value);
                         }, children: renderExpandIcon
@@ -40,4 +40,4 @@ exports.TreeNode = (0, react_1.memo)((0, react_1.forwardRef)(({ value, label, pr
                             ? (0, react_1.cloneElement)(child, { _level: _level + 1 })
                             : child;
                     }) })] }));
-}));
+});