@cutting/material-react-table 5.0.0 → 5.1.0

package/src/components/inputs/MRT_EditCellTextField.test.tsx

@@ -11,20 +11,13 @@ interface Person {
 
 const data: Person[] = [{ name: 'Alice' }];
 
-const columns = (): MRT_ColumnDef<Person>[] => [
-  { accessorKey: 'name', header: 'Name' },
-];
+const columns = (): MRT_ColumnDef<Person>[] => [{ accessorKey: 'name', header: 'Name' }];
 
 describe('cell editing', () => {
   test('opens a text field in the cell that was clicked', async () => {
     const user = userEvent.setup();
     const { container } = render(
-      <MaterialReactTable
-        columns={columns()}
-        data={data}
-        editDisplayMode="cell"
-        enableEditing
-      />,
+      <MaterialReactTable columns={columns()} data={data} editDisplayMode="cell" enableEditing />,
     );
 
     expect(container.querySelectorAll('tbody input')).toHaveLength(0);

package/src/components/inputs/MRT_EditCellTextField.tsx

@@ -1,23 +1,12 @@
-import { MenuItem } from '@mui/material';
-import { TextField } from '@mui/material';
+import { MenuItem, TextField } from '@mui/material';
 import { type TextFieldProps } from '@mui/material/TextField';
-import {
-  type ChangeEvent,
-  type FocusEvent,
-  type KeyboardEvent,
-  useState,
-} from 'react';
+import { type ChangeEvent, type FocusEvent, type KeyboardEvent, useState } from 'react';
 
-import {
-  type MRT_Cell,
-  type MRT_RowData,
-  type MRT_TableInstance,
-} from '../../types';
+import { type MRT_Cell, type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { getTextFieldSlotProps } from '../../utils/slotProps.utils';
 import { getValueAndLabel, parseFromValuesOrFunc } from '../../utils/utils';
 
-export interface MRT_EditCellTextFieldProps<TData extends MRT_RowData>
-  extends TextFieldProps<'standard'> {
+export interface MRT_EditCellTextFieldProps<TData extends MRT_RowData> extends TextFieldProps<'standard'> {
   cell: MRT_Cell<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -26,7 +15,7 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
   cell,
   table,
   ...rest
-}: MRT_EditCellTextFieldProps<TData>) => {
+}: MRT_EditCellTextFieldProps<TData>): JSX.Element => {
   const {
     options: { createDisplayMode, editDisplayMode, muiEditTextFieldProps },
     refs: { editInputRefs },
@@ -112,27 +101,21 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
       fullWidth
       inputRef={(inputRef) => {
         if (inputRef) {
-          editInputRefs.current![column.id] = isSelectEdit
-            ? inputRef.node
-            : inputRef;
+          editInputRefs.current![column.id] = isSelectEdit ? inputRef.node : inputRef;
           if (textFieldProps.inputRef) {
             textFieldProps.inputRef = inputRef;
           }
         }
       }}
       label={
-        ['custom', 'modal'].includes(
-          (isCreating ? createDisplayMode : editDisplayMode) as string,
-        )
+        ['custom', 'modal'].includes((isCreating ? createDisplayMode : editDisplayMode) as string)
           ? columnDef.header
           : undefined
       }
       margin="none"
       name={column.id}
       placeholder={
-        !['custom', 'modal'].includes(
-          (isCreating ? createDisplayMode : editDisplayMode) as string,
-        )
+        !['custom', 'modal'].includes((isCreating ? createDisplayMode : editDisplayMode) as string)
           ? columnDef.header
           : undefined
       }
@@ -153,9 +136,7 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
       slotProps={{
         htmlInput: { autoComplete: 'off', ...consumerSlots.htmlInput },
         input: {
-          ...(textFieldProps.variant !== 'outlined'
-            ? { disableUnderline: editDisplayMode === 'table' }
-            : {}),
+          ...(textFieldProps.variant !== 'outlined' ? { disableUnderline: editDisplayMode === 'table' } : {}),
           ...consumerSlots.input,
           sx: { mb: 0, ...consumerSlots.input?.sx },
         },

package/src/components/inputs/MRT_FilterCheckbox.tsx

@@ -1,17 +1,11 @@
-import { Checkbox, type CheckboxProps } from '@mui/material';
-import { FormControlLabel } from '@mui/material';
-import { Tooltip } from '@mui/material';
+import { Checkbox, type CheckboxProps, FormControlLabel, Tooltip } from '@mui/material';
+import { type CSSObject } from '@mui/material/styles';
 
-import {
-  type MRT_Column,
-  type MRT_RowData,
-  type MRT_TableInstance,
-} from '../../types';
+import { type MRT_Column, type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { getCommonTooltipProps } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-export interface MRT_FilterCheckboxProps<TData extends MRT_RowData>
-  extends CheckboxProps {
+export interface MRT_FilterCheckboxProps<TData extends MRT_RowData> extends CheckboxProps {
   column: MRT_Column<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -20,7 +14,7 @@ export const MRT_FilterCheckbox = <TData extends MRT_RowData>({
   column,
   table,
   ...rest
-}: MRT_FilterCheckboxProps<TData>) => {
+}: MRT_FilterCheckboxProps<TData>): JSX.Element => {
   const {
     options: { localization, muiFilterCheckboxProps },
   } = table;
@@ -39,23 +33,15 @@ export const MRT_FilterCheckbox = <TData extends MRT_RowData>({
     ...rest,
   };
 
-  const filterLabel = localization.filterByColumn?.replace(
-    '{column}',
-    columnDef.header,
-  );
+  const filterLabel = localization.filterByColumn?.replace('{column}', columnDef.header);
 
   return (
-    <Tooltip
-      {...getCommonTooltipProps()}
-      title={checkboxProps?.title ?? filterLabel}
-    >
+    <Tooltip {...getCommonTooltipProps()} title={checkboxProps?.title ?? filterLabel}>
       <FormControlLabel
         control={
           <Checkbox
             checked={column.getFilterValue() === 'true'}
-            color={
-              column.getFilterValue() === undefined ? 'default' : 'primary'
-            }
+            color={column.getFilterValue() === undefined ? 'default' : 'primary'}
             indeterminate={column.getFilterValue() === undefined}
             size={density === 'compact' ? 'small' : 'medium'}
             {...checkboxProps}
@@ -76,7 +62,7 @@ export const MRT_FilterCheckbox = <TData extends MRT_RowData>({
             sx={(theme) => ({
               height: '2.5rem',
               width: '2.5rem',
-              ...(parseFromValuesOrFunc(checkboxProps?.sx, theme) as any),
+              ...(parseFromValuesOrFunc(checkboxProps?.sx, theme) as CSSObject),
             })}
           />
         }

package/src/components/inputs/MRT_FilterRangeFields.tsx

@@ -1,15 +1,11 @@
 import { Box, type BoxProps } from '@mui/material';
+import { type CSSObject } from '@mui/material/styles';
 
-import {
-  type MRT_Header,
-  type MRT_RowData,
-  type MRT_TableInstance,
-} from '../../types';
+import { type MRT_Header, type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_FilterTextField } from './MRT_FilterTextField';
 
-export interface MRT_FilterRangeFieldsProps<TData extends MRT_RowData>
-  extends BoxProps {
+export interface MRT_FilterRangeFieldsProps<TData extends MRT_RowData> extends BoxProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -18,7 +14,7 @@ export const MRT_FilterRangeFields = <TData extends MRT_RowData>({
   header,
   table,
   ...rest
-}: MRT_FilterRangeFieldsProps<TData>) => {
+}: MRT_FilterRangeFieldsProps<TData>): JSX.Element => {
   return (
     <Box
       {...rest}
@@ -26,16 +22,11 @@ export const MRT_FilterRangeFields = <TData extends MRT_RowData>({
         display: 'grid',
         gap: '1rem',
         gridTemplateColumns: '1fr 1fr',
-        ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+        ...(parseFromValuesOrFunc(rest?.sx, theme) as CSSObject),
       })}
     >
       {[0, 1].map((rangeFilterIndex) => (
-        <MRT_FilterTextField
-          header={header}
-          key={rangeFilterIndex}
-          rangeFilterIndex={rangeFilterIndex}
-          table={table}
-        />
+        <MRT_FilterTextField header={header} key={rangeFilterIndex} rangeFilterIndex={rangeFilterIndex} table={table} />
       ))}
     </Box>
   );

package/src/components/inputs/MRT_FilterRangeSlider.tsx

@@ -1,18 +1,12 @@
-import { FormHelperText } from '@mui/material';
-import { Slider, type SliderProps } from '@mui/material';
-import { Stack } from '@mui/material';
+import { FormHelperText, Slider, type SliderProps, Stack } from '@mui/material';
+import { type CSSObject } from '@mui/material/styles';
 import { useEffect, useRef, useState } from 'react';
 
-import {
-  type MRT_Header,
-  type MRT_RowData,
-  type MRT_TableInstance,
-} from '../../types';
-import { getColumnFilterInfo } from '../../utils/column.utils';
+import { type MRT_Header, type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { getColumnFilterInfo, getFilterOptionLabel } from '../../utils/column.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-export interface MRT_FilterRangeSliderProps<TData extends MRT_RowData>
-  extends SliderProps {
+export interface MRT_FilterRangeSliderProps<TData extends MRT_RowData> extends SliderProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -21,7 +15,7 @@ export const MRT_FilterRangeSlider = <TData extends MRT_RowData>({
   header,
   table,
   ...rest
-}: MRT_FilterRangeSliderProps<TData>) => {
+}: MRT_FilterRangeSliderProps<TData>): JSX.Element => {
   const {
     options: { enableColumnFilterModes, localization, muiFilterSliderProps },
     refs: { filterInputRefs },
@@ -31,8 +25,7 @@ export const MRT_FilterRangeSlider = <TData extends MRT_RowData>({
 
   const { currentFilterOption } = getColumnFilterInfo({ header, table });
 
-  const showChangeModeButton =
-    enableColumnFilterModes && columnDef.enableColumnFilterModes !== false;
+  const showChangeModeButton = enableColumnFilterModes && columnDef.enableColumnFilterModes !== false;
 
   const sliderProps = {
     ...parseFromValuesOrFunc(muiFilterSliderProps, { column, table }),
@@ -46,10 +39,18 @@ export const MRT_FilterRangeSlider = <TData extends MRT_RowData>({
       : (column.getFacetedMinMaxValues() ?? [0, 1]);
 
   //fix potential TanStack Table bugs where min or max is an array
-  if (Array.isArray(min)) min = min[0];
-  if (Array.isArray(max)) max = max[0];
-  if (min === null) min = 0;
-  if (max === null) max = 1;
+  if (Array.isArray(min)) {
+    min = min[0];
+  }
+  if (Array.isArray(max)) {
+    max = max[0];
+  }
+  if (min === null) {
+    min = 0;
+  }
+  if (max === null) {
+    max = 1;
+  }
 
   const [filterValues, setFilterValues] = useState([min, max]);
   const columnFilterValue = column.getFilterValue();
@@ -102,10 +103,9 @@ export const MRT_FilterRangeSlider = <TData extends MRT_RowData>({
             ref: (node) => {
               if (node) {
                 filterInputRefs.current![`${column.id}-0`] = node;
-                // @ts-expect-error
-                if (sliderProps?.slotProps?.input?.ref) {
-                  //@ts-expect-error
-                  sliderProps.slotProps.input.ref = node;
+                const inputSlot = sliderProps?.slotProps?.input;
+                if (inputSlot && typeof inputSlot === 'object' && inputSlot.ref && typeof inputSlot.ref === 'object') {
+                  inputSlot.ref.current = node;
                 }
               }
             },
@@ -117,7 +117,7 @@ export const MRT_FilterRangeSlider = <TData extends MRT_RowData>({
           mt: !showChangeModeButton ? '10px' : '6px',
           px: '4px',
           width: 'calc(100% - 8px)',
-          ...(parseFromValuesOrFunc(sliderProps?.sx, theme) as any),
+          ...(parseFromValuesOrFunc(sliderProps?.sx, theme) as CSSObject),
         })}
       />
       {showChangeModeButton ? (
@@ -129,15 +129,7 @@ export const MRT_FilterRangeSlider = <TData extends MRT_RowData>({
             whiteSpace: 'nowrap',
           }}
         >
-          {localization.filterMode.replace(
-            '{filterType}',
-            localization[
-              `filter${
-                currentFilterOption?.charAt(0)?.toUpperCase() +
-                currentFilterOption?.slice(1)
-              }` as keyof typeof localization
-            ],
-          )}
+          {localization.filterMode.replace('{filterType}', getFilterOptionLabel(localization, currentFilterOption))}
         </FormHelperText>
       ) : null}
     </Stack>

package/src/components/inputs/MRT_FilterTextField.test.tsx

@@ -1,6 +1,6 @@
-import { render, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { describe, expect, test } from 'vitest';
+import { describe, expect, test, vi } from 'vitest';
 
 import { type MRT_ColumnDef } from '../../types';
 import { MaterialReactTable } from '../MaterialReactTable';
@@ -33,15 +33,13 @@ describe('faceted select filter', () => {
       />,
     );
 
-    const selects = container.querySelectorAll<HTMLElement>(
-      'thead [role="combobox"]',
-    );
+    const selects = container.querySelectorAll<HTMLElement>('thead [role="combobox"]');
 
     await user.click(selects[selects.length - 1]);
 
-    const options = Array.from(
-      baseElement.querySelectorAll<HTMLElement>('li[role="option"]'),
-    ).map((li) => li.textContent);
+    const options = Array.from(baseElement.querySelectorAll<HTMLElement>('li[role="option"]')).map(
+      (li) => li.textContent,
+    );
 
     expect(options).toContain('Glasgow (2)');
     expect(options).toContain('Dundee (1)');
@@ -58,18 +56,78 @@ describe('faceted select filter', () => {
       />,
     );
 
-    const selects = container.querySelectorAll<HTMLElement>(
-      'thead [role="combobox"]',
-    );
+    const selects = container.querySelectorAll<HTMLElement>('thead [role="combobox"]');
 
     await user.click(selects[selects.length - 1]);
     await user.keyboard('{ArrowDown}{Enter}');
 
     await waitFor(() => {
-      const names = Array.from(container.querySelectorAll('tbody tr')).map(
-        (tr) => tr.querySelector('td')?.textContent,
-      );
+      const names = Array.from(container.querySelectorAll('tbody tr')).map((tr) => tr.querySelector('td')?.textContent);
       expect(names).toEqual(['Alice', 'Cara']);
     });
   });
 });
+
+describe('empty text filter', () => {
+  test('does not reset the column filters when the table re-renders', () => {
+    const onColumnFiltersChange = vi.fn();
+    const table = (isLoading: boolean) => (
+      <MaterialReactTable
+        columns={columns()}
+        data={data}
+        initialState={{ showColumnFilters: true }}
+        onColumnFiltersChange={onColumnFiltersChange}
+        state={{ columnFilters: [], isLoading }}
+      />
+    );
+    const { rerender } = render(table(false));
+
+    rerender(table(true));
+    rerender(table(false));
+
+    expect(onColumnFiltersChange).not.toHaveBeenCalled();
+  });
+});
+
+describe('filter mode labels', () => {
+  test('shows the current filter mode under the text filter', () => {
+    render(
+      <MaterialReactTable
+        columns={[{ accessorKey: 'name', header: 'Name' }]}
+        data={data}
+        enableColumnFilterModes
+        initialState={{ showColumnFilters: true }}
+      />,
+    );
+
+    expect(screen.getByText('Filter Mode: Fuzzy')).toBeTruthy();
+  });
+
+  test('shows the filter mode under the range slider', () => {
+    render(
+      <MaterialReactTable
+        columns={[
+          { accessorFn: (person) => person.name.length, filterVariant: 'range-slider', header: 'Length', id: 'length' },
+        ]}
+        data={data}
+        enableColumnFilterModes
+        initialState={{ showColumnFilters: true }}
+      />,
+    );
+
+    expect(screen.getByText('Filter Mode: Between Inclusive')).toBeTruthy();
+  });
+
+  test('shows a chip for the empty filter mode', () => {
+    render(
+      <MaterialReactTable
+        columns={[{ accessorKey: 'name', header: 'Name' }]}
+        data={data}
+        enableColumnFilterModes
+        initialState={{ columnFilterFns: { name: 'empty' }, showColumnFilters: true }}
+      />,
+    );
+
+    expect(screen.getAllByText('Empty').length).toBeGreaterThan(0);
+  });
+});