@canlooks/can-ui 0.0.127 → 0.0.129

package/dist/cjs/components/app/app.js

@@ -28,11 +28,15 @@ exports.App = (({ theme, ...props }) => {
 });
 function InnerApp({ component: Component = 'div', theme, children, fill = true, ...props }) {
     const appValue = (0, utils_1.useExternalClass)(() => ({
-        dialog: exports.App.dialog ||= new appDialog_1.AppDialogMethods(),
-        message: exports.App.message ||= new appMessage_1.AppMessageMethods(),
-        notification: exports.App.notification ||= new appNotification_1.AppNotificationMethods(),
-        actionSheet: exports.App.actionSheet ||= new appActionSheet_1.AppActionSheetMethods()
+        dialog: new appDialog_1.AppDialogMethods(),
+        message: new appMessage_1.AppMessageMethods(),
+        notification: new appNotification_1.AppNotificationMethods(),
+        actionSheet: new appActionSheet_1.AppActionSheetMethods()
     }));
+    exports.App.dialog ||= appValue.dialog;
+    exports.App.message ||= appValue.message;
+    exports.App.notification ||= appValue.notification;
+    exports.App.actionSheet ||= appValue.actionSheet;
     return ((0, jsx_runtime_1.jsxs)(AppContext, { value: appValue, children: [Component
                 ? (0, jsx_runtime_1.jsx)(Component, { ...props, css: [
                         app_style_1.style,

package/dist/cjs/components/cascade/cascade.style.d.ts

@@ -1,9 +1,9 @@
 export declare const classes: {
     placeholder: string;
     contentWrap: string;
-    arrow: string;
     backfill: string;
     backfillWrap: string;
+    arrow: string;
     searchInput: string;
     panelContainer: string;
     panel: string;

package/dist/cjs/components/dataGrid/dataGridRows.js

@@ -36,7 +36,7 @@ exports.DataGridRows = (0, react_2.memo)(({ rows, _level = 0 }) => {
             (0, react_1.createElement)(Tr, { ...(0, utils_1.mergeComponentProps)(TrProps, _rowProps, {
                     className: (0, utils_1.clsx)(_rowProps, _level > 0 && dataGrid_style_1.classes.sub),
                     onClick() {
-                        clickRowToSelect && toggleSelected(trKey, row);
+                        clickRowToSelect && toggleSelected(trKey);
                     }
                 }), key: trKey, "data-selected": status === 2 }, flattedColumns?.flatMap((col, j) => {
                 if (typeof col === 'symbol') {
@@ -50,9 +50,7 @@ exports.DataGridRows = (0, react_2.memo)(({ rows, _level = 0 }) => {
                         expandableIndex = j;
                     }
                     const Component = multiple ? checkbox_1.Checkbox : radio_1.Radio;
-                    return ((0, jsx_runtime_1.jsx)(table_1.TdCell, { className: dataGrid_style_1.classes.selectable, sticky: j === 0 ? 'left' : void 0, children: (0, jsx_runtime_1.jsx)(Component, { checked: status === 2, indeterminate: status === 1, onChange: () => {
-                                toggleSelected(trKey, row);
-                            }, onClick: e => e.stopPropagation() }) }, j + '_selectable'));
+                    return ((0, jsx_runtime_1.jsx)(table_1.TdCell, { className: dataGrid_style_1.classes.selectable, sticky: j === 0 ? 'left' : void 0, children: (0, jsx_runtime_1.jsx)(Component, { checked: status === 2, indeterminate: status === 1, onChange: () => toggleSelected(trKey), onClick: e => e.stopPropagation() }) }, j + '_selectable'));
                 }
                 const { 
                 // 排除无需加入dom节点的属性

package/dist/cjs/components/inputBase/inputBase.js

@@ -10,7 +10,7 @@ const button_1 = require("../button");
 const loadingIndicator_1 = require("../loadingIndicator");
 const icon_1 = require("../icon");
 const faCircleXmark_1 = require("@fortawesome/free-solid-svg-icons/faCircleXmark");
-exports.InputBase = (({ ref, variant = 'outlined', size, shape, color = 'primary', children, prefix, suffix, onClear, loading, type, clearable = type !== 'number', 
+exports.InputBase = (({ ref, variant = 'outlined', size = 'medium', shape = 'square', color = 'primary', children, prefix, suffix, onClear, loading = false, type, clearable = type !== 'number', 
 // 以下属性传递给<input/>
 min, max, step, precision, placeholder, disabled, readOnly, autoFocus, defaultValue, value, onChange, ...props }) => {
     const innerRef = (0, react_1.useRef)(null);

package/dist/cjs/components/optionsBase/optionsBase.js

@@ -74,46 +74,47 @@ searchValue, selectedValue, onToggleSelected, ...props }) => {
         if (!filteredOptions?.length) {
             return (0, jsx_runtime_1.jsx)(placeholder_1.Placeholder, {});
         }
-        const makeProps = (params) => ({
-            ref: params.scrollHere || params.selected ? selectedItemRef : void 0,
-            showCheckbox,
-            selected: params.selected,
-            focused: verticalIndex.current === params.index,
-            label: typeof params.label === 'string' && searchValue
-                ? (0, jsx_runtime_1.jsx)(highlight_1.Highlight, { keywords: searchValue?.split(' '), children: params.label })
-                : params.label,
-            onClick: e => {
-                e.stopPropagation();
-                params.opt?.onClick?.(e);
-                syncOnToggleSelected.current?.(params.value, e);
-            },
-            onPointerEnter: e => {
-                params.opt?.onPointerEnter?.(e);
-                setVerticalIndex(-1);
-            },
-            children: null
-        });
+        const makeProps = (params) => {
+            return (0, utils_1.mergeComponentProps)(params.option, {
+                ref: params.scrollHere || params.selected ? selectedItemRef : void 0,
+                showCheckbox,
+                selected: params.selected,
+                focused: verticalIndex.current === params.index,
+                value: params.value,
+                label: typeof params.label === 'string' && searchValue
+                    ? (0, jsx_runtime_1.jsx)(highlight_1.Highlight, { keywords: searchValue?.split(' '), children: params.label })
+                    : params.label,
+                onClick: e => {
+                    e.stopPropagation();
+                    syncOnToggleSelected.current?.(params.value, e);
+                },
+                onPointerEnter: () => {
+                    setVerticalIndex(-1);
+                },
+                children: null
+            });
+        };
         if (options) {
             return filteredOptions.map((opt, index) => {
                 const value = opt[primaryKey];
                 const label = opt[labelKey] ?? value;
-                return ((0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { value: value, ...(0, utils_1.mergeComponentProps)(opt, makeProps({
+                return ((0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { ...makeProps({
+                        option: opt,
                         label,
                         value,
                         index,
                         selected: (0, utils_1.isSelected)(value, selectedValue),
                         scrollHere: opt.scrollHere
-                    })) }, opt.key ?? value ?? index));
+                    }) }, opt.key ?? value ?? index));
             });
         }
-        // children
         return filteredOptions.map((c, index) => {
             if (!(0, react_1.isValidElement)(c)) {
                 return c;
             }
             const { value, label, scrollHere } = c.props;
             return (0, react_1.cloneElement)(c, makeProps({
-                opt: c.props,
+                option: c.props,
                 label,
                 value: value,
                 index,

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

@@ -1,31 +1,13 @@
-import { ReactElement, ReactNode, Ref, ComponentProps } from 'react';
-import { InputBaseProps } from '../inputBase';
-import { PopperProps, PopperRef } from '../popper';
-import { MenuItem } from '../menuItem';
+import { ReactElement } from 'react';
+import { SelectBaseMultipleProps, SelectBaseOwnProps, SelectBaseSingleProps } from '../selectBase';
 import { MenuOptionType, OptionsBaseSharedProps } from '../optionsBase';
-import { InputProps } from '../input';
-import { Id, SelectableMultipleProps, SelectableSingleProps } from '../../types';
-export interface SelectBaseProps<O extends MenuOptionType> extends OptionsBaseSharedProps<O>, Omit<InputBaseProps<'input'>, 'children' | 'defaultValue' | 'value' | 'onChange'> {
-    /** <select />内部由<input />实现 */
-    inputProps?: ComponentProps<'input'>;
-    popperProps?: PopperProps;
-    popperRef?: Ref<PopperRef>;
-    defaultOpen?: boolean;
-    open?: boolean;
-    onOpenChange?(open: boolean): void;
-    sizeAdaptable?: boolean;
-    children?: ReactNode;
-    searchable?: boolean;
-    defaultSearchValue?: string;
-    searchValue?: string;
-    onSearchChange?(searchValue: string): void;
-    searchInputProps?: InputProps;
+import { Id } from '../../types';
+import { MenuItem } from '../menuItem';
+export interface SelectOwnProps<O extends MenuOptionType> extends SelectBaseOwnProps, OptionsBaseSharedProps<O> {
 }
-export interface SelectSingleProps<O extends MenuOptionType, V extends Id = Id> extends SelectBaseProps<O>, SelectableSingleProps<V> {
-    renderBackfill?(selectedValue: V): ReactNode;
+export interface SelectSingleProps<O extends MenuOptionType, V extends Id = Id> extends SelectOwnProps<O>, SelectBaseSingleProps<V> {
 }
-export interface SelectMultipleProps<O extends MenuOptionType, V extends Id = Id> extends SelectBaseProps<O>, SelectableMultipleProps<V> {
-    renderBackfill?(selectedValue: V[]): ReactNode;
+export interface SelectMultipleProps<O extends MenuOptionType, V extends Id = Id> extends SelectOwnProps<O>, SelectBaseMultipleProps<V> {
 }
 export type SelectProps<O extends MenuOptionType, V extends Id = Id> = SelectSingleProps<O, V> | SelectMultipleProps<O, V>;
 export declare const Select: {

package/dist/cjs/components/select/select.js

@@ -3,66 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Option = exports.Select = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
-const inputBase_1 = require("../inputBase");
-const utils_1 = require("../../utils");
-const select_style_1 = require("./select.style");
-const popper_1 = require("../popper");
-const menuItem_1 = require("../menuItem");
-const tag_1 = require("../tag");
+const selectBase_1 = require("../selectBase");
 const optionsBase_1 = require("../optionsBase");
-const input_1 = require("../input");
-const loadingIndicator_1 = require("../loadingIndicator");
+const menuItem_1 = require("../menuItem");
 const selectionContext_1 = require("../selectionContext");
-const icon_1 = require("../icon");
-const faChevronDown_1 = require("@fortawesome/free-solid-svg-icons/faChevronDown");
-const faMagnifyingGlass_1 = require("@fortawesome/free-solid-svg-icons/faMagnifyingGlass");
-const popper_style_1 = require("../popper/popper.style");
-exports.Select = (0, react_1.memo)(({ inputProps, popperProps, popperRef, defaultOpen = false, open, onOpenChange, sizeAdaptable = true, children, multiple, defaultValue, value, onChange, renderBackfill, searchable, defaultSearchValue = '', searchValue, onSearchChange, searchInputProps, 
-// 从OptionsBaseSharedProps继承的属性
-showCheckbox = !!multiple, loading, options, labelKey = 'label', primaryKey = 'value', searchTokenKey = 'searchToken', filterPredicate, ...props }) => {
-    const [innerOpen, _setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open, onOpenChange);
-    const setInnerOpen = (open) => {
-        _setInnerOpen(open);
-        if (!open && document.activeElement === searchInputRef.current) {
-            // 关闭下拉框时，如果焦点在搜索框上，需要移除焦点，避免影响下次打开下拉框
-            searchInputRef.current.blur();
-        }
-    };
-    const openChangeHandler = (open) => {
-        setInnerOpen(open);
-    };
-    const openChangeEnd = (open) => {
-        // 关闭动画结束后清空搜索框
-        !open && setInnerSearchValue('');
-    };
-    const searchInputRef = (0, react_1.useRef)(null);
-    const onBlur = () => {
-        setTimeout(() => {
-            // 失去焦点后，如果不是聚焦在搜索框，则需要关闭弹框
-            searchInputRef.current !== document.activeElement && setInnerOpen(false);
-        });
-    };
-    const [innerValue, _toggleSelected, setInnerValue] = (0, selectionContext_1.useFlatSelection)({ multiple, defaultValue, value, onChange });
-    const onToggleSelected = (0, react_1.useCallback)((value) => {
-        _toggleSelected(value);
-        // 单选模式下，选中一次就自动关闭弹框
-        !multiple && setInnerOpen(false);
-    }, [multiple]);
-    const onClear = () => {
-        props.onClear?.();
-        setInnerValue(multiple ? [] : void 0);
-    };
-    /**
-     * ------------------------------------------------------------------
-     * 搜索
-     */
-    const [innerSearchValue, setInnerSearchValue] = (0, utils_1.useControlled)(defaultSearchValue, searchValue, onSearchChange);
-    const deferredSearchValue = (0, react_1.useDeferredValue)(innerSearchValue.current);
-    /**
-     * ------------------------------------------------------------------
-     * 渲染部分
-     */
-    const optionsArr = options || react_1.Children.map(children, c => (0, react_1.isValidElement)(c) ? c.props : c) || void 0;
+exports.Select = (0, react_1.memo)(({ children, 
+// 从SelectableProps继承
+multiple = false, // 同时转发至<SelectBase/>
+defaultValue, value, onChange, renderBackfill, // 同时转发至<SelectBase/>
+// 从OptionsBaseSharedProps继承
+showCheckbox = multiple, loading = false, options, labelKey = 'label', primaryKey = 'value', searchTokenKey = 'searchToken', filterPredicate, ...props }) => {
+    const optionsArr = options || react_1.Children.map(children, c => {
+        return (0, react_1.isValidElement)(c) ? c.props : c;
+    }) || void 0;
     const optionsMap = (0, react_1.useMemo)(() => {
         const map = new Map();
         optionsArr?.forEach(opt => {
@@ -70,55 +23,26 @@ showCheckbox = !!multiple, loading, options, labelKey = 'label', primaryKey = 'v
         });
         return map;
     }, [optionsArr, primaryKey]);
-    const renderBackfillFn = () => {
-        if (renderBackfill) {
-            return renderBackfill(innerValue);
-        }
-        if (multiple) {
-            return innerValue?.map((v) => (0, jsx_runtime_1.jsx)(tag_1.Tag, { closable: true, onClose: () => onToggleSelected(v), children: optionsMap.get(v)?.[labelKey] ?? v }, v));
-        }
-        return ((0, jsx_runtime_1.jsx)("div", { className: select_style_1.classes.backfillWrap, children: optionsMap.get(innerValue)?.[labelKey] ?? innerValue }));
+    const [innerValue, toggleSelected, setInnerValue] = (0, selectionContext_1.useFlatSelection)({ multiple, defaultValue, value, onChange });
+    const onClear = () => {
+        props.onClear?.();
+        setInnerValue(multiple ? [] : void 0);
     };
-    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { ...(0, utils_1.mergeComponentProps)({
-            css: popper_style_1.popperStyle,
-            open: innerOpen.current,
-            placement: 'bottom',
-            variant: 'collapse',
-            trigger: ['click', 'enter'],
-            disabled: props.disabled || props.readOnly,
-            sizeAdaptable: sizeAdaptable,
-            content: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [searchable &&
-                        (0, jsx_runtime_1.jsx)(input_1.Input, { ...(0, utils_1.mergeComponentProps)({
-                                inputProps: (0, utils_1.mergeComponentProps)(searchInputProps?.inputProps, { ref: searchInputRef }),
-                                prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faMagnifyingGlass_1.faMagnifyingGlass }),
-                                placeholder: '搜索',
-                                value: innerSearchValue.current
-                            }, searchInputProps, {
-                                onChange: e => setInnerSearchValue?.(e.target.value),
-                                onBlur
-                            }) }), (0, jsx_runtime_1.jsx)(optionsBase_1.OptionsBase, { selectedValue: innerValue, searchValue: deferredSearchValue, onToggleSelected,
-                        showCheckbox,
-                        loading,
-                        options,
-                        labelKey,
-                        primaryKey,
-                        searchTokenKey,
-                        filterPredicate, children: children })] }))
-        }, popperProps, {
-            popperRef,
-            onOpenChange: openChangeHandler,
-            onOpenChangeEnd: openChangeEnd,
-            onPointerDown: e => e.preventDefault()
-        }), children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { clearable: !!multiple, ...(0, utils_1.mergeComponentProps)(props, {
-                css: select_style_1.style,
-                className: select_style_1.classes.root,
-                value: innerValue,
-                onClear,
-                onBlur
-            }), "data-focused": innerOpen.current, children: inputBaseProps => (0, jsx_runtime_1.jsxs)("div", { className: select_style_1.classes.contentWrap, children: [(0, utils_1.isNoValue)(innerValue)
-                        ? (0, jsx_runtime_1.jsx)("div", { className: select_style_1.classes.placeholder, children: props.placeholder ?? '请选择' })
-                        : (0, jsx_runtime_1.jsx)("div", { className: select_style_1.classes.backfill, children: renderBackfillFn() }), (0, jsx_runtime_1.jsx)("input", { size: 1, ...(0, utils_1.mergeComponentProps)(inputBaseProps, inputProps), "data-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { className: select_style_1.classes.arrow, "data-open": innerOpen.current, children: loading
-                            ? (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, {})
-                            : (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faChevronDown_1.faChevronDown }) })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(selectBase_1.SelectBase, { ...props, multiple: multiple, renderBackfill: renderBackfill, onClear: onClear, _internalProps: {
+            labelKey,
+            optionsMap,
+            innerValue,
+            onToggleSelected: toggleSelected,
+            renderPopperContent: (searchValue, onToggleSelected) => ((0, jsx_runtime_1.jsx)(optionsBase_1.OptionsBase, { selectedValue: innerValue, searchValue,
+                onToggleSelected,
+                showCheckbox,
+                loading,
+                options,
+                labelKey,
+                primaryKey,
+                searchTokenKey,
+                filterPredicate,
+                children }))
+        } }));
 });
 exports.Option = exports.Select.Option = menuItem_1.MenuItem;

package/dist/cjs/components/selectBase/index.d.ts

@@ -0,0 +1 @@
+export * from './selectBase';

package/dist/cjs/components/selectBase/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./selectBase"), exports);

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

@@ -0,0 +1,41 @@
+import { InputBaseProps } from '../inputBase';
+import { ComponentProps, ReactNode, Ref } from 'react';
+import { PopperProps, PopperRef } from '../popper';
+import { InputProps } from '../input';
+import { Id, SelectableMultipleProps, SelectableSingleProps } from '../../types';
+export interface SelectBaseOwnProps extends Omit<InputBaseProps<'input'>, 'children' | 'placeholder' | 'defaultValue' | 'value' | 'onChange' | 'onToggle'> {
+    /** <select />内部由<input />实现 */
+    inputProps?: ComponentProps<'input'>;
+    popperProps?: PopperProps;
+    popperRef?: Ref<PopperRef>;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?(open: boolean): void;
+    placeholder?: ReactNode;
+    sizeAdaptable?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    loading?: boolean;
+    searchable?: boolean;
+    defaultSearchValue?: string;
+    searchValue?: string;
+    onSearchChange?(searchValue: string): void;
+    searchInputProps?: InputProps;
+}
+export interface SelectBaseSingleProps<V extends Id = Id> extends SelectBaseOwnProps, SelectableSingleProps<V> {
+    renderBackfill?(selectedValue: V | undefined): ReactNode;
+}
+export interface SelectBaseMultipleProps<V extends Id = Id> extends SelectBaseOwnProps, SelectableMultipleProps<V> {
+    renderBackfill?(selectedValue: V[] | undefined): ReactNode;
+}
+export type SelectBaseProps<V extends Id = Id> = SelectBaseSingleProps<V> | SelectBaseMultipleProps<V>;
+export declare function SelectBase({ inputProps, popperProps, popperRef, defaultOpen, open, onOpenChange, placeholder, sizeAdaptable, disabled, readOnly, loading, searchable, defaultSearchValue, searchValue, onSearchChange, searchInputProps, multiple, renderBackfill, _internalProps: { labelKey, optionsMap, innerValue, onToggleSelected, renderPopperContent }, ...props }: Omit<SelectBaseProps, 'defaultValue' | 'value' | 'onChange'> & {
+    /** @private 内部使用的属性 */
+    _internalProps: {
+        labelKey: keyof any;
+        optionsMap: Map<Id, any>;
+        innerValue: (Id & Id[]) | undefined;
+        onToggleSelected(value: Id): void;
+        renderPopperContent(searchValue: string, toggleSelected: (value: Id) => void): ReactNode;
+    };
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/components/selectBase/selectBase.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectBase = SelectBase;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const inputBase_1 = require("../inputBase");
+const react_1 = require("react");
+const popper_1 = require("../popper");
+const input_1 = require("../input");
+const utils_1 = require("../../utils");
+const popper_style_1 = require("../popper/popper.style");
+const icon_1 = require("../icon");
+const faMagnifyingGlass_1 = require("@fortawesome/free-solid-svg-icons/faMagnifyingGlass");
+const selectBase_style_1 = require("./selectBase.style");
+const tag_1 = require("../tag");
+const loadingIndicator_1 = require("../loadingIndicator");
+const faChevronDown_1 = require("@fortawesome/free-solid-svg-icons/faChevronDown");
+function SelectBase({ inputProps, popperProps, popperRef, defaultOpen = false, open, onOpenChange, placeholder = '请选择', sizeAdaptable = true, disabled, readOnly, loading = false, searchable, defaultSearchValue = '', searchValue, onSearchChange, searchInputProps, 
+// 从SelectableProps继承
+multiple = false, renderBackfill, _internalProps: { labelKey, optionsMap, innerValue, onToggleSelected, renderPopperContent }, ...props }) {
+    const [innerOpen, _setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open, onOpenChange);
+    const setInnerOpen = (open) => {
+        _setInnerOpen(open);
+        if (!open && document.activeElement === searchInputRef.current) {
+            // 关闭下拉框时，如果焦点在搜索框上，需要移除焦点，避免影响下次打开下拉框
+            searchInputRef.current.blur();
+        }
+    };
+    const openChangeHandler = (open) => {
+        setInnerOpen(open);
+    };
+    const openChangeEnd = (open) => {
+        // 关闭动画结束后清空搜索框
+        !open && setInnerSearchValue('');
+    };
+    const toggleSelectHandler = (value) => {
+        onToggleSelected(value);
+        // 单选模式下，选中一次就自动关闭弹框
+        !multiple && setInnerOpen(false);
+    };
+    /**
+     * ------------------------------------------------------------------
+     * 搜索
+     */
+    const searchInputRef = (0, react_1.useRef)(null);
+    const [innerSearchValue, setInnerSearchValue] = (0, utils_1.useControlled)(defaultSearchValue, searchValue, onSearchChange);
+    const deferredSearchValue = (0, react_1.useDeferredValue)(innerSearchValue.current);
+    /**
+     * ------------------------------------------------------------------
+     * 渲染部分
+     */
+    const onBlur = () => {
+        setTimeout(() => {
+            // 失去焦点后，如果不是聚焦在搜索框，则需要关闭弹框
+            searchInputRef.current !== document.activeElement && setInnerOpen(false);
+        });
+    };
+    const renderBackfillFn = () => {
+        if (renderBackfill) {
+            return renderBackfill(innerValue);
+        }
+        if (multiple) {
+            return innerValue?.map(v => (0, jsx_runtime_1.jsx)(tag_1.Tag, { closable: true, onClose: () => toggleSelectHandler(v), children: optionsMap.get(v)?.[labelKey] ?? v }, v));
+        }
+        return ((0, jsx_runtime_1.jsx)("div", { className: selectBase_style_1.classes.backfillWrap, children: optionsMap.get(innerValue)?.[labelKey] ?? innerValue }));
+    };
+    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { ...(0, utils_1.mergeComponentProps)({
+            css: popper_style_1.popperStyle,
+            open: innerOpen.current,
+            placement: 'bottom',
+            variant: 'collapse',
+            trigger: ['click', 'enter'],
+            disabled: disabled || readOnly,
+            sizeAdaptable: sizeAdaptable,
+            content: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [searchable &&
+                        (0, jsx_runtime_1.jsx)(input_1.Input, { ...(0, utils_1.mergeComponentProps)({
+                                inputProps: (0, utils_1.mergeComponentProps)(searchInputProps?.inputProps, { ref: searchInputRef }),
+                                prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faMagnifyingGlass_1.faMagnifyingGlass }),
+                                placeholder: '搜索',
+                                value: innerSearchValue.current
+                            }, searchInputProps, {
+                                onChange: e => setInnerSearchValue(e.target.value),
+                                onBlur
+                            }) }), renderPopperContent(deferredSearchValue, toggleSelectHandler)] }))
+        }, popperProps, {
+            popperRef,
+            onOpenChange: openChangeHandler,
+            onOpenChangeEnd: openChangeEnd,
+            onPointerDown: e => e.preventDefault()
+        }), children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { clearable: multiple, ...(0, utils_1.mergeComponentProps)(props, {
+                css: selectBase_style_1.style,
+                className: selectBase_style_1.classes.root,
+                disabled,
+                readOnly,
+                value: innerValue,
+                onBlur
+            }), "data-focused": innerOpen.current, children: inputBaseProps => (0, jsx_runtime_1.jsxs)("div", { className: selectBase_style_1.classes.contentWrap, children: [(0, utils_1.isNoValue)(innerValue)
+                        ? (0, jsx_runtime_1.jsx)("div", { className: selectBase_style_1.classes.placeholder, children: placeholder })
+                        : (0, jsx_runtime_1.jsx)("div", { className: selectBase_style_1.classes.backfill, children: renderBackfillFn() }), (0, jsx_runtime_1.jsx)("input", { size: 1, ...(0, utils_1.mergeComponentProps)(inputBaseProps, inputProps), "data-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { className: selectBase_style_1.classes.arrow, "data-open": innerOpen.current, children: loading
+                            ? (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, {})
+                            : (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faChevronDown_1.faChevronDown }) })] }) }) }));
+}

package/dist/cjs/components/{treeSelect/treeSelect.style.js → selectBase/selectBase.style.js}

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.classes = void 0;
-const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
+const react_1 = require("@emotion/react");
 const tag_style_1 = require("../tag/tag.style");
-exports.classes = (0, utils_1.defineInnerClasses)('tree-select', [
+exports.classes = (0, utils_1.defineInnerClasses)('select-base', [
     'contentWrap',
     'placeholder',
     'backfill',
@@ -19,7 +19,7 @@ exports.style = (0, utils_1.defineCss)(({ spacing, text, easing }) => (0, react_
         .${exports.classes.contentWrap} {
             display: flex;
             align-items: center;
-            gap: ${spacing[1]}px;
+            gap: ${spacing[2]}px;
         }
 
         .${exports.classes.placeholder} {

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

@@ -43,8 +43,7 @@ export type ISelectionContext<O extends OptionType<V>, V extends Id = Id> = {
     setOptions: Dispatch<SetStateAction<undefined | O[]>>;
     optionsMap: Map<V, O>;
     selectionStatus: Map<V, 1 | 2>;
-    toggleSelected(value: V, option?: O): void;
-    onToggle?(checked: boolean, value: V, option?: O): void;
+    toggleSelected(value: V): void;
 };
 export declare function useSelectionContext<O extends OptionType<V>, V extends Id = Id>(): ISelectionContext<O, V>;
 export type SelectionContextProps<O extends OptionType<V>, V extends Id = Id> = SelectionContextBaseProps<O, V> & SelectableProps<V>;

package/dist/cjs/components/selectionContext/selectionHook.d.ts

@@ -1,12 +1,10 @@
 import { Dispatch, SetStateAction } from 'react';
 import { ISelectionContext, OptionType, SelectionContextProps } from './selectionContext';
-import { Id } from '../../types';
-export declare function useSelection<O extends OptionType<V>, V extends Id = Id>(props: SelectionContextProps<O, V>): ISelectionContext<O, V>;
-export declare function useFlatSelection<V extends Id | Id[]>(params: {
-    disabled?: boolean;
+import { Id, SelectableProps } from '../../types';
+export declare function useSelection<O extends OptionType<V>, V extends Id = Id>({ ...props }: SelectionContextProps<O, V>): ISelectionContext<O, V>;
+export type UseFlatSelectionParams<V extends Id = Id> = Omit<SelectableProps<V>, 'multiple'> & {
     multiple?: boolean;
+    disabled?: boolean;
     clearable?: boolean;
-    defaultValue?: V;
-    value?: V;
-    onChange?: (value: V) => void;
-}): [V, (value: V) => void, Dispatch<SetStateAction<V>>];
+};
+export declare function useFlatSelection<V extends Id = Id>(params: UseFlatSelectionParams<V>): [V, (value: V) => void, Dispatch<SetStateAction<V>>];

package/dist/cjs/components/selectionContext/selectionHook.js

@@ -5,15 +5,13 @@ exports.useFlatSelection = useFlatSelection;
 const utils_1 = require("../../utils");
 const react_1 = require("react");
 const selectionContext_1 = require("./selectionContext");
-function useSelection(props) {
-    props = Object.assign({
-        primaryKey: 'id',
-        childrenKey: 'children',
-        relation: 'dependent',
-        integration: 'shallowest',
-        multiple: false,
-        disabled: false
-    }, props);
+function useSelection({ ...props }) {
+    props.primaryKey ??= 'id';
+    props.childrenKey ??= 'children';
+    props.relation ??= 'dependent';
+    props.integration ??= 'shallowest';
+    props.multiple ??= false;
+    props.disabled ??= false;
     let [innerValue, setInnerValue] = (0, utils_1.useControlled)(props.defaultValue, props.value, props.onChange);
     let [innerOptions, setInnerOptions] = (0, utils_1.useDerivedState)(props.options);
     /**
@@ -203,8 +201,7 @@ function useSelection(props) {
         setOptions: setInnerOptions,
         optionsMap,
         selectionStatus,
-        toggleSelected,
-        onToggle: props.onToggle
+        toggleSelected
     };
 }
 function useFlatSelection(params) {

package/dist/cjs/components/tag/tag.js

@@ -14,8 +14,8 @@ exports.Tag = (0, react_1.memo)(({ variant = 'outlined', color = 'text.secondary
         e.stopPropagation();
         onClose?.(e);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, tag_style_1.useStyle)({ color: color || 'text.secondary' }), className: (0, utils_1.clsx)(tag_style_1.classes.root, props.className), "data-variant": variant, "data-size": size, "data-shape": shape, "data-clickable": clickable, children: [!!prefix &&
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, tag_style_1.useStyle)({ color }), className: (0, utils_1.clsx)(tag_style_1.classes.root, props.className), "data-variant": variant, "data-size": size, "data-shape": shape, "data-clickable": clickable, children: [!!prefix &&
                 (0, jsx_runtime_1.jsx)("div", { className: tag_style_1.classes.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: tag_style_1.classes.content, children: props.children }), !!suffix &&
                 (0, jsx_runtime_1.jsx)("div", { className: tag_style_1.classes.suffix, children: suffix }), closable &&
-                (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "plain", className: tag_style_1.classes.close, onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faXmark_1.faXmark }) })] }));
+                (0, jsx_runtime_1.jsx)(button_1.Button, { className: tag_style_1.classes.close, variant: "plain", color: color, onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faXmark_1.faXmark }) })] }));
 });

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

@@ -12,7 +12,7 @@ export type SortInfo<V extends Id = Id> = {
     destination: V;
     placement: SortPlacement;
 };
-export interface TreeBaseProps<N extends NodeType<V>, V extends Id = Id> extends Omit<SelectionContextBaseProps<N, V>, 'options'>, Omit<DivProps, 'defaultValue' | 'onChange' | 'onToggle'> {
+export interface TreeSharedProps<N extends NodeType<V>, V extends Id = Id> extends Omit<SelectionContextBaseProps<N, V>, 'options'> {
     nodes?: N[];
     /** 默认为`label` */
     labelKey?: keyof N;
@@ -33,6 +33,8 @@ export interface TreeBaseProps<N extends NodeType<V>, V extends Id = Id> extends
     /** 是否显示拖拽把手，默认为`true` */
     showDragHandle?: boolean;
     onSort?(info: SortInfo<V>): void;
+}
+export interface TreeBaseProps<N extends NodeType<V>, V extends Id = Id> extends TreeSharedProps<N, V>, Omit<DivProps, 'defaultValue' | 'onChange' | 'onToggle'> {
     searchable?: boolean;
     searchInputProps?: InputProps;
     defaultSearchValue?: string;

package/dist/cjs/components/tree/tree.js

@@ -18,7 +18,7 @@ const TreeContext = (0, react_2.createContext)({});
 function useTreeContext() {
     return (0, react_2.useContext)(TreeContext);
 }
-exports.Tree = (0, react_2.memo)(({ nodes, labelKey = 'label', searchTokenKey, showLine = true, indent = 24, renderExpandIcon, multiple, showCheckbox = !!multiple, readOnly, clickLabelToExpand, defaultExpanded, expanded, onExpandedChange, sortable = false, showDragHandle = true, onSort, searchable, searchInputProps, defaultSearchValue, searchValue, onSearchChange, 
+exports.Tree = (0, react_2.memo)(({ nodes, labelKey = 'label', searchTokenKey, showLine = true, indent = 24, renderExpandIcon, multiple, showCheckbox = !!multiple, readOnly, clickLabelToExpand = false, defaultExpanded, expanded, onExpandedChange, sortable = false, showDragHandle = true, onSort, searchable, defaultSearchValue = '', searchValue, onSearchChange, searchInputProps, 
 // 从SelectionContext继承来的属性
 primaryKey = 'id', childrenKey = 'children', relation = 'dependent', integration = 'shallowest', clearable, disabled, defaultValue, value, onChange, onToggle, ...props }) => {
     /**
@@ -58,7 +58,7 @@ primaryKey = 'id', childrenKey = 'children', relation = 'dependent', integration
                         setInnerSearchValue(e.target.value);
                     } }), (0, jsx_runtime_1.jsx)(selectionContext_1.SelectionContext, { ...{
                     options: actualTreeNodes, primaryKey, childrenKey, relation, integration,
-                    multiple, defaultValue, value, onChange, disabled
+                    disabled, multiple, defaultValue, value, onChange, onToggle
                 }, children: (0, jsx_runtime_1.jsx)(TreeContext, { value: (0, react_2.useMemo)(() => ({
                         expandedSet, toggleExpanded, indent, renderExpandIcon, clickLabelToExpand,
                         showCheckbox, readOnly, disabled