react-glide-table 1.4.1 → 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 +1103 -107
- package/dist/compound.d.cts +2 -2
- package/dist/compound.d.ts +2 -2
- package/dist/compound.js +1105 -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 +1151 -121
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +1133 -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,9 +2945,14 @@ 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,
|
|
@@ -2142,6 +2962,8 @@ function DataTableRow({
|
|
|
2142
2962
|
"data-group-hovered": enableRowSpan && showCellHover && !showCellSelected ? "" : void 0,
|
|
2143
2963
|
"data-selection-fill": isCellDragSelected ? "" : void 0,
|
|
2144
2964
|
"data-selection-edges": hasSelectionEdges ? "" : void 0,
|
|
2965
|
+
"data-search-match": isSearchMatch ? "" : void 0,
|
|
2966
|
+
"data-search-active": isSearchActive ? "" : void 0,
|
|
2145
2967
|
"data-editable": editable ? "" : void 0,
|
|
2146
2968
|
"data-editing": isEditing ? "" : void 0,
|
|
2147
2969
|
"data-frozen": freezeOffset?.side,
|
|
@@ -2156,7 +2978,8 @@ function DataTableRow({
|
|
|
2156
2978
|
event.preventDefault();
|
|
2157
2979
|
onCellMouseDown(
|
|
2158
2980
|
resolveCellRowIndex(event.clientY, event.currentTarget),
|
|
2159
|
-
cellIndex
|
|
2981
|
+
cellIndex,
|
|
2982
|
+
{ shiftKey: event.shiftKey }
|
|
2160
2983
|
);
|
|
2161
2984
|
},
|
|
2162
2985
|
onMouseEnter: (event) => {
|
|
@@ -2193,6 +3016,8 @@ function DataTableRow({
|
|
|
2193
3016
|
enableRowSpan && showCellHover && !showCellSelected && "is-group-hovered",
|
|
2194
3017
|
isCellDragSelected && CELL_SELECTION_FILL_CLASS,
|
|
2195
3018
|
hasSelectionEdges && CELL_SELECTION_EDGES_CLASS,
|
|
3019
|
+
isSearchMatch && "is-search-match",
|
|
3020
|
+
isSearchActive && "is-search-active",
|
|
2196
3021
|
editable && "is-editable",
|
|
2197
3022
|
classNames?.cell
|
|
2198
3023
|
),
|
|
@@ -2327,8 +3152,169 @@ function DataTableRow({
|
|
|
2327
3152
|
);
|
|
2328
3153
|
}
|
|
2329
3154
|
|
|
2330
|
-
// src/components/ui/table/components/DataTable/
|
|
3155
|
+
// src/components/ui/table/components/DataTable/DataTableSearch.tsx
|
|
2331
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");
|
|
2332
3318
|
function DataTableToolbar({
|
|
2333
3319
|
filteredCount,
|
|
2334
3320
|
totalCount,
|
|
@@ -2346,39 +3332,39 @@ function DataTableToolbar({
|
|
|
2346
3332
|
const selectionContent = selectionLabel?.(selectedCount) ?? null;
|
|
2347
3333
|
const hasSelectionContent = selectionContent !== null && selectionContent !== false && selectionContent !== void 0 && typeof selectionContent !== "boolean";
|
|
2348
3334
|
if (!hasLeftContent && !hasToolbar && !hasSelectionContent) return null;
|
|
2349
|
-
return /* @__PURE__ */ (0,
|
|
2350
|
-
/* @__PURE__ */ (0,
|
|
2351
|
-
hasCount && /* @__PURE__ */ (0,
|
|
2352
|
-
/* @__PURE__ */ (0,
|
|
2353
|
-
/* @__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: [
|
|
2354
3340
|
" / ",
|
|
2355
3341
|
totalCount
|
|
2356
3342
|
] })
|
|
2357
|
-
] }) : /* @__PURE__ */ (0,
|
|
3343
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "toolbar-count-primary", children: displayFiltered ?? totalCount }) }),
|
|
2358
3344
|
summary
|
|
2359
3345
|
] }),
|
|
2360
|
-
/* @__PURE__ */ (0,
|
|
2361
|
-
hasSelectionContent && (typeof selectionContent === "string" || typeof selectionContent === "number" ? /* @__PURE__ */ (0,
|
|
2362
|
-
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 })
|
|
2363
3349
|
] })
|
|
2364
3350
|
] });
|
|
2365
3351
|
}
|
|
2366
3352
|
|
|
2367
3353
|
// src/components/ui/table/components/DataTable/DataTable.tsx
|
|
2368
|
-
var
|
|
3354
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
2369
3355
|
function DefaultScroll({
|
|
2370
3356
|
scrollRef,
|
|
2371
3357
|
children,
|
|
2372
3358
|
className
|
|
2373
3359
|
}) {
|
|
2374
|
-
return /* @__PURE__ */ (0,
|
|
3360
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: scrollRef, className: cn("data-table-scroll", className), children });
|
|
2375
3361
|
}
|
|
2376
3362
|
function DefaultPending({
|
|
2377
3363
|
loadingText,
|
|
2378
3364
|
className,
|
|
2379
3365
|
classNames
|
|
2380
3366
|
}) {
|
|
2381
|
-
return /* @__PURE__ */ (0,
|
|
3367
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2382
3368
|
"div",
|
|
2383
3369
|
{
|
|
2384
3370
|
className: cn(
|
|
@@ -2388,7 +3374,7 @@ function DefaultPending({
|
|
|
2388
3374
|
classNames?.pending,
|
|
2389
3375
|
className
|
|
2390
3376
|
),
|
|
2391
|
-
children: /* @__PURE__ */ (0,
|
|
3377
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: cn("data-table-loading-text", classNames?.loadingText), children: loadingText })
|
|
2392
3378
|
}
|
|
2393
3379
|
);
|
|
2394
3380
|
}
|
|
@@ -2397,7 +3383,7 @@ function DefaultEmpty({
|
|
|
2397
3383
|
columnCount,
|
|
2398
3384
|
classNames
|
|
2399
3385
|
}) {
|
|
2400
|
-
return /* @__PURE__ */ (0,
|
|
3386
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2401
3387
|
"td",
|
|
2402
3388
|
{
|
|
2403
3389
|
colSpan: columnCount,
|
|
@@ -2430,15 +3416,18 @@ function DataTable({
|
|
|
2430
3416
|
enableCellSelection,
|
|
2431
3417
|
enableColumnResize,
|
|
2432
3418
|
enableColumnFreeze,
|
|
3419
|
+
enableInlineSearch,
|
|
2433
3420
|
shouldVirtualize,
|
|
2434
3421
|
scrollRef,
|
|
3422
|
+
rootRef,
|
|
2435
3423
|
rowVirtualizer,
|
|
2436
3424
|
virtualRows,
|
|
2437
3425
|
paddingTop,
|
|
2438
3426
|
paddingBottom,
|
|
2439
3427
|
rowContextValue,
|
|
2440
3428
|
handleToggleSelect,
|
|
2441
|
-
clearHover
|
|
3429
|
+
clearHover,
|
|
3430
|
+
inlineSearch
|
|
2442
3431
|
} = useGlideTable(glideOptions);
|
|
2443
3432
|
const ToolbarSlot = slots?.Toolbar ?? DataTableToolbar;
|
|
2444
3433
|
const ScrollSlot = slots?.Scroll ?? DefaultScroll;
|
|
@@ -2446,12 +3435,12 @@ function DataTable({
|
|
|
2446
3435
|
const PendingSlot = slots?.Pending ?? DefaultPending;
|
|
2447
3436
|
const EmptySlot = slots?.Empty ?? DefaultEmpty;
|
|
2448
3437
|
const freezeOffsets = rowContextValue.columnFreeze.offsets;
|
|
2449
|
-
const contextValue = (0,
|
|
3438
|
+
const contextValue = (0, import_react8.useMemo)(
|
|
2450
3439
|
() => ({ ...rowContextValue, classNames }),
|
|
2451
3440
|
[rowContextValue, classNames]
|
|
2452
3441
|
);
|
|
2453
3442
|
if (isPending) {
|
|
2454
|
-
return /* @__PURE__ */ (0,
|
|
3443
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2455
3444
|
PendingSlot,
|
|
2456
3445
|
{
|
|
2457
3446
|
loadingText,
|
|
@@ -2460,19 +3449,21 @@ function DataTable({
|
|
|
2460
3449
|
}
|
|
2461
3450
|
);
|
|
2462
3451
|
}
|
|
2463
|
-
return /* @__PURE__ */ (0,
|
|
3452
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
2464
3453
|
"div",
|
|
2465
3454
|
{
|
|
3455
|
+
ref: rootRef,
|
|
2466
3456
|
className: cn(
|
|
2467
3457
|
"DataTableJSX",
|
|
2468
3458
|
!enableCellSelection && "DataTableJSX--no-cell-selection",
|
|
2469
3459
|
enableColumnResize && "DataTableJSX--column-resize",
|
|
2470
3460
|
enableColumnFreeze && "DataTableJSX--column-freeze",
|
|
3461
|
+
enableInlineSearch && "DataTableJSX--inline-search",
|
|
2471
3462
|
classNames?.root,
|
|
2472
3463
|
className
|
|
2473
3464
|
),
|
|
2474
3465
|
children: [
|
|
2475
|
-
/* @__PURE__ */ (0,
|
|
3466
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2476
3467
|
ToolbarSlot,
|
|
2477
3468
|
{
|
|
2478
3469
|
filteredCount: filteredCount ?? tableData.length,
|
|
@@ -2484,14 +3475,36 @@ function DataTable({
|
|
|
2484
3475
|
classNames
|
|
2485
3476
|
}
|
|
2486
3477
|
),
|
|
2487
|
-
|
|
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)(
|
|
2488
3501
|
"table",
|
|
2489
3502
|
{
|
|
2490
3503
|
className: cn("data-table", classNames?.table),
|
|
2491
3504
|
style: enableColumnResize ? { width: table.getTotalSize() } : void 0,
|
|
2492
3505
|
onDragStart: enableCellSelection ? (event) => event.preventDefault() : void 0,
|
|
2493
3506
|
children: [
|
|
2494
|
-
/* @__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)(
|
|
2495
3508
|
"tr",
|
|
2496
3509
|
{
|
|
2497
3510
|
className: cn("data-table-head-row", classNames?.headRow),
|
|
@@ -2511,7 +3524,7 @@ function DataTable({
|
|
|
2511
3524
|
...sizeStyle,
|
|
2512
3525
|
...freezeStyle
|
|
2513
3526
|
};
|
|
2514
|
-
return /* @__PURE__ */ (0,
|
|
3527
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
2515
3528
|
"th",
|
|
2516
3529
|
{
|
|
2517
3530
|
"data-resizing": header.column.getIsResizing() ? "" : void 0,
|
|
@@ -2527,7 +3540,7 @@ function DataTable({
|
|
|
2527
3540
|
),
|
|
2528
3541
|
children: [
|
|
2529
3542
|
header.isPlaceholder ? null : (0, import_react_table3.flexRender)(header.column.columnDef.header, header.getContext()),
|
|
2530
|
-
canResize ? /* @__PURE__ */ (0,
|
|
3543
|
+
canResize ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2531
3544
|
"div",
|
|
2532
3545
|
{
|
|
2533
3546
|
role: "separator",
|
|
@@ -2553,20 +3566,20 @@ function DataTable({
|
|
|
2553
3566
|
},
|
|
2554
3567
|
headerGroup.id
|
|
2555
3568
|
)) }),
|
|
2556
|
-
/* @__PURE__ */ (0,
|
|
3569
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DataTableContextProvider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2557
3570
|
"tbody",
|
|
2558
3571
|
{
|
|
2559
3572
|
onMouseLeave: clearHover,
|
|
2560
3573
|
className: cn("data-table-body", classNames?.body),
|
|
2561
|
-
children: rows.length === 0 ? /* @__PURE__ */ (0,
|
|
3574
|
+
children: rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2562
3575
|
EmptySlot,
|
|
2563
3576
|
{
|
|
2564
3577
|
emptyText,
|
|
2565
3578
|
columnCount,
|
|
2566
3579
|
classNames
|
|
2567
3580
|
}
|
|
2568
|
-
) : shouldVirtualize ? /* @__PURE__ */ (0,
|
|
2569
|
-
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)(
|
|
2570
3583
|
"tr",
|
|
2571
3584
|
{
|
|
2572
3585
|
"aria-hidden": true,
|
|
@@ -2574,7 +3587,7 @@ function DataTable({
|
|
|
2574
3587
|
"data-table-virtual-spacer",
|
|
2575
3588
|
classNames?.virtualSpacer
|
|
2576
3589
|
),
|
|
2577
|
-
children: /* @__PURE__ */ (0,
|
|
3590
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2578
3591
|
"td",
|
|
2579
3592
|
{
|
|
2580
3593
|
colSpan: columnCount,
|
|
@@ -2590,7 +3603,7 @@ function DataTable({
|
|
|
2590
3603
|
virtualRows.map((virtualRow) => {
|
|
2591
3604
|
const row = rows[virtualRow.index];
|
|
2592
3605
|
if (!row) return null;
|
|
2593
|
-
return /* @__PURE__ */ (0,
|
|
3606
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2594
3607
|
RowSlot,
|
|
2595
3608
|
{
|
|
2596
3609
|
row,
|
|
@@ -2601,7 +3614,7 @@ function DataTable({
|
|
|
2601
3614
|
row.id
|
|
2602
3615
|
);
|
|
2603
3616
|
}),
|
|
2604
|
-
paddingBottom > 0 && /* @__PURE__ */ (0,
|
|
3617
|
+
paddingBottom > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2605
3618
|
"tr",
|
|
2606
3619
|
{
|
|
2607
3620
|
"aria-hidden": true,
|
|
@@ -2609,7 +3622,7 @@ function DataTable({
|
|
|
2609
3622
|
"data-table-virtual-spacer",
|
|
2610
3623
|
classNames?.virtualSpacer
|
|
2611
3624
|
),
|
|
2612
|
-
children: /* @__PURE__ */ (0,
|
|
3625
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2613
3626
|
"td",
|
|
2614
3627
|
{
|
|
2615
3628
|
colSpan: columnCount,
|
|
@@ -2622,7 +3635,7 @@ function DataTable({
|
|
|
2622
3635
|
)
|
|
2623
3636
|
}
|
|
2624
3637
|
)
|
|
2625
|
-
] }) : rows.map((row) => /* @__PURE__ */ (0,
|
|
3638
|
+
] }) : rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2626
3639
|
RowSlot,
|
|
2627
3640
|
{
|
|
2628
3641
|
row,
|
|
@@ -2641,10 +3654,10 @@ function DataTable({
|
|
|
2641
3654
|
}
|
|
2642
3655
|
|
|
2643
3656
|
// src/components/ui/table/components/Table/Table.tsx
|
|
2644
|
-
var
|
|
3657
|
+
var import_react11 = require("react");
|
|
2645
3658
|
|
|
2646
3659
|
// src/components/ui/table/components/Table/buildColumnDef.tsx
|
|
2647
|
-
var
|
|
3660
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
2648
3661
|
function SortableHeader({
|
|
2649
3662
|
label,
|
|
2650
3663
|
field,
|
|
@@ -2653,15 +3666,15 @@ function SortableHeader({
|
|
|
2653
3666
|
}) {
|
|
2654
3667
|
const isActive = sort?.field === field;
|
|
2655
3668
|
const Icon = isActive ? sort.direction === "asc" ? ArrowUp : ArrowDown : ArrowUpDown;
|
|
2656
|
-
return /* @__PURE__ */ (0,
|
|
3669
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
2657
3670
|
"button",
|
|
2658
3671
|
{
|
|
2659
3672
|
type: "button",
|
|
2660
3673
|
className: cn("SortableHeaderJSX", isActive ? "is-active" : "is-inactive"),
|
|
2661
3674
|
onClick: () => onSort(field),
|
|
2662
3675
|
children: [
|
|
2663
|
-
/* @__PURE__ */ (0,
|
|
2664
|
-
/* @__PURE__ */ (0,
|
|
3676
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: label }),
|
|
3677
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { className: "sortable-header-icon" })
|
|
2665
3678
|
]
|
|
2666
3679
|
}
|
|
2667
3680
|
);
|
|
@@ -2694,7 +3707,7 @@ function buildColumnDef(props, sort, onSort) {
|
|
|
2694
3707
|
...minWidth != null ? { minSize: minWidth } : {},
|
|
2695
3708
|
...maxWidth != null ? { maxSize: maxWidth } : {},
|
|
2696
3709
|
...resizable === false ? { enableResizing: false } : {},
|
|
2697
|
-
header: sortable ? () => /* @__PURE__ */ (0,
|
|
3710
|
+
header: sortable ? () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SortableHeader, { label: children, field, sort, onSort }) : (
|
|
2698
3711
|
// eslint-disable-next-line @typescript-eslint/promise-function-async
|
|
2699
3712
|
() => children
|
|
2700
3713
|
),
|
|
@@ -2721,10 +3734,10 @@ function buildColumnDef(props, sort, onSort) {
|
|
|
2721
3734
|
}
|
|
2722
3735
|
|
|
2723
3736
|
// src/components/ui/table/components/Table/parseTableChildren.ts
|
|
2724
|
-
var
|
|
3737
|
+
var import_react10 = require("react");
|
|
2725
3738
|
|
|
2726
3739
|
// src/components/ui/table/components/Table/tableChildTypes.ts
|
|
2727
|
-
var
|
|
3740
|
+
var import_react9 = require("react");
|
|
2728
3741
|
var TABLE_HEADER_DISPLAY_NAME = "Table.Header";
|
|
2729
3742
|
var TABLE_BODY_DISPLAY_NAME = "Table.Body";
|
|
2730
3743
|
var TABLE_COLUMN_DISPLAY_NAME = "Table.Column";
|
|
@@ -2736,16 +3749,16 @@ function getComponentDisplayName(type) {
|
|
|
2736
3749
|
return void 0;
|
|
2737
3750
|
}
|
|
2738
3751
|
function isTableHeaderElement(child) {
|
|
2739
|
-
return (0,
|
|
3752
|
+
return (0, import_react9.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_HEADER_DISPLAY_NAME;
|
|
2740
3753
|
}
|
|
2741
3754
|
function isTableBodyElement(child) {
|
|
2742
|
-
return (0,
|
|
3755
|
+
return (0, import_react9.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_BODY_DISPLAY_NAME;
|
|
2743
3756
|
}
|
|
2744
3757
|
function isTableColumnElement(child) {
|
|
2745
|
-
return (0,
|
|
3758
|
+
return (0, import_react9.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_COLUMN_DISPLAY_NAME;
|
|
2746
3759
|
}
|
|
2747
3760
|
function isTablePaginationElement(child) {
|
|
2748
|
-
return (0,
|
|
3761
|
+
return (0, import_react9.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_PAGINATION_DISPLAY_NAME;
|
|
2749
3762
|
}
|
|
2750
3763
|
|
|
2751
3764
|
// src/components/ui/table/components/Table/parseTableChildren.ts
|
|
@@ -2755,7 +3768,7 @@ function parseTableChildren(children) {
|
|
|
2755
3768
|
body: null,
|
|
2756
3769
|
pagination: null
|
|
2757
3770
|
};
|
|
2758
|
-
for (const child of
|
|
3771
|
+
for (const child of import_react10.Children.toArray(children)) {
|
|
2759
3772
|
if (isTableHeaderElement(child)) {
|
|
2760
3773
|
slots.header = child;
|
|
2761
3774
|
continue;
|
|
@@ -2772,12 +3785,12 @@ function parseTableChildren(children) {
|
|
|
2772
3785
|
}
|
|
2773
3786
|
function flattenColumnElements(children) {
|
|
2774
3787
|
const result = [];
|
|
2775
|
-
for (const child of
|
|
3788
|
+
for (const child of import_react10.Children.toArray(children)) {
|
|
2776
3789
|
if (isTableColumnElement(child)) {
|
|
2777
3790
|
result.push(child);
|
|
2778
3791
|
continue;
|
|
2779
3792
|
}
|
|
2780
|
-
if ((0,
|
|
3793
|
+
if ((0, import_react10.isValidElement)(child)) {
|
|
2781
3794
|
const nested = child.props.children;
|
|
2782
3795
|
if (nested != null) {
|
|
2783
3796
|
result.push(...flattenColumnElements(nested));
|
|
@@ -2842,7 +3855,7 @@ function TableHeader(props) {
|
|
|
2842
3855
|
TableHeader.displayName = TABLE_HEADER_DISPLAY_NAME;
|
|
2843
3856
|
|
|
2844
3857
|
// src/components/ui/table/components/Table/TablePagination.tsx
|
|
2845
|
-
var
|
|
3858
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
2846
3859
|
function TablePagination({
|
|
2847
3860
|
page,
|
|
2848
3861
|
pageSize = 10,
|
|
@@ -2854,8 +3867,8 @@ function TablePagination({
|
|
|
2854
3867
|
const safePage = Math.min(Math.max(1, page), totalPages);
|
|
2855
3868
|
const canGoPrev = safePage > 1;
|
|
2856
3869
|
const canGoNext = safePage < totalPages;
|
|
2857
|
-
return /* @__PURE__ */ (0,
|
|
2858
|
-
/* @__PURE__ */ (0,
|
|
3870
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cn("TablePaginationJSX", className), children: [
|
|
3871
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
2859
3872
|
"button",
|
|
2860
3873
|
{
|
|
2861
3874
|
type: "button",
|
|
@@ -2863,15 +3876,15 @@ function TablePagination({
|
|
|
2863
3876
|
disabled: !canGoPrev,
|
|
2864
3877
|
onClick: () => onChange(safePage - 1),
|
|
2865
3878
|
"aria-label": "Previous page",
|
|
2866
|
-
children: /* @__PURE__ */ (0,
|
|
3879
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronLeft, { className: "pagination-button-icon" })
|
|
2867
3880
|
}
|
|
2868
3881
|
),
|
|
2869
|
-
/* @__PURE__ */ (0,
|
|
3882
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "pagination-label", children: [
|
|
2870
3883
|
safePage,
|
|
2871
3884
|
" / ",
|
|
2872
3885
|
totalPages
|
|
2873
3886
|
] }),
|
|
2874
|
-
/* @__PURE__ */ (0,
|
|
3887
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
2875
3888
|
"button",
|
|
2876
3889
|
{
|
|
2877
3890
|
type: "button",
|
|
@@ -2879,7 +3892,7 @@ function TablePagination({
|
|
|
2879
3892
|
disabled: !canGoNext,
|
|
2880
3893
|
onClick: () => onChange(safePage + 1),
|
|
2881
3894
|
"aria-label": "Next page",
|
|
2882
|
-
children: /* @__PURE__ */ (0,
|
|
3895
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronRight, { className: "pagination-button-icon" })
|
|
2883
3896
|
}
|
|
2884
3897
|
)
|
|
2885
3898
|
] });
|
|
@@ -2887,7 +3900,7 @@ function TablePagination({
|
|
|
2887
3900
|
TablePagination.displayName = TABLE_PAGINATION_DISPLAY_NAME;
|
|
2888
3901
|
|
|
2889
3902
|
// src/components/ui/table/components/Table/Table.tsx
|
|
2890
|
-
var
|
|
3903
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
2891
3904
|
function TableRoot({
|
|
2892
3905
|
data,
|
|
2893
3906
|
children,
|
|
@@ -2896,12 +3909,12 @@ function TableRoot({
|
|
|
2896
3909
|
filteredCount,
|
|
2897
3910
|
...dataTableProps
|
|
2898
3911
|
}) {
|
|
2899
|
-
const { header, pagination: paginationElement } = (0,
|
|
3912
|
+
const { header, pagination: paginationElement } = (0, import_react11.useMemo)(
|
|
2900
3913
|
() => parseTableChildren(children),
|
|
2901
3914
|
[children]
|
|
2902
3915
|
);
|
|
2903
|
-
const [sort, setSort] = (0,
|
|
2904
|
-
const handleSort = (0,
|
|
3916
|
+
const [sort, setSort] = (0, import_react11.useState)(null);
|
|
3917
|
+
const handleSort = (0, import_react11.useCallback)((field) => {
|
|
2905
3918
|
setSort((previous) => {
|
|
2906
3919
|
if (previous?.field !== field) {
|
|
2907
3920
|
return { field, direction: "asc" };
|
|
@@ -2912,7 +3925,7 @@ function TableRoot({
|
|
|
2912
3925
|
return null;
|
|
2913
3926
|
});
|
|
2914
3927
|
}, []);
|
|
2915
|
-
const columns = (0,
|
|
3928
|
+
const columns = (0, import_react11.useMemo)(() => {
|
|
2916
3929
|
return extractColumnElements(header).map(
|
|
2917
3930
|
(columnElement) => buildColumnDef(columnElement.props, sort, handleSort)
|
|
2918
3931
|
);
|
|
@@ -2921,7 +3934,7 @@ function TableRoot({
|
|
|
2921
3934
|
const pageSize = paginationProps?.pageSize ?? 10;
|
|
2922
3935
|
const page = paginationProps?.page ?? 1;
|
|
2923
3936
|
const resolvedTotalCount = paginationProps?.totalCount ?? totalCount ?? data.length;
|
|
2924
|
-
const tableData = (0,
|
|
3937
|
+
const tableData = (0, import_react11.useMemo)(() => {
|
|
2925
3938
|
const sortedData = sortTableData(data, sort);
|
|
2926
3939
|
if (!paginationProps) return sortedData;
|
|
2927
3940
|
return paginateTableData(sortedData, page, pageSize);
|
|
@@ -2929,8 +3942,8 @@ function TableRoot({
|
|
|
2929
3942
|
if (columns.length === 0) {
|
|
2930
3943
|
console.warn("[Table] Declare at least one Table.Column inside Table.Header.");
|
|
2931
3944
|
}
|
|
2932
|
-
return /* @__PURE__ */ (0,
|
|
2933
|
-
/* @__PURE__ */ (0,
|
|
3945
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "TableJSX", children: [
|
|
3946
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
2934
3947
|
DataTable,
|
|
2935
3948
|
{
|
|
2936
3949
|
...dataTableProps,
|
|
@@ -2941,7 +3954,7 @@ function TableRoot({
|
|
|
2941
3954
|
className: cn(className, paginationProps && "DataTableJSX--with-pagination")
|
|
2942
3955
|
}
|
|
2943
3956
|
),
|
|
2944
|
-
paginationProps && /* @__PURE__ */ (0,
|
|
3957
|
+
paginationProps && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
2945
3958
|
TablePagination,
|
|
2946
3959
|
{
|
|
2947
3960
|
page,
|
|
@@ -2961,7 +3974,7 @@ function createTable() {
|
|
|
2961
3974
|
Column.displayName = TABLE_COLUMN_DISPLAY_NAME;
|
|
2962
3975
|
return Object.assign(
|
|
2963
3976
|
function BoundTable(props) {
|
|
2964
|
-
return /* @__PURE__ */ (0,
|
|
3977
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TableRoot, { ...props });
|
|
2965
3978
|
},
|
|
2966
3979
|
{
|
|
2967
3980
|
Header: TableHeader,
|
|
@@ -2986,20 +3999,31 @@ var Table = Object.assign(TableRoot, {
|
|
|
2986
3999
|
DEFAULT_TREE_PARENT_ID_FIELD,
|
|
2987
4000
|
DEFAULT_TREE_QTY_FIELD,
|
|
2988
4001
|
DataTable,
|
|
4002
|
+
INLINE_SEARCH_MAX_RESULTS,
|
|
2989
4003
|
Table,
|
|
2990
4004
|
applyCellEdit,
|
|
2991
4005
|
applyFillData,
|
|
2992
4006
|
applySelectionUpdater,
|
|
2993
4007
|
buildColumnFreezeOffsets,
|
|
2994
4008
|
buildColumnRowSpanMap,
|
|
4009
|
+
buildFlatSearchCorpus,
|
|
2995
4010
|
buildRowsPastePayload,
|
|
4011
|
+
buildSearchMatchKey,
|
|
4012
|
+
buildSearchMatchKeys,
|
|
4013
|
+
buildTreeSearchCorpus,
|
|
2996
4014
|
canExpandRow,
|
|
4015
|
+
cellValueToSearchText,
|
|
4016
|
+
collectAncestorKeysToExpand,
|
|
2997
4017
|
collectCopyRowEntries,
|
|
2998
4018
|
collectCopyRows,
|
|
2999
4019
|
collectFillChanges,
|
|
3000
4020
|
collectRowSpanColumns,
|
|
4021
|
+
collectSearchMatchesInRange,
|
|
4022
|
+
createSearchRegex,
|
|
3001
4023
|
createTable,
|
|
4024
|
+
escapeSearchRegex,
|
|
3002
4025
|
flattenSubtreeRows,
|
|
4026
|
+
formatSearchResultLabel,
|
|
3003
4027
|
getCellEditDraftValue,
|
|
3004
4028
|
getCellSelectionEdgeStyle,
|
|
3005
4029
|
getColumnEditType,
|
|
@@ -3011,10 +4035,15 @@ var Table = Object.assign(TableRoot, {
|
|
|
3011
4035
|
isCellInSelection,
|
|
3012
4036
|
isColumnEditable,
|
|
3013
4037
|
isEditablePasteTarget,
|
|
4038
|
+
mapSearchResultToVisibleItem,
|
|
4039
|
+
mapSearchResultsToVisibleKeys,
|
|
3014
4040
|
measureMergedSpanRowHeights,
|
|
4041
|
+
nextSearchIndex,
|
|
4042
|
+
nextSearchStride,
|
|
3015
4043
|
parseCellEditValue,
|
|
3016
4044
|
parseClipboardTSV,
|
|
3017
4045
|
parseClipboardTSVWithDepths,
|
|
4046
|
+
previousSearchIndex,
|
|
3018
4047
|
resolveColumnFreezeSide,
|
|
3019
4048
|
resolveDataTableLabels,
|
|
3020
4049
|
resolvePasteColumnIds,
|
|
@@ -3028,5 +4057,6 @@ var Table = Object.assign(TableRoot, {
|
|
|
3028
4057
|
useCellSelection,
|
|
3029
4058
|
useConvertTreeData,
|
|
3030
4059
|
useGlideTable,
|
|
4060
|
+
useInlineSearch,
|
|
3031
4061
|
writeSelectionToClipboard
|
|
3032
4062
|
});
|