@canlooks/can-ui 0.0.70 → 0.0.72

package/dist/cjs/extensions/reactiveForm/reactiveFormItem.d.ts

@@ -0,0 +1,7 @@
+import { ModelProps } from '@canlooks/reactive/react';
+import { FormItemProps } from '../../components/form';
+import { ReactElement } from 'react';
+export interface ReactiveFormItemProps<I = any> extends Omit<ModelProps, 'children'>, Omit<FormItemProps<I>, 'initialValue' | 'dependencies'> {
+    dependencies?(): any;
+}
+export declare const ReactiveFormItem: <I = any>(props: ReactiveFormItemProps<I>) => ReactElement;

package/dist/cjs/extensions/reactiveForm/reactiveFormItem.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactiveFormItem = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@canlooks/reactive/react");
+const form_1 = require("../../components/form");
+const react_2 = require("react");
+const utils_1 = require("../../utils");
+const reactiveForm_1 = require("./reactiveForm");
+exports.ReactiveFormItem = (0, react_1.RC)(({ refer, postValue, dependencies, ...props }) => {
+    if (refer && (typeof props.children === 'function' || (0, react_2.isValidElement)(props.children))) {
+        return ((0, jsx_runtime_1.jsx)(react_1.Model, { refer: refer, postValue: postValue, children: (0, jsx_runtime_1.jsx)(InnerFormItem, { ...props, dependencies: dependencies }) }));
+    }
+    return (0, jsx_runtime_1.jsx)(form_1.FormItem, { ...props });
+});
+function InnerFormItem({ dependencies, checked, value, onChange, ...props }) {
+    const formItemRef = (0, react_2.useRef)(null);
+    (0, react_1.useReactor)(() => dependencies?.(), () => {
+        formItemRef.current.validate().then();
+    });
+    const context = (0, reactiveForm_1.useReactiveFormContext)();
+    const fieldProps = {
+        checked,
+        value,
+        onChange(e) {
+            onChange?.(e);
+            context.onChange?.();
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(form_1.FormItem, { ...props, ref: (0, utils_1.cloneRef)(formItemRef, props.ref), _fieldValue: checked ?? value, children: (_, styleProps, key) => {
+            return typeof props.children === 'function'
+                ? props.children(fieldProps, styleProps, key)
+                : (0, react_2.cloneElement)(props.children, {
+                    key,
+                    ...fieldProps,
+                    ...styleProps
+                });
+        } }));
+}

package/dist/cjs/index.d.ts

@@ -67,6 +67,7 @@ export * from './components/segmented';
 export * from './components/select';
 export * from './components/selectedList';
 export * from './components/selectionContext';
+export * from './components/serialInput';
 export * from './components/skeleton';
 export * from './components/slidableActions';
 export * from './components/slider';

package/dist/cjs/index.js

@@ -70,6 +70,7 @@ tslib_1.__exportStar(require("./components/segmented"), exports);
 tslib_1.__exportStar(require("./components/select"), exports);
 tslib_1.__exportStar(require("./components/selectedList"), exports);
 tslib_1.__exportStar(require("./components/selectionContext"), exports);
+tslib_1.__exportStar(require("./components/serialInput"), exports);
 tslib_1.__exportStar(require("./components/skeleton"), exports);
 tslib_1.__exportStar(require("./components/slidableActions"), exports);
 tslib_1.__exportStar(require("./components/slider"), exports);

package/dist/cjs/types.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithRef, ElementType, JSX, ReactElement } from 'react';
+import { ComponentProps, ComponentPropsWithRef, ElementType, ReactElement } from 'react';
 /**
  * ----------------------------------------------------------------------------------
  * Helpers
@@ -35,7 +35,7 @@ export type ResponsiveProp<T = number> = T | ResponsiveValue<T>;
  * ----------------------------------------------------------------------------------
  * Override props
  */
-export type DivProps = JSX.IntrinsicElements['div'];
+export type DivProps = ComponentProps<'div'>;
 export type MergeProps<P, OverrideProps> = P & Omit<OverrideProps, keyof P>;
 export type OverridableProps<P, C extends ElementType> = {
     component?: C;

package/dist/cjs/utils/curd.js

@@ -122,8 +122,11 @@ function useCurdColumns({ columns, columnConfigurable }) {
             if (!(0, utils_1.isUnset)(col._key) && visibleSet.has(col._key)) {
                 const symbolArr = symbolBoundToNext.current.get(col) || [];
                 // 移除DataGrid不需要的属性
-                const { filter, form, ...c } = col;
-                return [...symbolArr, { ...c }];
+                const { filterInline, filter, form, ...c } = col;
+                return [
+                    ...symbolArr,
+                    { ...c, filter: filterInline }
+                ];
             }
             return [];
         });

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

