material-react-table 3.0.1 → 3.0.2

package/locales/sv/index.esm.js

@@ -14,7 +14,7 @@ const MRT_Localization_SV = {
     collapseAll: 'Stäng alla',
     columnActions: 'Kolumnåtgärd',
     copiedToClipboard: 'Kopierade till urklipp',
-    dropToGroupBy: 'Släpp för att grupp efter {column}',
+    dropToGroupBy: 'Släpp för att gruppera efter {column}',
     edit: 'Redigera',
     expand: 'Expandera',
     expandAll: 'Expandera alla',
@@ -38,7 +38,7 @@ const MRT_Localization_SV = {
     filterLessThan: 'Mindre än',
     filterLessThanOrEqualTo: 'Mindre än eller lika med',
     filterMode: 'Filterläge: {filterType}',
-    filterNotEmpty: 'Inte Tom',
+    filterNotEmpty: 'Inte tom',
     filterNotEquals: 'Inte lika med',
     filterStartsWith: 'Börjar med',
     filterWeakEquals: 'Lika med',
@@ -52,8 +52,8 @@ const MRT_Localization_SV = {
     groupedBy: 'Gruppera efter ',
     hideAll: 'Göm alla',
     hideColumn: 'Göm {column} kolumn',
-    max: 'Max',
-    min: 'Minst',
+    max: 'Max.',
+    min: 'Min.',
     move: 'Flytta',
     noRecordsToDisplay: 'Inget att visa',
     noResultsFound: 'Inga resultat funna',
@@ -78,9 +78,9 @@ const MRT_Localization_SV = {
     showHideFilters: 'Visa/Göm filter',
     showHideSearch: 'Visa/Göm sök',
     sortByColumnAsc: 'Sortera efter {column} stigande',
-    sortByColumnDesc: 'Sortera efter {column} nedåtgående',
+    sortByColumnDesc: 'Sortera efter {column} fallande',
     sortedByColumnAsc: 'Sorterat efter {column} stigande',
-    sortedByColumnDesc: 'Sorterat efter {column} nedåtgående',
+    sortedByColumnDesc: 'Sorterat efter {column} fallande',
     thenBy: ', sedan av ',
     toggleDensity: 'Växla densitet',
     toggleFullScreen: 'Växla helskärm',

package/locales/sv/index.js

@@ -18,7 +18,7 @@ const MRT_Localization_SV = {
     collapseAll: 'Stäng alla',
     columnActions: 'Kolumnåtgärd',
     copiedToClipboard: 'Kopierade till urklipp',
-    dropToGroupBy: 'Släpp för att grupp efter {column}',
+    dropToGroupBy: 'Släpp för att gruppera efter {column}',
     edit: 'Redigera',
     expand: 'Expandera',
     expandAll: 'Expandera alla',
@@ -42,7 +42,7 @@ const MRT_Localization_SV = {
     filterLessThan: 'Mindre än',
     filterLessThanOrEqualTo: 'Mindre än eller lika med',
     filterMode: 'Filterläge: {filterType}',
-    filterNotEmpty: 'Inte Tom',
+    filterNotEmpty: 'Inte tom',
     filterNotEquals: 'Inte lika med',
     filterStartsWith: 'Börjar med',
     filterWeakEquals: 'Lika med',
@@ -56,8 +56,8 @@ const MRT_Localization_SV = {
     groupedBy: 'Gruppera efter ',
     hideAll: 'Göm alla',
     hideColumn: 'Göm {column} kolumn',
-    max: 'Max',
-    min: 'Minst',
+    max: 'Max.',
+    min: 'Min.',
     move: 'Flytta',
     noRecordsToDisplay: 'Inget att visa',
     noResultsFound: 'Inga resultat funna',
@@ -82,9 +82,9 @@ const MRT_Localization_SV = {
     showHideFilters: 'Visa/Göm filter',
     showHideSearch: 'Visa/Göm sök',
     sortByColumnAsc: 'Sortera efter {column} stigande',
-    sortByColumnDesc: 'Sortera efter {column} nedåtgående',
+    sortByColumnDesc: 'Sortera efter {column} fallande',
     sortedByColumnAsc: 'Sorterat efter {column} stigande',
-    sortedByColumnDesc: 'Sorterat efter {column} nedåtgående',
+    sortedByColumnDesc: 'Sorterat efter {column} fallande',
     thenBy: ', sedan av ',
     toggleDensity: 'Växla densitet',
     toggleFullScreen: 'Växla helskärm',

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.0.1",
+  "version": "3.0.2",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V6 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -62,47 +62,47 @@
     "build-storybook": "storybook build"
   },
   "devDependencies": {
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
-    "@faker-js/faker": "^8.4.1",
-    "@mui/icons-material": "^6.0.1",
-    "@mui/material": "^6.0.1",
-    "@mui/x-date-pickers": "^7.15.0",
+    "@emotion/react": "^11.13.5",
+    "@emotion/styled": "^11.13.5",
+    "@faker-js/faker": "^9.2.0",
+    "@mui/icons-material": "^6.1.9",
+    "@mui/material": "^6.1.9",
+    "@mui/x-date-pickers": "^7.23.0",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@size-limit/preset-small-lib": "^11.1.4",
-    "@storybook/addon-a11y": "^8.2.9",
-    "@storybook/addon-essentials": "^8.2.9",
-    "@storybook/addon-links": "^8.2.9",
-    "@storybook/addon-storysource": "^8.2.9",
-    "@storybook/blocks": "^8.2.9",
-    "@storybook/preview-api": "^8.2.9",
-    "@storybook/react": "^8.2.9",
-    "@storybook/react-vite": "^8.2.9",
-    "@types/node": "^22.5.2",
-    "@types/react": "^18.3.5",
-    "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.4.0",
-    "@typescript-eslint/parser": "^8.4.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "eslint": "^9.9.1",
+    "@size-limit/preset-small-lib": "^11.1.6",
+    "@storybook/addon-a11y": "^8.4.6",
+    "@storybook/addon-essentials": "^8.4.6",
+    "@storybook/addon-links": "^8.4.6",
+    "@storybook/addon-storysource": "^8.4.6",
+    "@storybook/blocks": "^8.4.6",
+    "@storybook/preview-api": "^8.4.6",
+    "@storybook/react": "^8.4.6",
+    "@storybook/react-vite": "^8.4.6",
+    "@types/node": "^22.10.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "^8.16.0",
+    "@typescript-eslint/parser": "^8.16.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.16.0",
     "eslint-plugin-mui-path-imports": "^0.0.15",
-    "eslint-plugin-perfectionist": "^3.3.0",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-perfectionist": "^4.1.2",
+    "eslint-plugin-storybook": "^0.11.1",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
     "rollup": "^2.79.1",
     "rollup-plugin-copy": "^3.5.0",
-    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-delete": "^2.1.0",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "size-limit": "^11.1.4",
-    "storybook": "^8.2.9",
+    "size-limit": "^11.1.6",
+    "storybook": "^8.4.6",
     "storybook-dark-mode": "^4.0.2",
-    "tslib": "^2.7.0",
-    "typescript": "^5.5.4",
-    "vite": "^5.4.2"
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.1"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.13",
@@ -116,7 +116,7 @@
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.19.4",
     "@tanstack/react-table": "8.20.5",
-    "@tanstack/react-virtual": "3.10.6",
-    "highlight-words": "1.2.2"
+    "@tanstack/react-virtual": "3.10.9",
+    "highlight-words": "2.0.0"
   }
 }

package/src/components/body/MRT_TableBodyCell.tsx

@@ -233,13 +233,13 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
   };
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLTableCellElement>) => {
+    tableCellProps?.onKeyDown?.(event);
     cellKeyboardShortcuts({
       cell,
       cellValue: cell.getValue<string>(),
       event,
       table,
     });
-    tableCellProps?.onKeyDown?.(event);
   };
 
   return (

package/src/components/footer/MRT_TableFooterCell.tsx

@@ -49,12 +49,12 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
   };
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLTableCellElement>) => {
+    tableCellProps?.onKeyDown?.(event);
     cellKeyboardShortcuts({
       event,
       cellValue: footer.column.columnDef.footer,
       table,
     });
-    tableCellProps?.onKeyDown?.(event);
   };
 
   return (

package/src/components/head/MRT_TableHeadCell.tsx

@@ -150,14 +150,13 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
   };
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLTableCellElement>) => {
+    tableCellProps?.onKeyDown?.(event);
     cellKeyboardShortcuts({
       event,
       cellValue: header.column.columnDef.header,
       table,
       header,
     });
-
-    tableCellProps?.onKeyDown?.(event);
   };
 
   const HeaderElement =

package/src/components/inputs/MRT_EditCellTextField.tsx

@@ -155,7 +155,7 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
         ...textFieldProps.SelectProps,
       }}
       inputProps={{
-        autoComplete: 'new-password', //disable autocomplete and autofill
+        autoComplete: 'off',
         ...textFieldProps.inputProps,
       }}
       onBlur={handleBlur}

