@canlooks/can-ui 0.0.69 → 0.0.71

package/dist/esm/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/esm/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/esm/components/dateTimeRangePicker/dateTimeRangePicker.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo, useRef } from 'react';
 import { classes, style } from './dateTimeRangePicker.style';
-import { clsx, useControlled } from '../../utils';
+import { clsx, mergeComponentProps, useControlled } from '../../utils';
 import { DateTimePicker } from '../dateTimePicker';
 export const DateTimeRangePicker = memo(({ startPickerProps, endPickerProps, format = 'YYYY-MM-DD', defaultValue, value, onChange, defaultOpenPicker = 'closed', openPicker, onOpenPickerChange, autoClose = !/[Hms]/.test(format), separator, min, max, disabledDates, disabledHours, disabledMinutes, disabledSeconds, 
 // 以下属性除autoFocus外，原样转发，autoFocus只对开始选择器生效
@@ -9,29 +9,51 @@ variant, size, color, disabled, readOnly, autoFocus, ...props }) => {
     const [innerOpen, setInnerOpen] = useControlled(defaultOpenPicker, openPicker, onOpenPickerChange);
     const [innerValue, setInnerValue] = useControlled(defaultValue, value, onChange);
     const endPickerInputRef = useRef(null);
-    const commonProps = {
-        format, disabledDates, disabledHours, disabledMinutes, disabledSeconds,
-        variant, size, color, disabled, readOnly
-    };
     const showTimer = /[Hms]/.test(format);
-    return (_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), children: [_jsx(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 (_jsx(DateTimePicker, { ...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 ?? _jsx("span", { children: "-" }), _jsx(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 (_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), children: [renderPickerItem('start'), separator ?? _jsx("span", { children: "-" }), renderPickerItem('end')] }));
 });

package/dist/esm/components/descriptions/descriptions.js

@@ -11,6 +11,8 @@ export function useDescriptionsContext() {
 }
 const DescriptionsContext = createContext({});
 export const Descriptions = memo(({ size, labelWidth, colon = ':', labelPlacement = 'left', disableMargin, disablePadding, items, itemComponent: ItemComponent = DescriptionItem, variant = 'grid', columnCount = 3, ...props }) => {
+    const theme = useTheme();
+    size ??= theme.size;
     const contextValue = useMemo(() => ({
         size, labelWidth, colon, labelPlacement, disableMargin, disablePadding, variant
     }), [

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

@@ -2,8 +2,8 @@ export declare const classes: {
     col: string;
     label: string;
     content: string;
-    vertical: string;
     colon: string;
+    vertical: string;
     item: string;
     labelCol: string;
     contentCol: string;

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

@@ -33,4 +33,4 @@ export interface DialogProps extends Omit<ModalProps, 'title' | 'prefix'> {
     defaultOpen?: boolean;
     onClose?(closeReason: DialogCloseReason): void;
 }
-export declare function Dialog({ ref, icon, title, footer, prefix, suffix, width, minWidth, maxWidth, showClose, closeProps, showConfirm, confirmText, confirmProps, onConfirm, confirmLoading, showCancel, cancelText, cancelProps, onCancel, draggable, maskClosable, escapeClosable, defaultOpen, open, onClose, ...props }: DialogProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Dialog({ icon, title, footer, prefix, suffix, width, minWidth, maxWidth, showClose, closeProps, showConfirm, confirmText, confirmProps, onConfirm, confirmLoading, showCancel, cancelText, cancelProps, onCancel, draggable, maskClosable, escapeClosable, defaultOpen, open, onClose, ...props }: DialogProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/components/dialog/dialog.js

@@ -7,7 +7,7 @@ import { Button } from '../button';
 import { Draggable } from '../draggable';
 import { Icon } from '../icon';
 import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
-export function Dialog({ ref, icon, title, footer, prefix, suffix, width = 420, minWidth, maxWidth = '100%', showClose = true, closeProps, showConfirm = true, confirmText = '确 定', confirmProps, onConfirm, confirmLoading = false, showCancel = true, cancelText = '取 消', cancelProps, onCancel, draggable = true, maskClosable = true, escapeClosable = true, defaultOpen = false, open, onClose, ...props }) {
+export function Dialog({ icon, title, footer, prefix, suffix, width = 420, minWidth, maxWidth = '100%', showClose = true, closeProps, showConfirm = true, confirmText = '确 定', confirmProps, onConfirm, confirmLoading = false, showCancel = true, cancelText = '取 消', cancelProps, onCancel, draggable = true, maskClosable = true, escapeClosable = true, defaultOpen = false, open, onClose, ...props }) {
     const [innerOpen, _setInnerOpen] = useControlled(defaultOpen, open);
     const close = (closeReason) => {
         if (!innerLoading.current || closeReason === 'confirmed') {
@@ -78,7 +78,7 @@ export function Dialog({ ref, icon, title, footer, prefix, suffix, width = 420,
         }
         return footer;
     };
-    return (_jsx(Modal, { ...props, ref: cloneRef(ref, overlayRef), css: style, className: clsx(classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-draggable": draggable, children: _jsx(Draggable, { container: () => overlayRef.current, children: (targetProps, handleProps) => _jsxs("div", { className: classes.card, ...targetProps, style: { width, minWidth, maxWidth, ...targetProps.style }, children: [!!icon &&
+    return (_jsx(Modal, { ...props, ref: cloneRef(overlayRef, props.ref), css: style, className: clsx(classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-draggable": draggable, children: _jsx(Draggable, { container: () => overlayRef.current, children: (targetProps, handleProps) => _jsxs("div", { className: classes.card, ...targetProps, style: { width, minWidth, maxWidth, ...targetProps.style }, children: [!!icon &&
                         _jsx("div", { className: classes.icon, children: icon }), _jsxs("div", { className: classes.content, children: [!!(title || showClose) &&
                                 _jsxs("div", { className: classes.titleRow, ...handleProps, children: [_jsx("div", { className: classes.title, children: title }), showClose &&
                                             _jsx(Button, { shape: "circular", variant: "text", color: "text.secondary", ...closeProps, className: clsx(classes.close, closeProps?.className), onClick: closeHandler, children: _jsx(Icon, { icon: faXmark }) })] }), _jsxs("div", { ref: bodyRef, className: classes.body, onScroll: onScroll, children: [!!prefix &&

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

@@ -2,11 +2,11 @@ export declare const classes: {
     body: string;
     footer: string;
     title: string;
-    icon: string;
     content: string;
+    close: string;
     prefix: string;
+    icon: string;
     suffix: string;
-    close: string;
     card: string;
     titleRow: string;
     bodyWrap: string;

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

@@ -1,14 +1,24 @@
-import { ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode, Ref } from 'react';
 import { DraggableGestureOptions, HandleProps } from '../../utils';
 import { DefineElement } from '../../types';
 export type DraggableTargetProps = {
+    onTransitionEnd(e: React.TransitionEvent): void;
     style: {
         translate: string;
     };
+    'data-dragging': 'true' | 'false';
+};
+export type DraggableRef = {
+    restore(transition?: boolean): void;
 };
 export interface DraggableProps extends DraggableGestureOptions {
+    ref?: Ref<DraggableRef>;
     translateLimit?(targetTranslate: [number, number]): [number, number];
+    /** 拖拽结束后是否恢复原来的位置，默认为`false` */
+    restoreOnDragEnd?: boolean;
+    /** 恢复时是否播放过度动画，默认为`true` */
+    restoreTransition?: boolean;
     container?: DefineElement;
     children: ReactElement | ((targetProps: DraggableTargetProps, handleProps: HandleProps) => ReactNode);
 }
-export declare function Draggable({ translateLimit, container, children, ...draggableOptions }: DraggableProps): ReactNode;
+export declare function Draggable({ ref, translateLimit, restoreOnDragEnd, restoreTransition, container, children, ...draggableOptions }: DraggableProps): React.ReactNode;

package/dist/esm/components/draggable/draggable.js

@@ -1,12 +1,26 @@
-import { cloneElement, isValidElement, useMemo, useState } from 'react';
+import { cloneElement, isValidElement, useMemo, useState, useImperativeHandle } from 'react';
 import { range, useDraggable } from '../../utils';
-export function Draggable({ translateLimit, container, children, ...draggableOptions }) {
+import { useTheme } from '../theme';
+export function Draggable({ ref, translateLimit, restoreOnDragEnd, restoreTransition = true, container, children, ...draggableOptions }) {
+    useImperativeHandle(ref, () => ({
+        restore
+    }));
+    const [transiting, setTransiting] = useState(false);
+    const restore = (transition = restoreTransition) => {
+        transition && setTransiting(true);
+        setTranslate([0, 0]);
+    };
+    const onTransitionEnd = () => {
+        setTransiting(false);
+    };
     const [translate, setTranslate] = useState([0, 0]);
+    const [isDragging, setIsDragging] = useState(false);
     const props = children.props;
     const draggableHandles = useDraggable({
         ...draggableOptions,
         onDragStart(e) {
             draggableOptions.onDragStart?.(e);
+            setIsDragging(true);
             return [...translate];
         },
         onDrag(info, e) {
@@ -27,20 +41,36 @@ export function Draggable({ translateLimit, container, children, ...draggableOpt
             }
             setTranslate([newX, newY]);
         },
+        onDragEnd(info) {
+            draggableOptions.onDragEnd?.(info);
+            setIsDragging(false);
+            restoreOnDragEnd && restore();
+        },
         onClick: props?.onClick
     });
+    const theme = useTheme();
     const style = useMemo(() => ({
         translate: `${translate[0]}px ${translate[1]}px`,
+        ...transiting && { transition: `translate .3s ${theme.easing.bounce}` },
         ...props?.style
-    }), [translate, props?.style]);
+    }), [translate, transiting, theme, props?.style]);
     if (isValidElement(children)) {
         return cloneElement(children, {
             style,
-            ...draggableHandles
+            'data-dragging': String(isDragging),
+            onTransitionEnd,
+            ...draggableHandles,
         });
     }
     if (typeof children === 'function') {
-        return children({ style: { translate: `${translate[0]}px ${translate[1]}px` } }, draggableHandles);
+        return children({
+            style: {
+                translate: `${translate[0]}px ${translate[1]}px`,
+                ...transiting && { transition: `translate .3s ${theme.easing.bounce}` },
+            },
+            'data-dragging': String(isDragging),
+            onTransitionEnd
+        }, draggableHandles);
     }
     return children;
 }

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

@@ -1,6 +1,7 @@
-import { CSSProperties } from 'react';
-import { TransportStyleProps } from '../transportStyle';
-export interface FlexProps extends TransportStyleProps {
+import { CSSProperties, ElementType } from 'react';
+import { TransportStyleOwnProps } from '../transportStyle';
+import { OverridableComponent, OverridableProps } from '../../types';
+interface FlexOwnProps extends TransportStyleOwnProps {
     inline?: boolean;
     /** 排列方式，默认为`row` */
     direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
@@ -12,4 +13,6 @@ export interface FlexProps extends TransportStyleProps {
     /** 当compact为true时，gap无效，而且会清除子元素的圆角，让他们拼接起来 */
     compact?: boolean;
 }
-export declare function Flex({ inline, direction, wrap, gap, columnGap, rowGap, compact, ...props }: FlexProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export type FlexProps<C extends ElementType = 'div'> = OverridableProps<FlexOwnProps, C>;
+export declare const Flex: OverridableComponent<FlexOwnProps>;
+export {};

package/dist/esm/components/flex/flex.js

@@ -3,7 +3,7 @@ import { Children, cloneElement, isValidElement } from 'react';
 import { classes } from './flex.style';
 import { clsx, filterProperties } from '../../utils';
 import { TransportStyle } from '../transportStyle';
-export function Flex({ inline, direction = 'row', wrap, gap = 0, columnGap, rowGap, compact, ...props }) {
+export const Flex = (({ inline, direction = 'row', wrap, gap = 0, columnGap, rowGap, compact, ...props }) => {
     const renderChildren = () => {
         if (!compact) {
             return props.children;
@@ -26,4 +26,4 @@ export function Flex({ inline, direction = 'row', wrap, gap = 0, columnGap, rowG
             flexWrap: wrap, columnGap, rowGap, gap,
             ...props.style
         }), children: renderChildren() }));
-}
+});

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

@@ -14,7 +14,7 @@ export type FormSharedProps = {
     size?: Size;
 };
 interface FormOwnProps<V extends FormValue = FormValue> extends FormSharedProps, DescriptionsSharedProps, GridOwnProps {
-    ref?: Ref<FormRef<V> | null>;
+    ref?: Ref<FormRef<V>>;
     /** 最外层元素的ref，默认{@link ref}属性已经被{@link FormRef}取代 */
     wrapperRef?: Ref<HTMLFormElement>;
     initialValue?: V;
@@ -24,14 +24,19 @@ interface FormOwnProps<V extends FormValue = FormValue> extends FormSharedProps,
     descriptionsProps?: DescriptionsProps;
 }
 export type FormProps<V extends FormValue = FormValue, C extends ElementType = 'form'> = OverridableProps<FormOwnProps<V>, C>;
-interface FormContext<V extends FormValue> extends FormSharedProps {
-    formValue?: V;
-    setFieldValue?(field: FieldPath, value: any, silent?: boolean): void;
+type FormContext<V extends FormValue> = {
+    inForm?: boolean;
     itemsContainer?: Map<string, FormItemRef>;
     formRef?: RefObject<FormRef<V> | null>;
-}
+};
 declare const FormContext: React.Context<FormContext<any>>;
 export declare function useFormContext<V extends FormValue>(): FormContext<V>;
+type FormValueContextType<V extends FormValue> = {
+    formValue?: V;
+    setFieldValue?(field: FieldPath, value: any, silent?: boolean): void;
+};
+export declare function useFormValueContext<V extends FormValue>(): FormValueContextType<V>;
+export declare function useFormStyleContext(): FormSharedProps;
 export type FormRef<V extends FormValue = FormValue> = {
     /** 存在校验不通过的字段时会得到`null` */
     submit(): Promise<V | null>;

package/dist/esm/components/form/form.js

@@ -9,11 +9,43 @@ const FormContext = createContext({});
 export function useFormContext() {
     return useContext(FormContext);
 }
-export const Form = (({ component: Component = 'form', ref, wrapperRef, initialValue, onChange, onFinish, items, descriptionsProps, requiredMark = '*', variant = 'grid', 
+const FormValueContext = createContext({});
+export function useFormValueContext() {
+    return useContext(FormValueContext);
+}
+const FormStyleContext = createContext({});
+export function useFormStyleContext() {
+    return useContext(FormStyleContext);
+}
+export const Form = (({ component: Component = 'form', ref, wrapperRef, initialValue, onChange, onFinish, items, descriptionsProps, requiredMark, variant, 
 // 以下属性从DescriptionsSharedProps继承
 labelWidth, labelPlacement = 'left', colon = ':', size, disableMargin, disablePadding, 
 // 以下属性从GridOwnProps继承
 inline, columnCount = 1, gap, columnGap, rowGap, ...props }) => {
+    const { inForm, formRef: parentFormRef } = useFormContext();
+    const renderChildren = () => {
+        return variant === 'plain'
+            ? props.children
+            : _jsx(Descriptions, { ...descriptionsProps, size: size, labelWidth: labelWidth, colon: colon, labelPlacement: labelPlacement, disableMargin: disableMargin, disablePadding: disablePadding, variant: variant, inline: inline, columnCount: columnCount, gap: gap, columnGap: columnGap, rowGap: rowGap, items: items, itemComponent: FormItem, children: props.children });
+    };
+    /**
+     * ------------------------------------------------------------------------
+     * 嵌套在另个一个form中，值取最顶层的form，当前组件仅做样式处理
+     */
+    if (inForm) {
+        useImperativeHandle(ref, () => parentFormRef.current);
+        const context = useFormStyleContext();
+        requiredMark ??= context.requiredMark ?? '*';
+        variant ??= context.variant ?? 'grid';
+        size ??= context.size;
+        return (_jsx(FormStyleContext, { value: useMemo(() => ({
+                requiredMark, variant, size
+            }), [
+                requiredMark, variant, size
+            ]), children: renderChildren() }));
+    }
+    requiredMark ??= '*';
+    variant ??= 'grid';
     /**
      * ------------------------------------------------------------------------
      * 表单值
@@ -42,8 +74,7 @@ inline, columnCount = 1, gap, columnGap, rowGap, ...props }) => {
         e?.preventDefault();
         try {
             await Promise.all([...itemsContainer.current].map(async ([, item]) => {
-                const isValid = await item.validate();
-                return isValid ? void 0 : Promise.reject();
+                return await item.validate() || Promise.reject();
             }));
             onFinish?.(formValue.current);
             return formValue.current;
@@ -80,7 +111,7 @@ inline, columnCount = 1, gap, columnGap, rowGap, ...props }) => {
             setFormValue(newValue);
         },
         resetField: field => {
-            itemsContainer.current.get(stringifyField(field))?.reset();
+            itemsContainer.current.get(stringifyField(field))?.reset(formValue.current, initialValue);
             setFormValue(o => ({ ...o }));
         },
         isFormTouched: () => [...itemsContainer.current].some(([, item]) => item.isTouched),
@@ -88,12 +119,15 @@ inline, columnCount = 1, gap, columnGap, rowGap, ...props }) => {
     };
     useImperativeHandle(ref, () => formRef.current);
     return (_jsx(Component, { ...props, ref: wrapperRef, css: style, className: clsx(classes.root, props.className), onSubmit: submitHandler, children: _jsx(FormContext, { value: useMemo(() => ({
-                requiredMark, variant, size,
-                formValue: formValue.current, setFieldValue,
+                inForm: true,
                 itemsContainer: itemsContainer.current, formRef
-            }), [requiredMark, variant, size, formValue.current]), children: variant === 'plain'
-                ? props.children
-                : _jsx(Descriptions, { ...descriptionsProps, size: size, labelWidth: labelWidth, colon: colon, labelPlacement: labelPlacement, disableMargin: disableMargin, disablePadding: disablePadding, items: items, variant: variant, itemComponent: FormItem, inline: inline, columnCount: columnCount, gap: gap, columnGap: columnGap, rowGap: rowGap, children: props.children }) }) }));
+            }), []), children: _jsx(FormStyleContext, { value: useMemo(() => ({
+                    requiredMark, variant, size
+                }), [
+                    requiredMark, variant, size
+                ]), children: _jsx(FormValueContext, { value: useMemo(() => ({
+                        formValue: formValue.current, setFieldValue
+                    }), [formValue.current]), children: renderChildren() }) }) }) }));
 });
 Form.Item = FormItem;
 Form.Relatable = FormRelatable;

package/dist/esm/components/form/formItem.d.ts

@@ -3,11 +3,11 @@ import { FormRef, FormSharedProps, FormValue } from './form';
 import { ColorPropsValue, MergeProps, Size } from '../../types';
 import { FieldPath } from '../../utils';
 import { DescriptionItemProps } from '../descriptions';
-export type FormItemRules<I = any> = {
+export type FormItemRules<I = any, R = FormRef> = {
     message?: ReactNode;
     required?: boolean;
     pattern?: RegExp;
-    validator?(fieldValue: I | undefined, formValue: any, formRef: FormRef | null): any;
+    validator?(fieldValue: I | undefined, formValue: any, formRef: R | null): any;
 };
 export type FieldProps<I = any> = {
     checked?: boolean;
@@ -18,6 +18,7 @@ export type StyleProps = {
     size?: Size;
     color?: ColorPropsValue;
 };
+export type FormItemChildren<T extends ReactNode = ReactNode, I = any> = T | ((fieldProps: FieldProps<I>, styleProps: StyleProps, key: string) => T);
 export interface FormItemOwnProps<I = any> extends FormSharedProps {
     ref?: Ref<FormItemRef>;
     wrapperRef?: Ref<HTMLDivElement>;
@@ -29,11 +30,13 @@ export interface FormItemOwnProps<I = any> extends FormSharedProps {
     helperText?: ReactNode;
     dependencies?: FieldPath[];
     /**
-     * 若`children`为`function`类型时，第三个参数`key`主要用于强制重渲染，
-     * 在没有{@link initialValue}时非常有用
+     * 若`children`为`function`类型时，
+     * 第三个参数`key`主要用于强制重渲染，在没有{@link initialValue}时非常有用
      */
-    children?: ReactNode | ((fieldProps: FieldProps<I>, styleProps: StyleProps, key?: string) => ReactNode);
+    children?: FormItemChildren;
     noStyle?: boolean;
+    /** @private 内部使用，强制指定字段值 */
+    _fieldValue?: I;
 }
 export type FormItemProps<I = any, C extends ElementType = 'div'> = MergeProps<FormItemOwnProps<I>, DescriptionItemProps<C>>;
 export type FieldError = null | {
@@ -42,7 +45,9 @@ export type FieldError = null | {
 export type FormItemRef = {
     validate(): Promise<boolean>;
     error: FieldError;
-    reset(initialValues?: FormValue): void;
-    isTouched: boolean;
+    reset(): void;
+    /** @private */
+    reset(currentFormValue: FormValue, initialFormValue?: FormValue): void;
+    isTouched(): boolean;
 };
 export declare const FormItem: <I = any, C extends ElementType = 'div'>(props: FormItemProps<I, C>) => ReactNode;