material-react-table 0.14.3 → 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/material-react-table.cjs.development.js

@@ -6014,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
@@ -6042,22 +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) {
@@ -6192,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,
@@ -6260,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)",
@@ -6279,9 +6276,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       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,
@@ -6292,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, {