@canlooks/can-ui 0.0.66 → 0.0.68

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);
     });

package/dist/cjs/components/waterfall/waterfallItem.js

@@ -6,7 +6,7 @@ const waterfall_style_1 = require("./waterfall.style");
 const utils_1 = require("../../utils");
 const WaterfallItem = ({ ref, onLoad, child }) => {
     const innerRef = (0, react_1.useRef)(null);
-    (0, react_1.useLayoutEffect)(() => {
+    (0, react_1.useEffect)(() => {
         const el = innerRef.current;
         if (!el) {
             throw Error(`Children of <Waterfall> must expose 'ref' prop`);

package/dist/cjs/utils/hooks.d.ts

@@ -1,4 +1,5 @@
 import { RefObject, Dispatch, SetStateAction } from 'react';
+import { DefineElement } from '../types';
 /**
  * 获取渲染前的值
  * @param value
@@ -48,3 +49,10 @@ export declare function useLoading<A extends any[], R>(fn: (...args: A) => R | P
     (...args: A) => Promise<R>,
     Dispatch<SetStateAction<boolean>>
 ];
+/**
+ * 获取容器元素，通常用于`container`或`effectContainer`属性
+ * @param container
+ * @param effectContainer
+ * @param defaultContainer 默认为`document.body`
+ */
+export declare function useContainer<T extends HTMLElement | null>(container?: DefineElement<T>, effectContainer?: DefineElement<T>, defaultContainer?: T): RefObject<T>;

package/dist/cjs/utils/hooks.js

@@ -8,6 +8,7 @@ exports.useDerivedState = useDerivedState;
 exports.useUnmounted = useUnmounted;
 exports.useControlled = useControlled;
 exports.useLoading = useLoading;
+exports.useContainer = useContainer;
 const react_1 = require("react");
 const utils_1 = require("./utils");
 /**
@@ -123,3 +124,24 @@ function useLoading(fn, referredLoading = false) {
         setLoading
     ];
 }
+/**
+ * 获取容器元素，通常用于`container`或`effectContainer`属性
+ * @param container
+ * @param effectContainer
+ * @param defaultContainer 默认为`document.body`
+ */
+function useContainer(container, effectContainer, defaultContainer = document.body) {
+    const [containerEl, setContainerEl] = useDerivedState(prev => {
+        if (container) {
+            return typeof container === 'function' ? container() : container;
+        }
+        return prev || defaultContainer;
+    }, [container, defaultContainer]);
+    (0, react_1.useEffect)(() => {
+        if (effectContainer) {
+            const el = typeof effectContainer === 'function' ? effectContainer() : effectContainer;
+            setContainerEl(el);
+        }
+    }, []);
+    return containerEl;
+}

package/dist/esm/components/anchorList/anchorList.js

@@ -18,10 +18,11 @@ export const AnchorList = memo(({ anchors, renderAnchorItem, indent = 24, scroll
     });
     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'
@@ -50,29 +51,34 @@ export const AnchorList = memo(({ anchors, renderAnchorItem, indent = 24, scroll
      * 监听滚动设置高亮
      */
     const getScroller = () => {
-        return (typeof scroller === 'function' ? scroller() : scroller) || document.documentElement;
+        if (scroller) {
+            return typeof scroller === 'function' ? scroller() : scroller;
+        }
+        return document.documentElement;
     };
     const [activeId, setActiveId] = useSyncState();
     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 listenAllPredecessorsScroll(scrollerEl === document.documentElement ? document : scrollerEl, scroll);
+                });
+                nearest && setActiveId(nearest.id);
+            };
+            !activeId.current && scroll();
+            return listenAllPredecessorsScroll(scrollerEl === document.documentElement ? document : scrollerEl, scroll);
+        }
     }, [anchors, scroller, offset]);
     const [animating, setAnimating] = useDerivedState(prev => typeof prev !== 'undefined', [activeId.current]);
     return (_jsxs(Flex, { direction: "column", alignItems: "flex-start", ...props, css: style, className: clsx(classes.root, props.className), "data-animating": animating.current, children: [anchors?.map(item => {

package/dist/esm/components/button/button.js

@@ -28,7 +28,7 @@ export const Button = ({ component: Component = 'button', color = 'primary', sha
                 ? actualPrefix
                     ? _jsx(LoadingIndicator, { color: reverseTextColor })
                     : _jsx(Collapse, { orientation: "horizontal", in: true, children: _jsx(LoadingIndicator, { color: reverseTextColor }) })
-                : _jsx("div", { className: classes.prefix, children: actualPrefix }), !!actualChildren &&
+                : actualPrefix, !!actualChildren &&
                 _jsx("div", { className: classes.content, children: actualChildren }), !!suffix &&
                 _jsx("div", { className: classes.suffix, children: suffix })] }));
 };

package/dist/esm/components/cascade/cascade.js

@@ -16,7 +16,7 @@ const CascadeContext = createContext({});
 export function useCascadeContext() {
     return useContext(CascadeContext);
 }
-export const Cascade = 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', 
+export const Cascade = 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 }) => {
     /**
@@ -75,7 +75,7 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
      * --------------------------------------------------------------------
      * 控制选中状态
      */
-    const [pathifiedValue, setPathifiedValue] = useControlled(defaultValue, value, onChange);
+    const [pathifiedValue, setPathifiedValue] = useControlled(defaultValue || [], value, onChange);
     // 路径转单一键
     const toStandardValue = (path) => {
         if (!path) {

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

@@ -11,7 +11,8 @@ import { SortableContext } from '@dnd-kit/sortable';
 import { isUnset, onDndDragEnd, useDndSensors } from '../../utils';
 import { Icon } from '../..';
 import { faGear } from '@fortawesome/free-solid-svg-icons/faGear';
-export const CurdColumnConfig = memo(({ columns = [], innerVisible, setInnerVisible, setInnerOrder, }) => {
+export const CurdColumnConfig = memo(({ columns, innerVisible, setInnerVisible, setInnerOrder, }) => {
+    columns ||= [];
     const dragEndHandler = (e) => {
         const newColumns = onDndDragEnd(e, columns, '_key');
         newColumns && setInnerOrder(newColumns.flatMap(col => col._key ?? []));

package/dist/esm/components/dataGrid/dataGrid.js

@@ -14,7 +14,7 @@ const DataGridContext = createContext({});
 export function useDataGridContext() {
     return useContext(DataGridContext);
 }
-export const DataGrid = 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 }) => {
+export const DataGrid = 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 }) => {
     /**
      * ---------------------------------------------------------------
      * 选择行
@@ -61,7 +61,7 @@ export const DataGrid = memo(({ columns, rows, rowProps, primaryKey = 'id', chil
      * ---------------------------------------------------------------
      * 展开行
      */
-    const [innerExpanded, setInnerExpanded] = useControlled(defaultExpanded, expanded);
+    const [innerExpanded, setInnerExpanded] = useControlled(defaultExpanded || [], expanded);
     const expandedSet = useMemo(() => {
         return new Set(innerExpanded.current);
     }, [innerExpanded.current]);
@@ -79,6 +79,7 @@ export const DataGrid = memo(({ columns, rows, rowProps, primaryKey = 'id', chil
      * ---------------------------------------------------------------
      * 分页
      */
+    paginationProps ||= {};
     const [innerPage, setInnerPage] = useControlled(paginationProps.defaultPage ?? 1, paginationProps.page, paginationProps.onPageChange);
     const [innerPageSize, setInnerPageSize] = useControlled(paginationProps.defaultPageSize ?? 10, paginationProps.pageSize, paginationProps.onPageSizeChange);
     const pageChangeHandler = (page, pageSize) => {

package/dist/esm/components/gallery/gallery.js

@@ -22,8 +22,8 @@ const commonControlProps = {
     color: 'text'
 };
 const bounceBezier = cubicBezier(0, 0, 0, 1);
-export const Gallery = 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 = useSync(toArray(src));
+export const Gallery = 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 = useSync(toArray(src || []));
     const [innerOpen, setInnerOpen] = useControlled(defaultOpen, open, onOpenChange);
     const close = () => {
         setInnerOpen(false);

package/dist/esm/components/menu/menu.js

@@ -12,10 +12,10 @@ export function useMenuContext() {
     const { size = theme.size, ellipsis = true, indent = theme.spacing[8], ...context } = useContext(MenuContext);
     return { size, ellipsis, indent, ...context };
 }
-export const Menu = memo(({ items, primaryKey = 'value', labelKey = 'label', childrenKey = 'children', defaultExpanded = [], expanded, onExpandedChange, multiple, defaultValue, value, onChange, 
+export const Menu = 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] = useControlled(defaultExpanded, expanded);
+    const [innerExpanded, setInnerExpanded] = useControlled(defaultExpanded || [], expanded);
     const expandedSet = useMemo(() => {
         return new Set(innerExpanded.current);
     }, [innerExpanded.current]);

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

@@ -1,26 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { useEffect } from 'react';
 import { classes, style } from './overlayBase.style';
-import { clsx, useDerivedState } from '../../utils';
+import { clsx, useContainer, useDerivedState } from '../../utils';
 import { createPortal } from 'react-dom';
 import { Fade } from '../transitionBase';
 export const overlayBaseTransitionDuration = 300;
-export function OverlayBase({ container, forceRender, open, onMaskClick, singleLayer, onOpened, onClosed, maskProps, removeFocusOnOpen = true, ...props }) {
+export function OverlayBase({ container, effectContainer, forceRender, open, onMaskClick, singleLayer, onOpened, onClosed, maskProps, removeFocusOnOpen = true, ...props }) {
     const [shouldRender, setShouldRender] = useDerivedState((prev = false) => {
         if (open) {
             return true;
         }
         return forceRender === true || prev;
     }, [open, forceRender]);
-    const containerEl = (typeof container === 'function' ? container() : container) || document.body;
+    const containerEl = useContainer(container, effectContainer);
     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) => {
@@ -36,5 +36,5 @@ export function OverlayBase({ container, forceRender, open, onMaskClick, singleL
         onClosed?.();
         forceRender === false && setShouldRender(false);
     };
-    return shouldRender.current && createPortal(_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), "data-open": open, "data-custom-container": containerEl !== document.body, children: [_jsx(Fade, { timeout: overlayBaseTransitionDuration, ...maskProps, in: open, className: clsx(classes.mask, maskProps?.className), onClick: clickHandler, onEntered: onEntered, onExited: onExited }), props.children] }), containerEl);
+    return shouldRender.current && createPortal(_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), "data-open": open, "data-custom-container": containerEl.current !== document.body, children: [_jsx(Fade, { timeout: overlayBaseTransitionDuration, ...maskProps, in: open, className: clsx(classes.mask, maskProps?.className), onClick: clickHandler, onEntered: onEntered, onExited: onExited }), props.children] }), containerEl.current);
 }

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

@@ -1,7 +1,7 @@
 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 { clsx, cloneRef, isElementVisibleCompletely, listenAllPredecessorsScroll, toArray, useControlled, useDerivedState, useForceUpdate, useSync, useSyncState, useUnmounted } from '../../utils';
+import { clsx, cloneRef, isElementVisibleCompletely, listenAllPredecessorsScroll, toArray, useControlled, useDerivedState, useForceUpdate, useSync, useSyncState, useUnmounted, useContainer } from '../../utils';
 import { ClickAway } from '../clickAway';
 import { classes, style } from './popper.style';
 import { PopperContext, usePopperContext } from './popperContext';
@@ -19,7 +19,7 @@ const getAttemptOrder = (placement) => {
     }
     return order;
 };
-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 }) {
+export 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 } = useTheme();
     offset ??= spacing[2];
     useImperativeHandle(popperRef, () => {
@@ -35,7 +35,6 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
     const unmounted = useUnmounted();
     const openHolding = useRef(0);
     const hold = (open) => {
-        console.log('hold', open);
         return open ? ++openHolding.current
             : openHolding.current > 0 ? --openHolding.current
                 : openHolding.current;
@@ -102,14 +101,14 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
     const getAnchorElement = () => {
         return anchorRef.current || (typeof syncAnchorElement.current === 'function' ? syncAnchorElement.current() : syncAnchorElement.current);
     };
-    const containerRef = useSync((typeof container === 'function' ? container() : container) || document.body);
+    const containerEl = useContainer(container, effectContainer);
     const innerPopperRef = useRef(null);
     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 = containerRef.current.getBoundingClientRect();
+        const containerRect = containerEl.current.getBoundingClientRect();
         const popperEl = innerPopperRef.current;
         let { offsetWidth: popperWidth, offsetHeight: popperHeight } = popperEl;
         let pA, pB;
@@ -185,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, containerRef.current === document.body ? void 0 : containerRef.current);
+                return isElementVisibleCompletely(popperEl, containerEl.current === document.body ? void 0 : containerEl.current);
             };
         }
         else {
@@ -256,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, containerRef.current === document.body ? void 0 : containerRef.current);
+                return isElementVisibleCompletely(popperEl, containerEl.current === document.body ? void 0 : containerEl.current);
             };
         }
         if (options?.forcePlacement) {
@@ -500,5 +499,5 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
                             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: _jsx(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: _jsx(PopperContext, { value: contextValue, children: content }) }) }), containerEl.current)] }));
 }

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

@@ -7,7 +7,9 @@ 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, renderInfo, color = 'primary', status = 'default', variant = 'linear', gapDegree = 90, size = 60, indeterminate = false, barWidth = 4, strokeLinecap = variant === 'gauge' ? 'butt' : 'round', value = 0, ...props }) => {
+export const Progress = 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 } } = useTheme();
     const isSucceed = status === 'success' || (status !== 'error' && value === 100 && variant !== 'gauge');
     const renderInfoFn = () => {
@@ -52,7 +54,7 @@ export const Progress = memo(({ showInfo = true, renderInfo, color = 'primary',
         }
         return;
     }, [indeterminate, variant, strokeLinecap, size, barWidth]);
-    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'
+    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": isColorSpecified ? void 0 : isSucceed, "data-error": isColorSpecified ? void 0 : status === 'error', children: variant === 'linear'
             ? _jsxs(_Fragment, { children: [_jsx("div", { className: classes.track, style: {
                             height: barWidth,
                             ...props.style

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { createElement as _createElement } from "@emotion/react";
 import { isValidElement, memo, useEffect, useRef, useState } from 'react';
 import { Collapse, Slide } from '../transitionBase';
-import { clsx, getEasyID, useColor } from '../../utils';
+import { clsx, getEasyID, useColor, useContainer } from '../../utils';
 import { classes, style } from './snackbarBase.style';
 import { TransitionGroup } from 'react-transition-group';
 import { StatusIcon, statusMapToIconDefinition } from '../status';
@@ -33,7 +33,7 @@ const placementToIndex = {
     bottomRight: 5,
     rightBottom: 5
 };
-export const SnackbarBase = memo(({ methods, useTo, max = useTo === 'message' ? 5 : 4, container }) => {
+export const SnackbarBase = memo(({ methods, useTo, max = useTo === 'message' ? 5 : 4, container, effectContainer }) => {
     const [stacks, setStacks] = useState([]);
     const timers = useRef([]);
     useEffect(() => () => {
@@ -81,10 +81,10 @@ export const SnackbarBase = memo(({ methods, useTo, max = useTo === 'message' ?
     methods.warning = defineMethod('warning');
     methods.error = defineMethod('error');
     const css = style();
-    const containerEl = (typeof container === 'function' ? container() : container) || document.body;
+    const containerEl = useContainer(container, effectContainer);
     return createPortal(stacks.flatMap((stack, i) => stack
         ? _jsx(TransitionGroup, { css: css, className: classes.root, "data-place": i, "data-use-to": useTo, children: stack.map(p => _createElement(SnackbarBaseItem, { ...p, key: p.id })) }, i)
-        : []), containerEl);
+        : []), containerEl.current);
 });
 /**
  * ----------------------------------------------------------------------

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

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

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

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

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

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

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

@@ -1,54 +1,69 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { cloneElement, memo, useRef, useState, useLayoutEffect } from 'react';
+import { memo, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { cloneRef, clsx, useContainer } from '../../utils';
 import { classes, useStyle } from './touchRipple.style';
-import { cloneRef, getEasyID } from '../../utils';
-export const TouchRipple = (({ ref, color, rippleProps, children, ...props }) => {
-    const renderedRipple = (_jsx(Ripple, { ...rippleProps, 
-        // 有children属性时，ref传递给children
-        ref: children ? ref : void 0 }));
-    return children
-        // 有children属性时，props传递给children，再追加Ripple组件
-        ? cloneElement(children, { ...props, ref }, children.props.children, renderedRipple)
-        : renderedRipple;
-});
-export const Ripple = memo(({ ref, color = 'primary', ...props }) => {
-    const [ripples, setRipples] = useState([]);
-    const rippleRef = useRef(null);
-    useLayoutEffect(() => {
-        const wrapper = rippleRef.current?.parentElement;
-        if (wrapper) {
-            const pointerDown = (e) => {
-                setRipples(o => [
-                    ...o,
-                    {
-                        key: getEasyID('touch-ripple'),
-                        r: Math.sqrt(wrapper.clientWidth ** 2 + wrapper.clientHeight ** 2),
-                        left: e.offsetX,
-                        top: e.offsetY,
+export const TouchRipple = memo(({ color = 'primary', container, effectContainer, ...props }) => {
+    const ref = useRef(null);
+    const [ripples, setRipples] = useState(new Map());
+    const incrementKey = useRef(0);
+    const containerEl = useContainer(container, effectContainer, null);
+    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 (_jsx("div", { ...props, ref: cloneRef(ref, rippleRef), css: useStyle({ color: color || 'primary' }), className: classes.root, children: ripples.map(({ key, r, left, top, leaving }) => _jsx("div", { className: classes.ripple, style: { width: r * 2, left, top }, "data-leaving": leaving, onTransitionEnd: () => onTransitionEnd(key) }, key)) }));
+    const children = (_jsx("div", { ...props, ref: cloneRef(ref, props.ref), css: useStyle({ color }), className: clsx(classes.root, props.className), children: ripples.values().toArray().map(({ key, diameter, left, top, leaving }) => _jsx("div", { className: classes.ripple, style: {
+                width: diameter,
+                height: diameter,
+                left, top
+            }, "data-leaving": leaving, onTransitionEnd: () => leftHandler(key) }, key)) }));
+    return containerEl.current
+        ? createPortal(children, containerEl.current)
+        : children;
 });