@canlooks/can-ui 0.0.69 → 0.0.71

package/dist/cjs/components/actionSheet/actionSheet.js

@@ -13,22 +13,27 @@ const placementToDirection = {
     top: 'down',
     bottom: 'up'
 };
-exports.ActionSheet = (0, react_2.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 }) => {
+exports.ActionSheet = (0, react_2.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] = (0, utils_1.useControlled)(defaultOpen, open);
     const close = (reason) => {
         onClose?.(reason);
         setInnerOpen(false);
     };
     const overlayRef = (0, utils_1.useEscapeClosable)({ escapeClosable, close }, onCancel);
-    const onMaskClick = (e) => {
-        props.onMaskClick?.(e);
+    const onMaskClick = () => {
         maskClosable && close('maskClicked');
     };
     const cancelHandler = (e) => {
         onCancel?.(e);
         close('canceled');
     };
-    return ((0, jsx_runtime_1.jsx)(overlayBase_1.OverlayBase, { ...props, ref: (0, utils_1.cloneRef)(ref, overlayRef), css: actionSheet_style_1.style, className: (0, utils_1.clsx)(actionSheet_style_1.classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-placement": placement, children: (0, jsx_runtime_1.jsxs)(transitionBase_1.Slide, { direction: placementToDirection[placement], ...slideProps, className: (0, utils_1.clsx)(actionSheet_style_1.classes.sheet, slideProps?.className), in: innerOpen.current, children: [!!(title || showConfirm || actions?.length) &&
+    return ((0, jsx_runtime_1.jsx)(overlayBase_1.OverlayBase, { ...(0, utils_1.mergeComponentProps)(props, {
+            css: actionSheet_style_1.style,
+            ref: overlayRef,
+            className: actionSheet_style_1.classes.root,
+            open: innerOpen.current,
+            onMaskClick
+        }), "data-placement": placement, children: (0, jsx_runtime_1.jsxs)(transitionBase_1.Slide, { direction: placementToDirection[placement], ...slideProps, className: (0, utils_1.clsx)(actionSheet_style_1.classes.sheet, slideProps?.className), in: innerOpen.current, children: [!!(title || showConfirm || actions?.length) &&
                     (0, jsx_runtime_1.jsxs)("div", { className: actionSheet_style_1.classes.card, children: [!!title &&
                                 (0, jsx_runtime_1.jsx)("div", { className: actionSheet_style_1.classes.title, children: title }), showConfirm &&
                                 (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { className: actionSheet_style_1.classes.action, size: "large", label: confirmText, ...confirmProps, onClick: e => {

package/dist/cjs/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/cjs/components/app/appDialog.js

@@ -20,30 +20,34 @@ class AppDialogMethods {
 exports.AppDialogMethods = AppDialogMethods;
 exports.AppDialog = (0, react_1.memo)(({ methods }) => {
     const [stacks, setStacks] = (0, react_1.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/cjs/components/autocomplete/autocomplete.js

@@ -53,7 +53,6 @@ exports.Autocomplete = (0, react_1.memo)(({ children, loading, options, loadOpti
     const setOpen = (open) => {
         if (!props.disabled && !props.readOnly && (!open || optionsMap.size)) {
             // 必须有选项才能打开下拉框
-            popperProps?.onOpenChange?.(open);
             _setOpen(open);
         }
     };
@@ -69,35 +68,30 @@ exports.Autocomplete = (0, react_1.memo)(({ children, loading, options, loadOpti
             currentTarget: innerInputRef.current
         }, true);
         setOpen(false);
-    }, [optionsMap]);
-    const inputProps = {
-        ...props,
-        ref: (0, utils_1.cloneRef)(innerInputRef, props.ref),
-        className: (0, utils_1.clsx)(autocomplete_style_1.classes.root, props.className),
+    }, [optionsMap, labelKey]);
+    const inputProps = (0, utils_1.mergeComponentProps)(props, {
+        ref: innerInputRef,
+        className: autocomplete_style_1.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 ((0, jsx_runtime_1.jsx)(popper_1.Popper, { css: popper_style_1.popperStyle, open: open.current, placement: "bottom", variant: "collapse", trigger: false, content: (0, jsx_runtime_1.jsx)(optionsBase_1.OptionsBase, { onToggleSelected: optionSelectHandler, loading: innerLoading.current, options: actualOptions, labelKey: labelKey, primaryKey: primaryKey, children: children }), ...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 ((0, jsx_runtime_1.jsx)(popper_1.Popper, { ...(0, utils_1.mergeComponentProps)({
+            placement: 'bottom',
+            variant: 'collapse',
+            trigger: false,
+            content: ((0, jsx_runtime_1.jsx)(optionsBase_1.OptionsBase, { onToggleSelected: optionSelectHandler, loading: innerLoading.current, options: actualOptions, labelKey: labelKey, primaryKey: primaryKey, children: children }))
+        }, popperProps, {
+            css: popper_style_1.popperStyle,
+            open: open.current,
+            popperRef,
+            onOpenChange: setOpen,
+            onPointerDown: e => e.preventDefault()
+        }), children: renderInput
             ? renderInput(inputProps)
             : (0, jsx_runtime_1.jsx)(input_1.Input, { ...inputProps }) }));
 });

package/dist/cjs/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/cjs/components/avatar/avatar.js

@@ -22,11 +22,12 @@ function useAvatarStyle(props) {
 }
 exports.Avatar = (0, react_1.memo)(({ color, size, shape = 'circular', src, imgProps, ...props }) => {
     const style = useAvatarStyle({ color, size });
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: (0, avatar_style_1.useStyle)({ color: style.color }), className: (0, utils_1.clsx)(avatar_style_1.classes.root, props.className), style: {
-            width: style.size,
-            ...props.style
-        }, "data-shape": shape, children: src
-            ? (0, jsx_runtime_1.jsx)("img", { src: src, alt: "", ...imgProps, className: (0, utils_1.clsx)(avatar_style_1.classes.img, imgProps?.className) })
+    return ((0, jsx_runtime_1.jsx)("div", { ...(0, utils_1.mergeComponentProps)(props, {
+            css: (0, avatar_style_1.useStyle)({ color: style.color }),
+            className: avatar_style_1.classes.root,
+            style: { width: style.size }
+        }), "data-shape": shape, children: src
+            ? (0, jsx_runtime_1.jsx)("img", { ...(0, utils_1.mergeComponentProps)({ src, alt: '' }, imgProps, { className: avatar_style_1.classes.img }) })
             : props.children }));
 });
 exports.Avatar.Group = avatarGroup_1.AvatarGroup;

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

@@ -39,5 +39,5 @@ exports.AvatarGroup = (0, react_2.memo)(({ color, size, shape = 'circular', imgP
         }
         return (0, jsx_runtime_1.jsxs)(avatar_1.Avatar, { children: ["+", surplus] });
     };
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: avatarGroup_style_1.style, className: (0, utils_1.clsx)(avatarGroup_style_1.classes.root), "data-hoverable": hoverable, children: (0, jsx_runtime_1.jsxs)("div", { className: avatarGroup_style_1.classes.wrap, children: [renderSurplusFn(), renderItems()] }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: avatarGroup_style_1.style, className: (0, utils_1.clsx)(avatarGroup_style_1.classes.root, props.className), "data-hoverable": hoverable, children: (0, jsx_runtime_1.jsxs)("div", { className: avatarGroup_style_1.classes.wrap, children: [renderSurplusFn(), renderItems()] }) }));
 });

package/dist/cjs/components/bubbleConfirm/bubbleConfirm.js

@@ -21,6 +21,13 @@ function BubbleConfirm({ icon = (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faCi
         await onConfirm?.(e);
         _setInnerOpen(false);
     }, loading);
-    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { trigger: "click", ...props, css: bubbleConfirm_style_1.style, className: (0, utils_1.clsx)(bubbleConfirm_style_1.classes.root, props.className), offset: offset, open: innerOpen.current, onOpenChange: setInnerOpen, content: (0, jsx_runtime_1.jsxs)("div", { className: bubbleConfirm_style_1.classes.bubble, "data-show-arrow": showArrow, children: [(0, jsx_runtime_1.jsx)("div", { className: bubbleConfirm_style_1.classes.icon, children: icon }), (0, jsx_runtime_1.jsxs)("div", { className: bubbleConfirm_style_1.classes.info, children: [(0, jsx_runtime_1.jsx)("div", { className: bubbleConfirm_style_1.classes.title, children: title }), (0, jsx_runtime_1.jsx)("div", { className: bubbleConfirm_style_1.classes.content, children: props.content }), (0, jsx_runtime_1.jsx)("div", { className: bubbleConfirm_style_1.classes.footer, children: footer ??
-                                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outlined", size: "small", onClick: () => setInnerOpen(false), children: "\u53D6\u6D88" }), (0, jsx_runtime_1.jsx)(button_1.Button, { size: "small", loading: innerLoading.current, onClick: confirmHandler, children: "\u786E\u5B9A" })] }) })] })] }) }));
+    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { ...(0, utils_1.mergeComponentProps)({ trigger: 'click' }, props, {
+            css: bubbleConfirm_style_1.style,
+            className: bubbleConfirm_style_1.classes.root,
+            offset,
+            open: innerOpen.current,
+            onOpenChange: setInnerOpen,
+            content: ((0, jsx_runtime_1.jsxs)("div", { className: bubbleConfirm_style_1.classes.bubble, "data-show-arrow": showArrow, children: [(0, jsx_runtime_1.jsx)("div", { className: bubbleConfirm_style_1.classes.icon, children: icon }), (0, jsx_runtime_1.jsxs)("div", { className: bubbleConfirm_style_1.classes.info, children: [(0, jsx_runtime_1.jsx)("div", { className: bubbleConfirm_style_1.classes.title, children: title }), (0, jsx_runtime_1.jsx)("div", { className: bubbleConfirm_style_1.classes.content, children: props.content }), (0, jsx_runtime_1.jsx)("div", { className: bubbleConfirm_style_1.classes.footer, children: footer ??
+                                    (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outlined", size: "small", onClick: () => setInnerOpen(false), children: "\u53D6\u6D88" }), (0, jsx_runtime_1.jsx)(button_1.Button, { size: "small", loading: innerLoading.current, onClick: confirmHandler, children: "\u786E\u5B9A" })] }) })] })] }))
+        }) }));
 }

package/dist/cjs/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/cjs/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/cjs/components/cascade/cascade.js

@@ -37,12 +37,7 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
      * 打开的弹框与面板
      */
     const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open, onOpenChange);
-    const openChangeHandler = (open) => {
-        popperProps?.onOpenChange?.(open);
-        setInnerOpen(open);
-    };
     const onOpenChangeEnd = (open) => {
-        popperProps?.onOpenChangeEnd?.(open);
         // 关闭动画结束后清空搜索框
         searchable && !open && setInnerSearchValue('');
     };
@@ -117,8 +112,7 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
         clearable,
         integration
     });
-    const clearHandler = () => {
-        props.onClear?.();
+    const onClear = () => {
         setInnerValue([]);
         setOpenedPanels([]);
     };
@@ -195,19 +189,37 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
             return ((0, jsx_runtime_1.jsx)("div", { className: cascade_style_1.classes.backfillWrap, children: (0, utils_1.joinNodes)(pathifiedValue.current, v => optionsMap.get(v)?.[labelKey] ?? v.toString()) }));
         }
     };
-    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { css: cascade_style_1.cascadePopperStyle, open: innerOpen.current, placement: "bottomLeft", trigger: ['click', 'enter'], disabled: props.disabled, content: (0, jsx_runtime_1.jsxs)("div", { children: [searchable &&
-                    (0, jsx_runtime_1.jsx)(input_1.Input, { prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faMagnifyingGlass_1.faMagnifyingGlass }), placeholder: "\u641C\u7D22", value: innerSearchValue.current, ...searchInputProps, className: (0, utils_1.clsx)(cascade_style_1.classes.searchInput, searchInputProps?.className), onChange: e => {
-                            searchInputProps?.onChange?.(e);
-                            setInnerSearchValue(e.target.value);
-                        } }), deferredSearchValue
-                    ? (0, jsx_runtime_1.jsx)(searchResult_1.SearchResult, { primaryKey: primaryKey, labelKey: labelKey, childrenKey: childrenKey, searchTokenKey: searchTokenKey, options: actualOptions, searchValue: deferredSearchValue, onSelect: toggleSelected, selectionStatus: selectionStatus })
-                    : (0, jsx_runtime_1.jsx)("div", { className: cascade_style_1.classes.panelContainer, children: (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(cascadePanel_1.CascadePanel, { options: actualOptions }) }) })] }), ...popperProps, popperRef: popperRef, onOpenChange: openChangeHandler, onOpenChangeEnd: onOpenChangeEnd, children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { ...props, css: cascade_style_1.style, className: (0, utils_1.clsx)(cascade_style_1.classes.root, props.className), onClear: clearHandler, clearable: clearable, value: pathifiedValue.current, "data-focused": innerOpen.current, loading: innerLoading.current, children: ({ ref, ...rest }) => (0, jsx_runtime_1.jsxs)("div", { className: cascade_style_1.classes.contentWrap, children: [!pathifiedValue.current?.length
+    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { ...(0, utils_1.mergeComponentProps)({
+            css: cascade_style_1.cascadePopperStyle,
+            open: innerOpen.current,
+            placement: 'bottomLeft',
+            trigger: ['click', 'enter'],
+            disabled: props.disabled,
+            content: ((0, jsx_runtime_1.jsxs)("div", { children: [searchable &&
+                        (0, jsx_runtime_1.jsx)(input_1.Input, { prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faMagnifyingGlass_1.faMagnifyingGlass }), placeholder: "\u641C\u7D22", value: innerSearchValue.current, ...searchInputProps, className: (0, utils_1.clsx)(cascade_style_1.classes.searchInput, searchInputProps?.className), onChange: e => {
+                                searchInputProps?.onChange?.(e);
+                                setInnerSearchValue(e.target.value);
+                            } }), deferredSearchValue
+                        ? (0, jsx_runtime_1.jsx)(searchResult_1.SearchResult, { primaryKey: primaryKey, labelKey: labelKey, childrenKey: childrenKey, searchTokenKey: searchTokenKey, options: actualOptions, searchValue: deferredSearchValue, onSelect: toggleSelected, selectionStatus: selectionStatus })
+                        : (0, jsx_runtime_1.jsx)("div", { className: cascade_style_1.classes.panelContainer, children: (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(cascadePanel_1.CascadePanel, { options: actualOptions }) }) })] }))
+        }, popperProps, {
+            popperRef,
+            onOpenChange: setInnerOpen,
+            onOpenChangeEnd
+        }), children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { ...(0, utils_1.mergeComponentProps)(props, {
+                css: cascade_style_1.style,
+                className: cascade_style_1.classes.root,
+                onClear,
+                clearable,
+                value: pathifiedValue.current,
+                loading: innerLoading.current
+            }), "data-focused": innerOpen.current, children: inputBaseProps => (0, jsx_runtime_1.jsxs)("div", { className: cascade_style_1.classes.contentWrap, children: [!pathifiedValue.current?.length
                         ? (0, jsx_runtime_1.jsx)("div", { className: cascade_style_1.classes.placeholder, children: props.placeholder })
-                        : (0, jsx_runtime_1.jsx)("div", { className: cascade_style_1.classes.backfill, children: renderBackfillFn() }), (0, jsx_runtime_1.jsx)("input", { ...rest, ...inputProps, ref: (0, utils_1.cloneRef)(ref, inputProps?.ref), "data-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { className: cascade_style_1.classes.arrow, "data-open": innerOpen.current, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faCaretDown_1.faCaretDown }) })] }) }) }));
+                        : (0, jsx_runtime_1.jsx)("div", { className: cascade_style_1.classes.backfill, children: renderBackfillFn() }), (0, jsx_runtime_1.jsx)("input", { ...(0, utils_1.mergeComponentProps)(inputBaseProps, inputProps), "data-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { className: cascade_style_1.classes.arrow, "data-open": innerOpen.current, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faCaretDown_1.faCaretDown }) })] }) }) }));
 });

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

@@ -39,20 +39,30 @@ function CascadePanel({ options, index = 0 }) {
             const status = selectionStatus?.get(optVal);
             const opened = openedPanels[index] === optVal;
             const hasChildren = !!opt[childrenKey]?.length;
-            return ((0, jsx_runtime_1.jsx)(menuItem_1.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 ((0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { ...(0, utils_1.mergeComponentProps)({
+                    showCheckbox,
+                    key: optVal
+                }, opt, {
+                    checkboxProps: (0, utils_1.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
-                    ? (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, {})
-                    : hasChildren && (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faChevronRight_1.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
+                        ? (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, {})
+                        : hasChildren && (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faChevronRight_1.faChevronRight }),
+                    children: null
+                }) }));
         });
     };
     const nextOptions = optionsMap.get(openedPanels[index])?.[childrenKey];

package/dist/cjs/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/cjs/components/checkboxBase/checkboxBase.js

@@ -31,7 +31,7 @@ exports.CheckboxBase = (0, react_1.memo)(({ inputProps, _type, size, color, labe
         onChange?.(e);
         setInnerChecked(newChecked);
     };
-    const inputKeydown = (e) => {
+    const onKeyDown = (e) => {
         inputProps?.onKeyDown?.(e);
         e.key === 'Enter' && clickHandler(e);
     };
@@ -44,5 +44,12 @@ exports.CheckboxBase = (0, react_1.memo)(({ inputProps, _type, size, color, labe
                 : (0, jsx_runtime_1.jsx)("div", { ref: checkboxRef, className: `${checkboxBase_style_1.classes.checkbox} ${checkboxBase_style_1.classes.radio}`, children: innerChecked.current
                         ? (0, jsx_runtime_1.jsx)("div", { className: checkboxBase_style_1.classes.radioChecked })
                         : null }), !!label &&
-                (0, jsx_runtime_1.jsx)("div", { className: checkboxBase_style_1.classes.label, children: label }), (0, jsx_runtime_1.jsx)("input", { type: _type, disabled: disabled, readOnly: readOnly, ...inputProps, ref: (0, utils_1.cloneRef)(innerInputRef, inputProps?.ref), className: (0, utils_1.clsx)(checkboxBase_style_1.classes.input, inputProps?.className), onKeyDown: inputKeydown })] }));
+                (0, jsx_runtime_1.jsx)("div", { className: checkboxBase_style_1.classes.label, children: label }), (0, jsx_runtime_1.jsx)("input", { ...(0, utils_1.mergeComponentProps)({
+                    type: _type,
+                    disabled,
+                    readOnly,
+                    ref: innerInputRef,
+                    className: checkboxBase_style_1.classes.input,
+                    onKeyDown
+                }, inputProps) })] }));
 });

package/dist/cjs/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/cjs/components/checkboxBaseGroup/checkboxBaseGroup.js

@@ -18,13 +18,13 @@ function useCheckboxBaseGroupContext() {
 }
 exports.CheckboxBaseGroup = (({ size, color, items, primaryKey = 'value', multiple, defaultValue, value, onChange, ...props }) => {
     const { spacing } = (0, theme_1.useTheme)();
-    const [innerValue, toggleSelected] = (0, selectionContext_1.useShallowSelection)({ multiple, defaultValue, value, onChange });
+    const [innerValue, toggleSelected] = (0, selectionContext_1.useFlatSelection)({ multiple, defaultValue, value, onChange });
     const renderItems = () => {
         if (items) {
             return items.map((p, i) => {
                 const Component = multiple ? checkbox_1.Checkbox : radio_1.Radio;
                 const itemValue = p[primaryKey];
-                return ((0, react_1.createElement)(Component, { ...p, key: p.key ?? itemValue ?? i, size: p.size ?? size, color: p.color ?? color, checked: (0, utils_1.isSelected)(itemValue, innerValue), onChange: e => {
+                return ((0, react_1.createElement)(Component, { size: size, color: color, ...p, key: p.key ?? itemValue ?? i, checked: (0, utils_1.isSelected)(itemValue, innerValue), onChange: e => {
                         p.onChange?.(e);
                         toggleSelected(itemValue);
                     } }));

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

@@ -18,26 +18,26 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
     suppressContentEditableWarning: boolean;
     suppressHydrationWarning: boolean;
     accessKey: string;
-    autoCapitalize: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters";
+    autoCapitalize: "none" | (string & {}) | "off" | "on" | "sentences" | "words" | "characters";
     autoFocus: boolean;
     className: string;
-    contentEditable: boolean | "inherit" | "false" | "true" | "plaintext-only";
+    contentEditable: boolean | "true" | "inherit" | "false" | "plaintext-only";
     contextMenu: string;
     dir: string;
-    draggable: boolean | "false" | "true";
-    enterKeyHint: "search" | "done" | "next" | "enter" | "go" | "previous" | "send";
+    draggable: boolean | "true" | "false";
+    enterKeyHint: "search" | "done" | "send" | "next" | "enter" | "go" | "previous";
     hidden: boolean;
     id: string;
     lang: string;
     nonce: string;
     slot: string;
-    spellCheck: boolean | "false" | "true";
+    spellCheck: boolean | "true" | "false";
     style: import("react").CSSProperties;
     tabIndex: number;
     title: string;
-    translate: "yes" | "no";
+    translate: "no" | "yes";
     radioGroup: string;
-    role: "article" | "button" | "dialog" | "figure" | "form" | "img" | "link" | "main" | "menu" | "menuitem" | "option" | "search" | "table" | "switch" | "status" | (string & {}) | "none" | "checkbox" | "listbox" | "radio" | "region" | "cell" | "grid" | "row" | "listitem" | "menubar" | "progressbar" | "separator" | "tab" | "tabpanel" | "toolbar" | "tooltip" | "treeitem" | "scrollbar" | "alert" | "alertdialog" | "application" | "banner" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "directory" | "document" | "feed" | "gridcell" | "group" | "heading" | "list" | "log" | "marquee" | "math" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "note" | "presentation" | "radiogroup" | "rowgroup" | "rowheader" | "searchbox" | "slider" | "spinbutton" | "tablist" | "term" | "textbox" | "timer" | "tree" | "treegrid";
+    role: "article" | "button" | "dialog" | "figure" | "form" | "img" | "link" | "main" | "menu" | "menuitem" | "option" | "search" | "table" | "switch" | "none" | "status" | "feed" | "grid" | "heading" | "list" | "note" | "presentation" | "radio" | "slider" | "timer" | "tree" | (string & {}) | "checkbox" | "listbox" | "region" | "cell" | "row" | "listitem" | "menubar" | "progressbar" | "separator" | "tab" | "tabpanel" | "toolbar" | "tooltip" | "treeitem" | "scrollbar" | "alert" | "alertdialog" | "application" | "banner" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "directory" | "document" | "gridcell" | "group" | "log" | "marquee" | "math" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "radiogroup" | "rowgroup" | "rowheader" | "searchbox" | "spinbutton" | "tablist" | "term" | "textbox" | "treegrid";
     about: string;
     content: string;
     datatype: string;
@@ -61,7 +61,7 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
     security: string;
     unselectable: "off" | "on";
     popover: "" | "auto" | "manual";
-    popoverTargetAction: "hide" | "show" | "toggle";
+    popoverTargetAction: "toggle" | "hide" | "show";
     popoverTarget: string;
     inert: boolean;
     inputMode: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal";
@@ -69,52 +69,52 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
     exportparts: string;
     part: string;
     "aria-activedescendant": string;
-    "aria-atomic": boolean | "false" | "true";
-    "aria-autocomplete": "both" | "none" | "inline" | "list";
+    "aria-atomic": boolean | "true" | "false";
+    "aria-autocomplete": "none" | "list" | "both" | "inline";
     "aria-braillelabel": string;
     "aria-brailleroledescription": string;
-    "aria-busy": boolean | "false" | "true";
-    "aria-checked": boolean | "mixed" | "false" | "true";
+    "aria-busy": boolean | "true" | "false";
+    "aria-checked": boolean | "true" | "mixed" | "false";
     "aria-colcount": number;
     "aria-colindex": number;
     "aria-colindextext": string;
     "aria-colspan": number;
     "aria-controls": string;
-    "aria-current": boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date";
+    "aria-current": boolean | "time" | "true" | "location" | "page" | "false" | "step" | "date";
     "aria-describedby": string;
     "aria-description": string;
     "aria-details": string;
-    "aria-disabled": boolean | "false" | "true";
-    "aria-dropeffect": "link" | "none" | "copy" | "move" | "execute" | "popup";
+    "aria-disabled": boolean | "true" | "false";
+    "aria-dropeffect": "link" | "copy" | "none" | "move" | "execute" | "popup";
     "aria-errormessage": string;
-    "aria-expanded": boolean | "false" | "true";
+    "aria-expanded": boolean | "true" | "false";
     "aria-flowto": string;
-    "aria-grabbed": boolean | "false" | "true";
-    "aria-haspopup": boolean | "dialog" | "menu" | "listbox" | "grid" | "false" | "true" | "tree";
-    "aria-hidden": boolean | "false" | "true";
-    "aria-invalid": boolean | "false" | "true" | "grammar" | "spelling";
+    "aria-grabbed": boolean | "true" | "false";
+    "aria-haspopup": boolean | "dialog" | "menu" | "true" | "grid" | "tree" | "listbox" | "false";
+    "aria-hidden": boolean | "true" | "false";
+    "aria-invalid": boolean | "true" | "false" | "grammar" | "spelling";
     "aria-keyshortcuts": string;
     "aria-label": string;
     "aria-labelledby": string;
     "aria-level": number;
     "aria-live": "off" | "assertive" | "polite";
-    "aria-modal": boolean | "false" | "true";
-    "aria-multiline": boolean | "false" | "true";
-    "aria-multiselectable": boolean | "false" | "true";
+    "aria-modal": boolean | "true" | "false";
+    "aria-multiline": boolean | "true" | "false";
+    "aria-multiselectable": boolean | "true" | "false";
     "aria-orientation": "horizontal" | "vertical";
     "aria-owns": string;
     "aria-placeholder": string;
     "aria-posinset": number;
-    "aria-pressed": boolean | "mixed" | "false" | "true";
-    "aria-readonly": boolean | "false" | "true";
+    "aria-pressed": boolean | "true" | "mixed" | "false";
+    "aria-readonly": boolean | "true" | "false";
     "aria-relevant": "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
-    "aria-required": boolean | "false" | "true";
+    "aria-required": boolean | "true" | "false";
     "aria-roledescription": string;
     "aria-rowcount": number;
     "aria-rowindex": number;
     "aria-rowindextext": string;
     "aria-rowspan": number;
-    "aria-selected": boolean | "false" | "true";
+    "aria-selected": boolean | "true" | "false";
     "aria-setsize": number;
     "aria-sort": "none" | "ascending" | "descending" | "other";
     "aria-valuemax": number;

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

@@ -1,9 +1,9 @@
-import { ReactNode, Ref, JSX } from 'react';
+import { ReactNode, Ref, ComponentProps } from 'react';
 import { PopperProps, PopperRef } from '../popper';
 import { ColorPropsValue, DivProps, Size } from '../../types';
 import { ColorInstance } from 'color';
 export interface ColorPickerProps extends Omit<DivProps, 'defaultValue' | 'onChange'> {
-    inputProps?: JSX.IntrinsicElements['input'];
+    inputProps?: ComponentProps<'input'>;
     popperProps?: PopperProps;
     popperRef?: Ref<PopperRef>;
     size?: Size;

package/dist/cjs/components/colorPicker/colorPicker.js

@@ -18,8 +18,8 @@ exports.ColorPicker = (0, react_1.memo)(({ inputProps, popperProps, popperRef, s
     return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: colorPicker_style_1.style, className: (0, utils_1.clsx)(colorPicker_style_1.classes.root, props.className), "data-size": size, "data-shape": shape, children: [presets?.map((color, i) => {
                 const colorInstance = (0, color_1.default)(typeof color === 'string' ? (0, utils_1.colorTransfer)(color, theme) : color);
                 return ((0, jsx_runtime_1.jsx)(BlockItem, { selected: colorInstance.hex() === innerValue.current.hex(), color: (0, color_1.default)(color), onClick: () => setInnerValue((0, color_1.default)(color, 'hex')) }, i));
-            }), (0, jsx_runtime_1.jsx)(popper_1.Popper, { css: colorPicker_style_1.colorPickerPopperStyle, defaultOpen: defaultOpen, open: open, onOpenChange: onOpenChange, trigger: ['click', 'enter'], placement: "bottomLeft", content: (0, jsx_runtime_1.jsx)(palette_1.Palette, { value: innerValue.current, onChange: setInnerValue }), ...popperProps, popperRef: popperRef, children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { className: colorPicker_style_1.classes.inputBase, size: size, shape: shape === 'circular' ? 'rounded' : shape, children: ({ ref, ...rest }) => (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(BlockItem, { color: innerValue.current }), !!label &&
-                                (0, jsx_runtime_1.jsx)("div", { className: colorPicker_style_1.classes.label, children: label }), (0, jsx_runtime_1.jsx)("input", { ...rest, ...inputProps, ref: (0, utils_1.cloneRef)(ref, inputProps?.ref), "data-hidden": "true" })] }) }) })] }));
+            }), (0, jsx_runtime_1.jsx)(popper_1.Popper, { css: colorPicker_style_1.colorPickerPopperStyle, defaultOpen: defaultOpen, open: open, onOpenChange: onOpenChange, trigger: ['click', 'enter'], placement: "bottomLeft", content: (0, jsx_runtime_1.jsx)(palette_1.Palette, { value: innerValue.current, onChange: setInnerValue }), ...popperProps, popperRef: popperRef, children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { className: colorPicker_style_1.classes.inputBase, size: size, shape: shape === 'circular' ? 'rounded' : shape, children: inputBaseProps => (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(BlockItem, { color: innerValue.current }), !!label &&
+                                (0, jsx_runtime_1.jsx)("div", { className: colorPicker_style_1.classes.label, children: label }), (0, jsx_runtime_1.jsx)("input", { ...(0, utils_1.mergeComponentProps)(inputProps, inputBaseProps), "data-hidden": "true" })] }) }) })] }));
 });
 function BlockItem({ color, onClick, selected }) {
     const light = (0, react_1.useMemo)(() => color.luminosity() >= .8, [color]);