material-react-table 0.3.5 → 0.4.3

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useContext, createContext, Fragment } from 'react';
+import React, { useMemo, useState, useContext, createContext, Fragment, useEffect } from 'react';
 import { useTable, useFilters, useGlobalFilter, useGroupBy, useSortBy, useExpanded, usePagination, useRowSelect, useResizeColumns, useFlexLayout, useAsyncDebounce } from 'react-table';
 import { TextField as TextField$1, Tooltip, InputAdornment, IconButton as IconButton$2, Menu, Divider as Divider$1, styled, MenuItem as MenuItem$2, TableCell as TableCell$3, TableSortLabel, Collapse, Checkbox, TableRow as TableRow$1, TableHead, alpha, TableBody as TableBody$1, TableFooter, Table, FormControlLabel, Switch, Button, TablePagination, useMediaQuery, Chip, Alert as Alert$1, Toolbar as Toolbar$2, Paper, LinearProgress, CircularProgress, TableContainer as TableContainer$1 } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
@@ -17,6 +17,8 @@ import CancelIcon from '@mui/icons-material/Cancel';
 import SearchIcon from '@mui/icons-material/Search';
 import FilterListOffIcon from '@mui/icons-material/FilterListOff';
 import ViewColumnIcon from '@mui/icons-material/ViewColumn';
+import DensityMediumIcon from '@mui/icons-material/DensityMedium';
+import DensitySmallIcon from '@mui/icons-material/DensitySmall';
 import SearchOffIcon from '@mui/icons-material/SearchOff';
 import FilterListIcon from '@mui/icons-material/Fullscreen';
 import FilterListOffIcon$1 from '@mui/icons-material/FullscreenExit';
@@ -2076,8 +2078,8 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton() {
   })));
 };
 
-var MRT_DensePaddingSwitch = function MRT_DensePaddingSwitch() {
-  var _localization$toggleD, _localization$toggleD2;
+var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton() {
+  var _localization$toggleD;
 
   var _useMRT = useMRT(),
       densePadding = _useMRT.densePadding,
@@ -2087,17 +2089,13 @@ var MRT_DensePaddingSwitch = function MRT_DensePaddingSwitch() {
   return React.createElement(Tooltip, {
     arrow: true,
     title: (_localization$toggleD = localization == null ? void 0 : localization.toggleDensePaddingSwitchTitle) != null ? _localization$toggleD : ''
-  }, React.createElement(Switch, {
-    inputProps: {
-      'aria-label': (_localization$toggleD2 = localization == null ? void 0 : localization.toggleDensePaddingSwitchTitle) != null ? _localization$toggleD2 : ''
-    },
-    color: "default",
-    checked: densePadding,
-    size: "small",
-    onChange: function onChange() {
+  }, React.createElement(IconButton$2, {
+    "aria-label": localization == null ? void 0 : localization.toggleDensePaddingSwitchTitle,
+    onClick: function onClick() {
       return setDensePadding(!densePadding);
-    }
-  }));
+    },
+    size: "small"
+  }, densePadding ? React.createElement(DensitySmallIcon, null) : React.createElement(DensityMediumIcon, null)));
 };
 
 var MRT_ToggleSearchButton = function MRT_ToggleSearchButton() {
@@ -2160,7 +2158,7 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons() {
       disableGlobalFilter = _useMRT.disableGlobalFilter,
       disableFullScreenToggle = _useMRT.disableFullScreenToggle;
 
-  return React.createElement(ToolbarButtonsContainer, null, !disableGlobalFilter && React.createElement(MRT_ToggleSearchButton, null), !disableFilters && React.createElement(MRT_ToggleFiltersButton, null), !disableColumnHiding && React.createElement(MRT_ShowHideColumnsButton, null), !disableDensePaddingToggle && React.createElement(MRT_DensePaddingSwitch, null), !disableFullScreenToggle && React.createElement(MRT_FullScreenToggleButton, null));
+  return React.createElement(ToolbarButtonsContainer, null, !disableGlobalFilter && React.createElement(MRT_ToggleSearchButton, null), !disableFilters && React.createElement(MRT_ToggleFiltersButton, null), !disableColumnHiding && React.createElement(MRT_ShowHideColumnsButton, null), !disableDensePaddingToggle && React.createElement(MRT_ToggleDensePaddingButton, null), !disableFullScreenToggle && React.createElement(MRT_FullScreenToggleButton, null));
 };
 
 var MRT_TablePagination = function MRT_TablePagination() {
@@ -2254,12 +2252,26 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner() {
   }, alertProps), selectMessage, groupedByMessage));
 };
 
