@qsxy/element-plus-react 1.0.2 → 2.0.0

package/dist/TableV2/src/table.d.ts

@@ -0,0 +1,196 @@
+import { IconSize } from "../../Icon/typings";
+import React, { CSSProperties } from 'react';
+import { GridDefaultSlotParams } from '../../VirtualList';
+import type { SortOrder } from './constants';
+import { TableV2GridProps } from './grid';
+import { RowEventHandlers, RowExpandParams } from './row';
+import type { Column, ColumnCommonParams, KeyType, RowCommonParams, SortState } from './types';
+/**
+ * Param types
+ */
+export type ColumnSortParams<T> = {
+    column: Column<T>;
+    key: KeyType;
+    order: SortOrder;
+};
+/**
+ * Renderer/Getter types
+ */
+export type ExtraCellPropGetter<T> = (params: ColumnCommonParams<T> & RowCommonParams & {
+    cellData: T;
+    rowData: any;
+}) => any;
+export type ExtractHeaderPropGetter<T> = (params: {
+    columns: Column<T>[];
+    headerIndex: number;
+}) => any;
+export type ExtractHeaderCellPropGetter<T> = (params: ColumnCommonParams<T> & {
+    headerIndex: number;
+}) => any;
+export type ExtractRowPropGetter<T> = (params: {
+    columns: Column<T>[];
+} & RowCommonParams) => any;
+export type HeaderClassNameGetter<T> = (params: {
+    columns: Column<T>[];
+    headerIndex: number;
+}) => string;
+export type RowClassNameGetter<T> = (params: {
+    columns: Column<T>[];
+} & RowCommonParams) => string;
+/**
+ * Handler types
+ */
+export type ColumnSortHandler<T> = (params: ColumnSortParams<T>) => void;
+export type ColumnResizeHandler<T> = (column: Column<T>, width: number) => void;
+export type ExpandedRowsChangeHandler = (expandedRowKeys: KeyType[]) => void;
+export type RowsRenderedParams = {
+    rowCacheStart: number;
+    rowCacheEnd: number;
+    rowVisibleStart: number;
+    rowVisibleEnd: number;
+};
+export type ScrollParams = {
+    xAxisScrollDir?: 'forward' | 'backward';
+    scrollLeft?: number;
+    yAxisScrollDir?: 'forward' | 'backward';
+    scrollTop?: number;
+};
+export type TableV2Props = {
+    /** 为了更好的渲染效果预先多加载的行数 */
+    cache?: number;
+    /** 渲染动态的单元格的预估高度 */
+    estimatedRowHeight?: number;
+    /** header 部分的自定义 class 名 */
+    headerClass?: string | HeaderClassNameGetter<any>;
+    /** header 部分的自定义 props 名 */
+    headerProps?: object | ExtractHeaderPropGetter<any>;
+    /** header cell 部分的自定义 props 名 */
+    headerCellProps?: object | ExtractHeaderCellPropGetter<any>;
+    /** header 的高度由height设置。 如果传入数组，它会使 header row 等于数组长度 */
+    headerHeight?: number | number[];
+    /** footer 的高度，当传入值时，这部分将被计算入 table 的高度里 */
+    footerHeight?: number;
+    /** row wrapper 部分的自定义 class 名 */
+    rowClass?: string | RowClassNameGetter<any>;
+    /** 每行的 key 值，如果不提供，将使用索引 index 代替 */
+    rowKey?: string | symbol | number;
+    /** row component 部分的自定义 class 名 */
+    rowProps?: object | ExtractRowPropGetter<any>;
+    /** 每行的高度, 用于计算表的总高度 */
+    rowHeight?: number;
+    /** 当每行添加了一系列事件处理器时触发 */
+    rowEventHandlers?: RowEventHandlers;
+    /** 每个单元格 cell 的自定义 props (除了 header cell 以外) */
+    cellProps?: object | ExtraCellPropGetter<any>;
+    /** 列 column 的配置数组 */
+    columns: Column<any>[];
+    /** 要在表中渲染的数据数组 */
+    data: any[];
+    /** 一个自定义方法从数据源获取数据 */
+    dataGetter?: (data: any[]) => any[];
+    /** 渲染行在表格主内容上方和 header 下方区域的数据 */
+    fixedData?: any[];
+    /** 列的 key 来标记哪个行可以被展开 */
+    expandColumnKey?: string;
+    /** 存放行展开状态的 key 的数组，可以和 v-model 搭配使用 */
+    expandedRowKeys?: KeyType[];
+    /** 默认展开的行的 key 的数组, 这个数据不是响应式的 */
+    defaultExpandedRowKeys?: KeyType[];
+    /** 表格的类名称，将应用于表格的全部的三个部分 (左、右、主) */
+    className?: string | string[] | object | (() => string | string[] | object);
+    /** 单元格宽度是自适应还是固定 */
+    fixed?: boolean;
+    /** 表格的宽度 */
+    width?: number;
+    /** 表格的高度 */
+    height?: number;
+    /** 表格的最大高度 */
+    maxHeight?: number;
+    /** 树形表的水平缩进 */
+    indentSize?: number;
+    /** 图标大小 */
+    iconSize?: IconSize;
+    /** 水平滚动条的大小，防止水平和垂直滚动条重叠。 */
+    hScrollbarSize?: number;
+    /** 垂直滚动条的大小，防止水平和垂直滚动条重叠。 */
+    vScrollbarSize?: number;
+    /** 滚动条是否总是显示，不论是否滚动 */
+    scrollbarAlwaysOn?: boolean;
+    /** 排序方式 */
+    sortBy?: SortBy;
+    /** 多个排序 */
+    sortState?: SortState;
+    useIsScrolling?: boolean;
+    footer?: React.ReactNode;
+    empty?: React.ReactNode;
+    overlay?: React.ReactNode;
+    headerFormatter?: (props: HeaderSlotProps) => React.ReactNode;
+    rowFormatter?: (props: TableGridRowSlotParams) => React.ReactNode[];
+    cellFormatter?: (props: CellFormatProps<any>) => React.ReactNode;
+    headerCellFormatter?: (props: HeaderCellSlotProps) => React.ReactNode;
+    /** 列排序时调用 */
+    onColumnSort?: ColumnSortHandler<any>;
+    /** 当行被渲染后触发 */
+    onRowsRendered?: (params: RowsRenderedParams) => void;
+    /** 行展开状态改变时触发 */
+    onExpandedRowsChange?: ExpandedRowsChangeHandler;
+    /** 到达表格末尾时触发。 回调包含剩余距离，它通常是滚动条高度。*/
+    onEndReached?: (remainDistance: number) => void;
+    /** 点击箭头图标展开/折叠树节点时触发 */
+    onRowExpand?: (params: RowExpandParams) => void;
+    /** 表格被用户滚动后触发 */
+    onScroll?: (params: ScrollParams) => void;
+};
+export type HeaderSlotProps = {
+    cells: React.ReactNode[];
+    columns: Column<any>[];
+    headerIndex: number;
+};
+export type TableGridRowSlotParams = {
+    columns: TableV2GridProps['columns'];
+    cells: React.ReactNode[];
+    rowData: any;
+} & GridDefaultSlotParams;
+export type RowFormatProps = {
+    cells?: React.ReactNode[];
+    columns: Column<any>[];
+    rowData?: any;
+    columnIndex?: number;
+    rowIndex?: number;
+    data?: any;
+    key?: number | string;
+    isScrolling?: boolean;
+    style?: CSSProperties;
+    depth?: number;
+};
+export type CellFormatProps<T> = {
+    column: Column<T>;
+    columns: Column<T>[];
+    columnIndex: number;
+    depth: number;
+    style: CSSProperties;
+    rowData: any;
+    rowIndex: number;
+    isScrolling: boolean;
+    expandIconProps?: {
+        rowData: any;
+        rowIndex: number;
+        onExpand: (expand: boolean) => void;
+    } | undefined;
+};
+export type SortBy = {
+    key?: KeyType;
+    order?: SortOrder;
+};
+export type HeaderCellSlotProps = {
+    className: string;
+    columns: Column<any>[];
+    column: Column<any>;
+    columnIndex: number;
+    headerIndex: number;
+    style: CSSProperties;
+    headerCellProps?: any;
+    sortBy: SortBy;
+    sortState?: SortState | undefined;
+    onColumnSorted: (e: MouseEvent) => void;
+};

