@cutting/material-react-table 5.0.0 → 5.1.0

package/src/components/inputs/MRT_FilterTextField.tsx

@@ -1,42 +1,34 @@
-import { Autocomplete, type AutocompleteInputChangeReason, type AutocompleteRenderInputParams } from '@mui/material';
-import { Box } from '@mui/material';
-import { Checkbox } from '@mui/material';
-import { Chip } from '@mui/material';
-import { IconButton } from '@mui/material';
-import { InputAdornment } from '@mui/material';
-import { MenuItem } from '@mui/material';
-import { TextField, type TextFieldProps } from '@mui/material';
-import { Tooltip } from '@mui/material';
+import {
+  Autocomplete,
+  type AutocompleteInputChangeReason,
+  type AutocompleteRenderInputParams,
+  Box,
+  Checkbox,
+  Chip,
+  IconButton,
+  InputAdornment,
+  MenuItem,
+  TextField,
+  type TextFieldProps,
+  Tooltip,
+} from '@mui/material';
+import { type CSSObject } from '@mui/material/styles';
 import { debounce } from '@mui/material/utils';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { type PickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField';
 import { TimePicker } from '@mui/x-date-pickers/TimePicker';
-import {
-  type ChangeEvent,
-  type MouseEvent,
-  type SyntheticEvent,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import { type ChangeEvent, type MouseEvent, type SyntheticEvent, useEffect, useRef, useState } from 'react';
 
-import {
-  type DropdownOption,
-  type MRT_Header,
-  type MRT_RowData,
-  type MRT_TableInstance,
-} from '../../types';
-import {
-  getColumnFilterInfo,
-  useDropdownOptions,
-} from '../../utils/column.utils';
+import { type DropdownOption, type MRT_Header, type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { getColumnFilterInfo, getFilterOptionLabel, useDropdownOptions } from '../../utils/column.utils';
 import { getTextFieldSlotProps } from '../../utils/slotProps.utils';
 import { getValueAndLabel, parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 
-export interface MRT_FilterTextFieldProps<TData extends MRT_RowData>
-  extends TextFieldProps<'standard'> {
+type MRT_FilterInputValue = (number | string)[] | Date | number | string | null;
+
+export interface MRT_FilterTextFieldProps<TData extends MRT_RowData> extends TextFieldProps<'standard'> {
   header: MRT_Header<TData>;
   rangeFilterIndex?: number;
   table: MRT_TableInstance<TData>;
@@ -47,7 +39,7 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
   rangeFilterIndex,
   table,
   ...rest
-}: MRT_FilterTextFieldProps<TData>) => {
+}: MRT_FilterTextFieldProps<TData>): JSX.Element => {
   const {
     options: {
       enableColumnFilterModes,
@@ -83,17 +75,17 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
   const datePickerProps = {
     ...parseFromValuesOrFunc(muiFilterDatePickerProps, args),
     ...parseFromValuesOrFunc(columnDef.muiFilterDatePickerProps, args),
-  } as any;
+  };
 
   const dateTimePickerProps = {
     ...parseFromValuesOrFunc(muiFilterDateTimePickerProps, args),
     ...parseFromValuesOrFunc(columnDef.muiFilterDateTimePickerProps, args),
-  } as any;
+  };
 
   const timePickerProps = {
     ...parseFromValuesOrFunc(muiFilterTimePickerProps, args),
     ...parseFromValuesOrFunc(columnDef.muiFilterTimePickerProps, args),
-  } as any;
+  };
 
   const {
     allowedColumnFilterOptions,
@@ -110,20 +102,11 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
   const dropdownOptions = useDropdownOptions({ header, table });
 
   const filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption)
-    ? localization[
-        `filter${
-          currentFilterOption?.charAt?.(0)?.toUpperCase() +
-          currentFilterOption?.slice(1)
-        }` as keyof typeof localization
-      ]
+    ? getFilterOptionLabel(localization, currentFilterOption)
     : '';
 
   const filterPlaceholder = !isRangeFilter
-    ? (textFieldProps?.placeholder ??
-      localization.filterByColumn?.replace(
-        '{column}',
-        String(columnDef.header),
-      ))
+    ? (textFieldProps?.placeholder ?? localization.filterByColumn?.replace('{column}', String(columnDef.header)))
     : rangeFilterIndex === 0
       ? localization.min
       : rangeFilterIndex === 1
@@ -134,36 +117,30 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
     enableColumnFilterModes &&
     columnDef.enableColumnFilterModes !== false &&
     !rangeFilterIndex &&
-    (allowedColumnFilterOptions === undefined ||
-      !!allowedColumnFilterOptions?.length)
+    (allowedColumnFilterOptions === undefined || !!allowedColumnFilterOptions?.length)
   );
 
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
-  const [filterValue, setFilterValue] = useState<string | string[]>(() =>
+  const [filterValue, setFilterValue] = useState<MRT_FilterInputValue>(() =>
     isMultiSelectFilter
       ? (column.getFilterValue() as string[]) || []
       : isRangeFilter
-        ? (column.getFilterValue() as [string, string])?.[
-            rangeFilterIndex as number
-          ] || ''
+        ? (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
-        ? ((column.getFilterValue() || null) as DropdownOption | null)
-        : null,
-    );
-
-  const handleChangeDebounced = useCallback(
+  const [autocompleteValue, setAutocompleteValue] = useState<DropdownOption | null>(() =>
+    isAutocompleteFilter ? ((column.getFilterValue() || null) as DropdownOption | null) : null,
+  );
+
+  const [handleChangeDebounced] = useState(() =>
     debounce(
-      (newValue: any) => {
+      (newValue: unknown) => {
         if (isRangeFilter) {
-          column.setFilterValue((old: Array<Date | null | number | string>) => {
+          column.setFilterValue((old: unknown[]) => {
             const newFilterValues = old ?? ['', ''];
             newFilterValues[rangeFilterIndex as number] = newValue ?? undefined;
             return newFilterValues;
@@ -174,10 +151,9 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
       },
       isTextboxFilter ? (manualFiltering ? 400 : 200) : 1,
     ),
-    [],
   );
 
-  const handleChange = (newValue: any) => {
+  const handleChange = (newValue: MRT_FilterInputValue) => {
     setFilterValue(newValue ?? '');
     handleChangeDebounced(newValue);
   };
@@ -243,12 +219,18 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
   };
 
   const isMounted = useRef(false);
+  const handleClearRef = useRef(handleClear);
+  const columnFilterValue = column.getFilterValue();
+
+  useEffect(() => {
+    handleClearRef.current = handleClear;
+  });
 
   useEffect(() => {
     if (isMounted.current) {
-      const filterValue = column.getFilterValue();
+      const filterValue = columnFilterValue;
       if (filterValue === undefined) {
-        handleClear();
+        handleClearRef.current();
       } else if (isRangeFilter && rangeFilterIndex !== undefined) {
         setFilterValue((filterValue as [string, string])[rangeFilterIndex]);
       } else {
@@ -256,12 +238,10 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
       }
     }
     isMounted.current = true;
-  }, [column.getFilterValue()]);
+  }, [columnFilterValue, isRangeFilter, rangeFilterIndex]);
 
   if (columnDef.Filter) {
-    return (
-      <>{columnDef.Filter?.({ column, header, rangeFilterIndex, table })}</>
-    );
+    return <>{columnDef.Filter?.({ column, header, rangeFilterIndex, table })}</>;
   }
 
   const endAdornment =
@@ -270,7 +250,10 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
         position="end"
         sx={{
           mr: isSelectFilter || isMultiSelectFilter ? '20px' : undefined,
-          visibility: (filterValue?.length ?? 0) > 0 ? 'visible' : 'hidden',
+          visibility:
+            (typeof filterValue === 'string' || Array.isArray(filterValue)) && filterValue.length > 0
+              ? 'visible'
+              : 'hidden',
         }}
       >
         <Tooltip placement="right" title={localization.clearFilter ?? ''}>
@@ -307,39 +290,25 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
           </IconButton>
         </span>
       </Tooltip>
-      {filterChipLabel && (
-        <Chip label={filterChipLabel} onDelete={handleClearEmptyFilterChip} />
-      )}
+      {filterChipLabel && <Chip label={filterChipLabel} onDelete={handleClearEmptyFilterChip} />}
     </InputAdornment>
   ) : null;
 
-  const commonTextFieldProps: TextFieldProps<any> = {
+  const commonTextFieldProps: TextFieldProps = {
     fullWidth: true,
     helperText: showChangeModeButton ? (
       <label>
-        {localization.filterMode.replace(
-          '{filterType}',
-          localization[
-            `filter${
-              currentFilterOption?.charAt(0)?.toUpperCase() +
-              currentFilterOption?.slice(1)
-            }` as keyof typeof localization
-          ],
-        )}
+        {localization.filterMode.replace('{filterType}', getFilterOptionLabel(localization, currentFilterOption))}
       </label>
     ) : null,
     inputRef: (inputRef) => {
-      filterInputRefs.current![`${column.id}-${rangeFilterIndex ?? 0}`] =
-        inputRef;
+      filterInputRefs.current![`${column.id}-${rangeFilterIndex ?? 0}`] = inputRef;
       if (textFieldProps.inputRef) {
         textFieldProps.inputRef = inputRef;
       }
     },
     margin: 'none',
-    placeholder:
-      filterChipLabel || isSelectFilter || isMultiSelectFilter
-        ? undefined
-        : filterPlaceholder,
+    placeholder: filterChipLabel || isSelectFilter || isMultiSelectFilter ? undefined : filterPlaceholder,
     variant: 'standard',
     ...textFieldProps,
     onKeyDown: (e) => {
@@ -384,12 +353,12 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
       mx: '-2px',
       p: 0,
       width: 'calc(100% + 4px)',
-      ...(parseFromValuesOrFunc(textFieldProps?.sx, theme) as any),
+      ...(parseFromValuesOrFunc(textFieldProps?.sx, theme) as CSSObject),
     }),
   };
 
   const commonDatePickerProps = {
-    onChange: (newDate: any) => {
+    onChange: (newDate: Date | null) => {
       handleChange(newDate);
     },
     value: filterValue || null,
@@ -409,7 +378,7 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
               ...timePickerProps?.slotProps?.field,
             },
             textField: {
-              ...commonTextFieldProps,
+              ...(commonTextFieldProps as PickersTextFieldProps),
               ...timePickerProps?.slotProps?.textField,
             },
           }}
@@ -426,7 +395,7 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
               ...dateTimePickerProps?.slotProps?.field,
             },
             textField: {
-              ...commonTextFieldProps,
+              ...(commonTextFieldProps as PickersTextFieldProps),
               ...dateTimePickerProps?.slotProps?.textField,
             },
           }}
@@ -443,7 +412,7 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
               ...datePickerProps?.slotProps?.field,
             },
             textField: {
-              ...commonTextFieldProps,
+              ...(commonTextFieldProps as PickersTextFieldProps),
               ...datePickerProps?.slotProps?.textField,
             },
           }}
@@ -451,34 +420,22 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
       ) : isAutocompleteFilter ? (
         <Autocomplete
           freeSolo
-          getOptionLabel={(option: DropdownOption) =>
-            getValueAndLabel(option).label
-          }
+          getOptionLabel={(option: DropdownOption) => getValueAndLabel(option).label}
           inputValue={filterValue as string}
-          onChange={(_e, newValue) =>
-            handleAutocompleteChange(newValue as DropdownOption | null)
-          }
+          onChange={(_e, newValue) => handleAutocompleteChange(newValue as DropdownOption | null)}
           onInputChange={handleAutocompleteInputChange}
-          options={
-            dropdownOptions?.map((option) => getValueAndLabel(option)) ?? []
-          }
+          options={dropdownOptions?.map((option) => getValueAndLabel(option)) ?? []}
           {...autocompleteProps}
           renderInput={(params: AutocompleteRenderInputParams) => {
-            const commonInput = getTextFieldSlotProps(
-              commonTextFieldProps.slotProps,
-            ).input;
-            const commonHtmlInput = getTextFieldSlotProps(
-              commonTextFieldProps.slotProps,
-            ).htmlInput;
+            const commonInput = getTextFieldSlotProps(commonTextFieldProps.slotProps).input;
+            const commonHtmlInput = getTextFieldSlotProps(commonTextFieldProps.slotProps).htmlInput;
             return (
               <TextField
                 {...commonTextFieldProps}
                 disabled={params.disabled}
                 fullWidth={params.fullWidth}
                 id={params.id}
-                onClick={(e: MouseEvent<HTMLInputElement>) =>
-                  e.stopPropagation()
-                }
+                onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
                 size={params.size}
                 slotProps={{
                   ...commonTextFieldProps.slotProps,
@@ -507,31 +464,23 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
             ...commonTextFieldProps.slotProps,
             inputLabel: {
               shrink: isSelectFilter || isMultiSelectFilter,
-              ...(commonTextFieldProps.slotProps?.inputLabel as any),
+              ...commonTextFieldProps.slotProps?.inputLabel,
             },
             select: {
               displayEmpty: true,
               MenuProps: { disableScrollLock: true },
               multiple: isMultiSelectFilter,
               renderValue: isMultiSelectFilter
-                ? (selected: any) =>
+                ? (selected: unknown) =>
                     !Array.isArray(selected) || selected?.length === 0 ? (
                       <Box sx={{ opacity: 0.5 }}>{filterPlaceholder}</Box>
                     ) : (
-                      <Box
-                        sx={{ display: 'flex', flexWrap: 'wrap', gap: '2px' }}
-                      >
+                      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: '2px' }}>
                         {selected.map((value: string) => {
                           const selectedValue = dropdownOptions?.find(
-                            (option) =>
-                              getValueAndLabel(option).value === value,
-                          );
-                          return (
-                            <Chip
-                              key={value}
-                              label={getValueAndLabel(selectedValue).label}
-                            />
+                            (option) => getValueAndLabel(option).value === value,
                           );
+                          return <Chip key={value} label={getValueAndLabel(selectedValue).label} />;
                         })}
                       </Box>
                     )
@@ -539,13 +488,7 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
               ...commonTextFieldProps.slotProps?.select,
             },
           }}
-          value={
-            isMultiSelectFilter
-              ? Array.isArray(filterValue)
-                ? filterValue
-                : []
-              : filterValue
-          }
+          value={isMultiSelectFilter ? (Array.isArray(filterValue) ? filterValue : []) : filterValue}
         >
           {(isSelectFilter || isMultiSelectFilter) && [
             <MenuItem disabled divider hidden key="p" value="">
@@ -568,15 +511,11 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
                     >
                       {isMultiSelectFilter && (
                         <Checkbox
-                          checked={(
-                            (column.getFilterValue() ?? []) as string[]
-                          ).includes(value)}
+                          checked={((column.getFilterValue() ?? []) as (number | string)[]).includes(value)}
                           sx={{ mr: '0.5rem' }}
                         />
                       )}
-                      {label}{' '}
-                      {!columnDef.filterSelectOptions &&
-                        `(${facetedUniqueValues.get(value)})`}
+                      {label} {!columnDef.filterSelectOptions && `(${facetedUniqueValues.get(value)})`}
                     </MenuItem>
                   );
                 }),

package/src/components/inputs/MRT_GlobalFilterTextField.tsx

@@ -1,32 +1,20 @@
-import { Collapse } from '@mui/material';
-import { IconButton } from '@mui/material';
-import { InputAdornment } from '@mui/material';
-import { TextField, type TextFieldProps } from '@mui/material';
-import { Tooltip } from '@mui/material';
+import { Collapse, IconButton, InputAdornment, TextField, type TextFieldProps, Tooltip } from '@mui/material';
 import { debounce } from '@mui/material/utils';
-import {
-  type ChangeEvent,
-  type MouseEvent,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import { type ChangeEvent, type MouseEvent, useEffect, useRef, useState } from 'react';
 
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { getTextFieldSlotProps } from '../../utils/slotProps.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 
-export interface MRT_GlobalFilterTextFieldProps<TData extends MRT_RowData>
-  extends TextFieldProps<'standard'> {
+export interface MRT_GlobalFilterTextFieldProps<TData extends MRT_RowData> extends TextFieldProps<'standard'> {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_GlobalFilterTextField = <TData extends MRT_RowData>({
   table,
   ...rest
-}: MRT_GlobalFilterTextFieldProps<TData>) => {
+}: MRT_GlobalFilterTextFieldProps<TData>): JSX.Element => {
   const {
     options: {
       enableGlobalFilterModes,
@@ -51,14 +39,13 @@ export const MRT_GlobalFilterTextField = <TData extends MRT_RowData>({
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
   const [searchValue, setSearchValue] = useState(globalFilter ?? '');
 
-  const handleChangeDebounced = useCallback(
+  const [handleChangeDebounced] = useState(() =>
     debounce(
       (event: ChangeEvent<HTMLInputElement>) => {
         setGlobalFilter(event.target.value ?? undefined);
       },
       manualFiltering ? 500 : 250,
     ),
-    [],
   );
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
@@ -78,23 +65,19 @@ export const MRT_GlobalFilterTextField = <TData extends MRT_RowData>({
   useEffect(() => {
     if (isMounted.current) {
       if (globalFilter === undefined) {
-        handleClear();
+        setSearchValue('');
+        setGlobalFilter(undefined);
       } else {
         setSearchValue(globalFilter);
       }
     }
     isMounted.current = true;
-  }, [globalFilter]);
+  }, [globalFilter, setGlobalFilter]);
 
   const consumerSlots = getTextFieldSlotProps(textFieldProps.slotProps);
 
   return (
-    <Collapse
-      in={showGlobalFilter}
-      mountOnEnter
-      orientation="horizontal"
-      unmountOnExit
-    >
+    <Collapse in={showGlobalFilter} mountOnEnter orientation="horizontal" unmountOnExit>
       <TextField
         onChange={handleChange}
         placeholder={localization.search}
@@ -148,12 +131,7 @@ export const MRT_GlobalFilterTextField = <TData extends MRT_RowData>({
           },
         }}
       />
-      <MRT_FilterOptionMenu
-        anchorEl={anchorEl}
-        onSelect={handleClear}
-        setAnchorEl={setAnchorEl}
-        table={table}
-      />
+      <MRT_FilterOptionMenu anchorEl={anchorEl} onSelect={handleClear} setAnchorEl={setAnchorEl} table={table} />
     </Collapse>
   );
 };

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

@@ -11,22 +11,15 @@ interface Person {
 
 const data: Person[] = [{ name: 'Alice' }, { name: 'Bob' }];
 
-const columns = (): MRT_ColumnDef<Person>[] => [
-  { accessorKey: 'name', header: 'Name' },
-];
+const columns = (): MRT_ColumnDef<Person>[] => [{ accessorKey: 'name', header: 'Name' }];
 
 const selectAll = (container: HTMLElement) =>
   container.querySelector('thead input[type="checkbox"]') as HTMLInputElement;
 
 const rowBoxes = (container: HTMLElement) =>
-  Array.from(
-    container.querySelectorAll<HTMLInputElement>(
-      'tbody input[type="checkbox"]',
-    ),
-  );
-
-const renderTable = () =>
-  render(<MaterialReactTable columns={columns()} data={data} enableRowSelection />);
+  Array.from(container.querySelectorAll<HTMLInputElement>('tbody input[type="checkbox"]'));
+
+const renderTable = () => render(<MaterialReactTable columns={columns()} data={data} enableRowSelection />);
 
 describe('row selection checkboxes', () => {
   test('select all checks every row', async () => {

package/src/components/inputs/MRT_SelectCheckbox.tsx

@@ -1,24 +1,13 @@
-import { Checkbox, type CheckboxProps } from '@mui/material';
-import { Radio, type RadioProps } from '@mui/material';
-import { Tooltip } from '@mui/material';
+import { Checkbox, type CheckboxProps, Radio, type RadioProps, Tooltip } from '@mui/material';
 import { type Theme } from '@mui/material/styles';
 import { type MouseEvent } from 'react';
 
-import {
-  type MRT_Row,
-  type MRT_RowData,
-  type MRT_TableInstance,
-} from '../../types';
-import {
-  getIsRowSelected,
-  getMRT_RowSelectionHandler,
-  getMRT_SelectAllHandler,
-} from '../../utils/row.utils';
+import { type MRT_Row, type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { getIsRowSelected, getMRT_RowSelectionHandler, getMRT_SelectAllHandler } from '../../utils/row.utils';
 import { getCommonTooltipProps } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-export interface MRT_SelectCheckboxProps<TData extends MRT_RowData>
-  extends CheckboxProps {
+export interface MRT_SelectCheckboxProps<TData extends MRT_RowData> extends CheckboxProps {
   row?: MRT_Row<TData>;
   staticRowIndex?: number;
   table: MRT_TableInstance<TData>;
@@ -29,7 +18,7 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
   staticRowIndex,
   table,
   ...rest
-}: MRT_SelectCheckboxProps<TData>) => {
+}: MRT_SelectCheckboxProps<TData>): JSX.Element => {
   const {
     options: {
       enableMultiRowSelection,
@@ -49,9 +38,7 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
       : table.getIsAllRowsSelected()
     : undefined;
 
-  const isChecked = selectAll
-    ? allRowsSelected
-    : getIsRowSelected({ row, table });
+  const isChecked = selectAll ? allRowsSelected : getIsRowSelected({ row, table });
 
   const checkboxProps = {
     ...(selectAll
@@ -75,22 +62,21 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
   const onSelectAllChange = getMRT_SelectAllHandler({ table });
 
   const commonProps = {
-    'aria-label': selectAll
-      ? localization.toggleSelectAll
-      : localization.toggleSelectRow,
+    'aria-label': selectAll ? localization.toggleSelectAll : localization.toggleSelectRow,
     checked: isChecked,
-    disabled:
-      isLoading || (row && !row.getCanSelect()) || row?.id === 'mrt-row-create',
+    disabled: isLoading || (row && !row.getCanSelect()) || row?.id === 'mrt-row-create',
     onChange: (event) => {
       event.stopPropagation();
-      selectAll ? onSelectAllChange(event) : onSelectionChange!(event);
+      if (selectAll) {
+        onSelectAllChange(event);
+      } else {
+        onSelectionChange!(event);
+      }
     },
     size: (density === 'compact' ? 'small' : 'medium') as 'medium' | 'small',
     slotProps: {
       input: {
-        'aria-label': selectAll
-          ? localization.toggleSelectAll
-          : localization.toggleSelectRow,
+        'aria-label': selectAll ? localization.toggleSelectAll : localization.toggleSelectRow,
       },
     },
     ...checkboxProps,
@@ -106,20 +92,15 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
       ...parseFromValuesOrFunc(checkboxProps?.sx, theme),
     }),
     title: undefined,
-  } as CheckboxProps | RadioProps;
+  } as CheckboxProps;
 
   return (
     <Tooltip
       {...getCommonTooltipProps()}
-      title={
-        checkboxProps?.title ??
-        (selectAll
-          ? localization.toggleSelectAll
-          : localization.toggleSelectRow)
-      }
+      title={checkboxProps?.title ?? (selectAll ? localization.toggleSelectAll : localization.toggleSelectRow)}
     >
       {enableMultiRowSelection === false ? (
-        <Radio {...(commonProps as any)} />
+        <Radio {...(commonProps as RadioProps)} />
       ) : (
         <Checkbox
           indeterminate={