@canlooks/can-ui 0.0.24 → 0.0.26

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

@@ -32,7 +32,7 @@ exports.Descriptions = (0, react_1.memo)(({ size, labelWidth, colon = ':', label
             for (let i = 0, { length } = actualItems; i < length; i++) {
                 const cols = rows[Math.floor(i / columnCountNum)] ||= [];
                 const itemProps = actualItems[i];
-                cols.push((0, jsx_runtime_1.jsx)(ItemComponent, { ...itemProps, span: i === actualItems.length - 1 ? columnCountNum - i % columnCountNum : itemProps.span, className: (0, utils_1.classnames)(descriptions_style_1.classes.col, itemProps) }, i));
+                cols.push((0, jsx_runtime_1.jsx)(ItemComponent, { ...itemProps, span: i === actualItems.length - 1 ? columnCountNum - i % columnCountNum : itemProps.span, className: (0, utils_1.clsx)(descriptions_style_1.classes.col, itemProps) }, i));
             }
             return rows.map((r, i) => (0, jsx_runtime_1.jsx)("tr", { children: r }, i));
         }
@@ -41,7 +41,7 @@ exports.Descriptions = (0, react_1.memo)(({ size, labelWidth, colon = ':', label
     const { spacing } = (0, theme_1.useTheme)();
     const style = (0, descriptions_style_1.tableStyle)();
     return variant === 'grid'
-        ? (0, jsx_runtime_1.jsx)(grid_1.Grid, { columnGap: spacing[6], ...props, className: (0, utils_1.classnames)(descriptions_style_1.classes.root, props.className), columnCount: columnCount, "data-variant": variant, children: (0, jsx_runtime_1.jsx)(DescriptionsContext, { value: contextValue, children: renderGridItems() }) })
-        : (0, jsx_runtime_1.jsx)("table", { ...props, css: style, className: (0, utils_1.classnames)(descriptions_style_1.classes.root, props.className), "data-size": size, "data-variant": variant, children: (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)(DescriptionsContext, { value: contextValue, children: renderTableItems() }) }) });
+        ? (0, jsx_runtime_1.jsx)(grid_1.Grid, { columnGap: spacing[6], ...props, className: (0, utils_1.clsx)(descriptions_style_1.classes.root, props.className), columnCount: columnCount, "data-variant": variant, children: (0, jsx_runtime_1.jsx)(DescriptionsContext, { value: contextValue, children: renderGridItems() }) })
+        : (0, jsx_runtime_1.jsx)("table", { ...props, css: style, className: (0, utils_1.clsx)(descriptions_style_1.classes.root, props.className), "data-size": size, "data-variant": variant, children: (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)(DescriptionsContext, { value: contextValue, children: renderTableItems() }) }) });
 });
 exports.Descriptions.Item = descriptionItem_1.DescriptionItem;

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

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

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

