material-react-table 0.5.5 → 0.5.6

package/dist/material-react-table.esm.js

@@ -1,7 +1,7 @@
 import React, { useState, useMemo, useContext, createContext, Fragment, useRef, useEffect } from 'react';
 import { useTable, useFilters, useGlobalFilter, useGroupBy, useSortBy, useExpanded, usePagination, useRowSelect, useResizeColumns, useFlexLayout, useAsyncDebounce } from 'react-table';
 import { matchSorter } from 'match-sorter';
-import { Menu, MenuList, MenuItem, TextField, InputAdornment, Tooltip, IconButton, Chip, ListItemIcon, ListItemText, TableCell, Box, TableSortLabel, Divider, Collapse, Checkbox, TableRow, TableHead, alpha, TableBody, TableFooter, Table, FormControlLabel, Switch, Button, TablePagination, useMediaQuery, Alert, Toolbar, TableContainer, Paper, LinearProgress } from '@mui/material';
+import { Menu, MenuItem, TextField, InputAdornment, Tooltip, IconButton, Chip, ListItemIcon, ListItemText, TableCell, Box, TableSortLabel, Divider, Collapse, Skeleton, Checkbox, TableRow, TableHead, alpha, TableBody, TableFooter, Table, FormControlLabel, Switch, Button, TablePagination, useMediaQuery, Alert, Toolbar, TableContainer, Paper, LinearProgress } from '@mui/material';
 import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 import CancelIcon from '@mui/icons-material/Cancel';
 import ClearAllIcon from '@mui/icons-material/ClearAll';
@@ -370,10 +370,11 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
     onClose: function onClose() {
       return setAnchorEl(null);
     },
-    open: !!anchorEl
-  }, React.createElement(MenuList, {
-    dense: tableInstance.state.densePadding,
-    disablePadding: true
+    open: !!anchorEl,
+    MenuListProps: {
+      dense: tableInstance.state.densePadding,
+      disablePadding: true
+    }
   }, filterTypes.map(function (_ref2) {
     var type = _ref2.type,
         label = _ref2.label,
@@ -387,7 +388,7 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
       selected: type === filterType,
       value: type
     }, label);
-  })));
+  }));
 };
 
 var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
@@ -459,7 +460,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
       disabled: !!filterChipLabel,
       sx: {
         textOverflow: 'ellipsis',
-        width: filterChipLabel ? 0 : 'auto'
+        width: filterChipLabel ? 0 : undefined
       },
       title: filterPlaceholder
     },
@@ -601,10 +602,11 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     open: !!anchorEl,
     onClose: function onClose() {
       return setAnchorEl(null);
+    },
+    MenuListProps: {
+      dense: tableInstance.state.densePadding,
+      disablePadding: true
     }
-  }, React.createElement(MenuList, {
-    dense: tableInstance.state.densePadding,
-    disablePadding: true
   }, !disableSortBy && column.canSort && [React.createElement(MenuItem, {
     key: 1,
     disabled: !column.isSorted,
@@ -652,7 +654,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     key: 1,
     onClick: handleHideColumn,
     sx: commonMenuItemStyles
-  }, React.createElement(ListItemIcon, null, React.createElement(VisibilityOffIcon, null)), React.createElement(ListItemText, null, (_localization$columnA3 = localization.columnActionMenuItemHideColumn) == null ? void 0 : _localization$columnA3.replace('{column}', String(column.Header))))]));
+  }, React.createElement(ListItemIcon, null, React.createElement(VisibilityOffIcon, null)), React.createElement(ListItemText, null, (_localization$columnA3 = localization.columnActionMenuItemHideColumn) == null ? void 0 : _localization$columnA3.replace('{column}', String(column.Header))))]);
 };
 
 var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton(_ref) {
@@ -875,8 +877,10 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   var cell = _ref.cell;
 
   var _useMRT = useMRT(),
-      onCellClick = _useMRT.onCellClick,
+      isLoading = _useMRT.isLoading,
       muiTableBodyCellProps = _useMRT.muiTableBodyCellProps,
+      muiTableBodyCellSkeletonProps = _useMRT.muiTableBodyCellSkeletonProps,
+      onCellClick = _useMRT.onCellClick,
       _useMRT$tableInstance = _useMRT.tableInstance.state,
       currentEditingRow = _useMRT$tableInstance.currentEditingRow,
       densePadding = _useMRT$tableInstance.densePadding;
@@ -894,7 +898,11 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
     }
   }, tableCellProps, {
     sx: _extends({}, commonTableBodyCellStyles(densePadding), tableCellProps == null ? void 0 : tableCellProps.sx)
-  }), (currentEditingRow == null ? void 0 : currentEditingRow.id) === cell.row.id ? React.createElement(MRT_EditCellTextField, {
+  }), isLoading ? React.createElement(Skeleton, Object.assign({
+    animation: "wave",
+    height: 20,
+    width: Math.random() * (120 - 60) + 60
+  }, muiTableBodyCellSkeletonProps)) : (currentEditingRow == null ? void 0 : currentEditingRow.id) === cell.row.id ? React.createElement(MRT_EditCellTextField, {
     cell: cell
   }) : cell.isPlaceholder ? null : cell.isAggregated ? cell.render('Aggregated') : cell.isGrouped ? React.createElement("span", null, cell.render('Cell'), " (", cell.row.subRows.length, ")") : cell.render('Cell'));
 };
