material-react-table 0.26.4 → 0.27.0

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.
@@ -1,7 +1,7 @@
1
1
  import React, { useMemo, useState, useCallback, Fragment, useRef, useLayoutEffect, useEffect } from 'react';
2
2
  import { ArrowRight, Cancel, CheckBox, ClearAll, Close, DensityLarge, DensityMedium, DensitySmall, DragHandle, DynamicFeed, Edit, ExpandLess, ExpandMore, FilterAlt, FilterAltOff, FilterList, FilterListOff, FullscreenExit, Fullscreen, KeyboardDoubleArrowDown, MoreHoriz, MoreVert, PushPin, RestartAlt, Save, Search, SearchOff, Sort, ViewColumn, VisibilityOff } from '@mui/icons-material';
3
3
  import { filterFns, sortingFns, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
4
- import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Typography, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, TablePagination, Chip, Alert, AlertTitle, LinearProgress, useMediaQuery, Toolbar, lighten, alpha, Grow, TableSortLabel, useTheme, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog } from '@mui/material';
4
+ import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Typography, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, LinearProgress, TablePagination, Chip, Alert, AlertTitle, useMediaQuery, Toolbar, lighten, alpha, Grow, TableSortLabel, useTheme, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog } from '@mui/material';
5
5
  import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
6
6
  import { useVirtual } from 'react-virtual';
7
7
 