@@ -72,11 +72,7 @@ exports.gridItemStyle = (0, utils_1.defineCss)(({ spacing, text }) => (0, react_
         flex-direction: row-reverse;
     }
 
-    &[data-label-placement=left], &[data-label-placement=right] {
-        align-items: baseline;
-    }
-
-    &:not([data-disable-margin=true]) {
+    &:not(:last-of-type):not([data-disable-margin=true]) {
         &[data-label-placement=left], &[data-label-placement=right] {
             margin-bottom: ${spacing[4]}px;
 
@@ -104,7 +100,8 @@ exports.gridItemStyle = (0, utils_1.defineCss)(({ spacing, text }) => (0, react_
 
     .${exports.classes.label} {
         display: flex;
-        color: ${text.secondary};
+        align-items: center;
+        color: ${text.disabled};
 
         .${exports.classes.colon} {
             margin-left: 1px;
@@ -115,13 +112,33 @@ exports.gridItemStyle = (0, utils_1.defineCss)(({ spacing, text }) => (0, react_
         flex: 1;
     }
 
+    &[data-label-placement=left], &[data-label-placement=right] {
+        &[data-size=small] {
+            .${exports.classes.label} {
+                max-height: 24px;
+            }
+        }
+
+        &[data-size=medium] {
+            .${exports.classes.label} {
+                max-height: 32px;
+            }
+        }
+
+        &[data-size=large] {
+            .${exports.classes.label} {
+                max-height: 40px;
+            }
+        }
+    }
+
     &[data-label-placement=left] {
         .${exports.classes.label} {
             justify-content: flex-end;
         }
 
         .${exports.classes.content} {
-            margin-left: ${spacing[2]}px;
+            margin-left: ${spacing[3]}px;
         }
     }
 

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

@@ -1,4 +1,4 @@
-import React, { ReactNode, Ref } from 'react';
+import React, { ReactNode } from 'react';
 import { ModalProps } from '../modal';
 import { ButtonProps } from '../button';
 import { DrawerCloseReason } from '../drawer';
@@ -9,21 +9,21 @@ export interface DialogProps extends Omit<ModalProps, 'title' | 'prefix'> {
     footer?: ReactNode;
     prefix?: ReactNode;
     suffix?: ReactNode;
+    /** 默认为`420` */
     width?: string | number;
     minWidth?: string | number;
+    /** 默认为`100%` */
     maxWidth?: string | number;
-    showClose?: ReactNode;
+    showClose?: boolean;
     closeProps?: ButtonProps;
     showConfirm?: boolean;
     confirmText?: ReactNode;
     confirmProps?: ButtonProps;
-    confirmRef?: Ref<HTMLButtonElement>;
     onConfirm?(e: React.MouseEvent<HTMLButtonElement>): any;
     confirmLoading?: boolean;
     showCancel?: boolean;
     cancelText?: ReactNode;
     cancelProps?: ButtonProps;
-    cancelRef?: Ref<HTMLButtonElement>;
     onCancel?(e: React.MouseEvent<HTMLButtonElement | HTMLDivElement> | KeyboardEvent): void;
     draggable?: boolean;
     /** 是否可通过点击遮罩层关闭对话框，默认为true */
@@ -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, confirmRef, onConfirm, confirmLoading, showCancel, cancelText, cancelProps, cancelRef, onCancel, draggable, maskClosable, escapeClosable, defaultOpen, open, onClose, ...props }: DialogProps): import("@emotion/react/jsx-runtime").JSX.Element;
+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;

package/dist/cjs/components/dialog/dialog.js

@@ -7,9 +7,10 @@ const modal_1 = require("../modal");
 const dialog_style_1 = require("./dialog.style");
 const utils_1 = require("../../utils");
 const button_1 = require("../button");
-const icons_1 = require("@ant-design/icons");
 const draggable_1 = require("../draggable");
-function Dialog({ ref, icon, title, footer, prefix, suffix, width = 420, minWidth, maxWidth = '100%', showClose = true, closeProps, showConfirm = true, confirmText = '确 定', confirmProps, confirmRef, onConfirm, confirmLoading = false, showCancel = true, cancelText = '取 消', cancelProps, cancelRef, onCancel, draggable = true, maskClosable = true, escapeClosable = true, defaultOpen = false, open, onClose, ...props }) {
+const __1 = require("../..");
+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 }) {
     const [innerOpen, _setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open);
     const close = (closeReason) => {
         if (!innerLoading.current || closeReason === 'confirmed') {
@@ -75,15 +76,15 @@ function Dialog({ ref, icon, title, footer, prefix, suffix, width = 420, minWidt
     const renderFooter = () => {
         if (typeof footer === 'undefined' || footer === true) {
             return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showCancel &&
-                        (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outlined", ...cancelProps, ref: cancelRef, onClick: cancelHandler, children: cancelText }), showConfirm &&
-                        (0, jsx_runtime_1.jsx)(button_1.Button, { loading: innerLoading.current, ...confirmProps, ref: confirmRef, onClick: confirmHandler, children: confirmText })] }));
+                        (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outlined", ...cancelProps, onClick: cancelHandler, children: cancelText }), showConfirm &&
+                        (0, jsx_runtime_1.jsx)(button_1.Button, { loading: innerLoading.current, ...confirmProps, onClick: confirmHandler, children: confirmText })] }));
         }
         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.classnames)(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)(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 &&
                         (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", ...closeProps, className: (0, utils_1.classnames)(dialog_style_1.classes.close, closeProps?.className), onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, {}) })] }), (0, jsx_runtime_1.jsxs)("div", { ref: bodyRef, className: dialog_style_1.classes.body, onScroll: onScroll, children: [!!prefix &&
+                                            (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text", ...closeProps, className: (0, utils_1.clsx)(dialog_style_1.classes.close, closeProps?.className), onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faXmark_1.faXmark }) })] }), (0, jsx_runtime_1.jsxs)("div", { ref: bodyRef, className: dialog_style_1.classes.body, onScroll: onScroll, children: [!!prefix &&
                                         (0, jsx_runtime_1.jsx)("div", { className: dialog_style_1.classes.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { ref: bodyWrapRef, className: dialog_style_1.classes.bodyWrap, children: props.children }), !!suffix &&
                                         (0, jsx_runtime_1.jsx)("div", { className: dialog_style_1.classes.suffix, children: suffix })] }), (typeof footer === 'undefined' || !!footer) &&
                                 (0, jsx_runtime_1.jsx)("div", { className: dialog_style_1.classes.footer, children: renderFooter() })] })] }) }) }));

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

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

