material-react-table 0.14.1 → 0.14.4

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

@@ -1,7 +1,7 @@
 import React, { useMemo, forwardRef, useState, useCallback, Fragment, useLayoutEffect, useEffect } from 'react';
 import { ArrowRight, Cancel, CheckBox, ClearAll, Close, DensityLarge, DensityMedium, DensitySmall, DragHandle, DynamicFeed, Edit, ExpandLess, ExpandMore, FilterAlt, FilterAltOff, FilterList, FilterListOff, FullscreenExit, Fullscreen, KeyboardDoubleArrowDown, MoreHoriz, MoreVert, PushPin, RestartAlt, Save, Search, SearchOff, Sort, ViewColumn, VisibilityOff } from '@mui/icons-material';
 import { createTable, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, useTableInstance } from '@tanstack/react-table';
-import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, TablePagination, Chip, Alert, LinearProgress, useMediaQuery, Toolbar, lighten, alpha, TableSortLabel, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog, Grow } from '@mui/material';
+import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, TablePagination, Chip, Alert, LinearProgress, useMediaQuery, Toolbar, lighten, alpha, Grow, TableSortLabel, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog } from '@mui/material';
 import { rankItem, rankings } from '@tanstack/match-sorter-utils';
 import { useDrop, useDrag, DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
@@ -1935,7 +1935,9 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
       }), {
         bottom: isFullScreen ? '0' : undefined,
         boxShadow: "-3px 0 6px " + alpha(theme.palette.common.black, 0.1),
-        position: isFullScreen ? 'fixed' : 'relative'
+        left: 0,
+        position: isFullScreen ? 'fixed' : 'relative',
+        right: 0
       }, toolbarProps == null ? void 0 : toolbarProps.sx);
     }
   }), React.createElement(MRT_LinearProgressBar, {
@@ -2260,27 +2262,28 @@ var MRT_TableHeadCellFilterContainer = function MRT_TableHeadCellFilterContainer
 };
 
 var MRT_TableHeadCellFilterLabel = function MRT_TableHeadCellFilterLabel(_ref) {
-  var _getState2, _getState2$currentFil;
+  var _column$getFilterValu, _column$getFilterValu2;
 
   var header = _ref.header,
       instance = _ref.instance;
   var getState = instance.getState,
       _instance$options = instance.options,
-      _instance$options$ico = _instance$options.icons,
-      FilterAltIcon = _instance$options$ico.FilterAltIcon,
-      FilterAltOffIcon = _instance$options$ico.FilterAltOffIcon,
-      localization = _instance$options.localization,
-      setShowFilters = instance.setShowFilters;
+      FilterAltIcon = _instance$options.icons.FilterAltIcon,
+      localization = _instance$options.localization;
 
   var _getState = getState(),
-      showFilters = _getState.showFilters;
+      currentFilterFns = _getState.currentFilterFns;
 
   var column = header.column;
   var columnDef = column.columnDef;
-  var filterFn = (_getState2 = getState()) == null ? void 0 : (_getState2$currentFil = _getState2.currentFilterFns) == null ? void 0 : _getState2$currentFil[header.id];
-  var filterTooltip = !!column.getFilterValue() ? localization.filteringByColumn.replace('{column}', String(columnDef.header)).replace('{filterType}', filterFn instanceof Function ? '' : // @ts-ignore
-  localization["filter" + (filterFn.charAt(0).toUpperCase() + filterFn.slice(1))]).replace('{filterValue}', "\"" + (Array.isArray(column.getFilterValue()) ? column.getFilterValue().join("\" " + localization.and + " \"") : column.getFilterValue()) + "\"").replace('" "', '') : localization.showHideFilters;
-  return React.createElement(Tooltip, {
+  var filterFn = currentFilterFns == null ? void 0 : currentFilterFns[header.id];
+  var filterTooltip = localization.filteringByColumn.replace('{column}', String(columnDef.header)).replace('{filterType}', filterFn instanceof Function ? '' : // @ts-ignore
+  localization["filter" + (filterFn.charAt(0).toUpperCase() + filterFn.slice(1))]).replace('{filterValue}', "\"" + (Array.isArray(column.getFilterValue()) ? column.getFilterValue().join("\" " + localization.and + " \"") : column.getFilterValue()) + "\"").replace('" "', '');
+  return React.createElement(Grow, {
+    unmountOnExit: true,
+    "in": !!column.getFilterValue() && filterFn !== 'between' || filterFn === 'between' && ( // @ts-ignore
+    !!((_column$getFilterValu = column.getFilterValue()) != null && _column$getFilterValu[0]) || !!((_column$getFilterValu2 = column.getFilterValue()) != null && _column$getFilterValu2[1]))
+  }, React.createElement("span", null, React.createElement(Tooltip, {
     arrow: true,
     placement: "top",
     title: filterTooltip
@@ -2288,21 +2291,16 @@ var MRT_TableHeadCellFilterLabel = function MRT_TableHeadCellFilterLabel(_ref) {
     disableRipple: true,
     onClick: function onClick(event) {
       event.stopPropagation();
-      setShowFilters(!showFilters);
     },
     size: "small",
     sx: {
       m: 0,
-      opacity: !!column.getFilterValue() || showFilters ? 0.8 : 0,
+      opacity: 0.8,
       p: '2px',
-      transition: 'all 0.2s ease-in-out',
       transform: 'scale(0.66)',
-      '&:hover': {
-        backgroundColor: 'transparent',
-        opacity: 0.8
-      }
+      width: '1.5ch'
     }
-  }, showFilters && !column.getFilterValue() ? React.createElement(FilterAltOffIcon, null) : React.createElement(FilterAltIcon, null)));
+  }, React.createElement(FilterAltIcon, null)))));
 };
 
 var MRT_TableHeadCellResizeHandle = function MRT_TableHeadCellResizeHandle(_ref) {
@@ -2329,6 +2327,7 @@ var MRT_TableHeadCellResizeHandle = function MRT_TableHeadCellResizeHandle(_ref)
         height: showFilters && columnDefType === 'data' ? '4rem' : '2rem',
         opacity: 0.8,
         position: 'absolute',
+        mr: '-1rem',
         right: '1px',
         touchAction: 'none',
         transition: column.getIsResizing() ? undefined : 'all 0.2s ease-in-out',
@@ -2362,11 +2361,15 @@ var MRT_TableHeadCellSortLabel = function MRT_TableHeadCellSortLabel(_ref) {
   }, React.createElement(TableSortLabel, {
     "aria-label": sortTooltip,
     active: !!column.getIsSorted(),
-    direction: column.getIsSorted() ? column.getIsSorted() : undefined
+    direction: column.getIsSorted() ? column.getIsSorted() : undefined,
+    sx: {
+      width: '2ch',
+      transform: 'translateX(-0.5ch)'
+    }
   }));
 };
 
