material-react-table-narender 3.0.3 → 3.0.4

Sign up to get free protection for your applications and to get access to all the features.
package/dist/index.js DELETED
@@ -1,4557 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var reactTable = require('@tanstack/react-table');
6
- var react = require('react');
7
- var matchSorterUtils = require('@tanstack/match-sorter-utils');
8
- var jsxRuntime = require('react/jsx-runtime');
9
- var IconButton = require('@mui/material/IconButton');
10
- var Tooltip = require('@mui/material/Tooltip');
11
- var Box = require('@mui/material/Box');
12
- var Button = require('@mui/material/Button');
13
- var CircularProgress = require('@mui/material/CircularProgress');
14
- var styles = require('@mui/material/styles');
15
- var Menu = require('@mui/material/Menu');
16
- var ListItemIcon = require('@mui/material/ListItemIcon');
17
- var MenuItem = require('@mui/material/MenuItem');
18
- var Stack = require('@mui/material/Stack');
19
- var Checkbox = require('@mui/material/Checkbox');
20
- var Radio = require('@mui/material/Radio');
21
- var ArrowDownwardIcon = require('@mui/icons-material/ArrowDownward');
22
- var ArrowRightIcon = require('@mui/icons-material/ArrowRight');
23
- var CancelIcon = require('@mui/icons-material/Cancel');
24
- var ChevronLeftIcon = require('@mui/icons-material/ChevronLeft');
25
- var ChevronRightIcon = require('@mui/icons-material/ChevronRight');
26
- var ClearAllIcon = require('@mui/icons-material/ClearAll');
27
- var CloseIcon = require('@mui/icons-material/Close');
28
- var ContentCopy = require('@mui/icons-material/ContentCopy');
29
- var DensityLargeIcon = require('@mui/icons-material/DensityLarge');
30
- var DensityMediumIcon = require('@mui/icons-material/DensityMedium');
31
- var DensitySmallIcon = require('@mui/icons-material/DensitySmall');
32
- var DragHandleIcon = require('@mui/icons-material/DragHandle');
33
- var DynamicFeedIcon = require('@mui/icons-material/DynamicFeed');
34
- var EditIcon = require('@mui/icons-material/Edit');
35
- var ExpandMoreIcon = require('@mui/icons-material/ExpandMore');
36
- var FilterAltIcon = require('@mui/icons-material/FilterAlt');
37
- var FilterListIcon = require('@mui/icons-material/FilterList');
38
- var FilterListOffIcon = require('@mui/icons-material/FilterListOff');
39
- var FirstPageIcon = require('@mui/icons-material/FirstPage');
40
- var FullscreenIcon = require('@mui/icons-material/Fullscreen');
41
- var FullscreenExitIcon = require('@mui/icons-material/FullscreenExit');
42
- var KeyboardDoubleArrowDownIcon = require('@mui/icons-material/KeyboardDoubleArrowDown');
43
- var LastPageIcon = require('@mui/icons-material/LastPage');
44
- var MoreHorizIcon = require('@mui/icons-material/MoreHoriz');
45
- var MoreVertIcon = require('@mui/icons-material/MoreVert');
46
- var PushPinIcon = require('@mui/icons-material/PushPin');
47
- var RestartAltIcon = require('@mui/icons-material/RestartAlt');
48
- var SaveIcon = require('@mui/icons-material/Save');
49
- var SearchIcon = require('@mui/icons-material/Search');
50
- var SearchOffIcon = require('@mui/icons-material/SearchOff');
51
- var SortIcon = require('@mui/icons-material/Sort');
52
- var SyncAltIcon = require('@mui/icons-material/SyncAlt');
53
- var ViewColumnIcon = require('@mui/icons-material/ViewColumn');
54
- var VisibilityOffIcon = require('@mui/icons-material/VisibilityOff');
55
- var reactVirtual = require('@tanstack/react-virtual');
56
- var Paper = require('@mui/material/Paper');
57
- var TableContainer = require('@mui/material/TableContainer');
58
- var Table = require('@mui/material/Table');
59
- var TableBody = require('@mui/material/TableBody');
60
- var Typography = require('@mui/material/Typography');
61
- var TableRow = require('@mui/material/TableRow');
62
- var Skeleton = require('@mui/material/Skeleton');
63
- var TableCell = require('@mui/material/TableCell');
64
- var highlightWords = require('highlight-words');
65
- var TextField = require('@mui/material/TextField');
66
- var Collapse = require('@mui/material/Collapse');
67
- var TableFooter = require('@mui/material/TableFooter');
68
- var TableHead = require('@mui/material/TableHead');
69
- var FormControlLabel = require('@mui/material/FormControlLabel');
70
- var Autocomplete = require('@mui/material/Autocomplete');
71
- var Chip = require('@mui/material/Chip');
72
- var InputAdornment = require('@mui/material/InputAdornment');
73
- var utils = require('@mui/material/utils');
74
- var DatePicker = require('@mui/x-date-pickers/DatePicker');
75
- var DateTimePicker = require('@mui/x-date-pickers/DateTimePicker');
76
- var TimePicker = require('@mui/x-date-pickers/TimePicker');
77
- var FormHelperText = require('@mui/material/FormHelperText');
78
- var Slider = require('@mui/material/Slider');
79
- var Grow = require('@mui/material/Grow');
80
- var Popover = require('@mui/material/Popover');
81
- var Divider = require('@mui/material/Divider');
82
- var Badge = require('@mui/material/Badge');
83
- var TableSortLabel = require('@mui/material/TableSortLabel');
84
- var Alert = require('@mui/material/Alert');
85
- var AlertTitle = require('@mui/material/AlertTitle');
86
- var Dialog = require('@mui/material/Dialog');
87
- var DialogActions = require('@mui/material/DialogActions');
88
- var DialogContent = require('@mui/material/DialogContent');
89
- var DialogTitle = require('@mui/material/DialogTitle');
90
- var useMediaQuery = require('@mui/material/useMediaQuery');
91
- var LinearProgress = require('@mui/material/LinearProgress');
92
- var InputLabel = require('@mui/material/InputLabel');
93
- var Pagination = require('@mui/material/Pagination');
94
- var PaginationItem = require('@mui/material/PaginationItem');
95
- var Select = require('@mui/material/Select');
96
- var Fade = require('@mui/material/Fade');
97
- var Switch = require('@mui/material/Switch');
98
-
99
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
100
-
101
- var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
102
- var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
103
- var Box__default = /*#__PURE__*/_interopDefaultLegacy(Box);
104
- var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
105
- var CircularProgress__default = /*#__PURE__*/_interopDefaultLegacy(CircularProgress);
106
- var Menu__default = /*#__PURE__*/_interopDefaultLegacy(Menu);
107
- var ListItemIcon__default = /*#__PURE__*/_interopDefaultLegacy(ListItemIcon);
108
- var MenuItem__default = /*#__PURE__*/_interopDefaultLegacy(MenuItem);
109
- var Stack__default = /*#__PURE__*/_interopDefaultLegacy(Stack);
110
- var Checkbox__default = /*#__PURE__*/_interopDefaultLegacy(Checkbox);
111
- var Radio__default = /*#__PURE__*/_interopDefaultLegacy(Radio);
112
- var ArrowDownwardIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowDownwardIcon);
113
- var ArrowRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowRightIcon);
114
- var CancelIcon__default = /*#__PURE__*/_interopDefaultLegacy(CancelIcon);
115
- var ChevronLeftIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronLeftIcon);
116
- var ChevronRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRightIcon);
117
- var ClearAllIcon__default = /*#__PURE__*/_interopDefaultLegacy(ClearAllIcon);
118
- var CloseIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseIcon);
119
- var ContentCopy__default = /*#__PURE__*/_interopDefaultLegacy(ContentCopy);
120
- var DensityLargeIcon__default = /*#__PURE__*/_interopDefaultLegacy(DensityLargeIcon);
121
- var DensityMediumIcon__default = /*#__PURE__*/_interopDefaultLegacy(DensityMediumIcon);
122
- var DensitySmallIcon__default = /*#__PURE__*/_interopDefaultLegacy(DensitySmallIcon);
123
- var DragHandleIcon__default = /*#__PURE__*/_interopDefaultLegacy(DragHandleIcon);
124
- var DynamicFeedIcon__default = /*#__PURE__*/_interopDefaultLegacy(DynamicFeedIcon);
125
- var EditIcon__default = /*#__PURE__*/_interopDefaultLegacy(EditIcon);
126
- var ExpandMoreIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExpandMoreIcon);
127
- var FilterAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterAltIcon);
128
- var FilterListIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterListIcon);
129
- var FilterListOffIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterListOffIcon);
130
- var FirstPageIcon__default = /*#__PURE__*/_interopDefaultLegacy(FirstPageIcon);
131
- var FullscreenIcon__default = /*#__PURE__*/_interopDefaultLegacy(FullscreenIcon);
132
- var FullscreenExitIcon__default = /*#__PURE__*/_interopDefaultLegacy(FullscreenExitIcon);
133
- var KeyboardDoubleArrowDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(KeyboardDoubleArrowDownIcon);
134
- var LastPageIcon__default = /*#__PURE__*/_interopDefaultLegacy(LastPageIcon);
135
- var MoreHorizIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreHorizIcon);
136
- var MoreVertIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreVertIcon);
137
- var PushPinIcon__default = /*#__PURE__*/_interopDefaultLegacy(PushPinIcon);
138
- var RestartAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(RestartAltIcon);
139
- var SaveIcon__default = /*#__PURE__*/_interopDefaultLegacy(SaveIcon);
140
- var SearchIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchIcon);
141
- var SearchOffIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchOffIcon);
142
- var SortIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortIcon);
143
- var SyncAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(SyncAltIcon);
144
- var ViewColumnIcon__default = /*#__PURE__*/_interopDefaultLegacy(ViewColumnIcon);
145
- var VisibilityOffIcon__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityOffIcon);
146
- var Paper__default = /*#__PURE__*/_interopDefaultLegacy(Paper);
147
- var TableContainer__default = /*#__PURE__*/_interopDefaultLegacy(TableContainer);
148
- var Table__default = /*#__PURE__*/_interopDefaultLegacy(Table);
149
- var TableBody__default = /*#__PURE__*/_interopDefaultLegacy(TableBody);
150
- var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
151
- var TableRow__default = /*#__PURE__*/_interopDefaultLegacy(TableRow);
152
- var Skeleton__default = /*#__PURE__*/_interopDefaultLegacy(Skeleton);
153
- var TableCell__default = /*#__PURE__*/_interopDefaultLegacy(TableCell);
154
- var highlightWords__default = /*#__PURE__*/_interopDefaultLegacy(highlightWords);
155
- var TextField__default = /*#__PURE__*/_interopDefaultLegacy(TextField);
156
- var Collapse__default = /*#__PURE__*/_interopDefaultLegacy(Collapse);
157
- var TableFooter__default = /*#__PURE__*/_interopDefaultLegacy(TableFooter);
158
- var TableHead__default = /*#__PURE__*/_interopDefaultLegacy(TableHead);
159
- var FormControlLabel__default = /*#__PURE__*/_interopDefaultLegacy(FormControlLabel);
160
- var Autocomplete__default = /*#__PURE__*/_interopDefaultLegacy(Autocomplete);
161
- var Chip__default = /*#__PURE__*/_interopDefaultLegacy(Chip);
162
- var InputAdornment__default = /*#__PURE__*/_interopDefaultLegacy(InputAdornment);
163
- var FormHelperText__default = /*#__PURE__*/_interopDefaultLegacy(FormHelperText);
164
- var Slider__default = /*#__PURE__*/_interopDefaultLegacy(Slider);
165
- var Grow__default = /*#__PURE__*/_interopDefaultLegacy(Grow);
166
- var Popover__default = /*#__PURE__*/_interopDefaultLegacy(Popover);
167
- var Divider__default = /*#__PURE__*/_interopDefaultLegacy(Divider);
168
- var Badge__default = /*#__PURE__*/_interopDefaultLegacy(Badge);
169
- var TableSortLabel__default = /*#__PURE__*/_interopDefaultLegacy(TableSortLabel);
170
- var Alert__default = /*#__PURE__*/_interopDefaultLegacy(Alert);
171
- var AlertTitle__default = /*#__PURE__*/_interopDefaultLegacy(AlertTitle);
172
- var Dialog__default = /*#__PURE__*/_interopDefaultLegacy(Dialog);
173
- var DialogActions__default = /*#__PURE__*/_interopDefaultLegacy(DialogActions);
174
- var DialogContent__default = /*#__PURE__*/_interopDefaultLegacy(DialogContent);
175
- var DialogTitle__default = /*#__PURE__*/_interopDefaultLegacy(DialogTitle);
176
- var useMediaQuery__default = /*#__PURE__*/_interopDefaultLegacy(useMediaQuery);
177
- var LinearProgress__default = /*#__PURE__*/_interopDefaultLegacy(LinearProgress);
178
- var InputLabel__default = /*#__PURE__*/_interopDefaultLegacy(InputLabel);
179
- var Pagination__default = /*#__PURE__*/_interopDefaultLegacy(Pagination);
180
- var PaginationItem__default = /*#__PURE__*/_interopDefaultLegacy(PaginationItem);
181
- var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
182
- var Fade__default = /*#__PURE__*/_interopDefaultLegacy(Fade);
183
- var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
184
-
185
- const getColumnId = (columnDef) => { var _a, _b, _c, _d; return (_d = (_a = columnDef.id) !== null && _a !== void 0 ? _a : (_c = (_b = columnDef.accessorKey) === null || _b === void 0 ? void 0 : _b.toString) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : columnDef.header; };
186
- const getAllLeafColumnDefs = (columns) => {
187
- const allLeafColumnDefs = [];
188
- const getLeafColumns = (cols) => {
189
- cols.forEach((col) => {
190
- if (col.columns) {
191
- getLeafColumns(col.columns);
192
- }
193
- else {
194
- allLeafColumnDefs.push(col);
195
- }
196
- });
197
- };
198
- getLeafColumns(columns);
199
- return allLeafColumnDefs;
200
- };
201
- const prepareColumns = ({ columnDefs, tableOptions, }) => {
202
- const { aggregationFns = {}, defaultDisplayColumn, filterFns = {}, sortingFns = {}, state: { columnFilterFns = {} } = {}, } = tableOptions;
203
- return columnDefs.map((columnDef) => {
204
- var _a, _b;
205
- //assign columnId
206
- if (!columnDef.id)
207
- columnDef.id = getColumnId(columnDef);
208
- //assign columnDefType
209
- if (!columnDef.columnDefType)
210
- columnDef.columnDefType = 'data';
211
- if ((_a = columnDef.columns) === null || _a === void 0 ? void 0 : _a.length) {
212
- columnDef.columnDefType = 'group';
213
- //recursively prepare columns if this is a group column
214
- columnDef.columns = prepareColumns({
215
- columnDefs: columnDef.columns,
216
- tableOptions,
217
- });
218
- }
219
- else if (columnDef.columnDefType === 'data') {
220
- //assign aggregationFns if multiple aggregationFns are provided
221
- if (Array.isArray(columnDef.aggregationFn)) {
222
- const aggFns = columnDef.aggregationFn;
223
- columnDef.aggregationFn = (columnId, leafRows, childRows) => aggFns.map((fn) => { var _a; return (_a = aggregationFns[fn]) === null || _a === void 0 ? void 0 : _a.call(aggregationFns, columnId, leafRows, childRows); });
224
- }
225
- //assign filterFns
226
- if (Object.keys(filterFns).includes(columnFilterFns[columnDef.id])) {
227
- columnDef.filterFn =
228
- (_b = filterFns[columnFilterFns[columnDef.id]]) !== null && _b !== void 0 ? _b : filterFns.fuzzy;
229
- columnDef._filterFn =
230
- columnFilterFns[columnDef.id];
231
- }
232
- //assign sortingFns
233
- if (Object.keys(sortingFns).includes(columnDef.sortingFn)) {
234
- // @ts-ignore
235
- columnDef.sortingFn = sortingFns[columnDef.sortingFn];
236
- }
237
- }
238
- else if (columnDef.columnDefType === 'display') {
239
- columnDef = Object.assign(Object.assign({}, defaultDisplayColumn), columnDef);
240
- }
241
- return columnDef;
242
- });
243
- };
244
- const reorderColumn = (draggedColumn, targetColumn, columnOrder) => {
245
- if (draggedColumn.getCanPin()) {
246
- draggedColumn.pin(targetColumn.getIsPinned());
247
- }
248
- const newColumnOrder = [...columnOrder];
249
- newColumnOrder.splice(newColumnOrder.indexOf(targetColumn.id), 0, newColumnOrder.splice(newColumnOrder.indexOf(draggedColumn.id), 1)[0]);
250
- return newColumnOrder;
251
- };
252
- const getDefaultColumnFilterFn = (columnDef) => {
253
- const { filterVariant } = columnDef;
254
- if (filterVariant === 'multi-select')
255
- return 'arrIncludesSome';
256
- if (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.includes('range'))
257
- return 'betweenInclusive';
258
- if (filterVariant === 'select' || filterVariant === 'checkbox')
259
- return 'equals';
260
- return 'fuzzy';
261
- };
262
- const getColumnFilterInfo = ({ header, table, }) => {
263
- var _a;
264
- const { options: { columnFilterModeOptions }, } = table;
265
- const { column } = header;
266
- const { columnDef } = column;
267
- const { filterVariant } = columnDef;
268
- const isDateFilter = !!((filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('date')) || (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('time')));
269
- const isAutocompleteFilter = filterVariant === 'autocomplete';
270
- const isRangeFilter = (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.includes('range')) ||
271
- ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn);
272
- const isSelectFilter = filterVariant === 'select';
273
- const isMultiSelectFilter = filterVariant === 'multi-select';
274
- const isTextboxFilter = ['autocomplete', 'text'].includes(filterVariant) ||
275
- (!isSelectFilter && !isMultiSelectFilter);
276
- const currentFilterOption = columnDef._filterFn;
277
- const allowedColumnFilterOptions = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _a !== void 0 ? _a : columnFilterModeOptions;
278
- const facetedUniqueValues = column.getFacetedUniqueValues();
279
- return {
280
- allowedColumnFilterOptions,
281
- currentFilterOption,
282
- facetedUniqueValues,
283
- isAutocompleteFilter,
284
- isDateFilter,
285
- isMultiSelectFilter,
286
- isRangeFilter,
287
- isSelectFilter,
288
- isTextboxFilter,
289
- };
290
- };
291
- const useDropdownOptions = ({ header, table, }) => {
292
- const { column } = header;
293
- const { columnDef } = column;
294
- const { facetedUniqueValues, isAutocompleteFilter, isMultiSelectFilter, isSelectFilter, } = getColumnFilterInfo({ header, table });
295
- return react.useMemo(() => {
296
- var _a;
297
- return (_a = columnDef.filterSelectOptions) !== null && _a !== void 0 ? _a : ((isSelectFilter || isMultiSelectFilter || isAutocompleteFilter) &&
298
- facetedUniqueValues
299
- ? Array.from(facetedUniqueValues.keys())
300
- .filter((value) => value !== null && value !== undefined)
301
- .sort((a, b) => a.localeCompare(b))
302
- : undefined);
303
- }, [
304
- columnDef.filterSelectOptions,
305
- facetedUniqueValues,
306
- isMultiSelectFilter,
307
- isSelectFilter,
308
- ]);
309
- };
310
-
311
- const flexRender = reactTable.flexRender;
312
- function createMRTColumnHelper() {
313
- return {
314
- accessor: (accessor, column) => {
315
- return typeof accessor === 'function'
316
- ? Object.assign(Object.assign({}, column), { accessorFn: accessor })
317
- : Object.assign(Object.assign({}, column), { accessorKey: accessor });
318
- },
319
- display: (column) => column,
320
- group: (column) => column,
321
- };
322
- }
323
- const createRow = (table, originalRow, rowIndex = -1, depth = 0, subRows, parentId) => reactTable.createRow(table, 'mrt-row-create', originalRow !== null && originalRow !== void 0 ? originalRow : Object.assign({}, ...getAllLeafColumnDefs(table.options.columns).map((col) => ({
324
- [getColumnId(col)]: '',
325
- }))), rowIndex, depth, subRows, parentId);
326
-
327
- const fuzzy$1 = (rowA, rowB, columnId) => {
328
- let dir = 0;
329
- if (rowA.columnFiltersMeta[columnId]) {
330
- dir = matchSorterUtils.compareItems(rowA.columnFiltersMeta[columnId], rowB.columnFiltersMeta[columnId]);
331
- }
332
- // Provide a fallback for when the item ranks are equal
333
- return dir === 0
334
- ? reactTable.sortingFns.alphanumeric(rowA, rowB, columnId)
335
- : dir;
336
- };
337
- const MRT_SortingFns = Object.assign(Object.assign({}, reactTable.sortingFns), { fuzzy: fuzzy$1 });
338
- const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFiltersMeta).map((v) => v.rank)) -
339
- Math.max(...Object.values(rowA.columnFiltersMeta).map((v) => v.rank));
340
-
341
- const parseFromValuesOrFunc = (fn, arg) => (fn instanceof Function ? fn(arg) : fn);
342
- const getValueAndLabel = (option) => {
343
- var _a, _b;
344
- let label = '';
345
- let value = '';
346
- if (option) {
347
- if (typeof option !== 'object') {
348
- label = option;
349
- value = option;
350
- }
351
- else {
352
- label = (_a = option.label) !== null && _a !== void 0 ? _a : option.value;
353
- value = (_b = option.value) !== null && _b !== void 0 ? _b : label;
354
- }
355
- }
356
- return { label, value };
357
- };
358
-
359
- const getMRT_Rows = (table, all) => {
360
- const { getCenterRows, getPrePaginationRowModel, getRowModel, getState, getTopRows, options: { createDisplayMode, enablePagination, enableRowPinning, manualPagination, positionCreatingRow, rowPinningDisplayMode, }, } = table;
361
- const { creatingRow, pagination } = getState();
362
- const isRankingRows = getIsRankingRows(table);
363
- let rows = [];
364
- if (!isRankingRows) {
365
- rows =
366
- !enableRowPinning || (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky'))
367
- ? all
368
- ? getPrePaginationRowModel().rows
369
- : getRowModel().rows
370
- : getCenterRows();
371
- }
372
- else {
373
- // fuzzy ranking adjustments
374
- rows = getPrePaginationRowModel().rows.sort((a, b) => rankGlobalFuzzy(a, b));
375
- if (enablePagination && !manualPagination && !all) {
376
- const start = pagination.pageIndex * pagination.pageSize;
377
- rows = rows.slice(start, start + pagination.pageSize);
378
- }
379
- if (enableRowPinning && !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky'))) {
380
- // "re-center-ize" the rows (no top or bottom pinned rows unless sticky)
381
- rows = rows.filter((row) => !row.getIsPinned());
382
- }
383
- }
384
- // row pinning adjustments
385
- if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky'))) {
386
- const centerPinnedRowIds = rows
387
- .filter((row) => row.getIsPinned())
388
- .map((r) => r.id);
389
- rows = [
390
- ...getTopRows().filter((row) => !centerPinnedRowIds.includes(row.id)),
391
- ...rows,
392
- ];
393
- }
394
- // blank inserted creating row adjustments
395
- if (positionCreatingRow !== undefined &&
396
- creatingRow &&
397
- createDisplayMode === 'row') {
398
- const creatingRowIndex = !isNaN(+positionCreatingRow)
399
- ? +positionCreatingRow
400
- : positionCreatingRow === 'top'
401
- ? 0
402
- : rows.length;
403
- rows = [
404
- ...rows.slice(0, creatingRowIndex),
405
- creatingRow,
406
- ...rows.slice(creatingRowIndex),
407
- ];
408
- }
409
- return rows;
410
- };
411
- const getCanRankRows = (table) => {
412
- const { getState, options: { enableGlobalFilterRankedResults, manualExpanding, manualFiltering, manualGrouping, manualSorting, }, } = table;
413
- const { expanded, globalFilterFn } = getState();
414
- return (!manualExpanding &&
415
- !manualFiltering &&
416
- !manualGrouping &&
417
- !manualSorting &&
418
- enableGlobalFilterRankedResults &&
419
- globalFilterFn === 'fuzzy' &&
420
- expanded !== true &&
421
- !Object.values(expanded).some(Boolean));
422
- };
423
- const getIsRankingRows = (table) => {
424
- const { globalFilter, sorting } = table.getState();
425
- return (getCanRankRows(table) &&
426
- globalFilter &&
427
- !Object.values(sorting).some(Boolean));
428
- };
429
- const getIsRowSelected = ({ row, table, }) => {
430
- const { options: { enableRowSelection }, } = table;
431
- return (row.getIsSelected() ||
432
- (parseFromValuesOrFunc(enableRowSelection, row) &&
433
- row.getCanSelectSubRows() &&
434
- row.getIsAllSubRowsSelected()));
435
- };
436
- const getMRT_RowSelectionHandler = ({ row, staticRowIndex = 0, table, }) => (event, value) => {
437
- var _a;
438
- const { getState, options: { enableBatchRowSelection, enableMultiRowSelection, enableRowPinning, manualPagination, rowPinningDisplayMode, }, refs: { lastSelectedRowId: lastSelectedRowId }, } = table;
439
- const { pagination: { pageIndex, pageSize }, } = getState();
440
- const paginationOffset = manualPagination ? 0 : pageSize * pageIndex;
441
- const wasCurrentRowChecked = getIsRowSelected({ row, table });
442
- // toggle selection of this row
443
- row.toggleSelected(value !== null && value !== void 0 ? value : !wasCurrentRowChecked);
444
- const changedRowIds = new Set([row.id]);
445
- // if shift key is pressed, select all rows between last selected and this one
446
- if (enableBatchRowSelection &&
447
- enableMultiRowSelection &&
448
- event.nativeEvent.shiftKey &&
449
- lastSelectedRowId.current !== null) {
450
- const rows = getMRT_Rows(table, true);
451
- const lastIndex = rows.findIndex((r) => r.id === lastSelectedRowId.current);
452
- if (lastIndex !== -1) {
453
- const isLastIndexChecked = getIsRowSelected({
454
- row: rows === null || rows === void 0 ? void 0 : rows[lastIndex],
455
- table,
456
- });
457
- const currentIndex = staticRowIndex + paginationOffset;
458
- const [start, end] = lastIndex < currentIndex
459
- ? [lastIndex, currentIndex]
460
- : [currentIndex, lastIndex];
461
- // toggle selection of all rows between last selected and this one
462
- // but only if the last selected row is not the same as the current one
463
- if (wasCurrentRowChecked !== isLastIndexChecked) {
464
- for (let i = start; i <= end; i++) {
465
- rows[i].toggleSelected(!wasCurrentRowChecked);
466
- changedRowIds.add(rows[i].id);
467
- }
468
- }
469
- }
470
- }
471
- // record the last selected row id
472
- lastSelectedRowId.current = row.id;
473
- // if all sub rows were selected, unselect them
474
- if (row.getCanSelectSubRows() && row.getIsAllSubRowsSelected()) {
475
- (_a = row.subRows) === null || _a === void 0 ? void 0 : _a.forEach((r) => r.toggleSelected(false));
476
- }
477
- if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'))) {
478
- changedRowIds.forEach((rowId) => {
479
- const rowToTogglePin = table.getRow(rowId);
480
- rowToTogglePin.pin(!wasCurrentRowChecked //was not previously pinned or selected
481
- ? (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('bottom'))
482
- ? 'bottom'
483
- : 'top'
484
- : false);
485
- });
486
- }
487
- };
488
- const getMRT_SelectAllHandler = ({ table }) => (event, value, forceAll) => {
489
- const { options: { enableRowPinning, rowPinningDisplayMode, selectAllMode }, refs: { lastSelectedRowId }, } = table;
490
- selectAllMode === 'all' || forceAll
491
- ? table.toggleAllRowsSelected(value !== null && value !== void 0 ? value : event.target.checked)
492
- : table.toggleAllPageRowsSelected(value !== null && value !== void 0 ? value : event.target.checked);
493
- if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'))) {
494
- table.setRowPinning({ bottom: [], top: [] });
495
- }
496
- lastSelectedRowId.current = null;
497
- };
498
-
499
- const isWinCtrlMacMeta = (event) => {
500
- return ((event.ctrlKey && navigator.platform.toLowerCase().includes('win')) ||
501
- (event.metaKey && navigator.platform.toLowerCase().includes('mac')));
502
- };
503
- const isCellEditable = ({ cell, table, }) => {
504
- const { enableEditing } = table.options;
505
- const { column: { columnDef }, row, } = cell;
506
- return (!cell.getIsPlaceholder() &&
507
- parseFromValuesOrFunc(enableEditing, row) &&
508
- parseFromValuesOrFunc(columnDef.enableEditing, row) !== false);
509
- };
510
- const openEditingCell = ({ cell, table, }) => {
511
- const { options: { editDisplayMode }, refs: { editInputRefs }, } = table;
512
- const { column } = cell;
513
- if (isCellEditable({ cell, table }) && editDisplayMode === 'cell') {
514
- table.setEditingCell(cell);
515
- queueMicrotask(() => {
516
- var _a, _b;
517
- const textField = (_a = editInputRefs.current) === null || _a === void 0 ? void 0 : _a[column.id];
518
- if (textField) {
519
- textField.focus();
520
- (_b = textField.select) === null || _b === void 0 ? void 0 : _b.call(textField);
521
- }
522
- });
523
- }
524
- };
525
- const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement, event, header, parentElement, table, }) => {
526
- var _a, _b, _c, _d, _e, _f, _g, _h;
527
- if (!table.options.enableKeyboardShortcuts)
528
- return;
529
- if (event.isPropagationStopped())
530
- return;
531
- const currentCell = event.currentTarget;
532
- if (cellValue && isWinCtrlMacMeta(event) && event.key === 'c') {
533
- navigator.clipboard.writeText(cellValue);
534
- }
535
- else if (['Enter', ' '].includes(event.key)) {
536
- if (((_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.id) === 'mrt-row-select') {
537
- event.preventDefault();
538
- getMRT_RowSelectionHandler({
539
- row: cell.row,
540
- table,
541
- //@ts-ignore
542
- staticRowIndex: +event.target.getAttribute('data-index'),
543
- })(event);
544
- }
545
- else if (((_b = header === null || header === void 0 ? void 0 : header.column) === null || _b === void 0 ? void 0 : _b.id) === 'mrt-row-select' &&
546
- table.options.enableSelectAll) {
547
- event.preventDefault();
548
- getMRT_SelectAllHandler({
549
- table,
550
- })(event);
551
- }
552
- else if (((_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.id) === 'mrt-row-expand' &&
553
- (cell.row.getCanExpand() ||
554
- ((_e = (_d = table.options).renderDetailPanel) === null || _e === void 0 ? void 0 : _e.call(_d, { row: cell.row, table })))) {
555
- event.preventDefault();
556
- cell.row.toggleExpanded();
557
- }
558
- else if (((_f = header === null || header === void 0 ? void 0 : header.column) === null || _f === void 0 ? void 0 : _f.id) === 'mrt-row-expand' &&
559
- table.options.enableExpandAll) {
560
- event.preventDefault();
561
- table.toggleAllRowsExpanded();
562
- }
563
- else if ((cell === null || cell === void 0 ? void 0 : cell.column.id) === 'mrt-row-pin') {
564
- event.preventDefault();
565
- cell.row.getIsPinned()
566
- ? cell.row.pin(false)
567
- : cell.row.pin(((_g = table.options.rowPinningDisplayMode) === null || _g === void 0 ? void 0 : _g.includes('bottom'))
568
- ? 'bottom'
569
- : 'top');
570
- }
571
- else if (header && isWinCtrlMacMeta(event)) {
572
- const actionsButton = currentCell.querySelector(`button[aria-label="${table.options.localization.columnActions}"]`);
573
- if (actionsButton) {
574
- actionsButton.click();
575
- }
576
- }
577
- else if ((_h = header === null || header === void 0 ? void 0 : header.column) === null || _h === void 0 ? void 0 : _h.getCanSort()) {
578
- event.preventDefault();
579
- header.column.toggleSorting();
580
- }
581
- }
582
- else if ([
583
- 'ArrowRight',
584
- 'ArrowLeft',
585
- 'ArrowUp',
586
- 'ArrowDown',
587
- 'Home',
588
- 'End',
589
- 'PageUp',
590
- 'PageDown',
591
- ].includes(event.key)) {
592
- event.preventDefault();
593
- const currentRow = parentElement || currentCell.closest('tr');
594
- const tableElement = containerElement || currentCell.closest('table');
595
- const allCells = cellElements ||
596
- Array.from((tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelectorAll('th, td')) || []);
597
- const currentCellIndex = allCells.indexOf(currentCell);
598
- const currentIndex = parseInt(currentCell.getAttribute('data-index') || '0');
599
- let nextCell = undefined;
600
- //home/end first or last cell in row
601
- const findEdgeCell = (rowIndex, edge) => {
602
- var _a;
603
- const row = rowIndex === 'c'
604
- ? currentRow
605
- : rowIndex === 'f'
606
- ? tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelector('tr')
607
- : (_a = tableElement === null || tableElement === void 0 ? void 0 : tableElement.lastElementChild) === null || _a === void 0 ? void 0 : _a.lastElementChild;
608
- const rowCells = Array.from((row === null || row === void 0 ? void 0 : row.children) || []);
609
- const targetCell = edge === 'f' ? rowCells[0] : rowCells[rowCells.length - 1];
610
- return targetCell;
611
- };
612
- //page up/down first or last cell in column
613
- const findBottomTopCell = (columnIndex, edge) => {
614
- var _a;
615
- const row = edge === 't'
616
- ? tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelector('tr')
617
- : (_a = tableElement === null || tableElement === void 0 ? void 0 : tableElement.lastElementChild) === null || _a === void 0 ? void 0 : _a.lastElementChild;
618
- const rowCells = Array.from((row === null || row === void 0 ? void 0 : row.children) || []);
619
- const targetCell = rowCells[columnIndex];
620
- return targetCell;
621
- };
622
- const findAdjacentCell = (columnIndex, searchDirection) => {
623
- const searchArray = searchDirection === 'f'
624
- ? allCells.slice(currentCellIndex + 1)
625
- : allCells.slice(0, currentCellIndex).reverse();
626
- return searchArray.find((cell) => cell.matches(`[data-index="${columnIndex}"]`));
627
- };
628
- switch (event.key) {
629
- case 'ArrowRight':
630
- nextCell = findAdjacentCell(currentIndex + 1, 'f');
631
- break;
632
- case 'ArrowLeft':
633
- nextCell = findAdjacentCell(currentIndex - 1, 'b');
634
- break;
635
- case 'ArrowUp':
636
- nextCell = findAdjacentCell(currentIndex, 'b');
637
- break;
638
- case 'ArrowDown':
639
- nextCell = findAdjacentCell(currentIndex, 'f');
640
- break;
641
- case 'Home':
642
- nextCell = findEdgeCell(isWinCtrlMacMeta(event) ? 'f' : 'c', 'f');
643
- break;
644
- case 'End':
645
- nextCell = findEdgeCell(isWinCtrlMacMeta(event) ? 'l' : 'c', 'l');
646
- break;
647
- case 'PageUp':
648
- nextCell = findBottomTopCell(currentIndex, 't');
649
- break;
650
- case 'PageDown':
651
- nextCell = findBottomTopCell(currentIndex, 'b');
652
- break;
653
- }
654
- if (nextCell) {
655
- nextCell.focus();
656
- }
657
- }
658
- };
659
-
660
- function defaultDisplayColumnProps({ header, id, size, tableOptions, }) {
661
- const { defaultDisplayColumn, displayColumnDefOptions, localization } = tableOptions;
662
- return Object.assign(Object.assign(Object.assign(Object.assign({}, defaultDisplayColumn), { header: header ? localization[header] : '', size }), displayColumnDefOptions === null || displayColumnDefOptions === void 0 ? void 0 : displayColumnDefOptions[id]), { id });
663
- }
664
- const showRowPinningColumn = (tableOptions) => {
665
- const { enableRowPinning, rowPinningDisplayMode } = tableOptions;
666
- return !!(enableRowPinning && !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.startsWith('select')));
667
- };
668
- const showRowDragColumn = (tableOptions) => {
669
- const { enableRowDragging, enableRowOrdering } = tableOptions;
670
- return !!(enableRowDragging || enableRowOrdering);
671
- };
672
- const showRowExpandColumn = (tableOptions) => {
673
- const { enableExpanding, enableGrouping, renderDetailPanel, state: { grouping }, } = tableOptions;
674
- return !!(enableExpanding ||
675
- (enableGrouping && (grouping === null || grouping === void 0 ? void 0 : grouping.length)) ||
676
- renderDetailPanel);
677
- };
678
- const showRowActionsColumn = (tableOptions) => {
679
- const { createDisplayMode, editDisplayMode, enableEditing, enableRowActions, state: { creatingRow }, } = tableOptions;
680
- return !!(enableRowActions ||
681
- (creatingRow && createDisplayMode === 'row') ||
682
- (enableEditing && ['modal', 'row'].includes(editDisplayMode !== null && editDisplayMode !== void 0 ? editDisplayMode : '')));
683
- };
684
- const showRowSelectionColumn = (tableOptions) => !!tableOptions.enableRowSelection;
685
- const showRowNumbersColumn = (tableOptions) => !!tableOptions.enableRowNumbers;
686
- const showRowSpacerColumn = (tableOptions) => tableOptions.layoutMode === 'grid-no-grow';
687
- const getLeadingDisplayColumnIds = (tableOptions) => [
688
- showRowPinningColumn(tableOptions) && 'mrt-row-pin',
689
- showRowDragColumn(tableOptions) && 'mrt-row-drag',
690
- tableOptions.positionActionsColumn === 'first' &&
691
- showRowActionsColumn(tableOptions) &&
692
- 'mrt-row-actions',
693
- tableOptions.positionExpandColumn === 'first' &&
694
- showRowExpandColumn(tableOptions) &&
695
- 'mrt-row-expand',
696
- showRowSelectionColumn(tableOptions) && 'mrt-row-select',
697
- showRowNumbersColumn(tableOptions) && 'mrt-row-numbers',
698
- ].filter(Boolean);
699
- const getTrailingDisplayColumnIds = (tableOptions) => [
700
- tableOptions.positionActionsColumn === 'last' &&
701
- showRowActionsColumn(tableOptions) &&
702
- 'mrt-row-actions',
703
- tableOptions.positionExpandColumn === 'last' &&
704
- showRowExpandColumn(tableOptions) &&
705
- 'mrt-row-expand',
706
- showRowSpacerColumn(tableOptions) && 'mrt-row-spacer',
707
- ].filter(Boolean);
708
- const getDefaultColumnOrderIds = (tableOptions, reset = false) => {
709
- const { state: { columnOrder: currentColumnOrderIds = [] }, } = tableOptions;
710
- const leadingDisplayColIds = getLeadingDisplayColumnIds(tableOptions);
711
- const trailingDisplayColIds = getTrailingDisplayColumnIds(tableOptions);
712
- const defaultColumnDefIds = getAllLeafColumnDefs(tableOptions.columns).map((columnDef) => getColumnId(columnDef));
713
- let allLeafColumnDefIds = reset
714
- ? defaultColumnDefIds
715
- : Array.from(new Set([...currentColumnOrderIds, ...defaultColumnDefIds]));
716
- allLeafColumnDefIds = allLeafColumnDefIds.filter((colId) => !leadingDisplayColIds.includes(colId) &&
717
- !trailingDisplayColIds.includes(colId));
718
- return [
719
- ...leadingDisplayColIds,
720
- ...allLeafColumnDefIds,
721
- ...trailingDisplayColIds,
722
- ];
723
- };
724
-
725
- const MRT_AggregationFns = Object.assign({}, reactTable.aggregationFns);
726
-
727
- const fuzzy = (row, columnId, filterValue, addMeta) => {
728
- const itemRank = matchSorterUtils.rankItem(row.getValue(columnId), filterValue, {
729
- threshold: matchSorterUtils.rankings.MATCHES,
730
- });
731
- addMeta(itemRank);
732
- return itemRank.passed;
733
- };
734
- fuzzy.autoRemove = (val) => !val;
735
- const contains = (row, id, filterValue) => {
736
- var _a;
737
- return !!((_a = row
738
- .getValue(id)) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase().trim().includes(filterValue.toString().toLowerCase().trim()));
739
- };
740
- contains.autoRemove = (val) => !val;
741
- const startsWith = (row, id, filterValue) => {
742
- var _a;
743
- return !!((_a = row
744
- .getValue(id)) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase().trim().startsWith(filterValue.toString().toLowerCase().trim()));
745
- };
746
- startsWith.autoRemove = (val) => !val;
747
- const endsWith = (row, id, filterValue) => {
748
- var _a;
749
- return !!((_a = row
750
- .getValue(id)) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase().trim().endsWith(filterValue.toString().toLowerCase().trim()));
751
- };
752
- endsWith.autoRemove = (val) => !val;
753
- const equals = (row, id, filterValue) => {
754
- var _a;
755
- return ((_a = row.getValue(id)) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase().trim()) ===
756
- filterValue.toString().toLowerCase().trim();
757
- };
758
- equals.autoRemove = (val) => !val;
759
- const notEquals = (row, id, filterValue) => {
760
- var _a;
761
- return ((_a = row.getValue(id)) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase().trim()) !==
762
- filterValue.toString().toLowerCase().trim();
763
- };
764
- notEquals.autoRemove = (val) => !val;
765
- const greaterThan = (row, id, filterValue) => {
766
- var _a, _b, _c;
767
- return !isNaN(+filterValue) && !isNaN(+row.getValue(id))
768
- ? +((_a = row.getValue(id)) !== null && _a !== void 0 ? _a : 0) > +filterValue
769
- : ((_c = ((_b = row.getValue(id)) !== null && _b !== void 0 ? _b : '')) === null || _c === void 0 ? void 0 : _c.toString().toLowerCase().trim()) > filterValue.toString().toLowerCase().trim();
770
- };
771
- greaterThan.autoRemove = (val) => !val;
772
- const greaterThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || greaterThan(row, id, filterValue);
773
- greaterThanOrEqualTo.autoRemove = (val) => !val;
774
- const lessThan = (row, id, filterValue) => {
775
- var _a, _b, _c;
776
- return !isNaN(+filterValue) && !isNaN(+row.getValue(id))
777
- ? +((_a = row.getValue(id)) !== null && _a !== void 0 ? _a : 0) < +filterValue
778
- : ((_c = ((_b = row.getValue(id)) !== null && _b !== void 0 ? _b : '')) === null || _c === void 0 ? void 0 : _c.toString().toLowerCase().trim()) < filterValue.toString().toLowerCase().trim();
779
- };
780
- lessThan.autoRemove = (val) => !val;
781
- const lessThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || lessThan(row, id, filterValue);
782
- lessThanOrEqualTo.autoRemove = (val) => !val;
783
- const between = (row, id, filterValues) => (['', undefined].includes(filterValues[0]) ||
784
- greaterThan(row, id, filterValues[0])) &&
785
- ((!isNaN(+filterValues[0]) &&
786
- !isNaN(+filterValues[1]) &&
787
- +filterValues[0] > +filterValues[1]) ||
788
- ['', undefined].includes(filterValues[1]) ||
789
- lessThan(row, id, filterValues[1]));
790
- between.autoRemove = (val) => !val;
791
- const betweenInclusive = (row, id, filterValues) => (['', undefined].includes(filterValues[0]) ||
792
- greaterThanOrEqualTo(row, id, filterValues[0])) &&
793
- ((!isNaN(+filterValues[0]) &&
794
- !isNaN(+filterValues[1]) &&
795
- +filterValues[0] > +filterValues[1]) ||
796
- ['', undefined].includes(filterValues[1]) ||
797
- lessThanOrEqualTo(row, id, filterValues[1]));
798
- betweenInclusive.autoRemove = (val) => !val;
799
- const empty = (row, id, _filterValue) => { var _a; return !((_a = row.getValue(id)) === null || _a === void 0 ? void 0 : _a.toString().trim()); };
800
- empty.autoRemove = (val) => !val;
801
- const notEmpty = (row, id, _filterValue) => { var _a; return !!((_a = row.getValue(id)) === null || _a === void 0 ? void 0 : _a.toString().trim()); };
802
- notEmpty.autoRemove = (val) => !val;
803
- const MRT_FilterFns = Object.assign(Object.assign({}, reactTable.filterFns), { between,
804
- betweenInclusive,
805
- contains,
806
- empty,
807
- endsWith,
808
- equals,
809
- fuzzy,
810
- greaterThan,
811
- greaterThanOrEqualTo,
812
- lessThan,
813
- lessThanOrEqualTo,
814
- notEmpty,
815
- notEquals,
816
- startsWith });
817
-
818
- /******************************************************************************
819
- Copyright (c) Microsoft Corporation.
820
-
821
- Permission to use, copy, modify, and/or distribute this software for any
822
- purpose with or without fee is hereby granted.
823
-
824
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
825
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
826
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
827
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
828
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
829
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
830
- PERFORMANCE OF THIS SOFTWARE.
831
- ***************************************************************************** */
832
-
833
- function __rest(s, e) {
834
- var t = {};
835
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
836
- t[p] = s[p];
837
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
838
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
839
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
840
- t[p[i]] = s[p[i]];
841
- }
842
- return t;
843
- }
844
-
845
- typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
846
- var e = new Error(message);
847
- return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
848
- };
849
-
850
- const MRT_EditActionButtons = (_a) => {
851
- var { row, table, variant = 'icon' } = _a, rest = __rest(_a, ["row", "table", "variant"]);
852
- const { getState, options: { icons: { CancelIcon, SaveIcon }, localization, onCreatingRowCancel, onCreatingRowSave, onEditingRowCancel, onEditingRowSave, }, refs: { editInputRefs }, setCreatingRow, setEditingRow, } = table;
853
- const { creatingRow, editingRow, isSaving } = getState();
854
- const isCreating = (creatingRow === null || creatingRow === void 0 ? void 0 : creatingRow.id) === row.id;
855
- const isEditing = (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id;
856
- const handleCancel = () => {
857
- if (isCreating) {
858
- onCreatingRowCancel === null || onCreatingRowCancel === void 0 ? void 0 : onCreatingRowCancel({ row, table });
859
- setCreatingRow(null);
860
- }
861
- else if (isEditing) {
862
- onEditingRowCancel === null || onEditingRowCancel === void 0 ? void 0 : onEditingRowCancel({ row, table });
863
- setEditingRow(null);
864
- }
865
- row._valuesCache = {}; //reset values cache
866
- };
867
- const handleSubmitRow = () => {
868
- var _a, _b;
869
- //look for auto-filled input values
870
- (_b = Object.values((_a = editInputRefs.current) !== null && _a !== void 0 ? _a : {})
871
- .filter((inputRef) => { var _a, _b; return row.id === ((_b = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.name) === null || _a === void 0 ? void 0 : _a.split('_')) === null || _b === void 0 ? void 0 : _b[0]); })) === null || _b === void 0 ? void 0 : _b.forEach((input) => {
872
- if (input.value !== undefined &&
873
- Object.hasOwn(row === null || row === void 0 ? void 0 : row._valuesCache, input.name)) {
874
- // @ts-ignore
875
- row._valuesCache[input.name] = input.value;
876
- }
877
- });
878
- if (isCreating)
879
- onCreatingRowSave === null || onCreatingRowSave === void 0 ? void 0 : onCreatingRowSave({
880
- exitCreatingMode: () => setCreatingRow(null),
881
- row,
882
- table,
883
- values: row._valuesCache,
884
- });
885
- else if (isEditing) {
886
- onEditingRowSave === null || onEditingRowSave === void 0 ? void 0 : onEditingRowSave({
887
- exitEditingMode: () => setEditingRow(null),
888
- row,
889
- table,
890
- values: row === null || row === void 0 ? void 0 : row._valuesCache,
891
- });
892
- }
893
- };
894
- return (jsxRuntime.jsx(Box__default["default"], { onClick: (e) => e.stopPropagation(), sx: (theme) => (Object.assign({ display: 'flex', gap: '0.75rem' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: variant === 'icon' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip__default["default"], { title: localization.cancel, children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.cancel, onClick: handleCancel, children: jsxRuntime.jsx(CancelIcon, {}) }) }), ((isCreating && onCreatingRowSave) ||
895
- (isEditing && onEditingRowSave)) && (jsxRuntime.jsx(Tooltip__default["default"], { title: localization.save, children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.save, color: "info", disabled: isSaving, onClick: handleSubmitRow, children: isSaving ? jsxRuntime.jsx(CircularProgress__default["default"], { size: 18 }) : jsxRuntime.jsx(SaveIcon, {}) }) }))] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button__default["default"], { onClick: handleCancel, sx: { minWidth: '100px' }, children: localization.cancel }), jsxRuntime.jsxs(Button__default["default"], { disabled: isSaving, onClick: handleSubmitRow, sx: { minWidth: '100px' }, variant: "contained", children: [isSaving && jsxRuntime.jsx(CircularProgress__default["default"], { color: "inherit", size: 18 }), localization.save] })] })) }));
896
- };
897
-
898
- const parseCSSVarId = (id) => id.replace(/[^a-zA-Z0-9]/g, '_');
899
- const getMRTTheme = (mrtTheme, muiTheme) => {
900
- var _a;
901
- const mrtThemeOverrides = parseFromValuesOrFunc(mrtTheme, muiTheme);
902
- const baseBackgroundColor = (_a = mrtThemeOverrides === null || mrtThemeOverrides === void 0 ? void 0 : mrtThemeOverrides.baseBackgroundColor) !== null && _a !== void 0 ? _a : (muiTheme.palette.mode === 'dark'
903
- ? styles.lighten(muiTheme.palette.background.default, 0.05)
904
- : muiTheme.palette.background.default);
905
- return Object.assign({ baseBackgroundColor, cellNavigationOutlineColor: muiTheme.palette.primary.main, draggingBorderColor: muiTheme.palette.primary.main, matchHighlightColor: muiTheme.palette.mode === 'dark'
906
- ? styles.darken(muiTheme.palette.warning.dark, 0.25)
907
- : styles.lighten(muiTheme.palette.warning.light, 0.5), menuBackgroundColor: styles.lighten(baseBackgroundColor, 0.07), pinnedRowBackgroundColor: styles.alpha(muiTheme.palette.primary.main, 0.1), selectedRowBackgroundColor: styles.alpha(muiTheme.palette.primary.main, 0.2) }, mrtThemeOverrides);
908
- };
909
- const commonCellBeforeAfterStyles = {
910
- content: '""',
911
- height: '100%',
912
- left: 0,
913
- position: 'absolute',
914
- top: 0,
915
- width: '100%',
916
- zIndex: -1,
917
- };
918
- const getCommonPinnedCellStyles = ({ column, table, theme, }) => {
919
- const { baseBackgroundColor } = table.options.mrtTheme;
920
- const isPinned = column === null || column === void 0 ? void 0 : column.getIsPinned();
921
- return {
922
- '&[data-pinned="true"]': {
923
- '&:before': Object.assign({ backgroundColor: styles.alpha(styles.darken(baseBackgroundColor, theme.palette.mode === 'dark' ? 0.05 : 0.01), 0.97), boxShadow: column
924
- ? isPinned === 'left' && column.getIsLastColumn(isPinned)
925
- ? `-4px 0 4px -4px ${styles.alpha(theme.palette.grey[700], 0.5)} inset`
926
- : isPinned === 'right' && column.getIsFirstColumn(isPinned)
927
- ? `4px 0 4px -4px ${styles.alpha(theme.palette.grey[700], 0.5)} inset`
928
- : undefined
929
- : undefined }, commonCellBeforeAfterStyles),
930
- },
931
- };
932
- };
933
- const getCommonMRTCellStyles = ({ column, header, table, tableCellProps, theme, }) => {
934
- var _a, _b, _c, _d, _e, _f;
935
- const { getState, options: { enableColumnVirtualization, layoutMode }, } = table;
936
- const { draggingColumn } = getState();
937
- const { columnDef } = column;
938
- const { columnDefType } = columnDef;
939
- const isColumnPinned = columnDef.columnDefType !== 'group' && column.getIsPinned();
940
- const widthStyles = {
941
- minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId((_a = header === null || header === void 0 ? void 0 : header.id) !== null && _a !== void 0 ? _a : column.id)}-size) * 1px), ${(_b = columnDef.minSize) !== null && _b !== void 0 ? _b : 30}px)`,
942
- width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId((_c = header === null || header === void 0 ? void 0 : header.id) !== null && _c !== void 0 ? _c : column.id)}-size) * 1px)`,
943
- };
944
- if (layoutMode === 'grid') {
945
- widthStyles.flex = `${[0, false].includes(columnDef.grow)
946
- ? 0
947
- : `var(--${header ? 'header' : 'col'}-${parseCSSVarId((_d = header === null || header === void 0 ? void 0 : header.id) !== null && _d !== void 0 ? _d : column.id)}-size)`} 0 auto`;
948
- }
949
- else if (layoutMode === 'grid-no-grow') {
950
- widthStyles.flex = `${+(columnDef.grow || 0)} 0 auto`;
951
- }
952
- const pinnedStyles = isColumnPinned
953
- ? Object.assign(Object.assign({}, getCommonPinnedCellStyles({ column, table, theme })), { left: isColumnPinned === 'left'
954
- ? `${column.getStart('left')}px`
955
- : undefined, opacity: 0.97, position: 'sticky', right: isColumnPinned === 'right'
956
- ? `${column.getAfter('right')}px`
957
- : undefined }) : {};
958
- return Object.assign(Object.assign(Object.assign({ backgroundColor: 'inherit', backgroundImage: 'inherit', display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, justifyContent: columnDefType === 'group'
959
- ? 'center'
960
- : (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid'))
961
- ? tableCellProps.align
962
- : undefined, opacity: ((_e = table.getState().draggingColumn) === null || _e === void 0 ? void 0 : _e.id) === column.id ||
963
- ((_f = table.getState().hoveredColumn) === null || _f === void 0 ? void 0 : _f.id) === column.id
964
- ? 0.5
965
- : 1, position: 'relative', transition: enableColumnVirtualization
966
- ? 'none'
967
- : `padding 150ms ease-in-out`, zIndex: column.getIsResizing() || (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
968
- ? 2
969
- : columnDefType !== 'group' && isColumnPinned
970
- ? 1
971
- : 0, '&:focus-visible': {
972
- outline: `2px solid ${table.options.mrtTheme.cellNavigationOutlineColor}`,
973
- outlineOffset: '-2px',
974
- } }, pinnedStyles), widthStyles), parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme));
975
- };
976
- const getCommonToolbarStyles = ({ table, }) => ({
977
- alignItems: 'flex-start',
978
- backgroundColor: table.options.mrtTheme.baseBackgroundColor,
979
- display: 'grid',
980
- flexWrap: 'wrap-reverse',
981
- minHeight: '3.5rem',
982
- overflow: 'hidden',
983
- position: 'relative',
984
- transition: 'all 150ms ease-in-out',
985
- zIndex: 1,
986
- });
987
- const flipIconStyles = (theme) => theme.direction === 'rtl'
988
- ? { style: { transform: 'scaleX(-1)' } }
989
- : undefined;
990
- const getCommonTooltipProps = (placement) => ({
991
- disableInteractive: true,
992
- enterDelay: 1000,
993
- enterNextDelay: 1000,
994
- placement,
995
- });
996
-
997
- const MRT_ActionMenuItem = (_a) => {
998
- var { icon, label, onOpenSubMenu, table } = _a, rest = __rest(_a, ["icon", "label", "onOpenSubMenu", "table"]);
999
- const { options: { icons: { ArrowRightIcon }, }, } = table;
1000
- return (jsxRuntime.jsxs(MenuItem__default["default"], Object.assign({ sx: {
1001
- alignItems: 'center',
1002
- justifyContent: 'space-between',
1003
- minWidth: '120px',
1004
- my: 0,
1005
- py: '6px',
1006
- }, tabIndex: 0 }, rest, { children: [jsxRuntime.jsxs(Box__default["default"], { sx: {
1007
- alignItems: 'center',
1008
- display: 'flex',
1009
- }, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: icon }), label] }), onOpenSubMenu && (jsxRuntime.jsx(IconButton__default["default"], { onClick: onOpenSubMenu, onMouseEnter: onOpenSubMenu, size: "small", sx: { p: 0 }, children: jsxRuntime.jsx(ArrowRightIcon, {}) }))] })));
1010
- };
1011
-
1012
- const MRT_RowActionMenu = (_a) => {
1013
- var { anchorEl, handleEdit, row, setAnchorEl, staticRowIndex, table } = _a, rest = __rest(_a, ["anchorEl", "handleEdit", "row", "setAnchorEl", "staticRowIndex", "table"]);
1014
- const { getState, options: { editDisplayMode, enableEditing, icons: { EditIcon }, localization, mrtTheme: { menuBackgroundColor }, renderRowActionMenuItems, }, } = table;
1015
- const { density } = getState();
1016
- const menuItems = react.useMemo(() => {
1017
- const items = [];
1018
- const editItem = parseFromValuesOrFunc(enableEditing, row) &&
1019
- ['modal', 'row'].includes(editDisplayMode) && (jsxRuntime.jsx(MRT_ActionMenuItem, { icon: jsxRuntime.jsx(EditIcon, {}), label: localization.edit, onClick: handleEdit, table: table }, 'edit'));
1020
- if (editItem)
1021
- items.push(editItem);
1022
- const rowActionMenuItems = renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 : renderRowActionMenuItems({
1023
- closeMenu: () => setAnchorEl(null),
1024
- row,
1025
- staticRowIndex,
1026
- table,
1027
- });
1028
- if (rowActionMenuItems === null || rowActionMenuItems === void 0 ? void 0 : rowActionMenuItems.length)
1029
- items.push(...rowActionMenuItems);
1030
- return items;
1031
- }, [renderRowActionMenuItems, row, staticRowIndex, table]);
1032
- if (!menuItems.length)
1033
- return null;
1034
- return (jsxRuntime.jsx(Menu__default["default"], Object.assign({ MenuListProps: {
1035
- dense: density === 'compact',
1036
- sx: {
1037
- backgroundColor: menuBackgroundColor,
1038
- },
1039
- }, anchorEl: anchorEl, disableScrollLock: true, onClick: (event) => event.stopPropagation(), onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: menuItems })));
1040
- };
1041
-
1042
- const commonIconButtonStyles = {
1043
- '&:hover': {
1044
- opacity: 1,
1045
- },
1046
- height: '2rem',
1047
- ml: '10px',
1048
- opacity: 0.5,
1049
- transition: 'opacity 150ms',
1050
- width: '2rem',
1051
- };
1052
- const MRT_ToggleRowActionMenuButton = (_a) => {
1053
- var _b;
1054
- var { cell, row, staticRowIndex, table } = _a, rest = __rest(_a, ["cell", "row", "staticRowIndex", "table"]);
1055
- const { getState, options: { createDisplayMode, editDisplayMode, enableEditing, icons: { EditIcon, MoreHorizIcon }, localization, renderRowActionMenuItems, renderRowActions, }, setEditingRow, } = table;
1056
- const { creatingRow, editingRow } = getState();
1057
- const isCreating = (creatingRow === null || creatingRow === void 0 ? void 0 : creatingRow.id) === row.id;
1058
- const isEditing = (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id;
1059
- const showEditActionButtons = (isCreating && createDisplayMode === 'row') ||
1060
- (isEditing && editDisplayMode === 'row');
1061
- const [anchorEl, setAnchorEl] = react.useState(null);
1062
- const handleOpenRowActionMenu = (event) => {
1063
- event.stopPropagation();
1064
- event.preventDefault();
1065
- setAnchorEl(event.currentTarget);
1066
- };
1067
- const handleStartEditMode = (event) => {
1068
- event.stopPropagation();
1069
- setEditingRow(Object.assign({}, row));
1070
- setAnchorEl(null);
1071
- };
1072
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderRowActions && !showEditActionButtons ? (renderRowActions({ cell, row, staticRowIndex, table })) : showEditActionButtons ? (jsxRuntime.jsx(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems &&
1073
- parseFromValuesOrFunc(enableEditing, row) &&
1074
- ['modal', 'row'].includes(editDisplayMode) ? (jsxRuntime.jsx(Tooltip__default["default"], { placement: "right", title: localization.edit, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.edit, onClick: handleStartEditMode, sx: commonIconButtonStyles }, rest, { children: jsxRuntime.jsx(EditIcon, {}) })) })) : ((_b = renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 : renderRowActionMenuItems({
1075
- row,
1076
- staticRowIndex,
1077
- table,
1078
- })) === null || _b === void 0 ? void 0 : _b.length) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, getCommonTooltipProps(), { title: localization.rowActions, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.rowActions, onClick: handleOpenRowActionMenu, size: "small", sx: commonIconButtonStyles }, rest, { children: jsxRuntime.jsx(MoreHorizIcon, {}) })) })), jsxRuntime.jsx(MRT_RowActionMenu, { anchorEl: anchorEl, handleEdit: handleStartEditMode, row: row, setAnchorEl: setAnchorEl, staticRowIndex: staticRowIndex, table: table })] })) : null }));
1079
- };
1080
-
1081
- const getMRT_RowActionsColumnDef = (tableOptions) => {
1082
- return Object.assign({ Cell: ({ cell, row, staticRowIndex, table }) => (jsxRuntime.jsx(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, staticRowIndex: staticRowIndex, table: table })) }, defaultDisplayColumnProps({
1083
- header: 'actions',
1084
- id: 'mrt-row-actions',
1085
- size: 70,
1086
- tableOptions,
1087
- }));
1088
- };
1089
-
1090
- const MRT_GrabHandleButton = (_a) => {
1091
- var _b, _c;
1092
- var { location, table } = _a, rest = __rest(_a, ["location", "table"]);
1093
- const { options: { icons: { DragHandleIcon }, localization, }, } = table;
1094
- return (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, getCommonTooltipProps('top'), { title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.move, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": (_c = rest.title) !== null && _c !== void 0 ? _c : localization.move, disableRipple: true, draggable: "true", size: "small" }, rest, { onClick: (e) => {
1095
- var _a;
1096
- e.stopPropagation();
1097
- (_a = rest === null || rest === void 0 ? void 0 : rest.onClick) === null || _a === void 0 ? void 0 : _a.call(rest, e);
1098
- }, sx: (theme) => (Object.assign({ '&:active': {
1099
- cursor: 'grabbing',
1100
- }, '&:hover': {
1101
- backgroundColor: 'transparent',
1102
- opacity: 1,
1103
- }, cursor: 'grab', m: '0 -0.1rem', opacity: location === 'row' ? 1 : 0.5, p: '2px', transition: 'all 150ms ease-in-out' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), title: undefined, children: jsxRuntime.jsx(DragHandleIcon, {}) })) })));
1104
- };
1105
-
1106
- const MRT_TableBodyRowGrabHandle = (_a) => {
1107
- var { row, rowRef, table } = _a, rest = __rest(_a, ["row", "rowRef", "table"]);
1108
- const { options: { muiRowDragHandleProps }, } = table;
1109
- const iconButtonProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiRowDragHandleProps, {
1110
- row,
1111
- table,
1112
- })), rest);
1113
- const handleDragStart = (event) => {
1114
- var _a;
1115
- (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragStart) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
1116
- try {
1117
- event.dataTransfer.setDragImage(rowRef.current, 0, 0);
1118
- }
1119
- catch (e) {
1120
- console.error(e);
1121
- }
1122
- table.setDraggingRow(row);
1123
- };
1124
- const handleDragEnd = (event) => {
1125
- var _a;
1126
- (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
1127
- table.setDraggingRow(null);
1128
- table.setHoveredRow(null);
1129
- };
1130
- return (jsxRuntime.jsx(MRT_GrabHandleButton, Object.assign({}, iconButtonProps, { location: "row", onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table })));
1131
- };
1132
-
1133
- const getMRT_RowDragColumnDef = (tableOptions) => {
1134
- return Object.assign({ Cell: ({ row, rowRef, table }) => (jsxRuntime.jsx(MRT_TableBodyRowGrabHandle, { row: row, rowRef: rowRef, table: table })), grow: false }, defaultDisplayColumnProps({
1135
- header: 'move',
1136
- id: 'mrt-row-drag',
1137
- size: 60,
1138
- tableOptions,
1139
- }));
1140
- };
1141
-
1142
- const MRT_ExpandAllButton = (_a) => {
1143
- var _b, _c;
1144
- var { table } = _a, rest = __rest(_a, ["table"]);
1145
- const { getCanSomeRowsExpand, getIsAllRowsExpanded, getIsSomeRowsExpanded, getState, options: { icons: { KeyboardDoubleArrowDownIcon }, localization, muiExpandAllButtonProps, renderDetailPanel, }, toggleAllRowsExpanded, } = table;
1146
- const { density, isLoading } = getState();
1147
- const iconButtonProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiExpandAllButtonProps, {
1148
- table,
1149
- })), rest);
1150
- const isAllRowsExpanded = getIsAllRowsExpanded();
1151
- return (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, getCommonTooltipProps(), { title: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _b !== void 0 ? _b : (isAllRowsExpanded ? localization.collapseAll : localization.expandAll), children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.expandAll, disabled: isLoading || (!renderDetailPanel && !getCanSomeRowsExpand()), onClick: () => toggleAllRowsExpanded(!isAllRowsExpanded) }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined, width: density === 'compact' ? '1.75rem' : '2.25rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_c = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _c !== void 0 ? _c : (jsxRuntime.jsx(KeyboardDoubleArrowDownIcon, { style: {
1152
- transform: `rotate(${isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0}deg)`,
1153
- transition: 'transform 150ms',
1154
- } })) })) }) })));
1155
- };
1156
-
1157
- const MRT_ExpandButton = ({ row, staticRowIndex, table, }) => {
1158
- var _a, _b;
1159
- const theme = styles.useTheme();
1160
- const { getState, options: { icons: { ExpandMoreIcon }, localization, muiExpandButtonProps, positionExpandColumn, renderDetailPanel, }, } = table;
1161
- const { density } = getState();
1162
- const iconButtonProps = parseFromValuesOrFunc(muiExpandButtonProps, {
1163
- row,
1164
- staticRowIndex,
1165
- table,
1166
- });
1167
- const canExpand = row.getCanExpand();
1168
- const isExpanded = row.getIsExpanded();
1169
- const handleToggleExpand = (event) => {
1170
- var _a;
1171
- event.stopPropagation();
1172
- row.toggleExpanded();
1173
- (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
1174
- };
1175
- const detailPanel = !!(renderDetailPanel === null || renderDetailPanel === void 0 ? void 0 : renderDetailPanel({ row, table }));
1176
- return (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({ disableHoverListener: !canExpand && !detailPanel }, getCommonTooltipProps(), { title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : (isExpanded ? localization.collapse : localization.expand), children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.expand, disabled: !canExpand && !detailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', opacity: !canExpand && !detailPanel ? 0.3 : 1, [theme.direction === 'rtl' || positionExpandColumn === 'last'
1177
- ? 'mr'
1178
- : 'ml']: `${row.depth * 16}px`, width: density === 'compact' ? '1.75rem' : '2.25rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsxRuntime.jsx(ExpandMoreIcon, { style: {
1179
- transform: `rotate(${!canExpand && !renderDetailPanel
1180
- ? positionExpandColumn === 'last' ||
1181
- theme.direction === 'rtl'
1182
- ? 90
1183
- : -90
1184
- : isExpanded
1185
- ? -180
1186
- : 0}deg)`,
1187
- transition: 'transform 150ms',
1188
- } })) })) }) })));
1189
- };
1190
-
1191
- const getMRT_RowExpandColumnDef = (tableOptions) => {
1192
- var _a;
1193
- const { defaultColumn, enableExpandAll, groupedColumnMode, positionExpandColumn, renderDetailPanel, state: { grouping }, } = tableOptions;
1194
- const alignProps = positionExpandColumn === 'last'
1195
- ? {
1196
- align: 'right',
1197
- }
1198
- : undefined;
1199
- return Object.assign({ Cell: ({ cell, column, row, staticRowIndex, table }) => {
1200
- var _a, _b, _c;
1201
- const expandButtonProps = { row, staticRowIndex, table };
1202
- const subRowsLength = (_a = row.subRows) === null || _a === void 0 ? void 0 : _a.length;
1203
- if (groupedColumnMode === 'remove' && row.groupingColumnId) {
1204
- return (jsxRuntime.jsxs(Stack__default["default"], { alignItems: "center", flexDirection: "row", gap: "0.25rem", children: [jsxRuntime.jsx(MRT_ExpandButton, Object.assign({}, expandButtonProps)), jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, getCommonTooltipProps('right'), { title: table.getColumn(row.groupingColumnId).columnDef.header, children: jsxRuntime.jsx("span", { children: row.groupingValue }) })), !!subRowsLength && jsxRuntime.jsxs("span", { children: ["(", subRowsLength, ")"] })] }));
1205
- }
1206
- else {
1207
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MRT_ExpandButton, Object.assign({}, expandButtonProps)), (_c = (_b = column.columnDef).GroupedCell) === null || _c === void 0 ? void 0 : _c.call(_b, { cell, column, row, table })] }));
1208
- }
1209
- }, Header: enableExpandAll
1210
- ? ({ table }) => {
1211
- var _a;
1212
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MRT_ExpandAllButton, { table: table }), groupedColumnMode === 'remove' &&
1213
- ((_a = grouping === null || grouping === void 0 ? void 0 : grouping.map((groupedColumnId) => table.getColumn(groupedColumnId).columnDef.header)) === null || _a === void 0 ? void 0 : _a.join(', '))] }));
1214
- }
1215
- : undefined, muiTableBodyCellProps: alignProps, muiTableHeadCellProps: alignProps }, defaultDisplayColumnProps({
1216
- header: 'expand',
1217
- id: 'mrt-row-expand',
1218
- size: groupedColumnMode === 'remove'
1219
- ? ((_a = defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.size) !== null && _a !== void 0 ? _a : 180)
1220
- : renderDetailPanel
1221
- ? enableExpandAll
1222
- ? 60
1223
- : 70
1224
- : 100,
1225
- tableOptions,
1226
- }));
1227
- };
1228
-
1229
- const getMRT_RowNumbersColumnDef = (tableOptions) => {
1230
- const { localization, rowNumberDisplayMode } = tableOptions;
1231
- const { pagination: { pageIndex, pageSize }, } = tableOptions.state;
1232
- return Object.assign({ Cell: ({ row, staticRowIndex }) => {
1233
- var _a;
1234
- return ((_a = (rowNumberDisplayMode === 'static'
1235
- ? (staticRowIndex || 0) + (pageSize || 0) * (pageIndex || 0)
1236
- : row.index)) !== null && _a !== void 0 ? _a : 0) + 1;
1237
- }, Header: () => localization.rowNumber, grow: false }, defaultDisplayColumnProps({
1238
- header: 'rowNumbers',
1239
- id: 'mrt-row-numbers',
1240
- size: 50,
1241
- tableOptions,
1242
- }));
1243
- };
1244
-
1245
- const MRT_RowPinButton = (_a) => {
1246
- var { pinningPosition, row, table } = _a, rest = __rest(_a, ["pinningPosition", "row", "table"]);
1247
- const { options: { icons: { CloseIcon, PushPinIcon }, localization, rowPinningDisplayMode, }, } = table;
1248
- const isPinned = row.getIsPinned();
1249
- const [tooltipOpened, setTooltipOpened] = react.useState(false);
1250
- const handleTogglePin = (event) => {
1251
- setTooltipOpened(false);
1252
- event.stopPropagation();
1253
- row.pin(isPinned ? false : pinningPosition);
1254
- };
1255
- return (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, getCommonTooltipProps(), { open: tooltipOpened, title: isPinned ? localization.unpin : localization.pin, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.pin, onBlur: () => setTooltipOpened(false), onClick: handleTogglePin, onFocus: () => setTooltipOpened(true), onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false), size: "small" }, rest, { sx: (theme) => (Object.assign({ height: '24px', width: '24px' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: isPinned ? (jsxRuntime.jsx(CloseIcon, {})) : (jsxRuntime.jsx(PushPinIcon, { fontSize: "small", style: {
1256
- transform: `rotate(${rowPinningDisplayMode === 'sticky'
1257
- ? 135
1258
- : pinningPosition === 'top'
1259
- ? 180
1260
- : 0}deg)`,
1261
- } })) })) })));
1262
- };
1263
-
1264
- const MRT_TableBodyRowPinButton = (_a) => {
1265
- var { row, table } = _a, rest = __rest(_a, ["row", "table"]);
1266
- const { getState, options: { enableRowPinning, rowPinningDisplayMode }, } = table;
1267
- const { density } = getState();
1268
- const canPin = parseFromValuesOrFunc(enableRowPinning, row);
1269
- if (!canPin)
1270
- return null;
1271
- const rowPinButtonProps = Object.assign({ row,
1272
- table }, rest);
1273
- if (rowPinningDisplayMode === 'top-and-bottom' && !row.getIsPinned()) {
1274
- return (jsxRuntime.jsxs(Box__default["default"], { sx: {
1275
- display: 'flex',
1276
- flexDirection: density === 'compact' ? 'row' : 'column',
1277
- }, children: [jsxRuntime.jsx(MRT_RowPinButton, Object.assign({ pinningPosition: "top" }, rowPinButtonProps)), jsxRuntime.jsx(MRT_RowPinButton, Object.assign({ pinningPosition: "bottom" }, rowPinButtonProps))] }));
1278
- }
1279
- return (jsxRuntime.jsx(MRT_RowPinButton, Object.assign({ pinningPosition: rowPinningDisplayMode === 'bottom' ? 'bottom' : 'top' }, rowPinButtonProps)));
1280
- };
1281
-
1282
- const getMRT_RowPinningColumnDef = (tableOptions) => {
1283
- return Object.assign({ Cell: ({ row, table }) => (jsxRuntime.jsx(MRT_TableBodyRowPinButton, { row: row, table: table })), grow: false }, defaultDisplayColumnProps({
1284
- header: 'pin',
1285
- id: 'mrt-row-pin',
1286
- size: 60,
1287
- tableOptions,
1288
- }));
1289
- };
1290
-
1291
- const MRT_SelectCheckbox = (_a) => {
1292
- var _b;
1293
- var { row, staticRowIndex, table } = _a, rest = __rest(_a, ["row", "staticRowIndex", "table"]);
1294
- const { getState, options: { enableMultiRowSelection, localization, muiSelectAllCheckboxProps, muiSelectCheckboxProps, selectAllMode, }, } = table;
1295
- const { density, isLoading } = getState();
1296
- const selectAll = !row;
1297
- const allRowsSelected = selectAll
1298
- ? selectAllMode === 'page'
1299
- ? table.getIsAllPageRowsSelected()
1300
- : table.getIsAllRowsSelected()
1301
- : undefined;
1302
- const isChecked = selectAll
1303
- ? allRowsSelected
1304
- : getIsRowSelected({ row, table });
1305
- const checkboxProps = Object.assign(Object.assign({}, (selectAll
1306
- ? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
1307
- : parseFromValuesOrFunc(muiSelectCheckboxProps, {
1308
- row,
1309
- staticRowIndex,
1310
- table,
1311
- }))), rest);
1312
- const onSelectionChange = row
1313
- ? getMRT_RowSelectionHandler({
1314
- row,
1315
- staticRowIndex,
1316
- table,
1317
- })
1318
- : undefined;
1319
- const onSelectAllChange = getMRT_SelectAllHandler({ table });
1320
- const commonProps = Object.assign(Object.assign({ 'aria-label': selectAll
1321
- ? localization.toggleSelectAll
1322
- : localization.toggleSelectRow, checked: isChecked, disabled: isLoading || (row && !row.getCanSelect()) || (row === null || row === void 0 ? void 0 : row.id) === 'mrt-row-create', inputProps: {
1323
- 'aria-label': selectAll
1324
- ? localization.toggleSelectAll
1325
- : localization.toggleSelectRow,
1326
- }, onChange: (event) => {
1327
- event.stopPropagation();
1328
- selectAll ? onSelectAllChange(event) : onSelectionChange(event);
1329
- }, size: (density === 'compact' ? 'small' : 'medium') }, checkboxProps), { onClick: (e) => {
1330
- var _a;
1331
- e.stopPropagation();
1332
- (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onClick) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e);
1333
- }, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.5rem', m: density !== 'compact' ? '-0.4rem' : undefined, width: density === 'compact' ? '1.75rem' : '2.5rem', zIndex: 0 }, parseFromValuesOrFunc(checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx, theme))), title: undefined });
1334
- return (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, getCommonTooltipProps(), { title: (_b = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _b !== void 0 ? _b : (selectAll
1335
- ? localization.toggleSelectAll
1336
- : localization.toggleSelectRow), children: enableMultiRowSelection === false ? (jsxRuntime.jsx(Radio__default["default"], Object.assign({}, commonProps))) : (jsxRuntime.jsx(Checkbox__default["default"], Object.assign({ indeterminate: !isChecked && selectAll
1337
- ? table.getIsSomeRowsSelected()
1338
- : (row === null || row === void 0 ? void 0 : row.getIsSomeSelected()) && row.getCanSelectSubRows() }, commonProps))) })));
1339
- };
1340
-
1341
- const getMRT_RowSelectColumnDef = (tableOptions) => {
1342
- const { enableMultiRowSelection, enableSelectAll } = tableOptions;
1343
- return Object.assign({ Cell: ({ row, staticRowIndex, table }) => (jsxRuntime.jsx(MRT_SelectCheckbox, { row: row, staticRowIndex: staticRowIndex, table: table })), Header: enableSelectAll && enableMultiRowSelection
1344
- ? ({ table }) => jsxRuntime.jsx(MRT_SelectCheckbox, { table: table })
1345
- : undefined, grow: false }, defaultDisplayColumnProps({
1346
- header: 'select',
1347
- id: 'mrt-row-select',
1348
- size: enableSelectAll ? 60 : 70,
1349
- tableOptions,
1350
- }));
1351
- };
1352
-
1353
- const MRT_Default_Icons = {
1354
- ArrowDownwardIcon: ArrowDownwardIcon__default["default"],
1355
- ArrowRightIcon: ArrowRightIcon__default["default"],
1356
- CancelIcon: CancelIcon__default["default"],
1357
- ChevronLeftIcon: ChevronLeftIcon__default["default"],
1358
- ChevronRightIcon: ChevronRightIcon__default["default"],
1359
- ClearAllIcon: ClearAllIcon__default["default"],
1360
- CloseIcon: CloseIcon__default["default"],
1361
- ContentCopy: ContentCopy__default["default"],
1362
- DensityLargeIcon: DensityLargeIcon__default["default"],
1363
- DensityMediumIcon: DensityMediumIcon__default["default"],
1364
- DensitySmallIcon: DensitySmallIcon__default["default"],
1365
- DragHandleIcon: DragHandleIcon__default["default"],
1366
- DynamicFeedIcon: DynamicFeedIcon__default["default"],
1367
- EditIcon: EditIcon__default["default"],
1368
- ExpandMoreIcon: ExpandMoreIcon__default["default"],
1369
- FilterAltIcon: FilterAltIcon__default["default"],
1370
- FilterListIcon: FilterListIcon__default["default"],
1371
- FilterListOffIcon: FilterListOffIcon__default["default"],
1372
- FirstPageIcon: FirstPageIcon__default["default"],
1373
- FullscreenExitIcon: FullscreenExitIcon__default["default"],
1374
- FullscreenIcon: FullscreenIcon__default["default"],
1375
- KeyboardDoubleArrowDownIcon: KeyboardDoubleArrowDownIcon__default["default"],
1376
- LastPageIcon: LastPageIcon__default["default"],
1377
- MoreHorizIcon: MoreHorizIcon__default["default"],
1378
- MoreVertIcon: MoreVertIcon__default["default"],
1379
- PushPinIcon: PushPinIcon__default["default"],
1380
- RestartAltIcon: RestartAltIcon__default["default"],
1381
- SaveIcon: SaveIcon__default["default"],
1382
- SearchIcon: SearchIcon__default["default"],
1383
- SearchOffIcon: SearchOffIcon__default["default"],
1384
- SortIcon: SortIcon__default["default"],
1385
- SyncAltIcon: SyncAltIcon__default["default"],
1386
- ViewColumnIcon: ViewColumnIcon__default["default"],
1387
- VisibilityOffIcon: VisibilityOffIcon__default["default"],
1388
- };
1389
-
1390
- const MRT_Localization_EN = {
1391
- actions: 'Actions',
1392
- and: 'and',
1393
- cancel: 'Cancel',
1394
- changeFilterMode: 'Change filter mode',
1395
- changeSearchMode: 'Change search mode',
1396
- clearFilter: 'Clear filter',
1397
- clearSearch: 'Clear search',
1398
- clearSelection: 'Clear selection',
1399
- clearSort: 'Clear sort',
1400
- clickToCopy: 'Click to copy',
1401
- copy: 'Copy',
1402
- collapse: 'Collapse',
1403
- collapseAll: 'Collapse all',
1404
- columnActions: 'Column Actions',
1405
- copiedToClipboard: 'Copied to clipboard',
1406
- dropToGroupBy: 'Drop to group by {column}',
1407
- edit: 'Edit',
1408
- expand: 'Expand',
1409
- expandAll: 'Expand all',
1410
- filterArrIncludes: 'Includes',
1411
- filterArrIncludesAll: 'Includes all',
1412
- filterArrIncludesSome: 'Includes',
1413
- filterBetween: 'Between',
1414
- filterBetweenInclusive: 'Between Inclusive',
1415
- filterByColumn: 'Filter by {column}',
1416
- filterContains: 'Contains',
1417
- filterEmpty: 'Empty',
1418
- filterEndsWith: 'Ends With',
1419
- filterEquals: 'Equals',
1420
- filterEqualsString: 'Equals',
1421
- filterFuzzy: 'Fuzzy',
1422
- filterGreaterThan: 'Greater Than',
1423
- filterGreaterThanOrEqualTo: 'Greater Than Or Equal To',
1424
- filterInNumberRange: 'Between',
1425
- filterIncludesString: 'Contains',
1426
- filterIncludesStringSensitive: 'Contains',
1427
- filterLessThan: 'Less Than',
1428
- filterLessThanOrEqualTo: 'Less Than Or Equal To',
1429
- filterMode: 'Filter Mode: {filterType}',
1430
- filterNotEmpty: 'Not Empty',
1431
- filterNotEquals: 'Not Equals',
1432
- filterStartsWith: 'Starts With',
1433
- filterWeakEquals: 'Equals',
1434
- filteringByColumn: 'Filtering by {column} - {filterType} {filterValue}',
1435
- goToFirstPage: 'Go to first page',
1436
- goToLastPage: 'Go to last page',
1437
- goToNextPage: 'Go to next page',
1438
- goToPreviousPage: 'Go to previous page',
1439
- grab: 'Grab',
1440
- groupByColumn: 'Group by {column}',
1441
- groupedBy: 'Grouped by ',
1442
- hideAll: 'Hide all',
1443
- hideColumn: 'Hide {column} column',
1444
- max: 'Max',
1445
- min: 'Min',
1446
- move: 'Move',
1447
- noRecordsToDisplay: 'No records to display',
1448
- noResultsFound: 'No results found',
1449
- of: 'of',
1450
- or: 'or',
1451
- pin: 'Pin',
1452
- pinToLeft: 'Pin to left',
1453
- pinToRight: 'Pin to right',
1454
- resetColumnSize: 'Reset column size',
1455
- resetOrder: 'Reset order',
1456
- rowActions: 'Row Actions',
1457
- rowNumber: '#',
1458
- rowNumbers: 'Row Numbers',
1459
- rowsPerPage: 'Rows per page',
1460
- save: 'Save',
1461
- search: 'Search',
1462
- selectedCountOfRowCountRowsSelected: '{selectedCount} of {rowCount} row(s) selected',
1463
- select: 'Select',
1464
- showAll: 'Show all',
1465
- showAllColumns: 'Show all columns',
1466
- showHideColumns: 'Show/Hide columns',
1467
- showHideFilters: 'Show/Hide filters',
1468
- showHideSearch: 'Show/Hide search',
1469
- sortByColumnAsc: 'Sort by {column} ascending',
1470
- sortByColumnDesc: 'Sort by {column} descending',
1471
- sortedByColumnAsc: 'Sorted by {column} ascending',
1472
- sortedByColumnDesc: 'Sorted by {column} descending',
1473
- thenBy: ', then by ',
1474
- toggleDensity: 'Toggle density',
1475
- toggleFullScreen: 'Toggle full screen',
1476
- toggleSelectAll: 'Toggle select all',
1477
- toggleSelectRow: 'Toggle select row',
1478
- toggleVisibility: 'Toggle visibility',
1479
- ungroupByColumn: 'Ungroup by {column}',
1480
- unpin: 'Unpin',
1481
- unpinAll: 'Unpin all',
1482
- };
1483
-
1484
- const MRT_DefaultColumn = {
1485
- filterVariant: 'text',
1486
- maxSize: 1000,
1487
- minSize: 40,
1488
- size: 180,
1489
- };
1490
- const MRT_DefaultDisplayColumn = {
1491
- columnDefType: 'display',
1492
- enableClickToCopy: false,
1493
- enableColumnActions: false,
1494
- enableColumnDragging: false,
1495
- enableColumnFilter: false,
1496
- enableColumnOrdering: false,
1497
- enableEditing: false,
1498
- enableGlobalFilter: false,
1499
- enableGrouping: false,
1500
- enableHiding: false,
1501
- enableResizing: false,
1502
- enableSorting: false,
1503
- };
1504
- const useMRT_TableOptions = (_a) => {
1505
- var _b;
1506
- var { aggregationFns, autoResetExpanded = false, columnFilterDisplayMode = 'subheader', columnResizeDirection, columnResizeMode = 'onChange', createDisplayMode = 'modal', defaultColumn, defaultDisplayColumn, editDisplayMode = 'modal', enableBatchRowSelection = true, enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnPinning = false, enableColumnResizing = false, enableColumnVirtualization, enableDensityToggle = true, enableExpandAll = true, enableExpanding, enableFacetedValues = false, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableKeyboardShortcuts = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enableRowPinning = false, enableRowSelection = false, enableRowVirtualization, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, id = react.useId(), layoutMode, localization, manualFiltering, manualGrouping, manualPagination, manualSorting, mrtTheme, paginationDisplayMode = 'default', positionActionsColumn = 'first', positionCreatingRow = 'top', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberDisplayMode = 'static', rowPinningDisplayMode = 'sticky', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnFilterDisplayMode", "columnResizeDirection", "columnResizeMode", "createDisplayMode", "defaultColumn", "defaultDisplayColumn", "editDisplayMode", "enableBatchRowSelection", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnPinning", "enableColumnResizing", "enableColumnVirtualization", "enableDensityToggle", "enableExpandAll", "enableExpanding", "enableFacetedValues", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableKeyboardShortcuts", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enableRowPinning", "enableRowSelection", "enableRowVirtualization", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "id", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "mrtTheme", "paginationDisplayMode", "positionActionsColumn", "positionCreatingRow", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberDisplayMode", "rowPinningDisplayMode", "selectAllMode", "sortingFns"]);
1507
- const theme = styles.useTheme();
1508
- icons = react.useMemo(() => (Object.assign(Object.assign({}, MRT_Default_Icons), icons)), [icons]);
1509
- localization = react.useMemo(() => (Object.assign(Object.assign({}, MRT_Localization_EN), localization)), [localization]);
1510
- mrtTheme = react.useMemo(() => getMRTTheme(mrtTheme, theme), [mrtTheme, theme]);
1511
- aggregationFns = react.useMemo(() => (Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns)), []);
1512
- filterFns = react.useMemo(() => (Object.assign(Object.assign({}, MRT_FilterFns), filterFns)), []);
1513
- sortingFns = react.useMemo(() => (Object.assign(Object.assign({}, MRT_SortingFns), sortingFns)), []);
1514
- defaultColumn = react.useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultColumn), defaultColumn)), [defaultColumn]);
1515
- defaultDisplayColumn = react.useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultDisplayColumn), defaultDisplayColumn)), [defaultDisplayColumn]);
1516
- //cannot be changed after initialization
1517
- [enableColumnVirtualization, enableRowVirtualization] = react.useMemo(() => [enableColumnVirtualization, enableRowVirtualization], []);
1518
- if (!columnResizeDirection) {
1519
- columnResizeDirection = theme.direction || 'ltr';
1520
- }
1521
- layoutMode =
1522
- layoutMode || (enableColumnResizing ? 'grid-no-grow' : 'semantic');
1523
- if (layoutMode === 'semantic' &&
1524
- (enableRowVirtualization || enableColumnVirtualization)) {
1525
- layoutMode = 'grid';
1526
- }
1527
- if (enableRowVirtualization) {
1528
- enableStickyHeader = true;
1529
- }
1530
- if (enablePagination === false && manualPagination === undefined) {
1531
- manualPagination = true;
1532
- }
1533
- if (!((_b = rest.data) === null || _b === void 0 ? void 0 : _b.length)) {
1534
- manualFiltering = true;
1535
- manualGrouping = true;
1536
- manualPagination = true;
1537
- manualSorting = true;
1538
- }
1539
- return Object.assign({ aggregationFns,
1540
- autoResetExpanded,
1541
- columnFilterDisplayMode,
1542
- columnResizeDirection,
1543
- columnResizeMode,
1544
- createDisplayMode,
1545
- defaultColumn,
1546
- defaultDisplayColumn,
1547
- editDisplayMode,
1548
- enableBatchRowSelection,
1549
- enableBottomToolbar,
1550
- enableColumnActions,
1551
- enableColumnFilters,
1552
- enableColumnOrdering,
1553
- enableColumnPinning,
1554
- enableColumnResizing,
1555
- enableColumnVirtualization,
1556
- enableDensityToggle,
1557
- enableExpandAll,
1558
- enableExpanding,
1559
- enableFacetedValues,
1560
- enableFilterMatchHighlighting,
1561
- enableFilters,
1562
- enableFullScreenToggle,
1563
- enableGlobalFilter,
1564
- enableGlobalFilterRankedResults,
1565
- enableGrouping,
1566
- enableHiding,
1567
- enableKeyboardShortcuts,
1568
- enableMultiRowSelection,
1569
- enableMultiSort,
1570
- enablePagination,
1571
- enableRowPinning,
1572
- enableRowSelection,
1573
- enableRowVirtualization,
1574
- enableSelectAll,
1575
- enableSorting,
1576
- enableStickyHeader,
1577
- enableTableFooter,
1578
- enableTableHead,
1579
- enableToolbarInternalActions,
1580
- enableTopToolbar,
1581
- filterFns, getCoreRowModel: reactTable.getCoreRowModel(), getExpandedRowModel: enableExpanding || enableGrouping ? reactTable.getExpandedRowModel() : undefined, getFacetedMinMaxValues: enableFacetedValues
1582
- ? reactTable.getFacetedMinMaxValues()
1583
- : undefined, getFacetedRowModel: enableFacetedValues ? reactTable.getFacetedRowModel() : undefined, getFacetedUniqueValues: enableFacetedValues
1584
- ? reactTable.getFacetedUniqueValues()
1585
- : undefined, getFilteredRowModel: (enableColumnFilters || enableGlobalFilter || enableFilters) &&
1586
- !manualFiltering
1587
- ? reactTable.getFilteredRowModel()
1588
- : undefined, getGroupedRowModel: enableGrouping && !manualGrouping ? reactTable.getGroupedRowModel() : undefined, getPaginationRowModel: enablePagination && !manualPagination
1589
- ? reactTable.getPaginationRowModel()
1590
- : undefined, getSortedRowModel: enableSorting && !manualSorting ? reactTable.getSortedRowModel() : undefined, getSubRows: (row) => row === null || row === void 0 ? void 0 : row.subRows, icons,
1591
- id,
1592
- layoutMode,
1593
- localization,
1594
- manualFiltering,
1595
- manualGrouping,
1596
- manualPagination,
1597
- manualSorting,
1598
- mrtTheme,
1599
- paginationDisplayMode,
1600
- positionActionsColumn,
1601
- positionCreatingRow,
1602
- positionExpandColumn,
1603
- positionGlobalFilter,
1604
- positionPagination,
1605
- positionToolbarAlertBanner,
1606
- positionToolbarDropZone,
1607
- rowNumberDisplayMode,
1608
- rowPinningDisplayMode,
1609
- selectAllMode,
1610
- sortingFns }, rest);
1611
- };
1612
-
1613
- const blankColProps = {
1614
- children: null,
1615
- sx: {
1616
- minWidth: 0,
1617
- p: 0,
1618
- width: 0,
1619
- },
1620
- };
1621
- const getMRT_RowSpacerColumnDef = (tableOptions) => {
1622
- return Object.assign(Object.assign(Object.assign(Object.assign({}, defaultDisplayColumnProps({
1623
- id: 'mrt-row-spacer',
1624
- size: 0,
1625
- tableOptions,
1626
- })), { grow: true }), MRT_DefaultDisplayColumn), { muiTableBodyCellProps: blankColProps, muiTableFooterCellProps: blankColProps, muiTableHeadCellProps: blankColProps });
1627
- };
1628
-
1629
- const useMRT_Effects = (table) => {
1630
- const { getIsSomeRowsPinned, getPrePaginationRowModel, getState, options: { enablePagination, enableRowPinning, rowCount }, } = table;
1631
- const { columnOrder, density, globalFilter, isFullScreen, isLoading, pagination, showSkeletons, sorting, } = getState();
1632
- const totalColumnCount = table.options.columns.length;
1633
- const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length;
1634
- const rerender = react.useReducer(() => ({}), {})[1];
1635
- const initialBodyHeight = react.useRef(null);
1636
- const previousTop = react.useRef(null);
1637
- react.useEffect(() => {
1638
- if (typeof window !== 'undefined') {
1639
- initialBodyHeight.current = document.body.style.height;
1640
- }
1641
- }, []);
1642
- //hide scrollbars when table is in full screen mode, preserve body scroll position after full screen exit
1643
- react.useEffect(() => {
1644
- if (typeof window !== 'undefined') {
1645
- if (isFullScreen) {
1646
- previousTop.current = document.body.getBoundingClientRect().top; //save scroll position
1647
- document.body.style.height = '100dvh'; //hide page scrollbars when table is in full screen mode
1648
- }
1649
- else {
1650
- document.body.style.height = initialBodyHeight.current;
1651
- if (!previousTop.current)
1652
- return;
1653
- //restore scroll position
1654
- window.scrollTo({
1655
- behavior: 'instant',
1656
- top: -1 * previousTop.current,
1657
- });
1658
- }
1659
- }
1660
- }, [isFullScreen]);
1661
- //recalculate column order when columns change or features are toggled on/off
1662
- react.useEffect(() => {
1663
- if (totalColumnCount !== columnOrder.length) {
1664
- table.setColumnOrder(getDefaultColumnOrderIds(table.options));
1665
- }
1666
- }, [totalColumnCount]);
1667
- //if page index is out of bounds, set it to the last page
1668
- react.useEffect(() => {
1669
- if (!enablePagination || isLoading || showSkeletons)
1670
- return;
1671
- const { pageIndex, pageSize } = pagination;
1672
- const firstVisibleRowIndex = pageIndex * pageSize;
1673
- if (firstVisibleRowIndex >= totalRowCount) {
1674
- table.setPageIndex(Math.ceil(totalRowCount / pageSize) - 1);
1675
- }
1676
- }, [totalRowCount]);
1677
- //turn off sort when global filter is looking for ranked results
1678
- const appliedSort = react.useRef(sorting);
1679
- react.useEffect(() => {
1680
- if (sorting.length) {
1681
- appliedSort.current = sorting;
1682
- }
1683
- }, [sorting]);
1684
- react.useEffect(() => {
1685
- if (!getCanRankRows(table))
1686
- return;
1687
- if (globalFilter) {
1688
- table.setSorting([]);
1689
- }
1690
- else {
1691
- table.setSorting(() => appliedSort.current || []);
1692
- }
1693
- }, [globalFilter]);
1694
- //fix pinned row top style when density changes
1695
- react.useEffect(() => {
1696
- if (enableRowPinning && getIsSomeRowsPinned()) {
1697
- setTimeout(() => {
1698
- rerender();
1699
- }, 150);
1700
- }
1701
- }, [density]);
1702
- };
1703
-
1704
- /**
1705
- * The MRT hook that wraps the TanStack useReactTable hook and adds additional functionality
1706
- * @param definedTableOptions - table options with proper defaults set
1707
- * @returns the MRT table instance
1708
- */
1709
- const useMRT_TableInstance = (definedTableOptions) => {
1710
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10;
1711
- const lastSelectedRowId = react.useRef(null);
1712
- const actionCellRef = react.useRef(null);
1713
- const bottomToolbarRef = react.useRef(null);
1714
- const editInputRefs = react.useRef({});
1715
- const filterInputRefs = react.useRef({});
1716
- const searchInputRef = react.useRef(null);
1717
- const tableContainerRef = react.useRef(null);
1718
- const tableHeadCellRefs = react.useRef({});
1719
- const tablePaperRef = react.useRef(null);
1720
- const topToolbarRef = react.useRef(null);
1721
- const tableHeadRef = react.useRef(null);
1722
- const tableFooterRef = react.useRef(null);
1723
- //transform initial state with proper column order
1724
- const initialState = react.useMemo(() => {
1725
- var _a, _b, _c;
1726
- const initState = (_a = definedTableOptions.initialState) !== null && _a !== void 0 ? _a : {};
1727
- initState.columnOrder =
1728
- (_b = initState.columnOrder) !== null && _b !== void 0 ? _b : getDefaultColumnOrderIds(Object.assign(Object.assign({}, definedTableOptions), { state: Object.assign(Object.assign({}, definedTableOptions.initialState), definedTableOptions.state) }));
1729
- initState.globalFilterFn = (_c = definedTableOptions.globalFilterFn) !== null && _c !== void 0 ? _c : 'fuzzy';
1730
- return initState;
1731
- }, []);
1732
- definedTableOptions.initialState = initialState;
1733
- const [actionCell, setActionCell] = react.useState((_a = initialState.actionCell) !== null && _a !== void 0 ? _a : null);
1734
- const [creatingRow, _setCreatingRow] = react.useState((_b = initialState.creatingRow) !== null && _b !== void 0 ? _b : null);
1735
- const [columnFilterFns, setColumnFilterFns] = react.useState(() => Object.assign({}, ...getAllLeafColumnDefs(definedTableOptions.columns).map((col) => {
1736
- var _a, _b, _c, _d;
1737
- return ({
1738
- [getColumnId(col)]: col.filterFn instanceof Function
1739
- ? ((_a = col.filterFn.name) !== null && _a !== void 0 ? _a : 'custom')
1740
- : ((_d = (_b = col.filterFn) !== null && _b !== void 0 ? _b : (_c = initialState === null || initialState === void 0 ? void 0 : initialState.columnFilterFns) === null || _c === void 0 ? void 0 : _c[getColumnId(col)]) !== null && _d !== void 0 ? _d : getDefaultColumnFilterFn(col)),
1741
- });
1742
- })));
1743
- const [columnOrder, onColumnOrderChange] = react.useState((_c = initialState.columnOrder) !== null && _c !== void 0 ? _c : []);
1744
- const [columnSizingInfo, onColumnSizingInfoChange] = react.useState((_d = initialState.columnSizingInfo) !== null && _d !== void 0 ? _d : {});
1745
- const [density, setDensity] = react.useState((_e = initialState === null || initialState === void 0 ? void 0 : initialState.density) !== null && _e !== void 0 ? _e : 'comfortable');
1746
- const [draggingColumn, setDraggingColumn] = react.useState((_f = initialState.draggingColumn) !== null && _f !== void 0 ? _f : null);
1747
- const [draggingRow, setDraggingRow] = react.useState((_g = initialState.draggingRow) !== null && _g !== void 0 ? _g : null);
1748
- const [editingCell, setEditingCell] = react.useState((_h = initialState.editingCell) !== null && _h !== void 0 ? _h : null);
1749
- const [editingRow, setEditingRow] = react.useState((_j = initialState.editingRow) !== null && _j !== void 0 ? _j : null);
1750
- const [globalFilterFn, setGlobalFilterFn] = react.useState((_k = initialState.globalFilterFn) !== null && _k !== void 0 ? _k : 'fuzzy');
1751
- const [grouping, onGroupingChange] = react.useState((_l = initialState.grouping) !== null && _l !== void 0 ? _l : []);
1752
- const [hoveredColumn, setHoveredColumn] = react.useState((_m = initialState.hoveredColumn) !== null && _m !== void 0 ? _m : null);
1753
- const [hoveredRow, setHoveredRow] = react.useState((_o = initialState.hoveredRow) !== null && _o !== void 0 ? _o : null);
1754
- const [isFullScreen, setIsFullScreen] = react.useState((_p = initialState === null || initialState === void 0 ? void 0 : initialState.isFullScreen) !== null && _p !== void 0 ? _p : false);
1755
- const [pagination, onPaginationChange] = react.useState((_q = initialState === null || initialState === void 0 ? void 0 : initialState.pagination) !== null && _q !== void 0 ? _q : { pageIndex: 0, pageSize: 10 });
1756
- const [showAlertBanner, setShowAlertBanner] = react.useState((_r = initialState === null || initialState === void 0 ? void 0 : initialState.showAlertBanner) !== null && _r !== void 0 ? _r : false);
1757
- const [showColumnFilters, setShowColumnFilters] = react.useState((_s = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _s !== void 0 ? _s : false);
1758
- const [showGlobalFilter, setShowGlobalFilter] = react.useState((_t = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _t !== void 0 ? _t : false);
1759
- const [showToolbarDropZone, setShowToolbarDropZone] = react.useState((_u = initialState === null || initialState === void 0 ? void 0 : initialState.showToolbarDropZone) !== null && _u !== void 0 ? _u : false);
1760
- definedTableOptions.state = Object.assign({ actionCell,
1761
- columnFilterFns,
1762
- columnOrder,
1763
- columnSizingInfo,
1764
- creatingRow,
1765
- density,
1766
- draggingColumn,
1767
- draggingRow,
1768
- editingCell,
1769
- editingRow,
1770
- globalFilterFn,
1771
- grouping,
1772
- hoveredColumn,
1773
- hoveredRow,
1774
- isFullScreen,
1775
- pagination,
1776
- showAlertBanner,
1777
- showColumnFilters,
1778
- showGlobalFilter,
1779
- showToolbarDropZone }, definedTableOptions.state);
1780
- //The table options now include all state needed to help determine column visibility and order logic
1781
- const statefulTableOptions = definedTableOptions;
1782
- //don't recompute columnDefs while resizing column or dragging column/row
1783
- const columnDefsRef = react.useRef([]);
1784
- statefulTableOptions.columns =
1785
- statefulTableOptions.state.columnSizingInfo.isResizingColumn ||
1786
- statefulTableOptions.state.draggingColumn ||
1787
- statefulTableOptions.state.draggingRow
1788
- ? columnDefsRef.current
1789
- : prepareColumns({
1790
- columnDefs: [
1791
- ...[
1792
- showRowPinningColumn(statefulTableOptions) &&
1793
- getMRT_RowPinningColumnDef(statefulTableOptions),
1794
- showRowDragColumn(statefulTableOptions) &&
1795
- getMRT_RowDragColumnDef(statefulTableOptions),
1796
- showRowActionsColumn(statefulTableOptions) &&
1797
- getMRT_RowActionsColumnDef(statefulTableOptions),
1798
- showRowExpandColumn(statefulTableOptions) &&
1799
- getMRT_RowExpandColumnDef(statefulTableOptions),
1800
- showRowSelectionColumn(statefulTableOptions) &&
1801
- getMRT_RowSelectColumnDef(statefulTableOptions),
1802
- showRowNumbersColumn(statefulTableOptions) &&
1803
- getMRT_RowNumbersColumnDef(statefulTableOptions),
1804
- ].filter(Boolean),
1805
- ...statefulTableOptions.columns,
1806
- ...[
1807
- showRowSpacerColumn(statefulTableOptions) &&
1808
- getMRT_RowSpacerColumnDef(statefulTableOptions),
1809
- ].filter(Boolean),
1810
- ],
1811
- tableOptions: statefulTableOptions,
1812
- });
1813
- columnDefsRef.current = statefulTableOptions.columns;
1814
- //if loading, generate blank rows to show skeleton loaders
1815
- statefulTableOptions.data = react.useMemo(() => (statefulTableOptions.state.isLoading ||
1816
- statefulTableOptions.state.showSkeletons) &&
1817
- !statefulTableOptions.data.length
1818
- ? [
1819
- ...Array(Math.min(statefulTableOptions.state.pagination.pageSize, 20)).fill(null),
1820
- ].map(() => Object.assign({}, ...getAllLeafColumnDefs(statefulTableOptions.columns).map((col) => ({
1821
- [getColumnId(col)]: null,
1822
- }))))
1823
- : statefulTableOptions.data, [
1824
- statefulTableOptions.data,
1825
- statefulTableOptions.state.isLoading,
1826
- statefulTableOptions.state.showSkeletons,
1827
- ]);
1828
- //@ts-ignore
1829
- const table = reactTable.useReactTable(Object.assign(Object.assign({ onColumnOrderChange,
1830
- onColumnSizingInfoChange,
1831
- onGroupingChange,
1832
- onPaginationChange }, statefulTableOptions), { globalFilterFn: (_v = statefulTableOptions.filterFns) === null || _v === void 0 ? void 0 : _v[globalFilterFn !== null && globalFilterFn !== void 0 ? globalFilterFn : 'fuzzy'] }));
1833
- table.refs = {
1834
- actionCellRef,
1835
- bottomToolbarRef,
1836
- editInputRefs,
1837
- filterInputRefs,
1838
- lastSelectedRowId,
1839
- searchInputRef,
1840
- tableContainerRef,
1841
- tableFooterRef,
1842
- tableHeadCellRefs,
1843
- tableHeadRef,
1844
- tablePaperRef,
1845
- topToolbarRef,
1846
- };
1847
- table.setActionCell =
1848
- (_w = statefulTableOptions.onActionCellChange) !== null && _w !== void 0 ? _w : setActionCell;
1849
- table.setCreatingRow = (row) => {
1850
- var _a, _b;
1851
- let _row = row;
1852
- if (row === true) {
1853
- _row = createRow(table);
1854
- }
1855
- (_b = (_a = statefulTableOptions === null || statefulTableOptions === void 0 ? void 0 : statefulTableOptions.onCreatingRowChange) === null || _a === void 0 ? void 0 : _a.call(statefulTableOptions, _row)) !== null && _b !== void 0 ? _b : _setCreatingRow(_row);
1856
- };
1857
- table.setColumnFilterFns =
1858
- (_x = statefulTableOptions.onColumnFilterFnsChange) !== null && _x !== void 0 ? _x : setColumnFilterFns;
1859
- table.setDensity = (_y = statefulTableOptions.onDensityChange) !== null && _y !== void 0 ? _y : setDensity;
1860
- table.setDraggingColumn =
1861
- (_z = statefulTableOptions.onDraggingColumnChange) !== null && _z !== void 0 ? _z : setDraggingColumn;
1862
- table.setDraggingRow =
1863
- (_0 = statefulTableOptions.onDraggingRowChange) !== null && _0 !== void 0 ? _0 : setDraggingRow;
1864
- table.setEditingCell =
1865
- (_1 = statefulTableOptions.onEditingCellChange) !== null && _1 !== void 0 ? _1 : setEditingCell;
1866
- table.setEditingRow =
1867
- (_2 = statefulTableOptions.onEditingRowChange) !== null && _2 !== void 0 ? _2 : setEditingRow;
1868
- table.setGlobalFilterFn =
1869
- (_3 = statefulTableOptions.onGlobalFilterFnChange) !== null && _3 !== void 0 ? _3 : setGlobalFilterFn;
1870
- table.setHoveredColumn =
1871
- (_4 = statefulTableOptions.onHoveredColumnChange) !== null && _4 !== void 0 ? _4 : setHoveredColumn;
1872
- table.setHoveredRow =
1873
- (_5 = statefulTableOptions.onHoveredRowChange) !== null && _5 !== void 0 ? _5 : setHoveredRow;
1874
- table.setIsFullScreen =
1875
- (_6 = statefulTableOptions.onIsFullScreenChange) !== null && _6 !== void 0 ? _6 : setIsFullScreen;
1876
- table.setShowAlertBanner =
1877
- (_7 = statefulTableOptions.onShowAlertBannerChange) !== null && _7 !== void 0 ? _7 : setShowAlertBanner;
1878
- table.setShowColumnFilters =
1879
- (_8 = statefulTableOptions.onShowColumnFiltersChange) !== null && _8 !== void 0 ? _8 : setShowColumnFilters;
1880
- table.setShowGlobalFilter =
1881
- (_9 = statefulTableOptions.onShowGlobalFilterChange) !== null && _9 !== void 0 ? _9 : setShowGlobalFilter;
1882
- table.setShowToolbarDropZone =
1883
- (_10 = statefulTableOptions.onShowToolbarDropZoneChange) !== null && _10 !== void 0 ? _10 : setShowToolbarDropZone;
1884
- useMRT_Effects(table);
1885
- return table;
1886
- };
1887
-
1888
- const useMaterialReactTable = (tableOptions) => useMRT_TableInstance(useMRT_TableOptions(tableOptions));
1889
-
1890
- const extraIndexRangeExtractor = (range, draggingIndex) => {
1891
- const newIndexes = reactVirtual.defaultRangeExtractor(range);
1892
- if (draggingIndex === undefined)
1893
- return newIndexes;
1894
- if (draggingIndex >= 0 &&
1895
- draggingIndex < Math.max(range.startIndex - range.overscan, 0)) {
1896
- newIndexes.unshift(draggingIndex);
1897
- }
1898
- if (draggingIndex >= 0 && draggingIndex > range.endIndex + range.overscan) {
1899
- newIndexes.push(draggingIndex);
1900
- }
1901
- return newIndexes;
1902
- };
1903
-
1904
- const useMRT_ColumnVirtualizer = (table) => {
1905
- var _a, _b, _c, _d;
1906
- const { getState, options: { columnVirtualizerInstanceRef, columnVirtualizerOptions, enableColumnPinning, enableColumnVirtualization, }, refs: { tableContainerRef }, } = table;
1907
- const { columnPinning, columnVisibility, draggingColumn } = getState();
1908
- if (!enableColumnVirtualization)
1909
- return undefined;
1910
- const columnVirtualizerProps = parseFromValuesOrFunc(columnVirtualizerOptions, {
1911
- table,
1912
- });
1913
- const visibleColumns = table.getVisibleLeafColumns();
1914
- const [leftPinnedIndexes, rightPinnedIndexes] = react.useMemo(() => enableColumnPinning
1915
- ? [
1916
- table.getLeftVisibleLeafColumns().map((c) => c.getPinnedIndex()),
1917
- table
1918
- .getRightVisibleLeafColumns()
1919
- .map((column) => visibleColumns.length - column.getPinnedIndex() - 1)
1920
- .sort((a, b) => a - b),
1921
- ]
1922
- : [[], []], [columnPinning, columnVisibility, enableColumnPinning]);
1923
- const numPinnedLeft = leftPinnedIndexes.length;
1924
- const numPinnedRight = rightPinnedIndexes.length;
1925
- const draggingColumnIndex = react.useMemo(() => (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id)
1926
- ? visibleColumns.findIndex((c) => c.id === (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id))
1927
- : undefined, [draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id]);
1928
- const columnVirtualizer = reactVirtual.useVirtualizer(Object.assign({ count: visibleColumns.length, estimateSize: (index) => visibleColumns[index].getSize(), getScrollElement: () => tableContainerRef.current, horizontal: true, overscan: 3, rangeExtractor: react.useCallback((range) => {
1929
- const newIndexes = extraIndexRangeExtractor(range, draggingColumnIndex);
1930
- if (!numPinnedLeft && !numPinnedRight) {
1931
- return newIndexes;
1932
- }
1933
- return [
1934
- ...new Set([
1935
- ...leftPinnedIndexes,
1936
- ...newIndexes,
1937
- ...rightPinnedIndexes,
1938
- ]),
1939
- ];
1940
- }, [leftPinnedIndexes, rightPinnedIndexes, draggingColumnIndex]) }, columnVirtualizerProps));
1941
- const virtualColumns = columnVirtualizer.getVirtualItems();
1942
- columnVirtualizer.virtualColumns = virtualColumns;
1943
- const numColumns = virtualColumns.length;
1944
- if (numColumns) {
1945
- const totalSize = columnVirtualizer.getTotalSize();
1946
- const leftNonPinnedStart = ((_a = virtualColumns[numPinnedLeft]) === null || _a === void 0 ? void 0 : _a.start) || 0;
1947
- const leftNonPinnedEnd = ((_b = virtualColumns[leftPinnedIndexes.length - 1]) === null || _b === void 0 ? void 0 : _b.end) || 0;
1948
- const rightNonPinnedStart = ((_c = virtualColumns[numColumns - numPinnedRight]) === null || _c === void 0 ? void 0 : _c.start) || 0;
1949
- const rightNonPinnedEnd = ((_d = virtualColumns[numColumns - numPinnedRight - 1]) === null || _d === void 0 ? void 0 : _d.end) || 0;
1950
- columnVirtualizer.virtualPaddingLeft =
1951
- leftNonPinnedStart - leftNonPinnedEnd;
1952
- columnVirtualizer.virtualPaddingRight =
1953
- totalSize -
1954
- rightNonPinnedEnd -
1955
- (numPinnedRight ? totalSize - rightNonPinnedStart : 0);
1956
- }
1957
- if (columnVirtualizerInstanceRef) {
1958
- //@ts-ignore
1959
- columnVirtualizerInstanceRef.current = columnVirtualizer;
1960
- }
1961
- return columnVirtualizer;
1962
- };
1963
-
1964
- const useMRT_RowVirtualizer = (table, rows) => {
1965
- var _a;
1966
- const { getRowModel, getState, options: { enableRowVirtualization, renderDetailPanel, rowVirtualizerInstanceRef, rowVirtualizerOptions, }, refs: { tableContainerRef }, } = table;
1967
- const { density, draggingRow, expanded } = getState();
1968
- if (!enableRowVirtualization)
1969
- return undefined;
1970
- const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, {
1971
- table,
1972
- });
1973
- const rowCount = (_a = rows === null || rows === void 0 ? void 0 : rows.length) !== null && _a !== void 0 ? _a : getRowModel().rows.length;
1974
- const normalRowHeight = density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73;
1975
- const rowVirtualizer = reactVirtual.useVirtualizer(Object.assign({ count: renderDetailPanel ? rowCount * 2 : rowCount, estimateSize: (index) => renderDetailPanel && index % 2 === 1
1976
- ? expanded === true
1977
- ? 100
1978
- : 0
1979
- : normalRowHeight, getScrollElement: () => tableContainerRef.current, measureElement: typeof window !== 'undefined' &&
1980
- navigator.userAgent.indexOf('Firefox') === -1
1981
- ? (element) => element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height
1982
- : undefined, overscan: 4, rangeExtractor: react.useCallback((range) => {
1983
- var _a;
1984
- return extraIndexRangeExtractor(range, (_a = draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.index) !== null && _a !== void 0 ? _a : 0);
1985
- }, [draggingRow]) }, rowVirtualizerProps));
1986
- rowVirtualizer.virtualRows = rowVirtualizer.getVirtualItems();
1987
- if (rowVirtualizerInstanceRef) {
1988
- //@ts-ignore
1989
- rowVirtualizerInstanceRef.current = rowVirtualizer;
1990
- }
1991
- return rowVirtualizer;
1992
- };
1993
-
1994
- const useMRT_Rows = (table) => {
1995
- const { getRowModel, getState, options: { data, enableGlobalFilterRankedResults, positionCreatingRow }, } = table;
1996
- const { creatingRow, expanded, globalFilter, pagination, rowPinning, sorting, } = getState();
1997
- const rows = react.useMemo(() => getMRT_Rows(table), [
1998
- creatingRow,
1999
- data,
2000
- enableGlobalFilterRankedResults,
2001
- expanded,
2002
- getRowModel().rows,
2003
- globalFilter,
2004
- pagination.pageIndex,
2005
- pagination.pageSize,
2006
- positionCreatingRow,
2007
- rowPinning,
2008
- sorting,
2009
- ]);
2010
- return rows;
2011
- };
2012
-
2013
- const allowedTypes = ['string', 'number'];
2014
- const MRT_TableBodyCellValue = ({ cell, rowRef, staticColumnIndex, staticRowIndex, table, }) => {
2015
- var _a, _b, _c;
2016
- const { getState, options: { enableFilterMatchHighlighting, mrtTheme: { matchHighlightColor }, }, } = table;
2017
- const { column, row } = cell;
2018
- const { columnDef } = column;
2019
- const { globalFilter, globalFilterFn } = getState();
2020
- const filterValue = column.getFilterValue();
2021
- let renderedCellValue = cell.getIsAggregated() && columnDef.AggregatedCell
2022
- ? columnDef.AggregatedCell({
2023
- cell,
2024
- column,
2025
- row,
2026
- table,
2027
- staticColumnIndex,
2028
- staticRowIndex,
2029
- })
2030
- : row.getIsGrouped() && !cell.getIsGrouped()
2031
- ? null
2032
- : cell.getIsGrouped() && columnDef.GroupedCell
2033
- ? columnDef.GroupedCell({
2034
- cell,
2035
- column,
2036
- row,
2037
- table,
2038
- staticColumnIndex,
2039
- staticRowIndex,
2040
- })
2041
- : undefined;
2042
- const isGroupedValue = renderedCellValue !== undefined;
2043
- if (!isGroupedValue) {
2044
- renderedCellValue = cell.renderValue();
2045
- }
2046
- if (enableFilterMatchHighlighting &&
2047
- columnDef.enableFilterMatchHighlighting !== false &&
2048
- String(renderedCellValue) &&
2049
- allowedTypes.includes(typeof renderedCellValue) &&
2050
- ((filterValue &&
2051
- allowedTypes.includes(typeof filterValue) &&
2052
- ['autocomplete', 'text'].includes(columnDef.filterVariant)) ||
2053
- (globalFilter &&
2054
- allowedTypes.includes(typeof globalFilter) &&
2055
- column.getCanGlobalFilter()))) {
2056
- const chunks = highlightWords__default["default"] === null || highlightWords__default["default"] === void 0 ? void 0 : highlightWords__default["default"]({
2057
- matchExactly: (filterValue ? columnDef._filterFn : globalFilterFn) !== 'fuzzy',
2058
- query: ((_a = filterValue !== null && filterValue !== void 0 ? filterValue : globalFilter) !== null && _a !== void 0 ? _a : '').toString(),
2059
- text: renderedCellValue === null || renderedCellValue === void 0 ? void 0 : renderedCellValue.toString(),
2060
- });
2061
- if ((chunks === null || chunks === void 0 ? void 0 : chunks.length) > 1 || ((_b = chunks === null || chunks === void 0 ? void 0 : chunks[0]) === null || _b === void 0 ? void 0 : _b.match)) {
2062
- renderedCellValue = (jsxRuntime.jsx("span", { "aria-label": renderedCellValue, role: "note", children: (_c = chunks === null || chunks === void 0 ? void 0 : chunks.map(({ key, match, text }) => (jsxRuntime.jsx(Box__default["default"], { "aria-hidden": "true", component: "span", sx: match
2063
- ? {
2064
- backgroundColor: matchHighlightColor,
2065
- borderRadius: '2px',
2066
- color: (theme) => theme.palette.mode === 'dark'
2067
- ? theme.palette.common.white
2068
- : theme.palette.common.black,
2069
- padding: '2px 1px',
2070
- }
2071
- : undefined, children: text }, key)))) !== null && _c !== void 0 ? _c : renderedCellValue }));
2072
- }
2073
- }
2074
- if (columnDef.Cell && !isGroupedValue) {
2075
- renderedCellValue = columnDef.Cell({
2076
- cell,
2077
- column,
2078
- renderedCellValue,
2079
- row,
2080
- rowRef,
2081
- staticColumnIndex,
2082
- staticRowIndex,
2083
- table,
2084
- });
2085
- }
2086
- return renderedCellValue;
2087
- };
2088
-
2089
- const MRT_CopyButton = (_a) => {
2090
- var _b;
2091
- var { cell, table } = _a, rest = __rest(_a, ["cell", "table"]);
2092
- const { options: { localization, muiCopyButtonProps }, } = table;
2093
- const { column, row } = cell;
2094
- const { columnDef } = column;
2095
- const [copied, setCopied] = react.useState(false);
2096
- const handleCopy = (event, text) => {
2097
- event.stopPropagation();
2098
- navigator.clipboard.writeText(text);
2099
- setCopied(true);
2100
- setTimeout(() => setCopied(false), 4000);
2101
- };
2102
- const buttonProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiCopyButtonProps, {
2103
- cell,
2104
- column,
2105
- row,
2106
- table,
2107
- })), parseFromValuesOrFunc(columnDef.muiCopyButtonProps, {
2108
- cell,
2109
- column,
2110
- row,
2111
- table,
2112
- })), rest);
2113
- return (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, getCommonTooltipProps('top'), { title: (_b = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.title) !== null && _b !== void 0 ? _b : (copied ? localization.copiedToClipboard : localization.clickToCopy), children: jsxRuntime.jsx(Button__default["default"], Object.assign({ onClick: (e) => handleCopy(e, cell.getValue()), size: "small", type: "button", variant: "text" }, buttonProps, { sx: (theme) => (Object.assign({ backgroundColor: 'transparent', border: 'none', color: 'inherit', cursor: 'copy', fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit', m: '-0.25rem', minWidth: 'unset', py: 0, textAlign: 'inherit', textTransform: 'inherit' }, parseFromValuesOrFunc(buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx, theme))), title: undefined })) })));
2114
- };
2115
-
2116
- const MRT_EditCellTextField = (_a) => {
2117
- var _b, _c;
2118
- var { cell, table } = _a, rest = __rest(_a, ["cell", "table"]);
2119
- const { getState, options: { createDisplayMode, editDisplayMode, muiEditTextFieldProps }, refs: { editInputRefs }, setCreatingRow, setEditingCell, setEditingRow, } = table;
2120
- const { column, row } = cell;
2121
- const { columnDef } = column;
2122
- const { creatingRow, editingRow } = getState();
2123
- const { editSelectOptions, editVariant } = columnDef;
2124
- const isCreating = (creatingRow === null || creatingRow === void 0 ? void 0 : creatingRow.id) === row.id;
2125
- const isEditing = (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id;
2126
- const [value, setValue] = react.useState(() => cell.getValue());
2127
- const [completesComposition, setCompletesComposition] = react.useState(true);
2128
- const textFieldProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiEditTextFieldProps, {
2129
- cell,
2130
- column,
2131
- row,
2132
- table,
2133
- })), parseFromValuesOrFunc(columnDef.muiEditTextFieldProps, {
2134
- cell,
2135
- column,
2136
- row,
2137
- table,
2138
- })), rest);
2139
- const selectOptions = parseFromValuesOrFunc(editSelectOptions, {
2140
- cell,
2141
- column,
2142
- row,
2143
- table,
2144
- });
2145
- const isSelectEdit = editVariant === 'select' || (textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.select);
2146
- const saveInputValueToRowCache = (newValue) => {
2147
- //@ts-ignore
2148
- row._valuesCache[column.id] = newValue;
2149
- if (isCreating) {
2150
- setCreatingRow(row);
2151
- }
2152
- else if (isEditing) {
2153
- setEditingRow(row);
2154
- }
2155
- };
2156
- const handleChange = (event) => {
2157
- var _a;
2158
- (_a = textFieldProps.onChange) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, event);
2159
- setValue(event.target.value);
2160
- if (isSelectEdit) {
2161
- saveInputValueToRowCache(event.target.value);
2162
- }
2163
- };
2164
- const handleBlur = (event) => {
2165
- var _a;
2166
- (_a = textFieldProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, event);
2167
- saveInputValueToRowCache(value);
2168
- setEditingCell(null);
2169
- };
2170
- const handleEnterKeyDown = (event) => {
2171
- var _a, _b, _c;
2172
- (_a = textFieldProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, event);
2173
- if (event.key === 'Enter' && !event.shiftKey && completesComposition) {
2174
- (_c = (_b = editInputRefs.current) === null || _b === void 0 ? void 0 : _b[column.id]) === null || _c === void 0 ? void 0 : _c.blur();
2175
- }
2176
- };
2177
- if (columnDef.Edit) {
2178
- return jsxRuntime.jsx(jsxRuntime.Fragment, { children: (_b = columnDef.Edit) === null || _b === void 0 ? void 0 : _b.call(columnDef, { cell, column, row, table }) });
2179
- }
2180
- return (jsxRuntime.jsx(TextField__default["default"], Object.assign({ disabled: parseFromValuesOrFunc(columnDef.enableEditing, row) === false, fullWidth: true, inputRef: (inputRef) => {
2181
- if (inputRef) {
2182
- editInputRefs.current[column.id] = inputRef;
2183
- if (textFieldProps.inputRef) {
2184
- textFieldProps.inputRef = inputRef;
2185
- }
2186
- }
2187
- }, label: ['custom', 'modal'].includes((isCreating ? createDisplayMode : editDisplayMode))
2188
- ? columnDef.header
2189
- : undefined, margin: "none", name: column.id, placeholder: !['custom', 'modal'].includes((isCreating ? createDisplayMode : editDisplayMode))
2190
- ? columnDef.header
2191
- : undefined, select: isSelectEdit, size: "small", value: value !== null && value !== void 0 ? value : '', variant: "standard" }, textFieldProps, { InputProps: Object.assign(Object.assign(Object.assign({}, (textFieldProps.variant !== 'outlined'
2192
- ? { disableUnderline: editDisplayMode === 'table' }
2193
- : {})), textFieldProps.InputProps), { sx: (theme) => {
2194
- var _a;
2195
- return (Object.assign({ mb: 0 }, parseFromValuesOrFunc((_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.sx, theme)));
2196
- } }), SelectProps: Object.assign({ MenuProps: { disableScrollLock: true } }, textFieldProps.SelectProps), inputProps: Object.assign({ autoComplete: 'off' }, textFieldProps.inputProps), onBlur: handleBlur, onChange: handleChange, onClick: (e) => {
2197
- var _a;
2198
- e.stopPropagation();
2199
- (_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.onClick) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, e);
2200
- }, onKeyDown: handleEnterKeyDown, onCompositionStart: () => setCompletesComposition(false), onCompositionEnd: () => setCompletesComposition(true), children: (_c = textFieldProps.children) !== null && _c !== void 0 ? _c : selectOptions === null || selectOptions === void 0 ? void 0 : selectOptions.map((option) => {
2201
- const { label, value } = getValueAndLabel(option);
2202
- return (jsxRuntime.jsx(MenuItem__default["default"], { sx: {
2203
- alignItems: 'center',
2204
- display: 'flex',
2205
- gap: '0.5rem',
2206
- m: 0,
2207
- }, value: value, children: label }, value));
2208
- }) })));
2209
- };
2210
-
2211
- const MRT_TableBodyCell = (_a) => {
2212
- var _b, _c, _d, _e, _f;
2213
- var { cell, numRows, rowRef, staticColumnIndex, staticRowIndex, table } = _a, rest = __rest(_a, ["cell", "numRows", "rowRef", "staticColumnIndex", "staticRowIndex", "table"]);
2214
- const theme = styles.useTheme();
2215
- const { getState, options: { columnResizeDirection, columnResizeMode, createDisplayMode, editDisplayMode, enableCellActions, enableClickToCopy, enableColumnOrdering, enableColumnPinning, enableGrouping, enableKeyboardShortcuts, layoutMode, mrtTheme: { draggingBorderColor }, muiSkeletonProps, muiTableBodyCellProps, }, setHoveredColumn, } = table;
2216
- const { actionCell, columnSizingInfo, creatingRow, density, draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, isLoading, showSkeletons, } = getState();
2217
- const { column, row } = cell;
2218
- const { columnDef } = column;
2219
- const { columnDefType } = columnDef;
2220
- const args = { cell, column, row, table };
2221
- const tableCellProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableBodyCellProps, args)), parseFromValuesOrFunc(columnDef.muiTableBodyCellProps, args)), rest);
2222
- const skeletonProps = parseFromValuesOrFunc(muiSkeletonProps, {
2223
- cell,
2224
- column,
2225
- row,
2226
- table,
2227
- });
2228
- const [skeletonWidth, setSkeletonWidth] = react.useState(100);
2229
- react.useEffect(() => {
2230
- if ((!isLoading && !showSkeletons) || skeletonWidth !== 100)
2231
- return;
2232
- const size = column.getSize();
2233
- setSkeletonWidth(columnDefType === 'display'
2234
- ? size / 2
2235
- : Math.round(Math.random() * (size - size / 3) + size / 3));
2236
- }, [isLoading, showSkeletons]);
2237
- const draggingBorders = react.useMemo(() => {
2238
- const isDraggingColumn = (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id;
2239
- const isHoveredColumn = (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id;
2240
- const isDraggingRow = (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id;
2241
- const isHoveredRow = (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id;
2242
- const isFirstColumn = column.getIsFirstColumn();
2243
- const isLastColumn = column.getIsLastColumn();
2244
- const isLastRow = numRows && staticRowIndex === numRows - 1;
2245
- const isResizingColumn = columnSizingInfo.isResizingColumn === column.id;
2246
- const showResizeBorder = isResizingColumn && columnResizeMode === 'onChange';
2247
- const borderStyle = showResizeBorder
2248
- ? `2px solid ${draggingBorderColor} !important`
2249
- : isDraggingColumn || isDraggingRow
2250
- ? `1px dashed ${theme.palette.grey[500]} !important`
2251
- : isHoveredColumn || isHoveredRow || isResizingColumn
2252
- ? `2px dashed ${draggingBorderColor} !important`
2253
- : undefined;
2254
- if (showResizeBorder) {
2255
- return columnResizeDirection === 'ltr'
2256
- ? { borderRight: borderStyle }
2257
- : { borderLeft: borderStyle };
2258
- }
2259
- return borderStyle
2260
- ? {
2261
- borderBottom: isDraggingRow || isHoveredRow || (isLastRow && !isResizingColumn)
2262
- ? borderStyle
2263
- : undefined,
2264
- borderLeft: isDraggingColumn ||
2265
- isHoveredColumn ||
2266
- ((isDraggingRow || isHoveredRow) && isFirstColumn)
2267
- ? borderStyle
2268
- : undefined,
2269
- borderRight: isDraggingColumn ||
2270
- isHoveredColumn ||
2271
- ((isDraggingRow || isHoveredRow) && isLastColumn)
2272
- ? borderStyle
2273
- : undefined,
2274
- borderTop: isDraggingRow || isHoveredRow ? borderStyle : undefined,
2275
- }
2276
- : undefined;
2277
- }, [
2278
- columnSizingInfo.isResizingColumn,
2279
- draggingColumn,
2280
- draggingRow,
2281
- hoveredColumn,
2282
- hoveredRow,
2283
- staticRowIndex,
2284
- ]);
2285
- const isColumnPinned = enableColumnPinning &&
2286
- columnDef.columnDefType !== 'group' &&
2287
- column.getIsPinned();
2288
- const isEditable = isCellEditable({ cell, table });
2289
- const isEditing = isEditable &&
2290
- !['custom', 'modal'].includes(editDisplayMode) &&
2291
- (editDisplayMode === 'table' ||
2292
- (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id ||
2293
- (editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) === cell.id) &&
2294
- !row.getIsGrouped();
2295
- const isCreating = isEditable && createDisplayMode === 'row' && (creatingRow === null || creatingRow === void 0 ? void 0 : creatingRow.id) === row.id;
2296
- const showClickToCopyButton = (parseFromValuesOrFunc(enableClickToCopy, cell) === true ||
2297
- parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) === true) &&
2298
- !['context-menu', false].includes(
2299
- // @ts-ignore
2300
- parseFromValuesOrFunc(columnDef.enableClickToCopy, cell));
2301
- const isRightClickable = parseFromValuesOrFunc(enableCellActions, cell);
2302
- const cellValueProps = {
2303
- cell,
2304
- table,
2305
- staticColumnIndex,
2306
- staticRowIndex,
2307
- };
2308
- const handleDoubleClick = (event) => {
2309
- var _a;
2310
- (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onDoubleClick) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, event);
2311
- openEditingCell({ cell, table });
2312
- };
2313
- const handleDragEnter = (e) => {
2314
- var _a;
2315
- (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onDragEnter) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, e);
2316
- if (enableGrouping && (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
2317
- setHoveredColumn(null);
2318
- }
2319
- if (enableColumnOrdering && draggingColumn) {
2320
- setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
2321
- }
2322
- };
2323
- const handleDragOver = (e) => {
2324
- if (columnDef.enableColumnOrdering !== false) {
2325
- e.preventDefault();
2326
- }
2327
- };
2328
- const handleContextMenu = (e) => {
2329
- var _a;
2330
- (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onContextMenu) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, e);
2331
- if (isRightClickable) {
2332
- e.preventDefault();
2333
- table.setActionCell(cell);
2334
- table.refs.actionCellRef.current = e.currentTarget;
2335
- }
2336
- };
2337
- const handleKeyDown = (event) => {
2338
- var _a;
2339
- (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, event);
2340
- cellKeyboardShortcuts({
2341
- cell,
2342
- cellValue: cell.getValue(),
2343
- event,
2344
- table,
2345
- });
2346
- };
2347
- return (jsxRuntime.jsx(TableCell__default["default"], Object.assign({ align: theme.direction === 'rtl' ? 'right' : 'left', "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, tabIndex: enableKeyboardShortcuts ? 0 : undefined }, tableCellProps, { onKeyDown: handleKeyDown, onContextMenu: handleContextMenu, onDoubleClick: handleDoubleClick, onDragEnter: handleDragEnter, onDragOver: handleDragOver, sx: (theme) => (Object.assign(Object.assign({ '&:hover': {
2348
- outline: (actionCell === null || actionCell === void 0 ? void 0 : actionCell.id) === cell.id ||
2349
- (editDisplayMode === 'cell' && isEditable) ||
2350
- (editDisplayMode === 'table' && (isCreating || isEditing))
2351
- ? `1px solid ${theme.palette.grey[500]}`
2352
- : undefined,
2353
- textOverflow: 'clip',
2354
- }, alignItems: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'center' : undefined, cursor: isRightClickable
2355
- ? 'context-menu'
2356
- : isEditable && editDisplayMode === 'cell'
2357
- ? 'pointer'
2358
- : 'inherit', outline: (actionCell === null || actionCell === void 0 ? void 0 : actionCell.id) === cell.id
2359
- ? `1px solid ${theme.palette.grey[500]}`
2360
- : undefined, outlineOffset: '-1px', overflow: 'hidden', p: density === 'compact'
2361
- ? columnDefType === 'display'
2362
- ? '0 0.5rem'
2363
- : '0.5rem'
2364
- : density === 'comfortable'
2365
- ? columnDefType === 'display'
2366
- ? '0.5rem 0.75rem'
2367
- : '1rem'
2368
- : columnDefType === 'display'
2369
- ? '1rem 1.25rem'
2370
- : '1.5rem', textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined, whiteSpace: row.getIsPinned() || density === 'compact' ? 'nowrap' : 'normal' }, getCommonMRTCellStyles({
2371
- column,
2372
- table,
2373
- tableCellProps,
2374
- theme,
2375
- })), draggingBorders)), children: (_b = tableCellProps.children) !== null && _b !== void 0 ? _b : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [cell.getIsPlaceholder() ? (((_d = (_c = columnDef.PlaceholderCell) === null || _c === void 0 ? void 0 : _c.call(columnDef, { cell, column, row, table })) !== null && _d !== void 0 ? _d : null)) : showSkeletons !== false && (isLoading || showSkeletons) ? (jsxRuntime.jsx(Skeleton__default["default"], Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : columnDefType === 'display' &&
2376
- (['mrt-row-expand', 'mrt-row-numbers', 'mrt-row-select'].includes(column.id) ||
2377
- !row.getIsGrouped()) ? ((_e = columnDef.Cell) === null || _e === void 0 ? void 0 : _e.call(columnDef, {
2378
- cell,
2379
- column,
2380
- renderedCellValue: cell.renderValue(),
2381
- row,
2382
- rowRef,
2383
- staticColumnIndex,
2384
- staticRowIndex,
2385
- table,
2386
- })) : isCreating || isEditing ? (jsxRuntime.jsx(MRT_EditCellTextField, { cell: cell, table: table })) : showClickToCopyButton && columnDef.enableClickToCopy !== false ? (jsxRuntime.jsx(MRT_CopyButton, { cell: cell, table: table, children: jsxRuntime.jsx(MRT_TableBodyCellValue, Object.assign({}, cellValueProps)) })) : (jsxRuntime.jsx(MRT_TableBodyCellValue, Object.assign({}, cellValueProps))), cell.getIsGrouped() && !columnDef.GroupedCell && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [" (", (_f = row.subRows) === null || _f === void 0 ? void 0 : _f.length, ")"] }))] })) })));
2387
- };
2388
- const Memo_MRT_TableBodyCell = react.memo(MRT_TableBodyCell, (prev, next) => next.cell === prev.cell);
2389
-
2390
- const MRT_TableDetailPanel = (_a) => {
2391
- var { parentRowRef, row, rowVirtualizer, staticRowIndex, table, virtualRow } = _a, rest = __rest(_a, ["parentRowRef", "row", "rowVirtualizer", "staticRowIndex", "table", "virtualRow"]);
2392
- const { getState, getVisibleLeafColumns, options: { layoutMode, mrtTheme: { baseBackgroundColor }, muiDetailPanelProps, muiTableBodyRowProps, renderDetailPanel, }, } = table;
2393
- const { isLoading } = getState();
2394
- const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
2395
- isDetailPanel: true,
2396
- row,
2397
- staticRowIndex,
2398
- table,
2399
- });
2400
- const tableCellProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiDetailPanelProps, {
2401
- row,
2402
- table,
2403
- })), rest);
2404
- const DetailPanel = !isLoading && (renderDetailPanel === null || renderDetailPanel === void 0 ? void 0 : renderDetailPanel({ row, table }));
2405
- return (jsxRuntime.jsx(TableRow__default["default"], Object.assign({ className: "Mui-TableBodyCell-DetailPanel", "data-index": renderDetailPanel ? staticRowIndex * 2 + 1 : staticRowIndex, ref: (node) => {
2406
- var _a;
2407
- if (node) {
2408
- (_a = rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement) === null || _a === void 0 ? void 0 : _a.call(rowVirtualizer, node);
2409
- }
2410
- } }, tableRowProps, { sx: (theme) => {
2411
- var _a, _b;
2412
- return (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, position: virtualRow ? 'absolute' : undefined, top: virtualRow
2413
- ? `${(_b = (_a = parentRowRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height}px`
2414
- : undefined, transform: virtualRow
2415
- ? `translateY(${virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.start}px)`
2416
- : undefined, width: '100%' }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme)));
2417
- }, children: jsxRuntime.jsx(TableCell__default["default"], Object.assign({ className: "Mui-TableBodyCell-DetailPanel", colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ backgroundColor: virtualRow ? baseBackgroundColor : undefined, borderBottom: !row.getIsExpanded() ? 'none' : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, py: !!DetailPanel && row.getIsExpanded() ? '1rem' : 0, transition: !virtualRow ? 'all 150ms ease-in-out' : undefined, width: `100%` }, parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: virtualRow ? (row.getIsExpanded() && DetailPanel) : (jsxRuntime.jsx(Collapse__default["default"], { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: DetailPanel })) })) })));
2418
- };
2419
-
2420
- const MRT_TableBodyRow = (_a) => {
2421
- var _b, _c, _d, _f;
2422
- var { columnVirtualizer, numRows, pinnedRowIds, row, rowVirtualizer, staticRowIndex, table, virtualRow } = _a, rest = __rest(_a, ["columnVirtualizer", "numRows", "pinnedRowIds", "row", "rowVirtualizer", "staticRowIndex", "table", "virtualRow"]);
2423
- const theme = styles.useTheme();
2424
- const { getState, options: { enableRowOrdering, enableRowPinning, enableStickyFooter, enableStickyHeader, layoutMode, memoMode, mrtTheme: { baseBackgroundColor, pinnedRowBackgroundColor, selectedRowBackgroundColor, }, muiTableBodyRowProps, renderDetailPanel, rowPinningDisplayMode, }, refs: { tableFooterRef, tableHeadRef }, setHoveredRow, } = table;
2425
- const { density, draggingColumn, draggingRow, editingCell, editingRow, hoveredRow, isFullScreen, rowPinning, } = getState();
2426
- const visibleCells = row.getVisibleCells();
2427
- const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
2428
- const isRowSelected = getIsRowSelected({ row, table });
2429
- const isRowPinned = enableRowPinning && row.getIsPinned();
2430
- const isDraggingRow = (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id;
2431
- const isHoveredRow = (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id;
2432
- const tableRowProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableBodyRowProps, {
2433
- row,
2434
- staticRowIndex,
2435
- table,
2436
- })), rest);
2437
- const [bottomPinnedIndex, topPinnedIndex] = react.useMemo(() => {
2438
- if (!enableRowPinning ||
2439
- !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) ||
2440
- !pinnedRowIds ||
2441
- !row.getIsPinned())
2442
- return [];
2443
- return [
2444
- [...pinnedRowIds].reverse().indexOf(row.id),
2445
- pinnedRowIds.indexOf(row.id),
2446
- ];
2447
- }, [pinnedRowIds, rowPinning]);
2448
- const tableHeadHeight = ((enableStickyHeader || isFullScreen) &&
2449
- ((_b = tableHeadRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)) ||
2450
- 0;
2451
- const tableFooterHeight = (enableStickyFooter && ((_c = tableFooterRef.current) === null || _c === void 0 ? void 0 : _c.clientHeight)) || 0;
2452
- const sx = parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme);
2453
- const defaultRowHeight = density === 'compact' ? 37 : density === 'comfortable' ? 53 : 69;
2454
- const customRowHeight =
2455
- // @ts-ignore
2456
- parseInt((_f = (_d = tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.style) === null || _d === void 0 ? void 0 : _d.height) !== null && _f !== void 0 ? _f : sx === null || sx === void 0 ? void 0 : sx.height, 10) || undefined;
2457
- const rowHeight = customRowHeight || defaultRowHeight;
2458
- const handleDragEnter = (_e) => {
2459
- if (enableRowOrdering && draggingRow) {
2460
- setHoveredRow(row);
2461
- }
2462
- };
2463
- const handleDragOver = (e) => {
2464
- e.preventDefault();
2465
- };
2466
- const rowRef = react.useRef(null);
2467
- const cellHighlightColor = isRowSelected
2468
- ? selectedRowBackgroundColor
2469
- : isRowPinned
2470
- ? pinnedRowBackgroundColor
2471
- : undefined;
2472
- const cellHighlightColorHover = (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false
2473
- ? isRowSelected
2474
- ? cellHighlightColor
2475
- : theme.palette.mode === 'dark'
2476
- ? `${styles.lighten(baseBackgroundColor, 0.3)}`
2477
- : `${styles.darken(baseBackgroundColor, 0.3)}`
2478
- : undefined;
2479
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(TableRow__default["default"], Object.assign({ "data-index": renderDetailPanel ? staticRowIndex * 2 : staticRowIndex, "data-pinned": !!isRowPinned || undefined, "data-selected": isRowSelected || undefined, onDragEnter: handleDragEnter, onDragOver: handleDragOver, ref: (node) => {
2480
- if (node) {
2481
- rowRef.current = node;
2482
- rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement(node);
2483
- }
2484
- }, selected: isRowSelected }, tableRowProps, { style: Object.assign({ transform: virtualRow
2485
- ? `translateY(${virtualRow.start}px)`
2486
- : undefined }, tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.style), sx: (theme) => (Object.assign({ '&:hover td:after': cellHighlightColorHover
2487
- ? Object.assign({ backgroundColor: styles.alpha(cellHighlightColorHover, 0.3) }, commonCellBeforeAfterStyles) : undefined, backgroundColor: `${baseBackgroundColor} !important`, bottom: !virtualRow && bottomPinnedIndex !== undefined && isRowPinned
2488
- ? `${bottomPinnedIndex * rowHeight +
2489
- (enableStickyFooter ? tableFooterHeight - 1 : 0)}px`
2490
- : undefined, boxSizing: 'border-box', display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, opacity: isRowPinned ? 0.97 : isDraggingRow || isHoveredRow ? 0.5 : 1, position: virtualRow
2491
- ? 'absolute'
2492
- : (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) && isRowPinned
2493
- ? 'sticky'
2494
- : 'relative', td: Object.assign({}, getCommonPinnedCellStyles({ table, theme })), 'td:after': cellHighlightColor
2495
- ? Object.assign({ backgroundColor: cellHighlightColor }, commonCellBeforeAfterStyles) : undefined, top: virtualRow
2496
- ? 0
2497
- : topPinnedIndex !== undefined && isRowPinned
2498
- ? `${topPinnedIndex * rowHeight +
2499
- (enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)}px`
2500
- : undefined, transition: virtualRow ? 'none' : 'all 150ms ease-in-out', width: '100%', zIndex: (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) && isRowPinned ? 2 : 0 }, sx)), children: [virtualPaddingLeft ? (jsxRuntime.jsx("td", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : visibleCells).map((cellOrVirtualCell, staticColumnIndex) => {
2501
- let cell = cellOrVirtualCell;
2502
- if (columnVirtualizer) {
2503
- staticColumnIndex = cellOrVirtualCell.index;
2504
- cell = visibleCells[staticColumnIndex];
2505
- }
2506
- const props = {
2507
- cell,
2508
- numRows,
2509
- rowRef,
2510
- staticColumnIndex,
2511
- staticRowIndex,
2512
- table,
2513
- };
2514
- const key = `${cell.id}-${staticRowIndex}`;
2515
- return cell ? (memoMode === 'cells' &&
2516
- cell.column.columnDef.columnDefType === 'data' &&
2517
- !draggingColumn &&
2518
- !draggingRow &&
2519
- (editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) !== cell.id &&
2520
- (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) !== row.id ? (jsxRuntime.jsx(Memo_MRT_TableBodyCell, Object.assign({}, props), key)) : (jsxRuntime.jsx(MRT_TableBodyCell, Object.assign({}, props), key))) : null;
2521
- }), virtualPaddingRight ? (jsxRuntime.jsx("td", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })), renderDetailPanel && !row.getIsGrouped() && (jsxRuntime.jsx(MRT_TableDetailPanel, { parentRowRef: rowRef, row: row, rowVirtualizer: rowVirtualizer, staticRowIndex: staticRowIndex, table: table, virtualRow: virtualRow }))] }));
2522
- };
2523
- const Memo_MRT_TableBodyRow = react.memo(MRT_TableBodyRow, (prev, next) => prev.row === next.row && prev.staticRowIndex === next.staticRowIndex);
2524
-
2525
- const MRT_TableBody = (_a) => {
2526
- var _b, _c, _d, _e, _f, _g;
2527
- var { columnVirtualizer, table } = _a, rest = __rest(_a, ["columnVirtualizer", "table"]);
2528
- const { getBottomRows, getIsSomeRowsPinned, getRowModel, getState, getTopRows, options: { enableStickyFooter, enableStickyHeader, layoutMode, localization, memoMode, muiTableBodyProps, renderDetailPanel, renderEmptyRowsFallback, rowPinningDisplayMode, }, refs: { tableFooterRef, tableHeadRef, tablePaperRef }, } = table;
2529
- const { columnFilters, globalFilter, isFullScreen, rowPinning } = getState();
2530
- const tableBodyProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableBodyProps, { table })), rest);
2531
- const tableHeadHeight = ((enableStickyHeader || isFullScreen) &&
2532
- ((_b = tableHeadRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)) ||
2533
- 0;
2534
- const tableFooterHeight = (enableStickyFooter && ((_c = tableFooterRef.current) === null || _c === void 0 ? void 0 : _c.clientHeight)) || 0;
2535
- const pinnedRowIds = react.useMemo(() => {
2536
- var _a, _b;
2537
- if (!((_a = rowPinning.bottom) === null || _a === void 0 ? void 0 : _a.length) && !((_b = rowPinning.top) === null || _b === void 0 ? void 0 : _b.length))
2538
- return [];
2539
- return getRowModel()
2540
- .rows.filter((row) => row.getIsPinned())
2541
- .map((r) => r.id);
2542
- }, [rowPinning, getRowModel().rows]);
2543
- const rows = useMRT_Rows(table);
2544
- const rowVirtualizer = useMRT_RowVirtualizer(table, rows);
2545
- const { virtualRows } = rowVirtualizer !== null && rowVirtualizer !== void 0 ? rowVirtualizer : {};
2546
- const commonRowProps = {
2547
- columnVirtualizer,
2548
- numRows: rows.length,
2549
- table,
2550
- };
2551
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) &&
2552
- getIsSomeRowsPinned('top') && (jsxRuntime.jsx(TableBody__default["default"], Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, position: 'sticky', top: tableHeadHeight - 1, zIndex: 1 }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: getTopRows().map((row, staticRowIndex) => {
2553
- const props = Object.assign(Object.assign({}, commonRowProps), { row,
2554
- staticRowIndex });
2555
- return memoMode === 'rows' ? (jsxRuntime.jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsxRuntime.jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
2556
- }) }))), jsxRuntime.jsx(TableBody__default["default"], Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, height: rowVirtualizer
2557
- ? `${rowVirtualizer.getTotalSize()}px`
2558
- : undefined, minHeight: !rows.length ? '100px' : undefined, position: 'relative' }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: (_d = tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.children) !== null && _d !== void 0 ? _d : (!rows.length ? (jsxRuntime.jsx("tr", { style: {
2559
- display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
2560
- }, children: jsxRuntime.jsx("td", { colSpan: table.getVisibleLeafColumns().length, style: {
2561
- display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
2562
- }, children: (_e = renderEmptyRowsFallback === null || renderEmptyRowsFallback === void 0 ? void 0 : renderEmptyRowsFallback({ table })) !== null && _e !== void 0 ? _e : (jsxRuntime.jsx(Typography__default["default"], { sx: {
2563
- color: 'text.secondary',
2564
- fontStyle: 'italic',
2565
- maxWidth: `min(100vw, ${(_g = (_f = tablePaperRef.current) === null || _f === void 0 ? void 0 : _f.clientWidth) !== null && _g !== void 0 ? _g : 360}px)`,
2566
- py: '2rem',
2567
- textAlign: 'center',
2568
- width: '100%',
2569
- }, children: globalFilter || columnFilters.length
2570
- ? localization.noResultsFound
2571
- : localization.noRecordsToDisplay })) }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (virtualRows !== null && virtualRows !== void 0 ? virtualRows : rows).map((rowOrVirtualRow, staticRowIndex) => {
2572
- let row = rowOrVirtualRow;
2573
- if (rowVirtualizer) {
2574
- if (renderDetailPanel) {
2575
- if (rowOrVirtualRow.index % 2 === 1) {
2576
- return null;
2577
- }
2578
- else {
2579
- staticRowIndex = rowOrVirtualRow.index / 2;
2580
- }
2581
- }
2582
- else {
2583
- staticRowIndex = rowOrVirtualRow.index;
2584
- }
2585
- row = rows[staticRowIndex];
2586
- }
2587
- const props = Object.assign(Object.assign({}, commonRowProps), { pinnedRowIds,
2588
- row,
2589
- rowVirtualizer,
2590
- staticRowIndex, virtualRow: rowVirtualizer
2591
- ? rowOrVirtualRow
2592
- : undefined });
2593
- const key = `${row.id}-${row.index}`;
2594
- return memoMode === 'rows' ? (jsxRuntime.jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), key)) : (jsxRuntime.jsx(MRT_TableBodyRow, Object.assign({}, props), key));
2595
- }) }))) })), !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) &&
2596
- getIsSomeRowsPinned('bottom') && (jsxRuntime.jsx(TableBody__default["default"], Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ bottom: tableFooterHeight - 1, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, position: 'sticky', zIndex: 1 }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: getBottomRows().map((row, staticRowIndex) => {
2597
- const props = Object.assign(Object.assign({}, commonRowProps), { row,
2598
- staticRowIndex });
2599
- return memoMode === 'rows' ? (jsxRuntime.jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsxRuntime.jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
2600
- }) })))] }));
2601
- };
2602
- const Memo_MRT_TableBody = react.memo(MRT_TableBody, (prev, next) => prev.table.options.data === next.table.options.data);
2603
-
2604
- const MRT_TableFooterCell = (_a) => {
2605
- var _b, _c, _d;
2606
- var { footer, staticColumnIndex, table } = _a, rest = __rest(_a, ["footer", "staticColumnIndex", "table"]);
2607
- const theme = styles.useTheme();
2608
- const { getState, options: { enableColumnPinning, muiTableFooterCellProps, enableKeyboardShortcuts, }, } = table;
2609
- const { density } = getState();
2610
- const { column } = footer;
2611
- const { columnDef } = column;
2612
- const { columnDefType } = columnDef;
2613
- const isColumnPinned = enableColumnPinning &&
2614
- columnDef.columnDefType !== 'group' &&
2615
- column.getIsPinned();
2616
- const args = { column, table };
2617
- const tableCellProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterCellProps, args)), parseFromValuesOrFunc(columnDef.muiTableFooterCellProps, args)), rest);
2618
- const handleKeyDown = (event) => {
2619
- var _a;
2620
- (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, event);
2621
- cellKeyboardShortcuts({
2622
- event,
2623
- cellValue: footer.column.columnDef.footer,
2624
- table,
2625
- });
2626
- };
2627
- return (jsxRuntime.jsx(TableCell__default["default"], Object.assign({ align: columnDefType === 'group'
2628
- ? 'center'
2629
- : theme.direction === 'rtl'
2630
- ? 'right'
2631
- : 'left', colSpan: footer.colSpan, "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, tabIndex: enableKeyboardShortcuts ? 0 : undefined, variant: "footer" }, tableCellProps, { onKeyDown: handleKeyDown, sx: (theme) => (Object.assign(Object.assign({ fontWeight: 'bold', p: density === 'compact'
2632
- ? '0.5rem'
2633
- : density === 'comfortable'
2634
- ? '1rem'
2635
- : '1.5rem', verticalAlign: 'top' }, getCommonMRTCellStyles({
2636
- column,
2637
- header: footer,
2638
- table,
2639
- tableCellProps,
2640
- theme,
2641
- })), parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: (_b = tableCellProps.children) !== null && _b !== void 0 ? _b : (footer.isPlaceholder
2642
- ? null
2643
- : ((_d = (_c = parseFromValuesOrFunc(columnDef.Footer, {
2644
- column,
2645
- footer,
2646
- table,
2647
- })) !== null && _c !== void 0 ? _c : columnDef.footer) !== null && _d !== void 0 ? _d : null)) })));
2648
- };
2649
-
2650
- const MRT_TableFooterRow = (_a) => {
2651
- var _b;
2652
- var { columnVirtualizer, footerGroup, table } = _a, rest = __rest(_a, ["columnVirtualizer", "footerGroup", "table"]);
2653
- const { options: { layoutMode, mrtTheme: { baseBackgroundColor }, muiTableFooterRowProps, }, } = table;
2654
- const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
2655
- // if no content in row, skip row
2656
- if (!((_b = footerGroup.headers) === null || _b === void 0 ? void 0 : _b.some((header) => (typeof header.column.columnDef.footer === 'string' &&
2657
- !!header.column.columnDef.footer) ||
2658
- header.column.columnDef.Footer))) {
2659
- return null;
2660
- }
2661
- const tableRowProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterRowProps, {
2662
- footerGroup,
2663
- table,
2664
- })), rest);
2665
- return (jsxRuntime.jsxs(TableRow__default["default"], Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: baseBackgroundColor, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, position: 'relative', width: '100%' }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme))), children: [virtualPaddingLeft ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : footerGroup.headers).map((footerOrVirtualFooter, staticColumnIndex) => {
2666
- let footer = footerOrVirtualFooter;
2667
- if (columnVirtualizer) {
2668
- staticColumnIndex = footerOrVirtualFooter
2669
- .index;
2670
- footer = footerGroup.headers[staticColumnIndex];
2671
- }
2672
- return footer ? (jsxRuntime.jsx(MRT_TableFooterCell, { footer: footer, staticColumnIndex: staticColumnIndex, table: table }, footer.id)) : null;
2673
- }), virtualPaddingRight ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })));
2674
- };
2675
-
2676
- const MRT_TableFooter = (_a) => {
2677
- var { columnVirtualizer, table } = _a, rest = __rest(_a, ["columnVirtualizer", "table"]);
2678
- const { getState, options: { enableStickyFooter, layoutMode, muiTableFooterProps }, refs: { tableFooterRef }, } = table;
2679
- const { isFullScreen } = getState();
2680
- const tableFooterProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterProps, {
2681
- table,
2682
- })), rest);
2683
- const stickFooter = (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;
2684
- const footerGroups = table.getFooterGroups();
2685
- //if no footer cells at all, skip footer
2686
- if (!footerGroups.some((footerGroup) => {
2687
- var _a;
2688
- return (_a = footerGroup.headers) === null || _a === void 0 ? void 0 : _a.some((header) => (typeof header.column.columnDef.footer === 'string' &&
2689
- !!header.column.columnDef.footer) ||
2690
- header.column.columnDef.Footer);
2691
- })) {
2692
- return null;
2693
- }
2694
- return (jsxRuntime.jsx(TableFooter__default["default"], Object.assign({}, tableFooterProps, { ref: (ref) => {
2695
- tableFooterRef.current = ref;
2696
- if (tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.ref) {
2697
- // @ts-ignore
2698
- tableFooterProps.ref.current = ref;
2699
- }
2700
- }, sx: (theme) => (Object.assign({ bottom: stickFooter ? 0 : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, opacity: stickFooter ? 0.97 : undefined, outline: stickFooter
2701
- ? theme.palette.mode === 'light'
2702
- ? `1px solid ${theme.palette.grey[300]}`
2703
- : `1px solid ${theme.palette.grey[700]}`
2704
- : undefined, position: stickFooter ? 'sticky' : 'relative', zIndex: stickFooter ? 1 : undefined }, parseFromValuesOrFunc(tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx, theme))), children: footerGroups.map((footerGroup) => (jsxRuntime.jsx(MRT_TableFooterRow, { columnVirtualizer: columnVirtualizer, footerGroup: footerGroup, table: table }, footerGroup.id))) })));
2705
- };
2706
-
2707
- const mrtFilterOptions = (localization) => [
2708
- {
2709
- divider: false,
2710
- label: localization.filterFuzzy,
2711
- option: 'fuzzy',
2712
- symbol: '≈',
2713
- },
2714
- {
2715
- divider: false,
2716
- label: localization.filterContains,
2717
- option: 'contains',
2718
- symbol: '*',
2719
- },
2720
- {
2721
- divider: false,
2722
- label: localization.filterStartsWith,
2723
- option: 'startsWith',
2724
- symbol: 'a',
2725
- },
2726
- {
2727
- divider: true,
2728
- label: localization.filterEndsWith,
2729
- option: 'endsWith',
2730
- symbol: 'z',
2731
- },
2732
- {
2733
- divider: false,
2734
- label: localization.filterEquals,
2735
- option: 'equals',
2736
- symbol: '=',
2737
- },
2738
- {
2739
- divider: true,
2740
- label: localization.filterNotEquals,
2741
- option: 'notEquals',
2742
- symbol: '≠',
2743
- },
2744
- {
2745
- divider: false,
2746
- label: localization.filterBetween,
2747
- option: 'between',
2748
- symbol: '⇿',
2749
- },
2750
- {
2751
- divider: true,
2752
- label: localization.filterBetweenInclusive,
2753
- option: 'betweenInclusive',
2754
- symbol: '⬌',
2755
- },
2756
- {
2757
- divider: false,
2758
- label: localization.filterGreaterThan,
2759
- option: 'greaterThan',
2760
- symbol: '>',
2761
- },
2762
- {
2763
- divider: false,
2764
- label: localization.filterGreaterThanOrEqualTo,
2765
- option: 'greaterThanOrEqualTo',
2766
- symbol: '≥',
2767
- },
2768
- {
2769
- divider: false,
2770
- label: localization.filterLessThan,
2771
- option: 'lessThan',
2772
- symbol: '<',
2773
- },
2774
- {
2775
- divider: true,
2776
- label: localization.filterLessThanOrEqualTo,
2777
- option: 'lessThanOrEqualTo',
2778
- symbol: '≤',
2779
- },
2780
- {
2781
- divider: false,
2782
- label: localization.filterEmpty,
2783
- option: 'empty',
2784
- symbol: '∅',
2785
- },
2786
- {
2787
- divider: false,
2788
- label: localization.filterNotEmpty,
2789
- option: 'notEmpty',
2790
- symbol: '!∅',
2791
- },
2792
- ];
2793
- const rangeModes = ['between', 'betweenInclusive', 'inNumberRange'];
2794
- const emptyModes = ['empty', 'notEmpty'];
2795
- const arrModes = ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'];
2796
- const rangeVariants = ['range-slider', 'date-range', 'datetime-range', 'range'];
2797
- const MRT_FilterOptionMenu = (_a) => {
2798
- var _b, _c, _d, _e;
2799
- var { anchorEl, header, onSelect, setAnchorEl, setFilterValue, table } = _a, rest = __rest(_a, ["anchorEl", "header", "onSelect", "setAnchorEl", "setFilterValue", "table"]);
2800
- const { getState, options: { columnFilterModeOptions, globalFilterModeOptions, localization, mrtTheme: { menuBackgroundColor }, renderColumnFilterModeMenuItems, renderGlobalFilterModeMenuItems, }, setColumnFilterFns, setGlobalFilterFn, } = table;
2801
- const { density, globalFilterFn } = getState();
2802
- const { column } = header !== null && header !== void 0 ? header : {};
2803
- const { columnDef } = column !== null && column !== void 0 ? column : {};
2804
- const currentFilterValue = column === null || column === void 0 ? void 0 : column.getFilterValue();
2805
- let allowedColumnFilterOptions = (_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _b !== void 0 ? _b : columnFilterModeOptions;
2806
- if (rangeVariants.includes(columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant)) {
2807
- allowedColumnFilterOptions = [
2808
- ...rangeModes,
2809
- ...(allowedColumnFilterOptions !== null && allowedColumnFilterOptions !== void 0 ? allowedColumnFilterOptions : []),
2810
- ].filter((option) => rangeModes.includes(option));
2811
- }
2812
- const internalFilterOptions = react.useMemo(() => mrtFilterOptions(localization).filter((filterOption) => columnDef
2813
- ? allowedColumnFilterOptions === undefined ||
2814
- (allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.includes(filterOption.option))
2815
- : (!globalFilterModeOptions ||
2816
- globalFilterModeOptions.includes(filterOption.option)) &&
2817
- ['contains', 'fuzzy', 'startsWith'].includes(filterOption.option)), []);
2818
- const handleSelectFilterMode = (option) => {
2819
- var _a, _b;
2820
- const prevFilterMode = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef._filterFn) !== null && _a !== void 0 ? _a : '';
2821
- if (!header || !column) {
2822
- // global filter mode
2823
- setGlobalFilterFn(option);
2824
- }
2825
- else if (option !== prevFilterMode) {
2826
- // column filter mode
2827
- setColumnFilterFns((prev) => (Object.assign(Object.assign({}, prev), { [header.id]: option })));
2828
- // reset filter value and/or perform new filter render
2829
- if (emptyModes.includes(option)) {
2830
- // will now be empty/notEmpty filter mode
2831
- if (currentFilterValue !== ' ' &&
2832
- !emptyModes.includes(prevFilterMode)) {
2833
- column.setFilterValue(' ');
2834
- }
2835
- else if (currentFilterValue) {
2836
- column.setFilterValue(currentFilterValue); // perform new filter render
2837
- }
2838
- }
2839
- else if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === 'multi-select' ||
2840
- arrModes.includes(option)) {
2841
- // will now be array filter mode
2842
- if (currentFilterValue instanceof String ||
2843
- (currentFilterValue === null || currentFilterValue === void 0 ? void 0 : currentFilterValue.length)) {
2844
- column.setFilterValue([]);
2845
- setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue([]);
2846
- }
2847
- else if (currentFilterValue) {
2848
- column.setFilterValue(currentFilterValue); // perform new filter render
2849
- }
2850
- }
2851
- else if (((_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === null || _b === void 0 ? void 0 : _b.includes('range')) ||
2852
- rangeModes.includes(option)) {
2853
- // will now be range filter mode
2854
- if (!Array.isArray(currentFilterValue) ||
2855
- (!(currentFilterValue === null || currentFilterValue === void 0 ? void 0 : currentFilterValue.every((v) => v === '')) &&
2856
- !rangeModes.includes(prevFilterMode))) {
2857
- column.setFilterValue(['', '']);
2858
- setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
2859
- }
2860
- else {
2861
- column.setFilterValue(currentFilterValue); // perform new filter render
2862
- }
2863
- }
2864
- else {
2865
- // will now be single value filter mode
2866
- if (Array.isArray(currentFilterValue)) {
2867
- column.setFilterValue('');
2868
- setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
2869
- }
2870
- else if (currentFilterValue === ' ' &&
2871
- emptyModes.includes(prevFilterMode)) {
2872
- column.setFilterValue(undefined);
2873
- }
2874
- else {
2875
- column.setFilterValue(currentFilterValue); // perform new filter render
2876
- }
2877
- }
2878
- }
2879
- setAnchorEl(null);
2880
- onSelect === null || onSelect === void 0 ? void 0 : onSelect();
2881
- };
2882
- const filterOption = !!header && columnDef ? columnDef._filterFn : globalFilterFn;
2883
- return (jsxRuntime.jsx(Menu__default["default"], Object.assign({ MenuListProps: {
2884
- dense: density === 'compact',
2885
- sx: {
2886
- backgroundColor: menuBackgroundColor,
2887
- },
2888
- }, anchorEl: anchorEl, anchorOrigin: { horizontal: 'right', vertical: 'center' }, disableScrollLock: true, onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: (_e = (header && column && columnDef
2889
- ? ((_d = (_c = columnDef.renderColumnFilterModeMenuItems) === null || _c === void 0 ? void 0 : _c.call(columnDef, {
2890
- column: column,
2891
- internalFilterOptions,
2892
- onSelectFilterMode: handleSelectFilterMode,
2893
- table,
2894
- })) !== null && _d !== void 0 ? _d : renderColumnFilterModeMenuItems === null || renderColumnFilterModeMenuItems === void 0 ? void 0 : renderColumnFilterModeMenuItems({
2895
- column: column,
2896
- internalFilterOptions,
2897
- onSelectFilterMode: handleSelectFilterMode,
2898
- table,
2899
- }))
2900
- : renderGlobalFilterModeMenuItems === null || renderGlobalFilterModeMenuItems === void 0 ? void 0 : renderGlobalFilterModeMenuItems({
2901
- internalFilterOptions,
2902
- onSelectFilterMode: handleSelectFilterMode,
2903
- table,
2904
- }))) !== null && _e !== void 0 ? _e : internalFilterOptions.map(({ divider, label, option, symbol }, index) => (jsxRuntime.jsx(MRT_ActionMenuItem, { divider: divider, icon: symbol, label: label, onClick: () => handleSelectFilterMode(option), selected: option === filterOption, table: table, value: option }, index))) })));
2905
- };
2906
-
2907
- const MRT_ColumnActionMenu = (_a) => {
2908
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
2909
- var { anchorEl, header, setAnchorEl, table } = _a, rest = __rest(_a, ["anchorEl", "header", "setAnchorEl", "table"]);
2910
- const { getAllLeafColumns, getState, options: { columnFilterDisplayMode, columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnPinning, enableColumnResizing, enableGrouping, enableHiding, enableSorting, enableSortingRemoval, icons: { ClearAllIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, RestartAltIcon, SortIcon, ViewColumnIcon, VisibilityOffIcon, }, localization, mrtTheme: { menuBackgroundColor }, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setColumnFilterFns, setColumnOrder, setColumnSizingInfo, setShowColumnFilters, } = table;
2911
- const { column } = header;
2912
- const { columnDef } = column;
2913
- const { columnSizing, columnVisibility, density, showColumnFilters } = getState();
2914
- const columnFilterValue = column.getFilterValue();
2915
- const [filterMenuAnchorEl, setFilterMenuAnchorEl] = react.useState(null);
2916
- const handleClearSort = () => {
2917
- column.clearSorting();
2918
- setAnchorEl(null);
2919
- };
2920
- const handleSortAsc = () => {
2921
- column.toggleSorting(false);
2922
- setAnchorEl(null);
2923
- };
2924
- const handleSortDesc = () => {
2925
- column.toggleSorting(true);
2926
- setAnchorEl(null);
2927
- };
2928
- const handleResetColumnSize = () => {
2929
- setColumnSizingInfo((old) => (Object.assign(Object.assign({}, old), { isResizingColumn: false })));
2930
- column.resetSize();
2931
- setAnchorEl(null);
2932
- };
2933
- const handleHideColumn = () => {
2934
- column.toggleVisibility(false);
2935
- setAnchorEl(null);
2936
- };
2937
- const handlePinColumn = (pinDirection) => {
2938
- column.pin(pinDirection);
2939
- setAnchorEl(null);
2940
- };
2941
- const handleGroupByColumn = () => {
2942
- column.toggleGrouping();
2943
- setColumnOrder((old) => ['mrt-row-expand', ...old]);
2944
- setAnchorEl(null);
2945
- };
2946
- const handleClearFilter = () => {
2947
- column.setFilterValue(undefined);
2948
- setAnchorEl(null);
2949
- if (['empty', 'notEmpty'].includes(columnDef._filterFn)) {
2950
- setColumnFilterFns((prev) => {
2951
- var _a;
2952
- return (Object.assign(Object.assign({}, prev), { [header.id]: (_a = allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions[0]) !== null && _a !== void 0 ? _a : 'fuzzy' }));
2953
- });
2954
- }
2955
- };
2956
- const handleFilterByColumn = () => {
2957
- setShowColumnFilters(true);
2958
- queueMicrotask(() => { var _a, _b; return (_b = (_a = filterInputRefs.current) === null || _a === void 0 ? void 0 : _a[`${column.id}-0`]) === null || _b === void 0 ? void 0 : _b.focus(); });
2959
- setAnchorEl(null);
2960
- };
2961
- const handleShowAllColumns = () => {
2962
- getAllLeafColumns()
2963
- .filter((col) => col.columnDef.enableHiding !== false)
2964
- .forEach((col) => col.toggleVisibility(true));
2965
- setAnchorEl(null);
2966
- };
2967
- const handleOpenFilterModeMenu = (event) => {
2968
- event.stopPropagation();
2969
- setFilterMenuAnchorEl(event.currentTarget);
2970
- };
2971
- const isSelectFilter = !!columnDef.filterSelectOptions;
2972
- const allowedColumnFilterOptions = (_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _b !== void 0 ? _b : columnFilterModeOptions;
2973
- const showFilterModeSubMenu = enableColumnFilterModes &&
2974
- columnDef.enableColumnFilterModes !== false &&
2975
- !isSelectFilter &&
2976
- (allowedColumnFilterOptions === undefined ||
2977
- !!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length));
2978
- const internalColumnMenuItems = [
2979
- ...(enableSorting && column.getCanSort()
2980
- ? [
2981
- enableSortingRemoval !== false && (jsxRuntime.jsx(MRT_ActionMenuItem, { icon: jsxRuntime.jsx(ClearAllIcon, {}), label: localization.clearSort, onClick: handleClearSort, table: table }, 0)),
2982
- jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: column.getIsSorted() === 'asc', icon: jsxRuntime.jsx(SortIcon, { style: { transform: 'rotate(180deg) scaleX(-1)' } }), label: (_c = localization.sortByColumnAsc) === null || _c === void 0 ? void 0 : _c.replace('{column}', String(columnDef.header)), onClick: handleSortAsc, table: table }, 1),
2983
- jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: column.getIsSorted() === 'desc', divider: enableColumnFilters || enableGrouping || enableHiding, icon: jsxRuntime.jsx(SortIcon, {}), label: (_d = localization.sortByColumnDesc) === null || _d === void 0 ? void 0 : _d.replace('{column}', String(columnDef.header)), onClick: handleSortDesc, table: table }, 2),
2984
- ]
2985
- : []),
2986
- ...(enableColumnFilters && column.getCanFilter()
2987
- ? [
2988
- jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: !columnFilterValue ||
2989
- (Array.isArray(columnFilterValue) &&
2990
- !columnFilterValue.filter((value) => value).length), icon: jsxRuntime.jsx(FilterListOffIcon, {}), label: localization.clearFilter, onClick: handleClearFilter, table: table }, 3),
2991
- columnFilterDisplayMode === 'subheader' && (jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: showColumnFilters && !enableColumnFilterModes, divider: enableGrouping || enableHiding, icon: jsxRuntime.jsx(FilterListIcon, {}), label: (_e = localization.filterByColumn) === null || _e === void 0 ? void 0 : _e.replace('{column}', String(columnDef.header)), onClick: showColumnFilters
2992
- ? handleOpenFilterModeMenu
2993
- : handleFilterByColumn, onOpenSubMenu: showFilterModeSubMenu ? handleOpenFilterModeMenu : undefined, table: table }, 4)),
2994
- showFilterModeSubMenu && (jsxRuntime.jsx(MRT_FilterOptionMenu, { anchorEl: filterMenuAnchorEl, header: header, onSelect: handleFilterByColumn, setAnchorEl: setFilterMenuAnchorEl, table: table }, 5)),
2995
- ].filter(Boolean)
2996
- : []),
2997
- ...(enableGrouping && column.getCanGroup()
2998
- ? [
2999
- jsxRuntime.jsx(MRT_ActionMenuItem, { divider: enableColumnPinning, icon: jsxRuntime.jsx(DynamicFeedIcon, {}), label: (_f = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) === null || _f === void 0 ? void 0 : _f.replace('{column}', String(columnDef.header)), onClick: handleGroupByColumn, table: table }, 6),
3000
- ]
3001
- : []),
3002
- ...(enableColumnPinning && column.getCanPin()
3003
- ? [
3004
- jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: column.getIsPinned() === 'left' || !column.getCanPin(), icon: jsxRuntime.jsx(PushPinIcon, { style: { transform: 'rotate(90deg)' } }), label: localization.pinToLeft, onClick: () => handlePinColumn('left'), table: table }, 7),
3005
- jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: column.getIsPinned() === 'right' || !column.getCanPin(), icon: jsxRuntime.jsx(PushPinIcon, { style: { transform: 'rotate(-90deg)' } }), label: localization.pinToRight, onClick: () => handlePinColumn('right'), table: table }, 8),
3006
- jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: !column.getIsPinned(), divider: enableHiding, icon: jsxRuntime.jsx(PushPinIcon, {}), label: localization.unpin, onClick: () => handlePinColumn(false), table: table }, 9),
3007
- ]
3008
- : []),
3009
- ...(enableColumnResizing && column.getCanResize()
3010
- ? [
3011
- jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: !columnSizing[column.id], icon: jsxRuntime.jsx(RestartAltIcon, {}), label: localization.resetColumnSize, onClick: handleResetColumnSize, table: table }, 10),
3012
- ]
3013
- : []),
3014
- ...(enableHiding
3015
- ? [
3016
- jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: !column.getCanHide(), icon: jsxRuntime.jsx(VisibilityOffIcon, {}), label: (_g = localization.hideColumn) === null || _g === void 0 ? void 0 : _g.replace('{column}', String(columnDef.header)), onClick: handleHideColumn, table: table }, 11),
3017
- jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: !Object.values(columnVisibility).filter((visible) => !visible)
3018
- .length, icon: jsxRuntime.jsx(ViewColumnIcon, {}), label: (_h = localization.showAllColumns) === null || _h === void 0 ? void 0 : _h.replace('{column}', String(columnDef.header)), onClick: handleShowAllColumns, table: table }, 12),
3019
- ]
3020
- : []),
3021
- ].filter(Boolean);
3022
- return (jsxRuntime.jsx(Menu__default["default"], Object.assign({ MenuListProps: {
3023
- dense: density === 'compact',
3024
- sx: {
3025
- backgroundColor: menuBackgroundColor,
3026
- },
3027
- }, anchorEl: anchorEl, disableScrollLock: true, onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: (_l = (_k = (_j = columnDef.renderColumnActionsMenuItems) === null || _j === void 0 ? void 0 : _j.call(columnDef, {
3028
- closeMenu: () => setAnchorEl(null),
3029
- column,
3030
- internalColumnMenuItems,
3031
- table,
3032
- })) !== null && _k !== void 0 ? _k : renderColumnActionsMenuItems === null || renderColumnActionsMenuItems === void 0 ? void 0 : renderColumnActionsMenuItems({
3033
- closeMenu: () => setAnchorEl(null),
3034
- column,
3035
- internalColumnMenuItems,
3036
- table,
3037
- })) !== null && _l !== void 0 ? _l : internalColumnMenuItems })));
3038
- };
3039
-
3040
- const MRT_TableHeadCellColumnActionsButton = (_a) => {
3041
- var _b, _c;
3042
- var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
3043
- const { options: { icons: { MoreVertIcon }, localization, muiColumnActionsButtonProps, }, } = table;
3044
- const { column } = header;
3045
- const { columnDef } = column;
3046
- const [anchorEl, setAnchorEl] = react.useState(null);
3047
- const handleClick = (event) => {
3048
- event.stopPropagation();
3049
- event.preventDefault();
3050
- setAnchorEl(event.currentTarget);
3051
- };
3052
- const iconButtonProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiColumnActionsButtonProps, {
3053
- column,
3054
- table,
3055
- })), parseFromValuesOrFunc(columnDef.muiColumnActionsButtonProps, {
3056
- column,
3057
- table,
3058
- })), rest);
3059
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, getCommonTooltipProps('top'), { title: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _b !== void 0 ? _b : localization.columnActions, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ '&:hover': {
3060
- opacity: 1,
3061
- }, height: '2rem', m: '-8px -4px', opacity: 0.3, transition: 'all 150ms', width: '2rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_c = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _c !== void 0 ? _c : (jsxRuntime.jsx(MoreVertIcon, { style: { transform: 'scale(0.9)' } })) })) })), anchorEl && (jsxRuntime.jsx(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table }))] }));
3062
- };
3063
-
3064
- const MRT_FilterCheckbox = (_a) => {
3065
- var _b, _c, _d;
3066
- var { column, table } = _a, rest = __rest(_a, ["column", "table"]);
3067
- const { getState, options: { localization, muiFilterCheckboxProps }, } = table;
3068
- const { density } = getState();
3069
- const { columnDef } = column;
3070
- const checkboxProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterCheckboxProps, {
3071
- column,
3072
- table,
3073
- })), parseFromValuesOrFunc(columnDef.muiFilterCheckboxProps, {
3074
- column,
3075
- table,
3076
- })), rest);
3077
- const filterLabel = (_b = localization.filterByColumn) === null || _b === void 0 ? void 0 : _b.replace('{column}', columnDef.header);
3078
- return (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, getCommonTooltipProps(), { title: (_c = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _c !== void 0 ? _c : filterLabel, children: jsxRuntime.jsx(FormControlLabel__default["default"], { control: jsxRuntime.jsx(Checkbox__default["default"], Object.assign({ checked: column.getFilterValue() === 'true', color: column.getFilterValue() === undefined ? 'default' : 'primary', indeterminate: column.getFilterValue() === undefined, size: density === 'compact' ? 'small' : 'medium' }, checkboxProps, { onChange: (e, checked) => {
3079
- var _a;
3080
- column.setFilterValue(column.getFilterValue() === undefined
3081
- ? 'true'
3082
- : column.getFilterValue() === 'true'
3083
- ? 'false'
3084
- : undefined);
3085
- (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onChange) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e, checked);
3086
- }, onClick: (e) => {
3087
- var _a;
3088
- e.stopPropagation();
3089
- (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onClick) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e);
3090
- }, sx: (theme) => (Object.assign({ height: '2.5rem', width: '2.5rem' }, parseFromValuesOrFunc(checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx, theme))) })), disableTypography: true, label: (_d = checkboxProps.title) !== null && _d !== void 0 ? _d : filterLabel, sx: { color: 'text.secondary', fontWeight: 'normal', mt: '-4px' }, title: undefined }) })));
3091
- };
3092
-
3093
- const MRT_FilterTextField = (_a) => {
3094
- var _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
3095
- var { header, rangeFilterIndex, table } = _a, rest = __rest(_a, ["header", "rangeFilterIndex", "table"]);
3096
- const { options: { enableColumnFilterModes, icons: { CloseIcon, FilterListIcon }, localization, manualFiltering, muiFilterAutocompleteProps, muiFilterDatePickerProps, muiFilterDateTimePickerProps, muiFilterTextFieldProps, muiFilterTimePickerProps, }, refs: { filterInputRefs }, setColumnFilterFns, } = table;
3097
- const { column } = header;
3098
- const { columnDef } = column;
3099
- const { filterVariant } = columnDef;
3100
- const args = { column, rangeFilterIndex, table };
3101
- const textFieldProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterTextFieldProps, args)), parseFromValuesOrFunc(columnDef.muiFilterTextFieldProps, args)), rest);
3102
- const autocompleteProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterAutocompleteProps, args)), parseFromValuesOrFunc(columnDef.muiFilterAutocompleteProps, args));
3103
- const datePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterDatePickerProps, args)), parseFromValuesOrFunc(columnDef.muiFilterDatePickerProps, args));
3104
- const dateTimePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterDateTimePickerProps, args)), parseFromValuesOrFunc(columnDef.muiFilterDateTimePickerProps, args));
3105
- const timePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterTimePickerProps, args)), parseFromValuesOrFunc(columnDef.muiFilterTimePickerProps, args));
3106
- const { allowedColumnFilterOptions, currentFilterOption, facetedUniqueValues, isAutocompleteFilter, isDateFilter, isMultiSelectFilter, isRangeFilter, isSelectFilter, isTextboxFilter, } = getColumnFilterInfo({ header, table });
3107
- const dropdownOptions = useDropdownOptions({ header, table });
3108
- const filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption)
3109
- ? //@ts-ignore
3110
- localization[`filter${((_c = (_b = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt) === null || _b === void 0 ? void 0 : _b.call(currentFilterOption, 0)) === null || _c === void 0 ? void 0 : _c.toUpperCase()) +
3111
- (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]
3112
- : '';
3113
- const filterPlaceholder = !isRangeFilter
3114
- ? ((_d = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.placeholder) !== null && _d !== void 0 ? _d : (_f = localization.filterByColumn) === null || _f === void 0 ? void 0 : _f.replace('{column}', String(columnDef.header)))
3115
- : rangeFilterIndex === 0
3116
- ? localization.min
3117
- : rangeFilterIndex === 1
3118
- ? localization.max
3119
- : '';
3120
- const showChangeModeButton = !!(enableColumnFilterModes &&
3121
- columnDef.enableColumnFilterModes !== false &&
3122
- !rangeFilterIndex &&
3123
- (allowedColumnFilterOptions === undefined ||
3124
- !!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length)));
3125
- const [anchorEl, setAnchorEl] = react.useState(null);
3126
- const [filterValue, setFilterValue] = react.useState(() => {
3127
- var _a, _b;
3128
- return isMultiSelectFilter
3129
- ? column.getFilterValue() || []
3130
- : isRangeFilter
3131
- ? ((_a = column.getFilterValue()) === null || _a === void 0 ? void 0 : _a[rangeFilterIndex]) || ''
3132
- : ((_b = column.getFilterValue()) !== null && _b !== void 0 ? _b : '');
3133
- });
3134
- const [autocompleteValue, setAutocompleteValue] = react.useState(isAutocompleteFilter ? filterValue : null);
3135
- const handleChangeDebounced = react.useCallback(utils.debounce((newValue) => {
3136
- if (isRangeFilter) {
3137
- column.setFilterValue((old) => {
3138
- const newFilterValues = old !== null && old !== void 0 ? old : ['', ''];
3139
- newFilterValues[rangeFilterIndex] = newValue !== null && newValue !== void 0 ? newValue : undefined;
3140
- return newFilterValues;
3141
- });
3142
- }
3143
- else {
3144
- column.setFilterValue(newValue !== null && newValue !== void 0 ? newValue : undefined);
3145
- }
3146
- }, isTextboxFilter ? (manualFiltering ? 400 : 200) : 1), []);
3147
- const handleChange = (newValue) => {
3148
- setFilterValue(newValue !== null && newValue !== void 0 ? newValue : '');
3149
- handleChangeDebounced(newValue);
3150
- };
3151
- const handleTextFieldChange = (event) => {
3152
- var _a;
3153
- const newValue = textFieldProps.type === 'date'
3154
- ? event.target.valueAsDate
3155
- : textFieldProps.type === 'number'
3156
- ? event.target.valueAsNumber
3157
- : event.target.value;
3158
- handleChange(newValue);
3159
- (_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.onChange) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, event);
3160
- };
3161
- const handleAutocompleteChange = (newValue) => {
3162
- setAutocompleteValue(newValue);
3163
- handleChange(getValueAndLabel(newValue).value);
3164
- };
3165
- const handleClear = () => {
3166
- if (isMultiSelectFilter) {
3167
- setFilterValue([]);
3168
- column.setFilterValue([]);
3169
- }
3170
- else if (isRangeFilter) {
3171
- setFilterValue('');
3172
- column.setFilterValue((old) => {
3173
- const newFilterValues = (Array.isArray(old) && old) || ['', ''];
3174
- newFilterValues[rangeFilterIndex] = undefined;
3175
- return newFilterValues;
3176
- });
3177
- }
3178
- else {
3179
- setFilterValue('');
3180
- column.setFilterValue(undefined);
3181
- }
3182
- };
3183
- const handleClearEmptyFilterChip = () => {
3184
- setFilterValue('');
3185
- column.setFilterValue(undefined);
3186
- setColumnFilterFns((prev) => {
3187
- var _a;
3188
- return (Object.assign(Object.assign({}, prev), { [header.id]: (_a = allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions[0]) !== null && _a !== void 0 ? _a : 'fuzzy' }));
3189
- });
3190
- };
3191
- const handleFilterMenuOpen = (event) => {
3192
- setAnchorEl(event.currentTarget);
3193
- };
3194
- const isMounted = react.useRef(false);
3195
- react.useEffect(() => {
3196
- if (isMounted.current) {
3197
- const filterValue = column.getFilterValue();
3198
- if (filterValue === undefined) {
3199
- handleClear();
3200
- }
3201
- else if (isRangeFilter && rangeFilterIndex !== undefined) {
3202
- setFilterValue(filterValue[rangeFilterIndex]);
3203
- }
3204
- else {
3205
- setFilterValue(filterValue);
3206
- }
3207
- }
3208
- isMounted.current = true;
3209
- }, [column.getFilterValue()]);
3210
- if (columnDef.Filter) {
3211
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (_g = columnDef.Filter) === null || _g === void 0 ? void 0 : _g.call(columnDef, { column, header, rangeFilterIndex, table }) }));
3212
- }
3213
- const endAdornment = !isAutocompleteFilter && !isDateFilter && !filterChipLabel ? (jsxRuntime.jsx(InputAdornment__default["default"], { position: "end", sx: { mr: isSelectFilter || isMultiSelectFilter ? '20px' : undefined }, children: jsxRuntime.jsx(Tooltip__default["default"], { placement: "right", title: (_h = localization.clearFilter) !== null && _h !== void 0 ? _h : '', children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.clearFilter, disabled: !((_j = filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString()) === null || _j === void 0 ? void 0 : _j.length), onClick: handleClear, size: "small", sx: {
3214
- height: '2rem',
3215
- transform: 'scale(0.9)',
3216
- width: '2rem',
3217
- }, children: jsxRuntime.jsx(CloseIcon, {}) }) }) }) })) : null;
3218
- const startAdornment = showChangeModeButton ? (jsxRuntime.jsxs(InputAdornment__default["default"], { position: "start", children: [jsxRuntime.jsx(Tooltip__default["default"], { title: localization.changeFilterMode, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.changeFilterMode, onClick: handleFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' }, children: jsxRuntime.jsx(FilterListIcon, {}) }) }) }), filterChipLabel && (jsxRuntime.jsx(Chip__default["default"], { label: filterChipLabel, onDelete: handleClearEmptyFilterChip }))] })) : null;
3219
- const commonTextFieldProps = Object.assign(Object.assign({ FormHelperTextProps: {
3220
- sx: {
3221
- fontSize: '0.75rem',
3222
- lineHeight: '0.8rem',
3223
- whiteSpace: 'nowrap',
3224
- },
3225
- }, InputProps: endAdornment //hack because mui looks for presence of endAdornment key instead of undefined
3226
- ? { endAdornment, startAdornment }
3227
- : { startAdornment }, fullWidth: true, helperText: showChangeModeButton ? (jsxRuntime.jsx("label", { children: localization.filterMode.replace('{filterType}',
3228
- // @ts-ignore
3229
- localization[`filter${((_k = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _k === void 0 ? void 0 : _k.toUpperCase()) +
3230
- (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]) })) : null, inputProps: {
3231
- 'aria-label': filterPlaceholder,
3232
- autoComplete: 'off',
3233
- disabled: !!filterChipLabel,
3234
- sx: {
3235
- textOverflow: 'ellipsis',
3236
- width: filterChipLabel ? 0 : undefined,
3237
- },
3238
- title: filterPlaceholder,
3239
- }, inputRef: (inputRef) => {
3240
- filterInputRefs.current[`${column.id}-${rangeFilterIndex !== null && rangeFilterIndex !== void 0 ? rangeFilterIndex : 0}`] =
3241
- inputRef;
3242
- if (textFieldProps.inputRef) {
3243
- textFieldProps.inputRef = inputRef;
3244
- }
3245
- }, margin: 'none', placeholder: filterChipLabel || isSelectFilter || isMultiSelectFilter
3246
- ? undefined
3247
- : filterPlaceholder, variant: 'standard' }, textFieldProps), { onKeyDown: (e) => {
3248
- var _a;
3249
- e.stopPropagation();
3250
- (_a = textFieldProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, e);
3251
- }, sx: (theme) => (Object.assign({ minWidth: isDateFilter
3252
- ? '160px'
3253
- : enableColumnFilterModes && rangeFilterIndex === 0
3254
- ? '110px'
3255
- : isRangeFilter
3256
- ? '100px'
3257
- : !filterChipLabel
3258
- ? '120px'
3259
- : 'auto', mx: '-2px', p: 0, width: 'calc(100% + 4px)' }, parseFromValuesOrFunc(textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx, theme))) });
3260
- const commonDatePickerProps = {
3261
- onChange: (newDate) => {
3262
- handleChange(newDate);
3263
- },
3264
- value: filterValue || null,
3265
- };
3266
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('time')) ? (jsxRuntime.jsx(TimePicker.TimePicker, Object.assign({}, commonDatePickerProps, timePickerProps, { slotProps: {
3267
- field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_l = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.slotProps) === null || _l === void 0 ? void 0 : _l.field),
3268
- textField: Object.assign(Object.assign({}, commonTextFieldProps), (_m = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.slotProps) === null || _m === void 0 ? void 0 : _m.textField),
3269
- } }))) : (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('datetime')) ? (jsxRuntime.jsx(DateTimePicker.DateTimePicker, Object.assign({}, commonDatePickerProps, dateTimePickerProps, { slotProps: {
3270
- field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_o = dateTimePickerProps === null || dateTimePickerProps === void 0 ? void 0 : dateTimePickerProps.slotProps) === null || _o === void 0 ? void 0 : _o.field),
3271
- textField: Object.assign(Object.assign({}, commonTextFieldProps), (_p = dateTimePickerProps === null || dateTimePickerProps === void 0 ? void 0 : dateTimePickerProps.slotProps) === null || _p === void 0 ? void 0 : _p.textField),
3272
- } }))) : (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('date')) ? (jsxRuntime.jsx(DatePicker.DatePicker, Object.assign({}, commonDatePickerProps, datePickerProps, { slotProps: {
3273
- field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_q = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _q === void 0 ? void 0 : _q.field),
3274
- textField: Object.assign(Object.assign({}, commonTextFieldProps), (_r = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _r === void 0 ? void 0 : _r.textField),
3275
- } }))) : isAutocompleteFilter ? (jsxRuntime.jsx(Autocomplete__default["default"], Object.assign({ freeSolo: true, getOptionLabel: (option) => getValueAndLabel(option).label,
3276
- // @ts-ignore
3277
- onChange: (_e, newValue) => handleAutocompleteChange(newValue), options: (_s = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option) => getValueAndLabel(option))) !== null && _s !== void 0 ? _s : [] }, autocompleteProps, { renderInput: (builtinTextFieldProps) => {
3278
- var _a;
3279
- return (jsxRuntime.jsx(TextField__default["default"], Object.assign({}, builtinTextFieldProps, commonTextFieldProps, { InputProps: Object.assign(Object.assign({}, builtinTextFieldProps.InputProps), { startAdornment: (_a = commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.startAdornment }), inputProps: Object.assign(Object.assign({}, builtinTextFieldProps.inputProps), commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.inputProps), onChange: handleTextFieldChange, onClick: (e) => e.stopPropagation() })));
3280
- }, value: autocompleteValue }))) : (jsxRuntime.jsx(TextField__default["default"], Object.assign({ select: isSelectFilter || isMultiSelectFilter }, commonTextFieldProps, { SelectProps: Object.assign({ MenuProps: { disableScrollLock: true }, displayEmpty: true, multiple: isMultiSelectFilter, renderValue: isMultiSelectFilter
3281
- ? (selected) => !Array.isArray(selected) || selected.length === 0 ? (jsxRuntime.jsx(Box__default["default"], { sx: { opacity: 0.5 }, children: filterPlaceholder })) : (jsxRuntime.jsx(Box__default["default"], { sx: { display: 'flex', flexWrap: 'wrap', gap: '2px' }, children: selected.map((value) => {
3282
- const selectedValue = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.find((option) => getValueAndLabel(option).value === value);
3283
- return (jsxRuntime.jsx(Chip__default["default"], { label: getValueAndLabel(selectedValue).label }, value));
3284
- }) }))
3285
- : undefined }, commonTextFieldProps.SelectProps), onChange: handleTextFieldChange, onClick: (e) => e.stopPropagation(), value: isMultiSelectFilter
3286
- ? Array.isArray(filterValue)
3287
- ? filterValue
3288
- : []
3289
- : filterValue, children: (isSelectFilter || isMultiSelectFilter) && [
3290
- jsxRuntime.jsx(MenuItem__default["default"], { disabled: true, divider: true, hidden: true, value: "", children: jsxRuntime.jsx(Box__default["default"], { sx: { opacity: 0.5 }, children: filterPlaceholder }) }, "p"),
3291
- ...[
3292
- (_t = textFieldProps.children) !== null && _t !== void 0 ? _t : dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => {
3293
- var _a;
3294
- const { label, value } = getValueAndLabel(option);
3295
- return (jsxRuntime.jsxs(MenuItem__default["default"], { sx: {
3296
- alignItems: 'center',
3297
- display: 'flex',
3298
- gap: '0.5rem',
3299
- m: 0,
3300
- }, value: value, children: [isMultiSelectFilter && (jsxRuntime.jsx(Checkbox__default["default"], { checked: ((_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : []).includes(value), sx: { mr: '0.5rem' } })), label, ' ', !columnDef.filterSelectOptions &&
3301
- `(${facetedUniqueValues.get(value)})`] }, `${index}-${value}`));
3302
- }),
3303
- ],
3304
- ] }))), jsxRuntime.jsx(MRT_FilterOptionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, setFilterValue: setFilterValue, table: table })] }));
3305
- };
3306
-
3307
- const MRT_FilterRangeFields = (_a) => {
3308
- var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
3309
- return (jsxRuntime.jsx(Box__default["default"], Object.assign({}, rest, { sx: (theme) => (Object.assign({ display: 'grid', gap: '1rem', gridTemplateColumns: '1fr 1fr' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: [0, 1].map((rangeFilterIndex) => (jsxRuntime.jsx(MRT_FilterTextField, { header: header, rangeFilterIndex: rangeFilterIndex, table: table }, rangeFilterIndex))) })));
3310
- };
3311
-
3312
- const MRT_FilterRangeSlider = (_a) => {
3313
- var _b, _c;
3314
- var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
3315
- const { options: { enableColumnFilterModes, localization, muiFilterSliderProps }, refs: { filterInputRefs }, } = table;
3316
- const { column } = header;
3317
- const { columnDef } = column;
3318
- const currentFilterOption = columnDef._filterFn;
3319
- const showChangeModeButton = enableColumnFilterModes && columnDef.enableColumnFilterModes !== false;
3320
- const sliderProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterSliderProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterSliderProps, { column, table })), rest);
3321
- let [min, max] = sliderProps.min !== undefined && sliderProps.max !== undefined
3322
- ? [sliderProps.min, sliderProps.max]
3323
- : ((_b = column.getFacetedMinMaxValues()) !== null && _b !== void 0 ? _b : [0, 1]);
3324
- //fix potential TanStack Table bugs where min or max is an array
3325
- if (Array.isArray(min))
3326
- min = min[0];
3327
- if (Array.isArray(max))
3328
- max = max[0];
3329
- if (min === null)
3330
- min = 0;
3331
- if (max === null)
3332
- max = 1;
3333
- const [filterValues, setFilterValues] = react.useState([min, max]);
3334
- const columnFilterValue = column.getFilterValue();
3335
- const isMounted = react.useRef(false);
3336
- react.useEffect(() => {
3337
- if (isMounted.current) {
3338
- if (columnFilterValue === undefined) {
3339
- setFilterValues([min, max]);
3340
- }
3341
- else if (Array.isArray(columnFilterValue)) {
3342
- setFilterValues(columnFilterValue);
3343
- }
3344
- }
3345
- isMounted.current = true;
3346
- }, [columnFilterValue, min, max]);
3347
- return (jsxRuntime.jsxs(Stack__default["default"], { children: [jsxRuntime.jsx(Slider__default["default"], Object.assign({ disableSwap: true, max: max, min: min, onChange: (_event, values) => {
3348
- setFilterValues(values);
3349
- }, onChangeCommitted: (_event, value) => {
3350
- if (Array.isArray(value)) {
3351
- if (value[0] <= min && value[1] >= max) {
3352
- //if the user has selected the entire range, remove the filter
3353
- column.setFilterValue(undefined);
3354
- }
3355
- else {
3356
- column.setFilterValue(value);
3357
- }
3358
- }
3359
- }, value: filterValues, valueLabelDisplay: "auto" }, sliderProps, { slotProps: {
3360
- input: {
3361
- ref: (node) => {
3362
- var _a, _b;
3363
- if (node) {
3364
- filterInputRefs.current[`${column.id}-0`] = node;
3365
- // @ts-ignore
3366
- if ((_b = (_a = sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.slotProps) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.ref) {
3367
- //@ts-ignore
3368
- sliderProps.slotProps.input.ref = node;
3369
- }
3370
- }
3371
- },
3372
- },
3373
- }, sx: (theme) => (Object.assign({ m: 'auto', minWidth: `${column.getSize() - 50}px`, mt: !showChangeModeButton ? '10px' : '6px', px: '4px', width: 'calc(100% - 8px)' }, parseFromValuesOrFunc(sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.sx, theme))) })), showChangeModeButton ? (jsxRuntime.jsx(FormHelperText__default["default"], { sx: {
3374
- fontSize: '0.75rem',
3375
- lineHeight: '0.8rem',
3376
- m: '-3px -6px',
3377
- whiteSpace: 'nowrap',
3378
- }, children: localization.filterMode.replace('{filterType}',
3379
- // @ts-ignore
3380
- localization[`filter${((_c = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _c === void 0 ? void 0 : _c.toUpperCase()) +
3381
- (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]) })) : null] }));
3382
- };
3383
-
3384
- const MRT_TableHeadCellFilterContainer = (_a) => {
3385
- var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
3386
- const { getState, options: { columnFilterDisplayMode }, } = table;
3387
- const { showColumnFilters } = getState();
3388
- const { column } = header;
3389
- const { columnDef } = column;
3390
- const { isRangeFilter } = getColumnFilterInfo({ header, table });
3391
- return (jsxRuntime.jsx(Collapse__default["default"], Object.assign({ in: showColumnFilters || columnFilterDisplayMode === 'popover', mountOnEnter: true, unmountOnExit: true }, rest, { children: columnDef.filterVariant === 'checkbox' ? (jsxRuntime.jsx(MRT_FilterCheckbox, { column: column, table: table })) : columnDef.filterVariant === 'range-slider' ? (jsxRuntime.jsx(MRT_FilterRangeSlider, { header: header, table: table })) : isRangeFilter ? (jsxRuntime.jsx(MRT_FilterRangeFields, { header: header, table: table })) : (jsxRuntime.jsx(MRT_FilterTextField, { header: header, table: table })) })));
3392
- };
3393
-
3394
- const MRT_TableHeadCellFilterLabel = (_a) => {
3395
- var _b, _c;
3396
- var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
3397
- const { options: { columnFilterDisplayMode, icons: { FilterAltIcon }, localization, }, refs: { filterInputRefs }, setShowColumnFilters, } = table;
3398
- const { column } = header;
3399
- const { columnDef } = column;
3400
- const filterValue = column.getFilterValue();
3401
- const [anchorEl, setAnchorEl] = react.useState(null);
3402
- const { currentFilterOption, isMultiSelectFilter, isRangeFilter, isSelectFilter, } = getColumnFilterInfo({ header, table });
3403
- const dropdownOptions = useDropdownOptions({ header, table });
3404
- const getSelectLabel = (index) => getValueAndLabel(dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.find((option) => getValueAndLabel(option).value ===
3405
- (index !== undefined ? filterValue[index] : filterValue))).label;
3406
- const isFilterActive = (Array.isArray(filterValue) && filterValue.some(Boolean)) ||
3407
- (!!filterValue && !Array.isArray(filterValue));
3408
- const filterTooltip = columnFilterDisplayMode === 'popover' && !isFilterActive
3409
- ? (_b = localization.filterByColumn) === null || _b === void 0 ? void 0 : _b.replace('{column}', String(columnDef.header))
3410
- : localization.filteringByColumn
3411
- .replace('{column}', String(columnDef.header))
3412
- .replace('{filterType}', currentFilterOption
3413
- ? // @ts-ignore
3414
- localization[`filter${((_c = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _c === void 0 ? void 0 : _c.toUpperCase()) +
3415
- (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]
3416
- : '')
3417
- .replace('{filterValue}', `"${Array.isArray(filterValue)
3418
- ? filterValue
3419
- .map((value, index) => isMultiSelectFilter ? getSelectLabel(index) : value)
3420
- .join(`" ${isRangeFilter ? localization.and : localization.or} "`)
3421
- : isSelectFilter
3422
- ? getSelectLabel()
3423
- : filterValue}"`)
3424
- .replace('" "', '');
3425
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Grow__default["default"], { in: columnFilterDisplayMode === 'popover' ||
3426
- (!!filterValue && !isRangeFilter) ||
3427
- (isRangeFilter && // @ts-ignore
3428
- (!!(filterValue === null || filterValue === void 0 ? void 0 : filterValue[0]) || !!(filterValue === null || filterValue === void 0 ? void 0 : filterValue[1]))), unmountOnExit: true, children: jsxRuntime.jsx(Box__default["default"], { component: "span", sx: { flex: '0 0' }, children: jsxRuntime.jsx(Tooltip__default["default"], { placement: "top", title: filterTooltip, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ disableRipple: true, onClick: (event) => {
3429
- if (columnFilterDisplayMode === 'popover') {
3430
- setAnchorEl(event.currentTarget);
3431
- }
3432
- else {
3433
- setShowColumnFilters(true);
3434
- }
3435
- queueMicrotask(() => {
3436
- var _a, _b, _c, _d, _e, _f;
3437
- (_c = (_b = (_a = filterInputRefs.current) === null || _a === void 0 ? void 0 : _a[`${column.id}-0`]) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.call(_b);
3438
- (_f = (_e = (_d = filterInputRefs.current) === null || _d === void 0 ? void 0 : _d[`${column.id}-0`]) === null || _e === void 0 ? void 0 : _e.select) === null || _f === void 0 ? void 0 : _f.call(_e);
3439
- });
3440
- event.stopPropagation();
3441
- }, size: "small" }, rest, { sx: (theme) => (Object.assign({ height: '16px', ml: '4px', opacity: isFilterActive ? 1 : 0.3, p: '8px', transform: 'scale(0.75)', transition: 'all 150ms ease-in-out', width: '16px' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: jsxRuntime.jsx(FilterAltIcon, {}) })) }) }) }), columnFilterDisplayMode === 'popover' && (jsxRuntime.jsx(Popover__default["default"], { anchorEl: anchorEl, anchorOrigin: {
3442
- horizontal: 'center',
3443
- vertical: 'top',
3444
- }, disableScrollLock: true, onClick: (event) => event.stopPropagation(), onClose: (event) => {
3445
- //@ts-ignore
3446
- event.stopPropagation();
3447
- setAnchorEl(null);
3448
- }, onKeyDown: (event) => event.key === 'Enter' && setAnchorEl(null), open: !!anchorEl, slotProps: { paper: { sx: { overflow: 'visible' } } }, transformOrigin: {
3449
- horizontal: 'center',
3450
- vertical: 'bottom',
3451
- }, children: jsxRuntime.jsx(Box__default["default"], { sx: { p: '1rem' }, children: jsxRuntime.jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }) }) }))] }));
3452
- };
3453
-
3454
- const MRT_TableHeadCellGrabHandle = (_a) => {
3455
- var { column, table, tableHeadCellRef } = _a, rest = __rest(_a, ["column", "table", "tableHeadCellRef"]);
3456
- const { getState, options: { enableColumnOrdering, muiColumnDragHandleProps }, setColumnOrder, setDraggingColumn, setHoveredColumn, } = table;
3457
- const { columnDef } = column;
3458
- const { columnOrder, draggingColumn, hoveredColumn } = getState();
3459
- const iconButtonProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiColumnDragHandleProps, { column, table })), parseFromValuesOrFunc(columnDef.muiColumnDragHandleProps, {
3460
- column,
3461
- table,
3462
- })), rest);
3463
- const handleDragStart = (event) => {
3464
- var _a;
3465
- (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragStart) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
3466
- setDraggingColumn(column);
3467
- try {
3468
- event.dataTransfer.setDragImage(tableHeadCellRef.current, 0, 0);
3469
- }
3470
- catch (e) {
3471
- console.error(e);
3472
- }
3473
- };
3474
- const handleDragEnd = (event) => {
3475
- var _a;
3476
- (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
3477
- if ((hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
3478
- column.toggleGrouping();
3479
- }
3480
- else if (enableColumnOrdering &&
3481
- hoveredColumn &&
3482
- (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) !== (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id)) {
3483
- setColumnOrder(reorderColumn(column, hoveredColumn, columnOrder));
3484
- }
3485
- setDraggingColumn(null);
3486
- setHoveredColumn(null);
3487
- };
3488
- return (jsxRuntime.jsx(MRT_GrabHandleButton, Object.assign({}, iconButtonProps, { onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table })));
3489
- };
3490
-
3491
- const MRT_TableHeadCellResizeHandle = (_a) => {
3492
- var _b;
3493
- var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
3494
- const { getState, options: { columnResizeDirection, columnResizeMode }, setColumnSizingInfo, } = table;
3495
- const { density } = getState();
3496
- const { column } = header;
3497
- const handler = header.getResizeHandler();
3498
- const mx = density === 'compact'
3499
- ? '-8px'
3500
- : density === 'comfortable'
3501
- ? '-16px'
3502
- : '-24px';
3503
- const lr = column.columnDef.columnDefType === 'display' ? '4px' : '0';
3504
- return (jsxRuntime.jsx(Box__default["default"], { className: "Mui-TableHeadCell-ResizeHandle-Wrapper", onDoubleClick: () => {
3505
- setColumnSizingInfo((old) => (Object.assign(Object.assign({}, old), { isResizingColumn: false })));
3506
- column.resetSize();
3507
- }, onMouseDown: handler, onTouchStart: handler, style: {
3508
- transform: column.getIsResizing() && columnResizeMode === 'onEnd'
3509
- ? `translateX(${(columnResizeDirection === 'rtl' ? -1 : 1) *
3510
- ((_b = getState().columnSizingInfo.deltaOffset) !== null && _b !== void 0 ? _b : 0)}px)`
3511
- : undefined,
3512
- }, sx: (theme) => ({
3513
- '&:active > hr': {
3514
- backgroundColor: theme.palette.info.main,
3515
- opacity: header.subHeaders.length || columnResizeMode === 'onEnd' ? 1 : 0,
3516
- },
3517
- cursor: 'col-resize',
3518
- left: columnResizeDirection === 'rtl' ? lr : undefined,
3519
- ml: columnResizeDirection === 'rtl' ? mx : undefined,
3520
- mr: columnResizeDirection === 'ltr' ? mx : undefined,
3521
- position: 'absolute',
3522
- px: '4px',
3523
- right: columnResizeDirection === 'ltr' ? lr : undefined,
3524
- }), children: jsxRuntime.jsx(Divider__default["default"], { className: "Mui-TableHeadCell-ResizeHandle-Divider", flexItem: true, orientation: "vertical", sx: (theme) => (Object.assign({ borderRadius: '2px', borderWidth: '2px', height: '24px', touchAction: 'none', transform: 'translateX(4px)', transition: column.getIsResizing()
3525
- ? undefined
3526
- : 'all 150ms ease-in-out', userSelect: 'none', zIndex: 4 }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))) }) }));
3527
- };
3528
-
3529
- const MRT_TableHeadCellSortLabel = (_a) => {
3530
- var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
3531
- const { getState, options: { icons: { ArrowDownwardIcon, SyncAltIcon }, localization, }, } = table;
3532
- const { column } = header;
3533
- const { columnDef } = column;
3534
- const { isLoading, showSkeletons, sorting } = getState();
3535
- const isSorted = !!column.getIsSorted();
3536
- const sortTooltip = isLoading || showSkeletons
3537
- ? ''
3538
- : column.getIsSorted()
3539
- ? column.getIsSorted() === 'desc'
3540
- ? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
3541
- : localization.sortedByColumnAsc.replace('{column}', columnDef.header)
3542
- : column.getNextSortingOrder() === 'desc'
3543
- ? localization.sortByColumnDesc.replace('{column}', columnDef.header)
3544
- : localization.sortByColumnAsc.replace('{column}', columnDef.header);
3545
- const direction = isSorted
3546
- ? column.getIsSorted()
3547
- : undefined;
3548
- return (jsxRuntime.jsx(Tooltip__default["default"], { placement: "top", title: sortTooltip, children: jsxRuntime.jsx(Badge__default["default"], { badgeContent: sorting.length > 1 ? column.getSortIndex() + 1 : 0, overlap: "circular", children: jsxRuntime.jsx(TableSortLabel__default["default"], Object.assign({ IconComponent: !isSorted
3549
- ? (props) => (jsxRuntime.jsx(SyncAltIcon, Object.assign({}, props, { direction: direction, style: {
3550
- transform: 'rotate(-90deg) scaleX(0.9) translateX(-1px)',
3551
- } })))
3552
- : ArrowDownwardIcon, active: true, "aria-label": sortTooltip, direction: direction, onClick: (e) => {
3553
- var _a;
3554
- e.stopPropagation();
3555
- (_a = header.column.getToggleSortingHandler()) === null || _a === void 0 ? void 0 : _a(e);
3556
- } }, rest, { sx: (theme) => (Object.assign({ '.MuiTableSortLabel-icon': {
3557
- color: `${theme.palette.mode === 'dark'
3558
- ? theme.palette.text.primary
3559
- : theme.palette.text.secondary} !important`,
3560
- }, flex: '0 0', opacity: isSorted ? 1 : 0.3, transition: 'all 150ms ease-in-out', width: '3ch' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))) })) }) }));
3561
- };
3562
-
3563
- const MRT_TableHeadCell = (_a) => {
3564
- var _b, _c, _d, _f, _g, _h, _j;
3565
- var { columnVirtualizer, header, staticColumnIndex, table } = _a, rest = __rest(_a, ["columnVirtualizer", "header", "staticColumnIndex", "table"]);
3566
- const theme = styles.useTheme();
3567
- const { getState, options: { columnFilterDisplayMode, columnResizeDirection, columnResizeMode, enableKeyboardShortcuts, enableColumnActions, enableColumnDragging, enableColumnOrdering, enableColumnPinning, enableGrouping, enableMultiSort, layoutMode, mrtTheme: { draggingBorderColor }, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
3568
- const { columnSizingInfo, density, draggingColumn, grouping, hoveredColumn, showColumnFilters, } = getState();
3569
- const { column } = header;
3570
- const { columnDef } = column;
3571
- const { columnDefType } = columnDef;
3572
- const tableCellProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableHeadCellProps, { column, table })), parseFromValuesOrFunc(columnDef.muiTableHeadCellProps, {
3573
- column,
3574
- table,
3575
- })), rest);
3576
- const isColumnPinned = enableColumnPinning &&
3577
- columnDef.columnDefType !== 'group' &&
3578
- column.getIsPinned();
3579
- const showColumnActions = (enableColumnActions || columnDef.enableColumnActions) &&
3580
- columnDef.enableColumnActions !== false;
3581
- const showDragHandle = enableColumnDragging !== false &&
3582
- columnDef.enableColumnDragging !== false &&
3583
- (enableColumnDragging ||
3584
- (enableColumnOrdering && columnDef.enableColumnOrdering !== false) ||
3585
- (enableGrouping &&
3586
- columnDef.enableGrouping !== false &&
3587
- !grouping.includes(column.id)));
3588
- const headerPL = react.useMemo(() => {
3589
- let pl = 0;
3590
- if (column.getCanSort())
3591
- pl += 1;
3592
- if (showColumnActions)
3593
- pl += 1.75;
3594
- if (showDragHandle)
3595
- pl += 1.5;
3596
- return pl;
3597
- }, [showColumnActions, showDragHandle]);
3598
- const draggingBorders = react.useMemo(() => {
3599
- const showResizeBorder = columnSizingInfo.isResizingColumn === column.id &&
3600
- columnResizeMode === 'onChange' &&
3601
- !header.subHeaders.length;
3602
- const borderStyle = showResizeBorder
3603
- ? `2px solid ${draggingBorderColor} !important`
3604
- : (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
3605
- ? `1px dashed ${theme.palette.grey[500]}`
3606
- : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
3607
- ? `2px dashed ${draggingBorderColor}`
3608
- : undefined;
3609
- if (showResizeBorder) {
3610
- return columnResizeDirection === 'ltr'
3611
- ? { borderRight: borderStyle }
3612
- : { borderLeft: borderStyle };
3613
- }
3614
- const draggingBorders = borderStyle
3615
- ? {
3616
- borderLeft: borderStyle,
3617
- borderRight: borderStyle,
3618
- borderTop: borderStyle,
3619
- }
3620
- : undefined;
3621
- return draggingBorders;
3622
- }, [draggingColumn, hoveredColumn, columnSizingInfo.isResizingColumn]);
3623
- const handleDragEnter = (_e) => {
3624
- if (enableGrouping && (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
3625
- setHoveredColumn(null);
3626
- }
3627
- if (enableColumnOrdering && draggingColumn && columnDefType !== 'group') {
3628
- setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
3629
- }
3630
- };
3631
- const handleDragOver = (e) => {
3632
- if (columnDef.enableColumnOrdering !== false) {
3633
- e.preventDefault();
3634
- }
3635
- };
3636
- const handleKeyDown = (event) => {
3637
- var _a;
3638
- (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, event);
3639
- cellKeyboardShortcuts({
3640
- event,
3641
- cellValue: header.column.columnDef.header,
3642
- table,
3643
- header,
3644
- });
3645
- };
3646
- const HeaderElement = (_b = parseFromValuesOrFunc(columnDef.Header, {
3647
- column,
3648
- header,
3649
- table,
3650
- })) !== null && _b !== void 0 ? _b : columnDef.header;
3651
- return (jsxRuntime.jsxs(TableCell__default["default"], Object.assign({ align: columnDefType === 'group'
3652
- ? 'center'
3653
- : theme.direction === 'rtl'
3654
- ? 'right'
3655
- : 'left', "aria-sort": column.getIsSorted()
3656
- ? column.getIsSorted() === 'asc'
3657
- ? 'ascending'
3658
- : 'descending'
3659
- : 'none', colSpan: header.colSpan, "data-can-sort": column.getCanSort() || undefined, "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, "data-sort": column.getIsSorted() || undefined, onDragEnter: handleDragEnter, onDragOver: handleDragOver, ref: (node) => {
3660
- var _a;
3661
- if (node) {
3662
- tableHeadCellRefs.current[column.id] = node;
3663
- if (columnDefType !== 'group') {
3664
- (_a = columnVirtualizer === null || columnVirtualizer === void 0 ? void 0 : columnVirtualizer.measureElement) === null || _a === void 0 ? void 0 : _a.call(columnVirtualizer, node);
3665
- }
3666
- }
3667
- }, tabIndex: enableKeyboardShortcuts ? 0 : undefined }, tableCellProps, { onKeyDown: handleKeyDown, sx: (theme) => (Object.assign(Object.assign({ '& :hover': {
3668
- '.MuiButtonBase-root': {
3669
- opacity: 1,
3670
- },
3671
- }, flexDirection: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'column' : undefined, fontWeight: 'bold', overflow: 'visible', p: density === 'compact'
3672
- ? '0.5rem'
3673
- : density === 'comfortable'
3674
- ? columnDefType === 'display'
3675
- ? '0.75rem'
3676
- : '1rem'
3677
- : columnDefType === 'display'
3678
- ? '1rem 1.25rem'
3679
- : '1.5rem', pb: columnDefType === 'display'
3680
- ? 0
3681
- : showColumnFilters || density === 'compact'
3682
- ? '0.4rem'
3683
- : '0.6rem', pt: columnDefType === 'group' || density === 'compact'
3684
- ? '0.25rem'
3685
- : density === 'comfortable'
3686
- ? '.75rem'
3687
- : '1.25rem', userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined, verticalAlign: 'top' }, getCommonMRTCellStyles({
3688
- column,
3689
- header,
3690
- table,
3691
- tableCellProps,
3692
- theme,
3693
- })), draggingBorders)), children: [header.isPlaceholder
3694
- ? null
3695
- : ((_c = tableCellProps.children) !== null && _c !== void 0 ? _c : (jsxRuntime.jsxs(Box__default["default"], { className: "Mui-TableHeadCell-Content", sx: {
3696
- alignItems: 'center',
3697
- display: 'flex',
3698
- flexDirection: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right' ? 'row-reverse' : 'row',
3699
- justifyContent: columnDefType === 'group' ||
3700
- (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'center'
3701
- ? 'center'
3702
- : column.getCanResize()
3703
- ? 'space-between'
3704
- : 'flex-start',
3705
- position: 'relative',
3706
- width: '100%',
3707
- }, children: [jsxRuntime.jsxs(Box__default["default"], { className: "Mui-TableHeadCell-Content-Labels", onClick: column.getToggleSortingHandler(), sx: {
3708
- alignItems: 'center',
3709
- cursor: column.getCanSort() && columnDefType !== 'group'
3710
- ? 'pointer'
3711
- : undefined,
3712
- display: 'flex',
3713
- flexDirection: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right' ? 'row-reverse' : 'row',
3714
- overflow: columnDefType === 'data' ? 'hidden' : undefined,
3715
- pl: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'center'
3716
- ? `${headerPL}rem`
3717
- : undefined,
3718
- }, children: [jsxRuntime.jsx(Box__default["default"], { className: "Mui-TableHeadCell-Content-Wrapper", sx: {
3719
- '&:hover': {
3720
- textOverflow: 'clip',
3721
- },
3722
- minWidth: `${Math.min((_f = (_d = columnDef.header) === null || _d === void 0 ? void 0 : _d.length) !== null && _f !== void 0 ? _f : 0, 4)}ch`,
3723
- overflow: columnDefType === 'data' ? 'hidden' : undefined,
3724
- textOverflow: 'ellipsis',
3725
- whiteSpace: ((_h = (_g = columnDef.header) === null || _g === void 0 ? void 0 : _g.length) !== null && _h !== void 0 ? _h : 0) < 20
3726
- ? 'nowrap'
3727
- : 'normal',
3728
- }, children: HeaderElement }), column.getCanFilter() && (jsxRuntime.jsx(MRT_TableHeadCellFilterLabel, { header: header, table: table })), column.getCanSort() && (jsxRuntime.jsx(MRT_TableHeadCellSortLabel, { header: header, table: table }))] }), columnDefType !== 'group' && (jsxRuntime.jsxs(Box__default["default"], { className: "Mui-TableHeadCell-Content-Actions", sx: {
3729
- whiteSpace: 'nowrap',
3730
- }, children: [showDragHandle && (jsxRuntime.jsx(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: {
3731
- current: (_j = tableHeadCellRefs.current) === null || _j === void 0 ? void 0 : _j[column.id],
3732
- } })), showColumnActions && (jsxRuntime.jsx(MRT_TableHeadCellColumnActionsButton, { header: header, table: table }))] })), column.getCanResize() && (jsxRuntime.jsx(MRT_TableHeadCellResizeHandle, { header: header, table: table }))] }))), columnFilterDisplayMode === 'subheader' && column.getCanFilter() && (jsxRuntime.jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }))] })));
3733
- };
3734
-
3735
- const MRT_TableHeadRow = (_a) => {
3736
- var { columnVirtualizer, headerGroup, table } = _a, rest = __rest(_a, ["columnVirtualizer", "headerGroup", "table"]);
3737
- const { options: { enableStickyHeader, layoutMode, mrtTheme: { baseBackgroundColor }, muiTableHeadRowProps, }, } = table;
3738
- const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
3739
- const tableRowProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableHeadRowProps, {
3740
- headerGroup,
3741
- table,
3742
- })), rest);
3743
- return (jsxRuntime.jsxs(TableRow__default["default"], Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: baseBackgroundColor, boxShadow: `4px 0 8px ${styles.alpha(theme.palette.common.black, 0.1)}`, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, position: enableStickyHeader && layoutMode === 'semantic'
3744
- ? 'sticky'
3745
- : 'relative', top: 0 }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme))), children: [virtualPaddingLeft ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : headerGroup.headers).map((headerOrVirtualHeader, staticColumnIndex) => {
3746
- let header = headerOrVirtualHeader;
3747
- if (columnVirtualizer) {
3748
- staticColumnIndex = headerOrVirtualHeader
3749
- .index;
3750
- header = headerGroup.headers[staticColumnIndex];
3751
- }
3752
- return header ? (jsxRuntime.jsx(MRT_TableHeadCell, { columnVirtualizer: columnVirtualizer, header: header, staticColumnIndex: staticColumnIndex, table: table }, header.id)) : null;
3753
- }), virtualPaddingRight ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })));
3754
- };
3755
-
3756
- const MRT_ToolbarAlertBanner = (_a) => {
3757
- var _b, _c, _d;
3758
- var { stackAlertBanner, table } = _a, rest = __rest(_a, ["stackAlertBanner", "table"]);
3759
- const { getFilteredSelectedRowModel, getPrePaginationRowModel, getState, options: { enableRowSelection, enableSelectAll, localization, manualPagination, muiToolbarAlertBannerChipProps, muiToolbarAlertBannerProps, positionToolbarAlertBanner, renderToolbarAlertBannerContent, rowCount, }, refs: { tablePaperRef }, } = table;
3760
- const { density, grouping, rowSelection, showAlertBanner } = getState();
3761
- const alertProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiToolbarAlertBannerProps, {
3762
- table,
3763
- })), rest);
3764
- const chipProps = parseFromValuesOrFunc(muiToolbarAlertBannerChipProps, {
3765
- table,
3766
- });
3767
- const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().flatRows.length;
3768
- const selectedRowCount = react.useMemo(() => manualPagination
3769
- ? Object.values(rowSelection).filter(Boolean).length
3770
- : getFilteredSelectedRowModel().rows.length, [rowSelection, totalRowCount, manualPagination]);
3771
- const selectedAlert = selectedRowCount > 0 ? (jsxRuntime.jsxs(Stack__default["default"], { alignItems: "center", direction: "row", gap: "16px", children: [(_c = (_b = localization.selectedCountOfRowCountRowsSelected) === null || _b === void 0 ? void 0 : _b.replace('{selectedCount}', selectedRowCount.toLocaleString())) === null || _c === void 0 ? void 0 : _c.replace('{rowCount}', totalRowCount.toString()), jsxRuntime.jsx(Button__default["default"], { onClick: (event) => getMRT_SelectAllHandler({ table })(event, false, true), size: "small", sx: { p: '2px' }, children: localization.clearSelection })] })) : null;
3772
- const groupedAlert = grouping.length > 0 ? (jsxRuntime.jsxs("span", { children: [localization.groupedBy, ' ', grouping.map((columnId, index) => (jsxRuntime.jsxs(react.Fragment, { children: [index > 0 ? localization.thenBy : '', jsxRuntime.jsx(Chip__default["default"], Object.assign({ label: table.getColumn(columnId).columnDef.header, onDelete: () => table.getColumn(columnId).toggleGrouping() }, chipProps))] }, `${index}-${columnId}`)))] })) : null;
3773
- return (jsxRuntime.jsx(Collapse__default["default"], { in: showAlertBanner || !!selectedAlert || !!groupedAlert, timeout: stackAlertBanner ? 200 : 0, children: jsxRuntime.jsx(Alert__default["default"], Object.assign({ color: "info", icon: false }, alertProps, { sx: (theme) => {
3774
- var _a, _b;
3775
- return (Object.assign({ '& .MuiAlert-message': {
3776
- maxWidth: `calc(${(_b = (_a = tablePaperRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 360}px - 1rem)`,
3777
- width: '100%',
3778
- }, borderRadius: 0, fontSize: '1rem', left: 0, mb: stackAlertBanner
3779
- ? 0
3780
- : positionToolbarAlertBanner === 'bottom'
3781
- ? '-1rem'
3782
- : undefined, p: 0, position: 'relative', right: 0, top: 0, width: '100%', zIndex: 2 }, parseFromValuesOrFunc(alertProps === null || alertProps === void 0 ? void 0 : alertProps.sx, theme)));
3783
- }, children: (_d = renderToolbarAlertBannerContent === null || renderToolbarAlertBannerContent === void 0 ? void 0 : renderToolbarAlertBannerContent({
3784
- groupedAlert,
3785
- selectedAlert,
3786
- table,
3787
- })) !== null && _d !== void 0 ? _d : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(alertProps === null || alertProps === void 0 ? void 0 : alertProps.title) && jsxRuntime.jsx(AlertTitle__default["default"], { children: alertProps.title }), jsxRuntime.jsxs(Stack__default["default"], { sx: {
3788
- p: positionToolbarAlertBanner !== 'head-overlay'
3789
- ? '0.5rem 1rem'
3790
- : density === 'spacious'
3791
- ? '0.75rem 1.25rem'
3792
- : density === 'comfortable'
3793
- ? '0.5rem 0.75rem'
3794
- : '0.25rem 0.5rem',
3795
- }, children: [alertProps === null || alertProps === void 0 ? void 0 : alertProps.children, (alertProps === null || alertProps === void 0 ? void 0 : alertProps.children) && (selectedAlert || groupedAlert) && (jsxRuntime.jsx("br", {})), jsxRuntime.jsxs(Box__default["default"], { sx: { display: 'flex' }, children: [enableRowSelection &&
3796
- enableSelectAll &&
3797
- positionToolbarAlertBanner === 'head-overlay' && (jsxRuntime.jsx(MRT_SelectCheckbox, { table: table })), ' ', selectedAlert] }), selectedAlert && groupedAlert && jsxRuntime.jsx("br", {}), groupedAlert] })] })) })) }));
3798
- };
3799
-
3800
- const MRT_TableHead = (_a) => {
3801
- var { columnVirtualizer, table } = _a, rest = __rest(_a, ["columnVirtualizer", "table"]);
3802
- const { getState, options: { enableStickyHeader, layoutMode, muiTableHeadProps, positionToolbarAlertBanner, }, refs: { tableHeadRef }, } = table;
3803
- const { isFullScreen, showAlertBanner } = getState();
3804
- const tableHeadProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableHeadProps, { table })), rest);
3805
- const stickyHeader = enableStickyHeader || isFullScreen;
3806
- return (jsxRuntime.jsx(TableHead__default["default"], Object.assign({}, tableHeadProps, { ref: (ref) => {
3807
- tableHeadRef.current = ref;
3808
- if (tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.ref) {
3809
- // @ts-ignore
3810
- tableHeadProps.ref.current = ref;
3811
- }
3812
- }, sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, opacity: 0.97, position: stickyHeader ? 'sticky' : 'relative', top: stickyHeader && (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 0 : undefined, zIndex: stickyHeader ? 2 : undefined }, parseFromValuesOrFunc(tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx, theme))), children: positionToolbarAlertBanner === 'head-overlay' &&
3813
- (showAlertBanner || table.getSelectedRowModel().rows.length > 0) ? (jsxRuntime.jsx("tr", { style: {
3814
- display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
3815
- }, children: jsxRuntime.jsx("th", { colSpan: table.getVisibleLeafColumns().length, style: {
3816
- display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
3817
- padding: 0,
3818
- }, children: jsxRuntime.jsx(MRT_ToolbarAlertBanner, { table: table }) }) })) : (table
3819
- .getHeaderGroups()
3820
- .map((headerGroup) => (jsxRuntime.jsx(MRT_TableHeadRow, { columnVirtualizer: columnVirtualizer, headerGroup: headerGroup, table: table }, headerGroup.id)))) })));
3821
- };
3822
-
3823
- const MRT_Table = (_a) => {
3824
- var { table } = _a, rest = __rest(_a, ["table"]);
3825
- const { getFlatHeaders, getState, options: { columns, enableStickyHeader, enableTableFooter, enableTableHead, layoutMode, memoMode, muiTableProps, renderCaption, }, } = table;
3826
- const { columnSizing, columnSizingInfo, columnVisibility, isFullScreen } = getState();
3827
- const tableProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableProps, { table })), rest);
3828
- const Caption = parseFromValuesOrFunc(renderCaption, { table });
3829
- const columnSizeVars = react.useMemo(() => {
3830
- const headers = getFlatHeaders();
3831
- const colSizes = {};
3832
- for (let i = 0; i < headers.length; i++) {
3833
- const header = headers[i];
3834
- const colSize = header.getSize();
3835
- colSizes[`--header-${parseCSSVarId(header.id)}-size`] = colSize;
3836
- colSizes[`--col-${parseCSSVarId(header.column.id)}-size`] = colSize;
3837
- }
3838
- return colSizes;
3839
- }, [columns, columnSizing, columnSizingInfo, columnVisibility]);
3840
- const columnVirtualizer = useMRT_ColumnVirtualizer(table);
3841
- const commonTableGroupProps = {
3842
- columnVirtualizer,
3843
- table,
3844
- };
3845
- return (jsxRuntime.jsxs(Table__default["default"], Object.assign({ stickyHeader: enableStickyHeader || isFullScreen }, tableProps, { style: Object.assign(Object.assign({}, columnSizeVars), tableProps === null || tableProps === void 0 ? void 0 : tableProps.style), sx: (theme) => (Object.assign({ borderCollapse: 'separate', display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, position: 'relative' }, parseFromValuesOrFunc(tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx, theme))), children: [!!Caption && jsxRuntime.jsx("caption", { children: Caption }), enableTableHead && jsxRuntime.jsx(MRT_TableHead, Object.assign({}, commonTableGroupProps)), memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (jsxRuntime.jsx(Memo_MRT_TableBody, Object.assign({}, commonTableGroupProps))) : (jsxRuntime.jsx(MRT_TableBody, Object.assign({}, commonTableGroupProps))), enableTableFooter && jsxRuntime.jsx(MRT_TableFooter, Object.assign({}, commonTableGroupProps))] })));
3846
- };
3847
-
3848
- const MRT_TableLoadingOverlay = (_a) => {
3849
- var _b;
3850
- var { table } = _a, rest = __rest(_a, ["table"]);
3851
- const { options: { id, localization, mrtTheme: { baseBackgroundColor }, muiCircularProgressProps, }, } = table;
3852
- const circularProgressProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiCircularProgressProps, { table })), rest);
3853
- return (jsxRuntime.jsx(Box__default["default"], { sx: {
3854
- alignItems: 'center',
3855
- backgroundColor: styles.alpha(baseBackgroundColor, 0.5),
3856
- bottom: 0,
3857
- display: 'flex',
3858
- justifyContent: 'center',
3859
- left: 0,
3860
- maxHeight: '100vh',
3861
- position: 'absolute',
3862
- right: 0,
3863
- top: 0,
3864
- width: '100%',
3865
- zIndex: 3,
3866
- }, children: (_b = circularProgressProps === null || circularProgressProps === void 0 ? void 0 : circularProgressProps.Component) !== null && _b !== void 0 ? _b : (jsxRuntime.jsx(CircularProgress__default["default"], Object.assign({ "aria-label": localization.noRecordsToDisplay, id: `mrt-progress-${id}` }, circularProgressProps))) }));
3867
- };
3868
-
3869
- const MRT_CellActionMenu = (_a) => {
3870
- var _b, _c;
3871
- var { table } = _a, rest = __rest(_a, ["table"]);
3872
- const { getState, options: { editDisplayMode, enableClickToCopy, enableEditing, icons: { ContentCopy, EditIcon }, localization, mrtTheme: { menuBackgroundColor }, renderCellActionMenuItems, }, refs: { actionCellRef }, } = table;
3873
- const { actionCell, density } = getState();
3874
- const cell = actionCell;
3875
- const { row } = cell;
3876
- const { column } = cell;
3877
- const { columnDef } = column;
3878
- const handleClose = (event) => {
3879
- event === null || event === void 0 ? void 0 : event.stopPropagation();
3880
- table.setActionCell(null);
3881
- actionCellRef.current = null;
3882
- };
3883
- const internalMenuItems = [
3884
- (parseFromValuesOrFunc(enableClickToCopy, cell) === 'context-menu' ||
3885
- parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) ===
3886
- 'context-menu') && (jsxRuntime.jsx(MRT_ActionMenuItem, { icon: jsxRuntime.jsx(ContentCopy, {}), label: localization.copy, onClick: (event) => {
3887
- event.stopPropagation();
3888
- navigator.clipboard.writeText(cell.getValue());
3889
- handleClose();
3890
- }, table: table }, 'mrt-copy')),
3891
- parseFromValuesOrFunc(enableEditing, row) && editDisplayMode === 'cell' && (jsxRuntime.jsx(MRT_ActionMenuItem, { icon: jsxRuntime.jsx(EditIcon, {}), label: localization.edit, onClick: () => {
3892
- openEditingCell({ cell, table });
3893
- handleClose();
3894
- }, table: table }, 'mrt-edit')),
3895
- ].filter(Boolean);
3896
- const renderActionProps = {
3897
- cell,
3898
- closeMenu: handleClose,
3899
- column,
3900
- internalMenuItems,
3901
- row,
3902
- table,
3903
- };
3904
- const menuItems = (_c = (_b = columnDef.renderCellActionMenuItems) === null || _b === void 0 ? void 0 : _b.call(columnDef, renderActionProps)) !== null && _c !== void 0 ? _c : renderCellActionMenuItems === null || renderCellActionMenuItems === void 0 ? void 0 : renderCellActionMenuItems(renderActionProps);
3905
- return ((!!(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) || !!(internalMenuItems === null || internalMenuItems === void 0 ? void 0 : internalMenuItems.length)) && (jsxRuntime.jsx(Menu__default["default"], Object.assign({ MenuListProps: {
3906
- dense: density === 'compact',
3907
- sx: {
3908
- backgroundColor: menuBackgroundColor,
3909
- },
3910
- }, anchorEl: actionCellRef.current, disableScrollLock: true, onClick: (event) => event.stopPropagation(), onClose: handleClose, open: !!cell, transformOrigin: { horizontal: -100, vertical: 8 } }, rest, { children: menuItems !== null && menuItems !== void 0 ? menuItems : internalMenuItems }))));
3911
- };
3912
-
3913
- const MRT_EditRowModal = (_a) => {
3914
- var _b;
3915
- var { open, table } = _a, rest = __rest(_a, ["open", "table"]);
3916
- const { getState, options: { localization, muiCreateRowModalProps, muiEditRowDialogProps, onCreatingRowCancel, onEditingRowCancel, renderCreateRowDialogContent, renderEditRowDialogContent, }, setCreatingRow, setEditingRow, } = table;
3917
- const { creatingRow, editingRow } = getState();
3918
- const row = (creatingRow !== null && creatingRow !== void 0 ? creatingRow : editingRow);
3919
- const dialogProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiEditRowDialogProps, { row, table })), (creatingRow &&
3920
- parseFromValuesOrFunc(muiCreateRowModalProps, { row, table }))), rest);
3921
- const internalEditComponents = row
3922
- .getAllCells()
3923
- .filter((cell) => cell.column.columnDef.columnDefType === 'data')
3924
- .map((cell) => (jsxRuntime.jsx(MRT_EditCellTextField, { cell: cell, table: table }, cell.id)));
3925
- return (jsxRuntime.jsx(Dialog__default["default"], Object.assign({ fullWidth: true, maxWidth: "xs", onClose: (event, reason) => {
3926
- var _a;
3927
- if (creatingRow) {
3928
- onCreatingRowCancel === null || onCreatingRowCancel === void 0 ? void 0 : onCreatingRowCancel({ row, table });
3929
- setCreatingRow(null);
3930
- }
3931
- else {
3932
- onEditingRowCancel === null || onEditingRowCancel === void 0 ? void 0 : onEditingRowCancel({ row, table });
3933
- setEditingRow(null);
3934
- }
3935
- row._valuesCache = {}; //reset values cache
3936
- (_a = dialogProps.onClose) === null || _a === void 0 ? void 0 : _a.call(dialogProps, event, reason);
3937
- }, open: open }, dialogProps, { children: (_b = ((creatingRow &&
3938
- (renderCreateRowDialogContent === null || renderCreateRowDialogContent === void 0 ? void 0 : renderCreateRowDialogContent({
3939
- internalEditComponents,
3940
- row,
3941
- table,
3942
- }))) ||
3943
- (renderEditRowDialogContent === null || renderEditRowDialogContent === void 0 ? void 0 : renderEditRowDialogContent({
3944
- internalEditComponents,
3945
- row,
3946
- table,
3947
- })))) !== null && _b !== void 0 ? _b : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DialogTitle__default["default"], { sx: { textAlign: 'center' }, children: localization.edit }), jsxRuntime.jsx(DialogContent__default["default"], { children: jsxRuntime.jsx("form", { onSubmit: (e) => e.preventDefault(), children: jsxRuntime.jsx(Stack__default["default"], { sx: {
3948
- gap: '32px',
3949
- paddingTop: '16px',
3950
- width: '100%',
3951
- }, children: internalEditComponents }) }) }), jsxRuntime.jsx(DialogActions__default["default"], { sx: { p: '1.25rem' }, children: jsxRuntime.jsx(MRT_EditActionButtons, { row: row, table: table, variant: "text" }) })] })) })));
3952
- };
3953
-
3954
- const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? react.useLayoutEffect : react.useEffect;
3955
- const MRT_TableContainer = (_a) => {
3956
- var { table } = _a, rest = __rest(_a, ["table"]);
3957
- const { getState, options: { createDisplayMode, editDisplayMode, enableCellActions, enableStickyHeader, muiTableContainerProps, }, refs: { bottomToolbarRef, tableContainerRef, topToolbarRef }, } = table;
3958
- const { actionCell, creatingRow, editingRow, isFullScreen, isLoading, showLoadingOverlay, } = getState();
3959
- const loading = showLoadingOverlay !== false && (isLoading || showLoadingOverlay);
3960
- const [totalToolbarHeight, setTotalToolbarHeight] = react.useState(0);
3961
- const tableContainerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableContainerProps, {
3962
- table,
3963
- })), rest);
3964
- useIsomorphicLayoutEffect(() => {
3965
- var _a, _b, _c, _d;
3966
- const topToolbarHeight = typeof document !== 'undefined'
3967
- ? ((_b = (_a = topToolbarRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0)
3968
- : 0;
3969
- const bottomToolbarHeight = typeof document !== 'undefined'
3970
- ? ((_d = (_c = bottomToolbarRef === null || bottomToolbarRef === void 0 ? void 0 : bottomToolbarRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) !== null && _d !== void 0 ? _d : 0)
3971
- : 0;
3972
- setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
3973
- });
3974
- const createModalOpen = createDisplayMode === 'modal' && creatingRow;
3975
- const editModalOpen = editDisplayMode === 'modal' && editingRow;
3976
- return (jsxRuntime.jsxs(TableContainer__default["default"], Object.assign({ "aria-busy": loading, "aria-describedby": loading ? 'mrt-progress' : undefined }, tableContainerProps, { ref: (node) => {
3977
- if (node) {
3978
- tableContainerRef.current = node;
3979
- if (tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.ref) {
3980
- //@ts-ignore
3981
- tableContainerProps.ref.current = node;
3982
- }
3983
- }
3984
- }, style: Object.assign({ maxHeight: isFullScreen
3985
- ? `calc(100vh - ${totalToolbarHeight}px)`
3986
- : undefined }, tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.style), sx: (theme) => (Object.assign({ maxHeight: enableStickyHeader
3987
- ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 9999px)`
3988
- : undefined, maxWidth: '100%', overflow: 'auto', position: 'relative' }, parseFromValuesOrFunc(tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.sx, theme))), children: [loading ? jsxRuntime.jsx(MRT_TableLoadingOverlay, { table: table }) : null, jsxRuntime.jsx(MRT_Table, { table: table }), (createModalOpen || editModalOpen) && (jsxRuntime.jsx(MRT_EditRowModal, { open: true, table: table })), enableCellActions && actionCell && jsxRuntime.jsx(MRT_CellActionMenu, { table: table })] })));
3989
- };
3990
-
3991
- const MRT_LinearProgressBar = (_a) => {
3992
- var { isTopToolbar, table } = _a, rest = __rest(_a, ["isTopToolbar", "table"]);
3993
- const { getState, options: { muiLinearProgressProps }, } = table;
3994
- const { isSaving, showProgressBars } = getState();
3995
- const linearProgressProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiLinearProgressProps, {
3996
- isTopToolbar,
3997
- table,
3998
- })), rest);
3999
- return (jsxRuntime.jsx(Collapse__default["default"], { in: showProgressBars !== false && (showProgressBars || isSaving), mountOnEnter: true, sx: {
4000
- bottom: isTopToolbar ? 0 : undefined,
4001
- position: 'absolute',
4002
- top: !isTopToolbar ? 0 : undefined,
4003
- width: '100%',
4004
- }, unmountOnExit: true, children: jsxRuntime.jsx(LinearProgress__default["default"], Object.assign({ "aria-busy": "true", "aria-label": "Loading", sx: { position: 'relative' } }, linearProgressProps)) }));
4005
- };
4006
-
4007
- const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100];
4008
- const MRT_TablePagination = (_a) => {
4009
- var { position = 'bottom', table } = _a, rest = __rest(_a, ["position", "table"]);
4010
- const theme = styles.useTheme();
4011
- const isMobile = useMediaQuery__default["default"]('(max-width: 720px)');
4012
- const { getState, options: { enableToolbarInternalActions, icons: { ChevronLeftIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon }, id, localization, muiPaginationProps, paginationDisplayMode, }, } = table;
4013
- const { pagination: { pageIndex = 0, pageSize = 10 }, } = getState();
4014
- const paginationProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiPaginationProps, {
4015
- table,
4016
- })), rest);
4017
- const totalRowCount = table.getRowCount();
4018
- const numberOfPages = table.getPageCount();
4019
- const showFirstLastPageButtons = numberOfPages > 2;
4020
- const firstRowIndex = pageIndex * pageSize;
4021
- const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
4022
- const _b = paginationProps !== null && paginationProps !== void 0 ? paginationProps : {}, { SelectProps = {}, disabled = false, rowsPerPageOptions = defaultRowsPerPage, showFirstButton = showFirstLastPageButtons, showLastButton = showFirstLastPageButtons, showRowsPerPage = true } = _b, restPaginationProps = __rest(_b, ["SelectProps", "disabled", "rowsPerPageOptions", "showFirstButton", "showLastButton", "showRowsPerPage"]);
4023
- const disableBack = pageIndex <= 0 || disabled;
4024
- const disableNext = lastRowIndex >= totalRowCount || disabled;
4025
- if (isMobile && (SelectProps === null || SelectProps === void 0 ? void 0 : SelectProps.native) !== false) {
4026
- SelectProps.native = true;
4027
- }
4028
- const tooltipProps = getCommonTooltipProps();
4029
- return (jsxRuntime.jsxs(Box__default["default"], { className: "MuiTablePagination-root", sx: {
4030
- alignItems: 'center',
4031
- display: 'flex',
4032
- flexWrap: 'wrap',
4033
- gap: '8px',
4034
- justifyContent: { md: 'space-between', sm: 'center' },
4035
- justifySelf: 'flex-end',
4036
- mt: position === 'top' && enableToolbarInternalActions
4037
- ? '3rem'
4038
- : undefined,
4039
- position: 'relative',
4040
- px: '8px',
4041
- py: '12px',
4042
- zIndex: 2,
4043
- }, children: [showRowsPerPage && (jsxRuntime.jsxs(Box__default["default"], { sx: { alignItems: 'center', display: 'flex', gap: '8px' }, children: [jsxRuntime.jsx(InputLabel__default["default"], { htmlFor: `mrt-rows-per-page-${id}`, sx: { mb: 0 }, children: localization.rowsPerPage }), jsxRuntime.jsx(Select__default["default"], Object.assign({ MenuProps: { disableScrollLock: true }, disableUnderline: true, disabled: disabled, inputProps: {
4044
- 'aria-label': localization.rowsPerPage,
4045
- id: `mrt-rows-per-page-${id}`,
4046
- }, label: localization.rowsPerPage, onChange: (event) => table.setPageSize(+event.target.value), sx: { mb: 0 }, value: pageSize, variant: "standard" }, SelectProps, { children: rowsPerPageOptions.map((option) => {
4047
- var _a;
4048
- const value = typeof option !== 'number' ? option.value : option;
4049
- const label = typeof option !== 'number' ? option.label : `${option}`;
4050
- return ((_a = SelectProps === null || SelectProps === void 0 ? void 0 : SelectProps.children) !== null && _a !== void 0 ? _a : ((SelectProps === null || SelectProps === void 0 ? void 0 : SelectProps.native) ? (jsxRuntime.jsx("option", { value: value, children: label }, value)) : (jsxRuntime.jsx(MenuItem__default["default"], { sx: { m: 0 }, value: value, children: label }, value))));
4051
- }) }))] })), paginationDisplayMode === 'pages' ? (jsxRuntime.jsx(Pagination__default["default"], Object.assign({ count: numberOfPages, disabled: disabled, onChange: (_e, newPageIndex) => table.setPageIndex(newPageIndex - 1), page: pageIndex + 1, renderItem: (item) => (jsxRuntime.jsx(PaginationItem__default["default"], Object.assign({ slots: {
4052
- first: FirstPageIcon,
4053
- last: LastPageIcon,
4054
- next: ChevronRightIcon,
4055
- previous: ChevronLeftIcon,
4056
- } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, restPaginationProps))) : paginationDisplayMode === 'default' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography__default["default"], { align: "center", component: "span", sx: { m: '0 4px', minWidth: '8ch' }, variant: "body2", children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}` }), jsxRuntime.jsxs(Box__default["default"], { gap: "xs", children: [showFirstButton && (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, tooltipProps, { title: localization.goToFirstPage, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToFirstPage, disabled: disableBack, onClick: () => table.firstPage(), size: "small", children: jsxRuntime.jsx(FirstPageIcon, Object.assign({}, flipIconStyles(theme))) }) }) }))), jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, tooltipProps, { title: localization.goToPreviousPage, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToPreviousPage, disabled: disableBack, onClick: () => table.previousPage(), size: "small", children: jsxRuntime.jsx(ChevronLeftIcon, Object.assign({}, flipIconStyles(theme))) }) }) })), jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, tooltipProps, { title: localization.goToNextPage, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToNextPage, disabled: disableNext, onClick: () => table.nextPage(), size: "small", children: jsxRuntime.jsx(ChevronRightIcon, Object.assign({}, flipIconStyles(theme))) }) }) })), showLastButton && (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, tooltipProps, { title: localization.goToLastPage, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToLastPage, disabled: disableNext, onClick: () => table.lastPage(), size: "small", children: jsxRuntime.jsx(LastPageIcon, Object.assign({}, flipIconStyles(theme))) }) }) })))] })] })) : null] }));
4057
- };
4058
-
4059
- const MRT_ToolbarDropZone = (_a) => {
4060
- var _b, _c;
4061
- var { table } = _a, rest = __rest(_a, ["table"]);
4062
- const { getState, options: { enableGrouping, localization }, setHoveredColumn, setShowToolbarDropZone, } = table;
4063
- const { draggingColumn, grouping, hoveredColumn, showToolbarDropZone } = getState();
4064
- const handleDragEnter = (_event) => {
4065
- setHoveredColumn({ id: 'drop-zone' });
4066
- };
4067
- const handleDragOver = (e) => {
4068
- e.preventDefault();
4069
- };
4070
- react.useEffect(() => {
4071
- var _a;
4072
- if (((_a = table.options.state) === null || _a === void 0 ? void 0 : _a.showToolbarDropZone) !== undefined) {
4073
- setShowToolbarDropZone(!!enableGrouping &&
4074
- !!draggingColumn &&
4075
- draggingColumn.columnDef.enableGrouping !== false &&
4076
- !grouping.includes(draggingColumn.id));
4077
- }
4078
- }, [enableGrouping, draggingColumn, grouping]);
4079
- return (jsxRuntime.jsx(Fade__default["default"], { in: showToolbarDropZone, children: jsxRuntime.jsx(Box__default["default"], Object.assign({ className: "Mui-ToolbarDropZone", onDragEnter: handleDragEnter, onDragOver: handleDragOver }, rest, { sx: (theme) => (Object.assign({ alignItems: 'center', backdropFilter: 'blur(4px)', backgroundColor: styles.alpha(theme.palette.info.main, (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone' ? 0.2 : 0.1), border: `dashed ${theme.palette.info.main} 2px`, boxSizing: 'border-box', display: 'flex', height: '100%', justifyContent: 'center', position: 'absolute', width: '100%', zIndex: 4 }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: jsxRuntime.jsx(Typography__default["default"], { fontStyle: "italic", children: localization.dropToGroupBy.replace('{column}', (_c = (_b = draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.columnDef) === null || _b === void 0 ? void 0 : _b.header) !== null && _c !== void 0 ? _c : '') }) })) }));
4080
- };
4081
-
4082
- const MRT_BottomToolbar = (_a) => {
4083
- var { table } = _a, rest = __rest(_a, ["table"]);
4084
- const { getState, options: { enablePagination, muiBottomToolbarProps, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderBottomToolbarCustomActions, }, refs: { bottomToolbarRef }, } = table;
4085
- const { isFullScreen } = getState();
4086
- const isMobile = useMediaQuery__default["default"]('(max-width:720px)');
4087
- const toolbarProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiBottomToolbarProps, { table })), rest);
4088
- const stackAlertBanner = isMobile || !!renderBottomToolbarCustomActions;
4089
- return (jsxRuntime.jsxs(Box__default["default"], Object.assign({}, toolbarProps, { ref: (node) => {
4090
- if (node) {
4091
- bottomToolbarRef.current = node;
4092
- if (toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.ref) {
4093
- // @ts-ignore
4094
- toolbarProps.ref.current = node;
4095
- }
4096
- }
4097
- }, sx: (theme) => (Object.assign(Object.assign(Object.assign({}, getCommonToolbarStyles({ table, theme })), { bottom: isFullScreen ? '0' : undefined, boxShadow: `0 1px 2px -1px ${styles.alpha(theme.palette.grey[700], 0.5)} inset`, left: 0, position: isFullScreen ? 'fixed' : 'relative', right: 0 }), parseFromValuesOrFunc(toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx, theme))), children: [jsxRuntime.jsx(MRT_LinearProgressBar, { isTopToolbar: false, table: table }), positionToolbarAlertBanner === 'bottom' && (jsxRuntime.jsx(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })), ['both', 'bottom'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (jsxRuntime.jsx(MRT_ToolbarDropZone, { table: table })), jsxRuntime.jsxs(Box__default["default"], { sx: {
4098
- alignItems: 'center',
4099
- boxSizing: 'border-box',
4100
- display: 'flex',
4101
- justifyContent: 'space-between',
4102
- p: '0.5rem',
4103
- width: '100%',
4104
- }, children: [renderBottomToolbarCustomActions ? (renderBottomToolbarCustomActions({ table })) : (jsxRuntime.jsx("span", {})), jsxRuntime.jsx(Box__default["default"], { sx: {
4105
- display: 'flex',
4106
- justifyContent: 'flex-end',
4107
- position: stackAlertBanner ? 'relative' : 'absolute',
4108
- right: 0,
4109
- top: 0,
4110
- }, children: enablePagination &&
4111
- ['both', 'bottom'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (jsxRuntime.jsx(MRT_TablePagination, { position: "bottom", table: table })) })] })] })));
4112
- };
4113
-
4114
- const MRT_ColumnPinningButtons = (_a) => {
4115
- var { column, table } = _a, rest = __rest(_a, ["column", "table"]);
4116
- const { options: { icons: { PushPinIcon }, localization, }, } = table;
4117
- const handlePinColumn = (pinDirection) => {
4118
- column.pin(pinDirection);
4119
- };
4120
- return (jsxRuntime.jsx(Box__default["default"], Object.assign({}, rest, { sx: (theme) => (Object.assign({ minWidth: '70px', textAlign: 'center' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: column.getIsPinned() ? (jsxRuntime.jsx(Tooltip__default["default"], { title: localization.unpin, children: jsxRuntime.jsx(IconButton__default["default"], { onClick: () => handlePinColumn(false), size: "small", children: jsxRuntime.jsx(PushPinIcon, {}) }) })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip__default["default"], { title: localization.pinToLeft, children: jsxRuntime.jsx(IconButton__default["default"], { onClick: () => handlePinColumn('left'), size: "small", children: jsxRuntime.jsx(PushPinIcon, { style: {
4121
- transform: 'rotate(90deg)',
4122
- } }) }) }), jsxRuntime.jsx(Tooltip__default["default"], { title: localization.pinToRight, children: jsxRuntime.jsx(IconButton__default["default"], { onClick: () => handlePinColumn('right'), size: "small", children: jsxRuntime.jsx(PushPinIcon, { style: {
4123
- transform: 'rotate(-90deg)',
4124
- } }) }) })] })) })));
4125
- };
4126
-
4127
- const MRT_ShowHideColumnsMenuItems = (_a) => {
4128
- var _b;
4129
- var { allColumns, column, hoveredColumn, isNestedColumns, setHoveredColumn, table } = _a, rest = __rest(_a, ["allColumns", "column", "hoveredColumn", "isNestedColumns", "setHoveredColumn", "table"]);
4130
- const { getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, mrtTheme: { draggingBorderColor }, }, setColumnOrder, } = table;
4131
- const { columnOrder } = getState();
4132
- const { columnDef } = column;
4133
- const { columnDefType } = columnDef;
4134
- const switchChecked = column.getIsVisible();
4135
- const handleToggleColumnHidden = (column) => {
4136
- var _a, _b;
4137
- if (columnDefType === 'group') {
4138
- (_b = (_a = column === null || column === void 0 ? void 0 : column.columns) === null || _a === void 0 ? void 0 : _a.forEach) === null || _b === void 0 ? void 0 : _b.call(_a, (childColumn) => {
4139
- childColumn.toggleVisibility(!switchChecked);
4140
- });
4141
- }
4142
- else {
4143
- column.toggleVisibility();
4144
- }
4145
- };
4146
- const menuItemRef = react.useRef(null);
4147
- const [isDragging, setIsDragging] = react.useState(false);
4148
- const handleDragStart = (e) => {
4149
- setIsDragging(true);
4150
- try {
4151
- e.dataTransfer.setDragImage(menuItemRef.current, 0, 0);
4152
- }
4153
- catch (e) {
4154
- console.error(e);
4155
- }
4156
- };
4157
- const handleDragEnd = (_e) => {
4158
- setIsDragging(false);
4159
- setHoveredColumn(null);
4160
- if (hoveredColumn) {
4161
- setColumnOrder(reorderColumn(column, hoveredColumn, columnOrder));
4162
- }
4163
- };
4164
- const handleDragEnter = (_e) => {
4165
- if (!isDragging && columnDef.enableColumnOrdering !== false) {
4166
- setHoveredColumn(column);
4167
- }
4168
- };
4169
- if (!columnDef.header || columnDef.visibleInShowHideMenu === false) {
4170
- return null;
4171
- }
4172
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuItem__default["default"], Object.assign({ disableRipple: true, onDragEnter: handleDragEnter, ref: menuItemRef }, rest, { sx: (theme) => (Object.assign({ alignItems: 'center', justifyContent: 'flex-start', my: 0, opacity: isDragging ? 0.5 : 1, outline: isDragging
4173
- ? `2px dashed ${theme.palette.grey[500]}`
4174
- : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
4175
- ? `2px dashed ${draggingBorderColor}`
4176
- : 'none', outlineOffset: '-2px', pl: `${(column.depth + 0.5) * 2}rem`, py: '6px' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: jsxRuntime.jsxs(Box__default["default"], { sx: {
4177
- display: 'flex',
4178
- flexWrap: 'nowrap',
4179
- gap: '8px',
4180
- }, children: [columnDefType !== 'group' &&
4181
- enableColumnOrdering &&
4182
- !isNestedColumns &&
4183
- (columnDef.enableColumnOrdering !== false ? (jsxRuntime.jsx(MRT_GrabHandleButton, { onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table })) : (jsxRuntime.jsx(Box__default["default"], { sx: { width: '28px' } }))), enableColumnPinning &&
4184
- (column.getCanPin() ? (jsxRuntime.jsx(MRT_ColumnPinningButtons, { column: column, table: table })) : (jsxRuntime.jsx(Box__default["default"], { sx: { width: '70px' } }))), enableHiding ? (jsxRuntime.jsx(FormControlLabel__default["default"], { checked: switchChecked, componentsProps: {
4185
- typography: {
4186
- sx: {
4187
- mb: 0,
4188
- opacity: columnDefType !== 'display' ? 1 : 0.5,
4189
- },
4190
- },
4191
- }, control: jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, getCommonTooltipProps(), { title: localization.toggleVisibility, children: jsxRuntime.jsx(Switch__default["default"], {}) })), disabled: !column.getCanHide(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (jsxRuntime.jsx(Typography__default["default"], { sx: { alignSelf: 'center' }, children: columnDef.header }))] }) })), (_b = column.columns) === null || _b === void 0 ? void 0 : _b.map((c, i) => (jsxRuntime.jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: c, hoveredColumn: hoveredColumn, isNestedColumns: isNestedColumns, setHoveredColumn: setHoveredColumn, table: table }, `${i}-${c.id}`)))] }));
4192
- };
4193
-
4194
- const MRT_ShowHideColumnsMenu = (_a) => {
4195
- var { anchorEl, setAnchorEl, table } = _a, rest = __rest(_a, ["anchorEl", "setAnchorEl", "table"]);
4196
- const { getAllColumns, getAllLeafColumns, getCenterLeafColumns, getIsAllColumnsVisible, getIsSomeColumnsPinned, getIsSomeColumnsVisible, getLeftLeafColumns, getRightLeafColumns, getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, mrtTheme: { menuBackgroundColor }, }, } = table;
4197
- const { columnOrder, columnPinning, density } = getState();
4198
- const handleToggleAllColumns = (value) => {
4199
- getAllLeafColumns()
4200
- .filter((col) => col.columnDef.enableHiding !== false)
4201
- .forEach((col) => col.toggleVisibility(value));
4202
- };
4203
- const allColumns = react.useMemo(() => {
4204
- const columns = getAllColumns();
4205
- if (columnOrder.length > 0 &&
4206
- !columns.some((col) => col.columnDef.columnDefType === 'group')) {
4207
- return [
4208
- ...getLeftLeafColumns(),
4209
- ...Array.from(new Set(columnOrder)).map((colId) => getCenterLeafColumns().find((col) => (col === null || col === void 0 ? void 0 : col.id) === colId)),
4210
- ...getRightLeafColumns(),
4211
- ].filter(Boolean);
4212
- }
4213
- return columns;
4214
- }, [
4215
- columnOrder,
4216
- columnPinning,
4217
- getAllColumns(),
4218
- getCenterLeafColumns(),
4219
- getLeftLeafColumns(),
4220
- getRightLeafColumns(),
4221
- ]);
4222
- const isNestedColumns = allColumns.some((col) => col.columnDef.columnDefType === 'group');
4223
- const [hoveredColumn, setHoveredColumn] = react.useState(null);
4224
- return (jsxRuntime.jsxs(Menu__default["default"], Object.assign({ MenuListProps: {
4225
- dense: density === 'compact',
4226
- sx: {
4227
- backgroundColor: menuBackgroundColor,
4228
- },
4229
- }, anchorEl: anchorEl, disableScrollLock: true, onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: [jsxRuntime.jsxs(Box__default["default"], { sx: {
4230
- display: 'flex',
4231
- justifyContent: 'space-between',
4232
- p: '0.5rem',
4233
- pt: 0,
4234
- }, children: [enableHiding && (jsxRuntime.jsx(Button__default["default"], { disabled: !getIsSomeColumnsVisible(), onClick: () => handleToggleAllColumns(false), children: localization.hideAll })), enableColumnOrdering && (jsxRuntime.jsx(Button__default["default"], { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options, true)), children: localization.resetOrder })), enableColumnPinning && (jsxRuntime.jsx(Button__default["default"], { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true), children: localization.unpinAll })), enableHiding && (jsxRuntime.jsx(Button__default["default"], { disabled: getIsAllColumnsVisible(), onClick: () => handleToggleAllColumns(true), children: localization.showAll }))] }), jsxRuntime.jsx(Divider__default["default"], {}), allColumns.map((column, index) => (jsxRuntime.jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, isNestedColumns: isNestedColumns, setHoveredColumn: setHoveredColumn, table: table }, `${index}-${column.id}`)))] })));
4235
- };
4236
-
4237
- const MRT_ShowHideColumnsButton = (_a) => {
4238
- var _b;
4239
- var { table } = _a, rest = __rest(_a, ["table"]);
4240
- const { options: { icons: { ViewColumnIcon }, localization, }, } = table;
4241
- const [anchorEl, setAnchorEl] = react.useState(null);
4242
- const handleClick = (event) => {
4243
- setAnchorEl(event.currentTarget);
4244
- };
4245
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip__default["default"], { title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideColumns, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.showHideColumns, onClick: handleClick }, rest, { title: undefined, children: jsxRuntime.jsx(ViewColumnIcon, {}) })) }), anchorEl && (jsxRuntime.jsx(MRT_ShowHideColumnsMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table }))] }));
4246
- };
4247
-
4248
- const MRT_ToggleDensePaddingButton = (_a) => {
4249
- var _b;
4250
- var { table } = _a, rest = __rest(_a, ["table"]);
4251
- const { getState, options: { icons: { DensityLargeIcon, DensityMediumIcon, DensitySmallIcon }, localization, }, setDensity, } = table;
4252
- const { density } = getState();
4253
- const handleToggleDensePadding = () => {
4254
- const nextDensity = density === 'comfortable'
4255
- ? 'compact'
4256
- : density === 'compact'
4257
- ? 'spacious'
4258
- : 'comfortable';
4259
- setDensity(nextDensity);
4260
- };
4261
- return (jsxRuntime.jsx(Tooltip__default["default"], { title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleDensity, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.toggleDensity, onClick: handleToggleDensePadding }, rest, { title: undefined, children: density === 'compact' ? (jsxRuntime.jsx(DensitySmallIcon, {})) : density === 'comfortable' ? (jsxRuntime.jsx(DensityMediumIcon, {})) : (jsxRuntime.jsx(DensityLargeIcon, {})) })) }));
4262
- };
4263
-
4264
- const MRT_ToggleFiltersButton = (_a) => {
4265
- var _b;
4266
- var { table } = _a, rest = __rest(_a, ["table"]);
4267
- const { getState, options: { icons: { FilterListIcon, FilterListOffIcon }, localization, }, setShowColumnFilters, } = table;
4268
- const { showColumnFilters } = getState();
4269
- const handleToggleShowFilters = () => {
4270
- setShowColumnFilters(!showColumnFilters);
4271
- };
4272
- return (jsxRuntime.jsx(Tooltip__default["default"], { title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideFilters, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleShowFilters }, rest, { title: undefined, children: showColumnFilters ? jsxRuntime.jsx(FilterListOffIcon, {}) : jsxRuntime.jsx(FilterListIcon, {}) })) }));
4273
- };
4274
-
4275
- const MRT_ToggleFullScreenButton = (_a) => {
4276
- var _b;
4277
- var { table } = _a, rest = __rest(_a, ["table"]);
4278
- const { getState, options: { icons: { FullscreenExitIcon, FullscreenIcon }, localization, }, setIsFullScreen, } = table;
4279
- const { isFullScreen } = getState();
4280
- const [tooltipOpened, setTooltipOpened] = react.useState(false);
4281
- const handleToggleFullScreen = () => {
4282
- setTooltipOpened(false);
4283
- setIsFullScreen(!isFullScreen);
4284
- };
4285
- return (jsxRuntime.jsx(Tooltip__default["default"], { open: tooltipOpened, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleFullScreen, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.toggleFullScreen, onBlur: () => setTooltipOpened(false), onClick: handleToggleFullScreen, onFocus: () => setTooltipOpened(true), onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false) }, rest, { title: undefined, children: isFullScreen ? jsxRuntime.jsx(FullscreenExitIcon, {}) : jsxRuntime.jsx(FullscreenIcon, {}) })) }));
4286
- };
4287
-
4288
- const MRT_ToggleGlobalFilterButton = (_a) => {
4289
- var _b, _c;
4290
- var { table } = _a, rest = __rest(_a, ["table"]);
4291
- const { getState, options: { icons: { SearchIcon, SearchOffIcon }, localization, }, refs: { searchInputRef }, setShowGlobalFilter, } = table;
4292
- const { globalFilter, showGlobalFilter } = getState();
4293
- const handleToggleSearch = () => {
4294
- setShowGlobalFilter(!showGlobalFilter);
4295
- queueMicrotask(() => { var _a; return (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
4296
- };
4297
- return (jsxRuntime.jsx(Tooltip__default["default"], { title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideSearch, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": (_c = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _c !== void 0 ? _c : localization.showHideSearch, disabled: !!globalFilter, onClick: handleToggleSearch }, rest, { title: undefined, children: showGlobalFilter ? jsxRuntime.jsx(SearchOffIcon, {}) : jsxRuntime.jsx(SearchIcon, {}) })) }));
4298
- };
4299
-
4300
- const MRT_ToolbarInternalButtons = (_a) => {
4301
- var _b;
4302
- var { table } = _a, rest = __rest(_a, ["table"]);
4303
- const { options: { columnFilterDisplayMode, enableColumnFilters, enableColumnOrdering, enableColumnPinning, enableDensityToggle, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, initialState, renderToolbarInternalActions, }, } = table;
4304
- return (jsxRuntime.jsx(Box__default["default"], Object.assign({}, rest, { sx: (theme) => (Object.assign({ alignItems: 'center', display: 'flex', zIndex: 3 }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: (_b = renderToolbarInternalActions === null || renderToolbarInternalActions === void 0 ? void 0 : renderToolbarInternalActions({
4305
- table,
4306
- })) !== null && _b !== void 0 ? _b : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [enableFilters &&
4307
- enableGlobalFilter &&
4308
- !(initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) && (jsxRuntime.jsx(MRT_ToggleGlobalFilterButton, { table: table })), enableFilters &&
4309
- enableColumnFilters &&
4310
- columnFilterDisplayMode !== 'popover' && (jsxRuntime.jsx(MRT_ToggleFiltersButton, { table: table })), (enableHiding || enableColumnOrdering || enableColumnPinning) && (jsxRuntime.jsx(MRT_ShowHideColumnsButton, { table: table })), enableDensityToggle && (jsxRuntime.jsx(MRT_ToggleDensePaddingButton, { table: table })), enableFullScreenToggle && (jsxRuntime.jsx(MRT_ToggleFullScreenButton, { table: table }))] })) })));
4311
- };
4312
-
4313
- const MRT_GlobalFilterTextField = (_a) => {
4314
- var _b;
4315
- var { table } = _a, rest = __rest(_a, ["table"]);
4316
- const { getState, options: { enableGlobalFilterModes, icons: { CloseIcon, SearchIcon }, localization, manualFiltering, muiSearchTextFieldProps, }, refs: { searchInputRef }, setGlobalFilter, } = table;
4317
- const { globalFilter, showGlobalFilter } = getState();
4318
- const textFieldProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiSearchTextFieldProps, {
4319
- table,
4320
- })), rest);
4321
- const isMounted = react.useRef(false);
4322
- const [anchorEl, setAnchorEl] = react.useState(null);
4323
- const [searchValue, setSearchValue] = react.useState(globalFilter !== null && globalFilter !== void 0 ? globalFilter : '');
4324
- const handleChangeDebounced = react.useCallback(utils.debounce((event) => {
4325
- var _a;
4326
- setGlobalFilter((_a = event.target.value) !== null && _a !== void 0 ? _a : undefined);
4327
- }, manualFiltering ? 500 : 250), []);
4328
- const handleChange = (event) => {
4329
- setSearchValue(event.target.value);
4330
- handleChangeDebounced(event);
4331
- };
4332
- const handleGlobalFilterMenuOpen = (event) => {
4333
- setAnchorEl(event.currentTarget);
4334
- };
4335
- const handleClear = () => {
4336
- setSearchValue('');
4337
- setGlobalFilter(undefined);
4338
- };
4339
- react.useEffect(() => {
4340
- if (isMounted.current) {
4341
- if (globalFilter === undefined) {
4342
- handleClear();
4343
- }
4344
- else {
4345
- setSearchValue(globalFilter);
4346
- }
4347
- }
4348
- isMounted.current = true;
4349
- }, [globalFilter]);
4350
- return (jsxRuntime.jsxs(Collapse__default["default"], { in: showGlobalFilter, mountOnEnter: true, orientation: "horizontal", unmountOnExit: true, children: [jsxRuntime.jsx(TextField__default["default"], Object.assign({ inputProps: Object.assign({ autoComplete: 'off' }, textFieldProps.inputProps), onChange: handleChange, placeholder: localization.search, size: "small", value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "outlined" }, textFieldProps, { InputProps: Object.assign(Object.assign({ endAdornment: (jsxRuntime.jsx(InputAdornment__default["default"], { position: "end", children: jsxRuntime.jsx(Tooltip__default["default"], { title: (_b = localization.clearSearch) !== null && _b !== void 0 ? _b : '', children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.clearSearch, disabled: !(searchValue === null || searchValue === void 0 ? void 0 : searchValue.length), onClick: handleClear, size: "small", children: jsxRuntime.jsx(CloseIcon, {}) }) }) }) })), startAdornment: enableGlobalFilterModes ? (jsxRuntime.jsx(InputAdornment__default["default"], { position: "start", children: jsxRuntime.jsx(Tooltip__default["default"], { title: localization.changeSearchMode, children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.changeSearchMode, onClick: handleGlobalFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' }, children: jsxRuntime.jsx(SearchIcon, {}) }) }) })) : (jsxRuntime.jsx(SearchIcon, { style: { marginRight: '4px' } })) }, textFieldProps.InputProps), { sx: (theme) => {
4351
- var _a;
4352
- return (Object.assign({ mb: 0 }, parseFromValuesOrFunc((_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.sx, theme)));
4353
- } }), inputRef: (inputRef) => {
4354
- searchInputRef.current = inputRef;
4355
- if (textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.inputRef) {
4356
- textFieldProps.inputRef = inputRef;
4357
- }
4358
- } })), jsxRuntime.jsx(MRT_FilterOptionMenu, { anchorEl: anchorEl, onSelect: handleClear, setAnchorEl: setAnchorEl, table: table })] }));
4359
- };
4360
-
4361
- const MRT_TopToolbar = ({ table, }) => {
4362
- var _a;
4363
- const { getState, options: { enableGlobalFilter, enablePagination, enableToolbarInternalActions, muiTopToolbarProps, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderTopToolbarCustomActions, }, refs: { topToolbarRef }, } = table;
4364
- const { isFullScreen, showGlobalFilter } = getState();
4365
- const isMobile = useMediaQuery__default["default"]('(max-width:720px)');
4366
- const isTablet = useMediaQuery__default["default"]('(max-width:1024px)');
4367
- const toolbarProps = parseFromValuesOrFunc(muiTopToolbarProps, { table });
4368
- const stackAlertBanner = isMobile ||
4369
- !!renderTopToolbarCustomActions ||
4370
- (showGlobalFilter && isTablet);
4371
- const globalFilterProps = {
4372
- sx: !isTablet
4373
- ? {
4374
- zIndex: 2,
4375
- }
4376
- : undefined,
4377
- table,
4378
- };
4379
- return (jsxRuntime.jsxs(Box__default["default"], Object.assign({}, toolbarProps, { ref: (ref) => {
4380
- topToolbarRef.current = ref;
4381
- if (toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.ref) {
4382
- // @ts-ignore
4383
- toolbarProps.ref.current = ref;
4384
- }
4385
- }, sx: (theme) => (Object.assign(Object.assign(Object.assign({}, getCommonToolbarStyles({ table, theme })), { position: isFullScreen ? 'sticky' : 'relative', top: isFullScreen ? '0' : undefined }), parseFromValuesOrFunc(toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx, theme))), children: [positionToolbarAlertBanner === 'top' && (jsxRuntime.jsx(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })), ['both', 'top'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (jsxRuntime.jsx(MRT_ToolbarDropZone, { table: table })), jsxRuntime.jsxs(Box__default["default"], { sx: {
4386
- alignItems: 'flex-start',
4387
- boxSizing: 'border-box',
4388
- display: 'flex',
4389
- gap: '0.5rem',
4390
- justifyContent: 'space-between',
4391
- p: '0.5rem',
4392
- position: stackAlertBanner ? 'relative' : 'absolute',
4393
- right: 0,
4394
- top: 0,
4395
- width: '100%',
4396
- }, children: [enableGlobalFilter && positionGlobalFilter === 'left' && (jsxRuntime.jsx(MRT_GlobalFilterTextField, Object.assign({}, globalFilterProps))), (_a = renderTopToolbarCustomActions === null || renderTopToolbarCustomActions === void 0 ? void 0 : renderTopToolbarCustomActions({ table })) !== null && _a !== void 0 ? _a : jsxRuntime.jsx("span", {}), enableToolbarInternalActions ? (jsxRuntime.jsxs(Box__default["default"], { sx: {
4397
- alignItems: 'center',
4398
- display: 'flex',
4399
- flexWrap: 'wrap-reverse',
4400
- gap: '0.5rem',
4401
- justifyContent: 'flex-end',
4402
- }, children: [enableGlobalFilter && positionGlobalFilter === 'right' && (jsxRuntime.jsx(MRT_GlobalFilterTextField, Object.assign({}, globalFilterProps))), jsxRuntime.jsx(MRT_ToolbarInternalButtons, { table: table })] })) : (enableGlobalFilter &&
4403
- positionGlobalFilter === 'right' && (jsxRuntime.jsx(MRT_GlobalFilterTextField, Object.assign({}, globalFilterProps))))] }), enablePagination &&
4404
- ['both', 'top'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (jsxRuntime.jsx(MRT_TablePagination, { position: "top", table: table })), jsxRuntime.jsx(MRT_LinearProgressBar, { isTopToolbar: true, table: table })] })));
4405
- };
4406
-
4407
- const MRT_TablePaper = (_a) => {
4408
- var _b, _c;
4409
- var { table } = _a, rest = __rest(_a, ["table"]);
4410
- const { getState, options: { enableBottomToolbar, enableTopToolbar, mrtTheme: { baseBackgroundColor }, muiTablePaperProps, renderBottomToolbar, renderTopToolbar, }, refs: { tablePaperRef }, } = table;
4411
- const { isFullScreen } = getState();
4412
- const paperProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTablePaperProps, { table })), rest);
4413
- const theme = styles.useTheme();
4414
- return (jsxRuntime.jsxs(Paper__default["default"], Object.assign({ elevation: 2, onKeyDown: (e) => e.key === 'Escape' && table.setIsFullScreen(false) }, paperProps, { ref: (ref) => {
4415
- tablePaperRef.current = ref;
4416
- if (paperProps === null || paperProps === void 0 ? void 0 : paperProps.ref) {
4417
- //@ts-ignore
4418
- paperProps.ref.current = ref;
4419
- }
4420
- }, style: Object.assign(Object.assign({}, (isFullScreen
4421
- ? {
4422
- bottom: 0,
4423
- height: '100dvh',
4424
- left: 0,
4425
- margin: 0,
4426
- maxHeight: '100dvh',
4427
- maxWidth: '100dvw',
4428
- padding: 0,
4429
- position: 'fixed',
4430
- right: 0,
4431
- top: 0,
4432
- width: '100dvw',
4433
- zIndex: theme.zIndex.modal,
4434
- }
4435
- : {})), paperProps === null || paperProps === void 0 ? void 0 : paperProps.style), sx: (theme) => (Object.assign({ backgroundColor: baseBackgroundColor, backgroundImage: 'unset', overflow: 'hidden', transition: 'all 100ms ease-in-out' }, parseFromValuesOrFunc(paperProps === null || paperProps === void 0 ? void 0 : paperProps.sx, theme))), children: [enableTopToolbar &&
4436
- ((_b = parseFromValuesOrFunc(renderTopToolbar, { table })) !== null && _b !== void 0 ? _b : (jsxRuntime.jsx(MRT_TopToolbar, { table: table }))), jsxRuntime.jsx(MRT_TableContainer, { table: table }), enableBottomToolbar &&
4437
- ((_c = parseFromValuesOrFunc(renderBottomToolbar, { table })) !== null && _c !== void 0 ? _c : (jsxRuntime.jsx(MRT_BottomToolbar, { table: table })))] })));
4438
- };
4439
-
4440
- const isTableInstanceProp = (props) => props.table !== undefined;
4441
- const MaterialReactTable = (props) => {
4442
- let table;
4443
- if (isTableInstanceProp(props)) {
4444
- table = props.table;
4445
- }
4446
- else {
4447
- table = useMaterialReactTable(props);
4448
- }
4449
- return jsxRuntime.jsx(MRT_TablePaper, { table: table });
4450
- };
4451
-
4452
- exports.MRT_ActionMenuItem = MRT_ActionMenuItem;
4453
- exports.MRT_AggregationFns = MRT_AggregationFns;
4454
- exports.MRT_BottomToolbar = MRT_BottomToolbar;
4455
- exports.MRT_ColumnActionMenu = MRT_ColumnActionMenu;
4456
- exports.MRT_ColumnPinningButtons = MRT_ColumnPinningButtons;
4457
- exports.MRT_CopyButton = MRT_CopyButton;
4458
- exports.MRT_DefaultColumn = MRT_DefaultColumn;
4459
- exports.MRT_DefaultDisplayColumn = MRT_DefaultDisplayColumn;
4460
- exports.MRT_EditActionButtons = MRT_EditActionButtons;
4461
- exports.MRT_EditCellTextField = MRT_EditCellTextField;
4462
- exports.MRT_EditRowModal = MRT_EditRowModal;
4463
- exports.MRT_ExpandAllButton = MRT_ExpandAllButton;
4464
- exports.MRT_ExpandButton = MRT_ExpandButton;
4465
- exports.MRT_FilterCheckbox = MRT_FilterCheckbox;
4466
- exports.MRT_FilterFns = MRT_FilterFns;
4467
- exports.MRT_FilterOptionMenu = MRT_FilterOptionMenu;
4468
- exports.MRT_FilterRangeFields = MRT_FilterRangeFields;
4469
- exports.MRT_FilterRangeSlider = MRT_FilterRangeSlider;
4470
- exports.MRT_FilterTextField = MRT_FilterTextField;
4471
- exports.MRT_GlobalFilterTextField = MRT_GlobalFilterTextField;
4472
- exports.MRT_GrabHandleButton = MRT_GrabHandleButton;
4473
- exports.MRT_LinearProgressBar = MRT_LinearProgressBar;
4474
- exports.MRT_RowActionMenu = MRT_RowActionMenu;
4475
- exports.MRT_RowPinButton = MRT_RowPinButton;
4476
- exports.MRT_SelectCheckbox = MRT_SelectCheckbox;
4477
- exports.MRT_ShowHideColumnsButton = MRT_ShowHideColumnsButton;
4478
- exports.MRT_ShowHideColumnsMenu = MRT_ShowHideColumnsMenu;
4479
- exports.MRT_ShowHideColumnsMenuItems = MRT_ShowHideColumnsMenuItems;
4480
- exports.MRT_SortingFns = MRT_SortingFns;
4481
- exports.MRT_Table = MRT_Table;
4482
- exports.MRT_TableBody = MRT_TableBody;
4483
- exports.MRT_TableBodyCell = MRT_TableBodyCell;
4484
- exports.MRT_TableBodyCellValue = MRT_TableBodyCellValue;
4485
- exports.MRT_TableBodyRow = MRT_TableBodyRow;
4486
- exports.MRT_TableBodyRowGrabHandle = MRT_TableBodyRowGrabHandle;
4487
- exports.MRT_TableBodyRowPinButton = MRT_TableBodyRowPinButton;
4488
- exports.MRT_TableContainer = MRT_TableContainer;
4489
- exports.MRT_TableDetailPanel = MRT_TableDetailPanel;
4490
- exports.MRT_TableFooter = MRT_TableFooter;
4491
- exports.MRT_TableFooterCell = MRT_TableFooterCell;
4492
- exports.MRT_TableFooterRow = MRT_TableFooterRow;
4493
- exports.MRT_TableHead = MRT_TableHead;
4494
- exports.MRT_TableHeadCell = MRT_TableHeadCell;
4495
- exports.MRT_TableHeadCellColumnActionsButton = MRT_TableHeadCellColumnActionsButton;
4496
- exports.MRT_TableHeadCellFilterContainer = MRT_TableHeadCellFilterContainer;
4497
- exports.MRT_TableHeadCellFilterLabel = MRT_TableHeadCellFilterLabel;
4498
- exports.MRT_TableHeadCellGrabHandle = MRT_TableHeadCellGrabHandle;
4499
- exports.MRT_TableHeadCellResizeHandle = MRT_TableHeadCellResizeHandle;
4500
- exports.MRT_TableHeadCellSortLabel = MRT_TableHeadCellSortLabel;
4501
- exports.MRT_TableHeadRow = MRT_TableHeadRow;
4502
- exports.MRT_TableLoadingOverlay = MRT_TableLoadingOverlay;
4503
- exports.MRT_TablePagination = MRT_TablePagination;
4504
- exports.MRT_TablePaper = MRT_TablePaper;
4505
- exports.MRT_ToggleDensePaddingButton = MRT_ToggleDensePaddingButton;
4506
- exports.MRT_ToggleFiltersButton = MRT_ToggleFiltersButton;
4507
- exports.MRT_ToggleFullScreenButton = MRT_ToggleFullScreenButton;
4508
- exports.MRT_ToggleGlobalFilterButton = MRT_ToggleGlobalFilterButton;
4509
- exports.MRT_ToggleRowActionMenuButton = MRT_ToggleRowActionMenuButton;
4510
- exports.MRT_ToolbarAlertBanner = MRT_ToolbarAlertBanner;
4511
- exports.MRT_ToolbarDropZone = MRT_ToolbarDropZone;
4512
- exports.MRT_ToolbarInternalButtons = MRT_ToolbarInternalButtons;
4513
- exports.MRT_TopToolbar = MRT_TopToolbar;
4514
- exports.MaterialReactTable = MaterialReactTable;
4515
- exports.Memo_MRT_TableBody = Memo_MRT_TableBody;
4516
- exports.Memo_MRT_TableBodyCell = Memo_MRT_TableBodyCell;
4517
- exports.Memo_MRT_TableBodyRow = Memo_MRT_TableBodyRow;
4518
- exports.cellKeyboardShortcuts = cellKeyboardShortcuts;
4519
- exports.createMRTColumnHelper = createMRTColumnHelper;
4520
- exports.createRow = createRow;
4521
- exports.defaultDisplayColumnProps = defaultDisplayColumnProps;
4522
- exports.flexRender = flexRender;
4523
- exports.getAllLeafColumnDefs = getAllLeafColumnDefs;
4524
- exports.getCanRankRows = getCanRankRows;
4525
- exports.getColumnFilterInfo = getColumnFilterInfo;
4526
- exports.getColumnId = getColumnId;
4527
- exports.getDefaultColumnFilterFn = getDefaultColumnFilterFn;
4528
- exports.getDefaultColumnOrderIds = getDefaultColumnOrderIds;
4529
- exports.getIsRankingRows = getIsRankingRows;
4530
- exports.getIsRowSelected = getIsRowSelected;
4531
- exports.getLeadingDisplayColumnIds = getLeadingDisplayColumnIds;
4532
- exports.getMRT_RowSelectionHandler = getMRT_RowSelectionHandler;
4533
- exports.getMRT_Rows = getMRT_Rows;
4534
- exports.getMRT_SelectAllHandler = getMRT_SelectAllHandler;
4535
- exports.getTrailingDisplayColumnIds = getTrailingDisplayColumnIds;
4536
- exports.isCellEditable = isCellEditable;
4537
- exports.mrtFilterOptions = mrtFilterOptions;
4538
- exports.openEditingCell = openEditingCell;
4539
- exports.prepareColumns = prepareColumns;
4540
- exports.rankGlobalFuzzy = rankGlobalFuzzy;
4541
- exports.reorderColumn = reorderColumn;
4542
- exports.showRowActionsColumn = showRowActionsColumn;
4543
- exports.showRowDragColumn = showRowDragColumn;
4544
- exports.showRowExpandColumn = showRowExpandColumn;
4545
- exports.showRowNumbersColumn = showRowNumbersColumn;
4546
- exports.showRowPinningColumn = showRowPinningColumn;
4547
- exports.showRowSelectionColumn = showRowSelectionColumn;
4548
- exports.showRowSpacerColumn = showRowSpacerColumn;
4549
- exports.useDropdownOptions = useDropdownOptions;
4550
- exports.useMRT_ColumnVirtualizer = useMRT_ColumnVirtualizer;
4551
- exports.useMRT_Effects = useMRT_Effects;
4552
- exports.useMRT_RowVirtualizer = useMRT_RowVirtualizer;
4553
- exports.useMRT_Rows = useMRT_Rows;
4554
- exports.useMRT_TableInstance = useMRT_TableInstance;
4555
- exports.useMRT_TableOptions = useMRT_TableOptions;
4556
- exports.useMaterialReactTable = useMaterialReactTable;
4557
- //# sourceMappingURL=index.js.map