material-react-table 0.6.4 → 0.6.7

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

@@ -1,11 +1,13 @@
 import React, { useState, useCallback, useMemo, useContext, createContext, Fragment, useEffect } from 'react';
 import { useTable, useFilters, useGlobalFilter, useGroupBy, useSortBy, useExpanded, usePagination, useRowSelect, useResizeColumns, useFlexLayout, useAsyncDebounce } from 'react-table';
-import { Menu, MenuItem, TextField, InputAdornment, Tooltip, IconButton, Chip, FormControlLabel, Switch, Box, Button, Divider, TableCell, TableSortLabel, Collapse, Skeleton, Checkbox, TableRow, TableHead, alpha, TableBody, TableFooter, Table, TablePagination, useMediaQuery, Alert, LinearProgress, Toolbar, TableContainer, Paper } from '@mui/material';
+import { Menu, MenuItem, TextField, InputAdornment, Tooltip, IconButton, Chip, FormControlLabel, Switch, Box, Button, Divider, ListItemIcon, TableCell, TableSortLabel, Collapse, Skeleton, Checkbox, TableRow, TableHead, TableBody, TableFooter, Table, TablePagination, useMediaQuery, Alert, LinearProgress, Toolbar, alpha, TableContainer, Paper } from '@mui/material';
 import { matchSorter } from 'match-sorter';
 import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 import CancelIcon from '@mui/icons-material/Cancel';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import ClearAllIcon from '@mui/icons-material/ClearAll';
 import CloseIcon from '@mui/icons-material/Close';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import DensityMediumIcon from '@mui/icons-material/DensityMedium';
 import DensitySmallIcon from '@mui/icons-material/DensitySmall';
 import DoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
@@ -445,7 +447,9 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
       label: localization.filterNotEmpty,
       divider: false,
       fn: notEmpty
