@arbor-education/design-system.components 0.14.0 → 0.16.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

@@ -2,7 +2,7 @@ import { AllEnterpriseModule, ModuleRegistry, type GridApi } from 'ag-grid-enter
 import { AgGridReact, type AgGridReactProps } from 'ag-grid-react';
 import { defaultTheme } from './theme/defaultTheme';
 import classNames from 'classnames';
-import { useRef, useState, type ReactNode } from 'react';
+import { useContext, useRef, useState, type ReactNode } from 'react';
 import { TableFooter } from './TableFooter';
 import { TableHeader } from './TableHeader';
 import { GridApiContext } from './GridApiContext';
@@ -14,8 +14,10 @@ import { BulkActionsDropdown } from './tableControls/BulkActionsDropdown';
 import { HideColumnsDropdown } from './tableControls/HideColumnsDropdown';
 import { useTableSettings, type UseTableSettingsParams } from './useTableSettings';
 import { setAgGridLicenseKey } from 'Utils/setAgGridLicenseKey';
+import { PopupParentContext } from 'Utils/PopupParentContext';
 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';
@@ -24,7 +26,7 @@ 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 { TableSettingsDropdown, TABLE_SETTINGS_ITEMS } from './tableControls/TableSettingsDropdown';
 import { TableControls, type TableControlsProps, type BulkAction as BulkActionType } from './tableControls/TableControls';
 import type { HideColumnsDropdownProps } from './tableControls/HideColumnsDropdown';
 import { TABLE_SPACING } from './tableConsts';
@@ -45,6 +47,7 @@ type TableProps<TData = any> = {
   'enableSimultaneousRangeAndRowSelection'?: boolean;
   'disableDragSelect'?: boolean;
   'tableTheme'?: string;
+  'verticalHeaderText'?: boolean;
 } & UseTableSettingsParams & AgGridReactProps<TData>;
 
 setAgGridLicenseKey();
@@ -76,6 +79,8 @@ export const Table = (props: TableProps) => {
     components = {},
     tableTheme,
     onCellFocused,
+    verticalHeaderText = false,
+    className: propsClassName,
     ...rest
   } = props;
 
