DataTableHeaderCellFilter.tsx

import { ActionIcon, Popover, PopoverDropdown, PopoverTarget } from '@mantine/core';
import { useClickOutside, useDisclosure } from '@mantine/hooks';
import type { RefObject } from 'react';
import { IconFilter } from './icons/IconFilter';
import { IconFilterFilled } from './icons/IconFilterFilled';
import type { DataTableColumn } from './types';

type DataTableHeaderCellFilterProps<T> = {
  children: DataTableColumn<T>['filter'];
  filterPopoverProps: DataTableColumn<T>['filterPopoverProps'];
  filterPopoverDisableClickOutside?: DataTableColumn<T>['filterPopoverDisableClickOutside'];
  isActive: boolean;
};

export function DataTableHeaderCellFilter<T>({
  children,
  isActive,
  filterPopoverProps,
  filterPopoverDisableClickOutside,
}: DataTableHeaderCellFilterProps<T>) {
  const [isOpen, { close, toggle }] = useDisclosure(false);
  const Icon = isActive ? IconFilterFilled : IconFilter;
  let ref: RefObject<HTMLDivElement | null> | undefined = useClickOutside(close);
  if (filterPopoverDisableClickOutside) ref = undefined;

  return (
    // Keep the expanded props before the open/close, or they could be overridden by the client
    <Popover withArrow shadow="md" trapFocus {...filterPopoverProps} opened={isOpen} onClose={close} onDismiss={close}>
      <PopoverTarget>
        <ActionIcon
          className="mantine-datatable-header-cell-filter-action-icon"
          data-active={isActive || undefined}
          size="sm"
          variant="default"
          onClick={(e) => {
            e.preventDefault();
            toggle();
          }}
          onKeyDown={(e) => e.stopPropagation()}
        >
          <Icon />
        </ActionIcon>
      </PopoverTarget>
      <PopoverDropdown ref={ref} onClick={(e) => e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()}>
        {typeof children === 'function' ? children({ close }) : children}
      </PopoverDropdown>
    </Popover>
  );
}