material-react-table 0.5.6 → 0.5.7

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

@@ -1,7 +1,7 @@
 import React, { useState, useMemo, useContext, createContext, Fragment, useRef, useEffect } from 'react';
 import { useTable, useFilters, useGlobalFilter, useGroupBy, useSortBy, useExpanded, usePagination, useRowSelect, useResizeColumns, useFlexLayout, useAsyncDebounce } from 'react-table';
 import { matchSorter } from 'match-sorter';
-import { Menu, MenuItem, TextField, InputAdornment, Tooltip, IconButton, Chip, ListItemIcon, ListItemText, TableCell, Box, TableSortLabel, Divider, Collapse, Skeleton, Checkbox, TableRow, TableHead, alpha, TableBody, TableFooter, Table, FormControlLabel, Switch, Button, TablePagination, useMediaQuery, Alert, Toolbar, TableContainer, Paper, LinearProgress } from '@mui/material';
+import { Menu, MenuItem, ListItemIcon, ListItemText, IconButton, TextField, InputAdornment, Tooltip, Chip, TableCell, Box, TableSortLabel, Divider, Collapse, Skeleton, Checkbox, TableRow, TableHead, alpha, TableBody, TableFooter, Table, FormControlLabel, Switch, Button, TablePagination, useMediaQuery, Alert, Toolbar, TableContainer, Paper, LinearProgress } from '@mui/material';
 import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 import CancelIcon from '@mui/icons-material/Cancel';
 import ClearAllIcon from '@mui/icons-material/ClearAll';
@@ -298,6 +298,151 @@ var useMRT = function useMRT() {
   return useContext(MaterialReactTableContext);
 };
 