@@ -1,16 +1,17 @@
 import { Id, Obj } from '../types';
 import { ColumnType, DataGridProps, RowType } from '../components/dataGrid';
+import { CurdColumn } from '../components/curd';
 /**
  * 为列添加key
  * @param col
  * @param index
  */
-export declare function setDefaultColumnKey<R extends Obj>(col: Pick<ColumnType<R>, 'key' | 'field'>, index: number): string | number;
+export declare function setDefaultColumnKey<R extends Obj>(col: Pick<ColumnType<R>, 'key' | 'field'>, index: number): Id;
 /**
  * 索引列
  * @param columns
  */
-export declare function useColumnMap<C extends ColumnType<any>>(columns?: (C | symbol)[]): Map<Id, C>;
+export declare function useColumnMap<C extends ColumnType<any> | CurdColumn<any>>(columns?: (C | symbol)[]): Map<Id, C>;
 /**
  * 统一处理DataGrid列
  * @param param0

package/dist/cjs/utils/hooks.js

@@ -16,11 +16,11 @@ const utils_1 = require("./utils");
  * @param value
  */
 function usePrev(value) {
-    const v = (0, react_1.useRef)(null);
+    const prev = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
-        v.current = value;
+        prev.current = value;
     });
-    return v.current;
+    return prev.current;
 }
 /**
  * 将某个值使用ref同步，主要用于对付组件的闭包问题

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

@@ -1,6 +1,4 @@
 export * from './bezier';
-export * from './curd';
-export * from './dataGrid';
 export * from './dnd';
 export * from './form';
 export * from './gesture';
@@ -10,3 +8,5 @@ export * from './polyfill';
 export * from './style';
 export * from './tree';
 export * from './utils';
+export * from './dataGrid';
+export * from './curd';

package/dist/cjs/utils/index.js

@@ -2,8 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./bezier"), exports);
-tslib_1.__exportStar(require("./curd"), exports);
-tslib_1.__exportStar(require("./dataGrid"), exports);
 tslib_1.__exportStar(require("./dnd"), exports);
 tslib_1.__exportStar(require("./form"), exports);
 tslib_1.__exportStar(require("./gesture"), exports);
@@ -13,3 +11,5 @@ tslib_1.__exportStar(require("./polyfill"), exports);
 tslib_1.__exportStar(require("./style"), exports);
 tslib_1.__exportStar(require("./tree"), exports);
 tslib_1.__exportStar(require("./utils"), exports);
+tslib_1.__exportStar(require("./dataGrid"), exports);
+tslib_1.__exportStar(require("./curd"), exports);

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

@@ -1,5 +1,5 @@
-import { Ref, ReactNode } from 'react';
-import { Id } from '../types';
+import { Ref, ReactNode, ElementType, ComponentProps } from 'react';
+import { Id, Obj } from '../types';
 /**
  * 生成最简易的随机ID
  * @param namespace
@@ -22,10 +22,11 @@ export declare function clsx(...classes: any[]): string;
  */
 export declare function humpToSegmented(str: string, separator?: string): string;
 /**
- * 将某个值统一转换成数组或undefined
+ * 将某个值统一转换成数组或null
  * @param value
  */
-export declare function toArray<T>(value: undefined | null | T | T[]): T[] | null;
+export declare function toArray(value?: undefined | null): null;
+export declare function toArray<T>(value: T): T extends any[] ? T : T extends undefined | null ? null : T[];
 /**
  * 判断某个值是否为已选中
  * @param value 需要判断的值
@@ -102,11 +103,11 @@ export declare function fixInputNumber(value: string, { min, max, precision }: F
  */
 export declare function isChildOf(target: Element | null, container?: Element | null): boolean;
 /**
- * 从某个元素开始，一直向上查找，返回true表示找到，会停止递归
+ * 从某个元素开始，一直向上查找
  * @param target
- * @param callback
+ * @param callback 返回true表示找到，会停止递归
  */
-export declare function findPredecessor(target: Element, callback: (el: Element) => any): HTMLElement | null;
+export declare function findPredecessor(target: Element, callback: (parent: HTMLElement) => any): HTMLElement | null;
 /**
  * 监听某个元素的所有祖先元素的滚动事件
  * @param target
@@ -123,12 +124,19 @@ export declare function range(value: number, min?: number, max?: number): number
  * @param obj
  * @param keyPath
  * @param setValue
- * @param separator
+ * @param separator 分隔符，默认为`.`
  */
