@canlooks/can-ui 0.0.25 → 0.0.26

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

@@ -5,52 +5,29 @@ 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 = (({ transitionType = 'sweeping', ...props }) => {
+const Collapse = ({ transitionType = 'sweeping', ...props }) => {
     const Component = transitionType === 'sweeping' ? Sweeping : transitionBase_1.TransitionBase;
     return ((0, jsx_runtime_1.jsx)(Component, { ...props, _mode: transitionType === 'sweeping' ? '_sweeping' : 'collapse' }));
-});
-const Sweeping = (({ ref, in: _in = false, appear = true, orientation = 'vertical', collapsedSize = 0, ...props }) => {
+};
+exports.Collapse = Collapse;
+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';
-    const getCollapsedSize = () => {
-        return typeof collapsedSize === 'function' ? collapsedSize() : collapsedSize;
-    };
-    const [size, setSize] = (0, react_1.useState)(_in && !appear ? void 0 : getCollapsedSize());
-    const shouldEntering = (0, react_1.useRef)(appear);
+    const [size, setSize] = (0, utils_1.useDerivedState)((prev) => {
+        return typeof prev === 'undefined' && _in && !appear
+            // 首次展开，如果appear为false，则返回auto，表示直接展开
+            ? 'auto'
+            // 其余情况均返回折叠尺寸，若是展开，展开尺寸需要在requestAnimationFrame后设置
+            : typeof collapsedSize === 'function' ? collapsedSize() : collapsedSize;
+    }, [_in]);
     (0, react_1.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';
+        if (_in && size.current !== 'auto') {
             requestAnimationFrame(() => {
-                el.style.transition = '';
-                setSize(endSize);
+                setSize(innerRef.current[orientation === 'vertical' ? 'scrollHeight' : 'scrollWidth']);
             });
         }
-        shouldEntering.current = true;
     }, [_in]);
-    const onEntered = (a) => {
-        props.onEntered?.(a);
-        setSize(void 0);
-    };
-    const onExited = () => {
-        props.onExited?.();
-        setSize(getCollapsedSize());
-    };
     return ((0, jsx_runtime_1.jsx)(transitionBase_1.TransitionBase, { ...props, in: _in, ref: (0, utils_1.cloneRef)(ref, innerRef), style: {
-            [styleProperty]: size,
-            opacity: size === 0 ? 0 : 1,
+            [orientation === 'vertical' ? 'height' : 'width']: size.current,
             ...props.style
-        }, onEntered: onEntered, onExited: onExited }));
-});
+        } }));
+};

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

@@ -1,4 +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;
+import { ElementType } from 'react';
+import { TransitionBase, TransitionBaseProps } from './transitionBase';
+export type FadeProps<T extends HTMLElement = HTMLElement, C extends ElementType = 'div'> = TransitionBaseProps<T, C>;
+export declare const Fade: typeof TransitionBase;

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

@@ -1,4 +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;
+import { ElementType } from 'react';
+import { TransitionBase, TransitionBaseProps } from './transitionBase';
+export type GrowProps<T extends HTMLElement = HTMLElement, C extends ElementType = 'div'> = TransitionBaseProps<T, C>;
+export declare const Grow: typeof TransitionBase;

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

@@ -1,4 +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;
+import { ElementType } from 'react';
+import { TransitionBase, TransitionBaseProps } from './transitionBase';
+export type SlideProps<T extends HTMLElement = HTMLElement, C extends ElementType = 'div'> = TransitionBaseProps<T, C>;
+export declare const Slide: typeof TransitionBase;

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

@@ -1,7 +1,7 @@
-import { ReactElement } from 'react';
+import { ElementType, ReactElement } from 'react';
 import { TimeoutProps } from 'react-transition-group/Transition';
