@rainbow-oh/yee-c 0.8.15 → 0.8.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/dist/cjs/Search/search.js +1 -1
  2. package/dist/cjs/Table/demo/fixed.d.ts +3 -0
  3. package/dist/cjs/Table/demo/fixed.js +123 -0
  4. package/dist/cjs/Table/hooks/useColumns.d.ts +2 -1
  5. package/dist/cjs/Table/hooks/useColumns.js +4 -3
  6. package/dist/cjs/Table/style/index.less +23 -3
  7. package/dist/cjs/Table/table.js +67 -21
  8. package/dist/cjs/Table/util/index.d.ts +1 -1
  9. package/dist/cjs/Table/util/index.js +16 -3
  10. package/dist/cjs/Tree/interface.d.ts +16 -0
  11. package/dist/cjs/Tree/tree-node.js +7 -2
  12. package/dist/cjs/Tree/tree.d.ts +2 -1
  13. package/dist/cjs/Tree/tree.js +6 -2
  14. package/dist/cjs/Tree/utils/tree-tools.d.ts +1 -0
  15. package/dist/cjs/Tree/utils/tree-tools.js +3 -1
  16. package/dist/cjs/style/themes.css +1 -1
  17. package/dist/cjs/style/variables.css +1 -1
  18. package/dist/cjs/version.d.ts +1 -1
  19. package/dist/cjs/version.js +1 -1
  20. package/dist/esm/Search/search.js +1 -1
  21. package/dist/esm/Table/demo/fixed.d.ts +3 -0
  22. package/dist/esm/Table/demo/fixed.js +84 -0
  23. package/dist/esm/Table/hooks/useColumns.d.ts +2 -1
  24. package/dist/esm/Table/hooks/useColumns.js +4 -3
  25. package/dist/esm/Table/style/index.less +23 -3
  26. package/dist/esm/Table/table.js +85 -26
  27. package/dist/esm/Table/util/index.d.ts +1 -1
  28. package/dist/esm/Table/util/index.js +16 -3
  29. package/dist/esm/Tree/interface.d.ts +16 -0
  30. package/dist/esm/Tree/tree-node.js +12 -2
  31. package/dist/esm/Tree/tree.d.ts +2 -1
  32. package/dist/esm/Tree/tree.js +15 -13
  33. package/dist/esm/Tree/utils/tree-tools.d.ts +1 -0
  34. package/dist/esm/Tree/utils/tree-tools.js +4 -1
  35. package/dist/esm/style/themes.css +1 -1
  36. package/dist/esm/style/variables.css +1 -1
  37. package/dist/esm/version.d.ts +1 -1
  38. package/dist/esm/version.js +1 -1
  39. package/dist/umd/yee-c.min.css +1 -1
  40. package/dist/umd/yee-c.min.js +1 -1
  41. package/package.json +1 -1
  42. package/src/Search/search.tsx +1 -1
  43. package/src/Table/demo/fixed.tsx +92 -0
  44. package/src/Table/hooks/useColumns.ts +4 -2
  45. package/src/Table/index.en-US.md +1 -0
  46. package/src/Table/index.zh-CN.md +1 -0
  47. package/src/Table/style/index.less +23 -3
  48. package/src/Table/table.tsx +88 -23
  49. package/src/Table/util/index.ts +32 -7
  50. package/src/Tree/index.en-US.md +20 -2
  51. package/src/Tree/index.zh-CN.md +20 -2
  52. package/src/Tree/interface.ts +16 -1
  53. package/src/Tree/tree-node.tsx +15 -2
  54. package/src/Tree/tree.tsx +6 -2
  55. package/src/Tree/utils/tree-tools.ts +4 -1
  56. package/src/version.ts +1 -1
@@ -274,7 +274,7 @@ var Search = import_react.default.forwardRef(
274
274
  role: "searchbox",
275
275
  "aria-autocomplete": hasPopup ? "list" : void 0,
276
276
  "aria-controls": hasPopup && open ? listboxId : void 0,
277
- "aria-activedescendant": hasPopup && open && focusedKey != null ? String(focusedKey) : void 0
277
+ "aria-activedescendant": hasPopup && open && focusedKey !== null ? String(focusedKey) : void 0
278
278
  })
279
279
  ),
