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 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) => {