-export interface TransitionBaseProps<T extends HTMLElement = HTMLElement> extends Partial<TimeoutProps<T>> {
-    component?: any;
+import { OverridableProps } from '../../types';
+export interface TransitionBaseOwnProps<T extends HTMLElement = HTMLElement> extends Omit<Partial<TimeoutProps<T>>, 'children'> {
     /** {@link _mode}"collapse"时生效，展开与收起的方向 默认为`vertical` */
     orientation?: 'vertical' | 'horizontal';
     /** {@link _mode}"slide"时生效，滑入的方向 */
@@ -11,4 +11,5 @@ export interface TransitionBaseProps<T extends HTMLElement = HTMLElement> extend
     /** @private 内部使用，以下预设的过渡组件均继承该组件 */
     _mode?: '_sweeping' | 'collapse' | 'grow' | 'fade' | 'slide';
 }
-export declare const TransitionBase: <T extends HTMLElement>(props: TransitionBaseProps<T>) => ReactElement;
+export type TransitionBaseProps<T extends HTMLElement = HTMLElement, C extends ElementType = 'div'> = OverridableProps<TransitionBaseOwnProps<T>, C>;
+export declare const TransitionBase: <T extends HTMLElement = HTMLElement, C extends ElementType = "div">(props: TransitionBaseProps<T, C>) => ReactElement;

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

@@ -11,19 +11,19 @@ exports.TransitionBase = (({ ref, component: Component = 'div', orientation = 'v
         (0, transitionBase_style_1.useTransitionBaseStyle)({ timeout })
     ];
     if (typeof _mode !== 'undefined') {
-        if (_mode === '_sweeping') {
-            cssArr.push(transitionBase_style_1.sweepingStyle);
-        }
-        else {
-            cssArr.push(transitionBase_style_1.fadeStyle);
-            if (_mode === 'collapse' || _mode === 'grow') {
+        cssArr.push(transitionBase_style_1.fadeStyle);
+        switch (_mode) {
+            case '_sweeping':
+                cssArr.push(transitionBase_style_1.sweepingStyle);
+                break;
+            case 'collapse':
+            case 'grow':
                 cssArr.push((0, transitionBase_style_1.useGrowAndCollapseStyle)({ orientation, _mode }));
-            }
-            else if (_mode === 'slide') {
+                break;
+            case 'slide':
                 cssArr.push((0, transitionBase_style_1.useSlideStyle)({ direction, offset }));
-            }
         }
     }
     const innerRef = (0, react_1.useRef)(null);
-    return ((0, jsx_runtime_1.jsx)(react_transition_group_1.CSSTransition, { ...props, nodeRef: innerRef, className: (0, utils_1.classnames)(transitionBase_style_1.classes.root, props.className), timeout: timeout, appear: appear, children: (0, jsx_runtime_1.jsx)(Component, { ref: (0, utils_1.cloneRef)(ref, innerRef), css: cssArr, children: props.children }) }));
+    return ((0, jsx_runtime_1.jsx)(react_transition_group_1.CSSTransition, { ...props, nodeRef: innerRef, className: (0, utils_1.clsx)(transitionBase_style_1.classes.root, props.className), timeout: timeout, appear: appear, children: (0, jsx_runtime_1.jsx)(Component, { ref: (0, utils_1.cloneRef)(ref, innerRef), css: cssArr, children: props.children }) }));
 });

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

@@ -52,11 +52,13 @@ exports.sweepingStyle = (0, utils_1.defineCss)(({ easing }) => (0, react_1.css)
     transition-property: opacity, width, height;
 
     &.appear-active,
-    &.enter-active {
+    &.enter-active,
+    &.enter-done {
         transition-timing-function: ${easing.easeOut}, ${easing.bounce}, ${easing.bounce};
     }
 
-    &.exit-active {
+    &.exit-active,
+    &.exit-done {
         transition-timing-function: ${easing.easeOut};
     }
 `);

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

@@ -1,6 +1,6 @@
-import { CSSProperties } from 'react';
-import { DIVProps } from '../../types';
-export interface TransportStyleProps extends DIVProps {
+import { CSSProperties, ElementType } from 'react';
+import { OverridableComponent, OverridableProps } from '../../types';
+export type TransportStyleOwnProps = {
     /** 交叉轴对齐方式 */
     alignItems?: CSSProperties['alignItems'];
     /** 平行轴对齐方式 */
@@ -29,5 +29,6 @@ export interface TransportStyleProps extends DIVProps {
     overflowX?: CSSProperties['overflowX'];
     overflowY?: CSSProperties['overflowY'];
     overflow?: CSSProperties['overflow'];
-}
-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;
+};
+export type TransportStyleProps<C extends ElementType = 'div'> = OverridableProps<TransportStyleOwnProps, C>;
+export declare const TransportStyle: OverridableComponent<TransportStyleProps>;

package/dist/cjs/components/transportStyle/transportStyle.js

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

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

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

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

@@ -9,17 +9,18 @@ const selectionContext_1 = require("../selectionContext");
 const input_1 = require("../input");
 const tree_style_1 = require("./tree.style");
 const utils_1 = require("../../utils");
-const icons_1 = require("@ant-design/icons");
 const highlight_1 = require("../highlight");
 const placeholder_1 = require("../placeholder");
 const treeNode_1 = require("./treeNode");
+const __1 = require("../..");
+const faMagnifyingGlass_1 = require("@fortawesome/free-solid-svg-icons/faMagnifyingGlass");
 const TreeContext = (0, react_2.createContext)({});
 function useTreeContext() {
     return (0, react_2.useContext)(TreeContext);
 }
 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继承来的属性
-primaryKey = 'value', childrenKey = 'children', relation = 'dependent', integration = 'shallowest', clearable, disabled, defaultValue, value, onChange, onToggle, shallow, ...props }) => {
+primaryKey = 'value', childrenKey = 'children', relation = 'dependent', integration = 'shallowest', clearable, disabled, defaultValue, value, onChange, onToggle, ...props }) => {
     const selectionContextProps = {
         options: nodes, primaryKey, childrenKey, relation, integration,
         multiple, defaultValue, value, onChange, disabled
@@ -55,8 +56,8 @@ primaryKey = 'value', childrenKey = 'children', relation = 'dependent', integrat
         defaultExpanded, expanded, onExpandedChange,
         defaultSearchValue, searchValue, onSearchChange
     });
-    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 => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: tree_style_1.style, className: (0, utils_1.clsx)(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)(__1.Icon, { icon: faMagnifyingGlass_1.faMagnifyingGlass }), 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)(() => ({

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

@@ -4,9 +4,9 @@ export declare const classes: {
     icon: string;
     prefix: string;
     checkbox: string;
-    indent: string;
     suffix: string;
     expand: string;
+    indent: string;
     node: string;
 } & {
     root: string;

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

@@ -35,7 +35,8 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, borderRadius, text, eas
             margin-bottom: 1px;
             cursor: pointer;
             border-radius: ${borderRadius}px;
-            transition: background-color .2s ${easing.easeOut};
+            transition: background-color .25s ${easing.easeOut};
+            -webkit-tap-highlight-color: transparent;
 
             &[data-disabled=true] {
                 color: ${text.disabled};
@@ -76,7 +77,7 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, borderRadius, text, eas
                 justify-content: center;
 
                 .${exports.classes.icon} > svg {
-                    transition: transform .2s ${easing.easeOut};
+                    transition: transform .25s ${easing.easeOut};
                 }
             }
 
@@ -101,7 +102,7 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, borderRadius, text, eas
         }
 
         &[data-show-line=true] {
-            \.${exports.classes.indent}:after {
+            .${exports.classes.indent}:after {
                 content: '';
                 width: 1px;
                 height: 100%;

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { DIVProps, Id } from '../../types';
-export interface TreeNodeProps extends Omit<DIVProps, 'prefix'> {
+import { DivProps, Id } from '../../types';
+export interface TreeNodeProps extends Omit<DivProps, 'prefix'> {
     value: Id;
     label?: ReactNode;
     prefix?: ReactNode;

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

@@ -6,11 +6,12 @@ const react_1 = require("react");
 const tree_style_1 = require("./tree.style");
 const utils_1 = require("../../utils");
 const transitionBase_1 = require("../transitionBase");
-const icons_1 = require("@ant-design/icons");
 const button_1 = require("../button");
 const checkbox_1 = require("../checkbox");
 const tree_1 = require("./tree");
 const selectionContext_1 = require("../selectionContext");
+const __1 = require("../..");
+const faChevronRight_1 = require("@fortawesome/free-solid-svg-icons/faChevronRight");
 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;
@@ -22,13 +23,15 @@ exports.TreeNode = (0, react_1.memo)(({ value, label, prefix, suffix, disabled,
         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, 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.clsx)(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
                             ? renderExpandIcon(value, !!currentExpanded, [...expandedSet])
                             : hasChildren &&
-                                (0, jsx_runtime_1.jsx)(icons_1.RightOutlined, { className: tree_style_1.classes.icon, rotate: currentExpanded ? 90 : 0 }) }), showCheckbox &&
+                                (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faChevronRight_1.faChevronRight, className: tree_style_1.classes.icon, style: {
+                                        rotate: currentExpanded ? '90deg' : '0'
+                                    } }) }), showCheckbox &&
                         (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: tree_style_1.classes.checkbox, checked: status === 2, indeterminate: status === 1, onClick: e => {
                                 e.stopPropagation();
                                 clickHandler();

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

@@ -1,11 +1,10 @@
-import React, { ReactElement, ReactNode, Ref } from 'react';
+import { ReactElement, ReactNode, Ref, JSX } from 'react';
 import { PopperProps, PopperRef } from '../popper';
 import { NodeType, TreeBaseProps, TreeNode } from '../tree';
 import { Id, SelectableSingleProps } from '../../types';
 interface TreeSelectBaseProps<N extends NodeType<V>, V extends Id = Id> extends TreeBaseProps<N, V> {
     /** <select />内部由<input />实现 */
-    inputProps?: React.JSX.IntrinsicElements['input'];
-    inputRef?: Ref<HTMLInputElement>;
+    inputProps?: JSX.IntrinsicElements['input'];
     popperProps?: PopperProps;
     popperRef?: Ref<PopperRef>;
     options?: N[];

package/dist/cjs/components/treeSelect/treeSelect.js

@@ -5,7 +5,6 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const popper_1 = require("../popper");
 const tree_1 = require("../tree");
-const icons_1 = require("@ant-design/icons");
 const utils_1 = require("../../utils");
 const inputBase_1 = require("../inputBase");
 const loadingIndicator_1 = require("../loadingIndicator");
@@ -13,7 +12,9 @@ const popper_style_1 = require("../popper/popper.style");
 const tag_1 = require("../tag");
 const treeSelect_style_1 = require("./treeSelect.style");
 const selectionContext_1 = require("../selectionContext");
-exports.TreeSelect = (0, react_1.memo)(({ inputProps, inputRef, popperProps, popperRef, nodes, options, defaultValue, value, onChange, sizeAdaptable, loading, defaultOpen, open, onOpenChange, renderBackfill, 
+const __1 = require("../..");
+const faChevronDown_1 = require("@fortawesome/free-solid-svg-icons/faChevronDown");
+exports.TreeSelect = (0, react_1.memo)(({ inputProps, popperProps, popperRef, nodes, options, defaultValue, value, onChange, sizeAdaptable, loading, defaultOpen, open, onOpenChange, renderBackfill, 
 // 以下属性转发至<InputBase/>
 placeholder = '请选择', autoFocus, clearable, onClear, ...props }) => {
     props.labelKey ??= 'label';
@@ -73,10 +74,10 @@ placeholder = '请选择', autoFocus, clearable, onClear, ...props }) => {
     return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { css: popper_style_1.popperStyle, open: innerOpen.current, onOpenChange: openChangeHandler, placement: "bottom", variant: "collapse", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, sizeAdaptable: sizeAdaptable, content: (0, jsx_runtime_1.jsx)(tree_1.Tree, { ...props, nodes: options, value: innerValue.current, onChange: setInnerValue }), ...popperProps, popperRef: popperRef, onPointerDown: e => {
             popperProps?.onPointerDown?.(e);
             e.preventDefault();
-        }, children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { clearable: !!props.multiple, css: treeSelect_style_1.style, className: (0, utils_1.classnames)(treeSelect_style_1.classes.root, props.className), "data-focused": open, value: innerValue.current, onClear: clearHandler, placeholder: placeholder, autoFocus: autoFocus, disabled: props.disabled, readOnly: props.readOnly, children: ({ ref, ...rest }) => (0, jsx_runtime_1.jsxs)("div", { className: treeSelect_style_1.classes.contentWrap, children: [!(0, utils_1.toArray)(innerValue.current)?.length
+        }, children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { clearable: !!props.multiple, css: treeSelect_style_1.style, className: (0, utils_1.clsx)(treeSelect_style_1.classes.root, props.className), "data-focused": open, value: innerValue.current, onClear: clearHandler, placeholder: placeholder, autoFocus: autoFocus, disabled: props.disabled, readOnly: props.readOnly, children: ({ ref, ...rest }) => (0, jsx_runtime_1.jsxs)("div", { className: treeSelect_style_1.classes.contentWrap, children: [!(0, utils_1.toArray)(innerValue.current)?.length
                         ? (0, jsx_runtime_1.jsx)("div", { className: treeSelect_style_1.classes.placeholder, children: placeholder })
-                        : (0, jsx_runtime_1.jsx)("div", { className: treeSelect_style_1.classes.backfill, children: renderBackfillFn() }), (0, jsx_runtime_1.jsx)("input", { size: 1, ...rest, ...inputProps, ref: (0, utils_1.cloneRef)(ref, inputRef), "data-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { className: treeSelect_style_1.classes.arrow, "data-open": open, children: loading
+                        : (0, jsx_runtime_1.jsx)("div", { className: treeSelect_style_1.classes.backfill, children: renderBackfillFn() }), (0, jsx_runtime_1.jsx)("input", { size: 1, ...rest, ...inputProps, ref: (0, utils_1.cloneRef)(ref, inputProps?.ref), "data-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { className: treeSelect_style_1.classes.arrow, "data-open": open, children: loading
                             ? (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, {})
-                            : (0, jsx_runtime_1.jsx)(icons_1.CaretDownOutlined, {}) })] }) }) }));
+                            : (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faChevronDown_1.faChevronDown }) })] }) }) }));
 });
 exports.TreeSelect.Option = exports.TreeSelect.Node = tree_1.TreeNode;

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

@@ -50,7 +50,7 @@ exports.style = (0, utils_1.defineCss)(({ spacing, text, easing }) => (0, react_
 
     .${exports.classes.arrow} {
         color: ${text.placeholder};
-        transition: transform .2s ${easing.easeOut};
+        transition: transform .25s ${easing.easeOut};
 
         &[data-open=true] {
             transform: rotate(180deg);

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

@@ -1,23 +1,26 @@
-import React, { CSSProperties, ReactNode } from 'react';
+import { CSSProperties, ReactNode, ElementType } from 'react';
 import { ColorPropsValue, OverridableProps } from '../../types';
 import { ButtonProps } from '../button';
 import { InputProps } from '../input';
 import { TextareaProps } from '../textarea';
-export type TypographyProps = {
+export type TypographyOwnProps = {
+    /** 默认为`text.primary` */
     color?: ColorPropsValue;
     editable?: boolean;
     onEditFinish?(text: string): void;
     copyable?: boolean;
     onCopy?(text: string): void;
     editComponentProps?: InputProps | TextareaProps;
+    /** 超过该行数会显示省略号，0表示不省略，默认为`0` */
     ellipsisRows?: number;
     wordBreak?: CSSProperties['wordBreak'];
     expandable?: boolean;
     expandButtonProps?: ButtonProps;
 };
-export type OverrideTypographyProps<C> = TypographyProps & Omit<OverridableProps<C>, 'onCopy'>;
-type TypographyComponent<C extends keyof React.JSX.IntrinsicElements = 'p'> = (props: OverrideTypographyProps<C>) => ReactNode;
+export type TypographyProps<C extends ElementType = 'p'> = OverridableProps<TypographyOwnProps, C>;
+type TypographyComponent<C extends ElementType = 'p'> = (props: TypographyProps<C>) => ReactNode;
 export declare const Typography: TypographyComponent & {
+    div: TypographyComponent<"div">;
     h1: TypographyComponent<"h1">;
     h2: TypographyComponent<"h2">;
     h3: TypographyComponent<"h3">;

package/dist/cjs/components/typography/typography.js

@@ -6,11 +6,14 @@ const react_1 = require("react");
 const utils_1 = require("../../utils");
 const typography_style_1 = require("./typography.style");
 const button_1 = require("../button");
-const icons_1 = require("@ant-design/icons");
 const tooltip_1 = require("../tooltip");
 const input_1 = require("../input");
 const textarea_1 = require("../textarea");
-exports.Typography = (0, react_1.memo)(({ ref, component: Component = 'p', color = 'text.secondary', editable, onEditFinish, copyable, onCopy, editComponentProps, ellipsisRows = 0, wordBreak = 'break-all', expandable, expandButtonProps, ...props }) => {
+const __1 = require("../..");
+const faCheck_1 = require("@fortawesome/free-solid-svg-icons/faCheck");
+const faCopy_1 = require("@fortawesome/free-regular-svg-icons/faCopy");
+const faPenToSquare_1 = require("@fortawesome/free-regular-svg-icons/faPenToSquare");
+exports.Typography = (0, react_1.memo)(({ component: Component = 'p', color = 'text.primary', editable, onEditFinish, copyable, onCopy, editComponentProps, ellipsisRows = 0, wordBreak = 'break-all', expandable, expandButtonProps, ...props }) => {
     /**
      * -------------------------------------------------------------------
      * 编辑
@@ -62,19 +65,22 @@ exports.Typography = (0, react_1.memo)(({ ref, component: Component = 'p', color
             textRef.current.style.height = parseFloat(lineHeight) * ellipsisRows + 'px';
         }
     });
-    const style = (0, typography_style_1.useStyle)({ color });
+    const style = (0, typography_style_1.useStyle)({ color: color || 'text.primary' });
     const EditComponent = multipleRows ? textarea_1.Textarea : input_1.Input;
     return editing
-        ? (0, jsx_runtime_1.jsx)("div", { css: typography_style_1.editStyle, className: typography_style_1.classes.editWrap, style: { height: originHeight }, children: (0, jsx_runtime_1.jsx)(EditComponent, { ...editComponentProps, className: (0, utils_1.classnames)(typography_style_1.classes.editComponent, editComponentProps?.className), autoFocus: true, defaultValue: defaultText, onBlur: blurHandler, fullWidth: multipleRows ? true : void 0 }) })
-        : (0, jsx_runtime_1.jsxs)(Component, { "data-component": typeof Component === 'string' ? Component : '', ...props, ref: (0, utils_1.cloneRef)(ref, innerRef), css: style, className: (0, utils_1.classnames)(typography_style_1.classes.root, props.className), "data-ellipsis-rows": expanded ? '0' : ellipsisRows, children: [(0, jsx_runtime_1.jsx)("span", { ref: textRef, className: typography_style_1.classes.text, style: {
-                        WebkitLineClamp: ellipsisRows > 1 ? ellipsisRows : void 0,
-                        wordBreak
-                    }, children: props.children }), !expanded && expandable && ellipsisRows > 0 &&
-                    (0, jsx_runtime_1.jsx)(button_1.Button, { ...expandButtonProps, className: (0, utils_1.classnames)(typography_style_1.classes.expand, typography_style_1.classes.action, expandButtonProps?.className), variant: "plain", onClick: () => setExpanded(true), children: "\u5C55\u5F00" }), editable &&
-                    (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u7F16\u8F91", children: (0, jsx_runtime_1.jsx)(button_1.Button, { className: typography_style_1.classes.action, variant: "plain", onClick: editHandler, children: (0, jsx_runtime_1.jsx)(icons_1.EditOutlined, {}) }) }), copyable && (copied
-                    ? (0, jsx_runtime_1.jsx)("div", { className: typography_style_1.classes.copied, children: (0, jsx_runtime_1.jsx)(icons_1.CheckOutlined, {}) })
-                    : (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u590D\u5236", children: (0, jsx_runtime_1.jsx)(button_1.Button, { className: typography_style_1.classes.action, variant: "plain", onClick: copyHandler, children: (0, jsx_runtime_1.jsx)(icons_1.CopyOutlined, {}) }) }))] });
+        ? (0, jsx_runtime_1.jsx)("div", { css: typography_style_1.editStyle, className: typography_style_1.classes.editWrap, style: { height: originHeight }, children: (0, jsx_runtime_1.jsx)(EditComponent, { ...editComponentProps, className: (0, utils_1.clsx)(typography_style_1.classes.editComponent, editComponentProps?.className), autoFocus: true, defaultValue: defaultText, onBlur: blurHandler, fullWidth: multipleRows ? true : void 0 }) })
+        : (0, jsx_runtime_1.jsxs)(Component, { "data-component": typeof Component === 'string' ? Component : '', ...props, ref: (0, utils_1.cloneRef)(innerRef, props.ref), css: style, className: (0, utils_1.clsx)(typography_style_1.classes.root, props.className), "data-ellipsis-rows": expanded ? '0' : ellipsisRows, children: [ellipsisRows > 0
+                    ? (0, jsx_runtime_1.jsx)("span", { ref: textRef, className: typography_style_1.classes.text, style: {
+                            WebkitLineClamp: ellipsisRows > 1 ? ellipsisRows : void 0,
+                            wordBreak
+                        }, children: props.children })
+                    : props.children, !expanded && expandable && ellipsisRows > 0 &&
+                    (0, jsx_runtime_1.jsx)(button_1.Button, { ...expandButtonProps, className: (0, utils_1.clsx)(typography_style_1.classes.expand, typography_style_1.classes.action, expandButtonProps?.className), variant: "plain", onClick: () => setExpanded(true), children: "\u5C55\u5F00" }), editable &&
+                    (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u7F16\u8F91", children: (0, jsx_runtime_1.jsx)(button_1.Button, { className: typography_style_1.classes.action, variant: "plain", onClick: editHandler, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faPenToSquare_1.faPenToSquare }) }) }), copyable && (copied
+                    ? (0, jsx_runtime_1.jsx)("div", { className: typography_style_1.classes.copied, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faCheck_1.faCheck }) })
+                    : (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u590D\u5236", children: (0, jsx_runtime_1.jsx)(button_1.Button, { className: typography_style_1.classes.action, variant: "plain", onClick: copyHandler, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faCopy_1.faCopy }) }) }))] });
 });
+exports.Typography.div = (0, react_1.memo)((props) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, component: "div" }));
 exports.Typography.h1 = (0, react_1.memo)((props) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, component: "h1" }));
 exports.Typography.h2 = (0, react_1.memo)((props) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, component: "h2" }));
 exports.Typography.h3 = (0, react_1.memo)((props) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, component: "h3" }));

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

@@ -1,9 +1,9 @@
 import { TypographyProps } from './typography';
 export declare const classes: {
     text: string;
-    action: string;
     ellipsis: string;
     expand: string;
+    action: string;
     copied: string;
     editWrap: string;
     editComponent: string;

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

@@ -18,7 +18,6 @@ exports.classes = (0, utils_1.defineClasses)('typography', [
 function useStyle({ color }) {
     const colorValue = (0, utils_1.useColor)(color);
     return (0, utils_1.useCss)(({ mode, colors, gray, borderRadius, easing }) => {
-        const lighter = (0, color_1.default)(colorValue).lighten(.1).hex();
         return (0, react_1.css) `
             color: ${colorValue};
 
@@ -35,33 +34,33 @@ function useStyle({ color }) {
                 margin-top: 1em;
                 margin-bottom: 0.5em;
             }
-            
+
             &[data-component=h1] {
                 font-size: ${38 / 14}em;
             }
-            
+
             &[data-component=h2] {
                 font-size: ${30 / 14}em;
             }
-            
+
             &[data-component=h3] {
                 font-size: ${24 / 14}em;
             }
-            
+
             &[data-component=h4] {
                 font-size: ${20 / 14}em;
             }
-            
+
             &[data-component=h5] {
                 font-size: ${17 / 14}em;
             }
-            
+
             &[data-component=h6] {
                 font-size: 1em;
             }
 
             &[data-component=mark] {
-                background-color: ${(0, color_1.default)(colors.warning.main).lighten(.2).hex()};
+                background-color: ${(0, color_1.default)(colors.warning.main).lighten(.5).hex()};
             }
 
             &[data-component=kbd] {
@@ -76,25 +75,27 @@ function useStyle({ color }) {
             }
 
             &[data-component=code] {
-                background-color: ${gray(.08)};
-                border: 1px solid ${gray(.3)};
+                background-color: ${gray(.06)};
                 font-size: ${13 / 14}em;
+                font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
                 padding: 3px 6px;
                 border-radius: .15em;
-                margin: 0 3px;
+                margin: 0 4px;
+                outline: none;
             }
 
             &[data-component=a] {
                 color: ${colors.primary.main};
-                transition: color .2s ${easing.easeOut};
+                transition: color .25s ${easing.easeOut};
+                -webkit-tap-highlight-color: transparent;
 
                 &:hover {
-                    color: ${lighter};
+                    color: ${colors.primary.light};
                 }
 
                 &:active {
                     transition: color 0s;
-                    color: ${lighter};
+                    color: ${colors.primary.dark};
                 }
             }
 
@@ -140,7 +141,7 @@ function useStyle({ color }) {
             .${exports.classes.copied} {
                 align-items: center;
                 color: ${colors.success.main};
-                animation: ${copyCheckAnim} .2s ${easing.swing};
+                animation: ${copyCheckAnim} .3s ${easing.swing};
             }
         `;
     }, [colorValue]);

package/dist/cjs/components/upload/dropArea.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
-import { DIVProps } from '../../types';
-export interface DropAreaProps extends Omit<DIVProps, 'onDrop'> {
+import { DivProps } from '../../types';
+export interface DropAreaProps extends Omit<DivProps, 'onDrop'> {
     description?: ReactNode;
     onDrop?(files: FileList): void;
 }