@canlooks/can-ui 0.0.69 → 0.0.71

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

@@ -14,11 +14,12 @@ const dataGridHead_1 = require("./dataGridHead");
 const placeholder_1 = require("../placeholder");
 const dataGridRows_1 = require("./dataGridRows");
 const columnResize_1 = require("./columnResize");
+const form_1 = require("../form");
 const DataGridContext = (0, react_1.createContext)({});
 function useDataGridContext() {
     return (0, react_1.useContext)(DataGridContext);
 }
-exports.DataGrid = (0, react_1.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 }) => {
+exports.DataGrid = (0, react_1.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 }) => {
     /**
      * ---------------------------------------------------------------
      * 选择行
@@ -35,7 +36,24 @@ exports.DataGrid = (0, react_1.memo)(({ columns, rows, rowProps, primaryKey = 'i
     });
     /**
      * ---------------------------------------------------------------
-     * 行排序
+     * 筛选
+     */
+    const [innerFilterValue, setInnerFilterValue] = (0, react_1.useState)(initialFilterValue || {});
+    const filterHandler = (value) => {
+        onFilter?.(value);
+        filterPredicate && setInnerFilterValue(value);
+    };
+    const filteredRows = (0, react_1.useMemo)(() => {
+        if (!filterPredicate) {
+            return rows;
+        }
+        return rows?.filter((row, index) => {
+            return filterPredicate(row, index, innerFilterValue);
+        });
+    }, [rows, innerFilterValue, filterPredicate]);
+    /**
+     * ---------------------------------------------------------------
+     * 排序
      */
     const [innerOrderColumn, setInnerOrderColumn] = (0, utils_1.useControlled)(() => {
         return defaultOrderColumn ?? flattedColumns
@@ -43,24 +61,25 @@ exports.DataGrid = (0, react_1.memo)(({ columns, rows, rowProps, primaryKey = 'i
             ?._key;
     }, orderColumn);
     const [innerOrderType, setInnerOrderType] = (0, utils_1.useControlled)(defaultOrderType, orderType);
-    const orderChangeHandler = (orderColumn, orderType) => {
-        onOrderChange?.(orderColumn, orderType);
+    const syncOnOrderChange = (0, utils_1.useSync)(onOrderChange);
+    const orderChangeHandler = (0, react_1.useCallback)((orderColumn, orderType) => {
+        syncOnOrderChange.current?.(orderColumn, orderType);
         setInnerOrderColumn(orderColumn);
         setInnerOrderType(orderType);
-    };
+    }, []);
     const orderedRows = (0, react_1.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]);
     /**
      * ---------------------------------------------------------------
      * 展开行
@@ -69,16 +88,17 @@ exports.DataGrid = (0, react_1.memo)(({ columns, rows, rowProps, primaryKey = 'i
     const expandedSet = (0, react_1.useMemo)(() => {
         return new Set(innerExpanded.current);
     }, [innerExpanded.current]);
-    const toggleExpanded = (key) => {
+    const syncOnExpandedChange = (0, utils_1.useSync)(onExpandedChange);
+    const toggleExpanded = (0, react_1.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;
         });
-    };
+    }, []);
     /**
      * ---------------------------------------------------------------
      * 分页
@@ -110,14 +130,20 @@ exports.DataGrid = (0, react_1.memo)(({ columns, rows, rowProps, primaryKey = 'i
         const { page, pageSize } = _paginationProps;
         return orderedRows?.slice((page - 1) * pageSize, page * pageSize);
     }, [orderedRows, _paginationProps.page, _paginationProps.pageSize, paginatable]);
-    return ((0, jsx_runtime_1.jsxs)(loading_1.Loading, { ...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)(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, { flattedColumns: flattedColumns, completedColumns: completedColumns, rows: rows, primaryKey: primaryKey, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, allowSelectAll: allowSelectAll, columnResizable: columnResizable }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)(DataGridContext, { value: (0, react_1.useMemo)(() => ({
-                                                rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
-                                                expandedSet, flattedColumns, toggleExpanded
-                                            }), [
-                                                rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
-                                                expandedSet, flattedColumns
-                                            ]), children: !!paginatedRows?.length &&
-                                                (0, jsx_runtime_1.jsx)(dataGridRows_1.DataGridRows, { rows: paginatedRows }) }) })] }) }), !paginatedRows?.length && (emptyPlaceholder ?? (0, jsx_runtime_1.jsx)(placeholder_1.Placeholder, { className: dataGrid_style_1.classes.empty }))] }) }), renderPaginationFn()] }));
+    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)({
+                    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)(() => ({
+                                                    rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
+                                                    expandedSet, flattedColumns, toggleExpanded
+                                                }), [
+                                                    rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
+                                                    expandedSet, flattedColumns
+                                                ]), children: !!paginatedRows?.length &&
+                                                    (0, jsx_runtime_1.jsx)(dataGridRows_1.DataGridRows, { rows: paginatedRows }) }) })] }) }), !paginatedRows?.length && (emptyPlaceholder ?? (0, jsx_runtime_1.jsx)(placeholder_1.Placeholder, { className: dataGrid_style_1.classes.empty }))] }) }) }), renderPaginationFn()] }));
 });
 exports.DataGrid.EXPAND_COLUMN = Symbol('expand-column');
 exports.DataGrid.SELECT_COLUMN = Symbol('select-column');

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

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

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

@@ -8,12 +8,15 @@ const dataGrid_style_1 = require("./dataGrid.style");
 const dataGrid_1 = require("./dataGrid");
 const columnResize_1 = require("./columnResize");
 const checkbox_1 = require("../checkbox");
-const utils_1 = require("../../utils");
 const icon_1 = require("../icon");
 const selectionContext_1 = require("../selectionContext");
 const tooltip_1 = require("../tooltip");
 const faCaretDown_1 = require("@fortawesome/free-solid-svg-icons/faCaretDown");
-exports.DataGridHead = (0, react_2.memo)(({ flattedColumns, completedColumns, rows, primaryKey, orderColumn, orderType, onOrderChange, allowSelectAll, columnResizable }) => {
+const button_1 = require("../button");
+const faFilter_1 = require("@fortawesome/free-solid-svg-icons/faFilter");
+const bubble_1 = require("../bubble");
+const filterBubbleContent_1 = require("./filterBubbleContent");
+exports.DataGridHead = (0, react_2.memo)(({ allowSelectAll, columnResizable, flattedColumns, completedColumns, rows, primaryKey, orderColumn, orderType, onOrderChange, onFilterClick }) => {
     const { multiple, setValue, selectionStatus } = (0, selectionContext_1.useSelectionContext)();
     const allSelectionStatus = (0, react_2.useMemo)(() => {
         if (multiple && allowSelectAll) {
@@ -69,29 +72,35 @@ exports.DataGridHead = (0, react_2.memo)(({ flattedColumns, completedColumns, ro
                         return [];
                     }
                     // col === DataGrid.SELECT_COLUMN
-                    return ((0, jsx_runtime_1.jsx)(Column, { className: dataGrid_style_1.classes.selectable, rowSpan: headRows.length, sticky: j === 0 ? 'left' : void 0, children: multiple && allowSelectAll &&
-                            (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: allSelectionStatus === 2, indeterminate: allSelectionStatus === 1, onChange: selectAllChangeHandler }) }, j + '_selectable'));
+                    return [
+                        (0, jsx_runtime_1.jsx)(Column, { className: dataGrid_style_1.classes.selectable, rowSpan: headRows.length, sticky: j === 0 ? 'left' : void 0, children: multiple && allowSelectAll &&
+                                (0, jsx_runtime_1.jsx)(checkbox_1.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 = ((0, react_1.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 && !(0, utils_1.isUnset)(_key)) {
-                            onOrderChange?.(_key, currentOrderType === 'descend' ? 'ascend' : 'descend');
-                        }
-                    } }, sorter
-                    ? (0, jsx_runtime_1.jsxs)("div", { className: dataGrid_style_1.classes.sorter, children: [(0, jsx_runtime_1.jsx)("div", { className: dataGrid_style_1.classes.title, children: title }), (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faCaretDown_1.faCaretDown, className: dataGrid_style_1.classes.icon })] })
-                    : title));
+                const filterButton = ((0, jsx_runtime_1.jsx)(button_1.Button, { className: dataGrid_style_1.classes.filterButton, variant: "plain", color: "text.placeholder", onClick: e => {
+                        e.stopPropagation();
+                        onFilterClick?.(_key, e);
+                    }, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faFilter_1.faFilter }) }));
                 return [
-                    sortable
-                        ? (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: currentOrderType === 'descend'
-                                ? '点击升序'
-                                : '点击降序', children: renderedTh }, _key)
-                        : renderedTh
+                    (0, react_1.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
+                        ? (0, jsx_runtime_1.jsxs)("div", { className: dataGrid_style_1.classes.functionalCell, children: [sortable
+                                    ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: currentOrderType === 'descend'
+                                                    ? '点击升序'
+                                                    : '点击降序', children: (0, jsx_runtime_1.jsx)("div", { className: dataGrid_style_1.classes.title, children: title }) }), (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faCaretDown_1.faCaretDown, className: dataGrid_style_1.classes.sortIcon })] })
+                                    : (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 }) })] })
+                        : title)
                 ];
             }) }, i));
     });

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

@@ -54,7 +54,7 @@ exports.DataGridRows = (0, react_2.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 = (0, utils_1.renderCell)({ render, field }, row, i, arr);
                 const shouldRenderExpand = expandableIndex === j - 1;
                 return ((0, react_1.createElement)(table_1.TdCell, { ..._colProps, key: _key, className: shouldRenderExpand ? dataGrid_style_1.classes.expandable : void 0, sticky: sticky }, shouldRenderExpand

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterBubbleContent = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const optionsBase_1 = require("../optionsBase");
+const selectionContext_1 = require("../selectionContext");
+const flex_1 = require("../flex");
+const button_1 = require("../button");
+const popper_1 = require("../popper");
+const react_1 = require("react");
+const form_1 = require("../form");
+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();
+    }, [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.jsxs)(flex_1.Flex, { gap: 6, justifyContent: "flex-end", 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)(button_1.Button, { onClick: () => setOpen(false), children: "\u786E\u5B9A" })] })
+                : (0, jsx_runtime_1.jsx)(TriggerFilterOnChange, {})] }));
+});
+const FilterOptions = (0, react_1.memo)(({ multiple = true, showButton = true, 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 TriggerFilterOnChange = (0, react_1.memo)(() => {
+    const { formRef } = (0, form_1.useFormContext)();
+    const { formValue } = (0, form_1.useFormValueContext)();
+    (0, react_1.useEffect)(() => {
+        formRef.current.submit().then();
+    }, [formValue]);
+    return null;
+});

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

@@ -27,7 +27,6 @@ exports.DateTimePicker = (0, react_1.memo)(({ inputProps, popperProps, min, max,
     const focused = (0, react_1.useRef)(false);
     const [innerOpen, _setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open, onOpenChange);
     const setInnerOpen = (open) => {
-        popperProps?.onOpenChange?.(open);
         // 如果仍聚焦在输入框，则不用关闭弹框
         (open || !focused.current) && _setInnerOpen(open);
     };
@@ -214,14 +213,33 @@ exports.DateTimePicker = (0, react_1.memo)(({ inputProps, popperProps, min, max,
     const showCalendar = /[YMD]/.test(format);
     const showTimer = /[Hms]/.test(format);
     const _dateVal = dateValue.current || (0, dayjs_1.default)();
-    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { css: dateTimePicker_style_1.datePickerPopperStyle, open: innerOpen.current, placement: "bottomLeft", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, content: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showCalendar &&
-                    (0, jsx_runtime_1.jsx)(calendar_1.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 &&
-                    (0, jsx_runtime_1.jsx)(DateTimePickerContext, { value: contextValue, children: (0, jsx_runtime_1.jsx)(timer_1.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: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { ...props, css: dateTimePicker_style_1.style, className: (0, utils_1.clsx)(dateTimePicker_style_1.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 }) => (0, jsx_runtime_1.jsxs)("div", { className: dateTimePicker_style_1.classes.container, children: [(0, jsx_runtime_1.jsx)("input", { ...rest, ...inputProps, ref: (0, utils_1.cloneRef)(ref, inputProps?.ref, innerInputRef), className: (0, utils_1.clsx)(dateTimePicker_style_1.classes.input, inputProps?.className) }), (0, jsx_runtime_1.jsx)("div", { className: dateTimePicker_style_1.classes.dateTimeIcon, children: showTimer && !showCalendar
+    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { ...(0, utils_1.mergeComponentProps)({
+            css: dateTimePicker_style_1.datePickerPopperStyle,
+            open: innerOpen.current,
+            placement: 'bottomLeft',
+            trigger: ['click', 'enter'],
+            disabled: props.disabled || props.readOnly,
+            content: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showCalendar &&
+                        (0, jsx_runtime_1.jsx)(calendar_1.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 &&
+                        (0, jsx_runtime_1.jsx)(DateTimePickerContext, { value: contextValue, children: (0, jsx_runtime_1.jsx)(timer_1.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: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { ...(0, utils_1.mergeComponentProps)(props, {
+                css: dateTimePicker_style_1.style,
+                className: dateTimePicker_style_1.classes.root,
+                value: dateValue.current,
+                onClear: clearHandler,
+                onSelect: selectHandler,
+                onFocus: focusHandler,
+                onBlur: blurHandler,
+                onKeyDown: keydownHandler
+            }), "data-focused": innerOpen.current, children: inputBaseProps => (0, jsx_runtime_1.jsxs)("div", { className: dateTimePicker_style_1.classes.container, children: [(0, jsx_runtime_1.jsx)("input", { ...(0, utils_1.mergeComponentProps)(inputBaseProps, inputProps, {
+                            ref: innerInputRef,
+                            className: dateTimePicker_style_1.classes.input
+                        }) }), (0, jsx_runtime_1.jsx)("div", { className: dateTimePicker_style_1.classes.dateTimeIcon, children: showTimer && !showCalendar
                             ? (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faClock_1.faClock })
                             : (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faCalendar_1.faCalendar }) })] }) }) }));
 });

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

@@ -1,7 +1,7 @@
 export declare const classes: {
     input: string;
-    container: string;
     calendar: string;
+    container: string;
     dateItem: string;
     inputGroup: string;
     inputUnit: string;

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

@@ -3,6 +3,7 @@ import { ColorPropsValue, DivProps, Size } from '../../types';
 import { DatePickerSharedProps, DateTimePickerProps } from '../dateTimePicker';
 import { Dayjs } from 'dayjs';
 type DateValueType = [Dayjs | null, Dayjs | null] | null;
+type PickerType = 'start' | 'end';
 export interface DateTimeRangePickerProps extends DatePickerSharedProps, Omit<DivProps, 'defaultValue' | 'onChange'> {
     startPickerProps?: DateTimePickerProps;
     endPickerProps?: DateTimePickerProps;
@@ -10,9 +11,9 @@ export interface DateTimeRangePickerProps extends DatePickerSharedProps, Omit<Di
     defaultValue?: DateValueType;
     value?: DateValueType;
     onChange?(value: DateValueType): void;
-    defaultOpenPicker?: 'start' | 'end' | 'closed';
-    openPicker?: 'start' | 'end' | 'closed';
-    onOpenPickerChange?(openPicker?: 'start' | 'end' | 'closed'): void;
+    defaultOpenPicker?: PickerType | 'closed';
+    openPicker?: PickerType | 'closed';
+    onOpenPickerChange?(openPicker?: PickerType | 'closed'): void;
     autoClose?: boolean;
     separator?: ReactNode;
     disabledDates?: (date: Dayjs) => any;

package/dist/cjs/components/dateTimeRangePicker/dateTimeRangePicker.js

@@ -12,29 +12,51 @@ variant, size, color, disabled, readOnly, autoFocus, ...props }) => {
     const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(defaultOpenPicker, openPicker, onOpenPickerChange);
     const [innerValue, setInnerValue] = (0, utils_1.useControlled)(defaultValue, value, onChange);
     const endPickerInputRef = (0, react_1.useRef)(null);
-    const commonProps = {
-        format, disabledDates, disabledHours, disabledMinutes, disabledSeconds,
-        variant, size, color, disabled, readOnly
-    };
     const showTimer = /[Hms]/.test(format);
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: dateTimeRangePicker_style_1.style, className: (0, utils_1.clsx)(dateTimeRangePicker_style_1.classes.root, props.className), children: [(0, jsx_runtime_1.jsx)(dateTimePicker_1.DateTimePicker, { ...commonProps, autoFocus: autoFocus, autoClose: false, placeholder: showTimer ? '开始时间' : '开始日期', max: innerValue.current?.[1] || void 0, open: innerOpen.current === 'start', ...startPickerProps, onOpenChange: open => {
-                    startPickerProps?.onOpenChange?.(open);
-                    setInnerOpen(open ? 'start' : 'closed');
-                }, value: innerValue.current?.[0], onChange: startValue => {
-                    startPickerProps?.onChange?.(startValue);
-                    setInnerValue(o => [startValue, o?.[1] || null]);
-                    if (startValue && !showTimer) {
-                        endPickerInputRef.current.focus();
-                        innerOpen.current === 'start' && setInnerOpen('end');
+    const renderPickerItem = (type) => {
+        const commonProps = {
+            format, disabledDates, disabledHours, disabledMinutes, disabledSeconds,
+            variant, size, color, disabled, readOnly
+        };
+        return ((0, jsx_runtime_1.jsx)(dateTimePicker_1.DateTimePicker, { ...(0, utils_1.mergeComponentProps)(commonProps, type === 'start'
+                ? {
+                    autoFocus,
+                    autoClose: false,
+                    placeholder: showTimer ? '开始时间' : '开始日期',
+                    max: innerValue.current?.[1] || void 0,
+                    open: innerOpen.current === 'start'
+                }
+                : {
+                    autoClose,
+                    placeholder: showTimer ? '结束时间' : '结束日期',
+                    min: innerValue.current?.[0] || void 0,
+                    open: innerOpen.current === 'end'
+                }, type === 'start'
+                ? startPickerProps
+                : endPickerProps, type === 'start'
+                ? {
+                    onOpenChange: open => setInnerOpen(open ? 'start' : 'closed'),
+                    value: innerValue.current?.[0],
+                    onChange: value => {
+                        setInnerValue(o => [value, o?.[1] || null]);
+                        if (value && !showTimer) {
+                            endPickerInputRef.current.focus();
+                            innerOpen.current === 'start' && setInnerOpen('end');
+                        }
+                    }
+                }
+                : {
+                    inputProps: { ref: endPickerInputRef },
+                    onOpenChange: open => setInnerOpen(open ? 'end' : 'closed'),
+                    value: innerValue.current?.[1],
+                    onChange: value => {
+                        setInnerValue(o => [o?.[0] || null, value]);
+                    },
+                    popperProps: {
+                        ...endPickerProps?.popperProps,
+                        placement: 'bottomRight'
                     }
-                } }), separator ?? (0, jsx_runtime_1.jsx)("span", { children: "-" }), (0, jsx_runtime_1.jsx)(dateTimePicker_1.DateTimePicker, { ...commonProps, autoClose: autoClose, placeholder: showTimer ? '结束时间' : '结束日期', min: innerValue.current?.[0] || void 0, open: innerOpen.current === 'end', ...endPickerProps, inputProps: { ref: endPickerInputRef }, onOpenChange: open => {
-                    startPickerProps?.onOpenChange?.(open);
-                    setInnerOpen(open ? 'end' : 'closed');
-                }, value: innerValue.current?.[1], onChange: endValue => {
-                    endPickerProps?.onChange?.(endValue);
-                    setInnerValue(o => [o?.[0] || null, endValue]);
-                }, popperProps: {
-                    ...endPickerProps?.popperProps,
-                    placement: 'bottomRight'
-                } })] }));
+                }) }));
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: dateTimeRangePicker_style_1.style, className: (0, utils_1.clsx)(dateTimeRangePicker_style_1.classes.root, props.className), children: [renderPickerItem('start'), separator ?? (0, jsx_runtime_1.jsx)("span", { children: "-" }), renderPickerItem('end')] }));
 });