@@ -175,7 +175,8 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton(_ref) {
175
175
  }, iconButtonProps, {
176
176
  sx: _extends({
177
177
  height: density === 'compact' ? '1.75rem' : '2.25rem',
178
- width: density === 'compact' ? '1.75rem' : '2.25rem'
178
+ width: density === 'compact' ? '1.75rem' : '2.25rem',
179
+ mt: density !== 'compact' ? '-0.25rem' : undefined
179
180
  }, iconButtonProps == null ? void 0 : iconButtonProps.sx)
180
181
  }), React.createElement(KeyboardDoubleArrowDownIcon, {
181
182
  style: {
@@ -232,7 +233,7 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
232
233
  };
233
234
 
234
235
  var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
235
- var _columnDef$enabledCol;
236
+ var _columnDef$columnFilt;
236
237
 
237
238
  var anchorEl = _ref.anchorEl,
238
239
  header = _ref.header,
@@ -242,7 +243,7 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
242
243
  var getState = table.getState,
243
244
  _table$options = table.options,
244
245
  enabledGlobalFilterOptions = _table$options.enabledGlobalFilterOptions,
245
- enabledColumnFilterOptions = _table$options.enabledColumnFilterOptions,
246
+ columnFilterModeOptions = _table$options.columnFilterModeOptions,
246
247
  localization = _table$options.localization,
247
248
  setCurrentFilterFns = table.setCurrentFilterFns,
248
249
  setCurrentGlobalFilterFn = table.setCurrentGlobalFilterFn;
@@ -258,7 +259,7 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
258
259
  var _ref3 = column != null ? column : {},
259
260
  columnDef = _ref3.columnDef;
260
261
 
261
- var allowedColumnFilterOptions = (_columnDef$enabledCol = columnDef == null ? void 0 : columnDef.enabledColumnFilterOptions) != null ? _columnDef$enabledCol : enabledColumnFilterOptions;
262
+ var allowedColumnFilterOptions = (_columnDef$columnFilt = columnDef == null ? void 0 : columnDef.columnFilterModeOptions) != null ? _columnDef$columnFilt : columnFilterModeOptions;
262
263
  var filterOptions = useMemo(function () {
263
264
  return [{
264
265
  option: 'fuzzy',
@@ -980,7 +981,7 @@ var commonListItemStyles = {
980
981
  alignItems: 'center'
981
982
  };
982
983
  var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
983
- var _columnDef$enabledCol, _localization$sortByC, _localization$sortByC2, _localization$filterB, _localization, _localization$hideCol, _localization$showAll;
984
+ var _columnDef$columnFilt, _localization$sortByC, _localization$sortByC2, _localization$filterB, _localization, _localization$hideCol, _localization$showAll;
984
985
 
985
986
  var anchorEl = _ref.anchorEl,
986
987
  header = _ref.header,
@@ -997,7 +998,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
997
998
  enableHiding = _table$options.enableHiding,
998
999
  enablePinning = _table$options.enablePinning,
999
1000
  enableSorting = _table$options.enableSorting,
1000
- enabledColumnFilterOptions = _table$options.enabledColumnFilterOptions,
1001
+ columnFilterModeOptions = _table$options.columnFilterModeOptions,
1001
1002
  _table$options$icons = _table$options.icons,
1002
1003
  ArrowRightIcon = _table$options$icons.ArrowRightIcon,
1003
1004
  ClearAllIcon = _table$options$icons.ClearAllIcon,
@@ -1098,7 +1099,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
1098
1099
  };
1099
1100
 
1100
1101
  var isSelectFilter = !!columnDef.filterSelectOptions;
1101
- var allowedColumnFilterOptions = (_columnDef$enabledCol = columnDef == null ? void 0 : columnDef.enabledColumnFilterOptions) != null ? _columnDef$enabledCol : enabledColumnFilterOptions;
1102
+ var allowedColumnFilterOptions = (_columnDef$columnFilt = columnDef == null ? void 0 : columnDef.columnFilterModeOptions) != null ? _columnDef$columnFilt : columnFilterModeOptions;
1102
1103
  var showFilterModeSubMenu = enableColumnFilterChangeMode && columnDef.enableColumnFilterChangeMode !== false && !isSelectFilter && (allowedColumnFilterOptions === undefined || !!(allowedColumnFilterOptions != null && allowedColumnFilterOptions.length));
1103
1104
  return React.createElement(Menu, {
1104
1105
  anchorEl: anchorEl,
@@ -1445,172 +1446,14 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
1445
1446
  }, checkboxProps, {
1446
1447
  sx: function sx(theme) {
1447
1448
  return _extends({
1448
- height: density === 'compact' ? '1.5rem' : '2rem',
1449
- width: density === 'compact' ? '1.5rem' : '2rem',
1450
- m: '-1re.m'
1449
+ height: density === 'compact' ? '1.75rem' : '2.5rem',
1450
+ width: density === 'compact' ? '1.75rem' : '2.5rem',
1451
+ m: density !== 'compact' ? '-0.4rem' : undefined
1451
1452
  }, (checkboxProps == null ? void 0 : checkboxProps.sx) instanceof Function ? checkboxProps.sx(theme) : checkboxProps == null ? void 0 : checkboxProps.sx);
1452
1453
  }
1453
1454
  })));
1454
1455
  };
1455
1456
 
1456
- var _excluded = ["table"];
1457
- var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
1458
- var table = _ref.table,
1459
- rest = _objectWithoutPropertiesLoose(_ref, _excluded);
1460
-
1461
- var getState = table.getState,
1462
- _table$options = table.options,
1463
- _table$options$icons = _table$options.icons,
1464
- FullscreenExitIcon = _table$options$icons.FullscreenExitIcon,
1465
- FullscreenIcon = _table$options$icons.FullscreenIcon,
1466
- localization = _table$options.localization,
1467
- setIsFullScreen = table.setIsFullScreen;
1468
-
1469
- var _getState = getState(),
1470
- isFullScreen = _getState.isFullScreen;
1471
-
1472
- var handleToggleFullScreen = function handleToggleFullScreen() {
1473
- setIsFullScreen(!isFullScreen);
1474
- };
1475
-
1476
- return React.createElement(Tooltip, {
1477
- arrow: true,
1478
- title: localization.toggleFullScreen
1479
- }, React.createElement(IconButton, Object.assign({
1480
- "aria-label": localization.showHideFilters,
1481
- onClick: handleToggleFullScreen
1482
- }, rest), isFullScreen ? React.createElement(FullscreenExitIcon, null) : React.createElement(FullscreenIcon, null)));
1483
- };
1484
-
1485
- var _excluded$1 = ["table"];
1486
- var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
1487
- var table = _ref.table,
1488
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
1489
-
1490
- var _table$options = table.options,
1491
- ViewColumnIcon = _table$options.icons.ViewColumnIcon,
1492
- localization = _table$options.localization;
1493
-
1494
- var _useState = useState(null),
1495
- anchorEl = _useState[0],
1496
- setAnchorEl = _useState[1];
1497
-
1498
- var handleClick = function handleClick(event) {
1499
- setAnchorEl(event.currentTarget);
1500
- };
1501
-
1502
- return React.createElement(React.Fragment, null, React.createElement(Tooltip, {
1503
- arrow: true,
1504
- title: localization.showHideColumns
1505
- }, React.createElement(IconButton, Object.assign({
1506
- "aria-label": localization.showHideColumns,
1507
- onClick: handleClick
1508
- }, rest), React.createElement(ViewColumnIcon, null))), React.createElement(MRT_ShowHideColumnsMenu, {
1509
- anchorEl: anchorEl,
1510
- setAnchorEl: setAnchorEl,
1511
- table: table
1512
- }));
1513
- };
1514
-
1515
- var _excluded$2 = ["table"];
1516
- var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
1517
- var table = _ref.table,
1518
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
1519
-
1520
- var getState = table.getState,
1521
- _table$options = table.options,
1522
- _table$options$icons = _table$options.icons,
1523
- DensityLargeIcon = _table$options$icons.DensityLargeIcon,
1524
- DensityMediumIcon = _table$options$icons.DensityMediumIcon,
1525
- DensitySmallIcon = _table$options$icons.DensitySmallIcon,
1526
- localization = _table$options.localization,
1527
- setDensity = table.setDensity;
1528
-
1529
- var _getState = getState(),
1530
- density = _getState.density;
1531
-
1532
- var handleToggleDensePadding = function handleToggleDensePadding() {
1533
- var nextDensity = density === 'comfortable' ? 'compact' : density === 'compact' ? 'spacious' : 'comfortable';
1534
- setDensity(nextDensity);
1535
- };
1536
-
1537
- return React.createElement(Tooltip, {
1538
- arrow: true,
1539
- title: localization.toggleDensity
1540
- }, React.createElement(IconButton, Object.assign({
1541
- "aria-label": localization.toggleDensity,
1542
- onClick: handleToggleDensePadding
1543
- }, rest), density === 'compact' ? React.createElement(DensitySmallIcon, null) : density === 'comfortable' ? React.createElement(DensityMediumIcon, null) : React.createElement(DensityLargeIcon, null)));
1544
- };
1545
-
1546
- var _excluded$3 = ["table"];
1547
- var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
1548
- var table = _ref.table,
1549
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
1550
-
1551
- var getState = table.getState,
1552
- _table$options = table.options,
1553
- _table$options$icons = _table$options.icons,
1554
- FilterListIcon = _table$options$icons.FilterListIcon,
1555
- FilterListOffIcon = _table$options$icons.FilterListOffIcon,
1556
- localization = _table$options.localization,
1557
- setShowFilters = table.setShowFilters;
1558
-
1559
- var _getState = getState(),
1560
- showColumnFilters = _getState.showColumnFilters;
1561
-
1562
- var handleToggleShowFilters = function handleToggleShowFilters() {
1563
- setShowFilters(!showColumnFilters);
1564
- };
1565
-
1566
- return React.createElement(Tooltip, {
1567
- arrow: true,
1568
- title: localization.showHideFilters
1569
- }, React.createElement(IconButton, Object.assign({
1570
- "aria-label": localization.showHideFilters,
1571
- onClick: handleToggleShowFilters
1572
- }, rest), showColumnFilters ? React.createElement(FilterListOffIcon, null) : React.createElement(FilterListIcon, null)));
1573
- };
1574
-
1575
- var _excluded$4 = ["table"];
1576
- var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
1577
- var table = _ref.table,
1578
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
1579
-
1580
- var getState = table.getState,
1581
- _table$options = table.options,
1582
- _table$options$icons = _table$options.icons,
1583
- SearchIcon = _table$options$icons.SearchIcon,
1584
- SearchOffIcon = _table$options$icons.SearchOffIcon,
1585
- tableId = _table$options.tableId,
1586
- localization = _table$options.localization,
1587
- muiSearchTextFieldProps = _table$options.muiSearchTextFieldProps,
1588
- setShowGlobalFilter = table.setShowGlobalFilter;
1589
-
1590
- var _getState = getState(),
1591
- showGlobalFilter = _getState.showGlobalFilter;
1592
-
1593
- var textFieldProps = muiSearchTextFieldProps instanceof Function ? muiSearchTextFieldProps({
1594
- table: table
1595
- }) : muiSearchTextFieldProps;
1596
-
1597
- var handleToggleSearch = function handleToggleSearch() {
1598
- setShowGlobalFilter(!showGlobalFilter);
1599
- setTimeout(function () {
1600
- var _document$getElementB, _textFieldProps$id;
1601
-
1602
- return (_document$getElementB = document.getElementById((_textFieldProps$id = textFieldProps == null ? void 0 : textFieldProps.id) != null ? _textFieldProps$id : "mrt-" + tableId + "-search-text-field")) == null ? void 0 : _document$getElementB.focus();
1603
- }, 200);
1604
- };
1605
-
1606
- return React.createElement(Tooltip, {
1607
- arrow: true,
1608
- title: localization.showHideSearch
1609
- }, React.createElement(IconButton, Object.assign({
1610
- onClick: handleToggleSearch
1611
- }, rest), showGlobalFilter ? React.createElement(SearchOffIcon, null) : React.createElement(SearchIcon, null)));
1612
- };
1613
-
1614
1457
  var MRT_GlobalFilterTextField = function MRT_GlobalFilterTextField(_ref) {
1615
1458
  var _localization$clearSe;
1616
1459
 
@@ -1704,47 +1547,37 @@ var MRT_GlobalFilterTextField = function MRT_GlobalFilterTextField(_ref) {
1704
1547
  }));
