@canlooks/can-ui 0.0.25 → 0.0.26

package/dist/esm/components/popper/popper.js

@@ -1,26 +1,25 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { cloneElement, isValidElement, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { classnames, cloneRef, fineParent, isElementVisibleCompletely, toArray, useControlled, useDerivedState, useForceUpdate, useSyncState, useUnmounted } from '../../utils';
+import { clsx, cloneRef, isElementVisibleCompletely, listenAllPredecessorsScroll, toArray, useControlled, useDerivedState, useForceUpdate, useSync, useSyncState, useUnmounted } from '../../utils';
 import { ClickAway } from '../clickAway';
 import { classes, style } from './popper.style';
-import { PopperContext } from './popperContext';
+import { PopperContext, usePopperContext } from './popperContext';
 import { useTheme } from '../theme';
 const getAttemptOrder = (placement) => {
-    const withoutPlaceB = {
-        'top': ['top', 'bottom', 'left', 'right', 'top'],
-        'bottom': ['bottom', 'top', 'left', 'right', 'bottom'],
-        'left': ['left', 'right', 'top', 'bottom', 'left'],
-        'right': ['right', 'left', 'top', 'bottom', 'right']
-    };
-    if (placement in withoutPlaceB) {
-        return withoutPlaceB[placement];
+    const order = ['top', 'bottom', 'left', 'right', 'topLeft', 'topRight', 'rightTop', 'rightBottom', 'bottomRight', 'bottomLeft', 'leftBottom', 'leftTop'];
+    const index = order.indexOf(placement);
+    if (index > -1) {
+        return [
+            placement,
+            ...order.slice(0, index),
+            ...order.slice(index + 1),
+            placement
+        ];
     }
-    const common = ['topLeft', 'topRight', 'rightTop', 'rightBottom', 'bottomRight', 'bottomLeft', 'leftBottom', 'leftTop'];
-    common.splice(common.indexOf(placement), 1);
-    return [placement, ...common, placement];
+    return order;
 };
-export function Popper({ ref, popperRef, anchorElement, container = document.body, content, offset, trigger = ['hover', 'focus'], placement = 'top', variant = 'zoom', sizeAdaptable = variant === 'collapse', mouseEnterDelay = 100, mouseLeaveDelay = 150, defaultOpen = false, open, onOpenChange, onOpenChangeEnd, disabled, autoClose = false, forceRender, children, ...props }) {
+export function Popper({ ref, popperRef, anchorElement, container = document.body, content, offset, trigger = 'hover', placement = 'top', variant = 'zoom', sizeAdaptable = variant === 'collapse', mouseEnterDelay = 100, mouseLeaveDelay = 150, defaultOpen = false, open, onOpenChange, onOpenChangeEnd, disabled, autoClose = false, forceRender, children, ...props }) {
     const { spacing } = useTheme();
     offset ??= spacing[2];
     useImperativeHandle(popperRef, () => {
@@ -31,23 +30,53 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
     });
     /**
      * --------------------------------------------------------------
-     * 打开关闭与是否渲染
+     * 打开关闭
      */
     const unmounted = useUnmounted();
-    const openHolding = useRef(false);
+    const openHolding = useRef(0);
+    const hold = (open) => {
+        return open ? ++openHolding.current
+            : openHolding.current > 0 ? --openHolding.current
+                : openHolding.current;
+    };
     const [innerOpen, _setInnerOpen] = useControlled(defaultOpen, open, onOpenChange);
     const [contextMenuEvent, setContextMenuEvent] = useSyncState();
-    const setInnerOpen = (open, contextMenuEvent) => {
+    const setInnerOpen = (open, force) => {
         if (disabled || unmounted.current) {
             return;
         }
-        const openState = typeof open === 'function' ? open(innerOpen.current) : open;
-        if (openState || !openHolding.current) {
-            // 需要openHolding为false时才能关闭
-            _setInnerOpen(openState);
-            setContextMenuEvent(contextMenuEvent);
+        const newOpen = typeof open === 'function' ? open(innerOpen.current) : open;
+        if (newOpen === innerOpen.current) {
+            return;
+        }
+        // 打开时无需判断，关闭时需要判断openHolding.current是否归0
+        if (newOpen || force || !openHolding.current) {
+            _setInnerOpen(newOpen);
         }
     };
+    const { onChildrenOpenChange: tellParentOpenChange } = usePopperContext();
+    const isInitial = useRef(true);
+    useEffect(() => {
+        if (isInitial.current) {
+            isInitial.current = false;
+            return;
+        }
+        tellParentOpenChange(innerOpen.current);
+    }, [innerOpen.current]);
+    const onChildrenOpenChange = (open) => {
+        hold(open) === 0 && setInnerOpen(false);
+    };
+    const setOpenForce = (open) => {
+        setInnerOpen(open, true);
+    };
+    const openAndHold = (open) => {
+        hold(open);
+        setInnerOpen(open);
+    };
+    /**
+     * --------------------------------------------------------------
+     * 渲染条件
+     */
     const renderedOnce = useRef(!!forceRender);
     if (innerOpen.current) {
         renderedOnce.current = true;
@@ -68,18 +97,18 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
      * 计算弹框位置
      */
     const anchorRef = useRef(null);
+    const syncAnchorElement = useSync(anchorElement);
     const getAnchorElement = () => {
-        return anchorRef.current || (typeof anchorElement === 'function' ? anchorElement() : anchorElement);
+        return anchorRef.current || (typeof syncAnchorElement.current === 'function' ? syncAnchorElement.current() : syncAnchorElement.current);
     };
-    const containerEl = (typeof container === 'function' ? container() : container) || document.body;
+    const containerRef = useSync((typeof container === 'function' ? container() : container) || document.body);
     const innerPopperRef = useRef(null);
-    const [popperPosition, setPopperPosition] = useState();
-    const [popperSize, setPopperSize] = useState();
+    const [popperBounding, setPopperBounding] = useState();
     const [openNextFrame, setOpenNextFrame] = useDerivedState(!innerOpen.current, [innerOpen.current, contextMenuEvent.current]);
     const placeA = useRef(void 0);
     const placeB = useRef(void 0);
     const fitPosition = (options, beforeOpen) => {
-        const containerRect = containerEl.getBoundingClientRect();
+        const containerRect = containerRef.current.getBoundingClientRect();
         const popperEl = innerPopperRef.current;
         let { offsetWidth: popperWidth, offsetHeight: popperHeight } = popperEl;
         let pA, pB;
@@ -155,7 +184,7 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
                 }
                 popperEl.style.left = left + 'px';
                 popperEl.style.top = top + 'px';
-                return isElementVisibleCompletely(popperEl, containerEl === document.body ? void 0 : containerEl);
+                return isElementVisibleCompletely(popperEl, containerRef.current === document.body ? void 0 : containerRef.current);
             };
         }
         else {
@@ -226,7 +255,7 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
                 }
                 popperEl.style.left = left + 'px';
                 popperEl.style.top = top + 'px';
-                return isElementVisibleCompletely(popperEl, containerEl === document.body ? void 0 : containerEl);
+                return isElementVisibleCompletely(popperEl, containerRef.current === document.body ? void 0 : containerRef.current);
             };
         }
         if (options?.forcePlacement) {
@@ -241,8 +270,10 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
             }
         }
         const settle = () => {
-            setPopperPosition({ left: left, top: top, transformOrigin: `${originX} ${originY}` });
-            setPopperSize({ width, height });
+            setPopperBounding({
+                left, top, width, height,
+                transformOrigin: `${originX} ${originY}`
+            });
             placeA.current = pA;
             placeB.current = pB;
         };
@@ -291,29 +322,21 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
             intersectionObserver.observe(innerPopperRef.current);
             // 窗口尺寸变化，尝试关闭弹框
             const windowResize = () => {
-                _setInnerOpen(false);
+                setOpenForce(false);
             };
             addEventListener('resize', windowResize);
             const scroll = () => {
                 contextMenuEvent.current
-                    ? _setInnerOpen(false)
+                    ? setOpenForce(false)
                     : fitPosition({ forcePlacement: placeA.current + placeB.current });
             };
             // 为所有父元素添加滚动事件
-            const disposers = [];
-            fineParent(getAnchorElement(), parent => {
-                if (parent.scrollHeight > parent.clientHeight || parent.scrollWidth > parent.clientWidth) {
-                    parent.addEventListener('scroll', scroll);
-                    disposers.push(() => {
-                        parent.removeEventListener('scroll', scroll);
-                    });
-                }
-            });
+            const scrollDisposer = listenAllPredecessorsScroll(getAnchorElement(), scroll);
             return () => {
                 resizeObserver.disconnect();
                 intersectionObserver.disconnect();
                 removeEventListener('resize', windowResize);
-                disposers.forEach(f => f());
+                scrollDisposer();
             };
         }
         return;
@@ -325,67 +348,122 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
     const triggersSet = useMemo(() => {
         return new Set(toArray(trigger));
     }, [trigger]);
-    // hover
+    /**
+     * hover相关
+     */
     const hoverable = triggersSet.has('hover');
     const enterTimeout = useRef(void 0);
     const leaveTimeout = useRef(void 0);
-    const childrenProps = children?.props;
-    const onPointerEnter = useCallback((e) => {
-        childrenProps?.onPointerEnter?.(e);
-        pointerEnterHandler();
-    }, [childrenProps?.onPointerEnter, mouseEnterDelay]);
-    const pointerEnterHandler = () => {
-        clearTimeout(leaveTimeout.current);
-        const fn = () => setInnerOpen(true);
+    const pointerEnter = (e) => {
+        hold(true);
+        clearTimeout(enterTimeout.current);
         mouseEnterDelay
-            ? enterTimeout.current = setTimeout(fn, mouseEnterDelay)
-            : fn();
+            ? enterTimeout.current = setTimeout(() => setInnerOpen(true), mouseEnterDelay)
+            : setInnerOpen(true);
     };
-    const onPointerLeave = useCallback((e) => {
-        childrenProps?.onPointerLeave?.(e);
-        pointerLeaveHandler();
-    }, [childrenProps?.onPointerLeave, mouseLeaveDelay]);
-    const pointerLeaveHandler = () => {
-        clearTimeout(enterTimeout.current);
-        const fn = () => setInnerOpen(false);
+    const pointerLeave = () => {
+        hold(false);
+        clearTimeout(leaveTimeout.current);
         mouseLeaveDelay
-            ? leaveTimeout.current = setTimeout(fn, mouseLeaveDelay)
-            : fn();
+            ? leaveTimeout.current = setTimeout(() => setInnerOpen(false), mouseLeaveDelay)
+            : setInnerOpen(false);
     };
-    // focus
-    const onFocus = useCallback((e) => {
-        childrenProps?.onFocus?.(e);
-        setInnerOpen(openHolding.current = true);
-    }, [childrenProps?.onFocus]);
-    const onBlur = useCallback((e) => {
-        childrenProps?.onBlur?.(e);
-        setInnerOpen(openHolding.current = false);
-    }, [childrenProps?.onBlur]);
-    // enter
-    const onKeyDown = useCallback((e) => {
-        childrenProps?.onKeyDown?.(e);
-        e.key === 'Enter' && setInnerOpen(openHolding.current = true);
-    }, [childrenProps?.onKeyDown]);
-    // click
-    const onClick = useCallback((e) => {
-        childrenProps?.onClick?.(e);
-        if (triggersSet.has('click')) {
-            setInnerOpen(openHolding.current = true);
+    useEffect(() => {
+        if (!hoverable) {
+            return;
         }
-        else {
-            // trigger中不包含"click"，则无需保持打开状态，否则会与focus冲突
-            openHolding.current = false;
+        const anchorEl = anchorRef.current;
+        anchorEl.addEventListener('pointerenter', pointerEnter);
+        anchorEl.addEventListener('pointerleave', pointerLeave);
+        return () => {
+            anchorEl.removeEventListener('pointerenter', pointerEnter);
+            anchorEl.removeEventListener('pointerleave', pointerLeave);
+        };
+    }, [hoverable]);
+    useEffect(() => {
+        if (!hoverable || !innerPopperRef.current) {
+            return;
         }
-    }, [childrenProps?.onClick]);
+        const popperEl = innerPopperRef.current;
+        popperEl.addEventListener('pointerenter', pointerEnter);
+        popperEl.addEventListener('pointerleave', pointerLeave);
+        return () => {
+            popperEl.removeEventListener('pointerenter', pointerEnter);
+            popperEl.removeEventListener('pointerleave', pointerLeave);
+        };
+    }, [innerOpen.current]);
+    /**
+     * focus相关
+     */
+    const focusable = triggersSet.has('focus');
+    useEffect(() => {
+        if (!focusable) {
+            return;
+        }
+        const focus = () => openAndHold(true);
+        const blur = () => openAndHold(false);
+        const anchorEl = anchorRef.current;
+        anchorEl.addEventListener('focus', focus);
+        anchorEl.addEventListener('blur', blur);
+        return () => {
+            anchorEl.removeEventListener('focus', focus);
+            anchorEl.removeEventListener('blur', blur);
+        };
+    }, [focusable]);
+    /**
+     * enter相关
+     */
+    const enterable = triggersSet.has('enter');
+    useEffect(() => {
+        if (!enterable) {
+            return;
+        }
+        const keyDown = (e) => {
+            e.key === 'Enter' && openAndHold(true);
+        };
+        const anchorEl = anchorRef.current;
+        anchorEl.addEventListener('keydown', keyDown);
+        return () => {
+            anchorEl.removeEventListener('keydown', keyDown);
+        };
+    }, [enterable]);
+    /**
+     * click相关
+     */
+    const clickable = triggersSet.has('click');
+    useEffect(() => {
+        if (!clickable) {
+            return;
+        }
+        const click = () => openAndHold(true);
+        const anchorEl = anchorRef.current;
+        anchorEl.addEventListener('click', click);
+        return () => {
+            anchorEl.removeEventListener('click', click);
+        };
+    }, []);
     const onClickAway = () => {
-        setInnerOpen(openHolding.current = false);
+        innerOpen.current && openAndHold(false);
     };
-    // contextMenu
-    const onContextMenu = useCallback((e) => {
-        childrenProps?.onContextMenu?.(e);
-        e.preventDefault();
-        setInnerOpen(openHolding.current = true, e);
-    }, [childrenProps?.onContextMenu]);
+    /**
+     * contextmenu相关
+     */
+    const contextMenuable = triggersSet.has('contextMenu');
+    useEffect(() => {
+        if (!contextMenuable) {
+            return;
+        }
+        const contextMenu = (e) => {
+            e.preventDefault();
+            setContextMenuEvent(e);
+            openAndHold(true);
+        };
+        const anchorEl = anchorRef.current;
+        anchorEl.addEventListener('contextmenu', contextMenu);
+        return () => {
+            anchorEl.removeEventListener('contextmenu', contextMenu);
+        };
+    }, []);
     /**
      * --------------------------------------------------------------
      * PopperContext
@@ -399,41 +477,21 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
     const contextValue = useMemo(() => ({
         autoClose,
         open: innerOpen.current,
-        setOpen(open) {
-            // 通过context改变的open状态，需要强制将openHolding置为false
-            openHolding.current = false;
-            setInnerOpen(open);
-        },
+        setOpen: setOpenForce,
+        onChildrenOpenChange,
         beforeOpenCallbacks: beforeOpenCallbacks.current
     }), [innerOpen.current, autoClose]);
+    const childRef = useCallback(cloneRef(children?.props.ref, anchorRef, ref), [children?.props.ref]);
     return (_jsxs(_Fragment, { children: [isValidElement(children)
-                ? cloneElement(children, {
-                    ref: useCallback(cloneRef(children.ref, anchorRef, ref), [children.ref]),
-                    ...hoverable && { onPointerEnter, onPointerLeave },
-                    ...triggersSet.has('click') && { onClick },
-                    // 通常点击会触发focus，因此这里需要处理点击事件
-                    ...triggersSet.has('focus') && { onClick, onFocus, onBlur },
-                    ...triggersSet.has('enter') && { onKeyDown },
-                    ...triggersSet.has('contextMenu') && { onContextMenu }
-                })
-                : children, renderedOnce.current && createPortal(_jsx(ClickAway, { disabled: !triggersSet.has('click') && !triggersSet.has('enter') && !triggersSet.has('contextMenu'), 
-                // 非右键菜单不能点击anchor关闭
-                targets: () => contextMenuEvent.current ? null : anchorRef.current, onClickAway: onClickAway, children: _jsx("div", { ...props, ref: innerPopperRef, css: style, className: classnames(classes.root, props?.className), style: {
-                        ...popperSize,
-                        ...popperPosition,
+                ? cloneElement(children, { ref: childRef })
+                : children, renderedOnce.current && createPortal(_jsx(ClickAway, { disabled: !clickable && !enterable && !contextMenuable, 
+                // 右键菜单点击anchor需要关闭弹框
+                targets: () => contextMenuEvent.current ? null : anchorRef.current, onClickAway: onClickAway, children: _jsx("div", { ...props, ref: innerPopperRef, css: style, className: clsx(classes.root, props.className), style: {
+                        ...popperBounding,
                         ...!openNextFrame.current && {
                             transition: 'none',
                             transform: 'scale(1)'
                         },
-                        ...props?.style
-                    }, "data-open": innerOpen.current, "data-variant": variant, "data-place-a": placeA.current, "data-place-b": placeB.current, onPointerDown: e => {
-                        props.onPointerDown?.(e);
-                        e.preventDefault();
-                    }, onPointerEnter: e => {
-                        props.onPointerEnter?.(e);
-                        hoverable && pointerEnterHandler();
-                    }, onPointerLeave: e => {
-                        props.onPointerLeave?.(e);
-                        hoverable && pointerLeaveHandler();
-                    }, onTransitionEnd: onTransitionEnd, children: _jsx(PopperContext, { value: contextValue, children: content }) }) }), containerEl)] }));
+                        ...props.style
+                    }, "data-open": innerOpen.current, "data-variant": variant, "data-place-a": placeA.current, "data-place-b": placeB.current, onTransitionEnd: onTransitionEnd, children: _jsx(PopperContext, { value: contextValue, children: content }) }) }), containerRef.current)] }));
 }

package/dist/esm/components/popper/popperContext.d.ts

@@ -1,22 +1,20 @@
-import { SetStateAction } from 'react';
+import { SetStateAction, RefObject } from 'react';
 export declare const PopperContext: import("react").Context<{
     autoClose: boolean;
     open: boolean;
     setOpen(open: SetStateAction<boolean>): void;
+    onChildrenOpenChange(open: boolean): void;
     beforeOpenCallbacks: Set<() => void>;
 }>;
 export declare function usePopperContext(): {
     autoClose: boolean;
     open: boolean;
     setOpen(open: SetStateAction<boolean>): void;
+    onChildrenOpenChange(open: boolean): void;
     beforeOpenCallbacks: Set<() => void>;
 };
 /**
- * 弹框打开之前会触发callback，通常用于scrollIntoView等需要计算弹框尺寸的操作
- * @param callback
+ * 当弹框打开时，滚动至已选项
+ * @returns {RefObject} ref
  */
-export declare function useBeforeOpen(callback: () => void): void;
-/**
- * 当弹框打开时，滚动至已选项，返回一个ref
- */
-export declare function useScrollToSelected<T extends Element>(): (r: T | null) => void;
+export declare function useScrollToSelected<T extends HTMLElement>(scrollerRef: RefObject<Element | null>): RefObject<T | null>;

package/dist/esm/components/popper/popperContext.js

@@ -1,46 +1,33 @@
-import { createContext, useContext, useLayoutEffect, useRef, useCallback } from 'react';
+import { createContext, useContext, useRef, useEffect } from 'react';
 export const PopperContext = createContext({
     autoClose: false,
     open: false,
-    setOpen(open) { },
+    setOpen(open) {
+    },
+    onChildrenOpenChange(open) {
+    },
     beforeOpenCallbacks: new Set()
 });
 export function usePopperContext() {
     return useContext(PopperContext);
 }
 /**
- * 弹框打开之前会触发callback，通常用于scrollIntoView等需要计算弹框尺寸的操作
- * @param callback
+ * 当弹框打开时，滚动至已选项
+ * @returns {RefObject} ref
  */
-export function useBeforeOpen(callback) {
+export function useScrollToSelected(scrollerRef) {
+    const ref = useRef(null);
     const { beforeOpenCallbacks } = usePopperContext();
-    useLayoutEffect(() => {
-        beforeOpenCallbacks.add(callback);
+    useEffect(() => {
+        const beforeOpen = () => {
+            if (ref.current && scrollerRef.current && scrollerRef.current.scrollHeight > scrollerRef.current.clientHeight) {
+                scrollerRef.current.scrollTop = ref.current.offsetTop - scrollerRef.current.clientHeight / 2 + ref.current.clientHeight / 2;
+            }
+        };
+        beforeOpenCallbacks.add(beforeOpen);
         return () => {
-            beforeOpenCallbacks.delete(callback);
+            beforeOpenCallbacks.delete(beforeOpen);
         };
-    }, [callback]);
-}
-/**
- * 当弹框打开时，滚动至已选项，返回一个ref
- */
-export function useScrollToSelected() {
-    const ref = useRef(null);
-    const isFirst = useRef(true);
-    const isMultiple = useRef(false);
-    useBeforeOpen(() => {
-        ref.current?.scrollIntoView({
-            block: isMultiple.current ? 'start' : 'center',
-            inline: isMultiple.current ? 'start' : 'center'
-        });
-    });
-    return useCallback((r) => {
-        if (isFirst.current) {
-            ref.current = r;
-            isFirst.current = false;
-        }
-        else {
-            isMultiple.current = true;
-        }
     }, []);
+    return ref;
 }

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { ColorPropsValue, DIVProps } from '../../types';
-export interface ProgressProps extends DIVProps {
+import { ColorPropsValue, DivProps } from '../../types';
+export interface ProgressProps extends DivProps {
     showInfo?: boolean;
     color?: ColorPropsValue;
     status?: 'default' | 'processing' | 'success' | 'error';

package/dist/esm/components/progress/progress.js

@@ -1,19 +1,21 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo, useMemo, useRef } from 'react';
 import { classes, useStyle } from './progress.style';
-import { classnames } from '../../utils';
-import { CheckCircleFilled, CloseCircleFilled } from '@ant-design/icons';
+import { clsx } from '../../utils';
 import { useTheme } from '../theme';
 import { css, keyframes } from '@emotion/react';
+import { Icon } from '../..';
+import { faCircleCheck } from '@fortawesome/free-solid-svg-icons/faCircleCheck';
+import { faCircleXmark } from '@fortawesome/free-solid-svg-icons/faCircleXmark';
 export const Progress = memo(({ showInfo = true, color = 'primary', status = 'default', variant = 'linear', gapDegree = 90, size = 60, indeterminate = false, barWidth = 4, strokeLinecap = variant === 'gauge' ? 'butt' : 'round', value = 0, ...props }) => {
     const { colors: { success, error } } = useTheme();
     const isSucceed = status === 'success' || (status !== 'error' && value === 100 && variant !== 'gauge');
     const renderInfo = () => {
         if (isSucceed) {
-            return _jsx(CheckCircleFilled, { className: classes.icon, style: { color: success.main } });
+            return _jsx(Icon, { icon: faCircleCheck, className: classes.icon, style: { color: success.main } });
         }
         if (status === 'error') {
-            return _jsx(CloseCircleFilled, { className: classes.icon, style: { color: error.main } });
+            return _jsx(Icon, { icon: faCircleXmark, className: classes.icon, style: { color: error.main } });
         }
         return value + '%';
     };
@@ -47,7 +49,7 @@ export const Progress = memo(({ showInfo = true, color = 'primary', status = 'de
         }
         return;
     }, [indeterminate, variant, strokeLinecap, size, barWidth]);
-    return (_jsx("div", { ...props, css: useStyle({ color, variant }), className: classnames(classes.root, props.className), "data-variant": variant, "data-indeterminate": indeterminate, "data-processing": value < 100 && status === 'processing', "data-success": isSucceed, "data-error": status === 'error', children: variant === 'linear'
+    return (_jsx("div", { ...props, css: useStyle({ color: color || 'primary', variant }), className: clsx(classes.root, props.className), "data-variant": variant, "data-indeterminate": indeterminate, "data-processing": value < 100 && status === 'processing', "data-success": isSucceed, "data-error": status === 'error', children: variant === 'linear'
             ? _jsxs(_Fragment, { children: [_jsx("div", { className: classes.track, style: {
                             height: barWidth,
                             ...props.style

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

@@ -28,7 +28,7 @@ export function useStyle({ color, variant }) {
                     &:before, .${classes.bar} {
                         background-color: ${colorValue};
                         border-radius: inherit;
-                        transition: width .2s ${easing.easeOut};
+                        transition: width .25s ${easing.easeOut};
                         position: absolute;
                         inset: 0 auto 0 0;
                     }
@@ -43,11 +43,11 @@ export function useStyle({ color, variant }) {
                         background-color: ${indeterminateBg};
                         
                         &:before {
-                            animation: ${indeterminateAnim2} 2.2s ${easing.linear} infinite 1.1s;
+                            animation: ${indeterminateAnim2} 2.25s ${easing.linear} infinite 1.1s;
                         }
                         
                         .${classes.bar} {
-                            animation: ${indeterminateAnim1} 2.2s ${easing.linear} infinite;
+                            animation: ${indeterminateAnim1} 2.25s ${easing.linear} infinite;
                         }
                     }
                 }
@@ -56,7 +56,7 @@ export function useStyle({ color, variant }) {
                     line-height: 1;
 
                     .${classes.icon} {
-                        animation: ${iconAnim} .2s ${easing.swing}
+                        animation: ${iconAnim} .25s ${easing.swing}
                     }
                 }
 
@@ -102,7 +102,7 @@ export function useStyle({ color, variant }) {
                 .${classes.bar} {
                     stroke: ${colorValue};
                     fill: transparent;
-                    transition: stroke-dashoffset .2s ${easing.easeOut};
+                    transition: stroke-dashoffset .25s ${easing.easeOut};
                 }
 
                 &[data-success=true] {
@@ -125,7 +125,7 @@ export function useStyle({ color, variant }) {
                     inset: 0;
 
                     .${classes.icon} {
-                        animation: ${iconAnim} .2s ${easing.swing}
+                        animation: ${iconAnim} .25s ${easing.swing}
                     }
                 }
 

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

@@ -1,11 +1,11 @@
 import { ReactNode } from 'react';
-import { ColorPropsValue, DIVProps, Size } from '../../types';
+import { ColorPropsValue, DivProps, Size } from '../../types';
 export type CharacterProps = {
     index: number;
     active?: true;
     half?: boolean;
 };
-export interface RatingProps extends Omit<DIVProps, 'defaultValue' | 'onChange'> {
+export interface RatingProps extends Omit<DivProps, 'defaultValue' | 'onChange'> {
     color?: ColorPropsValue;
     size?: Size;
     /** 星星的数量，默认为`5` */

package/dist/esm/components/rating/rating.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { cloneElement, isValidElement, memo, useState } from 'react';
-import { classnames, useControlled } from '../../utils';
+import { clsx, useControlled } from '../../utils';
 import { classes, useStyle } from './rating.style';
-import { StarFilled } from '@ant-design/icons';
 import { useTheme } from '../theme';
-export const Rating = memo(({ color = '#FFCC00', size, count = 5, renderStar = _jsx(StarFilled, {}), allowHalf, highlightSelectedOnly, defaultValue = 0, value, onChange, readOnly, disabled, ...props }) => {
+import { Icon } from '../..';
+import { faStar } from '@fortawesome/free-solid-svg-icons/faStar';
+export const Rating = memo(({ color = '#FFCC00', size, count = 5, renderStar = _jsx(Icon, { icon: faStar }), allowHalf, highlightSelectedOnly, defaultValue = 0, value, onChange, readOnly, disabled, ...props }) => {
     const theme = useTheme();
     size ??= theme.size;
     const [innerValue, setInnerValue] = useControlled(defaultValue, value, onChange);
@@ -56,5 +57,5 @@ export const Rating = memo(({ color = '#FFCC00', size, count = 5, renderStar = _
                             : renderStar), _jsx("div", { className: classes.starBefore, onPointerEnter: () => enterHandler(index, true), onClick: () => clickHandler(index, true) }), _jsx("div", { className: classes.starAfter, onPointerEnter: () => enterHandler(index, false), onClick: () => clickHandler(index, false) })] }, index));
         });
     };
-    return (_jsx("div", { ...props, css: useStyle({ color }), className: classnames(classes.root, props.className), "data-size": size, "data-read-only": readOnly, "data-disabled": disabled, onPointerLeave: leaveHandler, children: renderStarFn() }));
+    return (_jsx("div", { ...props, css: useStyle({ color: color || '#FFCC00' }), className: clsx(classes.root, props.className), "data-size": size, "data-read-only": readOnly, "data-disabled": disabled, onPointerLeave: leaveHandler, children: renderStarFn() }));
 });