@canlooks/can-ui 0.0.139 → 0.0.141

package/dist/cjs/components/curd/curd.js

@@ -58,9 +58,14 @@ exports.Curd = (0, react_1.memo)((props) => {
      * -------------------------------------------------------------
      * 筛选部分
      */
+    const inlineFilterRef = (0, react_1.useRef)(null);
     const innerFilterRef = (0, react_1.useRef)(null);
-    const filterHandler = (value) => {
-        onFilter?.(value);
+    const getFilterValue = () => ({
+        ...inlineFilterRef.current.getFormValue(),
+        ...innerFilterRef.current.getFormValue()
+    });
+    const filterHandler = () => {
+        onFilter?.(getFilterValue());
         innerLoadRows().then();
     };
     const renderFilterableFn = () => {
@@ -139,7 +144,7 @@ exports.Curd = (0, react_1.memo)((props) => {
                     page: innerPage.current,
                     pageSize: innerPageSize.current
                 }
-                : void 0, innerFilterRef.current.getFormValue(), innerOrderColumn.current
+                : void 0, getFilterValue(), innerOrderColumn.current
                 ? {
                     field: innerOrderColumn.current,
                     type: innerOrderType.current
@@ -207,7 +212,7 @@ exports.Curd = (0, react_1.memo)((props) => {
                 }, filterProps, {
                     ref: innerFilterRef,
                     ...filterableProps?.showButton === false
-                        ? { onChange: (field, value, formValue) => filterHandler(formValue) }
+                        ? { onChange: filterHandler }
                         : { onFinish: filterHandler }
                 }), children: renderFilterableFn() }), (creatable || toolbarLeft || toolbarRight || reloadable || resizable || columnConfigurable) &&
                 (0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.toolbar, children: [(0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.toolbarLeft, children: [creatable &&
@@ -218,7 +223,7 @@ exports.Curd = (0, react_1.memo)((props) => {
                                     (0, jsx_runtime_1.jsx)(curdColumnConfig_1.CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder })] })] }), (0, jsx_runtime_1.jsx)("div", { className: curd_style_1.classes.card, children: (0, jsx_runtime_1.jsx)(dataGrid_1.DataGrid, { ...dataGridProps, columns: actualColumns, tableProps: {
                         ...props.tableProps,
                         ...resizable && { size: innerSize.current }
-                    }, loading: innerLoading.current, rows: innerRows.current, paginatable: !loadRows && props.paginatable, renderPagination: loadRows && props.paginatable !== false
+                    }, loading: innerLoading.current, rows: innerRows.current, filterProps: { ref: inlineFilterRef }, onFilter: filterHandler, paginatable: !loadRows && props.paginatable, renderPagination: loadRows && props.paginatable !== false
                         ? () => (0, jsx_runtime_1.jsx)(pagination_1.Pagination, { ...props.paginationProps, total: innerTotal.current, page: innerPage.current, onPageChange: setInnerPage, pageSize: innerPageSize.current, onPageSizeChange: setInnerPageSize })
                         : props.renderPagination, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler }) }), (creatable || updatable) &&
                 (0, jsx_runtime_1.jsx)(curdDialog_1.CurdDialog, { ...dialogProps, ref: curdDialogRef, onFinish: finishHandler, curdProps: props })] }));

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

@@ -8,6 +8,7 @@ import { RadioProps } from '../radio';
 import { FieldPath } from '../../utils';
 import { FormProps, FormValue } from '../form';
 import { FilterControlProps, FilterOptionsProps } from './filterBubbleContent';