1705
1548
  };
1706
1549
 
1707
- var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
1708
- var _renderToolbarInterna;
1550
+ var MRT_LinearProgressBar = function MRT_LinearProgressBar(_ref) {
1551
+ var isTopToolbar = _ref.isTopToolbar,
1552
+ table = _ref.table;
1553
+ var muiLinearProgressProps = table.options.muiLinearProgressProps,
1554
+ getState = table.getState;
1709
1555
 
1710
- var table = _ref.table;
1711
- var _table$options = table.options,
1712
- enableColumnFilters = _table$options.enableColumnFilters,
1713
- enableColumnOrdering = _table$options.enableColumnOrdering,
1714
- enableDensityToggle = _table$options.enableDensityToggle,
1715
- enableFilters = _table$options.enableFilters,
1716
- enableFullScreenToggle = _table$options.enableFullScreenToggle,
1717
- enableGlobalFilter = _table$options.enableGlobalFilter,
1718
- enableHiding = _table$options.enableHiding,
1719
- enablePinning = _table$options.enablePinning,
1720
- positionGlobalFilter = _table$options.positionGlobalFilter,
1721
- renderToolbarInternalActions = _table$options.renderToolbarInternalActions;
1722
- return React.createElement(Box, {
1556
+ var _getState = getState(),
1557
+ isLoading = _getState.isLoading,
1558
+ showProgressBars = _getState.showProgressBars;
1559
+
1560
+ var linearProgressProps = muiLinearProgressProps instanceof Function ? muiLinearProgressProps({
1561
+ isTopToolbar: isTopToolbar,
1562
+ table: table
1563
+ }) : muiLinearProgressProps;
1564
+ return React.createElement(Collapse, {
1565
+ "in": isLoading || showProgressBars,
1566
+ mountOnEnter: true,
1567
+ unmountOnExit: true,
1723
1568
  sx: {
1724
- alignItems: 'center',
1725
- display: 'flex',
1726
- zIndex: 3
1569
+ bottom: isTopToolbar ? 0 : undefined,
1570
+ position: 'absolute',
1571
+ top: !isTopToolbar ? 0 : undefined,
1572
+ width: '100%'
1727
1573
  }
1728
- }, (_renderToolbarInterna = renderToolbarInternalActions == null ? void 0 : renderToolbarInternalActions({
1729
- MRT_FullScreenToggleButton: MRT_FullScreenToggleButton,
1730
- MRT_ShowHideColumnsButton: MRT_ShowHideColumnsButton,
1731
- MRT_ToggleDensePaddingButton: MRT_ToggleDensePaddingButton,
1732
- MRT_ToggleFiltersButton: MRT_ToggleFiltersButton,
1733
- MRT_ToggleGlobalFilterButton: MRT_ToggleGlobalFilterButton,
1734
- table: table
1735
- })) != null ? _renderToolbarInterna : React.createElement(React.Fragment, null, enableGlobalFilter && positionGlobalFilter === 'right' && React.createElement(MRT_GlobalFilterTextField, {
1736
- table: table
1737
- }), enableFilters && enableGlobalFilter && React.createElement(MRT_ToggleGlobalFilterButton, {
1738
- table: table
1739
- }), enableFilters && enableColumnFilters && React.createElement(MRT_ToggleFiltersButton, {
1740
- table: table
1741
- }), (enableHiding || enableColumnOrdering || enablePinning) && React.createElement(MRT_ShowHideColumnsButton, {
1742
- table: table
1743
- }), enableDensityToggle && React.createElement(MRT_ToggleDensePaddingButton, {
1744
- table: table
1745
- }), enableFullScreenToggle && React.createElement(MRT_FullScreenToggleButton, {
1746
- table: table
1747
- })));
1574
+ }, React.createElement(LinearProgress, Object.assign({
1575
+ "aria-label": "Loading",
1576
+ "aria-busy": "true",
1577
+ sx: {
1578
+ position: 'relative'
1579
+ }
1580
+ }, linearProgressProps)));
1748
1581
  };
