@canlooks/can-ui 0.0.69 → 0.0.71

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;

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

@@ -1,4 +1,4 @@
-import { Dispatch, ReactElement, ReactNode, Ref, SetStateAction, JSX } from 'react';
+import { Dispatch, ReactElement, ReactNode, Ref, SetStateAction, ComponentProps } from 'react';
 import { InputProps } from '../input';
 import { InputBaseProps } from '../inputBase';
 import { PopperProps, PopperRef } from '../popper';
@@ -7,7 +7,7 @@ import { MenuOptionType, OptionsBaseSharedProps } from '../optionsBase';
 import { Id, SelectableMultipleProps, SelectableSingleProps } from '../../types';
 export interface CascadeBaseProps<O extends MenuOptionType<V>, V extends Id = Id> extends Omit<OptionsBaseSharedProps<O>, 'filterPredicate'>, Omit<InputBaseProps<'input'>, 'children' | 'defaultValue' | 'value' | 'onChange'> {
     /** cascade内部由<input />实现 */
-    inputProps?: JSX.IntrinsicElements['input'];
+    inputProps?: ComponentProps<'input'>;
     defaultOpen?: boolean;
     open?: boolean;
     onOpenChange?(open: boolean): void;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { createContext, memo, useContext, useDeferredValue, useEffect, useMemo, useState } from 'react';
-import { useControlled, useLoading, useKeyboard, joinNodes, clsx, cloneRef, toArray } from '../../utils';
+import { useControlled, useLoading, useKeyboard, joinNodes, clsx, toArray, mergeComponentProps } from '../../utils';
 import { Input } from '../input';
 import { InputBase } from '../inputBase';
 import { Popper } from '../popper';
@@ -33,12 +33,7 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
      * 打开的弹框与面板
      */
     const [innerOpen, setInnerOpen] = useControlled(defaultOpen, open, onOpenChange);
-    const openChangeHandler = (open) => {
-        popperProps?.onOpenChange?.(open);
-        setInnerOpen(open);
-    };
     const onOpenChangeEnd = (open) => {
-        popperProps?.onOpenChangeEnd?.(open);
         // 关闭动画结束后清空搜索框
         searchable && !open && setInnerSearchValue('');
     };
@@ -113,8 +108,7 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
         clearable,
         integration
     });
-    const clearHandler = () => {
-        props.onClear?.();
+    const onClear = () => {
         setInnerValue([]);
         setOpenedPanels([]);
     };
@@ -191,19 +185,37 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
             return (_jsx("div", { className: classes.backfillWrap, children: joinNodes(pathifiedValue.current, v => optionsMap.get(v)?.[labelKey] ?? v.toString()) }));
         }
     };
