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

package/src/components/separator/separator.scss

@@ -1,6 +1,15 @@
 .ds-separator {
-  width: 100%;
-  height: 1px;
   background-color: var(--page-base-color-border);
-  margin: var(--spacing-small) 0;
+
+  &[data-orientation='horizontal'] {
+    width: 100%;
+    height: 1px;
+    margin: var(--spacing-small) 0;
+  }
+
+  &[data-orientation='vertical'] {
+    width: 1px;
+    height: 100%;
+    margin: 0 var(--spacing-small);
+  }
 }

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

@@ -1432,6 +1432,108 @@ export const TableWithSemanticColors: Story = {
   },
 };
 
+interface DateEditorRowData {
+  id: number;
+  name: { value: string };
+  dateOfBirth: Date;
+  enrollmentDate: Date;
+  graduationDate: Date | null;
+}
+
+const dateEditorSampleData: DateEditorRowData[] = [
+  {
+    id: 1,
+    name: { value: 'Alice Johnson' },
+    dateOfBirth: new Date(2008, 4, 15),
+    enrollmentDate: new Date(2022, 8, 1),
+    graduationDate: new Date(2026, 6, 20),
+  },
+  {
+    id: 2,
+    name: { value: 'Bob Smith' },
+    dateOfBirth: new Date(2009, 1, 28),
+    enrollmentDate: new Date(2023, 8, 1),
+    graduationDate: null,
+  },
+  {
+    id: 3,
+    name: { value: 'Charlie Brown' },
+    dateOfBirth: new Date(2007, 10, 3),
+    enrollmentDate: new Date(2021, 8, 1),
+    graduationDate: new Date(2025, 6, 18),
+  },
+  {
+    id: 4,
+    name: { value: 'Diana Prince' },
+    dateOfBirth: new Date(2008, 7, 22),
+    enrollmentDate: new Date(2022, 8, 1),
+    graduationDate: new Date(2026, 6, 20),
+  },
+  {
+    id: 5,
+    name: { value: 'Ethan Hunt' },
+    dateOfBirth: new Date(2009, 11, 10),
+    enrollmentDate: new Date(2023, 8, 1),
+    graduationDate: null,
+  },
+];
+
+const dateEditorColDefs: (ColDef | ColGroupDef)[] = [
+  {
+    field: 'name',
+    headerName: 'Student Name',
+    editable: false,
+    valueFormatter: Table.DefaultValueFormatter,
+  },
+  {
+    field: 'dateOfBirth',
+    headerName: 'Date of Birth',
+    cellEditor: 'dsDateCellEditor',
+    valueFormatter: params =>
+      params.value instanceof Date
+        ? params.value.toLocaleDateString('en-GB')
+        : params.value ?? '',
+  },
+  {
+    field: 'enrollmentDate',
+    headerName: 'Enrollment Date',
+    cellEditor: 'dsDateCellEditor',
+    valueFormatter: params =>
+      params.value instanceof Date
+        ? params.value.toLocaleDateString('en-GB')
+        : params.value ?? '',
+  },
+  {
+    field: 'graduationDate',
+    headerName: 'Graduation Date',
+    cellEditor: 'dsDateCellEditor',
+    valueFormatter: params =>
+      params.value instanceof Date
+        ? params.value.toLocaleDateString('en-GB')
+        : params.value ?? '',
+  },
+];
+
+export const WithDateCellEditor: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Date columns can use the `dsDateCellEditor` cell editor to provide an inline date picker. Double-click or press Enter on a date cell to open the editor.',
+      },
+    },
+  },
+  args: {
+    rowData: dateEditorSampleData,
+    columnDefs: dateEditorColDefs,
+    defaultColDef: {
+      ...defaultColDef,
+      editable: true,
+    },
+    domLayout: 'autoHeight',
+  },
+};
+
 interface BooleanRowData {
   id: number;
   name: string;

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}
+    />
+  );
+};