@@ -1131,15 +1139,16 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
     open: !!anchorEl,
     onClose: function onClose() {
       return setAnchorEl(null);
+    },
+    MenuListProps: {
+      dense: tableInstance.state.densePadding,
+      disablePadding: true
     }
-  }, React.createElement(MenuList, {
-    dense: tableInstance.state.densePadding,
-    disablePadding: true
   }, enableRowEditing && React.createElement(MenuItem, {
     onClick: handleEdit
   }, React.createElement(ListItemIcon, null, React.createElement(EditIcon, null)), React.createElement(ListItemText, null, localization.rowActionMenuItemEdit)), (_renderRowActionMenuI = renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems(row, tableInstance, function () {
     return setAnchorEl(null);
-  })) != null ? _renderRowActionMenuI : null));
+  })) != null ? _renderRowActionMenuI : null);
 };
 
 function createCommonjsModule(fn, module) {
@@ -2367,15 +2376,16 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
     open: !!anchorEl,
     onClose: function onClose() {
       return setAnchorEl(null);
+    },
+    MenuListProps: {
+      dense: tableInstance.state.densePadding,
+      disablePadding: true
     }
-  }, React.createElement(MenuList, {
-    dense: tableInstance.state.densePadding,
-    disablePadding: true
   }, React.createElement(Box, {
     sx: {
       display: 'flex',
       justifyContent: 'space-between',
-      p: '0 0.5rem 0.5rem 0.5rem'
+      p: '0.5rem'
     }
   }, React.createElement(Button, {
     disabled: !tableInstance.getToggleHideAllColumnsProps().checked && !tableInstance.getToggleHideAllColumnsProps().indeterminate,
@@ -2392,7 +2402,7 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
       key: index + "-" + column.id,
       column: column
     });
-  }))));
+  })));
 };
 
 var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
@@ -2677,6 +2687,7 @@ var MRT_TableContainer = function MRT_TableContainer() {
       hideToolbarTop = _useMRT.hideToolbarTop,
       isFetching = _useMRT.isFetching,
       isLoading = _useMRT.isLoading,
+      muiLinearProgressProps = _useMRT.muiLinearProgressProps,
       muiTableContainerProps = _useMRT.muiTableContainerProps,
       tableInstance = _useMRT.tableInstance;
 
@@ -2701,6 +2712,7 @@ var MRT_TableContainer = function MRT_TableContainer() {
     }
   }, [fullScreen]);
   var tableContainerProps = muiTableContainerProps instanceof Function ? muiTableContainerProps(tableInstance) : muiTableContainerProps;
+  var linearProgressProps = muiLinearProgressProps instanceof Function ? muiLinearProgressProps(tableInstance) : muiLinearProgressProps;
   return React.createElement(TableContainer, Object.assign({
     component: Paper
   }, tableContainerProps, {
@@ -2719,7 +2731,7 @@ var MRT_TableContainer = function MRT_TableContainer() {
   }), !hideToolbarTop && React.createElement(MRT_ToolbarTop, null), React.createElement(Collapse, {
     "in": isFetching || isLoading,
     unmountOnExit: true
-  }, React.createElement(LinearProgress, null)), React.createElement(Box, {
+  }, React.createElement(LinearProgress, Object.assign({}, linearProgressProps))), React.createElement(Box, {
     sx: {
       maxWidth: '100%',
       overflowX: 'auto'