@canlooks/can-ui 0.0.144 → 0.0.146

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

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { Children, isValidElement, memo, useCallback, useMemo, useRef, useState } from 'react';
+import { isValidElement, memo, useCallback, useMemo, useRef, useState } from 'react';
 import { Popper } from '../popper';
 import { OptionsBase } from '../optionsBase';
 import { Input } from '../input';
 import { isUnset, useControlled, useDerivedState, useLoading, useSync, mergeComponentProps, useStrictEffect } from '../../utils';
 import { classes } from './autocomplete.style';
 import { popperStyle } from '../popper/popper.style';
+import { useFilterOptions } from '../optionsBase/filterOptions';
 export const Autocomplete = memo(({ children, loading, options, loadOptions, primaryKey = 'value', labelKey = 'label', onSelect, renderInput, popperProps, popperRef, defaultValue = '', value, onChange, ...props }) => {
     const [focused, _setFocused] = useState(false);
     const setFocused = (focused) => {
@@ -33,7 +34,12 @@ export const Autocomplete = memo(({ children, loading, options, loadOptions, pri
      * ------------------------------------------------------------------
      * 合并最终选项
      */
-    const actualOptions = innerOptions || options || Children.map(children, c => isValidElement(c) ? c.props : c) || void 0;
+    const actualOptions = useFilterOptions({
+        searchValue: innerValue.current,
+        options: innerOptions || options,
+        children,
+        labelKey
+    }).map(opt => isValidElement(opt) ? opt.props : opt);
     const optionsMap = useMemo(() => {
         const map = new Map();
         actualOptions?.forEach(opt => {
@@ -46,7 +52,7 @@ export const Autocomplete = memo(({ children, loading, options, loadOptions, pri
     }, [actualOptions, primaryKey]);
     const [open, _setOpen] = useDerivedState(() => {
         return focused && !!optionsMap.size;
-    }, [focused, optionsMap.size]);
+    }, [focused, optionsMap]);
     const setOpen = (open) => {
         if (!props.disabled && !props.readOnly && (!open || optionsMap.size)) {
             // 必须有选项才能打开下拉框
@@ -72,8 +78,6 @@ export const Autocomplete = memo(({ children, loading, options, loadOptions, pri
         loading: innerLoading.current,
         value: innerValue.current,
         onChange: changeHandler,
-        onInput: () => setOpen(true),
-        onClick: () => setOpen(true),
         onFocus: () => setFocused(true),
         onBlur: () => setFocused(false)
     });
@@ -81,7 +85,8 @@ export const Autocomplete = memo(({ children, loading, options, loadOptions, pri
             placement: 'bottom',
             variant: 'collapse',
             trigger: false,
-            content: (_jsx(OptionsBase, { onToggleSelected: optionSelectHandler, loading: innerLoading.current, options: actualOptions, labelKey: labelKey, primaryKey: primaryKey, children: children }))
+            animation: false,
+            content: (_jsx(OptionsBase, { onToggleSelected: optionSelectHandler, loading: innerLoading.current, options: actualOptions, labelKey: labelKey, primaryKey: primaryKey, searchValue: innerValue.current, _optionsAlreadyFilter: true, children: children }))
         }, popperProps, {
             css: popperStyle,
             open: open.current,

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

@@ -39,9 +39,9 @@ export const SearchResult = memo(({ primaryKey, labelKey, childrenKey, searchTok
         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/esm/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/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/inputBase/inputBase.style.js

@@ -74,7 +74,7 @@ export 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/esm/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/esm/components/optionsBase/filterOptions.js

@@ -0,0 +1,33 @@
+import { Children, isValidElement, useMemo } from 'react';
+export function useFilterOptions({ searchValue, options, children, filterPredicate, labelKey = 'label', searchTokenKey = 'searchToken', _optionsAlreadyFilter }) {
+    return useMemo(() => {
+        if (_optionsAlreadyFilter) {
+            return options || Children.toArray(children);
+        }
+        const trimmedSearchValue = searchValue?.trim();
+        if (!trimmedSearchValue) {
+            return options || 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)
+            : Children.toArray(children).filter((c, index) => {
+                return isValidElement(c) && filterFn(c.props, index);
+            });
+    }, [searchValue, filterPredicate, options, children, labelKey, searchTokenKey, _optionsAlreadyFilter]);
+}

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { useMemo, memo, Children, isValidElement, cloneElement, useRef } from 'react';
+import { useMemo, memo, isValidElement, cloneElement, useRef } from 'react';
 import { Highlight } from '../highlight';
 import { MenuItem } from '../menuItem';
 import { Placeholder } from '../placeholder';
@@ -7,39 +7,14 @@ import { clsx, isSelected, mergeComponentProps, useKeyboard, useSync } from '../
 import { classes, style } from './optionsBase.style';
 import { Loading } from '../loading';
 import { usePopperContext, useScrollToTarget } from '../popper';
+import { useFilterOptions } from './filterOptions';
 export const OptionsBase = memo(({ 
 // 共享属性
 showCheckbox, loading, options, children, labelKey = 'label', primaryKey = 'value', searchTokenKey = 'searchToken', filterPredicate, 
 // 以下为非共享属性
-searchValue, selectedValue, onToggleSelected, ...props }) => {
+searchValue, selectedValue, onToggleSelected, _optionsAlreadyFilter, ...props }) => {
     const { open, setOpen } = usePopperContext();
-    const filteredOptions = useMemo(() => {
-        const trimmedSearchValue = searchValue?.trim();
-        if (!trimmedSearchValue) {
-            return options || 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)
-            : Children.toArray(children).filter((c, index) => {
-                return isValidElement(c) && filterFn(c.props, index);
-            });
-    }, [searchValue, filterPredicate, options, children, labelKey, searchTokenKey]);
+    const filteredOptions = useFilterOptions({ searchValue, filterPredicate, options, children, labelKey, searchTokenKey, _optionsAlreadyFilter });
     /**
      * ------------------------------------------------------------------
      * 键盘控制

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

@@ -19,7 +19,7 @@ const getAttemptOrder = (placement) => {
     }
     return order;
 };
-export 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 }) {
+export 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 } = useTheme();
     offset ??= spacing[2];
     useImperativeHandle(popperRef, () => {
@@ -52,6 +52,8 @@ export function Popper({ ref, popperRef, anchorElement, container, effectContain
         if (newOpen || openHolding.current === 0) {
             _setInnerOpen(newOpen);
         }
+        // 不渲染动画时，需要手动触发onTransitionEnd
+        !animation && transitionEndHandler();
     };
     const { onChildrenOpenChange: tellParentOpenChange } = usePopperContext();
     useUpdateEffect(() => {
@@ -82,6 +84,9 @@ export function Popper({ ref, popperRef, anchorElement, container, effectContain
     const animating = useRef(false);
     const onTransitionEnd = (e) => {
         props.onTransitionEnd?.(e);
+        transitionEndHandler();
+    };
+    const transitionEndHandler = () => {
         onOpenChangeEnd?.(innerOpen.current);
         if (forceRender === false && !innerOpen.current) {
             renderedOnce.current = false;
@@ -538,5 +543,5 @@ export function Popper({ ref, popperRef, anchorElement, container, effectContain
                             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 }) }) }), 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: _jsx(PopperContext, { value: contextValue, children: content }) }) }), containerEl.current)] }));
 }

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

@@ -16,7 +16,10 @@ export const style = defineCss(theme => {
                 left: 0;
                 z-index: ${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/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();
 }
 /**
  * 拼接元素的类名
@@ -387,11 +373,12 @@ export 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;
                         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.144",
+  "version": "0.0.146",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",
@@ -20,9 +20,6 @@
     "url": "https://github.com/canlooks/canui/issues",
     "email": "canlooks@gmail.com"
   },
-  "bin": {
-    "can-ui-doc": "documentation/bootstrap.mjs"
-  },
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",

package/documentation/bootstrap.mjs

@@ -1,8 +0,0 @@
-#!/usr/bin/env node
-import { preview } from 'vite';
-import inlineConfig from './vite.config.mjs';
-(async () => {
-    const server = await preview(inlineConfig);
-    server.printUrls();
-    server.bindCLIShortcuts({ print: true });
-})();