@arbor-education/design-system.components 0.12.0 → 0.13.0

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

@@ -1,5 +1,5 @@
 import { describe, expect, expectTypeOf, test, vi } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
 import { Table } from './Table';
 import '@testing-library/jest-dom/vitest';
 import { BulkActionsDropdown } from 'Components/table/tableControls/BulkActionsDropdown';
@@ -753,7 +753,7 @@ describe('Table', () => {
                 actions={[
                   {
                     displayName: 'Test Action',
-                    callback: () => {},
+                    callback: () => { },
                   },
                 ]}
               />
@@ -1049,7 +1049,7 @@ describe('Table', () => {
       ];
 
       const rowData = [
-        { },
+        {},
       ];
       await expect(async () => {
         render(
@@ -1487,6 +1487,85 @@ describe('Table', () => {
     });
   });
 
+  describe('DateCellEditor', () => {
+    const columnDefs = [{
+      field: 'dateOfBirth',
+      headerName: 'Date of Birth',
+      editable: true,
+      cellEditor: 'dsDateCellEditor',
+    }];
+
+    test('opens the date picker editor via grid API', async () => {
+      let gridApi: GridApi;
+      const rowData = [{ dateOfBirth: new Date(2024, 5, 15) }];
+      render(
+        <Table
+          columnDefs={columnDefs}
+          rowData={rowData}
+          onGridReady={(event) => { gridApi = event.api; }}
+        />,
+      );
+      await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+
+      gridApi!.startEditingCell({ rowIndex: 0, colKey: 'dateOfBirth' });
+
+      await waitFor(() => expect(screen.getByRole('button', { name: 'Open date picker' })).toBeInTheDocument());
+    });
+
+    test('autofocuses the date input so a user can type a date without clicking', async () => {
+      let gridApi: GridApi;
+      const onCellValueChanged = vi.fn();
+      const rowData = [{ dateOfBirth: new Date(2024, 5, 15) }];
+      const { container } = render(
+        <Table
+          columnDefs={columnDefs}
+          rowData={rowData}
+          onGridReady={(event) => { gridApi = event.api; }}
+          onCellValueChanged={onCellValueChanged}
+        />,
+      );
+      await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+
+      gridApi!.setFocusedCell(0, 'dateOfBirth');
+      await userEvent.keyboard('{Enter}');
+
+      await waitFor(() => expect(container.querySelector('input[type="date"]')).toBeInTheDocument());
+      const input = container.querySelector('input[type="date"]') as HTMLInputElement;
+      expect(input).toHaveFocus();
+
+      fireEvent.change(input, { target: { value: '2024-07-20' } });
+      await userEvent.keyboard('{Enter}');
+
+      await waitFor(() => {
+        expect(onCellValueChanged).toHaveBeenCalled();
+      });
+      const lastDate: Date = onCellValueChanged.mock.lastCall![0].newValue;
+      expect(lastDate.getFullYear()).toBe(2024);
+      expect(lastDate.getMonth()).toBe(6);
+      expect(lastDate.getDate()).toBe(20);
+    });
+
+    test('opens the editor with the current value and closes it cleanly', async () => {
+      let gridApi: GridApi;
+      const rowData = [{ dateOfBirth: new Date(2024, 5, 15) }];
+      const { container } = render(
+        <Table
+          columnDefs={columnDefs}
+          rowData={rowData}
+          onGridReady={(event) => { gridApi = event.api; }}
+        />,
+      );
+      await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+
+      gridApi!.startEditingCell({ rowIndex: 0, colKey: 'dateOfBirth' });
+      await waitFor(() => expect(container.querySelector('input[type="date"]')).toBeInTheDocument());
+      expect(container.querySelector('input[type="date"]')).toHaveValue('2024-06-15');
+
+      gridApi!.stopEditing();
+      await waitFor(() => expect(container.querySelector('input[type="date"]')).not.toBeInTheDocument());
+    });
+  });
+
   describe('CheckboxCellRenderer', () => {
     test('renders checkboxes in table cells', async () => {
       const columnDefs = [

package/src/components/table/Table.tsx

@@ -23,6 +23,7 @@ import { tidyTheme } from './theme/tidyTheme';
 import { focusFirstFocusableElement } from 'Utils/focusFirstFocusableElement';
 import { BooleanFilter } from './columnFilters/BooleanFilter/BooleanFilter';
 import { TimeFilter } from './columnFilters/TimeFilter/TimeFilter';
+import { DateCellEditor } from './cellEditors/DateCellEditor';
 import { TableSettingsDropdown } from './tableControls/TableSettingsDropdown';
 import { TableControls, type TableControlsProps, type BulkAction as BulkActionType } from './tableControls/TableControls';
 import type { HideColumnsDropdownProps } from './tableControls/HideColumnsDropdown';
@@ -30,6 +31,7 @@ import { TABLE_SPACING } from './tableConsts';
 import { TableSettingsContext } from './TableSettingsContext';
 import { BooleanCellRenderer } from './cellRenderers/BooleanCellRenderer';
 import { CheckboxCellRenderer } from './cellRenderers/CheckboxCellRenderer';
+import { DefaultCellRenderer } from './cellRenderers/DefaultCellRenderer';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type TableProps<TData = any> = {
@@ -183,6 +185,7 @@ export const Table = (props: TableProps) => {
               dsSelectDropdownCellRenderer: SelectDropdownCellRenderer,
               dsBooleanFilter: BooleanFilter,
               dsTimeFilter: TimeFilter,
+              dsDateCellEditor: DateCellEditor,
               dsCheckboxCellRenderer: CheckboxCellRenderer,
               dsBooleanCellRenderer: BooleanCellRenderer,
               ...components,
@@ -208,6 +211,12 @@ Table.RowCountInfo = RowCountInfo;
 Table.BulkActionsDropdown = BulkActionsDropdown;
 Table.HideColumnsDropdown = HideColumnsDropdown;
 Table.ButtonCellRenderer = ButtonCellRenderer;
+Table.BooleanCellRenderer = BooleanCellRenderer;
+Table.DefaultCellRenderer = DefaultCellRenderer;
+Table.DateCellEditor = DateCellEditor;
+Table.DefaultColDef = DSDefaultColDef;
+Table.GridApiContext = GridApiContext;
+Table.CheckboxCellRenderer = CheckboxCellRenderer;
 Table.DefaultValueFormatter = defaultValueFormatter;
 Table.TableSettingsDropdown = TableSettingsDropdown;
 Table.TableControls = TableControls;

package/src/components/table/cellEditors/DateCellEditor.test.tsx

@@ -0,0 +1,109 @@
+import { describe, expect, test, vi } from 'vitest';
+import { render, screen, within, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/vitest';
+import { DateCellEditor } from './DateCellEditor';
+import type { CustomCellEditorProps } from 'ag-grid-react';
+
+const createMockProps = (overrides: Partial<CustomCellEditorProps> = {}): CustomCellEditorProps => ({
+  value: undefined,
+  initialValue: undefined,
+  onValueChange: vi.fn(),
+  colDef: { cellEditorParams: {} },
+  ...overrides,
+} as CustomCellEditorProps);
+
+const getDateField = (container: HTMLElement) => (
+  container.querySelector('input[type="date"]') as HTMLInputElement
+);
+
+describe('DateCellEditor', () => {
+  test('renders a date picker', () => {
+    const { container } = render(<DateCellEditor {...createMockProps()} />);
+    expect(getDateField(container)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Open date picker' })).toBeInTheDocument();
+  });
+
+  test('displays the provided value', () => {
+    const { container } = render(<DateCellEditor {...createMockProps({ value: new Date(2024, 5, 15) })} />);
+    expect(getDateField(container)).toHaveValue('2024-06-15');
+  });
+
+  test('displays empty when value is undefined', () => {
+    const { container } = render(<DateCellEditor {...createMockProps({ value: undefined })} />);
+    expect(getDateField(container)).toHaveValue('');
+  });
+
+  test('displays empty when value is null', () => {
+    const { container } = render(<DateCellEditor {...createMockProps({ value: null })} />);
+    expect(getDateField(container)).toHaveValue('');
+  });
+
+  test('calls onValueChange when a date is typed', () => {
+    const onValueChange = vi.fn();
+    const { container } = render(<DateCellEditor {...createMockProps({ onValueChange })} />);
+    onValueChange.mockClear();
+
+    fireEvent.change(getDateField(container), { target: { value: '2024-06-15' } });
+
+    expect(onValueChange).toHaveBeenCalledWith(expect.any(Date));
+    const lastDate: Date = onValueChange.mock.lastCall![0];
+    expect(lastDate.getFullYear()).toBe(2024);
+    expect(lastDate.getMonth()).toBe(5);
+    expect(lastDate.getDate()).toBe(15);
+  });
+
+  test('calls onValueChange when a date is picked from the calendar', async () => {
+    const onValueChange = vi.fn();
+    const { container } = render(<DateCellEditor {...createMockProps({ onValueChange })} />);
+
+    // Navigate to a known month via text input first
+    fireEvent.change(getDateField(container), { target: { value: '2024-06-01' } });
+    onValueChange.mockClear();
+
+    await userEvent.click(screen.getByRole('button', { name: 'Open date picker' }));
+    await userEvent.click(within(screen.getByRole('application')).getByRole('button', { name: /June 20/ }));
+
+    expect(onValueChange).toHaveBeenCalledWith(expect.any(Date));
+    const lastDate: Date = onValueChange.mock.lastCall![0];
+    expect(lastDate.getFullYear()).toBe(2024);
+    expect(lastDate.getMonth()).toBe(5);
+    expect(lastDate.getDate()).toBe(20);
+  });
+
+  test('calls onValueChange with undefined when the date is cleared', () => {
+    const onValueChange = vi.fn();
+    const { container } = render(
+      <DateCellEditor {...createMockProps({ value: new Date(2024, 5, 15), onValueChange })} />,
+    );
+    onValueChange.mockClear();
+
+    fireEvent.change(getDateField(container), { target: { value: '' } });
+
+    expect(onValueChange).toHaveBeenCalledWith(undefined);
+  });
+
+  test('autofocuses the date input on mount', () => {
+    const { container } = render(<DateCellEditor {...createMockProps()} />);
+    expect(getDateField(container)).toHaveFocus();
+  });
+
+  test('autofocuses the date input even when a value is already set', () => {
+    const { container } = render(
+      <DateCellEditor {...createMockProps({ value: new Date(2024, 5, 15) })} />,
+    );
+    expect(getDateField(container)).toHaveFocus();
+  });
+
+  test('passes cellEditorParams through to DatePicker', () => {
+    render(
+      <DateCellEditor
+        {...createMockProps({
+          value: undefined,
+          colDef: { cellEditorParams: { placeholder: 'Pick a birthday' } },
+        })}
+      />,
+    );
+    expect(screen.getByText('Pick a birthday')).toBeInTheDocument();
+  });
+});

package/src/components/table/cellEditors/DateCellEditor.tsx

@@ -0,0 +1,27 @@
+import type { CustomCellEditorProps } from 'ag-grid-react';
+import { DatePicker } from 'Components/datePicker/DatePicker';
+
+export const DateCellEditor = (props: CustomCellEditorProps) => {
+  const {
+    value,
+    onValueChange,
+    colDef: {
+      cellEditorParams,
+    },
+  } = props;
+
+  return (
+    <DatePicker
+      value={value}
+      onChange={(newValue) => {
+        // intentionally not updating always, because AG Grid controls the component and
+        // ends up interfering with things, leading to lots of jank
+        if (newValue !== value) {
+          onValueChange(newValue);
+        }
+      }}
+      autoFocus
+      {...cellEditorParams}
+    />
+  );
+};

package/src/index.ts

@@ -35,10 +35,6 @@ export { Separator } from 'Components/separator/Separator';
 export { SingleUser } from 'Components/singleUser/SingleUser';
 export { Slideover } from 'Components/slideover/Slideover';
 export { SlideoverManager } from 'Components/slideoverManager/SlideoverManager';
-export { BooleanCellRenderer } from 'Components/table/cellRenderers/BooleanCellRenderer';
-export { DefaultCellRenderer } from 'Components/table/cellRenderers/DefaultCellRenderer';
-export { DSDefaultColDef } from 'Components/table/DSDefaultColDef';
-export { GridApiContext } from 'Components/table/GridApiContext';
 export { Table } from 'Components/table/Table';
 export { Tabs } from 'Components/tabs/Tabs';
 export { Tag } from 'Components/tag/Tag';
@@ -51,4 +47,3 @@ export { UserDropdown } from 'Components/userDropdown/UserDropdown';
 export { ModalUtils } from 'Utils/ModalUtils';
 export { PopupParentContext } from 'Utils/PopupParentContext';
 export { SlideoverUtils } from 'Utils/SlideoverUtils';
-export { CheckboxCellRenderer } from 'Components/table/cellRenderers/CheckboxCellRenderer';