@arbor-education/design-system.components 0.18.0 → 0.19.1

package/src/components/table/Table.tsx

@@ -1,39 +1,40 @@
 import { AllEnterpriseModule, ModuleRegistry, type GridApi } from 'ag-grid-enterprise';
 import { AgGridReact, type AgGridReactProps } from 'ag-grid-react';
-import { defaultTheme } from './theme/defaultTheme';
+import { defaultTheme } from './theme/defaultTheme.js';
 import classNames from 'classnames';
 import { useContext, useRef, useState, type ReactNode } from 'react';
-import { TableFooter } from './TableFooter';
-import { TableHeader } from './TableHeader';
-import { GridApiContext } from './GridApiContext';
-import { PaginationPanel } from './pagination/PaginationPanel';
-import { PageSizeSelector } from './pagination/PageSizeSelector';
-import { PaginationControls } from './pagination/PaginationControls';
-import { RowCountInfo } from './pagination/RowCountInfo';
-import { BulkActionsDropdown } from './tableControls/BulkActionsDropdown';
-import { HideColumnsDropdown } from './tableControls/HideColumnsDropdown';
-import { useTableSettings, type UseTableSettingsParams } from './useTableSettings';
+import { TableFooter } from './TableFooter.js';
+import { TableHeader } from './TableHeader.js';
+import { GridApiContext } from './GridApiContext.js';
+import { PaginationPanel } from './pagination/PaginationPanel.js';
+import { PageSizeSelector } from './pagination/PageSizeSelector.js';
+import { PaginationControls } from './pagination/PaginationControls.js';
+import { RowCountInfo } from './pagination/RowCountInfo.js';
+import { BulkActionsDropdown } from './tableControls/BulkActionsDropdown.js';
+import { HideColumnsDropdown } from './tableControls/HideColumnsDropdown.js';
+import { useTableSettings, type UseTableSettingsParams } from './useTableSettings.js';
 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';
-import { tidyTheme } from './theme/tidyTheme';
+import { toggleRowSelectionInCurrentRange } from './toggleRowSelectionInCurrentRange.js';
+import { defaultValueFormatter, DSDefaultColDef, shouldSuppressFocus } from './DSDefaultColDef.js';
+import { NumberCellEditor } from './cellEditors/NumberCellEditor.js';
+import { ButtonCellRenderer } from './cellRenderers/ButtonCellRenderer.js';
+import { InlineTextCellRenderer } from './cellRenderers/InlineTextCellRenderer.js';
+import { SelectDropdownCellRenderer } from './cellRenderers/SelectDropdownCellRenderer.js';
+import { tidyTheme } from './theme/tidyTheme.js';
 import { focusFirstFocusableElement } from 'Utils/focusFirstFocusableElement';