package/dist/cjs/components/dialog/dialog.style.js

@@ -29,6 +29,8 @@ exports.style = (0, utils_1.defineCss)(({ background, borderRadius, boxShadow, s
         color: ${colors.primary.main};
         font-size: ${21 / 14}em;
         padding: ${spacing[6]}px 0 ${spacing[6]}px ${spacing[8]}px;
+        display: flex;
+        align-items: flex-start;
 
         & + .${exports.classes.content} {
             padding-left: ${spacing[4]}px;

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

@@ -1,8 +1,14 @@
-import { DIVProps } from '../../types';
-export interface DividerProps extends DIVProps {
+import { DivProps } from '../../types';
+export interface DividerProps extends DivProps {
     textAlign?: 'start' | 'center' | 'end';
+    /**
+     * {@link textAlign}为`start`或`end`时有效，表示text至边缘的距离，默认为`36`
+     */
     alignMargin?: number | string;
     orientation?: 'horizontal' | 'vertical';
+    /**
+     * {@link orientation}为'horizontal'时表示上下边距；{@link orientation}为`vertical`时，表示左右边距
+     */
     margin?: number | string;
 }
 export declare const Divider: import("react").MemoExoticComponent<({ textAlign, alignMargin, orientation, margin, ...props }: DividerProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/divider/divider.js

@@ -7,7 +7,7 @@ const divider_style_1 = require("./divider.style");
 const utils_1 = require("../../utils");
 exports.Divider = (0, react_1.memo)(({ textAlign = 'center', alignMargin = 36, orientation = 'horizontal', margin, ...props }) => {
     const styleProp = orientation === 'horizontal' ? 'width' : 'height';
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: divider_style_1.style, className: (0, utils_1.classnames)(divider_style_1.classes.root, props.className), style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: divider_style_1.style, className: (0, utils_1.clsx)(divider_style_1.classes.root, props.className), style: {
             margin: typeof margin === 'number'
                 ? orientation === 'horizontal' ? `${margin}px 0` : `0 ${margin}px`
                 : margin,

package/dist/cjs/components/draggable/draggable.js

@@ -8,18 +8,16 @@ function Draggable({ translateLimit, container, children, ...draggableOptions })
     const syncTranslateLimit = (0, utils_1.useSync)(translateLimit);
     const syncContainer = (0, utils_1.useSync)(container);
     const [translate, setTranslate] = (0, react_1.useState)([0, 0]);
-    const startTranslate = (0, react_1.useRef)([0, 0]);
     const props = children.props;
     const draggableHandle = (0, utils_1.useDraggableHandle)({
         ...draggableOptions,
         onDragStart(e) {
             syncOptions.current.onDragStart?.(e);
-            startTranslate.current = [...translate];
+            return [...translate];
         },
         onDrag(info, e) {
             syncOptions.current.onDrag?.(info, e);
-            const { deltaX, deltaY } = info;
-            const [startX, startY] = startTranslate.current;
+            const { deltaX, deltaY, startData: [startX, startY] } = info;
             let newX = startX + deltaX;
             let newY = startY + deltaY;
             if (syncTranslateLimit.current) {

package/dist/cjs/components/drawer/drawer.js

@@ -7,8 +7,9 @@ const drawer_style_1 = require("./drawer.style");
 const utils_1 = require("../../utils");
 const overlayBase_1 = require("../overlayBase");
 const button_1 = require("../button");
-const icons_1 = require("@ant-design/icons");
 const transitionBase_1 = require("../transitionBase");
+const __1 = require("../..");
+const faAnglesRight_1 = require("@fortawesome/free-solid-svg-icons/faAnglesRight");
 const placementToDirection = {
     left: 'right',
     right: 'left',
@@ -48,12 +49,14 @@ function Drawer({ title, footer, showClose = true, size = { xs: '100%', sm: '75%
         }
         return;
     }, [innerOpen.current]);
-    return ((0, jsx_runtime_1.jsx)(overlayBase_1.OverlayBase, { ...props, css: (0, drawer_style_1.useStyle)({ size: typeof size === 'object' ? size : { xs: size } }), className: (0, utils_1.classnames)(drawer_style_1.classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-placement": placement, children: (0, jsx_runtime_1.jsx)(transitionBase_1.Slide, { direction: placementToDirection[placement], ...slideProps, in: innerOpen.current, className: (0, utils_1.classnames)(drawer_style_1.classes.drawer, slideProps?.className), children: (0, jsx_runtime_1.jsxs)("div", { className: drawer_style_1.classes.drawerWrap, children: [!!(title || showClose) &&
+    return ((0, jsx_runtime_1.jsx)(overlayBase_1.OverlayBase, { ...props, css: (0, drawer_style_1.useStyle)({ size: typeof size === 'object' ? size : { xs: size } }), className: (0, utils_1.clsx)(drawer_style_1.classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-placement": placement, children: (0, jsx_runtime_1.jsx)(transitionBase_1.Slide, { direction: placementToDirection[placement], ...slideProps, in: innerOpen.current, className: (0, utils_1.clsx)(drawer_style_1.classes.drawer, slideProps?.className), children: (0, jsx_runtime_1.jsxs)("div", { className: drawer_style_1.classes.drawerWrap, children: [!!(title || showClose) &&
                         (0, jsx_runtime_1.jsxs)("div", { className: drawer_style_1.classes.titleRow, children: [(0, jsx_runtime_1.jsx)("div", { className: drawer_style_1.classes.title, children: title }), showClose &&
-                                    (0, jsx_runtime_1.jsx)(button_1.Button, { className: drawer_style_1.classes.close, shape: "circular", variant: "text", color: "text", onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(icons_1.DoubleRightOutlined, { rotate: {
-                                                left: 180,
-                                                right: 0,
-                                                top: -90,
-                                                bottom: 90
-                                            }[placement] }) })] }), (0, jsx_runtime_1.jsx)("div", { ref: bodyRef, className: drawer_style_1.classes.body, onScroll: onScroll, children: (0, jsx_runtime_1.jsx)("div", { ref: bodyWrapRef, className: drawer_style_1.classes.bodyWrap, children: props.children }) })] }) }) }));
+                                    (0, jsx_runtime_1.jsx)(button_1.Button, { className: drawer_style_1.classes.close, shape: "circular", variant: "text", color: "text", onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faAnglesRight_1.faAnglesRight, style: {
+                                                rotate: {
+                                                    left: '180deg',
+                                                    right: '0',
+                                                    top: '-90deg',
+                                                    bottom: '90deg',
+                                                }[placement]
+                                            } }) })] }), (0, jsx_runtime_1.jsx)("div", { ref: bodyRef, className: drawer_style_1.classes.body, onScroll: onScroll, children: (0, jsx_runtime_1.jsx)("div", { ref: bodyWrapRef, className: drawer_style_1.classes.bodyWrap, children: props.children }) })] }) }) }));
 }