+import { BubbleProps } from '../bubble';
 export type RowType = Obj;
 export interface ColumnType<R extends RowType = RowType> extends Omit<ComponentProps<'td'>, 'key' | 'ref' | 'title' | 'children'>, Omit<ComponentProps<'th'>, 'key' | 'ref' | 'title' | 'children'> {
     title?: ReactNode;
@@ -73,6 +74,7 @@ export interface DataGridBaseProps<R extends RowType = RowType> extends DataGrid
     rows?: R[];
     filterProps?: FormProps;
     initialFilterValue?: FormValue;
+    filterBubbleProps?: BubbleProps;
     onFilter?(filterValue: FormValue): void;
     onFilterClick?(column: Id, e: React.MouseEvent<HTMLButtonElement>): void;
     /** 若需要本地筛选，必须指定该方法 */

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

@@ -19,7 +19,7 @@ const DataGridContext = (0, react_1.createContext)({});
 function useDataGridContext() {
     return (0, react_1.useContext)(DataGridContext);
 }
-exports.DataGrid = (0, react_1.memo)(({ slots, slotProps, columns, rows, rowProps, primaryKey = 'id', childrenKey = null, filterProps, initialFilterValue, onFilter, onFilterClick, filterPredicate, defaultOrderColumn, orderColumn, defaultOrderType = 'descend', orderType, onOrderChange, selectable, relation = 'dependent', integration = 'shallowest', allowSelectAll = true, clickRowToSelect = true, selectorProps, indent = 24, renderExpandIcon, defaultExpanded, expanded, onExpandedChange, paginatable = true, paginationProps, renderPagination, loading, emptyPlaceholder, columnResizable = false, size, bordered, striped, tableProps, multiple, defaultValue, value, onChange, ...props }) => {
+exports.DataGrid = (0, react_1.memo)(({ slots, slotProps, columns, rows, rowProps, primaryKey = 'id', childrenKey = null, filterProps, initialFilterValue, filterBubbleProps, onFilter, onFilterClick, filterPredicate, defaultOrderColumn, orderColumn, defaultOrderType = 'descend', orderType, onOrderChange, selectable, relation = 'dependent', integration = 'shallowest', allowSelectAll = true, clickRowToSelect = true, selectorProps, indent = 24, renderExpandIcon, defaultExpanded, expanded, onExpandedChange, paginatable = true, paginationProps, renderPagination, loading, emptyPlaceholder, columnResizable = false, size, bordered, striped, tableProps, multiple, defaultValue, value, onChange, ...props }) => {
     /**
      * ---------------------------------------------------------------
      * 选择行
@@ -131,12 +131,12 @@ exports.DataGrid = (0, react_1.memo)(({ slots, slotProps, columns, rows, rowProp
         return orderedRows?.slice((page - 1) * pageSize, page * pageSize);
     }, [orderedRows, _paginationProps.page, _paginationProps.pageSize, paginatable]);
     return ((0, jsx_runtime_1.jsxs)(loading_1.Loading, { fill: false, ...props, css: dataGrid_style_1.style, className: (0, utils_1.clsx)(dataGrid_style_1.classes.root, props.className), open: loading, "data-column-resizable": columnResizable, children: [(0, jsx_runtime_1.jsx)(form_1.Form, { ...(0, utils_1.mergeComponentProps)({
+                    className: dataGrid_style_1.classes.filterForm,
                     variant: 'plain',
                     initialValue: innerFilterValue
                 }, filterProps, {
-                    className: dataGrid_style_1.classes.filterForm,
                     onFinish: filterHandler
-                }), children: (0, jsx_runtime_1.jsx)(columnResize_1.ColumnResizeContext, { columnResizable: columnResizable, children: ({ scrollerRef, tableRef }) => (0, jsx_runtime_1.jsxs)(table_1.TableContainer, { ref: scrollerRef, className: dataGrid_style_1.classes.container, children: [(0, jsx_runtime_1.jsx)(table_1.Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: (0, utils_1.cloneRef)(tableProps?.ref, tableRef), children: (0, jsx_runtime_1.jsxs)(selectionContext_1.SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey !== null ? childrenKey : void 0, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, children: [(0, jsx_runtime_1.jsx)(dataGridHead_1.DataGridHead, { rows: rows, flattedColumns: flattedColumns, completedColumns: completedColumns, primaryKey: primaryKey, allowSelectAll: allowSelectAll, columnResizable: columnResizable, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, onFilterClick: onFilterClick }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)(DataGridContext, { value: (0, react_1.useMemo)(() => ({
+                }), children: (0, jsx_runtime_1.jsx)(columnResize_1.ColumnResizeContext, { columnResizable: columnResizable, children: ({ scrollerRef, tableRef }) => (0, jsx_runtime_1.jsxs)(table_1.TableContainer, { ref: scrollerRef, className: dataGrid_style_1.classes.container, children: [(0, jsx_runtime_1.jsx)(table_1.Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: (0, utils_1.cloneRef)(tableProps?.ref, tableRef), children: (0, jsx_runtime_1.jsxs)(selectionContext_1.SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey !== null ? childrenKey : void 0, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, children: [(0, jsx_runtime_1.jsx)(dataGridHead_1.DataGridHead, { rows: rows, flattedColumns: flattedColumns, completedColumns: completedColumns, primaryKey: primaryKey, allowSelectAll: allowSelectAll, columnResizable: columnResizable, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, filterBubbleProps: filterBubbleProps, onFilterClick: onFilterClick }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)(DataGridContext, { value: (0, react_1.useMemo)(() => ({
                                                     slots, slotProps,
                                                     rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
                                                     expandedSet, flattedColumns, toggleExpanded

package/dist/cjs/components/dataGrid/dataGridHead.d.ts

@@ -6,6 +6,7 @@ interface DataGridHeadProps<R extends RowType, V extends Id = Id> extends Requir
     orderColumn: Id | undefined;
     flattedColumns: (symbol | ColumnType<R>)[] | undefined;
     completedColumns: (symbol | ColumnType<R>)[] | undefined;
+    filterBubbleProps: DataGridProps<R, V>['filterBubbleProps'];
     onFilterClick: DataGridProps<R, V>['onFilterClick'];
 }
 export declare const DataGridHead: <R extends RowType, V extends Id = Id>(props: DataGridHeadProps<R, V>) => ReactElement;

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

@@ -18,7 +18,7 @@ const bubble_1 = require("../bubble");
 const filterBubbleContent_1 = require("./filterBubbleContent");
 const form_1 = require("../form");
 const utils_1 = require("../../utils");
-exports.DataGridHead = (0, react_2.memo)(({ allowSelectAll, columnResizable, flattedColumns, completedColumns, rows, primaryKey, orderColumn, orderType, onOrderChange, onFilterClick }) => {
+exports.DataGridHead = (0, react_2.memo)(({ allowSelectAll, columnResizable, flattedColumns, completedColumns, rows, primaryKey, orderColumn, orderType, onOrderChange, filterBubbleProps, onFilterClick }) => {
     const { multiple, setValue, selectionStatus } = (0, selectionContext_1.useSelectionContext)();
     const allSelectionStatus = (0, react_2.useMemo)(() => {
         if (multiple && allowSelectAll) {
@@ -103,7 +103,14 @@ exports.DataGridHead = (0, react_2.memo)(({ allowSelectAll, columnResizable, fla
                                     : (0, jsx_runtime_1.jsx)("div", { className: dataGrid_style_1.classes.title, children: title }), filter &&
                                     (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u7B5B\u9009", placement: "top", clickToClose: true, children: filter === true
                                             ? filterButton
-                                            : (0, jsx_runtime_1.jsx)(bubble_1.Bubble, { style: { maxWidth: 360 }, trigger: "click", placement: "bottomRight", autoClose: false, content: (0, jsx_runtime_1.jsx)(filterBubbleContent_1.FilterBubbleContent, { columnKey: _key, columnFilterProps: filter }), onClick: e => e.stopPropagation(), children: filterButton }) })] })
+                                            : (0, jsx_runtime_1.jsx)(bubble_1.Bubble, { ...(0, utils_1.mergeComponentProps)({
+                                                    style: { maxWidth: 360 },
+                                                    trigger: 'click',
+                                                    placement: 'bottomRight',
+                                                    autoClose: false,
+                                                    content: ((0, jsx_runtime_1.jsx)(filterBubbleContent_1.FilterBubbleContent, { columnKey: _key, columnFilterProps: filter })),
+                                                    onClick: e => e.stopPropagation()
+                                                }, filterBubbleProps), children: filterButton }) })] })
                         : title)
                 ];
             }) }, i));

package/dist/cjs/components/dataGrid/filterBubbleContent.d.ts

@@ -8,6 +8,8 @@ type FilterSharedProps = {
 export interface FilterOptionsProps extends FilterSharedProps, OptionsBaseProps<MenuOptionType> {
     /** 默认为`true` */
     multiple?: boolean;
+    /** 默认为`false` */
+    searchable?: boolean;
 }
 export interface FilterControlProps extends FilterSharedProps {
     control: FormItemChildren;

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

@@ -9,33 +9,43 @@ const button_1 = require("../button");
 const popper_1 = require("../popper");
 const react_1 = require("react");
 const form_1 = require("../form");
+const filterBubbleContent_style_1 = require("./filterBubbleContent.style");
+const input_1 = require("../input");
+const icon_1 = require("../icon");
+const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
+const utils_1 = require("../../utils");
 exports.FilterBubbleContent = (0, react_1.memo)(({ columnKey, columnFilterProps }) => {
     const { formRef } = (0, form_1.useFormContext)();
-    /**
-     * ------------------------------------------------------------------------------------
-     * 弹框关闭时触发筛选
-     */
     const { open, setOpen } = (0, popper_1.usePopperContext)();
     (0, react_1.useEffect)(() => {
-        !open && formRef.current.submit().then();
+        if (!open && !('control' in columnFilterProps) && columnFilterProps.multiple) {
+            // 多选模式下，关闭弹框触发筛选
+            formRef.current.submit().then();
+        }
     }, [open]);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(form_1.FormItem, { field: columnKey, children: 'control' in columnFilterProps
                     ? columnFilterProps.control
-                    : (0, jsx_runtime_1.jsx)(FilterOptions, { ...columnFilterProps }) }), columnFilterProps.showButton !== false
-                ? (0, jsx_runtime_1.jsx)(flex_1.Flex, { gap: 6, justifyContent: "center", marginTop: 6, children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "text", onClick: () => {
+                    : (0, jsx_runtime_1.jsx)(FilterOptions, { ...columnFilterProps, onChange: value => {
+                            columnFilterProps.onChange?.(value);
+                            !columnFilterProps.multiple && setOpen(false);
+                        } }) }), columnFilterProps.showButton !== false &&
+                (0, jsx_runtime_1.jsx)(flex_1.Flex, { gap: 6, justifyContent: "center", marginTop: 6, children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "text", onClick: () => {
                             formRef.current.setFieldValue(columnKey, null);
                             setOpen(false);
-                        }, children: "\u91CD\u7F6E" }) })
-                : (0, jsx_runtime_1.jsx)(TriggerFilterOnChange, {})] }));
+                        }, children: "\u91CD\u7F6E" }) }), !('control' in columnFilterProps) && !columnFilterProps.multiple &&
+                // 单选模式，变化即触发筛选
+                (0, jsx_runtime_1.jsx)(TriggerFilterOnChange, {})] }));
 });
