@canlooks/can-ui 0.0.26 → 0.0.28

package/dist/cjs/components/actionSheet/actionSheet.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionSheet = void 0;
+const react_1 = require("@emotion/react");
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
+const react_2 = require("react");
 const actionSheet_style_1 = require("./actionSheet.style");
 const utils_1 = require("../../utils");
 const overlayBase_1 = require("../overlayBase");
@@ -12,7 +13,7 @@ const placementToDirection = {
     top: 'down',
     bottom: 'up'
 };
-exports.ActionSheet = (0, react_1.memo)(({ ref, title, actions, placement = 'bottom', maskClosable, escapeClosable = true, onAction, onConfirm, onCancel, defaultOpen = false, open, onClose, showConfirm, confirmText = '确 定', confirmProps, showCancel = true, cancelText = '取 消', cancelProps, slideProps, ...props }) => {
+exports.ActionSheet = (0, react_2.memo)(({ ref, title, actions, placement = 'bottom', maskClosable, escapeClosable = true, onAction, onConfirm, onCancel, defaultOpen = false, open, onClose, showConfirm, confirmText = '确 定', confirmProps, showCancel = true, cancelText = '取 消', cancelProps, slideProps, ...props }) => {
     const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open);
     const close = (reason) => {
         onClose?.(reason);
@@ -34,10 +35,10 @@ exports.ActionSheet = (0, react_1.memo)(({ ref, title, actions, placement = 'bot
                                         confirmProps?.onClick?.(e);
                                         onConfirm?.(e);
                                         close('confirmed');
-                                    } }), actions?.map((menuItemProps, i) => (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { className: (0, utils_1.clsx)(actionSheet_style_1.classes.action, menuItemProps.className), size: "large", ...menuItemProps, onClick: e => {
+                                    } }), actions?.map((menuItemProps, i) => (0, react_1.createElement)(menuItem_1.MenuItem, { className: (0, utils_1.clsx)(actionSheet_style_1.classes.action, menuItemProps.className), size: "large", ...menuItemProps, key: menuItemProps.key ?? i, onClick: e => {
                                     menuItemProps.onClick?.(e);
                                     onAction?.(menuItemProps);
                                     close('action');
-                                } }, i))] }), showCancel &&
+                                } }))] }), showCancel &&
                     (0, jsx_runtime_1.jsx)("div", { className: actionSheet_style_1.classes.card, children: (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { color: "error", emphasized: true, size: "large", label: cancelText, ...cancelProps, onClick: cancelHandler }) })] }) }));
 });

package/dist/cjs/components/curd/curdFilter.js

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CurdFilter = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
 const form_1 = require("../form");
 const curd_style_1 = require("./curd.style");
 const utils_1 = require("../../utils");
@@ -13,25 +14,25 @@ const theme_1 = require("../theme");
 const __1 = require("../..");
 const faChevronDown_1 = require("@fortawesome/free-solid-svg-icons/faChevronDown");
 const faFilter_1 = require("@fortawesome/free-solid-svg-icons/faFilter");
