@canlooks/can-ui 0.0.25 → 0.0.27

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

@@ -1,5 +1,5 @@
-import React, { Ref } from 'react';
-import { PopperProps, PopperRef } from '../popper';
+import React, { JSX } from 'react';
+import { PopperProps } from '../popper';
 import { InputBaseProps } from '../inputBase';
 import { Dayjs } from 'dayjs';
 export type DatePickerSharedProps = {
@@ -11,10 +11,8 @@ export type DatePickerSharedProps = {
     disabledSeconds?: (date: Dayjs, seconds: number) => any;
 };
 export interface DateTimePickerProps extends DatePickerSharedProps, Omit<InputBaseProps<'input'>, 'children' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max'> {
-    inputProps?: React.JSX.IntrinsicElements['input'];
-    inputRef?: Ref<HTMLInputElement>;
+    inputProps?: JSX.IntrinsicElements['input'];
     popperProps?: PopperProps;
-    popperRef?: Ref<PopperRef>;
     defaultOpen?: boolean;
     open?: boolean;
     onOpenChange?(open: boolean): void;
@@ -25,4 +23,4 @@ export interface DateTimePickerProps extends DatePickerSharedProps, Omit<InputBa
     onChange?(value: Dayjs | null): void;
 }
 export declare function useDateTimePickerContext(): DatePickerSharedProps;
-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>;
+export declare const DateTimePicker: React.MemoExoticComponent<({ inputProps, popperProps, 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

@@ -2,20 +2,22 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { createContext, memo, useContext, useEffect, useMemo, useRef } from 'react';
 import { Popper } from '../popper';
 import { InputBase } from '../inputBase';
-import { classnames, cloneRef, useControlled } from '../../utils';
+import { clsx, cloneRef, useControlled } from '../../utils';
 import { classes, datePickerPopperStyle, style } from './dateTimePicker.style';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
-import { CalendarOutlined, ClockCircleOutlined } from '@ant-design/icons';
 import { Calendar } from './calendar';
 import { Timer } from './timer';
+import { Icon } from '../..';
+import { faCalendar } from '@fortawesome/free-regular-svg-icons/faCalendar';
+import { faClock } from '@fortawesome/free-regular-svg-icons/faClock';
 dayjs.extend(customParseFormat);
 const availableFormatTokens = ['Y', 'M', 'D', 'H', 'm', 's'];
 const DateTimePickerContext = createContext({});
 export function useDateTimePickerContext() {
     return useContext(DateTimePickerContext);
 }
-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 }) => {
+export const DateTimePicker = memo(({ inputProps, popperProps, 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);
@@ -27,7 +29,7 @@ export const DateTimePicker = memo(({ inputProps, inputRef, popperProps, popperR
     useEffect(() => {
         if (!innerOpen.current && !dateValue.current) {
             // 弹框关闭时没有选中日期，清空输入框
-            innerInputRef.current.value = '';
+            innerInputRef.current.value = format;
         }
     }, [innerOpen.current]);
     const [dateValue, _setDateValue] = useControlled(defaultValue, value, onChange);
@@ -40,7 +42,7 @@ export const DateTimePicker = memo(({ inputProps, inputRef, popperProps, popperR
     }, [dateValue.current]);
     const clearHandler = () => {
         setDateValue(null);
-        selectFn(innerInputRef.current);
+        selectFn();
     };
     const ranges = useMemo(() => {
         const range = [];
@@ -57,7 +59,8 @@ export const DateTimePicker = memo(({ inputProps, inputRef, popperProps, popperR
         return range;
     }, [format]);
     const currentRange = useRef(null);
-    const selectFn = (input) => {
+    const selectFn = () => {
+        const input = innerInputRef.current;
         const { selectionStart } = input;
         const range = ranges.find(({ end }) => (selectionStart || 0) <= end) || ranges[ranges.length - 1];
         if (range) {
@@ -71,16 +74,13 @@ export const DateTimePicker = memo(({ inputProps, inputRef, popperProps, popperR
             // setSelectionRange()方法也会触发该回调，通过nativeEvent.type排除
             return;
         }
-        selectFn(e.target);
+        selectFn();
     };
     const focusHandler = (e) => {
         focused.current = true;
-        selectFn(e.target);
+        selectFn();
     };
     const blurHandler = (e) => {
-        if (!dateValue.current && !innerOpen.current) {
-            e.target.value = '';
-        }
         resetContinue();
         focused.current = false;
         _setInnerOpen(false);
@@ -216,10 +216,10 @@ export const DateTimePicker = memo(({ inputProps, inputRef, popperProps, popperR
                             : format.includes('M') ? 'months'
                                 : format.includes('Y') ? 'years'
                                     : '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 => {
+                    _jsx(Timer, { showHours: format.includes('H'), showMinutes: format.includes('m'), showSeconds: format.includes('s'), value: _dateVal, onChange: setDateValue })] }), ...popperProps, onOpenChange: setInnerOpen, onPointerDown: e => {
             popperProps?.onPointerDown?.(e);
             e.preventDefault();
-        }, 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, {}) })] }) }) }));
+        }, children: _jsx(InputBase, { ...props, css: style, className: clsx(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, inputProps?.ref, innerInputRef), className: clsx(classes.input, inputProps?.className) }), _jsx("div", { className: classes.dateTimeIcon, children: showTimer && !showCalendar
+                            ? _jsx(Icon, { icon: faClock })
+                            : _jsx(Icon, { icon: faCalendar }) })] }) }) }));
 });

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

