@canlooks/can-ui 0.0.20 → 0.0.22

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import { DataGrid } from '../dataGrid';
 import { CurdFilter } from './curdFilter';
 import { classes, style } from './curd.style';
@@ -15,7 +15,7 @@ import { CurdDialog } from './curdDialog';
 import { useAppContext } from '../app';
 import { BubbleConfirm } from '../bubbleConfirm';
 import { useSelectionContext } from '../selectionContext';
-export const Curd = memo(forwardRef((props, ref) => {
+export const Curd = memo((props) => {
     const { wrapperProps, wrapperRef, variant = 'standard', loadRows, columns, toolbarLeft, toolbarRight, reloadable = true, onReload, resizable = true, columnConfigurable = true, filterProps, filterRef, initialFilterValue, onFilter, renderFilter, copyable, creatable = true, updatable = true, deletable = true, createButtonProps, updateButtonProps, deleteButtonProps, deleteConfirmProps, controlColumnTitle = '操作', renderExtraControl, titleKey, dataName = '', createName = '添加', updateName = '编辑', deleteName = '删除', onCreate, onUpdate, onDelete, postData, dialogProps, formProps, formRef, onChange, ...dataGridProps } = props;
     /**
      * -------------------------------------------------------------
@@ -86,13 +86,13 @@ export const Curd = memo(forwardRef((props, ref) => {
      * -------------------------------------------------------------
      * 行数据
      */
-    const { setInnerOptions } = useSelectionContext();
+    const { setOptions } = useSelectionContext();
     const [innerRows, _setInnerRows] = useDerivedState(props.rows);
     useEffect(() => {
-        innerRows.current?.length && setInnerOptions?.(innerRows.current);
+        innerRows.current?.length && setOptions?.(innerRows.current);
     }, []);
     const setInnerRows = (data) => {
-        setInnerOptions?.(data);
+        setOptions?.(data);
         _setInnerRows(data);
     };
     const [innerTotal, setInnerTotal] = useDerivedState(props.paginationProps?.total || 0);
@@ -128,7 +128,7 @@ export const Curd = memo(forwardRef((props, ref) => {
      * 弹窗与曾删改部分
      */
     const curdDialogRef = useRef(null);
-    const activeRow = useRef();
+    const activeRow = useRef(void 0);
     const createHandler = (e) => {
         createButtonProps?.onClick?.(e);
         activeRow.current = void 0;
@@ -171,14 +171,14 @@ export const Curd = memo(forwardRef((props, ref) => {
                                     _jsxs(Button, { prefix: _jsx(PlusOutlined, {}), ...createButtonProps, onClick: createHandler, children: [createName, dataName] }), toolbarLeft] }), _jsxs("div", { className: classes.toolbarRight, children: [!!toolbarRight &&
                                     _jsxs(_Fragment, { children: [toolbarRight, _jsx(Divider, { className: classes.divider, orientation: "vertical" })] }), reloadable &&
                                     _jsx(Tooltip, { title: "\u5237\u65B0", children: _jsx(Button, { shape: "circular", variant: "text", color: "text", prefix: _jsx(ReloadOutlined, {}), loading: innerLoading.current, onClick: reloadHandler }) }), resizable &&
-                                    _jsx(CurdResizable, { innerSize: innerSize.current, setInnerSize: setInnerSize }), !!columnConfigurable &&
-                                    _jsx(CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder })] })] }), _jsx("div", { className: classes.card, children: _jsx(DataGrid, { ...dataGridProps, ref: ref, columns: actualColumns, tableProps: {
+                                    _jsx(CurdResizable, { innerSize: innerSize.current, setInnerSize: setInnerSize }), columnConfigurable &&
+                                    _jsx(CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder })] })] }), _jsx("div", { className: classes.card, children: _jsx(DataGrid, { ...dataGridProps, columns: actualColumns, tableProps: {
                         ...props.tableProps,
                         ...resizable && { size: innerSize.current }
                     }, loading: innerLoading.current, rows: innerRows.current, paginatable: !loadRows && props.paginatable, renderPagination: loadRows && props.paginatable !== false
                         ? () => _jsx(Pagination, { ...props.paginationProps, total: innerTotal.current, page: innerPage.current, onPageChange: setInnerPage, pageSize: innerPageSize.current, onPageSizeChange: setInnerPageSize })
                         : props.renderPagination, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler }) }), (creatable || updatable) &&
                 _jsx(CurdDialog, { ...dialogProps, ref: curdDialogRef, onFinish: finishHandler, curdProps: props })] }));
-}));
+});
 Curd.Filter = CurdFilter;
 Curd.CONTROL_COLUMN = Symbol('control-column');

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