-export declare function queryDeep<T extends object = any, U = any>(obj: T, keyPath: Id | Id[], setValue?: (oldValue: any) => U, separator?: string): U;
+export declare function queryDeep<T = any>(obj: any, keyPath: PropertyKey | PropertyKey[], setValue?: (oldValue: any) => T, separator?: string): T;
+export declare function queryDeep<T = any>(obj: any, keyPath: PropertyKey | PropertyKey[], separator?: string, setValue?: (oldValue: any) => T): T;
 /**
  * 过滤对象中值为undefined属性
  * @param obj
  * @param undefinedValue 可传入该值，用于替换undefined以删除其他属性
  */
 export declare function filterProperties<T extends Record<string, any>>(obj: T, undefinedValue?: any): T;
+/**
+ * 合并属性
+ */
+type ExtendableProps<T> = (T extends ElementType ? ComponentProps<T> : T) & Obj;
+export declare function mergeComponentProps<T>(...props: (Partial<ExtendableProps<T>> | undefined)[]): ExtendableProps<T>;
+export {};

package/dist/cjs/utils/utils.js

@@ -22,6 +22,7 @@ exports.listenAllPredecessorsScroll = listenAllPredecessorsScroll;
 exports.range = range;
 exports.queryDeep = queryDeep;
 exports.filterProperties = filterProperties;