-const FilterOptions = (0, react_1.memo)(({ multiple = true, showButton = true, value, onChange, ...props }) => {
+const FilterOptions = (0, react_1.memo)(({ multiple = true, showButton = true, searchable = false, value, onChange, ...props }) => {
     const [selectedValue, toggleSelect] = (0, selectionContext_1.useFlatSelection)({ multiple, value, onChange });
-    return ((0, jsx_runtime_1.jsx)(optionsBase_1.OptionsBase, { showCheckbox: multiple, ...props, selectedValue: selectedValue, onToggleSelected: toggleSelect }));
+    const [searchValue, setSearchValue] = (0, react_1.useState)('');
+    const deferredSearchValue = (0, react_1.useDeferredValue)(searchValue);
+    return ((0, jsx_runtime_1.jsxs)("div", { css: filterBubbleContent_style_1.style, children: [(0, jsx_runtime_1.jsx)(input_1.Input, { prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: free_solid_svg_icons_1.faSearch }), placeholder: "\u641C\u7D22", value: searchValue, onChange: e => setSearchValue(e.target.value) }), (0, jsx_runtime_1.jsx)(optionsBase_1.OptionsBase, { showCheckbox: multiple, ...props, searchValue: deferredSearchValue, selectedValue: selectedValue, onToggleSelected: toggleSelect })] }));
 });
 const TriggerFilterOnChange = (0, react_1.memo)(() => {
     const { formRef } = (0, form_1.useFormContext)();
     const { formValue } = (0, form_1.useFormValueContext)();
-    (0, react_1.useEffect)(() => {
+    (0, utils_1.useUpdateEffect)(() => {
         formRef.current.submit().then();
     }, [formValue]);
     return null;

package/dist/cjs/components/dataGrid/filterBubbleContent.style.d.ts

@@ -0,0 +1 @@
+export declare const style: import("@emotion/react").SerializedStyles;

package/dist/cjs/components/dataGrid/filterBubbleContent.style.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = void 0;
+const react_1 = require("@emotion/react");
+exports.style = (0, react_1.css) `
+    display: flex;
+    flex-direction: column;
+    gap: 4px
+`;

package/dist/esm/components/curd/curd.js

@@ -55,9 +55,14 @@ export const Curd = memo((props) => {
      * -------------------------------------------------------------
      * 筛选部分
      */
+    const inlineFilterRef = useRef(null);
     const innerFilterRef = useRef(null);
-    const filterHandler = (value) => {
-        onFilter?.(value);
+    const getFilterValue = () => ({
+        ...inlineFilterRef.current.getFormValue(),
+        ...innerFilterRef.current.getFormValue()
+    });
+    const filterHandler = () => {
+        onFilter?.(getFilterValue());
         innerLoadRows().then();
     };
     const renderFilterableFn = () => {
@@ -136,7 +141,7 @@ export const Curd = memo((props) => {
                     page: innerPage.current,
                     pageSize: innerPageSize.current
                 }
-                : void 0, innerFilterRef.current.getFormValue(), innerOrderColumn.current
+                : void 0, getFilterValue(), innerOrderColumn.current
                 ? {
                     field: innerOrderColumn.current,
                     type: innerOrderType.current
@@ -204,7 +209,7 @@ export const Curd = memo((props) => {
                 }, filterProps, {
                     ref: innerFilterRef,
                     ...filterableProps?.showButton === false
-                        ? { onChange: (field, value, formValue) => filterHandler(formValue) }
+                        ? { onChange: filterHandler }
                         : { onFinish: filterHandler }
                 }), children: renderFilterableFn() }), (creatable || toolbarLeft || toolbarRight || reloadable || resizable || columnConfigurable) &&
                 _jsxs("div", { className: classes.toolbar, children: [_jsxs("div", { className: classes.toolbarLeft, children: [creatable &&
@@ -215,7 +220,7 @@ export const Curd = memo((props) => {
                                     _jsx(CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder })] })] }), _jsx("div", { className: classes.card, children: _jsx(DataGrid, { ...dataGridProps, columns: actualColumns, tableProps: {
                         ...props.tableProps,
                         ...resizable && { size: innerSize.current }
-                    }, loading: innerLoading.current, rows: innerRows.current, paginatable: !loadRows && props.paginatable, renderPagination: loadRows && props.paginatable !== false
+                    }, loading: innerLoading.current, rows: innerRows.current, filterProps: { ref: inlineFilterRef }, onFilter: filterHandler, paginatable: !loadRows && props.paginatable, renderPagination: loadRows && props.paginatable !== false
                         ? () => _jsx(Pagination, { ...props.paginationProps, total: innerTotal.current, page: innerPage.current, onPageChange: setInnerPage, pageSize: innerPageSize.current, onPageSizeChange: setInnerPageSize })
                         : props.renderPagination, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler }) }), (creatable || updatable) &&
                 _jsx(CurdDialog, { ...dialogProps, ref: curdDialogRef, onFinish: finishHandler, curdProps: props })] }));

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

@@ -8,6 +8,7 @@ import { RadioProps } from '../radio';
 import { FieldPath } from '../../utils';
 import { FormProps, FormValue } from '../form';
 import { FilterControlProps, FilterOptionsProps } from './filterBubbleContent';
+import { BubbleProps } from '../bubble';
 export type RowType = Obj;
 export interface ColumnType<R extends RowType = RowType> extends Omit<ComponentProps<'td'>, 'key' | 'ref' | 'title' | 'children'>, Omit<ComponentProps<'th'>, 'key' | 'ref' | 'title' | 'children'> {
     title?: ReactNode;
@@ -73,6 +74,7 @@ export interface DataGridBaseProps<R extends RowType = RowType> extends DataGrid
     rows?: R[];
     filterProps?: FormProps;
     initialFilterValue?: FormValue;
+    filterBubbleProps?: BubbleProps;
     onFilter?(filterValue: FormValue): void;
     onFilterClick?(column: Id, e: React.MouseEvent<HTMLButtonElement>): void;
     /** 若需要本地筛选，必须指定该方法 */

package/dist/esm/components/dataGrid/dataGrid.js

@@ -15,7 +15,7 @@ const DataGridContext = createContext({});
 export function useDataGridContext() {
     return useContext(DataGridContext);
 }
-export const DataGrid = memo(({ slots, slotProps, columns, rows, rowProps, primaryKey = 'id', childrenKey = null, filterProps, initialFilterValue, onFilter, onFilterClick, filterPredicate, defaultOrderColumn, orderColumn, defaultOrderType = 'descend', orderType, onOrderChange, selectable, relation = 'dependent', integration = 'shallowest', allowSelectAll = true, clickRowToSelect = true, selectorProps, indent = 24, renderExpandIcon, defaultExpanded, expanded, onExpandedChange, paginatable = true, paginationProps, renderPagination, loading, emptyPlaceholder, columnResizable = false, size, bordered, striped, tableProps, multiple, defaultValue, value, onChange, ...props }) => {
+export const DataGrid = memo(({ slots, slotProps, columns, rows, rowProps, primaryKey = 'id', childrenKey = null, filterProps, initialFilterValue, filterBubbleProps, onFilter, onFilterClick, filterPredicate, defaultOrderColumn, orderColumn, defaultOrderType = 'descend', orderType, onOrderChange, selectable, relation = 'dependent', integration = 'shallowest', allowSelectAll = true, clickRowToSelect = true, selectorProps, indent = 24, renderExpandIcon, defaultExpanded, expanded, onExpandedChange, paginatable = true, paginationProps, renderPagination, loading, emptyPlaceholder, columnResizable = false, size, bordered, striped, tableProps, multiple, defaultValue, value, onChange, ...props }) => {
     /**
      * ---------------------------------------------------------------
      * 选择行
@@ -127,12 +127,12 @@ export const DataGrid = memo(({ slots, slotProps, columns, rows, rowProps, prima
         return orderedRows?.slice((page - 1) * pageSize, page * pageSize);
     }, [orderedRows, _paginationProps.page, _paginationProps.pageSize, paginatable]);
     return (_jsxs(Loading, { fill: false, ...props, css: style, className: clsx(classes.root, props.className), open: loading, "data-column-resizable": columnResizable, children: [_jsx(Form, { ...mergeComponentProps({
+                    className: classes.filterForm,
                     variant: 'plain',
                     initialValue: innerFilterValue
                 }, filterProps, {
-                    className: classes.filterForm,
                     onFinish: filterHandler
-                }), children: _jsx(ColumnResizeContext, { columnResizable: columnResizable, children: ({ scrollerRef, tableRef }) => _jsxs(TableContainer, { ref: scrollerRef, className: classes.container, children: [_jsx(Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: cloneRef(tableProps?.ref, tableRef), children: _jsxs(SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey !== null ? childrenKey : void 0, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, children: [_jsx(DataGridHead, { rows: rows, flattedColumns: flattedColumns, completedColumns: completedColumns, primaryKey: primaryKey, allowSelectAll: allowSelectAll, columnResizable: columnResizable, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, onFilterClick: onFilterClick }), _jsx("tbody", { children: _jsx(DataGridContext, { value: useMemo(() => ({
+                }), children: _jsx(ColumnResizeContext, { columnResizable: columnResizable, children: ({ scrollerRef, tableRef }) => _jsxs(TableContainer, { ref: scrollerRef, className: classes.container, children: [_jsx(Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: cloneRef(tableProps?.ref, tableRef), children: _jsxs(SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey !== null ? childrenKey : void 0, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, children: [_jsx(DataGridHead, { rows: rows, flattedColumns: flattedColumns, completedColumns: completedColumns, primaryKey: primaryKey, allowSelectAll: allowSelectAll, columnResizable: columnResizable, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, filterBubbleProps: filterBubbleProps, onFilterClick: onFilterClick }), _jsx("tbody", { children: _jsx(DataGridContext, { value: useMemo(() => ({
                                                     slots, slotProps,
                                                     rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
                                                     expandedSet, flattedColumns, toggleExpanded

package/dist/esm/components/dataGrid/dataGridHead.d.ts

@@ -6,6 +6,7 @@ interface DataGridHeadProps<R extends RowType, V extends Id = Id> extends Requir
     orderColumn: Id | undefined;
     flattedColumns: (symbol | ColumnType<R>)[] | undefined;
     completedColumns: (symbol | ColumnType<R>)[] | undefined;
+    filterBubbleProps: DataGridProps<R, V>['filterBubbleProps'];
     onFilterClick: DataGridProps<R, V>['onFilterClick'];
 }
 export declare const DataGridHead: <R extends RowType, V extends Id = Id>(props: DataGridHeadProps<R, V>) => ReactElement;

package/dist/esm/components/dataGrid/dataGridHead.js

@@ -14,8 +14,8 @@ import { faFilter } from '@fortawesome/free-solid-svg-icons/faFilter';
 import { Bubble } from '../bubble';
 import { FilterBubbleContent } from './filterBubbleContent';
 import { useFormValueContext } from '../form';
-import { isUnset } from '../../utils';
-export const DataGridHead = memo(({ allowSelectAll, columnResizable, flattedColumns, completedColumns, rows, primaryKey, orderColumn, orderType, onOrderChange, onFilterClick }) => {
+import { isUnset, mergeComponentProps } from '../../utils';
+export const DataGridHead = memo(({ allowSelectAll, columnResizable, flattedColumns, completedColumns, rows, primaryKey, orderColumn, orderType, onOrderChange, filterBubbleProps, onFilterClick }) => {
     const { multiple, setValue, selectionStatus } = useSelectionContext();
     const allSelectionStatus = useMemo(() => {
         if (multiple && allowSelectAll) {
@@ -100,7 +100,14 @@ export const DataGridHead = memo(({ allowSelectAll, columnResizable, flattedColu
                                     : _jsx("div", { className: classes.title, children: title }), filter &&
                                     _jsx(Tooltip, { title: "\u7B5B\u9009", placement: "top", clickToClose: true, children: filter === true
                                             ? filterButton
-                                            : _jsx(Bubble, { style: { maxWidth: 360 }, trigger: "click", placement: "bottomRight", autoClose: false, content: _jsx(FilterBubbleContent, { columnKey: _key, columnFilterProps: filter }), onClick: e => e.stopPropagation(), children: filterButton }) })] })
+                                            : _jsx(Bubble, { ...mergeComponentProps({
+                                                    style: { maxWidth: 360 },
+                                                    trigger: 'click',
+                                                    placement: 'bottomRight',
+                                                    autoClose: false,
+                                                    content: (_jsx(FilterBubbleContent, { columnKey: _key, columnFilterProps: filter })),
+                                                    onClick: e => e.stopPropagation()
+                                                }, filterBubbleProps), children: filterButton }) })] })
                         : title)
                 ];
             }) }, i));

package/dist/esm/components/dataGrid/filterBubbleContent.d.ts

@@ -8,6 +8,8 @@ type FilterSharedProps = {
 export interface FilterOptionsProps extends FilterSharedProps, OptionsBaseProps<MenuOptionType> {
     /** 默认为`true` */
     multiple?: boolean;
+    /** 默认为`false` */
+    searchable?: boolean;
 }
 export interface FilterControlProps extends FilterSharedProps {
     control: FormItemChildren;

package/dist/esm/components/dataGrid/filterBubbleContent.js

@@ -4,35 +4,45 @@ import { useFlatSelection } from '../selectionContext';
 import { Flex } from '../flex';
 import { Button } from '../button';
 import { usePopperContext } from '../popper';
-import { memo, useEffect } from 'react';
+import { memo, useDeferredValue, useEffect, useState } from 'react';
 import { FormItem, useFormContext, useFormValueContext } from '../form';
+import { style } from './filterBubbleContent.style';
+import { Input } from '../input';
+import { Icon } from '../icon';
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import { useUpdateEffect } from '../../utils';
 export const FilterBubbleContent = memo(({ columnKey, columnFilterProps }) => {
     const { formRef } = useFormContext();
-    /**
-     * ------------------------------------------------------------------------------------
-     * 弹框关闭时触发筛选
-     */
     const { open, setOpen } = usePopperContext();
     useEffect(() => {
-        !open && formRef.current.submit().then();
+        if (!open && !('control' in columnFilterProps) && columnFilterProps.multiple) {
+            // 多选模式下，关闭弹框触发筛选
+            formRef.current.submit().then();
+        }
     }, [open]);
     return (_jsxs(_Fragment, { children: [_jsx(FormItem, { field: columnKey, children: 'control' in columnFilterProps
                     ? columnFilterProps.control
-                    : _jsx(FilterOptions, { ...columnFilterProps }) }), columnFilterProps.showButton !== false
-                ? _jsx(Flex, { gap: 6, justifyContent: "center", marginTop: 6, children: _jsx(Button, { variant: "text", onClick: () => {
+                    : _jsx(FilterOptions, { ...columnFilterProps, onChange: value => {
+                            columnFilterProps.onChange?.(value);
+                            !columnFilterProps.multiple && setOpen(false);
+                        } }) }), columnFilterProps.showButton !== false &&
+                _jsx(Flex, { gap: 6, justifyContent: "center", marginTop: 6, children: _jsx(Button, { variant: "text", onClick: () => {
                             formRef.current.setFieldValue(columnKey, null);
                             setOpen(false);
-                        }, children: "\u91CD\u7F6E" }) })
-                : _jsx(TriggerFilterOnChange, {})] }));
+                        }, children: "\u91CD\u7F6E" }) }), !('control' in columnFilterProps) && !columnFilterProps.multiple &&
+                // 单选模式，变化即触发筛选
+                _jsx(TriggerFilterOnChange, {})] }));
 });
-const FilterOptions = memo(({ multiple = true, showButton = true, value, onChange, ...props }) => {
+const FilterOptions = memo(({ multiple = true, showButton = true, searchable = false, value, onChange, ...props }) => {
     const [selectedValue, toggleSelect] = useFlatSelection({ multiple, value, onChange });
-    return (_jsx(OptionsBase, { showCheckbox: multiple, ...props, selectedValue: selectedValue, onToggleSelected: toggleSelect }));
+    const [searchValue, setSearchValue] = useState('');
+    const deferredSearchValue = useDeferredValue(searchValue);
+    return (_jsxs("div", { css: style, children: [_jsx(Input, { prefix: _jsx(Icon, { icon: faSearch }), placeholder: "\u641C\u7D22", value: searchValue, onChange: e => setSearchValue(e.target.value) }), _jsx(OptionsBase, { showCheckbox: multiple, ...props, searchValue: deferredSearchValue, selectedValue: selectedValue, onToggleSelected: toggleSelect })] }));
 });
 const TriggerFilterOnChange = memo(() => {
     const { formRef } = useFormContext();
     const { formValue } = useFormValueContext();
-    useEffect(() => {
+    useUpdateEffect(() => {
         formRef.current.submit().then();
     }, [formValue]);
     return null;

package/dist/esm/components/dataGrid/filterBubbleContent.style.d.ts

@@ -0,0 +1 @@
+export declare const style: import("@emotion/react").SerializedStyles;

package/dist/esm/components/dataGrid/filterBubbleContent.style.js

@@ -0,0 +1,6 @@
+import { css } from '@emotion/react';
+export const style = css `
+    display: flex;
+    flex-direction: column;
+    gap: 4px
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.139",
+  "version": "0.0.141",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",