@@ -1,8 +1,7 @@
 export declare const classes: {
+    filter: string;
     divider: string;
-    card: string;
     toolbar: string;
-    filter: string;
     filterGridContainer: string;
     filterGrid: string;
     filterItem: string;
@@ -11,6 +10,7 @@ export declare const classes: {
     filteredTitle: string;
     toolbarLeft: string;
     toolbarRight: string;
+    card: string;
     control: string;
     dialogTitle: string;
     copyButton: string;

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

@@ -76,7 +76,7 @@ export const style = defineCss(({ spacing, text, background, borderRadius }) =>
 
     &[data-variant=standard] {
         .${classes.card} {
-            background-color: ${background.card};
+            background-color: ${background.content};
             padding: ${spacing[8]}px;
         }
     }

package/dist/esm/components/curd/curdColumnConfig.style.d.ts

@@ -1,6 +1,6 @@
 export declare const classes: {
-    title: string;
     content: string;
+    title: string;
     checkbox: string;
     item: string;
 } & {

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { Dialog } from '../dialog';
 import { Form, FormItem } from '../form';
 import { Curd } from './curd';
@@ -9,17 +9,17 @@ import { Button } from '../button';
 import { CopyOutlined } from '@ant-design/icons';
 import { classes, dialogStyle } from './curd.style';
 import { PickerDialog } from '../pickerDialog';
-export const CurdDialog = memo(forwardRef(({ onFinish, 
+export const CurdDialog = memo(({ ref, onFinish, 
 // 继承来的属性
-curdProps, ...props }, ref) => {
+curdProps, ...props }) => {
     const { columns, postData, copyable, titleKey, formProps, formRef, dataName = '', createName = '添加', updateName = '编辑' } = curdProps;
     /**
      * ----------------------------------------------------------------
      * ref与promise部分
      */
     const innerFormRef = useRef(null);
-    const resolveFn = useRef();
-    const rejectFn = useRef();
+    const resolveFn = useRef(void 0);
+    const rejectFn = useRef(void 0);
     const [innerOpen, setInnerOpen] = useControlled(props.defaultOpen, props.open);
     const closeHandler = (reason) => {
         if (reason === 'confirmed') {
@@ -92,4 +92,4 @@ curdProps, ...props }, ref) => {
             : _jsxs("div", { className: classes.dialogTitle, children: [_jsxs("span", { children: [createName, dataName] }), copyable &&
                         _jsxs(Button, { variant: "plain", prefix: _jsx(CopyOutlined, {}), onClick: () => pickerDialogRef.current.open(), children: ["\u4ECE\u5DF2\u6709", dataName || '数据', "\u590D\u5236"] })] }), ...props, open: innerOpen.current, onClose: closeHandler, onConfirm: confirmHandler, confirmLoading: innerLoading.current, children: [_jsx(Loading, { loading: transforming.current, children: _jsx(Form, { labelWidth: "20%", ...formProps, ref: cloneRef(formRef, innerFormRef), onFinish: finishHandler, children: renderedFormItems }) }), copyable &&
                 _jsx(PickerDialog, { ref: pickerDialogRef, onToggle: copiedHandler, children: _jsx(Curd, { ...curdProps, variant: "embeded", copyable: false, creatable: false, updatable: false, deletable: false }) })] }));
-}));
+});

package/dist/esm/components/curd/curdFilter.d.ts

@@ -6,7 +6,7 @@ import { RowType } from '../dataGrid';
 export interface CurdFilterProps<R extends RowType, F extends FormValue = FormValue> extends Omit<FormProps<F>, 'variant'>, Pick<CurdBaseProps<R, F>, 'columns'> {
     /** 筛选项是否可收起与展开，若开启此功能，需保证每项的高度一致，否则可能出现样式问题 */
     expandable?: boolean;
-    /** 是否显示"筛选"按钮，若为false，则每次触发onChange的同时会触发onFilter，若为true，则onFilter只会在点击按钮时触发，@default false */
+    /** 是否显示"筛选"按钮，若为false，则每次触发onChange的同时会触发onFilter，若为true，则onFilter只会在点击按钮时触发，默认为false */
     showButton?: boolean;
     /** 是否显示已生效的筛选条件 */
     renderConditions?(filterValue: F, formInstance: FormRef<F> | null): ReactNode;

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-import { forwardRef, isValidElement, memo, useMemo, useRef, useState } from 'react';
+import { isValidElement, memo, useMemo, useRef, useState } from 'react';
 import { Form, FormItem } from '../form';
 import { classes } from './curd.style';
 import { classnames, cloneRef, columnsToFilterItem } from '../../utils';
@@ -7,8 +7,8 @@ import { Grid } from '../grid';
 import { Button } from '../button';
 import { DownOutlined, FilterOutlined } from '@ant-design/icons';
 import { Collapse } from '../transitionBase';
-import { useTheme } from '../app';
-export const CurdFilter = memo(forwardRef(({ columns, expandable, showButton, renderConditions, buttonProps, onFilter, columnCount = 3, ...props }, ref) => {
+import { useTheme } from '../theme';
+export const CurdFilter = memo(({ ref, columns, expandable, showButton, renderConditions, buttonProps, onFilter, columnCount = 3, ...props }) => {
     const { spacing } = useTheme();
     const items = useMemo(() => {
         return columnsToFilterItem(columns);
@@ -51,4 +51,4 @@ export const CurdFilter = memo(forwardRef(({ columns, expandable, showButton, re
                                             _jsx(Button, { variant: "text", suffix: _jsx(DownOutlined, { style: { rotate: expanded ? '180deg' : void 0 } }), onClick: () => setExpanded(o => !o), children: expanded ? '收起' : '展开' }), showButton &&
                                             _jsx(Button, { prefix: _jsx(FilterOutlined, {}), variant: "outlined", ...buttonProps, onClick: clickHandler, children: buttonProps?.children ?? '筛选' })] })] }) }), !!renderConditions &&
                 _jsxs("div", { className: classes.filtered, children: [_jsx("div", { className: classes.filteredTitle, children: "\u5DF2\u7B5B\u9009\uFF1A" }), renderConditions(filteredConditions, formRef.current)] })] }));
-}));
+});

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

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 import { DIVProps, Id, Obj } from '../../../types';
 import { FieldPath } from '../../utils';
 import { TableProps } from '../table';
