material-react-table-narender 2.13.19 → 2.13.21
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +67 -51
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +67 -51
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/buttons/MRT_ToggleNavigationButton.tsx +49 -0
- package/src/components/menus/MRT_ShowHideColumnsMenu.tsx +3 -3
- package/src/components/toolbar/MRT_ToolbarInternalButtons.tsx +5 -0
- package/src/types.ts +1 -0
- package/src/utils/cell.utils.ts +53 -39
package/dist/index.d.ts
CHANGED
package/dist/index.esm.js
CHANGED
|
@@ -435,43 +435,43 @@ const openEditingCell = ({ cell, table, }) => {
|
|
|
435
435
|
}
|
|
436
436
|
};
|
|
437
437
|
const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement, event, header, parentElement, table, }) => {
|
|
438
|
-
var _a, _b, _c, _d, _e, _f, _g, _h
|
|
438
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
439
439
|
debugger;
|
|
440
440
|
const { getState, setEnableKeyboardShortcuts, } = table;
|
|
441
441
|
const { enableKeyboardShortcuts } = getState();
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
}
|
|
442
|
+
// alt + n
|
|
443
|
+
// if (event.altKey && event.key.toLocaleLowerCase() === 'n') {
|
|
444
|
+
// event.preventDefault();
|
|
445
|
+
// setEnableKeyboardShortcuts(!enableKeyboardShortcuts);
|
|
446
|
+
// const currentCell = event.currentTarget;
|
|
447
|
+
// if (enableKeyboardShortcuts) {
|
|
448
|
+
// const input = currentCell.querySelector('input') as HTMLInputElement;
|
|
449
|
+
// const select = currentCell.querySelector('select') as HTMLSelectElement;
|
|
450
|
+
// const checkbox = currentCell.querySelector('input[type="checkbox"]') as HTMLInputElement;
|
|
451
|
+
// const button = currentCell.querySelector('button') as HTMLButtonElement;
|
|
452
|
+
// const autocomplete = currentCell.querySelector('.MuiAutocomplete-root input[type="text"]') as HTMLInputElement;
|
|
453
|
+
// if (autocomplete) {
|
|
454
|
+
// autocomplete.focus();
|
|
455
|
+
// autocomplete.select?.();
|
|
456
|
+
// } else if (input) {
|
|
457
|
+
// input.focus();
|
|
458
|
+
// input.select?.();
|
|
459
|
+
// } else if (select) {
|
|
460
|
+
// select.focus();
|
|
461
|
+
// } else if (checkbox) {
|
|
462
|
+
// checkbox.focus();
|
|
463
|
+
// // checkbox.click();
|
|
464
|
+
// } else if (button) {
|
|
465
|
+
// button.focus();
|
|
466
|
+
// } else {
|
|
467
|
+
// currentCell.focus();
|
|
468
|
+
// }
|
|
469
|
+
// }
|
|
470
|
+
// }
|
|
471
|
+
// if (event.altKey && event.key.toLocaleLowerCase() === 'n') {
|
|
472
|
+
// event.preventDefault();
|
|
473
|
+
// setEnableKeyboardShortcuts(!enableKeyboardShortcuts);
|
|
474
|
+
// }
|
|
475
475
|
// if (!table.options.enableKeyboardShortcuts) return;
|
|
476
476
|
if (!enableKeyboardShortcuts)
|
|
477
477
|
return;
|
|
@@ -482,7 +482,7 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
|
|
|
482
482
|
navigator.clipboard.writeText(cellValue);
|
|
483
483
|
}
|
|
484
484
|
else if (['Enter', ' '].includes(event.key)) {
|
|
485
|
-
if (((
|
|
485
|
+
if (((_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.id) === 'mrt-row-select') {
|
|
486
486
|
event.preventDefault();
|
|
487
487
|
getMRT_RowSelectionHandler({
|
|
488
488
|
row: cell.row,
|
|
@@ -491,20 +491,20 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
|
|
|
491
491
|
staticRowIndex: +event.target.getAttribute('data-index'),
|
|
492
492
|
})(event);
|
|
493
493
|
}
|
|
494
|
-
else if (((
|
|
494
|
+
else if (((_b = header === null || header === void 0 ? void 0 : header.column) === null || _b === void 0 ? void 0 : _b.id) === 'mrt-row-select' &&
|
|
495
495
|
table.options.enableSelectAll) {
|
|
496
496
|
event.preventDefault();
|
|
497
497
|
getMRT_SelectAllHandler({
|
|
498
498
|
table,
|
|
499
499
|
})(event);
|
|
500
500
|
}
|
|
501
|
-
else if (((
|
|
501
|
+
else if (((_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.id) === 'mrt-row-expand' &&
|
|
502
502
|
(cell.row.getCanExpand() ||
|
|
503
|
-
((
|
|
503
|
+
((_e = (_d = table.options).renderDetailPanel) === null || _e === void 0 ? void 0 : _e.call(_d, { row: cell.row, table })))) {
|
|
504
504
|
event.preventDefault();
|
|
505
505
|
cell.row.toggleExpanded();
|
|
506
506
|
}
|
|
507
|
-
else if (((
|
|
507
|
+
else if (((_f = header === null || header === void 0 ? void 0 : header.column) === null || _f === void 0 ? void 0 : _f.id) === 'mrt-row-expand' &&
|
|
508
508
|
table.options.enableExpandAll) {
|
|
509
509
|
event.preventDefault();
|
|
510
510
|
table.toggleAllRowsExpanded();
|
|
@@ -513,7 +513,7 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
|
|
|
513
513
|
event.preventDefault();
|
|
514
514
|
cell.row.getIsPinned()
|
|
515
515
|
? cell.row.pin(false)
|
|
516
|
-
: cell.row.pin(((
|
|
516
|
+
: cell.row.pin(((_g = table.options.rowPinningDisplayMode) === null || _g === void 0 ? void 0 : _g.includes('bottom'))
|
|
517
517
|
? 'bottom'
|
|
518
518
|
: 'top');
|
|
519
519
|
}
|
|
@@ -523,7 +523,7 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
|
|
|
523
523
|
actionsButton.click();
|
|
524
524
|
}
|
|
525
525
|
}
|
|
526
|
-
else if ((
|
|
526
|
+
else if ((_h = header === null || header === void 0 ? void 0 : header.column) === null || _h === void 0 ? void 0 : _h.getCanSort()) {
|
|
527
527
|
event.preventDefault();
|
|
528
528
|
header.column.toggleSorting();
|
|
529
529
|
}
|
|
@@ -538,11 +538,11 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
|
|
|
538
538
|
// Focus the appropriate element
|
|
539
539
|
if (autocomplete) {
|
|
540
540
|
autocomplete.focus();
|
|
541
|
-
|
|
541
|
+
// autocomplete.select?.();
|
|
542
542
|
}
|
|
543
543
|
else if (input) {
|
|
544
544
|
input.focus();
|
|
545
|
-
|
|
545
|
+
// input.select?.();
|
|
546
546
|
}
|
|
547
547
|
else if (select) {
|
|
548
548
|
select.focus();
|
|
@@ -580,7 +580,6 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
|
|
|
580
580
|
// }
|
|
581
581
|
if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
|
|
582
582
|
const autocomplete = currentCell.querySelector('.MuiAutocomplete-root input[type="text"]');
|
|
583
|
-
// Check if the autocomplete input exists and is focused
|
|
584
583
|
if (autocomplete && document.activeElement === autocomplete) {
|
|
585
584
|
if (event.key === 'ArrowDown') {
|
|
586
585
|
// Do something with the autocomplete input
|
|
@@ -594,7 +593,6 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
|
|
|
594
593
|
}
|
|
595
594
|
}
|
|
596
595
|
}
|
|
597
|
-
// Additional logic if not an Autocomplete or not focused
|
|
598
596
|
}
|
|
599
597
|
const currentRow = parentElement || currentCell.closest('tr');
|
|
600
598
|
const tableElement = containerElement || currentCell.closest('table');
|
|
@@ -631,6 +629,11 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
|
|
|
631
629
|
: allCells.slice(0, currentCellIndex).reverse();
|
|
632
630
|
return searchArray.find((cell) => cell.matches(`[data-index="${columnIndex}"]`));
|
|
633
631
|
};
|
|
632
|
+
// const findCurrentCell = () => {
|
|
633
|
+
// return allCells.find((cell) =>
|
|
634
|
+
// cell.matches(`[data-index="${currentIndex}"]`),
|
|
635
|
+
// );
|
|
636
|
+
// }
|
|
634
637
|
switch (event.key) {
|
|
635
638
|
case 'ArrowRight':
|
|
636
639
|
nextCell = findAdjacentCell(currentIndex + 1, 'f');
|
|
@@ -4170,7 +4173,9 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
|
|
|
4170
4173
|
|
|
4171
4174
|
const MRT_ShowHideColumnsMenu = (_a) => {
|
|
4172
4175
|
var { anchorEl, setAnchorEl, table } = _a, rest = __rest(_a, ["anchorEl", "setAnchorEl", "table"]);
|
|
4173
|
-
const { getAllColumns, getAllLeafColumns, getCenterLeafColumns, getIsAllColumnsVisible, getIsSomeColumnsPinned, getIsSomeColumnsVisible, getLeftLeafColumns, getRightLeafColumns, getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization,
|
|
4176
|
+
const { getAllColumns, getAllLeafColumns, getCenterLeafColumns, getIsAllColumnsVisible, getIsSomeColumnsPinned, getIsSomeColumnsVisible, getLeftLeafColumns, getRightLeafColumns, getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization,
|
|
4177
|
+
// enableColumnResizing,
|
|
4178
|
+
mrtTheme: { menuBackgroundColor }, }, } = table;
|
|
4174
4179
|
const { columnOrder, columnPinning, density } = getState();
|
|
4175
4180
|
const handleToggleAllColumns = (value) => {
|
|
4176
4181
|
getAllLeafColumns()
|
|
@@ -4208,9 +4213,7 @@ const MRT_ShowHideColumnsMenu = (_a) => {
|
|
|
4208
4213
|
justifyContent: 'space-between',
|
|
4209
4214
|
p: '0.5rem',
|
|
4210
4215
|
pt: 0,
|
|
4211
|
-
}, children: [enableHiding && (jsx(Button, { disabled: !getIsSomeColumnsVisible(), onClick: () => handleToggleAllColumns(false), children: localization.hideAll })), enableColumnOrdering && (jsx(Button, { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options, true)), children: localization.resetOrder })), enableColumnPinning && (jsx(Button, { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true), children: localization.unpinAll })), enableHiding && (jsx(Button, { disabled: getIsAllColumnsVisible(), onClick: () => handleToggleAllColumns(true), children: localization.showAll })),
|
|
4212
|
-
table.resetColumnSizing(true);
|
|
4213
|
-
}, children: localization.resetColumnSize }))] }), jsx(Divider, {}), allColumns.map((column, index) => (jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, isNestedColumns: isNestedColumns, setHoveredColumn: setHoveredColumn, table: table }, `${index}-${column.id}`)))] })));
|
|
4216
|
+
}, children: [enableHiding && (jsx(Button, { disabled: !getIsSomeColumnsVisible(), onClick: () => handleToggleAllColumns(false), children: localization.hideAll })), enableColumnOrdering && (jsx(Button, { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options, true)), children: localization.resetOrder })), enableColumnPinning && (jsx(Button, { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true), children: localization.unpinAll })), enableHiding && (jsx(Button, { disabled: getIsAllColumnsVisible(), onClick: () => handleToggleAllColumns(true), children: localization.showAll }))] }), jsx(Divider, {}), allColumns.map((column, index) => (jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, isNestedColumns: isNestedColumns, setHoveredColumn: setHoveredColumn, table: table }, `${index}-${column.id}`)))] })));
|
|
4214
4217
|
};
|
|
4215
4218
|
|
|
4216
4219
|
const MRT_ShowHideColumnsButton = (_a) => {
|
|
@@ -4276,17 +4279,30 @@ const MRT_ToggleGlobalFilterButton = (_a) => {
|
|
|
4276
4279
|
return (jsx(Tooltip, { title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideSearch, children: jsx(IconButton, 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 ? jsx(SearchOffIcon, {}) : jsx(SearchIcon, {}) })) }));
|
|
4277
4280
|
};
|
|
4278
4281
|
|
|
4282
|
+
const MRT_ToggleNavigationButton = (_a) => {
|
|
4283
|
+
var _b;
|
|
4284
|
+
var { table } = _a, rest = __rest(_a, ["table"]);
|
|
4285
|
+
const { getState, options: { icons: { FullscreenExitIcon, FullscreenIcon }, localization, }, setEnableKeyboardShortcuts, } = table;
|
|
4286
|
+
const { enableKeyboardShortcuts } = getState();
|
|
4287
|
+
const [tooltipOpened, setTooltipOpened] = useState(false);
|
|
4288
|
+
const handleToggleFullScreen = () => {
|
|
4289
|
+
setTooltipOpened(false);
|
|
4290
|
+
setEnableKeyboardShortcuts(!enableKeyboardShortcuts);
|
|
4291
|
+
};
|
|
4292
|
+
return (jsx(Tooltip, { open: tooltipOpened, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.keyboardNavigation, children: jsx(IconButton, Object.assign({ "aria-label": localization.keyboardNavigation, onClick: handleToggleFullScreen, onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false) }, rest, { title: undefined, children: enableKeyboardShortcuts ? jsx(FullscreenExitIcon, {}) : jsx(FullscreenIcon, {}) })) }));
|
|
4293
|
+
};
|
|
4294
|
+
|
|
4279
4295
|
const MRT_ToolbarInternalButtons = (_a) => {
|
|
4280
4296
|
var _b;
|
|
4281
4297
|
var { table } = _a, rest = __rest(_a, ["table"]);
|
|
4282
|
-
const { options: { columnFilterDisplayMode, enableColumnFilters, enableColumnOrdering, enableColumnPinning, enableDensityToggle, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, initialState, renderToolbarInternalActions, }, } = table;
|
|
4298
|
+
const { options: { columnFilterDisplayMode, enableColumnFilters, enableColumnOrdering, enableColumnPinning, enableDensityToggle, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, initialState, renderToolbarInternalActions, enableKeyboardShortcuts }, } = table;
|
|
4283
4299
|
return (jsx(Box, 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({
|
|
4284
4300
|
table,
|
|
4285
4301
|
})) !== null && _b !== void 0 ? _b : (jsxs(Fragment, { children: [enableFilters &&
|
|
4286
4302
|
enableGlobalFilter &&
|
|
4287
4303
|
!(initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) && (jsx(MRT_ToggleGlobalFilterButton, { table: table })), enableFilters &&
|
|
4288
4304
|
enableColumnFilters &&
|
|
4289
|
-
columnFilterDisplayMode !== 'popover' && (jsx(MRT_ToggleFiltersButton, { table: table })), (enableHiding || enableColumnOrdering || enableColumnPinning) && (jsx(MRT_ShowHideColumnsButton, { table: table })), enableDensityToggle && (jsx(MRT_ToggleDensePaddingButton, { table: table })), enableFullScreenToggle && (jsx(MRT_ToggleFullScreenButton, { table: table }))] })) })));
|
|
4305
|
+
columnFilterDisplayMode !== 'popover' && (jsx(MRT_ToggleFiltersButton, { table: table })), (enableHiding || enableColumnOrdering || enableColumnPinning) && (jsx(MRT_ShowHideColumnsButton, { table: table })), enableDensityToggle && (jsx(MRT_ToggleDensePaddingButton, { table: table })), enableFullScreenToggle && (jsx(MRT_ToggleFullScreenButton, { table: table })), enableKeyboardShortcuts && (jsx(MRT_ToggleNavigationButton, { table: table }))] })) })));
|
|
4290
4306
|
};
|
|
4291
4307
|
|
|
4292
4308
|
const MRT_GlobalFilterTextField = (_a) => {
|