@canlooks/can-ui 0.0.20 → 0.0.22

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

@@ -1,15 +1,15 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { Children, createContext, forwardRef, isValidElement, memo, useContext, useMemo } from 'react';
+import { Children, createContext, isValidElement, memo, useContext, useMemo } from 'react';
 import { Grid } from '../grid';
 import { DescriptionItem } from './descriptionItem';
 import { classnames, useResponsiveValue } from '../../utils';
 import { classes, tableStyle } from './descriptions.style';
-import { useTheme } from '../app';
+import { useTheme } from '../theme';
 export function useDescriptionsContext() {
-    return useContext(descriptionsContext);
+    return useContext(DescriptionsContext);
 }
-const descriptionsContext = createContext({});
-export const Descriptions = memo(forwardRef(({ size, labelWidth, colon = ':', labelPlacement = 'left', disableMargin, disablePadding, items, itemComponent: ItemComponent = DescriptionItem, variant = 'grid', columnCount = 3, ...props }, ref) => {
+const DescriptionsContext = createContext({});
+export const Descriptions = memo(({ size, labelWidth, colon = ':', labelPlacement = 'left', disableMargin, disablePadding, items, itemComponent: ItemComponent = DescriptionItem, variant = 'grid', columnCount = 3, ...props }) => {
     const contextValue = useMemo(() => ({
         size, labelWidth, colon, labelPlacement, disableMargin, disablePadding, variant
     }), [
@@ -37,7 +37,7 @@ export const Descriptions = memo(forwardRef(({ size, labelWidth, colon = ':', la
     const { spacing } = useTheme();
     const style = tableStyle();
     return variant === 'grid'
-        ? _jsx(Grid, { columnGap: spacing[6], ...props, ref: ref, className: classnames(classes.root, props.className), columnCount: columnCount, "data-variant": variant, children: _jsx(descriptionsContext.Provider, { value: contextValue, children: renderGridItems() }) })
-        : _jsx("table", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), "data-size": size, "data-variant": variant, children: _jsx("tbody", { children: _jsx(descriptionsContext.Provider, { value: contextValue, children: renderTableItems() }) }) });
-}));
+        ? _jsx(Grid, { columnGap: spacing[6], ...props, className: classnames(classes.root, props.className), columnCount: columnCount, "data-variant": variant, children: _jsx(DescriptionsContext, { value: contextValue, children: renderGridItems() }) })
+        : _jsx("table", { ...props, css: style, className: classnames(classes.root, props.className), "data-size": size, "data-variant": variant, children: _jsx("tbody", { children: _jsx(DescriptionsContext, { value: contextValue, children: renderTableItems() }) }) });
+});
 Descriptions.Item = DescriptionItem;

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

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

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

@@ -55,7 +55,7 @@ export const tableStyle = defineCss(({ divider, spacing, background }) => css `
 `);
 export const gridItemStyle = defineCss(({ spacing, text }) => css `
     display: flex;
-    gap: 4px 0;
+    gap: ${spacing[1]}px 0;
 
     &[data-label-placement=top] {
         flex-direction: column;
@@ -69,19 +69,33 @@ export const gridItemStyle = defineCss(({ spacing, text }) => css `
         flex-direction: row-reverse;
     }
 
-    &:not([data-label-placement=top]):not([data-label-placement=bottom]) {
+    &[data-label-placement=left], &[data-label-placement=right] {
         align-items: baseline;
     }
 
     &:not([data-disable-margin=true]) {
-        margin-bottom: ${spacing[4]}px;
+        &[data-label-placement=left], &[data-label-placement=right] {
+            margin-bottom: ${spacing[4]}px;
 
-        &[data-size=small] {
-            margin-bottom: ${spacing[2]}px;
+            &[data-size=small] {
+                margin-bottom: ${spacing[2]}px;
+            }
+
+            &[data-size=large] {
+                margin-bottom: ${spacing[6]}px;
+            }
         }
+        
+        &[data-label-placement=top], &[data-label-placement=bottom] {
+            margin-bottom: ${spacing[5]}px;
 
-        &[data-size=large] {
-            margin-bottom: ${spacing[6]}px;
+            &[data-size=small] {
+                margin-bottom: ${spacing[3]}px;
+            }
+
+            &[data-size=large] {
+                margin-bottom: ${spacing[7]}px;
+            }
         }
     }
 

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

@@ -26,11 +26,11 @@ export interface DialogProps extends Omit<ModalProps, 'title' | 'prefix'> {
     cancelRef?: Ref<HTMLButtonElement>;
     onCancel?(e: React.MouseEvent<HTMLButtonElement | HTMLDivElement> | KeyboardEvent): void;
     draggable?: boolean;
-    /** 是否可通过点击遮罩层关闭对话框，@default true */
+    /** 是否可通过点击遮罩层关闭对话框，默认为true */
     maskClosable?: boolean;
-    /** 是否可通过键盘的【ESC】键关闭对话框，@default true */
+    /** 是否可通过键盘的【ESC】键关闭对话框，默认为true */
     escapeClosable?: boolean;
     defaultOpen?: boolean;
     onClose?(closeReason: DialogCloseReason): void;
 }
-export declare const Dialog: React.ForwardRefExoticComponent<Omit<DialogProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+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;

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

@@ -1,12 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { Modal } from '../modal';
 import { classes, style } from './dialog.style';
 import { classnames, cloneRef, useControlled, useEscapeClosable, useLoading } from '../../utils';
 import { Button } from '../button';
 import { CloseOutlined } from '@ant-design/icons';
 import { Draggable } from '../draggable';
-export const Dialog = forwardRef(({ 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 }, ref) => {
+export 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 [innerOpen, _setInnerOpen] = useControlled(defaultOpen, open);
     const close = (closeReason) => {
         if (!innerLoading.current || closeReason === 'confirmed') {
@@ -84,4 +84,4 @@ export const Dialog = forwardRef(({ icon, title, footer, prefix, suffix, width =
                                         _jsx("div", { className: classes.prefix, children: prefix }), _jsx("div", { ref: bodyWrapRef, className: classes.bodyWrap, children: props.children }), !!suffix &&
                                         _jsx("div", { className: classes.suffix, children: suffix })] }), (typeof footer === 'undefined' || !!footer) &&
                                 _jsx("div", { className: classes.footer, children: renderFooter() })] })] }) }) }));
