@canlooks/can-ui 0.0.70 → 0.0.71

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

@@ -18,26 +18,26 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
     suppressContentEditableWarning: boolean;
     suppressHydrationWarning: boolean;
     accessKey: string;
-    autoCapitalize: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters";
+    autoCapitalize: "none" | (string & {}) | "off" | "on" | "sentences" | "words" | "characters";
     autoFocus: boolean;
     className: string;
-    contentEditable: boolean | "inherit" | "false" | "true" | "plaintext-only";
+    contentEditable: boolean | "true" | "inherit" | "false" | "plaintext-only";
     contextMenu: string;
     dir: string;
-    draggable: boolean | "false" | "true";
-    enterKeyHint: "search" | "done" | "next" | "enter" | "go" | "previous" | "send";
+    draggable: boolean | "true" | "false";
+    enterKeyHint: "search" | "done" | "send" | "next" | "enter" | "go" | "previous";
     hidden: boolean;
     id: string;
     lang: string;
     nonce: string;
     slot: string;
-    spellCheck: boolean | "false" | "true";
+    spellCheck: boolean | "true" | "false";
     style: import("react").CSSProperties;
     tabIndex: number;
     title: string;
-    translate: "yes" | "no";
+    translate: "no" | "yes";
     radioGroup: string;
-    role: "article" | "button" | "dialog" | "figure" | "form" | "img" | "link" | "main" | "menu" | "menuitem" | "option" | "search" | "table" | "switch" | "status" | (string & {}) | "none" | "checkbox" | "listbox" | "radio" | "region" | "cell" | "grid" | "row" | "listitem" | "menubar" | "progressbar" | "separator" | "tab" | "tabpanel" | "toolbar" | "tooltip" | "treeitem" | "scrollbar" | "alert" | "alertdialog" | "application" | "banner" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "directory" | "document" | "feed" | "gridcell" | "group" | "heading" | "list" | "log" | "marquee" | "math" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "note" | "presentation" | "radiogroup" | "rowgroup" | "rowheader" | "searchbox" | "slider" | "spinbutton" | "tablist" | "term" | "textbox" | "timer" | "tree" | "treegrid";
+    role: "article" | "button" | "dialog" | "figure" | "form" | "img" | "link" | "main" | "menu" | "menuitem" | "option" | "search" | "table" | "switch" | "none" | "status" | "feed" | "grid" | "heading" | "list" | "note" | "presentation" | "radio" | "slider" | "timer" | "tree" | (string & {}) | "checkbox" | "listbox" | "region" | "cell" | "row" | "listitem" | "menubar" | "progressbar" | "separator" | "tab" | "tabpanel" | "toolbar" | "tooltip" | "treeitem" | "scrollbar" | "alert" | "alertdialog" | "application" | "banner" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "directory" | "document" | "gridcell" | "group" | "log" | "marquee" | "math" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "radiogroup" | "rowgroup" | "rowheader" | "searchbox" | "spinbutton" | "tablist" | "term" | "textbox" | "treegrid";
     about: string;
     content: string;
     datatype: string;
@@ -61,7 +61,7 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
     security: string;
     unselectable: "off" | "on";
     popover: "" | "auto" | "manual";
-    popoverTargetAction: "hide" | "show" | "toggle";
+    popoverTargetAction: "toggle" | "hide" | "show";
     popoverTarget: string;
     inert: boolean;
     inputMode: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal";
@@ -69,52 +69,52 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
     exportparts: string;
     part: string;
     "aria-activedescendant": string;
-    "aria-atomic": boolean | "false" | "true";
-    "aria-autocomplete": "both" | "none" | "inline" | "list";
+    "aria-atomic": boolean | "true" | "false";
+    "aria-autocomplete": "none" | "list" | "both" | "inline";
     "aria-braillelabel": string;
     "aria-brailleroledescription": string;
-    "aria-busy": boolean | "false" | "true";
-    "aria-checked": boolean | "mixed" | "false" | "true";
+    "aria-busy": boolean | "true" | "false";
+    "aria-checked": boolean | "true" | "mixed" | "false";
     "aria-colcount": number;
     "aria-colindex": number;
     "aria-colindextext": string;
     "aria-colspan": number;
     "aria-controls": string;
-    "aria-current": boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date";
+    "aria-current": boolean | "time" | "true" | "location" | "page" | "false" | "step" | "date";
     "aria-describedby": string;
     "aria-description": string;
     "aria-details": string;
-    "aria-disabled": boolean | "false" | "true";
-    "aria-dropeffect": "link" | "none" | "copy" | "move" | "execute" | "popup";
+    "aria-disabled": boolean | "true" | "false";
+    "aria-dropeffect": "link" | "copy" | "none" | "move" | "execute" | "popup";
     "aria-errormessage": string;
-    "aria-expanded": boolean | "false" | "true";
+    "aria-expanded": boolean | "true" | "false";
     "aria-flowto": string;
-    "aria-grabbed": boolean | "false" | "true";
-    "aria-haspopup": boolean | "dialog" | "menu" | "listbox" | "grid" | "false" | "true" | "tree";
-    "aria-hidden": boolean | "false" | "true";
-    "aria-invalid": boolean | "false" | "true" | "grammar" | "spelling";
+    "aria-grabbed": boolean | "true" | "false";
+    "aria-haspopup": boolean | "dialog" | "menu" | "true" | "grid" | "tree" | "listbox" | "false";
+    "aria-hidden": boolean | "true" | "false";
+    "aria-invalid": boolean | "true" | "false" | "grammar" | "spelling";
     "aria-keyshortcuts": string;
     "aria-label": string;
     "aria-labelledby": string;
     "aria-level": number;
     "aria-live": "off" | "assertive" | "polite";
-    "aria-modal": boolean | "false" | "true";
-    "aria-multiline": boolean | "false" | "true";
-    "aria-multiselectable": boolean | "false" | "true";
+    "aria-modal": boolean | "true" | "false";
+    "aria-multiline": boolean | "true" | "false";
+    "aria-multiselectable": boolean | "true" | "false";
     "aria-orientation": "horizontal" | "vertical";
     "aria-owns": string;
     "aria-placeholder": string;
     "aria-posinset": number;
-    "aria-pressed": boolean | "mixed" | "false" | "true";
-    "aria-readonly": boolean | "false" | "true";
+    "aria-pressed": boolean | "true" | "mixed" | "false";
+    "aria-readonly": boolean | "true" | "false";
     "aria-relevant": "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
-    "aria-required": boolean | "false" | "true";
+    "aria-required": boolean | "true" | "false";
     "aria-roledescription": string;
     "aria-rowcount": number;
     "aria-rowindex": number;
     "aria-rowindextext": string;
     "aria-rowspan": number;
-    "aria-selected": boolean | "false" | "true";
+    "aria-selected": boolean | "true" | "false";
     "aria-setsize": number;
     "aria-sort": "none" | "ascending" | "descending" | "other";
     "aria-valuemax": number;

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

@@ -1,9 +1,9 @@
-import { ReactNode, Ref, JSX } from 'react';
+import { ReactNode, Ref, ComponentProps } from 'react';
 import { PopperProps, PopperRef } from '../popper';
 import { ColorPropsValue, DivProps, Size } from '../../types';
 import { ColorInstance } from 'color';
 export interface ColorPickerProps extends Omit<DivProps, 'defaultValue' | 'onChange'> {
-    inputProps?: JSX.IntrinsicElements['input'];
+    inputProps?: ComponentProps<'input'>;
     popperProps?: PopperProps;
     popperRef?: Ref<PopperRef>;
     size?: Size;

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 })] }));
 }