@canlooks/can-ui 0.0.69 → 0.0.71

package/dist/cjs/components/descriptions/descriptions.js

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

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

@@ -10,7 +10,7 @@ const button_1 = require("../button");
 const draggable_1 = require("../draggable");
 const icon_1 = require("../icon");
 const faXmark_1 = require("@fortawesome/free-solid-svg-icons/faXmark");
-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 }) {
+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] = (0, utils_1.useControlled)(defaultOpen, open);
     const close = (closeReason) => {
         if (!innerLoading.current || closeReason === 'confirmed') {
@@ -81,7 +81,7 @@ function Dialog({ ref, icon, title, footer, prefix, suffix, width = 420, minWidt
         }
         return footer;
     };
-    return ((0, jsx_runtime_1.jsx)(modal_1.Modal, { ...props, ref: (0, utils_1.cloneRef)(ref, overlayRef), css: dialog_style_1.style, className: (0, utils_1.clsx)(dialog_style_1.classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-draggable": draggable, children: (0, jsx_runtime_1.jsx)(draggable_1.Draggable, { container: () => overlayRef.current, children: (targetProps, handleProps) => (0, jsx_runtime_1.jsxs)("div", { className: dialog_style_1.classes.card, ...targetProps, style: { width, minWidth, maxWidth, ...targetProps.style }, children: [!!icon &&
+    return ((0, jsx_runtime_1.jsx)(modal_1.Modal, { ...props, ref: (0, utils_1.cloneRef)(overlayRef, props.ref), css: dialog_style_1.style, className: (0, utils_1.clsx)(dialog_style_1.classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-draggable": draggable, children: (0, jsx_runtime_1.jsx)(draggable_1.Draggable, { container: () => overlayRef.current, children: (targetProps, handleProps) => (0, jsx_runtime_1.jsxs)("div", { className: dialog_style_1.classes.card, ...targetProps, style: { width, minWidth, maxWidth, ...targetProps.style }, children: [!!icon &&
                         (0, jsx_runtime_1.jsx)("div", { className: dialog_style_1.classes.icon, children: icon }), (0, jsx_runtime_1.jsxs)("div", { className: dialog_style_1.classes.content, children: [!!(title || showClose) &&
                                 (0, jsx_runtime_1.jsxs)("div", { className: dialog_style_1.classes.titleRow, ...handleProps, children: [(0, jsx_runtime_1.jsx)("div", { className: dialog_style_1.classes.title, children: title }), showClose &&
                                             (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text.secondary", ...closeProps, className: (0, utils_1.clsx)(dialog_style_1.classes.close, closeProps?.className), onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faXmark_1.faXmark }) })] }), (0, jsx_runtime_1.jsxs)("div", { ref: bodyRef, className: dialog_style_1.classes.body, onScroll: onScroll, children: [!!prefix &&

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

@@ -3,13 +3,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Draggable = Draggable;
 const react_1 = require("react");
 const utils_1 = require("../../utils");
-function Draggable({ translateLimit, container, children, ...draggableOptions }) {
+const theme_1 = require("../theme");
+function Draggable({ ref, translateLimit, restoreOnDragEnd, restoreTransition = true, container, children, ...draggableOptions }) {
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        restore
+    }));
+    const [transiting, setTransiting] = (0, react_1.useState)(false);
+    const restore = (transition = restoreTransition) => {
+        transition && setTransiting(true);
+        setTranslate([0, 0]);
+    };
+    const onTransitionEnd = () => {
+        setTransiting(false);
+    };
     const [translate, setTranslate] = (0, react_1.useState)([0, 0]);
+    const [isDragging, setIsDragging] = (0, react_1.useState)(false);
     const props = children.props;
     const draggableHandles = (0, utils_1.useDraggable)({
         ...draggableOptions,
         onDragStart(e) {
             draggableOptions.onDragStart?.(e);
+            setIsDragging(true);
             return [...translate];
         },
         onDrag(info, e) {
@@ -30,20 +44,36 @@ function Draggable({ translateLimit, container, children, ...draggableOptions })
             }
             setTranslate([newX, newY]);
         },
+        onDragEnd(info) {
+            draggableOptions.onDragEnd?.(info);
+            setIsDragging(false);
+            restoreOnDragEnd && restore();
+        },
         onClick: props?.onClick
     });
+    const theme = (0, theme_1.useTheme)();
     const style = (0, react_1.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 ((0, react_1.isValidElement)(children)) {
         return (0, react_1.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/cjs/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/cjs/components/flex/flex.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Flex = Flex;
+exports.Flex = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const flex_style_1 = require("./flex.style");
 const utils_1 = require("../../utils");
 const transportStyle_1 = require("../transportStyle");
-function Flex({ inline, direction = 'row', wrap, gap = 0, columnGap, rowGap, compact, ...props }) {
+exports.Flex = (({ inline, direction = 'row', wrap, gap = 0, columnGap, rowGap, compact, ...props }) => {
     const renderChildren = () => {
         if (!compact) {
             return props.children;
@@ -29,4 +29,4 @@ function Flex({ inline, direction = 'row', wrap, gap = 0, columnGap, rowGap, com
             flexWrap: wrap, columnGap, rowGap, gap,
             ...props.style
         }), children: renderChildren() }));
-}
+});

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

@@ -2,6 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Form = void 0;
 exports.useFormContext = useFormContext;
+exports.useFormValueContext = useFormValueContext;
+exports.useFormStyleContext = useFormStyleContext;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("../../utils");
@@ -13,11 +15,43 @@ const FormContext = (0, react_1.createContext)({});
 function useFormContext() {
     return (0, react_1.useContext)(FormContext);
 }
-exports.Form = (({ component: Component = 'form', ref, wrapperRef, initialValue, onChange, onFinish, items, descriptionsProps, requiredMark = '*', variant = 'grid', 
+const FormValueContext = (0, react_1.createContext)({});
+function useFormValueContext() {
+    return (0, react_1.useContext)(FormValueContext);
+}
+const FormStyleContext = (0, react_1.createContext)({});
+function useFormStyleContext() {
+    return (0, react_1.useContext)(FormStyleContext);
+}
+exports.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
+            : (0, jsx_runtime_1.jsx)(descriptions_1.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_1.FormItem, children: props.children });
+    };
+    /**
+     * ------------------------------------------------------------------------
+     * 嵌套在另个一个form中，值取最顶层的form，当前组件仅做样式处理
+     */
+    if (inForm) {
+        (0, react_1.useImperativeHandle)(ref, () => parentFormRef.current);
+        const context = useFormStyleContext();
+        requiredMark ??= context.requiredMark ?? '*';
+        variant ??= context.variant ?? 'grid';
+        size ??= context.size;
+        return ((0, jsx_runtime_1.jsx)(FormStyleContext, { value: (0, react_1.useMemo)(() => ({
+                requiredMark, variant, size
+            }), [
+                requiredMark, variant, size
+            ]), children: renderChildren() }));
+    }
+    requiredMark ??= '*';
+    variant ??= 'grid';
     /**
      * ------------------------------------------------------------------------
      * 表单值
@@ -46,8 +80,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;
@@ -84,7 +117,7 @@ inline, columnCount = 1, gap, columnGap, rowGap, ...props }) => {
             setFormValue(newValue);
         },
         resetField: field => {
-            itemsContainer.current.get((0, utils_1.stringifyField)(field))?.reset();
+            itemsContainer.current.get((0, utils_1.stringifyField)(field))?.reset(formValue.current, initialValue);
             setFormValue(o => ({ ...o }));
         },
         isFormTouched: () => [...itemsContainer.current].some(([, item]) => item.isTouched),
@@ -92,12 +125,15 @@ inline, columnCount = 1, gap, columnGap, rowGap, ...props }) => {
     };
     (0, react_1.useImperativeHandle)(ref, () => formRef.current);
     return ((0, jsx_runtime_1.jsx)(Component, { ...props, ref: wrapperRef, css: form_style_1.style, className: (0, utils_1.clsx)(form_style_1.classes.root, props.className), onSubmit: submitHandler, children: (0, jsx_runtime_1.jsx)(FormContext, { value: (0, react_1.useMemo)(() => ({
-                requiredMark, variant, size,
-                formValue: formValue.current, setFieldValue,
+                inForm: true,
                 itemsContainer: itemsContainer.current, formRef
-            }), [requiredMark, variant, size, formValue.current]), children: variant === 'plain'
-                ? props.children
-                : (0, jsx_runtime_1.jsx)(descriptions_1.Descriptions, { ...descriptionsProps, size: size, labelWidth: labelWidth, colon: colon, labelPlacement: labelPlacement, disableMargin: disableMargin, disablePadding: disablePadding, items: items, variant: variant, itemComponent: formItem_1.FormItem, inline: inline, columnCount: columnCount, gap: gap, columnGap: columnGap, rowGap: rowGap, children: props.children }) }) }));
+            }), []), children: (0, jsx_runtime_1.jsx)(FormStyleContext, { value: (0, react_1.useMemo)(() => ({
+                    requiredMark, variant, size
+                }), [
+                    requiredMark, variant, size
+                ]), children: (0, jsx_runtime_1.jsx)(FormValueContext, { value: (0, react_1.useMemo)(() => ({
+                        formValue: formValue.current, setFieldValue
+                    }), [formValue.current]), children: renderChildren() }) }) }) }));
 });
 exports.Form.Item = formItem_1.FormItem;
 exports.Form.Relatable = formRelatable_1.FormRelatable;

package/dist/cjs/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;

package/dist/cjs/components/form/formItem.js

@@ -8,46 +8,54 @@ const utils_1 = require("../../utils");
 const descriptions_1 = require("../descriptions");
 const form_style_1 = require("./form.style");
 const transitionBase_1 = require("../transitionBase");
-const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, required, error, helperText, dependencies, children, noStyle, requiredMark, variant, size, ...props }) => {
-    const { formValue, setFieldValue, itemsContainer, formRef, ...context } = (0, form_1.useFormContext)();
+const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, required, error, helperText, dependencies, children, noStyle, requiredMark, variant, size, _fieldValue, ...props }) => {
+    const context = (0, form_1.useFormStyleContext)();
     requiredMark ??= context.requiredMark ?? '*';
     variant ??= context.variant ?? 'grid';
     size ??= context.size;
+    const { formValue, setFieldValue } = (0, form_1.useFormValueContext)();
+    const { itemsContainer, formRef } = (0, form_1.useFormContext)();
     const shouldValidate = (0, react_1.useRef)(false);
+    const isTouched = (0, react_1.useRef)(false);
     const [innerError, setInnerError] = (0, utils_1.useDerivedState)(error);
+    const [innerHelperText, setInnerHelperText] = (0, utils_1.useDerivedState)(helperText);
+    const stringField = !(0, utils_1.isUnset)(field) ? (0, utils_1.stringifyField)(field) : void 0;
     /**
      * --------------------------------------------------------------------
      * 重置与初始化
      */
-    const isTouched = (0, react_1.useRef)(false);
-    // formRef的resetForm()方法会传入新的initialValue，否则使用`formValue`
-    const reset = (value = formValue) => {
+    const reset = (currentFormValue = formValue, initialFormValue) => {
+        // formRef的resetForm()方法会传入新的formValue，其他情况使用当前的formValue
         shouldValidate.current = isTouched.current = false;
-        if (typeof field !== 'undefined' && value && typeof initialValue !== 'undefined') {
-            (0, utils_1.queryDeep)(value, field, () => initialValue);
+        if (!(0, utils_1.isUnset)(field) && currentFormValue) {
+            if (typeof initialValue !== 'undefined') {
+                (0, utils_1.queryDeep)(currentFormValue, field, () => initialValue);
+            }
+            else if (typeof initialFormValue !== 'undefined') {
+                const initialFieldValue = (0, utils_1.queryDeep)(initialFormValue, field);
+                (0, utils_1.queryDeep)(currentFormValue, field, initialFieldValue);
+            }
         }
-        innerError.current && setInnerError(false);
+        setInnerError(false);
     };
-    (0, react_1.useMemo)(reset, []);
+    (0, react_1.useMemo)(reset, [stringField]);
     /**
      * --------------------------------------------------------------------
      * 字段值
      */
     const fieldValue = (0, react_1.useMemo)(() => {
-        if (typeof field !== 'undefined' && formValue) {
+        if (typeof _fieldValue !== 'undefined') {
+            return _fieldValue;
+        }
+        if (!(0, utils_1.isUnset)(field) && formValue) {
             return (0, utils_1.queryDeep)(formValue, field);
         }
-    }, [formValue, field]);
-    const [randomKey] = (0, utils_1.useDerivedState)(prev => {
-        // fieldValue变为undefined时，需要更新key以强制重渲染组件
-        return typeof fieldValue === 'undefined' ? (0, utils_1.getShortID)() : prev;
-    }, [fieldValue]);
+    }, [formValue, field, _fieldValue]);
     /**
      * --------------------------------------------------------------------
      * 校验
      */
     const rulesArr = (0, utils_1.toArray)(rules);
-    const [innerHelperText, setInnerHelperText] = (0, utils_1.useDerivedState)(helperText);
     const validate = async () => {
         if (error) {
             return false;
@@ -56,7 +64,7 @@ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, req
         const promises = [];
         let invalid = false;
         rulesArr?.some(r => {
-            if ((r.required && (typeof fieldValue === 'undefined' || fieldValue === null || fieldValue === '')) ||
+            if ((r.required && ((0, utils_1.isUnset)(fieldValue) || fieldValue === '')) ||
                 (r.pattern && typeof fieldValue === 'string' && !r.pattern.test(fieldValue))) {
                 setInnerError(true);
                 setInnerHelperText(r.message || defaultMessage);
@@ -86,36 +94,38 @@ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, req
     };
     /**
      * --------------------------------------------------------------------
-     * 依赖更新自动校验
+     * 自动校验与依赖更新
      */
     const dependencyValues = (0, react_1.useMemo)(() => {
         return formValue && dependencies?.map(d => (0, utils_1.queryDeep)(formValue, d));
     }, [formValue, ...dependencies || []]);
     (0, react_1.useMemo)(() => {
-        // 跳过首次渲染
-        shouldValidate.current && validate().then();
-        shouldValidate.current = true;
+        if (!shouldValidate.current) {
+            // 跳过首次渲染
+            shouldValidate.current = true;
+            return;
+        }
+        validate().then();
     }, [fieldValue, ...dependencyValues || []]);
     /**
      * --------------------------------------------------------------------
      * 挂载formItemRef
      */
-    const formItemRef = (0, react_1.useRef)(null);
+    const formItemRef = (0, react_1.useRef)(void 0);
     formItemRef.current = {
         validate,
         reset,
         error: innerError.current ? { message: innerHelperText.current } : null,
-        isTouched: isTouched.current
+        isTouched: () => isTouched.current
     };
     (0, react_1.useImperativeHandle)(ref, () => formItemRef.current);
     (0, react_1.useEffect)(() => {
-        if (typeof field === 'undefined' || !itemsContainer) {
+        if (typeof stringField === 'undefined' || !itemsContainer) {
             return;
         }
-        const fieldStr = (0, utils_1.stringifyField)(field);
-        itemsContainer.set(fieldStr, formItemRef.current);
+        itemsContainer.set(stringField, formItemRef.current);
         return () => {
-            itemsContainer.delete(fieldStr);
+            itemsContainer.delete(stringField);
         };
     });
     /**
@@ -125,9 +135,13 @@ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, req
     const isRequired = (0, react_1.useMemo)(() => {
         return required ?? rulesArr?.some(r => r.required);
     }, [rules, required]);
+    const [randomKey] = (0, utils_1.useDerivedState)(prev => {
+        // fieldValue变为undefined时，需要更新key以强制重渲染组件
+        return !prev || typeof fieldValue === 'undefined' ? (0, utils_1.getShortID)() : prev;
+    }, [fieldValue]);
     const renderedChildren = (0, react_1.useMemo)(() => {
         if (typeof children === 'function') {
-            return children(typeof field !== 'undefined'
+            return children(!(0, utils_1.isUnset)(field)
                 ? {
                     ...typeof fieldValue === 'boolean'
                         ? { checked: fieldValue }
@@ -139,14 +153,14 @@ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, req
                 }
                 : {}, {
                 ...size && { size },
-                ...innerError.current ? { color: 'error' } : {}
+                ...innerError.current && { color: 'error' }
             }, randomKey.current);
         }
         if ((0, react_1.isValidElement)(children)) {
             const { props: childProps } = children;
             return (0, react_1.cloneElement)(children, {
-                key: randomKey.current,
-                ...typeof field !== 'undefined' && {
+                key: children.key ?? randomKey.current,
+                ...!(0, utils_1.isUnset)(field) && {
                     ...typeof fieldValue === 'boolean'
                         ? { checked: childProps.checked ?? fieldValue }
                         : { value: childProps.value ?? fieldValue },
@@ -161,11 +175,11 @@ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, req
             });
         }
         return children;
-    }, [children, innerError.current, field, size, randomKey.current, fieldValue]);
+    }, [children, fieldValue, size, innerError.current, randomKey.current]);
     if (noStyle || variant === 'plain') {
         return renderedChildren;
     }
-    return ((0, jsx_runtime_1.jsxs)(descriptions_1.DescriptionItem, { flex: void 0, ...props, ref: wrapperRef, className: (0, utils_1.clsx)(form_style_1.classes.item, props.className), label: !!label &&
+    return ((0, jsx_runtime_1.jsxs)(descriptions_1.DescriptionItem, { ...props, ref: wrapperRef, className: (0, utils_1.clsx)(form_style_1.classes.item, props.className), label: !!label &&
             (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isRequired && !!requiredMark &&
                         (0, jsx_runtime_1.jsx)("span", { className: form_style_1.classes.requiredMark, children: requiredMark }), label] }), children: [renderedChildren, (0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { in: innerError.current || !!helperText, children: (0, jsx_runtime_1.jsx)("div", { className: form_style_1.classes.helperText, children: innerHelperText.current }) })] }));
 };

package/dist/cjs/components/form/formRelatable.js

@@ -5,7 +5,8 @@ const react_1 = require("react");
 const form_1 = require("./form");
 const utils_1 = require("../../utils");
 function FormRelatable(props) {
-    const { formValue, formRef } = (0, form_1.useFormContext)();
+    const { formRef } = (0, form_1.useFormContext)();
+    const { formValue } = (0, form_1.useFormValueContext)();
     const prevFormValue = (0, react_1.useRef)(void 0);
     (0, react_1.useEffect)(() => {
         prevFormValue.current = (0, utils_1.cloneDeep)(formValue);

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

@@ -1,8 +1,8 @@
 export declare const classes: {
     button: string;
     image: string;
-    counter: string;
     swap: string;
+    counter: string;
     control: string;
     galleryContainer: string;
     galleryWrapper: string;

package/dist/cjs/components/gallery/imageItem.js

@@ -47,5 +47,5 @@ function ImageItem({ ref, src, ...props }) {
             resizeObserver.disconnect();
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)(pinchable_1.Pinchable, { ref: pinchableRef, className: (0, utils_1.clsx)(gallery_style_1.classes.imageItem, props.className), ...props, children: (0, jsx_runtime_1.jsx)("img", { ref: imgRef, className: gallery_style_1.classes.image, src: src, draggable: false, alt: "" }) }));
+    return ((0, jsx_runtime_1.jsx)(pinchable_1.Pinchable, { ...props, ref: pinchableRef, className: (0, utils_1.clsx)(gallery_style_1.classes.imageItem, props.className), children: (0, jsx_runtime_1.jsx)("img", { ref: imgRef, className: gallery_style_1.classes.image, src: src, draggable: false, alt: "" }) }));
 }

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

@@ -1,16 +1,16 @@
 import { ElementType, ReactElement } from 'react';
-import { MergeProps, ResponsiveProp } from '../../types';
+import { OverridableProps, ResponsiveProp } from '../../types';
 import { GridItem } from './gridItem';
-import { TransportStyleProps } from '../transportStyle';
-export type GridOwnProps = {
+import { TransportStyleOwnProps } from '../transportStyle';
+export interface GridOwnProps extends TransportStyleOwnProps {
     inline?: boolean;
     /** 网格列数，默认为`{xs: 12}` */
     columnCount?: ResponsiveProp;
     gap?: ResponsiveProp;
     columnGap?: ResponsiveProp;
     rowGap?: ResponsiveProp;
-};
-export type GridProps<C extends ElementType = 'div'> = MergeProps<GridOwnProps, TransportStyleProps<C>>;
+}
+export type GridProps<C extends ElementType = 'div'> = OverridableProps<GridOwnProps, C>;
 export declare const Grid: {
     <C extends ElementType = "div">(props: GridProps<C>): ReactElement;
     Item: typeof GridItem;

package/dist/cjs/components/grid/gridItem.d.ts

@@ -1,9 +1,10 @@
-import { MergeProps, ResponsiveProp } from '../../types';
-import { TransportStyleProps } from '../transportStyle';
-import { ElementType, ReactElement } from 'react';
-export type GridItemOwnProps = {
+import { OverridableComponent, OverridableProps, ResponsiveProp } from '../../types';
+import { TransportStyleOwnProps } from '../transportStyle';
+import { ElementType } from 'react';
+interface GridItemOwnProps extends TransportStyleOwnProps {
     span?: ResponsiveProp;
     offset?: ResponsiveProp;
-};
-export type GridItemProps<C extends ElementType = 'div'> = MergeProps<GridItemOwnProps, TransportStyleProps<C>>;
-export declare const GridItem: <C extends ElementType = 'div'>(props: GridItemProps<C>) => ReactElement;
+}
+export type GridItemProps<C extends ElementType = 'div'> = OverridableProps<GridItemOwnProps, C>;
+export declare const GridItem: OverridableComponent<GridItemOwnProps>;
+export {};