material-react-table 0.4.1 → 0.4.4

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() {
@@ -2158,9 +2156,21 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons() {
       disableColumnHiding = _useMRT.disableColumnHiding,
       disableDensePaddingToggle = _useMRT.disableDensePaddingToggle,
       disableGlobalFilter = _useMRT.disableGlobalFilter,
-      disableFullScreenToggle = _useMRT.disableFullScreenToggle;
+      disableFullScreenToggle = _useMRT.disableFullScreenToggle,
+      renderToolbarInternalActions = _useMRT.renderToolbarInternalActions,
+      tableInstance = _useMRT.tableInstance;
 
-  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));
+  if (renderToolbarInternalActions) {
+    return React.createElement(React.Fragment, null, renderToolbarInternalActions(tableInstance, {
+      MRT_ToggleSearchButton: MRT_ToggleSearchButton,
+      MRT_ToggleFiltersButton: MRT_ToggleFiltersButton,
+      MRT_ShowHideColumnsButton: MRT_ShowHideColumnsButton,
+      MRT_ToggleDensePaddingButton: MRT_ToggleDensePaddingButton,
+      MRT_FullScreenToggleButton: MRT_FullScreenToggleButton
+    }));
+  }
+
+  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 +2264,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'
 });
@@ -2274,41 +2298,59 @@ var MRT_ToolbarTop = function MRT_ToolbarTop() {
 
   var _useMRT = useMRT(),
       disableGlobalFilter = _useMRT.disableGlobalFilter,
-      hideToolbarActions = _useMRT.hideToolbarActions,
+      hideToolbarInternalActions = _useMRT.hideToolbarInternalActions,
       manualPagination = _useMRT.manualPagination,
       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)));
+  }, 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), !hideToolbarInternalActions && 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(),
-      hideToolbarActions = _useMRT.hideToolbarActions,
+      hideToolbarInternalActions = _useMRT.hideToolbarInternalActions,
       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));
+  }, toolbarProps), !hideToolbarInternalActions && 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));
 };
 
 var TableContainer = /*#__PURE__*/styled(TableContainer$1, {
@@ -2322,12 +2364,12 @@ var TableContainer = /*#__PURE__*/styled(TableContainer$1, {
     height: fullScreen ? '100%' : undefined,
     left: fullScreen ? '0' : undefined,
     margin: fullScreen ? '0' : undefined,
-    position: fullScreen ? 'absolute' : undefined,
+    position: fullScreen ? 'fixed' : undefined,
     right: fullScreen ? '0' : undefined,
     top: fullScreen ? '0' : undefined,
     transition: 'all 0.2s ease-in-out',
     width: fullScreen ? '100vw' : undefined,
-    zIndex: fullScreen ? 1200 : undefined
+    zIndex: fullScreen ? 1200 : 1
   };
 });
 var CircularProgressWrapper = /*#__PURE__*/styled('div')(function (_ref2) {
@@ -2353,6 +2395,13 @@ var MRT_TableContainer = function MRT_TableContainer() {
       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,