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.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, _j, _k, _l, _m;
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
- event.preventDefault();
536
- setEnableKeyboardShortcuts(!enableKeyboardShortcuts);
537
- const currentCell = event.currentTarget;
538
- if (enableKeyboardShortcuts) {
539
- const input = currentCell.querySelector('input');
540
- const select = currentCell.querySelector('select');
541
- const checkbox = currentCell.querySelector('input[type="checkbox"]');
542
- const button = currentCell.querySelector('button');
543
- const autocomplete = currentCell.querySelector('.MuiAutocomplete-root input[type="text"]');
544
- if (autocomplete) {
545
- autocomplete.focus();
546
- (_a = autocomplete.select) === null || _a === void 0 ? void 0 : _a.call(autocomplete);
547
- }
548
- else if (input) {
549
- input.focus();
550
- (_b = input.select) === null || _b === void 0 ? void 0 : _b.call(input);
551
- }
552
- else if (select) {
553
- select.focus();
554
- }
555
- else if (checkbox) {
556
- checkbox.focus();
557
- // checkbox.click();
558
- }
559
- else if (button) {
560
- button.focus();
561
- }
562
- else {
563
- currentCell.focus();
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 (((_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.id) === 'mrt-row-select') {
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 (((_d = header === null || header === void 0 ? void 0 : header.column) === null || _d === void 0 ? void 0 : _d.id) === 'mrt-row-select' &&
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 (((_e = cell === null || cell === void 0 ? void 0 : cell.column) === null || _e === void 0 ? void 0 : _e.id) === 'mrt-row-expand' &&
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
- ((_g = (_f = table.options).renderDetailPanel) === null || _g === void 0 ? void 0 : _g.call(_f, { row: cell.row, table })))) {
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 (((_h = header === null || header === void 0 ? void 0 : header.column) === null || _h === void 0 ? void 0 : _h.id) === 'mrt-row-expand' &&
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(((_j = table.options.rowPinningDisplayMode) === null || _j === void 0 ? void 0 : _j.includes('bottom'))
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 ((_k = header === null || header === void 0 ? void 0 : header.column) === null || _k === void 0 ? void 0 : _k.getCanSort()) {
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
- (_l = autocomplete.select) === null || _l === void 0 ? void 0 : _l.call(autocomplete);
632
+ // autocomplete.select?.();
634
633
  }
635
634
  else if (input) {
636
635
  input.focus();
637
- (_m = input.select) === null || _m === void 0 ? void 0 : _m.call(input);
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, enableColumnResizing, mrtTheme: { menuBackgroundColor }, }, } = table;
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 })), enableColumnResizing && (jsxRuntime.jsx(Button__default["default"], { onClick: () => {
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) => {