-    }];
+    }].filter(function (filterType) {
+      return !column.filterTypes || column.filterTypes.includes(filterType.type);
+    });
   }, []);
 
   var handleSelectFilterType = function handleSelectFilterType(value) {
@@ -683,6 +687,11 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
 
   var column = _ref.column,
       isSubMenu = _ref.isSubMenu;
+
+  var _useMRT = useMRT(),
+      onColumnHide = _useMRT.onColumnHide,
+      tableInstance = _useMRT.tableInstance;
+
   var isParentHeader = !!(column != null && (_column$columns = column.columns) != null && _column$columns.length);
   var allChildColumnsVisible = isParentHeader && !!((_column$columns2 = column.columns) != null && _column$columns2.every(function (childColumn) {
     return childColumn.isVisible;
@@ -699,6 +708,8 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
     } else {
       column.toggleHidden();
     }
+
+    onColumnHide == null ? void 0 : onColumnHide(column, tableInstance.state.hiddenColumns);
   };
 
   return React.createElement(React.Fragment, null, React.createElement(MenuItem, {
@@ -781,7 +792,6 @@ var commonMenuItemStyles$1 = {
 };
 var commonListItemStyles = {
   display: 'flex',
-  gap: '0.75rem',
   alignItems: 'center'
 };
 var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
@@ -890,14 +900,14 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(ClearAllIcon, null), localization.clearSort)), React.createElement(MenuItem, {
+  }, React.createElement(ListItemIcon, null, React.createElement(ClearAllIcon, null)), localization.clearSort)), React.createElement(MenuItem, {
     disabled: column.isSorted && !column.isSortedDesc,
     key: 1,
     onClick: handleSortAsc,
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(SortIcon, null), (_localization$sortByC = localization.sortByColumnAsc) == null ? void 0 : _localization$sortByC.replace('{column}', String(column.Header)))), React.createElement(MenuItem, {
+  }, React.createElement(ListItemIcon, null, React.createElement(SortIcon, null)), (_localization$sortByC = localization.sortByColumnAsc) == null ? void 0 : _localization$sortByC.replace('{column}', String(column.Header)))), React.createElement(MenuItem, {
     divider: !disableFilters || enableColumnGrouping || !disableColumnHiding,
     key: 2,
     disabled: column.isSorted && column.isSortedDesc,
@@ -905,25 +915,25 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(SortIcon, {
+  }, React.createElement(ListItemIcon, null, React.createElement(SortIcon, {
     style: {
       transform: 'rotate(180deg) scaleX(-1)'
     }
-  }), (_localization$sortByC2 = localization.sortByColumnDesc) == null ? void 0 : _localization$sortByC2.replace('{column}', String(column.Header))))], !disableFilters && column.canFilter && [React.createElement(MenuItem, {
+  })), (_localization$sortByC2 = localization.sortByColumnDesc) == null ? void 0 : _localization$sortByC2.replace('{column}', String(column.Header))))], !disableFilters && column.canFilter && [React.createElement(MenuItem, {
     disabled: !column.filterValue,
     key: 0,
     onClick: handleClearFilter,
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(FilterListOffIcon, null), localization.clearFilter)), React.createElement(MenuItem, {
+  }, React.createElement(ListItemIcon, null, React.createElement(FilterListOffIcon, null)), localization.clearFilter)), React.createElement(MenuItem, {
     divider: enableColumnGrouping || !disableColumnHiding,
     key: 1,
     onClick: handleFilterByColumn,
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(FilterListIcon, null), (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(column.Header))), !column.filterSelectOptions && React.createElement(IconButton, {
+  }, React.createElement(ListItemIcon, null, React.createElement(FilterListIcon, null)), (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(column.Header))), !column.filterSelectOptions && React.createElement(IconButton, {
     onClick: handleOpenFilterModeMenu,
     onMouseEnter: handleOpenFilterModeMenu,
     size: "small",
@@ -943,20 +953,20 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(DynamicFeedIcon, null), (_localization = localization[column.isGrouped ? 'ungroupByColumn' : 'groupByColumn']) == null ? void 0 : _localization.replace('{column}', String(column.Header))))], !disableColumnHiding && [React.createElement(MenuItem, {
+  }, React.createElement(ListItemIcon, null, React.createElement(DynamicFeedIcon, null)), (_localization = localization[column.isGrouped ? 'ungroupByColumn' : 'groupByColumn']) == null ? void 0 : _localization.replace('{column}', String(column.Header))))], !disableColumnHiding && [React.createElement(MenuItem, {
     key: 0,
     onClick: handleHideColumn,
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(VisibilityOffIcon, null), (_localization$hideCol = localization.hideColumn) == null ? void 0 : _localization$hideCol.replace('{column}', String(column.Header)))), React.createElement(MenuItem, {
+  }, React.createElement(ListItemIcon, null, React.createElement(VisibilityOffIcon, null)), (_localization$hideCol = localization.hideColumn) == null ? void 0 : _localization$hideCol.replace('{column}', String(column.Header)))), React.createElement(MenuItem, {
     disabled: !((_tableInstance$state$ = tableInstance.state.hiddenColumns) != null && _tableInstance$state$.length),
     key: 1,
     onClick: handleShowAllColumns,
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(ViewColumnIcon, null), (_localization$showAll = localization.showAllColumns) == null ? void 0 : _localization$showAll.replace('{column}', String(column.Header))), !column.filterSelectOptions && React.createElement(IconButton, {
+  }, React.createElement(ListItemIcon, null, React.createElement(ViewColumnIcon, null)), (_localization$showAll = localization.showAllColumns) == null ? void 0 : _localization$showAll.replace('{column}', String(column.Header))), !column.filterSelectOptions && React.createElement(IconButton, {
     onClick: handleOpenShowHideColumnsMenu,
     onMouseEnter: handleOpenShowHideColumnsMenu,
     size: "small",
@@ -1016,15 +1026,15 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
   }));
 };
 
