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

package/src/components/formField/fieldset/Fieldset.tsx

@@ -15,3 +15,7 @@ export const Fieldset = (props: FieldsetProps) => {
     </fieldset>
   );
 };
+
+export namespace Fieldset {
+  export type Props = FieldsetProps;
+}

package/src/components/formField/inputs/checkbox/CheckboxGroup.tsx

@@ -1,7 +1,7 @@
 import { Fieldset, type FieldsetProps } from 'Components/formField/fieldset/Fieldset';
 import { CheckboxInput, type CheckboxInputProps } from './CheckboxInput';
 
-type CheckboxGroupProps = {
+export type CheckboxGroupProps = {
   options: CheckboxInputProps[];
 } & FieldsetProps;
 
@@ -15,3 +15,7 @@ export const CheckboxGroup = (props: CheckboxGroupProps) => {
     </Fieldset>
   );
 };
+
+export namespace CheckboxGroup {
+  export type Props = CheckboxGroupProps;
+}

package/src/components/formField/inputs/checkbox/CheckboxInput.tsx

@@ -79,3 +79,7 @@ export const CheckboxInput = (props: CheckboxInputProps) => {
     </label>
   );
 };
+
+export namespace CheckboxInput {
+  export type Props = CheckboxInputProps;
+}

package/src/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.tsx

@@ -51,3 +51,7 @@ export const ColourPickerDropdown = ({ value = '#3cad51', onChange, hasError, di
     </>
   );
 };
+
+export namespace ColourPickerDropdown {
+  export type Props = ColourPickerDropdownProps;
+}

package/src/components/formField/inputs/number/NumberInput.tsx

@@ -131,3 +131,7 @@ export const NumberInput = (props: NumberInputProps) => {
 
   );
 };
+
+export namespace NumberInput {
+  export type Props = NumberInputProps;
+}

package/src/components/formField/inputs/radio/RadioButtonGroup.tsx

@@ -20,3 +20,7 @@ export const RadioButtonGroup = (props: RadioButtonGroupProps) => {
     </Fieldset>
   );
 };
+
+export namespace RadioButtonGroup {
+  export type Props = RadioButtonGroupProps;
+}

package/src/components/formField/inputs/radio/RadioButtonInput.tsx

@@ -44,3 +44,7 @@ export const RadioButtonInput = (props: RadioButtonInputProps) => {
     </label>
   );
 };
+
+export namespace RadioButtonInput {
+  export type Props = RadioButtonInputProps;
+}

package/src/components/formField/inputs/selectDropdown/SelectDropdown.tsx

@@ -142,3 +142,7 @@ export const SelectDropdown = (props: SelectDropdownInputProps) => {
     </>
   );
 };
+
+export namespace SelectDropdown {
+  export type Props = SelectDropdownInputProps;
+}

package/src/components/formField/inputs/text/TextInput.tsx

@@ -36,3 +36,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>((props, re
 });
 
 TextInput.displayName = 'TextInput';
+
+export namespace TextInput {
+  export type Props = TextInputProps;
+}

package/src/components/formField/inputs/textArea/TextArea.tsx

@@ -54,3 +54,7 @@ export const TextArea = (props: TextAreaProps) => {
     />
   );
 };
+
+export namespace TextArea {
+  export type Props = TextAreaProps;
+}

package/src/components/formField/inputs/time/TimeInput.tsx

@@ -166,3 +166,9 @@ export const TimeInput = forwardRef<HTMLInputElement, TimeInputProps>((props, re
 });
 
 TimeInput.displayName = 'TimeInput';
+
+export namespace TimeInput {
+  export type Props = TimeInputProps;
+  export type Value = TimeValue;
+  export type Granularity = TimeGranularity;
+}

package/src/components/heading/Heading.tsx

@@ -36,3 +36,9 @@ export const Heading = (props: HeadingProps) => {
 };
 
 Heading.InnerContainer = HeadingInnerContainer;
+
+export namespace Heading {
+  export type Props = HeadingProps;
+  export type Level = HeadingLevel;
+  export type InnerContainerProps = HeadingSubContainerProps;
+}

package/src/components/icon/Icon.tsx

@@ -1,4 +1,4 @@
-import type { IconSize } from './types';
+import type { CustomIconProps, IconSize } from './types';
 import { allowedIcons, type IconName } from './allowedIcons';
 import classNames from 'classnames';
 
@@ -24,3 +24,10 @@ export const Icon = (props: IconProps) => {
     </>
   );
 };
+
+export namespace Icon {
+  export type Props = IconProps;
+  export type Name = IconName;
+  export type Size = IconSize;
+  export type CustomProps = CustomIconProps;
+}

package/src/components/modal/Modal.tsx

@@ -1,12 +1,13 @@
 import classNames from 'classnames';
 import { Dialog } from 'radix-ui';
-import { ModalHeader } from './ModalHeader';
-import { ModalFooter } from './ModalFooter';
-import { ModalBody } from './ModalBody';
+import { ModalHeader, type ModalHeaderProps } from './ModalHeader';
+import { ModalFooter, type ModalFooterProps } from './ModalFooter';
+import { ModalBody, type ModalBodyProps } from './ModalBody';
 import { PopupParentContext } from 'Utils/PopupParentContext';
 import { createContext, useRef } from 'react';
 import { ModalCloseButon } from './ModalCloseButton';
 import { ModalTitle } from './ModalTitle';