@@ -1,6 +1,7 @@
 export declare const classes: {
     input: string;
     container: string;
+    calendar: string;
     calendarHead: string;
     calendarHeadSide: string;
     calendarHeadControl: string;
@@ -8,7 +9,6 @@ export declare const classes: {
     calendarHeadButton: string;
     calendarBody: string;
     dateItem: string;
-    calendar: string;
     inputGroup: string;
     inputUnit: string;
     dateTimeIcon: string;

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { memo } from 'react';
+import { memo, useRef } from 'react';
 import { classes, style } from './timer.style';
 import { MenuItem } from '../menuItem';
 import { useDateTimePickerContext } from './dateTimePicker';
@@ -36,7 +36,8 @@ function TimerItem({ type, value, onChange }) {
         }
         return false;
     };
-    const selectedItemRef = useScrollToSelected();
+    const scrollerRef = useRef(null);
+    const selectedItemRef = useScrollToSelected(scrollerRef);
     const renderItems = (count) => {
         const ret = [];
         for (let i = 0; i < count; i++) {
@@ -46,5 +47,5 @@ function TimerItem({ type, value, onChange }) {
     };
     return (_jsxs("div", { className: classes.selectItem, children: [_jsx("div", { className: classes.selectItemTitle, children: type === 'hour' ? '时'
                     : type === 'minute' ? '分'
-                        : '秒' }), _jsx("div", { className: classes.selectItemBody, children: renderItems(type === 'hour' ? 24 : 60) })] }));
+                        : '秒' }), _jsx("div", { ref: scrollerRef, className: classes.selectItemBody, children: renderItems(type === 'hour' ? 24 : 60) })] }));
 }

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

@@ -1,9 +1,9 @@
 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;
-export interface DateTimeRangePickerProps extends DatePickerSharedProps, Omit<DIVProps, 'defaultValue' | 'onChange'> {
+export interface DateTimeRangePickerProps extends DatePickerSharedProps, Omit<DivProps, 'defaultValue' | 'onChange'> {
     startPickerProps?: DateTimePickerProps;
     endPickerProps?: DateTimePickerProps;
     format?: string;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo, useRef } from 'react';
 import { classes, style } from './dateTimeRangePicker.style';
-import { classnames, cloneRef, useControlled } from '../../utils';
+import { clsx, useControlled } from '../../utils';
 import { DateTimePicker } from '../dateTimePicker';
 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只对开始选择器生效
@@ -14,7 +14,7 @@ variant, size, color, disabled, readOnly, autoFocus, ...props }) => {
         variant, size, color, disabled, readOnly
     };
     const showTimer = /[Hms]/.test(format);
