material-react-table-narender 2.13.20 → 2.13.22

Sign up to get free protection for your applications and to get access to all the features.
Files changed (10) hide show
  1. package/dist/index.esm.js +66 -51
  2. package/dist/index.esm.js.map +1 -1
  3. package/dist/index.js +66 -51
  4. package/dist/index.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/buttons/MRT_ToggleNavigationButton.tsx +49 -0
  7. package/src/components/menus/MRT_ShowHideColumnsMenu.tsx +3 -3
  8. package/src/components/toolbar/MRT_ToolbarInternalButtons.tsx +6 -0
  9. package/src/types.ts +1 -0
  10. 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, _j, _k, _l, _m;
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
- event.preventDefault();
445
- setEnableKeyboardShortcuts(!enableKeyboardShortcuts);
446
- const currentCell = event.currentTarget;
447
- if (enableKeyboardShortcuts) {
448
- const input = currentCell.querySelector('input');
449
- const select = currentCell.querySelector('select');
450
- const checkbox = currentCell.querySelector('input[type="checkbox"]');
451
- const button = currentCell.querySelector('button');
452
- const autocomplete = currentCell.querySelector('.MuiAutocomplete-root input[type="text"]');
453
- if (autocomplete) {
454
- autocomplete.focus();
455
- (_a = autocomplete.select) === null || _a === void 0 ? void 0 : _a.call(autocomplete);
456
- }
457
- else if (input) {
458
- input.focus();
459
- (_b = input.select) === null || _b === void 0 ? void 0 : _b.call(input);
460
- }
461
- else if (select) {
462
- select.focus();
463
- }
464
- else if (checkbox) {
465
- checkbox.focus();
466
- // checkbox.click();
467
- }
468
- else if (button) {
469
- button.focus();
470
- }
471
- else {
472
- currentCell.focus();
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 (((_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.id) === 'mrt-row-select') {
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 (((_d = header === null || header === void 0 ? void 0 : header.column) === null || _d === void 0 ? void 0 : _d.id) === 'mrt-row-select' &&
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 (((_e = cell === null || cell === void 0 ? void 0 : cell.column) === null || _e === void 0 ? void 0 : _e.id) === 'mrt-row-expand' &&
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
- ((_g = (_f = table.options).renderDetailPanel) === null || _g === void 0 ? void 0 : _g.call(_f, { row: cell.row, table })))) {
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 (((_h = header === null || header === void 0 ? void 0 : header.column) === null || _h === void 0 ? void 0 : _h.id) === 'mrt-row-expand' &&
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(((_j = table.options.rowPinningDisplayMode) === null || _j === void 0 ? void 0 : _j.includes('bottom'))
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 ((_k = header === null || header === void 0 ? void 0 : header.column) === null || _k === void 0 ? void 0 : _k.getCanSort()) {
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
- (_l = autocomplete.select) === null || _l === void 0 ? void 0 : _l.call(autocomplete);
541
+ // autocomplete.select?.();
543
542
  }
544
543
  else if (input) {
545
544
  input.focus();
546
- (_m = input.select) === null || _m === void 0 ? void 0 : _m.call(input);
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, enableColumnResizing, mrtTheme: { menuBackgroundColor }, }, } = table;
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 })), enableColumnResizing && (jsx(Button, { onClick: () => {
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) => {