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.js
CHANGED
@@ -526,44 +526,43 @@ const openEditingCell = ({ cell, table, }) => {
|
|
526
526
|
}
|
527
527
|
};
|
528
528
|
const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement, event, header, parentElement, table, }) => {
|
529
|
-
var _a, _b, _c, _d, _e, _f, _g, _h
|
529
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
530
530
|
debugger;
|
531
531
|
const { getState, setEnableKeyboardShortcuts, } = table;
|
532
532
|
const { enableKeyboardShortcuts } = getState();
|
533
533
|
// alt + n
|
534
|
-
if (event.altKey && event.key.toLocaleLowerCase() === 'n') {
|
535
|
-
|
536
|
-
|
537
|
-
|
538
|
-
|
539
|
-
|
540
|
-
|
541
|
-
|
542
|
-
|
543
|
-
|
544
|
-
|
545
|
-
|
546
|
-
|
547
|
-
|
548
|
-
|
549
|
-
|
550
|
-
|
551
|
-
|
552
|
-
|
553
|
-
|
554
|
-
|
555
|
-
|
556
|
-
|
557
|
-
|
558
|
-
|
559
|
-
|
560
|
-
|
561
|
-
|
562
|
-
|
563
|
-
|
564
|
-
|
565
|
-
|
566
|
-
}
|
534
|
+
// if (event.altKey && event.key.toLocaleLowerCase() === 'n') {
|
535
|
+
// event.preventDefault();
|
536
|
+
// setEnableKeyboardShortcuts(!enableKeyboardShortcuts);
|
537
|
+
// const currentCell = event.currentTarget;
|
538
|
+
// if (enableKeyboardShortcuts) {
|
539
|
+
// const input = currentCell.querySelector('input') as HTMLInputElement;
|
540
|
+
// const select = currentCell.querySelector('select') as HTMLSelectElement;
|
541
|
+
// const checkbox = currentCell.querySelector('input[type="checkbox"]') as HTMLInputElement;
|
542
|
+
// const button = currentCell.querySelector('button') as HTMLButtonElement;
|
543
|
+
// const autocomplete = currentCell.querySelector('.MuiAutocomplete-root input[type="text"]') as HTMLInputElement;
|
544
|
+
// if (autocomplete) {
|
545
|
+
// autocomplete.focus();
|
546
|
+
// autocomplete.select?.();
|
547
|
+
// } else if (input) {
|
548
|
+
// input.focus();
|
549
|
+
// input.select?.();
|
550
|
+
// } else if (select) {
|
551
|
+
// select.focus();
|
552
|
+
// } else if (checkbox) {
|
553
|
+
// checkbox.focus();
|
554
|
+
// // checkbox.click();
|
555
|
+
// } else if (button) {
|
556
|
+
// button.focus();
|
557
|
+
// } else {
|
558
|
+
// currentCell.focus();
|
559
|
+
// }
|
560
|
+
// }
|
561
|
+
// }
|
562
|
+
// if (event.altKey && event.key.toLocaleLowerCase() === 'n') {
|
563
|
+
// event.preventDefault();
|
564
|
+
// setEnableKeyboardShortcuts(!enableKeyboardShortcuts);
|
565
|
+
// }
|
567
566
|
// if (!table.options.enableKeyboardShortcuts) return;
|
568
567
|
if (!enableKeyboardShortcuts)
|
569
568
|
return;
|
@@ -574,7 +573,7 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
|
|
574
573
|
navigator.clipboard.writeText(cellValue);
|
575
574
|
}
|
576
575
|
else if (['Enter', ' '].includes(event.key)) {
|
577
|
-
if (((
|
576
|
+
if (((_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.id) === 'mrt-row-select') {
|
578
577
|
event.preventDefault();
|
579
578
|
getMRT_RowSelectionHandler({
|
580
579
|
row: cell.row,
|
@@ -583,20 +582,20 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
|
|
583
582
|
staticRowIndex: +event.target.getAttribute('data-index'),
|
584
583
|
})(event);
|
585
584
|
}
|
586
|
-
else if (((
|
585
|
+
else if (((_b = header === null || header === void 0 ? void 0 : header.column) === null || _b === void 0 ? void 0 : _b.id) === 'mrt-row-select' &&
|
587
586
|
table.options.enableSelectAll) {
|
588
587
|
event.preventDefault();
|
589
588
|
getMRT_SelectAllHandler({
|
590
589
|
table,
|
591
590
|
})(event);
|
592
591
|
}
|
593
|
-
else if (((
|
592
|
+
else if (((_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.id) === 'mrt-row-expand' &&
|
594
593
|
(cell.row.getCanExpand() ||
|
595
|
-
((
|
594
|
+
((_e = (_d = table.options).renderDetailPanel) === null || _e === void 0 ? void 0 : _e.call(_d, { row: cell.row, table })))) {
|
596
595
|
event.preventDefault();
|
597
596
|
cell.row.toggleExpanded();
|
598
597
|
}
|
599
|
-
else if (((
|
598
|
+
else if (((_f = header === null || header === void 0 ? void 0 : header.column) === null || _f === void 0 ? void 0 : _f.id) === 'mrt-row-expand' &&
|
600
599
|
table.options.enableExpandAll) {
|
601
600
|
event.preventDefault();
|
602
601
|
table.toggleAllRowsExpanded();
|
@@ -605,7 +604,7 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
|
|
605
604
|
event.preventDefault();
|
606
605
|
cell.row.getIsPinned()
|
607
606
|
? cell.row.pin(false)
|
608
|
-
: cell.row.pin(((
|
607
|
+
: cell.row.pin(((_g = table.options.rowPinningDisplayMode) === null || _g === void 0 ? void 0 : _g.includes('bottom'))
|
609
608
|
? 'bottom'
|
610
609
|
: 'top');
|
611
610
|
}
|
@@ -615,7 +614,7 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
|
|
615
614
|
actionsButton.click();
|
616
615
|
}
|
617
616
|
}
|
618
|
-
else if ((
|
617
|
+
else if ((_h = header === null || header === void 0 ? void 0 : header.column) === null || _h === void 0 ? void 0 : _h.getCanSort()) {
|
619
618
|
event.preventDefault();
|
620
619
|
header.column.toggleSorting();
|
621
620
|
}
|
@@ -630,11 +629,11 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
|
|
630
629
|
// Focus the appropriate element
|
631
630
|
if (autocomplete) {
|
632
631
|
autocomplete.focus();
|
633
|
-
|
632
|
+
// autocomplete.select?.();
|
634
633
|
}
|
635
634
|
else if (input) {
|
636
635
|
input.focus();
|
637
|
-
|
636
|
+
// input.select?.();
|
638
637
|
}
|
639
638
|
else if (select) {
|
640
639
|
select.focus();
|
@@ -672,7 +671,6 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
|
|
672
671
|
// }
|
673
672
|
if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
|
674
673
|
const autocomplete = currentCell.querySelector('.MuiAutocomplete-root input[type="text"]');
|
675
|
-
// Check if the autocomplete input exists and is focused
|
676
674
|
if (autocomplete && document.activeElement === autocomplete) {
|
677
675
|
if (event.key === 'ArrowDown') {
|
678
676
|
// Do something with the autocomplete input
|
@@ -686,7 +684,6 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
|
|
686
684
|
}
|
687
685
|
}
|
688
686
|
}
|
689
|
-
// Additional logic if not an Autocomplete or not focused
|
690
687
|
}
|
691
688
|
const currentRow = parentElement || currentCell.closest('tr');
|
692
689
|
const tableElement = containerElement || currentCell.closest('table');
|
@@ -723,6 +720,11 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
|
|
723
720
|
: allCells.slice(0, currentCellIndex).reverse();
|
724
721
|
return searchArray.find((cell) => cell.matches(`[data-index="${columnIndex}"]`));
|
725
722
|
};
|
723
|
+
// const findCurrentCell = () => {
|
724
|
+
// return allCells.find((cell) =>
|
725
|
+
// cell.matches(`[data-index="${currentIndex}"]`),
|
726
|
+
// );
|
727
|
+
// }
|
726
728
|
switch (event.key) {
|
727
729
|
case 'ArrowRight':
|
728
730
|
nextCell = findAdjacentCell(currentIndex + 1, 'f');
|
@@ -4262,7 +4264,9 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
|
|
4262
4264
|
|
4263
4265
|
const MRT_ShowHideColumnsMenu = (_a) => {
|
4264
4266
|
var { anchorEl, setAnchorEl, table } = _a, rest = __rest(_a, ["anchorEl", "setAnchorEl", "table"]);
|
4265
|
-
const { getAllColumns, getAllLeafColumns, getCenterLeafColumns, getIsAllColumnsVisible, getIsSomeColumnsPinned, getIsSomeColumnsVisible, getLeftLeafColumns, getRightLeafColumns, getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization,
|
4267
|
+
const { getAllColumns, getAllLeafColumns, getCenterLeafColumns, getIsAllColumnsVisible, getIsSomeColumnsPinned, getIsSomeColumnsVisible, getLeftLeafColumns, getRightLeafColumns, getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization,
|
4268
|
+
// enableColumnResizing,
|
4269
|
+
mrtTheme: { menuBackgroundColor }, }, } = table;
|
4266
4270
|
const { columnOrder, columnPinning, density } = getState();
|
4267
4271
|
const handleToggleAllColumns = (value) => {
|
4268
4272
|
getAllLeafColumns()
|
@@ -4300,9 +4304,7 @@ const MRT_ShowHideColumnsMenu = (_a) => {
|
|
4300
4304
|
justifyContent: 'space-between',
|
4301
4305
|
p: '0.5rem',
|
4302
4306
|
pt: 0,
|
4303
|
-
}, 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 })),
|
4304
|
-
table.resetColumnSizing(true);
|
4305
|
-
}, children: localization.resetColumnSize }))] }), 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}`)))] })));
|
4307
|
+
}, 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}`)))] })));
|
4306
4308
|
};
|
4307
4309
|
|
4308
4310
|
const MRT_ShowHideColumnsButton = (_a) => {
|
@@ -4368,17 +4370,30 @@ const MRT_ToggleGlobalFilterButton = (_a) => {
|
|
4368
4370
|
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, {}) })) }));
|
4369
4371
|
};
|
4370
4372
|
|
4373
|
+
const MRT_ToggleNavigationButton = (_a) => {
|
4374
|
+
var _b;
|
4375
|
+
var { table } = _a, rest = __rest(_a, ["table"]);
|
4376
|
+
const { getState, options: { icons: { FullscreenExitIcon, FullscreenIcon }, localization, }, setEnableKeyboardShortcuts, } = table;
|
4377
|
+
const { enableKeyboardShortcuts } = getState();
|
4378
|
+
const [tooltipOpened, setTooltipOpened] = react.useState(false);
|
4379
|
+
const handleToggleFullScreen = () => {
|
4380
|
+
setTooltipOpened(false);
|
4381
|
+
setEnableKeyboardShortcuts(!enableKeyboardShortcuts);
|
4382
|
+
};
|
4383
|
+
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, onClick: handleToggleFullScreen, onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false) }, rest, { title: undefined, children: enableKeyboardShortcuts ? jsxRuntime.jsx(FullscreenExitIcon, {}) : jsxRuntime.jsx(FullscreenIcon, {}) })) }));
|
4384
|
+
};
|
4385
|
+
|
4371
4386
|
const MRT_ToolbarInternalButtons = (_a) => {
|
4372
4387
|
var _b;
|
4373
4388
|
var { table } = _a, rest = __rest(_a, ["table"]);
|
4374
|
-
const { options: { columnFilterDisplayMode, enableColumnFilters, enableColumnOrdering, enableColumnPinning, enableDensityToggle, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, initialState, renderToolbarInternalActions, }, } = table;
|
4389
|
+
const { options: { columnFilterDisplayMode, enableColumnFilters, enableColumnOrdering, enableColumnPinning, enableDensityToggle, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, initialState, renderToolbarInternalActions, enableKeyboardShortcuts }, } = table;
|
4375
4390
|
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({
|
4376
4391
|
table,
|
4377
4392
|
})) !== null && _b !== void 0 ? _b : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [enableFilters &&
|
4378
4393
|
enableGlobalFilter &&
|
4379
4394
|
!(initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) && (jsxRuntime.jsx(MRT_ToggleGlobalFilterButton, { table: table })), enableFilters &&
|
4380
4395
|
enableColumnFilters &&
|
4381
|
-
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 }))] })) })));
|
4396
|
+
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 })), jsxRuntime.jsx(MRT_ToggleNavigationButton, { table: table })] })) })));
|
4382
4397
|
};
|
4383
4398
|
|
4384
4399
|
const MRT_GlobalFilterTextField = (_a) => {
|