material-react-table 0.14.1 → 0.14.4

package/dist/head/MRT_TableHeadCell.d.ts

@@ -4,9 +4,9 @@ interface Props {
     dragRef?: Ref<HTMLButtonElement>;
     dropRef?: Ref<HTMLDivElement>;
     header: MRT_Header;
+    instance: MRT_TableInstance;
     isDragging?: boolean;
     previewRef?: Ref<HTMLTableCellElement>;
-    instance: MRT_TableInstance;
 }
 export declare const MRT_TableHeadCell: FC<Props>;
 export {};

package/dist/{buttons/MRT_ToggleColumnActionMenuButton.d.ts → head/MRT_TableHeadCellColumnActionsButton.d.ts}

@@ -4,5 +4,5 @@ interface Props {
     header: MRT_Header;
     instance: MRT_TableInstance;
 }
-export declare const MRT_ToggleColumnActionMenuButton: FC<Props>;
+export declare const MRT_TableHeadCellColumnActionsButton: FC<Props>;
 export {};

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

@@ -5687,7 +5687,9 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
       }), {
         bottom: isFullScreen ? '0' : undefined,
         boxShadow: "-3px 0 6px " + material.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__default.createElement(MRT_LinearProgressBar, {
@@ -6012,27 +6014,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__default.createElement(material.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__default.createElement(material.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__default.createElement("span", null, React__default.createElement(material.Tooltip, {
     arrow: true,
     placement: "top",
     title: filterTooltip
@@ -6040,21 +6043,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__default.createElement(FilterAltOffIcon, null) : React__default.createElement(FilterAltIcon, null)));
+  }, React__default.createElement(FilterAltIcon, null)))));
 };
 
 var MRT_TableHeadCellResizeHandle = function MRT_TableHeadCellResizeHandle(_ref) {
@@ -6081,6 +6079,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',
@@ -6114,11 +6113,15 @@ var MRT_TableHeadCellSortLabel = function MRT_TableHeadCellSortLabel(_ref) {
   }, React__default.createElement(material.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,
@@ -6162,7 +6165,6 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
   }, iconButtonProps, {
     sx: _extends({
       height: '2rem',
-      mr: '2px',
       mt: '-0.2rem',
       opacity: 0.5,
       transition: 'opacity 0.2s',
@@ -6185,20 +6187,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,
@@ -6253,7 +6256,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)",
@@ -6268,12 +6272,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__default.createElement(material.Box, {
-    onClick: function onClick() {
-      return column.toggleSorting();
-    },
+    onClick: column.getToggleSortingHandler(),
     sx: {
       alignItems: 'center',
       cursor: column.getCanSort() && columnDefType !== 'group' ? 'pointer' : undefined,
@@ -6284,7 +6287,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   }, headerElement, columnDefType === 'data' && column.getCanSort() && React__default.createElement(MRT_TableHeadCellSortLabel, {
     header: header,
     instance: instance
-  }), columnDefType === 'data' && enableColumnFilters && column.getCanFilter() && React__default.createElement(MRT_TableHeadCellFilterLabel, {
+  }), columnDefType === 'data' && column.getCanFilter() && React__default.createElement(MRT_TableHeadCellFilterLabel, {
     header: header,
     instance: instance
   })), React__default.createElement(material.Box, {
@@ -6294,7 +6297,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   }, columnDefType === 'data' && (enableColumnOrdering && columnDef.enableColumnOrdering !== false || enableGrouping && columnDef.enableGrouping !== false) && React__default.createElement(MRT_GrabHandleButton, {
     ref: dragRef,
     instance: instance
-  }), (enableColumnActions || columnDef.enableColumnActions) && columnDef.enableColumnActions !== false && columnDefType !== 'group' && React__default.createElement(MRT_ToggleColumnActionMenuButton, {
+  }), (enableColumnActions || columnDef.enableColumnActions) && columnDef.enableColumnActions !== false && columnDefType !== 'group' && React__default.createElement(MRT_TableHeadCellColumnActionsButton, {
     header: header,
     instance: instance
   })), column.getCanResize() && React__default.createElement(MRT_TableHeadCellResizeHandle, {