material-react-table 3.1.0 → 3.2.0

package/src/components/inputs/MRT_FilterTextField.tsx

@@ -1,12 +1,13 @@
 import {
   type ChangeEvent,
   type MouseEvent,
+  SyntheticEvent,
   useCallback,
   useEffect,
   useRef,
   useState,
 } from 'react';
-import Autocomplete from '@mui/material/Autocomplete';
+import Autocomplete, { AutocompleteInputChangeReason } from '@mui/material/Autocomplete';
 import Box from '@mui/material/Box';
 import Checkbox from '@mui/material/Checkbox';
 import Chip from '@mui/material/Chip';
@@ -143,11 +144,13 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
         ? (column.getFilterValue() as [string, string])?.[
             rangeFilterIndex as number
           ] || ''
+        : isAutocompleteFilter 
+        ? typeof column.getFilterValue() === 'string' ? column.getFilterValue() as string : ''
         : ((column.getFilterValue() as string) ?? ''),
   );
   const [autocompleteValue, setAutocompleteValue] =
     useState<DropdownOption | null>(
-      isAutocompleteFilter ? (filterValue as DropdownOption | null) : null,
+      () => isAutocompleteFilter ? ((column.getFilterValue() || null) as DropdownOption | null) : null,
     );
 
   const handleChangeDebounced = useCallback(
@@ -184,9 +187,13 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
     textFieldProps?.onChange?.(event);
   };
 
+  const handleAutocompleteInputChange = (_event: SyntheticEvent, newValue: string, _reason: AutocompleteInputChangeReason) => {
+    handleChange(newValue)
+  };
+
   const handleAutocompleteChange = (newValue: DropdownOption | null) => {
     setAutocompleteValue(newValue);
-    handleChange(getValueAndLabel(newValue).value);
+    handleChangeDebounced(getValueAndLabel(newValue).value);
   };
 
   const handleClear = () => {
@@ -200,6 +207,12 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
         newFilterValues[rangeFilterIndex as number] = undefined;
         return newFilterValues;
       });
+    } else if (isAutocompleteFilter) {
+      setAutocompleteValue(null)
+      setFilterValue('')
+      // when using 'autocomplete' this function is called only inside effect and only if the filterValue === undefined
+      // so the following call is excessive; should be uncommented if the handleClear becomes part of the Autocomplete component callbacks
+      // column.setFilterValue(undefined)
     } else {
       setFilterValue('');
       column.setFilterValue(undefined);
@@ -434,6 +447,8 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
           options={
             dropdownOptions?.map((option) => getValueAndLabel(option)) ?? []
           }
+          inputValue={filterValue as string}
+          onInputChange={handleAutocompleteInputChange}
           {...autocompleteProps}
           renderInput={(builtinTextFieldProps: TextFieldProps) => (
             <TextField
@@ -455,7 +470,6 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
                   ...commonTextFieldProps?.slotProps?.htmlInput,
                 },
               }}
-              onChange={handleTextFieldChange}
               onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
             />
           )}

package/src/components/toolbar/MRT_TablePagination.tsx

