material-react-table 0.4.6 → 0.4.9

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, useRef, 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 CancelIcon from '@mui/icons-material/Cancel';
@@ -98,17 +98,19 @@ var MaterialReactTableContext = /*#__PURE__*/function () {
 }();
 
 var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
-  var _props$defaultDensePa, _props$defaultFullScr, _props$defaultShowFil, _props$defaultShowSea;
+  var _props$initialState$d, _props$initialState, _props$initialState$f, _props$initialState2, _props$initialState$s, _props$initialState3, _props$initialState$s2, _props$initialState4;
 
   var hooks = [useFilters, useGlobalFilter, useGroupBy, useSortBy, useExpanded, usePagination, useRowSelect];
   if (props.enableColumnResizing) hooks.unshift(useResizeColumns, useFlexLayout);
   var tableInstance = useTable.apply(void 0, [props].concat(hooks));
-  var anyRowsCanExpand = useMemo(function () {
+  var anyRowsCanExpand = useMemo( // @ts-ignore
+  function () {
     return tableInstance.rows.some(function (row) {
       return row.canExpand;
     });
   }, [tableInstance.rows]);
-  var anyRowsExpanded = useMemo(function () {
+  var anyRowsExpanded = useMemo( // @ts-ignore
+  function () {
     return tableInstance.rows.some(function (row) {
       return row.isExpanded;
     });
@@ -118,19 +120,19 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
       currentEditingRow = _useState[0],
       setCurrentEditingRow = _useState[1];
 
-  var _useState2 = useState((_props$defaultDensePa = props.defaultDensePadding) != null ? _props$defaultDensePa : false),
+  var _useState2 = useState((_props$initialState$d = (_props$initialState = props.initialState) == null ? void 0 : _props$initialState.densePadding) != null ? _props$initialState$d : false),
       densePadding = _useState2[0],
       setDensePadding = _useState2[1];
 
-  var _useState3 = useState((_props$defaultFullScr = props.defaultFullScreen) != null ? _props$defaultFullScr : false),
+  var _useState3 = useState((_props$initialState$f = (_props$initialState2 = props.initialState) == null ? void 0 : _props$initialState2.fullScreen) != null ? _props$initialState$f : false),
       fullScreen = _useState3[0],
       setFullScreen = _useState3[1];
 
-  var _useState4 = useState((_props$defaultShowFil = props.defaultShowFilters) != null ? _props$defaultShowFil : false),
+  var _useState4 = useState((_props$initialState$s = (_props$initialState3 = props.initialState) == null ? void 0 : _props$initialState3.showFilters) != null ? _props$initialState$s : false),
       showFilters = _useState4[0],
       setShowFilters = _useState4[1];
 
-  var _useState5 = useState((_props$defaultShowSea = props.defaultShowSearchTextField) != null ? _props$defaultShowSea : false),
+  var _useState5 = useState((_props$initialState$s2 = (_props$initialState4 = props.initialState) == null ? void 0 : _props$initialState4.showSearchTextField) != null ? _props$initialState$s2 : false),
       showSearch = _useState5[0],
       setShowSearch = _useState5[1];
 
@@ -154,7 +156,7 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
   }, props.children);
 };
 var useMRT = function useMRT() {
-  return (//@ts-ignore
+  return (// @ts-ignore
     useContext(MaterialReactTableContext)
   );
 };
@@ -495,8 +497,10 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
 
   var onSelectChange = function onSelectChange(event) {
     if (selectAll) {
+      var _tableInstance$getTog;
+
+      tableInstance == null ? void 0 : tableInstance.getToggleAllRowsSelectedProps == null ? void 0 : (_tableInstance$getTog = tableInstance.getToggleAllRowsSelectedProps()) == null ? void 0 : _tableInstance$getTog.onChange == null ? void 0 : _tableInstance$getTog.onChange(event);
       onSelectAllChange == null ? void 0 : onSelectAllChange(event, tableInstance.selectedFlatRows);
-      tableInstance.toggleAllRowsSelected(event.target.checked);
     } else if (row) {
       var _row$getToggleRowSele;
 
@@ -733,32 +737,25 @@ var TableCell = /*#__PURE__*/styled(TableCell$3, {
   };
 });
 var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref2) {
-  var _mTableBodyRowProps$s, _mTableDetailPanelPro;
+  var _mTableBodyRowProps$s;
 
   var row = _ref2.row;
 
   var _useMRT = useMRT(),
-      tableInstance = _useMRT.tableInstance,
-      renderDetailPanel = _useMRT.renderDetailPanel,
-      muiTableDetailPanelProps = _useMRT.muiTableDetailPanelProps,
       muiTableBodyRowProps = _useMRT.muiTableBodyRowProps,
-      onDetailPanelClick = _useMRT.onDetailPanelClick;
+      muiTableDetailPanelProps = _useMRT.muiTableDetailPanelProps,
+      onDetailPanelClick = _useMRT.onDetailPanelClick,
+      renderDetailPanel = _useMRT.renderDetailPanel,
+      tableInstance = _useMRT.tableInstance;
 
   var mTableBodyRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps(row) : muiTableBodyRowProps;
 
-  var tableRowProps = _extends({}, mTableBodyRowProps, row.getToggleRowExpandedProps(), {
-    style: _extends({}, row.getToggleRowExpandedProps().style, (_mTableBodyRowProps$s = mTableBodyRowProps == null ? void 0 : mTableBodyRowProps.style) != null ? _mTableBodyRowProps$s : {})
-  });
-
-  var mTableDetailPanelProps = muiTableDetailPanelProps instanceof Function ? muiTableDetailPanelProps(row) : muiTableDetailPanelProps;
-
-  var tableCellProps = _extends({}, mTableDetailPanelProps, {
-    style: _extends({}, (_mTableDetailPanelPro = mTableDetailPanelProps == null ? void 0 : mTableDetailPanelProps.style) != null ? _mTableDetailPanelPro : {})
+  var tableRowProps = _extends({}, mTableBodyRowProps, row.getRowProps(), {
+    style: _extends({}, row.getRowProps().style, (_mTableBodyRowProps$s = mTableBodyRowProps == null ? void 0 : mTableBodyRowProps.style) != null ? _mTableBodyRowProps$s : {})
   });
 
-  return React.createElement(TableRow$1, Object.assign({
-    hover: true
-  }, tableRowProps), React.createElement(TableCell, Object.assign({
+  var tableCellProps = muiTableDetailPanelProps instanceof Function ? muiTableDetailPanelProps(row) : muiTableDetailPanelProps;
+  return React.createElement(TableRow$1, Object.assign({}, tableRowProps), React.createElement(TableCell, Object.assign({
     colSpan: tableInstance.visibleColumns.length + 10,
     isExpanded: row.isExpanded,
     onClick: function onClick(event) {
@@ -1775,7 +1772,7 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref2) {
     });
   }), (enableRowActions || enableRowEditing) && positionActionsColumn === 'last' && React.createElement(MRT_ToggleRowActionMenuButton, {
     row: row
-  })), renderDetailPanel && React.createElement(MRT_TableDetailPanel, {
+  })), renderDetailPanel && !row.isGrouped && React.createElement(MRT_TableDetailPanel, {
     row: row
   }));
 };
@@ -2424,6 +2421,25 @@ var MRT_TableContainer = function MRT_TableContainer() {
       muiTableContainerProps = _useMRT.muiTableContainerProps,
       tableInstance = _useMRT.tableInstance;
 
+  var originalBodyOverflowStyle = useRef();
+  useEffect(function () {
+    if (typeof window !== 'undefined') {
+      var _document, _document$body, _document$body$style;
+
+      originalBodyOverflowStyle.current = (_document = document) == null ? void 0 : (_document$body = _document.body) == null ? void 0 : (_document$body$style = _document$body.style) == null ? void 0 : _document$body$style.overflow;
+    }
+  }, []);
+  useEffect(function () {
+    if (typeof window !== 'undefined') {
+      if (fullScreen) {
+        document.body.style.overflow = 'hidden';
+      } else {
+        var _originalBodyOverflow;
+
+        document.body.style.overflow = (_originalBodyOverflow = originalBodyOverflowStyle.current) != null ? _originalBodyOverflow : 'auto';
+      }
+    }
+  }, [fullScreen]);
   var tableContainerProps = muiTableContainerProps instanceof Function ? muiTableContainerProps(tableInstance) : muiTableContainerProps;
   return React.createElement(TableContainer, Object.assign({
     component: Paper,