@canlooks/can-ui 0.0.70 → 0.0.72

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 C.CanLiang
+Copyright (c) 2025 C.CanLiang
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

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

@@ -16,128 +16,128 @@ exports.classes = (0, utils_1.defineInnerClasses)('calendar', [
     'yearItem',
     'foot'
 ]);
-exports.style = (0, utils_1.defineCss)(({ divider, text, spacing }) => (0, react_1.css) `
-    .${exports.classes.head} {
-        height: 40px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        border-bottom: 1px solid ${divider};
-        padding: 0 ${menuItem_style_1.menuListPadding}px;
-        position: relative;
-
-        .${exports.classes.headSide} {
-            z-index: 1;
-        }
-
-        .${exports.classes.headControl} {
-            color: ${text.placeholder};
-        }
-
-        .${exports.classes.headCenter} {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            position: absolute;
-            inset: 0;
-
-            .${exports.classes.headButton} {
-                font-weight: bold;
-                color: ${text.primary};
-            }
-        }
-    }
-
-    .${exports.classes.body} {
-        padding: ${spacing[3]}px ${spacing[4]}px;
-        display: grid;
-        place-items: center;
-
-        &[data-view-type=date] {
-            font-size: ${13 / 14}em;
-            grid-template-columns: repeat(7, 36px);
-            grid-template-rows: repeat(7, 36px);
-
-            .${exports.classes.dateItem} {
-                width: 24px;
-                height: 24px;
-    
-                &:not([data-variant=filled]) {
-                    color: ${text.primary};
-                    border-color: ${text.disabled};
-    
-                    &[data-other-month=true] {
-                        color: ${text.placeholder};
-                    }
-                }
-
-                &:disabled {
-                    width: 100%;
-                    border-radius: 0;
-                }
-            }
-        }
-
-        &[data-view-type=month], &[data-view-type=year] {
-            grid-template-columns: repeat(3, 84px);
-            grid-template-rows: repeat(4, 63px);
-
-            .${exports.classes.monthItem},
-            .${exports.classes.yearItem} {
-                width: 72px;
-                padding-inline: 0;
-
-                &:not([data-variant=filled]) {
-                    color: ${text.primary};
-                }
-            }
-        }
-    }
-    
-    &[data-size=small] {
-        .${exports.classes.body} {
-            &[data-view-type=date] {
-                grid-template-columns: repeat(7, 30px);
-                grid-template-rows: repeat(7, 30px);
-            }
-
-            &[data-view-type=month], &[data-view-type=year] {
-                grid-template-columns: repeat(3, 70px);
-                grid-template-rows: repeat(4, 52.5px);
-
-                .${exports.classes.monthItem},
-                .${exports.classes.yearItem} {
-                    width: 60px;
-                }
-            }
-        }
-    }
-
-    &[data-size=large] {
-        .${exports.classes.body} {
-            &[data-view-type=date] {
-                font-size: 1em;
-                grid-template-columns: repeat(7, 42px);
-                grid-template-rows: repeat(7, 42px);
-
-                .${exports.classes.dateItem} {
-                    width: 32px;
-                    height: 32px;
-                }
-            }
-
-            &[data-view-type=month], &[data-view-type=year] {
-                grid-template-columns: repeat(3, 98px);
-                grid-template-rows: repeat(4, 73.5px);
-            }
-        }
-    }
-
-    .${exports.classes.foot} {
-        height: 41px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-top: 1px solid ${divider};
-    }
+exports.style = (0, utils_1.defineCss)(({ divider, text, spacing }) => (0, react_1.css) `
+    .${exports.classes.head} {
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: 1px solid ${divider};
+        padding: 0 ${menuItem_style_1.menuListPadding}px;
+        position: relative;
+
+        .${exports.classes.headSide} {
+            z-index: 1;
+        }
+
+        .${exports.classes.headControl} {
+            color: ${text.placeholder};
+        }
+
+        .${exports.classes.headCenter} {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: absolute;
+            inset: 0;
+
+            .${exports.classes.headButton} {
+                font-weight: bold;
+                color: ${text.primary};
+            }
+        }
+    }
+
+    .${exports.classes.body} {
+        padding: ${spacing[3]}px ${spacing[4]}px;
+        display: grid;
+        place-items: center;
+
+        &[data-view-type=date] {
+            font-size: ${13 / 14}em;
+            grid-template-columns: repeat(7, 36px);
+            grid-template-rows: repeat(7, 36px);
+
+            .${exports.classes.dateItem} {
+                width: 24px;
+                height: 24px;
+    
+                &:not([data-variant=filled]) {
+                    color: ${text.primary};
+                    border-color: ${text.disabled};
+    
+                    &[data-other-month=true] {
+                        color: ${text.placeholder};
+                    }
+                }
+
+                &:disabled {
+                    width: 100%;
+                    border-radius: 0;
+                }
+            }
+        }
+
+        &[data-view-type=month], &[data-view-type=year] {
+            grid-template-columns: repeat(3, 84px);
+            grid-template-rows: repeat(4, 63px);
+
+            .${exports.classes.monthItem},
+            .${exports.classes.yearItem} {
+                width: 72px;
+                padding-inline: 0;
+
+                &:not([data-variant=filled]) {
+                    color: ${text.primary};
+                }
+            }
+        }
+    }
+    
+    &[data-size=small] {
+        .${exports.classes.body} {
+            &[data-view-type=date] {
+                grid-template-columns: repeat(7, 30px);
+                grid-template-rows: repeat(7, 30px);
+            }
+
+            &[data-view-type=month], &[data-view-type=year] {
+                grid-template-columns: repeat(3, 70px);
+                grid-template-rows: repeat(4, 52.5px);
+
+                .${exports.classes.monthItem},
+                .${exports.classes.yearItem} {
+                    width: 60px;
+                }
+            }
+        }
+    }
+
+    &[data-size=large] {
+        .${exports.classes.body} {
+            &[data-view-type=date] {
+                font-size: 1em;
+                grid-template-columns: repeat(7, 42px);
+                grid-template-rows: repeat(7, 42px);
+
+                .${exports.classes.dateItem} {
+                    width: 32px;
+                    height: 32px;
+                }
+            }
+
+            &[data-view-type=month], &[data-view-type=year] {
+                grid-template-columns: repeat(3, 98px);
+                grid-template-rows: repeat(4, 73.5px);
+            }
+        }
+    }
+
+    .${exports.classes.foot} {
+        height: 41px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-top: 1px solid ${divider};
+    }
 `);

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 }) })] }) }) }));
 });