@arbor-education/design-system.components 0.3.1 → 0.3.2

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

@@ -1,5 +1,5 @@
 import { describe, expect, expectTypeOf, test, vi } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import { Table, TABLE_SPACING } from './Table';
 import '@testing-library/jest-dom/vitest';
 import { BulkActionsDropdown } from 'Components/table/BulkActionsDropdown';
@@ -7,6 +7,7 @@ import { HideColumnsDropdown } from 'Components/table/HideColumnsDropdown';
 import { TableSettingsDropdown } from './pagination/TableSettingsDropdown';
 import userEvent from '@testing-library/user-event';
 import type { GridApi } from 'ag-grid-enterprise';
+import * as focusFirstFocusableElementModule from 'Utils/focusFirstFocusableElement';
 
 describe('Table', () => {
   test('renders table container', () => {
@@ -1235,6 +1236,125 @@ describe('Table', () => {
     });
   });
 
+  describe('SelectDropdownCellRenderer', () => {
+    const options = [{ label: 'Option 1', value: 'option1' }, { label: 'Option 2', value: 'option2' }];
+    const columnDefs = [{
+      field: 'selectField',
+      headerName: 'Select Field',
+      cellRenderer: 'dsSelectDropdownCellRenderer',
+      cellRendererParams: { options: options, placeholder: 'Placeholder Text' },
+    }];
+
+    test('renders with placeholder', () => {
+      const rowData = [{ selectField: null }];
+      render(
+        <Table
+          columnDefs={columnDefs}
+          rowData={rowData}
+        />,
+      );
+      expect(screen.getByText('Placeholder Text')).toBeInTheDocument();
+    });
+
+    test('renders with option', () => {
+      const rowData = [{ selectField: 'option1' }];
+      render(
+        <Table
+          columnDefs={columnDefs}
+          rowData={rowData}
+        />,
+      );
+      expect(screen.getByText('Option 1')).toBeInTheDocument();
+    });
+
+    test('renders with value not in options as raw string', () => {
+      const rowData = [{ selectField: 'unknown-value' }];
+      render(
+        <Table
+          columnDefs={columnDefs}
+          rowData={rowData}
+        />,
+      );
+      expect(screen.getByText('unknown-value')).toBeInTheDocument();
+    });
+
+    test('renders with empty string shows placeholder', () => {
+      const rowData = [{ selectField: '' }];
+      render(
+        <Table
+          columnDefs={columnDefs}
+          rowData={rowData}
+        />,
+      );
+      expect(screen.getByText('Placeholder Text')).toBeInTheDocument();
+    });
+
+    test('renders dropdown button variant in cell', () => {
+      const rowData = [{ selectField: 'option1' }];
+      const { container } = render(
+        <Table
+          columnDefs={columnDefs}
+          rowData={rowData}
+        />,
+      );
+      const dropdownButton = container.querySelector('.ds-table__select-dropdown-cell.ds-button--dropdown');
+      expect(dropdownButton).toBeInTheDocument();
+    });
+  });
+
+  describe('SelectDropdownCellEditor', () => {
+    const options = [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ];
+    const editableSelectColumnDefs = [{
+      field: 'selectField',
+      headerName: 'Select Field',
+      cellRenderer: 'dsSelectDropdownCellRenderer',
+      cellEditor: 'dsSelectDropdownCellEditor',
+      cellRendererParams: { options, placeholder: 'Placeholder Text' },
+      cellEditorParams: { options, placeholder: 'Placeholder Text' },
+      editable: true,
+    }];
+
+    async function renderAndStartEditing(rowData: { selectField: string }[]) {
+      let gridApi: GridApi | null = null;
+      render(
+        <Table
+          columnDefs={editableSelectColumnDefs}
+          rowData={rowData}
+          onGridReady={(e) => {
+            gridApi = e.api;
+          }}
+        />,
+      );
+      await waitFor(() => expect(gridApi).toBeTruthy());
+      await act(async () => {
+        gridApi!.startEditingCell({ rowIndex: 0, colKey: 'selectField' });
+      });
+      const editorWrapper = await waitFor(() => document.querySelector('.ds-table__select-dropdown-editor'));
+      return editorWrapper!.querySelector('button')!;
+    }
+
+    test('opens editor with dropdown; selecting option updates cell', async () => {
+      const trigger = await renderAndStartEditing([{ selectField: 'option1' }]);
+      expect(trigger).toHaveTextContent('Option 1');
+      await userEvent.click(trigger);
+      await userEvent.click(screen.getByText('Option 2'));
+      await waitFor(() => expect(screen.getByText('Option 2')).toBeInTheDocument());
+    });
+
+    test('Escape closes dropdown without changing value', async () => {
+      const trigger = await renderAndStartEditing([{ selectField: 'option1' }]);
+      await userEvent.click(trigger);
+      await waitFor(() => expect(screen.getByText('Option 2')).toBeInTheDocument());
+      await userEvent.keyboard('{Escape}');
+      expect(screen.queryByText('Option 2')).not.toBeInTheDocument();
+      expect(screen.getByText('Option 1')).toBeInTheDocument();
+    });
+  });
+
   describe('Cell Editing', () => {
     describe('with literal data values', () => {
       test('supports editing text fields', async () => {
@@ -1400,4 +1520,45 @@ describe('Table', () => {
       });
     });
   });
+
+  describe('supressCellFocusAndFocusFirstElement', () => {
+    const handleClick = vi.fn();
+    const columnDefs = [{
+      field: 'action',
+      headerName: 'Action',
+      cellRenderer: 'dsButtonCellRenderer',
+      cellRendererParams: {
+        supressCellFocusAndFocusFirstElement: true,
+      },
+    }];
+    const rowData = [{
+      action: {
+        children: 'Im a lovely button',
+        onClick: handleClick,
+      },
+    }];
+
+    test('setting supressCellFocusAndFocusFirstElement to true should sadd the ds-table__cell--supress-focus class', async () => {
+      render(<Table columnDefs={columnDefs} rowData={rowData} />);
+      await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+    });
+
+    test('setting supressCellFocusAndFocusFirstElement to true should suppress cell focus and focus the first element', async () => {
+      const focusFirstFocusableElementSpy = vi.spyOn(
+        focusFirstFocusableElementModule,
+        'focusFirstFocusableElement',
+      );
+      render(<Table columnDefs={columnDefs} rowData={rowData} />);
+      await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+      await waitFor(() => expect(screen.getByText('Im a lovely button')).toBeInTheDocument());
+      // first tab should focus the table heading
+      await userEvent.tab();
+      expect(screen.getByRole('columnheader')).toHaveFocus();
+      // second tab should focus the button bypassing the cell
+      await userEvent.tab();
+      expect(focusFirstFocusableElementSpy).toHaveBeenCalledTimes(1);
+      const button = screen.getByText('Im a lovely button');
+      expect(button).toHaveFocus();
+    });
+  });
 });

package/src/components/table/Table.tsx

@@ -1,6 +1,6 @@
 import { AllEnterpriseModule, ModuleRegistry, type GridApi } from 'ag-grid-enterprise';
 import { AgGridReact, type AgGridReactProps } from 'ag-grid-react';
-import { tableTheme } from './tableTheme';
+import { defaultTheme } from './theme/defaultTheme';
 import classNames from 'classnames';
 import { createContext, useRef, useState, type ReactNode } from 'react';
 import { TableFooter } from './TableFooter';
@@ -15,8 +15,13 @@ import { HideColumnsDropdown } from './HideColumnsDropdown';
 import { useTableSettings, type UseTableSettingsParams } from './useTableSettings';
 import { setAgGridLicenseKey } from 'Utils/setAgGridLicenseKey';
 import { toggleRowSelectionInCurrentRange } from './toggleRowSelectionInCurrentRange';
-import { defaultValueFormatter, DSDefaultColDef } from './DSDefaultColDef';
+import { defaultValueFormatter, DSDefaultColDef, shouldSuppressFocus } from './DSDefaultColDef';
 import { ButtonCellRenderer } from './cellRenderers/ButtonCellRenderer';
+import { InlineTextCellRenderer } from './cellRenderers/InlineTextCellRenderer';
+import { SelectDropdownCellRenderer } from './cellRenderers/SelectDropdownCellRenderer';
+import { SelectDropdownCellEditor } from './cellRenderers/SelectDropdownCellEditor';
+import { tidyTheme } from './theme/tidyTheme';
+import { focusFirstFocusableElement } from 'Utils/focusFirstFocusableElement';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type TableProps<TData = any> = {
@@ -29,6 +34,7 @@ type TableProps<TData = any> = {
   'headerTestId'?: string;
   'enableSimultaneousRangeAndRowSelection'?: boolean;
   'disableDragSelect'?: boolean;
+  'tableTheme'?: string;
 } & UseTableSettingsParams & AgGridReactProps<TData>;
 
 setAgGridLicenseKey();
@@ -75,6 +81,8 @@ export const Table = (props: TableProps) => {
     defaultColDef = {},
     context = {},
     components = {},
+    tableTheme,
+    onCellFocused,
     ...rest
   } = props;
 
@@ -100,6 +108,24 @@ export const Table = (props: TableProps) => {
 
   const { hasColumnBorders, tableSpacing } = settings;
 
+  const getTheme = () => {
+    if (tableTheme === 'tidy') {
+      return tidyTheme;
+    }
+    return defaultTheme.withParams({
+      headerRowBorder: hasColumnBorders,
+      rowBorder: hasColumnBorders,
+      wrapperBorder: hasColumnBorders,
+      columnBorder: hasColumnBorders,
+      spacing: {
+        [TABLE_SPACING.XS]: 0,
+        [TABLE_SPACING.S]: 'var(--spacing-xsmall)',
+        [TABLE_SPACING.M]: 'var(--spacing-small)',
+        [TABLE_SPACING.L]: 'var(--spacing-medium)',
+      }[tableSpacing],
+    });
+  };
+
   return (
     <GridApiContext.Provider value={gridApi}>
       <TableSettingsContext.Provider
@@ -126,22 +152,7 @@ export const Table = (props: TableProps) => {
             </TableHeader>
           )}
           <AgGridReact
-            // TODO: make this overridable when we come to do Tidy Table theming
-            theme={tableTheme.withParams({
-              headerRowBorder: hasColumnBorders,
-              rowBorder: hasColumnBorders,
-              wrapperBorder: hasColumnBorders,
-              columnBorder: hasColumnBorders,
-              spacing: {
-                // These are offset by one from the usual spacing tokens. We still use the token values to make spacing
-                // consistent with other parts of the DS, but --spacing-xsmall was too large for xsmall spacing, and so on
-                // for the other tokens
-                [TABLE_SPACING.XS]: 0,
-                [TABLE_SPACING.S]: 'var(--spacing-xsmall)',
-                [TABLE_SPACING.M]: 'var(--spacing-small)',
-                [TABLE_SPACING.L]: 'var(--spacing-medium)',
-              }[tableSpacing],
-            })}
+            theme={getTheme()}
             onGridReady={(event) => {
               const { api } = event;
               setGridApi(api);
@@ -162,6 +173,13 @@ export const Table = (props: TableProps) => {
                 onCellSelectionChanged(event);
               }
             }}
+            onCellFocused={(params) => {
+              if (shouldSuppressFocus(params) && document.activeElement) {
+                focusFirstFocusableElement(document.activeElement as HTMLElement);
+              }
+
+              onCellFocused?.(params);
+            }}
             defaultColDef={{ ...DSDefaultColDef, ...defaultColDef }}
             context={{
               settings,
@@ -169,6 +187,9 @@ export const Table = (props: TableProps) => {
             }}
             components={{
               dsButtonCellRenderer: ButtonCellRenderer,
+              dsInlineTextCellRenderer: InlineTextCellRenderer,
+              dsSelectDropdownCellRenderer: SelectDropdownCellRenderer,
+              dsSelectDropdownCellEditor: SelectDropdownCellEditor,
               ...components,
             }}
             {...rest}

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

@@ -1,4 +1,5 @@
 import type { CustomCellRendererProps } from 'ag-grid-react';
+import classNames from 'classnames';
 import { Button, type ButtonProps } from 'Components/button/Button';
 
 type ButtonCellRendererProps = CustomCellRendererProps & { value: ButtonProps };
@@ -21,5 +22,5 @@ export const ButtonCellRenderer = (props: ButtonCellRendererProps) => {
     childToRender = resolvedValue;
   }
 
-  return <Button {...value}>{childToRender}</Button>;
+  return <Button {...value} className={classNames('ds-button-cell-renderer', value.className)}>{childToRender}</Button>;
 };

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

@@ -0,0 +1,10 @@
+import type { CustomCellRendererProps } from 'ag-grid-react';
+
+type InlineTextCellRendererProps = CustomCellRendererProps & { value: string };
+
+export const InlineTextCellRenderer = (props: InlineTextCellRendererProps) => {
+  const { value, valueFormatted } = props;
+  const valueToRender = String(valueFormatted ?? value ?? '');
+
+  return <span className="ds-table__inline-text-cell">{valueToRender}</span>;
+};

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

@@ -0,0 +1,43 @@
+import { memo, useCallback, useRef } from 'react';
+import type { CustomCellEditorProps } from 'ag-grid-react';
+import { SelectDropdown } from 'Components/formField/inputs/selectDropdown/SelectDropdown';
+import type { SelectDropdownItemProps } from 'Components/formField/inputs/selectDropdown/items/item/SelectDropdownItem';
+import { PopupParentContext } from 'Utils/PopupParentContext';
+
+export type SelectDropdownCellEditorParams = {
+  options: SelectDropdownItemProps[];
+  placeholder?: string;
+};
+
+export const SelectDropdownCellEditor = memo((props: CustomCellEditorProps & SelectDropdownCellEditorParams) => {
+  const { value, onValueChange, stopEditing } = props;
+  const options = props.options ?? [];
+  const placeholder = props.placeholder ?? 'Select';
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  const initialSelectedValues = value != null && value !== '' ? [String(value)] : [];
+
+  const handleSelectionChange = useCallback(
+    (selected: string[]) => {
+      const newValue = selected.length > 0 ? selected[0] : '';
+      onValueChange(newValue);
+      stopEditing();
+    },
+    [onValueChange, stopEditing],
+  );
+
+  return (
+    <PopupParentContext.Provider value={wrapperRef}>
+      <div ref={wrapperRef} className="ds-table__select-dropdown-editor">
+        <SelectDropdown
+          options={options}
+          placeholder={placeholder}
+          initialSelectedValues={initialSelectedValues}
+          onSelectionChange={handleSelectionChange}
+        />
+      </div>
+    </PopupParentContext.Provider>
+  );
+});
+
+SelectDropdownCellEditor.displayName = 'SelectDropdownCellEditor';

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

@@ -0,0 +1,37 @@
+import type { CustomCellRendererProps } from 'ag-grid-react';
+import type { SelectDropdownItemProps } from 'Components/formField/inputs/selectDropdown/items/item/SelectDropdownItem';
+import { Button } from 'Components/button/Button';
+
+export type SelectDropdownCellRendererProps = CustomCellRendererProps & {
+  options?: SelectDropdownItemProps[];
+  placeholder?: string;
+};
+
+export const SelectDropdownCellRenderer = (props: SelectDropdownCellRendererProps) => {
+  const { value, valueFormatted, placeholder = 'Select' } = props;
+  const options = props.options ?? [];
+
+  const selectedValue = valueFormatted ?? value;
+  const valueStr = value != null && value !== '' ? String(value) : '';
+
+  const option = options.find((opt: SelectDropdownItemProps) => opt.value === valueStr);
+  const displayText = selectedValue != null && selectedValue !== ''
+    ? (option?.label ?? option?.value ?? String(selectedValue))
+    : placeholder;
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  return (
+    <Button
+      variant="dropdown"
+      iconRightName="chevron-down"
+      className="ds-table__select-dropdown-cell"
+      onMouseDown={handleMouseDown}
+    >
+      {displayText}
+    </Button>
+  );
+};

package/src/components/table/table.scss

@@ -1,4 +1,16 @@
 .ds-table {
+  &__inline-text-cell {
+    padding: var(--spacing-small) var(--spacing-medium);
+    border-radius: var(--form-field-radius);
+    border: var(--border-weight) solid var(--form-field-text-default-color-border);
+    background: var(--form-field-text-default-color-background);
+    color: var(--form-field-text-default-color-text);
+  }
+
+  &__select-dropdown-cell {
+    width: 100%;
+  }
+
   &__container {
     .ag-header-cell-resize {
       // AG-Grid gives these a z-index of 2 which interferes with our stacking elements
@@ -52,4 +64,8 @@
   &__cell--invalid {
     box-shadow: inset 0 0 0 2px var(--form-field-text-error-color-border);
   }
+}
+
+.ag-cell-focus.ds-table__cell--supress-focus:focus-within {
+  border-color: transparent;
 }

package/src/components/table/{tableTheme.ts → theme/baseThemeParams.ts}

@@ -1,8 +1,5 @@
-import { themeQuartz } from 'ag-grid-enterprise';
-
-export const tableTheme = themeQuartz.withParams({
+export const baseThemeParams = {
   accentColor: 'var(--color-brand-700)',
-  backgroundColor: 'var(--tables-ag-grid-rows-even-color-background)',
   borderColor: 'var(--tables-ag-grid-rows-color-border)',
   borderRadius: 'var(--border-radius-small)',
   checkboxBorderRadius: 'var(--border-radius-xsmall)',
@@ -13,6 +10,4 @@ export const tableTheme = themeQuartz.withParams({
   headerFontSize: 'var(--type-body-p-size)',
   headerFontWeight: 'var(--type-body-bold-weight)',
   iconButtonBorderRadius: 'var(--border-radius-round)',
-  oddRowBackgroundColor: 'var(--tables-ag-grid-rows-odd-color-background)',
-  invalidColor: 'var(--form-field-text-error-color-border)',
-});
+};

package/src/components/table/theme/defaultTheme.ts

@@ -0,0 +1,9 @@
+import { themeQuartz } from 'ag-grid-enterprise';
+import { baseThemeParams } from './baseThemeParams';
+
+export const defaultTheme = themeQuartz.withParams({
+  ...baseThemeParams,
+  backgroundColor: 'var(--tables-ag-grid-rows-even-color-background)',
+  oddRowBackgroundColor: 'var(--tables-ag-grid-rows-odd-color-background)',
+  invalidColor: 'var(--form-field-text-error-color-border)',
+});

package/src/components/table/theme/tidyTheme.ts

@@ -0,0 +1,10 @@
+import { themeQuartz } from 'ag-grid-enterprise';
+import { baseThemeParams } from './baseThemeParams';
+
+export const tidyTheme = themeQuartz.withParams({
+  ...baseThemeParams,
+  backgroundColor: 'var(--color-mono-white)',
+  rowBorder: false,
+  wrapperBorder: false,
+  headerBackgroundColor: 'var(--color-mono-white)',
+});

package/src/utils/focusFirstFocusableElement.test.ts

@@ -0,0 +1,150 @@
+import { describe, expect, test, vi, beforeEach, afterEach } from 'vitest';
+import { focusFirstFocusableElement } from './focusFirstFocusableElement';
+
+describe('focusFirstFocusableElement', () => {
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    vi.clearAllMocks();
+  });
+
+  test('does nothing when containerElementRef is null', () => {
+    const focusSpy = vi.spyOn(HTMLElement.prototype, 'focus');
+
+    focusFirstFocusableElement(null);
+
+    expect(focusSpy).not.toHaveBeenCalled();
+  });
+
+  test('does nothing when container has no focusable elements', () => {
+    container.innerHTML = '<div>No focusable elements</div>';
+    const focusSpy = vi.spyOn(HTMLElement.prototype, 'focus');
+
+    focusFirstFocusableElement(container);
+
+    expect(focusSpy).not.toHaveBeenCalled();
+  });
+
+  test('focuses the first button element', () => {
+    container.innerHTML = '<button>First Button</button><button>Second Button</button>';
+    const firstButton = container.querySelector('button') as HTMLElement;
+    const focusSpy = vi.spyOn(firstButton, 'focus');
+
+    focusFirstFocusableElement(container);
+
+    expect(focusSpy).toHaveBeenCalledTimes(1);
+  });
+
+  test('focuses the first input element', () => {
+    container.innerHTML = '<input type="text" /><input type="text" />';
+    const firstInput = container.querySelector('input') as HTMLElement;
+    const focusSpy = vi.spyOn(firstInput, 'focus');
+
+    focusFirstFocusableElement(container);
+
+    expect(focusSpy).toHaveBeenCalledTimes(1);
+  });
+
+  test('focuses the first link element', () => {
+    container.innerHTML = '<a href="#">First Link</a><a href="#">Second Link</a>';
+    const firstLink = container.querySelector('a') as HTMLElement;
+    const focusSpy = vi.spyOn(firstLink, 'focus');
+
+    focusFirstFocusableElement(container);
+
+    expect(focusSpy).toHaveBeenCalledTimes(1);
+  });
+
+  test('focuses the first select element', () => {
+    container.innerHTML = '<select><option>Option 1</option></select><select><option>Option 2</option></select>';
+    const firstSelect = container.querySelector('select') as HTMLElement;
+    const focusSpy = vi.spyOn(firstSelect, 'focus');
+
+    focusFirstFocusableElement(container);
+
+    expect(focusSpy).toHaveBeenCalledTimes(1);
+  });
+
+  test('focuses the first textarea element', () => {
+    container.innerHTML = '<textarea></textarea><textarea></textarea>';
+    const firstTextarea = container.querySelector('textarea') as HTMLElement;
+    const focusSpy = vi.spyOn(firstTextarea, 'focus');
+
+    focusFirstFocusableElement(container);
+
+    expect(focusSpy).toHaveBeenCalledTimes(1);
+  });
+
+  test('focuses element with tabindex attribute', () => {
+    container.innerHTML = '<div tabindex="0">Focusable div</div><div tabindex="1">Another focusable div</div>';
+    const firstDiv = container.querySelector('[tabindex]') as HTMLElement;
+    const focusSpy = vi.spyOn(firstDiv, 'focus');
+
+    focusFirstFocusableElement(container);
+
+    expect(focusSpy).toHaveBeenCalledTimes(1);
+  });
+
+  test('ignores disabled buttons', () => {
+    container.innerHTML = '<button disabled>Disabled</button><button>Enabled</button>';
+    const enabledButton = container.querySelector('button:not([disabled])') as HTMLElement;
+    const focusSpy = vi.spyOn(enabledButton, 'focus');
+
+    focusFirstFocusableElement(container);
+
+    expect(focusSpy).toHaveBeenCalledTimes(1);
+  });
+
+  test('ignores hidden inputs', () => {
+    container.innerHTML = '<input type="hidden" /><input type="text" />';
+    const textInput = container.querySelector('input[type="text"]') as HTMLElement;
+    const focusSpy = vi.spyOn(textInput, 'focus');
+
+    focusFirstFocusableElement(container);
+
+    expect(focusSpy).toHaveBeenCalledTimes(1);
+  });
+
+  test('ignores elements with tabindex="-1"', () => {
+    container.innerHTML = '<div tabindex="-1">Not focusable</div><div tabindex="0">Focusable</div>';
+    const focusableDiv = container.querySelector('[tabindex="0"]') as HTMLElement;
+    const focusSpy = vi.spyOn(focusableDiv, 'focus');
+
+    focusFirstFocusableElement(container);
+
+    expect(focusSpy).toHaveBeenCalledTimes(1);
+  });
+
+  test('focuses the first focusable element when multiple types exist', () => {
+    container.innerHTML = '<button>Button</button><input type="text" /><a href="#">Link</a>';
+    const firstButton = container.querySelector('button') as HTMLElement;
+    const focusSpy = vi.spyOn(firstButton, 'focus');
+
+    focusFirstFocusableElement(container);
+
+    expect(focusSpy).toHaveBeenCalledTimes(1);
+  });
+
+  test('focuses the first focusable element in nested structure', () => {
+    container.innerHTML = `
+      <div>
+        <div>Non-focusable</div>
+        <button>Nested Button</button>
+      </div>
+      <button>Outer Button</button>
+    `;
+    const nestedButton = container.querySelector('button') as HTMLElement;
+    const focusSpy = vi.spyOn(nestedButton, 'focus');
+
+    focusFirstFocusableElement(container);
+
+    expect(focusSpy).toHaveBeenCalledTimes(1);
+    expect(nestedButton.textContent).toBe('Nested Button');
+  });
+});

package/src/utils/focusFirstFocusableElement.ts

@@ -0,0 +1,21 @@
+const focusableElementsQuery = 'button:enabled, [href], input:not(input[type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])';
+
+export const focusFirstFocusableElement = (
+  containerElement: HTMLElement | null,
+) => {
+  if (
+    containerElement
+    && typeof containerElement.querySelector === 'function'
+  ) {
+    const firstFocusableElement = containerElement.querySelector(
+      focusableElementsQuery,
+    ) as HTMLElement;
+
+    if (
+      firstFocusableElement
+      && typeof firstFocusableElement.focus === 'function'
+    ) {
+      firstFocusableElement.focus();
+    }
+  }
+};

package/dist/components/table/tableTheme.d.ts

@@ -1,2 +0,0 @@
-export declare const tableTheme: import("ag-grid-enterprise").Theme<import("ag-grid-enterprise").ThemeDefaultParams>;
-//# sourceMappingURL=tableTheme.d.ts.map

package/dist/components/table/tableTheme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tableTheme.d.ts","sourceRoot":"","sources":["../../../src/components/table/tableTheme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,qFAerB,CAAC"}

package/dist/components/table/tableTheme.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tableTheme.js","sourceRoot":"","sources":["../../../src/components/table/tableTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEjD,MAAM,CAAC,MAAM,UAAU,GAAG,WAAW,CAAC,UAAU,CAAC;IAC/C,WAAW,EAAE,wBAAwB;IACrC,eAAe,EAAE,kDAAkD;IACnE,WAAW,EAAE,yCAAyC;IACtD,YAAY,EAAE,4BAA4B;IAC1C,oBAAoB,EAAE,6BAA6B;IACnD,YAAY,EAAE,KAAK;IACnB,UAAU,EAAE,6BAA6B;IACzC,QAAQ,EAAE,yBAAyB;IACnC,SAAS,EAAE,kCAAkC;IAC7C,cAAc,EAAE,yBAAyB;IACzC,gBAAgB,EAAE,8BAA8B;IAChD,sBAAsB,EAAE,4BAA4B;IACpD,qBAAqB,EAAE,iDAAiD;IACxE,YAAY,EAAE,2CAA2C;CAC1D,CAAC,CAAC"}