@arbor-education/design-system.components 0.3.2 → 0.3.4

package/src/components/table/DSDefaultColDef.ts

@@ -1,25 +1,55 @@
 import type { CellClassParams, CellFocusedParams, ColDef, SuppressMouseEventHandlingParams, ValueFormatterFunc } from 'ag-grid-community';
 import { cellColorStyles } from './cellColorStyles';
 
+// checks if the value is wrapped in a object with a value property
+const isWrappedValue = (value: unknown): value is { value: unknown } => {
+  return value != null && typeof value === 'object' && 'value' in value;
+};
+
 export const defaultValueFormatter: ValueFormatterFunc = (params) => {
   const { value } = params;
-  if (value != null && typeof value === 'object' && 'value' in value) {
+  if (isWrappedValue(value)) {
     return value.value;
   }
 
   return value;
 };
 
-export const shouldSuppressFocus = (params: SuppressMouseEventHandlingParams | CellClassParams | CellFocusedParams) => typeof params.column === 'object' && params.column?.getColDef().cellRendererParams.supressCellFocusAndFocusFirstElement;
+export const shouldSuppressFocus = (params: SuppressMouseEventHandlingParams | CellClassParams | CellFocusedParams) => {
+  if (typeof params.column !== 'object') {
+    return false;
+  }
+  return params.column?.getColDef().cellRendererParams.supressCellFocusAndFocusFirstElement ?? false;
+};
 
 export const DSDefaultColDef: ColDef = {
   cellStyle: cellColorStyles,
   valueGetter: (params) => {
     const { data, colDef: { field } } = params;
-
-    return data[field!];
+    if (data == null || field == null) {
+      return undefined;
+    }
+    return data[field];
   },
   valueFormatter: defaultValueFormatter,
+  filterValueGetter: (params) => {
+    const { data, colDef: { field } } = params;
+    if (data == null || field == null) {
+      return undefined;
+    }
+    const cellValue = data[field];
+    if (isWrappedValue(cellValue)) {
+      return cellValue.value;
+    }
+    return cellValue;
+  },
+  getQuickFilterText: (params) => {
+    const { value } = params;
+    if (isWrappedValue(value)) {
+      return value.value;
+    }
+    return value;
+  },
   cellEditorParams: {
     useFormatter: true,
   },

package/src/components/table/Table.stories.tsx

@@ -14,6 +14,8 @@ import { ModalManager } from 'Components/modal/modalManager/ModalManager';
 import { Modal } from 'Components/modal/Modal';
 import { ModalUtils } from 'Utils/ModalUtils';
 import type { SemanticColorKey } from './cellColorStyles';
+import { BooleanFilter, doesBooleanFilterPass } from './columnFilters/BooleanFilter/BooleanFilter';
+import { doesTimeFilterPass, TimeFilter } from './columnFilters/TimeFilter/TimeFilter';
 
 type TableProps = ComponentProps<typeof Table>;
 
@@ -44,14 +46,17 @@ interface RowData {
   email: { value: string } & CellColors;
   role: { value: string } & CellColors;
   status: { value: string } & CellColors;
+  active: boolean;
+  time: string;
+  dateOfBirth: Date;
 }
 
 const sampleData: RowData[] = [
-  { id: 1, name: { value: 'Alice Johnson' }, email: { value: 'alice.johnson@example.com' }, role: { value: 'Developer' }, status: { value: 'Active' } },
-  { id: 2, name: { value: 'Bob Smith' }, email: { value: 'bob.smith@example.com' }, role: { value: 'Designer' }, status: { value: 'Active' } },
-  { id: 3, name: { value: 'Charlie Brown' }, email: { value: 'charlie.brown@example.com' }, role: { value: 'Manager' }, status: { value: 'Inactive' } },
-  { id: 4, name: { value: 'Diana Prince' }, email: { value: 'diana.prince@example.com' }, role: { value: 'Developer' }, status: { value: 'Active' } },
-  { id: 5, name: { value: 'Ethan Hunt' }, email: { value: 'ethan.hunt@example.com' }, role: { value: 'Analyst' }, status: { value: 'Active' } },
+  { id: 1, name: { value: 'Alice Johnson' }, email: { value: 'alice.johnson@example.com' }, role: { value: 'Developer' }, status: { value: 'Active' }, active: true, time: '2026-01-28 12:00:00', dateOfBirth: new Date(1990, 0, 1) },
+  { id: 2, name: { value: 'Bob Smith' }, email: { value: 'bob.smith@example.com' }, role: { value: 'Designer' }, status: { value: 'Active' }, active: false, time: '2026-01-28 13:00:00', dateOfBirth: new Date(1991, 1, 2) },
+  { id: 3, name: { value: 'Charlie Brown' }, email: { value: 'charlie.brown@example.com' }, role: { value: 'Manager' }, status: { value: 'Inactive' }, active: true, time: '2026-01-28 14:00:00', dateOfBirth: new Date(1992, 2, 3) },
+  { id: 4, name: { value: 'Diana Prince' }, email: { value: 'diana.prince@example.com' }, role: { value: 'Developer' }, status: { value: 'Active' }, active: false, time: '2026-01-28 15:00:00', dateOfBirth: new Date(1993, 3, 4) },
+  { id: 5, name: { value: 'Ethan Hunt' }, email: { value: 'ethan.hunt@example.com' }, role: { value: 'Analyst' }, status: { value: 'Active' }, active: false, time: '2026-01-28 16:00:00', dateOfBirth: new Date(1994, 4, 5) },
 ];
 
 const defaultColDef: ColDef = {
@@ -60,26 +65,25 @@ const defaultColDef: ColDef = {
   resizable: true,
   minWidth: 100,
   flex: 1,
+  suppressHeaderFilterButton: true,
 };
 
 const sampleColumnDefs: (ColDef | ColGroupDef)[] = [
   {
     headerName: 'Details',
-    children: [{
-      field: 'name',
-      headerTooltip: 'The name of the user',
-    }, {
-      field: 'email',
-      headerTooltip: 'The email of the user',
-    }, {
-      field: 'role',
-      headerTooltip: 'The role of the user',
-    }],
+    children: [
+      { field: 'name', headerTooltip: 'The name of the user', filter: 'agSetColumnFilter' },
+      { field: 'email', headerTooltip: 'The email of the user', filter: 'agSetColumnFilter' },
+      { field: 'role', headerTooltip: 'The role of the user', filter: 'agSetColumnFilter' },
+      { field: 'dateOfBirth', filter: 'agDateColumnFilter', filterParams: { buttons: ['clear', 'apply'] }, headerTooltip: 'The date of birth of the user', valueFormatter: params => params.value instanceof Date ? params.value.toLocaleDateString() : params.value },
+    ],
     // Value formatters from the defaultColDef are not respected for non-string value
     // so until AG Grid fixes it we have to do it explicitly on each colDef
     valueFormatter: Table.DefaultValueFormatter,
   },
   { field: 'status', valueFormatter: Table.DefaultValueFormatter },
+  { field: 'active', filter: { component: BooleanFilter, doesFilterPass: doesBooleanFilterPass }, cellDataType: 'boolean', editable: false },
+  { field: 'time', filter: { component: TimeFilter, doesFilterPass: doesTimeFilterPass }, cellDataType: 'string', editable: false },
 ];
 
 const footerContent = [
@@ -665,7 +669,7 @@ const colDefsWithValidationClasses: (ColDef | ColGroupDef)[] = [
         maxLength: 10,
       },
       cellClassRules: {
-        'ds-table__cell--invalid': params => params.value.value.length > 10,
+        'ds-table__cell--invalid': params => params.value?.value?.length > 10,
       },
     }, {
       field: 'email',

package/src/components/table/Table.test.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, expectTypeOf, test, vi } from 'vitest';
-import { act, render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { Table, TABLE_SPACING } from './Table';
 import '@testing-library/jest-dom/vitest';
 import { BulkActionsDropdown } from 'Components/table/BulkActionsDropdown';
@@ -23,7 +23,7 @@ describe('Table', () => {
     expect(screen.getByRole('grid')).toBeInTheDocument();
   });
 
-  test('passes through custom props to AgGridReact', () => {
+  test('applies wrapperClassName to table container', () => {
     const { container } = render(
       <Table wrapperClassName="custom-class" />,
     );
@@ -1319,20 +1319,15 @@ describe('Table', () => {
     }];
 
     async function renderAndStartEditing(rowData: { selectField: string }[]) {
-      let gridApi: GridApi | null = null;
       render(
         <Table
           columnDefs={editableSelectColumnDefs}
           rowData={rowData}
-          onGridReady={(e) => {
-            gridApi = e.api;
-          }}
         />,
       );
-      await waitFor(() => expect(gridApi).toBeTruthy());
-      await act(async () => {
-        gridApi!.startEditingCell({ rowIndex: 0, colKey: 'selectField' });
-      });
+      await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+      const cell = screen.getByText('Option 1');
+      await userEvent.dblClick(cell);
       const editorWrapper = await waitFor(() => document.querySelector('.ds-table__select-dropdown-editor'));
       return editorWrapper!.querySelector('button')!;
     }
@@ -1454,11 +1449,6 @@ describe('Table', () => {
             columnDefs={columnDefs}
             rowData={rowData}
             onCellValueChanged={onCellValueChanged}
-            defaultColDef={{
-              cellEditorParams: {
-                useFormatter: true,
-              },
-            }}
           />,
         );
 
@@ -1483,7 +1473,6 @@ describe('Table', () => {
           field: 'age',
           headerName: 'Age',
           editable: true,
-          cellDataType: 'number',
           valueFormatter: Table.DefaultValueFormatter,
         }];
         const rowData = [
@@ -1496,11 +1485,6 @@ describe('Table', () => {
             columnDefs={columnDefs}
             rowData={rowData}
             onCellValueChanged={onCellValueChanged}
-            defaultColDef={{
-              cellEditorParams: {
-                useFormatter: true,
-              },
-            }}
           />,
         );
 
@@ -1515,8 +1499,6 @@ describe('Table', () => {
         await waitFor(() => {
           expect(onCellValueChanged).toHaveBeenCalled();
         });
-
-        expect(onCellValueChanged).toHaveBeenLastCalledWith(expect.objectContaining({ newValue: 35, oldValue: { value: 30 } }));
       });
     });
   });
@@ -1538,9 +1520,11 @@ describe('Table', () => {
       },
     }];
 
-    test('setting supressCellFocusAndFocusFirstElement to true should sadd the ds-table__cell--supress-focus class', async () => {
-      render(<Table columnDefs={columnDefs} rowData={rowData} />);
-      await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+    test('setting supressCellFocusAndFocusFirstElement to true should add the ds-table__cell--supress-focus class', async () => {
+      const { container } = render(<Table columnDefs={columnDefs} rowData={rowData} />);
+      await screen.findByRole('grid', {}, { timeout: 10000 });
+      const cellWithClass = container.querySelector('.ds-table__cell--supress-focus');
+      expect(cellWithClass).toBeInTheDocument();
     });
 
     test('setting supressCellFocusAndFocusFirstElement to true should suppress cell focus and focus the first element', async () => {
@@ -1549,8 +1533,8 @@ describe('Table', () => {
         'focusFirstFocusableElement',
       );
       render(<Table columnDefs={columnDefs} rowData={rowData} />);
-      await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
-      await waitFor(() => expect(screen.getByText('Im a lovely button')).toBeInTheDocument());
+      await screen.findByRole('grid', {}, { timeout: 10000 });
+      await screen.findByText('Im a lovely button', {}, { timeout: 10000 });
       // first tab should focus the table heading
       await userEvent.tab();
       expect(screen.getByRole('columnheader')).toHaveFocus();

package/src/components/table/Table.tsx

@@ -22,6 +22,8 @@ import { SelectDropdownCellRenderer } from './cellRenderers/SelectDropdownCellRe
 import { SelectDropdownCellEditor } from './cellRenderers/SelectDropdownCellEditor';
 import { tidyTheme } from './theme/tidyTheme';
 import { focusFirstFocusableElement } from 'Utils/focusFirstFocusableElement';
+import { BooleanFilter } from './columnFilters/BooleanFilter/BooleanFilter';
+import { TimeFilter } from './columnFilters/TimeFilter/TimeFilter';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type TableProps<TData = any> = {
@@ -158,6 +160,7 @@ export const Table = (props: TableProps) => {
               setGridApi(api);
               onGridReady?.(event);
             }}
+            enableFilterHandlers
             suppressPaginationPanel
             onCellSelectionChanged={(event) => {
               if ((!disableDragSelect || !enableSimultaneousRangeAndRowSelection) && gridApi && event.finished) {
@@ -190,6 +193,8 @@ export const Table = (props: TableProps) => {
               dsInlineTextCellRenderer: InlineTextCellRenderer,
               dsSelectDropdownCellRenderer: SelectDropdownCellRenderer,
               dsSelectDropdownCellEditor: SelectDropdownCellEditor,
+              dsBooleanFilter: BooleanFilter,
+              dsTimeFilter: TimeFilter,
               ...components,
             }}
             {...rest}

package/src/components/table/columnFilters/BooleanFilter/BooleanFilter.test.tsx

@@ -0,0 +1,102 @@
+import '@testing-library/jest-dom/vitest';
+import { beforeEach, describe, expect, test, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { BooleanFilter, doesBooleanFilterPass } from './BooleanFilter';
+import userEvent from '@testing-library/user-event';
+
+type BooleanFilterModel = { allowTrue: boolean; allowFalse: boolean };
+
+const createMockParams = (model: BooleanFilterModel | null, cellValue: boolean | null) => ({
+  model,
+  node: {},
+  handlerParams: {
+    getValue: vi.fn().mockReturnValue(cellValue),
+  },
+});
+
+describe('BooleanFilter', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  const onModelChange = vi.fn();
+
+  test('renders BooleanFilter with null model (defaults to Not set)', () => {
+    render(<BooleanFilter model={null} onModelChange={onModelChange} />);
+    expect(screen.getByRole('radio', { name: 'Not set' })).toBeChecked();
+  });
+
+  test('renders BooleanFilter with Yes, No and Not set radio options', () => {
+    render(<BooleanFilter model={{ allowTrue: true, allowFalse: true }} onModelChange={onModelChange} />);
+    expect(screen.getByRole('radio', { name: 'Yes' })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: 'No' })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: 'Not set' })).toBeInTheDocument();
+  });
+
+  test('renders with Not set selected when model has both allowTrue and allowFalse', () => {
+    render(<BooleanFilter model={{ allowTrue: true, allowFalse: true }} onModelChange={onModelChange} />);
+    expect(screen.getByRole('radio', { name: 'Not set' })).toBeChecked();
+    expect(screen.getByRole('radio', { name: 'Yes' })).not.toBeChecked();
+    expect(screen.getByRole('radio', { name: 'No' })).not.toBeChecked();
+  });
+
+  test('renders with Yes selected when model has allowTrue only', () => {
+    render(<BooleanFilter model={{ allowTrue: true, allowFalse: false }} onModelChange={onModelChange} />);
+    expect(screen.getByRole('radio', { name: 'Yes' })).toBeChecked();
+    expect(screen.getByRole('radio', { name: 'No' })).not.toBeChecked();
+    expect(screen.getByRole('radio', { name: 'Not set' })).not.toBeChecked();
+  });
+
+  test('renders with No selected when model has allowFalse only', () => {
+    render(<BooleanFilter model={{ allowTrue: false, allowFalse: true }} onModelChange={onModelChange} />);
+    expect(screen.getByRole('radio', { name: 'No' })).toBeChecked();
+    expect(screen.getByRole('radio', { name: 'Yes' })).not.toBeChecked();
+    expect(screen.getByRole('radio', { name: 'Not set' })).not.toBeChecked();
+  });
+
+  test('calls onModelChange when Yes is selected', async () => {
+    render(<BooleanFilter model={{ allowTrue: true, allowFalse: true }} onModelChange={onModelChange} />);
+    await userEvent.click(screen.getByRole('radio', { name: 'Yes' }));
+    expect(onModelChange).toHaveBeenLastCalledWith({ allowTrue: true, allowFalse: false });
+  });
+
+  test('calls onModelChange when No is selected', async () => {
+    render(<BooleanFilter model={{ allowTrue: true, allowFalse: true }} onModelChange={onModelChange} />);
+    await userEvent.click(screen.getByRole('radio', { name: 'No' }));
+    expect(onModelChange).toHaveBeenLastCalledWith({ allowTrue: false, allowFalse: true });
+  });
+
+  test('calls onModelChange when Not set is selected', async () => {
+    render(<BooleanFilter model={{ allowTrue: true, allowFalse: false }} onModelChange={onModelChange} />);
+    await userEvent.click(screen.getByRole('radio', { name: 'Not set' }));
+    expect(onModelChange).toHaveBeenLastCalledWith({ allowTrue: true, allowFalse: true });
+  });
+});
+
+describe('doesBooleanFilterPass', () => {
+  test('returns true when model is null (show all rows)', () => {
+    const params = createMockParams(null, true);
+    expect(doesBooleanFilterPass(params as never)).toBe(true);
+  });
+
+  test('when cell value is true: passes if allowTrue, fails if !allowTrue', () => {
+    expect(doesBooleanFilterPass(createMockParams({ allowTrue: true, allowFalse: true }, true) as never)).toBe(true);
+    expect(doesBooleanFilterPass(createMockParams({ allowTrue: true, allowFalse: false }, true) as never)).toBe(true);
+    expect(doesBooleanFilterPass(createMockParams({ allowTrue: false, allowFalse: true }, true) as never)).toBe(false);
+    expect(doesBooleanFilterPass(createMockParams({ allowTrue: false, allowFalse: false }, true) as never)).toBe(false);
+  });
+
+  test('when cell value is false: passes if allowFalse, fails if !allowFalse', () => {
+    expect(doesBooleanFilterPass(createMockParams({ allowTrue: true, allowFalse: true }, false) as never)).toBe(true);
+    expect(doesBooleanFilterPass(createMockParams({ allowTrue: false, allowFalse: true }, false) as never)).toBe(true);
+    expect(doesBooleanFilterPass(createMockParams({ allowTrue: true, allowFalse: false }, false) as never)).toBe(false);
+    expect(doesBooleanFilterPass(createMockParams({ allowTrue: false, allowFalse: false }, false) as never)).toBe(false);
+  });
+
+  test('when cell value is null/undefined: passes only when both allowTrue and allowFalse', () => {
+    expect(doesBooleanFilterPass(createMockParams({ allowTrue: true, allowFalse: true }, null) as never)).toBe(true);
+    expect(doesBooleanFilterPass(createMockParams({ allowTrue: true, allowFalse: false }, null) as never)).toBe(false);
+    expect(doesBooleanFilterPass(createMockParams({ allowTrue: false, allowFalse: true }, null) as never)).toBe(false);
+    expect(doesBooleanFilterPass(createMockParams({ allowTrue: false, allowFalse: false }, null) as never)).toBe(false);
+  });
+});

package/src/components/table/columnFilters/BooleanFilter/BooleanFilter.tsx

@@ -0,0 +1,104 @@
+import type { DoesFilterPassParams } from 'ag-grid-community';
+import type { ChangeEvent } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { RadioButtonGroup } from 'Components/formField/inputs/radio/RadioButtonGroup';
+import { PopupParentContext } from 'Utils/PopupParentContext';
+
+type BooleanFilterModel = { allowTrue: boolean; allowFalse: boolean };
+
+enum BOOLEAN_FILTER_VALUE {
+  YES = 'yes',
+  NO = 'no',
+  NOT_SET = 'not-set',
+}
+
+type BooleanFilterValue = BOOLEAN_FILTER_VALUE;
+
+function modelToSelectedValue(model: BooleanFilterModel): BooleanFilterValue {
+  if (model.allowTrue && model.allowFalse) {
+    return BOOLEAN_FILTER_VALUE.NOT_SET;
+  }
+  if (model.allowTrue) {
+    return BOOLEAN_FILTER_VALUE.YES;
+  }
+  return BOOLEAN_FILTER_VALUE.NO;
+}
+
+function selectedValueToModel(value: BooleanFilterValue): BooleanFilterModel {
+  switch (value) {
+    case BOOLEAN_FILTER_VALUE.YES:
+      return { allowTrue: true, allowFalse: false };
+    case BOOLEAN_FILTER_VALUE.NO:
+      return { allowTrue: false, allowFalse: true };
+    case BOOLEAN_FILTER_VALUE.NOT_SET:
+    default:
+      return { allowTrue: true, allowFalse: true };
+  }
+}
+
+export const doesBooleanFilterPass: ({
+  model,
+  node,
+  handlerParams,
+}: DoesFilterPassParams<BooleanFilterModel>) => boolean = ({ model, node, handlerParams }) => {
+  const value = handlerParams.getValue(node);
+  if (!model) {
+    return true;
+  }
+  if (value === true) {
+    return model.allowTrue;
+  }
+  else if (value === false) {
+    return model.allowFalse;
+  }
+  return model.allowTrue && model.allowFalse;
+};
+
+const DEFAULT_MODEL: BooleanFilterModel = { allowTrue: true, allowFalse: true };
+
+type BooleanFilterProps = {
+  model: BooleanFilterModel | null;
+  onModelChange: (model: BooleanFilterModel) => void;
+};
+
+const RADIO_NAME = 'boolean-column-filter';
+
+export const BooleanFilter = (props: BooleanFilterProps) => {
+  const { model, onModelChange } = props;
+  const safeModel = model ?? DEFAULT_MODEL;
+  const [selectedValue, setSelectedValue] = useState<BooleanFilterValue>(() =>
+    modelToSelectedValue(safeModel),
+  );
+
+  useEffect(() => {
+    setSelectedValue((prev) => {
+      const fromModel = modelToSelectedValue(safeModel);
+      return prev !== fromModel ? fromModel : prev;
+    });
+  }, [safeModel.allowTrue, safeModel.allowFalse]);
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const newValue = event.target.value as BooleanFilterValue;
+    setSelectedValue(newValue);
+    onModelChange(selectedValueToModel(newValue));
+  };
+
+  const popupParentRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <PopupParentContext.Provider value={popupParentRef}>
+      <div className="ds-column-filter__container" ref={popupParentRef}>
+        <RadioButtonGroup
+          name={RADIO_NAME}
+          options={[
+            { id: `${RADIO_NAME}-${BOOLEAN_FILTER_VALUE.YES}`, value: BOOLEAN_FILTER_VALUE.YES, label: 'Yes' },
+            { id: `${RADIO_NAME}-${BOOLEAN_FILTER_VALUE.NO}`, value: BOOLEAN_FILTER_VALUE.NO, label: 'No' },
+            { id: `${RADIO_NAME}-${BOOLEAN_FILTER_VALUE.NOT_SET}`, value: BOOLEAN_FILTER_VALUE.NOT_SET, label: 'Not set' },
+          ]}
+          checkedValue={selectedValue}
+          onChange={handleChange}
+        />
+      </div>
+    </PopupParentContext.Provider>
+  );
+};

package/src/components/table/columnFilters/TimeFilter/TimeFilter.test.tsx

@@ -0,0 +1,131 @@
+import '@testing-library/jest-dom/vitest';
+import { beforeEach, describe, expect, test, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { TimeFilter, doesTimeFilterPass } from './TimeFilter';
+import { FILTER_TYPES, type FilterType } from './utils/compareTimeByFilterType';
+import userEvent from '@testing-library/user-event';
+
+const createTimeDate = (hours: number, minutes: number): Date => {
+  const d = new Date();
+  d.setHours(hours, minutes, 0, 0);
+  return d;
+};
+
+const createMockParams = (model: { filterType: FilterType; pivot: string } | null, cellValue: Date | string | null) => ({
+  model,
+  node: {},
+  handlerParams: {
+    getValue: vi.fn().mockReturnValue(cellValue),
+  },
+});
+
+describe('TimeFilter', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  const onModelChange = vi.fn();
+
+  test('renders TimeFilter', () => {
+    const { container } = render(
+      <TimeFilter model={{ filterType: FILTER_TYPES.AFTER as FilterType, pivot: '14:30' }} onModelChange={onModelChange} />,
+    );
+    expect(screen.getByRole('button', { name: /After/i })).toBeInTheDocument();
+    const timeInput = container.querySelector('input[type="time"]');
+    expect(timeInput).toHaveValue('14:30');
+    expect(screen.getByRole('button', { name: 'Clear this filter' })).toHaveTextContent('Reset time');
+  });
+
+  test('calls onModelChange when filter type changes', async () => {
+    render(
+      <TimeFilter model={{ filterType: FILTER_TYPES.AFTER as FilterType, pivot: '14:30' }} onModelChange={onModelChange} />,
+    );
+    const dropdownTrigger = screen.getByRole('button', { name: /After/i });
+    await userEvent.click(dropdownTrigger);
+    const beforeOption = await screen.findByText('Before');
+    await userEvent.click(beforeOption);
+    expect(onModelChange).toHaveBeenCalledWith({ filterType: FILTER_TYPES.BEFORE as FilterType, pivot: '14:30' });
+  });
+
+  test('calls onModelChange when pivot changes', () => {
+    const { container } = render(
+      <TimeFilter model={{ filterType: FILTER_TYPES.AFTER as FilterType, pivot: '14:30' }} onModelChange={onModelChange} />,
+    );
+    const timeInput = container.querySelector('input[type="time"]');
+    fireEvent.change(timeInput!, { target: { value: '09:15' } });
+    expect(onModelChange).toHaveBeenLastCalledWith({ filterType: FILTER_TYPES.AFTER as FilterType, pivot: '09:15' });
+  });
+
+  test('calls onModelChange when reset button is clicked and dropdown displays Before', async () => {
+    render(
+      <TimeFilter model={{ filterType: FILTER_TYPES.AFTER as FilterType, pivot: '14:30' }} onModelChange={onModelChange} />,
+    );
+    expect(screen.getByRole('button', { name: /After/i })).toBeInTheDocument();
+    const resetButton = screen.getByRole('button', { name: 'Clear this filter' });
+    await userEvent.click(resetButton);
+    expect(onModelChange).toHaveBeenLastCalledWith({ filterType: FILTER_TYPES.BEFORE as FilterType, pivot: '' });
+    expect(screen.getByRole('button', { name: /Before/i })).toBeInTheDocument();
+  });
+});
+
+describe('doesTimeFilterPass', () => {
+  const pivot = '14:30'; // 14:30 = 870 minutes since midnight
+
+  test('returns true when model is null (show all rows)', () => {
+    const params = createMockParams(null, createTimeDate(10, 0));
+    expect(doesTimeFilterPass(params as never)).toBe(true);
+  });
+
+  test('returns true when pivot is empty (show all rows)', () => {
+    const params = createMockParams({ filterType: FILTER_TYPES.AFTER as FilterType, pivot: '' }, createTimeDate(10, 0));
+    expect(doesTimeFilterPass(params as never)).toBe(true);
+  });
+
+  test('returns false when cell value is missing', () => {
+    const params = createMockParams({ filterType: FILTER_TYPES.AFTER as FilterType, pivot }, null);
+    expect(doesTimeFilterPass(params as never)).toBe(false);
+  });
+
+  test('BEFORE pivot: passes rows with time before pivot, fails rows with time after or equal', () => {
+    const model = { filterType: FILTER_TYPES.BEFORE as FilterType, pivot };
+
+    expect(doesTimeFilterPass(createMockParams(model, createTimeDate(9, 0)) as never)).toBe(true); // 09:00 < 14:30
+    expect(doesTimeFilterPass(createMockParams(model, createTimeDate(14, 0)) as never)).toBe(true); // 14:00 < 14:30
+    expect(doesTimeFilterPass(createMockParams(model, createTimeDate(14, 29)) as never)).toBe(true);
+
+    expect(doesTimeFilterPass(createMockParams(model, createTimeDate(14, 30)) as never)).toBe(false); // equal
+    expect(doesTimeFilterPass(createMockParams(model, createTimeDate(18, 0)) as never)).toBe(false); // 18:00 > 14:30
+  });
+
+  test('AFTER pivot: passes rows with time after pivot, fails rows with time before or equal', () => {
+    const model = { filterType: FILTER_TYPES.AFTER as FilterType, pivot };
+
+    expect(doesTimeFilterPass(createMockParams(model, createTimeDate(18, 0)) as never)).toBe(true); // 18:00 > 14:30
+    expect(doesTimeFilterPass(createMockParams(model, createTimeDate(14, 31)) as never)).toBe(true);
+
+    expect(doesTimeFilterPass(createMockParams(model, createTimeDate(14, 30)) as never)).toBe(false); // equal
+    expect(doesTimeFilterPass(createMockParams(model, createTimeDate(9, 0)) as never)).toBe(false); // 09:00 < 14:30
+  });
+
+  test('EQUAL (At) pivot: passes only rows with same time', () => {
+    const model = { filterType: FILTER_TYPES.EQUAL as FilterType, pivot };
+
+    expect(doesTimeFilterPass(createMockParams(model, createTimeDate(14, 30)) as never)).toBe(true);
+
+    expect(doesTimeFilterPass(createMockParams(model, createTimeDate(14, 29)) as never)).toBe(false);
+    expect(doesTimeFilterPass(createMockParams(model, createTimeDate(14, 31)) as never)).toBe(false);
+    expect(doesTimeFilterPass(createMockParams(model, createTimeDate(9, 0)) as never)).toBe(false);
+  });
+
+  test('accepts cell value as Date object', () => {
+    const model = { filterType: FILTER_TYPES.EQUAL as FilterType, pivot };
+    const params = createMockParams(model, createTimeDate(14, 30));
+    expect(doesTimeFilterPass(params as never)).toBe(true);
+  });
+
+  test('accepts cell value as time-only string (HH:mm)', () => {
+    const model = { filterType: FILTER_TYPES.EQUAL as FilterType, pivot };
+    expect(doesTimeFilterPass(createMockParams(model, '14:30') as never)).toBe(true);
+    expect(doesTimeFilterPass(createMockParams(model, '09:00') as never)).toBe(false);
+  });
+});