package/dist/TableV2/src/table.js

@@ -0,0 +1 @@
+export {};

package/dist/TableV2/src/tokens.d.ts

@@ -0,0 +1,11 @@
+import { RefObject } from 'react';
+import { UseNamespaceReturn } from '../../hooks/useClassNames';
+export type TableV2Context = {
+    isScrolling: boolean;
+    isResetting: RefObject<boolean>;
+    ns: UseNamespaceReturn;
+    scrollLeft?: number;
+};
+export declare const TableV2Context: import("react").Context<TableV2Context>;
+export declare const TableV2GridScrollLeftContext: import("react").Context<number>;
+export declare const TABLE_V2_GRID_INJECTION_KEY: import("react").Context<TableV2Context>;

package/dist/TableV2/src/tokens.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+export var TableV2Context = /*#__PURE__*/createContext(null);
+
+// Context for grid scroll left position
+export var TableV2GridScrollLeftContext = /*#__PURE__*/createContext(undefined);
+export var TABLE_V2_GRID_INJECTION_KEY = TableV2Context;

package/dist/TableV2/src/types.d.ts

@@ -0,0 +1,94 @@
+import type { ComponentType, CSSProperties, ReactNode } from 'react';
+import type { FixedDir, SortOrder } from './constants';
+export type Alignment = 'left' | 'center' | 'right';
+export type FixedDirection = FixedDir;
+export type KeyType = string | number | symbol;
+/**
+ * Param types
+ */
+export type CellRendererParams<T> = {
+    cellData: T;
+} & RowCommonParams & ColumnCommonParams<T>;
+export type ColumnCommonParams<T> = {
+    columns: Column<T>[];
+    column: Column<T>;
+    columnIndex: number;
+};
+export type HeaderCellRendererParams<T> = {
+    headerIndex: number;
+} & ColumnCommonParams<T>;
+export type RowCommonParams = {
+    rowData: any;
+    rowIndex: number;
+};
+export type ClassNameGetterParams<T> = {
+    cellData: T;
+} & RowCommonParams & ColumnCommonParams<T>;
+export type DataGetterParams<T> = {
+    columns: Column<T>[];
+    column: Column<T>;
+    columnIndex: number;
+} & RowCommonParams;
+export type DataGetter<T> = (params: DataGetterParams<T>) => T;
+export type ClassNameGetter<T> = (params: ClassNameGetterParams<T>) => string;
+export type HeaderClassGetter<T> = (params: ColumnCommonParams<T> & {
+    headerIndex: number;
+}) => string;
+/**
+ * Renderer/Getter types
+ */
+export type CellRenderer<T> = (params: CellRendererParams<T>) => ReactNode;
+export type HeaderCellRenderer<T> = (params: HeaderCellRendererParams<T>) => ReactNode;
+export type Column<T = any> = {
+    /**
+     * Attributes
+     */
+    align?: Alignment;
+    className?: string | ClassNameGetter<T>;
+    key?: KeyType;
+    dataKey?: KeyType;
+    fixed?: true | FixedDirection;
+    flexGrow?: CSSProperties['flexGrow'];
+    flexShrink?: CSSProperties['flexShrink'];
+    title?: string;
+    hidden?: boolean;
+    headerClass?: HeaderClassGetter<T> | string;
+    maxWidth?: number;
+    minWidth?: number;
+    style?: CSSProperties;
+    sortable?: boolean;
+    width?: number;
+    /**
+     * Renderers
+     */
+    cellRenderer?: CellRenderer<T>;
+    headerCellRenderer?: HeaderCellRenderer<T>;
+    /**
+     * Extendable sections
+     */
+    [key: string]: any;
+};
+export type Columns<T> = Column<T>[];
+export type AnyColumns = Columns<any>;
+export type SortBy = {
+    key: KeyType;
+    order: SortOrder;
+};
+export type SortState = {
+    [key: KeyType]: SortOrder;
+};
+export type CustomizedCellsType = ReactNode[];
+export type DefaultCellsType = ReactNode[][];
+export type ColumnCellsType = DefaultCellsType | CustomizedCellsType;
+export type TableV2CustomizedHeaderSlotParam<T = any> = {
+    cells: ReactNode[];
+    columns: Columns<T>;
+    headerIndex: number;
+};
+export type SimpleFunctionalComponentProps<T extends object> = {
+    className?: string;
+    style?: CSSProperties;
+} & T;
+export type SimpleFunctionalComponent<E extends object = {
+    [key: string]: any;
+}> = ComponentType<SimpleFunctionalComponentProps<E>>;