-import { BooleanFilter } from './columnFilters/BooleanFilter/BooleanFilter';
-import { TimeFilter } from './columnFilters/TimeFilter/TimeFilter';
-import { DateCellEditor } from './cellEditors/DateCellEditor';
-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';
-import { TableSettingsContext } from './TableSettingsContext';
-import { BooleanCellRenderer } from './cellRenderers/BooleanCellRenderer';
-import { CheckboxCellRenderer } from './cellRenderers/CheckboxCellRenderer';
-import { DefaultCellRenderer } from './cellRenderers/DefaultCellRenderer';
+import { BooleanFilter } from './columnFilters/BooleanFilter/BooleanFilter.js';
+import { TimeFilter } from './columnFilters/TimeFilter/TimeFilter.js';
+import { DateCellEditor } from './cellEditors/DateCellEditor.js';
+import { TableSettingsDropdown, TABLE_SETTINGS_ITEMS } from './tableControls/TableSettingsDropdown.js';
+import { TableControls, type TableControlsProps, type BulkAction as BulkActionType } from './tableControls/TableControls.js';
+import type { HideColumnsDropdownProps } from './tableControls/HideColumnsDropdown.js';
+import { TABLE_SPACING } from './tableConsts.js';
+import { TableSettingsContext } from './TableSettingsContext.js';
+import { BooleanCellRenderer } from './cellRenderers/BooleanCellRenderer.js';
+import { CheckboxCellRenderer } from './cellRenderers/CheckboxCellRenderer.js';
+import { ComboboxCellRenderer } from './cellRenderers/ComboboxCellRenderer.js';
+import { DefaultCellRenderer } from './cellRenderers/DefaultCellRenderer.js';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type TableProps<TData = any> = {
@@ -54,7 +55,7 @@ setAgGridLicenseKey();
 
 ModuleRegistry.registerModules([AllEnterpriseModule]);
 
-export { TableSettingsContext } from './TableSettingsContext';
+export { TableSettingsContext } from './TableSettingsContext.js';
 
 export const Table = (props: TableProps) => {
   const {
@@ -198,6 +199,7 @@ export const Table = (props: TableProps) => {
               dsDateCellEditor: DateCellEditor,
               dsCheckboxCellRenderer: CheckboxCellRenderer,
               dsBooleanCellRenderer: BooleanCellRenderer,
+              dsComboboxCellRenderer: ComboboxCellRenderer,
               ...components,
             }}
             {...rest}
@@ -229,6 +231,7 @@ Table.DateCellEditor = DateCellEditor;
 Table.DefaultColDef = DSDefaultColDef;
 Table.GridApiContext = GridApiContext;
 Table.CheckboxCellRenderer = CheckboxCellRenderer;
+Table.ComboboxCellRenderer = ComboboxCellRenderer;
 Table.DefaultValueFormatter = defaultValueFormatter;
 Table.TableSettingsDropdown = TableSettingsDropdown;
 Table.TableControls = TableControls;

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

@@ -9,8 +9,8 @@ import {
   Title,
 } from '@storybook/addon-docs/blocks';
 import { fn } from 'storybook/test';
-import { TableFooter } from './TableFooter';
-import { PaginationPanel } from './pagination/PaginationPanel';
+import { TableFooter } from './TableFooter.js';
+import { PaginationPanel } from './pagination/PaginationPanel.js';
 
 // ---------------------------------------------------------------------------
 // Docs page content

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

@@ -10,8 +10,8 @@ import {
   Title,
 } from '@storybook/addon-docs/blocks';
 import { fn } from 'storybook/test';
-import { TableHeader } from './TableHeader';
-import { TableControls } from './tableControls/TableControls';
+import { TableHeader } from './TableHeader.js';
+import { TableControls } from './tableControls/TableControls.js';
 
 // ---------------------------------------------------------------------------
 // Docs page content

package/src/components/table/TableSettingsContext.ts

@@ -1,6 +1,6 @@
 import { createContext } from 'react';
-import { TABLE_SPACING } from './tableConsts';
-import { type useTableSettings } from './useTableSettings';
+import { TABLE_SPACING } from './tableConsts.js';
+import { type useTableSettings } from './useTableSettings.js';
 
 export const TableSettingsContext = createContext<ReturnType<typeof useTableSettings>>({
   settings: {

package/src/components/table/cellColorStyles.ts

@@ -1,5 +1,5 @@
 import type { CellStyleFunc } from 'ag-grid-community';
-import type { TableSettings } from './useTableSettings';
+import type { TableSettings } from './useTableSettings.js';
 
 const SEMANTIC_COLORS = {
   DESTRUCTIVE: {

package/src/components/table/cellEditors/DateCellEditor.stories.tsx

@@ -10,7 +10,7 @@ import {
 } from '@storybook/addon-docs/blocks';
 import { fn } from 'storybook/test';
 import type { CustomCellEditorProps } from 'ag-grid-react';
-import { DateCellEditor } from './DateCellEditor';
+import { DateCellEditor } from './DateCellEditor.js';
 import { Table } from 'Components/table/Table';
 
 // ---------------------------------------------------------------------------

package/src/components/table/cellEditors/DateCellEditor.test.tsx

@@ -2,7 +2,7 @@ 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 { DateCellEditor } from './DateCellEditor.js';
 import type { CustomCellEditorProps } from 'ag-grid-react';
 
 const createMockProps = (overrides: Partial<CustomCellEditorProps> = {}): CustomCellEditorProps => ({

package/src/components/table/cellRenderers/BooleanCellRenderer.stories.tsx

@@ -9,7 +9,7 @@ import {
   Title,
 } from '@storybook/addon-docs/blocks';
 import type { CustomCellRendererProps } from 'ag-grid-react';
-import { BooleanCellRenderer } from './BooleanCellRenderer';
+import { BooleanCellRenderer } from './BooleanCellRenderer.js';
 import { Table } from 'Components/table/Table';
 
 // ---------------------------------------------------------------------------

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

@@ -1,7 +1,7 @@
 import '@testing-library/jest-dom/vitest';
 import { describe, expect, test } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import { BooleanCellRenderer } from './BooleanCellRenderer';
+import { BooleanCellRenderer } from './BooleanCellRenderer.js';
 import type { CustomCellRendererProps } from 'ag-grid-react';
 
 const renderWithValue = (value: unknown) =>

package/src/components/table/cellRenderers/ButtonCellRenderer.stories.tsx

@@ -9,7 +9,7 @@ import {
   Title,
 } from '@storybook/addon-docs/blocks';
 import type { CustomCellRendererProps } from 'ag-grid-react';
-import { ButtonCellRenderer } from './ButtonCellRenderer';
+import { ButtonCellRenderer } from './ButtonCellRenderer.js';
 import { Table } from 'Components/table/Table';
 
 // ---------------------------------------------------------------------------

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

@@ -10,7 +10,7 @@ import {
   Title,
 } from '@storybook/addon-docs/blocks';
 import type { CustomCellRendererProps } from 'ag-grid-react';
-import { CheckboxCellRenderer } from './CheckboxCellRenderer';
+import { CheckboxCellRenderer } from './CheckboxCellRenderer.js';
 import { Table } from 'Components/table/Table';
 
 // ---------------------------------------------------------------------------

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

@@ -2,7 +2,7 @@ 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 { CheckboxCellRenderer } from './CheckboxCellRenderer.js';
 import type { CustomCellRendererProps } from 'ag-grid-react';
 
 const createMockProps = (overrides: Partial<CustomCellRendererProps> = {}): CustomCellRendererProps => ({

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

@@ -0,0 +1,437 @@
+import { describe, expect, test, vi, afterEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import userEvent from '@testing-library/user-event';
+import type { SuppressKeyboardEventParams } from 'ag-grid-community';
+import type { CustomCellRendererProps } from 'ag-grid-react';
+import { ComboboxCellRenderer } from './ComboboxCellRenderer.js';
+import type { ComboboxOption, ComboboxProps } from 'Components/combobox/types';
+
+const options: ComboboxOption[] = [
+  { value: 'opt1', label: 'Option 1' },
+  { value: 'opt2', label: 'Option 2' },
+  { value: 'opt3', label: 'Option 3' },
+];
+
+type MockProps = Partial<CustomCellRendererProps> & Partial<Omit<ComboboxProps, 'value'>>;
+
+const createMockProps = (overrides: MockProps = {}): CustomCellRendererProps & ComboboxProps => ({
+  value: null,
+  node: { setDataValue: vi.fn() },
+  column: 'testField',
+  api: {
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+  },
+  options,
+  ...overrides,
+} as unknown as CustomCellRendererProps & ComboboxProps);
+
+describe('ComboboxCellRenderer', () => {
+  test('renders a combobox input', () => {
+    render(<ComboboxCellRenderer {...createMockProps()} />);
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+  });
+
+  test('renders with placeholder', () => {
+    render(<ComboboxCellRenderer {...createMockProps({ placeholder: 'Choose an option' })} />);
+    expect(screen.getByPlaceholderText('Choose an option')).toBeInTheDocument();
+  });
+
+  test('renders with default placeholder when none provided', () => {
+    render(<ComboboxCellRenderer {...createMockProps()} />);
+    expect(screen.getByPlaceholderText('Select...')).toBeInTheDocument();
+  });
+
+  test('opens listbox and shows options on input focus', async () => {
+    render(<ComboboxCellRenderer {...createMockProps()} />);
+    await userEvent.click(screen.getByRole('combobox'));
+    expect(screen.getByRole('listbox')).toBeInTheDocument();
+    expect(screen.getByText('Option 1')).toBeInTheDocument();
+  });
+
+  test('calls setDataValue with the selected value for single select', async () => {
+    const setDataValue = vi.fn();
+    const props = createMockProps({
+      node: { setDataValue } as unknown as CustomCellRendererProps['node'],
+      column: 'testField' as unknown as CustomCellRendererProps['column'],
+    });
+    render(<ComboboxCellRenderer {...props} />);
+
+    await userEvent.click(screen.getByRole('combobox'));
+    await userEvent.click(screen.getByText('Option 1'));
+
+    expect(setDataValue).toHaveBeenCalledWith('testField', 'opt1');
+  });
+
+  test('calls setDataValue with array for multiple select', async () => {
+    const setDataValue = vi.fn();
+    const props = createMockProps({
+      multiple: true,
+      node: { setDataValue } as unknown as CustomCellRendererProps['node'],
+      column: 'testField' as unknown as CustomCellRendererProps['column'],
+    });
+    render(<ComboboxCellRenderer {...props} />);
+
+    await userEvent.click(screen.getByRole('combobox'));
+    await userEvent.click(screen.getByText('Option 1'));
+
+    expect(setDataValue).toHaveBeenCalledWith('testField', ['opt1']);
+  });
+
+  test('does not call setDataValue when column is undefined', async () => {
+    const setDataValue = vi.fn();
+    const props = createMockProps({
+      node: { setDataValue } as unknown as CustomCellRendererProps['node'],
+      column: undefined as unknown as CustomCellRendererProps['column'],
+    });
+    render(<ComboboxCellRenderer {...props} />);
+
+    await userEvent.click(screen.getByRole('combobox'));
+    await userEvent.click(screen.getByText('Option 1'));
+
+    expect(setDataValue).not.toHaveBeenCalled();
+  });
+
+  test('normalizes a string cell value to an array for controlled combobox', () => {
+    render(<ComboboxCellRenderer {...createMockProps({ value: 'opt1' })} />);
+    const input = screen.getByRole('combobox');
+    expect(input).toBeInTheDocument();
+  });
+
+  test('normalizes a string[] cell value to an array for controlled combobox', () => {
+    render(<ComboboxCellRenderer {...createMockProps({ value: ['opt1', 'opt2'], multiple: true })} />);
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+  });
+
+  test('registers cellKeyDown listener on mount', () => {
+    const addEventListener = vi.fn();
+    const removeEventListener = vi.fn();
+    const props = createMockProps({
+      api: { addEventListener, removeEventListener } as unknown as CustomCellRendererProps['api'],
+    });
+    render(<ComboboxCellRenderer {...props} />);
+    expect(addEventListener).toHaveBeenCalledWith('cellKeyDown', expect.any(Function));
+  });
+
+  describe('value normalization edge cases', () => {
+    test('treats empty string value as no selection', () => {
+      render(<ComboboxCellRenderer {...createMockProps({ value: '' })} />);
+      expect(screen.getByPlaceholderText('Select...')).toBeInTheDocument();
+    });
+
+    test('normalizes a numeric cell value to a string', () => {
+      render(<ComboboxCellRenderer {...createMockProps({ value: 42 as unknown as string })} />);
+      expect(screen.getByRole('combobox')).toBeInTheDocument();
+    });
+
+    test('normalizes a numeric array cell value to strings', () => {
+      render(<ComboboxCellRenderer {...createMockProps({ value: [1, 2] as unknown as string[], multiple: true })} />);
+      expect(screen.getByRole('combobox')).toBeInTheDocument();
+    });
+  });
+
+  describe('cellKeyDown handler', () => {
+    test('removes the cellKeyDown listener on unmount', () => {
+      const addEventListener = vi.fn();
+      const removeEventListener = vi.fn();
+      const { unmount } = render(
+        <ComboboxCellRenderer {...createMockProps({
+          api: { addEventListener, removeEventListener } as unknown as CustomCellRendererProps['api'],
+        })}
+        />,
+      );
+      const listener = addEventListener.mock.calls[0]![1];
+      unmount();
+      expect(removeEventListener).toHaveBeenCalledWith('cellKeyDown', listener);
+    });
+
+    test('focuses the combobox trigger on Enter for matching node and column', () => {
+      const addEventListener = vi.fn();
+      const mockNode = { setDataValue: vi.fn() };
+      const mockColumn = 'testField';
+
+      render(
+        <ComboboxCellRenderer {...createMockProps({
+          node: mockNode as unknown as CustomCellRendererProps['node'],
+          column: mockColumn as unknown as CustomCellRendererProps['column'],
+          api: { addEventListener, removeEventListener: vi.fn() } as unknown as CustomCellRendererProps['api'],
+        })}
+        />,
+      );
+
+      const trigger = screen.getByRole('combobox');
+      const focusSpy = vi.spyOn(trigger, 'focus');
+
+      const listener = addEventListener.mock.calls[0]![1];
+      listener({ event: { key: 'Enter' }, node: mockNode, column: mockColumn });
+
+      expect(focusSpy).toHaveBeenCalled();
+    });
+
+    test('focuses and clicks the button trigger on Enter when triggerVariant is "button"', () => {
+      const addEventListener = vi.fn();
+      const mockNode = { setDataValue: vi.fn() };
+      const mockColumn = 'testField';
+
+      render(
+        <ComboboxCellRenderer {...createMockProps({
+          'node': mockNode as unknown as CustomCellRendererProps['node'],
+          'column': mockColumn as unknown as CustomCellRendererProps['column'],
+          'api': { addEventListener, removeEventListener: vi.fn() } as unknown as CustomCellRendererProps['api'],
+          'triggerVariant': 'button',
+          'aria-label': 'Choose option',
+        })}
+        />,
+      );
+
+      const button = screen.getByRole('button', { name: 'Choose option' });
+      const focusSpy = vi.spyOn(button, 'focus');
+      const clickSpy = vi.spyOn(button, 'click');
+
+      const listener = addEventListener.mock.calls[0]![1];
+      listener({ event: { key: 'Enter' }, node: mockNode, column: mockColumn });
+
+      expect(focusSpy).toHaveBeenCalled();
+      expect(clickSpy).toHaveBeenCalled();
+    });
+
+    test('does not focus trigger when the event node does not match', () => {
+      const addEventListener = vi.fn();
+      const mockNode = { setDataValue: vi.fn() };
+      const differentNode = { setDataValue: vi.fn() };
+      const mockColumn = 'testField';
+
+      render(
+        <ComboboxCellRenderer {...createMockProps({
+          node: mockNode as unknown as CustomCellRendererProps['node'],
+          column: mockColumn as unknown as CustomCellRendererProps['column'],
+          api: { addEventListener, removeEventListener: vi.fn() } as unknown as CustomCellRendererProps['api'],
+        })}
+        />,
+      );
+
+      const trigger = screen.getByRole('combobox');
+      const focusSpy = vi.spyOn(trigger, 'focus');
+
+      const listener = addEventListener.mock.calls[0]![1];
+      listener({ event: { key: 'Enter' }, node: differentNode, column: mockColumn });
+
+      expect(focusSpy).not.toHaveBeenCalled();
+    });
+
+    test('does not focus trigger when the event column does not match', () => {
+      const addEventListener = vi.fn();
+      const mockNode = { setDataValue: vi.fn() };
+      const mockColumn = 'testField';
+
+      render(
+        <ComboboxCellRenderer {...createMockProps({
+          node: mockNode as unknown as CustomCellRendererProps['node'],
+          column: mockColumn as unknown as CustomCellRendererProps['column'],
+          api: { addEventListener, removeEventListener: vi.fn() } as unknown as CustomCellRendererProps['api'],
+        })}
+        />,
+      );
+
+      const trigger = screen.getByRole('combobox');
+      const focusSpy = vi.spyOn(trigger, 'focus');
+
+      const listener = addEventListener.mock.calls[0]![1];
+      listener({ event: { key: 'Enter' }, node: mockNode, column: 'differentField' });
+
+      expect(focusSpy).not.toHaveBeenCalled();
+    });
+
+    test('does not focus trigger for non-Enter keys', () => {
+      const addEventListener = vi.fn();
+      const mockNode = { setDataValue: vi.fn() };
+      const mockColumn = 'testField';
+
+      render(
+        <ComboboxCellRenderer {...createMockProps({
+          node: mockNode as unknown as CustomCellRendererProps['node'],
+          column: mockColumn as unknown as CustomCellRendererProps['column'],
+          api: { addEventListener, removeEventListener: vi.fn() } as unknown as CustomCellRendererProps['api'],
+        })}
+        />,
+      );
+
+      const trigger = screen.getByRole('combobox');
+      const focusSpy = vi.spyOn(trigger, 'focus');
+
+      const listener = addEventListener.mock.calls[0]![1];
+      listener({ event: { key: 'ArrowDown' }, node: mockNode, column: mockColumn });
+
+      expect(focusSpy).not.toHaveBeenCalled();
+    });
+
+    test('does not focus trigger for a FullWidthCellKeyDownEvent (no column property)', () => {
+      const addEventListener = vi.fn();
+      const mockNode = { setDataValue: vi.fn() };
+      const mockColumn = 'testField';
+
+      render(
+        <ComboboxCellRenderer {...createMockProps({
+          node: mockNode as unknown as CustomCellRendererProps['node'],
+          column: mockColumn as unknown as CustomCellRendererProps['column'],
+          api: { addEventListener, removeEventListener: vi.fn() } as unknown as CustomCellRendererProps['api'],
+        })}
+        />,
+      );
+
+      const trigger = screen.getByRole('combobox');
+      const focusSpy = vi.spyOn(trigger, 'focus');
+
+      const listener = addEventListener.mock.calls[0]![1];
+      listener({ event: { key: 'Enter' }, node: mockNode });
+
+      expect(focusSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('focus restoration via MutationObserver', () => {
+    test('calls setFocusedCell when popover closes without focus leaving the cell', async () => {
+      const setFocusedCell = vi.fn();
+      const mockNode = { setDataValue: vi.fn(), rowIndex: 5 };
+      const mockColumn = 'testField';
+
+      render(
+        <ComboboxCellRenderer {...createMockProps({
+          node: mockNode as unknown as CustomCellRendererProps['node'],
+          column: mockColumn as unknown as CustomCellRendererProps['column'],
+          api: {
+            addEventListener: vi.fn(),
+            removeEventListener: vi.fn(),
+            setFocusedCell,
+          } as unknown as CustomCellRendererProps['api'],
+        })}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('combobox'));
+      await userEvent.keyboard('{Escape}');
+
+      expect(setFocusedCell).toHaveBeenCalledWith(5, mockColumn);
+    });
+
+    test('does not call setFocusedCell when focus moves outside the cell', async () => {
+      const setFocusedCell = vi.fn();
+      const mockNode = { setDataValue: vi.fn(), rowIndex: 5 };
+      const mockColumn = 'testField';
+
+      render(
+        <>
+          <ComboboxCellRenderer {...createMockProps({
+            node: mockNode as unknown as CustomCellRendererProps['node'],
+            column: mockColumn as unknown as CustomCellRendererProps['column'],
+            api: {
+              addEventListener: vi.fn(),
+              removeEventListener: vi.fn(),
+              setFocusedCell,
+            } as unknown as CustomCellRendererProps['api'],
+          })}
+          />
+          <button>Outside</button>
+        </>,
+      );
+
+      await userEvent.click(screen.getByRole('combobox'));
+      await userEvent.click(screen.getByRole('button', { name: 'Outside' }));
+
+      expect(setFocusedCell).not.toHaveBeenCalled();
+    });
+
+    test('does not call setFocusedCell when node.rowIndex is null', async () => {
+      const setFocusedCell = vi.fn();
+      const mockNode = { setDataValue: vi.fn(), rowIndex: null };
+      const mockColumn = 'testField';
+
+      render(
+        <ComboboxCellRenderer {...createMockProps({
+          node: mockNode as unknown as CustomCellRendererProps['node'],
+          column: mockColumn as unknown as CustomCellRendererProps['column'],
+          api: {
+            addEventListener: vi.fn(),
+            removeEventListener: vi.fn(),
+            setFocusedCell,
+          } as unknown as CustomCellRendererProps['api'],
+        })}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('combobox'));
+      await userEvent.keyboard('{Escape}');
+
+      expect(setFocusedCell).not.toHaveBeenCalled();
+    });
+
+    test('disconnects the MutationObserver on unmount', () => {
+      const disconnect = vi.fn();
+      vi.stubGlobal('MutationObserver', vi.fn(() => ({ observe: vi.fn(), disconnect })));
+
+      try {
+        const { unmount } = render(<ComboboxCellRenderer {...createMockProps()} />);
+        unmount();
+        expect(disconnect).toHaveBeenCalled();
+      }
+      finally {
+        vi.unstubAllGlobals();
+      }
+    });
+  });
+
+  describe('colDefDefaults', () => {
+    test('autoHeight is true', () => {
+      expect(ComboboxCellRenderer.colDefDefaults.autoHeight).toBe(true);
+    });
+
+    describe('suppressKeyboardEvent', () => {
+      const { suppressKeyboardEvent } = ComboboxCellRenderer.colDefDefaults;
+
+      const appendCell = (key: string, open: boolean) => {
+        const cell = document.createElement('div');
+        cell.className = 'ag-cell';
+        const trigger = document.createElement('input');
+        trigger.setAttribute('role', 'combobox');
+        trigger.setAttribute('aria-expanded', open ? 'true' : 'false');
+        cell.appendChild(trigger);
+        document.body.appendChild(cell);
+        return {
+          params: { event: { key, target: trigger } } as unknown as SuppressKeyboardEventParams,
+          cleanup: () => cell.remove(),
+        };
+      };
+
+      afterEach(() => {
+        document.querySelectorAll('.ag-cell').forEach(el => el.remove());
+      });
+
+      test('returns false when the event target has no ag-cell ancestor', () => {
+        const target = document.createElement('input');
+        document.body.appendChild(target);
+        const params = { event: { key: 'ArrowDown', target } } as unknown as SuppressKeyboardEventParams;
+        expect(suppressKeyboardEvent(params)).toBe(false);
+        target.remove();
+      });
+
+      test('returns false when the combobox is closed', () => {
+        const { params } = appendCell('ArrowDown', false);
+        expect(suppressKeyboardEvent(params)).toBe(false);
+      });
+
+      test.each(['ArrowUp', 'ArrowDown', 'Enter', 'Escape'])(
+        'suppresses %s when the combobox is open',
+        (key) => {
+          const { params } = appendCell(key, true);
+          expect(suppressKeyboardEvent(params)).toBe(true);
+        },
+      );
+
+      test('does not suppress Tab when the combobox is open', () => {
+        const { params } = appendCell('Tab', true);
+        expect(suppressKeyboardEvent(params)).toBe(false);
+      });
+    });
+  });
+});