@arbor-education/design-system.components 0.14.0 → 0.15.0

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

@@ -36,6 +36,20 @@ describe('Table', () => {
     expect(screen.getByTestId('test-table')).toHaveClass('ds-table__container');
   });
 
+  describe('verticalHeaderText', () => {
+    test('applies vertical header text class when enabled', () => {
+      const { container } = render(<Table verticalHeaderText />);
+
+      expect(container.querySelector('.ds-table')).toHaveClass('ds-table--vertical-header-text');
+    });
+
+    test('does not apply vertical header text class by default', () => {
+      const { container } = render(<Table />);
+
+      expect(container.querySelector('.ds-table')).not.toHaveClass('ds-table--vertical-header-text');
+    });
+  });
+
   describe('TableHeader', () => {
     test('renders header when headerContent is provided', () => {
       render(<Table headerContent={<div>Header content</div>} />);
@@ -1406,6 +1420,247 @@ describe('Table', () => {
 
         expect(onCellValueChanged).toHaveBeenLastCalledWith(expect.objectContaining({ oldValue: 30, newValue: 35 }));
       });
+
+      test('supports editing number fields with the number cell editor spinners', async () => {
+        const onCellValueChanged = vi.fn();
+        const columnDefs = [{
+          field: 'age',
+          headerName: 'Age',
+          editable: true,
+          cellDataType: 'number',
+          cellEditor: 'dsNumberCellEditor',
+          cellEditorParams: {
+            min: 0,
+            max: 100,
+            step: 5,
+            disableSpinners: false,
+          },
+        }];
+        const rowData = [
+          { id: 1, name: 'John Doe', age: 30 },
+          { id: 2, name: 'Jane Smith', age: 25 },
+        ];
+
+        render(
+          <Table
+            columnDefs={columnDefs}
+            rowData={rowData}
+            onCellValueChanged={onCellValueChanged}
+          />,
+        );
+
+        await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+        await waitFor(() => expect(screen.getByText('30')).toBeInTheDocument());
+
+        const cell = screen.getByText('30');
+        await userEvent.dblClick(cell);
+
+        const editorInput = await screen.findByRole('textbox');
+        expect(editorInput).toHaveFocus();
+
+        await userEvent.click(screen.getByLabelText('Plus button'));
+        await userEvent.keyboard('{Enter}');
+
+        await waitFor(() => {
+          expect(onCellValueChanged).toHaveBeenCalled();
+        });
+
+        expect(onCellValueChanged).toHaveBeenLastCalledWith(expect.objectContaining({ oldValue: 30, newValue: 35 }));
+      });
+
+      test('clamps out-of-range number editor values when committing with enter', async () => {
+        const onCellValueChanged = vi.fn();
+        const columnDefs = [{
+          field: 'age',
+          headerName: 'Age',
+          editable: true,
+          cellDataType: 'number',
+          cellEditor: 'dsNumberCellEditor',
+          cellEditorParams: {
+            min: 0,
+            max: 100,
+            step: 1,
+            disableSpinners: true,
+          },
+        }];
+        const rowData = [
+          { id: 1, name: 'John Doe', age: 30 },
+          { id: 2, name: 'Jane Smith', age: 25 },
+        ];
+
+        render(
+          <Table
+            columnDefs={columnDefs}
+            rowData={rowData}
+            onCellValueChanged={onCellValueChanged}
+          />,
+        );
+
+        await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+        await waitFor(() => expect(screen.getByText('30')).toBeInTheDocument());
+
+        const cell = screen.getByText('30');
+        await userEvent.dblClick(cell);
+
+        const editorInput = await screen.findByRole('textbox');
+        await userEvent.clear(editorInput);
+        await userEvent.type(editorInput, '150');
+        await userEvent.keyboard('{Enter}');
+
+        await waitFor(() => {
+          expect(onCellValueChanged).toHaveBeenCalled();
+        });
+
+        const lastCellChangeEvent = onCellValueChanged.mock.calls.at(-1)?.[0];
+        expect(lastCellChangeEvent?.oldValue).toBe(30);
+        expect(lastCellChangeEvent?.newValue).toBe(100);
+      });
+
+      test('clamps below-min number editor values when committing with enter', async () => {
+        const onCellValueChanged = vi.fn();
+        const columnDefs = [{
+          field: 'age',
+          headerName: 'Age',
+          editable: true,
+          cellDataType: 'number',
+          cellEditor: 'dsNumberCellEditor',
+          cellEditorParams: {
+            min: 0,
+            max: 100,
+            step: 1,
+            disableSpinners: true,
+          },
+        }];
+        const rowData = [
+          { id: 1, name: 'John Doe', age: 30 },
+          { id: 2, name: 'Jane Smith', age: 25 },
+        ];
+
+        render(
+          <Table
+            columnDefs={columnDefs}
+            rowData={rowData}
+            onCellValueChanged={onCellValueChanged}
+          />,
+        );
+
+        await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+        await waitFor(() => expect(screen.getByText('30')).toBeInTheDocument());
+
+        const cell = screen.getByText('30');
+        await userEvent.dblClick(cell);
+
+        const editorInput = await screen.findByRole('textbox');
+        await userEvent.clear(editorInput);
+        await userEvent.type(editorInput, '-5');
+        await userEvent.keyboard('{Enter}');
+
+        await waitFor(() => {
+          expect(onCellValueChanged).toHaveBeenCalled();
+        });
+
+        const lastCellChangeEvent = onCellValueChanged.mock.calls.at(-1)?.[0];
+        expect(lastCellChangeEvent?.oldValue).toBe(30);
+        expect(lastCellChangeEvent?.newValue).toBe(0);
+      });
+
+      test('does not clamp in-progress number editor typing before commit', async () => {
+        const onCellValueChanged = vi.fn();
+        const columnDefs = [{
+          field: 'age',
+          headerName: 'Age',
+          editable: true,
+          cellDataType: 'number',
+          cellEditor: 'dsNumberCellEditor',
+          cellEditorParams: {
+            min: 50,
+            max: 100,
+            step: 1,
+            disableSpinners: true,
+          },
+        }];
+        const rowData = [
+          { id: 1, name: 'John Doe', age: 60 },
+          { id: 2, name: 'Jane Smith', age: 25 },
+        ];
+
+        render(
+          <Table
+            columnDefs={columnDefs}
+            rowData={rowData}
+            onCellValueChanged={onCellValueChanged}
+          />,
+        );
+
+        await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+        await waitFor(() => expect(screen.getByText('60')).toBeInTheDocument());
+
+        const cell = screen.getByText('60');
+        await userEvent.dblClick(cell);
+
+        const editorInput = await screen.findByRole('textbox');
+        await userEvent.clear(editorInput);
+        await userEvent.type(editorInput, '6');
+        expect(editorInput).toHaveValue('6');
+        await userEvent.type(editorInput, '5');
+        await userEvent.keyboard('{Enter}');
+
+        await waitFor(() => {
+          expect(onCellValueChanged).toHaveBeenCalled();
+        });
+
+        const lastCellChangeEvent = onCellValueChanged.mock.calls.at(-1)?.[0];
+        expect(lastCellChangeEvent?.oldValue).toBe(60);
+        expect(lastCellChangeEvent?.newValue).toBe(65);
+      });
+
+      test('supports clearing number editor values and committing null', async () => {
+        const onCellValueChanged = vi.fn();
+        const columnDefs = [{
+          field: 'age',
+          headerName: 'Age',
+          editable: true,
+          cellDataType: 'number',
+          cellEditor: 'dsNumberCellEditor',
+          cellEditorParams: {
+            min: 0,
+            max: 100,
+            step: 1,
+            disableSpinners: true,
+          },
+        }];
+        const rowData = [
+          { id: 1, name: 'John Doe', age: 30 },
+          { id: 2, name: 'Jane Smith', age: 25 },
+        ];
+
+        render(
+          <Table
+            columnDefs={columnDefs}
+            rowData={rowData}
+            onCellValueChanged={onCellValueChanged}
+          />,
+        );
+
+        await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+        await waitFor(() => expect(screen.getByText('30')).toBeInTheDocument());
+
+        const cell = screen.getByText('30');
+        await userEvent.dblClick(cell);
+
+        const editorInput = await screen.findByRole('textbox');
+        expect(screen.queryByLabelText('Plus button')).not.toBeInTheDocument();
+        expect(screen.queryByLabelText('Minus button')).not.toBeInTheDocument();
+
+        await userEvent.clear(editorInput);
+        await userEvent.keyboard('{Enter}');
+
+        await waitFor(() => {
+          expect(onCellValueChanged).toHaveBeenCalled();
+        });
+
+        expect(onCellValueChanged).toHaveBeenLastCalledWith(expect.objectContaining({ oldValue: 30, newValue: null }));
+      });
     });
 
     /**

package/src/components/table/Table.tsx

@@ -16,6 +16,7 @@ import { useTableSettings, type UseTableSettingsParams } from './useTableSetting
 import { setAgGridLicenseKey } from 'Utils/setAgGridLicenseKey';
 import { toggleRowSelectionInCurrentRange } from './toggleRowSelectionInCurrentRange';
 import { defaultValueFormatter, DSDefaultColDef, shouldSuppressFocus } from './DSDefaultColDef';
+import { NumberCellEditor } from './cellEditors/NumberCellEditor';
 import { ButtonCellRenderer } from './cellRenderers/ButtonCellRenderer';
 import { InlineTextCellRenderer } from './cellRenderers/InlineTextCellRenderer';
 import { SelectDropdownCellRenderer } from './cellRenderers/SelectDropdownCellRenderer';
@@ -45,6 +46,7 @@ type TableProps<TData = any> = {
   'enableSimultaneousRangeAndRowSelection'?: boolean;
   'disableDragSelect'?: boolean;
   'tableTheme'?: string;
+  'verticalHeaderText'?: boolean;
 } & UseTableSettingsParams & AgGridReactProps<TData>;
 
 setAgGridLicenseKey();
@@ -76,6 +78,8 @@ export const Table = (props: TableProps) => {
     components = {},
     tableTheme,
     onCellFocused,
+    verticalHeaderText = false,
+    className: propsClassName,
     ...rest
   } = props;
 
@@ -151,6 +155,7 @@ export const Table = (props: TableProps) => {
               setGridApi(api);
               onGridReady?.(event);
             }}
+            className={classNames('ds-table', { 'ds-table--vertical-header-text': verticalHeaderText }, propsClassName)}
             enableFilterHandlers
             suppressPaginationPanel
             onCellSelectionChanged={(event) => {
@@ -185,6 +190,7 @@ export const Table = (props: TableProps) => {
               dsSelectDropdownCellRenderer: SelectDropdownCellRenderer,
               dsBooleanFilter: BooleanFilter,
               dsTimeFilter: TimeFilter,
+              dsNumberCellEditor: NumberCellEditor,
               dsDateCellEditor: DateCellEditor,
               dsCheckboxCellRenderer: CheckboxCellRenderer,
               dsBooleanCellRenderer: BooleanCellRenderer,

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

@@ -0,0 +1,83 @@
+import { NumberInput } from 'Components/formField/inputs/number/NumberInput';
+import {
+  type ChangeEvent,
+  type KeyboardEvent,
+} from 'react';
+
+export type NumberCellEditorProps = {
+  value: number | null | undefined;
+  onValueChange: (value: number | null) => void;
+  min: number;
+  max: number;
+  step: number;
+  disableSpinners: boolean;
+};
+
+const clampValue = (value: number, min: number, max: number) => (
+  Math.min(Math.max(value, min), max)
+);
+
+export const NumberCellEditor = (props: NumberCellEditorProps) => {
+  const {
+    value,
+    onValueChange,
+    min,
+    max,
+    step,
+    disableSpinners,
+  } = props;
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const nextValue = event.currentTarget.value.trim();
+
+    if (nextValue === '') {
+      onValueChange(null);
+      return;
+    }
+
+    const parsedValue = Number(nextValue);
+
+    if (!Number.isNaN(parsedValue)) {
+      onValueChange(clampValue(parsedValue, min, max));
+    }
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key !== 'Enter') {
+      return;
+    }
+
+    const rawValue = event.currentTarget.value.trim();
+
+    if (rawValue === '') {
+      onValueChange(null);
+      return;
+    }
+
+    const parsedValue = Number(rawValue);
+
+    if (!Number.isNaN(parsedValue)) {
+      onValueChange(clampValue(parsedValue, min, max));
+    }
+  };
+
+  return (
+    <div
+      className="ds-number-cell-editor__wrapper"
+    >
+      <NumberInput
+        containerClassName="ds-number-cell-editor__container"
+        defaultValue={value == null ? '' : String(value)}
+        autoFocus
+        min={min}
+        max={max}
+        step={step}
+        disableSpinners={disableSpinners}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+      />
+    </div>
+  );
+};
+
+NumberCellEditor.displayName = 'NumberCellEditor';

package/src/components/table/cellEditors/numberCellEditor.scss

@@ -0,0 +1,11 @@
+.ds-number-cell-editor__wrapper {
+  height: 100%;
+}
+
+.ds-number-cell-editor__container {
+  height: 100%;
+
+  &:focus-within {
+    outline: none;
+  }
+}

package/src/components/table/table.scss

@@ -1,4 +1,15 @@
 .ds-table {
+  &--vertical-header-text {
+    .ag-header-cell-label .ag-header-cell-text {
+      writing-mode: vertical-rl; 
+      transform: rotate(180deg);
+      text-wrap: balance;
+      text-align: center;
+      flex-shrink: 0;
+      min-width: fit-content;
+    }
+  }
+
   &__select-dropdown-cell {
     width: 100%;
   }

package/src/index.scss

@@ -28,6 +28,7 @@
 @use "components/slideover/slideover.scss";
 @use "components/table/table.scss";
 @use "components/searchBar/searchBar.scss";
+@use "components/table/cellEditors/numberCellEditor.scss";
 @use "components/table/pagination/pagination.scss";
 @use "components/tooltip/tooltip.scss";
 @use "components/separator/separator.scss";

package/src/index.ts

@@ -39,11 +39,12 @@ 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 { CheckboxCellRenderer } from 'Components/table/cellRenderers/CheckboxCellRenderer';
 export { DefaultCellRenderer } from 'Components/table/cellRenderers/DefaultCellRenderer';
+export { BooleanCellRenderer } from 'Components/table/cellRenderers/BooleanCellRenderer';
 export { DSDefaultColDef } from 'Components/table/DSDefaultColDef';
 export { GridApiContext } from 'Components/table/GridApiContext';
+export { NumberCellEditor } from 'Components/table/cellEditors/NumberCellEditor';
+export { CheckboxCellRenderer } from 'Components/table/cellRenderers/CheckboxCellRenderer';
 export { Table } from 'Components/table/Table';
 export { Tabs } from 'Components/tabs/Tabs';
 export { Tag } from 'Components/tag/Tag';