-var commonTableHeadCellStyles = function commonTableHeadCellStyles(densePadding, enableColumnResizing) {
-  return {
+var commonTableHeadCellStyles = function commonTableHeadCellStyles(densePadding, enableColumnResizing, widths) {
+  return _extends({
     fontWeight: 'bold',
     height: '100%',
     p: densePadding ? '0.5rem' : '1rem',
     pt: densePadding ? '0.75rem' : '1.25rem',
     transition: "all " + (enableColumnResizing ? '10ms' : '0.2s') + " ease-in-out",
     verticalAlign: 'text-top'
-  };
+  }, widths);
 };
 var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   var _column$columns, _localization$sortByC, _localization$sortByC2;
@@ -1059,7 +1069,11 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   return React.createElement(TableCell, Object.assign({
     align: isParentHeader ? 'center' : 'left'
   }, tableCellProps, {
-    sx: _extends({}, commonTableHeadCellStyles(tableInstance.state.densePadding, enableColumnResizing), tableCellProps == null ? void 0 : tableCellProps.sx)
+    sx: _extends({}, commonTableHeadCellStyles(tableInstance.state.densePadding, enableColumnResizing, {
+      maxWidth: column.maxWidth,
+      minWidth: column.minWidth,
+      width: column.width
+    }), tableCellProps == null ? void 0 : tableCellProps.sx)
   }), React.createElement(Box, {
     sx: {
       alignItems: 'flex-start',
@@ -1161,7 +1175,7 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
     style: _extends({}, muiTableBodyCellEditTextFieldProps == null ? void 0 : muiTableBodyCellEditTextFieldProps.style, (_cell$column$muiTable = cell.column.muiTableBodyCellEditTextFieldProps) == null ? void 0 : _cell$column$muiTable.style)
   });
 
-  if (cell.column.editable && cell.column.Edit) {
+  if (!cell.column.disableEditing && cell.column.Edit) {
     return React.createElement(React.Fragment, null, cell.column.Edit(_extends({}, textFieldProps, {
       cell: cell
     })));
@@ -1179,6 +1193,51 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
   }, textFieldProps));
 };
 
+var MRT_CopyButton = function MRT_CopyButton(_ref) {
+  var cell = _ref.cell;
+
+  var _useMRT = useMRT(),
+      localization = _useMRT.localization;
+
+  var _useState = useState(false),
+      copied = _useState[0],
+      setCopied = _useState[1];
+
+  var handleCopy = function handleCopy(text) {
+    navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(function () {
+      return setCopied(false);
+    }, 4000);
+  };
+
+  return React.createElement(Tooltip, {
+    arrow: true,
+    enterDelay: 1000,
+    enterNextDelay: 1000,
+    placement: "top",
+    title: copied ? localization.copiedToClipboard : localization.clickToCopy
+  }, React.createElement(Button, {
+    "aria-label": localization.clickToCopy,
+    onClick: function onClick() {
+      return handleCopy(cell.value);
+    },
+    size: "small",
+    sx: {
+      backgroundColor: 'transparent',
+      color: 'inherit',
+      letterSpacing: 'inherit',
+      fontFamily: 'inherit',
+      fontSize: 'inherit',
+      m: '-0.25rem',
+      textTransform: 'inherit',
+      textAlign: 'inherit',
+      minWidth: 'unset'
+    },
+    variant: "text"
+  }, cell.render('Cell')));
+};
+
 var commonTableBodyCellStyles = function commonTableBodyCellStyles(densePadding) {
   return {
     p: densePadding ? '0.5rem' : '1rem',
@@ -1197,6 +1256,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   var cell = _ref.cell;
 
   var _useMRT = useMRT(),
+      enableClickToCopy = _useMRT.enableClickToCopy,
       isLoading = _useMRT.isLoading,
       muiTableBodyCellProps = _useMRT.muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps = _useMRT.muiTableBodyCellSkeletonProps,
@@ -1222,9 +1282,11 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
     animation: "wave",
     height: 20,
     width: Math.random() * (120 - 60) + 60
-  }, muiTableBodyCellSkeletonProps)) : (currentEditingRow == null ? void 0 : currentEditingRow.id) === cell.row.id ? React.createElement(MRT_EditCellTextField, {
+  }, muiTableBodyCellSkeletonProps)) : !cell.column.disableEditing && (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, ")") : enableClickToCopy && !cell.column.disableClickToCopy ? React.createElement(MRT_CopyButton, {
     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'));
+  }) : cell.render('Cell'));
 };
 
 var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
@@ -1320,7 +1382,9 @@ var MRT_TableHeadCellActions = function MRT_TableHeadCellActions() {
       textAlign: 'center'
     },
     sx: _extends({}, commonTableHeadCellStyles(densePadding), {
-      textAlign: 'center'
+      textAlign: 'center',
+      maxWidth: '4rem',
+      width: '4rem'
     })
   }, localization.actions);
 };