280
280
  loading ? /* @__PURE__ */ import_react.default.createElement(import_Spin.default, { variant: "ring", size: "small", "aria-label": "Loading" }) : renderSuffix()
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ declare const _default: () => React.JSX.Element;
3
+ export default _default;
@@ -0,0 +1,123 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __export = (target, all) => {
8
+ for (var name in all)
9
+ __defProp(target, name, { get: all[name], enumerable: true });
10
+ };
11
+ var __copyProps = (to, from, except, desc) => {
12
+ if (from && typeof from === "object" || typeof from === "function") {
13
+ for (let key of __getOwnPropNames(from))
14
+ if (!__hasOwnProp.call(to, key) && key !== except)
15
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
+ }
17
+ return to;
18
+ };
19
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
20
+ // If the importer is in node compatibility mode or this is not an ESM
21
+ // file that has been converted to a CommonJS file using a Babel-
22
+ // compatible transform (i.e. "__esModule" has not been set), then set
23
+ // "default" to the CommonJS "module.exports" for node compatibility.
24
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
25
+ mod
26
+ ));
27
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
28
+
29
+ // src/Table/demo/fixed.tsx
30
+ var fixed_exports = {};
31
+ __export(fixed_exports, {
32
+ default: () => fixed_default
33
+ });
34
+ module.exports = __toCommonJS(fixed_exports);
35
+ var import_yee_c = require("../..");
36
+ var import_react = __toESM(require("react"));
37
+ var columns = [
38
+ {
39
+ title: "Name",
40
+ dataIndex: "name",
41
+ key: "name",
42
+ fixed: "left",
43
+ width: 140
44
+ },
45
+ {
46
+ title: "Age",
47
+ dataIndex: "age",
48
+ key: "age",
49
+ fixed: "left",
50
+ width: 100
51
+ },
52
+ {
53
+ title: "Address",
54
+ dataIndex: "address",
55
+ key: "address",
56
+ width: 240
57
+ },
58
+ {
59
+ title: "Company",
60
+ dataIndex: "company",
61
+ key: "company",
62
+ width: 180
63
+ },
64
+ {
65
+ title: "Department",
66
+ dataIndex: "department",
67
+ key: "department",
68
+ width: 180
69
+ },
70
+ {
71
+ title: "Email",
72
+ dataIndex: "email",
73
+ key: "email",
74
+ width: 240
75
+ },
76
+ {
77
+ title: "Action",
78
+ key: "action",
79
+ fixed: "right",
80
+ width: 100,
81
+ render: (record) => /* @__PURE__ */ import_react.default.createElement("a", { onClick: () => console.log(record) }, "View")
82
+ }
83
+ ];
84
+ var dataSource = [
85
+ {
86
+ key: "1",
87
+ name: "John Brown",
88
+ age: 32,
89
+ address: "New York No. 1 Lake Park",
90
+ company: "Acme Inc.",
91
+ department: "Engineering",
92
+ email: "john.brown@example.com"
93
+ },
94
+ {
95
+ key: "2",
96
+ name: "Jim Green",
97
+ age: 42,
98
+ address: "London No. 1 Lake Park",
99
+ company: "Globex",
100
+ department: "Marketing",
101
+ email: "jim.green@example.com"
102
+ },
103
+ {
104
+ key: "3",
105
+ name: "Joe Black",
106
+ age: 28,
107
+ address: "Sidney No. 1 Lake Park",
108
+ company: "Initech",
109
+ department: "Product",
110
+ email: "joe.black@example.com"
111
+ }
112
+ ];
113
+ var fixed_default = () => /* @__PURE__ */ import_react.default.createElement(
114
+ import_yee_c.Table,
115
+ {
116
+ columns,
117
+ dataSource,
118
+ rowKey: "key",
119
+ pagination: false,
120
+ scroll: { x: 1180 },
121
+ tableLayout: "fixed"
122
+ }
123
+ );
@@ -1,10 +1,11 @@
1
1
  import React from 'react';
2
2
  import type { ColumnProps, ExpandableType, RowSelectionType, WrapedColumnProps } from '../interface';
