@canlooks/can-ui 0.0.24 → 0.0.26

package/dist/cjs/components/placeholder/placeholder.js

@@ -15,18 +15,20 @@ exports.imagePreset = {
     info: 'data:image/png;base64,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',
     searching: 'data:image/png;base64,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'
 };
-exports.Placeholder = (0, react_1.memo)(({ status = 'empty', image, title = status === 'warning' ? '警告'
+exports.Placeholder = (0, react_1.memo)(({ slots = {}, slotProps = {}, status = 'empty', image, title = status === 'warning' ? '警告'
     : status === 'error' ? '出错啦'
         : status === 'success' ? '成功'
             : void 0, description = status === 'empty' ? '暂无数据'
     : status === 'searching' ? '搜索中...'
-        : void 0, descriptionComponent: DescriptionComponent = 'div', extra, ...props }) => {
+        : void 0, extra, ...props }) => {
     const { mode } = (0, theme_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: placeholder_style_1.style, className: (0, utils_1.classnames)(placeholder_style_1.classes.root, props.className), children: [image ??
+    const { title: Title = 'div', description: Description = 'div', extra: Extra = 'div' } = slots;
+    const { title: titleProps, description: descriptionProps, extra: extraProps } = slotProps;
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: placeholder_style_1.style, className: (0, utils_1.clsx)(placeholder_style_1.classes.root, props.className), children: [image ??
                 (0, jsx_runtime_1.jsx)("img", { className: placeholder_style_1.classes.image, src: status === 'empty'
                         ? (mode === 'light' ? exports.imagePreset.emptyLight : exports.imagePreset.emptyDark)
                         : exports.imagePreset[status], alt: "" }), !!title &&
-                (0, jsx_runtime_1.jsx)("div", { className: placeholder_style_1.classes.title, children: title }), !!description &&
-                (0, jsx_runtime_1.jsx)(DescriptionComponent, { className: placeholder_style_1.classes.description, children: description }), !!extra &&
-                (0, jsx_runtime_1.jsx)("div", { className: placeholder_style_1.classes.extra, children: extra })] }));
+                (0, jsx_runtime_1.jsx)(Title, { ...titleProps, className: (0, utils_1.clsx)(placeholder_style_1.classes.title, titleProps?.className), children: title }), !!description &&
+                (0, jsx_runtime_1.jsx)(Description, { ...descriptionProps, className: (0, utils_1.clsx)(placeholder_style_1.classes.description, descriptionProps?.className), children: description }), !!extra &&
+                (0, jsx_runtime_1.jsx)(Extra, { ...extraProps, className: (0, utils_1.clsx)(placeholder_style_1.classes.extra, extraProps?.className), children: extra })] }));
 });

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

