@canlooks/can-ui 0.0.144 → 0.0.145

package/dist/cjs/components/app/appActionSheet.js

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AppActionSheet = exports.AppActionSheetMethods = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
 const actionSheet_1 = require("../actionSheet");
+const utils_1 = require("../../utils");
 class AppActionSheetMethods {
     async confirm() {
     }
@@ -11,47 +13,46 @@ class AppActionSheetMethods {
     }
 }
 exports.AppActionSheetMethods = AppActionSheetMethods;
-exports.AppActionSheet = (0, react_1.memo)(({ methods }) => {
-    const [stacks, setStacks] = (0, react_1.useState)([]);
-    const defineMethods = (type) => (params, ...args) => new Promise((resolve, reject) => {
-        const props = typeof params !== 'object' || (0, react_1.isValidElement)(params)
-            ? { title: params }
-            : params;
-        setStacks(o => [
-            ...o,
-            {
-                ...props,
-                type,
-                onAction(action) {
-                    props?.onAction?.(action, ...args);
-                    resolve(action);
-                },
-                onConfirm() {
-                    props?.onConfirm?.(...args);
-                    resolve(void 0);
-                },
-                onCancel(e) {
-                    props?.onCancel?.(e);
-                    reject();
-                },
-                onClosed() {
-                    props?.onClosed?.();
-                    setStacks(_o => {
-                        _o.splice(o.length, 1);
-                        return [..._o];
-                    });
-                }
-            }
-        ]);
-    });
+exports.AppActionSheet = (0, react_2.memo)(({ methods }) => {
+    const [stacks, setStacks] = (0, react_2.useState)([]);
+    const defineMethods = (type) => {
+        return (params, ...args) => {
+            return new Promise((resolve, reject) => {
+                const props = typeof params !== 'object' || (0, react_2.isValidElement)(params)
+                    ? { title: params }
+                    : params;
+                const key = (0, utils_1.getRandomId)();
+                setStacks(o => [
+                    ...o,
+                    {
+                        ...props,
+                        key,
+                        type,
+                        onAction(action) {
+                            props?.onAction?.(action, ...args);
+                            resolve(action);
+                        },
+                        onConfirm() {
+                            props?.onConfirm?.(...args);
+                            resolve(void 0);
+                        },
+                        onCancel(e) {
+                            props?.onCancel?.(e);
+                            reject();
+                        },
+                        onClosed() {
+                            props?.onClosed?.();
+                            setStacks(stacks => stacks.filter(stack => stack.key !== key));
+                        }
+                    }
+                ]);
+            });
+        };
+    };
     methods.confirm = defineMethods('confirm');
     methods.open = defineMethods('open');
-    return stacks.map((p, i) => (0, jsx_runtime_1.jsx)(AppActionSheetStack, { ...p }, i));
+    return stacks.map(p => (0, react_1.createElement)(AppActionSheetStack, { ...p, key: p.key }));
 });
-const AppActionSheetStack = (0, react_1.memo)(({ type, ...props }) => {
-    const [open, setOpen] = (0, react_1.useState)(true);
-    return ((0, jsx_runtime_1.jsx)(actionSheet_1.ActionSheet, { showConfirm: type === 'confirm', ...props, open: open, onClose: reason => {
-            props.onClose?.(reason);
-            setOpen(false);
-        } }));
+const AppActionSheetStack = (0, react_2.memo)(({ type, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)(actionSheet_1.ActionSheet, { showConfirm: type === 'confirm', defaultOpen: true, ...props }));
 });

package/dist/cjs/components/app/appDialog.js

@@ -2,9 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AppDialog = exports.AppDialogMethods = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
 const dialog_1 = require("../dialog");
 const status_1 = require("../status");
+const utils_1 = require("../../utils");
 class AppDialogMethods {
     async info(props, ...args) {
     }
@@ -18,33 +20,34 @@ class AppDialogMethods {
     }
 }
 exports.AppDialogMethods = AppDialogMethods;
-exports.AppDialog = (0, react_1.memo)(({ methods }) => {
-    const [stacks, setStacks] = (0, react_1.useState)([]);
+exports.AppDialog = (0, react_2.memo)(({ methods }) => {
+    const [stacks, setStacks] = (0, react_2.useState)([]);
     const defineMethod = (type) => {
         return (props, ...args) => {
             return new Promise((resolve, reject) => {
-                setStacks(o => [
-                    ...o,
-                    {
-                        ...props,
-                        type,
-                        async onConfirm() {
-                            await props.onConfirm?.(...args);
-                            resolve();
-                        },
-                        onCancel() {
-                            props.onCancel?.(...args);
-                            reject();
-                        },
-                        onClosed() {
-                            props.onClosed?.();
-                            setStacks(_o => {
-                                _o.splice(o.length, 1);
-                                return [..._o];
-                            });
+                const key = (0, utils_1.getRandomId)();
+                setStacks(o => {
+                    return [
+                        ...o,
+                        {
+                            ...props,
+                            key,
+                            type,
+                            onConfirm: async () => {
+                                await props.onConfirm?.(...args);
+                                resolve();
+                            },
+                            onCancel: () => {
+                                props.onCancel?.(...args);
+                                reject();
+                            },
+                            onClosed: () => {
+                                props.onClosed?.();
+                                setStacks(stacks => stacks.filter(stack => stack.key !== key));
+                            }
                         }
-                    }
-                ]);
+                    ];
+                });
             });
         };
     };
@@ -53,14 +56,10 @@ exports.AppDialog = (0, react_1.memo)(({ methods }) => {
     methods.warning = defineMethod('warning');
     methods.error = defineMethod('error');
     methods.confirm = defineMethod('confirm');
-    return stacks.map((p, i) => {
-        return (0, jsx_runtime_1.jsx)(AppDialogStack, { ...p }, i);
+    return stacks.map(p => {
+        return (0, react_1.createElement)(AppDialogStack, { ...p, key: p.key });
     });
 });
-const AppDialogStack = (0, react_1.memo)(({ type, content, ...props }) => {
-    const [open, setOpen] = (0, react_1.useState)(true);
-    return ((0, jsx_runtime_1.jsx)(dialog_1.Dialog, { width: 360, maskClosable: false, icon: (0, jsx_runtime_1.jsx)(status_1.StatusIcon, { status: type }), showCancel: type === 'confirm', showClose: false, confirmText: type === 'confirm' ? void 0 : '知道了', ...props, open: open, onClose: reason => {
-            props.onClose?.(reason);
-            setOpen(false);
-        }, children: content }));
+const AppDialogStack = (0, react_2.memo)(({ type, content, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)(dialog_1.Dialog, { width: 360, maskClosable: false, icon: (0, jsx_runtime_1.jsx)(status_1.StatusIcon, { status: type }), showCancel: type === 'confirm', showClose: false, confirmText: type === 'confirm' ? void 0 : '知道了', defaultOpen: true, ...props, children: content }));
 });

package/dist/cjs/components/form/formItem.js

@@ -137,7 +137,7 @@ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, req
     }, [rules, required]);
     const [randomKey] = (0, utils_1.useDerivedState)(prev => {
         // fieldValue变为undefined时，需要更新key以强制重渲染组件
-        return !prev || typeof fieldValue === 'undefined' ? (0, utils_1.getShortID)() : prev;
+        return !prev || typeof fieldValue === 'undefined' ? (0, utils_1.getRandomId)() : prev;
     }, [fieldValue]);
     const renderedChildren = (0, react_1.useMemo)(() => {
         if (typeof children === 'function') {

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

@@ -47,7 +47,7 @@ exports.SnackbarBase = (0, react_2.memo)(({ methods, useTo, max = useTo === 'mes
             : { content: props };
         const { placement = useTo === 'message' ? 'top' : 'topRight', duration = useTo === 'message' ? 3000 : 5000, ...restProps } = propsObject;
         const index = placementToIndex[placement];
-        let id = (0, utils_1.getEasyID)('snackbar');
+        let id = (0, utils_1.getRandomId)();
         const onCloseButtonClick = () => {
             !isUnmounted.current && setStacks(o => {
                 o[index] = o[index].filter(s => s.id !== id);

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

@@ -20,7 +20,7 @@ const faUpload_1 = require("@fortawesome/free-solid-svg-icons/faUpload");
 const markFileId = (files) => {
     if (files) {
         for (const file of files) {
-            file.id ||= (0, utils_1.getShortID)();
+            file.id ||= (0, utils_1.getRandomId)();
         }
     }
 };

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

@@ -1,15 +1,9 @@
 import { Ref, ReactNode, ElementType, ComponentProps } from 'react';
 import { Id, Obj } from '../types';
 /**
- * 生成最简易的随机ID
- * @param namespace
+ * 获取UUID
  */
-export declare function getEasyID(namespace?: string): string;
-/**
- * 获取任意长度由随机字母组成的ID
- * @param length
- */
-export declare function getShortID(length?: number): string;
+export declare function getRandomId(): `${string}-${string}-${string}-${string}-${string}`;
 /**
  * 拼接元素的类名
  * @param classes

package/dist/cjs/utils/utils.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getEasyID = getEasyID;
-exports.getShortID = getShortID;
+exports.getRandomId = getRandomId;
 exports.clsx = clsx;
 exports.humpToSegmented = humpToSegmented;
 exports.toArray = toArray;
@@ -26,24 +25,10 @@ exports.queryDeep = queryDeep;
 exports.filterProperties = filterProperties;
 exports.mergeComponentProps = mergeComponentProps;
 /**
- * 生成最简易的随机ID
- * @param namespace
+ * 获取UUID
  */
-function getEasyID(namespace = '') {
-    return `${namespace}${Date.now()}${Math.random()}`;
-}
-const randomIdAlphabet = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_-';
-/**
- * 获取任意长度由随机字母组成的ID
- * @param length
- */
-function getShortID(length = 8) {
-    const { length: alphabetLength } = randomIdAlphabet;
-    let id = '';
-    while (length--) {
-        id += randomIdAlphabet[Math.floor(Math.random() * alphabetLength)];
-    }
-    return id;
+function getRandomId() {
+    return crypto.randomUUID();
 }
 /**
  * 拼接元素的类名

package/dist/esm/components/app/appActionSheet.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { createElement as _createElement } from "@emotion/react";
 import { isValidElement, memo, useState } from 'react';
 import { ActionSheet } from '../actionSheet';
+import { getRandomId } from '../../utils';
 export class AppActionSheetMethods {
     async confirm() {
     }
@@ -9,45 +11,44 @@ export class AppActionSheetMethods {
 }
 export const AppActionSheet = memo(({ methods }) => {
     const [stacks, setStacks] = useState([]);
-    const defineMethods = (type) => (params, ...args) => new Promise((resolve, reject) => {
-        const props = typeof params !== 'object' || isValidElement(params)
-            ? { title: params }
-            : params;
-        setStacks(o => [
-            ...o,
-            {
-                ...props,
-                type,
-                onAction(action) {
-                    props?.onAction?.(action, ...args);
-                    resolve(action);
-                },
-                onConfirm() {
-                    props?.onConfirm?.(...args);
-                    resolve(void 0);
-                },
-                onCancel(e) {
-                    props?.onCancel?.(e);
-                    reject();
-                },
-                onClosed() {
-                    props?.onClosed?.();
-                    setStacks(_o => {
-                        _o.splice(o.length, 1);
-                        return [..._o];
-                    });
-                }
-            }
-        ]);
-    });
+    const defineMethods = (type) => {
+        return (params, ...args) => {
+            return new Promise((resolve, reject) => {
+                const props = typeof params !== 'object' || isValidElement(params)
+                    ? { title: params }
+                    : params;
+                const key = getRandomId();
+                setStacks(o => [
+                    ...o,
+                    {
+                        ...props,
+                        key,
+                        type,
+                        onAction(action) {
+                            props?.onAction?.(action, ...args);
+                            resolve(action);
+                        },
+                        onConfirm() {
+                            props?.onConfirm?.(...args);
+                            resolve(void 0);
+                        },
+                        onCancel(e) {
+                            props?.onCancel?.(e);
+                            reject();
+                        },
+                        onClosed() {
+                            props?.onClosed?.();
+                            setStacks(stacks => stacks.filter(stack => stack.key !== key));
+                        }
+                    }
+                ]);
+            });
+        };
+    };
     methods.confirm = defineMethods('confirm');
     methods.open = defineMethods('open');
-    return stacks.map((p, i) => _jsx(AppActionSheetStack, { ...p }, i));
+    return stacks.map(p => _createElement(AppActionSheetStack, { ...p, key: p.key }));
 });
 const AppActionSheetStack = memo(({ type, ...props }) => {
-    const [open, setOpen] = useState(true);
-    return (_jsx(ActionSheet, { showConfirm: type === 'confirm', ...props, open: open, onClose: reason => {
-            props.onClose?.(reason);
-            setOpen(false);
-        } }));
+    return (_jsx(ActionSheet, { showConfirm: type === 'confirm', defaultOpen: true, ...props }));
 });

package/dist/esm/components/app/appDialog.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { createElement as _createElement } from "@emotion/react";
 import { memo, useState } from 'react';
 import { Dialog } from '../dialog';
 import { StatusIcon } from '../status';
+import { getRandomId } from '../../utils';
 export class AppDialogMethods {
     async info(props, ...args) {
     }
@@ -19,28 +21,29 @@ export const AppDialog = memo(({ methods }) => {
     const defineMethod = (type) => {
         return (props, ...args) => {
             return new Promise((resolve, reject) => {
-                setStacks(o => [
-                    ...o,
-                    {
-                        ...props,
-                        type,
-                        async onConfirm() {
-                            await props.onConfirm?.(...args);
-                            resolve();
-                        },
-                        onCancel() {
-                            props.onCancel?.(...args);
-                            reject();
-                        },
-                        onClosed() {
-                            props.onClosed?.();
-                            setStacks(_o => {
-                                _o.splice(o.length, 1);
-                                return [..._o];
-                            });
+                const key = getRandomId();
+                setStacks(o => {
+                    return [
+                        ...o,
+                        {
+                            ...props,
+                            key,
+                            type,
+                            onConfirm: async () => {
+                                await props.onConfirm?.(...args);
+                                resolve();
+                            },
+                            onCancel: () => {
+                                props.onCancel?.(...args);
+                                reject();
+                            },
+                            onClosed: () => {
+                                props.onClosed?.();
+                                setStacks(stacks => stacks.filter(stack => stack.key !== key));
+                            }
                         }
-                    }
-                ]);
+                    ];
+                });
             });
         };
     };
@@ -49,14 +52,10 @@ export const AppDialog = memo(({ methods }) => {
     methods.warning = defineMethod('warning');
     methods.error = defineMethod('error');
     methods.confirm = defineMethod('confirm');
-    return stacks.map((p, i) => {
-        return _jsx(AppDialogStack, { ...p }, i);
+    return stacks.map(p => {
+        return _createElement(AppDialogStack, { ...p, key: p.key });
     });
 });
 const AppDialogStack = memo(({ type, content, ...props }) => {
-    const [open, setOpen] = useState(true);
-    return (_jsx(Dialog, { width: 360, maskClosable: false, icon: _jsx(StatusIcon, { status: type }), showCancel: type === 'confirm', showClose: false, confirmText: type === 'confirm' ? void 0 : '知道了', ...props, open: open, onClose: reason => {
-            props.onClose?.(reason);
-            setOpen(false);
-        }, children: content }));
+    return (_jsx(Dialog, { width: 360, maskClosable: false, icon: _jsx(StatusIcon, { status: type }), showCancel: type === 'confirm', showClose: false, confirmText: type === 'confirm' ? void 0 : '知道了', defaultOpen: true, ...props, children: content }));
 });

package/dist/esm/components/form/formItem.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { cloneElement, isValidElement, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import { useFormContext, useFormStyleContext, useFormValueContext } from './form';
-import { clsx, getValueOnChange, queryDeep, stringifyField, useDerivedState, toArray, getShortID, isUnset, useStrictMemo } from '../../utils';
+import { clsx, getValueOnChange, queryDeep, stringifyField, useDerivedState, toArray, getRandomId, isUnset, useStrictMemo } from '../../utils';
 import { DescriptionItem } from '../descriptions';
 import { classes } from './form.style';
 import { Collapse } from '../transitionBase';
@@ -134,7 +134,7 @@ export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rul
     }, [rules, required]);
     const [randomKey] = useDerivedState(prev => {
         // fieldValue变为undefined时，需要更新key以强制重渲染组件
-        return !prev || typeof fieldValue === 'undefined' ? getShortID() : prev;
+        return !prev || typeof fieldValue === 'undefined' ? getRandomId() : prev;
     }, [fieldValue]);
     const renderedChildren = useMemo(() => {
         if (typeof children === 'function') {

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, useRef, useState } from 'react';
 import { Collapse, Slide } from '../transitionBase';
-import { clsx, getEasyID, useColor, useContainer, useUnmounted } from '../../utils';
+import { clsx, getRandomId, useColor, useContainer, useUnmounted } from '../../utils';
 import { classes, style } from './snackbarBase.style';
 import { TransitionGroup } from 'react-transition-group';
 import { StatusIcon, statusMapToIconDefinition } from '../status';
@@ -43,7 +43,7 @@ export const SnackbarBase = memo(({ methods, useTo, max = useTo === 'message' ?
             : { content: props };
         const { placement = useTo === 'message' ? 'top' : 'topRight', duration = useTo === 'message' ? 3000 : 5000, ...restProps } = propsObject;
         const index = placementToIndex[placement];
-        let id = getEasyID('snackbar');
+        let id = getRandomId();
         const onCloseButtonClick = () => {
             !isUnmounted.current && setStacks(o => {
                 o[index] = o[index].filter(s => s.id !== id);

package/dist/esm/components/upload/upload.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo, useImperativeHandle, useRef } from 'react';
 import { classes, style } from './upload.style';
-import { clsx, getShortID, onDndDragEnd, useControlled, useDndSensors, mergeComponentProps } from '../../utils';
+import { clsx, getRandomId, onDndDragEnd, useControlled, useDndSensors, mergeComponentProps } from '../../utils';
 import { Button } from '../button';
 import { FileItem } from './fileItem';
 import { TransitionGroup } from 'react-transition-group';
@@ -17,7 +17,7 @@ import { faUpload } from '@fortawesome/free-solid-svg-icons/faUpload';
 const markFileId = (files) => {
     if (files) {
         for (const file of files) {
-            file.id ||= getShortID();
+            file.id ||= getRandomId();
         }
     }
 };

package/dist/esm/utils/utils.d.ts

@@ -1,15 +1,9 @@
 import { Ref, ReactNode, ElementType, ComponentProps } from 'react';
 import { Id, Obj } from '../types';
 /**
- * 生成最简易的随机ID
- * @param namespace
+ * 获取UUID
  */
-export declare function getEasyID(namespace?: string): string;
-/**
- * 获取任意长度由随机字母组成的ID
- * @param length
- */
-export declare function getShortID(length?: number): string;
+export declare function getRandomId(): `${string}-${string}-${string}-${string}-${string}`;
 /**
  * 拼接元素的类名
  * @param classes

package/dist/esm/utils/utils.js

@@ -1,22 +1,8 @@
 /**
- * 生成最简易的随机ID
- * @param namespace
+ * 获取UUID
  */
-export function getEasyID(namespace = '') {
-    return `${namespace}${Date.now()}${Math.random()}`;
-}
-const randomIdAlphabet = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_-';
-/**
- * 获取任意长度由随机字母组成的ID
- * @param length
- */
-export function getShortID(length = 8) {
-    const { length: alphabetLength } = randomIdAlphabet;
-    let id = '';
-    while (length--) {
-        id += randomIdAlphabet[Math.floor(Math.random() * alphabetLength)];
-    }
-    return id;
+export function getRandomId() {
+    return crypto.randomUUID();
 }
 /**
  * 拼接元素的类名

package/documentation/dist/assets/index-DyrGMYuH.js

@@ -7334,7 +7334,7 @@ If it declares any Font Awesome CSS pseudo-elements, they will not be rendered a
             flex-wrap: wrap;
             column-gap: var(--waterfall-column-gap);
         }
-    `)}const fUt=({ref:a,onLoad:u,child:_})=>{const g=Te.useRef(null);Te.useEffect(()=>{const E=g.current;if(!E)throw Error("Children of <Waterfall> must expose 'ref' prop");const w=E.querySelectorAll("img");if(!w.length){u();return}Promise.all([...w].map(R=>{if(!R.complete)return new Promise(z=>{R.addEventListener("load",z,{once:!0})})})).then(()=>u())});const v=Te.useCallback(gd(_.props.ref,g,a),[_.props.ref,a]);return Te.cloneElement(_,{ref:v,className:ca(Wrt.item,_.props.className),style:{width:"calc((100% - var(--waterfall-column-gap) * (var(--waterfall-columnCount) - 1)) / var(--waterfall-columnCount))",paddingBottom:"var(--waterfall-row-gap)",..._.props.style}})},_Ut=({columnCount:a={xs:4},gap:u=0,columnGap:_,rowGap:g,...v})=>{a=pE(a),u=pE(u),_=pE(_)??u,g=pE(g)??u;const E=vce(a),w=Te.useRef(null),R=Te.useRef([]);R.current=[];const z=()=>{const j=Array(E.current).fill(0);R.current.forEach(Se=>{const ie=j.indexOf(Math.min(...j));j[ie]+=Se.offsetHeight,Se.style.order=ie+""}),w.current.style.height=Math.max(...j)+1+"px"},$=Te.useRef(void 0);$.current||=new ResizeObserver(z);const Z=[];return Te.useLayoutEffect(()=>{Promise.all(Z).then(()=>{R.current.forEach(j=>$.current.observe(j))})}),XCe(z,[E.current]),iU(()=>{},()=>{$.current.disconnect()}),we("div",{...v,ref:gd(w,v.ref),css:uUt({columnCount:a,columnGap:_,rowGap:g}),className:ca(Wrt.root,v.className),children:Te.Children.map(v.children,j=>{if(!Te.isValidElement(j))throw Error("Children of <Waterfall> must be element");let Se;return Z.push(new Promise(ie=>Se=ie)),we(fUt,{ref:ie=>{ie&&R.current.push(ie)},child:j,onLoad:Se})})})},qrt=Object.freeze(Object.defineProperty({__proto__:null,Accordion:rBt,ActionSheet:Bnt,Alert:$we,AnchorList:Unt,App:Oz,Autocomplete:PBt,Avatar:Zoe,AvatarGroup:Znt,Backdrop:hnt,Badge:LBt,BottomNavigation:BBt,BottomNavigationItem:Knt,Boundary:nrt,Breadcrumb:rrt,Bubble:fU,BubbleConfirm:irt,Button:qo,CONTROL_COLUMN_KEY:Xoe,Calendar:srt,Card:cjt,Cascade:pjt,Checkbox:x6,CheckboxBase:Awe,CheckboxBaseGroup:wwe,CheckboxGroup:pnt,ClickAway:Swe,Collapse:ax,ColorPicker:_rt,ContextMenu:yjt,Counter:Tjt,Curd:$ce,CurdDialog:yrt,CurdFilterable:Gwe,CurdResizable:mrt,DEFAULT_DARK:Wet,DEFAULT_LIGHT:Jet,DataGrid:KN,DateTimePicker:Trt,DateTimeRangePicker:Xjt,Deferred:Qjt,DescriptionItem:Mce,Descriptions:Mwe,Dialog:GY,Divider:YY,Draggable:Vnt,Drawer:ezt,DropArea:rAe,Dropdown:nzt,ErrorBoundary:VEe,Fade:awe,Flex:Jh,Form:t8,FormDialog:rzt,FormItem:aD,FormRelatable:wnt,Gallery:Xwe,Grid:Lce,GridItem:Lwe,Grow:swe,Highlight:Pce,Icon:ds,Image:Qwe,ImageItem:krt,InnerApp:Qnt,Input:hw,InputBase:UF,Loading:qY,LoadingIndicator:GO,LoadingMask:ynt,Menu:aMt,MenuItem:rb,Modal:Vwe,Option:hMt,OptionsBase:uU,OverlayBase:jce,Pagination:JF,PaginationCounter:Pwe,PaginationJumper:Iwe,PaginationPager:vwe,PaginationSizer:Dwe,Palette:frt,PickerDialog:hrt,Pinchable:xrt,Placeholder:lU,Popper:gw,PopperContext:Twe,Progress:Fce,Radio:Rce,RadioGroup:unt,Rating:Szt,Resizable:kzt,Scrollbar:Czt,Segmented:Vce,Select:Nwe,SelectedList:grt,SelectionContext:Sce,SerialInput:Nzt,Skeleton:rx,SkeletonCard:jnt,SkeletonTable:znt,SlidableActions:Art,SlidableActionsAction:Zwe,Slide:xce,Slider:Koe,SnackbarBase:Wwe,SnackbarBaseItem:Wnt,SnackbarBaseMethods:Jwe,SortableItem:ece,Status:mBt,StatusIcon:Uce,Step:Kwe,Stepper:Irt,Switch:Mzt,Table:ZO,TableContainer:Rwe,TableRow:Tnt,Tabs:tAe,Tag:Ewe,TdCell:Goe,Textarea:ont,ThCell:Yoe,ThemeContext:HCe,ThemeProvider:Het,Timeline:Mrt,Timer:vrt,ToggleButton:qzt,Tooltip:fy,TouchRipple:Yzt,Transfer:Qzt,TransitionBase:oU,TransportStyle:Oce,Tree:nAe,TreeNode:Jce,TreeSelect:XEe,Typography:Pu,Upload:Jrt,Waterfall:_Ut,arrayShallowEqual:FCe,cloneDeep:Hz,cloneRef:gd,clsx:ca,colorTransfer:aU,columnsToFilterItem:Rnt,columnsToFormItem:Fnt,cubicBezier:p6,defaultBreakpoints:$Ce,defaultDarkTheme:VCe,defaultFontFamily:$et,defaultLightTheme:mce,defaultMonospaceFontFamily:Vet,defineClasses:T7t,defineCss:Mo,defineInnerClasses:ms,definePrefix:ZCe,defineTheme:JCe,edgeBounce:$oe,filterProperties:jCe,findPredecessor:MCe,fixInputNumber:Uoe,getEasyID:Fet,getPromiseState:Met,getShortID:RCe,getTheme:yEe,getValueOnChange:pEe,humpToSegmented:SY,imagePreset:Noe,isChildOf:LCe,isElementOverflowed:_Ee,isNoValue:dce,isPromise:Let,isSelected:qO,isUnset:gu,joinNodes:zoe,listenAllPredecessorsScroll:BCe,mergeComponentProps:su,mergeDeep:TY,nextTick:r7t,onDndDragEnd:UCe,onTreeNodeSort:i7t,overlayBaseTransitionDuration:Uwe,queryDeep:HN,range:ex,registerTheme:qCe,renderCell:zwe,responsiveStyles:KCe,responsiveVariables:jY,restoreThemeDefinition:qet,setDefaultColumnKey:Bce,sortTreeNodes:k7t,statusMapToIconDefinition:zce,stringifyField:jz,themeMap:WCe,toArray:nb,toResponsiveValue:pE,useAppContext:Xnt,useAvatarStyle:qwe,useBoundaryContext:VBt,useCascadeContext:urt,useCheckboxBaseGroupContext:_nt,useColor:Im,useColumnMap:jwe,useContainer:BY,useControlled:dc,useCss:__,useCurdColumns:Mnt,useDataGridColumns:Ont,useDataGridContext:Pnt,useDateTimePickerContext:Srt,useDerivedState:k0,useDescriptionsContext:Cnt,useDndSensors:zCe,useDraggable:dw,useEscapeClosable:QCe,useExternalClass:iU,useFlatSelection:sU,useForceUpdate:GCe,useFormContext:e8,useFormStyleContext:Bwe,useFormValueContext:_U,useGesture:gce,useKeyboard:hce,useLoading:pw,useMenuContext:mnt,useMounted:b7t,usePaginationContext:HY,usePinchable:S7t,usePopperContext:$F,useResponsiveValue:vce,useScrollToTarget:xwe,useSelection:bce,useSelectionContext:KO,useSlidableActionsContext:wrt,useStatusColor:ewe,useStepperContext:Drt,useStrictEffect:YCe,useStrictMemo:Get,useSync:am,useSyncState:HO,useTabsContext:eAe,useTheme:Jl,useTimelineContext:Lrt,useTouchSpread:yce,useTransferContext:jrt,useTreeContext:$rt,useTreeSearch:Yet,useUnmounted:MY,useUpdateEffect:XCe,zIndex:b6},Symbol.toStringTag,{value:"Module"})),pUt=Mo(({mode:a})=>Ji`
+    `)}const fUt=({ref:a,onLoad:u,child:_})=>{const g=Te.useRef(null);Te.useEffect(()=>{const E=g.current;if(!E)throw Error("Children of <Waterfall> must expose 'ref' prop");const w=E.querySelectorAll("img");if(!w.length){u();return}Promise.all([...w].map(R=>{if(!R.complete)return new Promise(z=>{R.addEventListener("load",z,{once:!0})})})).then(()=>u())});const v=Te.useCallback(gd(_.props.ref,g,a),[_.props.ref,a]);return Te.cloneElement(_,{ref:v,className:ca(Wrt.item,_.props.className),style:{width:"calc((100% - var(--waterfall-column-gap) * (var(--waterfall-columnCount) - 1)) / var(--waterfall-columnCount))",paddingBottom:"var(--waterfall-row-gap)",..._.props.style}})},_Ut=({columnCount:a={xs:4},gap:u=0,columnGap:_,rowGap:g,...v})=>{a=pE(a),u=pE(u),_=pE(_)??u,g=pE(g)??u;const E=vce(a),w=Te.useRef(null),R=Te.useRef([]);R.current=[];const z=()=>{const j=Array(E.current).fill(0);R.current.forEach(Se=>{const ie=j.indexOf(Math.min(...j));j[ie]+=Se.offsetHeight,Se.style.order=ie+""}),w.current.style.height=Math.max(...j)+1+"px"},$=Te.useRef(void 0);$.current||=new ResizeObserver(z);const Z=[];return Te.useLayoutEffect(()=>{Promise.all(Z).then(()=>{R.current.forEach(j=>$.current.observe(j))})}),XCe(z,[E.current]),iU(()=>{},()=>{$.current.disconnect()}),we("div",{...v,ref:gd(w,v.ref),css:uUt({columnCount:a,columnGap:_,rowGap:g}),className:ca(Wrt.root,v.className),children:Te.Children.map(v.children,j=>{if(!Te.isValidElement(j))throw Error("Children of <Waterfall> must be element");let Se;return Z.push(new Promise(ie=>Se=ie)),we(fUt,{ref:ie=>{ie&&R.current.push(ie)},child:j,onLoad:Se})})})},qrt=Object.freeze(Object.defineProperty({__proto__:null,Accordion:rBt,ActionSheet:Bnt,Alert:$we,AnchorList:Unt,App:Oz,Autocomplete:PBt,Avatar:Zoe,AvatarGroup:Znt,Backdrop:hnt,Badge:LBt,BottomNavigation:BBt,BottomNavigationItem:Knt,Boundary:nrt,Breadcrumb:rrt,Bubble:fU,BubbleConfirm:irt,Button:qo,CONTROL_COLUMN_KEY:Xoe,Calendar:srt,Card:cjt,Cascade:pjt,Checkbox:x6,CheckboxBase:Awe,CheckboxBaseGroup:wwe,CheckboxGroup:pnt,ClickAway:Swe,Collapse:ax,ColorPicker:_rt,ContextMenu:yjt,Counter:Tjt,Curd:$ce,CurdDialog:yrt,CurdFilterable:Gwe,CurdResizable:mrt,DEFAULT_DARK:Wet,DEFAULT_LIGHT:Jet,DataGrid:KN,DateTimePicker:Trt,DateTimeRangePicker:Xjt,Deferred:Qjt,DescriptionItem:Mce,Descriptions:Mwe,Dialog:GY,Divider:YY,Draggable:Vnt,Drawer:ezt,DropArea:rAe,Dropdown:nzt,ErrorBoundary:VEe,Fade:awe,Flex:Jh,Form:t8,FormDialog:rzt,FormItem:aD,FormRelatable:wnt,Gallery:Xwe,Grid:Lce,GridItem:Lwe,Grow:swe,Highlight:Pce,Icon:ds,Image:Qwe,ImageItem:krt,InnerApp:Qnt,Input:hw,InputBase:UF,Loading:qY,LoadingIndicator:GO,LoadingMask:ynt,Menu:aMt,MenuItem:rb,Modal:Vwe,Option:hMt,OptionsBase:uU,OverlayBase:jce,Pagination:JF,PaginationCounter:Pwe,PaginationJumper:Iwe,PaginationPager:vwe,PaginationSizer:Dwe,Palette:frt,PickerDialog:hrt,Pinchable:xrt,Placeholder:lU,Popper:gw,PopperContext:Twe,Progress:Fce,Radio:Rce,RadioGroup:unt,Rating:Szt,Resizable:kzt,Scrollbar:Czt,Segmented:Vce,Select:Nwe,SelectedList:grt,SelectionContext:Sce,SerialInput:Nzt,Skeleton:rx,SkeletonCard:jnt,SkeletonTable:znt,SlidableActions:Art,SlidableActionsAction:Zwe,Slide:xce,Slider:Koe,SnackbarBase:Wwe,SnackbarBaseItem:Wnt,SnackbarBaseMethods:Jwe,SortableItem:ece,Status:mBt,StatusIcon:Uce,Step:Kwe,Stepper:Irt,Switch:Mzt,Table:ZO,TableContainer:Rwe,TableRow:Tnt,Tabs:tAe,Tag:Ewe,TdCell:Goe,Textarea:ont,ThCell:Yoe,ThemeContext:HCe,ThemeProvider:Het,Timeline:Mrt,Timer:vrt,ToggleButton:qzt,Tooltip:fy,TouchRipple:Yzt,Transfer:Qzt,TransitionBase:oU,TransportStyle:Oce,Tree:nAe,TreeNode:Jce,TreeSelect:XEe,Typography:Pu,Upload:Jrt,Waterfall:_Ut,arrayShallowEqual:FCe,cloneDeep:Hz,cloneRef:gd,clsx:ca,colorTransfer:aU,columnsToFilterItem:Rnt,columnsToFormItem:Fnt,cubicBezier:p6,defaultBreakpoints:$Ce,defaultDarkTheme:VCe,defaultFontFamily:$et,defaultLightTheme:mce,defaultMonospaceFontFamily:Vet,defineClasses:T7t,defineCss:Mo,defineInnerClasses:ms,definePrefix:ZCe,defineTheme:JCe,edgeBounce:$oe,filterProperties:jCe,findPredecessor:MCe,fixInputNumber:Uoe,getEasyID:Fet,getPromiseState:Met,getRandomId:RCe,getTheme:yEe,getValueOnChange:pEe,humpToSegmented:SY,imagePreset:Noe,isChildOf:LCe,isElementOverflowed:_Ee,isNoValue:dce,isPromise:Let,isSelected:qO,isUnset:gu,joinNodes:zoe,listenAllPredecessorsScroll:BCe,mergeComponentProps:su,mergeDeep:TY,nextTick:r7t,onDndDragEnd:UCe,onTreeNodeSort:i7t,overlayBaseTransitionDuration:Uwe,queryDeep:HN,range:ex,registerTheme:qCe,renderCell:zwe,responsiveStyles:KCe,responsiveVariables:jY,restoreThemeDefinition:qet,setDefaultColumnKey:Bce,sortTreeNodes:k7t,statusMapToIconDefinition:zce,stringifyField:jz,themeMap:WCe,toArray:nb,toResponsiveValue:pE,useAppContext:Xnt,useAvatarStyle:qwe,useBoundaryContext:VBt,useCascadeContext:urt,useCheckboxBaseGroupContext:_nt,useColor:Im,useColumnMap:jwe,useContainer:BY,useControlled:dc,useCss:__,useCurdColumns:Mnt,useDataGridColumns:Ont,useDataGridContext:Pnt,useDateTimePickerContext:Srt,useDerivedState:k0,useDescriptionsContext:Cnt,useDndSensors:zCe,useDraggable:dw,useEscapeClosable:QCe,useExternalClass:iU,useFlatSelection:sU,useForceUpdate:GCe,useFormContext:e8,useFormStyleContext:Bwe,useFormValueContext:_U,useGesture:gce,useKeyboard:hce,useLoading:pw,useMenuContext:mnt,useMounted:b7t,usePaginationContext:HY,usePinchable:S7t,usePopperContext:$F,useResponsiveValue:vce,useScrollToTarget:xwe,useSelection:bce,useSelectionContext:KO,useSlidableActionsContext:wrt,useStatusColor:ewe,useStepperContext:Drt,useStrictEffect:YCe,useStrictMemo:Get,useSync:am,useSyncState:HO,useTabsContext:eAe,useTheme:Jl,useTimelineContext:Lrt,useTouchSpread:yce,useTransferContext:jrt,useTreeContext:$rt,useTreeSearch:Yet,useUnmounted:MY,useUpdateEffect:XCe,zIndex:b6},Symbol.toStringTag,{value:"Module"})),pUt=Mo(({mode:a})=>Ji`
     html, body {
         margin: 0;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.144",
+  "version": "0.0.145",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",