react-glide-table 1.4.0 → 1.6.0
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.
- package/README.md +32 -2
- package/dist/compound.cjs +1104 -107
- package/dist/compound.d.cts +2 -2
- package/dist/compound.d.ts +2 -2
- package/dist/compound.js +1106 -102
- package/dist/core.cjs +873 -47
- package/dist/core.d.cts +73 -6
- package/dist/core.d.ts +73 -6
- package/dist/core.js +867 -51
- package/dist/index.cjs +1152 -121
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +1134 -113
- package/dist/{types-CHQnBz91.d.cts → types-tkOzBZ4V.d.cts} +93 -1
- package/dist/{types-CHQnBz91.d.ts → types-tkOzBZ4V.d.ts} +93 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -27,20 +27,31 @@ __export(src_exports, {
|
|
|
27
27
|
DEFAULT_TREE_PARENT_ID_FIELD: () => DEFAULT_TREE_PARENT_ID_FIELD,
|
|
28
28
|
DEFAULT_TREE_QTY_FIELD: () => DEFAULT_TREE_QTY_FIELD,
|
|
29
29
|
DataTable: () => DataTable,
|
|
30
|
+
INLINE_SEARCH_MAX_RESULTS: () => INLINE_SEARCH_MAX_RESULTS,
|
|
30
31
|
Table: () => Table,
|
|
31
32
|
applyCellEdit: () => applyCellEdit,
|
|
32
33
|
applyFillData: () => applyFillData,
|
|
33
34
|
applySelectionUpdater: () => applySelectionUpdater,
|
|
34
35
|
buildColumnFreezeOffsets: () => buildColumnFreezeOffsets,
|
|
35
36
|
buildColumnRowSpanMap: () => buildColumnRowSpanMap,
|
|
37
|
+
buildFlatSearchCorpus: () => buildFlatSearchCorpus,
|
|
36
38
|
buildRowsPastePayload: () => buildRowsPastePayload,
|
|
39
|
+
buildSearchMatchKey: () => buildSearchMatchKey,
|
|
40
|
+
buildSearchMatchKeys: () => buildSearchMatchKeys,
|
|
41
|
+
buildTreeSearchCorpus: () => buildTreeSearchCorpus,
|
|
37
42
|
canExpandRow: () => canExpandRow,
|
|
43
|
+
cellValueToSearchText: () => cellValueToSearchText,
|
|
44
|
+
collectAncestorKeysToExpand: () => collectAncestorKeysToExpand,
|
|
38
45
|
collectCopyRowEntries: () => collectCopyRowEntries,
|
|
39
46
|
collectCopyRows: () => collectCopyRows,
|
|
40
47
|
collectFillChanges: () => collectFillChanges,
|
|
41
48
|
collectRowSpanColumns: () => collectRowSpanColumns,
|
|
49
|
+
collectSearchMatchesInRange: () => collectSearchMatchesInRange,
|
|
50
|
+
createSearchRegex: () => createSearchRegex,
|
|
42
51
|
createTable: () => createTable,
|
|
52
|
+
escapeSearchRegex: () => escapeSearchRegex,
|
|
43
53
|
flattenSubtreeRows: () => flattenSubtreeRows,
|
|
54
|
+
formatSearchResultLabel: () => formatSearchResultLabel,
|
|
44
55
|
getCellEditDraftValue: () => getCellEditDraftValue,
|
|
45
56
|
getCellSelectionEdgeStyle: () => getCellSelectionEdgeStyle,
|
|
46
57
|
getColumnEditType: () => getColumnEditType,
|
|
@@ -52,10 +63,15 @@ __export(src_exports, {
|
|
|
52
63
|
isCellInSelection: () => isCellInSelection,
|
|
53
64
|
isColumnEditable: () => isColumnEditable,
|
|
54
65
|
isEditablePasteTarget: () => isEditablePasteTarget,
|
|
66
|
+
mapSearchResultToVisibleItem: () => mapSearchResultToVisibleItem,
|
|
67
|
+
mapSearchResultsToVisibleKeys: () => mapSearchResultsToVisibleKeys,
|
|
55
68
|
measureMergedSpanRowHeights: () => measureMergedSpanRowHeights,
|
|
69
|
+
nextSearchIndex: () => nextSearchIndex,
|
|
70
|
+
nextSearchStride: () => nextSearchStride,
|
|
56
71
|
parseCellEditValue: () => parseCellEditValue,
|
|
57
72
|
parseClipboardTSV: () => parseClipboardTSV,
|
|
58
73
|
parseClipboardTSVWithDepths: () => parseClipboardTSVWithDepths,
|
|
74
|
+
previousSearchIndex: () => previousSearchIndex,
|
|
59
75
|
resolveColumnFreezeSide: () => resolveColumnFreezeSide,
|
|
60
76
|
resolveDataTableLabels: () => resolveDataTableLabels,
|
|
61
77
|
resolvePasteColumnIds: () => resolvePasteColumnIds,
|
|
@@ -69,6 +85,7 @@ __export(src_exports, {
|
|
|
69
85
|
useCellSelection: () => useCellSelection,
|
|
70
86
|
useConvertTreeData: () => useConvertTreeData,
|
|
71
87
|
useGlideTable: () => useGlideTable,
|
|
88
|
+
useInlineSearch: () => useInlineSearch,
|
|
72
89
|
writeSelectionToClipboard: () => writeSelectionToClipboard
|
|
73
90
|
});
|
|
74
91
|
module.exports = __toCommonJS(src_exports);
|
|
@@ -80,7 +97,12 @@ var DEFAULT_DATA_TABLE_LABELS = {
|
|
|
80
97
|
selection: (selectedCount) => selectedCount > 0 ? `\u2713 ${selectedCount} selected` : null,
|
|
81
98
|
expandRow: "Expand row",
|
|
82
99
|
collapseRow: "Collapse row",
|
|
83
|
-
resizeColumn: "Resize column"
|
|
100
|
+
resizeColumn: "Resize column",
|
|
101
|
+
searchPlaceholder: "Search\u2026",
|
|
102
|
+
searchResultHint: "Type to search",
|
|
103
|
+
searchPrevious: "Previous result",
|
|
104
|
+
searchNext: "Next result",
|
|
105
|
+
searchClose: "Close search"
|
|
84
106
|
};
|
|
85
107
|
function resolveDataTableLabels(partial) {
|
|
86
108
|
return {
|
|
@@ -98,7 +120,7 @@ var DEFAULT_TREE_QTY_FIELD = "qty";
|
|
|
98
120
|
// src/core/useGlideTable.ts
|
|
99
121
|
var import_react_table = require("@tanstack/react-table");
|
|
100
122
|
var import_react_virtual = require("@tanstack/react-virtual");
|
|
101
|
-
var
|
|
123
|
+
var import_react5 = require("react");
|
|
102
124
|
|
|
103
125
|
// src/components/ui/table/constants.ts
|
|
104
126
|
var CELL_ALIGN_CLASS = {
|
|
@@ -263,6 +285,36 @@ function getCellSelectionBounds(start, end) {
|
|
|
263
285
|
endCol: Math.max(start.col, end.col)
|
|
264
286
|
};
|
|
265
287
|
}
|
|
288
|
+
function getCellNavigationDelta(key) {
|
|
289
|
+
switch (key) {
|
|
290
|
+
case "ArrowUp":
|
|
291
|
+
case "w":
|
|
292
|
+
case "W":
|
|
293
|
+
return { row: -1, col: 0 };
|
|
294
|
+
case "ArrowDown":
|
|
295
|
+
case "s":
|
|
296
|
+
case "S":
|
|
297
|
+
return { row: 1, col: 0 };
|
|
298
|
+
case "ArrowLeft":
|
|
299
|
+
case "a":
|
|
300
|
+
case "A":
|
|
301
|
+
return { row: 0, col: -1 };
|
|
302
|
+
case "ArrowRight":
|
|
303
|
+
case "d":
|
|
304
|
+
case "D":
|
|
305
|
+
return { row: 0, col: 1 };
|
|
306
|
+
default:
|
|
307
|
+
return null;
|
|
308
|
+
}
|
|
309
|
+
}
|
|
310
|
+
function clampCellPosition(position, rowCount, columnCount) {
|
|
311
|
+
const maxRow = Math.max(rowCount - 1, 0);
|
|
312
|
+
const maxCol = Math.max(columnCount - 1, 0);
|
|
313
|
+
return {
|
|
314
|
+
row: Math.min(Math.max(position.row, 0), maxRow),
|
|
315
|
+
col: Math.min(Math.max(position.col, 0), maxCol)
|
|
316
|
+
};
|
|
317
|
+
}
|
|
266
318
|
function measureMergedSpanRowHeights(rowIndex, rowSpan, cellElement) {
|
|
267
319
|
if (rowSpan <= 1) return void 0;
|
|
268
320
|
const tbody = cellElement?.closest("tbody") ?? (typeof document !== "undefined" ? document.querySelector("tbody.data-table-body") : null);
|
|
@@ -786,26 +838,44 @@ function useCellSelection({
|
|
|
786
838
|
data,
|
|
787
839
|
rows,
|
|
788
840
|
enabled = true,
|
|
841
|
+
columnCount = 0,
|
|
789
842
|
enableSubtreeCopy = false,
|
|
790
843
|
enableInsertPaste = true,
|
|
791
844
|
onDataChange,
|
|
792
845
|
onBatchChange,
|
|
793
|
-
onRowsPaste
|
|
846
|
+
onRowsPaste,
|
|
847
|
+
onCellNavigate
|
|
794
848
|
}) {
|
|
795
849
|
const [dragState, setDragState] = (0, import_react2.useState)(INITIAL_DRAG_STATE);
|
|
796
850
|
const pendingPasteModeRef = (0, import_react2.useRef)(null);
|
|
851
|
+
const dragStateRef = (0, import_react2.useRef)(dragState);
|
|
852
|
+
const onCellNavigateRef = (0, import_react2.useRef)(onCellNavigate);
|
|
853
|
+
dragStateRef.current = dragState;
|
|
854
|
+
onCellNavigateRef.current = onCellNavigate;
|
|
797
855
|
const cellSelectionBounds = getCellSelectionBounds(dragState.start, dragState.end);
|
|
798
856
|
const activeSelectionBounds = enabled ? getActiveSelectionBounds(dragState, cellSelectionBounds) : null;
|
|
799
857
|
const handleCellMouseDown = (0, import_react2.useCallback)(
|
|
800
|
-
(rowIndex, colIndex) => {
|
|
858
|
+
(rowIndex, colIndex, options) => {
|
|
801
859
|
if (!enabled) return;
|
|
802
|
-
setDragState({
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
860
|
+
setDragState((prev) => {
|
|
861
|
+
if (options?.shiftKey && prev.start) {
|
|
862
|
+
return {
|
|
863
|
+
...prev,
|
|
864
|
+
isSelecting: true,
|
|
865
|
+
isFillDragging: false,
|
|
866
|
+
end: { row: rowIndex, col: colIndex },
|
|
867
|
+
fillAnchor: null,
|
|
868
|
+
fillEnd: null
|
|
869
|
+
};
|
|
870
|
+
}
|
|
871
|
+
return {
|
|
872
|
+
isSelecting: true,
|
|
873
|
+
isFillDragging: false,
|
|
874
|
+
start: { row: rowIndex, col: colIndex },
|
|
875
|
+
end: { row: rowIndex, col: colIndex },
|
|
876
|
+
fillAnchor: null,
|
|
877
|
+
fillEnd: null
|
|
878
|
+
};
|
|
809
879
|
});
|
|
810
880
|
},
|
|
811
881
|
[enabled]
|
|
@@ -847,6 +917,53 @@ function useCellSelection({
|
|
|
847
917
|
setDragState(INITIAL_DRAG_STATE);
|
|
848
918
|
}
|
|
849
919
|
}, [enabled]);
|
|
920
|
+
(0, import_react2.useEffect)(() => {
|
|
921
|
+
if (!enabled) return;
|
|
922
|
+
const handleKeyDown = (e) => {
|
|
923
|
+
if (e.ctrlKey || e.metaKey || e.altKey) return;
|
|
924
|
+
if (isEditablePasteTarget(e.target) || isEditablePasteTarget(document.activeElement)) {
|
|
925
|
+
return;
|
|
926
|
+
}
|
|
927
|
+
const delta = getCellNavigationDelta(e.key);
|
|
928
|
+
if (!delta) return;
|
|
929
|
+
const prev = dragStateRef.current;
|
|
930
|
+
if (!prev.start || !prev.end) return;
|
|
931
|
+
if (prev.isSelecting || prev.isFillDragging) return;
|
|
932
|
+
const rowCount = rows.length;
|
|
933
|
+
const resolvedColumnCount = columnCount > 0 ? columnCount : rows[0]?.getVisibleCells().length ?? 0;
|
|
934
|
+
if (rowCount <= 0 || resolvedColumnCount <= 0) return;
|
|
935
|
+
const nextEnd = clampCellPosition(
|
|
936
|
+
{
|
|
937
|
+
row: prev.end.row + delta.row,
|
|
938
|
+
col: prev.end.col + delta.col
|
|
939
|
+
},
|
|
940
|
+
rowCount,
|
|
941
|
+
resolvedColumnCount
|
|
942
|
+
);
|
|
943
|
+
if (nextEnd.row === prev.end.row && nextEnd.col === prev.end.col) return;
|
|
944
|
+
e.preventDefault();
|
|
945
|
+
const nextState = e.shiftKey ? {
|
|
946
|
+
...prev,
|
|
947
|
+
isSelecting: false,
|
|
948
|
+
isFillDragging: false,
|
|
949
|
+
end: nextEnd,
|
|
950
|
+
fillAnchor: null,
|
|
951
|
+
fillEnd: null
|
|
952
|
+
} : {
|
|
953
|
+
isSelecting: false,
|
|
954
|
+
isFillDragging: false,
|
|
955
|
+
start: nextEnd,
|
|
956
|
+
end: nextEnd,
|
|
957
|
+
fillAnchor: null,
|
|
958
|
+
fillEnd: null
|
|
959
|
+
};
|
|
960
|
+
dragStateRef.current = nextState;
|
|
961
|
+
setDragState(nextState);
|
|
962
|
+
onCellNavigateRef.current?.(nextEnd);
|
|
963
|
+
};
|
|
964
|
+
window.addEventListener("keydown", handleKeyDown);
|
|
965
|
+
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
966
|
+
}, [columnCount, enabled, rows]);
|
|
850
967
|
const copySelection = (0, import_react2.useCallback)(
|
|
851
968
|
async (options) => {
|
|
852
969
|
if (!enabled || !activeSelectionBounds) return false;
|
|
@@ -1087,8 +1204,462 @@ function getColumnFreezeStyle(offset, options) {
|
|
|
1087
1204
|
};
|
|
1088
1205
|
}
|
|
1089
1206
|
|
|
1090
|
-
// src/components/ui/table/features/
|
|
1207
|
+
// src/components/ui/table/features/inline-search/inlineSearch.ts
|
|
1208
|
+
var INLINE_SEARCH_MAX_RESULTS = 1e3;
|
|
1209
|
+
var INLINE_SEARCH_TARGET_TICK_MS = 10;
|
|
1210
|
+
var INLINE_SEARCH_INITIAL_STRIDE = 10;
|
|
1211
|
+
function escapeSearchRegex(value) {
|
|
1212
|
+
return value.replace(/([$()*+.?[\\\]^{|}-])/g, "\\$1");
|
|
1213
|
+
}
|
|
1214
|
+
function createSearchRegex(query) {
|
|
1215
|
+
const trimmed = query.trim();
|
|
1216
|
+
if (!trimmed) return null;
|
|
1217
|
+
return new RegExp(escapeSearchRegex(trimmed), "i");
|
|
1218
|
+
}
|
|
1219
|
+
function cellValueToSearchText(value) {
|
|
1220
|
+
if (value == null) return void 0;
|
|
1221
|
+
if (typeof value === "string") return value;
|
|
1222
|
+
if (typeof value === "number" || typeof value === "boolean") {
|
|
1223
|
+
return String(value);
|
|
1224
|
+
}
|
|
1225
|
+
if (Array.isArray(value)) {
|
|
1226
|
+
return value.map((item) => cellValueToSearchText(item) ?? "").join(" ");
|
|
1227
|
+
}
|
|
1228
|
+
if (typeof value === "object") {
|
|
1229
|
+
try {
|
|
1230
|
+
return JSON.stringify(value);
|
|
1231
|
+
} catch {
|
|
1232
|
+
return String(value);
|
|
1233
|
+
}
|
|
1234
|
+
}
|
|
1235
|
+
return String(value);
|
|
1236
|
+
}
|
|
1237
|
+
function formatSearchResultLabel(status) {
|
|
1238
|
+
const countLabel = status.results >= INLINE_SEARCH_MAX_RESULTS ? `over ${INLINE_SEARCH_MAX_RESULTS}` : `${status.results} result${status.results !== 1 ? "s" : ""}`;
|
|
1239
|
+
if (status.selectedIndex >= 0 && status.results > 0) {
|
|
1240
|
+
return `${status.selectedIndex + 1} of ${countLabel}`;
|
|
1241
|
+
}
|
|
1242
|
+
return countLabel;
|
|
1243
|
+
}
|
|
1244
|
+
function nextSearchIndex(selectedIndex, results) {
|
|
1245
|
+
if (results <= 0) return -1;
|
|
1246
|
+
if (selectedIndex < 0) return 0;
|
|
1247
|
+
return (selectedIndex + 1) % results;
|
|
1248
|
+
}
|
|
1249
|
+
function previousSearchIndex(selectedIndex, results) {
|
|
1250
|
+
if (results <= 0) return -1;
|
|
1251
|
+
if (selectedIndex < 0) return results - 1;
|
|
1252
|
+
let next = (selectedIndex - 1) % results;
|
|
1253
|
+
if (next < 0) next += results;
|
|
1254
|
+
return next;
|
|
1255
|
+
}
|
|
1256
|
+
function buildSearchMatchKey(colIndex, rowIndex) {
|
|
1257
|
+
return `${colIndex}:${rowIndex}`;
|
|
1258
|
+
}
|
|
1259
|
+
function buildSearchMatchKeys(results) {
|
|
1260
|
+
const keys = /* @__PURE__ */ new Set();
|
|
1261
|
+
for (const [colIndex, rowIndex] of results) {
|
|
1262
|
+
keys.add(buildSearchMatchKey(colIndex, rowIndex));
|
|
1263
|
+
}
|
|
1264
|
+
return keys;
|
|
1265
|
+
}
|
|
1266
|
+
function collectSearchMatchesInRange(options) {
|
|
1267
|
+
const {
|
|
1268
|
+
query,
|
|
1269
|
+
startRow,
|
|
1270
|
+
rowCount,
|
|
1271
|
+
columnCount,
|
|
1272
|
+
getCellValue,
|
|
1273
|
+
maxResults = INLINE_SEARCH_MAX_RESULTS
|
|
1274
|
+
} = options;
|
|
1275
|
+
const regex = createSearchRegex(query);
|
|
1276
|
+
if (!regex || rowCount <= 0 || columnCount <= 0) return [];
|
|
1277
|
+
const matches = [];
|
|
1278
|
+
for (let rowOffset = 0; rowOffset < rowCount; rowOffset += 1) {
|
|
1279
|
+
const rowIndex = startRow + rowOffset;
|
|
1280
|
+
for (let colIndex = 0; colIndex < columnCount; colIndex += 1) {
|
|
1281
|
+
const text = cellValueToSearchText(getCellValue(rowIndex, colIndex));
|
|
1282
|
+
if (text !== void 0 && regex.test(text)) {
|
|
1283
|
+
matches.push([colIndex, rowIndex]);
|
|
1284
|
+
if (matches.length >= maxResults) {
|
|
1285
|
+
return matches;
|
|
1286
|
+
}
|
|
1287
|
+
}
|
|
1288
|
+
}
|
|
1289
|
+
}
|
|
1290
|
+
return matches;
|
|
1291
|
+
}
|
|
1292
|
+
function nextSearchStride(currentStride, elapsedMs, targetMs = INLINE_SEARCH_TARGET_TICK_MS) {
|
|
1293
|
+
const rounded = Math.max(elapsedMs, 1);
|
|
1294
|
+
const scalar = targetMs / rounded;
|
|
1295
|
+
return Math.max(1, Math.ceil(currentStride * scalar));
|
|
1296
|
+
}
|
|
1297
|
+
function buildFlatSearchCorpus(rows, getRowId) {
|
|
1298
|
+
return rows.map((data, index) => ({
|
|
1299
|
+
id: getRowId(data, index),
|
|
1300
|
+
data,
|
|
1301
|
+
ancestorToggleKeys: []
|
|
1302
|
+
}));
|
|
1303
|
+
}
|
|
1304
|
+
function buildTreeSearchCorpus(visibleRows, options) {
|
|
1305
|
+
const { toggleField, getRowId } = options;
|
|
1306
|
+
const corpus = [];
|
|
1307
|
+
const seen = /* @__PURE__ */ new Set();
|
|
1308
|
+
const walk = (node, ancestorToggleKeys) => {
|
|
1309
|
+
const id = getRowId(node, corpus.length);
|
|
1310
|
+
if (seen.has(id)) return;
|
|
1311
|
+
seen.add(id);
|
|
1312
|
+
corpus.push({
|
|
1313
|
+
id,
|
|
1314
|
+
data: node,
|
|
1315
|
+
ancestorToggleKeys
|
|
1316
|
+
});
|
|
1317
|
+
const children = node.children;
|
|
1318
|
+
if (!Array.isArray(children) || children.length === 0) return;
|
|
1319
|
+
const toggleValue = node[toggleField];
|
|
1320
|
+
const childAncestors = typeof toggleValue === "string" && toggleValue.length > 0 ? [...ancestorToggleKeys, toggleValue] : ancestorToggleKeys;
|
|
1321
|
+
for (const child of children) {
|
|
1322
|
+
if (child && typeof child === "object") {
|
|
1323
|
+
walk(child, childAncestors);
|
|
1324
|
+
}
|
|
1325
|
+
}
|
|
1326
|
+
};
|
|
1327
|
+
for (const row of visibleRows) {
|
|
1328
|
+
const level = row.level;
|
|
1329
|
+
if (level === 0 || level === void 0) {
|
|
1330
|
+
walk(row, []);
|
|
1331
|
+
}
|
|
1332
|
+
}
|
|
1333
|
+
for (const row of visibleRows) {
|
|
1334
|
+
const id = getRowId(row, corpus.length);
|
|
1335
|
+
if (seen.has(id)) continue;
|
|
1336
|
+
walk(row, []);
|
|
1337
|
+
}
|
|
1338
|
+
return corpus;
|
|
1339
|
+
}
|
|
1340
|
+
function mapSearchResultsToVisibleKeys(results, corpus, visibleRowIndexById) {
|
|
1341
|
+
const keys = /* @__PURE__ */ new Set();
|
|
1342
|
+
for (const [colIndex, corpusRowIndex] of results) {
|
|
1343
|
+
const corpusRow = corpus[corpusRowIndex];
|
|
1344
|
+
if (!corpusRow) continue;
|
|
1345
|
+
const visibleRowIndex = visibleRowIndexById.get(corpusRow.id);
|
|
1346
|
+
if (visibleRowIndex === void 0) continue;
|
|
1347
|
+
keys.add(buildSearchMatchKey(colIndex, visibleRowIndex));
|
|
1348
|
+
}
|
|
1349
|
+
return keys;
|
|
1350
|
+
}
|
|
1351
|
+
function mapSearchResultToVisibleItem(item, corpus, visibleRowIndexById) {
|
|
1352
|
+
const [colIndex, corpusRowIndex] = item;
|
|
1353
|
+
const corpusRow = corpus[corpusRowIndex];
|
|
1354
|
+
if (!corpusRow) return null;
|
|
1355
|
+
const visibleRowIndex = visibleRowIndexById.get(corpusRow.id);
|
|
1356
|
+
if (visibleRowIndex === void 0) return null;
|
|
1357
|
+
return [colIndex, visibleRowIndex];
|
|
1358
|
+
}
|
|
1359
|
+
function collectAncestorKeysToExpand(corpusRow, expandedRows) {
|
|
1360
|
+
return corpusRow.ancestorToggleKeys.filter((key) => !expandedRows.has(key));
|
|
1361
|
+
}
|
|
1362
|
+
|
|
1363
|
+
// src/components/ui/table/features/inline-search/useInlineSearch.ts
|
|
1091
1364
|
var import_react3 = require("react");
|
|
1365
|
+
var EMPTY_MATCH_KEYS = /* @__PURE__ */ new Set();
|
|
1366
|
+
function useInlineSearch({
|
|
1367
|
+
enabled = false,
|
|
1368
|
+
rowCount,
|
|
1369
|
+
columnCount,
|
|
1370
|
+
getCellValue,
|
|
1371
|
+
initialStartRow = 0,
|
|
1372
|
+
showSearch: controlledShowSearch,
|
|
1373
|
+
searchValue: controlledSearchValue,
|
|
1374
|
+
searchResults: controlledSearchResults,
|
|
1375
|
+
onSearchValueChange,
|
|
1376
|
+
onSearchClose,
|
|
1377
|
+
onSearchResultsChanged,
|
|
1378
|
+
onNavigateToResult,
|
|
1379
|
+
rootRef
|
|
1380
|
+
}) {
|
|
1381
|
+
const searchInputId = (0, import_react3.useId)();
|
|
1382
|
+
const searchInputRef = (0, import_react3.useRef)(null);
|
|
1383
|
+
const [internalShowSearch, setInternalShowSearch] = (0, import_react3.useState)(false);
|
|
1384
|
+
const [internalSearchValue, setInternalSearchValue] = (0, import_react3.useState)("");
|
|
1385
|
+
const [internalResults, setInternalResults] = (0, import_react3.useState)(
|
|
1386
|
+
[]
|
|
1387
|
+
);
|
|
1388
|
+
const [searchStatus, setSearchStatus] = (0, import_react3.useState)();
|
|
1389
|
+
const searchStatusRef = (0, import_react3.useRef)(searchStatus);
|
|
1390
|
+
searchStatusRef.current = searchStatus;
|
|
1391
|
+
const abortControllerRef = (0, import_react3.useRef)(null);
|
|
1392
|
+
const searchHandleRef = (0, import_react3.useRef)(void 0);
|
|
1393
|
+
const initialStartRowRef = (0, import_react3.useRef)(initialStartRow);
|
|
1394
|
+
initialStartRowRef.current = initialStartRow;
|
|
1395
|
+
const getCellValueRef = (0, import_react3.useRef)(getCellValue);
|
|
1396
|
+
getCellValueRef.current = getCellValue;
|
|
1397
|
+
const showSearch = controlledShowSearch ?? internalShowSearch;
|
|
1398
|
+
const searchValue = controlledSearchValue ?? internalSearchValue;
|
|
1399
|
+
const searchResults = controlledSearchResults ?? internalResults;
|
|
1400
|
+
const setSearchValue = (0, import_react3.useCallback)(
|
|
1401
|
+
(value) => {
|
|
1402
|
+
setInternalSearchValue(value);
|
|
1403
|
+
onSearchValueChange?.(value);
|
|
1404
|
+
},
|
|
1405
|
+
[onSearchValueChange]
|
|
1406
|
+
);
|
|
1407
|
+
const cancelSearch = (0, import_react3.useCallback)(() => {
|
|
1408
|
+
if (searchHandleRef.current !== void 0) {
|
|
1409
|
+
window.cancelAnimationFrame(searchHandleRef.current);
|
|
1410
|
+
searchHandleRef.current = void 0;
|
|
1411
|
+
}
|
|
1412
|
+
abortControllerRef.current?.abort();
|
|
1413
|
+
}, []);
|
|
1414
|
+
const emitResultsChanged = (0, import_react3.useCallback)(
|
|
1415
|
+
(results, navIndex) => {
|
|
1416
|
+
onSearchResultsChanged?.(results, navIndex);
|
|
1417
|
+
},
|
|
1418
|
+
[onSearchResultsChanged]
|
|
1419
|
+
);
|
|
1420
|
+
const navigateToIndex = (0, import_react3.useCallback)(
|
|
1421
|
+
(results, navIndex) => {
|
|
1422
|
+
if (onSearchResultsChanged) return;
|
|
1423
|
+
if (navIndex < 0 || navIndex >= results.length) return;
|
|
1424
|
+
const item = results[navIndex];
|
|
1425
|
+
if (!item) return;
|
|
1426
|
+
onNavigateToResult?.(item);
|
|
1427
|
+
},
|
|
1428
|
+
[onNavigateToResult, onSearchResultsChanged]
|
|
1429
|
+
);
|
|
1430
|
+
const beginSearch = (0, import_react3.useCallback)(
|
|
1431
|
+
(query) => {
|
|
1432
|
+
if (controlledSearchResults !== void 0) return;
|
|
1433
|
+
const totalRows = rowCount;
|
|
1434
|
+
if (totalRows === 0 || columnCount === 0) {
|
|
1435
|
+
setSearchStatus(void 0);
|
|
1436
|
+
setInternalResults([]);
|
|
1437
|
+
emitResultsChanged([], -1);
|
|
1438
|
+
return;
|
|
1439
|
+
}
|
|
1440
|
+
let startY = Math.min(
|
|
1441
|
+
Math.max(0, initialStartRowRef.current),
|
|
1442
|
+
totalRows - 1
|
|
1443
|
+
);
|
|
1444
|
+
let searchStride = Math.min(INLINE_SEARCH_INITIAL_STRIDE, totalRows);
|
|
1445
|
+
let rowsSearched = 0;
|
|
1446
|
+
const runningResult = [];
|
|
1447
|
+
setSearchStatus(void 0);
|
|
1448
|
+
setInternalResults([]);
|
|
1449
|
+
const tick = () => {
|
|
1450
|
+
if (abortControllerRef.current?.signal.aborted) return;
|
|
1451
|
+
const tStart = performance.now();
|
|
1452
|
+
const rowsLeft = totalRows - rowsSearched;
|
|
1453
|
+
const height = Math.min(searchStride, rowsLeft, totalRows - startY);
|
|
1454
|
+
if (height <= 0) {
|
|
1455
|
+
return;
|
|
1456
|
+
}
|
|
1457
|
+
const chunk = collectSearchMatchesInRange({
|
|
1458
|
+
query,
|
|
1459
|
+
startRow: startY,
|
|
1460
|
+
rowCount: height,
|
|
1461
|
+
columnCount,
|
|
1462
|
+
getCellValue: (rowIndex, colIndex) => getCellValueRef.current(rowIndex, colIndex),
|
|
1463
|
+
maxResults: INLINE_SEARCH_MAX_RESULTS - runningResult.length
|
|
1464
|
+
});
|
|
1465
|
+
if (chunk.length > 0) {
|
|
1466
|
+
runningResult.push(...chunk);
|
|
1467
|
+
setInternalResults([...runningResult]);
|
|
1468
|
+
}
|
|
1469
|
+
rowsSearched += height;
|
|
1470
|
+
const selectedIndex = searchStatusRef.current?.selectedIndex ?? -1;
|
|
1471
|
+
setSearchStatus({
|
|
1472
|
+
results: runningResult.length,
|
|
1473
|
+
rowsSearched,
|
|
1474
|
+
selectedIndex
|
|
1475
|
+
});
|
|
1476
|
+
emitResultsChanged(runningResult, selectedIndex);
|
|
1477
|
+
if (startY + height >= totalRows) {
|
|
1478
|
+
startY = 0;
|
|
1479
|
+
} else {
|
|
1480
|
+
startY += height;
|
|
1481
|
+
}
|
|
1482
|
+
searchStride = nextSearchStride(
|
|
1483
|
+
searchStride,
|
|
1484
|
+
performance.now() - tStart
|
|
1485
|
+
);
|
|
1486
|
+
if (rowsSearched < totalRows && runningResult.length < INLINE_SEARCH_MAX_RESULTS) {
|
|
1487
|
+
searchHandleRef.current = window.requestAnimationFrame(tick);
|
|
1488
|
+
}
|
|
1489
|
+
};
|
|
1490
|
+
cancelSearch();
|
|
1491
|
+
abortControllerRef.current = new AbortController();
|
|
1492
|
+
searchHandleRef.current = window.requestAnimationFrame(tick);
|
|
1493
|
+
},
|
|
1494
|
+
[
|
|
1495
|
+
cancelSearch,
|
|
1496
|
+
columnCount,
|
|
1497
|
+
controlledSearchResults,
|
|
1498
|
+
emitResultsChanged,
|
|
1499
|
+
rowCount
|
|
1500
|
+
]
|
|
1501
|
+
);
|
|
1502
|
+
const openSearch = (0, import_react3.useCallback)(() => {
|
|
1503
|
+
if (controlledShowSearch === void 0) {
|
|
1504
|
+
setInternalShowSearch(true);
|
|
1505
|
+
}
|
|
1506
|
+
}, [controlledShowSearch]);
|
|
1507
|
+
const closeSearch = (0, import_react3.useCallback)(() => {
|
|
1508
|
+
if (controlledShowSearch === void 0) {
|
|
1509
|
+
setInternalShowSearch(false);
|
|
1510
|
+
}
|
|
1511
|
+
onSearchClose?.();
|
|
1512
|
+
setSearchStatus(void 0);
|
|
1513
|
+
setInternalResults([]);
|
|
1514
|
+
emitResultsChanged([], -1);
|
|
1515
|
+
cancelSearch();
|
|
1516
|
+
}, [
|
|
1517
|
+
cancelSearch,
|
|
1518
|
+
controlledShowSearch,
|
|
1519
|
+
emitResultsChanged,
|
|
1520
|
+
onSearchClose
|
|
1521
|
+
]);
|
|
1522
|
+
const goToNext = (0, import_react3.useCallback)(() => {
|
|
1523
|
+
if (!searchStatus || searchStatus.results === 0) return;
|
|
1524
|
+
const newIndex = nextSearchIndex(
|
|
1525
|
+
searchStatus.selectedIndex,
|
|
1526
|
+
searchStatus.results
|
|
1527
|
+
);
|
|
1528
|
+
setSearchStatus({ ...searchStatus, selectedIndex: newIndex });
|
|
1529
|
+
emitResultsChanged(searchResults, newIndex);
|
|
1530
|
+
navigateToIndex(searchResults, newIndex);
|
|
1531
|
+
}, [emitResultsChanged, navigateToIndex, searchResults, searchStatus]);
|
|
1532
|
+
const goToPrevious = (0, import_react3.useCallback)(() => {
|
|
1533
|
+
if (!searchStatus || searchStatus.results === 0) return;
|
|
1534
|
+
const newIndex = previousSearchIndex(
|
|
1535
|
+
searchStatus.selectedIndex,
|
|
1536
|
+
searchStatus.results
|
|
1537
|
+
);
|
|
1538
|
+
setSearchStatus({ ...searchStatus, selectedIndex: newIndex });
|
|
1539
|
+
emitResultsChanged(searchResults, newIndex);
|
|
1540
|
+
navigateToIndex(searchResults, newIndex);
|
|
1541
|
+
}, [emitResultsChanged, navigateToIndex, searchResults, searchStatus]);
|
|
1542
|
+
(0, import_react3.useEffect)(() => {
|
|
1543
|
+
if (controlledSearchResults === void 0) return;
|
|
1544
|
+
if (controlledSearchResults.length > 0) {
|
|
1545
|
+
setSearchStatus((current) => ({
|
|
1546
|
+
rowsSearched: rowCount,
|
|
1547
|
+
results: controlledSearchResults.length,
|
|
1548
|
+
selectedIndex: current?.selectedIndex ?? -1
|
|
1549
|
+
}));
|
|
1550
|
+
} else {
|
|
1551
|
+
setSearchStatus(void 0);
|
|
1552
|
+
}
|
|
1553
|
+
}, [controlledSearchResults, rowCount]);
|
|
1554
|
+
(0, import_react3.useEffect)(() => {
|
|
1555
|
+
if (!enabled) return;
|
|
1556
|
+
setSearchStatus(void 0);
|
|
1557
|
+
setInternalResults([]);
|
|
1558
|
+
emitResultsChanged([], -1);
|
|
1559
|
+
if (showSearch) {
|
|
1560
|
+
queueMicrotask(() => {
|
|
1561
|
+
searchInputRef.current?.focus({ preventScroll: true });
|
|
1562
|
+
});
|
|
1563
|
+
} else {
|
|
1564
|
+
cancelSearch();
|
|
1565
|
+
}
|
|
1566
|
+
}, [enabled, showSearch]);
|
|
1567
|
+
(0, import_react3.useEffect)(() => {
|
|
1568
|
+
if (!enabled || !showSearch) return;
|
|
1569
|
+
if (controlledSearchResults !== void 0) return;
|
|
1570
|
+
if (searchValue.trim() === "") {
|
|
1571
|
+
setSearchStatus(void 0);
|
|
1572
|
+
setInternalResults([]);
|
|
1573
|
+
cancelSearch();
|
|
1574
|
+
emitResultsChanged([], -1);
|
|
1575
|
+
return;
|
|
1576
|
+
}
|
|
1577
|
+
beginSearch(searchValue);
|
|
1578
|
+
}, [
|
|
1579
|
+
beginSearch,
|
|
1580
|
+
cancelSearch,
|
|
1581
|
+
controlledSearchResults,
|
|
1582
|
+
emitResultsChanged,
|
|
1583
|
+
enabled,
|
|
1584
|
+
searchValue,
|
|
1585
|
+
showSearch
|
|
1586
|
+
]);
|
|
1587
|
+
(0, import_react3.useEffect)(() => {
|
|
1588
|
+
if (!enabled) return;
|
|
1589
|
+
const handleKeyDown = (event) => {
|
|
1590
|
+
if (!(event.ctrlKey || event.metaKey)) return;
|
|
1591
|
+
if (event.key.toLowerCase() !== "f") return;
|
|
1592
|
+
const root = rootRef?.current;
|
|
1593
|
+
if (root) {
|
|
1594
|
+
const active = document.activeElement;
|
|
1595
|
+
const focusInside = active === root || active instanceof Node && root.contains(active);
|
|
1596
|
+
if (!focusInside && active !== document.body) {
|
|
1597
|
+
return;
|
|
1598
|
+
}
|
|
1599
|
+
}
|
|
1600
|
+
event.preventDefault();
|
|
1601
|
+
event.stopPropagation();
|
|
1602
|
+
if (showSearch) {
|
|
1603
|
+
searchInputRef.current?.focus({ preventScroll: true });
|
|
1604
|
+
searchInputRef.current?.select();
|
|
1605
|
+
return;
|
|
1606
|
+
}
|
|
1607
|
+
if (controlledShowSearch === void 0) {
|
|
1608
|
+
setInternalShowSearch(true);
|
|
1609
|
+
}
|
|
1610
|
+
};
|
|
1611
|
+
window.addEventListener("keydown", handleKeyDown, true);
|
|
1612
|
+
return () => window.removeEventListener("keydown", handleKeyDown, true);
|
|
1613
|
+
}, [controlledShowSearch, enabled, rootRef, showSearch]);
|
|
1614
|
+
(0, import_react3.useEffect)(() => () => cancelSearch(), [cancelSearch]);
|
|
1615
|
+
const searchMatchKeys = (0, import_react3.useMemo)(
|
|
1616
|
+
() => buildSearchMatchKeys(searchResults),
|
|
1617
|
+
[searchResults]
|
|
1618
|
+
);
|
|
1619
|
+
const activeMatch = (0, import_react3.useMemo)(() => {
|
|
1620
|
+
if (!searchStatus || searchStatus.selectedIndex < 0) return null;
|
|
1621
|
+
return searchResults[searchStatus.selectedIndex] ?? null;
|
|
1622
|
+
}, [searchResults, searchStatus]);
|
|
1623
|
+
if (!enabled) {
|
|
1624
|
+
return {
|
|
1625
|
+
enabled: false,
|
|
1626
|
+
showSearch: false,
|
|
1627
|
+
searchValue: "",
|
|
1628
|
+
searchResults: [],
|
|
1629
|
+
searchStatus: void 0,
|
|
1630
|
+
searchMatchKeys: EMPTY_MATCH_KEYS,
|
|
1631
|
+
activeMatch: null,
|
|
1632
|
+
searchInputRef,
|
|
1633
|
+
searchInputId,
|
|
1634
|
+
canClose: false,
|
|
1635
|
+
openSearch,
|
|
1636
|
+
closeSearch,
|
|
1637
|
+
setSearchValue,
|
|
1638
|
+
goToNext,
|
|
1639
|
+
goToPrevious
|
|
1640
|
+
};
|
|
1641
|
+
}
|
|
1642
|
+
return {
|
|
1643
|
+
enabled: true,
|
|
1644
|
+
showSearch,
|
|
1645
|
+
searchValue,
|
|
1646
|
+
searchResults,
|
|
1647
|
+
searchStatus,
|
|
1648
|
+
searchMatchKeys,
|
|
1649
|
+
activeMatch,
|
|
1650
|
+
searchInputRef,
|
|
1651
|
+
searchInputId,
|
|
1652
|
+
canClose: controlledShowSearch === void 0 || onSearchClose !== void 0,
|
|
1653
|
+
openSearch,
|
|
1654
|
+
closeSearch,
|
|
1655
|
+
setSearchValue,
|
|
1656
|
+
goToNext,
|
|
1657
|
+
goToPrevious
|
|
1658
|
+
};
|
|
1659
|
+
}
|
|
1660
|
+
|
|
1661
|
+
// src/components/ui/table/features/row-expand/row-expand.ts
|
|
1662
|
+
var import_react4 = require("react");
|
|
1092
1663
|
function getFieldValue(row, key) {
|
|
1093
1664
|
return row[key];
|
|
1094
1665
|
}
|
|
@@ -1118,12 +1689,12 @@ var useConvertTreeData = ({
|
|
|
1118
1689
|
expandedRows,
|
|
1119
1690
|
onExpandedRowsChange
|
|
1120
1691
|
}) => {
|
|
1121
|
-
const onExpandedRowsChangeRef = (0,
|
|
1122
|
-
const hasInitializedRef = (0,
|
|
1123
|
-
(0,
|
|
1692
|
+
const onExpandedRowsChangeRef = (0, import_react4.useRef)(onExpandedRowsChange);
|
|
1693
|
+
const hasInitializedRef = (0, import_react4.useRef)(false);
|
|
1694
|
+
(0, import_react4.useEffect)(() => {
|
|
1124
1695
|
onExpandedRowsChangeRef.current = onExpandedRowsChange;
|
|
1125
1696
|
}, [onExpandedRowsChange]);
|
|
1126
|
-
(0,
|
|
1697
|
+
(0, import_react4.useEffect)(() => {
|
|
1127
1698
|
if (!data || data.length === 0) {
|
|
1128
1699
|
hasInitializedRef.current = false;
|
|
1129
1700
|
return;
|
|
@@ -1133,7 +1704,7 @@ var useConvertTreeData = ({
|
|
|
1133
1704
|
onExpandedRowsChangeRef.current?.(new Set(ids));
|
|
1134
1705
|
hasInitializedRef.current = true;
|
|
1135
1706
|
}, [enabled, data, toggleField]);
|
|
1136
|
-
const processedData = (0,
|
|
1707
|
+
const processedData = (0, import_react4.useMemo)(() => {
|
|
1137
1708
|
if (!enabled || !data || data.length === 0) return [];
|
|
1138
1709
|
const flattenedData = [];
|
|
1139
1710
|
const flattenItems = (items) => {
|
|
@@ -1197,7 +1768,7 @@ var useConvertTreeData = ({
|
|
|
1197
1768
|
});
|
|
1198
1769
|
return rootItems;
|
|
1199
1770
|
}, [enabled, data, toggleField, childField, flattenField]);
|
|
1200
|
-
const flattenTree = (0,
|
|
1771
|
+
const flattenTree = (0, import_react4.useMemo)(() => {
|
|
1201
1772
|
if (!enabled) return [];
|
|
1202
1773
|
const flatten = (nodes, result = [], level = 0) => {
|
|
1203
1774
|
nodes.forEach((node, index) => {
|
|
@@ -1247,7 +1818,7 @@ var useConvertTreeData = ({
|
|
|
1247
1818
|
preventExpand,
|
|
1248
1819
|
expandedRows
|
|
1249
1820
|
]);
|
|
1250
|
-
const sortedData = (0,
|
|
1821
|
+
const sortedData = (0, import_react4.useMemo)(() => {
|
|
1251
1822
|
if (!enabled) {
|
|
1252
1823
|
return data ?? [];
|
|
1253
1824
|
}
|
|
@@ -1353,6 +1924,7 @@ function collectRowSpanColumns(columns) {
|
|
|
1353
1924
|
|
|
1354
1925
|
// src/core/useGlideTable.ts
|
|
1355
1926
|
var EMPTY_COLUMN_FREEZE_OFFSETS = /* @__PURE__ */ new Map();
|
|
1927
|
+
var EMPTY_SEARCH_MATCH_KEYS = /* @__PURE__ */ new Set();
|
|
1356
1928
|
function useGlideTable(options) {
|
|
1357
1929
|
const {
|
|
1358
1930
|
data,
|
|
@@ -1393,9 +1965,16 @@ function useGlideTable(options) {
|
|
|
1393
1965
|
columnSizing: controlledColumnSizing,
|
|
1394
1966
|
onColumnSizingChange,
|
|
1395
1967
|
columnResizeMode = "onChange",
|
|
1396
|
-
enableColumnFreeze = false
|
|
1968
|
+
enableColumnFreeze = false,
|
|
1969
|
+
enableInlineSearch = false,
|
|
1970
|
+
showSearch,
|
|
1971
|
+
searchValue,
|
|
1972
|
+
onSearchValueChange,
|
|
1973
|
+
onSearchClose,
|
|
1974
|
+
searchResults,
|
|
1975
|
+
onSearchResultsChanged
|
|
1397
1976
|
} = options;
|
|
1398
|
-
const labels = (0,
|
|
1977
|
+
const labels = (0, import_react5.useMemo)(() => {
|
|
1399
1978
|
const resolved = resolveDataTableLabels(labelsProp);
|
|
1400
1979
|
return {
|
|
1401
1980
|
...resolved,
|
|
@@ -1406,15 +1985,16 @@ function useGlideTable(options) {
|
|
|
1406
1985
|
}, [labelsProp, emptyText, loadingText, selectionLabel]);
|
|
1407
1986
|
const enableExpand = Boolean(toggleField);
|
|
1408
1987
|
const resolvedEnableSubtreeCopy = enableSubtreeCopy ?? enableExpand;
|
|
1409
|
-
const [internalRowSelection, setInternalRowSelection] = (0,
|
|
1410
|
-
const [internalColumnSizing, setInternalColumnSizing] = (0,
|
|
1411
|
-
const [internalExpandedRows, setInternalExpandedRows] = (0,
|
|
1988
|
+
const [internalRowSelection, setInternalRowSelection] = (0, import_react5.useState)({});
|
|
1989
|
+
const [internalColumnSizing, setInternalColumnSizing] = (0, import_react5.useState)({});
|
|
1990
|
+
const [internalExpandedRows, setInternalExpandedRows] = (0, import_react5.useState)(
|
|
1412
1991
|
() => /* @__PURE__ */ new Set()
|
|
1413
1992
|
);
|
|
1414
|
-
const [hoveredRowIndex, setHoveredRowIndex] = (0,
|
|
1415
|
-
const scrollRef = (0,
|
|
1993
|
+
const [hoveredRowIndex, setHoveredRowIndex] = (0, import_react5.useState)(null);
|
|
1994
|
+
const scrollRef = (0, import_react5.useRef)(null);
|
|
1995
|
+
const rootRef = (0, import_react5.useRef)(null);
|
|
1416
1996
|
const shouldVirtualize = enableVirtualization && !enableRowSpan;
|
|
1417
|
-
(0,
|
|
1997
|
+
(0, import_react5.useEffect)(() => {
|
|
1418
1998
|
if (enableVirtualization && enableRowSpan) {
|
|
1419
1999
|
console.warn(
|
|
1420
2000
|
"[useGlideTable] enableRowSpan is on; virtualization is disabled to preserve cell merges."
|
|
@@ -1428,7 +2008,7 @@ function useGlideTable(options) {
|
|
|
1428
2008
|
);
|
|
1429
2009
|
const columnSizing = controlledColumnSizing ?? internalColumnSizing;
|
|
1430
2010
|
const expandedRows = controlledExpandedRows ?? internalExpandedRows;
|
|
1431
|
-
const handleExpandedRowsChange = (0,
|
|
2011
|
+
const handleExpandedRowsChange = (0, import_react5.useCallback)(
|
|
1432
2012
|
(next) => {
|
|
1433
2013
|
if (onExpandedRowsChange) {
|
|
1434
2014
|
onExpandedRowsChange(next);
|
|
@@ -1489,13 +2069,13 @@ function useGlideTable(options) {
|
|
|
1489
2069
|
getCoreRowModel: (0, import_react_table.getCoreRowModel)(),
|
|
1490
2070
|
getRowId: getRowId ? (originalRow, index) => getRowId(originalRow, index) : (_originalRow, index) => String(index)
|
|
1491
2071
|
});
|
|
1492
|
-
const rowSpanColumnKeys = (0,
|
|
2072
|
+
const rowSpanColumnKeys = (0, import_react5.useMemo)(() => {
|
|
1493
2073
|
if (!enableRowSpan) return [];
|
|
1494
2074
|
return collectRowSpanColumns(columns);
|
|
1495
2075
|
}, [enableRowSpan, columns]);
|
|
1496
2076
|
const primaryRowSpanKey = rowSpanColumnKeys[0]?.rowSpanKey;
|
|
1497
2077
|
const primaryRowSpanColumnId = rowSpanColumnKeys[0]?.columnId;
|
|
1498
|
-
const columnRowSpanMap = (0,
|
|
2078
|
+
const columnRowSpanMap = (0, import_react5.useMemo)(
|
|
1499
2079
|
() => buildColumnRowSpanMap(tableData, rowSpanColumnKeys),
|
|
1500
2080
|
[tableData, rowSpanColumnKeys]
|
|
1501
2081
|
);
|
|
@@ -1504,7 +2084,7 @@ function useGlideTable(options) {
|
|
|
1504
2084
|
const rows = table.getRowModel().rows;
|
|
1505
2085
|
const columnCount = table.getAllLeafColumns().length || 1;
|
|
1506
2086
|
const visibleLeafColumns = table.getVisibleLeafColumns();
|
|
1507
|
-
const columnFreezeOffsets = (0,
|
|
2087
|
+
const columnFreezeOffsets = (0, import_react5.useMemo)(() => {
|
|
1508
2088
|
if (!enableColumnFreeze) return EMPTY_COLUMN_FREEZE_OFFSETS;
|
|
1509
2089
|
return buildColumnFreezeOffsets(
|
|
1510
2090
|
visibleLeafColumns.map((column) => ({
|
|
@@ -1524,13 +2104,46 @@ function useGlideTable(options) {
|
|
|
1524
2104
|
const totalSize = rowVirtualizer.getTotalSize();
|
|
1525
2105
|
const paddingTop = virtualRows.length > 0 ? virtualRows[0]?.start ?? 0 : 0;
|
|
1526
2106
|
const paddingBottom = virtualRows.length > 0 ? totalSize - (virtualRows[virtualRows.length - 1]?.end ?? 0) : 0;
|
|
1527
|
-
const selectedRowIndices = (0,
|
|
2107
|
+
const selectedRowIndices = (0, import_react5.useMemo)(() => {
|
|
1528
2108
|
const indices = /* @__PURE__ */ new Set();
|
|
1529
2109
|
for (const selectedRow of selectedRows) {
|
|
1530
2110
|
indices.add(selectedRow.index);
|
|
1531
2111
|
}
|
|
1532
2112
|
return indices;
|
|
1533
2113
|
}, [selectedRows]);
|
|
2114
|
+
const scrollCellIntoView = (0, import_react5.useCallback)(
|
|
2115
|
+
(rowIndex, colIndex, options2) => {
|
|
2116
|
+
const align = options2?.align ?? "nearest";
|
|
2117
|
+
const blockAlign = align === "center" ? "center" : "nearest";
|
|
2118
|
+
if (shouldVirtualize) {
|
|
2119
|
+
rowVirtualizer.scrollToIndex(rowIndex, {
|
|
2120
|
+
align: align === "nearest" ? "auto" : align
|
|
2121
|
+
});
|
|
2122
|
+
}
|
|
2123
|
+
const scrollElement = scrollRef.current;
|
|
2124
|
+
if (!scrollElement) return;
|
|
2125
|
+
const scrollToMatchedCell = () => {
|
|
2126
|
+
const cell = scrollElement.querySelector(
|
|
2127
|
+
`[data-row-index="${rowIndex}"][data-col-index="${colIndex}"]`
|
|
2128
|
+
);
|
|
2129
|
+
if (cell instanceof HTMLElement) {
|
|
2130
|
+
cell.scrollIntoView({ block: blockAlign, inline: "nearest" });
|
|
2131
|
+
}
|
|
2132
|
+
};
|
|
2133
|
+
if (shouldVirtualize) {
|
|
2134
|
+
requestAnimationFrame(scrollToMatchedCell);
|
|
2135
|
+
return;
|
|
2136
|
+
}
|
|
2137
|
+
scrollToMatchedCell();
|
|
2138
|
+
},
|
|
2139
|
+
[rowVirtualizer, shouldVirtualize]
|
|
2140
|
+
);
|
|
2141
|
+
const handleCellNavigate = (0, import_react5.useCallback)(
|
|
2142
|
+
(position) => {
|
|
2143
|
+
scrollCellIntoView(position.row, position.col, { align: "nearest" });
|
|
2144
|
+
},
|
|
2145
|
+
[scrollCellIntoView]
|
|
2146
|
+
);
|
|
1534
2147
|
const {
|
|
1535
2148
|
dragState,
|
|
1536
2149
|
activeSelectionBounds,
|
|
@@ -1542,11 +2155,13 @@ function useGlideTable(options) {
|
|
|
1542
2155
|
data: tableData,
|
|
1543
2156
|
rows,
|
|
1544
2157
|
enabled: enableCellSelection,
|
|
2158
|
+
columnCount: visibleLeafColumns.length,
|
|
1545
2159
|
enableSubtreeCopy: resolvedEnableSubtreeCopy,
|
|
1546
2160
|
enableInsertPaste: enableInsertPaste ?? true,
|
|
1547
2161
|
onDataChange,
|
|
1548
2162
|
onBatchChange,
|
|
1549
|
-
onRowsPaste
|
|
2163
|
+
onRowsPaste,
|
|
2164
|
+
onCellNavigate: handleCellNavigate
|
|
1550
2165
|
});
|
|
1551
2166
|
const {
|
|
1552
2167
|
editingCell,
|
|
@@ -1556,23 +2171,193 @@ function useGlideTable(options) {
|
|
|
1556
2171
|
commitEdit,
|
|
1557
2172
|
cancelEdit
|
|
1558
2173
|
} = useCellEdit({ data: tableData, rows, onDataChange, onCellChange });
|
|
1559
|
-
const handleCellMouseDownWithCommit = (0,
|
|
1560
|
-
(rowIndex, colIndex) => {
|
|
2174
|
+
const handleCellMouseDownWithCommit = (0, import_react5.useCallback)(
|
|
2175
|
+
(rowIndex, colIndex, options2) => {
|
|
1561
2176
|
const isSameEditingCell = editingCell?.rowIndex === rowIndex && editingCell?.colIndex === colIndex;
|
|
1562
2177
|
if (editingCell && !isSameEditingCell && !commitEdit()) {
|
|
1563
2178
|
return;
|
|
1564
2179
|
}
|
|
1565
|
-
handleCellMouseDown(rowIndex, colIndex);
|
|
2180
|
+
handleCellMouseDown(rowIndex, colIndex, options2);
|
|
1566
2181
|
},
|
|
1567
2182
|
[commitEdit, editingCell, handleCellMouseDown]
|
|
1568
2183
|
);
|
|
1569
|
-
const
|
|
2184
|
+
const navigateToSearchResult = (0, import_react5.useCallback)(
|
|
2185
|
+
(item) => {
|
|
2186
|
+
const [colIndex, rowIndex] = item;
|
|
2187
|
+
handleCellMouseDownWithCommit(rowIndex, colIndex);
|
|
2188
|
+
scrollCellIntoView(rowIndex, colIndex, { align: "center" });
|
|
2189
|
+
},
|
|
2190
|
+
[handleCellMouseDownWithCommit, scrollCellIntoView]
|
|
2191
|
+
);
|
|
2192
|
+
const resolveSearchRowId = (0, import_react5.useCallback)(
|
|
2193
|
+
(row, index) => {
|
|
2194
|
+
if (getRowId) return getRowId(row, index);
|
|
2195
|
+
if (enableExpand) {
|
|
2196
|
+
const record = row;
|
|
2197
|
+
const idValue = record.id;
|
|
2198
|
+
if (idValue != null && String(idValue).length > 0) {
|
|
2199
|
+
return String(idValue);
|
|
2200
|
+
}
|
|
2201
|
+
const uniqueId = record.uniqueId;
|
|
2202
|
+
if (uniqueId != null && String(uniqueId).length > 0) {
|
|
2203
|
+
return String(uniqueId);
|
|
2204
|
+
}
|
|
2205
|
+
if (toggleField) {
|
|
2206
|
+
const toggleValue = record[toggleField];
|
|
2207
|
+
if (toggleValue != null && String(toggleValue).length > 0) {
|
|
2208
|
+
return String(toggleValue);
|
|
2209
|
+
}
|
|
2210
|
+
}
|
|
2211
|
+
}
|
|
2212
|
+
return String(index);
|
|
2213
|
+
},
|
|
2214
|
+
[enableExpand, getRowId, toggleField]
|
|
2215
|
+
);
|
|
2216
|
+
const searchCorpus = (0, import_react5.useMemo)(() => {
|
|
2217
|
+
if (!enableInlineSearch) return [];
|
|
2218
|
+
if (enableExpand && toggleField) {
|
|
2219
|
+
return buildTreeSearchCorpus(tableData, {
|
|
2220
|
+
toggleField,
|
|
2221
|
+
getRowId: resolveSearchRowId
|
|
2222
|
+
});
|
|
2223
|
+
}
|
|
2224
|
+
return buildFlatSearchCorpus(tableData, resolveSearchRowId);
|
|
2225
|
+
}, [
|
|
2226
|
+
enableExpand,
|
|
2227
|
+
enableInlineSearch,
|
|
2228
|
+
resolveSearchRowId,
|
|
2229
|
+
tableData,
|
|
2230
|
+
toggleField
|
|
2231
|
+
]);
|
|
2232
|
+
const searchCorpusRef = (0, import_react5.useRef)(searchCorpus);
|
|
2233
|
+
searchCorpusRef.current = searchCorpus;
|
|
2234
|
+
const visibleRowIndexById = (0, import_react5.useMemo)(() => {
|
|
2235
|
+
const map = /* @__PURE__ */ new Map();
|
|
2236
|
+
for (const row of rows) {
|
|
2237
|
+
map.set(resolveSearchRowId(row.original, row.index), row.index);
|
|
2238
|
+
}
|
|
2239
|
+
return map;
|
|
2240
|
+
}, [resolveSearchRowId, rows]);
|
|
2241
|
+
const getSearchCellValue = (0, import_react5.useCallback)(
|
|
2242
|
+
(rowIndex, colIndex) => {
|
|
2243
|
+
const corpusRow = searchCorpusRef.current[rowIndex];
|
|
2244
|
+
const column = visibleLeafColumns[colIndex];
|
|
2245
|
+
if (!corpusRow || !column) return void 0;
|
|
2246
|
+
const visibleIndex = visibleRowIndexById.get(corpusRow.id);
|
|
2247
|
+
if (visibleIndex !== void 0) {
|
|
2248
|
+
const visibleRow = rows[visibleIndex];
|
|
2249
|
+
if (visibleRow) {
|
|
2250
|
+
return visibleRow.getValue(column.id);
|
|
2251
|
+
}
|
|
2252
|
+
}
|
|
2253
|
+
const columnDef = column.columnDef;
|
|
2254
|
+
if ("accessorFn" in columnDef && typeof columnDef.accessorFn === "function") {
|
|
2255
|
+
return columnDef.accessorFn(corpusRow.data, rowIndex);
|
|
2256
|
+
}
|
|
2257
|
+
if ("accessorKey" in columnDef && columnDef.accessorKey != null && columnDef.accessorKey !== "") {
|
|
2258
|
+
return corpusRow.data[String(columnDef.accessorKey)];
|
|
2259
|
+
}
|
|
2260
|
+
return corpusRow.data[column.id];
|
|
2261
|
+
},
|
|
2262
|
+
[rows, visibleLeafColumns, visibleRowIndexById]
|
|
2263
|
+
);
|
|
2264
|
+
const pendingSearchNavRef = (0, import_react5.useRef)(null);
|
|
2265
|
+
const focusSearchResult = (0, import_react5.useCallback)(
|
|
2266
|
+
(colIndex, visibleRowIndex) => {
|
|
2267
|
+
navigateToSearchResult([colIndex, visibleRowIndex]);
|
|
2268
|
+
},
|
|
2269
|
+
[navigateToSearchResult]
|
|
2270
|
+
);
|
|
2271
|
+
const navigateToCorpusSearchResult = (0, import_react5.useCallback)(
|
|
2272
|
+
(item) => {
|
|
2273
|
+
const [colIndex, corpusRowIndex] = item;
|
|
2274
|
+
const corpusRow = searchCorpusRef.current[corpusRowIndex];
|
|
2275
|
+
if (!corpusRow) return;
|
|
2276
|
+
const missingKeys = collectAncestorKeysToExpand(corpusRow, expandedRows);
|
|
2277
|
+
if (missingKeys.length > 0) {
|
|
2278
|
+
pendingSearchNavRef.current = {
|
|
2279
|
+
colIndex,
|
|
2280
|
+
rowId: corpusRow.id
|
|
2281
|
+
};
|
|
2282
|
+
const next = new Set(expandedRows);
|
|
2283
|
+
for (const key of corpusRow.ancestorToggleKeys) {
|
|
2284
|
+
next.add(key);
|
|
2285
|
+
}
|
|
2286
|
+
handleExpandedRowsChange(next);
|
|
2287
|
+
return;
|
|
2288
|
+
}
|
|
2289
|
+
const visibleItem = mapSearchResultToVisibleItem(
|
|
2290
|
+
item,
|
|
2291
|
+
searchCorpusRef.current,
|
|
2292
|
+
visibleRowIndexById
|
|
2293
|
+
);
|
|
2294
|
+
if (!visibleItem) return;
|
|
2295
|
+
focusSearchResult(visibleItem[0], visibleItem[1]);
|
|
2296
|
+
},
|
|
2297
|
+
[
|
|
2298
|
+
expandedRows,
|
|
2299
|
+
focusSearchResult,
|
|
2300
|
+
handleExpandedRowsChange,
|
|
2301
|
+
visibleRowIndexById
|
|
2302
|
+
]
|
|
2303
|
+
);
|
|
2304
|
+
(0, import_react5.useEffect)(() => {
|
|
2305
|
+
const pending = pendingSearchNavRef.current;
|
|
2306
|
+
if (!pending) return;
|
|
2307
|
+
const visibleRowIndex = visibleRowIndexById.get(pending.rowId);
|
|
2308
|
+
if (visibleRowIndex === void 0) return;
|
|
2309
|
+
pendingSearchNavRef.current = null;
|
|
2310
|
+
focusSearchResult(pending.colIndex, visibleRowIndex);
|
|
2311
|
+
}, [focusSearchResult, rows, visibleRowIndexById]);
|
|
2312
|
+
const initialSearchStartRow = virtualRows[0]?.index ?? 0;
|
|
2313
|
+
const inlineSearch = useInlineSearch({
|
|
2314
|
+
enabled: enableInlineSearch,
|
|
2315
|
+
rowCount: searchCorpus.length,
|
|
2316
|
+
columnCount: visibleLeafColumns.length,
|
|
2317
|
+
getCellValue: getSearchCellValue,
|
|
2318
|
+
initialStartRow: initialSearchStartRow,
|
|
2319
|
+
showSearch,
|
|
2320
|
+
searchValue,
|
|
2321
|
+
searchResults,
|
|
2322
|
+
onSearchValueChange,
|
|
2323
|
+
onSearchClose,
|
|
2324
|
+
onSearchResultsChanged,
|
|
2325
|
+
onNavigateToResult: navigateToCorpusSearchResult,
|
|
2326
|
+
rootRef
|
|
2327
|
+
});
|
|
2328
|
+
const visibleSearchMatchKeys = (0, import_react5.useMemo)(() => {
|
|
2329
|
+
if (!enableInlineSearch) return EMPTY_SEARCH_MATCH_KEYS;
|
|
2330
|
+
return mapSearchResultsToVisibleKeys(
|
|
2331
|
+
inlineSearch.searchResults,
|
|
2332
|
+
searchCorpus,
|
|
2333
|
+
visibleRowIndexById
|
|
2334
|
+
);
|
|
2335
|
+
}, [
|
|
2336
|
+
enableInlineSearch,
|
|
2337
|
+
inlineSearch.searchResults,
|
|
2338
|
+
searchCorpus,
|
|
2339
|
+
visibleRowIndexById
|
|
2340
|
+
]);
|
|
2341
|
+
const visibleActiveMatch = (0, import_react5.useMemo)(() => {
|
|
2342
|
+
if (!enableInlineSearch || !inlineSearch.activeMatch) return null;
|
|
2343
|
+
return mapSearchResultToVisibleItem(
|
|
2344
|
+
inlineSearch.activeMatch,
|
|
2345
|
+
searchCorpus,
|
|
2346
|
+
visibleRowIndexById
|
|
2347
|
+
);
|
|
2348
|
+
}, [
|
|
2349
|
+
enableInlineSearch,
|
|
2350
|
+
inlineSearch.activeMatch,
|
|
2351
|
+
searchCorpus,
|
|
2352
|
+
visibleRowIndexById
|
|
2353
|
+
]);
|
|
2354
|
+
const clearHover = (0, import_react5.useCallback)(() => {
|
|
1570
2355
|
setHoveredRowIndex(null);
|
|
1571
2356
|
}, []);
|
|
1572
|
-
const handleRowHover = (0,
|
|
2357
|
+
const handleRowHover = (0, import_react5.useCallback)((rowIndex, _rowData) => {
|
|
1573
2358
|
setHoveredRowIndex(rowIndex);
|
|
1574
2359
|
}, []);
|
|
1575
|
-
const handleToggleSelect = (0,
|
|
2360
|
+
const handleToggleSelect = (0, import_react5.useCallback)(
|
|
1576
2361
|
(row) => {
|
|
1577
2362
|
if (!row.getCanSelect()) return;
|
|
1578
2363
|
if (preserveRowSelection && row.getIsSelected()) {
|
|
@@ -1582,14 +2367,14 @@ function useGlideTable(options) {
|
|
|
1582
2367
|
},
|
|
1583
2368
|
[preserveRowSelection]
|
|
1584
2369
|
);
|
|
1585
|
-
const handleToggleExpand = (0,
|
|
2370
|
+
const handleToggleExpand = (0, import_react5.useCallback)(
|
|
1586
2371
|
(rowKey) => {
|
|
1587
2372
|
if (preventExpand) return;
|
|
1588
2373
|
handleExpandedRowsChange(toggleExpandedRowId(rowKey, expandedRows));
|
|
1589
2374
|
},
|
|
1590
2375
|
[preventExpand, handleExpandedRowsChange, expandedRows]
|
|
1591
2376
|
);
|
|
1592
|
-
const rowContextValue = (0,
|
|
2377
|
+
const rowContextValue = (0, import_react5.useMemo)(() => {
|
|
1593
2378
|
return {
|
|
1594
2379
|
rowSpan: {
|
|
1595
2380
|
enableRowSpan,
|
|
@@ -1637,6 +2422,11 @@ function useGlideTable(options) {
|
|
|
1637
2422
|
columnFreeze: {
|
|
1638
2423
|
enableColumnFreeze,
|
|
1639
2424
|
offsets: columnFreezeOffsets
|
|
2425
|
+
},
|
|
2426
|
+
inlineSearch: {
|
|
2427
|
+
enabled: enableInlineSearch,
|
|
2428
|
+
matchKeys: visibleSearchMatchKeys,
|
|
2429
|
+
activeMatch: visibleActiveMatch
|
|
1640
2430
|
}
|
|
1641
2431
|
};
|
|
1642
2432
|
}, [
|
|
@@ -1672,14 +2462,17 @@ function useGlideTable(options) {
|
|
|
1672
2462
|
labels.collapseRow,
|
|
1673
2463
|
enableColumnResize,
|
|
1674
2464
|
enableColumnFreeze,
|
|
1675
|
-
columnFreezeOffsets
|
|
2465
|
+
columnFreezeOffsets,
|
|
2466
|
+
enableInlineSearch,
|
|
2467
|
+
visibleSearchMatchKeys,
|
|
2468
|
+
visibleActiveMatch
|
|
1676
2469
|
]);
|
|
1677
|
-
const copySelectionRef = (0,
|
|
1678
|
-
(0,
|
|
2470
|
+
const copySelectionRef = (0, import_react5.useRef)(copySelection);
|
|
2471
|
+
(0, import_react5.useEffect)(() => {
|
|
1679
2472
|
copySelectionRef.current = copySelection;
|
|
1680
2473
|
}, [copySelection]);
|
|
1681
|
-
const stableCopySelection = (0,
|
|
1682
|
-
(0,
|
|
2474
|
+
const stableCopySelection = (0, import_react5.useCallback)((options2) => copySelectionRef.current(options2), []);
|
|
2475
|
+
(0, import_react5.useEffect)(() => {
|
|
1683
2476
|
onCopyActionsReady?.({ copySelection: stableCopySelection });
|
|
1684
2477
|
}, [onCopyActionsReady, stableCopySelection]);
|
|
1685
2478
|
return {
|
|
@@ -1695,8 +2488,10 @@ function useGlideTable(options) {
|
|
|
1695
2488
|
enableCellSelection,
|
|
1696
2489
|
enableColumnResize,
|
|
1697
2490
|
enableColumnFreeze,
|
|
2491
|
+
enableInlineSearch,
|
|
1698
2492
|
shouldVirtualize,
|
|
1699
2493
|
scrollRef,
|
|
2494
|
+
rootRef,
|
|
1700
2495
|
rowVirtualizer,
|
|
1701
2496
|
virtualRows,
|
|
1702
2497
|
paddingTop,
|
|
@@ -1704,7 +2499,21 @@ function useGlideTable(options) {
|
|
|
1704
2499
|
rowContextValue,
|
|
1705
2500
|
handleToggleSelect,
|
|
1706
2501
|
clearHover,
|
|
1707
|
-
copySelection: stableCopySelection
|
|
2502
|
+
copySelection: stableCopySelection,
|
|
2503
|
+
inlineSearch: {
|
|
2504
|
+
showSearch: inlineSearch.showSearch,
|
|
2505
|
+
searchValue: inlineSearch.searchValue,
|
|
2506
|
+
searchStatus: inlineSearch.searchStatus,
|
|
2507
|
+
searchInputRef: inlineSearch.searchInputRef,
|
|
2508
|
+
searchInputId: inlineSearch.searchInputId,
|
|
2509
|
+
canClose: inlineSearch.canClose,
|
|
2510
|
+
searchRowCount: searchCorpus.length,
|
|
2511
|
+
setSearchValue: inlineSearch.setSearchValue,
|
|
2512
|
+
closeSearch: inlineSearch.closeSearch,
|
|
2513
|
+
goToNext: inlineSearch.goToNext,
|
|
2514
|
+
goToPrevious: inlineSearch.goToPrevious,
|
|
2515
|
+
openSearch: inlineSearch.openSearch
|
|
2516
|
+
}
|
|
1708
2517
|
};
|
|
1709
2518
|
}
|
|
1710
2519
|
|
|
@@ -1723,18 +2532,18 @@ function getColumnSizeStyle(size, options) {
|
|
|
1723
2532
|
|
|
1724
2533
|
// src/components/ui/table/components/DataTable/DataTable.tsx
|
|
1725
2534
|
var import_react_table3 = require("@tanstack/react-table");
|
|
1726
|
-
var
|
|
2535
|
+
var import_react8 = require("react");
|
|
1727
2536
|
|
|
1728
2537
|
// src/components/ui/table/components/DataTable/DataTableRow.tsx
|
|
1729
2538
|
var import_react_table2 = require("@tanstack/react-table");
|
|
1730
|
-
var
|
|
2539
|
+
var import_react7 = require("react");
|
|
1731
2540
|
|
|
1732
2541
|
// src/components/ui/table/DataTableContext.tsx
|
|
1733
|
-
var
|
|
2542
|
+
var import_react6 = require("react");
|
|
1734
2543
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
1735
|
-
var DataTableContext = (0,
|
|
2544
|
+
var DataTableContext = (0, import_react6.createContext)(null);
|
|
1736
2545
|
function useDataTableRowContext() {
|
|
1737
|
-
const context = (0,
|
|
2546
|
+
const context = (0, import_react6.use)(DataTableContext);
|
|
1738
2547
|
if (!context) {
|
|
1739
2548
|
throw new Error("useDataTableRowContext must be used within a DataTableContextProvider");
|
|
1740
2549
|
}
|
|
@@ -1935,10 +2744,16 @@ function DataTableRow({
|
|
|
1935
2744
|
cellEdit,
|
|
1936
2745
|
expand,
|
|
1937
2746
|
columnResize,
|
|
1938
|
-
columnFreeze
|
|
2747
|
+
columnFreeze,
|
|
2748
|
+
inlineSearch
|
|
1939
2749
|
} = useDataTableRowContext();
|
|
1940
2750
|
const { enableColumnResize } = columnResize;
|
|
1941
2751
|
const { enableColumnFreeze, offsets: freezeOffsets } = columnFreeze;
|
|
2752
|
+
const {
|
|
2753
|
+
enabled: enableInlineSearch,
|
|
2754
|
+
matchKeys: searchMatchKeys,
|
|
2755
|
+
activeMatch
|
|
2756
|
+
} = inlineSearch;
|
|
1942
2757
|
const {
|
|
1943
2758
|
enableRowSpan,
|
|
1944
2759
|
primaryRowSpanColumnId,
|
|
@@ -2032,9 +2847,9 @@ function DataTableRow({
|
|
|
2032
2847
|
const expandKey = toggleField && rowData[toggleField] !== null && rowData[toggleField] !== void 0 ? String(rowData[toggleField]) : null;
|
|
2033
2848
|
const isExpanded = expandKey !== null && Boolean(expandedRows?.has(expandKey));
|
|
2034
2849
|
const rowLevel = typeof rowData.level === "number" ? rowData.level : 0;
|
|
2035
|
-
const editInputRef = (0,
|
|
2850
|
+
const editInputRef = (0, import_react7.useRef)(null);
|
|
2036
2851
|
const isRowEditing = editingCell?.rowIndex === rowIndex;
|
|
2037
|
-
(0,
|
|
2852
|
+
(0, import_react7.useEffect)(() => {
|
|
2038
2853
|
if (!isRowEditing) return;
|
|
2039
2854
|
editInputRef.current?.focus();
|
|
2040
2855
|
editInputRef.current?.select();
|
|
@@ -2130,17 +2945,25 @@ function DataTableRow({
|
|
|
2130
2945
|
...freezeStyle,
|
|
2131
2946
|
...selectionEdgeStyle
|
|
2132
2947
|
};
|
|
2948
|
+
const searchMatchKey = buildSearchMatchKey(cellIndex, rowIndex);
|
|
2949
|
+
const isSearchMatch = enableInlineSearch && searchMatchKeys.has(searchMatchKey);
|
|
2950
|
+
const isSearchActive = isSearchMatch && activeMatch !== null && activeMatch[0] === cellIndex && activeMatch[1] === rowIndex;
|
|
2133
2951
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
2134
2952
|
"td",
|
|
2135
2953
|
{
|
|
2954
|
+
"data-row-index": rowIndex,
|
|
2955
|
+
"data-col-index": cellIndex,
|
|
2136
2956
|
rowSpan: rowSpanInfo && rowSpanInfo.rowSpan > 1 ? rowSpanInfo.rowSpan : void 0,
|
|
2137
2957
|
"data-merged": isMerged && cellIndex > 0 ? "" : void 0,
|
|
2138
2958
|
"data-merged-edge-right": showMergedRightEdge ? "" : void 0,
|
|
2139
2959
|
"data-merged-row-first": isMerged && cellIndex === 0 && showMergedRightEdge ? "" : void 0,
|
|
2960
|
+
"data-selected": !enableRowSpan && showCellSelected ? "" : void 0,
|
|
2140
2961
|
"data-group-selected": enableRowSpan && showCellSelected ? "" : void 0,
|
|
2141
2962
|
"data-group-hovered": enableRowSpan && showCellHover && !showCellSelected ? "" : void 0,
|
|
2142
2963
|
"data-selection-fill": isCellDragSelected ? "" : void 0,
|
|
2143
2964
|
"data-selection-edges": hasSelectionEdges ? "" : void 0,
|
|
2965
|
+
"data-search-match": isSearchMatch ? "" : void 0,
|
|
2966
|
+
"data-search-active": isSearchActive ? "" : void 0,
|
|
2144
2967
|
"data-editable": editable ? "" : void 0,
|
|
2145
2968
|
"data-editing": isEditing ? "" : void 0,
|
|
2146
2969
|
"data-frozen": freezeOffset?.side,
|
|
@@ -2155,7 +2978,8 @@ function DataTableRow({
|
|
|
2155
2978
|
event.preventDefault();
|
|
2156
2979
|
onCellMouseDown(
|
|
2157
2980
|
resolveCellRowIndex(event.clientY, event.currentTarget),
|
|
2158
|
-
cellIndex
|
|
2981
|
+
cellIndex,
|
|
2982
|
+
{ shiftKey: event.shiftKey }
|
|
2159
2983
|
);
|
|
2160
2984
|
},
|
|
2161
2985
|
onMouseEnter: (event) => {
|
|
@@ -2192,6 +3016,8 @@ function DataTableRow({
|
|
|
2192
3016
|
enableRowSpan && showCellHover && !showCellSelected && "is-group-hovered",
|
|
2193
3017
|
isCellDragSelected && CELL_SELECTION_FILL_CLASS,
|
|
2194
3018
|
hasSelectionEdges && CELL_SELECTION_EDGES_CLASS,
|
|
3019
|
+
isSearchMatch && "is-search-match",
|
|
3020
|
+
isSearchActive && "is-search-active",
|
|
2195
3021
|
editable && "is-editable",
|
|
2196
3022
|
classNames?.cell
|
|
2197
3023
|
),
|
|
@@ -2326,8 +3152,169 @@ function DataTableRow({
|
|
|
2326
3152
|
);
|
|
2327
3153
|
}
|
|
2328
3154
|
|
|
2329
|
-
// src/components/ui/table/components/DataTable/
|
|
3155
|
+
// src/components/ui/table/components/DataTable/DataTableSearch.tsx
|
|
2330
3156
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
3157
|
+
function SearchCloseIcon({ className }) {
|
|
3158
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
3159
|
+
"svg",
|
|
3160
|
+
{
|
|
3161
|
+
className,
|
|
3162
|
+
"aria-hidden": true,
|
|
3163
|
+
width: "16",
|
|
3164
|
+
height: "16",
|
|
3165
|
+
viewBox: "0 0 24 24",
|
|
3166
|
+
fill: "none",
|
|
3167
|
+
stroke: "currentColor",
|
|
3168
|
+
strokeWidth: "2",
|
|
3169
|
+
strokeLinecap: "round",
|
|
3170
|
+
strokeLinejoin: "round",
|
|
3171
|
+
children: [
|
|
3172
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M18 6 6 18" }),
|
|
3173
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m6 6 12 12" })
|
|
3174
|
+
]
|
|
3175
|
+
}
|
|
3176
|
+
);
|
|
3177
|
+
}
|
|
3178
|
+
function DataTableSearch({
|
|
3179
|
+
showSearch,
|
|
3180
|
+
searchValue,
|
|
3181
|
+
searchStatus,
|
|
3182
|
+
searchInputId,
|
|
3183
|
+
searchInputRef,
|
|
3184
|
+
canClose,
|
|
3185
|
+
placeholder,
|
|
3186
|
+
resultHint,
|
|
3187
|
+
previousLabel,
|
|
3188
|
+
nextLabel,
|
|
3189
|
+
closeLabel,
|
|
3190
|
+
rowsTotal,
|
|
3191
|
+
classNames,
|
|
3192
|
+
onSearchValueChange,
|
|
3193
|
+
onClose,
|
|
3194
|
+
onNext,
|
|
3195
|
+
onPrevious
|
|
3196
|
+
}) {
|
|
3197
|
+
if (!showSearch) return null;
|
|
3198
|
+
const resultString = searchStatus ? formatSearchResultLabel(searchStatus) : resultHint;
|
|
3199
|
+
const progress = rowsTotal > 0 ? Math.floor((searchStatus?.rowsSearched ?? 0) / rowsTotal * 100) : 0;
|
|
3200
|
+
const handleKeyDown = (event) => {
|
|
3201
|
+
if ((event.ctrlKey || event.metaKey) && event.code === "KeyF" || event.key === "Escape") {
|
|
3202
|
+
event.preventDefault();
|
|
3203
|
+
event.stopPropagation();
|
|
3204
|
+
if (canClose) {
|
|
3205
|
+
onClose();
|
|
3206
|
+
}
|
|
3207
|
+
return;
|
|
3208
|
+
}
|
|
3209
|
+
if (event.key === "ArrowDown" || event.key === "Enter" && !event.shiftKey) {
|
|
3210
|
+
event.preventDefault();
|
|
3211
|
+
onNext();
|
|
3212
|
+
return;
|
|
3213
|
+
}
|
|
3214
|
+
if (event.key === "ArrowUp" || event.key === "Enter" && event.shiftKey) {
|
|
3215
|
+
event.preventDefault();
|
|
3216
|
+
onPrevious();
|
|
3217
|
+
}
|
|
3218
|
+
};
|
|
3219
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
3220
|
+
"div",
|
|
3221
|
+
{
|
|
3222
|
+
className: cn("data-table-search", classNames?.search),
|
|
3223
|
+
role: "search",
|
|
3224
|
+
onMouseDown: (event) => event.stopPropagation(),
|
|
3225
|
+
children: [
|
|
3226
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "data-table-search-row", children: [
|
|
3227
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
3228
|
+
"input",
|
|
3229
|
+
{
|
|
3230
|
+
ref: searchInputRef,
|
|
3231
|
+
id: searchInputId,
|
|
3232
|
+
type: "search",
|
|
3233
|
+
value: searchValue,
|
|
3234
|
+
placeholder,
|
|
3235
|
+
autoComplete: "off",
|
|
3236
|
+
spellCheck: false,
|
|
3237
|
+
"aria-label": placeholder,
|
|
3238
|
+
className: cn("data-table-search-input", classNames?.searchInput),
|
|
3239
|
+
onChange: (event) => onSearchValueChange(event.target.value),
|
|
3240
|
+
onKeyDown: handleKeyDown
|
|
3241
|
+
}
|
|
3242
|
+
),
|
|
3243
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
3244
|
+
"button",
|
|
3245
|
+
{
|
|
3246
|
+
type: "button",
|
|
3247
|
+
"aria-label": previousLabel,
|
|
3248
|
+
className: cn("data-table-search-button", classNames?.searchButton),
|
|
3249
|
+
onClick: (event) => {
|
|
3250
|
+
event.stopPropagation();
|
|
3251
|
+
onPrevious();
|
|
3252
|
+
},
|
|
3253
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChevronUp, { className: "data-table-search-icon" })
|
|
3254
|
+
}
|
|
3255
|
+
),
|
|
3256
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
3257
|
+
"button",
|
|
3258
|
+
{
|
|
3259
|
+
type: "button",
|
|
3260
|
+
"aria-label": nextLabel,
|
|
3261
|
+
className: cn("data-table-search-button", classNames?.searchButton),
|
|
3262
|
+
onClick: (event) => {
|
|
3263
|
+
event.stopPropagation();
|
|
3264
|
+
onNext();
|
|
3265
|
+
},
|
|
3266
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChevronDown, { className: "data-table-search-icon" })
|
|
3267
|
+
}
|
|
3268
|
+
),
|
|
3269
|
+
canClose ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
3270
|
+
"button",
|
|
3271
|
+
{
|
|
3272
|
+
type: "button",
|
|
3273
|
+
"aria-label": closeLabel,
|
|
3274
|
+
className: cn("data-table-search-button", classNames?.searchButton),
|
|
3275
|
+
onClick: (event) => {
|
|
3276
|
+
event.stopPropagation();
|
|
3277
|
+
onClose();
|
|
3278
|
+
},
|
|
3279
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SearchCloseIcon, { className: "data-table-search-icon" })
|
|
3280
|
+
}
|
|
3281
|
+
) : null
|
|
3282
|
+
] }),
|
|
3283
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
3284
|
+
"div",
|
|
3285
|
+
{
|
|
3286
|
+
className: cn("data-table-search-status", classNames?.searchStatus),
|
|
3287
|
+
"aria-live": "polite",
|
|
3288
|
+
children: resultString
|
|
3289
|
+
}
|
|
3290
|
+
),
|
|
3291
|
+
searchStatus !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
3292
|
+
"div",
|
|
3293
|
+
{
|
|
3294
|
+
className: cn(
|
|
3295
|
+
"data-table-search-progress",
|
|
3296
|
+
classNames?.searchProgress
|
|
3297
|
+
),
|
|
3298
|
+
role: "progressbar",
|
|
3299
|
+
"aria-valuemin": 0,
|
|
3300
|
+
"aria-valuemax": 100,
|
|
3301
|
+
"aria-valuenow": progress,
|
|
3302
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
3303
|
+
"div",
|
|
3304
|
+
{
|
|
3305
|
+
className: "data-table-search-progress-bar",
|
|
3306
|
+
style: { width: `${progress}%` }
|
|
3307
|
+
}
|
|
3308
|
+
)
|
|
3309
|
+
}
|
|
3310
|
+
) : null
|
|
3311
|
+
]
|
|
3312
|
+
}
|
|
3313
|
+
);
|
|
3314
|
+
}
|
|
3315
|
+
|
|
3316
|
+
// src/components/ui/table/components/DataTable/DataTableToolbar.tsx
|
|
3317
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
2331
3318
|
function DataTableToolbar({
|
|
2332
3319
|
filteredCount,
|
|
2333
3320
|
totalCount,
|
|
@@ -2345,39 +3332,39 @@ function DataTableToolbar({
|
|
|
2345
3332
|
const selectionContent = selectionLabel?.(selectedCount) ?? null;
|
|
2346
3333
|
const hasSelectionContent = selectionContent !== null && selectionContent !== false && selectionContent !== void 0 && typeof selectionContent !== "boolean";
|
|
2347
3334
|
if (!hasLeftContent && !hasToolbar && !hasSelectionContent) return null;
|
|
2348
|
-
return /* @__PURE__ */ (0,
|
|
2349
|
-
/* @__PURE__ */ (0,
|
|
2350
|
-
hasCount && /* @__PURE__ */ (0,
|
|
2351
|
-
/* @__PURE__ */ (0,
|
|
2352
|
-
/* @__PURE__ */ (0,
|
|
3335
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("DataTableToolbarJSX", classNames?.toolbar, className), children: [
|
|
3336
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("toolbar-left", classNames?.toolbarLeft), children: [
|
|
3337
|
+
hasCount && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: cn("toolbar-count", classNames?.toolbarCount), children: displayFiltered !== void 0 && totalCount !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
|
|
3338
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "toolbar-count-primary", children: displayFiltered }),
|
|
3339
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "toolbar-count-placeholder", children: [
|
|
2353
3340
|
" / ",
|
|
2354
3341
|
totalCount
|
|
2355
3342
|
] })
|
|
2356
|
-
] }) : /* @__PURE__ */ (0,
|
|
3343
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "toolbar-count-primary", children: displayFiltered ?? totalCount }) }),
|
|
2357
3344
|
summary
|
|
2358
3345
|
] }),
|
|
2359
|
-
/* @__PURE__ */ (0,
|
|
2360
|
-
hasSelectionContent && (typeof selectionContent === "string" || typeof selectionContent === "number" ? /* @__PURE__ */ (0,
|
|
2361
|
-
hasToolbar && /* @__PURE__ */ (0,
|
|
3346
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("toolbar-right", classNames?.toolbarRight), children: [
|
|
3347
|
+
hasSelectionContent && (typeof selectionContent === "string" || typeof selectionContent === "number" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: cn("toolbar-selection", classNames?.toolbarSelection), children: selectionContent }) : selectionContent),
|
|
3348
|
+
hasToolbar && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: cn("toolbar-actions", classNames?.toolbarActions), children: toolbar })
|
|
2362
3349
|
] })
|
|
2363
3350
|
] });
|
|
2364
3351
|
}
|
|
2365
3352
|
|
|
2366
3353
|
// src/components/ui/table/components/DataTable/DataTable.tsx
|
|
2367
|
-
var
|
|
3354
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
2368
3355
|
function DefaultScroll({
|
|
2369
3356
|
scrollRef,
|
|
2370
3357
|
children,
|
|
2371
3358
|
className
|
|
2372
3359
|
}) {
|
|
2373
|
-
return /* @__PURE__ */ (0,
|
|
3360
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: scrollRef, className: cn("data-table-scroll", className), children });
|
|
2374
3361
|
}
|
|
2375
3362
|
function DefaultPending({
|
|
2376
3363
|
loadingText,
|
|
2377
3364
|
className,
|
|
2378
3365
|
classNames
|
|
2379
3366
|
}) {
|
|
2380
|
-
return /* @__PURE__ */ (0,
|
|
3367
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2381
3368
|
"div",
|
|
2382
3369
|
{
|
|
2383
3370
|
className: cn(
|
|
@@ -2387,7 +3374,7 @@ function DefaultPending({
|
|
|
2387
3374
|
classNames?.pending,
|
|
2388
3375
|
className
|
|
2389
3376
|
),
|
|
2390
|
-
children: /* @__PURE__ */ (0,
|
|
3377
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: cn("data-table-loading-text", classNames?.loadingText), children: loadingText })
|
|
2391
3378
|
}
|
|
2392
3379
|
);
|
|
2393
3380
|
}
|
|
@@ -2396,7 +3383,7 @@ function DefaultEmpty({
|
|
|
2396
3383
|
columnCount,
|
|
2397
3384
|
classNames
|
|
2398
3385
|
}) {
|
|
2399
|
-
return /* @__PURE__ */ (0,
|
|
3386
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2400
3387
|
"td",
|
|
2401
3388
|
{
|
|
2402
3389
|
colSpan: columnCount,
|
|
@@ -2429,15 +3416,18 @@ function DataTable({
|
|
|
2429
3416
|
enableCellSelection,
|
|
2430
3417
|
enableColumnResize,
|
|
2431
3418
|
enableColumnFreeze,
|
|
3419
|
+
enableInlineSearch,
|
|
2432
3420
|
shouldVirtualize,
|
|
2433
3421
|
scrollRef,
|
|
3422
|
+
rootRef,
|
|
2434
3423
|
rowVirtualizer,
|
|
2435
3424
|
virtualRows,
|
|
2436
3425
|
paddingTop,
|
|
2437
3426
|
paddingBottom,
|
|
2438
3427
|
rowContextValue,
|
|
2439
3428
|
handleToggleSelect,
|
|
2440
|
-
clearHover
|
|
3429
|
+
clearHover,
|
|
3430
|
+
inlineSearch
|
|
2441
3431
|
} = useGlideTable(glideOptions);
|
|
2442
3432
|
const ToolbarSlot = slots?.Toolbar ?? DataTableToolbar;
|
|
2443
3433
|
const ScrollSlot = slots?.Scroll ?? DefaultScroll;
|
|
@@ -2445,12 +3435,12 @@ function DataTable({
|
|
|
2445
3435
|
const PendingSlot = slots?.Pending ?? DefaultPending;
|
|
2446
3436
|
const EmptySlot = slots?.Empty ?? DefaultEmpty;
|
|
2447
3437
|
const freezeOffsets = rowContextValue.columnFreeze.offsets;
|
|
2448
|
-
const contextValue = (0,
|
|
3438
|
+
const contextValue = (0, import_react8.useMemo)(
|
|
2449
3439
|
() => ({ ...rowContextValue, classNames }),
|
|
2450
3440
|
[rowContextValue, classNames]
|
|
2451
3441
|
);
|
|
2452
3442
|
if (isPending) {
|
|
2453
|
-
return /* @__PURE__ */ (0,
|
|
3443
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2454
3444
|
PendingSlot,
|
|
2455
3445
|
{
|
|
2456
3446
|
loadingText,
|
|
@@ -2459,19 +3449,21 @@ function DataTable({
|
|
|
2459
3449
|
}
|
|
2460
3450
|
);
|
|
2461
3451
|
}
|
|
2462
|
-
return /* @__PURE__ */ (0,
|
|
3452
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
2463
3453
|
"div",
|
|
2464
3454
|
{
|
|
3455
|
+
ref: rootRef,
|
|
2465
3456
|
className: cn(
|
|
2466
3457
|
"DataTableJSX",
|
|
2467
3458
|
!enableCellSelection && "DataTableJSX--no-cell-selection",
|
|
2468
3459
|
enableColumnResize && "DataTableJSX--column-resize",
|
|
2469
3460
|
enableColumnFreeze && "DataTableJSX--column-freeze",
|
|
3461
|
+
enableInlineSearch && "DataTableJSX--inline-search",
|
|
2470
3462
|
classNames?.root,
|
|
2471
3463
|
className
|
|
2472
3464
|
),
|
|
2473
3465
|
children: [
|
|
2474
|
-
/* @__PURE__ */ (0,
|
|
3466
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2475
3467
|
ToolbarSlot,
|
|
2476
3468
|
{
|
|
2477
3469
|
filteredCount: filteredCount ?? tableData.length,
|
|
@@ -2483,14 +3475,36 @@ function DataTable({
|
|
|
2483
3475
|
classNames
|
|
2484
3476
|
}
|
|
2485
3477
|
),
|
|
2486
|
-
|
|
3478
|
+
enableInlineSearch ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
3479
|
+
DataTableSearch,
|
|
3480
|
+
{
|
|
3481
|
+
showSearch: inlineSearch.showSearch,
|
|
3482
|
+
searchValue: inlineSearch.searchValue,
|
|
3483
|
+
searchStatus: inlineSearch.searchStatus,
|
|
3484
|
+
searchInputId: inlineSearch.searchInputId,
|
|
3485
|
+
searchInputRef: inlineSearch.searchInputRef,
|
|
3486
|
+
canClose: inlineSearch.canClose,
|
|
3487
|
+
placeholder: labels.searchPlaceholder,
|
|
3488
|
+
resultHint: labels.searchResultHint,
|
|
3489
|
+
previousLabel: labels.searchPrevious,
|
|
3490
|
+
nextLabel: labels.searchNext,
|
|
3491
|
+
closeLabel: labels.searchClose,
|
|
3492
|
+
rowsTotal: inlineSearch.searchRowCount,
|
|
3493
|
+
classNames,
|
|
3494
|
+
onSearchValueChange: inlineSearch.setSearchValue,
|
|
3495
|
+
onClose: inlineSearch.closeSearch,
|
|
3496
|
+
onNext: inlineSearch.goToNext,
|
|
3497
|
+
onPrevious: inlineSearch.goToPrevious
|
|
3498
|
+
}
|
|
3499
|
+
) : null,
|
|
3500
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ScrollSlot, { scrollRef, className: classNames?.scroll, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
2487
3501
|
"table",
|
|
2488
3502
|
{
|
|
2489
3503
|
className: cn("data-table", classNames?.table),
|
|
2490
3504
|
style: enableColumnResize ? { width: table.getTotalSize() } : void 0,
|
|
2491
3505
|
onDragStart: enableCellSelection ? (event) => event.preventDefault() : void 0,
|
|
2492
3506
|
children: [
|
|
2493
|
-
/* @__PURE__ */ (0,
|
|
3507
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("thead", { className: cn("data-table-head", classNames?.head), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2494
3508
|
"tr",
|
|
2495
3509
|
{
|
|
2496
3510
|
className: cn("data-table-head-row", classNames?.headRow),
|
|
@@ -2510,7 +3524,7 @@ function DataTable({
|
|
|
2510
3524
|
...sizeStyle,
|
|
2511
3525
|
...freezeStyle
|
|
2512
3526
|
};
|
|
2513
|
-
return /* @__PURE__ */ (0,
|
|
3527
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
2514
3528
|
"th",
|
|
2515
3529
|
{
|
|
2516
3530
|
"data-resizing": header.column.getIsResizing() ? "" : void 0,
|
|
@@ -2526,7 +3540,7 @@ function DataTable({
|
|
|
2526
3540
|
),
|
|
2527
3541
|
children: [
|
|
2528
3542
|
header.isPlaceholder ? null : (0, import_react_table3.flexRender)(header.column.columnDef.header, header.getContext()),
|
|
2529
|
-
canResize ? /* @__PURE__ */ (0,
|
|
3543
|
+
canResize ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2530
3544
|
"div",
|
|
2531
3545
|
{
|
|
2532
3546
|
role: "separator",
|
|
@@ -2552,20 +3566,20 @@ function DataTable({
|
|
|
2552
3566
|
},
|
|
2553
3567
|
headerGroup.id
|
|
2554
3568
|
)) }),
|
|
2555
|
-
/* @__PURE__ */ (0,
|
|
3569
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DataTableContextProvider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2556
3570
|
"tbody",
|
|
2557
3571
|
{
|
|
2558
3572
|
onMouseLeave: clearHover,
|
|
2559
3573
|
className: cn("data-table-body", classNames?.body),
|
|
2560
|
-
children: rows.length === 0 ? /* @__PURE__ */ (0,
|
|
3574
|
+
children: rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2561
3575
|
EmptySlot,
|
|
2562
3576
|
{
|
|
2563
3577
|
emptyText,
|
|
2564
3578
|
columnCount,
|
|
2565
3579
|
classNames
|
|
2566
3580
|
}
|
|
2567
|
-
) : shouldVirtualize ? /* @__PURE__ */ (0,
|
|
2568
|
-
paddingTop > 0 && /* @__PURE__ */ (0,
|
|
3581
|
+
) : shouldVirtualize ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
|
|
3582
|
+
paddingTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2569
3583
|
"tr",
|
|
2570
3584
|
{
|
|
2571
3585
|
"aria-hidden": true,
|
|
@@ -2573,7 +3587,7 @@ function DataTable({
|
|
|
2573
3587
|
"data-table-virtual-spacer",
|
|
2574
3588
|
classNames?.virtualSpacer
|
|
2575
3589
|
),
|
|
2576
|
-
children: /* @__PURE__ */ (0,
|
|
3590
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2577
3591
|
"td",
|
|
2578
3592
|
{
|
|
2579
3593
|
colSpan: columnCount,
|
|
@@ -2589,7 +3603,7 @@ function DataTable({
|
|
|
2589
3603
|
virtualRows.map((virtualRow) => {
|
|
2590
3604
|
const row = rows[virtualRow.index];
|
|
2591
3605
|
if (!row) return null;
|
|
2592
|
-
return /* @__PURE__ */ (0,
|
|
3606
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2593
3607
|
RowSlot,
|
|
2594
3608
|
{
|
|
2595
3609
|
row,
|
|
@@ -2600,7 +3614,7 @@ function DataTable({
|
|
|
2600
3614
|
row.id
|
|
2601
3615
|
);
|
|
2602
3616
|
}),
|
|
2603
|
-
paddingBottom > 0 && /* @__PURE__ */ (0,
|
|
3617
|
+
paddingBottom > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2604
3618
|
"tr",
|
|
2605
3619
|
{
|
|
2606
3620
|
"aria-hidden": true,
|
|
@@ -2608,7 +3622,7 @@ function DataTable({
|
|
|
2608
3622
|
"data-table-virtual-spacer",
|
|
2609
3623
|
classNames?.virtualSpacer
|
|
2610
3624
|
),
|
|
2611
|
-
children: /* @__PURE__ */ (0,
|
|
3625
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2612
3626
|
"td",
|
|
2613
3627
|
{
|
|
2614
3628
|
colSpan: columnCount,
|
|
@@ -2621,7 +3635,7 @@ function DataTable({
|
|
|
2621
3635
|
)
|
|
2622
3636
|
}
|
|
2623
3637
|
)
|
|
2624
|
-
] }) : rows.map((row) => /* @__PURE__ */ (0,
|
|
3638
|
+
] }) : rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2625
3639
|
RowSlot,
|
|
2626
3640
|
{
|
|
2627
3641
|
row,
|
|
@@ -2640,10 +3654,10 @@ function DataTable({
|
|
|
2640
3654
|
}
|
|
2641
3655
|
|
|
2642
3656
|
// src/components/ui/table/components/Table/Table.tsx
|
|
2643
|
-
var
|
|
3657
|
+
var import_react11 = require("react");
|
|
2644
3658
|
|
|
2645
3659
|
// src/components/ui/table/components/Table/buildColumnDef.tsx
|
|
2646
|
-
var
|
|
3660
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
2647
3661
|
function SortableHeader({
|
|
2648
3662
|
label,
|
|
2649
3663
|
field,
|
|
@@ -2652,15 +3666,15 @@ function SortableHeader({
|
|
|
2652
3666
|
}) {
|
|
2653
3667
|
const isActive = sort?.field === field;
|
|
2654
3668
|
const Icon = isActive ? sort.direction === "asc" ? ArrowUp : ArrowDown : ArrowUpDown;
|
|
2655
|
-
return /* @__PURE__ */ (0,
|
|
3669
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
2656
3670
|
"button",
|
|
2657
3671
|
{
|
|
2658
3672
|
type: "button",
|
|
2659
3673
|
className: cn("SortableHeaderJSX", isActive ? "is-active" : "is-inactive"),
|
|
2660
3674
|
onClick: () => onSort(field),
|
|
2661
3675
|
children: [
|
|
2662
|
-
/* @__PURE__ */ (0,
|
|
2663
|
-
/* @__PURE__ */ (0,
|
|
3676
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: label }),
|
|
3677
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { className: "sortable-header-icon" })
|
|
2664
3678
|
]
|
|
2665
3679
|
}
|
|
2666
3680
|
);
|
|
@@ -2693,7 +3707,7 @@ function buildColumnDef(props, sort, onSort) {
|
|
|
2693
3707
|
...minWidth != null ? { minSize: minWidth } : {},
|
|
2694
3708
|
...maxWidth != null ? { maxSize: maxWidth } : {},
|
|
2695
3709
|
...resizable === false ? { enableResizing: false } : {},
|
|
2696
|
-
header: sortable ? () => /* @__PURE__ */ (0,
|
|
3710
|
+
header: sortable ? () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SortableHeader, { label: children, field, sort, onSort }) : (
|
|
2697
3711
|
// eslint-disable-next-line @typescript-eslint/promise-function-async
|
|
2698
3712
|
() => children
|
|
2699
3713
|
),
|
|
@@ -2720,10 +3734,10 @@ function buildColumnDef(props, sort, onSort) {
|
|
|
2720
3734
|
}
|
|
2721
3735
|
|
|
2722
3736
|
// src/components/ui/table/components/Table/parseTableChildren.ts
|
|
2723
|
-
var
|
|
3737
|
+
var import_react10 = require("react");
|
|
2724
3738
|
|
|
2725
3739
|
// src/components/ui/table/components/Table/tableChildTypes.ts
|
|
2726
|
-
var
|
|
3740
|
+
var import_react9 = require("react");
|
|
2727
3741
|
var TABLE_HEADER_DISPLAY_NAME = "Table.Header";
|
|
2728
3742
|
var TABLE_BODY_DISPLAY_NAME = "Table.Body";
|
|
2729
3743
|
var TABLE_COLUMN_DISPLAY_NAME = "Table.Column";
|
|
@@ -2735,16 +3749,16 @@ function getComponentDisplayName(type) {
|
|
|
2735
3749
|
return void 0;
|
|
2736
3750
|
}
|
|
2737
3751
|
function isTableHeaderElement(child) {
|
|
2738
|
-
return (0,
|
|
3752
|
+
return (0, import_react9.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_HEADER_DISPLAY_NAME;
|
|
2739
3753
|
}
|
|
2740
3754
|
function isTableBodyElement(child) {
|
|
2741
|
-
return (0,
|
|
3755
|
+
return (0, import_react9.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_BODY_DISPLAY_NAME;
|
|
2742
3756
|
}
|
|
2743
3757
|
function isTableColumnElement(child) {
|
|
2744
|
-
return (0,
|
|
3758
|
+
return (0, import_react9.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_COLUMN_DISPLAY_NAME;
|
|
2745
3759
|
}
|
|
2746
3760
|
function isTablePaginationElement(child) {
|
|
2747
|
-
return (0,
|
|
3761
|
+
return (0, import_react9.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_PAGINATION_DISPLAY_NAME;
|
|
2748
3762
|
}
|
|
2749
3763
|
|
|
2750
3764
|
// src/components/ui/table/components/Table/parseTableChildren.ts
|
|
@@ -2754,7 +3768,7 @@ function parseTableChildren(children) {
|
|
|
2754
3768
|
body: null,
|
|
2755
3769
|
pagination: null
|
|
2756
3770
|
};
|
|
2757
|
-
for (const child of
|
|
3771
|
+
for (const child of import_react10.Children.toArray(children)) {
|
|
2758
3772
|
if (isTableHeaderElement(child)) {
|
|
2759
3773
|
slots.header = child;
|
|
2760
3774
|
continue;
|
|
@@ -2771,12 +3785,12 @@ function parseTableChildren(children) {
|
|
|
2771
3785
|
}
|
|
2772
3786
|
function flattenColumnElements(children) {
|
|
2773
3787
|
const result = [];
|
|
2774
|
-
for (const child of
|
|
3788
|
+
for (const child of import_react10.Children.toArray(children)) {
|
|
2775
3789
|
if (isTableColumnElement(child)) {
|
|
2776
3790
|
result.push(child);
|
|
2777
3791
|
continue;
|
|
2778
3792
|
}
|
|
2779
|
-
if ((0,
|
|
3793
|
+
if ((0, import_react10.isValidElement)(child)) {
|
|
2780
3794
|
const nested = child.props.children;
|
|
2781
3795
|
if (nested != null) {
|
|
2782
3796
|
result.push(...flattenColumnElements(nested));
|
|
@@ -2841,7 +3855,7 @@ function TableHeader(props) {
|
|
|
2841
3855
|
TableHeader.displayName = TABLE_HEADER_DISPLAY_NAME;
|
|
2842
3856
|
|
|
2843
3857
|
// src/components/ui/table/components/Table/TablePagination.tsx
|
|
2844
|
-
var
|
|
3858
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
2845
3859
|
function TablePagination({
|
|
2846
3860
|
page,
|
|
2847
3861
|
pageSize = 10,
|
|
@@ -2853,8 +3867,8 @@ function TablePagination({
|
|
|
2853
3867
|
const safePage = Math.min(Math.max(1, page), totalPages);
|
|
2854
3868
|
const canGoPrev = safePage > 1;
|
|
2855
3869
|
const canGoNext = safePage < totalPages;
|
|
2856
|
-
return /* @__PURE__ */ (0,
|
|
2857
|
-
/* @__PURE__ */ (0,
|
|
3870
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cn("TablePaginationJSX", className), children: [
|
|
3871
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
2858
3872
|
"button",
|
|
2859
3873
|
{
|
|
2860
3874
|
type: "button",
|
|
@@ -2862,15 +3876,15 @@ function TablePagination({
|
|
|
2862
3876
|
disabled: !canGoPrev,
|
|
2863
3877
|
onClick: () => onChange(safePage - 1),
|
|
2864
3878
|
"aria-label": "Previous page",
|
|
2865
|
-
children: /* @__PURE__ */ (0,
|
|
3879
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronLeft, { className: "pagination-button-icon" })
|
|
2866
3880
|
}
|
|
2867
3881
|
),
|
|
2868
|
-
/* @__PURE__ */ (0,
|
|
3882
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "pagination-label", children: [
|
|
2869
3883
|
safePage,
|
|
2870
3884
|
" / ",
|
|
2871
3885
|
totalPages
|
|
2872
3886
|
] }),
|
|
2873
|
-
/* @__PURE__ */ (0,
|
|
3887
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
2874
3888
|
"button",
|
|
2875
3889
|
{
|
|
2876
3890
|
type: "button",
|
|
@@ -2878,7 +3892,7 @@ function TablePagination({
|
|
|
2878
3892
|
disabled: !canGoNext,
|
|
2879
3893
|
onClick: () => onChange(safePage + 1),
|
|
2880
3894
|
"aria-label": "Next page",
|
|
2881
|
-
children: /* @__PURE__ */ (0,
|
|
3895
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronRight, { className: "pagination-button-icon" })
|
|
2882
3896
|
}
|
|
2883
3897
|
)
|
|
2884
3898
|
] });
|
|
@@ -2886,7 +3900,7 @@ function TablePagination({
|
|
|
2886
3900
|
TablePagination.displayName = TABLE_PAGINATION_DISPLAY_NAME;
|
|
2887
3901
|
|
|
2888
3902
|
// src/components/ui/table/components/Table/Table.tsx
|
|
2889
|
-
var
|
|
3903
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
2890
3904
|
function TableRoot({
|
|
2891
3905
|
data,
|
|
2892
3906
|
children,
|
|
@@ -2895,12 +3909,12 @@ function TableRoot({
|
|
|
2895
3909
|
filteredCount,
|
|
2896
3910
|
...dataTableProps
|
|
2897
3911
|
}) {
|
|
2898
|
-
const { header, pagination: paginationElement } = (0,
|
|
3912
|
+
const { header, pagination: paginationElement } = (0, import_react11.useMemo)(
|
|
2899
3913
|
() => parseTableChildren(children),
|
|
2900
3914
|
[children]
|
|
2901
3915
|
);
|
|
2902
|
-
const [sort, setSort] = (0,
|
|
2903
|
-
const handleSort = (0,
|
|
3916
|
+
const [sort, setSort] = (0, import_react11.useState)(null);
|
|
3917
|
+
const handleSort = (0, import_react11.useCallback)((field) => {
|
|
2904
3918
|
setSort((previous) => {
|
|
2905
3919
|
if (previous?.field !== field) {
|
|
2906
3920
|
return { field, direction: "asc" };
|
|
@@ -2911,7 +3925,7 @@ function TableRoot({
|
|
|
2911
3925
|
return null;
|
|
2912
3926
|
});
|
|
2913
3927
|
}, []);
|
|
2914
|
-
const columns = (0,
|
|
3928
|
+
const columns = (0, import_react11.useMemo)(() => {
|
|
2915
3929
|
return extractColumnElements(header).map(
|
|
2916
3930
|
(columnElement) => buildColumnDef(columnElement.props, sort, handleSort)
|
|
2917
3931
|
);
|
|
@@ -2920,7 +3934,7 @@ function TableRoot({
|
|
|
2920
3934
|
const pageSize = paginationProps?.pageSize ?? 10;
|
|
2921
3935
|
const page = paginationProps?.page ?? 1;
|
|
2922
3936
|
const resolvedTotalCount = paginationProps?.totalCount ?? totalCount ?? data.length;
|
|
2923
|
-
const tableData = (0,
|
|
3937
|
+
const tableData = (0, import_react11.useMemo)(() => {
|
|
2924
3938
|
const sortedData = sortTableData(data, sort);
|
|
2925
3939
|
if (!paginationProps) return sortedData;
|
|
2926
3940
|
return paginateTableData(sortedData, page, pageSize);
|
|
@@ -2928,8 +3942,8 @@ function TableRoot({
|
|
|
2928
3942
|
if (columns.length === 0) {
|
|
2929
3943
|
console.warn("[Table] Declare at least one Table.Column inside Table.Header.");
|
|
2930
3944
|
}
|
|
2931
|
-
return /* @__PURE__ */ (0,
|
|
2932
|
-
/* @__PURE__ */ (0,
|
|
3945
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "TableJSX", children: [
|
|
3946
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
2933
3947
|
DataTable,
|
|
2934
3948
|
{
|
|
2935
3949
|
...dataTableProps,
|
|
@@ -2940,7 +3954,7 @@ function TableRoot({
|
|
|
2940
3954
|
className: cn(className, paginationProps && "DataTableJSX--with-pagination")
|
|
2941
3955
|
}
|
|
2942
3956
|
),
|
|
2943
|
-
paginationProps && /* @__PURE__ */ (0,
|
|
3957
|
+
paginationProps && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
2944
3958
|
TablePagination,
|
|
2945
3959
|
{
|
|
2946
3960
|
page,
|
|
@@ -2960,7 +3974,7 @@ function createTable() {
|
|
|
2960
3974
|
Column.displayName = TABLE_COLUMN_DISPLAY_NAME;
|
|
2961
3975
|
return Object.assign(
|
|
2962
3976
|
function BoundTable(props) {
|
|
2963
|
-
return /* @__PURE__ */ (0,
|
|
3977
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TableRoot, { ...props });
|
|
2964
3978
|
},
|
|
2965
3979
|
{
|
|
2966
3980
|
Header: TableHeader,
|
|
@@ -2985,20 +3999,31 @@ var Table = Object.assign(TableRoot, {
|
|
|
2985
3999
|
DEFAULT_TREE_PARENT_ID_FIELD,
|
|
2986
4000
|
DEFAULT_TREE_QTY_FIELD,
|
|
2987
4001
|
DataTable,
|
|
4002
|
+
INLINE_SEARCH_MAX_RESULTS,
|
|
2988
4003
|
Table,
|
|
2989
4004
|
applyCellEdit,
|
|
2990
4005
|
applyFillData,
|
|
2991
4006
|
applySelectionUpdater,
|
|
2992
4007
|
buildColumnFreezeOffsets,
|
|
2993
4008
|
buildColumnRowSpanMap,
|
|
4009
|
+
buildFlatSearchCorpus,
|
|
2994
4010
|
buildRowsPastePayload,
|
|
4011
|
+
buildSearchMatchKey,
|
|
4012
|
+
buildSearchMatchKeys,
|
|
4013
|
+
buildTreeSearchCorpus,
|
|
2995
4014
|
canExpandRow,
|
|
4015
|
+
cellValueToSearchText,
|
|
4016
|
+
collectAncestorKeysToExpand,
|
|
2996
4017
|
collectCopyRowEntries,
|
|
2997
4018
|
collectCopyRows,
|
|
2998
4019
|
collectFillChanges,
|
|
2999
4020
|
collectRowSpanColumns,
|
|
4021
|
+
collectSearchMatchesInRange,
|
|
4022
|
+
createSearchRegex,
|
|
3000
4023
|
createTable,
|
|
4024
|
+
escapeSearchRegex,
|
|
3001
4025
|
flattenSubtreeRows,
|
|
4026
|
+
formatSearchResultLabel,
|
|
3002
4027
|
getCellEditDraftValue,
|
|
3003
4028
|
getCellSelectionEdgeStyle,
|
|
3004
4029
|
getColumnEditType,
|
|
@@ -3010,10 +4035,15 @@ var Table = Object.assign(TableRoot, {
|
|
|
3010
4035
|
isCellInSelection,
|
|
3011
4036
|
isColumnEditable,
|
|
3012
4037
|
isEditablePasteTarget,
|
|
4038
|
+
mapSearchResultToVisibleItem,
|
|
4039
|
+
mapSearchResultsToVisibleKeys,
|
|
3013
4040
|
measureMergedSpanRowHeights,
|
|
4041
|
+
nextSearchIndex,
|
|
4042
|
+
nextSearchStride,
|
|
3014
4043
|
parseCellEditValue,
|
|
3015
4044
|
parseClipboardTSV,
|
|
3016
4045
|
parseClipboardTSVWithDepths,
|
|
4046
|
+
previousSearchIndex,
|
|
3017
4047
|
resolveColumnFreezeSide,
|
|
3018
4048
|
resolveDataTableLabels,
|
|
3019
4049
|
resolvePasteColumnIds,
|
|
@@ -3027,5 +4057,6 @@ var Table = Object.assign(TableRoot, {
|
|
|
3027
4057
|
useCellSelection,
|
|
3028
4058
|
useConvertTreeData,
|
|
3029
4059
|
useGlideTable,
|
|
4060
|
+
useInlineSearch,
|
|
3030
4061
|
writeSelectionToClipboard
|
|
3031
4062
|
});
|