material-react-table-narender 2.13.20 → 2.13.21

Sign up to get free protection for your applications and to get access to all the features.
Files changed (11) hide show
  1. package/dist/index.d.ts +1 -0
  2. package/dist/index.esm.js +66 -51
  3. package/dist/index.esm.js.map +1 -1
  4. package/dist/index.js +66 -51
  5. package/dist/index.js.map +1 -1
  6. package/package.json +1 -1
  7. package/src/components/buttons/MRT_ToggleNavigationButton.tsx +49 -0
  8. package/src/components/menus/MRT_ShowHideColumnsMenu.tsx +3 -3
  9. package/src/components/toolbar/MRT_ToolbarInternalButtons.tsx +5 -0
  10. package/src/types.ts +1 -0
  11. 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, _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.keyboardNavigation, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.keyboardNavigation, 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 })), enableKeyboardShortcuts && (jsxRuntime.jsx(MRT_ToggleNavigationButton, { table: table }))] })) })));
4382
4397
  };
4383
4398
 
4384
4399
  const MRT_GlobalFilterTextField = (_a) => {