-});
+}

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

@@ -1,15 +1,15 @@
 export declare const classes: {
+    content: string;
     body: string;
-    card: string;
+    icon: string;
     title: string;
-    content: string;
     prefix: string;
     footer: string;
-    icon: string;
-    titleRow: string;
     close: string;
-    bodyWrap: string;
     suffix: string;
+    card: string;
+    titleRow: string;
+    bodyWrap: string;
 } & {
     root: string;
 };

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

@@ -17,13 +17,13 @@ export const style = defineCss(({ background, borderRadius, boxShadow, spacing,
     .${classes.card} {
         max-height: 100%;
         display: flex;
-        background-color: ${background.card};
+        background-color: ${background.content};
         border-radius: ${borderRadius}px;
         box-shadow: ${boxShadow[0]};
     }
 
     .${classes.icon} {
-        color: ${colors.primary};
+        color: ${colors.primary.main};
         font-size: ${21 / 14}em;
         padding: ${spacing[6]}px 0 ${spacing[6]}px ${spacing[8]}px;
 

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

@@ -5,4 +5,4 @@ export interface DividerProps extends DIVProps {
     orientation?: 'horizontal' | 'vertical';
     margin?: number | string;
 }
-export declare const Divider: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<DividerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const Divider: import("react").MemoExoticComponent<({ textAlign, alignMargin, orientation, margin, ...props }: DividerProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/divider/divider.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo } from 'react';
+import { memo } from 'react';
 import { classes, style } from './divider.style';
 import { classnames } from '../../utils';
-export const Divider = memo(forwardRef(({ textAlign = 'center', alignMargin = 36, orientation = 'horizontal', margin, ...props }, ref) => {
+export const Divider = memo(({ textAlign = 'center', alignMargin = 36, orientation = 'horizontal', margin, ...props }) => {
     const styleProp = orientation === 'horizontal' ? 'width' : 'height';
-    return (_jsxs("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), style: {
+    return (_jsxs("div", { ...props, css: style, className: classnames(classes.root, props.className), style: {
             margin: typeof margin === 'number'
                 ? orientation === 'horizontal' ? `${margin}px 0` : `0 ${margin}px`
                 : margin,
@@ -18,4 +18,4 @@ export const Divider = memo(forwardRef(({ textAlign = 'center', alignMargin = 36
                         flex: textAlign !== 'end' ? 1 : void 0,
                         [styleProp]: textAlign === 'end' ? alignMargin : void 0
                     } })] }));
-}));
+});

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

@@ -11,4 +11,4 @@ export interface DraggableProps<H extends Element = Element> extends DraggableOp
     container?: DefineElement;
     children: ReactElement | ((targetProps: DraggableTargetProps, handleProps: HandleProps<H>) => ReactElement);
 }
-export declare function Draggable<H extends Element = Element>({ translateLimit, container, children, ...draggableOptions }: DraggableProps<H>): ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export declare function Draggable<H extends Element = Element>({ translateLimit, container, children, ...draggableOptions }: DraggableProps<H>): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

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

@@ -8,13 +8,13 @@ export interface DrawerProps extends Omit<OverlayBaseProps, 'title'> {
     showClose?: ReactNode;
     size?: ResponsiveProp<string | number>;
     placement?: 'left' | 'right' | 'top' | 'bottom';
-    /** 是否可通过点击遮罩层关闭对话框，@default true */
+    /** 是否可通过点击遮罩层关闭对话框，默认为`true` */
     maskClosable?: boolean;
-    /** 是否可通过键盘的【ESC】键关闭对话框，@default true */
+    /** 是否可通过键盘的【ESC】键关闭对话框，默认为`true` */
     escapeClosable?: boolean;
     defaultOpen?: boolean;
     onClose?(reason: DrawerCloseReason): void;
     slideProps?: TransitionBaseProps<HTMLDivElement>;
 }
 export type DrawerCloseReason = 'escape' | 'closed' | 'maskClicked';
-export declare const Drawer: import("react").ForwardRefExoticComponent<Omit<DrawerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Drawer({ title, footer, showClose, size, placement, maskClosable, escapeClosable, defaultOpen, open, onClose, slideProps, ...props }: DrawerProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/components/drawer/drawer.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { classes, useStyle } from './drawer.style';
 import { classnames, useControlled } from '../../utils';
 import { OverlayBase } from '../overlayBase';
@@ -12,7 +12,7 @@ const placementToDirection = {
     top: 'down',
     bottom: 'up'
 };
-export const Drawer = forwardRef(({ title, footer, showClose = true, size = { xs: '100%', sm: '75%', md: '50%', lg: '25%' }, placement = 'right', maskClosable = true, escapeClosable = true, defaultOpen = false, open, onClose, slideProps, ...props }, ref) => {
+export function Drawer({ title, footer, showClose = true, size = { xs: '100%', sm: '75%', md: '50%', lg: '25%' }, placement = 'right', maskClosable = true, escapeClosable = true, defaultOpen = false, open, onClose, slideProps, ...props }) {
     const [innerOpen, setInnerOpen] = useControlled(defaultOpen, open);
     const close = (reason) => {
         onClose?.(reason);
@@ -45,7 +45,7 @@ export const Drawer = forwardRef(({ title, footer, showClose = true, size = { xs
         }
         return;
     }, [innerOpen.current]);
-    return (_jsx(OverlayBase, { ...props, ref: ref, css: useStyle({ size: typeof size === 'object' ? size : { xs: size } }), className: classnames(classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-placement": placement, children: _jsx(Slide, { direction: placementToDirection[placement], ...slideProps, in: innerOpen.current, className: classnames(classes.drawer, slideProps?.className), children: _jsxs("div", { className: classes.drawerWrap, children: [!!(title || showClose) &&
+    return (_jsx(OverlayBase, { ...props, css: useStyle({ size: typeof size === 'object' ? size : { xs: size } }), className: classnames(classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-placement": placement, children: _jsx(Slide, { direction: placementToDirection[placement], ...slideProps, in: innerOpen.current, className: classnames(classes.drawer, slideProps?.className), children: _jsxs("div", { className: classes.drawerWrap, children: [!!(title || showClose) &&
                         _jsxs("div", { className: classes.titleRow, children: [_jsx("div", { className: classes.title, children: title }), showClose &&
                                     _jsx(Button, { className: classes.close, shape: "circular", variant: "text", color: "text", onClick: closeHandler, children: _jsx(DoubleRightOutlined, { rotate: {
                                                 left: 180,
@@ -53,4 +53,4 @@ export const Drawer = forwardRef(({ title, footer, showClose = true, size = { xs
                                                 top: -90,
                                                 bottom: 90
                                             }[placement] }) })] }), _jsx("div", { ref: bodyRef, className: classes.body, onScroll: onScroll, children: _jsx("div", { ref: bodyWrapRef, className: classes.bodyWrap, children: props.children }) })] }) }) }));
-});
+}

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

@@ -2,8 +2,8 @@ import { ResponsiveValue } from '../../../types';
 export declare const classes: {
     body: string;
     title: string;
-    titleRow: string;
     close: string;
+    titleRow: string;
     bodyWrap: string;
     drawer: string;
     drawerWrap: string;

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

@@ -10,19 +10,19 @@ export const classes = defineClasses('drawer', [
     'bodyWrap'
 ]);
 export function useStyle({ size }) {
-    const variables = responsiveVariables(k => {
-        let _size = size[k];
-        if (typeof _size === 'undefined') {
-            return '';
-        }
-        if (typeof _size === 'number') {
-            _size = _size + 'px';
-        }
-        return `--drawer-size: ${_size};`;
-    });
-    return useCss(({ spacing, background, boxShadow, borderRadius, divider }) => {
+    return useCss(theme => {
+        const { spacing, background, boxShadow, borderRadius, divider } = theme;
         return css `
-            ${variables}
+            ${responsiveVariables(theme, k => {
+            let _size = size[k];
+            if (typeof _size === 'undefined') {
+                return '';
+            }
+            if (typeof _size === 'number') {
+                _size = _size + 'px';
+            }
+            return `--drawer-size: ${_size};`;
+        })}
 
             .${classes.drawer} {
                 position: absolute;
@@ -66,7 +66,7 @@ export function useStyle({ size }) {
                 height: 100%;
                 display: flex;
                 flex-direction: column;
-                background-color: ${background.card};
+                background-color: ${background.content};
                 box-shadow: ${boxShadow[1]};
                 border-radius: ${borderRadius}px;
             }
@@ -116,5 +116,5 @@ export function useStyle({ size }) {
                 }
             }
         `;
-    }, [variables]);
+    });
 }

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

@@ -2,4 +2,4 @@ import { PopperProps } from '../popper';
 export interface DropdownProps extends PopperProps {
     showArrow?: boolean;
 }
-export declare const Dropdown: import("react").ForwardRefExoticComponent<Omit<DropdownProps, "ref"> & import("react").RefAttributes<unknown>>;
+export declare function Dropdown({ showArrow, ...props }: DropdownProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/components/dropdown/dropdown.js

@@ -1,14 +1,13 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef } from 'react';
 import { Popper } from '../popper';
 import { classes, style } from './dropdown.style';
 import { classnames } from '../../utils';
-import { useTheme } from '../app';
-export const Dropdown = forwardRef(({ showArrow, ...props }, ref) => {
+import { useTheme } from '../theme';
+export function Dropdown({ showArrow, ...props }) {
     const { spacing } = useTheme();
     props.autoClose ??= true;
     props.trigger ??= 'click';
     props.placement ??= 'bottom';
     props.offset ??= showArrow ? spacing[3] : spacing[2];
-    return (_jsx(Popper, { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), content: _jsx("div", { className: classes.content, "data-show-arrow": showArrow, children: props.content }) }));
-});
+    return (_jsx(Popper, { ...props, css: style, className: classnames(classes.root, props.className), content: _jsx("div", { className: classes.content, "data-show-arrow": showArrow, children: props.content }) }));
+}

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import { defineClasses, defineCss } from '../../utils';
-import { zIndex } from '../app';
 import { popperArrowStyle } from '../popper/popper.style';
+import { zIndex } from '../theme';
 export const classes = defineClasses('dropdown', [
     'content'
 ]);
@@ -9,11 +9,11 @@ export const style = defineCss(({ background, boxShadow, borderRadius }) => css
     z-index: ${zIndex.dropdown};
 
     .${classes.content} {
-        background-color: ${background.card};
+        background-color: ${background.content};
         box-shadow: ${boxShadow[0]};
         border-radius: ${borderRadius}px;
         padding: 4px;
     }
 
-    ${popperArrowStyle(background.card)}
+    ${popperArrowStyle(background.content)}
 `);

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

@@ -2,7 +2,7 @@ import { CSSProperties } from 'react';
 import { TransportStyleProps } from '../transportStyle';
 export interface FlexProps extends TransportStyleProps {
     inline?: boolean;
-    /** 排列方式，@default "row" */
+    /** 排列方式，默认为`row` */
     direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
     /** 换行方式 */
     wrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
@@ -12,4 +12,4 @@ export interface FlexProps extends TransportStyleProps {
     /** 当compact为true时，gap无效，而且会清除子元素的圆角，让他们拼接起来 */
     compact?: boolean;
 }
-export declare const Flex: import("react").ForwardRefExoticComponent<Omit<FlexProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Flex({ inline, direction, wrap, gap, columnGap, rowGap, compact, ...props }: FlexProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { Children, cloneElement, forwardRef, isValidElement } from 'react';
+import { Children, cloneElement, isValidElement } from 'react';
 import { classes } from './flex.style';
 import { classnames, filterProperties } from '../../utils';
 import { TransportStyle } from '../transportStyle';
-export const Flex = forwardRef(({ inline, direction = 'row', wrap, gap = 0, columnGap, rowGap, compact, ...props }, ref) => {
+export function Flex({ inline, direction = 'row', wrap, gap = 0, columnGap, rowGap, compact, ...props }) {
     const renderChildren = () => {
         if (!compact) {
             return props.children;
@@ -20,10 +20,10 @@ export const Flex = forwardRef(({ inline, direction = 'row', wrap, gap = 0, colu
             });
         });
     };
-    return (_jsx(TransportStyle, { ...props, ref: ref, className: classnames(classes.root, props.className), style: filterProperties({
+    return (_jsx(TransportStyle, { ...props, className: classnames(classes.root, props.className), style: filterProperties({
             display: inline ? 'inline-flex' : 'flex',
             flexDirection: direction,
             flexWrap: wrap, columnGap, rowGap, gap,
             ...props.style
         }), children: renderChildren() }));
-});
+}

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

@@ -1,4 +1,4 @@
-import { Dispatch, ReactElement, ReactNode, Ref, RefObject, SetStateAction } from 'react';
+import React, { Dispatch, ReactElement, ReactNode, Ref, RefObject, SetStateAction } from 'react';
 import { Obj, ResponsiveProp } from '../../../types';
 import { FieldPath } from '../../utils';
 import { FieldError, FormItem, FormItemProps, FormItemRef } from './formItem';
@@ -10,14 +10,14 @@ export type FormSharedProps = {
     wrapperRef?: Ref<HTMLDivElement>;
     requiredMark?: ReactNode;
 };
-export interface FormProps<V extends FormValue> extends FormSharedProps, Omit<DescriptionsBaseProps, 'items' | 'onChange'>, Omit<JSX.IntrinsicElements['form'], 'ref' | 'onChange'> {
-    ref?: Ref<FormRef<V>>;
+export interface FormProps<V extends FormValue> extends FormSharedProps, Omit<DescriptionsBaseProps, 'items' | 'onChange'>, Omit<React.JSX.IntrinsicElements['form'], 'ref' | 'onChange'> {
+    ref?: Ref<FormRef<V> | null>;
     component?: any;
     initialValue?: V;
     onChange?(field: FieldPath, value: any, formValue: V): void;
     onFinish?(value: V): void;
     items?: (FormItemProps<any> & Obj)[];
-    /** variant为"grid"或"table"时会渲染Descriptions组件，并传递variant属性，@default "grid" */
+    /** variant为"grid"或"table"时会渲染Descriptions组件，并传递variant属性，默认为`grid` */
     variant?: 'plain' | 'grid' | 'table';
     columnCount?: ResponsiveProp;
     descriptionsProps?: DescriptionsProps;
@@ -27,8 +27,9 @@ interface FormContext<V extends FormValue> extends FormSharedProps {
     formValue?: V;
     setFieldValue?(field: FieldPath, value: any, silent?: boolean): void;
     itemsContainer?: Map<string, FormItemRef>;
-    formRef?: RefObject<FormRef<V> | undefined>;
+    formRef?: RefObject<FormRef<V> | null>;
 }
+declare const FormContext: React.Context<FormContext<any>>;
 export declare function useFormContext<V extends FormValue>(): FormContext<V>;
 export type FormRef<V extends FormValue = FormValue> = {
     submit(): Promise<V | null>;

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

@@ -1,19 +1,19 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { createContext, forwardRef, useContext, useImperativeHandle, useMemo, useRef } from 'react';
+import { createContext, useContext, useImperativeHandle, useMemo, useRef } from 'react';
 import { classnames, cloneDeep, mergeDeep, queryDeep, stringifyField, useSync, useSyncState } from '../../utils';
 import { classes, style } from './form.style';
 import { FormItem } from './formItem';
 import { FormRelatable } from './formRelatable';
 import { Descriptions } from '../descriptions';
-const formContext = createContext({});
+const FormContext = createContext({});
 export function useFormContext() {
-    return useContext(formContext);
+    return useContext(FormContext);
 }
-export const Form = forwardRef(({ component: Component = 'form', wrapperRef, initialValue, onChange, onFinish, requiredMark = '*', columnCount = 1, descriptionsProps, 
+export const Form = (({ ref, component: Component = 'form', wrapperRef, initialValue, onChange, onFinish, requiredMark = '*', columnCount = 1, descriptionsProps, 
 // 以下属性从DescriptionsBaseProps继承
 items, variant = 'grid', 
 // 以下属性从DescriptionsSharedProps继承
-labelWidth, labelPlacement = 'left', colon = ':', size, disableMargin, disablePadding, ...props }, ref) => {
+labelWidth, labelPlacement = 'left', colon = ':', size, disableMargin, disablePadding, ...props }) => {
     /**
      * ------------------------------------------------------------------------
      * 表单值
@@ -88,7 +88,7 @@ labelWidth, labelPlacement = 'left', colon = ':', size, disableMargin, disablePa
         isFieldTouched: field => !!itemsContainer.current.get(stringifyField(field))?.isTouched
     };
     useImperativeHandle(ref, () => formRef.current);
-    return (_jsx(Component, { ...props, ref: wrapperRef, css: style, className: classnames(classes.root, props.className), onSubmit: submitHandler, children: _jsx(formContext.Provider, { value: useMemo(() => ({
+    return (_jsx(Component, { ...props, ref: wrapperRef, css: style, className: classnames(classes.root, props.className), onSubmit: submitHandler, children: _jsx(FormContext, { value: useMemo(() => ({
                 requiredMark,
                 formValue: formValue.current, setFieldValue,
                 itemsContainer: itemsContainer.current, formRef

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

@@ -7,12 +7,12 @@ export const classes = defineClasses('form', [
 ]);
 export const style = defineCss(({ colors, spacing }) => css `
     .${classes.requiredMark} {
-        color: ${colors.error};
+        color: ${colors.error.main};
         margin-right: ${spacing[1]}px;
     }
 
     .${classes.helperText} {
         font-size: ${13 / 14}em;
-        color: ${colors.error};
+        color: ${colors.error.main};
     }
 `);

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

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 import { FormRef, FormSharedProps, FormValue } from './form';
 import { ColorPropsValue, Size } from '../../../types';
 import { FieldPath } from '../../utils';
@@ -7,7 +7,7 @@ export type FormItemRules<I> = {
     message?: ReactNode;
     required?: boolean;
     pattern?: RegExp;
-    validator?(fieldValue: I | undefined, formValue: any, formInstance: FormRef<FormValue> | null): any;
+    validator?(fieldValue: I | undefined, formValue: any, formInstance: FormRef | null): any;
 };
 export type FieldProps<I> = {
     checked?: boolean;

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

@@ -1,11 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { cloneElement, forwardRef, isValidElement, useDeferredValue, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import { cloneElement, isValidElement, useDeferredValue, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import { useFormContext } from './form';
 import { classnames, getValueOnChange, queryDeep, stringifyField, useDerivedState } from '../../utils';
 import { DescriptionItem } from '../descriptions';
 import { classes } from './form.style';
 import { Collapse } from '../transitionBase';
-export const FormItem = forwardRef(({ wrapperRef, field, initialValue, label = '', rules, required, error, helperText, dependencies, children, noStyle, requiredMark, ...props }, ref) => {
+export const FormItem = (({ wrapperRef, field, initialValue, label = '', rules, required, error, helperText, dependencies, children, noStyle, requiredMark, ...props }, ref) => {
     const { formValue, setFieldValue, itemsContainer, formRef, ...context } = useFormContext();
     requiredMark ??= context.requiredMark ?? '*';
     /**
@@ -33,7 +33,7 @@ export const FormItem = forwardRef(({ wrapperRef, field, initialValue, label = '
             ? queryDeep(formValue, field)
             : void 0;
         if (typeof prev !== 'undefined' && typeof value === 'undefined') {
-            console.error(`The field "${stringifyField(field)}"'s value was modified to undefined, did you forget to specify "initialValue" before calling "resetForm()" or "resetField()"`);
+            console.error(`The field "${stringifyField(field)}" value was modified to undefined, did you forget to specify "initialValue" before calling "resetForm()" or "resetField()"`);
         }
         return value;
     }, [formValue, field]);
@@ -123,7 +123,7 @@ export const FormItem = forwardRef(({ wrapperRef, field, initialValue, label = '
     /**
      * --------------------------------------------------------------------
      * 渲染部分
-    */
+     */
     const isRequired = useMemo(() => {
         return required ?? rulesArr?.some(r => r.required);
     }, [rules, required]);
@@ -145,18 +145,19 @@ export const FormItem = forwardRef(({ wrapperRef, field, initialValue, label = '
             });
         }
         if (isValidElement(children)) {
+            const { props } = children;
             return cloneElement(children, {
                 ...typeof field !== 'undefined' && {
                     ...typeof innerValue.current === 'boolean'
-                        ? { checked: children.props.checked ?? innerValue.current }
-                        : { value: children.props.value ?? innerValue.current },
+                        ? { checked: props.checked ?? innerValue.current }
+                        : { value: props.value ?? innerValue.current },
                     onChange(e) {
-                        children.props.onChange?.(e);
+                        props.onChange?.(e);
                         isTouched.current = isActiveChanging.current = true;
                         setInnerValue(o => getValueOnChange(e, o));
                     }
                 },
-                size: children.props.size ?? props.size,
+                size: props.size ?? props.size,
                 ...innerError.current && { color: 'error' }
             });
         }

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

@@ -3,11 +3,11 @@ import { useFormContext } from './form';
 import { cloneDeep } from '../../utils';
 export function FormRelatable(props) {
     const { formValue, formRef } = useFormContext();
-    const prevFormValue = useRef();
+    const prevFormValue = useRef(void 0);
     useEffect(() => {
         prevFormValue.current = cloneDeep(formValue);
     }, [formValue]);
-    const childrenBackup = useRef();
+    const childrenBackup = useRef(void 0);
     if (!prevFormValue.current || props.shouldUpdate(prevFormValue.current, formValue)) {
         childrenBackup.current = props.children(formValue, formRef.current);
     }

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

@@ -1,8 +1,7 @@
 import { ReactElement, ReactNode, Ref } from 'react';
 import { DialogProps } from '../dialog';
-import { FormProps, FormRef, FormValue } from '../form/form';
-import { FormItemProps } from '../form/formItem';
 import { Obj } from '../../../types';
+import { FormItemProps, FormProps, FormRef, FormValue } from '../form';
 interface FormDialogItemProps<I = any> extends Omit<FormItemProps<I>, 'key'>, Obj {
     key?: string | number;
 }