-var Toolbar = /*#__PURE__*/styled(Toolbar$2)({
-  display: 'grid',
-  padding: '0 0.5rem !important'
+var Toolbar = /*#__PURE__*/styled(Toolbar$2, {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'fullScreen';
+  }
+})(function (_ref) {
+  var fullScreen = _ref.fullScreen,
+      theme = _ref.theme;
+  return {
+    backgroundColor: theme.palette.background["default"],
+    backgroundImage: "linear-gradient(" + alpha(theme.palette.common.white, 0.05) + "," + alpha(theme.palette.common.white, 0.05) + ")",
+    display: 'grid',
+    padding: '0 0.5rem !important',
+    position: fullScreen ? 'sticky' : undefined,
+    top: fullScreen ? '0' : undefined,
+    width: 'calc(100% - 1rem)',
+    zIndex: 1
+  };
 });
 var ToolbarTopRow = /*#__PURE__*/styled('div')({
-  padding: '1rem 0.5rem',
+  padding: '0.5rem',
   display: 'flex',
   justifyContent: 'space-between'
 });
@@ -2279,21 +2291,37 @@ var MRT_ToolbarTop = function MRT_ToolbarTop() {
       muiTableToolbarTopProps = _useMRT.muiTableToolbarTopProps,
       positionPagination = _useMRT.positionPagination,
       positionToolbarActions = _useMRT.positionToolbarActions,
+      fullScreen = _useMRT.fullScreen,
       positionToolbarAlertBanner = _useMRT.positionToolbarAlertBanner,
       renderToolbarCustomActions = _useMRT.renderToolbarCustomActions,
       tableInstance = _useMRT.tableInstance;
 
   var toolbarProps = muiTableToolbarTopProps instanceof Function ? muiTableToolbarTopProps(tableInstance) : muiTableToolbarTopProps;
   return React.createElement(Toolbar, Object.assign({
+    fullScreen: fullScreen,
     variant: "dense"
   }, toolbarProps), positionToolbarAlertBanner === 'top' && React.createElement(MRT_ToolbarAlertBanner, null), React.createElement(ToolbarTopRow, null, (_renderToolbarCustomA = renderToolbarCustomActions == null ? void 0 : renderToolbarCustomActions(tableInstance)) != null ? _renderToolbarCustomA : React.createElement("span", null), React.createElement(ToolbarActionsContainer, null, !disableGlobalFilter && React.createElement(MRT_SearchTextField, null), !hideToolbarActions && positionToolbarActions === 'top' && React.createElement(MRT_ToolbarInternalButtons, null))), React.createElement("div", null, !manualPagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, null)));
 };
 