+import type { ButtonProps } from 'Components/button/Button';
 
 type ModalContextValue = {
   closeHandler?: () => void;
@@ -63,3 +64,12 @@ Modal.Body = ModalBody;
 Modal.Footer = ModalFooter;
 Modal.CloseButton = ModalCloseButon;
 Modal.Title = ModalTitle;
+
+export namespace Modal {
+  export type Props = ModalProps;
+  export type HeaderProps = ModalHeaderProps;
+  export type BodyProps = ModalBodyProps;
+  export type FooterProps = ModalFooterProps;
+  export type CloseButtonProps = ButtonProps;
+  export type TitleProps = Dialog.DialogTitleProps;
+}

package/src/components/progress/Progress.tsx

@@ -14,3 +14,7 @@ export const Progress = (props: ProgressProps) => {
     </RadixProgress.Root>
   );
 };
+
+export namespace Progress {
+  export type Props = ProgressProps;
+}

package/src/components/row/Row.tsx

@@ -52,3 +52,7 @@ export const Row = (props: RowProps) => {
     </div>
   );
 };
+
+export namespace Row {
+  export type Props = RowProps;
+}

package/src/components/singleUser/SingleUser.tsx

@@ -43,3 +43,7 @@ export const SingleUser = React.forwardRef<HTMLSpanElement, SingleUserProps>(
 );
 
 SingleUser.displayName = 'SingleUser';
+
+export namespace SingleUser {
+  export type Props = SingleUserProps;
+}

package/src/components/slideover/Slideover.tsx

@@ -60,3 +60,7 @@ export const Slideover = (props: SlideoverProps) => {
     </aside>
   );
 };
+
+export namespace Slideover {
+  export type Props = SlideoverProps;
+}

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,6 +1,6 @@
 import { describe, expect, expectTypeOf, test, vi } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
-import { Table, TABLE_SPACING } from './Table';
+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';
 import { HideColumnsDropdown } from 'Components/table/tableControls/HideColumnsDropdown';
@@ -753,7 +753,7 @@ describe('Table', () => {
                 actions={[
                   {
                     displayName: 'Test Action',
-                    callback: () => {},
+                    callback: () => { },
                   },
                 ]}
               />
@@ -817,7 +817,7 @@ describe('Table', () => {
         expect((largeRadio as HTMLInputElement).checked).toBe(true);
       });
       expect(onTableSettingsChanged).toHaveBeenCalledExactlyOnceWith(expect.objectContaining({
-        tableSpacing: TABLE_SPACING.L,
+        tableSpacing: Table.Spacing.L,
       }));
 
       const columnBordersCheckbox = screen.getByLabelText('Column borders');
@@ -896,7 +896,7 @@ describe('Table', () => {
       await userEvent.click(largeRadio);
 
       await waitFor(() => {
-        expect(onTableSpacingChanged).toHaveBeenCalledExactlyOnceWith(TABLE_SPACING.L);
+        expect(onTableSpacingChanged).toHaveBeenCalledExactlyOnceWith(Table.Spacing.L);
       });
 
       const xsmallRadio = screen.getByLabelText('X-Small');
@@ -904,7 +904,7 @@ describe('Table', () => {
 
       await waitFor(() => {
         expect(onTableSpacingChanged).toHaveBeenCalledTimes(2);
-        expect(onTableSpacingChanged).toHaveBeenNthCalledWith(2, TABLE_SPACING.XS);
+        expect(onTableSpacingChanged).toHaveBeenNthCalledWith(2, Table.Spacing.XS);
       });
     });
 
@@ -924,14 +924,14 @@ describe('Table', () => {
       await userEvent.click(largeRadio);
 
       await waitFor(() => {
-        expect(onTableSpacingChanged).toHaveBeenCalledWith(TABLE_SPACING.L);
+        expect(onTableSpacingChanged).toHaveBeenCalledWith(Table.Spacing.L);
       });
 
       const resetButton = screen.getByRole('button', { name: /Reset Table Settings/i });
       await userEvent.click(resetButton);
 
       await waitFor(() => {
-        expect(onTableSpacingChanged).toHaveBeenCalledWith(TABLE_SPACING.M);
+        expect(onTableSpacingChanged).toHaveBeenCalledWith(Table.Spacing.M);
       });
     });
 
@@ -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,12 +23,15 @@ 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 } from './tableControls/TableControls';
+import { TableControls, type TableControlsProps, type BulkAction as BulkActionType } from './tableControls/TableControls';
+import type { HideColumnsDropdownProps } from './tableControls/HideColumnsDropdown';
 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> = {
@@ -48,7 +51,6 @@ setAgGridLicenseKey();
 
 ModuleRegistry.registerModules([AllEnterpriseModule]);
 
-export { TABLE_SPACING } from './tableConsts';
 export { TableSettingsContext } from './TableSettingsContext';
 
 export const Table = (props: TableProps) => {
@@ -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,23 @@ 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;
+
+Table.Spacing = TABLE_SPACING;
+
+export namespace Table {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  export type Props<TData = any> = TableProps<TData>;
+  export type ControlsProps = TableControlsProps;
+  export type BulkAction = BulkActionType;
+  export type HideColumnsProps = HideColumnsDropdownProps;
+  export type Spacing = TABLE_SPACING;
+}

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/components/tag/Tag.tsx

@@ -56,3 +56,8 @@ export const Tag = ({
     </span>
   );
 };
+
+export namespace Tag {
+  export type Color = TagColor;
+  export type Props = TagProps;
+}