package/src/components/inputs/MRT_FilterTextField.tsx

@@ -185,7 +185,7 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
     textFieldProps?.onChange?.(event);
   };
 
-  const handleAutocompleteChange = (newValue: DropdownOption) => {
+  const handleAutocompleteChange = (newValue: DropdownOption | null) => {
     setAutocompleteValue(newValue);
     handleChange(getValueAndLabel(newValue).value);
   };
@@ -316,7 +316,7 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
     ) : null,
     inputProps: {
       'aria-label': filterPlaceholder,
-      autoComplete: 'new-password', // disable autocomplete and autofill
+      autoComplete: 'off',
       disabled: !!filterChipLabel,
       sx: {
         textOverflow: 'ellipsis',
@@ -422,7 +422,8 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
           getOptionLabel={(option: DropdownOption) =>
             getValueAndLabel(option).label
           }
-          onChange={(_e, newValue: DropdownOption) =>
+          // @ts-ignore
+          onChange={(_e, newValue: DropdownOption | null) =>
             handleAutocompleteChange(newValue)
           }
           options={
@@ -458,11 +459,11 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
             multiple: isMultiSelectFilter,
             renderValue: isMultiSelectFilter
               ? (selected: any) =>
-                  !selected?.length ? (
+                  !Array.isArray(selected) || selected.length === 0 ? (
                     <Box sx={{ opacity: 0.5 }}>{filterPlaceholder}</Box>
                   ) : (
                     <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: '2px' }}>
-                      {(selected as string[])?.map((value) => {
+                      {selected.map((value: string) => {
                         const selectedValue = dropdownOptions?.find(
                           (option) => getValueAndLabel(option).value === value,
                         );
@@ -480,7 +481,13 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
           }}
           onChange={handleTextFieldChange}
           onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
-          value={filterValue ?? ''}
+          value={
+            isMultiSelectFilter
+              ? Array.isArray(filterValue)
+                ? filterValue
+                : []
+              : ''
+          }
         >
           {(isSelectFilter || isMultiSelectFilter) && [
             <MenuItem disabled divider hidden key="p" value="">

package/src/components/inputs/MRT_GlobalFilterTextField.tsx

@@ -94,7 +94,7 @@ export const MRT_GlobalFilterTextField = <TData extends MRT_RowData>({
     >
       <TextField
         inputProps={{
-          autoComplete: 'new-password', // disable autocomplete and autofill
+          autoComplete: 'off',
           ...textFieldProps.inputProps,
         }}
         onChange={handleChange}

package/src/components/menus/MRT_RowActionMenu.tsx

@@ -45,6 +45,7 @@ export const MRT_RowActionMenu = <TData extends MRT_RowData>({
     const editItem = parseFromValuesOrFunc(enableEditing, row) &&
       ['modal', 'row'].includes(editDisplayMode!) && (
         <MRT_ActionMenuItem
+          key={'edit'}
           icon={<EditIcon />}
           label={localization.edit}
           onClick={handleEdit}

package/src/locales/sv.ts

@@ -16,7 +16,7 @@ export const MRT_Localization_SV: MRT_Localization = {
   collapseAll: 'Stäng alla',
   columnActions: 'Kolumnåtgärd',
   copiedToClipboard: 'Kopierade till urklipp',
-  dropToGroupBy: 'Släpp för att grupp efter {column}',
+  dropToGroupBy: 'Släpp för att gruppera efter {column}',
   edit: 'Redigera',
   expand: 'Expandera',
   expandAll: 'Expandera alla',
@@ -40,7 +40,7 @@ export const MRT_Localization_SV: MRT_Localization = {
   filterLessThan: 'Mindre än',
   filterLessThanOrEqualTo: 'Mindre än eller lika med',
   filterMode: 'Filterläge: {filterType}',
-  filterNotEmpty: 'Inte Tom',
+  filterNotEmpty: 'Inte tom',
   filterNotEquals: 'Inte lika med',
   filterStartsWith: 'Börjar med',
   filterWeakEquals: 'Lika med',
@@ -54,8 +54,8 @@ export const MRT_Localization_SV: MRT_Localization = {
   groupedBy: 'Gruppera efter ',
   hideAll: 'Göm alla',
   hideColumn: 'Göm {column} kolumn',
-  max: 'Max',
-  min: 'Minst',
+  max: 'Max.',
+  min: 'Min.',
   move: 'Flytta',
   noRecordsToDisplay: 'Inget att visa',
   noResultsFound: 'Inga resultat funna',
@@ -81,9 +81,9 @@ export const MRT_Localization_SV: MRT_Localization = {
   showHideFilters: 'Visa/Göm filter',
   showHideSearch: 'Visa/Göm sök',
   sortByColumnAsc: 'Sortera efter {column} stigande',
-  sortByColumnDesc: 'Sortera efter {column} nedåtgående',
+  sortByColumnDesc: 'Sortera efter {column} fallande',
   sortedByColumnAsc: 'Sorterat efter {column} stigande',
-  sortedByColumnDesc: 'Sorterat efter {column} nedåtgående',
+  sortedByColumnDesc: 'Sorterat efter {column} fallande',
   thenBy: ', sedan av ',
   toggleDensity: 'Växla densitet',
   toggleFullScreen: 'Växla helskärm',

package/src/types.ts

@@ -1196,7 +1196,7 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
     row: MRT_Row<TData>;
     table: MRT_TableInstance<TData>;
     values: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
-  }) => void;
+  }) => Promise<void> | void;
   onDensityChange?: OnChangeFn<MRT_DensityState>;
   onDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
   onDraggingRowChange?: OnChangeFn<MRT_Row<TData> | null>;

package/src/utils/cell.utils.ts

@@ -81,6 +81,7 @@ export const cellKeyboardShortcuts = <TData extends MRT_RowData = MRT_RowData>({
   table: MRT_TableInstance<TData>;
 }) => {
   if (!table.options.enableKeyboardShortcuts) return;
+  if (event.isPropagationStopped()) return;
   const currentCell = event.currentTarget;
 
   if (cellValue && isWinCtrlMacMeta(event) && event.key === 'c') {

package/src/utils/utils.ts

@@ -6,7 +6,7 @@ export const parseFromValuesOrFunc = <T, U>(
 ): T | undefined => (fn instanceof Function ? fn(arg) : fn);
 
 export const getValueAndLabel = (
-  option?: DropdownOption,
+  option?: DropdownOption | null,
 ): { label: string; value: string } => {
   let label: string = '';
   let value: string = '';