material-react-table-narender 2.13.20 → 2.13.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.js +66 -51
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +66 -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 +6 -0
- package/src/types.ts +1 -0
- package/src/utils/cell.utils.ts +52 -39
package/dist/index.esm.js
CHANGED
@@ -435,44 +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
442
|
// alt + n
|
443
|
-
if (event.altKey && event.key.toLocaleLowerCase() === 'n') {
|
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
|
-
|
475
|
-
}
|
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
|
+
// }
|
476
475
|
// if (!table.options.enableKeyboardShortcuts) return;
|
477
476
|
if (!enableKeyboardShortcuts)
|
478
477
|
return;
|
@@ -483,7 +482,7 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
|
|
483
482
|
navigator.clipboard.writeText(cellValue);
|
484
483
|
}
|
485
484
|
else if (['Enter', ' '].includes(event.key)) {
|
486
|
-
if (((
|
485
|
+
if (((_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.id) === 'mrt-row-select') {
|
487
486
|
event.preventDefault();
|
488
487
|
getMRT_RowSelectionHandler({
|
489
488
|
row: cell.row,
|
@@ -492,20 +491,20 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
|
|
492
491
|
staticRowIndex: +event.target.getAttribute('data-index'),
|
493
492
|
})(event);
|
494
493
|
}
|
495
|
-
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' &&
|
496
495
|
table.options.enableSelectAll) {
|
497
496
|
event.preventDefault();
|
498
497
|
getMRT_SelectAllHandler({
|
499
498
|
table,
|
500
499
|
})(event);
|
501
500
|
}
|
502
|
-
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' &&
|
503
502
|
(cell.row.getCanExpand() ||
|
504
|
-
((
|
503
|
+
((_e = (_d = table.options).renderDetailPanel) === null || _e === void 0 ? void 0 : _e.call(_d, { row: cell.row, table })))) {
|
505
504
|
event.preventDefault();
|
506
505
|
cell.row.toggleExpanded();
|
507
506
|
}
|
508
|
-
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' &&
|
509
508
|
table.options.enableExpandAll) {
|
510
509
|
event.preventDefault();
|
511
510
|
table.toggleAllRowsExpanded();
|
@@ -514,7 +513,7 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
|
|
514
513
|
event.preventDefault();
|
515
514
|
cell.row.getIsPinned()
|
516
515
|
? cell.row.pin(false)
|
517
|
-
: cell.row.pin(((
|
516
|
+
: cell.row.pin(((_g = table.options.rowPinningDisplayMode) === null || _g === void 0 ? void 0 : _g.includes('bottom'))
|
518
517
|
? 'bottom'
|
519
518
|
: 'top');
|
520
519
|
}
|
@@ -524,7 +523,7 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
|
|
524
523
|
actionsButton.click();
|
525
524
|
}
|
526
525
|
}
|
527
|
-
else if ((
|
526
|
+
else if ((_h = header === null || header === void 0 ? void 0 : header.column) === null || _h === void 0 ? void 0 : _h.getCanSort()) {
|
528
527
|
event.preventDefault();
|
529
528
|
header.column.toggleSorting();
|
530
529
|
}
|
@@ -539,11 +538,11 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
|
|
539
538
|
// Focus the appropriate element
|
540
539
|
if (autocomplete) {
|
541
540
|
autocomplete.focus();
|
542
|
-
|
541
|
+
// autocomplete.select?.();
|
543
542
|
}
|
544
543
|
else if (input) {
|
545
544
|
input.focus();
|
546
|
-
|
545
|
+
// input.select?.();
|
547
546
|
}
|
548
547
|
else if (select) {
|
549
548
|
select.focus();
|
@@ -581,7 +580,6 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
|
|
581
580
|
// }
|
582
581
|
if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
|
583
582
|
const autocomplete = currentCell.querySelector('.MuiAutocomplete-root input[type="text"]');
|
584
|
-
// Check if the autocomplete input exists and is focused
|
585
583
|
if (autocomplete && document.activeElement === autocomplete) {
|
586
584
|
if (event.key === 'ArrowDown') {
|
587
585
|
// Do something with the autocomplete input
|
@@ -595,7 +593,6 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
|
|
595
593
|
}
|
596
594
|
}
|
597
595
|
}
|
598
|
-
// Additional logic if not an Autocomplete or not focused
|
599
596
|
}
|
600
597
|
const currentRow = parentElement || currentCell.closest('tr');
|
601
598
|
const tableElement = containerElement || currentCell.closest('table');
|
@@ -632,6 +629,11 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
|
|
632
629
|
: allCells.slice(0, currentCellIndex).reverse();
|
633
630
|
return searchArray.find((cell) => cell.matches(`[data-index="${columnIndex}"]`));
|
634
631
|
};
|
632
|
+
// const findCurrentCell = () => {
|
633
|
+
// return allCells.find((cell) =>
|
634
|
+
// cell.matches(`[data-index="${currentIndex}"]`),
|
635
|
+
// );
|
636
|
+
// }
|
635
637
|
switch (event.key) {
|
636
638
|
case 'ArrowRight':
|
637
639
|
nextCell = findAdjacentCell(currentIndex + 1, 'f');
|
@@ -4171,7 +4173,9 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
|
|
4171
4173
|
|
4172
4174
|
const MRT_ShowHideColumnsMenu = (_a) => {
|
4173
4175
|
var { anchorEl, setAnchorEl, table } = _a, rest = __rest(_a, ["anchorEl", "setAnchorEl", "table"]);
|
4174
|
-
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;
|
4175
4179
|
const { columnOrder, columnPinning, density } = getState();
|
4176
4180
|
const handleToggleAllColumns = (value) => {
|
4177
4181
|
getAllLeafColumns()
|
@@ -4209,9 +4213,7 @@ const MRT_ShowHideColumnsMenu = (_a) => {
|
|
4209
4213
|
justifyContent: 'space-between',
|
4210
4214
|
p: '0.5rem',
|
4211
4215
|
pt: 0,
|
4212
|
-
}, 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 })),
|
4213
|
-
table.resetColumnSizing(true);
|
4214
|
-
}, 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}`)))] })));
|
4215
4217
|
};
|
4216
4218
|
|
4217
4219
|
const MRT_ShowHideColumnsButton = (_a) => {
|
@@ -4277,17 +4279,30 @@ const MRT_ToggleGlobalFilterButton = (_a) => {
|
|
4277
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, {}) })) }));
|
4278
4280
|
};
|
4279
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.toggleFullScreen, children: jsx(IconButton, Object.assign({ "aria-label": localization.toggleFullScreen, onClick: handleToggleFullScreen, onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false) }, rest, { title: undefined, children: enableKeyboardShortcuts ? jsx(FullscreenExitIcon, {}) : jsx(FullscreenIcon, {}) })) }));
|
4293
|
+
};
|
4294
|
+
|
4280
4295
|
const MRT_ToolbarInternalButtons = (_a) => {
|
4281
4296
|
var _b;
|
4282
4297
|
var { table } = _a, rest = __rest(_a, ["table"]);
|
4283
|
-
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;
|
4284
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({
|
4285
4300
|
table,
|
4286
4301
|
})) !== null && _b !== void 0 ? _b : (jsxs(Fragment, { children: [enableFilters &&
|
4287
4302
|
enableGlobalFilter &&
|
4288
4303
|
!(initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) && (jsx(MRT_ToggleGlobalFilterButton, { table: table })), enableFilters &&
|
4289
4304
|
enableColumnFilters &&
|
4290
|
-
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 })), jsx(MRT_ToggleNavigationButton, { table: table })] })) })));
|
4291
4306
|
};
|
4292
4307
|
|
4293
4308
|
const MRT_GlobalFilterTextField = (_a) => {
|