-exports.CurdFilter = (0, react_1.memo)(({ ref, columns, expandable, showButton, renderConditions, buttonProps, onFilter, columnCount = 3, ...props }) => {
+exports.CurdFilter = (0, react_2.memo)(({ ref, columns, expandable, showButton, renderConditions, buttonProps, onFilter, columnCount = 3, ...props }) => {
     const { spacing } = (0, theme_1.useTheme)();
-    const items = (0, react_1.useMemo)(() => {
+    const items = (0, react_2.useMemo)(() => {
         return (0, utils_1.columnsToFilterItem)(columns);
     }, [columns]);
     /**
      * --------------------------------------------------------------
      * 收起与展开
      */
-    const firstItemRef = (0, react_1.useRef)(null);
-    const [expanded, setExpanded] = (0, react_1.useState)(false);
-    const renderedGrid = ((0, jsx_runtime_1.jsx)(grid_1.Grid, { className: curd_style_1.classes.filterGrid, columnGap: spacing[8], children: items?.map((item, i) => (0, react_1.isValidElement)(item)
+    const firstItemRef = (0, react_2.useRef)(null);
+    const [expanded, setExpanded] = (0, react_2.useState)(false);
+    const renderedGrid = ((0, jsx_runtime_1.jsx)(grid_1.Grid, { className: curd_style_1.classes.filterGrid, columnGap: spacing[8], children: items?.map((item, i) => (0, react_2.isValidElement)(item)
             ? item
-            : (0, jsx_runtime_1.jsx)(form_1.FormItem, { span: { xs: 12, md: 6, lg: 4 }, ...item, wrapperRef: !i ? firstItemRef : void 0 }, i)) }));
+            : (0, react_1.createElement)(form_1.FormItem, { span: { xs: 12, md: 6, lg: 4 }, ...item, key: item.key ?? i, wrapperRef: !i ? firstItemRef : void 0 })) }));
     /**
      * --------------------------------------------------------------
      * 触发筛选
      */
-    const formRef = (0, react_1.useRef)(null);
+    const formRef = (0, react_2.useRef)(null);
     const clickHandler = (e) => {
         buttonProps?.onClick?.(e);
         const filterValue = formRef.current.getFormValue();
@@ -47,7 +48,7 @@ exports.CurdFilter = (0, react_1.memo)(({ ref, columns, expandable, showButton,
      * --------------------------------------------------------------
      * 已生效的筛选条件
      */
-    const [filteredConditions, setFilteredConditions] = (0, react_1.useState)({});
+    const [filteredConditions, setFilteredConditions] = (0, react_2.useState)({});
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(form_1.Form, { ...props, ref: (0, utils_1.cloneRef)(ref, formRef), className: (0, utils_1.clsx)(curd_style_1.classes.filter, props.className), columnCount: columnCount, variant: "plain", onChange: changeHandler, children: !!items?.length &&
                     (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [expandable
                                 ? (0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { className: curd_style_1.classes.filterGridContainer, in: expanded, collapsedSize: () => firstItemRef.current?.offsetHeight || 56, appear: false, children: renderedGrid })

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

@@ -1,5 +1,5 @@
-import { ReactElement, ReactNode, ElementType } from 'react';
-import { MergeProps, Obj, OverridableProps, ResponsiveProp, Size } from '../../types';
+import { ReactElement, ReactNode, ElementType, ComponentPropsWithRef } from 'react';
+import { Obj, ResponsiveProp, Size } from '../../types';
 import { GridProps } from '../grid';
 import { DescriptionItem, DescriptionItemProps } from './descriptionItem';
 export type DescriptionsSharedProps = {
@@ -14,7 +14,7 @@ export type DescriptionsSharedProps = {
     /** 是否禁用padding,{@link DescriptionsProps.variant}为table有效 */
     disablePadding?: boolean;
 };
-export interface DescriptionsBaseProps extends DescriptionsSharedProps {
+interface DescriptionsBaseProps extends DescriptionsSharedProps {
     items?: (DescriptionItemProps & Obj)[];
     /**
      * @private 用于渲染item的组件，通常为内部使用
@@ -22,21 +22,21 @@ export interface DescriptionsBaseProps extends DescriptionsSharedProps {
      */
     itemComponent?: ElementType;
 }
-export interface DescriptionsGridOwnProps extends DescriptionsBaseProps {
+interface DescriptionsGridProps extends DescriptionsBaseProps, GridProps {
     variant?: 'grid';
 }
-export interface DescriptionsTableProps extends DescriptionsBaseProps {
+interface DescriptionsTableProps extends DescriptionsBaseProps, ComponentPropsWithRef<'table'> {
     variant: 'table';
     columnCount?: ResponsiveProp;
 }
-export type DescriptionsProps<C extends ElementType = 'div' | 'table'> = MergeProps<DescriptionsGridOwnProps, GridProps<C>> | OverridableProps<DescriptionsTableProps, C>;
+export type DescriptionsProps = DescriptionsGridProps | DescriptionsTableProps;
 interface DescriptionsContext extends DescriptionsSharedProps {
     variant?: 'grid' | 'table';
 }
 export declare function useDescriptionsContext(): DescriptionsContext;
 declare const DescriptionsContext: import("react").Context<DescriptionsContext>;
 export declare const Descriptions: {
-    <C extends ElementType = "div">(props: DescriptionsProps<C>): ReactElement;
+    (props: DescriptionsProps): ReactElement;
     Item: typeof DescriptionItem;
 };
 export {};

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

@@ -3,36 +3,41 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Descriptions = void 0;
 exports.useDescriptionsContext = useDescriptionsContext;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
 const grid_1 = require("../grid");
 const descriptionItem_1 = require("./descriptionItem");
 const utils_1 = require("../../utils");
 const descriptions_style_1 = require("./descriptions.style");
 const theme_1 = require("../theme");
 function useDescriptionsContext() {
-    return (0, react_1.useContext)(DescriptionsContext);
+    return (0, react_2.useContext)(DescriptionsContext);
 }
-const DescriptionsContext = (0, react_1.createContext)({});
-exports.Descriptions = (0, react_1.memo)(({ size, labelWidth, colon = ':', labelPlacement = 'left', disableMargin, disablePadding, items, itemComponent: ItemComponent = descriptionItem_1.DescriptionItem, variant = 'grid', columnCount = 3, ...props }) => {
-    const contextValue = (0, react_1.useMemo)(() => ({
+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 contextValue = (0, react_2.useMemo)(() => ({
         size, labelWidth, colon, labelPlacement, disableMargin, disablePadding, variant
     }), [
         size, labelWidth, colon, labelPlacement, disableMargin, disablePadding, variant
     ]);
     const renderGridItems = () => {
-        return items?.map((itemProps, i) => (0, jsx_runtime_1.jsx)(ItemComponent, { 
+        return items?.map((itemProps, i) => (0, react_1.createElement)(ItemComponent
+        // 最后一项沾满剩余行空间
+        , { 
             // 最后一项沾满剩余行空间
-            flex: i === items.length - 1 ? 1 : void 0, ...itemProps }, i)) || props.children;
+            flex: i === items.length - 1 ? 1 : void 0, ...itemProps, key: itemProps.key ?? i })) || props.children;
     };
     const columnCountNum = (0, utils_1.useResponsiveValue)(columnCount);
     const renderTableItems = () => {
-        const actualItems = items || react_1.Children.map(props.children, c => (0, react_1.isValidElement)(c) ? c.props : c);
+        const actualItems = items || react_2.Children.map(props.children, c => (0, react_2.isValidElement)(c) ? c.props : c);
         if (actualItems?.length) {
             const rows = [];
             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.clsx)(descriptions_style_1.classes.col, itemProps) }, i));
+                cols.push((0, react_1.createElement)(ItemComponent
+                // 最后一项沾满剩余行空间
+                , { ...itemProps, key: itemProps.key ?? i, span: i === actualItems.length - 1 ? columnCountNum - i % columnCountNum : itemProps.span, className: (0, utils_1.clsx)(descriptions_style_1.classes.col, itemProps) }));
             }
             return rows.map((r, i) => (0, jsx_runtime_1.jsx)("tr", { children: r }, i));
         }

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

@@ -134,6 +134,7 @@ exports.gridItemStyle = (0, utils_1.defineCss)(({ spacing, text }) => (0, react_
 
     &[data-label-placement=left] {
         .${exports.classes.label} {
+            text-align: right;
             justify-content: flex-end;
         }
 

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

@@ -1,16 +1,18 @@
 import React, { Dispatch, ReactElement, ReactNode, Ref, RefObject, SetStateAction, ElementType } from 'react';
-import { MergeProps, Obj } from '../../types';
+import { Obj, OverridableProps } from '../../types';
 import { FieldPath } from '../../utils';
 import { FieldError, FormItem, FormItemProps, FormItemRef } from './formItem';
 import { FormRelatable } from './formRelatable';
-import { DescriptionsProps } from '../descriptions';
+import { DescriptionsProps, DescriptionsSharedProps } from '../descriptions';
+import { GridOwnProps } from '../grid';
 export type FormValue = Obj;
 export type FormSharedProps = {
+    /** 必填字段的标记，默认为`*` */
     requiredMark?: ReactNode;
     /** variant为"grid"或"table"时会渲染Descriptions组件，并传递variant属性，默认为`grid` */
     variant?: 'plain' | 'grid' | 'table';
 };
-export interface FormOwnProps<V extends FormValue = FormValue> extends FormSharedProps {
+interface FormOwnProps<V extends FormValue = FormValue> extends FormSharedProps, DescriptionsSharedProps, GridOwnProps {
     ref?: Ref<FormRef<V> | null>;
     /** 最外层元素的ref，默认{@link ref}属性已经被{@link FormRef}取代 */
     wrapperRef?: Ref<HTMLFormElement>;
@@ -20,9 +22,8 @@ export interface FormOwnProps<V extends FormValue = FormValue> extends FormShare
     items?: (FormItemProps & Obj)[];
     descriptionsProps?: DescriptionsProps;
 }
-export type FormProps<V extends FormValue = FormValue, C extends ElementType = 'form'> = MergeProps<FormOwnProps<V>, DescriptionsProps<C>>;
+export type FormProps<V extends FormValue = FormValue, C extends ElementType = 'form'> = OverridableProps<FormOwnProps<V>, C>;
 interface FormContext<V extends FormValue> extends FormSharedProps {
-    requiredMark?: ReactNode;
     formValue?: V;
     setFieldValue?(field: FieldPath, value: any, silent?: boolean): void;
     itemsContainer?: Map<string, FormItemRef>;

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

@@ -13,11 +13,11 @@ const FormContext = (0, react_1.createContext)({});
 function useFormContext() {
     return (0, react_1.useContext)(FormContext);
 }
-exports.Form = (({ ref, component: Component = 'form', wrapperRef, initialValue, onChange, onFinish, requiredMark = '*', columnCount = 1, descriptionsProps, 
-// 以下属性从DescriptionsBaseProps继承
-items, variant = 'grid', 
+exports.Form = (({ component: Component = 'form', ref, wrapperRef, initialValue, onChange, onFinish, items, descriptionsProps, requiredMark = '*', variant = 'grid', 
 // 以下属性从DescriptionsSharedProps继承
-labelWidth, labelPlacement = 'left', colon = ':', size, disableMargin, disablePadding, ...props }) => {
+labelWidth, labelPlacement = 'left', colon = ':', size, disableMargin, disablePadding, 
+// 以下属性从GridOwnProps继承
+inline, columnCount = 1, gap, columnGap, rowGap, ...props }) => {
     /**
      * ------------------------------------------------------------------------
      * 表单值
@@ -97,7 +97,7 @@ labelWidth, labelPlacement = 'left', colon = ':', size, disableMargin, disablePa
                 itemsContainer: itemsContainer.current, formRef
             }), [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 }) }) }));
+                : (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 }) }) }));
 });
 exports.Form.Item = formItem_1.FormItem;
 exports.Form.Relatable = formRelatable_1.FormRelatable;

package/dist/cjs/components/slider/slider.js

@@ -192,14 +192,15 @@ exports.Slider = (0, react_2.memo)(({ color = 'primary', orientation = 'horizont
             };
             return renderHandle
                 ? renderHandle(value, _handleProps)
-                : (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { popperRef: r => {
+                : (0, react_1.createElement)(tooltip_1.Tooltip, { popperRef: r => {
                         if (r) {
                             tooltipRefs.current[index] = r;
                         }
                         else {
                             delete tooltipRefs.current[index];
                         }
-                    }, title: valueIsArray ? innerValue.current[index] : innerValue.current, trigger: ['hover', 'focus'], placement: orientation === 'horizontal' ? 'top' : 'left', ...tooltipProps, children: (0, react_1.createElement)("button", { ..._handleProps, key: index }) }, index);
+                    }, title: valueIsArray ? innerValue.current[index] : innerValue.current, trigger: ['hover', 'focus'], placement: orientation === 'horizontal' ? 'top' : 'left', ...tooltipProps, key: index },
+                    (0, react_1.createElement)("button", { ..._handleProps, key: index }));
         };
         return valueIsArray
             ? innerValue.current.map(fn)

package/dist/esm/components/actionSheet/actionSheet.js

@@ -1,3 +1,4 @@
+import { createElement as _createElement } from "@emotion/react";
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
 import { classes, style } from './actionSheet.style';
@@ -31,10 +32,10 @@ export const ActionSheet = memo(({ ref, title, actions, placement = 'bottom', ma
                                         confirmProps?.onClick?.(e);
                                         onConfirm?.(e);
                                         close('confirmed');
-                                    } }), actions?.map((menuItemProps, i) => _jsx(MenuItem, { className: clsx(classes.action, menuItemProps.className), size: "large", ...menuItemProps, onClick: e => {
+                                    } }), actions?.map((menuItemProps, i) => _createElement(MenuItem, { className: clsx(classes.action, menuItemProps.className), size: "large", ...menuItemProps, key: menuItemProps.key ?? i, onClick: e => {
                                     menuItemProps.onClick?.(e);
                                     onAction?.(menuItemProps);
                                     close('action');
-                                } }, i))] }), showCancel &&
+                                } }))] }), showCancel &&
                     _jsx("div", { className: classes.card, children: _jsx(MenuItem, { color: "error", emphasized: true, size: "large", label: cancelText, ...cancelProps, onClick: cancelHandler }) })] }) }));
 });

package/dist/esm/components/curd/curdFilter.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { createElement as _createElement } from "@emotion/react";
 import { isValidElement, memo, useMemo, useRef, useState } from 'react';
 import { Form, FormItem } from '../form';
 import { classes } from './curd.style';
@@ -23,7 +24,7 @@ export const CurdFilter = memo(({ ref, columns, expandable, showButton, renderCo
     const [expanded, setExpanded] = useState(false);
     const renderedGrid = (_jsx(Grid, { className: classes.filterGrid, columnGap: spacing[8], children: items?.map((item, i) => isValidElement(item)
             ? item
-            : _jsx(FormItem, { span: { xs: 12, md: 6, lg: 4 }, ...item, wrapperRef: !i ? firstItemRef : void 0 }, i)) }));
+            : _createElement(FormItem, { span: { xs: 12, md: 6, lg: 4 }, ...item, key: item.key ?? i, wrapperRef: !i ? firstItemRef : void 0 })) }));
     /**
      * --------------------------------------------------------------
      * 触发筛选

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

@@ -1,5 +1,5 @@
-import { ReactElement, ReactNode, ElementType } from 'react';
-import { MergeProps, Obj, OverridableProps, ResponsiveProp, Size } from '../../types';
+import { ReactElement, ReactNode, ElementType, ComponentPropsWithRef } from 'react';
+import { Obj, ResponsiveProp, Size } from '../../types';
 import { GridProps } from '../grid';
 import { DescriptionItem, DescriptionItemProps } from './descriptionItem';
 export type DescriptionsSharedProps = {
@@ -14,7 +14,7 @@ export type DescriptionsSharedProps = {
     /** 是否禁用padding,{@link DescriptionsProps.variant}为table有效 */
     disablePadding?: boolean;
 };
-export interface DescriptionsBaseProps extends DescriptionsSharedProps {
+interface DescriptionsBaseProps extends DescriptionsSharedProps {
     items?: (DescriptionItemProps & Obj)[];
     /**
      * @private 用于渲染item的组件，通常为内部使用
@@ -22,21 +22,21 @@ export interface DescriptionsBaseProps extends DescriptionsSharedProps {
      */
     itemComponent?: ElementType;
 }
-export interface DescriptionsGridOwnProps extends DescriptionsBaseProps {
+interface DescriptionsGridProps extends DescriptionsBaseProps, GridProps {
     variant?: 'grid';
 }
-export interface DescriptionsTableProps extends DescriptionsBaseProps {
+interface DescriptionsTableProps extends DescriptionsBaseProps, ComponentPropsWithRef<'table'> {
     variant: 'table';
     columnCount?: ResponsiveProp;
 }
-export type DescriptionsProps<C extends ElementType = 'div' | 'table'> = MergeProps<DescriptionsGridOwnProps, GridProps<C>> | OverridableProps<DescriptionsTableProps, C>;
+export type DescriptionsProps = DescriptionsGridProps | DescriptionsTableProps;
 interface DescriptionsContext extends DescriptionsSharedProps {
     variant?: 'grid' | 'table';
 }
 export declare function useDescriptionsContext(): DescriptionsContext;
 declare const DescriptionsContext: import("react").Context<DescriptionsContext>;
 export declare const Descriptions: {
-    <C extends ElementType = "div">(props: DescriptionsProps<C>): ReactElement;
+    (props: DescriptionsProps): ReactElement;
     Item: typeof DescriptionItem;
 };
 export {};

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { createElement as _createElement } from "@emotion/react";
 import { Children, createContext, isValidElement, memo, useContext, useMemo } from 'react';
 import { Grid } from '../grid';
 import { DescriptionItem } from './descriptionItem';
@@ -16,9 +17,11 @@ export const Descriptions = memo(({ size, labelWidth, colon = ':', labelPlacemen
         size, labelWidth, colon, labelPlacement, disableMargin, disablePadding, variant
     ]);
     const renderGridItems = () => {
-        return items?.map((itemProps, i) => _jsx(ItemComponent, { 
+        return items?.map((itemProps, i) => _createElement(ItemComponent
+        // 最后一项沾满剩余行空间
+        , { 
             // 最后一项沾满剩余行空间
-            flex: i === items.length - 1 ? 1 : void 0, ...itemProps }, i)) || props.children;
+            flex: i === items.length - 1 ? 1 : void 0, ...itemProps, key: itemProps.key ?? i })) || props.children;
     };
     const columnCountNum = useResponsiveValue(columnCount);
     const renderTableItems = () => {
@@ -28,7 +31,9 @@ export const Descriptions = memo(({ size, labelWidth, colon = ':', labelPlacemen
             for (let i = 0, { length } = actualItems; i < length; i++) {
                 const cols = rows[Math.floor(i / columnCountNum)] ||= [];
                 const itemProps = actualItems[i];
-                cols.push(_jsx(ItemComponent, { ...itemProps, span: i === actualItems.length - 1 ? columnCountNum - i % columnCountNum : itemProps.span, className: clsx(classes.col, itemProps) }, i));
+                cols.push(_createElement(ItemComponent
+                // 最后一项沾满剩余行空间
+                , { ...itemProps, key: itemProps.key ?? i, span: i === actualItems.length - 1 ? columnCountNum - i % columnCountNum : itemProps.span, className: clsx(classes.col, itemProps) }));
             }
             return rows.map((r, i) => _jsx("tr", { children: r }, i));
         }

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

@@ -131,6 +131,7 @@ export const gridItemStyle = defineCss(({ spacing, text }) => css `
 
     &[data-label-placement=left] {
         .${classes.label} {
+            text-align: right;
             justify-content: flex-end;
         }
 

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

@@ -1,16 +1,18 @@
 import React, { Dispatch, ReactElement, ReactNode, Ref, RefObject, SetStateAction, ElementType } from 'react';
-import { MergeProps, Obj } from '../../types';
+import { Obj, OverridableProps } from '../../types';
 import { FieldPath } from '../../utils';
 import { FieldError, FormItem, FormItemProps, FormItemRef } from './formItem';
 import { FormRelatable } from './formRelatable';
-import { DescriptionsProps } from '../descriptions';
+import { DescriptionsProps, DescriptionsSharedProps } from '../descriptions';
+import { GridOwnProps } from '../grid';
 export type FormValue = Obj;
 export type FormSharedProps = {
+    /** 必填字段的标记，默认为`*` */
     requiredMark?: ReactNode;
     /** variant为"grid"或"table"时会渲染Descriptions组件，并传递variant属性，默认为`grid` */
     variant?: 'plain' | 'grid' | 'table';
 };
-export interface FormOwnProps<V extends FormValue = FormValue> extends FormSharedProps {
+interface FormOwnProps<V extends FormValue = FormValue> extends FormSharedProps, DescriptionsSharedProps, GridOwnProps {
     ref?: Ref<FormRef<V> | null>;
     /** 最外层元素的ref，默认{@link ref}属性已经被{@link FormRef}取代 */
     wrapperRef?: Ref<HTMLFormElement>;
@@ -20,9 +22,8 @@ export interface FormOwnProps<V extends FormValue = FormValue> extends FormShare
     items?: (FormItemProps & Obj)[];
     descriptionsProps?: DescriptionsProps;
 }
-export type FormProps<V extends FormValue = FormValue, C extends ElementType = 'form'> = MergeProps<FormOwnProps<V>, DescriptionsProps<C>>;
+export type FormProps<V extends FormValue = FormValue, C extends ElementType = 'form'> = OverridableProps<FormOwnProps<V>, C>;
 interface FormContext<V extends FormValue> extends FormSharedProps {
-    requiredMark?: ReactNode;
     formValue?: V;
     setFieldValue?(field: FieldPath, value: any, silent?: boolean): void;
     itemsContainer?: Map<string, FormItemRef>;

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

@@ -9,11 +9,11 @@ const FormContext = createContext({});
 export function useFormContext() {
     return useContext(FormContext);
 }
-export const Form = (({ ref, component: Component = 'form', wrapperRef, initialValue, onChange, onFinish, requiredMark = '*', columnCount = 1, descriptionsProps, 
-// 以下属性从DescriptionsBaseProps继承
-items, variant = 'grid', 
+export const Form = (({ component: Component = 'form', ref, wrapperRef, initialValue, onChange, onFinish, items, descriptionsProps, requiredMark = '*', variant = 'grid', 
 // 以下属性从DescriptionsSharedProps继承
-labelWidth, labelPlacement = 'left', colon = ':', size, disableMargin, disablePadding, ...props }) => {
+labelWidth, labelPlacement = 'left', colon = ':', size, disableMargin, disablePadding, 
+// 以下属性从GridOwnProps继承
+inline, columnCount = 1, gap, columnGap, rowGap, ...props }) => {
     /**
      * ------------------------------------------------------------------------
      * 表单值
@@ -93,7 +93,7 @@ labelWidth, labelPlacement = 'left', colon = ':', size, disableMargin, disablePa
                 itemsContainer: itemsContainer.current, formRef
             }), [requiredMark, variant, formValue.current]), children: variant === 'plain'
                 ? props.children
-                : _jsx(Descriptions, { ...descriptionsProps, size: size, labelWidth: labelWidth, colon: colon, labelPlacement: labelPlacement, disableMargin: disableMargin, disablePadding: disablePadding, columnCount: columnCount, items: items, variant: variant, itemComponent: FormItem, children: props.children }) }) }));
+                : _jsx(Descriptions, { ...descriptionsProps, size: size, labelWidth: labelWidth, colon: colon, labelPlacement: labelPlacement, disableMargin: disableMargin, disablePadding: disablePadding, items: items, variant: variant, itemComponent: FormItem, inline: inline, columnCount: columnCount, gap: gap, columnGap: columnGap, rowGap: rowGap, children: props.children }) }) }));
 });
 Form.Item = FormItem;
 Form.Relatable = FormRelatable;

package/dist/esm/components/slider/slider.js

@@ -189,14 +189,15 @@ export const Slider = memo(({ color = 'primary', orientation = 'horizontal', var
             };
             return renderHandle
                 ? renderHandle(value, _handleProps)
-                : _jsx(Tooltip, { popperRef: r => {
+                : _createElement(Tooltip, { popperRef: r => {
                         if (r) {
                             tooltipRefs.current[index] = r;
                         }
                         else {
                             delete tooltipRefs.current[index];
                         }
-                    }, title: valueIsArray ? innerValue.current[index] : innerValue.current, trigger: ['hover', 'focus'], placement: orientation === 'horizontal' ? 'top' : 'left', ...tooltipProps, children: _createElement("button", { ..._handleProps, key: index }) }, index);
+                    }, title: valueIsArray ? innerValue.current[index] : innerValue.current, trigger: ['hover', 'focus'], placement: orientation === 'horizontal' ? 'top' : 'left', ...tooltipProps, key: index },
+                    _createElement("button", { ..._handleProps, key: index }));
         };
         return valueIsArray
             ? innerValue.current.map(fn)