+var commonMenuItemStyles = {
+  py: '0 !important',
+  my: '0 !important'
+};
+var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
+  var _localization$columnA, _localization$columnA2, _localization$filterT, _localization, _localization$columnA3;
+
+  var anchorEl = _ref.anchorEl,
+      column = _ref.column,
+      setAnchorEl = _ref.setAnchorEl;
+
+  var _useMRT = useMRT(),
+      disableColumnHiding = _useMRT.disableColumnHiding,
+      disableFilters = _useMRT.disableFilters,
+      disableSortBy = _useMRT.disableSortBy,
+      enableColumnGrouping = _useMRT.enableColumnGrouping,
+      _useMRT$icons = _useMRT.icons,
+      ArrowRightIcon = _useMRT$icons.ArrowRightIcon,
+      ClearAllIcon = _useMRT$icons.ClearAllIcon,
+      DynamicFeedIcon = _useMRT$icons.DynamicFeedIcon,
+      FilterListIcon = _useMRT$icons.FilterListIcon,
+      SortIcon = _useMRT$icons.SortIcon,
+      VisibilityOffIcon = _useMRT$icons.VisibilityOffIcon,
+      idPrefix = _useMRT.idPrefix,
+      localization = _useMRT.localization,
+      setShowFilters = _useMRT.setShowFilters,
+      tableInstance = _useMRT.tableInstance;
+
+  var _useState = useState(null),
+      filterMenuAnchorEl = _useState[0],
+      setFilterMenuAnchorEl = _useState[1];
+
+  var handleClearSort = function handleClearSort() {
+    column.clearSortBy();
+    setAnchorEl(null);
+  };
+
+  var handleSortAsc = function handleSortAsc() {
+    column.toggleSortBy(false);
+    setAnchorEl(null);
+  };
+
+  var handleSortDesc = function handleSortDesc() {
+    column.toggleSortBy(true);
+    setAnchorEl(null);
+  };
+
+  var handleHideColumn = function handleHideColumn() {
+    column.toggleHidden();
+    setAnchorEl(null);
+  };
+
+  var handleGroupByColumn = function handleGroupByColumn() {
+    column.toggleGroupBy();
+    setAnchorEl(null);
+  };
+
+  var handleFilterByColumn = function handleFilterByColumn() {
+    setShowFilters(true);
+    setTimeout(function () {
+      var _document$getElementB, _column$muiTableHeadC, _column$muiTableHeadC2;
+
+      return (_document$getElementB = document.getElementById( // @ts-ignore
+      (_column$muiTableHeadC = (_column$muiTableHeadC2 = column.muiTableHeadCellFilterTextFieldProps) == null ? void 0 : _column$muiTableHeadC2.id) != null ? _column$muiTableHeadC : "mrt-" + idPrefix + "-" + column.id + "-filter-text-field")) == null ? void 0 : _document$getElementB.focus();
+    }, 200);
+    setAnchorEl(null);
+  };
+
+  var handleOpenFilterModeMenu = function handleOpenFilterModeMenu(event) {
+    event.stopPropagation();
+    setFilterMenuAnchorEl(event.currentTarget);
+  };
+
+  return React.createElement(Menu, {
+    anchorEl: anchorEl,
+    open: !!anchorEl,
+    onClose: function onClose() {
+      return setAnchorEl(null);
+    },
+    MenuListProps: {
+      dense: tableInstance.state.densePadding,
+      disablePadding: true
+    }
+  }, !disableSortBy && column.canSort && [React.createElement(MenuItem, {
+    key: 1,
+    disabled: !column.isSorted,
+    onClick: handleClearSort,
+    sx: commonMenuItemStyles
+  }, React.createElement(ListItemIcon, null, React.createElement(ClearAllIcon, null)), React.createElement(ListItemText, {
+    sx: commonMenuItemStyles
+  }, localization.columnActionMenuItemClearSort)), React.createElement(MenuItem, {
+    disabled: column.isSorted && !column.isSortedDesc,
+    key: 2,
+    onClick: handleSortAsc,
+    sx: commonMenuItemStyles
+  }, React.createElement(ListItemIcon, null, React.createElement(SortIcon, null)), React.createElement(ListItemText, {
+    sx: commonMenuItemStyles
+  }, (_localization$columnA = localization.columnActionMenuItemSortAsc) == null ? void 0 : _localization$columnA.replace('{column}', String(column.Header)))), React.createElement(MenuItem, {
+    divider: !disableFilters || enableColumnGrouping || !disableColumnHiding,
+    key: 3,
+    disabled: column.isSorted && column.isSortedDesc,
+    onClick: handleSortDesc,
+    sx: commonMenuItemStyles
+  }, React.createElement(ListItemIcon, null, React.createElement(SortIcon, {
+    style: {
+      transform: 'rotate(180deg) scaleX(-1)'
+    }
+  })), React.createElement(ListItemText, {
+    sx: commonMenuItemStyles
+  }, (_localization$columnA2 = localization.columnActionMenuItemSortDesc) == null ? void 0 : _localization$columnA2.replace('{column}', String(column.Header))))], !disableFilters && column.canFilter && [React.createElement(MenuItem, {
+    divider: enableColumnGrouping || !disableColumnHiding,
+    key: 1,
+    onClick: handleFilterByColumn,
+    sx: commonMenuItemStyles
+  }, React.createElement(ListItemIcon, null, React.createElement(FilterListIcon, null)), React.createElement(ListItemText, {
+    sx: commonMenuItemStyles
+  }, (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header))), React.createElement(IconButton, {
+    onClick: handleOpenFilterModeMenu,
+    onMouseEnter: handleOpenFilterModeMenu,
+    size: "small",
+    sx: {
+      p: 0
+    }
+  }, React.createElement(ArrowRightIcon, null))), React.createElement(MRT_FilterTypeMenu, {
+    anchorEl: filterMenuAnchorEl,
+    column: column,
+    key: 2,
+    setAnchorEl: setFilterMenuAnchorEl,
+    onSelect: handleFilterByColumn
+  })], enableColumnGrouping && column.canGroupBy && [React.createElement(MenuItem, {
+    divider: !disableColumnHiding,
+    key: 2,
+    onClick: handleGroupByColumn,
+    sx: commonMenuItemStyles
+  }, React.createElement(ListItemIcon, null, React.createElement(DynamicFeedIcon, null)), React.createElement(ListItemText, {
+    sx: commonMenuItemStyles
+  }, (_localization = localization[column.isGrouped ? 'columnActionMenuItemUnGroupBy' : 'columnActionMenuItemGroupBy']) == null ? void 0 : _localization.replace('{column}', String(column.Header))))], !disableColumnHiding && [React.createElement(MenuItem, {
+    key: 1,
+    onClick: handleHideColumn,
+    sx: commonMenuItemStyles
+  }, React.createElement(ListItemIcon, null, React.createElement(VisibilityOffIcon, null)), React.createElement(ListItemText, {
+    sx: commonMenuItemStyles
+  }, (_localization$columnA3 = localization.columnActionMenuItemHideColumn) == null ? void 0 : _localization$columnA3.replace('{column}', String(column.Header))))]);
+};
+
 var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
   var anchorEl = _ref.anchorEl,
       column = _ref.column,
