@canlooks/can-ui 0.0.24 → 0.0.26

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

@@ -1,8 +1,8 @@
 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'> {
+export interface TransferPanelProps<O extends MenuOptionType<V>, V extends Id = Id> extends Omit<DivProps, 'title' | 'onChange'> {
     title?: ReactNode;
     type?: 'left' | 'right';
     selectedValue?: V[];

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

@@ -1,10 +1,11 @@
-import { ReactElement } from 'react';
+import { ElementType, ReactElement } from 'react';
 import { TransitionBaseProps } from './transitionBase';
-export interface CollapseProps<T extends HTMLElement = HTMLElement> extends TransitionBaseProps<T> {
+import { MergeProps } from '../../types';
+export type CollapseOwnProps = {
     /**
      * 动画实现的方式
-     * @enum {"sweeping"}: 通过修改width或height实现
-     * @enum {"scaling"}: 通过transform实现
+     * @enum {'sweeping'}: 通过修改width或height实现
+     * @enum {'scaling'}: 通过transform实现
      * 默认为`sweeping`
      */
     transitionType?: 'sweeping' | 'scaling';
@@ -14,5 +15,6 @@ export interface CollapseProps<T extends HTMLElement = HTMLElement> extends Tran
      * 默认为0
      */
     collapsedSize?: number | (() => number);
-}
-export declare const Collapse: <T extends HTMLElement>(props: CollapseProps<T>) => ReactElement;
+};
+export type CollapseProps<T extends HTMLElement = HTMLElement, C extends ElementType = 'div'> = MergeProps<CollapseOwnProps, TransitionBaseProps<T, C>>;
+export declare const Collapse: <T extends HTMLElement = HTMLElement, C extends ElementType = 'div'>(props: CollapseProps<T, C>) => ReactElement;

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

@@ -1,53 +1,29 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
 import { TransitionBase } from './transitionBase';
-import { cloneRef } from '../../utils';
-export const Collapse = (({ transitionType = 'sweeping', ...props }) => {
+import { cloneRef, useDerivedState } from '../../utils';
+export const Collapse = ({ transitionType = 'sweeping', ...props }) => {
     const Component = transitionType === 'sweeping' ? Sweeping : TransitionBase;
     return (_jsx(Component, { ...props, _mode: transitionType === 'sweeping' ? '_sweeping' : 'collapse' }));
-});
-const Sweeping = (({ ref, in: _in = false, appear = true, orientation = 'vertical', collapsedSize = 0, ...props }) => {
+};
+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';
-    const getCollapsedSize = () => {
-        return typeof collapsedSize === 'function' ? collapsedSize() : collapsedSize;
-    };
-    const [size, setSize] = useState(_in && !appear ? void 0 : getCollapsedSize());
-    const shouldEntering = useRef(appear);
+    const [size, setSize] = useDerivedState((prev) => {
+        return typeof prev === 'undefined' && _in && !appear
+            // 首次展开，如果appear为false，则返回auto，表示直接展开
+            ? 'auto'
+            // 其余情况均返回折叠尺寸，若是展开，展开尺寸需要在requestAnimationFrame后设置
+            : typeof collapsedSize === 'function' ? collapsedSize() : collapsedSize;
+    }, [_in]);
     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 (_jsx(TransitionBase, { ...props, in: _in, ref: 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/esm/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/esm/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/esm/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/esm/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/esm/components/transitionBase/transitionBase.js

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

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

@@ -46,11 +46,13 @@ export const sweepingStyle = defineCss(({ easing }) => 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/esm/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/esm/components/transportStyle/transportStyle.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { filterProperties } from '../../utils';
-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({
+export 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 (_jsx(Component, { ...props, style: filterProperties({
             alignItems, justifyContent, alignSelf, justifySelf, flex,
             width, minWidth, maxWidth, height, minHeight, maxHeight, lineHeight,
             padding, paddingTop, paddingRight, paddingBottom, paddingLeft,
@@ -9,4 +9,4 @@ export function TransportStyle({ alignItems, justifyContent, alignSelf, justifyS
             overflow, overflowX, overflowY,
             ...props.style
         }) }));
-}
+};

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

@@ -4,18 +4,19 @@ import { Children, createContext, isValidElement, memo, useContext, useMemo } fr
 import { SelectionContext } from '../selectionContext';
 import { Input } from '../input';
 import { classes, style } from './tree.style';
-import { classnames, useTreeSearch } from '../../utils';
-import { SearchOutlined } from '@ant-design/icons';
+import { clsx, useTreeSearch } from '../../utils';
 import { Highlight } from '../highlight';
 import { Placeholder } from '../placeholder';
 import { TreeNode } from './treeNode';
+import { Icon } from '../..';
+import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons/faMagnifyingGlass';
 const TreeContext = createContext({});
 export function useTreeContext() {
     return useContext(TreeContext);
 }
 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继承来的属性
-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
@@ -51,8 +52,8 @@ primaryKey = 'value', childrenKey = 'children', relation = 'dependent', integrat
         defaultExpanded, expanded, onExpandedChange,
         defaultSearchValue, searchValue, onSearchChange
     });
-    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 => {
+    return (_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), "data-show-line": showLine, children: [searchable &&
+                _jsx(Input, { className: classes.search, prefix: _jsx(Icon, { icon: faMagnifyingGlass }), placeholder: "\u641C\u7D22", value: innerSearchValue.current, ...searchInputProps, onChange: e => {
                         searchInputProps?.onChange?.(e);
                         setInnerSearchValue(e.target.value);
                     } }), _jsx(SelectionContext, { ...selectionContextProps, children: _jsx(TreeContext, { value: useMemo(() => ({

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

@@ -31,7 +31,8 @@ export const style = defineCss(({ spacing, mode, borderRadius, text, easing, gra
             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};
@@ -72,7 +73,7 @@ export const style = defineCss(({ spacing, mode, borderRadius, text, easing, gra
                 justify-content: center;
 
                 .${classes.icon} > svg {
-                    transition: transform .2s ${easing.easeOut};
+                    transition: transform .25s ${easing.easeOut};
                 }
             }
 
@@ -97,7 +98,7 @@ export const style = defineCss(({ spacing, mode, borderRadius, text, easing, gra
         }
 
         &[data-show-line=true] {
-            \.${classes.indent}:after {
+            .${classes.indent}:after {
                 content: '';
                 width: 1px;
                 height: 100%;

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

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 import { Children, cloneElement, isValidElement, memo } from 'react';
 import { classes } from './tree.style';
-import { classnames } from '../../utils';
+import { clsx } from '../../utils';
 import { Collapse } from '../transitionBase';
-import { RightOutlined } from '@ant-design/icons';
 import { Button } from '../button';
 import { Checkbox } from '../checkbox';
 import { useTreeContext } from './tree';
 import { useSelectionContext } from '../selectionContext';
+import { Icon } from '../..';
+import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight';
 export const TreeNode = memo(({ value, label, prefix, suffix, disabled, _level = 0, ...props }) => {
     const { expandedSet = new Set(), toggleExpanded, indent, renderExpandIcon, showCheckbox, readOnly, clickLabelToExpand, ...context } = useTreeContext();
     disabled ??= context.disabled;
@@ -19,13 +20,15 @@ export const TreeNode = memo(({ value, label, prefix, suffix, disabled, _level =
         clickLabelToExpand && toggleExpanded?.(value);
     };
     const hasChildren = !!props.children && (!Array.isArray(props.children) || props.children.length > 0);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { ...props, className: classnames(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) => _jsx("div", { className: classes.indent, style: { width: indent } }, i)), _jsx(Button, { className: classes.expand, variant: "plain", color: "text", onClick: e => {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ...props, className: clsx(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) => _jsx("div", { className: classes.indent, style: { width: indent } }, i)), _jsx(Button, { className: classes.expand, variant: "plain", color: "text", onClick: e => {
                             e.stopPropagation();
                             toggleExpanded?.(value);
                         }, children: renderExpandIcon
                             ? renderExpandIcon(value, !!currentExpanded, [...expandedSet])
                             : hasChildren &&
-                                _jsx(RightOutlined, { className: classes.icon, rotate: currentExpanded ? 90 : 0 }) }), showCheckbox &&
+                                _jsx(Icon, { icon: faChevronRight, className: classes.icon, style: {
+                                        rotate: currentExpanded ? '90deg' : '0'
+                                    } }) }), showCheckbox &&
                         _jsx(Checkbox, { className: classes.checkbox, checked: status === 2, indeterminate: status === 1, onClick: e => {
                                 e.stopPropagation();
                                 clickHandler();

package/dist/esm/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/esm/components/treeSelect/treeSelect.js

@@ -2,15 +2,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Children, isValidElement, memo, useMemo } from 'react';
 import { Popper } from '../popper';
 import { Tree, TreeNode } from '../tree';
-import { CaretDownOutlined } from '@ant-design/icons';
-import { useControlled, toArray, classnames, cloneRef } from '../../utils';
+import { useControlled, toArray, clsx, cloneRef } from '../../utils';
 import { InputBase } from '../inputBase';
 import { LoadingIndicator } from '../loadingIndicator';
 import { popperStyle } from '../popper/popper.style';
 import { Tag } from '../tag';
 import { classes, style } from './treeSelect.style';
 import { useSelection } from '../selectionContext';
-export const TreeSelect = memo(({ inputProps, inputRef, popperProps, popperRef, nodes, options, defaultValue, value, onChange, sizeAdaptable, loading, defaultOpen, open, onOpenChange, renderBackfill, 
+import { Icon } from '../..';
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
+export const TreeSelect = memo(({ inputProps, popperProps, popperRef, nodes, options, defaultValue, value, onChange, sizeAdaptable, loading, defaultOpen, open, onOpenChange, renderBackfill, 
 // 以下属性转发至<InputBase/>
 placeholder = '请选择', autoFocus, clearable, onClear, ...props }) => {
     props.labelKey ??= 'label';
@@ -70,10 +71,10 @@ placeholder = '请选择', autoFocus, clearable, onClear, ...props }) => {
     return (_jsx(Popper, { css: popperStyle, open: innerOpen.current, onOpenChange: openChangeHandler, placement: "bottom", variant: "collapse", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, sizeAdaptable: sizeAdaptable, content: _jsx(Tree, { ...props, nodes: options, value: innerValue.current, onChange: setInnerValue }), ...popperProps, popperRef: popperRef, onPointerDown: e => {
             popperProps?.onPointerDown?.(e);
             e.preventDefault();
-        }, children: _jsx(InputBase, { clearable: !!props.multiple, css: style, className: classnames(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 }) => _jsxs("div", { className: classes.contentWrap, children: [!toArray(innerValue.current)?.length
+        }, children: _jsx(InputBase, { clearable: !!props.multiple, css: style, className: clsx(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 }) => _jsxs("div", { className: classes.contentWrap, children: [!toArray(innerValue.current)?.length
                         ? _jsx("div", { className: classes.placeholder, children: placeholder })
-                        : _jsx("div", { className: classes.backfill, children: renderBackfillFn() }), _jsx("input", { size: 1, ...rest, ...inputProps, ref: cloneRef(ref, inputRef), "data-hidden": "true" }), _jsx("div", { className: classes.arrow, "data-open": open, children: loading
+                        : _jsx("div", { className: classes.backfill, children: renderBackfillFn() }), _jsx("input", { size: 1, ...rest, ...inputProps, ref: cloneRef(ref, inputProps?.ref), "data-hidden": "true" }), _jsx("div", { className: classes.arrow, "data-open": open, children: loading
                             ? _jsx(LoadingIndicator, {})
-                            : _jsx(CaretDownOutlined, {}) })] }) }) }));
+                            : _jsx(Icon, { icon: faChevronDown }) })] }) }) }));
 });
 TreeSelect.Option = TreeSelect.Node = TreeNode;

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

@@ -47,7 +47,7 @@ export const style = defineCss(({ spacing, text, easing }) => css `
 
     .${classes.arrow} {
         color: ${text.placeholder};
-        transition: transform .2s ${easing.easeOut};
+        transition: transform .25s ${easing.easeOut};
 
         &[data-open=true] {
             transform: rotate(180deg);

package/dist/esm/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/esm/components/typography/typography.js

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

package/dist/esm/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;