@@ -1418,9 +1482,18 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
   var _useMRT = useMRT(),
       ExpandMoreIcon = _useMRT.icons.ExpandMoreIcon,
       localization = _useMRT.localization,
+      onRowExpandChange = _useMRT.onRowExpandChange,
       renderDetailPanel = _useMRT.renderDetailPanel,
       densePadding = _useMRT.tableInstance.state.densePadding;
 
+  var handleToggleExpand = function handleToggleExpand(event) {
+    var _row$getToggleRowExpa;
+
+    // @ts-ignore
+    (_row$getToggleRowExpa = row.getToggleRowExpandedProps()) == null ? void 0 : _row$getToggleRowExpa.onClick(event);
+    onRowExpandChange == null ? void 0 : onRowExpandChange(event, row);
+  };
+
   return React.createElement(TableCell, {
     size: "small",
     sx: _extends({}, commonTableBodyButtonCellStyles(densePadding), {
@@ -1431,7 +1504,9 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
     "aria-label": localization.expand,
     disabled: !row.canExpand && !renderDetailPanel,
     title: localization.expand
-  }, row.getToggleRowExpandedProps()), React.createElement(ExpandMoreIcon, {
+  }, row.getToggleRowExpandedProps(), {
+    onClick: handleToggleExpand
+  }), React.createElement(ExpandMoreIcon, {
     style: {
       transform: "rotate(" + (!row.canExpand && !renderDetailPanel ? -90 : row.isExpanded ? -180 : 0) + "deg)",
       transition: 'transform 0.2s'
@@ -1466,7 +1541,9 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
   }, enableRowEditing && React.createElement(MenuItem, {
     onClick: handleEdit,
     sx: commonMenuItemStyles$1
-  }, React.createElement(EditIcon, null), localization.edit), (_renderRowActionMenuI = renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems(row, tableInstance, function () {
+  }, React.createElement(Box, {
+    sx: commonListItemStyles
+  }, React.createElement(ListItemIcon, null, React.createElement(EditIcon, null)), localization.edit)), (_renderRowActionMenuI = renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems(row, tableInstance, function () {
     return setAnchorEl(null);
   })) != null ? _renderRowActionMenuI : null);
 };
@@ -2389,14 +2466,9 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
     hover: true,
     onClick: function onClick(event) {
       return onRowClick == null ? void 0 : onRowClick(event, row);
-    }
-  }, tableRowProps, {
-    sx: function sx(theme) {
-      return _extends({
-        backgroundColor: row.isSelected ? alpha(theme.palette.primary.light, 0.1) : 'transparent'
-      }, tableRowProps == null ? void 0 : tableRowProps.sx);
-    }
-  }), enableRowNumbers && React.createElement(TableCell, {
+    },
+    selected: row.isSelected
+  }, tableRowProps), enableRowNumbers && React.createElement(TableCell, {
     sx: _extends({}, commonTableBodyCellStyles(densePadding))
   }, row.index + 1), (enableRowActions || enableRowEditing) && positionActionsColumn === 'first' && React.createElement(MRT_ToggleRowActionMenuButton, {
     row: row
@@ -2998,7 +3070,9 @@ var MRT_DefaultLocalization_EN = {
   clearFilter: 'Clear filter',
   clearSearch: 'Clear search',
   clearSort: 'Clear sort',
+  clickToCopy: 'Click to copy',
   columnActions: 'Column Actions',
+  copiedToClipboard: 'Copied to clipboard',
   edit: 'Edit',
   expand: 'Expand',
   expandAll: 'Expand all',
@@ -3041,8 +3115,10 @@ var MRT_DefaultLocalization_EN = {
 var MRT_Default_Icons = {
   ArrowRightIcon: ArrowRightIcon,
   CancelIcon: CancelIcon,
+  CheckBoxIcon: CheckBoxIcon,
   ClearAllIcon: ClearAllIcon,
   CloseIcon: CloseIcon,
+  ContentCopyIcon: ContentCopyIcon,
   DensityMediumIcon: DensityMediumIcon,
   DensitySmallIcon: DensitySmallIcon,
   DoubleArrowDownIcon: DoubleArrowDownIcon,