package/dist/TableV2/src/types.js

@@ -0,0 +1 @@
+export {};

package/dist/TableV2/src/use-table.d.ts

@@ -0,0 +1,48 @@
+import { CSSProperties, RefObject } from 'react';
+import { ScrollPos } from './composables';
+import type { TableV2Props } from './table';
+import type { TableGridInstance } from './table-grid';
+import type { AnyColumns, KeyType } from './types';
+interface UseTableReturn {
+    columns: AnyColumns;
+    containerRef: RefObject<HTMLDivElement>;
+    mainTableRef: RefObject<TableGridInstance | null>;
+    leftTableRef: RefObject<TableGridInstance | null>;
+    rightTableRef: RefObject<TableGridInstance | null>;
+    isDynamic: boolean;
+    isResetting: RefObject<boolean>;
+    isScrolling: boolean;
+    hasFixedColumns: number;
+    columnsStyles: Record<KeyType, CSSProperties>;
+    columnsTotalWidth: number;
+    data: any[];
+    expandedRowKeys: KeyType[];
+    depthMap: Record<KeyType, number>;
+    fixedColumnsOnLeft: AnyColumns;
+    fixedColumnsOnRight: AnyColumns;
+    mainColumns: AnyColumns;
+    bodyWidth: number;
+    emptyStyle: CSSProperties;
+    rootStyle: CSSProperties;
+    footerHeight: CSSProperties;
+    mainTableHeight: number;
+    fixedTableHeight: number;
+    leftTableWidth: number;
+    rightTableWidth: number;
+    showEmpty: boolean;
+    getRowHeight: (rowIndex: number) => number;
+    onColumnSorted: (e: MouseEvent) => void;
+    onRowHovered: any;
+    onRowExpanded: any;
+    onRowsRendered: any;
+    onRowHeightChange: any;
+    scrollTo: (params: ScrollPos) => void;
+    scrollToLeft: (scrollLeft: number) => void;
+    scrollToTop: (scrollTop: number) => void;
+    scrollToRow: (row: number, strategy?: string) => void;
+    onScroll: (params: ScrollPos) => void;
+    onVerticalScroll: ({ scrollTop }: ScrollPos) => void;
+}
+declare function useTable(props: TableV2Props): UseTableReturn;
+export { useTable };
+export type { UseTableReturn };