-    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 => {
+    return (_jsxs("div", { ...props, css: style, className: clsx(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 => {
@@ -24,7 +24,7 @@ variant, size, color, disabled, readOnly, autoFocus, ...props }) => {
                         endPickerInputRef.current.focus();
                         innerOpen.current === 'start' && setInnerOpen('end');
                     }
-                } }), separator ?? _jsx("span", { children: "-" }), _jsx(DateTimePicker, { ...commonProps, autoClose: autoClose, placeholder: showTimer ? '结束时间' : '结束日期', min: innerValue.current?.[0] || void 0, open: innerOpen.current === 'end', ...endPickerProps, inputRef: cloneRef(endPickerInputRef, endPickerProps?.inputRef), onOpenChange: open => {
+                } }), separator ?? _jsx("span", { children: "-" }), _jsx(DateTimePicker, { ...commonProps, autoClose: autoClose, placeholder: showTimer ? '结束时间' : '结束日期', min: innerValue.current?.[0] || void 0, open: innerOpen.current === 'end', ...endPickerProps, inputProps: { ref: endPickerInputRef }, onOpenChange: open => {
                     startPickerProps?.onOpenChange?.(open);
                     setInnerOpen(open ? 'end' : 'closed');
                 }, onChange: endValue => {

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

@@ -1,17 +1,16 @@
-import { ReactNode } from 'react';
+import { ReactNode, ElementType, ReactElement } from 'react';
 import { DescriptionsSharedProps } from './descriptions';
 import { GridItemProps } from '../grid';
-import { ResponsiveProp } from '../../types';
-interface DescriptionItemBaseProps extends DescriptionsSharedProps {
+import { MergeProps, ResponsiveProp } from '../../types';
+export interface DescriptionGridItemOwnProps extends DescriptionsSharedProps {
     label?: ReactNode;
+    /** @alias {@link children} */
+    content?: ReactNode;
 }
-interface DescriptionGridItemProps extends DescriptionItemBaseProps, GridItemProps {
-}
-interface DescriptionTableItemProps extends DescriptionItemBaseProps {
+export interface DescriptionTableItemProps extends DescriptionGridItemOwnProps {
     span?: ResponsiveProp;
     className?: string;
     children?: ReactNode;
 }
-export type DescriptionItemProps = DescriptionGridItemProps | DescriptionTableItemProps;
-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 {};
+export type DescriptionItemProps<C extends ElementType = 'div'> = MergeProps<DescriptionGridItemOwnProps, GridItemProps<C>> | DescriptionTableItemProps;
+export declare const DescriptionItem: <C extends ElementType = "div">(props: DescriptionItemProps<C>) => ReactElement;

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

@@ -3,9 +3,9 @@ import { memo } from 'react';
 import { useDescriptionsContext } from './descriptions';
 import { useTheme } from '../theme';
 import { GridItem } from '../grid';
-import { classnames, useResponsiveValue } from '../../utils';
+import { clsx, useResponsiveValue } from '../../utils';
 import { classes, gridItemStyle } from './descriptions.style';
-export const DescriptionItem = memo(({ label, 
+export const DescriptionItem = memo(({ label, content, 
 // 以下属性从DescriptionsSharedProps继承
 size, labelWidth, colon, labelPlacement, disableMargin, disablePadding, span = { xs: 1 }, ...props }) => {
     const theme = useTheme();
@@ -18,11 +18,11 @@ size, labelWidth, colon, labelPlacement, disableMargin, disablePadding, span = {
     disablePadding ??= context.disablePadding;
     const spanNum = useResponsiveValue(span);
     return variant === 'grid'
-        ? _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(GridItem, { ...props, css: gridItemStyle, className: clsx(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 })] })
+                                _jsx("div", { className: classes.colon, children: colon })] }), _jsx("div", { className: classes.content, children: content ?? 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 })] }) })
+            ? _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: content ?? 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 })] });
+                        _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: content ?? props.children })] });
 });

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

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

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

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { Children, createContext, isValidElement, memo, useContext, useMemo } from 'react';
 import { Grid } from '../grid';
 import { DescriptionItem } from './descriptionItem';
-import { classnames, useResponsiveValue } from '../../utils';
+import { clsx, useResponsiveValue } from '../../utils';
 import { classes, tableStyle } from './descriptions.style';
 import { useTheme } from '../theme';
 export function useDescriptionsContext() {
@@ -28,7 +28,7 @@ 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: classnames(classes.col, itemProps) }, i));
+                cols.push(_jsx(ItemComponent, { ...itemProps, span: i === actualItems.length - 1 ? columnCountNum - i % columnCountNum : itemProps.span, className: clsx(classes.col, itemProps) }, i));
             }
             return rows.map((r, i) => _jsx("tr", { children: r }, i));
         }