package/dist/cjs/components/drawer/drawer.style.js

@@ -14,10 +14,9 @@ exports.classes = (0, utils_1.defineClasses)('drawer', [
     'bodyWrap'
 ]);
 function useStyle({ size }) {
-    return (0, utils_1.useCss)(theme => {
-        const { spacing, background, boxShadow, borderRadius, divider } = theme;
+    return (0, utils_1.useCss)(({ breakpoints, spacing, background, boxShadow, borderRadius, divider }) => {
         return (0, react_1.css) `
-            ${(0, utils_1.responsiveVariables)(theme, k => {
+            ${(0, utils_1.responsiveVariables)(breakpoints, k => {
             let _size = size[k];
             if (typeof _size === 'undefined') {
                 return '';
@@ -97,7 +96,7 @@ function useStyle({ size }) {
             }
 
             &[data-placement=right] {
-                \.${exports.classes.title}:has(+ .${exports.classes.close}) {
+                .${exports.classes.title}:has(+ .${exports.classes.close}) {
                     padding-left: 0;
                 }
             }

package/dist/cjs/components/dropdown/dropdown.js

@@ -12,5 +12,5 @@ function Dropdown({ showArrow, ...props }) {
     props.trigger ??= 'click';
     props.placement ??= 'bottom';
     props.offset ??= showArrow ? spacing[3] : spacing[2];
-    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { ...props, css: dropdown_style_1.style, className: (0, utils_1.classnames)(dropdown_style_1.classes.root, props.className), content: (0, jsx_runtime_1.jsx)("div", { className: dropdown_style_1.classes.content, "data-show-arrow": showArrow, children: props.content }) }));
+    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { ...props, css: dropdown_style_1.style, className: (0, utils_1.clsx)(dropdown_style_1.classes.root, props.className), content: (0, jsx_runtime_1.jsx)("div", { className: dropdown_style_1.classes.content, "data-show-arrow": showArrow, children: props.content }) }));
 }

package/dist/cjs/components/flex/flex.js

@@ -23,7 +23,7 @@ function Flex({ inline, direction = 'row', wrap, gap = 0, columnGap, rowGap, com
             });
         });
     };
-    return ((0, jsx_runtime_1.jsx)(transportStyle_1.TransportStyle, { ...props, className: (0, utils_1.classnames)(flex_style_1.classes.root, props.className), style: (0, utils_1.filterProperties)({
+    return ((0, jsx_runtime_1.jsx)(transportStyle_1.TransportStyle, { ...props, className: (0, utils_1.clsx)(flex_style_1.classes.root, props.className), style: (0, utils_1.filterProperties)({
             display: inline ? 'inline-flex' : 'flex',
             flexDirection: direction,
             flexWrap: wrap, columnGap, rowGap, gap,

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

@@ -1,27 +1,26 @@
-import React, { Dispatch, ReactElement, ReactNode, Ref, RefObject, SetStateAction } from 'react';
-import { Obj, ResponsiveProp } from '../../types';
+import React, { Dispatch, ReactElement, ReactNode, Ref, RefObject, SetStateAction, ElementType } from 'react';
+import { MergeProps, Obj } from '../../types';
 import { FieldPath } from '../../utils';
 import { FieldError, FormItem, FormItemProps, FormItemRef } from './formItem';
 import { FormRelatable } from './formRelatable';
-import { DescriptionsBaseProps, DescriptionsProps } from '../descriptions';
+import { DescriptionsProps } from '../descriptions';
 export type FormValue = Obj;
 export type FormSharedProps = {
-    /** 最外层元素的ref，默认ref属性已经被{@link FormRef}取代 */
-    wrapperRef?: Ref<HTMLDivElement>;
     requiredMark?: ReactNode;
+    /** variant为"grid"或"table"时会渲染Descriptions组件，并传递variant属性，默认为`grid` */
+    variant?: 'plain' | 'grid' | 'table';
 };
-export interface FormProps<V extends FormValue> extends FormSharedProps, Omit<DescriptionsBaseProps, 'items' | 'onChange'>, Omit<React.JSX.IntrinsicElements['form'], 'ref' | 'onChange'> {
+export interface FormOwnProps<V extends FormValue = FormValue> extends FormSharedProps {
     ref?: Ref<FormRef<V> | null>;
-    component?: any;
+    /** 最外层元素的ref，默认{@link ref}属性已经被{@link FormRef}取代 */
+    wrapperRef?: Ref<HTMLFormElement>;
     initialValue?: V;
     onChange?(field: FieldPath, value: any, formValue: V): void;
     onFinish?(value: V): void;
-    items?: (FormItemProps<any> & Obj)[];
-    /** variant为"grid"或"table"时会渲染Descriptions组件，并传递variant属性，默认为`grid` */
-    variant?: 'plain' | 'grid' | 'table';
-    columnCount?: ResponsiveProp;
+    items?: (FormItemProps & Obj)[];
     descriptionsProps?: DescriptionsProps;
 }
+export type FormProps<V extends FormValue = FormValue, C extends ElementType = 'form'> = MergeProps<FormOwnProps<V>, DescriptionsProps<C>>;
 interface FormContext<V extends FormValue> extends FormSharedProps {
     requiredMark?: ReactNode;
     formValue?: V;
@@ -48,8 +47,8 @@ export type FormRef<V extends FormValue = FormValue> = {
     isFieldTouched(field: FieldPath): boolean;
 };
 export declare const Form: {
-    <V extends Obj>(props: FormProps<V>): ReactElement;
+    <V extends FormValue, C extends ElementType>(props: FormProps<V, C>): ReactElement;
     Item: typeof FormItem;
-    FormRelatable: typeof FormRelatable;
+    Relatable: typeof FormRelatable;
 };
 export {};

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

@@ -45,10 +45,9 @@ labelWidth, labelPlacement = 'left', colon = ':', size, disableMargin, disablePa
     const submitHandler = async (e) => {
         e?.preventDefault();
         try {
-            await Promise.all([...itemsContainer.current].map(([, item]) => {
-                return item.validate().then(isValid => {
-                    return isValid ? void 0 : Promise.reject();
-                });
+            await Promise.all([...itemsContainer.current].map(async ([, item]) => {
+                const isValid = await item.validate();
+                return isValid ? void 0 : Promise.reject();
             }));
             onFinish?.(formValue.current);
             return formValue.current;
@@ -92,13 +91,13 @@ labelWidth, labelPlacement = 'left', colon = ':', size, disableMargin, disablePa
         isFieldTouched: field => !!itemsContainer.current.get((0, utils_1.stringifyField)(field))?.isTouched
     };
     (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.classnames)(form_style_1.classes.root, props.className), onSubmit: submitHandler, children: (0, jsx_runtime_1.jsx)(FormContext, { value: (0, react_1.useMemo)(() => ({
-                requiredMark,
+    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,
                 formValue: formValue.current, setFieldValue,
                 itemsContainer: itemsContainer.current, formRef
-            }), [requiredMark, formValue.current]), children: variant === 'plain'
+            }), [requiredMark, variant, 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, columnCount: columnCount, items: items, variant: variant, itemComponent: formItem_1.FormItem, children: props.children }) }) }));
 });
 exports.Form.Item = formItem_1.FormItem;
-exports.Form.FormRelatable = formRelatable_1.FormRelatable;
+exports.Form.Relatable = formRelatable_1.FormRelatable;

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

@@ -18,4 +18,32 @@ exports.style = (0, utils_1.defineCss)(({ colors, spacing }) => (0, react_1.css)
         font-size: ${13 / 14}em;
         color: ${colors.error.main};
     }
+
+    .${exports.classes.item} {
+        &:not(:last-of-type):not([data-disable-margin=true]) {
+            &[data-label-placement=left], &[data-label-placement=right] {
+                margin-bottom: ${spacing[6]}px;
+
+                &[data-size=small] {
+                    margin-bottom: ${spacing[4]}px;
+                }
+
+                &[data-size=large] {
+                    margin-bottom: ${spacing[8]}px;
+                }
+            }
+
+            &[data-label-placement=top], &[data-label-placement=bottom] {
+                margin-bottom: ${spacing[7]}px;
+
+                &[data-size=small] {
+                    margin-bottom: ${spacing[5]}px;
+                }
+
+                &[data-size=large] {
+                    margin-bottom: ${spacing[9]}px;
+                }
+            }
+        }
+    }
 `);

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

@@ -1,15 +1,15 @@
-import React, { ReactElement, ReactNode } from 'react';
+import React, { ReactNode, ElementType, Ref } from 'react';
 import { FormRef, FormSharedProps, FormValue } from './form';
-import { ColorPropsValue, Size } from '../../types';
+import { ColorPropsValue, MergeProps, Size } from '../../types';
 import { FieldPath } from '../../utils';
-import { DescriptionItemProps, DescriptionsSharedProps } from '../descriptions';
-export type FormItemRules<I> = {
+import { DescriptionItemProps } from '../descriptions';
+export type FormItemRules<I = any> = {
     message?: ReactNode;
     required?: boolean;
     pattern?: RegExp;
-    validator?(fieldValue: I | undefined, formValue: any, formInstance: FormRef | null): any;
+    validator?(fieldValue: I | undefined, formValue: any, formRef: FormRef | null): any;
 };
-export type FieldProps<I> = {
+export type FieldProps<I = any> = {
     checked?: boolean;
     value?: I;
     onChange?(e: React.ChangeEvent): void;
@@ -18,7 +18,9 @@ export type StyleProps = {
     size?: Size;
     color?: ColorPropsValue;
 };
-export interface FormItemBaseProps<I> extends FormSharedProps, DescriptionsSharedProps {
+export interface FormItemOwnProps<I = any> extends FormSharedProps {
+    ref?: Ref<FormItemRef>;
+    wrapperRef?: Ref<HTMLDivElement>;
     field?: FieldPath;
     initialValue?: I;
     rules?: FormItemRules<I> | FormItemRules<I>[];
@@ -29,7 +31,7 @@ export interface FormItemBaseProps<I> extends FormSharedProps, DescriptionsShare
     children?: ReactNode | ((fieldProps: FieldProps<I>, styleProps: StyleProps) => ReactNode);
     noStyle?: boolean;
 }
-export type FormItemProps<I> = FormItemBaseProps<I> & DescriptionItemProps;
+export type FormItemProps<I = any, C extends ElementType = 'div'> = MergeProps<FormItemOwnProps<I>, DescriptionItemProps<C>>;
 export type FieldError = null | {
     message: ReactNode;
 };
@@ -39,4 +41,4 @@ export type FormItemRef = {
     reset(initialValues?: FormValue): void;
     isTouched: boolean;
 };
-export declare const FormItem: <I>(props: FormItemProps<I>) => ReactElement;
+export declare const FormItem: <I = any, C extends ElementType = 'div'>(props: FormItemProps<I, C>) => ReactNode;

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

@@ -8,8 +8,8 @@ const utils_1 = require("../../utils");
 const descriptions_1 = require("../descriptions");
 const form_style_1 = require("./form.style");
 const transitionBase_1 = require("../transitionBase");
-exports.FormItem = (({ wrapperRef, field, initialValue, label = '', rules, required, error, helperText, dependencies, children, noStyle, requiredMark, ...props }, ref) => {
-    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, ...props }) => {
+    const { variant, formValue, setFieldValue, itemsContainer, formRef, ...context } = (0, form_1.useFormContext)();
     requiredMark ??= context.requiredMark ?? '*';
     /**
      * --------------------------------------------------------------------
@@ -71,7 +71,6 @@ exports.FormItem = (({ wrapperRef, field, initialValue, label = '', rules, requi
                     try {
                         await r.validator(deferredValue, formValue, formRef?.current || null);
                         setInnerError(false);
-                        setInnerHelperText(void 0);
                     }
                     catch (e) {
                         setInnerError(invalid = true);
@@ -86,7 +85,6 @@ exports.FormItem = (({ wrapperRef, field, initialValue, label = '', rules, requi
         await Promise.all(promises);
         if (!invalid) {
             setInnerError(false);
-            setInnerHelperText(void 0);
         }
         return !invalid;
     };
@@ -139,7 +137,7 @@ exports.FormItem = (({ wrapperRef, field, initialValue, label = '', rules, requi
                         : { value: innerValue.current },
                     onChange(e) {
                         isTouched.current = isActiveChanging.current = true;
-                        setInnerValue(o => (0, utils_1.getValueOnChange)(e, o));
+                        setInnerValue((o) => (0, utils_1.getValueOnChange)(e, o));
                     }
                 }
                 : {}, {
@@ -157,7 +155,7 @@ exports.FormItem = (({ wrapperRef, field, initialValue, label = '', rules, requi
                     onChange(e) {
                         props.onChange?.(e);
                         isTouched.current = isActiveChanging.current = true;
-                        setInnerValue(o => (0, utils_1.getValueOnChange)(e, o));
+                        setInnerValue((o) => (0, utils_1.getValueOnChange)(e, o));
                     }
                 },
                 size: props.size ?? props.size,
@@ -166,9 +164,10 @@ exports.FormItem = (({ wrapperRef, field, initialValue, label = '', rules, requi
         }
         return children;
     }, [children, innerValue.current, innerError.current, field, props.size]);
-    if (noStyle) {
+    if (noStyle || variant === 'plain') {
         return renderedChildren;
     }
-    return ((0, jsx_runtime_1.jsxs)(descriptions_1.DescriptionItem, { ...props, ref: wrapperRef, className: (0, utils_1.classnames)(form_style_1.classes.item, props.className), 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 || !!innerHelperText.current, children: (0, jsx_runtime_1.jsx)("div", { className: form_style_1.classes.helperText, children: innerHelperText.current }) })] }));
-});
+    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: (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 }) })] }));
+};
+exports.FormItem = FormItem;

package/dist/cjs/components/formDialog/formDialog.js

@@ -10,19 +10,17 @@ const form_1 = require("../form");
 exports.FormDialog = (({ ref, title, formProps, formRef, items, onFinish, ...props }) => {
     const dialogRef = (0, react_2.useRef)(null);
     const innerFormRef = (0, react_2.useRef)(null);
-    const resolveFn = (0, react_2.useRef)(void 0);
-    const rejectFn = (0, react_2.useRef)(void 0);
+    const resolvers = (0, react_2.useRef)(void 0);
     const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(props.defaultOpen, props.open);
     const onCloseHandler = (reason) => {
         if (reason === 'confirmed') {
             return;
         }
         props.onClose?.(reason);
-        rejectFn.current?.({
+        resolvers.current?.reject({
             type: 'canceled',
             value: innerFormRef.current.getFormValue()
         });
-        resolveFn.current = rejectFn.current = void 0;
         setInnerOpen(false);
     };
     (0, react_2.useImperativeHandle)(ref, () => {
@@ -33,10 +31,8 @@ exports.FormDialog = (({ ref, title, formProps, formRef, items, onFinish, ...pro
                     : innerFormRef.current?.resetForm();
                 setInnerOpen(true);
                 setValue(value);
-                return new Promise((resolve, reject) => {
-                    resolveFn.current = resolve;
-                    rejectFn.current = reject;
-                });
+                const { promise } = resolvers.current = Promise.withResolvers();
+                return promise;
             };
         }
         return dialogRef.current;
@@ -47,7 +43,7 @@ exports.FormDialog = (({ ref, title, formProps, formRef, items, onFinish, ...pro
     };
     const [innerLoading, finishHandler] = (0, utils_1.useLoading)(async (value) => {
         formProps?.onFinish?.(value);
-        resolveFn.current?.(value);
+        resolvers.current?.resolve(value);
         await onFinish?.(value);
         setInnerOpen(false);
     }, props.confirmLoading);
@@ -55,7 +51,7 @@ exports.FormDialog = (({ ref, title, formProps, formRef, items, onFinish, ...pro
         if (items?.length) {
             return items.map((item, i) => {
                 const itemProps = typeof item === 'function' ? item(value) : item;
-                return ((0, react_1.createElement)(form_1.FormItem, { ...itemProps, key: (0, utils_1.setDefaultColumnKey)(itemProps) ?? i }));
+                return ((0, react_1.createElement)(form_1.FormItem, { ...itemProps, key: (0, utils_1.setDefaultColumnKey)(itemProps, i) }));
             });
         }
         return props.children;

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

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

package/dist/cjs/components/grid/grid.js

@@ -11,7 +11,7 @@ exports.Grid = (({ inline, columnCount = { xs: 12 }, gap = { xs: 0 }, columnGap,
     gap = (0, utils_1.toResponsiveValue)(gap);
     columnGap = (0, utils_1.toResponsiveValue)(columnGap) ?? gap;
     rowGap = (0, utils_1.toResponsiveValue)(rowGap) ?? gap;
-    return ((0, jsx_runtime_1.jsx)(transportStyle_1.TransportStyle, { ...props, css: (0, grid_style_1.useContainerStyle)({ columnCount, columnGap, rowGap }), className: (0, utils_1.classnames)(grid_style_1.classes.root, props.className), style: {
+    return ((0, jsx_runtime_1.jsx)(transportStyle_1.TransportStyle, { ...props, css: (0, grid_style_1.useContainerStyle)({ columnCount, columnGap, rowGap }), className: (0, utils_1.clsx)(grid_style_1.classes.root, props.className), style: {
             display: inline ? 'inline-flex' : 'flex',
             ...props.style
         } }));