package/dist/TableV2/src/use-table.js

@@ -0,0 +1,197 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import isArray from 'lodash/isArray';
+import isNumber from 'lodash/isNumber';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useColumns, useData, useRow, useScrollbar, useStyles } from "./composables";
+import { useClassNames } from "../../hooks";
+function useTable(props) {
+  var mainTableRef = useRef(null);
+  var leftTableRef = useRef(null);
+  var rightTableRef = useRef(null);
+  var ns = useClassNames('table-v2');
+
+  // state
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isScrolling = _useState2[0],
+    setIsScrolling = _useState2[1];
+  var _useColumns = useColumns(props, props.columns, props.fixed),
+    columns = _useColumns.columns,
+    columnsStyles = _useColumns.columnsStyles,
+    columnsTotalWidth = _useColumns.columnsTotalWidth,
+    fixedColumnsOnLeft = _useColumns.fixedColumnsOnLeft,
+    fixedColumnsOnRight = _useColumns.fixedColumnsOnRight,
+    hasFixedColumns = _useColumns.hasFixedColumns,
+    mainColumns = _useColumns.mainColumns,
+    onColumnSorted = _useColumns.onColumnSorted;
+  var _useRow = useRow(props, {
+      mainTableRef: mainTableRef,
+      leftTableRef: leftTableRef,
+      rightTableRef: rightTableRef,
+      tableInstance: {},
+      ns: ns,
+      isScrolling: isScrolling
+    }),
+    expandedRowKeys = _useRow.expandedRowKeys,
+    setExpandedRowKeys = _useRow.setExpandedRowKeys,
+    lastRenderedRowIndex = _useRow.lastRenderedRowIndex,
+    setLastRenderedRowIndex = _useRow.setLastRenderedRowIndex,
+    isDynamic = _useRow.isDynamic,
+    isResetting = _useRow.isResetting,
+    rowHeights = _useRow.rowHeights,
+    resetAfterIndex = _useRow.resetAfterIndex,
+    onRowExpanded = _useRow.onRowExpanded,
+    onRowHeightChange = _useRow.onRowHeightChange,
+    onRowHovered = _useRow.onRowHovered,
+    onRowsRendered = _useRow.onRowsRendered;
+  var _useData = useData(props, {
+      expandedRowKeys: expandedRowKeys,
+      lastRenderedRowIndex: lastRenderedRowIndex,
+      resetAfterIndex: resetAfterIndex,
+      setLastRenderedRowIndex: setLastRenderedRowIndex
+    }),
+    data = _useData.data,
+    depthMap = _useData.depthMap;
+  var rowsHeight = useMemo(function () {
+    var estimatedRowHeight = props.estimatedRowHeight,
+      rowHeight = props.rowHeight;
+    if (isNumber(estimatedRowHeight)) {
+      // calculate the actual height
+      return Object.values(rowHeights).reduce(function (acc, curr) {
+        return acc + curr;
+      }, 0);
+    }
+    return data.length * rowHeight;
+  }, [props, data.length, rowHeights]);
+  var _useStyles = useStyles(props, {
+      columnsTotalWidth: columnsTotalWidth,
+      fixedColumnsOnLeft: fixedColumnsOnLeft,
+      fixedColumnsOnRight: fixedColumnsOnRight,
+      rowsHeight: rowsHeight
+    }),
+    bodyWidth = _useStyles.bodyWidth,
+    fixedTableHeight = _useStyles.fixedTableHeight,
+    mainTableHeight = _useStyles.mainTableHeight,
+    leftTableWidth = _useStyles.leftTableWidth,
+    rightTableWidth = _useStyles.rightTableWidth,
+    windowHeight = _useStyles.windowHeight,
+    footerHeight = _useStyles.footerHeight,
+    emptyStyle = _useStyles.emptyStyle,
+    rootStyle = _useStyles.rootStyle,
+    headerHeight = _useStyles.headerHeight;
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isEndReached = _useState4[0],
+    setIsEndReached = _useState4[1];
+  var onEndReached = props.onEndReached,
+    hScrollbarSize = props.hScrollbarSize;
+  var onMaybeEndReached = useCallback(function (scrollPos) {
+    if (!onEndReached) {
+      return;
+    }
+    var scrollTop = scrollPos.scrollTop;
+    var _totalHeight = rowsHeight;
+    var clientHeight = windowHeight;
+    var remainDistance = _totalHeight - (scrollTop + clientHeight) + hScrollbarSize;
+    if (!isEndReached && lastRenderedRowIndex >= 0 && _totalHeight <= scrollTop + mainTableHeight - headerHeight) {
+      setIsEndReached(true);
+      onEndReached === null || onEndReached === void 0 || onEndReached(remainDistance);
+    } else {
+      setIsEndReached(false);
+    }
+  }, [headerHeight, hScrollbarSize, isEndReached, lastRenderedRowIndex, mainTableHeight, onEndReached, rowsHeight, windowHeight]);
+  var _useScrollbar = useScrollbar(props, {
+      mainTableRef: mainTableRef,
+      leftTableRef: leftTableRef,
+      rightTableRef: rightTableRef,
+      onMaybeEndReached: onMaybeEndReached
+    }),
+    scrollTo = _useScrollbar.scrollTo,
+    scrollToLeft = _useScrollbar.scrollToLeft,
+    scrollToTop = _useScrollbar.scrollToTop,
+    scrollToRow = _useScrollbar.scrollToRow,
+    onScroll = _useScrollbar.onScroll,
+    onVerticalScroll = _useScrollbar.onVerticalScroll;
+
+  // DOM/Component refs
+  var containerRef = useRef(null);
+  var showEmpty = useMemo(function () {
+    var noData = data.length === 0;
+    return isArray(props.fixedData) ? props.fixedData.length === 0 && noData : noData;
+  }, [data.length, props.fixedData]);
+  var getRowHeight = useCallback(function (rowIndex) {
+    var estimatedRowHeight = props.estimatedRowHeight,
+      rowHeight = props.rowHeight,
+      rowKey = props.rowKey;
+    if (!estimatedRowHeight) {
+      return rowHeight;
+    }
+    return rowHeights[data[rowIndex][rowKey]] || estimatedRowHeight;
+  }, [props, rowHeights, data]);
+
+  // Watch rowsHeight changes to reset isEndReached
+  useEffect(function () {
+    setIsEndReached(false);
+  }, [rowsHeight]);
+
+  // Watch expandedRowKeys prop changes
+  useEffect(function () {
+    if (props.expandedRowKeys) {
+      setExpandedRowKeys(props.expandedRowKeys);
+    }
+  }, [props.expandedRowKeys]);
+  return {
+    // models
+    columns: columns,
+    containerRef: containerRef,
+    mainTableRef: mainTableRef,
+    leftTableRef: leftTableRef,
+    rightTableRef: rightTableRef,
+    // states
+    isDynamic: isDynamic,
+    isResetting: isResetting,
+    isScrolling: isScrolling,
+    hasFixedColumns: hasFixedColumns,
+    // records
+    columnsStyles: columnsStyles,
+    columnsTotalWidth: columnsTotalWidth,
+    data: data,
+    expandedRowKeys: expandedRowKeys,
+    depthMap: depthMap,
+    fixedColumnsOnLeft: fixedColumnsOnLeft,
+    fixedColumnsOnRight: fixedColumnsOnRight,
+    mainColumns: mainColumns,
+    // metadata
+    bodyWidth: bodyWidth,
+    emptyStyle: emptyStyle,
+    rootStyle: rootStyle,
+    footerHeight: footerHeight,
+    mainTableHeight: mainTableHeight,
+    fixedTableHeight: fixedTableHeight,
+    leftTableWidth: leftTableWidth,
+    rightTableWidth: rightTableWidth,
+    // flags
+    showEmpty: showEmpty,
+    // methods
+    getRowHeight: getRowHeight,
+    // event handlers
+    onColumnSorted: onColumnSorted,
+    onRowHovered: onRowHovered,
+    onRowExpanded: onRowExpanded,
+    onRowsRendered: onRowsRendered,
+    onRowHeightChange: onRowHeightChange,
+    // use scrollbars
+    scrollTo: scrollTo,
+    scrollToLeft: scrollToLeft,
+    scrollToTop: scrollToTop,
+    scrollToRow: scrollToRow,
+    onScroll: onScroll,
+    onVerticalScroll: onVerticalScroll
+  };
+}
+export { useTable };

