material-react-table 2.0.0-alpha.1 → 2.0.0-alpha.3

package/src/inputs/MRT_FilterTextField.tsx

@@ -3,23 +3,27 @@ import {
   type MouseEvent,
   useCallback,
   useEffect,
+  useMemo,
   useRef,
   useState,
-  useMemo,
 } from 'react';
+import Autocomplete from '@mui/material/Autocomplete';
 import Box from '@mui/material/Box';
 import Checkbox from '@mui/material/Checkbox';
 import Chip from '@mui/material/Chip';
 import IconButton from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
 import MenuItem from '@mui/material/MenuItem';
-import TextField from '@mui/material/TextField';
+import TextField, { type TextFieldProps } from '@mui/material/TextField';
 import Tooltip from '@mui/material/Tooltip';
 import { debounce } from '@mui/material/utils';
+import {
+  DatePicker,
+  type DatePickerProps,
+} from '@mui/x-date-pickers/DatePicker';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
-import { type TextFieldProps } from '@mui/material/TextField';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
-import { parseFromValuesOrFunc } from '../column.utils';
 
 interface Props<TData extends Record<string, any>> {
   header: MRT_Header<TData>;
@@ -34,11 +38,13 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
 }: Props<TData>) => {
   const {
     options: {
-      enableColumnFilterModes,
       columnFilterModeOptions,
-      icons: { FilterListIcon, CloseIcon },
+      enableColumnFilterModes,
+      icons: { CloseIcon, FilterListIcon },
       localization,
       manualFiltering,
+      muiFilterAutocompleteProps,
+      muiFilterDatePickerProps,
       muiFilterTextFieldProps,
     },
     refs: { filterInputRefs },
@@ -46,6 +52,7 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
   } = table;
   const { column } = header;
   const { columnDef } = column;
+  const { filterVariant } = columnDef;
 
   const textFieldProps: TextFieldProps = {
     ...parseFromValuesOrFunc(muiFilterTextFieldProps, { column, table }),
@@ -55,12 +62,30 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
     }),
   };
 
+  const autocompleteProps = {
+    ...parseFromValuesOrFunc(muiFilterAutocompleteProps, { column, table }),
+    ...parseFromValuesOrFunc(columnDef.muiFilterAutocompleteProps, {
+      column,
+      table,
+    }),
+  };
+
+  const datePickerProps: DatePickerProps<any> = {
+    ...parseFromValuesOrFunc(muiFilterDatePickerProps, { column, table }),
+    ...parseFromValuesOrFunc(columnDef.muiFilterDatePickerProps, {
+      column,
+      table,
+    }),
+  };
+
+  const isDateFilter = filterVariant?.startsWith('date');
+  const isAutocompleteFilter = filterVariant === 'autocomplete';
   const isRangeFilter =
-    columnDef.filterVariant === 'range' || rangeFilterIndex !== undefined;
-  const isSelectFilter = columnDef.filterVariant === 'select';
-  const isMultiSelectFilter = columnDef.filterVariant === 'multi-select';
+    filterVariant?.includes('range') || rangeFilterIndex !== undefined;
+  const isSelectFilter = filterVariant === 'select';
+  const isMultiSelectFilter = filterVariant === 'multi-select';
   const isTextboxFilter =
-    columnDef.filterVariant === 'text' ||
+    ['autocomplete', 'text'].includes(filterVariant!) ||
     (!isSelectFilter && !isMultiSelectFilter);
   const currentFilterOption = columnDef._filterFn;
   const filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption)
@@ -91,50 +116,28 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
 
   const facetedUniqueValues = column.getFacetedUniqueValues();
 