+exports.mergeComponentProps = mergeComponentProps;
 /**
  * 生成最简易的随机ID
  * @param namespace
@@ -79,10 +80,6 @@ function humpToSegmented(str, separator = '-') {
         return index ? separator + $1.toLowerCase() : $1;
     });
 }
-/**
- * 将某个值统一转换成数组或undefined
- * @param value
- */
 function toArray(value) {
     return isUnset(value)
         ? null
@@ -246,9 +243,9 @@ function isChildOf(target, container) {
     return false;
 }
 /**
- * 从某个元素开始，一直向上查找，返回true表示找到，会停止递归
+ * 从某个元素开始，一直向上查找
  * @param target
- * @param callback
+ * @param callback 返回true表示找到，会停止递归
  */
 function findPredecessor(target, callback) {
     while (target) {
@@ -290,18 +287,17 @@ function listenAllPredecessorsScroll(target, listener) {
 function range(value, min = -Infinity, max = Infinity) {
     return Math.max(min, Math.min(max, value));
 }
-/**
- * 对象深度查找，也可赋值
- * @param obj
- * @param keyPath
- * @param setValue
- * @param separator
- */
-function queryDeep(obj, keyPath, setValue, separator = '.') {
+function queryDeep(obj, keyPath, a, b) {
+    const setValue = typeof b === 'function' ? b
+        : typeof a === 'function' ? a
+            : void 0;
+    const separator = typeof b === 'string' ? b
+        : typeof a === 'string' ? a
+            : '.';
     if (Array.isArray(keyPath)) {
         let result = obj;
         for (let i = 0, { length } = keyPath; i < length; i++) {
-            if (typeof result !== 'object' || !result) {
+            if (typeof result !== 'object' || result === null) {
                 result = void 0;
                 break;
             }
@@ -311,7 +307,10 @@ function queryDeep(obj, keyPath, setValue, separator = '.') {
                     result[k] = setValue(result[k]);
                 }
                 else if (!(k in result)) {
-                    result[k] = typeof keyPath[i + 1] === 'number' ? [] : {};
+                    const nextKey = keyPath[i + 1];
+                    result[k] = (typeof nextKey === 'string' && isNaN(+nextKey)) || typeof nextKey === 'symbol'
+                        ? {}
+                        : [];
                 }
             }
             result = result[k];
@@ -339,3 +338,47 @@ function filterProperties(obj, undefinedValue) {
     }
     return obj;
 }
+function mergeComponentProps(...props) {
+    const { length } = props;
+    if (length <= 1) {
+        return props[0];
+    }
+    const fn = (target, source) => {
+        if (!source) {
+            return;
+        }
+        for (const p in source) {
+            if (p in target) {
+                switch (p) {
+                    case 'css':
+                        target.css = [...toArray(target.css), ...toArray(source.css)];
+                        continue;
+                    case 'ref':
+                        target.ref = cloneRef(target.ref, source.ref);
+                        continue;
+                    case 'className':
+                        target.className = clsx(target.className, source.className);
+                        continue;
+                    case 'style':
+                        target.style = { ...source.style, ...target.style };
+                        continue;
+                    default:
+                        const v = source[p];
+                        if (typeof v === 'function') {
+                            target[p] = (...args) => {
+                                target[p](...args);
+                                v(...args);
+                            };
+                            continue;
+                        }
+                }
+            }
+            target[p] = source[p];
+        }
+    };
+    const merged = { ...props[0] };
+    for (let i = 1; i < length; i++) {
+        fn(merged, props[i]);
+    }
+    return merged;
+}

package/dist/esm/components/actionSheet/actionSheet.js

@@ -2,7 +2,7 @@ import { createElement as _createElement } from "@emotion/react";
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
 import { classes, style } from './actionSheet.style';
-import { clsx, cloneRef, useControlled, useEscapeClosable } from '../../utils';
+import { clsx, useControlled, useEscapeClosable, mergeComponentProps } from '../../utils';
 import { OverlayBase } from '../overlayBase';
 import { Slide } from '../transitionBase';
 import { MenuItem } from '../menuItem';
@@ -10,22 +10,27 @@ const placementToDirection = {
     top: 'down',
     bottom: 'up'
 };
-export const ActionSheet = memo(({ ref, title, actions, placement = 'bottom', maskClosable, escapeClosable = true, onAction, onConfirm, onCancel, defaultOpen = false, open, onClose, showConfirm, confirmText = '确 定', confirmProps, showCancel = true, cancelText = '取 消', cancelProps, slideProps, ...props }) => {
+export const ActionSheet = memo(({ title, actions, placement = 'bottom', maskClosable, escapeClosable = true, onAction, onConfirm, onCancel, defaultOpen = false, open, onClose, showConfirm, confirmText = '确 定', confirmProps, showCancel = true, cancelText = '取 消', cancelProps, slideProps, ...props }) => {
     const [innerOpen, setInnerOpen] = useControlled(defaultOpen, open);
     const close = (reason) => {
         onClose?.(reason);
         setInnerOpen(false);
     };
     const overlayRef = useEscapeClosable({ escapeClosable, close }, onCancel);
-    const onMaskClick = (e) => {
-        props.onMaskClick?.(e);
+    const onMaskClick = () => {
         maskClosable && close('maskClicked');
     };
     const cancelHandler = (e) => {
         onCancel?.(e);
         close('canceled');
     };
-    return (_jsx(OverlayBase, { ...props, ref: cloneRef(ref, overlayRef), css: style, className: clsx(classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-placement": placement, children: _jsxs(Slide, { direction: placementToDirection[placement], ...slideProps, className: clsx(classes.sheet, slideProps?.className), in: innerOpen.current, children: [!!(title || showConfirm || actions?.length) &&
+    return (_jsx(OverlayBase, { ...mergeComponentProps(props, {
+            css: style,
+            ref: overlayRef,
+            className: classes.root,
+            open: innerOpen.current,
+            onMaskClick
+        }), "data-placement": placement, children: _jsxs(Slide, { direction: placementToDirection[placement], ...slideProps, className: clsx(classes.sheet, slideProps?.className), in: innerOpen.current, children: [!!(title || showConfirm || actions?.length) &&
                     _jsxs("div", { className: classes.card, children: [!!title &&
                                 _jsx("div", { className: classes.title, children: title }), showConfirm &&
                                 _jsx(MenuItem, { className: classes.action, size: "large", label: confirmText, ...confirmProps, onClick: e => {

package/dist/esm/components/alert/alert.style.d.ts

@@ -1,11 +1,11 @@
 import { ColorPropsValue } from '../../types';
 export declare const classes: {
     title: string;
-    icon: string;
     content: string;
+    close: string;
     prefix: string;
+    icon: string;
     suffix: string;
-    close: string;
     description: string;
 } & {
     root: string;

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

@@ -16,30 +16,34 @@ export class AppDialogMethods {
 }
 export const AppDialog = memo(({ methods }) => {
     const [stacks, setStacks] = useState([]);
-    const defineMethod = (type) => (props, ...args) => 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 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];
+                            });
+                        }
+                    }
+                ]);
+            });
+        };
+    };
     methods.info = defineMethod('info');
     methods.success = defineMethod('success');
     methods.warning = defineMethod('warning');

package/dist/esm/components/autocomplete/autocomplete.js

@@ -3,7 +3,7 @@ import { Children, isValidElement, memo, useCallback, useEffect, useMemo, useRef
 import { Popper } from '../popper';
 import { OptionsBase } from '../optionsBase';
 import { Input } from '../input';
-import { clsx, cloneRef, isUnset, useControlled, useDerivedState, useLoading, useSync } from '../../utils';
+import { isUnset, useControlled, useDerivedState, useLoading, useSync, mergeComponentProps } from '../../utils';
 import { classes } from './autocomplete.style';
 import { popperStyle } from '../popper/popper.style';
 export const Autocomplete = memo(({ children, loading, options, loadOptions, primaryKey = 'value', labelKey = 'label', onSelect, renderInput, popperProps, popperRef, defaultValue = '', value, onChange, ...props }) => {
@@ -50,7 +50,6 @@ export const Autocomplete = memo(({ children, loading, options, loadOptions, pri
     const setOpen = (open) => {
         if (!props.disabled && !props.readOnly && (!open || optionsMap.size)) {
             // 必须有选项才能打开下拉框
-            popperProps?.onOpenChange?.(open);
             _setOpen(open);
         }
     };
@@ -66,35 +65,30 @@ export const Autocomplete = memo(({ children, loading, options, loadOptions, pri
             currentTarget: innerInputRef.current
         }, true);
         setOpen(false);
-    }, [optionsMap]);
-    const inputProps = {
-        ...props,
-        ref: cloneRef(innerInputRef, props.ref),
-        className: clsx(classes.root, props.className),
+    }, [optionsMap, labelKey]);
+    const inputProps = mergeComponentProps(props, {
+        ref: innerInputRef,
+        className: classes.root,
         loading: innerLoading.current,
         value: innerValue.current,
         onChange: changeHandler,
-        onInput(e) {
-            props.onInput?.(e);
-            setOpen(true);
-        },
-        onClick(e) {
-            props.onClick?.(e);
-            setOpen(true);
-        },
-        onFocus(e) {
-            props.onFocus?.(e);
-            setFocused(true);
-        },
-        onBlur(e) {
-            props.onBlur?.(e);
-            setFocused(false);
-        }
-    };
-    return (_jsx(Popper, { css: popperStyle, open: open.current, placement: "bottom", variant: "collapse", trigger: false, content: _jsx(OptionsBase, { onToggleSelected: optionSelectHandler, loading: innerLoading.current, options: actualOptions, labelKey: labelKey, primaryKey: primaryKey, children: children }), ...popperProps, popperRef: popperRef, onOpenChange: setOpen, onPointerDown: e => {
-            popperProps?.onPointerDown?.(e);
-            e.preventDefault();
-        }, children: renderInput
+        onInput: () => setOpen(true),
+        onClick: () => setOpen(true),
+        onFocus: () => setFocused(true),
+        onBlur: () => setFocused(false)
+    });
+    return (_jsx(Popper, { ...mergeComponentProps({
+            placement: 'bottom',
+            variant: 'collapse',
+            trigger: false,
+            content: (_jsx(OptionsBase, { onToggleSelected: optionSelectHandler, loading: innerLoading.current, options: actualOptions, labelKey: labelKey, primaryKey: primaryKey, children: children }))
+        }, popperProps, {
+            css: popperStyle,
+            open: open.current,
+            popperRef,
+            onOpenChange: setOpen,
+            onPointerDown: e => e.preventDefault()
+        }), children: renderInput
             ? renderInput(inputProps)
             : _jsx(Input, { ...inputProps }) }));
 });

package/dist/esm/components/avatar/avatar.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, JSX } from 'react';
+import { ReactElement, ComponentProps } from 'react';
 import { ColorPropsValue, DivProps, Size } from '../../types';
 import { AvatarGroup } from './avatarGroup';
 export interface AvatarProps extends DivProps {
@@ -6,7 +6,7 @@ export interface AvatarProps extends DivProps {
     size?: Size | number | string;
     shape?: 'circular' | 'square';
     src?: string;
-    imgProps?: JSX.IntrinsicElements['img'];
+    imgProps?: ComponentProps<'img'>;
 }
 export declare function useAvatarStyle(props: Pick<AvatarProps, 'color' | 'size'>): {
     color: string;

package/dist/esm/components/avatar/avatar.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { memo, useMemo } from 'react';
 import { classes, useStyle } from './avatar.style';
-import { clsx } from '../../utils';
+import { mergeComponentProps } from '../../utils';
 import { useTheme } from '../theme';
 import { AvatarGroup } from './avatarGroup';
 export function useAvatarStyle(props) {
@@ -18,11 +18,12 @@ export function useAvatarStyle(props) {
 }
 export const Avatar = memo(({ color, size, shape = 'circular', src, imgProps, ...props }) => {
     const style = useAvatarStyle({ color, size });
-    return (_jsx("div", { ...props, css: useStyle({ color: style.color }), className: clsx(classes.root, props.className), style: {
-            width: style.size,
-            ...props.style
-        }, "data-shape": shape, children: src
-            ? _jsx("img", { src: src, alt: "", ...imgProps, className: clsx(classes.img, imgProps?.className) })
+    return (_jsx("div", { ...mergeComponentProps(props, {
+            css: useStyle({ color: style.color }),
+            className: classes.root,
+            style: { width: style.size }
+        }), "data-shape": shape, children: src
+            ? _jsx("img", { ...mergeComponentProps({ src, alt: '' }, imgProps, { className: classes.img }) })
             : props.children }));
 });
 Avatar.Group = AvatarGroup;

package/dist/esm/components/avatar/avatarGroup.js

@@ -36,5 +36,5 @@ export const AvatarGroup = memo(({ color, size, shape = 'circular', imgProps, it
         }
         return _jsxs(Avatar, { children: ["+", surplus] });
     };
-    return (_jsx("div", { ...props, css: style, className: clsx(classes.root), "data-hoverable": hoverable, children: _jsxs("div", { className: classes.wrap, children: [renderSurplusFn(), renderItems()] }) }));
+    return (_jsx("div", { ...props, css: style, className: clsx(classes.root, props.className), "data-hoverable": hoverable, children: _jsxs("div", { className: classes.wrap, children: [renderSurplusFn(), renderItems()] }) }));
 });

package/dist/esm/components/bubbleConfirm/bubbleConfirm.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Popper } from '../popper';
 import { classes, style } from './bubbleConfirm.style';
-import { clsx, useControlled, useLoading } from '../../utils';
+import { mergeComponentProps, useControlled, useLoading } from '../../utils';
 import { Button } from '../button';
 import { useTheme } from '../theme';
 import { Icon } from '../icon';
@@ -18,6 +18,13 @@ export function BubbleConfirm({ icon = _jsx(Icon, { icon: faCircleQuestion }), t
         await onConfirm?.(e);
         _setInnerOpen(false);
     }, loading);
-    return (_jsx(Popper, { trigger: "click", ...props, css: style, className: clsx(classes.root, props.className), offset: offset, open: innerOpen.current, onOpenChange: setInnerOpen, content: _jsxs("div", { className: classes.bubble, "data-show-arrow": showArrow, children: [_jsx("div", { className: classes.icon, children: icon }), _jsxs("div", { className: classes.info, children: [_jsx("div", { className: classes.title, children: title }), _jsx("div", { className: classes.content, children: props.content }), _jsx("div", { className: classes.footer, children: footer ??
-                                _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outlined", size: "small", onClick: () => setInnerOpen(false), children: "\u53D6\u6D88" }), _jsx(Button, { size: "small", loading: innerLoading.current, onClick: confirmHandler, children: "\u786E\u5B9A" })] }) })] })] }) }));
+    return (_jsx(Popper, { ...mergeComponentProps({ trigger: 'click' }, props, {
+            css: style,
+            className: classes.root,
+            offset,
+            open: innerOpen.current,
+            onOpenChange: setInnerOpen,
+            content: (_jsxs("div", { className: classes.bubble, "data-show-arrow": showArrow, children: [_jsx("div", { className: classes.icon, children: icon }), _jsxs("div", { className: classes.info, children: [_jsx("div", { className: classes.title, children: title }), _jsx("div", { className: classes.content, children: props.content }), _jsx("div", { className: classes.footer, children: footer ??
+                                    _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outlined", size: "small", onClick: () => setInnerOpen(false), children: "\u53D6\u6D88" }), _jsx(Button, { size: "small", loading: innerLoading.current, onClick: confirmHandler, children: "\u786E\u5B9A" })] }) })] })] }))
+        }) }));
 }

package/dist/esm/components/bubbleConfirm/bubbleConfirm.style.d.ts

@@ -2,8 +2,8 @@ export declare const classes: {
     info: string;
     footer: string;
     title: string;
-    icon: string;
     content: string;
+    icon: string;
     bubble: string;
 } & {
     root: string;