-    return (_jsx(Popper, { css: cascadePopperStyle, open: innerOpen.current, placement: "bottomLeft", trigger: ['click', 'enter'], disabled: props.disabled, content: _jsxs("div", { children: [searchable &&
-                    _jsx(Input, { prefix: _jsx(Icon, { icon: faMagnifyingGlass }), placeholder: "\u641C\u7D22", value: innerSearchValue.current, ...searchInputProps, className: clsx(classes.searchInput, searchInputProps?.className), onChange: e => {
-                            searchInputProps?.onChange?.(e);
-                            setInnerSearchValue(e.target.value);
-                        } }), deferredSearchValue
-                    ? _jsx(SearchResult, { primaryKey: primaryKey, labelKey: labelKey, childrenKey: childrenKey, searchTokenKey: searchTokenKey, options: actualOptions, searchValue: deferredSearchValue, onSelect: toggleSelected, selectionStatus: selectionStatus })
-                    : _jsx("div", { className: classes.panelContainer, children: _jsx(CascadeContext, { value: {
-                                innerLoading: innerLoading.current, loadingOption, multiple, showCheckbox,
-                                primaryKey, labelKey, childrenKey, pathifiedValue: pathifiedValue.current,
-                                selectionStatus, optionsMap,
-                                openedPanels, onOptionClick, onCheckboxClick,
-                                verticalIndex: verticalIndex.current, setVerticalIndex, horizontalIndex: horizontalIndex.current
-                            }, children: _jsx(CascadePanel, { options: actualOptions }) }) })] }), ...popperProps, popperRef: popperRef, onOpenChange: openChangeHandler, onOpenChangeEnd: onOpenChangeEnd, children: _jsx(InputBase, { ...props, css: style, className: clsx(classes.root, props.className), onClear: clearHandler, clearable: clearable, value: pathifiedValue.current, "data-focused": innerOpen.current, loading: innerLoading.current, children: ({ ref, ...rest }) => _jsxs("div", { className: classes.contentWrap, children: [!pathifiedValue.current?.length
+    return (_jsx(Popper, { ...mergeComponentProps({
+            css: cascadePopperStyle,
+            open: innerOpen.current,
+            placement: 'bottomLeft',
+            trigger: ['click', 'enter'],
+            disabled: props.disabled,
+            content: (_jsxs("div", { children: [searchable &&
+                        _jsx(Input, { prefix: _jsx(Icon, { icon: faMagnifyingGlass }), placeholder: "\u641C\u7D22", value: innerSearchValue.current, ...searchInputProps, className: clsx(classes.searchInput, searchInputProps?.className), onChange: e => {
+                                searchInputProps?.onChange?.(e);
+                                setInnerSearchValue(e.target.value);
+                            } }), deferredSearchValue
+                        ? _jsx(SearchResult, { primaryKey: primaryKey, labelKey: labelKey, childrenKey: childrenKey, searchTokenKey: searchTokenKey, options: actualOptions, searchValue: deferredSearchValue, onSelect: toggleSelected, selectionStatus: selectionStatus })
+                        : _jsx("div", { className: classes.panelContainer, children: _jsx(CascadeContext, { value: {
+                                    innerLoading: innerLoading.current, loadingOption, multiple, showCheckbox,
+                                    primaryKey, labelKey, childrenKey, pathifiedValue: pathifiedValue.current,
+                                    selectionStatus, optionsMap,
+                                    openedPanels, onOptionClick, onCheckboxClick,
+                                    verticalIndex: verticalIndex.current, setVerticalIndex, horizontalIndex: horizontalIndex.current
+                                }, children: _jsx(CascadePanel, { options: actualOptions }) }) })] }))
+        }, popperProps, {
+            popperRef,
+            onOpenChange: setInnerOpen,
+            onOpenChangeEnd
+        }), children: _jsx(InputBase, { ...mergeComponentProps(props, {
+                css: style,
+                className: classes.root,
+                onClear,
+                clearable,
+                value: pathifiedValue.current,
+                loading: innerLoading.current
+            }), "data-focused": innerOpen.current, children: inputBaseProps => _jsxs("div", { className: classes.contentWrap, children: [!pathifiedValue.current?.length
                         ? _jsx("div", { className: classes.placeholder, children: props.placeholder })
-                        : _jsx("div", { className: classes.backfill, children: renderBackfillFn() }), _jsx("input", { ...rest, ...inputProps, ref: cloneRef(ref, inputProps?.ref), "data-hidden": "true" }), _jsx("div", { className: classes.arrow, "data-open": innerOpen.current, children: _jsx(Icon, { icon: faCaretDown }) })] }) }) }));
+                        : _jsx("div", { className: classes.backfill, children: renderBackfillFn() }), _jsx("input", { ...mergeComponentProps(inputBaseProps, inputProps), "data-hidden": "true" }), _jsx("div", { className: classes.arrow, "data-open": innerOpen.current, children: _jsx(Icon, { icon: faCaretDown }) })] }) }) }));
 });

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

@@ -6,7 +6,7 @@ import { Placeholder } from '../placeholder';
 import { classes } from './cascade.style';
 import { Collapse } from '../transitionBase';
 import { useCascadeContext } from './cascade';
-import { isUnset } from '../../utils';
+import { isUnset, mergeComponentProps } from '../../utils';
 import { Icon } from '../icon';
 import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight';
 export function CascadePanel({ options, index = 0 }) {
@@ -36,20 +36,30 @@ export function CascadePanel({ options, index = 0 }) {
             const status = selectionStatus?.get(optVal);
             const opened = openedPanels[index] === optVal;
             const hasChildren = !!opt[childrenKey]?.length;
-            return (_jsx(MenuItem, { showCheckbox: showCheckbox, ...opt, checkboxProps: {
-                    ...opt?.checkboxProps,
-                    ...showCheckbox && {
-                        indeterminate: status === 1,
-                        checked: status === 2,
-                        async onClick(e) {
-                            opt.onClick?.(e);
-                            e.stopPropagation();
-                            onCheckboxClick(opt, index);
+            return (_jsx(MenuItem, { ...mergeComponentProps({
+                    showCheckbox,
+                    key: optVal
+                }, opt, {
+                    checkboxProps: mergeComponentProps(opt?.checkboxProps, showCheckbox
+                        ? {
+                            indeterminate: status === 1,
+                            checked: status === 2,
+                            async onClick(e) {
+                                e.stopPropagation();
+                                onCheckboxClick(opt, index);
+                            }
                         }
-                    }
-                }, selected: isSelected(optVal) || (opened && hasChildren), focused: horizontalIndex === index && verticalIndex === i, label: opt[labelKey], onClick: () => onOptionClick(opt, index), onPointerEnter: onPointerEnter, suffix: innerLoading && loadingOption === optVal
-                    ? _jsx(LoadingIndicator, {})
-                    : hasChildren && _jsx(Icon, { icon: faChevronRight }), children: null }, optVal));
+                        : void 0),
+                    selected: isSelected(optVal) || (opened && hasChildren),
+                    focused: horizontalIndex === index && verticalIndex === i,
+                    label: opt[labelKey],
+                    onClick: () => onOptionClick(opt, index),
+                    onPointerEnter,
+                    suffix: innerLoading && loadingOption === optVal
+                        ? _jsx(LoadingIndicator, {})
+                        : hasChildren && _jsx(Icon, { icon: faChevronRight }),
+                    children: null
+                }) }));
         });
     };
     const nextOptions = optionsMap.get(openedPanels[index])?.[childrenKey];

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