1749
1582
 
1750
1583
  var MRT_TablePagination = function MRT_TablePagination(_ref) {
@@ -1869,42 +1702,211 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
1869
1702
  }, alertProps == null ? void 0 : alertProps.children, (alertProps == null ? void 0 : alertProps.children) && (selectMessage || groupedByMessage) && React.createElement("br", null), selectMessage, selectMessage && groupedByMessage && React.createElement("br", null), groupedByMessage)));
1870
1703
  };
1871
1704
 
1872
- var MRT_LinearProgressBar = function MRT_LinearProgressBar(_ref) {
1873
- var isTopToolbar = _ref.isTopToolbar,
1874
- table = _ref.table;
1875
- var muiLinearProgressProps = table.options.muiLinearProgressProps,
1876
- getState = table.getState;
1705
+ var _excluded = ["table"];
1706
+ var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
1707
+ var table = _ref.table,
1708
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded);
1709
+
1710
+ var getState = table.getState,
1711
+ _table$options = table.options,
1712
+ _table$options$icons = _table$options.icons,
1713
+ FullscreenExitIcon = _table$options$icons.FullscreenExitIcon,
1714
+ FullscreenIcon = _table$options$icons.FullscreenIcon,
1715
+ localization = _table$options.localization,
1716
+ setIsFullScreen = table.setIsFullScreen;
1877
1717
 
1878
1718
  var _getState = getState(),