-  const filterSelectOptions = useMemo(
-    () =>
-      columnDef.filterSelectOptions ??
-      ((isSelectFilter || isMultiSelectFilter) && facetedUniqueValues
-        ? Array.from(facetedUniqueValues.keys())
-            .filter((value) => value !== null && value !== undefined)
-            .sort((a, b) => a.localeCompare(b))
-        : undefined),
-    [
-      columnDef.filterSelectOptions,
-      facetedUniqueValues,
-      isMultiSelectFilter,
-      isSelectFilter,
-    ],
-  );
-
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
   const [filterValue, setFilterValue] = useState<string | string[]>(() =>
     isMultiSelectFilter
       ? (column.getFilterValue() as string[]) || []
       : isRangeFilter
       ? (column.getFilterValue() as [string, string])?.[
           rangeFilterIndex as number
-        ] || []
+        ] || ''
       : (column.getFilterValue() as string) ?? '',
   );
 
   const handleChangeDebounced = useCallback(
     debounce(
-      (event: ChangeEvent<HTMLInputElement>) => {
-        const value =
-          textFieldProps.type === 'date'
-            ? event.target.valueAsDate
-            : textFieldProps.type === 'number'
-            ? event.target.valueAsNumber
-            : event.target.value;
+      (newValue: any) => {
         if (isRangeFilter) {
-          column.setFilterValue((old: Array<string | Date | number | null>) => {
+          column.setFilterValue((old: Array<Date | null | number | string>) => {
             const newFilterValues = old ?? ['', ''];
-            newFilterValues[rangeFilterIndex as number] = value;
+            newFilterValues[rangeFilterIndex as number] = newValue;
             return newFilterValues;
           });
         } else {
-          column.setFilterValue(value ?? undefined);
+          column.setFilterValue(newValue ?? undefined);
         }
       },
       isTextboxFilter ? (manualFiltering ? 400 : 200) : 1,
@@ -142,9 +145,20 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
     [],
   );
 
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setFilterValue(event.target.value);
-    handleChangeDebounced(event);
+  const handleChange = (newValue: any) => {
+    setFilterValue(newValue?.toString() ?? '');
+    handleChangeDebounced(newValue);
+  };
+
+  const handleTextFieldChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const newValue =
+      textFieldProps.type === 'date'
+        ? event.target.valueAsDate
+        : textFieldProps.type === 'number'
+        ? event.target.valueAsNumber
+        : event.target.value;
+    handleChange(newValue);
+    textFieldProps?.onChange?.(event);
   };
 
   const handleClear = () => {
@@ -199,205 +213,270 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
     );
   }
 
+  const dropdownOptions = useMemo(
+    () =>
+      columnDef.filterSelectOptions ??
+      ((isSelectFilter || isMultiSelectFilter || isAutocompleteFilter) &&
+      facetedUniqueValues
+        ? Array.from(facetedUniqueValues.keys())
+            .filter((value) => value !== null && value !== undefined)
+            .sort((a, b) => a.localeCompare(b))
+        : undefined),
+    [
+      columnDef.filterSelectOptions,
+      facetedUniqueValues,
+      isMultiSelectFilter,
+      isSelectFilter,
+    ],
+  );
+
+  const endAdornment =
+    !isAutocompleteFilter && !isDateFilter && !filterChipLabel ? (
+      <InputAdornment
+        position="end"
+        sx={{ mr: isSelectFilter || isMultiSelectFilter ? '20px' : undefined }}
+      >
+        <Tooltip arrow placement="right" title={localization.clearFilter ?? ''}>
+          <span>
+            <IconButton
+              aria-label={localization.clearFilter}
+              disabled={!filterValue?.toString()?.length}
+              onClick={handleClear}
+              size="small"
+              sx={{
+                height: '2rem',
+                transform: 'scale(0.9)',
+                width: '2rem'
+              }}
+            >
+              <CloseIcon />
+            </IconButton>
+          </span>
+        </Tooltip>
+      </InputAdornment>
+    ) : null;
+
+  const startAdornment = showChangeModeButton ? (
+    <InputAdornment position="start">
+      <Tooltip arrow title={localization.changeFilterMode}>
+        <span>
+          <IconButton
+            aria-label={localization.changeFilterMode}
+            onClick={handleFilterMenuOpen}
+            size="small"
+            sx={{ height: '1.75rem', width: '1.75rem' }}
+          >
+            <FilterListIcon />
+          </IconButton>
+        </span>
+      </Tooltip>
+      {filterChipLabel && (
+        <Chip label={filterChipLabel} onDelete={handleClearEmptyFilterChip} />
+      )}
+    </InputAdornment>
+  ) : null;
+
+  const commonTextFieldProps: TextFieldProps = {
+    FormHelperTextProps: {
+      sx: {
+        fontSize: '0.75rem',
+        lineHeight: '0.8rem',
+        whiteSpace: 'nowrap',
+      },
+    },
+    InputProps: endAdornment //hack because mui looks for presense of endAdornment key instead of undefined
+      ? { endAdornment, startAdornment }
+      : { startAdornment },
+    fullWidth: true,
+    helperText: showChangeModeButton ? (
+      <label>
+        {localization.filterMode.replace(
+          '{filterType}',
+          // @ts-ignore
+          localization[
+            `filter${
+              currentFilterOption?.charAt(0)?.toUpperCase() +
+              currentFilterOption?.slice(1)
+            }`
+          ],
+        )}
+      </label>
+    ) : null,
+    inputProps: {
+      autoComplete: 'new-password', // disable autocomplete and autofill
+      disabled: !!filterChipLabel,
+      sx: {
+        textOverflow: 'ellipsis',
+        width: filterChipLabel ? 0 : undefined,
+      },
+      title: filterPlaceholder,
+    },
+    inputRef: (inputRef) => {
+      filterInputRefs.current[`${column.id}-${rangeFilterIndex ?? 0}`] =
+        inputRef;
+      if (textFieldProps.inputRef) {
+        textFieldProps.inputRef = inputRef;
+      }
+    },
+    margin: 'none',
+    onClick: (e: MouseEvent<HTMLInputElement>) => e.stopPropagation(),
+    placeholder:
+      filterChipLabel || isSelectFilter || isMultiSelectFilter
+        ? undefined
+        : filterPlaceholder,
+    variant: 'standard',
+    ...textFieldProps,
+    sx: (theme) => ({
+      minWidth: isDateFilter
+        ? '160px'
+        : isRangeFilter
+        ? '100px'
+        : !filterChipLabel
+        ? '120px'
+        : 'auto',
+      mx: '-2px',
+      p: 0,
+      width: 'calc(100% + 4px)',
+      ...(parseFromValuesOrFunc(textFieldProps?.sx, theme) as any),
+    }),
+  };
+
   return (
     <>
-      <TextField
-        fullWidth
-        inputProps={{
-          disabled: !!filterChipLabel,
-          sx: {
-            textOverflow: 'ellipsis',
-            width: filterChipLabel ? 0 : undefined,
-          },
-          title: filterPlaceholder,
-        }}
-        helperText={
-          showChangeModeButton ? (
-            <label>
-              {localization.filterMode.replace(
-                '{filterType}',
-                // @ts-ignore
-                localization[
-                  `filter${
-                    currentFilterOption?.charAt(0)?.toUpperCase() +
-                    currentFilterOption?.slice(1)
-                  }`
-                ],
-              )}
-            </label>
-          ) : null
-        }
-        FormHelperTextProps={{
-          sx: {
-            fontSize: '0.75rem',
-            lineHeight: '0.8rem',
-            whiteSpace: 'nowrap',
-          },
-        }}
-        margin="none"
-        placeholder={
-          filterChipLabel || isSelectFilter || isMultiSelectFilter
-            ? undefined
-            : filterPlaceholder
-        }
-        onChange={handleChange}
-        onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
-        select={isSelectFilter || isMultiSelectFilter}
-        value={filterValue ?? ''}
-        variant="standard"
-        InputProps={{
-          startAdornment: showChangeModeButton ? (
-            <InputAdornment position="start">
-              <Tooltip arrow title={localization.changeFilterMode}>
-                <span>
-                  <IconButton
-                    aria-label={localization.changeFilterMode}
-                    onClick={handleFilterMenuOpen}
-                    size="small"
-                    sx={{ height: '1.75rem', width: '1.75rem' }}
-                  >
-                    <FilterListIcon />
-                  </IconButton>
-                </span>
-              </Tooltip>
-              {filterChipLabel && (
-                <Chip
-                  onDelete={handleClearEmptyFilterChip}
-                  label={filterChipLabel}
-                />
-              )}
-            </InputAdornment>
-          ) : null,
-          endAdornment: !filterChipLabel && (
-            <InputAdornment position="end">
-              <Tooltip
-                arrow
-                placement="right"
-                title={localization.clearFilter ?? ''}
-              >
-                <span>
-                  <IconButton
-                    aria-label={localization.clearFilter}
-                    disabled={!filterValue?.toString()?.length}
-                    onClick={handleClear}
-                    size="small"
-                    sx={{
-                      height: '1.75rem',
-                      width: '1.75rem',
-                    }}
-                  >
-                    <CloseIcon />
-                  </IconButton>
-                </span>
-              </Tooltip>
-            </InputAdornment>
-          ),
-        }}
-        SelectProps={{
-          displayEmpty: true,
-          multiple: isMultiSelectFilter,
-          renderValue: isMultiSelectFilter
-            ? (selected: any) =>
-                !selected?.length ? (
-                  <Box sx={{ opacity: 0.5 }}>{filterPlaceholder}</Box>
-                ) : (
-                  <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: '2px' }}>
-                    {(selected as string[])?.map((value) => {
-                      const selectedValue = filterSelectOptions?.find(
-                        (option) =>
+      {isDateFilter ? (
+        <DatePicker
+          onChange={(newDate) => {
+            handleChange(newDate);
+          }}
+          value={filterValue || null}
+          {...datePickerProps}
+          slotProps={{
+            field: {
+              clearable: true,
+              onClear: () => handleClear(),
+              ...datePickerProps?.slotProps?.field,
+            },
+            textField: {
+              ...commonTextFieldProps,
+              ...datePickerProps?.slotProps?.textField,
+            },
+          }}
+        />
+      ) : isAutocompleteFilter ? (
+        <Autocomplete
+          getOptionLabel={(option) => option}
+          onChange={(_e, newValue) => handleChange(newValue)}
+          options={dropdownOptions ?? []}
+          {...autocompleteProps}
+          renderInput={(builtinTextFieldProps) => (
+            <TextField
+              {...builtinTextFieldProps}
+              {...commonTextFieldProps}
+              InputProps={{
+                ...builtinTextFieldProps.InputProps,
+                startAdornment:
+                  commonTextFieldProps?.InputProps?.startAdornment,
+              }}
+              inputProps={{
+                ...builtinTextFieldProps.inputProps,
+                ...commonTextFieldProps?.inputProps,
+              }}
+              onChange={handleTextFieldChange}
+            />
+          )}
+          value={filterValue}
+        />
+      ) : (
+        <TextField
+          SelectProps={{
+            displayEmpty: true,
+            multiple: isMultiSelectFilter,
+            renderValue: isMultiSelectFilter
+              ? (selected: any) =>
+                  !selected?.length ? (
+                    <Box sx={{ opacity: 0.5 }}>{filterPlaceholder}</Box>
+                  ) : (
+                    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: '2px' }}>
+                      {(selected as string[])?.map((value) => {
+                        const selectedValue = dropdownOptions?.find((option) =>
                           option instanceof Object
                             ? option.value === value
                             : option === value,
-                      );
-                      return (
-                        <Chip
-                          key={value}
-                          label={
-                            selectedValue instanceof Object
-                              ? selectedValue.text
-                              : selectedValue
-                          }
-                        />
-                      );
-                    })}
-                  </Box>
-                )
-            : undefined,
-        }}
-        {...textFieldProps}
-        inputRef={(inputRef) => {
-          filterInputRefs.current[`${column.id}-${rangeFilterIndex ?? 0}`] =
-            inputRef;
-          if (textFieldProps.inputRef) {
-            textFieldProps.inputRef = inputRef;
-          }
-        }}
-        sx={(theme) => ({
-          p: 0,
-          minWidth: isRangeFilter
-            ? '100px'
-            : !filterChipLabel
-            ? '120px'
-            : 'auto',
-          width: 'calc(100% + 4px)',
-          mx: '-2px',
-          '& .MuiSelect-icon': {
-            mr: '1.5rem',
-          },
-          ...(parseFromValuesOrFunc(textFieldProps?.sx, theme) as any),
-        })}
-      >
-        {(isSelectFilter || isMultiSelectFilter) && (
-          <MenuItem divider disabled hidden value="">
-            <Box sx={{ opacity: 0.5 }}>{filterPlaceholder}</Box>
-          </MenuItem>
-        )}
-        {textFieldProps.children ??
-          filterSelectOptions?.map(
-            (option: string | { text: string; value: string }) => {
-              if (!option) return '';
-              let value: string;
-              let text: string;
-              if (typeof option !== 'object') {
-                value = option;
-                text = option;
-              } else {
-                value = option.value;
-                text = option.text;
-              }
-              return (
-                <MenuItem
-                  key={value}
-                  sx={{
-                    display: 'flex',
-                    m: 0,
-                    alignItems: 'center',
-                    gap: '0.5rem',
-                  }}
-                  value={value}
-                >
-                  {isMultiSelectFilter && (
-                    <Checkbox
-                      checked={(
-                        (column.getFilterValue() ?? []) as string[]
-                      ).includes(value)}
-                      sx={{ mr: '0.5rem' }}
-                    />
-                  )}
-                  {text}{' '}
-                  {!columnDef.filterSelectOptions &&
-                    `(${facetedUniqueValues.get(value)})`}
-                </MenuItem>
-              );
-            },
-          )}
-      </TextField>
+                        );
+                        return (
+                          <Chip
+                            key={value}
+                            label={
+                              selectedValue instanceof Object
+                                ? selectedValue.text
+                                : selectedValue
+                            }
+                          />
+                        );
+                      })}
+                    </Box>
+                  )
+              : undefined,
+          }}
+          onChange={handleTextFieldChange}
+          select={isSelectFilter || isMultiSelectFilter}
+          {...commonTextFieldProps}
+          value={filterValue ?? ''}
+        >
+          {(isSelectFilter || isMultiSelectFilter) && [
+            <MenuItem disabled divider hidden key="p" value="">
+              <Box sx={{ opacity: 0.5 }}>{filterPlaceholder}</Box>
+            </MenuItem>,
+            ...[
+              textFieldProps.children ??
+                dropdownOptions?.map(
+                  (option: { text: string; value: string } | string, index) => {
+                    if (!option) return '';
+                    let value: string;
+                    let text: string;
+                    if (typeof option !== 'object') {
+                      value = option;
+                      text = option;
+                    } else {
+                      value = option.value;
+                      text = option.text;
+                    }
+                    return (
+                      <MenuItem
+                        key={`${index}-${value}`}
+                        sx={{
+                          alignItems: 'center',
+                          display: 'flex',
+                          gap: '0.5rem',
+                          m: 0,
+                        }}
+                        value={value}
+                      >
+                        {isMultiSelectFilter && (
+                          <Checkbox
+                            checked={(
+                              (column.getFilterValue() ?? []) as string[]
+                            ).includes(value)}
+                            sx={{ mr: '0.5rem' }}
+                          />
+                        )}
+                        {text}{' '}
+                        {!columnDef.filterSelectOptions &&
+                          `(${facetedUniqueValues.get(value)})`}
+                      </MenuItem>
+                    );
+                  },
+                ),
+            ],
+          ]}
+        </TextField>
+      )}
       <MRT_FilterOptionMenu
         anchorEl={anchorEl}
         header={header}
         setAnchorEl={setAnchorEl}
-        table={table}
         setFilterValue={setFilterValue}
+        table={table}
       />
     </>
   );