3
- export default function useColumns({ children, columns, rowSelection, expandable, }: {
3
+ export default function useColumns({ children, columns, rowSelection, expandable, measuredColumnWidths, }: {
4
4
  children?: React.ReactElement<ColumnProps> | React.ReactElement<ColumnProps>[];
5
5
  columns: ColumnProps[];
6
6
  rowSelection?: RowSelectionType;
7
7
  expandable?: ExpandableType;
8
+ measuredColumnWidths?: number[];
8
9
  }): {
9
10
  wrapedColumns: WrapedColumnProps[];
10
11
  headerRows: import("../interface").HeaderCell[][];
@@ -63,7 +63,8 @@ function useColumns({
63
63
  children,
64
64
  columns,
65
65
  rowSelection,
66
- expandable
66
+ expandable,
67
+ measuredColumnWidths
67
68
  }) {
68
69
  const childColumns = (0, import_react.useMemo)(() => {
69
70
  return children ? getColumnsFromChild(children) : null;
@@ -72,10 +73,10 @@ function useColumns({
72
73
  const base = (0, import_deepClone.default)(childColumns || columns || []) || [];
73
74
  const tree = (0, import_header.injectSelectionExpand)(base, rowSelection, expandable);
74
75
  const leaves = (0, import_header.flattenLeafColumns)(tree);
75
- const wraped = (0, import_util.handleColumns)(leaves);
76
+ const wraped = (0, import_util.handleColumns)(leaves, measuredColumnWidths);
76
77
  const rows = (0, import_header.parseHeaderRows)(tree, wraped);
77
78
  return { wrapedColumns: wraped, headerRows: rows };
78
- }, [childColumns, columns, rowSelection, expandable]);
79
+ }, [childColumns, columns, rowSelection, expandable, measuredColumnWidths]);
79
80
  return {
80
81
  wrapedColumns,
81
82
  headerRows
@@ -85,15 +85,34 @@
85
85
  overflow: auto;
86
86
 
87
87
  &-wrapper {
88
- overflow: auto;
89
88
  width: 100%;
90
89
 
91
90
  &-scroll-left @{pls}-cell-fixed-left-last {
92
- box-shadow: 6px 0 6px -4px var(--yee-table-fixed-left-after-bs-color);
91
+ &::after {
92
+ content: '';
93
+ pointer-events: none;
94
+ position: absolute;
95
+ display: block;
96
+ height: 100%;
97
+ width: 15px;
98
+ right: -15px;
99
+ top: 0;
100
+ box-shadow: inset 4px 0 8px -4px var(--yee-table-fixed-left-after-bs-color);
101
+ }
93
102
  }
94
103
 
95
104
  &-scroll-right @{pls}-cell-fixed-right-first {
96
- box-shadow: -6px 0 6px -4px var(--yee-table-fixed-right-after-bs-color);
105
+ &::after {
106
+ content: '';
107
+ pointer-events: none;
108
+ position: absolute;
109
+ display: block;
110
+ height: 100%;
111
+ width: 15px;
112
+ left: -15px;
113
+ top: 0;
114
+ box-shadow: inset -4px 0 8px -4px var(--yee-table-fixed-right-after-bs-color);
115
+ }
97
116
  }
98
117
  }
99
118
 
@@ -156,6 +175,7 @@
156
175
  &-fixed-left,
157
176
  &-fixed-right {
158
177
  position: sticky;
178
+ z-index: 1;
159
179
  background-color: var(--yee-table-fixed-column-bg-color);
160
180
  }
161
181
  }
@@ -75,6 +75,7 @@ var import_tbody = __toESM(require("./tbody"));
75
75
  var import_tfooter = __toESM(require("./tfooter"));
76
76
  var import_theader = __toESM(require("./theader"));
77
77
  var import_Config_Provider = require("../Config-Provider");
78
+ var import_useLatest = __toESM(require("../hooks/useLatest"));
78
79
  var import_mergeContextToProps = __toESM(require("../utils/mergeContextToProps"));
79
80
  var import_omit = __toESM(require("../utils/omit"));
80
81
  var import_types = require("../utils/types");
@@ -140,6 +141,7 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
140
141
  "onChange"
141
142
  ]);
142
143
  const dataAttrs = (0, import_types.pickDataAttrs)(rest);
144
+ const [measuredColumnWidths, setMeasuredColumnWidths] = import_react.default.useState();
143
145
  const getRowKey = import_react.default.useCallback(
144
146
  (record, key = rowKey) => {
145
147
  return typeof key === "function" ? key(record) : record[key];
@@ -153,7 +155,8 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
153
155
  children,
154
156
  columns: propColumns,
155
157
  expandable,
156
- rowSelection
158
+ rowSelection,
159
+ measuredColumnWidths
157
160
  });
158
161
  const {
159
162
  data: filteredData,
@@ -212,28 +215,58 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
212
215
  onChange: onSelectionChange
213
216
  } = (0, import_useSelection.default)({ pageData, dataSource, getRowKey, rowSelection, allKeys });
214
217
  const prevFilterRecordsRef = (0, import_react.useRef)(filterRecords);
215
- const contentWrapperRef = (0, import_react.useRef)(null);
216
218
  const contentRef = (0, import_react.useRef)(null);
219
+ const tableRef = (0, import_react.useRef)(null);
217
220
  const [horizontalScroll, setHorizontalScroll] = import_react.default.useState({
218
221
  left: false,
219
222
  right: false
220
223
  });
221
224
  const updateHorizontalScroll = import_react.default.useCallback(() => {
222
- const wrapper = contentWrapperRef.current;
223
225
  const content = contentRef.current;
224
- if (!wrapper || !content)
226
+ if (!content)
225
227
  return;
226
- const scrollContainer = content.scrollWidth - content.clientWidth > 1 ? content : wrapper;
227
- const maxScrollLeft = scrollContainer.scrollWidth - scrollContainer.clientWidth;
228
+ const maxScrollLeft = content.scrollWidth - content.clientWidth;
228
229
  const hasHorizontalScroll = maxScrollLeft > 1;
229
230
  const next = {
230
- left: hasHorizontalScroll && scrollContainer.scrollLeft > 1,
231
- right: hasHorizontalScroll && scrollContainer.scrollLeft < maxScrollLeft - 1
231
+ left: hasHorizontalScroll && content.scrollLeft > 1,
232
+ right: hasHorizontalScroll && content.scrollLeft < maxScrollLeft - 1
232
233
  };
233
234
  setHorizontalScroll(
234
235
  (current2) => current2.left === next.left && current2.right === next.right ? current2 : next
235
236
  );
236
237
  }, []);
238
+ const columnLayoutKey = (0, import_react.useMemo)(
239
+ () => wrapedColumns.map(
240
+ (column, index) => {
241
+ var _a2, _b, _c, _d;
242
+ return `${(_b = (_a2 = column.key) != null ? _a2 : column.dataIndex) != null ? _b : index}:${(_c = column.fixed) != null ? _c : ""}:${(_d = column.width) != null ? _d : ""}`;
243
+ }
244
+ ).join("|"),
245
+ [wrapedColumns]
246
+ );
247
+ const wrapedColumnsRef = (0, import_useLatest.default)(wrapedColumns);
248
+ const updateMeasuredColumnWidths = import_react.default.useCallback(() => {
249
+ var _a2;
250
+ const columns = wrapedColumnsRef.current;
251
+ if (!columns.some((column) => column.fixed))
252
+ return;
253
+ const colElements = (_a2 = tableRef.current) == null ? void 0 : _a2.querySelectorAll(
254
+ ":scope > colgroup > col"
255
+ );
256
+ if (!colElements || colElements.length !== columns.length)
257
+ return;
258
+ const nextWidths = Array.from(
259
+ colElements,
260
+ (column) => Math.round(column.getBoundingClientRect().width)
261
+ );
262
+ if (nextWidths.some((width) => !Number.isFinite(width) || width <= 0)) {
263
+ return;
264
+ }
265
+ setMeasuredColumnWidths((current2) => {
266
+ const unchanged = (current2 == null ? void 0 : current2.length) === nextWidths.length && current2.every((width, index) => width === nextWidths[index]);
267
+ return unchanged ? current2 : nextWidths;
268
+ });
269
+ }, [wrapedColumnsRef]);
237
270
  (0, import_react.useEffect)(() => {
238
271
  if (prevFilterRecordsRef.current === filterRecords)
239
272
  return;
@@ -258,20 +291,34 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
258
291
  onChange
259
292
  ]);
260
293
  (0, import_react.useEffect)(() => {
261
- updateHorizontalScroll();
262
- const wrapper = contentWrapperRef.current;
263
294
  const content = contentRef.current;
264
- if (!wrapper || !content)
295
+ const tableElement = tableRef.current;
296
+ if (!content || !tableElement)
265
297
  return void 0;
298
+ const handleResize = () => {
299
+ updateHorizontalScroll();
300
+ updateMeasuredColumnWidths();
301
+ };
266
302
  if (typeof ResizeObserver === "undefined") {
267
- window.addEventListener("resize", updateHorizontalScroll);
268
- return () => window.removeEventListener("resize", updateHorizontalScroll);
303
+ window.addEventListener("resize", handleResize);
304
+ return () => window.removeEventListener("resize", handleResize);
269
305
  }
270
- const resizeObserver = new ResizeObserver(updateHorizontalScroll);
271
- resizeObserver.observe(wrapper);
306
+ const resizeObserver = new ResizeObserver(handleResize);
272
307
  resizeObserver.observe(content);
308
+ resizeObserver.observe(tableElement);
273
309
  return () => resizeObserver.disconnect();
274
- }, [updateHorizontalScroll, wrapedColumns, pageData, scroll == null ? void 0 : scroll.x]);
310
+ }, [updateHorizontalScroll, updateMeasuredColumnWidths]);
311
+ (0, import_react.useEffect)(() => {
312
+ updateHorizontalScroll();
313
+ updateMeasuredColumnWidths();
314
+ }, [
315
+ columnLayoutKey,
316
+ pageData,
317
+ scroll == null ? void 0 : scroll.x,
318
+ scroll == null ? void 0 : scroll.y,
319
+ updateHorizontalScroll,
320
+ updateMeasuredColumnWidths
321
+ ]);
275
322
  const renderHeader = () => {
276
323
  return /* @__PURE__ */ import_react.default.createElement(
277
324
  import_header.default,
@@ -326,6 +373,7 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
326
373
  const renderTable = () => {
327
374
  const tableProps = {
328
375
  style: __spreadProps(__spreadValues({}, styles == null ? void 0 : styles.table), {
376
+ minWidth: scroll == null ? void 0 : scroll.x,
329
377
  tableLayout: (pageData == null ? void 0 : pageData.length) ? tableLayout : void 0
330
378
  }),
331
379
  className: (0, import_clsx.default)(
@@ -346,17 +394,15 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
346
394
  rowKey
347
395
  }
348
396
  },
349
- /* @__PURE__ */ import_react.default.createElement("table", __spreadValues({}, tableProps), /* @__PURE__ */ import_react.default.createElement(import_col_group.default, { columns: wrapedColumns }), renderTHeader(), renderTBody(), renderTFooter())
397
+ /* @__PURE__ */ import_react.default.createElement("table", __spreadValues({ ref: tableRef }, tableProps), /* @__PURE__ */ import_react.default.createElement(import_col_group.default, { columns: wrapedColumns }), renderTHeader(), renderTBody(), renderTFooter())
350
398
  );
351
399
  return /* @__PURE__ */ import_react.default.createElement(
352
400
  "div",
353
401
  {
354
- ref: contentWrapperRef,
355
402
  className: (0, import_clsx.default)(`${prefixCls}-content-wrapper`, {
356
403
  [`${prefixCls}-content-wrapper-scroll-left`]: horizontalScroll.left,
357
404
  [`${prefixCls}-content-wrapper-scroll-right`]: horizontalScroll.right
358
- }),
359
- onScroll: updateHorizontalScroll
405
+ })
360
406
  },
361
407
  /* @__PURE__ */ import_react.default.createElement(
362
408
  "div",
@@ -366,7 +412,7 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
366
412
  [`${prefixCls}-${size}-size`]: size,
367
413
  [`${prefixCls}-fixed-header`]: scroll == null ? void 0 : scroll.y
368
414
  }),