1879
- isLoading = _getState.isLoading,
1880
- showProgressBars = _getState.showProgressBars;
1719
+ isFullScreen = _getState.isFullScreen;
1881
1720
 
1882
- var linearProgressProps = muiLinearProgressProps instanceof Function ? muiLinearProgressProps({
1883
- isTopToolbar: isTopToolbar,
1721
+ var handleToggleFullScreen = function handleToggleFullScreen() {
1722
+ setIsFullScreen(!isFullScreen);
1723
+ };
1724
+
1725
+ return React.createElement(Tooltip, {
1726
+ arrow: true,
1727
+ title: localization.toggleFullScreen
1728
+ }, React.createElement(IconButton, Object.assign({
1729
+ "aria-label": localization.showHideFilters,
1730
+ onClick: handleToggleFullScreen
1731
+ }, rest), isFullScreen ? React.createElement(FullscreenExitIcon, null) : React.createElement(FullscreenIcon, null)));
1732
+ };
1733
+
1734
+ var _excluded$1 = ["table"];
1735
+ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
1736
+ var table = _ref.table,
1737
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
1738
+
1739
+ var _table$options = table.options,
1740
+ ViewColumnIcon = _table$options.icons.ViewColumnIcon,
1741
+ localization = _table$options.localization;
1742
+
1743
+ var _useState = useState(null),
1744
+ anchorEl = _useState[0],
1745
+ setAnchorEl = _useState[1];
1746
+
1747
+ var handleClick = function handleClick(event) {
1748
+ setAnchorEl(event.currentTarget);
1749
+ };
1750
+
1751
+ return React.createElement(React.Fragment, null, React.createElement(Tooltip, {
1752
+ arrow: true,
1753
+ title: localization.showHideColumns
1754
+ }, React.createElement(IconButton, Object.assign({
1755
+ "aria-label": localization.showHideColumns,
1756
+ onClick: handleClick
1757
+ }, rest), React.createElement(ViewColumnIcon, null))), React.createElement(MRT_ShowHideColumnsMenu, {
1758
+ anchorEl: anchorEl,
1759
+ setAnchorEl: setAnchorEl,
1884
1760
  table: table
1885
- }) : muiLinearProgressProps;
1886
- return React.createElement(Collapse, {
1887
- "in": isLoading || showProgressBars,
1888
- mountOnEnter: true,
1889
- unmountOnExit: true,
1890
- sx: {
1891
- bottom: isTopToolbar ? 0 : undefined,
1892
- position: 'absolute',
1893
- top: !isTopToolbar ? 0 : undefined,
1894
- width: '100%'
1895
- }
1896
- }, React.createElement(LinearProgress, Object.assign({
1897
- "aria-label": "Loading",
1898
- "aria-busy": "true",
1761
+ }));
1762
+ };
1763
+
1764
+ var _excluded$2 = ["table"];
1765
+ var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
1766
+ var table = _ref.table,
1767
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
1768
+
1769
+ var getState = table.getState,
1770
+ _table$options = table.options,
1771
+ _table$options$icons = _table$options.icons,
1772
+ DensityLargeIcon = _table$options$icons.DensityLargeIcon,
1773
+ DensityMediumIcon = _table$options$icons.DensityMediumIcon,
1774
+ DensitySmallIcon = _table$options$icons.DensitySmallIcon,
1775
+ localization = _table$options.localization,
1776
+ setDensity = table.setDensity;
1777
+
1778
+ var _getState = getState(),
1779
+ density = _getState.density;
1780
+
1781
+ var handleToggleDensePadding = function handleToggleDensePadding() {
1782
+ var nextDensity = density === 'comfortable' ? 'compact' : density === 'compact' ? 'spacious' : 'comfortable';
1783
+ setDensity(nextDensity);
1784
+ };
1785
+
1786
+ return React.createElement(Tooltip, {
1787
+ arrow: true,
1788
+ title: localization.toggleDensity
1789
+ }, React.createElement(IconButton, Object.assign({
1790
+ "aria-label": localization.toggleDensity,
1791
+ onClick: handleToggleDensePadding
1792
+ }, rest), density === 'compact' ? React.createElement(DensitySmallIcon, null) : density === 'comfortable' ? React.createElement(DensityMediumIcon, null) : React.createElement(DensityLargeIcon, null)));
1793
+ };
1794
+
1795
+ var _excluded$3 = ["table"];
1796
+ var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
1797
+ var table = _ref.table,
1798
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
1799
+
1800
+ var getState = table.getState,
1801
+ _table$options = table.options,
1802
+ _table$options$icons = _table$options.icons,
1803
+ FilterListIcon = _table$options$icons.FilterListIcon,
1804
+ FilterListOffIcon = _table$options$icons.FilterListOffIcon,
1805
+ localization = _table$options.localization,
1806
+ setShowFilters = table.setShowFilters;
1807
+
1808
+ var _getState = getState(),
1809
+ showColumnFilters = _getState.showColumnFilters;
1810
+
1811
+ var handleToggleShowFilters = function handleToggleShowFilters() {
1812
+ setShowFilters(!showColumnFilters);
1813
+ };
1814
+
1815
+ return React.createElement(Tooltip, {
1816
+ arrow: true,
1817
+ title: localization.showHideFilters
1818
+ }, React.createElement(IconButton, Object.assign({
1819
+ "aria-label": localization.showHideFilters,
1820
+ onClick: handleToggleShowFilters
1821
+ }, rest), showColumnFilters ? React.createElement(FilterListOffIcon, null) : React.createElement(FilterListIcon, null)));
1822
+ };
1823
+
1824
+ var _excluded$4 = ["table"];
1825
+ var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
1826
+ var table = _ref.table,
1827
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
1828
+
1829
+ var getState = table.getState,
1830
+ _table$options = table.options,
1831
+ _table$options$icons = _table$options.icons,
1832
+ SearchIcon = _table$options$icons.SearchIcon,
1833
+ SearchOffIcon = _table$options$icons.SearchOffIcon,
1834
+ tableId = _table$options.tableId,
1835
+ localization = _table$options.localization,
1836
+ muiSearchTextFieldProps = _table$options.muiSearchTextFieldProps,
1837
+ setShowGlobalFilter = table.setShowGlobalFilter;
1838
+
1839
+ var _getState = getState(),
1840
+ showGlobalFilter = _getState.showGlobalFilter;
1841
+
1842
+ var textFieldProps = muiSearchTextFieldProps instanceof Function ? muiSearchTextFieldProps({
1843
+ table: table
1844
+ }) : muiSearchTextFieldProps;
1845
+
1846
+ var handleToggleSearch = function handleToggleSearch() {
1847
+ setShowGlobalFilter(!showGlobalFilter);
1848
+ setTimeout(function () {
1849
+ var _document$getElementB, _textFieldProps$id;
1850
+
1851
+ return (_document$getElementB = document.getElementById((_textFieldProps$id = textFieldProps == null ? void 0 : textFieldProps.id) != null ? _textFieldProps$id : "mrt-" + tableId + "-search-text-field")) == null ? void 0 : _document$getElementB.focus();
1852
+ }, 200);
1853
+ };
1854
+
1855
+ return React.createElement(Tooltip, {
1856
+ arrow: true,
1857
+ title: localization.showHideSearch
1858
+ }, React.createElement(IconButton, Object.assign({
1859
+ onClick: handleToggleSearch
1860
+ }, rest), showGlobalFilter ? React.createElement(SearchOffIcon, null) : React.createElement(SearchIcon, null)));
1861
+ };
1862
+
1863
+ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
1864
+ var _renderToolbarInterna;
1865
+
1866
+ var table = _ref.table;
1867
+ var _table$options = table.options,
1868
+ enableColumnFilters = _table$options.enableColumnFilters,
1869
+ enableColumnOrdering = _table$options.enableColumnOrdering,
1870
+ enableDensityToggle = _table$options.enableDensityToggle,
1871
+ enableFilters = _table$options.enableFilters,
1872
+ enableFullScreenToggle = _table$options.enableFullScreenToggle,
1873
+ enableGlobalFilter = _table$options.enableGlobalFilter,
1874
+ enableHiding = _table$options.enableHiding,
1875
+ enablePinning = _table$options.enablePinning,
1876
+ positionGlobalFilter = _table$options.positionGlobalFilter,
1877
+ renderToolbarInternalActions = _table$options.renderToolbarInternalActions;
1878
+ return React.createElement(Box, {
1899
1879
  sx: {
1900
- position: 'relative'
1880
+ alignItems: 'center',
1881
+ display: 'flex',
1882
+ zIndex: 3
1901
1883
  }
1902
- }, linearProgressProps)));
1884
+ }, (_renderToolbarInterna = renderToolbarInternalActions == null ? void 0 : renderToolbarInternalActions({
1885
+ MRT_FullScreenToggleButton: MRT_FullScreenToggleButton,
1886
+ MRT_ShowHideColumnsButton: MRT_ShowHideColumnsButton,
1887
+ MRT_ToggleDensePaddingButton: MRT_ToggleDensePaddingButton,
1888
+ MRT_ToggleFiltersButton: MRT_ToggleFiltersButton,
1889
+ MRT_ToggleGlobalFilterButton: MRT_ToggleGlobalFilterButton,
1890
+ table: table
1891
+ })) != null ? _renderToolbarInterna : React.createElement(React.Fragment, null, enableGlobalFilter && positionGlobalFilter === 'right' && React.createElement(MRT_GlobalFilterTextField, {
1892
+ table: table
1893
+ }), enableFilters && enableGlobalFilter && React.createElement(MRT_ToggleGlobalFilterButton, {
1894
+ table: table
1895
+ }), enableFilters && enableColumnFilters && React.createElement(MRT_ToggleFiltersButton, {
1896
+ table: table
1897
+ }), (enableHiding || enableColumnOrdering || enablePinning) && React.createElement(MRT_ShowHideColumnsButton, {
1898
+ table: table
1899
+ }), enableDensityToggle && React.createElement(MRT_ToggleDensePaddingButton, {
1900
+ table: table
1901
+ }), enableFullScreenToggle && React.createElement(MRT_FullScreenToggleButton, {
1902
+ table: table
1903
+ })));
1903
1904
  };