-var Toolbar$1 = /*#__PURE__*/styled(Toolbar$2)({
-  display: 'flex',
-  justifyContent: 'space-between',
-  padding: '0 0.5rem !important',
-  overflowY: 'hidden'
+var Toolbar$1 = /*#__PURE__*/styled(Toolbar$2, {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'fullScreen';
+  }
+})(function (_ref) {
+  var fullScreen = _ref.fullScreen,
+      theme = _ref.theme;
+  return {
+    backgroundColor: theme.palette.background["default"],
+    backgroundImage: "linear-gradient(" + alpha(theme.palette.common.white, 0.05) + "," + alpha(theme.palette.common.white, 0.05) + ")",
+    bottom: fullScreen ? '0' : undefined,
+    display: 'flex',
+    justifyContent: 'space-between',
+    overflowY: 'hidden',
+    padding: '0 0.5rem !important',
+    position: fullScreen ? 'fixed' : undefined,
+    width: 'calc(100% - 1rem)',
+    zIndex: 1
+  };
 });
 var MRT_ToolbarBottom = function MRT_ToolbarBottom() {
   var _useMRT = useMRT(),
@@ -2301,12 +2329,14 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom() {
       manualPagination = _useMRT.manualPagination,
       muiTableToolbarBottomProps = _useMRT.muiTableToolbarBottomProps,
       positionPagination = _useMRT.positionPagination,
+      fullScreen = _useMRT.fullScreen,
       positionToolbarActions = _useMRT.positionToolbarActions,
       positionToolbarAlertBanner = _useMRT.positionToolbarAlertBanner,
       tableInstance = _useMRT.tableInstance;
 
   var toolbarProps = muiTableToolbarBottomProps instanceof Function ? muiTableToolbarBottomProps(tableInstance) : muiTableToolbarBottomProps;
   return React.createElement(Toolbar$1, Object.assign({
+    fullScreen: fullScreen,
     variant: "dense"
   }, toolbarProps), !hideToolbarActions && positionToolbarActions === 'bottom' ? React.createElement(MRT_ToolbarInternalButtons, null) : React.createElement("span", null), positionToolbarAlertBanner === 'bottom' && React.createElement(MRT_ToolbarAlertBanner, null), !manualPagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, null));
 };
@@ -2326,7 +2356,8 @@ var TableContainer = /*#__PURE__*/styled(TableContainer$1, {
     right: fullScreen ? '0' : undefined,
     top: fullScreen ? '0' : undefined,
     transition: 'all 0.2s ease-in-out',
-    width: fullScreen ? '100vw' : undefined
+    width: fullScreen ? '100vw' : undefined,
+    zIndex: fullScreen ? 1200 : 1
   };
 });
 var CircularProgressWrapper = /*#__PURE__*/styled('div')(function (_ref2) {
@@ -2344,17 +2375,26 @@ var CircularProgressWrapper = /*#__PURE__*/styled('div')(function (_ref2) {
 });
 var MRT_TableContainer = function MRT_TableContainer() {
   var _useMRT = useMRT(),
-      muiTableContainerProps = _useMRT.muiTableContainerProps,
-      hideToolbarTop = _useMRT.hideToolbarTop,
-      hideToolbarBottom = _useMRT.hideToolbarBottom,
       fullScreen = _useMRT.fullScreen,
+      hideToolbarBottom = _useMRT.hideToolbarBottom,
+      hideToolbarTop = _useMRT.hideToolbarTop,
+      isFetching = _useMRT.isFetching,
       isLoading = _useMRT.isLoading,
-      isFetching = _useMRT.isFetching;
+      muiTableContainerProps = _useMRT.muiTableContainerProps,
+      tableInstance = _useMRT.tableInstance;
 
+  useEffect(function () {
+    if (fullScreen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'auto';
+    }
+  }, [fullScreen]);
+  var tableContainerProps = muiTableContainerProps instanceof Function ? muiTableContainerProps(tableInstance) : muiTableContainerProps;
   return React.createElement(TableContainer, Object.assign({
     component: Paper,
     fullScreen: fullScreen
-  }, muiTableContainerProps), !hideToolbarTop && React.createElement(MRT_ToolbarTop, null), isFetching && React.createElement(LinearProgress, null), isLoading && React.createElement(CircularProgressWrapper, null, React.createElement(CircularProgress, {
+  }, tableContainerProps), !hideToolbarTop && React.createElement(MRT_ToolbarTop, null), isFetching && React.createElement(LinearProgress, null), isLoading && React.createElement(CircularProgressWrapper, null, React.createElement(CircularProgress, {
     "aria-busy": "true",
     "aria-label": "Loading data"
   })), React.createElement(MRT_Table, null), !hideToolbarBottom && React.createElement(MRT_ToolbarBottom, null));