material-react-table 0.4.2 → 0.4.3

package/dist/buttons/MRT_ToggleDensePaddingButton.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+interface Props {
+}
+export declare const MRT_ToggleDensePaddingButton: FC<Props>;
+export {};

package/dist/material-react-table.cjs.development.js

@@ -24,6 +24,8 @@ var CancelIcon = _interopDefault(require('@mui/icons-material/Cancel'));
 var SearchIcon = _interopDefault(require('@mui/icons-material/Search'));
 var FilterListOffIcon = _interopDefault(require('@mui/icons-material/FilterListOff'));
 var ViewColumnIcon = _interopDefault(require('@mui/icons-material/ViewColumn'));
+var DensityMediumIcon = _interopDefault(require('@mui/icons-material/DensityMedium'));
+var DensitySmallIcon = _interopDefault(require('@mui/icons-material/DensitySmall'));
 var SearchOffIcon = _interopDefault(require('@mui/icons-material/SearchOff'));
 var FilterListIcon = _interopDefault(require('@mui/icons-material/Fullscreen'));
 var FilterListOffIcon$1 = _interopDefault(require('@mui/icons-material/FullscreenExit'));
@@ -2083,8 +2085,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,
@@ -2094,17 +2096,13 @@ var MRT_DensePaddingSwitch = function MRT_DensePaddingSwitch() {
   return React__default.createElement(material.Tooltip, {
     arrow: true,
     title: (_localization$toggleD = localization == null ? void 0 : localization.toggleDensePaddingSwitchTitle) != null ? _localization$toggleD : ''
-  }, React__default.createElement(material.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__default.createElement(material.IconButton, {
+    "aria-label": localization == null ? void 0 : localization.toggleDensePaddingSwitchTitle,
+    onClick: function onClick() {
       return setDensePadding(!densePadding);
-    }
-  }));
+    },
+    size: "small"
+  }, densePadding ? React__default.createElement(DensitySmallIcon, null) : React__default.createElement(DensityMediumIcon, null)));
 };
 
 var MRT_ToggleSearchButton = function MRT_ToggleSearchButton() {
@@ -2167,7 +2165,7 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons() {
       disableGlobalFilter = _useMRT.disableGlobalFilter,
       disableFullScreenToggle = _useMRT.disableFullScreenToggle;
 
-  return React__default.createElement(ToolbarButtonsContainer, null, !disableGlobalFilter && React__default.createElement(MRT_ToggleSearchButton, null), !disableFilters && React__default.createElement(MRT_ToggleFiltersButton, null), !disableColumnHiding && React__default.createElement(MRT_ShowHideColumnsButton, null), !disableDensePaddingToggle && React__default.createElement(MRT_DensePaddingSwitch, null), !disableFullScreenToggle && React__default.createElement(MRT_FullScreenToggleButton, null));
+  return React__default.createElement(ToolbarButtonsContainer, null, !disableGlobalFilter && React__default.createElement(MRT_ToggleSearchButton, null), !disableFilters && React__default.createElement(MRT_ToggleFiltersButton, null), !disableColumnHiding && React__default.createElement(MRT_ShowHideColumnsButton, null), !disableDensePaddingToggle && React__default.createElement(MRT_ToggleDensePaddingButton, null), !disableFullScreenToggle && React__default.createElement(MRT_FullScreenToggleButton, null));
 };
 
 var MRT_TablePagination = function MRT_TablePagination() {
@@ -2261,12 +2259,26 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner() {
   }, alertProps), selectMessage, groupedByMessage));
 };
 
-var Toolbar = /*#__PURE__*/material.styled(material.Toolbar)({
-  display: 'grid',
-  padding: '0 0.5rem !important'
+var Toolbar = /*#__PURE__*/material.styled(material.Toolbar, {
+  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(" + material.alpha(theme.palette.common.white, 0.05) + "," + material.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__*/material.styled('div')({
-  padding: '1rem 0.5rem',
+  padding: '0.5rem',
   display: 'flex',
   justifyContent: 'space-between'
 });
@@ -2286,21 +2298,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__default.createElement(Toolbar, Object.assign({
+    fullScreen: fullScreen,
     variant: "dense"
   }, toolbarProps), positionToolbarAlertBanner === 'top' && React__default.createElement(MRT_ToolbarAlertBanner, null), React__default.createElement(ToolbarTopRow, null, (_renderToolbarCustomA = renderToolbarCustomActions == null ? void 0 : renderToolbarCustomActions(tableInstance)) != null ? _renderToolbarCustomA : React__default.createElement("span", null), React__default.createElement(ToolbarActionsContainer, null, !disableGlobalFilter && React__default.createElement(MRT_SearchTextField, null), !hideToolbarActions && positionToolbarActions === 'top' && React__default.createElement(MRT_ToolbarInternalButtons, null))), React__default.createElement("div", null, !manualPagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, null)));
 };
 
-var Toolbar$1 = /*#__PURE__*/material.styled(material.Toolbar)({
-  display: 'flex',
-  justifyContent: 'space-between',
-  padding: '0 0.5rem !important',
-  overflowY: 'hidden'
+var Toolbar$1 = /*#__PURE__*/material.styled(material.Toolbar, {
+  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(" + material.alpha(theme.palette.common.white, 0.05) + "," + material.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(),
@@ -2308,12 +2336,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__default.createElement(Toolbar$1, Object.assign({
+    fullScreen: fullScreen,
     variant: "dense"
   }, toolbarProps), !hideToolbarActions && positionToolbarActions === 'bottom' ? React__default.createElement(MRT_ToolbarInternalButtons, null) : React__default.createElement("span", null), positionToolbarAlertBanner === 'bottom' && React__default.createElement(MRT_ToolbarAlertBanner, null), !manualPagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, null));
 };
@@ -2360,6 +2390,13 @@ var MRT_TableContainer = function MRT_TableContainer() {
       muiTableContainerProps = _useMRT.muiTableContainerProps,
       tableInstance = _useMRT.tableInstance;
 
+  React.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__default.createElement(TableContainer, Object.assign({
     component: material.Paper,