-var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton(_ref) {
+var MRT_TableHeadCellColumnActionsButton = function MRT_TableHeadCellColumnActionsButton(_ref) {
   var header = _ref.header,
       instance = _ref.instance;
   var _instance$options = instance.options,
@@ -2410,7 +2413,6 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
   }, iconButtonProps, {
     sx: _extends({
       height: '2rem',
-      mr: '2px',
       mt: '-0.2rem',
       opacity: 0.5,
       transition: 'opacity 0.2s',
@@ -2433,20 +2435,21 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   var dragRef = _ref.dragRef,
       dropRef = _ref.dropRef,
       header = _ref.header,
+      instance = _ref.instance,
       isDragging = _ref.isDragging,
-      previewRef = _ref.previewRef,
-      instance = _ref.instance;
+      previewRef = _ref.previewRef;
   var getState = instance.getState,
       _instance$options = instance.options,
       enableColumnActions = _instance$options.enableColumnActions,
-      enableColumnFilters = _instance$options.enableColumnFilters,
       enableColumnOrdering = _instance$options.enableColumnOrdering,
       enableColumnResizing = _instance$options.enableColumnResizing,
       enableGrouping = _instance$options.enableGrouping,
+      enableMultiSort = _instance$options.enableMultiSort,
       muiTableHeadCellProps = _instance$options.muiTableHeadCellProps;
 
   var _getState = getState(),
-      density = _getState.density;
+      density = _getState.density,
+      showFilters = _getState.showFilters;
 
   var column = header.column;
   var columnDef = column.columnDef,
@@ -2501,7 +2504,8 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
         pt: columnDefType !== 'data' ? 0 : density === 'compact' ? '0.25' : density === 'comfortable' ? '.75rem' : '1.25rem',
         right: column.getIsPinned() === 'right' ? getTotalRight() + "px" : undefined,
         transition: "all " + (enableColumnResizing ? 0 : '0.2s') + " ease-in-out",
-        verticalAlign: 'text-top',
+        userSelect: enableMultiSort ? 'none' : undefined,
+        verticalAlign: columnDefType === 'display' && showFilters ? 'center' : 'text-top',
         zIndex: column.getIsResizing() ? 3 : column.getIsPinned() && columnDefType !== 'group' ? 2 : 1
       }, tableCellProps == null ? void 0 : tableCellProps.sx, {
         maxWidth: "min(" + column.getSize() + "px, fit-content)",
@@ -2516,12 +2520,11 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       display: 'flex',
       justifyContent: columnDefType === 'group' ? 'center' : 'space-between',
       opacity: isDragging ? 0.5 : 1,
+      position: 'relative',
       width: '100%'
     }
   }, React.createElement(Box, {
-    onClick: function onClick() {
-      return column.toggleSorting();
-    },
+    onClick: column.getToggleSortingHandler(),
     sx: {
       alignItems: 'center',
       cursor: column.getCanSort() && columnDefType !== 'group' ? 'pointer' : undefined,
@@ -2532,7 +2535,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   }, headerElement, columnDefType === 'data' && column.getCanSort() && React.createElement(MRT_TableHeadCellSortLabel, {
     header: header,
     instance: instance
-  }), columnDefType === 'data' && enableColumnFilters && column.getCanFilter() && React.createElement(MRT_TableHeadCellFilterLabel, {
+  }), columnDefType === 'data' && column.getCanFilter() && React.createElement(MRT_TableHeadCellFilterLabel, {
     header: header,
     instance: instance
   })), React.createElement(Box, {
@@ -2542,7 +2545,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   }, columnDefType === 'data' && (enableColumnOrdering && columnDef.enableColumnOrdering !== false || enableGrouping && columnDef.enableGrouping !== false) && React.createElement(MRT_GrabHandleButton, {
     ref: dragRef,
     instance: instance
-  }), (enableColumnActions || columnDef.enableColumnActions) && columnDef.enableColumnActions !== false && columnDefType !== 'group' && React.createElement(MRT_ToggleColumnActionMenuButton, {
+  }), (enableColumnActions || columnDef.enableColumnActions) && columnDef.enableColumnActions !== false && columnDefType !== 'group' && React.createElement(MRT_TableHeadCellColumnActionsButton, {
     header: header,
     instance: instance
   })), column.getCanResize() && React.createElement(MRT_TableHeadCellResizeHandle, {