package/dist/TableV2/src/utils.d.ts

@@ -0,0 +1,5 @@
+import React, { type CSSProperties, type ReactNode } from 'react';
+export declare const sum: (listLike: number | number[]) => number;
+export declare const tryCall: <T>(fLike: T, params: T extends (...args: infer K) => unknown ? K : any, defaultRet?: {}) => any;
+export declare const enforceUnit: (style: CSSProperties) => React.CSSProperties;
+export declare const componentToSlot: <T extends object>(ComponentLike: React.ReactNode | ((props: T) => ReactNode)) => (props: T) => React.ReactNode;

package/dist/TableV2/src/utils.js

@@ -0,0 +1,47 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { addUnit, isFunction } from "../../Util";
+import isArray from 'lodash/isArray';
+import React from 'react';
+var sumReducer = function sumReducer(sum, num) {
+  return sum + num;
+};
+export var sum = function sum(listLike) {
+  return isArray(listLike) ? listLike.reduce(sumReducer, 0) : listLike;
+};
+export var tryCall = function tryCall(fLike, params) {
+  var defaultRet = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  return isFunction(fLike) ? fLike(params) : fLike !== null && fLike !== void 0 ? fLike : defaultRet;
+};
+export var enforceUnit = function enforceUnit(style) {
+  var keys = ['width', 'maxWidth', 'minWidth', 'height'];
+  var _style = keys.reduce(function (acc, key) {
+    return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, addUnit(style[key])));
+  }, style);
+  return _style;
+};
+
+// React version of componentToSlot
+// In React, we don't need to convert components to slots like in Vue
+// This function is kept for compatibility but simplified
+export var componentToSlot = function componentToSlot(ComponentLike) {
+  // In React, if it's a function, use it directly as a render prop
+  // If it's a React element, return a function that renders it
+  if (isFunction(ComponentLike)) {
+    return function (props) {
+      return ComponentLike(props);
+    };
+  }
+  if ( /*#__PURE__*/React.isValidElement(ComponentLike)) {
+    return function (props) {
+      return /*#__PURE__*/React.cloneElement(ComponentLike, props);
+    };
+  }
+  // For React elements or undefined, return undefined
+  // The caller should handle rendering directly
+  return null;
+};