@@ -7,7 +7,7 @@ import { SelectionContextProps } from '../selectionContext';
 import { CheckboxProps } from '../checkbox';
 import { RadioProps } from '../radio';
 export type RowType = Obj;
-export interface ColumnType<R extends RowType = RowType> extends Omit<JSX.IntrinsicElements['td'], 'key' | 'ref' | 'title' | 'children'>, Omit<JSX.IntrinsicElements['th'], 'key' | 'ref' | 'title' | 'children'> {
+export interface ColumnType<R extends RowType = RowType> extends Omit<React.JSX.IntrinsicElements['td'], 'key' | 'ref' | 'title' | 'children'>, Omit<React.JSX.IntrinsicElements['th'], 'key' | 'ref' | 'title' | 'children'> {
     title?: ReactNode;
     /** 若不指定key，默认使用{@link field}作为key */
     key?: string | number;
@@ -27,7 +27,7 @@ export interface ColumnType<R extends RowType = RowType> extends Omit<JSX.Intrin
     _negativeRowSpan?: number;
 }
 type DataGridSharedProps<R extends RowType> = {
-    /** 数据的主键名，@default "id" */
+    /** 数据的主键名，默认为"id" */
     primaryKey?: keyof R;
     /**
      * 当数据中存在该字段，则会渲染可展开的子行；
@@ -36,8 +36,8 @@ type DataGridSharedProps<R extends RowType> = {
     childrenKey?: keyof R;
     indent?: number;
     renderExpandIcon?(key: Id, isExpand: boolean, expanded: Id[]): ReactNode;
-    rowProps?(row: R, index: number, rows: R[]): JSX.IntrinsicElements['tr'];
-    /** 点击行时是否触发选中，@default true */
+    rowProps?(row: R, index: number, rows: R[]): React.JSX.IntrinsicElements['tr'];
+    /** 点击行时是否触发选中，默认为true */
     clickRowToSelect?: boolean;
     selectorProps?(row: R, index: number, rows: R[]): CheckboxProps | RadioProps;
 };
@@ -55,17 +55,17 @@ export interface DataGridBaseProps<R extends RowType> extends DataGridSharedProp
      * 行之间的关系
      * @enum {"dependent"}：会自动判断子父行的选中关系。
      * @enum {"standalone"}：所有行相互独立
-     * @default "dependent"
+     * 默认为"dependent"
      */
     relation?: SelectionContextProps<R>['relation'];
     integration?: SelectionContextProps<R>['integration'];
-    /** 是否允许全选，@default true */
+    /** 是否允许全选，默认为true */
     allowSelectAll?: boolean;
     defaultExpanded?: Id[];
     expanded?: Id[];
     onExpandedChange?(expanded: Id[], key: Id, isExpand: boolean): void;
     loading?: boolean;
-    /** 是否内置翻页，@default true */
+    /** 是否内置翻页，默认为true */
     paginatable?: boolean;
     paginationProps?: PaginationProps;
     renderPagination?(props: PaginationProps): ReactNode;
@@ -107,8 +107,8 @@ export declare function useDataGridContext(): {
      */
     childrenKey?: keyof RowType | undefined;
     renderExpandIcon?(key: Id, isExpand: boolean, expanded: Id[]): ReactNode;
-    rowProps?(row: RowType, index: number, rows: RowType[]): JSX.IntrinsicElements["tr"];
-    /** 点击行时是否触发选中，@default true */
+    rowProps?(row: RowType, index: number, rows: RowType[]): React.JSX.IntrinsicElements["tr"];
+    /** 点击行时是否触发选中，默认为true */
     clickRowToSelect?: boolean;
     selectorProps?(row: RowType, index: number, rows: RowType[]): CheckboxProps | RadioProps;
     primaryKey: keyof RowType;

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;
+    icon: string;
     title: string;
     container: string;
-    icon: 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.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/dateTimePicker/calendar.d.ts

@@ -2,7 +2,7 @@ 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

@@ -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

@@ -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,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 import { Obj, ResponsiveProp, Size } from '../../../types';
 import { GridProps } from '../grid';
 import { DescriptionItem, DescriptionItemProps } from './descriptionItem';
@@ -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;