@rainbow-oh/yee-c 0.8.15 → 0.8.17

package/dist/esm/Table/demo/fixed.js

@@ -0,0 +1,84 @@
+import { Table } from "../..";
+import React from 'react';
+var columns = [{
+  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: function render(record) {
+    return /*#__PURE__*/React.createElement("a", {
+      onClick: function onClick() {
+        return console.log(record);
+      }
+    }, "View");
+  }
+}];
+var 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 (function () {
+  return /*#__PURE__*/React.createElement(Table, {
+    columns: columns,
+    dataSource: dataSource,
+    rowKey: "key",
+    pagination: false,
+    scroll: {
+      x: 1180
+    },
+    tableLayout: "fixed"
+  });
+});

package/dist/esm/Table/hooks/useColumns.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import type { ColumnProps, ExpandableType, RowSelectionType, WrapedColumnProps } from '../interface';
-export default function useColumns({ children, columns, rowSelection, expandable, }: {
+export default function useColumns({ children, columns, rowSelection, expandable, measuredColumnWidths, }: {
     children?: React.ReactElement<ColumnProps> | React.ReactElement<ColumnProps>[];
     columns: ColumnProps[];
     rowSelection?: RowSelectionType;
     expandable?: ExpandableType;
+    measuredColumnWidths?: number[];
 }): {
     wrapedColumns: WrapedColumnProps[];
     headerRows: import("../interface").HeaderCell[][];

package/dist/esm/Table/hooks/useColumns.js

@@ -21,7 +21,8 @@ export default function useColumns(_ref) {
   var children = _ref.children,
     columns = _ref.columns,
     rowSelection = _ref.rowSelection,
-    expandable = _ref.expandable;
+    expandable = _ref.expandable,
+    measuredColumnWidths = _ref.measuredColumnWidths;
   var childColumns = useMemo(function () {
     return children ? getColumnsFromChild(children) : null;
   }, [children]);
@@ -33,13 +34,13 @@ export default function useColumns(_ref) {
       var base = deepClone(childColumns || columns || []) || [];
       var tree = injectSelectionExpand(base, rowSelection, expandable);
       var leaves = flattenLeafColumns(tree);
-      var wraped = handleColumns(leaves);
+      var wraped = handleColumns(leaves, measuredColumnWidths);
       var rows = parseHeaderRows(tree, wraped);
       return {
         wrapedColumns: wraped,
         headerRows: rows
       };
-    }, [childColumns, columns, rowSelection, expandable]),
+    }, [childColumns, columns, rowSelection, expandable, measuredColumnWidths]),
     wrapedColumns = _useMemo.wrapedColumns,
     headerRows = _useMemo.headerRows;
   return {

package/dist/esm/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/dist/esm/Table/table.js

@@ -27,6 +27,7 @@ import TBody from "./tbody";
 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";
@@ -73,6 +74,10 @@ var Table = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
     onChange = props.onChange,
     rest = _objectWithoutProperties(props, _excluded);
   var dataAttrs = pickDataAttrs(rest);
+  var _React$useState = React.useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    measuredColumnWidths = _React$useState2[0],
+    setMeasuredColumnWidths = _React$useState2[1];
   var getRowKey = React.useCallback(function (record) {
     var key = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : rowKey;
     return typeof key === 'function' ? key(record) : record[key];
@@ -86,7 +91,8 @@ var Table = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
       children: children,
       columns: propColumns,
       expandable: expandable,
-      rowSelection: rowSelection
+      rowSelection: rowSelection,
+      measuredColumnWidths: measuredColumnWidths
     }),
     wrapedColumns = _useColumns.wrapedColumns,
     headerRows = _useColumns.headerRows;
@@ -165,30 +171,70 @@ var Table = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
 
   // Track filter changes to emit onChange after filtered data is recalculated
   var prevFilterRecordsRef = useRef(filterRecords);
-  var contentWrapperRef = useRef(null);
   var contentRef = useRef(null);
-  var _React$useState = React.useState({
+  var tableRef = useRef(null);
+  var _React$useState3 = React.useState({
       left: false,
       right: false
     }),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    horizontalScroll = _React$useState2[0],
-    setHorizontalScroll = _React$useState2[1];
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    horizontalScroll = _React$useState4[0],
+    setHorizontalScroll = _React$useState4[1];
   var updateHorizontalScroll = React.useCallback(function () {
-    var wrapper = contentWrapperRef.current;
     var content = contentRef.current;
-    if (!wrapper || !content) return;
-    var scrollContainer = content.scrollWidth - content.clientWidth > 1 ? content : wrapper;
-    var maxScrollLeft = scrollContainer.scrollWidth - scrollContainer.clientWidth;
+    if (!content) return;
+    var maxScrollLeft = content.scrollWidth - content.clientWidth;
     var hasHorizontalScroll = maxScrollLeft > 1;
     var next = {
-      left: hasHorizontalScroll && scrollContainer.scrollLeft > 1,
-      right: hasHorizontalScroll && scrollContainer.scrollLeft < maxScrollLeft - 1
+      left: hasHorizontalScroll && content.scrollLeft > 1,
+      right: hasHorizontalScroll && content.scrollLeft < maxScrollLeft - 1
     };
     setHorizontalScroll(function (current) {
       return current.left === next.left && current.right === next.right ? current : next;
     });
   }, []);
+
+  // A primitive signature of everything in the columns that can affect the
+  // measured layout, used as an effect dependency instead of the array itself.
+  var columnLayoutKey = useMemo(function () {
+    return wrapedColumns.map(function (column, index) {
+      var _ref2, _column$key, _column$fixed, _column$width;
+      return "".concat((_ref2 = (_column$key = column.key) !== null && _column$key !== void 0 ? _column$key : column.dataIndex) !== null && _ref2 !== void 0 ? _ref2 : index, ":").concat((_column$fixed = column.fixed) !== null && _column$fixed !== void 0 ? _column$fixed : '', ":").concat((_column$width = column.width) !== null && _column$width !== void 0 ? _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.
+  var wrapedColumnsRef = useLatest(wrapedColumns);
+  var updateMeasuredColumnWidths = React.useCallback(function () {
+    var _tableRef$current;
+    var columns = wrapedColumnsRef.current;
+    if (!columns.some(function (column) {
+      return column.fixed;
+    })) return;
+    var colElements = (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _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.
+    var nextWidths = Array.from(colElements, function (column) {
+      return Math.round(column.getBoundingClientRect().width);
+    });
+    if (nextWidths.some(function (width) {
+      return !Number.isFinite(width) || width <= 0;
+    })) {
+      return;
+    }
+    setMeasuredColumnWidths(function (current) {
+      var unchanged = (current === null || current === void 0 ? void 0 : current.length) === nextWidths.length && current.every(function (width, index) {
+        return width === nextWidths[index];
+      });
+      return unchanged ? current : nextWidths;
+    });
+  }, [wrapedColumnsRef]);
   useEffect(function () {
     if (prevFilterRecordsRef.current === filterRecords) return;
     prevFilterRecordsRef.current = filterRecords;
@@ -204,24 +250,37 @@ var Table = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
       action: 'filter'
     });
   }, [filterRecords, filters, sortedData, pagination, current, pageSize, sorters, onChange]);
+
+  // Observers are attached once: both callbacks are referentially stable.
   useEffect(function () {
-    updateHorizontalScroll();
-    var wrapper = contentWrapperRef.current;
     var content = contentRef.current;
-    if (!wrapper || !content) return undefined;
+    var tableElement = tableRef.current;
+    if (!content || !tableElement) return undefined;
+    var handleResize = function handleResize() {
+      updateHorizontalScroll();
+      updateMeasuredColumnWidths();
+    };
     if (typeof ResizeObserver === 'undefined') {
-      window.addEventListener('resize', updateHorizontalScroll);
+      window.addEventListener('resize', handleResize);
       return function () {
-        return window.removeEventListener('resize', updateHorizontalScroll);
+        return window.removeEventListener('resize', handleResize);
       };
     }
-    var resizeObserver = new ResizeObserver(updateHorizontalScroll);
-    resizeObserver.observe(wrapper);
+    var resizeObserver = new ResizeObserver(handleResize);
     resizeObserver.observe(content);
+    resizeObserver.observe(tableElement);
     return function () {
       return resizeObserver.disconnect();
     };
-  }, [updateHorizontalScroll, wrapedColumns, pageData, scroll === null || scroll === void 0 ? void 0 : 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(function () {
+    updateHorizontalScroll();
+    updateMeasuredColumnWidths();
+  }, [columnLayoutKey, pageData, scroll === null || scroll === void 0 ? void 0 : scroll.x, scroll === null || scroll === void 0 ? void 0 : scroll.y, updateHorizontalScroll, updateMeasuredColumnWidths]);
   var renderHeader = function renderHeader() {
     return /*#__PURE__*/React.createElement(Header, {
       prefixCls: prefixCls,
@@ -269,6 +328,7 @@ var Table = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
   var renderTable = function renderTable() {
     var tableProps = {
       style: _objectSpread(_objectSpread({}, styles === null || styles === void 0 ? void 0 : styles.table), {}, {
+        minWidth: scroll === null || scroll === void 0 ? void 0 : scroll.x,
         tableLayout: pageData !== null && pageData !== void 0 && pageData.length ? tableLayout : undefined
       }),
       className: clsx(_defineProperty({}, "".concat(prefixCls, "-bordered"), bordered), classNames === null || classNames === void 0 ? void 0 : classNames.table)
@@ -283,19 +343,18 @@ var Table = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
         locale: locale,
         rowKey: rowKey
       }
-    }, /*#__PURE__*/React.createElement("table", tableProps, /*#__PURE__*/React.createElement(ColGroup, {
+    }, /*#__PURE__*/React.createElement("table", _extends({
+      ref: tableRef
+    }, tableProps), /*#__PURE__*/React.createElement(ColGroup, {
       columns: wrapedColumns
     }), renderTHeader(), renderTBody(), renderTFooter()));
     return /*#__PURE__*/React.createElement("div", {
-      ref: contentWrapperRef,
-      className: clsx("".concat(prefixCls, "-content-wrapper"), _defineProperty(_defineProperty({}, "".concat(prefixCls, "-content-wrapper-scroll-left"), horizontalScroll.left), "".concat(prefixCls, "-content-wrapper-scroll-right"), horizontalScroll.right)),
-      onScroll: updateHorizontalScroll
+      className: clsx("".concat(prefixCls, "-content-wrapper"), _defineProperty(_defineProperty({}, "".concat(prefixCls, "-content-wrapper-scroll-left"), horizontalScroll.left), "".concat(prefixCls, "-content-wrapper-scroll-right"), horizontalScroll.right))
     }, /*#__PURE__*/React.createElement("div", {
       ref: contentRef,
       className: clsx("".concat(prefixCls, "-content"), _defineProperty(_defineProperty({}, "".concat(prefixCls, "-").concat(size, "-size"), size), "".concat(prefixCls, "-fixed-header"), scroll === null || scroll === void 0 ? void 0 : scroll.y)),
       style: {
-        height: scroll === null || scroll === void 0 ? void 0 : scroll.y,
-        width: scroll === null || scroll === void 0 ? void 0 : scroll.x
+        height: scroll === null || scroll === void 0 ? void 0 : scroll.y
       },
       onScroll: updateHorizontalScroll
     }, table));

package/dist/esm/Table/util/index.d.ts

@@ -1,2 +1,2 @@
 import { WrapedColumnProps } from '../interface';
-export declare function handleColumns(columns: Array<WrapedColumnProps>): WrapedColumnProps[];
+export declare function handleColumns(columns: Array<WrapedColumnProps>, measuredColumnWidths?: number[]): WrapedColumnProps[];

package/dist/esm/Table/util/index.js

@@ -4,7 +4,20 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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); }
-export function handleColumns(columns) {
+var getColumnWidth = function getColumnWidth(column, index, measuredColumnWidths) {
+  var measuredWidth = measuredColumnWidths === null || measuredColumnWidths === void 0 ? void 0 : 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, measuredColumnWidths) {
   var leftWidthCount = 0;
   var rightWidthCount = 0;
   for (var i = 0; i < columns.length; i++) {
@@ -20,7 +33,7 @@ export function handleColumns(columns) {
       if (!nextIsFixedLeft) {
         col.isFixedLeftLast = true;
       }
-      leftWidthCount = leftWidthCount + (col.width ? parseFloat(col.width) : 0);
+      leftWidthCount += getColumnWidth(col, i, measuredColumnWidths);
     }
   }
   for (var j = columns.length - 1; j >= 0; j--) {
@@ -33,7 +46,7 @@ export function handleColumns(columns) {
       if (((_columns2 = columns[j - 1]) === null || _columns2 === void 0 ? void 0 : _columns2.fixed) !== 'right') {
         _col.isFixedRightFirst = true;
       }
-      rightWidthCount = rightWidthCount + (_col.width ? parseFloat(_col.width) : 0);
+      rightWidthCount += getColumnWidth(_col, j, measuredColumnWidths);
     }
   }
   return columns;

package/dist/esm/Tree/interface.d.ts

@@ -61,6 +61,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
      */
@@ -157,6 +164,14 @@ 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
      */
@@ -164,6 +179,7 @@ export interface TreeProps<T> extends DataAttributeProps {
         key?: keyof T;
         label?: keyof T;
         children?: keyof T;
+        extra?: keyof T;
     };
     /**
      * Asynchronous data loading

package/dist/esm/Tree/tree-node.js

@@ -21,6 +21,7 @@ var Node = function Node(props) {
     disabled = node.disabled,
     depth = node.depth,
     icon = node.icon,
+    extra = node.extra,
     original = node.original,
     lines = node.lines;
   var _useContext = useContext(TreeContext),
@@ -34,6 +35,7 @@ var Node = function Node(props) {
     indeterminateUids = _useContext.indeterminateUids,
     expandedUids = _useContext.expandedUids,
     switcherIcon = _useContext.switcherIcon,
+    labelRender = _useContext.labelRender,
     draggable = _useContext.draggable,
     draggingUid = _useContext.draggingUid,
     dropState = _useContext.dropState,
@@ -86,6 +88,12 @@ var Node = function Node(props) {
     var _title = title || (typeof label === 'string' ? label : undefined);
     var mergedIcon = icon || contextIcon;
     var _icon = typeof mergedIcon === 'function' ? mergedIcon(original) : mergedIcon;
+
+    // labelRender takes full control of the label content when provided
+    var content = labelRender ? labelRender(node) : label;
+
+    // extra: appended after the label content (only when labelRender is NOT used)
+    var _extra = !labelRender && extra ? typeof extra === 'function' ? extra(original) : extra : null;
     return /*#__PURE__*/React.createElement(Button, {
       className: clsx("".concat(prefixCls, "-node-label"), _defineProperty({}, "".concat(prefixCls, "-node-label-selected"), selected)),
       size: "small",
@@ -95,7 +103,9 @@ var Node = function Node(props) {
       onClick: disabled ? undefined : function () {
         return onSelect(uid);
       }
-    }, label);
+    }, content, _extra && /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefixCls, "-node-extra")
+    }, _extra));
   };
   var renderEmptyNodes = function renderEmptyNodes(depth) {
     var temp = new Array(depth).fill(0);
@@ -111,7 +121,7 @@ var Node = function Node(props) {
       return /*#__PURE__*/React.createElement("span", {
         "aria-hidden": "true",
         className: "".concat(prefixCls, "-node-indent"),
-        key: index
+        key: "node-empty-".concat(index)
       });
     });
   };

package/dist/esm/Tree/tree.d.ts

@@ -1,5 +1,5 @@
 import React, { ChangeEvent } from 'react';
-import type { DragPosition, TreeProps } from './interface';
+import type { DragPosition, TreeNode, TreeProps } from './interface';
 import './style/index.less';
 type DropState = {
     uid: string;
@@ -12,6 +12,7 @@ export declare const TreeContext: React.Context<{
     icon?: React.ReactNode | ((props: any) => React.ReactNode);
     showLine?: boolean | undefined;
     switcherIcon?: [React.ReactNode, React.ReactNode] | undefined;
+    labelRender?: ((node: TreeNode<any>) => React.ReactNode) | undefined;
     selectedUids: Set<string>;
     checkedUids: Set<string>;
     indeterminateUids: Set<string>;

package/dist/esm/Tree/tree.js

@@ -1,5 +1,5 @@
 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); }
-var _excluded = ["prefixCls", "className", "style", "dataSource", "fieldNames", "defaultExpandAll", "expandedKeys", "defaultExpandedKeys", "selectedKeys", "defaultSelectedKeys", "checkedKeys", "defaultCheckedKeys", "checkable", "multiple", "showIcon", "icon", "showLine", "switcherIcon", "draggable", "allowDrop", "onDrop", "onSelect", "onCheck", "onExpand", "virtual", "height", "itemHeight"];
+var _excluded = ["prefixCls", "className", "style", "dataSource", "fieldNames", "defaultExpandAll", "expandedKeys", "defaultExpandedKeys", "selectedKeys", "defaultSelectedKeys", "checkedKeys", "defaultCheckedKeys", "checkable", "multiple", "showIcon", "icon", "showLine", "switcherIcon", "draggable", "allowDrop", "onDrop", "onSelect", "onCheck", "onExpand", "labelRender", "virtual", "height", "itemHeight"];
 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; }
@@ -134,8 +134,8 @@ function uidsToKeys(uids, map) {
   try {
     for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
       var _uid = _step2.value;
-      var node = map.get(_uid);
-      if (node) keys.push(node.key);
+      var _node = map.get(_uid);
+      if (_node) keys.push(_node.key);
     }
   } catch (err) {
     _iterator2.e(err);
@@ -210,6 +210,7 @@ var Tree = function Tree(baseprops) {
     onSelect = props.onSelect,
     onCheck = props.onCheck,
     onExpand = props.onExpand,
+    labelRender = props.labelRender,
     _props$virtual = props.virtual,
     virtual = _props$virtual === void 0 ? false : _props$virtual,
     height = props.height,
@@ -570,6 +571,7 @@ var Tree = function Tree(baseprops) {
       icon: icon,
       showLine: showLine,
       switcherIcon: switcherIcon,
+      labelRender: labelRender,
       selectedUids: selectedUidSet,
       checkedUids: checkedUidSet,
       indeterminateUids: indeterminateUidSet,
@@ -585,7 +587,7 @@ var Tree = function Tree(baseprops) {
       onNodeDragLeave: handleDragLeave,
       onNodeDrop: handleDrop
     };
-  }, [prefixCls, checkable, showIcon, icon, showLine, switcherIcon, selectedUidSet, checkedUidSet, indeterminateUidSet, expandedUidSet, draggable, draggingUid, dropState,
+  }, [prefixCls, checkable, showIcon, icon, showLine, switcherIcon, labelRender, selectedUidSet, checkedUidSet, indeterminateUidSet, expandedUidSet, draggable, draggingUid, dropState,
   // handlers are stable (useEvent), but listed for correctness
   handleCheck, handleSelect, handleExpand, handleDragStart, handleDragOver, handleDragLeave, handleDrop]);
 
@@ -652,8 +654,8 @@ var Tree = function Tree(baseprops) {
     _step9;
   try {
     for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) {
-      var node = _step9.value;
-      if (node.depth === 0) {
+      var _node2 = _step9.value;
+      if (_node2.depth === 0) {
         // Root nodes are always visible, render directly without animation
         if (currentGroup) {
           segments.push(_objectSpread({
@@ -663,12 +665,12 @@ var Tree = function Tree(baseprops) {
         }
         segments.push({
           type: 'node',
-          node: node
+          node: _node2
         });
       } else {
         // Non-root: group consecutive children under the same parent
-        if (currentGroup && currentGroup.pUid === node.pUid) {
-          currentGroup.nodes.push(node);
+        if (currentGroup && currentGroup.pUid === _node2.pUid) {
+          currentGroup.nodes.push(_node2);
         } else {
           if (currentGroup) {
             segments.push(_objectSpread({
@@ -676,8 +678,8 @@ var Tree = function Tree(baseprops) {
             }, currentGroup));
           }
           currentGroup = {
-            pUid: node.pUid,
-            nodes: [node]
+            pUid: _node2.pUid,
+            nodes: [_node2]
           };
         }
       }
@@ -701,7 +703,7 @@ var Tree = function Tree(baseprops) {
     value: contextValue
   }, /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
-  }, segments.map(function (segment) {
+  }, segments.map(function (segment, index) {
     if (segment.type === 'node') {
       return /*#__PURE__*/React.createElement(TreeNodeComp, {
         node: segment.node,
@@ -712,7 +714,7 @@ var Tree = function Tree(baseprops) {
     // Replacing this tree after dragStart removes the browser's drag
     // source and cancels the drag before dragOver/drop can fire.
     return /*#__PURE__*/React.createElement(motion.div, {
-      key: segment.pUid + '\x01children',
+      key: segment.pUid + index + '\x01children',
       initial: {
         height: 0,
         opacity: 0

package/dist/esm/Tree/utils/tree-tools.d.ts

@@ -49,6 +49,7 @@ export declare function tree2array<T extends Record<string, unknown>>(tree: T |
     key: keyof T;
     label: keyof T;
     children: keyof T;
+    extra?: keyof T;
 }): [TreeNode<T>[], Map<string, TreeNode<T>>];
 /**
  * Check whether array `a` contains every element in `b`.

package/dist/esm/Tree/utils/tree-tools.js

@@ -172,7 +172,8 @@ export function tree2array(tree, fieldNames) {
   var map = new Map();
   var key = fieldNames.key,
     label = fieldNames.label,
-    children = fieldNames.children;
+    children = fieldNames.children,
+    extra = fieldNames.extra;
 
   /**
    * Walk returns the list of descendant uids so the parent can collect them
@@ -190,6 +191,7 @@ export function tree2array(tree, fieldNames) {
     var rawKey = node[key];
     var _label = node[label];
     var _children = node[children];
+    var _extra = extra ? node[extra] : node.extra;
     var nextPath = [].concat(_toConsumableArray(path), [rawKey]);
     var uid = pUid ? "".concat(pUid, "\0").concat(String(rawKey)) : String(rawKey);
     var isParent = Array.isArray(_children) && _children.length > 0;
@@ -200,6 +202,7 @@ export function tree2array(tree, fieldNames) {
       key: rawKey,
       label: _label,
       title: node.title,
+      extra: _extra,
       path: path,
       pUid: pUid,
       depth: depth,

package/dist/esm/style/themes.css

@@ -1,7 +1,7 @@
 /*!
  * @rainbow-oh/yee-c CSS Variables
  * Auto-generated, do not edit manually
- * Generated on 2026-07-31T06:58:34.574Z
+ * Generated on 2026-08-05T09:43:58.935Z
  */
 
 /* ========== color.blue.css ========== */

package/dist/esm/style/variables.css

@@ -1,7 +1,7 @@
 /*!
  * @rainbow-oh/yee-c CSS Variables
  * Auto-generated, do not edit manually
- * Generated on 2026-07-31T06:58:34.574Z
+ * Generated on 2026-08-05T09:43:58.935Z
  */
 
 /* ========== color.css ========== */