369
- style: { height: scroll == null ? void 0 : scroll.y, width: scroll == null ? void 0 : scroll.x },
415
+ style: { height: scroll == null ? void 0 : scroll.y },
370
416
  onScroll: updateHorizontalScroll
371
417
  },
372
418
  table2
@@ -1,2 +1,2 @@
1
1
  import { WrapedColumnProps } from '../interface';
2
- export declare function handleColumns(columns: Array<WrapedColumnProps>): WrapedColumnProps[];
2
+ export declare function handleColumns(columns: Array<WrapedColumnProps>, measuredColumnWidths?: number[]): WrapedColumnProps[];
@@ -39,7 +39,20 @@ __export(util_exports, {
39
39
  handleColumns: () => handleColumns
40
40
  });
41
41
  module.exports = __toCommonJS(util_exports);
42
- function handleColumns(columns) {
42
+ var getColumnWidth = (column, index, measuredColumnWidths) => {
43
+ const measuredWidth = measuredColumnWidths == null ? void 0 : measuredColumnWidths[index];
44
+ if (Number.isFinite(measuredWidth) && measuredWidth && measuredWidth > 0) {
45
+ return measuredWidth;
46
+ }
47
+ if (typeof column.width === "number") {
48
+ return column.width;
49
+ }
50
+ if (typeof column.width === "string" && /^\s*\d+(?:\.\d+)?px\s*$/.test(column.width)) {
51
+ return Number.parseFloat(column.width);
52
+ }
53
+ return 0;
54
+ };
55
+ function handleColumns(columns, measuredColumnWidths) {
43
56
  var _a, _b;
44
57
  let leftWidthCount = 0;
45
58
  let rightWidthCount = 0;
@@ -53,7 +66,7 @@ function handleColumns(columns) {
53
66
  if (!nextIsFixedLeft) {
54
67
  col.isFixedLeftLast = true;
55
68
  }
56
- leftWidthCount = leftWidthCount + (col.width ? parseFloat(col.width) : 0);
69
+ leftWidthCount += getColumnWidth(col, i, measuredColumnWidths);
57
70
  }
58
71
  }
59
72
  for (let j = columns.length - 1; j >= 0; j--) {
@@ -63,7 +76,7 @@ function handleColumns(columns) {
63
76
  if (((_b = columns[j - 1]) == null ? void 0 : _b.fixed) !== "right") {
64
77
  col.isFixedRightFirst = true;
65
78
  }
66
- rightWidthCount = rightWidthCount + (col.width ? parseFloat(col.width) : 0);
79
+ rightWidthCount += getColumnWidth(col, j, measuredColumnWidths);
67
80
  }
68
81
  }
69
82
  return columns;
@@ -61,6 +61,13 @@ export type TreeNode<T> = {
61
61
  * All descendant uids (collected bottom-up). Used for check/uncheck propagation.
62
62
  */
63
63
  childUids?: Array<string>;
64
+ /**
65
+ * Extra content rendered after the label (e.g. tags, badges, action buttons).
66
+ * Only takes effect when `labelRender` is NOT provided at the Tree level.
67
+ * When `labelRender` is present, access this value via `node.extra` in your
68
+ * custom render function.
69
+ */
70
+ extra?: React.ReactNode | ((node: T) => React.ReactNode);
64
71
  /**
65
72
  * Original data
66
73
  */
@@ -157,6 +164,14 @@ export interface TreeProps<T> extends DataAttributeProps {
157
164
  * @default false
158
165
  */
159
166
  multiple?: boolean;
167
+ /**
168
+ * Custom render function for node label.
169
+ * When provided, takes full control of the label area rendering.
170
+ * The node's `extra` will NOT be appended automatically in this case;
171
+ * access it via `node.extra` if you need it in your custom render.
172
+ * The original `label` string is still used for `title` attribute fallback.
173
+ */
174
+ labelRender?: (node: TreeNode<T>) => React.ReactNode;
160
175
  /**
161
176
  * Customize node key, title, children field names
162
177
  */
@@ -164,6 +179,7 @@ export interface TreeProps<T> extends DataAttributeProps {
164
179
  key?: keyof T;
165
180
  label?: keyof T;
166
181
  children?: keyof T;
182
+ extra?: keyof T;
167
183
  };
168
184
  /**
169
185
  * Asynchronous data loading
@@ -64,6 +64,7 @@ var Node = (props) => {
64
64
  disabled,
65
65
  depth,
66
66
  icon,
67
+ extra,
67
68
  original,
68
69
  lines
69
70
  } = node;
@@ -78,6 +79,7 @@ var Node = (props) => {
78
79
  indeterminateUids,
79
80
  expandedUids,
80
81
  switcherIcon,
82
+ labelRender,
81
83
  draggable,
82
84
  draggingUid,
83
85
  dropState,
@@ -132,6 +134,8 @@ var Node = (props) => {
132
134
  const _title = title || (typeof label === "string" ? label : void 0);
133
135
  const mergedIcon = icon || contextIcon;
134
136
  const _icon = typeof mergedIcon === "function" ? mergedIcon(original) : mergedIcon;
137
+ const content = labelRender ? labelRender(node) : label;
138
+ const _extra = !labelRender && extra ? typeof extra === "function" ? extra(original) : extra : null;
135
139
  return /* @__PURE__ */ import_react.default.createElement(
136
140
  import_Button.default,
137
141
  {
@@ -144,7 +148,8 @@ var Node = (props) => {
144
148
  icon: showIcon ? _icon : void 0,
145
149
  onClick: disabled ? void 0 : () => onSelect(uid)
146
150
  },
147
- label
151
+ content,
152
+ _extra && /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-node-extra` }, _extra)
148
153
  );
149
154
  };
150
155
  const renderEmptyNodes = (depth2) => {
@@ -166,7 +171,7 @@ var Node = (props) => {
166
171
  {
167
172
  "aria-hidden": "true",
168
173
  className: `${prefixCls}-node-indent`,
169
- key: index
174
+ key: `node-empty-${index}`
170
175
  }
171
176
  ));
172
177
  };
@@ -1,5 +1,5 @@
1
1
  import React, { ChangeEvent } from 'react';
2
- import type { DragPosition, TreeProps } from './interface';
2
+ import type { DragPosition, TreeNode, TreeProps } from './interface';
3
3
  import './style/index.less';
4
4
  type DropState = {
5
5
  uid: string;
@@ -12,6 +12,7 @@ export declare const TreeContext: React.Context<{
12
12
  icon?: React.ReactNode | ((props: any) => React.ReactNode);
13
13
  showLine?: boolean | undefined;
14
14
  switcherIcon?: [React.ReactNode, React.ReactNode] | undefined;
15
+ labelRender?: ((node: TreeNode<any>) => React.ReactNode) | undefined;
15
16
  selectedUids: Set<string>;
16
17
  checkedUids: Set<string>;
17
18
  indeterminateUids: Set<string>;
@@ -184,6 +184,7 @@ var Tree = (baseprops) => {
184
184
  onSelect,
185
185
  onCheck,
186
186
  onExpand,
187
+ labelRender,
187
188
  virtual = false,
188
189
  height,
189
190
  itemHeight = 28
@@ -212,6 +213,7 @@ var Tree = (baseprops) => {
212
213
  "onSelect",
213
214
  "onCheck",
214
215
  "onExpand",
216
+ "labelRender",
215
217
  "virtual",
216
218
  "height",
217
219
  "itemHeight"
@@ -498,6 +500,7 @@ var Tree = (baseprops) => {
498
500
  icon,
499
501
  showLine,
500
502
  switcherIcon,
503
+ labelRender,
501
504
  selectedUids: selectedUidSet,
502
505
  checkedUids: checkedUidSet,
503
506
  indeterminateUids: indeterminateUidSet,
@@ -520,6 +523,7 @@ var Tree = (baseprops) => {
520
523
  icon,
521
524
  showLine,
522
525
  switcherIcon,
526
+ labelRender,
523
527
  selectedUidSet,
524
528
  checkedUidSet,
525
529
  indeterminateUidSet,
@@ -609,14 +613,14 @@ var Tree = (baseprops) => {
609
613
  role: "tree",
610
614
  onDragEnd: handleDragEnd
611
615
  }, dataAttrs),
612
- /* @__PURE__ */ import_react2.default.createElement(TreeContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react2.default.createElement(import_react.AnimatePresence, { initial: false }, segments.map((segment) => {
616
+ /* @__PURE__ */ import_react2.default.createElement(TreeContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react2.default.createElement(import_react.AnimatePresence, { initial: false }, segments.map((segment, index) => {
613
617
  if (segment.type === "node") {
614
618
  return /* @__PURE__ */ import_react2.default.createElement(import_tree_node.default, { node: segment.node, key: segment.node.uid });
615
619
  }
616
620
  return /* @__PURE__ */ import_react2.default.createElement(
617
621
  import_react.motion.div,
618
622
  {
619
- key: segment.pUid + "children",
623
+ key: segment.pUid + index + "children",
620
624
  initial: { height: 0, opacity: 0 },
621
625
  animate: { height: "auto", opacity: 1 },
622
626
  exit: { height: 0, opacity: 0 },
@@ -49,6 +49,7 @@ export declare function tree2array<T extends Record<string, unknown>>(tree: T |
49
49
  key: keyof T;
50
50
  label: keyof T;
51
51
  children: keyof T;
52
+ extra?: keyof T;
52
53
  }): [TreeNode<T>[], Map<string, TreeNode<T>>];
53
54
  /**
54
55
  * Check whether array `a` contains every element in `b`.
@@ -135,7 +135,7 @@ function tree2array(tree, fieldNames) {
135
135
  const data = Array.isArray(tree) ? tree : [tree];
136
136
  const res = [];
137
137
  const map = /* @__PURE__ */ new Map();
138
- const { key, label, children } = fieldNames;
138
+ const { key, label, children, extra } = fieldNames;
139
139
  function walk({
140
140
  data: node,
141
141
  pUid,
@@ -147,6 +147,7 @@ function tree2array(tree, fieldNames) {
147
147
  const rawKey = node[key];
148
148
  const _label = node[label];
149
149
  const _children = node[children];
150
+ const _extra = extra ? node[extra] : node.extra;
150
151
  const nextPath = [...path, rawKey];
151
152
  const uid = pUid ? `${pUid}\0${String(rawKey)}` : String(rawKey);
152
153
  const isParent = Array.isArray(_children) && _children.length > 0;
@@ -155,6 +156,7 @@ function tree2array(tree, fieldNames) {
155
156
  key: rawKey,
156
157
  label: _label,
157
158
  title: node.title,
159
+ extra: _extra,
158
160
  path,
159
161
  pUid,
160
162
  depth,
@@ -1,7 +1,7 @@
1
1
  /*!
2
2
  * @rainbow-oh/yee-c CSS Variables
3
3
  * Auto-generated, do not edit manually
4
- * Generated on 2026-07-31T06:58:34.574Z
4
+ * Generated on 2026-08-05T09:43:58.935Z
5
5
  */
6
6
 
7
7
  /* ========== color.blue.css ========== */
@@ -1,7 +1,7 @@
1
1
  /*!
2
2
  * @rainbow-oh/yee-c CSS Variables
3
3
  * Auto-generated, do not edit manually
4
- * Generated on 2026-07-31T06:58:34.574Z
4
+ * Generated on 2026-08-05T09:43:58.935Z
5
5
  */
6
6
 
7
7
  /* ========== color.css ========== */
@@ -3,4 +3,4 @@ declare global {
3
3
  __yee_c_version__: string;
4
4
  }
5
5
  }
6
- export declare const version = "0.8.15";
6
+ export declare const version = "0.8.17";
@@ -22,7 +22,7 @@ __export(version_exports, {
22
22
  version: () => version
23
23
  });
24
24
  module.exports = __toCommonJS(version_exports);
25
- var version = "0.8.15";
25
+ var version = "0.8.17";
26
26
  if (typeof window !== "undefined") {
27
27
  window.__yee_c_version__ = version;
28
28
  }
@@ -197,7 +197,7 @@ var Search = /*#__PURE__*/React.forwardRef(function (baseProps, ref) {
197
197
  role: "searchbox",
198
198
  "aria-autocomplete": hasPopup ? 'list' : undefined,
199
199
  "aria-controls": hasPopup && open ? listboxId : undefined,
200
- "aria-activedescendant": hasPopup && open && focusedKey != null ? String(focusedKey) : undefined
200
+ "aria-activedescendant": hasPopup && open && focusedKey !== null ? String(focusedKey) : undefined
201
201
  })), loading ? /*#__PURE__*/React.createElement(Spin, {
202
202
  variant: "ring",
203
203
  size: "small",
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ declare const _default: () => React.JSX.Element;
3
+ export default _default;