@rainbow-oh/yee-c 0.8.15 → 0.8.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rainbow-oh/yee-c",
-  "version": "0.8.15",
+  "version": "0.8.17",
   "description": "yee basic components",
   "keywords": [
     "react",

package/src/Search/search.tsx

@@ -233,7 +233,7 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(
             aria-autocomplete={hasPopup ? 'list' : undefined}
             aria-controls={hasPopup && open ? listboxId : undefined}
             aria-activedescendant={
-              hasPopup && open && focusedKey != null
+              hasPopup && open && focusedKey !== null
                 ? String(focusedKey)
                 : undefined
             }

package/src/Table/demo/fixed.tsx

@@ -0,0 +1,92 @@
+import type { ColumnProps } from '@rainbow-oh/yee-c';
+import { Table } from '@rainbow-oh/yee-c';
+import React from 'react';
+
+const columns: ColumnProps[] = [
+  {
+    title: 'Name',
+    dataIndex: 'name',
+    key: 'name',
+    fixed: 'left',
+    width: 140,
+  },
+  {
+    title: 'Age',
+    dataIndex: 'age',
+    key: 'age',
+    fixed: 'left',
+    width: 100,
+  },
+  {
+    title: 'Address',
+    dataIndex: 'address',
+    key: 'address',
+    width: 240,
+  },
+  {
+    title: 'Company',
+    dataIndex: 'company',
+    key: 'company',
+    width: 180,
+  },
+  {
+    title: 'Department',
+    dataIndex: 'department',
+    key: 'department',
+    width: 180,
+  },
+  {
+    title: 'Email',
+    dataIndex: 'email',
+    key: 'email',
+    width: 240,
+  },
+  {
+    title: 'Action',
+    key: 'action',
+    fixed: 'right',
+    width: 100,
+    render: (record) => <a onClick={() => console.log(record)}>View</a>,
+  },
+];
+
+const dataSource = [
+  {
+    key: '1',
+    name: 'John Brown',
+    age: 32,
+    address: 'New York No. 1 Lake Park',
+    company: 'Acme Inc.',
+    department: 'Engineering',
+    email: 'john.brown@example.com',
+  },
+  {
+    key: '2',
+    name: 'Jim Green',
+    age: 42,
+    address: 'London No. 1 Lake Park',
+    company: 'Globex',
+    department: 'Marketing',
+    email: 'jim.green@example.com',
+  },
+  {
+    key: '3',
+    name: 'Joe Black',
+    age: 28,
+    address: 'Sidney No. 1 Lake Park',
+    company: 'Initech',
+    department: 'Product',
+    email: 'joe.black@example.com',
+  },
+];
+
+export default () => (
+  <Table
+    columns={columns}
+    dataSource={dataSource}
+    rowKey="key"
+    pagination={false}
+    scroll={{ x: 1180 }}
+    tableLayout="fixed"
+  />
+);

package/src/Table/hooks/useColumns.ts

@@ -31,6 +31,7 @@ export default function useColumns({
   columns,
   rowSelection,
   expandable,
+  measuredColumnWidths,
 }: {
   children?:
     | React.ReactElement<ColumnProps>
@@ -38,6 +39,7 @@ export default function useColumns({
   columns: ColumnProps[];
   rowSelection?: RowSelectionType;
   expandable?: ExpandableType;
+  measuredColumnWidths?: number[];
 }) {
   const childColumns: Array<ColumnProps> | null = useMemo(() => {
     return children
@@ -53,10 +55,10 @@ export default function useColumns({
       []) as WrapedColumnProps[];
     const tree = injectSelectionExpand(base, rowSelection, expandable);
     const leaves = flattenLeafColumns(tree);
-    const wraped = handleColumns(leaves);
+    const wraped = handleColumns(leaves, measuredColumnWidths);
     const rows = parseHeaderRows(tree, wraped);
     return { wrapedColumns: wraped, headerRows: rows };
-  }, [childColumns, columns, rowSelection, expandable]);
+  }, [childColumns, columns, rowSelection, expandable, measuredColumnWidths]);
 
   return {
     wrapedColumns,

package/src/Table/index.en-US.md

@@ -23,6 +23,7 @@ A table displays rows of data.
 <code src="./demo/pagination.tsx" title="Pagination" description="Table with pagination"></code>
 <code src="./demo/column-filter.tsx" title="column filter" description="Table column filter"></code>
 <code src="./demo/grouping.tsx" title="Grouping" description="Multi-level header"></code>
+<code src="./demo/fixed.tsx" title="Fixed Columns" description="Fix columns on both sides and scroll horizontally to see the effect"></code>
 <code src="./demo/components-override.tsx" title="components override" description="tbody / row rendering that can be taken over by external libs (e.g. dnd-kit)"></code>
 ## API
 

package/src/Table/index.zh-CN.md

@@ -24,6 +24,7 @@ toc: 'content'
 <code src="./demo/pagination.tsx" title="分页" description="带分页的表格"></code>
 <code src="./demo/merge-cell.tsx" title="合并单元格" description="合并单元格的表格"></code>
 <code src="./demo/grouping.tsx" title="表头分组" description="多级表头"></code>
+<code src="./demo/fixed.tsx" title="固定列" description="固定表格左右列，横向滚动可查看效果"></code>
 <code src="./demo/summary.tsx" title="统计" description="表格的统计行"></code>
 <code src="./demo/filter.tsx" title="筛选" description="表格的筛选功能"></code>
 <code src="./demo/column-filter.tsx" title="列筛选" description="表格的列筛选功能"></code>

package/src/Table/style/index.less

@@ -85,15 +85,34 @@
     overflow: auto;
 
     &-wrapper {
-      overflow: auto;
       width: 100%;
 
       &-scroll-left @{pls}-cell-fixed-left-last {
-        box-shadow: 6px 0 6px -4px var(--yee-table-fixed-left-after-bs-color);
+        &::after {
+          content: '';
+          pointer-events: none;
+          position: absolute;
+          display: block;
+          height: 100%;
+          width: 15px;
+          right: -15px;
+          top: 0;
+          box-shadow: inset 4px 0 8px -4px var(--yee-table-fixed-left-after-bs-color);
+        }
       }
 
       &-scroll-right @{pls}-cell-fixed-right-first {
-        box-shadow: -6px 0 6px -4px var(--yee-table-fixed-right-after-bs-color);
+        &::after {
+          content: '';
+          pointer-events: none;
+          position: absolute;
+          display: block;
+          height: 100%;
+          width: 15px;
+          left: -15px;
+          top: 0;
+          box-shadow: inset -4px 0 8px -4px var(--yee-table-fixed-right-after-bs-color);
+        }
       }
     }
 
@@ -156,6 +175,7 @@
     &-fixed-left,
     &-fixed-right {
       position: sticky;
+      z-index: 1;
       background-color: var(--yee-table-fixed-column-bg-color);
     }
   }

package/src/Table/table.tsx

@@ -12,6 +12,7 @@ import TFooter from './tfooter';
 import THeader from './theader';
 
 import { GlobalContext } from '../Config-Provider';
+import useLatest from '../hooks/useLatest';
 import mergeContextToProps from '../utils/mergeContextToProps';
 import omit from '../utils/omit';
 import { pickDataAttrs } from '../utils/types';
@@ -61,6 +62,8 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
   } = props;
 
   const dataAttrs = pickDataAttrs(rest as Record<string, unknown>);
+  const [measuredColumnWidths, setMeasuredColumnWidths] =
+    React.useState<number[]>();
 
   const getRowKey = React.useCallback(
     (record: Record<string, any>, key = rowKey) => {
@@ -80,6 +83,7 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
     columns: propColumns,
     expandable,
     rowSelection,
+    measuredColumnWidths,
   });
 
   // Filter
@@ -153,27 +157,22 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
 
   // Track filter changes to emit onChange after filtered data is recalculated
   const prevFilterRecordsRef = useRef(filterRecords);
-  const contentWrapperRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
+  const tableRef = useRef<HTMLTableElement>(null);
   const [horizontalScroll, setHorizontalScroll] = React.useState({
     left: false,
     right: false,
   });
 
   const updateHorizontalScroll = React.useCallback(() => {
-    const wrapper = contentWrapperRef.current;
     const content = contentRef.current;
-    if (!wrapper || !content) return;
+    if (!content) return;
 
-    const scrollContainer =
-      content.scrollWidth - content.clientWidth > 1 ? content : wrapper;
-    const maxScrollLeft =
-      scrollContainer.scrollWidth - scrollContainer.clientWidth;
+    const maxScrollLeft = content.scrollWidth - content.clientWidth;
     const hasHorizontalScroll = maxScrollLeft > 1;
     const next = {
-      left: hasHorizontalScroll && scrollContainer.scrollLeft > 1,
-      right:
-        hasHorizontalScroll && scrollContainer.scrollLeft < maxScrollLeft - 1,
+      left: hasHorizontalScroll && content.scrollLeft > 1,
+      right: hasHorizontalScroll && content.scrollLeft < maxScrollLeft - 1,
     };
 
     setHorizontalScroll((current) =>
@@ -183,6 +182,54 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
     );
   }, []);
 
+  // A primitive signature of everything in the columns that can affect the
+  // measured layout, used as an effect dependency instead of the array itself.
+  const columnLayoutKey = useMemo(
+    () =>
+      wrapedColumns
+        .map(
+          (column, index) =>
+            `${column.key ?? column.dataIndex ?? index}:${
+              column.fixed ?? ''
+            }:${column.width ?? ''}`,
+        )
+        .join('|'),
+    [wrapedColumns],
+  );
+
+  // Keep the latest columns in a ref so that the measure callback stays stable:
+  // `wrapedColumns` is derived from `measuredColumnWidths`, so depending on it
+  // directly would recreate the callback (and the ResizeObserver) on every
+  // measurement.
+  const wrapedColumnsRef = useLatest(wrapedColumns);
+
+  const updateMeasuredColumnWidths = React.useCallback(() => {
+    const columns = wrapedColumnsRef.current;
+    if (!columns.some((column) => column.fixed)) return;
+
+    const colElements = tableRef.current?.querySelectorAll(
+      ':scope > colgroup > col',
+    );
+    if (!colElements || colElements.length !== columns.length) return;
+
+    // Round to whole pixels: sticky offsets do not need sub-pixel precision,
+    // and raw fractional widths would otherwise flip-flop (scrollbar showing /
+    // hiding, browser zoom) and keep re-triggering renders.
+    const nextWidths = Array.from(colElements, (column) =>
+      Math.round(column.getBoundingClientRect().width),
+    );
+    if (nextWidths.some((width) => !Number.isFinite(width) || width <= 0)) {
+      return;
+    }
+
+    setMeasuredColumnWidths((current) => {
+      const unchanged =
+        current?.length === nextWidths.length &&
+        current.every((width, index) => width === nextWidths[index]);
+      return unchanged ? current : nextWidths;
+    });
+  }, [wrapedColumnsRef]);
+
   useEffect(() => {
     if (prevFilterRecordsRef.current === filterRecords) return;
 
@@ -207,24 +254,43 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
     onChange,
   ]);
 
+  // Observers are attached once: both callbacks are referentially stable.
   useEffect(() => {
-    updateHorizontalScroll();
-
-    const wrapper = contentWrapperRef.current;
     const content = contentRef.current;
-    if (!wrapper || !content) return undefined;
+    const tableElement = tableRef.current;
+    if (!content || !tableElement) return undefined;
+
+    const handleResize = () => {
+      updateHorizontalScroll();
+      updateMeasuredColumnWidths();
+    };
 
     if (typeof ResizeObserver === 'undefined') {
-      window.addEventListener('resize', updateHorizontalScroll);
-      return () => window.removeEventListener('resize', updateHorizontalScroll);
+      window.addEventListener('resize', handleResize);
+      return () => window.removeEventListener('resize', handleResize);
     }
 
-    const resizeObserver = new ResizeObserver(updateHorizontalScroll);
-    resizeObserver.observe(wrapper);
+    const resizeObserver = new ResizeObserver(handleResize);
     resizeObserver.observe(content);
+    resizeObserver.observe(tableElement);
 
     return () => resizeObserver.disconnect();
-  }, [updateHorizontalScroll, wrapedColumns, pageData, scroll?.x]);
+  }, [updateHorizontalScroll, updateMeasuredColumnWidths]);
+
+  // Re-sync when something that can change the layout changes. `columnLayoutKey`
+  // is a primitive, so a measurement round-trip (which produces a new
+  // `wrapedColumns` array with identical layout config) does not retrigger it.
+  useEffect(() => {
+    updateHorizontalScroll();
+    updateMeasuredColumnWidths();
+  }, [
+    columnLayoutKey,
+    pageData,
+    scroll?.x,
+    scroll?.y,
+    updateHorizontalScroll,
+    updateMeasuredColumnWidths,
+  ]);
 
   const renderHeader = () => {
     return (
@@ -283,6 +349,7 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
     const tableProps = {
       style: {
         ...styles?.table,
+        minWidth: scroll?.x,
         tableLayout: pageData?.length ? tableLayout : undefined,
       },
       className: clsx(
@@ -302,7 +369,7 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
           rowKey,
         }}
       >
-        <table {...tableProps}>
+        <table ref={tableRef} {...tableProps}>
           <ColGroup columns={wrapedColumns} />
           {renderTHeader()}
           {renderTBody()}
@@ -313,12 +380,10 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
 
     return (
       <div
-        ref={contentWrapperRef}
         className={clsx(`${prefixCls}-content-wrapper`, {
           [`${prefixCls}-content-wrapper-scroll-left`]: horizontalScroll.left,
           [`${prefixCls}-content-wrapper-scroll-right`]: horizontalScroll.right,
         })}
-        onScroll={updateHorizontalScroll}
       >
         <div
           ref={contentRef}
@@ -326,7 +391,7 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
             [`${prefixCls}-${size}-size`]: size,
             [`${prefixCls}-fixed-header`]: scroll?.y,
           })}
-          style={{ height: scroll?.y, width: scroll?.x }}
+          style={{ height: scroll?.y }}
           onScroll={updateHorizontalScroll}
         >
           {table}

package/src/Table/util/index.ts

@@ -1,11 +1,38 @@
 import { WrapedColumnProps } from '../interface';
 
-export function handleColumns(columns: Array<WrapedColumnProps>) {
+const getColumnWidth = (
+  column: WrapedColumnProps,
+  index: number,
+  measuredColumnWidths?: number[],
+) => {
+  const measuredWidth = measuredColumnWidths?.[index];
+  if (Number.isFinite(measuredWidth) && measuredWidth && measuredWidth > 0) {
+    return measuredWidth;
+  }
+
+  if (typeof column.width === 'number') {
+    return column.width;
+  }
+
+  if (
+    typeof column.width === 'string' &&
+    /^\s*\d+(?:\.\d+)?px\s*$/.test(column.width)
+  ) {
+    return Number.parseFloat(column.width);
+  }
+
+  return 0;
+};
+
+export function handleColumns(
+  columns: Array<WrapedColumnProps>,
+  measuredColumnWidths?: number[],
+) {
   let leftWidthCount = 0;
   let rightWidthCount = 0;
 
   for (let i = 0; i < columns.length; i++) {
-    const col = columns[i] || ({} as any);
+    const col = columns[i] || ({} as WrapedColumnProps);
     if (col.fixed === true || col.fixed === 'left') {
       col.fixed = 'left';
       col.style = { ...col.style, left: leftWidthCount };
@@ -14,20 +41,18 @@ export function handleColumns(columns: Array<WrapedColumnProps>) {
       if (!nextIsFixedLeft) {
         col.isFixedLeftLast = true;
       }
-      leftWidthCount =
-        leftWidthCount + (col.width ? parseFloat(col.width as string) : 0);
+      leftWidthCount += getColumnWidth(col, i, measuredColumnWidths);
     }
   }
 
   for (let j = columns.length - 1; j >= 0; j--) {
-    const col = columns[j] || ({} as any);
+    const col = columns[j] || ({} as WrapedColumnProps);
     if (col.fixed === 'right') {
       col.style = { ...col.style, right: rightWidthCount };
       if (columns[j - 1]?.fixed !== 'right') {
         col.isFixedRightFirst = true;
       }
-      rightWidthCount =
-        rightWidthCount + (col.width ? parseFloat(col.width as string) : 0);
+      rightWidthCount += getColumnWidth(col, j, measuredColumnWidths);
     }
   }
   return columns;

package/src/Tree/index.en-US.md

@@ -44,7 +44,8 @@ Tree is a hierarchical data display component.
 | icon | `React.ReactNode \| ((props: TreeProps<T>) => React.ReactNode)` | Icon before title (requires showIcon) | - |
 | switcherIcon | `[React.ReactNode, React.ReactNode]` | Expand/collapse switcher icons | - |
 | multiple | `boolean` | Whether tree node supports multiple selection | `false` |
-| fieldNames | `{ key?: keyof T; label?: keyof T; children?: keyof T }` | Custom key, label, children fields | - |
+| fieldNames | `{ key?: keyof T; label?: keyof T; children?: keyof T; extra?: keyof T }` | Custom key, label, children, extra fields | - |
+| labelRender | `(node: TreeNode<T>) => React.ReactNode` | Custom label render function. When provided, takes full control of the label area; the node's `extra` will NOT be appended automatically (access it via `node.extra` in your render function) | - |
 | loadData | `() => void` | Async load data | - |
 | dataSource | `Array<T> \| T` | Data source | - |
 | checkedKeys | `Array<string \| number>` | Checked tree nodes (controlled) | - |
@@ -53,4 +54,21 @@ Tree is a hierarchical data display component.
 | defaultSelectedKeys | `Array<string \| number>` | Default selected tree nodes | - |
 | onCheck | `(checkedKeys: Array<string \| number>, params: { checked: boolean; checkedNodes: T[]; node: T }) => void` | Callback when checkbox is checked | - |
 | onSelect | `(selectedKeys: Array<string \| number>, params: { selected: boolean; selectedNodes: T[]; node: T }) => void` | Callback when tree node is clicked | - |
-| onExpand | `(expandedKeys: Array<string \| number>, params: { expanded: boolean; expandedNodes: T[]; node: T[] }) => void` | Callback when expand/collapse | - |
+| onExpand | `(expandedKeys: Array<string \| number>, params: { expanded: boolean; expandedNodes: T[]; node: T[] }) => void` | Callback when expand/collapse | - |
+
+### Data Node Fields
+
+| Property | Type | Description |
+| --- | --- | --- |
+| key | `string \| number` | Unique node identifier |
+| label | `string` | Display text |
+| children | `Array<T>` | Child nodes |
+| extra | `React.ReactNode \| ((node: T) => React.ReactNode)` | Extra content rendered after the label (e.g. tags, badges, action buttons). When `labelRender` is provided, extra is NOT rendered automatically — access it via `node.extra` in your render function |
+| disabled | `boolean` | Whether disabled |
+| icon | `React.ReactNode \| (() => React.ReactNode)` | Custom icon |
+
+### Relationship between extra and labelRender
+
+- **`extra` only**: Automatically appended after the default label text. Ideal for simple tags, badges, etc.
+- **`labelRender` only**: Full custom rendering of the node label area.
+- **Both present**: `labelRender` takes priority; extra is NOT automatically appended. To use extra in your custom render, access it via the callback parameter `node.extra`.

package/src/Tree/index.zh-CN.md

@@ -44,7 +44,8 @@ toc: 'content'
 | icon | `React.ReactNode \| ((props: TreeProps<T>) => React.ReactNode)` | 标题前的图标，需设置showIcon为true | - |
 | switcherIcon | `[React.ReactNode, React.ReactNode]` | 展开收起按钮图标 | - |
 | multiple | `boolean` | 树节点数据是否支持多选 | `false` |
-| fieldNames | `{ key?: keyof T; label?: keyof T; children?: keyof T }` | 自定义节点key, label, children字段 | - |
+| fieldNames | `{ key?: keyof T; label?: keyof T; children?: keyof T; extra?: keyof T }` | 自定义节点key, label, children, extra字段 | - |
+| labelRender | `(node: TreeNode<T>) => React.ReactNode` | 自定义节点标签渲染函数。提供后将完全接管 label 区域的渲染，此时节点的 `extra` 不会自动追加（可通过 `node.extra` 自行渲染） | - |
 | loadData | `() => void` | 异步加载数据 | - |
 | dataSource | `Array<T> \| T` | 数据源 | - |
 | checkedKeys | `Array<string \| number>` | 选中复选框的树节点，受控 | - |
@@ -53,4 +54,21 @@ toc: 'content'
 | defaultSelectedKeys | `Array<string \| number>` | 设置默认选中的树节点，多选需设置 multiple 为 true | - |
 | onCheck | `(checkedKeys: Array<string \| number>, params: { checked: boolean; checkedNodes: T[]; node: T }) => void` | 复选框选中的回调 | - |
 | onSelect | `(selectedKeys: Array<string \| number>, params: { selected: boolean; selectedNodes: T[]; node: T }) => void` | 点击树节点的回调 | - |
-| onExpand | `(expandedKeys: Array<string \| number>, params: { expanded: boolean; expandedNodes: T[]; node: T[] }) => void` | 展开收起的回调 | - |
+| onExpand | `(expandedKeys: Array<string \| number>, params: { expanded: boolean; expandedNodes: T[]; node: T[] }) => void` | 展开收起的回调 | - |
+
+### 数据节点字段
+
+| 属性名 | 类型 | 描述 |
+| --- | --- | --- |
+| key | `string \| number` | 节点唯一标识 |
+| label | `string` | 节点显示文本 |
+| children | `Array<T>` | 子节点 |
+| extra | `React.ReactNode \| ((node: T) => React.ReactNode)` | 节点标签后的附加内容（如标签、徽标、操作按钮）。当 `labelRender` 存在时不会自动渲染，需在 `labelRender` 中通过 `node.extra` 自行处理 |
+| disabled | `boolean` | 是否禁用 |
+| icon | `React.ReactNode \| (() => React.ReactNode)` | 自定义图标 |
+
+### extra 与 labelRender 的关系
+
+- **仅使用 `extra`**：在默认 label 文本后自动追加 extra 内容，适合简单的标签、徽标等场景
+- **仅使用 `labelRender`**：完全自定义节点标签区域的渲染
+- **同时存在时**：`labelRender` 优先级更高，extra 不会自动追加。如需在自定义渲染中使用 extra，可通过回调参数 `node.extra` 取得原始值自行渲染

package/src/Tree/interface.ts

@@ -64,6 +64,13 @@ export type TreeNode<T> = {
    * All descendant uids (collected bottom-up). Used for check/uncheck propagation.
    */
   childUids?: Array<string>;
+  /**
+   * Extra content rendered after the label (e.g. tags, badges, action buttons).
+   * Only takes effect when `labelRender` is NOT provided at the Tree level.
+   * When `labelRender` is present, access this value via `node.extra` in your
+   * custom render function.
+   */
+  extra?: React.ReactNode | ((node: T) => React.ReactNode);
   /**
    * Original data
    */
@@ -162,10 +169,18 @@ export interface TreeProps<T> extends DataAttributeProps {
    *  @default false
    */
   multiple?: boolean;
+  /**
+   * Custom render function for node label.
+   * When provided, takes full control of the label area rendering.
+   * The node's `extra` will NOT be appended automatically in this case;
+   * access it via `node.extra` if you need it in your custom render.
+   * The original `label` string is still used for `title` attribute fallback.
+   */
+  labelRender?: (node: TreeNode<T>) => React.ReactNode;
   /**
    * Customize node key, title, children field names
    */
-  fieldNames?: { key?: keyof T; label?: keyof T; children?: keyof T };
+  fieldNames?: { key?: keyof T; label?: keyof T; children?: keyof T; extra?: keyof T };
   /**
    * Asynchronous data loading
    */

package/src/Tree/tree-node.tsx

@@ -21,6 +21,7 @@ const Node = <T extends Record<string, unknown> = any>(
     disabled,
     depth,
     icon,
+    extra,
     original,
     lines,
   } = node;
@@ -35,6 +36,7 @@ const Node = <T extends Record<string, unknown> = any>(
     indeterminateUids,
     expandedUids,
     switcherIcon,
+    labelRender,
     draggable,
     draggingUid,
     dropState,
@@ -105,6 +107,14 @@ const Node = <T extends Record<string, unknown> = any>(
     const _icon =
       typeof mergedIcon === 'function' ? mergedIcon(original) : mergedIcon;
 
+    // labelRender takes full control of the label content when provided
+    const content = labelRender ? labelRender(node) : label;
+
+    // extra: appended after the label content (only when labelRender is NOT used)
+    const _extra = !labelRender && extra
+      ? (typeof extra === 'function' ? extra(original) : extra)
+      : null;
+
     return (
       <Button
         className={clsx(`${prefixCls}-node-label`, {
@@ -116,7 +126,10 @@ const Node = <T extends Record<string, unknown> = any>(
         icon={showIcon ? _icon : undefined}
         onClick={disabled ? undefined : () => onSelect(uid)}
       >
-        {label}
+        {content}
+        {_extra && (
+          <span className={`${prefixCls}-node-extra`}>{_extra}</span>
+        )}
       </Button>
     );
   };
@@ -139,7 +152,7 @@ const Node = <T extends Record<string, unknown> = any>(
       <span
         aria-hidden="true"
         className={`${prefixCls}-node-indent`}
-        key={index}
+        key={`node-empty-${index}`}
       ></span>
     ));
   };

package/src/Tree/tree.tsx

@@ -35,6 +35,7 @@ export const TreeContext = createContext<{
   icon?: React.ReactNode | ((props: any) => React.ReactNode);
   showLine?: boolean;
   switcherIcon?: [React.ReactNode, React.ReactNode];
+  labelRender?: (node: TreeNode<any>) => React.ReactNode;
   selectedUids: Set<string>;
   checkedUids: Set<string>;
   indeterminateUids: Set<string>;
@@ -203,6 +204,7 @@ const Tree = <T extends Record<string, unknown> = any>(
     onSelect,
     onCheck,
     onExpand,
+    labelRender,
     virtual = false,
     height,
     itemHeight = 28,
@@ -553,6 +555,7 @@ const Tree = <T extends Record<string, unknown> = any>(
       icon,
       showLine,
       switcherIcon,
+      labelRender,
       selectedUids: selectedUidSet,
       checkedUids: checkedUidSet,
       indeterminateUids: indeterminateUidSet,
@@ -575,6 +578,7 @@ const Tree = <T extends Record<string, unknown> = any>(
       icon,
       showLine,
       switcherIcon,
+      labelRender,
       selectedUidSet,
       checkedUidSet,
       indeterminateUidSet,
@@ -687,7 +691,7 @@ const Tree = <T extends Record<string, unknown> = any>(
     >
       <TreeContext.Provider value={contextValue}>
         <AnimatePresence initial={false}>
-          {segments.map((segment) => {
+          {segments.map((segment, index) => {
             if (segment.type === 'node') {
               return (
                 <TreeNodeComp node={segment.node} key={segment.node.uid} />
@@ -698,7 +702,7 @@ const Tree = <T extends Record<string, unknown> = any>(
             // source and cancels the drag before dragOver/drop can fire.
             return (
               <motion.div
-                key={segment.pUid + '\x01children'}
+                key={segment.pUid + index + '\x01children'}
                 initial={{ height: 0, opacity: 0 }}
                 animate={{ height: 'auto', opacity: 1 }}
                 exit={{ height: 0, opacity: 0 }}