@@ -37,7 +37,7 @@ export const Descriptions = memo(({ size, labelWidth, colon = ':', labelPlacemen
     const { spacing } = useTheme();
     const style = tableStyle();
     return variant === 'grid'
-        ? _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() }) }) });
+        ? _jsx(Grid, { columnGap: spacing[6], ...props, className: clsx(classes.root, props.className), columnCount: columnCount, "data-variant": variant, children: _jsx(DescriptionsContext, { value: contextValue, children: renderGridItems() }) })
+        : _jsx("table", { ...props, css: style, className: clsx(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

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

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

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

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

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

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

@@ -2,11 +2,12 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/reac
 import { useEffect, useRef } from 'react';
 import { Modal } from '../modal';
 import { classes, style } from './dialog.style';
-import { classnames, cloneRef, useControlled, useEscapeClosable, useLoading } from '../../utils';
+import { clsx, cloneRef, useControlled, useEscapeClosable, useLoading } from '../../utils';
 import { Button } from '../button';
-import { CloseOutlined } from '@ant-design/icons';
 import { Draggable } from '../draggable';
-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 }) {
+import { Icon } from '../..';
+import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
+export function Dialog({ ref, icon, title, footer, prefix, suffix, width = 420, minWidth, maxWidth = '100%', showClose = true, closeProps, showConfirm = true, confirmText = '确 定', confirmProps, onConfirm, confirmLoading = false, showCancel = true, cancelText = '取 消', cancelProps, onCancel, draggable = true, maskClosable = true, escapeClosable = true, defaultOpen = false, open, onClose, ...props }) {
     const [innerOpen, _setInnerOpen] = useControlled(defaultOpen, open);
     const close = (closeReason) => {
         if (!innerLoading.current || closeReason === 'confirmed') {
@@ -72,15 +73,15 @@ export function Dialog({ ref, icon, title, footer, prefix, suffix, width = 420,
     const renderFooter = () => {
         if (typeof footer === 'undefined' || footer === true) {
             return (_jsxs(_Fragment, { children: [showCancel &&
-                        _jsx(Button, { variant: "outlined", ...cancelProps, ref: cancelRef, onClick: cancelHandler, children: cancelText }), showConfirm &&
-                        _jsx(Button, { loading: innerLoading.current, ...confirmProps, ref: confirmRef, onClick: confirmHandler, children: confirmText })] }));
+                        _jsx(Button, { variant: "outlined", ...cancelProps, onClick: cancelHandler, children: cancelText }), showConfirm &&
+                        _jsx(Button, { loading: innerLoading.current, ...confirmProps, onClick: confirmHandler, children: confirmText })] }));
         }
         return footer;
     };
-    return (_jsx(Modal, { ...props, ref: cloneRef(ref, overlayRef), css: style, className: classnames(classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-draggable": draggable, children: _jsx(Draggable, { container: () => overlayRef.current, children: (targetProps, handleProps) => _jsxs("div", { className: classes.card, ...targetProps, style: { width, minWidth, maxWidth, ...targetProps.style }, children: [!!icon &&
+    return (_jsx(Modal, { ...props, ref: cloneRef(ref, overlayRef), css: style, className: clsx(classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-draggable": draggable, children: _jsx(Draggable, { container: () => overlayRef.current, children: (targetProps, handleProps) => _jsxs("div", { className: classes.card, ...targetProps, style: { width, minWidth, maxWidth, ...targetProps.style }, children: [!!icon &&
                         _jsx("div", { className: classes.icon, children: icon }), _jsxs("div", { className: classes.content, children: [!!(title || showClose) &&
                                 _jsxs("div", { className: classes.titleRow, ...handleProps, children: [_jsx("div", { className: classes.title, children: title }), showClose &&
-                                            _jsx(Button, { shape: "circular", variant: "text", color: "text", ...closeProps, className: classnames(classes.close, closeProps?.className), onClick: closeHandler, children: _jsx(CloseOutlined, {}) })] }), _jsxs("div", { ref: bodyRef, className: classes.body, onScroll: onScroll, children: [!!prefix &&
+                                            _jsx(Button, { shape: "circular", variant: "text", color: "text", ...closeProps, className: clsx(classes.close, closeProps?.className), onClick: closeHandler, children: _jsx(Icon, { icon: faXmark }) })] }), _jsxs("div", { ref: bodyRef, className: classes.body, onScroll: onScroll, children: [!!prefix &&
                                         _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

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

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

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

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

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

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

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

package/dist/esm/components/draggable/draggable.js

@@ -1,22 +1,20 @@
-import { cloneElement, isValidElement, useMemo, useRef, useState } from 'react';
+import { cloneElement, isValidElement, useMemo, useState } from 'react';
 import { range, useDraggableHandle, useSync } from '../../utils';
 export function Draggable({ translateLimit, container, children, ...draggableOptions }) {
     const syncOptions = useSync(draggableOptions);
     const syncTranslateLimit = useSync(translateLimit);
     const syncContainer = useSync(container);
     const [translate, setTranslate] = useState([0, 0]);
-    const startTranslate = useRef([0, 0]);
     const props = children.props;
     const draggableHandle = useDraggableHandle({
         ...draggableOptions,
         onDragStart(e) {
             syncOptions.current.onDragStart?.(e);
-            startTranslate.current = [...translate];
+            return [...translate];
         },
         onDrag(info, e) {
             syncOptions.current.onDrag?.(info, e);
-            const { deltaX, deltaY } = info;
-            const [startX, startY] = startTranslate.current;
+            const { deltaX, deltaY, startData: [startX, startY] } = info;
             let newX = startX + deltaX;
             let newY = startY + deltaY;
             if (syncTranslateLimit.current) {

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

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import { classes, useStyle } from './drawer.style';
-import { classnames, useControlled } from '../../utils';
+import { clsx, useControlled } from '../../utils';
 import { OverlayBase } from '../overlayBase';
 import { Button } from '../button';
-import { DoubleRightOutlined } from '@ant-design/icons';
 import { Slide } from '../transitionBase';
+import { Icon } from '../..';
+import { faAnglesRight } from '@fortawesome/free-solid-svg-icons/faAnglesRight';
 const placementToDirection = {
     left: 'right',
     right: 'left',
@@ -45,12 +46,14 @@ export function Drawer({ title, footer, showClose = true, size = { xs: '100%', s
         }
         return;
     }, [innerOpen.current]);
-    return (_jsx(OverlayBase, { ...props, css: useStyle({ size: typeof size === 'object' ? size : { xs: size } }), className: classnames(classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-placement": placement, children: _jsx(Slide, { direction: placementToDirection[placement], ...slideProps, in: innerOpen.current, className: classnames(classes.drawer, slideProps?.className), children: _jsxs("div", { className: classes.drawerWrap, children: [!!(title || showClose) &&
+    return (_jsx(OverlayBase, { ...props, css: useStyle({ size: typeof size === 'object' ? size : { xs: size } }), className: clsx(classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-placement": placement, children: _jsx(Slide, { direction: placementToDirection[placement], ...slideProps, in: innerOpen.current, className: clsx(classes.drawer, slideProps?.className), children: _jsxs("div", { className: classes.drawerWrap, children: [!!(title || showClose) &&
                         _jsxs("div", { className: classes.titleRow, children: [_jsx("div", { className: classes.title, children: title }), showClose &&
-                                    _jsx(Button, { className: classes.close, shape: "circular", variant: "text", color: "text", onClick: closeHandler, children: _jsx(DoubleRightOutlined, { rotate: {
-                                                left: 180,
-                                                right: 0,
-                                                top: -90,
-                                                bottom: 90
-                                            }[placement] }) })] }), _jsx("div", { ref: bodyRef, className: classes.body, onScroll: onScroll, children: _jsx("div", { ref: bodyWrapRef, className: classes.bodyWrap, children: props.children }) })] }) }) }));
+                                    _jsx(Button, { className: classes.close, shape: "circular", variant: "text", color: "text", onClick: closeHandler, children: _jsx(Icon, { icon: faAnglesRight, style: {
+                                                rotate: {
+                                                    left: '180deg',
+                                                    right: '0',
+                                                    top: '-90deg',
+                                                    bottom: '90deg',
+                                                }[placement]
+                                            } }) })] }), _jsx("div", { ref: bodyRef, className: classes.body, onScroll: onScroll, children: _jsx("div", { ref: bodyWrapRef, className: classes.bodyWrap, children: props.children }) })] }) }) }));
 }

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

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