@canlooks/can-ui 0.0.67 → 0.0.68

package/dist/cjs/components/anchorList/anchorList.js

@@ -21,10 +21,11 @@ exports.AnchorList = (0, react_1.memo)(({ anchors, renderAnchorItem, indent = 24
     });
     const scrollToId = (id) => {
         const targetEl = document.getElementById(id);
-        if (!targetEl) {
+        const scrollerEl = getScroller();
+        if (!targetEl || !scrollerEl) {
             return false;
         }
-        getScroller().scrollTo({
+        scrollerEl.scrollTo({
             top: targetEl.offsetTop - offset,
             // 初始化之前无需平滑滚动
             behavior: initialized.current ? scrollBehavior : 'instant'
@@ -53,29 +54,34 @@ exports.AnchorList = (0, react_1.memo)(({ anchors, renderAnchorItem, indent = 24
      * 监听滚动设置高亮
      */
     const getScroller = () => {
-        return (typeof scroller === 'function' ? scroller() : scroller) || document.documentElement;
+        if (scroller) {
+            return typeof scroller === 'function' ? scroller() : scroller;
+        }
+        return document.documentElement;
     };
     const [activeId, setActiveId] = (0, utils_1.useSyncState)();
     (0, react_1.useEffect)(() => {
         const scrollerEl = getScroller();
-        const scroll = () => {
-            let nearest;
-            let minDistance = Infinity;
-            const targets = anchors?.map(item => document.getElementById(item.id));
-            targets?.forEach(target => {
-                const top = target?.getBoundingClientRect().top;
-                if (typeof top === 'number') {
-                    const distance = Math.abs(top - offset);
-                    if (distance < minDistance) {
-                        minDistance = distance;
-                        nearest = target;
+        if (scrollerEl) {
+            const scroll = () => {
+                let nearest;
+                let minDistance = Infinity;
+                const targets = anchors?.map(item => document.getElementById(item.id));
+                targets?.forEach(target => {
+                    const top = target?.getBoundingClientRect().top;
+                    if (typeof top === 'number') {
+                        const distance = Math.abs(top - offset);
+                        if (distance < minDistance) {
+                            minDistance = distance;
+                            nearest = target;
+                        }
                     }
-                }
-            });
-            nearest && setActiveId(nearest.id);
-        };
-        !activeId.current && scroll();
-        return (0, utils_1.listenAllPredecessorsScroll)(scrollerEl === document.documentElement ? document : scrollerEl, scroll);
+                });
+                nearest && setActiveId(nearest.id);
+            };
+            !activeId.current && scroll();
+            return (0, utils_1.listenAllPredecessorsScroll)(scrollerEl === document.documentElement ? document : scrollerEl, scroll);
+        }
     }, [anchors, scroller, offset]);
     const [animating, setAnimating] = (0, utils_1.useDerivedState)(prev => typeof prev !== 'undefined', [activeId.current]);
     return ((0, jsx_runtime_1.jsxs)(flex_1.Flex, { direction: "column", alignItems: "flex-start", ...props, css: anchorList_style_1.style, className: (0, utils_1.clsx)(anchorList_style_1.classes.root, props.className), "data-animating": animating.current, children: [anchors?.map(item => {

package/dist/cjs/components/cascade/cascade.js

@@ -20,7 +20,7 @@ const CascadeContext = (0, react_1.createContext)({});
 function useCascadeContext() {
     return (0, react_1.useContext)(CascadeContext);
 }
-exports.Cascade = (0, react_1.memo)(({ inputProps, defaultOpen = false, open, onOpenChange, children, loadOptions, multiple = false, showCheckbox = !!multiple, defaultValue = [], value, onChange, renderBackfill, searchable, defaultSearchValue = '', searchValue, onSearchChange, searchInputProps, popperProps, popperRef, clearable = !!multiple, integration = 'deepest', 
+exports.Cascade = (0, react_1.memo)(({ inputProps, defaultOpen = false, open, onOpenChange, children, loadOptions, multiple = false, showCheckbox = !!multiple, defaultValue, value, onChange, renderBackfill, searchable, defaultSearchValue = '', searchValue, onSearchChange, searchInputProps, popperProps, popperRef, clearable = !!multiple, integration = 'deepest', 
 // 共享属性，从OptionsBaseSharedProps继承
 loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'children', searchTokenKey = 'searchToken', ...props }) => {
     /**
@@ -79,7 +79,7 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
      * --------------------------------------------------------------------
      * 控制选中状态
      */
-    const [pathifiedValue, setPathifiedValue] = (0, utils_1.useControlled)(defaultValue, value, onChange);
+    const [pathifiedValue, setPathifiedValue] = (0, utils_1.useControlled)(defaultValue || [], value, onChange);
     // 路径转单一键
     const toStandardValue = (path) => {
         if (!path) {

package/dist/cjs/components/curd/curdColumnConfig.js

@@ -14,7 +14,8 @@ const sortable_1 = require("@dnd-kit/sortable");
 const utils_1 = require("../../utils");
 const __1 = require("../..");
 const faGear_1 = require("@fortawesome/free-solid-svg-icons/faGear");
-exports.CurdColumnConfig = (0, react_1.memo)(({ columns = [], innerVisible, setInnerVisible, setInnerOrder, }) => {
+exports.CurdColumnConfig = (0, react_1.memo)(({ columns, innerVisible, setInnerVisible, setInnerOrder, }) => {
+    columns ||= [];
     const dragEndHandler = (e) => {
         const newColumns = (0, utils_1.onDndDragEnd)(e, columns, '_key');
         newColumns && setInnerOrder(newColumns.flatMap(col => col._key ?? []));

package/dist/cjs/components/dataGrid/dataGrid.js

@@ -18,7 +18,7 @@ const DataGridContext = (0, react_1.createContext)({});
 function useDataGridContext() {
     return (0, react_1.useContext)(DataGridContext);
 }
-exports.DataGrid = (0, react_1.memo)(({ columns, rows, rowProps, primaryKey = 'id', childrenKey = null, defaultOrderColumn, orderColumn, defaultOrderType = 'descend', orderType, onOrderChange, selectable, relation = 'dependent', integration = 'shallowest', allowSelectAll = true, clickRowToSelect = true, selectorProps, indent = 24, renderExpandIcon, defaultExpanded = [], expanded, onExpandedChange, paginatable = true, paginationProps = {}, renderPagination, loading, emptyPlaceholder, columnResizable = false, size, bordered, striped, tableProps, multiple, defaultValue, value, onChange, ...props }) => {
+exports.DataGrid = (0, react_1.memo)(({ columns, rows, rowProps, primaryKey = 'id', childrenKey = null, defaultOrderColumn, orderColumn, defaultOrderType = 'descend', orderType, onOrderChange, selectable, relation = 'dependent', integration = 'shallowest', allowSelectAll = true, clickRowToSelect = true, selectorProps, indent = 24, renderExpandIcon, defaultExpanded, expanded, onExpandedChange, paginatable = true, paginationProps, renderPagination, loading, emptyPlaceholder, columnResizable = false, size, bordered, striped, tableProps, multiple, defaultValue, value, onChange, ...props }) => {
     /**
      * ---------------------------------------------------------------
      * 选择行
@@ -65,7 +65,7 @@ exports.DataGrid = (0, react_1.memo)(({ columns, rows, rowProps, primaryKey = 'i
      * ---------------------------------------------------------------
      * 展开行
      */
-    const [innerExpanded, setInnerExpanded] = (0, utils_1.useControlled)(defaultExpanded, expanded);
+    const [innerExpanded, setInnerExpanded] = (0, utils_1.useControlled)(defaultExpanded || [], expanded);
     const expandedSet = (0, react_1.useMemo)(() => {
         return new Set(innerExpanded.current);
     }, [innerExpanded.current]);
@@ -83,6 +83,7 @@ exports.DataGrid = (0, react_1.memo)(({ columns, rows, rowProps, primaryKey = 'i
      * ---------------------------------------------------------------
      * 分页
      */
+    paginationProps ||= {};
     const [innerPage, setInnerPage] = (0, utils_1.useControlled)(paginationProps.defaultPage ?? 1, paginationProps.page, paginationProps.onPageChange);
     const [innerPageSize, setInnerPageSize] = (0, utils_1.useControlled)(paginationProps.defaultPageSize ?? 10, paginationProps.pageSize, paginationProps.onPageSizeChange);
     const pageChangeHandler = (page, pageSize) => {

package/dist/cjs/components/gallery/gallery.js

@@ -25,8 +25,8 @@ const commonControlProps = {
     color: 'text'
 };
 const bounceBezier = (0, utils_1.cubicBezier)(0, 0, 0, 1);
-exports.Gallery = (0, react_1.memo)(({ src = [], defaultIndex = 0, index, onIndexChange, defaultOpen = false, open, onOpenChange, showRotation = true, showZoom = true, showClose = true, renderControl, bounceElementTranslate = 24, bounceDragDistance = 240, effectiveSpeed = 450, ...props }) => {
-    const srcArr = (0, utils_1.useSync)((0, utils_1.toArray)(src));
+exports.Gallery = (0, react_1.memo)(({ src, defaultIndex = 0, index, onIndexChange, defaultOpen = false, open, onOpenChange, showRotation = true, showZoom = true, showClose = true, renderControl, bounceElementTranslate = 24, bounceDragDistance = 240, effectiveSpeed = 450, ...props }) => {
+    const srcArr = (0, utils_1.useSync)((0, utils_1.toArray)(src || []));
     const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open, onOpenChange);
     const close = () => {
         setInnerOpen(false);

package/dist/cjs/components/menu/menu.js

@@ -16,10 +16,10 @@ function useMenuContext() {
     const { size = theme.size, ellipsis = true, indent = theme.spacing[8], ...context } = (0, react_2.useContext)(MenuContext);
     return { size, ellipsis, indent, ...context };
 }
-exports.Menu = (0, react_2.memo)(({ items, primaryKey = 'value', labelKey = 'label', childrenKey = 'children', defaultExpanded = [], expanded, onExpandedChange, multiple, defaultValue, value, onChange, 
+exports.Menu = (0, react_2.memo)(({ items, primaryKey = 'value', labelKey = 'label', childrenKey = 'children', defaultExpanded, expanded, onExpandedChange, multiple, defaultValue, value, onChange, 
 // 以下属性传递给<MenuItem/>
 size = 'large', showCheckbox, ellipsis, indent, ...props }) => {
-    const [innerExpanded, setInnerExpanded] = (0, utils_1.useControlled)(defaultExpanded, expanded);
+    const [innerExpanded, setInnerExpanded] = (0, utils_1.useControlled)(defaultExpanded || [], expanded);
     const expandedSet = (0, react_2.useMemo)(() => {
         return new Set(innerExpanded.current);
     }, [innerExpanded.current]);

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

@@ -4,6 +4,8 @@ import { TransitionBaseProps } from '../transitionBase';
 export interface OverlayBaseProps extends DivProps {
     /** 模态的容器元素，默认为document.body */
     container?: DefineElement<HTMLElement>;
+    /** 同{@link container}，但会在useEffect后取值，且只会执行一次 */
+    effectContainer?: DefineElement<HTMLElement>;
     /**
      * @enum {true} 跟随父组件强制渲染
      * @enum {false} 打开时渲染，关闭后销毁
@@ -22,4 +24,4 @@ export interface OverlayBaseProps extends DivProps {
     removeFocusOnOpen?: boolean;
 }
 export declare const overlayBaseTransitionDuration = 300;
-export declare function OverlayBase({ container, forceRender, open, onMaskClick, singleLayer, onOpened, onClosed, maskProps, removeFocusOnOpen, ...props }: OverlayBaseProps): false | React.ReactPortal;
+export declare function OverlayBase({ container, effectContainer, forceRender, open, onMaskClick, singleLayer, onOpened, onClosed, maskProps, removeFocusOnOpen, ...props }: OverlayBaseProps): false | React.ReactPortal;

package/dist/cjs/components/overlayBase/overlayBase.js

@@ -9,22 +9,22 @@ const utils_1 = require("../../utils");
 const react_dom_1 = require("react-dom");
 const transitionBase_1 = require("../transitionBase");
 exports.overlayBaseTransitionDuration = 300;
-function OverlayBase({ container, forceRender, open, onMaskClick, singleLayer, onOpened, onClosed, maskProps, removeFocusOnOpen = true, ...props }) {
+function OverlayBase({ container, effectContainer, forceRender, open, onMaskClick, singleLayer, onOpened, onClosed, maskProps, removeFocusOnOpen = true, ...props }) {
     const [shouldRender, setShouldRender] = (0, utils_1.useDerivedState)((prev = false) => {
         if (open) {
             return true;
         }
         return forceRender === true || prev;
     }, [open, forceRender]);
-    const containerEl = (typeof container === 'function' ? container() : container) || document.body;
+    const containerEl = (0, utils_1.useContainer)(container, effectContainer);
     (0, react_1.useEffect)(() => {
         if (!open) {
             return;
         }
         removeFocusOnOpen && document.activeElement?.blur?.();
-        containerEl.style.overflow = 'hidden';
+        containerEl.current.style.overflow = 'hidden';
         return () => {
-            containerEl.style.overflow = '';
+            containerEl.current.style.overflow = '';
         };
     }, [open]);
     const clickHandler = (e) => {
@@ -40,5 +40,5 @@ function OverlayBase({ container, forceRender, open, onMaskClick, singleLayer, o
         onClosed?.();
         forceRender === false && setShouldRender(false);
     };
-    return shouldRender.current && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ...props, css: overlayBase_style_1.style, className: (0, utils_1.clsx)(overlayBase_style_1.classes.root, props.className), "data-open": open, "data-custom-container": containerEl !== document.body, children: [(0, jsx_runtime_1.jsx)(transitionBase_1.Fade, { timeout: exports.overlayBaseTransitionDuration, ...maskProps, in: open, className: (0, utils_1.clsx)(overlayBase_style_1.classes.mask, maskProps?.className), onClick: clickHandler, onEntered: onEntered, onExited: onExited }), props.children] }), containerEl);
+    return shouldRender.current && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ...props, css: overlayBase_style_1.style, className: (0, utils_1.clsx)(overlayBase_style_1.classes.root, props.className), "data-open": open, "data-custom-container": containerEl.current !== document.body, children: [(0, jsx_runtime_1.jsx)(transitionBase_1.Fade, { timeout: exports.overlayBaseTransitionDuration, ...maskProps, in: open, className: (0, utils_1.clsx)(overlayBase_style_1.classes.mask, maskProps?.className), onClick: clickHandler, onEntered: onEntered, onExited: onExited }), props.children] }), containerEl.current);
 }

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

@@ -7,6 +7,8 @@ export interface PopperProps extends Omit<DivProps, 'content' | 'children'> {
     anchorElement?: DefineElement<HTMLElement>;
     /** 弹框渲染的容器元素，默认为{@link document.body} */
     container?: DefineElement<HTMLElement>;
+    /** 同{@link container}，但会在useEffect后取值，且只会执行一次 */
+    effectContainer?: DefineElement<HTMLElement>;
     /** 汽泡里的内容 */
     content?: ReactNode;
     /** 弹框偏离元素的距离 */
@@ -46,4 +48,4 @@ export interface PopperRef extends HTMLDivElement {
         openAnimation?: boolean;
     }, beforeOpen?: () => void): void;
 }
-export declare function Popper({ ref, popperRef, anchorElement, container, content, offset, trigger, placement, variant, sizeAdaptable, mouseEnterDelay, mouseLeaveDelay, defaultOpen, open, onOpenChange, onOpenChangeEnd, disabled, autoClose, forceRender, children, ...props }: PopperProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Popper({ ref, popperRef, anchorElement, container, effectContainer, content, offset, trigger, placement, variant, sizeAdaptable, mouseEnterDelay, mouseLeaveDelay, defaultOpen, open, onOpenChange, onOpenChangeEnd, disabled, autoClose, forceRender, children, ...props }: PopperProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -22,7 +22,7 @@ const getAttemptOrder = (placement) => {
     }
     return order;
 };
-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 }) {
+function Popper({ ref, popperRef, anchorElement, container = document.body, effectContainer, 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, () => {
@@ -104,14 +104,14 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, cont
     const getAnchorElement = () => {
         return anchorRef.current || (typeof syncAnchorElement.current === 'function' ? syncAnchorElement.current() : syncAnchorElement.current);
     };
-    const containerRef = (0, utils_1.useSync)((typeof container === 'function' ? container() : container) || document.body);
+    const containerEl = (0, utils_1.useContainer)(container, effectContainer);
     const innerPopperRef = (0, react_1.useRef)(null);
     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 = containerRef.current.getBoundingClientRect();
+        const containerRect = containerEl.current.getBoundingClientRect();
         const popperEl = innerPopperRef.current;
         let { offsetWidth: popperWidth, offsetHeight: popperHeight } = popperEl;
         let pA, pB;
@@ -187,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, containerRef.current === document.body ? void 0 : containerRef.current);
+                return (0, utils_1.isElementVisibleCompletely)(popperEl, containerEl.current === document.body ? void 0 : containerEl.current);
             };
         }
         else {
@@ -258,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, containerRef.current === document.body ? void 0 : containerRef.current);
+                return (0, utils_1.isElementVisibleCompletely)(popperEl, containerEl.current === document.body ? void 0 : containerEl.current);
             };
         }
         if (options?.forcePlacement) {
@@ -502,5 +502,5 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, cont
                             transform: 'scale(1)'
                         },
                         ...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)] }));
+                    }, "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 }) }) }), containerEl.current)] }));
 }

package/dist/cjs/components/progress/progress.js

@@ -10,7 +10,9 @@ 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, renderInfo, color = 'primary', status = 'default', variant = 'linear', gapDegree = 90, size = 60, indeterminate = false, barWidth = 4, strokeLinecap = variant === 'gauge' ? 'butt' : 'round', value = 0, ...props }) => {
+exports.Progress = (0, react_1.memo)(({ showInfo = true, renderInfo, color, status = 'default', variant = 'linear', gapDegree = 90, size = 60, indeterminate = false, barWidth = 4, strokeLinecap = variant === 'gauge' ? 'butt' : 'round', value = 0, ...props }) => {
+    const isColorSpecified = !!color;
+    color ??= 'primary';
     const { colors: { success, error } } = (0, theme_1.useTheme)();
     const isSucceed = status === 'success' || (status !== 'error' && value === 100 && variant !== 'gauge');
     const renderInfoFn = () => {
@@ -55,7 +57,7 @@ exports.Progress = (0, react_1.memo)(({ showInfo = true, renderInfo, color = 'pr
         }
         return;
     }, [indeterminate, variant, strokeLinecap, size, barWidth]);
-    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'
+    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": isColorSpecified ? void 0 : isSucceed, "data-error": isColorSpecified ? void 0 : 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

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

@@ -24,11 +24,12 @@ export declare class SnackbarBaseMethods<P extends SnackbarBaseProps = SnackbarB
     error(content: ReactNode): Promise<void>;
     error(props: P): Promise<void>;
 }
-export declare const SnackbarBase: React.MemoExoticComponent<({ methods, useTo, max, container }: {
+export declare const SnackbarBase: React.MemoExoticComponent<({ methods, useTo, max, container, effectContainer }: {
     methods: SnackbarBaseMethods;
     useTo: "message" | "notification";
     max?: number;
-    container?: DefineElement;
+    container?: DefineElement<HTMLElement>;
+    effectContainer?: DefineElement<HTMLElement>;
 }) => React.ReactPortal>;
 interface SnackbarBaseItemProps extends Omit<SnackbarBaseProps, 'duration' | 'onAutoClose'> {
     id: string;

package/dist/cjs/components/snackbarBase/snackbarBase.js

@@ -37,7 +37,7 @@ const placementToIndex = {
     bottomRight: 5,
     rightBottom: 5
 };
-exports.SnackbarBase = (0, react_2.memo)(({ methods, useTo, max = useTo === 'message' ? 5 : 4, container }) => {
+exports.SnackbarBase = (0, react_2.memo)(({ methods, useTo, max = useTo === 'message' ? 5 : 4, container, effectContainer }) => {
     const [stacks, setStacks] = (0, react_2.useState)([]);
     const timers = (0, react_2.useRef)([]);
     (0, react_2.useEffect)(() => () => {
@@ -85,10 +85,10 @@ exports.SnackbarBase = (0, react_2.memo)(({ methods, useTo, max = useTo === 'mes
     methods.warning = defineMethod('warning');
     methods.error = defineMethod('error');
     const css = (0, snackbarBase_style_1.style)();
-    const containerEl = (typeof container === 'function' ? container() : container) || document.body;
+    const containerEl = (0, utils_1.useContainer)(container, effectContainer);
     return (0, react_dom_1.createPortal)(stacks.flatMap((stack, i) => stack
         ? (0, jsx_runtime_1.jsx)(react_transition_group_1.TransitionGroup, { css: css, className: snackbarBase_style_1.classes.root, "data-place": i, "data-use-to": useTo, children: stack.map(p => (0, react_1.createElement)(exports.SnackbarBaseItem, { ...p, key: p.id })) }, i)
-        : []), containerEl);
+        : []), containerEl.current);
 });
 /**
  * ----------------------------------------------------------------------

package/dist/cjs/components/theme/themeVariables.d.ts

@@ -15,6 +15,7 @@ export declare function restoreThemeDefinition(theme: PartialTheme): ThemeDefini
  * 统一全局zIndex
  */
 export declare const zIndex: {
+    touchRipple: number;
     overlay: number;
     popper: number;
     dropdown: number;

package/dist/cjs/components/theme/themeVariables.js

@@ -97,6 +97,7 @@ function restoreThemeDefinition(theme) {
  * 统一全局zIndex
  */
 exports.zIndex = {
+    touchRipple: 900,
     overlay: 1000,
     popper: 1100,
     dropdown: 1200,

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

@@ -1 +1,2 @@
 export * from './touchRipple';
+export * from './touchRipple';

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

@@ -2,3 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./touchRipple"), exports);
+tslib_1.__exportStar(require("./touchRipple"), exports);

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

@@ -1,16 +1,8 @@
-import { ReactElement } from 'react';
-import { ColorPropsValue, DivProps } from '../../types';
-export interface TouchRippleProps extends Omit<DivProps, 'children'> {
+import { ColorPropsValue, DefineElement, DivProps } from '../../types';
+export interface TouchRippleOverlayProps extends DivProps {
     color?: ColorPropsValue;
-    rippleProps?: DivProps;
-    children?: ReactElement;
+    /** 容器元素，默认为该组件元素的父元素 */
+    container?: DefineElement<HTMLElement>;
+    effectContainer?: DefineElement<HTMLElement>;
 }
-export declare const TouchRipple: {
-    (props: TouchRippleProps): ReactElement;
-    Ripple: typeof Ripple;
-};
-interface RippleProps extends DivProps {
-    color?: ColorPropsValue;
-}
-export declare const Ripple: import("react").MemoExoticComponent<({ ref, color, ...props }: RippleProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
-export {};
+export declare const TouchRipple: import("react").MemoExoticComponent<({ color, container, effectContainer, ...props }: TouchRippleOverlayProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

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

@@ -1,57 +1,72 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Ripple = exports.TouchRipple = void 0;
+exports.TouchRipple = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
-const touchRipple_style_1 = require("./touchRipple.style");
+const react_dom_1 = require("react-dom");
 const utils_1 = require("../../utils");
-exports.TouchRipple = (({ ref, color, rippleProps, children, ...props }) => {
-    const renderedRipple = ((0, jsx_runtime_1.jsx)(exports.Ripple, { ...rippleProps, 
-        // 有children属性时，ref传递给children
-        ref: children ? ref : void 0 }));
-    return children
-        // 有children属性时，props传递给children，再追加Ripple组件
-        ? (0, react_1.cloneElement)(children, { ...props, ref }, children.props.children, renderedRipple)
-        : renderedRipple;
-});
-exports.Ripple = (0, react_1.memo)(({ ref, color = 'primary', ...props }) => {
-    const [ripples, setRipples] = (0, react_1.useState)([]);
-    const rippleRef = (0, react_1.useRef)(null);
-    (0, react_1.useLayoutEffect)(() => {
-        const wrapper = rippleRef.current?.parentElement;
-        if (wrapper) {
-            const pointerDown = (e) => {
-                setRipples(o => [
-                    ...o,
-                    {
-                        key: (0, utils_1.getEasyID)('touch-ripple'),
-                        r: Math.sqrt(wrapper.clientWidth ** 2 + wrapper.clientHeight ** 2),
-                        left: e.offsetX,
-                        top: e.offsetY,
+const touchRipple_style_1 = require("./touchRipple.style");
+exports.TouchRipple = (0, react_1.memo)(({ color = 'primary', container, effectContainer, ...props }) => {
+    const ref = (0, react_1.useRef)(null);
+    const [ripples, setRipples] = (0, react_1.useState)(new Map());
+    const incrementKey = (0, react_1.useRef)(0);
+    const containerEl = (0, utils_1.useContainer)(container, effectContainer, null);
+    (0, react_1.useEffect)(() => {
+        const parentElement = containerEl.current ?? ref.current.parentElement;
+        if (parentElement) {
+            const pointerDown = ({ offsetX, offsetY }) => {
+                const maxWidth = Math.max(parentElement.clientWidth - offsetX, offsetX);
+                const maxHeight = Math.max(parentElement.clientHeight - offsetY, offsetY);
+                setRipples(o => {
+                    const r = new Map(o);
+                    const key = ++incrementKey.current;
+                    r.set(key, {
+                        key,
+                        diameter: Math.sqrt(maxWidth ** 2 + maxHeight ** 2) * 2,
+                        left: offsetX,
+                        top: offsetY,
                         leaving: false
-                    }
-                ]);
-                wrapper.addEventListener('pointerup', leave);
-                wrapper.addEventListener('pointerleave', leave);
+                    });
+                    return r;
+                });
+                parentElement.addEventListener('pointerup', leave);
+                parentElement.addEventListener('pointerleave', leave);
             };
             const leave = () => {
-                setRipples(o => o.map(v => ({ ...v, leaving: true })));
+                setRipples(o => {
+                    const r = new Map(o);
+                    r.forEach(v => v.leaving = true);
+                    return r;
+                });
                 removeLeaveListener();
             };
-            wrapper.addEventListener('pointerdown', pointerDown);
             const removeLeaveListener = () => {
-                wrapper.removeEventListener('pointerup', leave);
-                wrapper.removeEventListener('pointerleave', leave);
+                parentElement.removeEventListener('pointerup', leave);
+                parentElement.removeEventListener('pointerleave', leave);
             };
+            parentElement.addEventListener('pointerdown', pointerDown);
             return () => {
-                wrapper.removeEventListener('pointerdown', pointerDown);
+                parentElement.removeEventListener('pointerdown', pointerDown);
                 removeLeaveListener();
             };
         }
-        return;
-    }, []);
-    const onTransitionEnd = (key) => {
-        setRipples(o => o.filter(v => v.key !== key));
+    }, [containerEl.current]);
+    const leftHandler = (key) => {
+        setRipples(o => {
+            const r = new Map(o);
+            r.delete(key);
+            if (!r.size) {
+                incrementKey.current = 0;
+            }
+            return r;
+        });
     };
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: (0, utils_1.cloneRef)(ref, rippleRef), css: (0, touchRipple_style_1.useStyle)({ color: color || 'primary' }), className: touchRipple_style_1.classes.root, children: ripples.map(({ key, r, left, top, leaving }) => (0, jsx_runtime_1.jsx)("div", { className: touchRipple_style_1.classes.ripple, style: { width: r * 2, left, top }, "data-leaving": leaving, onTransitionEnd: () => onTransitionEnd(key) }, key)) }));
+    const children = ((0, jsx_runtime_1.jsx)("div", { ...props, ref: (0, utils_1.cloneRef)(ref, props.ref), css: (0, touchRipple_style_1.useStyle)({ color }), className: (0, utils_1.clsx)(touchRipple_style_1.classes.root, props.className), children: ripples.values().toArray().map(({ key, diameter, left, top, leaving }) => (0, jsx_runtime_1.jsx)("div", { className: touchRipple_style_1.classes.ripple, style: {
+                width: diameter,
+                height: diameter,
+                left, top
+            }, "data-leaving": leaving, onTransitionEnd: () => leftHandler(key) }, key)) }));
+    return containerEl.current
+        ? (0, react_dom_1.createPortal)(children, containerEl.current)
+        : children;
 });

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

@@ -3,45 +3,43 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.classes = void 0;
 exports.useStyle = useStyle;
 const tslib_1 = require("tslib");
-const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
+const react_1 = require("@emotion/react");
+const theme_1 = require("../theme");
 const color_1 = tslib_1.__importDefault(require("color"));
-exports.classes = (0, utils_1.defineInnerClasses)('touch-ripple', [
+exports.classes = (0, utils_1.defineInnerClasses)('touch-ripple-overlay', [
     'ripple'
 ]);
 function useStyle({ color }) {
     const colorValue = (0, utils_1.useColor)(color);
-    return (0, utils_1.useCss)(({ easing }) => {
-        const bg = (0, color_1.default)(colorValue).alpha(.1).string();
-        return (0, react_1.css) `
-            overflow: hidden;
-            pointer-events: none;
-            border-radius: inherit;
+    return (0, utils_1.useCss)(({ easing }) => (0, react_1.css) `
+        position: absolute;
+        inset: 0;
+        z-index: ${theme_1.zIndex.touchRipple};
+        overflow: hidden;
+        pointer-events: none;
+        
+        .${exports.classes.ripple} {
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background-color: ${(0, color_1.default)(colorValue).alpha(.1).string()};
             position: absolute;
-            inset: 0;
-            z-index: 0;
-
-            .${exports.classes.ripple} {
-                aspect-ratio: 1;
-                border-radius: 50%;
-                position: absolute;
-                translate: -50% -50%;
-                background-color: ${bg};
-                animation: ${showRippleAnim} .4s ${easing.easeIn} forwards;
-                transition: opacity .4s ${easing.easeIn};
-
-                &[data-leaving=true] {
-                    opacity: 0;
-                }
+            scale: 0;
+            translate: -50% -50%;
+            animation: ${rippleAnim} .4s ${easing.easeOut} forwards;
+            transition: opacity .4s ${easing.easeIn};
+            
+            &[data-leaving=true] {
+                opacity: 0;
             }
-        `;
-    }, [colorValue]);
+        }
+    `, [colorValue]);
 }
-const showRippleAnim = (0, react_1.keyframes) `
+const rippleAnim = (0, react_1.keyframes) `
     0% {
         scale: 0;
     }
-
+    
     100% {
         scale: 1;
     }

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

@@ -16,8 +16,8 @@ function useTransferContext() {
     const { options = [], primaryKey = 'value', value = [], allowSelectAll = true, showHeader = true } = (0, react_1.useContext)(TransferContext);
     return { options, primaryKey, value, allowSelectAll, showHeader };
 }
-exports.Transfer = (0, react_1.memo)(({ options = [], primaryKey = 'value', fullWidth, allowSelectAll = true, showHeader = true, leftTitle = '选项', rightTitle = '已选', renderButtons, defaultValue = [], value, onChange, ...props }) => {
-    const [innerValue, setInnerValue] = (0, utils_1.useControlled)(defaultValue, value, onChange);
+exports.Transfer = (0, react_1.memo)(({ options, primaryKey = 'value', fullWidth, allowSelectAll = true, showHeader = true, leftTitle = '选项', rightTitle = '已选', renderButtons, defaultValue, value, onChange, ...props }) => {
+    const [innerValue, setInnerValue] = (0, utils_1.useControlled)(defaultValue || [], value, onChange);
     const [leftSelected, setLeftSelected] = (0, react_1.useState)([]);
     const [rightSelected, setRightSelected] = (0, react_1.useState)([]);
     const toRight = () => {

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

@@ -7,7 +7,8 @@ const transfer_style_1 = require("./transfer.style");
 const checkbox_1 = require("../checkbox");
 const transfer_1 = require("./transfer");
 const optionsBase_1 = require("../optionsBase");
-exports.TransferPanel = (0, react_1.memo)(({ title, type = 'left', selectedValue = [], onChange, renderList, renderItem, ...props }) => {
+exports.TransferPanel = (0, react_1.memo)(({ title, type = 'left', selectedValue, onChange, renderList, renderItem, ...props }) => {
+    selectedValue ||= [];
     const { options, primaryKey, value, allowSelectAll, showHeader } = (0, transfer_1.useTransferContext)();
     const selfOptions = (0, react_1.useMemo)(() => {
         const valueSet = new Set(value);

package/dist/cjs/components/upload/upload.js

@@ -24,7 +24,7 @@ const markFileId = (files) => {
         }
     }
 };
-exports.Upload = (0, react_1.memo)(({ inputProps, type = 'file', accept = type === 'image' ? 'image/*' : void 0, max = Infinity, showButton = true, buttonProps, buttonText = '选择文件', variant = 'square', sortable, droppable, defaultValue = [], value, onChange, onUpload, ...props }) => {
+exports.Upload = (0, react_1.memo)(({ inputProps, type = 'file', accept = type === 'image' ? 'image/*' : void 0, max = Infinity, showButton = true, buttonProps, buttonText = '选择文件', variant = 'square', sortable, droppable, defaultValue, value, onChange, onUpload, ...props }) => {
     const wrapperRef = (0, react_1.useRef)(null);
     const itemRefs = (0, react_1.useRef)(new Map());
     (0, react_1.useImperativeHandle)(props.ref, () => {
@@ -54,7 +54,7 @@ exports.Upload = (0, react_1.memo)(({ inputProps, type = 'file', accept = type =
         };
         return wrapperRef.current;
     });
-    const [innerValue, setInnerValue] = (0, utils_1.useControlled)(defaultValue, value, value => {
+    const [innerValue, setInnerValue] = (0, utils_1.useControlled)(defaultValue || [], value, value => {
         markFileId(value);
         onChange?.(value);
     });