1904
1905
 
1905
1906
  var commonToolbarStyles = function commonToolbarStyles(_ref) {
1906
1907
  var theme = _ref.theme;
1907
1908
  return {
1909
+ alignItems: 'flex-start',
1908
1910
  backgroundColor: lighten(theme.palette.background["default"], 0.04),
1909
1911
  backgroundImage: 'none',
1910
1912
  display: 'grid',
@@ -1939,7 +1941,7 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
1939
1941
  var toolbarProps = muiTableToolbarTopProps instanceof Function ? muiTableToolbarTopProps({
1940
1942
  table: table
1941
1943
  }) : muiTableToolbarTopProps;
1942
- var stackAlertBanner = isMobile || positionToolbarAlertBanner === 'top' && (!!renderToolbarTopCustomActions || showGlobalFilter);
1944
+ var stackAlertBanner = isMobile || !!renderToolbarTopCustomActions || showGlobalFilter;
1943
1945
  return React.createElement(Toolbar, Object.assign({
1944
1946
  id: "mrt-" + tableId + "-toolbar-top",
1945
1947
  variant: "dense"
@@ -2002,7 +2004,7 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
2002
2004
  var toolbarProps = muiTableToolbarBottomProps instanceof Function ? muiTableToolbarBottomProps({
2003
2005
  table: table
2004
2006
  }) : muiTableToolbarBottomProps;
2005
- var stackAlertBanner = isMobile || positionToolbarAlertBanner === 'bottom' && !!renderToolbarBottomCustomActions;
2007
+ var stackAlertBanner = isMobile || !!renderToolbarBottomCustomActions;
2006
2008
  return React.createElement(Toolbar, Object.assign({
2007
2009
  id: "mrt-" + tableId + "-toolbar-bottom",
2008
2010
  variant: "dense"
@@ -2112,7 +2114,7 @@ var MRT_TableHeadCellColumnActionsButton = function MRT_TableHeadCellColumnActio
2112
2114
  };
2113
2115
 
2114
2116
  var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
2115
- var _currentFilterOption$, _localization$filterB, _columnDef$enabledCol, _currentFilterOption$2, _localization$clearFi, _columnDef$filterSele;
2117
+ var _currentFilterOption$, _localization$filterB, _columnDef$columnFilt, _currentFilterOption$2, _localization$clearFi, _columnDef$filterSele;
2116
2118
 
2117
2119
  var header = _ref.header,
2118
2120
  inputIndex = _ref.inputIndex,
@@ -2120,7 +2122,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
2120
2122
  var getState = table.getState,
2121
2123
  _table$options = table.options,
2122
2124
  enableColumnFilterChangeMode = _table$options.enableColumnFilterChangeMode,
2123
- enabledColumnFilterOptions = _table$options.enabledColumnFilterOptions,
2125
+ columnFilterModeOptions = _table$options.columnFilterModeOptions,
2124
2126
  _table$options$icons = _table$options.icons,
2125
2127
  FilterListIcon = _table$options$icons.FilterListIcon,
2126
2128
  CloseIcon = _table$options$icons.CloseIcon,
@@ -2217,7 +2219,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
2217
2219
  var filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption) ? //@ts-ignore
2218
2220
  localization["filter" + ((currentFilterOption == null ? void 0 : (_currentFilterOption$ = currentFilterOption.charAt(0)) == null ? void 0 : _currentFilterOption$.toUpperCase()) + (currentFilterOption == null ? void 0 : currentFilterOption.slice(1)))] : '';
2219
2221
  var filterPlaceholder = inputIndex === undefined ? (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(columnDef.header)) : inputIndex === 0 ? localization.min : inputIndex === 1 ? localization.max : '';
2220
- var allowedColumnFilterOptions = (_columnDef$enabledCol = columnDef == null ? void 0 : columnDef.enabledColumnFilterOptions) != null ? _columnDef$enabledCol : enabledColumnFilterOptions;
2222
+ var allowedColumnFilterOptions = (_columnDef$columnFilt = columnDef == null ? void 0 : columnDef.columnFilterModeOptions) != null ? _columnDef$columnFilt : columnFilterModeOptions;
2221
2223
  var showChangeModeButton = enableColumnFilterChangeMode && columnDef.enableColumnFilterChangeMode !== false && !isSelectFilter && !inputIndex && (allowedColumnFilterOptions === undefined || !!(allowedColumnFilterOptions != null && allowedColumnFilterOptions.length));
2222
2224
  return React.createElement(React.Fragment, null, React.createElement(TextField, Object.assign({
2223
2225
  fullWidth: true,
@@ -2289,7 +2291,6 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
2289
2291
  }, textFieldProps, {
2290
2292
  sx: function sx(theme) {
2291
2293
  return _extends({
2292
- m: '-0.25rem',
2293
2294
  p: 0,
2294
2295
  minWidth: !filterChipLabel ? '8rem' : 'auto',
2295
2296
  width: 'calc(100% + 0.5rem)',
@@ -2622,7 +2623,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
2622
2623
  left: column.getIsPinned() === 'left' ? column.getStart('left') + "px" : undefined,
2623
2624
  overflow: 'visible',
2624
2625
  opacity: (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id) === column.id || (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === column.id ? 0.5 : 1,
2625
- p: density === 'compact' ? columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : density === 'comfortable' ? columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem' : columnDefType === 'display' ? '1rem 1.25rem' : '1.5rem',
2626
+ p: density === 'compact' ? '0.5rem' : density === 'comfortable' ? columnDefType === 'display' ? '0.75rem' : '1rem' : columnDefType === 'display' ? '1rem 1.25rem' : '1.5rem',
2626
2627
  pb: columnDefType === 'display' ? 0 : undefined,
2627
2628
  position: column.getIsPinned() && columnDefType !== 'group' ? 'sticky' : undefined,
2628
2629
  pt: columnDefType === 'group' ? 0 : density === 'compact' ? '0.25' : density === 'comfortable' ? '.75rem' : '1.25rem',
@@ -2923,6 +2924,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
2923
2924
  enableClickToCopy = _table$options.enableClickToCopy,
2924
2925
  enableColumnOrdering = _table$options.enableColumnOrdering,
2925
2926
  enableEditing = _table$options.enableEditing,
2927
+ enablePagination = _table$options.enablePagination,
2926
2928
  enableRowNumbers = _table$options.enableRowNumbers,
2927
2929
  muiTableBodyCellProps = _table$options.muiTableBodyCellProps,
2928
2930
  muiTableBodyCellSkeletonProps = _table$options.muiTableBodyCellSkeletonProps,
@@ -2997,7 +2999,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
2997
2999
  var draggingBorders = draggingBorder ? {
2998
3000
  borderLeft: draggingBorder,
2999
3001
  borderRight: draggingBorder,
3000
- borderBottom: row.index === table.getRowModel().rows.length - 1 ? draggingBorder : undefined
3002
+ borderBottom: row.index === (enablePagination ? table.getRowModel() : table.getPrePaginationRowModel()).rows.length - 1 ? draggingBorder : undefined
3001
3003
  } : undefined;
3002
3004
  return React.createElement(TableCell, Object.assign({
3003
3005
  onDoubleClick: handleDoubleClick,
@@ -3725,7 +3727,7 @@ var MaterialReactTable = (function (_ref) {
3725
3727
  _ref$enableColumnActi = _ref.enableColumnActions,
3726
3728
  enableColumnActions = _ref$enableColumnActi === void 0 ? true : _ref$enableColumnActi,
3727
3729
  _ref$enableColumnFilt = _ref.enableColumnFilterChangeMode,
3728
- enableColumnFilterChangeMode = _ref$enableColumnFilt === void 0 ? true : _ref$enableColumnFilt,
3730
+ enableColumnFilterChangeMode = _ref$enableColumnFilt === void 0 ? false : _ref$enableColumnFilt,
3729
3731
  _ref$enableColumnFilt2 = _ref.enableColumnFilters,
3730
3732
  enableColumnFilters = _ref$enableColumnFilt2 === void 0 ? true : _ref$enableColumnFilt2,
3731
3733
  _ref$enableColumnOrde = _ref.enableColumnOrdering,
@@ -3743,7 +3745,7 @@ var MaterialReactTable = (function (_ref) {
3743
3745
  _ref$enableGlobalFilt = _ref.enableGlobalFilter,
3744
3746
  enableGlobalFilter = _ref$enableGlobalFilt === void 0 ? true : _ref$enableGlobalFilt,
3745
3747
  _ref$enableGlobalFilt2 = _ref.enableGlobalFilterChangeMode,
3746
- enableGlobalFilterChangeMode = _ref$enableGlobalFilt2 === void 0 ? true : _ref$enableGlobalFilt2,
3748
+ enableGlobalFilterChangeMode = _ref$enableGlobalFilt2 === void 0 ? false : _ref$enableGlobalFilt2,
3747
3749
  _ref$enableGlobalFilt3 = _ref.enableGlobalFilterRankedResults,
3748
3750
  enableGlobalFilterRankedResults = _ref$enableGlobalFilt3 === void 0 ? true : _ref$enableGlobalFilt3,
3749
3751
  _ref$enableGrouping = _ref.enableGrouping,