@@ -83,6 +88,8 @@ export const Table = (props: TableProps) => {
 
   const [searchValue, setSearchValue] = useState('');
 
+  const popupParentRef = useContext(PopupParentContext);
+
   const {
     settings,
     resetSettings,
@@ -146,11 +153,13 @@ export const Table = (props: TableProps) => {
           )}
           <AgGridReact
             theme={getTheme()}
+            popupParent={popupParentRef.current}
             onGridReady={(event) => {
               const { api } = event;
               setGridApi(api);
               onGridReady?.(event);
             }}
+            className={classNames('ds-table', { 'ds-table--vertical-header-text': verticalHeaderText }, propsClassName)}
             enableFilterHandlers
             suppressPaginationPanel
             onCellSelectionChanged={(event) => {
@@ -185,6 +194,7 @@ export const Table = (props: TableProps) => {
               dsSelectDropdownCellRenderer: SelectDropdownCellRenderer,
               dsBooleanFilter: BooleanFilter,
               dsTimeFilter: TimeFilter,
+              dsNumberCellEditor: NumberCellEditor,
               dsDateCellEditor: DateCellEditor,
               dsCheckboxCellRenderer: CheckboxCellRenderer,
               dsBooleanCellRenderer: BooleanCellRenderer,
@@ -211,6 +221,8 @@ Table.RowCountInfo = RowCountInfo;
 Table.BulkActionsDropdown = BulkActionsDropdown;
 Table.HideColumnsDropdown = HideColumnsDropdown;
 Table.ButtonCellRenderer = ButtonCellRenderer;
+Table.InlineTextCellRenderer = InlineTextCellRenderer;
+Table.SelectDropdownCellRenderer = SelectDropdownCellRenderer;
 Table.BooleanCellRenderer = BooleanCellRenderer;
 Table.DefaultCellRenderer = DefaultCellRenderer;
 Table.DateCellEditor = DateCellEditor;
@@ -222,6 +234,7 @@ Table.TableSettingsDropdown = TableSettingsDropdown;
 Table.TableControls = TableControls;
 
 Table.Spacing = TABLE_SPACING;
+Table.SettingsItems = TABLE_SETTINGS_ITEMS;
 
 export namespace Table {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

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

@@ -0,0 +1,196 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+  Controls,
+  Heading as DocHeading,
+  Markdown,
+  Primary as DocPrimary,
+  Stories,
+  Subtitle,
+  Title,
+} from '@storybook/addon-docs/blocks';
+import { fn } from 'storybook/test';
+import { TableFooter } from './TableFooter';
+import { PaginationPanel } from './pagination/PaginationPanel';
+
+// ---------------------------------------------------------------------------
+// Docs page content
+// ---------------------------------------------------------------------------
+
+const DESCRIPTION_INTRO = [
+  '`TableFooter` is the pre-composed footer slot for the Arbor data table.',
+  'It renders a `<footer>` element and accepts any `children` (typically a `<PaginationPanel />` element).',
+  '',
+  'Pass the entire `<TableFooter />` element as the `footerContent` prop of `<Table />`.',
+].join('\n');
+
+const USAGE_GUIDANCE = [
+  '### When to use',
+  '',
+  '- As the `footerContent` of a `<Table />` when you need a standard footer region',
+  '- When you want to wrap `<PaginationPanel />` in the footer slot',
+  '- When you need custom footer content beyond pagination controls',
+  '',
+  '---',
+  '',
+  '### When NOT to use',
+  '',
+  '| Situation | Alternative |',
+  '|---|---|',
+  '| You only need pagination | Pass `<PaginationPanel />` directly as `footerContent` |',
+  '| The table has no footer | Omit `footerContent` entirely |',
+  '',
+  '---',
+  '',
+  '### Props summary',
+  '',
+  '| Prop | Description |',
+  '|---|---|',
+  '| `children` | Content rendered inside the footer — typically `<PaginationPanel />` |',
+  '| `className` | Additional CSS class name(s) on the root `<footer>` element |',
+].join('\n');
+
+const DEVELOPER_NOTES = [
+  '### Wiring into `<Table />`',
+  '',
+  '```tsx',
+  "import { Table, TableFooter, PaginationPanel } from '@arbor-education/design-system.components';",
+  '',
+  'function MyTable() {',
+  '  return (',
+  '    <Table',
+  '      rowData={rows}',
+  '      columnDefs={colDefs}',
+  '      footerContent={(',
+  '        <TableFooter>',
+  '          <PaginationPanel',
+  '            availableSizes={[10, 25, 50, 100]}',
+  '            initialPageSize={25}',
+  '            onPageSizeChange={setPageSize}',
+  '          />',
+  '        </TableFooter>',
+  '      )}',
+  '    />',
+  '  );',
+  '}',
+  '```',
+  '',
+  '---',
+  '',
+  '### `TableFooter` vs passing `<PaginationPanel />` directly',
+  '',
+  '`<TableFooter />` adds the `ds-table__footer` class and `<footer>` semantic element around its',
+  'children. If you only need pagination, passing `<PaginationPanel />` directly as `footerContent`',
+  'is also valid — `<Table />` renders `footerContent` inside its own footer region.',
+].join('\n');
+
+const RELATED_COMPONENTS = [
+  '## Related components',
+  '',
+  '[Table](?path=/docs/components-table--docs) · [PaginationPanel](?path=/docs/components-table-paginationpanel--docs) · [TableHeader](?path=/docs/components-table-tableheader--docs)',
+].join('\n');
+
+const PROPS_INTRO = 'The preview below is wired to the **Controls** panel. `TableFooter` is a thin layout wrapper — its main value is the semantic `<footer>` element and `ds-table__footer` class it applies around its children.';
+
+// ---------------------------------------------------------------------------
+// Custom DocsPage
+// ---------------------------------------------------------------------------
+
+function TableFooterDocsPage() {
+  return (
+    <>
+      <Title />
+      <Subtitle />
+      <Markdown>{DESCRIPTION_INTRO}</Markdown>
+      <DocHeading>Interactive example</DocHeading>
+      <Markdown>{PROPS_INTRO}</Markdown>
+      <DocPrimary />
+      <Controls />
+      <DocHeading>Usage guidance</DocHeading>
+      <Markdown>{USAGE_GUIDANCE}</Markdown>
+      <DocHeading>Developer notes</DocHeading>
+      <Markdown>{DEVELOPER_NOTES}</Markdown>
+      <DocHeading>Examples</DocHeading>
+      <Stories title="" />
+      <Markdown>{RELATED_COMPONENTS}</Markdown>
+    </>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Meta
+// ---------------------------------------------------------------------------
+
+const meta = {
+  title: 'Components/Table/TableFooter',
+  component: TableFooter,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: { page: TableFooterDocsPage },
+  },
+  argTypes: {
+    children: {
+      description: 'Content rendered inside the footer. Typically a `<PaginationPanel />` element.',
+      control: false,
+      table: { type: { summary: 'ReactNode' }, defaultValue: { summary: 'undefined' } },
+    },
+    className: {
+      description: 'Additional CSS class name(s) to apply to the root `<footer>` element.',
+      control: 'text',
+      table: { type: { summary: 'string' }, defaultValue: { summary: 'undefined' } },
+    },
+  },
+} satisfies Meta<typeof TableFooter>;
+
+export default meta;
+type Story = StoryObj<typeof TableFooter>;
+
+// ---------------------------------------------------------------------------
+// Helper
+// ---------------------------------------------------------------------------
+
+const withDescription = (story: Story, description: string): Story => ({
+  ...story,
+  parameters: {
+    ...story.parameters,
+    docs: { ...story.parameters?.docs, description: { story: description } },
+  },
+});
+
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
+
+export const Default: Story = withDescription(
+  {
+    args: {
+      children: (
+        <PaginationPanel
+          totalPages={10}
+          onPageChange={fn()}
+          availableSizes={[10, 25, 50, 100]}
+          initialPageSize={25}
+          onPageSizeChange={fn()}
+        />
+      ),
+    },
+  },
+  'The canonical usage — `TableFooter` wrapping a `<PaginationPanel />`. '
+  + '`RowCountInfo` (the row count text) is not visible in this standalone preview because it '
+  + 'requires `GridApiContext` provided by a wrapping `<Table />`.',
+);
+
+export const WithCustomContent: Story = withDescription(
+  {
+    parameters: { controls: { disable: true } },
+    args: {
+      children: (
+        <span style={{ padding: '8px 16px', fontSize: '14px', color: 'var(--color-neutral-500)' }}>
+          Custom footer content — e.g. totals, status messages, or secondary actions
+        </span>
+      ),
+    },
+  },
+  '`TableFooter` accepts any `ReactNode` as `children` — not just `PaginationPanel`. '
+  + 'Use it to add totals rows, status messages, or any other custom footer content.',
+);