@canlooks/can-ui 0.0.144 → 0.0.146

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/autocomplete/autocomplete.js

@@ -9,6 +9,7 @@ const input_1 = require("../input");
 const utils_1 = require("../../utils");
 const autocomplete_style_1 = require("./autocomplete.style");
 const popper_style_1 = require("../popper/popper.style");
+const filterOptions_1 = require("../optionsBase/filterOptions");
 exports.Autocomplete = (0, react_1.memo)(({ children, loading, options, loadOptions, primaryKey = 'value', labelKey = 'label', onSelect, renderInput, popperProps, popperRef, defaultValue = '', value, onChange, ...props }) => {
     const [focused, _setFocused] = (0, react_1.useState)(false);
     const setFocused = (focused) => {
@@ -36,7 +37,12 @@ exports.Autocomplete = (0, react_1.memo)(({ children, loading, options, loadOpti
      * ------------------------------------------------------------------
      * 合并最终选项
      */
-    const actualOptions = innerOptions || options || react_1.Children.map(children, c => (0, react_1.isValidElement)(c) ? c.props : c) || void 0;
+    const actualOptions = (0, filterOptions_1.useFilterOptions)({
+        searchValue: innerValue.current,
+        options: innerOptions || options,
+        children,
+        labelKey
+    }).map(opt => (0, react_1.isValidElement)(opt) ? opt.props : opt);
     const optionsMap = (0, react_1.useMemo)(() => {
         const map = new Map();
         actualOptions?.forEach(opt => {
@@ -49,7 +55,7 @@ exports.Autocomplete = (0, react_1.memo)(({ children, loading, options, loadOpti
     }, [actualOptions, primaryKey]);
     const [open, _setOpen] = (0, utils_1.useDerivedState)(() => {
         return focused && !!optionsMap.size;
-    }, [focused, optionsMap.size]);
+    }, [focused, optionsMap]);
     const setOpen = (open) => {
         if (!props.disabled && !props.readOnly && (!open || optionsMap.size)) {
             // 必须有选项才能打开下拉框
@@ -75,8 +81,6 @@ exports.Autocomplete = (0, react_1.memo)(({ children, loading, options, loadOpti
         loading: innerLoading.current,
         value: innerValue.current,
         onChange: changeHandler,
-        onInput: () => setOpen(true),
-        onClick: () => setOpen(true),
         onFocus: () => setFocused(true),
         onBlur: () => setFocused(false)
     });
@@ -84,7 +88,8 @@ exports.Autocomplete = (0, react_1.memo)(({ children, loading, options, loadOpti
             placement: 'bottom',
             variant: 'collapse',
             trigger: false,
-            content: ((0, jsx_runtime_1.jsx)(optionsBase_1.OptionsBase, { onToggleSelected: optionSelectHandler, loading: innerLoading.current, options: actualOptions, labelKey: labelKey, primaryKey: primaryKey, children: children }))
+            animation: false,
+            content: ((0, jsx_runtime_1.jsx)(optionsBase_1.OptionsBase, { onToggleSelected: optionSelectHandler, loading: innerLoading.current, options: actualOptions, labelKey: labelKey, primaryKey: primaryKey, searchValue: innerValue.current, _optionsAlreadyFilter: true, children: children }))
         }, popperProps, {
             css: popper_style_1.popperStyle,
             open: open.current,

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

@@ -42,9 +42,9 @@ exports.SearchResult = (0, react_1.memo)(({ primaryKey, labelKey, childrenKey, s
         if (!searchValue) {
             return flattedOptions;
         }
-        const splited = searchValue.split(' ');
+        const split = searchValue.split(' ');
         return flattedOptions.filter(({ searchToken }) => {
-            return splited.some(k => {
+            return split.some(k => {
                 return k && searchToken.toLowerCase().includes(k.toLowerCase());
             });
         });

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

@@ -140,18 +140,18 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
     onFocusCapture: import("react").FocusEventHandler<HTMLDivElement>;
     onBlur: import("react").FocusEventHandler<HTMLDivElement>;
     onBlurCapture: import("react").FocusEventHandler<HTMLDivElement>;
-    onChange: import("react").FormEventHandler<HTMLDivElement>;
-    onChangeCapture: import("react").FormEventHandler<HTMLDivElement>;
+    onChange: import("react").ChangeEventHandler<HTMLDivElement, Element>;
+    onChangeCapture: import("react").ChangeEventHandler<HTMLDivElement, Element>;
     onBeforeInput: import("react").InputEventHandler<HTMLDivElement>;
-    onBeforeInputCapture: import("react").FormEventHandler<HTMLDivElement>;
-    onInput: import("react").FormEventHandler<HTMLDivElement>;
-    onInputCapture: import("react").FormEventHandler<HTMLDivElement>;
-    onReset: import("react").FormEventHandler<HTMLDivElement>;
-    onResetCapture: import("react").FormEventHandler<HTMLDivElement>;
-    onSubmit: import("react").FormEventHandler<HTMLDivElement>;
-    onSubmitCapture: import("react").FormEventHandler<HTMLDivElement>;
-    onInvalid: import("react").FormEventHandler<HTMLDivElement>;
-    onInvalidCapture: import("react").FormEventHandler<HTMLDivElement>;
+    onBeforeInputCapture: import("react").InputEventHandler<HTMLDivElement>;
+    onInput: import("react").InputEventHandler<HTMLDivElement>;
+    onInputCapture: import("react").InputEventHandler<HTMLDivElement>;
+    onReset: import("react").ReactEventHandler<HTMLDivElement>;
+    onResetCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onSubmit: import("react").SubmitEventHandler<HTMLDivElement>;
+    onSubmitCapture: import("react").SubmitEventHandler<HTMLDivElement>;
+    onInvalid: import("react").ReactEventHandler<HTMLDivElement>;
+    onInvalidCapture: import("react").ReactEventHandler<HTMLDivElement>;
     onLoad: import("react").ReactEventHandler<HTMLDivElement>;
     onLoadCapture: import("react").ReactEventHandler<HTMLDivElement>;
     onError: import("react").ReactEventHandler<HTMLDivElement>;

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/inputBase/inputBase.style.js

@@ -78,7 +78,7 @@ function useStyle({ color }) {
                 }
 
                 &:not(:has([data-read-only=true]))[data-focused=true],
-                &:not(:has([data-read-only=true])):has(:focus) {
+                &:not(:has([data-read-only=true])):focus-within {
                     &::before, &::after {
                         display: block;
                         animation: ${borderAnim} .4s ${easing.easeOut} forwards;

package/dist/cjs/components/optionsBase/filterOptions.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+import { Id } from '../../types';
+import { MenuOptionType, OptionsBaseProps } from './optionsBase';
+export declare function useFilterOptions<O extends MenuOptionType<V>, V extends Id = Id>({ searchValue, options, children, filterPredicate, labelKey, searchTokenKey, _optionsAlreadyFilter }: Pick<OptionsBaseProps<O, V>, 'searchValue' | 'children' | 'options' | 'filterPredicate' | 'labelKey' | 'searchTokenKey' | '_optionsAlreadyFilter'>): (O | ReactNode)[];

package/dist/cjs/components/optionsBase/filterOptions.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFilterOptions = useFilterOptions;
+const react_1 = require("react");
+function useFilterOptions({ searchValue, options, children, filterPredicate, labelKey = 'label', searchTokenKey = 'searchToken', _optionsAlreadyFilter }) {
+    return (0, react_1.useMemo)(() => {
+        if (_optionsAlreadyFilter) {
+            return options || react_1.Children.toArray(children);
+        }
+        const trimmedSearchValue = searchValue?.trim();
+        if (!trimmedSearchValue) {
+            return options || react_1.Children.toArray(children);
+        }
+        const splitValue = trimmedSearchValue.split(' ');
+        const filterFn = (opt, index) => {
+            let ret = false;
+            if (filterPredicate) {
+                ret = filterPredicate(trimmedSearchValue, opt, index);
+            }
+            else {
+                const searchToken = typeof opt[labelKey] === 'string' ? opt[labelKey] : opt[searchTokenKey];
+                if (typeof searchToken === 'string') {
+                    ret = splitValue.some(k => {
+                        return k && searchToken.toLowerCase().includes(k.toLowerCase());
+                    });
+                }
+            }
+            return ret;
+        };
+        return options
+            ? options.filter(filterFn)
+            : react_1.Children.toArray(children).filter((c, index) => {
+                return (0, react_1.isValidElement)(c) && filterFn(c.props, index);
+            });
+    }, [searchValue, filterPredicate, options, children, labelKey, searchTokenKey, _optionsAlreadyFilter]);
+}

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

@@ -27,5 +27,10 @@ export interface OptionsBaseProps<O extends MenuOptionType<V>, V extends Id = Id
     searchValue?: string;
     selectedValue?: V | V[];
     onToggleSelected?(value: V, e: KeyboardEvent | React.MouseEvent<HTMLDivElement>): void;
+    /**
+     * @private
+     * 内部使用，传入的选项是否已经经过筛选
+     */
+    _optionsAlreadyFilter?: boolean;
 }
 export declare const OptionsBase: <O extends MenuOptionType<V>, V extends Id = Id>(props: OptionsBaseProps<O, V>) => ReactElement;

package/dist/cjs/components/optionsBase/optionsBase.js

@@ -10,39 +10,14 @@ const utils_1 = require("../../utils");
 const optionsBase_style_1 = require("./optionsBase.style");
 const loading_1 = require("../loading");
 const popper_1 = require("../popper");
+const filterOptions_1 = require("./filterOptions");
 exports.OptionsBase = (0, react_1.memo)(({ 
 // 共享属性
 showCheckbox, loading, options, children, labelKey = 'label', primaryKey = 'value', searchTokenKey = 'searchToken', filterPredicate, 
 // 以下为非共享属性
-searchValue, selectedValue, onToggleSelected, ...props }) => {
+searchValue, selectedValue, onToggleSelected, _optionsAlreadyFilter, ...props }) => {
     const { open, setOpen } = (0, popper_1.usePopperContext)();
-    const filteredOptions = (0, react_1.useMemo)(() => {
-        const trimmedSearchValue = searchValue?.trim();
-        if (!trimmedSearchValue) {
-            return options || react_1.Children.toArray(children);
-        }
-        const splitedValue = trimmedSearchValue.split(' ');
-        const filterFn = (opt, index) => {
-            let ret = false;
-            if (filterPredicate) {
-                ret = filterPredicate(trimmedSearchValue, opt, index);
-            }
-            else {
-                const searchToken = typeof opt[labelKey] === 'string' ? opt[labelKey] : opt[searchTokenKey];
-                if (typeof searchToken === 'string') {
-                    ret = splitedValue.some(k => {
-                        return k && searchToken.toLowerCase().includes(k.toLowerCase());
-                    });
-                }
-            }
-            return ret;
-        };
-        return options
-            ? options.filter(filterFn)
-            : react_1.Children.toArray(children).filter((c, index) => {
-                return (0, react_1.isValidElement)(c) && filterFn(c.props, index);
-            });
-    }, [searchValue, filterPredicate, options, children, labelKey, searchTokenKey]);
+    const filteredOptions = (0, filterOptions_1.useFilterOptions)({ searchValue, filterPredicate, options, children, labelKey, searchTokenKey, _optionsAlreadyFilter });
     /**
      * ------------------------------------------------------------------
      * 键盘控制

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

@@ -28,7 +28,7 @@ export interface PopperProps extends Omit<DivProps, 'content' | 'children'> {
     sizeAdaptable?: boolean;
     /** trigger{@link trigger}包含"hover"时，鼠标移入移的延迟时间，默认为`150(ms)` */
     mouseEnterDelay?: number;
-    /**默认为`150(ms)` */
+    /** 默认为`150(ms)` */
     mouseLeaveDelay?: number;
     defaultOpen?: boolean;
     open?: boolean;
@@ -43,6 +43,8 @@ export interface PopperProps extends Omit<DivProps, 'content' | 'children'> {
      * @enum {undefined} 第一次打开时渲染，跟随父组件销毁。
      */
     forceRender?: boolean;
+    /** 打开与关闭是否渲染过度动画，默认为`true` */
+    animation?: boolean;
     children?: ReactElement<any>;
 }
 export interface PopperRef extends HTMLDivElement {
@@ -51,4 +53,4 @@ export interface PopperRef extends HTMLDivElement {
         openAnimation?: boolean;
     }, beforeOpen?: () => void): void;
 }
-export declare function Popper({ ref, popperRef, anchorElement, container, effectContainer, content, offset, trigger, clickToClose, 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, clickToClose, placement, variant, sizeAdaptable, mouseEnterDelay, mouseLeaveDelay, defaultOpen, open, onOpenChange, onOpenChangeEnd, disabled, autoClose, forceRender, animation, 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, effectContainer, content, offset, trigger = 'hover', clickToClose, placement = 'top', variant = 'zoom', sizeAdaptable = variant === 'collapse', mouseEnterDelay = 150, mouseLeaveDelay = 150, defaultOpen = false, open, onOpenChange, onOpenChangeEnd, disabled, autoClose = false, forceRender, children, ...props }) {
+function Popper({ ref, popperRef, anchorElement, container, effectContainer, content, offset, trigger = 'hover', clickToClose, placement = 'top', variant = 'zoom', sizeAdaptable = variant === 'collapse', mouseEnterDelay = 150, mouseLeaveDelay = 150, defaultOpen = false, open, onOpenChange, onOpenChangeEnd, disabled, autoClose = false, forceRender, animation = true, children, ...props }) {
     const { spacing } = (0, theme_1.useTheme)();
     offset ??= spacing[2];
     (0, react_1.useImperativeHandle)(popperRef, () => {
@@ -55,6 +55,8 @@ function Popper({ ref, popperRef, anchorElement, container, effectContainer, con
         if (newOpen || openHolding.current === 0) {
             _setInnerOpen(newOpen);
         }
+        // 不渲染动画时，需要手动触发onTransitionEnd
+        !animation && transitionEndHandler();
     };
     const { onChildrenOpenChange: tellParentOpenChange } = (0, popperContext_1.usePopperContext)();
     (0, utils_1.useUpdateEffect)(() => {
@@ -85,6 +87,9 @@ function Popper({ ref, popperRef, anchorElement, container, effectContainer, con
     const animating = (0, react_1.useRef)(false);
     const onTransitionEnd = (e) => {
         props.onTransitionEnd?.(e);
+        transitionEndHandler();
+    };
+    const transitionEndHandler = () => {
         onOpenChangeEnd?.(innerOpen.current);
         if (forceRender === false && !innerOpen.current) {
             renderedOnce.current = false;
@@ -541,5 +546,5 @@ function Popper({ ref, popperRef, anchorElement, container, effectContainer, con
                             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 }) }) }), containerEl.current)] }));
+                    }, "data-open": innerOpen.current, "data-variant": variant, "data-place-a": placeA.current, "data-place-b": placeB.current, "data-animation": animation, onTransitionEnd: onTransitionEnd, children: (0, jsx_runtime_1.jsx)(popperContext_1.PopperContext, { value: contextValue, children: content }) }) }), containerEl.current)] }));
 }

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

@@ -19,7 +19,10 @@ exports.style = (0, utils_1.defineCss)(theme => {
                 left: 0;
                 z-index: ${theme_1.zIndex.popper};
                 transition-property: transform, opacity;
-                transition-duration: .25s;
+                
+                &[data-animation=true] {
+                    transition-duration: .25s;
+                }
 
                 &[data-open=true] {
                     transition-timing-function: ${easing.bounce}, ${easing.easeOut};

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();
 }
 /**
  * 拼接元素的类名
@@ -414,11 +399,12 @@ function mergeComponentProps(...props) {
                         target.style = { ...source.style, ...target.style };
                         continue;
                     default:
-                        const v = source[p];
-                        if (typeof v === 'function') {
+                        const sourceFn = source[p];
+                        if (typeof sourceFn === 'function') {
+                            const targetFn = target[p];
                             target[p] = (...args) => {
-                                target[p](...args);
-                                v(...args);
+                                targetFn(...args);
+                                sourceFn(...args);
                             };
                             continue;
                         }