@canlooks/can-ui 0.0.21 → 0.0.23

package/dist/cjs/components/dataGrid/dataGrid.js

@@ -13,12 +13,12 @@ const pagination_1 = require("../pagination");
 const loading_1 = require("../loading");
 const placeholder_1 = require("../placeholder");
 const selectionContext_1 = require("../selectionContext");
-const dataGridContext = (0, react_1.createContext)({});
+const DataGridContext = (0, react_1.createContext)({});
 function useDataGridContext() {
-    const { primaryKey = 'id', indent = 24, expandedSet = new Set(), ...context } = (0, react_1.useContext)(dataGridContext);
+    const { primaryKey = 'id', indent = 24, expandedSet = new Set(), ...context } = (0, react_1.useContext)(DataGridContext);
     return { primaryKey, indent, expandedSet, ...context };
 }
-exports.DataGrid = (0, react_1.memo)((0, react_1.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) => {
+exports.DataGrid = (0, react_1.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 } = (0, selectionContext_1.useSelectionContext)();
     // 在SelectionContext内，且未disabled，需要默认打开selectable
     selectable ??= inSelection && !disabled;
@@ -92,7 +92,7 @@ exports.DataGrid = (0, react_1.memo)((0, react_1.forwardRef)(({ columns, rows, r
             return newExpanded;
         });
     };
-    return ((0, jsx_runtime_1.jsxs)(loading_1.Loading, { ...props, ref: ref, css: dataGrid_style_1.style, className: (0, utils_1.classnames)(dataGrid_style_1.classes.root, props.className), loading: loading, children: [(0, jsx_runtime_1.jsx)("div", { className: dataGrid_style_1.classes.container, children: (0, jsx_runtime_1.jsx)(table_1.Table, { bordered: bordered, striped: striped, ...tableProps, children: (0, jsx_runtime_1.jsxs)(selectionContext_1.SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, children: [(0, jsx_runtime_1.jsx)(dataGridHead_1.DataGridHead, { columns: completedColumns, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, allowSelectAll: allowSelectAll, multiple: multiple, primaryKey: primaryKey, rows: rows }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)(dataGridContext.Provider, { value: (0, react_1.useMemo)(() => ({
+    return ((0, jsx_runtime_1.jsxs)(loading_1.Loading, { ...props, css: dataGrid_style_1.style, className: (0, utils_1.classnames)(dataGrid_style_1.classes.root, props.className), loading: loading, children: [(0, jsx_runtime_1.jsx)("div", { className: dataGrid_style_1.classes.container, children: (0, jsx_runtime_1.jsx)(table_1.Table, { bordered: bordered, striped: striped, ...tableProps, children: (0, jsx_runtime_1.jsxs)(selectionContext_1.SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, children: [(0, jsx_runtime_1.jsx)(dataGridHead_1.DataGridHead, { columns: completedColumns, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, allowSelectAll: allowSelectAll, multiple: multiple, primaryKey: primaryKey, rows: rows }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)(DataGridContext, { value: (0, react_1.useMemo)(() => ({
                                         primaryKey, childrenKey, flattedColumns, rowProps, clickRowToSelect,
                                         indent, expandedSet, toggleExpanded, multiple
                                     }), [
@@ -103,6 +103,6 @@ exports.DataGrid = (0, react_1.memo)((0, react_1.forwardRef)(({ columns, rows, r
                                         : (0, jsx_runtime_1.jsx)("tr", { className: dataGrid_style_1.classes.empty, children: (0, jsx_runtime_1.jsx)("td", { colSpan: flattedColumns.length, children: (0, jsx_runtime_1.jsx)(placeholder_1.Placeholder, {}) }) }) }) })] }) }) }), renderPagination
                 ? renderPagination(_paginationProps)
                 : paginatable && (0, jsx_runtime_1.jsx)(pagination_1.Pagination, { ..._paginationProps })] }));
-}));
+});
 exports.DataGrid.EXPAND_COLUMN = Symbol('expand-column');
 exports.DataGrid.SELECT_COLUMN = Symbol('select-column');

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

@@ -59,7 +59,7 @@ exports.style = (0, style_1.defineCss)(({ spacing, mode, gray, text, colors, eas
 
         &[data-ordering=true] {
             .${exports.classes.icon} {
-                color: ${colors.primary};
+                color: ${colors.primary.main};
             }
         }
 
@@ -80,7 +80,7 @@ exports.style = (0, style_1.defineCss)(({ spacing, mode, gray, text, colors, eas
 
     tr {
         &[data-selected=true] {
-            background-color: ${(0, color_1.default)(colors.primary).alpha(mode === 'light' ? .05 : .1).string()};
+            background-color: ${(0, color_1.default)(colors.primary.main).alpha(mode === 'light' ? .05 : .1).string()};
         }
         
         &.${exports.classes.sub} {

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

@@ -12,7 +12,7 @@ const checkbox_1 = require("../checkbox");
 const selectionContext_1 = require("../selectionContext");
 const utils_1 = require("../../utils");
 exports.DataGridHead = (0, react_2.memo)(({ columns, orderColumn, orderType, onOrderChange, allowSelectAll, multiple, primaryKey, rows, }) => {
-    const { innerValue, setInnerValue, selectionStatus } = (0, selectionContext_1.useSelectionContext)();
+    const { value, setValue, selectionStatus } = (0, selectionContext_1.useSelectionContext)();
     const allSelectionStatus = (0, react_2.useMemo)(() => {
         if (multiple && allowSelectAll) {
             const sum = rows?.reduce((prev, row) => {
@@ -22,9 +22,9 @@ exports.DataGridHead = (0, react_2.memo)(({ columns, orderColumn, orderType, onO
             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/cjs/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/cjs/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/cjs/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/cjs/components/dateTimePicker/calendarDates.js

@@ -24,7 +24,7 @@ const commonButtonProps = {
     size: 'small',
     color: 'text'
 };
-exports.CalendarDates = (0, react_1.memo)(({ defautNull, value, onChange, innerD, setInnerD, setViewType }) => {
+exports.CalendarDates = (0, react_1.memo)(({ defaultNull, value, onChange, innerD, setInnerD, setViewType }) => {
     const today = (0, dayjs_1.default)();
     const prevMonth = () => {
         setInnerD(d => d.subtract(1, 'month'));
@@ -69,7 +69,7 @@ exports.CalendarDates = (0, react_1.memo)(({ defautNull, value, onChange, innerD
                     : 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/cjs/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/cjs/components/dateTimePicker/dateTimePicker.js

@@ -16,11 +16,11 @@ const calendar_1 = require("./calendar");
 const timer_1 = require("./timer");
 dayjs_1.default.extend(customParseFormat_1.default);
 const availableFormatTokens = ['Y', 'M', 'D', 'H', 'm', 's'];
-const dateTimePickerContext = (0, react_1.createContext)({});
+const DateTimePickerContext = (0, react_1.createContext)({});
 function useDateTimePickerContext() {
-    return (0, react_1.useContext)(dateTimePickerContext);
+    return (0, react_1.useContext)(DateTimePickerContext);
 }
-exports.DateTimePicker = (0, react_1.memo)((0, react_1.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) => {
+exports.DateTimePicker = (0, react_1.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 = (0, react_1.useRef)(null);
     const focused = (0, react_1.useRef)(false);
     const [innerOpen, _setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open, onOpenChange);
@@ -61,7 +61,7 @@ exports.DateTimePicker = (0, react_1.memo)((0, react_1.forwardRef)(({ inputProps
         });
         return range;
     }, [format]);
-    const currentRange = (0, react_1.useRef)();
+    const currentRange = (0, react_1.useRef)(null);
     const selectFn = (input) => {
         const { selectionStart } = input;
         const range = ranges.find(({ end }) => (selectionStart || 0) <= end) || ranges[ranges.length - 1];
@@ -130,10 +130,12 @@ exports.DateTimePicker = (0, react_1.memo)((0, react_1.forwardRef)(({ inputProps
                     if (+key > 1) {
                         return selectNext(input);
                     }
+                    break;
                 case 'D':
                     if (+key > 3) {
                         return selectNext(input);
                     }
+                    break;
                 default:
                     // 'H' | 'm' | 's'
                     if (+key > 5) {
@@ -214,15 +216,15 @@ exports.DateTimePicker = (0, react_1.memo)((0, react_1.forwardRef)(({ inputProps
     const showCalendar = /[YMD]/.test(format);
     const showTimer = /[Hms]/.test(format);
     const _dateVal = dateValue.current || (0, dayjs_1.default)();
-    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { css: dateTimePicker_style_1.datePickerPopperStyle, open: innerOpen.current, placement: "bottomLeft", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, content: (0, jsx_runtime_1.jsxs)(dateTimePickerContext.Provider, { value: contextValue, children: [showCalendar &&
+    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { css: dateTimePicker_style_1.datePickerPopperStyle, open: innerOpen.current, placement: "bottomLeft", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, content: (0, jsx_runtime_1.jsxs)(DateTimePickerContext, { value: contextValue, children: [showCalendar &&
                     (0, jsx_runtime_1.jsx)(calendar_1.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 &&
                     (0, jsx_runtime_1.jsx)(timer_1.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: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { ...props, ref: ref, css: dateTimePicker_style_1.style, className: (0, utils_1.classnames)(dateTimePicker_style_1.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 }) => (0, jsx_runtime_1.jsxs)("div", { className: dateTimePicker_style_1.classes.container, children: [(0, jsx_runtime_1.jsx)("input", { ...rest, ...inputProps, ref: (0, utils_1.cloneRef)(ref, inputRef, innerInputRef), className: (0, utils_1.classnames)(dateTimePicker_style_1.classes.input, inputProps?.className) }), (0, jsx_runtime_1.jsx)("div", { className: dateTimePicker_style_1.classes.dateTimeIcon, children: showTimer && !showCalendar
+        }, children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { ...props, css: dateTimePicker_style_1.style, className: (0, utils_1.classnames)(dateTimePicker_style_1.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 }) => (0, jsx_runtime_1.jsxs)("div", { className: dateTimePicker_style_1.classes.container, children: [(0, jsx_runtime_1.jsx)("input", { ...rest, ...inputProps, ref: (0, utils_1.cloneRef)(ref, inputRef, innerInputRef), className: (0, utils_1.classnames)(dateTimePicker_style_1.classes.input, inputProps?.className) }), (0, jsx_runtime_1.jsx)("div", { className: dateTimePicker_style_1.classes.dateTimeIcon, children: showTimer && !showCalendar
                             ? (0, jsx_runtime_1.jsx)(icons_1.ClockCircleOutlined, {})
                             : (0, jsx_runtime_1.jsx)(icons_1.CalendarOutlined, {}) })] }) }) }));
-}));
+});

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

@@ -6,9 +6,9 @@ const react_1 = require("react");
 const dateTimeRangePicker_style_1 = require("./dateTimeRangePicker.style");
 const utils_1 = require("../../utils");
 const dateTimePicker_1 = require("../dateTimePicker");
-exports.DateTimeRangePicker = (0, react_1.memo)((0, react_1.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, 
+exports.DateTimeRangePicker = (0, react_1.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] = (0, utils_1.useControlled)(defaultOpenPicker, openPicker, onOpenPickerChange);
     const [innerValue, setInnerValue] = (0, utils_1.useControlled)(defaultValue, value, onChange);
     const endPickerInputRef = (0, react_1.useRef)(null);
@@ -17,7 +17,7 @@ variant, size, color, disabled, readOnly, autoFocus, ...props }, ref) => {
         variant, size, color, disabled, readOnly
     };
     const showTimer = /[Hms]/.test(format);
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: dateTimeRangePicker_style_1.style, className: (0, utils_1.classnames)(dateTimeRangePicker_style_1.classes.root, props.className), children: [(0, jsx_runtime_1.jsx)(dateTimePicker_1.DateTimePicker, { ...commonProps, autoFocus: autoFocus, autoClose: false, placeholder: showTimer ? '开始时间' : '开始日期', max: innerValue.current?.[1] || void 0, open: innerOpen.current === 'start', ...startPickerProps, onOpenChange: open => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: dateTimeRangePicker_style_1.style, className: (0, utils_1.classnames)(dateTimeRangePicker_style_1.classes.root, props.className), children: [(0, jsx_runtime_1.jsx)(dateTimePicker_1.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 => {
@@ -37,4 +37,4 @@ variant, size, color, disabled, readOnly, autoFocus, ...props }, ref) => {
                     ...endPickerProps?.popperProps,
                     placement: 'bottomRight'
                 } })] }));
-}));
+});

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

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

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

@@ -8,12 +8,12 @@ const grid_1 = require("../grid");
 const descriptionItem_1 = require("./descriptionItem");
 const utils_1 = require("../../utils");
 const descriptions_style_1 = require("./descriptions.style");
-const app_1 = require("../app");
+const theme_1 = require("../theme");
 function useDescriptionsContext() {
-    return (0, react_1.useContext)(descriptionsContext);
+    return (0, react_1.useContext)(DescriptionsContext);
 }
-const descriptionsContext = (0, react_1.createContext)({});
-exports.Descriptions = (0, react_1.memo)((0, react_1.forwardRef)(({ size, labelWidth, colon = ':', labelPlacement = 'left', disableMargin, disablePadding, items, itemComponent: ItemComponent = descriptionItem_1.DescriptionItem, variant = 'grid', columnCount = 3, ...props }, ref) => {
+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)(() => ({
         size, labelWidth, colon, labelPlacement, disableMargin, disablePadding, variant
     }), [
@@ -38,10 +38,10 @@ exports.Descriptions = (0, react_1.memo)((0, react_1.forwardRef)(({ size, labelW
         }
         return null;
     };
-    const { spacing } = (0, app_1.useTheme)();
+    const { spacing } = (0, theme_1.useTheme)();
     const style = (0, descriptions_style_1.tableStyle)();
     return variant === 'grid'
-        ? (0, jsx_runtime_1.jsx)(grid_1.Grid, { columnGap: spacing[6], ...props, ref: ref, className: (0, utils_1.classnames)(descriptions_style_1.classes.root, props.className), columnCount: columnCount, "data-variant": variant, children: (0, jsx_runtime_1.jsx)(descriptionsContext.Provider, { value: contextValue, children: renderGridItems() }) })
-        : (0, jsx_runtime_1.jsx)("table", { ...props, ref: ref, css: style, className: (0, utils_1.classnames)(descriptions_style_1.classes.root, props.className), "data-size": size, "data-variant": variant, children: (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)(descriptionsContext.Provider, { value: contextValue, children: renderTableItems() }) }) });
-}));
+        ? (0, jsx_runtime_1.jsx)(grid_1.Grid, { columnGap: spacing[6], ...props, className: (0, utils_1.classnames)(descriptions_style_1.classes.root, props.className), columnCount: columnCount, "data-variant": variant, children: (0, jsx_runtime_1.jsx)(DescriptionsContext, { value: contextValue, children: renderGridItems() }) })
+        : (0, jsx_runtime_1.jsx)("table", { ...props, css: style, className: (0, utils_1.classnames)(descriptions_style_1.classes.root, props.className), "data-size": size, "data-variant": variant, children: (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)(DescriptionsContext, { value: contextValue, children: renderTableItems() }) }) });
+});
 exports.Descriptions.Item = descriptionItem_1.DescriptionItem;

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

@@ -58,7 +58,7 @@ exports.tableStyle = (0, utils_1.defineCss)(({ divider, spacing, background }) =
 `);
 exports.gridItemStyle = (0, utils_1.defineCss)(({ spacing, text }) => (0, react_1.css) `
     display: flex;
-    gap: 4px 0;
+    gap: ${spacing[1]}px 0;
 
     &[data-label-placement=top] {
         flex-direction: column;
@@ -72,19 +72,33 @@ exports.gridItemStyle = (0, utils_1.defineCss)(({ spacing, text }) => (0, react_
         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/cjs/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/cjs/components/dialog/dialog.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Dialog = void 0;
+exports.Dialog = Dialog;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const modal_1 = require("../modal");
@@ -9,7 +9,7 @@ const utils_1 = require("../../utils");
 const button_1 = require("../button");
 const icons_1 = require("@ant-design/icons");
 const draggable_1 = require("../draggable");
-exports.Dialog = (0, react_1.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) => {
+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] = (0, utils_1.useControlled)(defaultOpen, open);
     const close = (closeReason) => {
         if (!innerLoading.current || closeReason === 'confirmed') {
@@ -87,4 +87,4 @@ exports.Dialog = (0, react_1.forwardRef)(({ icon, title, footer, prefix, suffix,
                                         (0, jsx_runtime_1.jsx)("div", { className: dialog_style_1.classes.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { ref: bodyWrapRef, className: dialog_style_1.classes.bodyWrap, children: props.children }), !!suffix &&
                                         (0, jsx_runtime_1.jsx)("div", { className: dialog_style_1.classes.suffix, children: suffix })] }), (typeof footer === 'undefined' || !!footer) &&
                                 (0, jsx_runtime_1.jsx)("div", { className: dialog_style_1.classes.footer, children: renderFooter() })] })] }) }) }));
-});
+}

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

@@ -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/cjs/components/dialog/dialog.style.js

@@ -20,13 +20,13 @@ exports.style = (0, utils_1.defineCss)(({ background, borderRadius, boxShadow, s
     .${exports.classes.card} {
         max-height: 100%;
         display: flex;
-        background-color: ${background.card};
+        background-color: ${background.content};
         border-radius: ${borderRadius}px;
         box-shadow: ${boxShadow[0]};
     }
 
     .${exports.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/cjs/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/cjs/components/divider/divider.js

@@ -5,9 +5,9 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const divider_style_1 = require("./divider.style");
 const utils_1 = require("../../utils");
-exports.Divider = (0, react_1.memo)((0, react_1.forwardRef)(({ textAlign = 'center', alignMargin = 36, orientation = 'horizontal', margin, ...props }, ref) => {
+exports.Divider = (0, react_1.memo)(({ textAlign = 'center', alignMargin = 36, orientation = 'horizontal', margin, ...props }) => {
     const styleProp = orientation === 'horizontal' ? 'width' : 'height';
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: divider_style_1.style, className: (0, utils_1.classnames)(divider_style_1.classes.root, props.className), style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: divider_style_1.style, className: (0, utils_1.classnames)(divider_style_1.classes.root, props.className), style: {
             margin: typeof margin === 'number'
                 ? orientation === 'horizontal' ? `${margin}px 0` : `0 ${margin}px`
                 : margin,
@@ -21,4 +21,4 @@ exports.Divider = (0, react_1.memo)((0, react_1.forwardRef)(({ textAlign = 'cent
                         flex: textAlign !== 'end' ? 1 : void 0,
                         [styleProp]: textAlign === 'end' ? alignMargin : void 0
                     } })] }));
-}));
+});

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