@arbor-education/design-system.components 0.10.0 → 0.11.0

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

@@ -1487,14 +1487,140 @@ describe('Table', () => {
     });
   });
 
-  describe('supressCellFocusAndFocusFirstElement', () => {
+  describe('CheckboxCellRenderer', () => {
+    test('renders checkboxes in table cells', async () => {
+      const columnDefs = [
+        { field: 'name', headerName: 'Name' },
+        {
+          field: 'attended',
+          headerName: 'Attended',
+          cellRenderer: 'dsCheckboxCellRenderer',
+          editable: false,
+        },
+      ];
+      const rowData = [
+        { name: 'Alice', attended: true },
+        { name: 'Bob', attended: false },
+      ];
+
+      render(<Table columnDefs={columnDefs} rowData={rowData} />);
+      await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+      await waitFor(() => {
+        const checkboxes = screen.getAllByRole('checkbox');
+        expect(checkboxes.length).toBe(2);
+      });
+    });
+
+    test('checked state reflects row data value', async () => {
+      const columnDefs = [{
+        field: 'active',
+        headerName: 'Active',
+        cellRenderer: 'dsCheckboxCellRenderer',
+        editable: false,
+      }];
+      const rowData = [
+        { active: true },
+        { active: false },
+      ];
+
+      render(<Table columnDefs={columnDefs} rowData={rowData} />);
+      await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+      await waitFor(() => {
+        const checkboxes = screen.getAllByRole('checkbox');
+        expect(checkboxes[0]).toBeChecked();
+        expect(checkboxes[1]).not.toBeChecked();
+      });
+    });
+
+    test('clicking checkbox triggers onCellValueChanged', async () => {
+      const onCellValueChanged = vi.fn();
+      const columnDefs = [{
+        field: 'active',
+        headerName: 'Active',
+        cellRenderer: 'dsCheckboxCellRenderer',
+        editable: false,
+      }];
+      const rowData = [{ active: false }];
+
+      render(
+        <Table
+          columnDefs={columnDefs}
+          rowData={rowData}
+          onCellValueChanged={onCellValueChanged}
+        />,
+      );
+      await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+      await waitFor(() => expect(screen.getByRole('checkbox')).toBeInTheDocument());
+
+      await userEvent.click(screen.getByRole('checkbox'));
+
+      await waitFor(() => {
+        expect(onCellValueChanged).toHaveBeenCalledWith(expect.objectContaining({ oldValue: false, newValue: true }));
+      });
+    });
+
+    test('works with multiple checkbox columns', async () => {
+      const columnDefs = [
+        { field: 'name', headerName: 'Name' },
+        {
+          field: 'attended',
+          headerName: 'Attended',
+          cellRenderer: 'dsCheckboxCellRenderer',
+          editable: false,
+        },
+        {
+          field: 'consented',
+          headerName: 'Consented',
+          cellRenderer: 'dsCheckboxCellRenderer',
+          editable: false,
+        },
+      ];
+      const rowData = [
+        { name: 'Alice', attended: true, consented: false },
+      ];
+
+      render(<Table columnDefs={columnDefs} rowData={rowData} />);
+      await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+      await waitFor(() => {
+        const checkboxes = screen.getAllByRole('checkbox');
+        expect(checkboxes[0]).toBeChecked();
+        expect(checkboxes[1]).not.toBeChecked();
+      });
+    });
+
+    test('disabled flag via cellRendererParams', async () => {
+      const onCellValueChanged = vi.fn();
+      const columnDefs = [{
+        field: 'active',
+        headerName: 'Active',
+        cellRenderer: 'dsCheckboxCellRenderer',
+        editable: false,
+        cellRendererParams: { disabled: true },
+      }];
+      const rowData = [{ active: false }];
+
+      render(
+        <Table
+          columnDefs={columnDefs}
+          rowData={rowData}
+          onCellValueChanged={onCellValueChanged}
+        />,
+      );
+      await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+      await waitFor(() => expect(screen.getByRole('checkbox')).toBeInTheDocument());
+
+      expect(screen.getByRole('checkbox')).toBeDisabled();
+    });
+  });
+
+  describe('suppressCellFocusAndFocusFirstElement', () => {
     const handleClick = vi.fn();
     const columnDefs = [{
       field: 'action',
       headerName: 'Action',
       cellRenderer: 'dsButtonCellRenderer',
       cellRendererParams: {
-        supressCellFocusAndFocusFirstElement: true,
+        suppressCellFocusAndFocusFirstElement: true,
       },
     }];
     const rowData = [{
@@ -1504,14 +1630,14 @@ describe('Table', () => {
       },
     }];
 
-    test('setting supressCellFocusAndFocusFirstElement to true should add the ds-table__cell--supress-focus class', async () => {
+    test('setting suppressCellFocusAndFocusFirstElement to true should add the ds-table__cell--suppress-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');
+      const cellWithClass = container.querySelector('.ds-table__cell--suppress-focus');
       expect(cellWithClass).toBeInTheDocument();
     });
 
-    test('setting supressCellFocusAndFocusFirstElement to true should suppress cell focus and focus the first element', async () => {
+    test('setting suppressCellFocusAndFocusFirstElement to true should suppress cell focus and focus the first element', async () => {
       const focusFirstFocusableElementSpy = vi.spyOn(
         focusFirstFocusableElementModule,
         'focusFirstFocusableElement',

package/src/components/table/Table.tsx

@@ -24,6 +24,7 @@ import { focusFirstFocusableElement } from 'Utils/focusFirstFocusableElement';
 import { BooleanFilter } from './columnFilters/BooleanFilter/BooleanFilter';
 import { TimeFilter } from './columnFilters/TimeFilter/TimeFilter';
 import { TableSettingsDropdown } from './TableSettingsDropdown';
+import { CheckboxCellRenderer } from './cellRenderers/CheckboxCellRenderer';
 import { BooleanCellRenderer } from './cellRenderers/BooleanCellRenderer';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -195,6 +196,7 @@ export const Table = (props: TableProps) => {
               dsSelectDropdownCellRenderer: SelectDropdownCellRenderer,
               dsBooleanFilter: BooleanFilter,
               dsTimeFilter: TimeFilter,
+              dsCheckboxCellRenderer: CheckboxCellRenderer,
               dsBooleanCellRenderer: BooleanCellRenderer,
               ...components,
             }}

package/src/components/table/cellRenderers/CheckboxCellRenderer.test.tsx

@@ -0,0 +1,74 @@
+import { describe, expect, test, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import userEvent from '@testing-library/user-event';
+import { CheckboxCellRenderer } from './CheckboxCellRenderer';
+import type { CustomCellRendererProps } from 'ag-grid-react';
+
+const createMockProps = (overrides: Partial<CustomCellRendererProps> = {}): CustomCellRendererProps => ({
+  value: false,
+  node: {
+    setDataValue: vi.fn(),
+  },
+  column: 'testField',
+  ...overrides,
+} as unknown as CustomCellRendererProps);
+
+describe('CheckboxCellRenderer', () => {
+  test('renders a checkbox', () => {
+    const props = createMockProps();
+    render(<CheckboxCellRenderer {...props} />);
+    expect(screen.getByRole('checkbox')).toBeInTheDocument();
+  });
+
+  test('renders unchecked when value is false', () => {
+    const props = createMockProps({ value: false });
+    render(<CheckboxCellRenderer {...props} />);
+    expect(screen.getByRole('checkbox')).not.toBeChecked();
+  });
+
+  test('renders checked when value is true', () => {
+    const props = createMockProps({ value: true });
+    render(<CheckboxCellRenderer {...props} />);
+    expect(screen.getByRole('checkbox')).toBeChecked();
+  });
+
+  test('calls node.setDataValue with toggled value on change', async () => {
+    const setDataValue = vi.fn();
+    const props = createMockProps({
+      value: false,
+      node: { setDataValue } as unknown as CustomCellRendererProps['node'],
+      column: 'attended' as unknown as CustomCellRendererProps['column'],
+    });
+
+    render(<CheckboxCellRenderer {...props} />);
+    await userEvent.click(screen.getByRole('checkbox'));
+    expect(setDataValue).toHaveBeenCalledWith('attended', true);
+  });
+
+  test('toggles from true to false on change', async () => {
+    const setDataValue = vi.fn();
+    const props = createMockProps({
+      value: true,
+      node: { setDataValue } as unknown as CustomCellRendererProps['node'],
+      column: 'attended' as unknown as CustomCellRendererProps['column'],
+    });
+
+    render(<CheckboxCellRenderer {...props} />);
+    await userEvent.click(screen.getByRole('checkbox'));
+    expect(setDataValue).toHaveBeenCalledWith('attended', false);
+  });
+
+  test('does not call setDataValue when column is undefined', async () => {
+    const setDataValue = vi.fn();
+    const props = createMockProps({
+      value: false,
+      node: { setDataValue } as unknown as CustomCellRendererProps['node'],
+      column: undefined as unknown as CustomCellRendererProps['column'],
+    });
+
+    render(<CheckboxCellRenderer {...props} />);
+    await userEvent.click(screen.getByRole('checkbox'));
+    expect(setDataValue).not.toHaveBeenCalled();
+  });
+});

package/src/components/table/cellRenderers/CheckboxCellRenderer.tsx

@@ -0,0 +1,28 @@
+import type { CustomCellRendererProps } from 'ag-grid-react';
+import { CheckboxInput } from 'Components/formField/inputs/checkbox/CheckboxInput';
+
+export const CheckboxCellRenderer = (props: CustomCellRendererProps) => {
+  const {
+    value,
+    node,
+    column,
+    colDef = {},
+  } = props;
+
+  const { cellRendererParams, headerName } = colDef;
+
+  return (
+    <div className="ds-checkbox-cell-renderer">
+      <CheckboxInput
+        checked={value}
+        aria-label={headerName && `Checkbox: ${headerName}`}
+        onChange={() => {
+          if (column) {
+            node.setDataValue(column, !value);
+          }
+        }}
+        {...cellRendererParams}
+      />
+    </div>
+  );
+};

package/src/components/table/table.scss

@@ -58,6 +58,6 @@
   }
 }
 
-.ag-cell-focus.ds-table__cell--supress-focus:focus-within {
+.ag-cell-focus.ds-table__cell--suppress-focus:focus-within {
   border-color: transparent;
 }

package/src/index.ts

@@ -66,3 +66,4 @@ export type {
 } from 'Components/combobox/types';
 export { Toggle } from 'Components/toggle/Toggle';
 export { SlideoverUtils } from 'Utils/SlideoverUtils';
+export { CheckboxCellRenderer } from 'Components/table/cellRenderers/CheckboxCellRenderer';