@canlooks/can-ui 0.0.1

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

@@ -0,0 +1,54 @@
+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 { Form, FormItem } from '../form';
+import { classes } from './curd.style';
+import { classnames, cloneRef, columnsToFilterItem } from '../../utils';
+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) => {
+    const { spacing } = useTheme();
+    const items = useMemo(() => {
+        return columnsToFilterItem(columns);
+    }, [columns]);
+    /**
+     * --------------------------------------------------------------
+     * 收起与展开
+     */
+    const firstItemRef = useRef(null);
+    const [expanded, setExpanded] = useState(false);
+    const renderedGrid = (_jsx(Grid, { className: classes.filterGrid, columnGap: spacing[8], children: items?.map((item, i) => isValidElement(item)
+            ? item
+            : _jsx(FormItem, { span: { xs: 12, md: 6, lg: 4 }, ...item, wrapperRef: !i ? firstItemRef : void 0 }, i)) }));
+    /**
+     * --------------------------------------------------------------
+     * 触发筛选
+     */
+    const formRef = useRef(null);
+    const clickHandler = (e) => {
+        buttonProps?.onClick?.(e);
+        const filterValue = formRef.current.getFormValue();
+        onFilter?.(filterValue);
+        renderConditions && setFilteredConditions(filterValue);
+    };
+    const changeHandler = (field, value, formValue) => {
+        props.onChange?.(field, value, formValue);
+        !showButton && onFilter?.(formValue);
+        renderConditions && setFilteredConditions(formValue);
+    };
+    /**
+     * --------------------------------------------------------------
+     * 已生效的筛选条件
+     */
+    const [filteredConditions, setFilteredConditions] = useState({});
+    return (_jsxs(_Fragment, { children: [_jsx(Form, { ...props, ref: cloneRef(ref, formRef), className: classnames(classes.filter, props.className), columnCount: columnCount, variant: "plain", onChange: changeHandler, children: !!items?.length &&
+                    _jsxs(_Fragment, { children: [expandable
+                                ? _jsx(Collapse, { className: classes.filterGridContainer, in: expanded, collapsedSize: () => firstItemRef.current?.offsetHeight || 56, appear: false, children: renderedGrid })
+                                : renderedGrid, (expandable || showButton) &&
+                                _jsxs("div", { className: classes.filterControl, children: [expandable &&
+                                            _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/curd/curdResizable.d.ts

@@ -0,0 +1,6 @@
+import { Dispatch, SetStateAction } from 'react';
+import { Size } from '../../../types';
+export declare const CurdResizable: import("react").MemoExoticComponent<({ innerSize, setInnerSize }: {
+    innerSize: Size;
+    setInnerSize: Dispatch<SetStateAction<Size>>;
+}) => import("@emotion/react/jsx-runtime").JSX.Element>;

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { memo } from 'react';
+import { Tooltip } from '../tooltip';
+import { Bubble } from '../bubble';
+import { MenuItem } from '../menuItem';
+import { Button } from '../button';
+import { ColumnHeightOutlined } from '@ant-design/icons';
+export const CurdResizable = memo(({ innerSize, setInnerSize }) => {
+    return (_jsx(Tooltip, { title: "\u8868\u683C\u5C3A\u5BF8", children: _jsx(Bubble, { placement: "bottom", content: _jsxs(_Fragment, { children: [_jsx(MenuItem, { value: "small", label: "\u5C0F", selected: innerSize === 'small', onClick: () => setInnerSize('small') }), _jsx(MenuItem, { value: "medium", label: "\u4E2D", selected: innerSize === 'medium', onClick: () => setInnerSize('medium') }), _jsx(MenuItem, { value: "large", label: "\u5927", selected: innerSize === 'large', onClick: () => setInnerSize('large') })] }), children: _jsx(Button, { shape: "circular", variant: "text", color: "text", children: _jsx(ColumnHeightOutlined, {}) }) }) }));
+});

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

@@ -0,0 +1,4 @@
+export * from './curd';
+export * from './curdDialog';
+export * from './curdFilter';
+export * from './curdResizable';

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

@@ -0,0 +1,4 @@
+export * from './curd';
+export * from './curdDialog';
+export * from './curdFilter';
+export * from './curdResizable';

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

@@ -0,0 +1,123 @@
+import { ReactElement, ReactNode } from 'react';
+import { DIVProps, Id, Obj } from '../../../types';
+import { FieldPath } from '../../utils';
+import { TableProps } from '../table';
+import { PaginationProps } from '../pagination';
+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'> {
+    title?: ReactNode;
+    /** 若不指定key，默认使用{@link field}作为key */
+    key?: string | number;
+    /** 是否将列黏性固定在左侧，若指定number|string类型，表示left的值 */
+    sticky?: boolean | number | string;
+    children?: ColumnType<R>[];
+    /** 指定children后，下列属性均不生效 */
+    field?: FieldPath;
+    render?(row: R, index?: number, rows?: R[]): ReactNode;
+    /** 指定为true时表示使用服务端排序，组件只做样式处理，不做数据排序处理；本地排序需指定 “正序” 的排序方法，倒序会自动处理 */
+    sorter?: boolean | ((a: R, b: R) => number);
+    /** @private 内部使用 */
+    _key?: string | number;
+    /** @private 内部使用 */
+    _colSpan?: number;
+    /** @private 内部使用 */
+    _negativeRowSpan?: number;
+}
+type DataGridSharedProps<R extends RowType> = {
+    /** 数据的主键名，@default "id" */
+    primaryKey?: keyof R;
+    /**
+     * 当数据中存在该字段，则会渲染可展开的子行；
+     * children允许的值类型 @type {R[] | ReactNode | ((parent: R, expanded: boolean) => ReactNode)}
+     */
+    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 */
+    clickRowToSelect?: boolean;
+    selectorProps?(row: R, index: number, rows: R[]): CheckboxProps | RadioProps;
+};
+export type OrderType = 'ascend' | 'descend';
+export interface DataGridBaseProps<R extends RowType> extends DataGridSharedProps<R>, Omit<DIVProps, 'defaultValue' | 'onChange'> {
+    columns?: (ColumnType<R> | symbol)[];
+    rows?: R[];
+    defaultOrderColumn?: Id;
+    orderColumn?: Id;
+    defaultOrderType?: OrderType;
+    orderType?: OrderType;
+    onOrderChange?(orderColumn: Id, orderType: OrderType): void;
+    selectable?: boolean;
+    /**
+     * 行之间的关系
+     * @enum {"dependent"}：会自动判断子父行的选中关系。
+     * @enum {"standalone"}：所有行相互独立
+     * @default "dependent"
+     */
+    relation?: SelectionContextProps<R>['relation'];
+    integration?: SelectionContextProps<R>['integration'];
+    /** 是否允许全选，@default true */
+    allowSelectAll?: boolean;
+    defaultExpanded?: Id[];
+    expanded?: Id[];
+    onExpandedChange?(expanded: Id[], key: Id, isExpand: boolean): void;
+    loading?: boolean;
+    /** 是否内置翻页，@default true */
+    paginatable?: boolean;
+    paginationProps?: PaginationProps;
+    renderPagination?(props: PaginationProps): ReactNode;
+    /** 传递给<Table />的属性 */
+    bordered?: boolean;
+    striped?: boolean;
+    tableProps?: TableProps;
+}
+export interface DataGridSingleProps<R extends RowType, V extends Id = Id> extends DataGridBaseProps<R> {
+    multiple?: false;
+    defaultValue?: V;
+    value?: V;
+    onChange?(value: V): void;
+}
+export interface DataGridMultipleProps<R extends RowType, V extends Id = Id> extends DataGridBaseProps<R> {
+    multiple: true;
+    defaultValue?: V[];
+    value?: V[];
+    onChange?(value: V[]): void;
+}
+export type DataGridProps<R extends RowType, V extends Id = Id> = DataGridSingleProps<R, V> | DataGridMultipleProps<R, V>;
+export interface DataGridContext<R extends RowType> extends DataGridSharedProps<R> {
+    flattedColumns?: (ColumnType<R> | symbol)[];
+    expandedSet?: Set<Id>;
+    toggleExpanded?(key: Id): void;
+    multiple?: boolean;
+    innerValue?: Id | Id[];
+    toggleSelected?(key: Id): void;
+}
+export declare function useDataGridContext(): {
+    flattedColumns?: (symbol | ColumnType<RowType>)[] | undefined;
+    toggleExpanded?(key: Id): void;
+    multiple?: boolean;
+    innerValue?: Id | Id[];
+    toggleSelected?(key: Id): void;
+    /**
+     * 当数据中存在该字段，则会渲染可展开的子行；
+     * children允许的值类型 @type {R[] | ReactNode | ((parent: R, expanded: boolean) => ReactNode)}
+     */
+    childrenKey?: keyof RowType | undefined;
+    renderExpandIcon?(key: Id, isExpand: boolean, expanded: Id[]): ReactNode;
+    rowProps?(row: RowType, index: number, rows: RowType[]): JSX.IntrinsicElements["tr"];
+    /** 点击行时是否触发选中，@default true */
+    clickRowToSelect?: boolean;
+    selectorProps?(row: RowType, index: number, rows: RowType[]): CheckboxProps | RadioProps;
+    primaryKey: keyof RowType;
+    indent: number;
+    expandedSet: Set<Id>;
+};
+export declare const DataGrid: {
+    <R extends RowType, V extends Id = Id>(props: DataGridProps<R, V>): ReactElement;
+    EXPAND_COLUMN: symbol;
+    SELECT_COLUMN: symbol;
+};
+export {};

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

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { createContext, forwardRef, memo, useContext, useMemo } from 'react';
+import { classes, style } from './dataGrid.style';
+import { classnames, useControlled, useDataGridColumns } from '../../utils';
+import { Table } from '../table';
+import { DataGridHead } from './dataGridHead';
+import { DataGridRows } from './dataGridRows';
+import { Pagination } from '../pagination';
+import { Loading } from '../loading';
+import { Placeholder } from '../placeholder';
+import { SelectionContext, useSelectionContext } from '../selectionContext';
+const dataGridContext = createContext({});
+export function useDataGridContext() {
+    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) => {
+    const { inSelection, disabled } = useSelectionContext();
+    // 在SelectionContext内，且未disabled，需要默认打开selectable
+    selectable ??= inSelection && !disabled;
+    const { completedColumns, columnMapByKey, flattedColumns } = useDataGridColumns({
+        columns, selectable, childrenKey
+    });
+    /**
+     * ---------------------------------------------------------------
+     * 行排序
+     */
+    const [innerOrderColumn, setInnerOrderColumn] = useControlled(defaultOrderColumn, orderColumn);
+    const [innerOrderType, setInnerOrderType] = useControlled(defaultOrderType, orderType);
+    const orderChangeHandler = (orderColumn, orderType) => {
+        onOrderChange?.(orderColumn, orderType);
+        setInnerOrderColumn(orderColumn);
+        setInnerOrderType(orderType);
+    };
+    const orderedRows = useMemo(() => {
+        if (!innerOrderColumn.current) {
+            return rows;
+        }
+        const orderingColumn = columnMapByKey.get(innerOrderColumn.current);
+        if (!orderingColumn?.sorter || typeof orderingColumn.sorter !== 'function') {
+            return rows;
+        }
+        return rows?.toSorted((a, b) => {
+            const ret = orderingColumn.sorter(a, b);
+            return innerOrderType.current === 'ascend' ? ret : -ret;
+        });
+    }, [rows, innerOrderColumn.current, innerOrderType.current]);
+    /**
+     * ---------------------------------------------------------------
+     * 分页
+     */
+    const [innerPage, setInnerPage] = useControlled(paginationProps.defaultPage ?? 1, paginationProps.page, paginationProps.onPageChange);
+    const [innerPageSize, setInnerPageSize] = useControlled(paginationProps.defaultPageSize ?? 10, paginationProps.pageSize, paginationProps.onPageSizeChange);
+    const pageChangeHandler = (page, pageSize) => {
+        paginationProps.onChange?.(page, pageSize);
+        setInnerPage(page);
+        setInnerPageSize(pageSize);
+    };
+    const _paginationProps = {
+        total: rows?.length,
+        ...paginationProps,
+        page: innerPage.current,
+        pageSize: innerPageSize.current,
+        onChange: pageChangeHandler
+    };
+    const paginatedRows = useMemo(() => {
+        if (!paginatable) {
+            return orderedRows;
+        }
+        const { page, pageSize } = _paginationProps;
+        return orderedRows?.slice((page - 1) * pageSize, page * pageSize);
+    }, [orderedRows, _paginationProps.page, _paginationProps.pageSize]);
+    /**
+     * ---------------------------------------------------------------
+     * 展开行
+     */
+    const [innerExpanded, setInnerExpanded] = useControlled(defaultExpanded, expanded);
+    const expandedSet = useMemo(() => {
+        return new Set(innerExpanded.current);
+    }, [innerExpanded.current]);
+    const toggleExpanded = (key) => {
+        const currentExpanded = expandedSet.has(key);
+        setInnerExpanded(o => {
+            const newExpanded = currentExpanded
+                ? o.filter(v => v !== key)
+                : [...o, key];
+            onExpandedChange?.(newExpanded, key, !currentExpanded);
+            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(() => ({
+                                        primaryKey, childrenKey, flattedColumns, rowProps, clickRowToSelect,
+                                        indent, expandedSet, toggleExpanded, multiple
+                                    }), [
+                                        primaryKey, childrenKey, flattedColumns, rowProps, clickRowToSelect,
+                                        indent, expandedSet, multiple
+                                    ]), children: paginatedRows?.length
+                                        ? _jsx(DataGridRows, { rows: paginatedRows })
+                                        : _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

@@ -0,0 +1,16 @@
+export declare const classes: {
+    children: string;
+    sub: string;
+    title: string;
+    container: string;
+    icon: string;
+    sorter: string;
+    expandable: string;
+    expandableWrap: string;
+    selectable: string;
+    subTd: string;
+    empty: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,134 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils/style';
+import Color from 'color';
+export const classes = defineClasses('data-grid', [
+    'container',
+    'title',
+    'sorter',
+    'icon',
+    'expandable',
+    'expandableWrap',
+    'selectable',
+    'sub',
+    'subTd',
+    'children',
+    'empty'
+]);
+export const style = defineCss(({ spacing, mode, gray, text, colors, easing }) => css `
+    max-height: 100%;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    gap: ${spacing[5]}px;
+
+    .${classes.container} {
+        flex: 1;
+        overflow: auto;
+    }
+
+    th[data-sortable=true] {
+        cursor: pointer;
+        transition: background-color .2s ${easing.easeOut};
+
+        &:hover {
+            background-color: ${gray(mode === 'light' ? .05 : .26)};
+        }
+
+        &:active {
+            transition: background-color 0s;
+            background-color: ${gray(mode === 'light' ? .01 : .22)};
+        }
+
+        .${classes.sorter} {
+            display: flex;
+            align-items: center;
+            
+            .${classes.title} {
+                flex: 1;
+            }
+
+            .${classes.icon} {
+                color: ${text.placeholder};
+                transition: translate .2s ${easing.swing};
+            }
+        }
+
+        &[data-ordering=true] {
+            .${classes.icon} {
+                color: ${colors.primary};
+            }
+        }
+
+        &[data-order-type=ascend] {
+            .${classes.icon} {
+                translate: 0 -4px;
+                rotate: 180deg;
+            }
+        }
+
+        &[data-order-type=descend] {
+            .${classes.icon} {
+                translate: 0 4px;
+                rotate: 0deg;
+            }
+        }
+    }
+
+    tr {
+        &[data-selected=true] {
+            background-color: ${Color(colors.primary).alpha(mode === 'light' ? .05 : .1).string()};
+        }
+        
+        &.${classes.sub} {
+            background-color: ${gray(mode === 'light' ? .02 : .22)};
+        }
+
+        .${classes.subTd} {
+            padding: 0;
+            border: none;
+    
+            .${classes.children} {
+                padding: ${spacing[4]}px ${spacing[5]}px;
+                border-bottom: 1px solid ${gray(mode === 'light' ? .12 : .32)};
+            }
+        }
+    }
+
+    th, td {
+        &.${classes.selectable} {
+            width: 0;
+            padding-top: 0;
+            padding-bottom: 0;
+
+            + *:before {
+                display: none;
+            }
+        }
+    }
+
+    tr:not([data-selected=true]) {
+        th, td {
+            &[data-sticky=true] {
+                position: sticky;
+                left: 0;
+                background-color: ${gray(mode === 'light' ? .04 : .24)};
+            }
+        }
+    }
+
+    th[data-sticky=true] {
+        z-index: 2;
+    }
+
+    .${classes.expandable} {
+        padding-top: 0;
+        padding-bottom: 0;
+        padding-left: 0;
+        
+        .${classes.expandableWrap} {
+            display: flex;
+            align-items: center;
+            gap: ${spacing[1]}px;
+        }
+    }
+`);

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

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { DataGridProps, OrderType } from './dataGrid';
+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;
+}
+export declare const DataGridHead: <R extends Obj, V extends Id = Id>(props: DataGridHeadProps<R, V>) => ReactElement;
+export {};

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

@@ -0,0 +1,90 @@
+import { createElement as _createElement } from "@emotion/react";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import { DataGrid } from './dataGrid';
+import { CaretDownFilled } from '@ant-design/icons';
+import { classes } from './dataGrid.style';
+import { Tooltip } from '../tooltip';
+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 allSelectionStatus = useMemo(() => {
+        if (multiple && allowSelectAll) {
+            const sum = rows?.reduce((prev, row) => {
+                const status = selectionStatus?.get(row[primaryKey]) || 0;
+                return prev + status;
+            }, 0) || 0;
+            return sum === 0 ? 0 : sum < rows.length * 2 ? 1 : 2;
+        }
+        return 0;
+    }, [innerValue?.current, multiple, allowSelectAll]);
+    const checkboxChangeHandler = (e) => {
+        setInnerValue(e.target.checked
+            ? rows?.flatMap(r => {
+                return r[primaryKey] ?? [];
+            }) || []
+            : []);
+    };
+    const renderHead = () => {
+        if (!columns) {
+            return;
+        }
+        let allRows = 1;
+        const headRows = [];
+        const fn = (arr, parents = []) => {
+            let colSpan = 0;
+            arr?.forEach(col => {
+                if (typeof col !== 'symbol') {
+                    col._colSpan = fn(col.children, [...parents, col]) || 1;
+                    colSpan += col._colSpan;
+                    if (col.children?.length) {
+                        col['data-grouped'] = 'true';
+                        col.rowSpan = 1;
+                    }
+                    else {
+                        col._negativeRowSpan = col.children?.length ? 1 : parents.length;
+                    }
+                    if (parents.length + 1 > allRows) {
+                        allRows = parents.length + 1;
+                    }
+                }
+                headRows[parents.length] ||= [];
+                headRows[parents.length].push(col);
+            });
+            return colSpan;
+        };
+        fn(columns);
+        return headRows.map((cols, i) => _jsx("tr", { children: cols.flatMap((col, j) => {
+                if (typeof col === 'symbol') {
+                    return col === DataGrid.EXPAND_COLUMN
+                        ? []
+                        : _jsx("th", { className: classes.selectable, children: multiple && allowSelectAll &&
+                                _jsx(Checkbox, { checked: allSelectionStatus === 2, indeterminate: allSelectionStatus === 1, onChange: checkboxChangeHandler }) }, j + '_selectable');
+                }
+                const { 
+                // 排除无需加入dom节点的属性
+                title, _key, key, field, render, sorter, sticky, _colSpan, _negativeRowSpan, ...colProps } = col;
+                const isOrderingColumn = orderColumn === _key;
+                const currentOrderType = isOrderingColumn ? orderType : 'descend';
+                const renderedTh = (_createElement("th", { colSpan: _colSpan, rowSpan: allRows - (_negativeRowSpan || 0), ...colProps, key: _key ?? j, "data-sortable": !!sorter, "data-ordering": isOrderingColumn, "data-order-type": currentOrderType, "data-sticky": typeof sticky !== 'undefined', style: {
+                        ...typeof sticky === 'number' && { left: sticky },
+                        ...colProps.style
+                    }, onClick: e => {
+                        colProps.onClick?.(e);
+                        sorter && !isUnset(_key) && onOrderChange?.(_key, currentOrderType === 'descend' ? 'ascend' : 'descend');
+                    } }, sorter
+                    ? _jsxs("div", { className: classes.sorter, children: [_jsx("div", { className: classes.title, children: title }), _jsx(CaretDownFilled, { className: classes.icon })] })
+                    : title));
+                return [
+                    sorter
+                        ? _jsx(Tooltip, { title: currentOrderType === 'descend'
+                                ? '点击升序'
+                                : '点击降序', children: renderedTh }, _key)
+                        : renderedTh
+                ];
+            }) }, i));
+    };
+    return (_jsx("thead", { children: renderHead() }));
+});

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

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

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

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { createElement as _createElement } from "@emotion/react";
+import { memo } from 'react';
+import { DataGrid, useDataGridContext } from './dataGrid';
+import { classnames, isUnset, renderCell } from '../../utils';
+import { classes } from './dataGrid.style';
+import { MinusSquareOutlined, PlusSquareOutlined } from '@ant-design/icons';
+import { Button } from '../button';
+import { Collapse } from '../transitionBase';
+import { Checkbox } from '../checkbox';
+import { Radio } from '../radio';
+import { useSelectionContext } from '../selectionContext';
+export const DataGridRows = memo(({ rows, _level = 0 }) => {
+    const { primaryKey, childrenKey, flattedColumns, rowProps, clickRowToSelect, indent, expandedSet, toggleExpanded, renderExpandIcon, multiple } = useDataGridContext();
+    const { toggleSelected, selectionStatus } = useSelectionContext();
+    return rows?.flatMap((row, i, arr) => {
+        const trKey = row[primaryKey];
+        const _rowProps = rowProps?.(row, i, arr);
+        const status = selectionStatus?.get(trKey);
+        const children = childrenKey && row[childrenKey];
+        const expandable = !isUnset(children) && children !== false;
+        const currentExpanded = expandable && expandedSet.has(trKey);
+        let expandableIndex = -2;
+        const ret = [
+            _createElement("tr", { ..._rowProps, key: trKey, className: classnames(_rowProps, _level > 0 && classes.sub), onClick: e => {
+                    _rowProps?.onClick?.(e);
+                    clickRowToSelect && toggleSelected(trKey, row);
+                }, "data-selected": status === 2 }, flattedColumns?.flatMap((col, j) => {
+                if (typeof col === 'symbol') {
+                    if (col === DataGrid.EXPAND_COLUMN) {
+                        expandableIndex = j;
+                        return [];
+                    }
+                    // col === DataGrid.SELECT_COLUMN
+                    if (expandableIndex === j - 1) {
+                        // select column紧跟在expand column后面，需要顺延expandableIndex
+                        expandableIndex = j;
+                    }
+                    const Component = multiple ? Checkbox : Radio;
+                    return (_jsx("td", { className: classes.selectable, children: _jsx(Component, { checked: status === 2, indeterminate: status === 1, onChange: () => toggleSelected(trKey, row), onClick: e => e.stopPropagation() }) }, j + '_selectable'));
+                }
+                const { 
+                // 排除无需加入dom节点的属性
+                title, _key, key, field, render, sorter, sticky, _colSpan, _negativeRowSpan, ..._colProps } = col;
+                const renderedContent = renderCell({ render, field }, row, i, arr);
+                const shouldRenderExpand = expandableIndex === j - 1;
+                return (_createElement("td", { ..._colProps, key: _key ?? j, className: shouldRenderExpand ? classes.expandable : void 0, "data-sticky": typeof sticky !== 'undefined', style: typeof sticky === 'number' ? { left: sticky } : void 0 }, shouldRenderExpand
+                    ? _jsxs("div", { className: classes.expandableWrap, style: { paddingLeft: _level * indent }, children: [_jsx(Button, { variant: "text", shape: "circular", color: "disabled", onClick: () => toggleExpanded?.(trKey), style: expandable ? void 0 : { visibility: 'hidden' }, children: renderExpandIcon
+                                    ? renderExpandIcon(trKey, currentExpanded, [...expandedSet])
+                                    : currentExpanded
+                                        ? _jsx(MinusSquareOutlined, {})
+                                        : _jsx(PlusSquareOutlined, {}) }), renderedContent] })
+                    : renderedContent));
+            }))
+        ];
+        if (Array.isArray(children)) {
+            currentExpanded && ret.push(_jsx(DataGridRows, { rows: children, _level: _level + 1 }, trKey + '_children'));
+        }
+        else if (expandable) {
+            ret.push(_jsx("tr", { className: classes.sub, children: _jsx("td", { className: classes.subTd, colSpan: flattedColumns?.length || 1, children: _jsx(Collapse, { in: currentExpanded, children: _jsx("div", { className: classes.children, children: typeof children === 'function'
+                                ? children(row, currentExpanded)
+                                : children }) }) }) }, trKey + '_children'));
+        }
+        return ret;
+    });
+});

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

@@ -0,0 +1 @@
+export * from './dataGrid';

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

@@ -0,0 +1 @@
+export * from './dataGrid';