@@ -386,7 +531,8 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
         return handleSelectFilterType(type);
       },
       selected: type === filterType,
-      value: type
+      value: type,
+      sx: commonMenuItemStyles
     }, label);
   }));
 };
@@ -524,139 +670,6 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   }));
 };
 
-var commonMenuItemStyles = {
-  display: 'flex',
-  alignItems: 'center'
-};
-var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
-  var _localization$columnA, _localization$columnA2, _localization$filterT, _localization, _localization$columnA3;
-
-  var anchorEl = _ref.anchorEl,
-      column = _ref.column,
-      setAnchorEl = _ref.setAnchorEl;
-
-  var _useMRT = useMRT(),
-      disableColumnHiding = _useMRT.disableColumnHiding,
-      disableFilters = _useMRT.disableFilters,
-      disableSortBy = _useMRT.disableSortBy,
-      enableColumnGrouping = _useMRT.enableColumnGrouping,
-      _useMRT$icons = _useMRT.icons,
-      ArrowRightIcon = _useMRT$icons.ArrowRightIcon,
-      ClearAllIcon = _useMRT$icons.ClearAllIcon,
-      DynamicFeedIcon = _useMRT$icons.DynamicFeedIcon,
-      FilterListIcon = _useMRT$icons.FilterListIcon,
-      SortIcon = _useMRT$icons.SortIcon,
-      VisibilityOffIcon = _useMRT$icons.VisibilityOffIcon,
-      idPrefix = _useMRT.idPrefix,
-      localization = _useMRT.localization,
-      setShowFilters = _useMRT.setShowFilters,
-      tableInstance = _useMRT.tableInstance;
-
-  var _useState = useState(null),
-      filterMenuAnchorEl = _useState[0],
-      setFilterMenuAnchorEl = _useState[1];
-
-  var handleClearSort = function handleClearSort() {
-    column.clearSortBy();
-    setAnchorEl(null);
-  };
-
-  var handleSortAsc = function handleSortAsc() {
-    column.toggleSortBy(false);
-    setAnchorEl(null);
-  };
-
-  var handleSortDesc = function handleSortDesc() {
-    column.toggleSortBy(true);
-    setAnchorEl(null);
-  };
-
-  var handleHideColumn = function handleHideColumn() {
-    column.toggleHidden();
-    setAnchorEl(null);
-  };
-
-  var handleGroupByColumn = function handleGroupByColumn() {
-    column.toggleGroupBy();
-    setAnchorEl(null);
-  };
-
-  var handleFilterByColumn = function handleFilterByColumn() {
-    setShowFilters(true);
-    setTimeout(function () {
-      var _document$getElementB, _column$muiTableHeadC, _column$muiTableHeadC2;
-
-      return (_document$getElementB = document.getElementById( // @ts-ignore
-      (_column$muiTableHeadC = (_column$muiTableHeadC2 = column.muiTableHeadCellFilterTextFieldProps) == null ? void 0 : _column$muiTableHeadC2.id) != null ? _column$muiTableHeadC : "mrt-" + idPrefix + "-" + column.id + "-filter-text-field")) == null ? void 0 : _document$getElementB.focus();
-    }, 200);
-    setAnchorEl(null);
-  };
-
-  var handleOpenFilterModeMenu = function handleOpenFilterModeMenu(event) {
-    event.stopPropagation();
-    setFilterMenuAnchorEl(event.currentTarget);
-  };
-
-  return React.createElement(Menu, {
-    anchorEl: anchorEl,
-    open: !!anchorEl,
-    onClose: function onClose() {
-      return setAnchorEl(null);
-    },
-    MenuListProps: {
-      dense: tableInstance.state.densePadding,
-      disablePadding: true
-    }
-  }, !disableSortBy && column.canSort && [React.createElement(MenuItem, {
-    key: 1,
-    disabled: !column.isSorted,
-    onClick: handleClearSort,
-    sx: commonMenuItemStyles
-  }, React.createElement(ListItemIcon, null, React.createElement(ClearAllIcon, null)), React.createElement(ListItemText, null, localization.columnActionMenuItemClearSort)), React.createElement(MenuItem, {
-    disabled: column.isSorted && !column.isSortedDesc,
-    key: 2,
-    onClick: handleSortAsc,
-    sx: commonMenuItemStyles
-  }, React.createElement(ListItemIcon, null, React.createElement(SortIcon, null)), React.createElement(ListItemText, null, (_localization$columnA = localization.columnActionMenuItemSortAsc) == null ? void 0 : _localization$columnA.replace('{column}', String(column.Header)))), React.createElement(MenuItem, {
-    divider: !disableFilters || enableColumnGrouping || !disableColumnHiding,
-    key: 3,
-    disabled: column.isSorted && column.isSortedDesc,
-    onClick: handleSortDesc,
-    sx: commonMenuItemStyles
-  }, React.createElement(ListItemIcon, null, React.createElement(SortIcon, {
-    style: {
-      transform: 'rotate(180deg) scaleX(-1)'
-    }
-  })), React.createElement(ListItemText, null, (_localization$columnA2 = localization.columnActionMenuItemSortDesc) == null ? void 0 : _localization$columnA2.replace('{column}', String(column.Header))))], !disableFilters && column.canFilter && [React.createElement(MenuItem, {
-    divider: enableColumnGrouping || !disableColumnHiding,
-    key: 1,
-    onClick: handleFilterByColumn,
-    sx: commonMenuItemStyles
-  }, React.createElement(ListItemIcon, null, React.createElement(FilterListIcon, null)), React.createElement(ListItemText, null, (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header))), React.createElement(IconButton, {
-    onClick: handleOpenFilterModeMenu,
-    onMouseEnter: handleOpenFilterModeMenu,
-    size: "small",
-    sx: {
-      p: 0
-    }
-  }, React.createElement(ArrowRightIcon, null))), React.createElement(MRT_FilterTypeMenu, {
-    anchorEl: filterMenuAnchorEl,
-    column: column,
-    key: 2,
-    setAnchorEl: setFilterMenuAnchorEl,
-    onSelect: handleFilterByColumn
-  })], enableColumnGrouping && column.canGroupBy && [React.createElement(MenuItem, {
-    divider: !disableColumnHiding,
-    key: 2,
-    onClick: handleGroupByColumn,
-    sx: commonMenuItemStyles
-  }, React.createElement(ListItemIcon, null, React.createElement(DynamicFeedIcon, null)), React.createElement(ListItemText, null, (_localization = localization[column.isGrouped ? 'columnActionMenuItemUnGroupBy' : 'columnActionMenuItemGroupBy']) == null ? void 0 : _localization.replace('{column}', String(column.Header))))], !disableColumnHiding && [React.createElement(MenuItem, {
-    key: 1,
-    onClick: handleHideColumn,
-    sx: commonMenuItemStyles
-  }, React.createElement(ListItemIcon, null, React.createElement(VisibilityOffIcon, null)), React.createElement(ListItemText, null, (_localization$columnA3 = localization.columnActionMenuItemHideColumn) == null ? void 0 : _localization$columnA3.replace('{column}', String(column.Header))))]);
-};
-
 var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton(_ref) {
   var column = _ref.column;
 
@@ -1145,8 +1158,11 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
       disablePadding: true
     }
   }, enableRowEditing && React.createElement(MenuItem, {
-    onClick: handleEdit
-  }, React.createElement(ListItemIcon, null, React.createElement(EditIcon, null)), React.createElement(ListItemText, null, localization.rowActionMenuItemEdit)), (_renderRowActionMenuI = renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems(row, tableInstance, function () {
+    onClick: handleEdit,
+    sx: commonMenuItemStyles
+  }, React.createElement(ListItemIcon, null, React.createElement(EditIcon, null)), React.createElement(ListItemText, {
+    sx: commonMenuItemStyles
+  }, localization.rowActionMenuItemEdit)), (_renderRowActionMenuI = renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems(row, tableInstance, function () {
     return setAnchorEl(null);
   })) != null ? _renderRowActionMenuI : null);
 };
@@ -2380,7 +2396,8 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
     MenuListProps: {
       dense: tableInstance.state.densePadding,
       disablePadding: true
-    }
+    },
+    sx: commonMenuItemStyles
   }, React.createElement(Box, {
     sx: {
       display: 'flex',