@@ -12,6 +12,7 @@ exports.classes = (0, utils_1.defineClasses)('placeholder', [
 exports.style = (0, utils_1.defineCss)(({ spacing, text }) => (0, react_1.css) `
     width: 100%;
     height: 100%;
+    flex: 1;
     padding: ${spacing[8]}px 0;
     display: flex;
     flex-direction: column;

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

@@ -1,7 +1,7 @@
 import { ReactElement, ReactNode, Ref } from 'react';
-import { DIVProps, DefineElement, Placement } from '../../types';
+import { DivProps, DefineElement, Placement } from '../../types';
 export type Trigger = 'click' | 'hover' | 'focus' | 'enter' | 'contextMenu';
-export interface PopperProps extends Omit<DIVProps, 'content' | 'children'> {
+export interface PopperProps extends Omit<DivProps, 'content' | 'children'> {
     popperRef?: Ref<PopperRef | null>;
     /** 若不指定anchorElement，默认使用{@link children}作为目标锚点元素 */
     anchorElement?: DefineElement<HTMLElement>;
@@ -11,6 +11,7 @@ export interface PopperProps extends Omit<DIVProps, 'content' | 'children'> {
     content?: ReactNode;
     /** 弹框偏离元素的距离 */
     offset?: number;
+    /** 自动打开弹框的触发方法，默认为`hover` */
     trigger?: Trigger | Trigger[] | false;
     placement?: Placement;
     variant?: 'zoom' | 'collapse';
@@ -37,7 +38,7 @@ export interface PopperProps extends Omit<DIVProps, 'content' | 'children'> {
      * @enum {undefined} 第一次打开时渲染，跟随父组件销毁。
      */
     forceRender?: boolean;
-    children?: ReactElement;
+    children?: ReactElement<any>;
 }
 export interface PopperRef extends HTMLDivElement {
     fit(options?: {

package/dist/cjs/components/popper/popper.js

@@ -10,20 +10,19 @@ const popper_style_1 = require("./popper.style");
 const popperContext_1 = require("./popperContext");
 const theme_1 = require("../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;
 };
-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 }) {
+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 } = (0, theme_1.useTheme)();
     offset ??= spacing[2];
     (0, react_1.useImperativeHandle)(popperRef, () => {
@@ -34,23 +33,53 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, cont
     });
     /**
      * --------------------------------------------------------------
-     * 打开关闭与是否渲染
+     * 打开关闭
      */
     const unmounted = (0, utils_1.useUnmounted)();
-    const openHolding = (0, react_1.useRef)(false);
+    const openHolding = (0, react_1.useRef)(0);
+    const hold = (open) => {
+        return open ? ++openHolding.current
+            : openHolding.current > 0 ? --openHolding.current
+                : openHolding.current;
+    };
     const [innerOpen, _setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open, onOpenChange);
     const [contextMenuEvent, setContextMenuEvent] = (0, utils_1.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 } = (0, popperContext_1.usePopperContext)();
+    const isInitial = (0, react_1.useRef)(true);
+    (0, react_1.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 = (0, react_1.useRef)(!!forceRender);
     if (innerOpen.current) {
         renderedOnce.current = true;
@@ -71,18 +100,18 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, cont
      * 计算弹框位置
      */
     const anchorRef = (0, react_1.useRef)(null);
+    const syncAnchorElement = (0, utils_1.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 = (0, utils_1.useSync)((typeof container === 'function' ? container() : container) || document.body);
     const innerPopperRef = (0, react_1.useRef)(null);
-    const [popperPosition, setPopperPosition] = (0, react_1.useState)();
-    const [popperSize, setPopperSize] = (0, react_1.useState)();
+    const [popperBounding, setPopperBounding] = (0, react_1.useState)();
     const [openNextFrame, setOpenNextFrame] = (0, utils_1.useDerivedState)(!innerOpen.current, [innerOpen.current, contextMenuEvent.current]);
     const placeA = (0, react_1.useRef)(void 0);
     const placeB = (0, react_1.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;
@@ -158,7 +187,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, cont
                 }
                 popperEl.style.left = left + 'px';
                 popperEl.style.top = top + 'px';
-                return (0, utils_1.isElementVisibleCompletely)(popperEl, containerEl === document.body ? void 0 : containerEl);
+                return (0, utils_1.isElementVisibleCompletely)(popperEl, containerRef.current === document.body ? void 0 : containerRef.current);
             };
         }
         else {
@@ -229,7 +258,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, cont
                 }
                 popperEl.style.left = left + 'px';
                 popperEl.style.top = top + 'px';
-                return (0, utils_1.isElementVisibleCompletely)(popperEl, containerEl === document.body ? void 0 : containerEl);
+                return (0, utils_1.isElementVisibleCompletely)(popperEl, containerRef.current === document.body ? void 0 : containerRef.current);
             };
         }
         if (options?.forcePlacement) {
@@ -244,8 +273,10 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, cont
             }
         }
         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;
         };
@@ -294,29 +325,21 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, cont
             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 = [];
-            (0, utils_1.fineParent)(getAnchorElement(), parent => {
-                if (parent.scrollHeight > parent.clientHeight || parent.scrollWidth > parent.clientWidth) {
-                    parent.addEventListener('scroll', scroll);
-                    disposers.push(() => {
-                        parent.removeEventListener('scroll', scroll);
-                    });
-                }
-            });
+            const scrollDisposer = (0, utils_1.listenAllPredecessorsScroll)(getAnchorElement(), scroll);
             return () => {
                 resizeObserver.disconnect();
                 intersectionObserver.disconnect();
                 removeEventListener('resize', windowResize);
-                disposers.forEach(f => f());
+                scrollDisposer();
             };
         }
         return;
@@ -328,67 +351,122 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, cont
     const triggersSet = (0, react_1.useMemo)(() => {
         return new Set((0, utils_1.toArray)(trigger));
     }, [trigger]);
-    // hover
+    /**
+     * hover相关
+     */
     const hoverable = triggersSet.has('hover');
     const enterTimeout = (0, react_1.useRef)(void 0);
     const leaveTimeout = (0, react_1.useRef)(void 0);
-    const childrenProps = children?.props;
-    const onPointerEnter = (0, react_1.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 = (0, react_1.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 = (0, react_1.useCallback)((e) => {
-        childrenProps?.onFocus?.(e);
-        setInnerOpen(openHolding.current = true);
-    }, [childrenProps?.onFocus]);
-    const onBlur = (0, react_1.useCallback)((e) => {
-        childrenProps?.onBlur?.(e);
-        setInnerOpen(openHolding.current = false);
-    }, [childrenProps?.onBlur]);
-    // enter
-    const onKeyDown = (0, react_1.useCallback)((e) => {
-        childrenProps?.onKeyDown?.(e);
-        e.key === 'Enter' && setInnerOpen(openHolding.current = true);
-    }, [childrenProps?.onKeyDown]);
-    // click
-    const onClick = (0, react_1.useCallback)((e) => {
-        childrenProps?.onClick?.(e);
-        if (triggersSet.has('click')) {
-            setInnerOpen(openHolding.current = true);
+    (0, react_1.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]);
+    (0, react_1.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');
+    (0, react_1.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');
+    (0, react_1.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');
+    (0, react_1.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 = (0, react_1.useCallback)((e) => {
-        childrenProps?.onContextMenu?.(e);
-        e.preventDefault();
-        setInnerOpen(openHolding.current = true, e);
-    }, [childrenProps?.onContextMenu]);
+    /**
+     * contextmenu相关
+     */
+    const contextMenuable = triggersSet.has('contextMenu');
+    (0, react_1.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
@@ -402,41 +480,21 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, cont
     const contextValue = (0, react_1.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 = (0, react_1.useCallback)((0, utils_1.cloneRef)(children?.props.ref, anchorRef, ref), [children?.props.ref]);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, react_1.isValidElement)(children)
-                ? (0, react_1.cloneElement)(children, {
-                    ref: (0, react_1.useCallback)((0, utils_1.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 && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(clickAway_1.ClickAway, { disabled: !triggersSet.has('click') && !triggersSet.has('enter') && !triggersSet.has('contextMenu'), 
-                // 非右键菜单不能点击anchor关闭
-                targets: () => contextMenuEvent.current ? null : anchorRef.current, onClickAway: onClickAway, children: (0, jsx_runtime_1.jsx)("div", { ...props, ref: innerPopperRef, css: popper_style_1.style, className: (0, utils_1.classnames)(popper_style_1.classes.root, props?.className), style: {
-                        ...popperSize,
-                        ...popperPosition,
+                ? (0, react_1.cloneElement)(children, { ref: childRef })
+                : children, renderedOnce.current && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(clickAway_1.ClickAway, { disabled: !clickable && !enterable && !contextMenuable, 
+                // 右键菜单点击anchor需要关闭弹框
+                targets: () => contextMenuEvent.current ? null : anchorRef.current, onClickAway: onClickAway, children: (0, jsx_runtime_1.jsx)("div", { ...props, ref: innerPopperRef, css: popper_style_1.style, className: (0, utils_1.clsx)(popper_style_1.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: (0, jsx_runtime_1.jsx)(popperContext_1.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: (0, jsx_runtime_1.jsx)(popperContext_1.PopperContext, { value: contextValue, children: content }) }) }), containerRef.current)] }));
 }

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

@@ -2,51 +2,37 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PopperContext = void 0;
 exports.usePopperContext = usePopperContext;
-exports.useBeforeOpen = useBeforeOpen;
 exports.useScrollToSelected = useScrollToSelected;
 const react_1 = require("react");
 exports.PopperContext = (0, react_1.createContext)({
     autoClose: false,
     open: false,
-    setOpen(open) { },
+    setOpen(open) {
+    },
+    onChildrenOpenChange(open) {
+    },
     beforeOpenCallbacks: new Set()
 });
 function usePopperContext() {
     return (0, react_1.useContext)(exports.PopperContext);
 }
 /**
- * 弹框打开之前会触发callback，通常用于scrollIntoView等需要计算弹框尺寸的操作
- * @param callback
+ * 当弹框打开时，滚动至已选项
+ * @returns {RefObject} ref
  */
-function useBeforeOpen(callback) {
+function useScrollToSelected(scrollerRef) {
+    const ref = (0, react_1.useRef)(null);
     const { beforeOpenCallbacks } = usePopperContext();
-    (0, react_1.useLayoutEffect)(() => {
-        beforeOpenCallbacks.add(callback);
+    (0, react_1.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
- */
-function useScrollToSelected() {
-    const ref = (0, react_1.useRef)(null);
-    const isFirst = (0, react_1.useRef)(true);
-    const isMultiple = (0, react_1.useRef)(false);
-    useBeforeOpen(() => {
-        ref.current?.scrollIntoView({
-            block: isMultiple.current ? 'start' : 'center',
-            inline: isMultiple.current ? 'start' : 'center'
-        });
-    });
-    return (0, react_1.useCallback)((r) => {
-        if (isFirst.current) {
-            ref.current = r;
-            isFirst.current = false;
-        }
-        else {
-            isMultiple.current = true;
-        }
     }, []);
+    return ref;
 }

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

@@ -5,18 +5,20 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const progress_style_1 = require("./progress.style");
 const utils_1 = require("../../utils");
-const icons_1 = require("@ant-design/icons");
 const theme_1 = require("../theme");
 const react_2 = require("@emotion/react");
+const __1 = require("../..");
+const faCircleCheck_1 = require("@fortawesome/free-solid-svg-icons/faCircleCheck");
+const faCircleXmark_1 = require("@fortawesome/free-solid-svg-icons/faCircleXmark");
 exports.Progress = (0, react_1.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 } } = (0, theme_1.useTheme)();
     const isSucceed = status === 'success' || (status !== 'error' && value === 100 && variant !== 'gauge');
     const renderInfo = () => {
         if (isSucceed) {
-            return (0, jsx_runtime_1.jsx)(icons_1.CheckCircleFilled, { className: progress_style_1.classes.icon, style: { color: success.main } });
+            return (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faCircleCheck_1.faCircleCheck, className: progress_style_1.classes.icon, style: { color: success.main } });
         }
         if (status === 'error') {
-            return (0, jsx_runtime_1.jsx)(icons_1.CloseCircleFilled, { className: progress_style_1.classes.icon, style: { color: error.main } });
+            return (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faCircleXmark_1.faCircleXmark, className: progress_style_1.classes.icon, style: { color: error.main } });
         }
         return value + '%';
     };
@@ -50,7 +52,7 @@ exports.Progress = (0, react_1.memo)(({ showInfo = true, color = 'primary', stat
         }
         return;
     }, [indeterminate, variant, strokeLinecap, size, barWidth]);
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: (0, progress_style_1.useStyle)({ color, variant }), className: (0, utils_1.classnames)(progress_style_1.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 ((0, jsx_runtime_1.jsx)("div", { ...props, css: (0, progress_style_1.useStyle)({ color: color || 'primary', variant }), className: (0, utils_1.clsx)(progress_style_1.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'
             ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: progress_style_1.classes.track, style: {
                             height: barWidth,
                             ...props.style