@@ -1,7 +1,7 @@
-import React, { ReactNode, JSX } from 'react';
+import React, { ReactNode, ComponentProps } from 'react';
 import { ColorPropsValue, DivProps, Id, Size } from '../../types';
 export interface CheckboxBaseProps extends DivProps {
-    inputProps?: JSX.IntrinsicElements['input'];
+    inputProps?: ComponentProps<'input'>;
     /** @private 内部使用 */
     _type: 'checkbox' | 'radio';
     size?: Size;

package/dist/esm/components/checkboxBase/checkboxBase.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo, useRef } from 'react';
-import { clsx, cloneRef, useControlled, useTouchSpread } from '../../utils';
+import { clsx, useControlled, useTouchSpread, mergeComponentProps } from '../../utils';
 import { classes, useStyle } from './checkboxBase.style';
 import { useCheckboxBaseGroupContext } from '../checkboxBaseGroup';
 import { Icon } from '../icon';
@@ -28,7 +28,7 @@ export const CheckboxBase = memo(({ inputProps, _type, size, color, label, value
         onChange?.(e);
         setInnerChecked(newChecked);
     };
-    const inputKeydown = (e) => {
+    const onKeyDown = (e) => {
         inputProps?.onKeyDown?.(e);
         e.key === 'Enter' && clickHandler(e);
     };
@@ -41,5 +41,12 @@ export const CheckboxBase = memo(({ inputProps, _type, size, color, label, value
                 : _jsx("div", { ref: checkboxRef, className: `${classes.checkbox} ${classes.radio}`, children: innerChecked.current
                         ? _jsx("div", { className: classes.radioChecked })
                         : null }), !!label &&
-                _jsx("div", { className: classes.label, children: label }), _jsx("input", { type: _type, disabled: disabled, readOnly: readOnly, ...inputProps, ref: cloneRef(innerInputRef, inputProps?.ref), className: clsx(classes.input, inputProps?.className), onKeyDown: inputKeydown })] }));
+                _jsx("div", { className: classes.label, children: label }), _jsx("input", { ...mergeComponentProps({
+                    type: _type,
+                    disabled,
+                    readOnly,
+                    ref: innerInputRef,
+                    className: classes.input,
+                    onKeyDown
+                }, inputProps) })] }));
 });

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

@@ -3,8 +3,8 @@ export declare const classes: {
     input: string;
     label: string;
     icon: string;
-    checkbox: string;
     radio: string;
+    checkbox: string;
     radioChecked: string;
     indeterminate: string;
 } & {

package/dist/esm/components/checkboxBaseGroup/checkboxBaseGroup.js

@@ -7,20 +7,20 @@ import { classes } from './checkboxBaseGroup.style';
 import { Checkbox } from '../checkbox';
 import { Radio } from '../radio';
 import { useTheme } from '../theme';
-import { useShallowSelection } from '../selectionContext';
+import { useFlatSelection } from '../selectionContext';
 const CheckboxBaseGroupContext = createContext({});
 export function useCheckboxBaseGroupContext() {
     return useContext(CheckboxBaseGroupContext);
 }
 export const CheckboxBaseGroup = (({ size, color, items, primaryKey = 'value', multiple, defaultValue, value, onChange, ...props }) => {
     const { spacing } = useTheme();
-    const [innerValue, toggleSelected] = useShallowSelection({ multiple, defaultValue, value, onChange });
+    const [innerValue, toggleSelected] = useFlatSelection({ multiple, defaultValue, value, onChange });
     const renderItems = () => {
         if (items) {
             return items.map((p, i) => {
                 const Component = multiple ? Checkbox : Radio;
                 const itemValue = p[primaryKey];
-                return (_createElement(Component, { ...p, key: p.key ?? itemValue ?? i, size: p.size ?? size, color: p.color ?? color, checked: isSelected(itemValue, innerValue), onChange: e => {
+                return (_createElement(Component, { size: size, color: color, ...p, key: p.key ?? itemValue ?? i, checked: isSelected(itemValue, innerValue), onChange: e => {
                         p.onChange?.(e);
                         toggleSelected(itemValue);
                     } }));