material-react-table 0.29.0 → 0.30.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.29.0",
+  "version": "0.30.1",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -100,7 +100,7 @@
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.1.1",
-    "@tanstack/react-table": "8.2.6",
+    "@tanstack/react-table": "8.4.0",
     "@tanstack/react-virtual": "^3.0.0-beta.13"
   }
 }

package/src/MaterialReactTable.tsx

@@ -225,7 +225,7 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
   enableEditing?: boolean;
   filterFn?: MRT_FilterFn<TData>;
   filterSelectOptions?: (string | { text: string; value: string })[];
-  filterVariant?: 'text' | 'select' | 'multiSelect' | 'range';
+  filterVariant?: 'text' | 'select' | 'multi-select' | 'range';
   /**
    * footer must be a string. If you want custom JSX to render the footer, you can also specify a `Footer` option. (Capital F)
    */

package/src/column.utils.ts

@@ -131,7 +131,7 @@ export const getDefaultColumnFilterFn = <
 >(
   columnDef: MRT_ColumnDef<TData>,
 ): MRT_FilterOption => {
-  if (columnDef.filterVariant === 'multiSelect') return 'arrIncludesSome';
+  if (columnDef.filterVariant === 'multi-select') return 'arrIncludesSome';
   if (columnDef.filterVariant === 'select') return 'equals';
   if (columnDef.filterVariant === 'range') return 'betweenInclusive';
   return 'fuzzy';

package/src/index.tsx

@@ -1,3 +1,9 @@
 import MaterialReactTable from './MaterialReactTable';
 export default MaterialReactTable;
 export * from './MaterialReactTable';
+
+import type { MRT_Icons } from './icons';
+export type { MRT_Icons };
+
+import type { MRT_Localization } from './localization';
+export type { MRT_Localization };

package/src/inputs/MRT_FilterTextField.tsx

@@ -74,8 +74,10 @@ export const MRT_FilterTextField: FC<Props> = ({
   const isRangeFilter =
     columnDef.filterVariant === 'range' || rangeFilterIndex !== undefined;
   const isSelectFilter = columnDef.filterVariant === 'select';
-  const isMultiSelectFilter = columnDef.filterVariant === 'multiSelect';
-  const isTextboxFilter = !isSelectFilter && !isMultiSelectFilter;
+  const isMultiSelectFilter = columnDef.filterVariant === 'multi-select';
+  const isTextboxFilter =
+    columnDef.filterVariant === 'text' ||
+    (!isSelectFilter && !isMultiSelectFilter);
 
   const currentFilterOption = currentFilterFns?.[header.id];
   const filterId = `mrt-${tableId}-${header.id}-filter-text-field${

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -100,7 +100,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
 
   const handleGroupByColumn = () => {
     column.toggleGrouping();
-    setColumnOrder((old) => ['mrt-row-expand', ...old]);
+    setColumnOrder((old: any) => ['mrt-row-expand', ...old]);
     setAnchorEl(null);
   };
 
@@ -186,7 +186,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
           >
             <Box sx={commonListItemStyles}>
               <ListItemIcon>
-                <SortIcon />
+                <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />
               </ListItemIcon>
               {localization.sortByColumnAsc?.replace(
                 '{column}',
@@ -203,7 +203,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
           >
             <Box sx={commonListItemStyles}>
               <ListItemIcon>
-                <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />
+                <SortIcon />
               </ListItemIcon>
               {localization.sortByColumnDesc?.replace(
                 '{column}',