@canlooks/can-ui 0.0.70 → 0.0.71

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

@@ -1,4 +1,4 @@
-import { JSX, ReactElement, ReactNode } from 'react';
+import React, { ComponentProps, ReactElement, ReactNode } from 'react';
 import { DivProps, Id, Obj, ToRequired } from '../../types';
 import { SelectionContextProps } from '../selectionContext';
 import { PaginationProps } from '../pagination';
@@ -6,9 +6,10 @@ import { TableProps } from '../table';
 import { CheckboxProps } from '../checkbox';
 import { RadioProps } from '../radio';
 import { FieldPath } from '../../utils';
+import { FormProps, FormValue } from '../form';
+import { FilterControlProps, FilterOptionsProps } from './filterBubbleContent';
 export type RowType = Obj;
-export type OrderType = 'ascend' | 'descend';
-export interface ColumnType<R extends RowType = RowType> extends Omit<JSX.IntrinsicElements['td'], 'key' | 'ref' | 'title' | 'children'>, Omit<JSX.IntrinsicElements['th'], 'key' | 'ref' | 'title' | 'children'> {
+export interface ColumnType<R extends RowType = RowType> extends Omit<ComponentProps<'td'>, 'key' | 'ref' | 'title' | 'children'>, Omit<ComponentProps<'th'>, 'key' | 'ref' | 'title' | 'children'> {
     title?: ReactNode;
     /** 若不指定key，默认使用{@link field}作为key */
     key?: string | number;
@@ -18,15 +19,24 @@ export interface ColumnType<R extends RowType = RowType> extends Omit<JSX.Intrin
     /** 指定children后，下列属性均不生效 */
     field?: FieldPath;
     render?(row: R, index?: number, rows?: R[]): ReactNode;
-    /** 指定为true时表示使用服务端排序，组件只做样式处理，不做数据排序处理；本地排序需指定 “正序” 的排序方法，倒序会自动处理 */
+    /**
+     * @enum true 使用服务端排序，组件只做样式处理，不做数据排序处理；
+     * @enum function 本地排序需指定 `正序` 的排序方法，倒序会自动处理
+     */
     sorter?: boolean | ((a: R, b: R) => number);
+    /**
+     * @enum true 不会弹出气泡框，需配合{@link DataGridBaseProps.onFilterClick}实现筛选逻辑
+     * @enum FilterOptionsProps 传递至`OptionsBase`组件
+     * @enum FilterControlProps 自定义渲染气泡内容
+     */
+    filter?: boolean | FilterOptionsProps | FilterControlProps;
     /** @private 内部使用，在{@link useDataGridColumns}内赋值 */
-    _key?: string | number;
+    _key?: Id;
     /** @private 内部使用，在{@link DataGridHead}内计算 */
     _negativeRowSpan?: number;
 }
-type DataGridSharedProps<R extends RowType> = {
-    rowProps?(row: R, index: number, rows: R[]): JSX.IntrinsicElements['tr'];
+type DataGridSharedProps<R extends RowType = RowType> = {
+    rowProps?(row: R, index: number, rows: R[]): ComponentProps<'tr'>;
     /** 数据的主键名，默认为`id` */
     primaryKey?: keyof R;
     /**
@@ -41,9 +51,16 @@ type DataGridSharedProps<R extends RowType> = {
     indent?: number;
     renderExpandIcon?(key: Id, isExpand: boolean, expanded: Id[]): ReactNode;
 };
-export interface DataGridBaseProps<R extends RowType> extends DataGridSharedProps<R>, Omit<DivProps, 'defaultValue' | 'onChange'> {
+export type OrderType = 'ascend' | 'descend';
+export interface DataGridBaseProps<R extends RowType = RowType> extends DataGridSharedProps<R>, Omit<DivProps, 'defaultValue' | 'onChange'> {
     columns?: (ColumnType<R> | symbol)[];
     rows?: R[];
+    filterProps?: FormProps;
+    initialFilterValue?: FormValue;
+    onFilter?(filterValue: FormValue): void;
+    onFilterClick?(column: Id, e: React.MouseEvent<HTMLButtonElement>): void;
+    /** 若需要本地筛选，必须指定该方法 */
+    filterPredicate?(row: R, index: number, filterValue: FormValue): any;
     defaultOrderColumn?: Id;
     orderColumn?: Id;
     defaultOrderType?: OrderType;
@@ -78,20 +95,20 @@ export interface DataGridBaseProps<R extends RowType> extends DataGridSharedProp
     striped?: TableProps['striped'];
     tableProps?: TableProps;
 }
-export interface DataGridSingleProps<R extends RowType, V extends Id = Id> extends DataGridBaseProps<R> {
+export interface DataGridSingleProps<R extends RowType = RowType, V extends Id = Id> extends DataGridBaseProps<R> {
     multiple?: false;
     defaultValue?: V;
     value?: V;
     onChange?(value: V): void;
 }
-export interface DataGridMultipleProps<R extends RowType, V extends Id = Id> extends DataGridBaseProps<R> {
+export interface DataGridMultipleProps<R extends RowType = RowType, V extends Id = Id> extends DataGridBaseProps<R> {
     multiple: true;
     defaultValue?: V[];
     value?: V[];
     onChange?(value: V[]): void;
 }
-export type DataGridProps<R extends RowType, V extends Id = Id> = DataGridSingleProps<R, V> | DataGridMultipleProps<R, V>;
-interface IDataGridContext<R extends RowType> extends ToRequired<DataGridSharedProps<R>, 'primaryKey' | 'childrenKey' | 'clickRowToSelect' | 'indent'> {
+export type DataGridProps<R extends RowType = RowType, V extends Id = Id> = DataGridSingleProps<R, V> | DataGridMultipleProps<R, V>;
+interface IDataGridContext<R extends RowType = RowType> extends ToRequired<DataGridSharedProps<R>, 'primaryKey' | 'childrenKey' | 'clickRowToSelect' | 'indent'> {
     expandedSet: Set<Id>;
     flattedColumns: (symbol | ColumnType<R>)[] | undefined;
     toggleExpanded(key: Id): void;

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

@@ -1,20 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { createContext, memo, useContext, useMemo } from 'react';
+import { createContext, memo, useCallback, useContext, useMemo, useState } from 'react';
 import { classes, style } from './dataGrid.style';
 import { SelectionContext, useSelectionContext } from '../selectionContext';
 import { Pagination } from '../pagination';
 import { Table, TableContainer } from '../table';
-import { clsx, cloneRef, useControlled, useDataGridColumns } from '../../utils';
+import { clsx, cloneRef, useControlled, useDataGridColumns, useSync, mergeComponentProps } from '../../utils';
 import { Loading } from '../loading';
 import { DataGridHead } from './dataGridHead';
 import { Placeholder } from '../placeholder';
 import { DataGridRows } from './dataGridRows';
 import { ColumnResizeContext } from './columnResize';
+import { Form } from '../form';
 const DataGridContext = createContext({});
 export function useDataGridContext() {
     return useContext(DataGridContext);
 }
-export const DataGrid = memo(({ columns, rows, rowProps, primaryKey = 'id', childrenKey = null, 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(({ 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 }) => {
     /**
      * ---------------------------------------------------------------
      * 选择行
@@ -31,7 +32,24 @@ export const DataGrid = memo(({ columns, rows, rowProps, primaryKey = 'id', chil
     });
     /**
      * ---------------------------------------------------------------
-     * 行排序
+     * 筛选
+     */
+    const [innerFilterValue, setInnerFilterValue] = useState(initialFilterValue || {});
+    const filterHandler = (value) => {
+        onFilter?.(value);
+        filterPredicate && setInnerFilterValue(value);
+    };
+    const filteredRows = useMemo(() => {
+        if (!filterPredicate) {
+            return rows;
+        }
+        return rows?.filter((row, index) => {
+            return filterPredicate(row, index, innerFilterValue);
+        });
+    }, [rows, innerFilterValue, filterPredicate]);
+    /**
+     * ---------------------------------------------------------------
+     * 排序
      */
     const [innerOrderColumn, setInnerOrderColumn] = useControlled(() => {
         return defaultOrderColumn ?? flattedColumns
@@ -39,24 +57,25 @@ export const DataGrid = memo(({ columns, rows, rowProps, primaryKey = 'id', chil
             ?._key;
     }, orderColumn);
     const [innerOrderType, setInnerOrderType] = useControlled(defaultOrderType, orderType);
-    const orderChangeHandler = (orderColumn, orderType) => {
-        onOrderChange?.(orderColumn, orderType);
+    const syncOnOrderChange = useSync(onOrderChange);
+    const orderChangeHandler = useCallback((orderColumn, orderType) => {
+        syncOnOrderChange.current?.(orderColumn, orderType);
         setInnerOrderColumn(orderColumn);
         setInnerOrderType(orderType);
-    };
+    }, []);
     const orderedRows = useMemo(() => {
         if (!innerOrderColumn.current) {
-            return rows;
+            return filteredRows;
         }
         const orderingColumn = columnMapByKey.get(innerOrderColumn.current);
         if (!orderingColumn?.sorter || typeof orderingColumn.sorter !== 'function') {
-            return rows;
+            return filteredRows;
         }
-        return rows?.toSorted((a, b) => {
+        return filteredRows?.toSorted((a, b) => {
             const ret = orderingColumn.sorter(a, b);
             return innerOrderType.current === 'ascend' ? ret : -ret;
         });
-    }, [rows, innerOrderColumn.current, innerOrderType.current]);
+    }, [filteredRows, innerOrderColumn.current, innerOrderType.current, columnMapByKey]);
     /**
      * ---------------------------------------------------------------
      * 展开行
@@ -65,16 +84,17 @@ export const DataGrid = memo(({ columns, rows, rowProps, primaryKey = 'id', chil
     const expandedSet = useMemo(() => {
         return new Set(innerExpanded.current);
     }, [innerExpanded.current]);
-    const toggleExpanded = (key) => {
+    const syncOnExpandedChange = useSync(onExpandedChange);
+    const toggleExpanded = useCallback((key) => {
         const currentExpanded = expandedSet.has(key);
         setInnerExpanded(o => {
             const newExpanded = currentExpanded
                 ? o.filter(v => v !== key)
                 : [...o, key];
-            onExpandedChange?.(newExpanded, key, !currentExpanded);
+            syncOnExpandedChange.current?.(newExpanded, key, !currentExpanded);
             return newExpanded;
         });
-    };
+    }, []);
     /**
      * ---------------------------------------------------------------
      * 分页
@@ -106,14 +126,20 @@ export const DataGrid = memo(({ columns, rows, rowProps, primaryKey = 'id', chil
         const { page, pageSize } = _paginationProps;
         return orderedRows?.slice((page - 1) * pageSize, page * pageSize);
     }, [orderedRows, _paginationProps.page, _paginationProps.pageSize, paginatable]);
-    return (_jsxs(Loading, { ...props, css: style, className: clsx(classes.root, props.className), open: loading, "data-column-resizable": columnResizable, 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, { flattedColumns: flattedColumns, completedColumns: completedColumns, rows: rows, primaryKey: primaryKey, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, allowSelectAll: allowSelectAll, columnResizable: columnResizable }), _jsx("tbody", { children: _jsx(DataGridContext, { value: useMemo(() => ({
-                                                rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
-                                                expandedSet, flattedColumns, toggleExpanded
-                                            }), [
-                                                rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
-                                                expandedSet, flattedColumns
-                                            ]), children: !!paginatedRows?.length &&
-                                                _jsx(DataGridRows, { rows: paginatedRows }) }) })] }) }), !paginatedRows?.length && (emptyPlaceholder ?? _jsx(Placeholder, { className: classes.empty }))] }) }), renderPaginationFn()] }));
+    return (_jsxs(Loading, { fill: false, ...props, css: style, className: clsx(classes.root, props.className), open: loading, "data-column-resizable": columnResizable, children: [_jsx(Form, { ...mergeComponentProps({
+                    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(() => ({
+                                                    rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
+                                                    expandedSet, flattedColumns, toggleExpanded
+                                                }), [
+                                                    rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
+                                                    expandedSet, flattedColumns
+                                                ]), children: !!paginatedRows?.length &&
+                                                    _jsx(DataGridRows, { rows: paginatedRows }) }) })] }) }), !paginatedRows?.length && (emptyPlaceholder ?? _jsx(Placeholder, { className: classes.empty }))] }) }) }), renderPaginationFn()] }));
 });
 DataGrid.EXPAND_COLUMN = Symbol('expand-column');
 DataGrid.SELECT_COLUMN = Symbol('select-column');

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

@@ -1,14 +1,16 @@
 export declare const classes: {
     sub: string;
     title: string;
+    children: string;
     container: string;
-    sorter: string;
-    icon: string;
+    filterForm: string;
+    functionalCell: string;
+    sortIcon: string;
+    filterButton: string;
     expandable: string;
     expandableWrap: string;
     selectable: string;
     subTd: string;
-    children: string;
     empty: string;
     resizeHandle: string;
 } & {

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

@@ -2,10 +2,12 @@ import { css } from '@emotion/react';
 import { defineInnerClasses, defineCss } from '../../utils';
 import { classes as loadingClasses } from '../loading/loading.style';
 export const classes = defineInnerClasses('data-grid', [
+    'filterForm',
     'container',
     'title',
-    'sorter',
-    'icon',
+    'functionalCell',
+    'sortIcon',
+    'filterButton',
     'expandable',
     'expandableWrap',
     'selectable',
@@ -16,20 +18,37 @@ export const classes = defineInnerClasses('data-grid', [
     'resizeHandle'
 ]);
 export const style = defineCss(({ spacing, mode, gray, text, colors, easing }) => css `
-    max-height: 100%;
-    min-height: 0;
-    
     .${loadingClasses.container} {
-        height: auto;
         display: flex;
         flex-direction: column;
+        gap: ${spacing[5]}px;
+    }
+
+    .${classes.filterForm} {
+        min-height: 0;
     }
 
     .${classes.container} {
-        flex: 1;
-        
-        &:not(:last-of-type) {
-            margin-bottom: ${spacing[5]}px;
+        height: 100%;
+    }
+
+    .${classes.functionalCell} {
+        display: flex;
+        align-items: center;
+
+        .${classes.title} {
+            flex: 1;
+        }
+
+        .${classes.sortIcon} {
+            color: ${text.placeholder};
+            transition: translate .25s ${easing.swing};
+        }
+
+        .${classes.filterButton} {
+            width: ${20 / 14}em;
+            height: ${20 / 14}em;
+            margin-left: ${spacing[2]}px;
         }
     }
 
@@ -47,35 +66,21 @@ export const style = defineCss(({ spacing, mode, gray, text, colors, easing }) =
             background-color: ${gray(mode === 'light' ? .01 : .22)};
         }
 
-        .${classes.sorter} {
-            display: flex;
-            align-items: center;
-            
-            .${classes.title} {
-                flex: 1;
-            }
-
-            .${classes.icon} {
-                color: ${text.placeholder};
-                transition: translate .25s ${easing.swing};
-            }
-        }
-
         &[data-ordering=true] {
-            .${classes.icon} {
+            .${classes.sortIcon} {
                 color: ${colors.primary.main};
             }
         }
 
         &[data-order-type=ascend] {
-            .${classes.icon} {
+            .${classes.sortIcon} {
                 translate: 0 -3px;
                 rotate: 180deg;
             }
         }
 
         &[data-order-type=descend] {
-            .${classes.icon} {
+            .${classes.sortIcon} {
                 translate: 0 3px;
                 rotate: 0deg;
             }
@@ -90,7 +95,7 @@ export const style = defineCss(({ spacing, mode, gray, text, colors, easing }) =
         .${classes.subTd} {
             padding: 0;
             border: none;
-    
+
             .${classes.children} {
                 padding: ${spacing[4]}px ${spacing[5]}px;
                 border-bottom: 1px solid ${gray(mode === 'light' ? .12 : .32)};
@@ -122,19 +127,19 @@ export const style = defineCss(({ spacing, mode, gray, text, colors, easing }) =
         padding-top: 0;
         padding-bottom: 0;
         padding-left: 0;
-        
+
         .${classes.expandableWrap} {
             display: flex;
             align-items: center;
             gap: ${spacing[1]}px;
         }
     }
-    
+
     .${classes.empty} {
         position: sticky;
         left: 0;
     }
-    
+
     .${classes.resizeHandle} {
         width: 8px;
         height: 100%;
@@ -145,12 +150,12 @@ export const style = defineCss(({ spacing, mode, gray, text, colors, easing }) =
         right: -4px;
         z-index: 1;
     }
-    
+
     &[data-column-resizable=true] table {
         width: max-content;
         table-layout: fixed;
     }
-    
+
     th:last-of-type {
         .${classes.resizeHandle} {
             width: 4px;

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

@@ -1,9 +1,12 @@
 import { ReactElement } from 'react';
 import { ColumnType, DataGridProps, RowType } from './dataGrid';
 import { Id } from '../../types';
-interface DataGridHeadProps<R extends RowType, V extends Id = Id> extends Required<Pick<DataGridProps<R, V>, 'primaryKey' | 'orderType' | 'onOrderChange' | 'allowSelectAll' | 'columnResizable'>>, Pick<DataGridProps<R, V>, 'rows' | 'orderColumn'> {
+interface DataGridHeadProps<R extends RowType, V extends Id = Id> extends Required<Pick<DataGridProps<R, V>, 'primaryKey' | 'orderType' | 'onOrderChange' | 'allowSelectAll' | 'columnResizable'>> {
+    rows: R[] | undefined;
+    orderColumn: Id | undefined;
     flattedColumns: (symbol | ColumnType<R>)[] | undefined;
     completedColumns: (symbol | ColumnType<R>)[] | undefined;
+    onFilterClick: DataGridProps<R, V>['onFilterClick'];
 }
 export declare const DataGridHead: <R extends RowType, V extends Id = Id>(props: DataGridHeadProps<R, V>) => ReactElement;
 export {};

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

@@ -1,16 +1,19 @@
 import { createElement as _createElement } from "@emotion/react";
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo, useMemo } from 'react';
 import { classes } from './dataGrid.style';
 import { DataGrid } from './dataGrid';
 import { useRenderHead } from './columnResize';
 import { Checkbox } from '../checkbox';
-import { isUnset } from '../../utils';
 import { Icon } from '../icon';
 import { useSelectionContext } from '../selectionContext';
 import { Tooltip } from '../tooltip';
 import { faCaretDown } from '@fortawesome/free-solid-svg-icons/faCaretDown';
-export const DataGridHead = memo(({ flattedColumns, completedColumns, rows, primaryKey, orderColumn, orderType, onOrderChange, allowSelectAll, columnResizable }) => {
+import { Button } from '../button';
+import { faFilter } from '@fortawesome/free-solid-svg-icons/faFilter';
+import { Bubble } from '../bubble';
+import { FilterBubbleContent } from './filterBubbleContent';
+export const DataGridHead = memo(({ allowSelectAll, columnResizable, flattedColumns, completedColumns, rows, primaryKey, orderColumn, orderType, onOrderChange, onFilterClick }) => {
     const { multiple, setValue, selectionStatus } = useSelectionContext();
     const allSelectionStatus = useMemo(() => {
         if (multiple && allowSelectAll) {
@@ -66,29 +69,35 @@ export const DataGridHead = memo(({ flattedColumns, completedColumns, rows, prim
                         return [];
                     }
                     // col === DataGrid.SELECT_COLUMN
-                    return (_jsx(Column, { className: classes.selectable, rowSpan: headRows.length, sticky: j === 0 ? 'left' : void 0, children: multiple && allowSelectAll &&
-                            _jsx(Checkbox, { checked: allSelectionStatus === 2, indeterminate: allSelectionStatus === 1, onChange: selectAllChangeHandler }) }, j + '_selectable'));
+                    return [
+                        _jsx(Column, { className: classes.selectable, rowSpan: headRows.length, sticky: j === 0 ? 'left' : void 0, children: multiple && allowSelectAll &&
+                                _jsx(Checkbox, { checked: allSelectionStatus === 2, indeterminate: allSelectionStatus === 1, onChange: selectAllChangeHandler }) }, j + '_selectable')
+                    ];
                 }
                 const { 
                 // 排除无需加入dom节点的属性
-                title, key, children, sticky, field, render, sorter, _key, _negativeRowSpan = 0, ...colProps } = col;
-                const sortable = sorter && children?.length;
+                title, key, children, sticky, field, render, sorter, filter, _key, _negativeRowSpan = 0, ...colProps } = col;
+                const sortable = sorter && !children?.length;
                 const isOrderingColumn = orderColumn === _key;
                 const currentOrderType = isOrderingColumn ? orderType : 'descend';
-                const renderedTh = (_createElement(Column, { rowSpan: headRows.length - _negativeRowSpan, ...colProps, key: _key, sticky: sticky, "data-sortable": !!sortable, "data-ordering": isOrderingColumn, "data-order-type": currentOrderType, onClick: e => {
-                        colProps.onClick?.(e);
-                        if (sortable && !isUnset(_key)) {
-                            onOrderChange?.(_key, currentOrderType === 'descend' ? 'ascend' : 'descend');
-                        }
-                    } }, sorter
-                    ? _jsxs("div", { className: classes.sorter, children: [_jsx("div", { className: classes.title, children: title }), _jsx(Icon, { icon: faCaretDown, className: classes.icon })] })
-                    : title));
+                const filterButton = (_jsx(Button, { className: classes.filterButton, variant: "plain", color: "text.placeholder", onClick: e => {
+                        e.stopPropagation();
+                        onFilterClick?.(_key, e);
+                    }, children: _jsx(Icon, { icon: faFilter }) }));
                 return [
-                    sortable
-                        ? _jsx(Tooltip, { title: currentOrderType === 'descend'
-                                ? '点击升序'
-                                : '点击降序', children: renderedTh }, _key)
-                        : renderedTh
+                    _createElement(Column, { rowSpan: headRows.length - _negativeRowSpan, ...colProps, key: _key, sticky: sticky, "data-sortable": !!sortable, "data-ordering": isOrderingColumn, "data-order-type": currentOrderType, onClick: e => {
+                            colProps.onClick?.(e);
+                            sortable && onOrderChange?.(_key, currentOrderType === 'descend' ? 'ascend' : 'descend');
+                        } }, sortable || filter
+                        ? _jsxs("div", { className: classes.functionalCell, children: [sortable
+                                    ? _jsxs(_Fragment, { children: [_jsx(Tooltip, { title: currentOrderType === 'descend'
+                                                    ? '点击升序'
+                                                    : '点击降序', children: _jsx("div", { className: classes.title, children: title }) }), _jsx(Icon, { icon: faCaretDown, className: classes.sortIcon })] })
+                                    : _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 }) })] })
+                        : title)
                 ];
             }) }, i));
     });

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

@@ -51,7 +51,7 @@ export const DataGridRows = memo(({ rows, _level = 0 }) => {
                 // 排除无需加入dom节点的属性
                 // width属性只需加入thead列中，普通列需排除
                 // rowSpan与colSpan需排除
-                title, key, children, sticky, field, render, sorter, width, _key, _negativeRowSpan, rowSpan, colSpan, ..._colProps } = col;
+                title, key, children, sticky, field, render, sorter, filter, width, _key, _negativeRowSpan, rowSpan, colSpan, ..._colProps } = col;
                 const renderedContent = renderCell({ render, field }, row, i, arr);
                 const shouldRenderExpand = expandableIndex === j - 1;
                 return (_createElement(TdCell, { ..._colProps, key: _key, className: shouldRenderExpand ? classes.expandable : void 0, sticky: sticky }, shouldRenderExpand

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

@@ -0,0 +1,19 @@
+import { MenuOptionType, OptionsBaseProps } from '../optionsBase';
+import { Id } from '../../types';
+import { FormItemChildren } from '../form';
+type FilterSharedProps = {
+    /** 是否显示`重置`与`确定`按钮，默认为`true` */
+    showButton?: boolean;
+};
+export interface FilterOptionsProps extends FilterSharedProps, OptionsBaseProps<MenuOptionType> {
+    /** 默认为`true` */
+    multiple?: boolean;
+}
+export interface FilterControlProps extends FilterSharedProps {
+    control: FormItemChildren;
+}
+export declare const FilterBubbleContent: import("react").MemoExoticComponent<({ columnKey, columnFilterProps }: {
+    columnKey: Id;
+    columnFilterProps: FilterOptionsProps | FilterControlProps;
+}) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export {};

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

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { OptionsBase } from '../optionsBase';
+import { useFlatSelection } from '../selectionContext';
+import { Flex } from '../flex';
+import { Button } from '../button';
+import { usePopperContext } from '../popper';
+import { memo, useEffect } from 'react';
+import { FormItem, useFormContext, useFormValueContext } from '../form';
+export const FilterBubbleContent = memo(({ columnKey, columnFilterProps }) => {
+    const { formRef } = useFormContext();
+    /**
+     * ------------------------------------------------------------------------------------
+     * 弹框关闭时触发筛选
+     */
+    const { open, setOpen } = usePopperContext();
+    useEffect(() => {
+        !open && 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
+                ? _jsxs(Flex, { gap: 6, justifyContent: "flex-end", marginTop: 6, children: [_jsx(Button, { variant: "text", onClick: () => {
+                                formRef.current.setFieldValue(columnKey, null);
+                                setOpen(false);
+                            }, children: "\u91CD\u7F6E" }), _jsx(Button, { onClick: () => setOpen(false), children: "\u786E\u5B9A" })] })
+                : _jsx(TriggerFilterOnChange, {})] }));
+});
+const FilterOptions = memo(({ multiple = true, showButton = true, value, onChange, ...props }) => {
+    const [selectedValue, toggleSelect] = useFlatSelection({ multiple, value, onChange });
+    return (_jsx(OptionsBase, { showCheckbox: multiple, ...props, selectedValue: selectedValue, onToggleSelected: toggleSelect }));
+});
+const TriggerFilterOnChange = memo(() => {
+    const { formRef } = useFormContext();
+    const { formValue } = useFormValueContext();
+    useEffect(() => {
+        formRef.current.submit().then();
+    }, [formValue]);
+    return null;
+});

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

@@ -1,4 +1,4 @@
-import React, { JSX } from 'react';
+import React, { ComponentProps } from 'react';
 import { PopperProps } from '../popper';
 import { InputBaseProps } from '../inputBase';
 import { Dayjs } from 'dayjs';
@@ -10,7 +10,7 @@ export type DatePickerSharedProps = {
     disabledSeconds?: (date: Dayjs, seconds: number) => any;
 };
 export interface DateTimePickerProps extends DatePickerSharedProps, Omit<InputBaseProps<'input'>, 'children' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max'> {
-    inputProps?: JSX.IntrinsicElements['input'];
+    inputProps?: ComponentProps<'input'>;
     popperProps?: PopperProps;
     defaultOpen?: boolean;
     open?: boolean;

package/dist/esm/components/dateTimePicker/dateTimePicker.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/reac
 import { createContext, memo, useContext, useEffect, useMemo, useRef } from 'react';
 import { Popper } from '../popper';
 import { InputBase } from '../inputBase';
-import { clsx, cloneRef, useControlled } from '../../utils';
+import { useControlled, mergeComponentProps } from '../../utils';
 import { classes, datePickerPopperStyle, style } from './dateTimePicker.style';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
@@ -22,7 +22,6 @@ export const DateTimePicker = memo(({ inputProps, popperProps, min, max, disable
     const focused = useRef(false);
     const [innerOpen, _setInnerOpen] = useControlled(defaultOpen, open, onOpenChange);
     const setInnerOpen = (open) => {
-        popperProps?.onOpenChange?.(open);
         // 如果仍聚焦在输入框，则不用关闭弹框
         (open || !focused.current) && _setInnerOpen(open);
     };
@@ -209,14 +208,33 @@ export const DateTimePicker = memo(({ inputProps, popperProps, min, max, disable
     const showCalendar = /[YMD]/.test(format);
     const showTimer = /[Hms]/.test(format);
     const _dateVal = dateValue.current || dayjs();
-    return (_jsx(Popper, { css: datePickerPopperStyle, open: innerOpen.current, placement: "bottomLeft", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, content: _jsxs(_Fragment, { children: [showCalendar &&
-                    _jsx(Calendar, { viewLevel: format.includes('D') ? 'date'
-                            : format.includes('M') ? 'month'
-                                : 'year', _defaultNull: !dateValue.current, value: _dateVal, onChange: setDateValue, min: min, max: max, disabledDates: disabledDates }), showTimer &&
-                    _jsx(DateTimePickerContext, { value: contextValue, children: _jsx(Timer, { showHours: format.includes('H'), showMinutes: format.includes('m'), showSeconds: format.includes('s'), value: _dateVal, onChange: setDateValue }) })] }), ...popperProps, onOpenChange: setInnerOpen, onPointerDown: e => {
-            popperProps?.onPointerDown?.(e);
-            e.preventDefault();
-        }, children: _jsx(InputBase, { ...props, css: style, className: clsx(classes.root, props.className), "data-focused": innerOpen.current, value: dateValue.current, onClear: clearHandler, onSelect: selectHandler, onFocus: focusHandler, onBlur: blurHandler, onKeyDown: keydownHandler, children: ({ ref, value, onChange, ...rest }) => _jsxs("div", { className: classes.container, children: [_jsx("input", { ...rest, ...inputProps, ref: cloneRef(ref, inputProps?.ref, innerInputRef), className: clsx(classes.input, inputProps?.className) }), _jsx("div", { className: classes.dateTimeIcon, children: showTimer && !showCalendar
+    return (_jsx(Popper, { ...mergeComponentProps({
+            css: datePickerPopperStyle,
+            open: innerOpen.current,
+            placement: 'bottomLeft',
+            trigger: ['click', 'enter'],
+            disabled: props.disabled || props.readOnly,
+            content: (_jsxs(_Fragment, { children: [showCalendar &&
+                        _jsx(Calendar, { viewLevel: format.includes('D') ? 'date'
+                                : format.includes('M') ? 'month'
+                                    : 'year', _defaultNull: !dateValue.current, value: _dateVal, onChange: setDateValue, min: min, max: max, disabledDates: disabledDates }), showTimer &&
+                        _jsx(DateTimePickerContext, { value: contextValue, children: _jsx(Timer, { showHours: format.includes('H'), showMinutes: format.includes('m'), showSeconds: format.includes('s'), value: _dateVal, onChange: setDateValue }) })] })),
+        }, popperProps, {
+            onOpenChange: setInnerOpen,
+            onPointerDown: e => e.preventDefault()
+        }), children: _jsx(InputBase, { ...mergeComponentProps(props, {
+                css: style,
+                className: classes.root,
+                value: dateValue.current,
+                onClear: clearHandler,
+                onSelect: selectHandler,
+                onFocus: focusHandler,
+                onBlur: blurHandler,
+                onKeyDown: keydownHandler
+            }), "data-focused": innerOpen.current, children: inputBaseProps => _jsxs("div", { className: classes.container, children: [_jsx("input", { ...mergeComponentProps(inputBaseProps, inputProps, {
+                            ref: innerInputRef,
+                            className: classes.input
+                        }) }), _jsx("div", { className: classes.dateTimeIcon, children: showTimer && !showCalendar
                             ? _jsx(Icon, { icon: faClock })
                             : _jsx(Icon, { icon: faCalendar }) })] }) }) }));
 });