@canlooks/can-ui 0.0.70 → 0.0.72

package/dist/esm/components/colorPicker/colorPicker.js

@@ -3,7 +3,7 @@ import { memo, useMemo } from 'react';
 import { Popper } from '../popper';
 import { InputBase } from '../inputBase';
 import { classes, colorPickerPopperStyle, style } from './colorPicker.style';
-import { clsx, cloneRef, colorTransfer, useControlled, useTouchSpread } from '../../utils';
+import { clsx, colorTransfer, useControlled, useTouchSpread, mergeComponentProps } from '../../utils';
 import { useTheme } from '../theme';
 import { Palette } from '../palette';
 import Color from 'color';
@@ -14,8 +14,8 @@ export const ColorPicker = memo(({ inputProps, popperProps, popperRef, size, sha
     return (_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), "data-size": size, "data-shape": shape, children: [presets?.map((color, i) => {
                 const colorInstance = Color(typeof color === 'string' ? colorTransfer(color, theme) : color);
                 return (_jsx(BlockItem, { selected: colorInstance.hex() === innerValue.current.hex(), color: Color(color), onClick: () => setInnerValue(Color(color, 'hex')) }, i));
-            }), _jsx(Popper, { css: colorPickerPopperStyle, defaultOpen: defaultOpen, open: open, onOpenChange: onOpenChange, trigger: ['click', 'enter'], placement: "bottomLeft", content: _jsx(Palette, { value: innerValue.current, onChange: setInnerValue }), ...popperProps, popperRef: popperRef, children: _jsx(InputBase, { className: classes.inputBase, size: size, shape: shape === 'circular' ? 'rounded' : shape, children: ({ ref, ...rest }) => _jsxs(_Fragment, { children: [_jsx(BlockItem, { color: innerValue.current }), !!label &&
-                                _jsx("div", { className: classes.label, children: label }), _jsx("input", { ...rest, ...inputProps, ref: cloneRef(ref, inputProps?.ref), "data-hidden": "true" })] }) }) })] }));
+            }), _jsx(Popper, { css: colorPickerPopperStyle, defaultOpen: defaultOpen, open: open, onOpenChange: onOpenChange, trigger: ['click', 'enter'], placement: "bottomLeft", content: _jsx(Palette, { value: innerValue.current, onChange: setInnerValue }), ...popperProps, popperRef: popperRef, children: _jsx(InputBase, { className: classes.inputBase, size: size, shape: shape === 'circular' ? 'rounded' : shape, children: inputBaseProps => _jsxs(_Fragment, { children: [_jsx(BlockItem, { color: innerValue.current }), !!label &&
+                                _jsx("div", { className: classes.label, children: label }), _jsx("input", { ...mergeComponentProps(inputProps, inputBaseProps), "data-hidden": "true" })] }) }) })] }));
 });
 function BlockItem({ color, onClick, selected }) {
     const light = useMemo(() => color.luminosity() >= .8, [color]);

package/dist/esm/components/counter/counter.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
 import { classes, style } from './counter.style';
-import { clsx, useControlled } from '../../utils';
+import { clsx, mergeComponentProps, useControlled } from '../../utils';
 import { Button } from '../button';
 import { Input } from '../input';
 import { Flex } from '../flex';
@@ -18,14 +18,13 @@ export const Counter = memo(({ size, min = -Infinity, max = Infinity, step = 1,
     const clickHandler = (dir) => {
         setInnerValue(Math.max(min, Math.min(max, innerValue.current + dir * step)));
     };
-    return (_jsxs(Flex, { compact: true, ...props, css: style, className: clsx(classes.root, props.className), children: [_jsx(Button, { disabled: innerValue.current <= min, ...commonButtonProps, ...decreaseProps, onClick: e => {
-                    decreaseProps?.onClick?.(e);
-                    clickHandler(-1);
-                }, children: _jsx(Icon, { icon: faMinus }) }), _jsx(Input, { type: "number", widthAdaptable: true, size: size, min: min, max: max, step: step, precision: precision, ...inputProps, className: clsx(classes.input, inputProps?.className), value: innerValue.current, onChange: e => {
-                    inputProps?.onChange?.(e);
-                    setInnerValue(+e.target.value);
-                } }), _jsx(Button, { disabled: innerValue.current >= max, ...commonButtonProps, ...increaseProps, onClick: e => {
-                    increaseProps?.onClick?.(e);
-                    clickHandler(1);
-                }, children: _jsx(Icon, { icon: faPlus }) })] }));
+    return (_jsxs(Flex, { compact: true, ...props, css: style, className: clsx(classes.root, props.className), children: [_jsx(Button, { disabled: innerValue.current <= min, ...mergeComponentProps(commonButtonProps, decreaseProps, {
+                    onClick: () => clickHandler(-1)
+                }), children: _jsx(Icon, { icon: faMinus }) }), _jsx(Input, { type: "number", widthAdaptable: true, size: size, min: min, max: max, step: step, precision: precision, ...mergeComponentProps(inputProps, {
+                    className: classes.input,
+                    value: innerValue.current,
+                    onChange: e => setInnerValue(+e.target.value)
+                }) }), _jsx(Button, { disabled: innerValue.current >= max, ...mergeComponentProps(commonButtonProps, increaseProps, {
+                    onClick: () => clickHandler(1)
+                }), children: _jsx(Icon, { icon: faPlus }) })] }));
 });

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

@@ -2,7 +2,7 @@ import { ReactElement, ReactNode, Ref } from 'react';
 import { DivProps, Id, Obj } from '../../types';
 import { ColumnType, DataGridBaseProps, DataGridMultipleProps, DataGridSingleProps, OrderType, RowType } from '../dataGrid';
 import { FormItemProps, FormProps, FormRef, FormValue } from '../form';
-import { CurdFilter, CurdFilterProps } from './curdFilter';
+import { CurdFilterable, CurdFilterableProps } from './curdFilterable';
 import { FieldPath } from '../../utils';
 import { ButtonProps } from '../button';
 import { CurdDialogProps } from './curdDialog';
@@ -12,28 +12,28 @@ export type CurdFormItemProps<I = any> = FormItemProps<I> & {
     order?: number;
 } & Obj;
 export type CurdFormItemType<I = any> = CurdFormItemProps<I> | ReactElement | true;
-export interface CurdColumn<R extends RowType = RowType> extends Omit<ColumnType<R>, 'children'> {
+export interface CurdColumn<R extends RowType = RowType> extends Omit<ColumnType<R>, 'filter' | 'children'> {
     /** 在表格中隐藏，表明该列只用于filter或form */
     hideInTable?: boolean;
     filter?: CurdFormItemType | (() => CurdFormItemType);
+    filterInline?: ColumnType<R>['filter'];
     form?: CurdFormItemType | ((activeRow?: R) => CurdFormItemType);
 }
-export type LoadRowsReturn<R extends RowType> = {
+export type LoadRowsReturn<R extends RowType = RowType> = {
     rows: R[];
     /** 必须返回总数才能使翻页正常工作 */
     total: number;
 };
 type EachRowType<R extends RowType, T> = T | ((row: R) => T);
 export type CurdRef<R extends RowType = RowType, F extends FormValue = FormValue> = {
-    openCreateDialog(initialValue?: F): Promise<F> | undefined;
+    openCreateDialog(defaultValue?: F): Promise<F> | undefined;
     selectSingle(): Promise<R> | undefined;
     selectMultiple(selected?: Id[]): Promise<Id[]> | undefined;
 };
-export interface CurdBaseProps<R extends RowType, F extends FormValue> extends Omit<DataGridBaseProps<R>, 'ref'> {
+export interface CurdBaseProps<R extends RowType = RowType, F extends FormValue = FormValue> extends Omit<DataGridBaseProps<R>, 'ref' | 'columns' | 'filterPredicate'> {
     ref?: Ref<CurdRef<R, F>>;
     /** 默认属性会传递给DataGrid组件，外层包裹元素的属性使用wrapperProps */
     wrapperProps?: DivProps;
-    wrapperRef?: Ref<HTMLDivElement>;
     /** 嵌入式样式通常用于Dialog或Card组件内 */
     variant?: 'standard' | 'embeded';
     loadRows?: (pagination?: {
@@ -57,11 +57,9 @@ export interface CurdBaseProps<R extends RowType, F extends FormValue> extends O
         order?: Id[];
         onOrderChange?(order: Id[]): void;
     };
-    filterProps?: CurdFilterProps<R>;
-    filterRef?: Ref<FormRef>;
-    initialFilterValue?: CurdFilterProps<R>['initialValue'];
-    onFilter?(filterValue: FormValue): void;
-    renderFilter?(filterProps: CurdFilterProps<R>): ReactNode;
+    filterableProps?: Omit<CurdFilterableProps, 'columns'>;
+    renderFilterable?(filterableProps: CurdFilterableProps): ReactNode;
+    renderFilterConditions?: CurdFilterableProps['renderFilterConditions'];
     copyable?: boolean;
     creatable?: boolean;
     updatable?: EachRowType<R, boolean>;
@@ -100,7 +98,7 @@ interface CurdMultipleProps<R extends RowType, F extends FormValue = FormValue,
 export type CurdProps<R extends RowType, F extends FormValue = FormValue, V extends Id = Id> = CurdSingleProps<R, F, V> | CurdMultipleProps<R, F, V>;
 export declare const Curd: {
     <R extends RowType, F extends FormValue = FormValue, V extends Id = Id>(props: CurdProps<R, F, V>): ReactElement;
-    Filter: typeof CurdFilter;
+    Filter: typeof CurdFilterable;
     CONTROL_COLUMN: symbol;
 };
 export {};

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

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 import { memo, useCallback, useEffect, useMemo, useRef, useImperativeHandle } from 'react';
 import { DataGrid } from '../dataGrid';
-import { CurdFilter } from './curdFilter';
+import { Form } from '../form';
+import { CurdFilterable } from './curdFilterable';
 import { classes, style } from './curd.style';
-import { clsx, cloneRef, useControlled, useCurdColumns, useDerivedState, useLoading, useSync } from '../../utils';
+import { clsx, useControlled, useCurdColumns, useDerivedState, useLoading, useSync, mergeComponentProps } from '../../utils';
 import { Button } from '../button';
 import { Tooltip } from '../tooltip';
 import { CurdColumnConfig } from './curdColumnConfig';
@@ -20,14 +21,14 @@ import { faPenToSquare } from '@fortawesome/free-regular-svg-icons/faPenToSquare
 import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
 import { faRotateRight } from '@fortawesome/free-solid-svg-icons/faRotateRight';
 export const Curd = memo((props) => {
-    const { ref, wrapperProps, wrapperRef, variant = 'standard', loadRows, columns, toolbarLeft, toolbarRight, reloadable = true, onReload, resizable = true, columnConfigurable = true, filterProps, filterRef, initialFilterValue, onFilter, renderFilter, copyable, creatable = true, updatable = true, deletable = true, createButtonProps, updateButtonProps, deleteButtonProps, deleteConfirmProps, controlColumnTitle = '操作', renderExtraControl, titleKey, dataName = '', createName = '添加', updateName = '编辑', deleteName = '删除', onCreate, onUpdate, onDelete, rowToForm, dialogProps, formProps, formRef, onChange, ...dataGridProps } = props;
+    const { ref, wrapperProps, variant = 'standard', loadRows, columns, toolbarLeft, toolbarRight, reloadable = true, onReload, resizable = true, columnConfigurable = true, filterProps, initialFilterValue, onFilter, filterableProps, renderFilterable, renderFilterConditions, copyable, creatable = true, updatable = true, deletable = true, createButtonProps, updateButtonProps, deleteButtonProps, deleteConfirmProps, controlColumnTitle = '操作', renderExtraControl, titleKey, dataName = '', createName = '添加', updateName = '编辑', deleteName = '删除', onCreate, onUpdate, onDelete, rowToForm, dialogProps, formProps, formRef, onChange, ...dataGridProps } = props;
     /**
      * -------------------------------------------------------------
      * ref
      */
     useImperativeHandle(ref, () => ({
-        openCreateDialog(initialValue) {
-            return curdDialogRef.current?.open(void 0, initialValue);
+        openCreateDialog(defaultValue) {
+            return curdDialogRef.current?.open(void 0, defaultValue);
         },
         selectSingle() {
             return curdDialogRef.current?.selectSingle();
@@ -41,22 +42,20 @@ export const Curd = memo((props) => {
      * 筛选部分
      */
     const innerFilterRef = useRef(null);
-    const syncOnFilter = useSync(onFilter);
-    const renderFilterFn = () => {
+    const filterHandler = (value) => {
+        onFilter?.(value);
+        innerLoadRows().then();
+    };
+    const renderFilterableFn = () => {
         const _filterProps = {
-            initialValue: initialFilterValue,
-            ...filterProps,
-            ref: useCallback(cloneRef(filterRef, innerFilterRef), []),
-            columns,
-            onFilter: useCallback((filterValue) => {
-                syncOnFilter.current?.(filterValue);
-                syncLoadRows.current();
-            }, [])
+            renderFilterConditions,
+            ...filterableProps,
+            columns
         };
-        if (renderFilter) {
-            return renderFilter(_filterProps);
+        if (renderFilterable) {
+            return renderFilterable(_filterProps);
         }
-        return _jsx(CurdFilter, { ..._filterProps });
+        return _jsx(CurdFilterable, { ..._filterProps });
     };
     /**
      * -------------------------------------------------------------
@@ -98,6 +97,7 @@ export const Curd = memo((props) => {
     const [innerOrderColumn, setInnerOrderColumn] = useControlled(props.defaultOrderColumn, props.orderColumn);
     const [innerOrderType, setInnerOrderType] = useControlled(props.defaultOrderType || 'descend', props.orderType);
     const orderChangeHandler = (orderColumn, orderType) => {
+        dataGridProps?.onOrderChange?.(orderColumn, orderType);
         setInnerOrderColumn(orderColumn);
         setInnerOrderType(orderType);
     };
@@ -122,13 +122,13 @@ export const Curd = memo((props) => {
                     page: innerPage.current,
                     pageSize: innerPageSize.current,
                 }
-                : void 0, innerFilterRef.current?.getFormValue(), innerOrderColumn.current
+                : void 0, innerFilterRef.current.getFormValue(), innerOrderColumn.current
                 ? {
                     field: innerOrderColumn.current,
                     type: innerOrderType.current
                 }
                 : void 0);
-            if (res) {
+            if (typeof res === 'object' && res !== null) {
                 setInnerRows(res.rows);
                 setInnerTotal(res.total);
             }
@@ -141,7 +141,6 @@ export const Curd = memo((props) => {
         onReload?.();
         innerLoadRows().then();
     };
-    const syncLoadRows = useSync(innerLoadRows);
     /**
      * -------------------------------------------------------------
      * 弹窗与曾删改部分
@@ -185,19 +184,25 @@ export const Curd = memo((props) => {
         innerLoadRows().then();
         message.success(deleteName + '成功').then();
     };
-    return (_jsxs("div", { ...wrapperProps, ref: wrapperRef, css: style, className: clsx(classes.root, wrapperProps?.className), "data-variant": variant, children: [renderFilterFn(), (creatable || toolbarLeft || toolbarRight || reloadable || resizable || columnConfigurable) &&
-                _jsxs("div", { className: classes.toolbar, children: [_jsxs("div", { className: classes.toolbarLeft, children: [creatable &&
-                                    _jsxs(Button, { prefix: _jsx(Icon, { icon: faPlus }), ...createButtonProps, onClick: createHandler, children: [createName, dataName] }), toolbarLeft] }), _jsxs("div", { className: classes.toolbarRight, children: [!!toolbarRight &&
-                                    _jsxs(_Fragment, { children: [toolbarRight, _jsx(Divider, { className: classes.divider, orientation: "vertical" })] }), reloadable &&
-                                    _jsx(Tooltip, { title: "\u5237\u65B0", children: _jsx(Button, { shape: "circular", variant: "text", color: "text.secondary", prefix: _jsx(Icon, { icon: faRotateRight }), loading: innerLoading.current, onClick: reloadHandler }) }), resizable &&
-                                    _jsx(CurdResizable, { innerSize: innerSize.current, setInnerSize: setInnerSize }), columnConfigurable &&
-                                    _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
-                        ? () => _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) &&
+    return (_jsxs("div", { ...wrapperProps, css: style, className: clsx(classes.root, wrapperProps?.className), "data-variant": variant, children: [_jsxs(Form, { ...mergeComponentProps({
+                    variant: 'plain',
+                    initialValue: initialFilterValue
+                }, filterProps, {
+                    ref: innerFilterRef,
+                    onFinish: filterHandler
+                }), children: [renderFilterableFn(), (creatable || toolbarLeft || toolbarRight || reloadable || resizable || columnConfigurable) &&
+                        _jsxs("div", { className: classes.toolbar, children: [_jsxs("div", { className: classes.toolbarLeft, children: [creatable &&
+                                            _jsxs(Button, { prefix: _jsx(Icon, { icon: faPlus }), ...createButtonProps, onClick: createHandler, children: [createName, dataName] }), toolbarLeft] }), _jsxs("div", { className: classes.toolbarRight, children: [!!toolbarRight &&
+                                            _jsxs(_Fragment, { children: [toolbarRight, _jsx(Divider, { className: classes.divider, orientation: "vertical" })] }), reloadable &&
+                                            _jsx(Tooltip, { title: "\u5237\u65B0", children: _jsx(Button, { shape: "circular", variant: "text", color: "text.secondary", prefix: _jsx(Icon, { icon: faRotateRight }), loading: innerLoading.current, onClick: reloadHandler }) }), resizable &&
+                                            _jsx(CurdResizable, { innerSize: innerSize.current, setInnerSize: setInnerSize }), columnConfigurable &&
+                                            _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
+                                ? () => _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 })] }));
 });
-Curd.Filter = CurdFilter;
+Curd.Filter = CurdFilterable;
 Curd.CONTROL_COLUMN = Symbol('control-column');

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

@@ -2,16 +2,17 @@ export declare const classes: {
     filter: string;
     divider: string;
     toolbar: string;
+    control: string;
     filterGridContainer: string;
     filterGrid: string;
     filterItem: string;
     filterControl: string;
     filtered: string;
     filteredTitle: string;
+    filteredContent: string;
     toolbarLeft: string;
     toolbarRight: string;
     card: string;
-    control: string;
     dialogTitle: string;
     copyButton: string;
 } & {

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

@@ -10,6 +10,7 @@ export const classes = defineInnerClasses('curd', [
     'filterControl',
     'filtered',
     'filteredTitle',
+    'filteredContent',
     'toolbar',
     'toolbarLeft',
     'toolbarRight',
@@ -29,27 +30,36 @@ export const style = defineCss(({ spacing, text, background, borderRadius }) =>
 
     .${classes.filter} {
         display: flex;
+        gap: ${spacing[6]}px;
 
-        .${classes.filterGridContainer},
-        .${classes.filterGrid} {
+        .${classes.filterGrid}, .${classes.filterGridContainer} {
             flex: 1;
+            opacity: 1;
+            justify-content: flex-end;
         }
 
         .${classes.filterControl} {
             align-self: flex-end;
-            margin-bottom: ${spacing[4]}px;
+            margin-bottom: ${spacing[6]}px;
         }
     }
 
     .${classes.filtered} {
         display: flex;
         align-items: center;
-        margin-bottom: ${spacing[8]}px;
+        margin-bottom: ${spacing[6]}px;
 
         .${classes.filteredTitle} {
             color: ${text.secondary};
             font-size: ${13 / 14}em;
         }
+        
+        .${classes.filteredContent} {
+            flex: 1;
+            display: flex;
+            flex-wrap: wrap;
+            gap: ${spacing[2]}px;
+        }
     }
 
     .${classes.toolbar} {

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

@@ -89,7 +89,8 @@ export const CurdDialog = memo(({ ref, onFinish, curdProps, ...props }) => {
      * ----------------------------------------------------------------
      * 结果处理与loading
      */
-    const confirmHandler = async () => {
+    const confirmHandler = async (e) => {
+        props.onConfirm?.(e);
         await innerFormRef.current.submit();
     };
     const [innerLoading, finishHandler] = useLoading(async (value) => {

package/dist/esm/components/curd/curdFilterable.d.ts

@@ -0,0 +1,21 @@
+import { ReactElement, ReactNode } from 'react';
+import { FormRef, FormValue } from '../form';
+import { CurdBaseProps } from './curd';
+import { ButtonProps } from '../button';
+import { DivProps } from '../../types';
+export interface CurdFilterableProps<F extends FormValue = FormValue> extends DivProps {
+    columns?: CurdBaseProps<any, F>['columns'];
+    /**
+     * 筛选项是否可收起与展开。若开启此功能，至少保证第一行每项的高度一致，否则可能出现样式问题
+     */
+    expandable?: boolean;
+    /** 是否显示"筛选"按钮，默认为`true`
+     * @enum true onFilter只会在点击按钮时触发
+     * @enum false 每次触发onChange的同时会触发onFilter
+     */
+    showButton?: boolean;
+    /** 渲染已生效的筛选条件 */
+    renderFilterConditions?(filterValue: F, formInstance: FormRef<F>): ReactNode;
+    buttonProps?: ButtonProps;
+}
+export declare const CurdFilterable: <F extends FormValue = FormValue>(props: CurdFilterableProps<F>) => ReactElement;

package/dist/esm/components/curd/{curdFilter.js → curdFilterable.js}

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 import { createElement as _createElement } from "@emotion/react";
 import { isValidElement, memo, useMemo, useRef, useState } from 'react';
-import { Form, FormItem } from '../form';
+import { FormItem, useFormContext, useFormValueContext } from '../form';
 import { classes } from './curd.style';
-import { clsx, cloneRef, columnsToFilterItem } from '../../utils';
+import { clsx, columnsToFilterItem, isUnset } from '../../utils';
 import { Grid } from '../grid';
 import { Button } from '../button';
 import { Collapse } from '../transitionBase';
@@ -11,7 +11,7 @@ import { useTheme } from '../theme';
 import { Icon } from '../icon';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
 import { faFilter } from '@fortawesome/free-solid-svg-icons/faFilter';
-export const CurdFilter = memo(({ ref, columns, expandable, showButton, renderConditions, buttonProps, onFilter, ...props }) => {
+export const CurdFilterable = memo(({ columns, expandable, showButton = true, renderFilterConditions, buttonProps, ...props }) => {
     const { spacing } = useTheme();
     const items = useMemo(() => {
         return columnsToFilterItem(columns);
@@ -31,29 +31,24 @@ export const CurdFilter = memo(({ ref, columns, expandable, showButton, renderCo
      * --------------------------------------------------------------
      * 触发筛选
      */
-    const formRef = useRef(null);
-    const clickHandler = (e) => {
+    const { formRef } = useFormContext();
+    const filterButtonClick = (e) => {
         buttonProps?.onClick?.(e);
-        const filterValue = formRef.current.getFormValue();
-        onFilter?.(filterValue);
-        renderConditions && setFilteredConditions(filterValue);
+        formRef.current.submit().then();
     };
-    const changeHandler = (field, value, formValue) => {
-        props.onChange?.(field, value, formValue);
-        !showButton && onFilter?.(formValue);
-        renderConditions && setFilteredConditions(formValue);
-    };
-    /**
-     * --------------------------------------------------------------
-     * 已生效的筛选条件
-     */
-    const [filteredConditions, setFilteredConditions] = useState({});
-    return (_jsxs(_Fragment, { children: [_jsx(Form, { ...props, ref: cloneRef(ref, formRef), className: clsx(classes.filter, props.className), variant: "plain", onChange: changeHandler, children: !!items?.length &&
-                    _jsxs(_Fragment, { children: [expandable
-                                ? _jsx(Collapse, { className: classes.filterGridContainer, in: expanded, collapsedSize: () => firstItemRef.current?.offsetHeight || 56, appear: false, children: renderedGrid })
-                                : renderedGrid, (expandable || showButton) &&
-                                _jsxs("div", { className: classes.filterControl, children: [expandable &&
+    const _expandable = expandable && items && items.length > 1;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ...props, className: clsx(classes.filter, props.className), children: !!items?.length &&
+                    _jsxs(_Fragment, { children: [_expandable
+                                ? _jsx(Collapse, { className: classes.filterGridContainer, in: expanded, collapsedSize: () => firstItemRef.current?.offsetHeight || 50, appear: false, children: renderedGrid })
+                                : renderedGrid, (_expandable || showButton) &&
+                                _jsxs("div", { className: classes.filterControl, children: [_expandable &&
                                             _jsx(Button, { variant: "text", suffix: _jsx(Icon, { icon: faChevronDown, style: { rotate: expanded ? '180deg' : void 0 } }), onClick: () => setExpanded(o => !o), children: expanded ? '收起' : '展开' }), showButton &&
-                                            _jsx(Button, { prefix: _jsx(Icon, { icon: faFilter }), variant: "outlined", ...buttonProps, onClick: clickHandler, children: buttonProps?.children ?? '筛选' })] })] }) }), !!renderConditions &&
-                _jsxs("div", { className: classes.filtered, children: [_jsx("div", { className: classes.filteredTitle, children: "\u5DF2\u7B5B\u9009\uFF1A" }), renderConditions(filteredConditions, formRef.current)] })] }));
+                                            _jsx(Button, { prefix: _jsx(Icon, { icon: faFilter }), variant: "outlined", ...buttonProps, onClick: filterButtonClick, children: buttonProps?.children ?? '筛选' })] })] }) }), _jsx(FilterConditions, { renderFilterConditions: renderFilterConditions })] }));
+});
+const FilterConditions = memo(({ renderFilterConditions }) => {
+    const { formRef } = useFormContext();
+    const { formValue } = useFormValueContext();
+    const filterConditions = renderFilterConditions?.(formValue, formRef.current);
+    return !isUnset(filterConditions) &&
+        _jsxs("div", { className: classes.filtered, children: [_jsx("div", { className: classes.filteredTitle, children: "\u5DF2\u7B5B\u9009\uFF1A" }), _jsx("div", { className: classes.filteredContent, children: filterConditions })] });
 });

package/dist/esm/components/curd/index.d.ts

@@ -1,4 +1,4 @@
 export * from './curd';
 export * from './curdDialog';
-export * from './curdFilter';
+export * from './curdFilterable';
 export * from './curdResizable';

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

@@ -1,4 +1,4 @@
 export * from './curd';
 export * from './curdDialog';
-export * from './curdFilter';
+export * from './curdFilterable';
 export * from './curdResizable';

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { ThCell } from '../table';
 import { createContext, useContext, useRef } from 'react';
 import { classes } from './dataGrid.style';
-import { useDraggable } from '../../utils';
+import { cloneRef, useDraggable } from '../../utils';
 const ColumnResizeContextProvider = createContext({
     columnResizable: false,
     columnRefs: { current: [] },
@@ -57,10 +57,10 @@ function ResizableColumn(props) {
     if (!columnResizable) {
         return _jsx(ThCell, { ...props });
     }
-    return (_jsxs(ThCell, { ...props, ref: r => {
+    return (_jsxs(ThCell, { ...props, ref: cloneRef(r => {
             if (r) {
                 columnRefs.current.push(r);
                 cellRef.current = r;
             }
-        }, children: [props.children, _jsx("div", { className: classes.resizeHandle, ...draggableHandles })] }));
+        }, props.ref), children: [props.children, _jsx("div", { className: classes.resizeHandle, ...draggableHandles })] }));
 }

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;