@@ -174,10 +174,12 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
             sx={{ m: '0 4px', minWidth: '8ch' }}
             variant="body2"
           >{`${
-            lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()
-          }-${lastRowIndex.toLocaleString()} ${
+            lastRowIndex === 0
+              ? 0
+              : (firstRowIndex + 1).toLocaleString(localization.language)
+          }-${lastRowIndex.toLocaleString(localization.language)} ${
             localization.of
-          } ${totalRowCount.toLocaleString()}`}</Typography>
+          } ${totalRowCount.toLocaleString(localization.language)}`}</Typography>
           <Box gap="xs">
             {showFirstButton && (
               <Tooltip {...tooltipProps} title={localization.goToFirstPage}>

package/src/components/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -65,8 +65,8 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
     selectedRowCount > 0 ? (
       <Stack alignItems="center" direction="row" gap="16px">
         {localization.selectedCountOfRowCountRowsSelected
-          ?.replace('{selectedCount}', selectedRowCount.toLocaleString())
-          ?.replace('{rowCount}', totalRowCount.toString())}
+          ?.replace('{selectedCount}', selectedRowCount.toLocaleString(localization.language))
+          ?.replace('{rowCount}', totalRowCount.toLocaleString(localization.language))}
         <Button
           onClick={(event) =>
             getMRT_SelectAllHandler({ table })(event, false, true)

package/src/hooks/useMRT_Effects.ts

@@ -73,7 +73,7 @@ export const useMRT_Effects = <TData extends MRT_RowData>(
     if (firstVisibleRowIndex >= totalRowCount) {
       table.setPageIndex(Math.ceil(totalRowCount / pageSize) - 1);
     }
-  }, [totalRowCount]);
+  }, [totalRowCount, enablePagination, isLoading, showSkeletons]);
 
   //turn off sort when global filter is looking for ranked results
   const appliedSort = useRef<MRT_SortingState>(sorting);

package/src/hooks/useMRT_RowVirtualizer.ts

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { type Range, useVirtualizer } from '@tanstack/react-virtual';
 import {
   type MRT_Row,
@@ -36,7 +36,19 @@ export const useMRT_RowVirtualizer = <
     table,
   });
 
-  const rowCount = rows?.length ?? getRowModel().rows.length;
+  const realRows = rows ?? getRowModel().rows;
+  /**
+   * when filtering, should find the correct index in filtered rows
+   */
+  const draggingRowIndex = useMemo(
+    () =>
+      draggingRow?.id
+        ? realRows.findIndex((r) => r.id === draggingRow?.id)
+        : undefined,
+    [realRows, draggingRow?.id],
+  );
+
+  const rowCount = realRows.length;
 
   const normalRowHeight =
     density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73;
@@ -58,9 +70,9 @@ export const useMRT_RowVirtualizer = <
     overscan: 4,
     rangeExtractor: useCallback(
       (range: Range) => {
-        return extraIndexRangeExtractor(range, draggingRow?.index ?? 0);
+        return extraIndexRangeExtractor(range, draggingRowIndex);
       },
-      [draggingRow],
+      [draggingRowIndex],
     ),
     ...rowVirtualizerProps,
   }) as unknown as MRT_RowVirtualizer<TScrollElement, TItemElement>;

package/src/locales/ar.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_AR: MRT_Localization = {
+  language: 'ar',
   actions: 'إجراءات',
   and: 'و',
   cancel: 'إلغاء',

package/src/locales/az.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_AZ: MRT_Localization = {
+  language: 'az',
   actions: 'Əməliyyatlar',
   and: 'və',
   cancel: 'Ləğv Et',

package/src/locales/bg.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_BG: MRT_Localization = {
+  language: 'bg',
   actions: 'Действия',
   and: 'и',
   cancel: 'Отказ',

package/src/locales/cs.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_CS: MRT_Localization = {
+  language: 'cs',
   actions: 'Akce',
   and: 'a',
   cancel: 'Zrušit',

package/src/locales/da.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_DA: MRT_Localization = {
+  language: 'da',
   actions: 'Handlinger',
   and: 'og',
   cancel: 'Annuller',

package/src/locales/de.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_DE: MRT_Localization = {
+  language: 'de',
   actions: 'Aktionen',
   and: 'und',
   cancel: 'Abbrechen',

package/src/locales/el.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_EL: MRT_Localization = {
+  language: 'el',
   actions: 'Ενέργειες',
   and: 'και',
   cancel: 'Ακύρωση',

package/src/locales/en.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_EN: MRT_Localization = {
+  language: 'en',
   actions: 'Actions',
   and: 'and',
   cancel: 'Cancel',

package/src/locales/es.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_ES: MRT_Localization = {
+  language: 'es',
   actions: 'Acciones',
   and: 'y',
   cancel: 'Cancelar',

package/src/locales/et.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_ET: MRT_Localization = {
+  language: 'et',
   actions: 'Toimingud',
   and: 'ja',
   cancel: 'Tühista',

package/src/locales/fa.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_FA: MRT_Localization = {
+  language: 'fa',
   actions: 'عملیات',
   and: 'و',
   cancel: 'انصراف',

package/src/locales/fi.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_FI: MRT_Localization = {
+  language: 'fi',
   actions: 'Toiminnot',
   and: 'ja',
   cancel: 'Peruuta',

package/src/locales/fr.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_FR: MRT_Localization = {
+  language: 'fr',
   actions: 'Actions',
   and: 'et',
   cancel: 'Annuler',

package/src/locales/he.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_HE: MRT_Localization = {
+  language: 'he',
   actions: 'פעולות',
   and: 'ו',
   cancel: 'ביטול',

package/src/locales/hr.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_HR: MRT_Localization = {
+  language: 'hr',
   actions: 'Radnje',
   and: 'i',
   cancel: 'Odustani',

package/src/locales/hu.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_HU: MRT_Localization = {
+  language: 'hu',
   actions: 'Műveletek',
   and: 'és',
   cancel: 'Mégse',

package/src/locales/hy.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_HY: MRT_Localization = {
+  language: 'hy',
   actions: 'Գործողություններ',
   and: 'և',
   cancel: 'Չեղարկել',

package/src/locales/id.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_ID: MRT_Localization = {
+  language: 'id',
   actions: 'Aksi',
   and: 'dan',
   cancel: 'Batal',

package/src/locales/it.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_IT: MRT_Localization = {
+  language: 'it',
   actions: 'Azioni',
   and: 'e',
   cancel: 'Cancella',

package/src/locales/ja.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_JA: MRT_Localization = {
+  language: 'ja',
   actions: '操作',
   and: 'と',
   cancel: 'キャンセル',

package/src/locales/ko.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_KO: MRT_Localization = {
+  language: 'ko',
   actions: '동작',
   and: '~',
   cancel: '취소',

package/src/locales/nl.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_NL: MRT_Localization = {
+  language: 'nl',
   actions: 'Acties',
   and: 'en',
   cancel: 'Annuleren',

package/src/locales/no.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_NO: MRT_Localization = {
+  language: 'no',
   cancel: 'Avbryt',
   actions: 'Handlinger',
   and: 'og',

package/src/locales/np.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_NP: MRT_Localization = {
+  language: 'np',
   actions: 'कार्यहरू',
   and: 'तथा',
   cancel: 'रद्द गर्नुहोस्',

package/src/locales/pl.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_PL: MRT_Localization = {
+  language: 'pl',
   actions: 'Akcje',
   and: 'i',
   cancel: 'Anuluj',

package/src/locales/pt-BR.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_PT_BR: MRT_Localization = {
+  language: 'pt-BR',
   actions: 'Ações',
   and: 'e',
   cancel: 'Cancelar',

package/src/locales/pt.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_PT: MRT_Localization = {
+  language: 'pt',
   actions: 'Ações',
   and: 'e',
   cancel: 'Cancelar',

package/src/locales/ro.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_RO: MRT_Localization = {
+  language: 'ro',
   actions: 'Acțiuni',
   and: 'și',
   cancel: 'Anulează',

package/src/locales/ru.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_RU: MRT_Localization = {
+  language: 'ru',
   actions: 'Действия',
   and: 'и',
   cancel: 'Отменить',

package/src/locales/sk.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_SK: MRT_Localization = {
+  language: 'sk',
   actions: 'Akcie',
   and: 'a',
   cancel: 'Zrušiť',

package/src/locales/sr-Cyrl-RS.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_SR_CYRL_RS: MRT_Localization = {
+  language: 'sr-Cyrl-RS',
   actions: 'Акције',
   and: 'и',
   cancel: 'Откажи',

package/src/locales/sr-Latn-RS.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_SR_LATN_RS: MRT_Localization = {
+  language: 'sr-Latn-RS',
   actions: 'Akcije',
   and: 'i',
   cancel: 'Otkaži',

package/src/locales/sv.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_SV: MRT_Localization = {
+  language: 'sv',
   actions: 'Åtgärder',
   and: 'och',
   cancel: 'Avbryt',

package/src/locales/tr.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_TR: MRT_Localization = {
+  language: 'tr',
   actions: 'İşlemler',
   and: 've',
   cancel: 'İptal',

package/src/locales/uk.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_UK: MRT_Localization = {
+  language: 'uk',
   actions: 'Дії',
   and: 'і',
   cancel: 'Скасувати',

package/src/locales/vi.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_VI: MRT_Localization = {
+  language: 'vi',
   actions: 'Thao tác',
   and: 'và',
   cancel: 'Huỷ bỏ',

package/src/locales/zh-Hans.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_ZH_HANS: MRT_Localization = {
+  language: 'zh-Hans',
   actions: '操作',
   and: '与',
   cancel: '取消',

package/src/locales/zh-Hant.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_ZH_HANT: MRT_Localization = {
+  language: 'zh-Hant',
   actions: '動作',
   and: '與',
   cancel: '取消',

package/src/types.ts

@@ -150,6 +150,8 @@ export type MRT_ColumnHelper<TData extends MRT_RowData> = {
 };
 
 export interface MRT_Localization {
+  // language of the localization as BCP 47 language tag for number formatting
+  language: string;
   actions: string;
   and: string;
   cancel: string;

package/src/utils/virtualization.utils.ts

@@ -1,5 +1,10 @@
 import { type Range, defaultRangeExtractor } from '@tanstack/react-virtual';
 
+/**
+ * When scroll, the `draggingRow` or `draggingColumn` can be removed from document because of virtualization,
+ * then, the `dragEnd` event on `MRT_TableBodyRowGrabHandle` or `MRT_TableHeadCellGrabHandle` will not fire.
+ * We should keep the `draggingRow` or `draggingColumn` in `getVirtualItems()` to avoid this thing.
+ */
 export const extraIndexRangeExtractor = (
   range: Range,
   draggingIndex?: number,