@canlooks/can-ui 0.0.21 → 0.0.23

package/dist/esm/components/dataGrid/dataGrid.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { createContext, forwardRef, memo, useContext, useMemo } from 'react';
+import { createContext, memo, useContext, useMemo } from 'react';
 import { classes, style } from './dataGrid.style';
 import { classnames, useControlled, useDataGridColumns } from '../../utils';
 import { Table } from '../table';
@@ -9,12 +9,12 @@ import { Pagination } from '../pagination';
 import { Loading } from '../loading';
 import { Placeholder } from '../placeholder';
 import { SelectionContext, useSelectionContext } from '../selectionContext';
-const dataGridContext = createContext({});
+const DataGridContext = createContext({});
 export function useDataGridContext() {
-    const { primaryKey = 'id', indent = 24, expandedSet = new Set(), ...context } = useContext(dataGridContext);
+    const { primaryKey = 'id', indent = 24, expandedSet = new Set(), ...context } = useContext(DataGridContext);
     return { primaryKey, indent, expandedSet, ...context };
 }
-export const DataGrid = memo(forwardRef(({ columns, rows, rowProps, selectorProps, primaryKey = 'id', childrenKey, indent = 24, defaultOrderColumn, orderColumn, defaultOrderType = 'descend', orderType, onOrderChange, selectable, clickRowToSelect = true, relation = 'dependent', integration = 'shallowest', allowSelectAll = true, defaultExpanded = [], expanded, onExpandedChange, loading, renderExpandIcon, multiple, defaultValue, value, onChange, paginatable = true, paginationProps = {}, renderPagination, bordered, striped, tableProps, ...props }, ref) => {
+export const DataGrid = memo(({ columns, rows, rowProps, selectorProps, primaryKey = 'id', childrenKey, indent = 24, defaultOrderColumn, orderColumn, defaultOrderType = 'descend', orderType, onOrderChange, selectable, clickRowToSelect = true, relation = 'dependent', integration = 'shallowest', allowSelectAll = true, defaultExpanded = [], expanded, onExpandedChange, loading, renderExpandIcon, multiple, defaultValue, value, onChange, paginatable = true, paginationProps = {}, renderPagination, bordered, striped, tableProps, ...props }) => {
     const { inSelection, disabled } = useSelectionContext();
     // 在SelectionContext内，且未disabled，需要默认打开selectable
     selectable ??= inSelection && !disabled;
@@ -88,7 +88,7 @@ export const DataGrid = memo(forwardRef(({ columns, rows, rowProps, selectorProp
             return newExpanded;
         });
     };
-    return (_jsxs(Loading, { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), loading: loading, children: [_jsx("div", { className: classes.container, children: _jsx(Table, { bordered: bordered, striped: striped, ...tableProps, children: _jsxs(SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, children: [_jsx(DataGridHead, { columns: completedColumns, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, allowSelectAll: allowSelectAll, multiple: multiple, primaryKey: primaryKey, rows: rows }), _jsx("tbody", { children: _jsx(dataGridContext.Provider, { value: useMemo(() => ({
+    return (_jsxs(Loading, { ...props, css: style, className: classnames(classes.root, props.className), loading: loading, children: [_jsx("div", { className: classes.container, children: _jsx(Table, { bordered: bordered, striped: striped, ...tableProps, children: _jsxs(SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, children: [_jsx(DataGridHead, { columns: completedColumns, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, allowSelectAll: allowSelectAll, multiple: multiple, primaryKey: primaryKey, rows: rows }), _jsx("tbody", { children: _jsx(DataGridContext, { value: useMemo(() => ({
                                         primaryKey, childrenKey, flattedColumns, rowProps, clickRowToSelect,
                                         indent, expandedSet, toggleExpanded, multiple
                                     }), [
@@ -99,6 +99,6 @@ export const DataGrid = memo(forwardRef(({ columns, rows, rowProps, selectorProp
                                         : _jsx("tr", { className: classes.empty, children: _jsx("td", { colSpan: flattedColumns.length, children: _jsx(Placeholder, {}) }) }) }) })] }) }) }), renderPagination
                 ? renderPagination(_paginationProps)
                 : paginatable && _jsx(Pagination, { ..._paginationProps })] }));
-}));
+});
 DataGrid.EXPAND_COLUMN = Symbol('expand-column');
 DataGrid.SELECT_COLUMN = Symbol('select-column');

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

@@ -1,9 +1,9 @@
 export declare const classes: {
-    children: string;
     sub: string;
     title: string;
-    container: string;
+    children: string;
     icon: string;
+    container: string;
     sorter: string;
     expandable: string;
     expandableWrap: string;

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

@@ -55,7 +55,7 @@ export const style = defineCss(({ spacing, mode, gray, text, colors, easing }) =
 
         &[data-ordering=true] {
             .${classes.icon} {
-                color: ${colors.primary};
+                color: ${colors.primary.main};
             }
         }
 
@@ -76,7 +76,7 @@ export const style = defineCss(({ spacing, mode, gray, text, colors, easing }) =
 
     tr {
         &[data-selected=true] {
-            background-color: ${Color(colors.primary).alpha(mode === 'light' ? .05 : .1).string()};
+            background-color: ${Color(colors.primary.main).alpha(mode === 'light' ? .05 : .1).string()};
         }
         
         &.${classes.sub} {

package/dist/esm/components/dataGrid/dataGridHead.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 import { DataGridProps, OrderType } from './dataGrid';
-import { Id, Obj } from '../../../types';
+import { Id, Obj } from '../../types';
 interface DataGridHeadProps<R extends Obj, V extends Id = Id> extends Pick<DataGridProps<R, V>, 'columns' | 'onOrderChange' | 'allowSelectAll' | 'multiple' | 'primaryKey' | 'rows'> {
     orderColumn?: Id;
     orderType?: OrderType;

package/dist/esm/components/dataGrid/dataGridHead.js

@@ -9,7 +9,7 @@ import { Checkbox } from '../checkbox';
 import { useSelectionContext } from '../selectionContext';
 import { isUnset } from '../../utils';
 export const DataGridHead = memo(({ columns, orderColumn, orderType, onOrderChange, allowSelectAll, multiple, primaryKey, rows, }) => {
-    const { innerValue, setInnerValue, selectionStatus } = useSelectionContext();
+    const { value, setValue, selectionStatus } = useSelectionContext();
     const allSelectionStatus = useMemo(() => {
         if (multiple && allowSelectAll) {
             const sum = rows?.reduce((prev, row) => {
@@ -19,9 +19,9 @@ export const DataGridHead = memo(({ columns, orderColumn, orderType, onOrderChan
             return sum === 0 ? 0 : sum < rows.length * 2 ? 1 : 2;
         }
         return 0;
-    }, [innerValue?.current, multiple, allowSelectAll]);
+    }, [value, multiple, allowSelectAll]);
     const checkboxChangeHandler = (e) => {
-        setInnerValue(e.target.checked
+        setValue(e.target.checked
             ? rows?.flatMap(r => {
                 return r[primaryKey] ?? [];
             }) || []

package/dist/esm/components/dataGrid/dataGridRows.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 import { DataGridProps } from './dataGrid';
-import { Id, Obj } from '../../../types';
+import { Id, Obj } from '../../types';
 interface DataGridRowsProps<R extends Obj, V extends Id = Id> extends Pick<DataGridProps<R, V>, 'rows'> {
     /** @private 内部使用，用于缩进子行 */
     _level?: number;

package/dist/esm/components/dateTimePicker/calendar.d.ts

@@ -1,8 +1,8 @@
-import { DIVProps } from '../../../types';
+import { DIVProps } from '../../types';
 import { Dayjs } from 'dayjs';
 import { Dispatch, SetStateAction } from 'react';
 type SharedCalendarProps = {
-    defautNull: boolean;
+    defaultNull: boolean;
     value: Dayjs;
     onChange(value: Dayjs): void;
 };

package/dist/esm/components/dateTimePicker/calendarDates.d.ts

@@ -1,2 +1,2 @@
 import { CommonCalendarProps } from './calendar';
-export declare const CalendarDates: import("react").MemoExoticComponent<({ defautNull, value, onChange, innerD, setInnerD, setViewType }: CommonCalendarProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const CalendarDates: import("react").MemoExoticComponent<({ defaultNull, value, onChange, innerD, setInnerD, setViewType }: CommonCalendarProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/dateTimePicker/calendarDates.js

@@ -20,7 +20,7 @@ const commonButtonProps = {
     size: 'small',
     color: 'text'
 };
-export const CalendarDates = memo(({ defautNull, value, onChange, innerD, setInnerD, setViewType }) => {
+export const CalendarDates = memo(({ defaultNull, value, onChange, innerD, setInnerD, setViewType }) => {
     const today = dayjs();
     const prevMonth = () => {
         setInnerD(d => d.subtract(1, 'month'));
@@ -65,7 +65,7 @@ export const CalendarDates = memo(({ defautNull, value, onChange, innerD, setInn
                     : isToday ? 'outlined'
                         : 'text', disabled: disabled, color: selected ? 'primary' : 'text', "data-other-month": !isCurrentMonth, onClick: () => {
                     // 默认为空时，任何日期都可选中
-                    (!selected || defautNull) && onChange(_d);
+                    (!selected || defaultNull) && onChange(_d);
                 }, children: _d.date() }, i));
         }
         return ret;

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

@@ -1,4 +1,4 @@
-import { Ref } from 'react';
+import React, { Ref } from 'react';
 import { PopperProps, PopperRef } from '../popper';
 import { InputBaseProps } from '../inputBase';
 import { Dayjs } from 'dayjs';
@@ -11,7 +11,7 @@ export type DatePickerSharedProps = {
     disabledSeconds?: (date: Dayjs, seconds: number) => any;
 };
 export interface DateTimePickerProps extends DatePickerSharedProps, Omit<InputBaseProps<'input'>, 'children' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max'> {
-    inputProps?: JSX.IntrinsicElements['input'];
+    inputProps?: React.JSX.IntrinsicElements['input'];
     inputRef?: Ref<HTMLInputElement>;
     popperProps?: PopperProps;
     popperRef?: Ref<PopperRef>;
@@ -25,4 +25,4 @@ export interface DateTimePickerProps extends DatePickerSharedProps, Omit<InputBa
     onChange?(value: Dayjs | null): void;
 }
 export declare function useDateTimePickerContext(): DatePickerSharedProps;
-export declare const DateTimePicker: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<DateTimePickerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const DateTimePicker: React.MemoExoticComponent<({ inputProps, inputRef, popperProps, popperRef, min, max, disabledDates, disabledHours, disabledMinutes, disabledSeconds, format, defaultValue, value, onChange, defaultOpen, open, onOpenChange, autoClose, ...props }: DateTimePickerProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/dateTimePicker/dateTimePicker.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { createContext, forwardRef, memo, useContext, useEffect, useMemo, useRef } from 'react';
+import { createContext, memo, useContext, useEffect, useMemo, useRef } from 'react';
 import { Popper } from '../popper';
 import { InputBase } from '../inputBase';
 import { classnames, cloneRef, useControlled } from '../../utils';
@@ -11,11 +11,11 @@ import { Calendar } from './calendar';
 import { Timer } from './timer';
 dayjs.extend(customParseFormat);
 const availableFormatTokens = ['Y', 'M', 'D', 'H', 'm', 's'];
-const dateTimePickerContext = createContext({});
+const DateTimePickerContext = createContext({});
 export function useDateTimePickerContext() {
-    return useContext(dateTimePickerContext);
+    return useContext(DateTimePickerContext);
 }
-export const DateTimePicker = memo(forwardRef(({ inputProps, inputRef, popperProps, popperRef, min, max, disabledDates, disabledHours, disabledMinutes, disabledSeconds, format = 'YYYY-MM-DD', defaultValue = null, value, onChange, defaultOpen = false, open, onOpenChange, autoClose = !/[Hms]/.test(format), ...props }, ref) => {
+export const DateTimePicker = memo(({ inputProps, inputRef, popperProps, popperRef, min, max, disabledDates, disabledHours, disabledMinutes, disabledSeconds, format = 'YYYY-MM-DD', defaultValue = null, value, onChange, defaultOpen = false, open, onOpenChange, autoClose = !/[Hms]/.test(format), ...props }) => {
     const innerInputRef = useRef(null);
     const focused = useRef(false);
     const [innerOpen, _setInnerOpen] = useControlled(defaultOpen, open, onOpenChange);
@@ -56,7 +56,7 @@ export const DateTimePicker = memo(forwardRef(({ inputProps, inputRef, popperPro
         });
         return range;
     }, [format]);
-    const currentRange = useRef();
+    const currentRange = useRef(null);
     const selectFn = (input) => {
         const { selectionStart } = input;
         const range = ranges.find(({ end }) => (selectionStart || 0) <= end) || ranges[ranges.length - 1];
@@ -125,10 +125,12 @@ export const DateTimePicker = memo(forwardRef(({ inputProps, inputRef, popperPro
                     if (+key > 1) {
                         return selectNext(input);
                     }
+                    break;
                 case 'D':
                     if (+key > 3) {
                         return selectNext(input);
                     }
+                    break;
                 default:
                     // 'H' | 'm' | 's'
                     if (+key > 5) {
@@ -209,15 +211,15 @@ export const DateTimePicker = memo(forwardRef(({ inputProps, inputRef, popperPro
     const showCalendar = /[YMD]/.test(format);
     const showTimer = /[Hms]/.test(format);
     const _dateVal = dateValue.current || dayjs();
-    return (_jsx(Popper, { css: datePickerPopperStyle, open: innerOpen.current, placement: "bottomLeft", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, content: _jsxs(dateTimePickerContext.Provider, { value: contextValue, children: [showCalendar &&
+    return (_jsx(Popper, { css: datePickerPopperStyle, open: innerOpen.current, placement: "bottomLeft", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, content: _jsxs(DateTimePickerContext, { value: contextValue, children: [showCalendar &&
                     _jsx(Calendar, { type: format.includes('D') ? 'dates'
                             : format.includes('M') ? 'months'
                                 : format.includes('Y') ? 'years'
-                                    : 'dates', defautNull: !dateValue.current, value: _dateVal, onChange: setDateValue }), showTimer &&
+                                    : 'dates', defaultNull: !dateValue.current, value: _dateVal, onChange: setDateValue }), showTimer &&
                     _jsx(Timer, { showHours: format.includes('H'), showMinutes: format.includes('m'), showSeconds: format.includes('s'), value: _dateVal, onChange: setDateValue })] }), ...popperProps, popperRef: popperRef, onOpenChange: setInnerOpen, onPointerDown: e => {
             popperProps?.onPointerDown?.(e);
             e.preventDefault();
-        }, children: _jsx(InputBase, { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), "data-focused": innerOpen.current, value: dateValue.current, onClear: clearHandler, onSelect: selectHandler, onFocus: focusHandler, onBlur: blurHandler, onKeyDown: keydownHandler, children: ({ ref, value, onChange, ...rest }) => _jsxs("div", { className: classes.container, children: [_jsx("input", { ...rest, ...inputProps, ref: cloneRef(ref, inputRef, innerInputRef), className: classnames(classes.input, inputProps?.className) }), _jsx("div", { className: classes.dateTimeIcon, children: showTimer && !showCalendar
+        }, children: _jsx(InputBase, { ...props, css: style, className: classnames(classes.root, props.className), "data-focused": innerOpen.current, value: dateValue.current, onClear: clearHandler, onSelect: selectHandler, onFocus: focusHandler, onBlur: blurHandler, onKeyDown: keydownHandler, children: ({ ref, value, onChange, ...rest }) => _jsxs("div", { className: classes.container, children: [_jsx("input", { ...rest, ...inputProps, ref: cloneRef(ref, inputRef, innerInputRef), className: classnames(classes.input, inputProps?.className) }), _jsx("div", { className: classes.dateTimeIcon, children: showTimer && !showCalendar
                             ? _jsx(ClockCircleOutlined, {})
                             : _jsx(CalendarOutlined, {}) })] }) }) }));
-}));
+});

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

@@ -1,6 +1,6 @@
 export declare const classes: {
-    container: string;
     input: string;
+    container: string;
     calendarHead: string;
     calendarHeadSide: string;
     calendarHeadControl: string;

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ColorPropsValue, DIVProps, Size } from '../../../types';
+import { ColorPropsValue, DIVProps, Size } from '../../types';
 import { DatePickerSharedProps, DateTimePickerProps } from '../dateTimePicker';
 import { Dayjs } from 'dayjs';
 type DateValueType = [Dayjs | null, Dayjs | null] | null;
@@ -22,5 +22,5 @@ export interface DateTimeRangePickerProps extends DatePickerSharedProps, Omit<DI
     readOnly?: boolean;
     autoFocus?: boolean;
 }
-export declare const DateTimeRangePicker: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<DateTimeRangePickerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const DateTimeRangePicker: import("react").MemoExoticComponent<({ startPickerProps, endPickerProps, format, defaultValue, value, onChange, defaultOpenPicker, openPicker, onOpenPickerChange, autoClose, separator, min, max, disabledDates, disabledHours, disabledMinutes, disabledSeconds, variant, size, color, disabled, readOnly, autoFocus, ...props }: DateTimeRangePickerProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
 export {};

package/dist/esm/components/dateTimeRangePicker/dateTimeRangePicker.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo, useRef } from 'react';
+import { memo, useRef } from 'react';
 import { classes, style } from './dateTimeRangePicker.style';
 import { classnames, cloneRef, useControlled } from '../../utils';
 import { DateTimePicker } from '../dateTimePicker';
-export const DateTimeRangePicker = memo(forwardRef(({ startPickerProps, endPickerProps, format = 'YYYY-MM-DD', defaultValue, value, onChange, defaultOpenPicker = 'closed', openPicker, onOpenPickerChange, autoClose = !/[Hms]/.test(format), separator, min, max, disabledDates, disabledHours, disabledMinutes, disabledSeconds, 
+export const DateTimeRangePicker = memo(({ startPickerProps, endPickerProps, format = 'YYYY-MM-DD', defaultValue, value, onChange, defaultOpenPicker = 'closed', openPicker, onOpenPickerChange, autoClose = !/[Hms]/.test(format), separator, min, max, disabledDates, disabledHours, disabledMinutes, disabledSeconds, 
 // 以下属性除autoFocus外，原样转发，autoFocus只对开始选择器生效
-variant, size, color, disabled, readOnly, autoFocus, ...props }, ref) => {
+variant, size, color, disabled, readOnly, autoFocus, ...props }) => {
     const [innerOpen, setInnerOpen] = useControlled(defaultOpenPicker, openPicker, onOpenPickerChange);
     const [innerValue, setInnerValue] = useControlled(defaultValue, value, onChange);
     const endPickerInputRef = useRef(null);
@@ -14,7 +14,7 @@ variant, size, color, disabled, readOnly, autoFocus, ...props }, ref) => {
         variant, size, color, disabled, readOnly
     };
     const showTimer = /[Hms]/.test(format);
-    return (_jsxs("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), children: [_jsx(DateTimePicker, { ...commonProps, autoFocus: autoFocus, autoClose: false, placeholder: showTimer ? '开始时间' : '开始日期', max: innerValue.current?.[1] || void 0, open: innerOpen.current === 'start', ...startPickerProps, onOpenChange: open => {
+    return (_jsxs("div", { ...props, css: style, className: classnames(classes.root, props.className), children: [_jsx(DateTimePicker, { ...commonProps, autoFocus: autoFocus, autoClose: false, placeholder: showTimer ? '开始时间' : '开始日期', max: innerValue.current?.[1] || void 0, open: innerOpen.current === 'start', ...startPickerProps, onOpenChange: open => {
                     startPickerProps?.onOpenChange?.(open);
                     setInnerOpen(open ? 'start' : 'closed');
                 }, onChange: startValue => {
@@ -34,4 +34,4 @@ variant, size, color, disabled, readOnly, autoFocus, ...props }, ref) => {
                     ...endPickerProps?.popperProps,
                     placement: 'bottomRight'
                 } })] }));
-}));
+});

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

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { DescriptionsSharedProps } from './descriptions';
 import { GridItemProps } from '../grid';
-import { ResponsiveProp } from '../../../types';
+import { ResponsiveProp } from '../../types';
 interface DescriptionItemBaseProps extends DescriptionsSharedProps {
     label?: ReactNode;
 }
@@ -13,5 +13,5 @@ interface DescriptionTableItemProps extends DescriptionItemBaseProps {
     children?: ReactNode;
 }
 export type DescriptionItemProps = DescriptionGridItemProps | DescriptionTableItemProps;
-export declare const DescriptionItem: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<(DescriptionTableItemProps | Omit<DescriptionGridItemProps, "ref">) & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const DescriptionItem: import("react").MemoExoticComponent<({ label, size, labelWidth, colon, labelPlacement, disableMargin, disablePadding, span, ...props }: DescriptionItemProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
 export {};

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

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo } from 'react';
+import { memo } from 'react';
 import { useDescriptionsContext } from './descriptions';
-import { useTheme } from '../app';
+import { useTheme } from '../theme';
 import { GridItem } from '../grid';
 import { classnames, useResponsiveValue } from '../../utils';
 import { classes, gridItemStyle } from './descriptions.style';
-export const DescriptionItem = memo(forwardRef(({ label, 
+export const DescriptionItem = memo(({ label, 
 // 以下属性从DescriptionsSharedProps继承
-size, labelWidth, colon, labelPlacement, disableMargin, disablePadding, span = { xs: 1 }, ...props }, ref) => {
+size, labelWidth, colon, labelPlacement, disableMargin, disablePadding, span = { xs: 1 }, ...props }) => {
     const theme = useTheme();
     const { variant = 'grid', ...context } = useDescriptionsContext();
     size ??= context.size ?? theme.size;
@@ -18,11 +18,11 @@ size, labelWidth, colon, labelPlacement, disableMargin, disablePadding, span = {
     disablePadding ??= context.disablePadding;
     const spanNum = useResponsiveValue(span);
     return variant === 'grid'
-        ? _jsxs(GridItem, { ...props, ref: ref, css: gridItemStyle, className: classnames(classes.item, props.className), span: span, "data-size": size, "data-label-placement": labelPlacement, "data-disable-margin": disableMargin, children: [!!label &&
+        ? _jsxs(GridItem, { ...props, css: gridItemStyle, className: classnames(classes.item, props.className), span: span, "data-size": size, "data-label-placement": labelPlacement, "data-disable-margin": disableMargin, children: [!!label &&
                     _jsxs("div", { className: classes.label, style: { width: labelWidth }, children: [label, !!colon && (labelPlacement === 'left' || labelPlacement === 'right') &&
                                 _jsx("div", { className: classes.colon, children: colon })] }), _jsx("div", { className: classes.content, children: props.children })] })
         : labelPlacement === 'top'
             ? _jsx("td", { className: classes.vertical, colSpan: spanNum, children: _jsxs("div", { className: classes.verticalColWrap, children: [_jsx("div", { className: `${classes.col} ${classes.labelCol}`, "data-size": size, children: label }), _jsx("div", { className: `${classes.col} ${classes.contentCol}`, "data-size": size, "data-disable-padding": disablePadding, children: props.children })] }) })
             : _jsxs(_Fragment, { children: [!!label &&
                         _jsx("td", { className: `${classes.col} ${classes.labelCol}`, "data-size": size, children: label }), _jsx("td", { className: `${classes.col} ${classes.contentCol}`, colSpan: spanNum * 2 - 1, "data-size": size, "data-disable-padding": disablePadding, children: props.children })] });
-}));
+});

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

@@ -1,5 +1,5 @@
-import { ReactElement, ReactNode } from 'react';
-import { Obj, ResponsiveProp, Size } from '../../../types';
+import React, { ReactElement, ReactNode } from 'react';
+import { Obj, ResponsiveProp, Size } from '../../types';
 import { GridProps } from '../grid';
 import { DescriptionItem, DescriptionItemProps } from './descriptionItem';
 export type DescriptionsSharedProps = {
@@ -7,7 +7,7 @@ export type DescriptionsSharedProps = {
     /** 标签的宽度,grid模式有效 */
     labelWidth?: string | number;
     colon?: ReactNode;
-    /** 标签的位置，table模式下仅支持'left'与'top', @default 'left' */
+    /** 标签的位置，table模式下仅支持`left`与`top`, 默认为`left` */
     labelPlacement?: 'top' | 'bottom' | 'left' | 'right';
     /** 是否禁用margin,{@link DescriptionsGridProps.variant}为grid有效  */
     disableMargin?: boolean;
@@ -18,14 +18,14 @@ export interface DescriptionsBaseProps extends DescriptionsSharedProps {
     items?: (DescriptionItemProps & Obj)[];
     /**
      * @private 用于渲染item的组件，通常为内部使用
-     * @default DescriptionItem {@link DescriptionItem}
+     * 默认为`DescriptionItem` {@link DescriptionItem}
      */
     itemComponent?: any;
 }
 export interface DescriptionsGridProps extends DescriptionsBaseProps, GridProps {
     variant?: 'grid';
 }
-export interface DescriptionsTableProps extends DescriptionsBaseProps, Partial<JSX.IntrinsicElements['table']> {
+export interface DescriptionsTableProps extends DescriptionsBaseProps, Partial<React.JSX.IntrinsicElements['table']> {
     variant: 'table';
     columnCount?: ResponsiveProp;
 }
@@ -34,6 +34,7 @@ interface DescriptionsContext extends DescriptionsSharedProps {
     variant?: 'grid' | 'table';
 }
 export declare function useDescriptionsContext(): DescriptionsContext;
+declare const DescriptionsContext: React.Context<DescriptionsContext>;
 export declare const Descriptions: {
     (props: DescriptionsProps): ReactElement;
     Item: typeof DescriptionItem;

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;
+    content: 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: {
     body: string;
-    card: string;
+    footer: string;
     title: string;
     content: string;
-    prefix: string;
-    footer: string;
     icon: string;
-    titleRow: string;
+    prefix: 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

@@ -1,8 +1,8 @@
-import { DIVProps } from '../../../types';
+import { DIVProps } from '../../types';
 export interface DividerProps extends DIVProps {
     textAlign?: 'start' | 'center' | 'end';
     alignMargin?: number | string;
     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/divider/divider.style.d.ts

@@ -1,6 +1,6 @@
 export declare const classes: {
-    content: string;
     line: string;
+    content: string;
     beforeLine: string;
     afterLine: string;
 } & {

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

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 import { DraggableOptions, HandleProps } from '../../utils';
-import { DefineElement } from '../../../types';
+import { DefineElement } from '../../types';
 export type DraggableTargetProps = {
     style: {
         translate: string;
@@ -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>>;