package/dist/Tabs/Tabs.js

@@ -90,7 +90,7 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
     var componentChildren = getTabPaneInstance(children);
     return componentChildren.map(function (node, i) {
       return {
-        title: node.props.title,
+        title: node.props.label,
         name: node.props.name,
         index: i,
         active: isEmpty(activeName) ? i === 0 : activeName === node.props.name,

package/dist/Tabs/typings.d.ts

@@ -37,8 +37,6 @@ export interface TabsProps extends BaseProps, NativeProps<'--el-tabs-header-heig
     onTabRemove?: (name: TabPaneName | undefined) => void;
     /** `activeName` 改变时触发 */
     onTabChange?: (name: TabPaneName | undefined) => void;
-    /** 鼠标右键点击 tab 时触发 */
-    formatter?: (name: TabPaneName | undefined) => void;
 }
 export interface Navs {
     /** 选项卡标题 */
@@ -57,7 +55,7 @@ export interface Navs {
 }
 export interface TabPaneProps extends BaseProps, NativeProps {
     /** 选项卡标题 */
-    title: string | React.ReactElement;
+    label: string | React.ReactElement;
     /** 与选项卡绑定值 value 对应的标识符，表示选项卡别名 */
     name: string;
     /** 标签是否可关闭 */

package/dist/Tag/Tag.js

@@ -67,7 +67,7 @@ var Tag = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
     display: "",
     transitionAppear: true,
     unmountOnExit: true,
-    duration: 200
+    duration: disableTransitions ? 0 : 200
   }, /*#__PURE__*/React.createElement("span", _extends({
     ref: mergedRef,
     className: classNames(b(), m(type, effect, _defineProperty({}, size, size)), is({

package/dist/Tag/typings.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BaseProps, NativeProps, TooltipBaseProps, TypeAttributes } from '../types/common';
-export interface TagProps extends Omit<TooltipBaseProps<HTMLSpanElement>, 'onClick'>, BaseProps, NativeProps {
+export interface TagProps extends Omit<TooltipBaseProps<HTMLSpanElement>, 'onClick'>, BaseProps, NativeProps<'--el-icon-size' | '--el-tag-bg-color' | '--el-tag-border-color' | '--el-tag-hover-color' | '--el-tag-text-color' | '--el-tag-font-size' | '--el-tag-border-radius' | '--el-tag-border-radius-rounded'> {
     /** 类型 */
     type?: TypeAttributes.Appearance;
     /** 是否可关闭 */

package/dist/Text/Text.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { TextProps } from './typings';
+declare const Text: FC<TextProps>;
+export default Text;