@arbor-education/design-system.components 0.25.6 → 0.25.7

package/src/components/row/row.scss

@@ -61,6 +61,16 @@
     }
   }
 
+  &__placeholder {
+    flex-grow: 1;
+    flex-basis: 70%;
+    font-style: italic;
+
+    &:has(+ .ds-row__note) {
+      flex-basis: 50%;
+    }
+  }
+
   &__note {
     font-style: italic;
     flex-basis: 20%;

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

@@ -211,6 +211,14 @@ const meta = {
         defaultValue: { summary: 'false' },
       },
     },
+    onCloseAutoFocus: {
+      control: false,
+      description: 'Called when focus is about to return to the ag-grid cell after the dropdown closes (e.g. after selecting an option). Call `event.preventDefault()` to stop radix\'s default restore-to-cell behaviour and move focus elsewhere yourself.',
+      table: {
+        type: { summary: '(event: Event) => void' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
   },
 } satisfies Meta<typeof SelectDropdownCellRenderer>;
 
@@ -718,3 +726,62 @@ const columnDefs = [
   },
   '(fillCell + colored) Marksheet with grade-driven cell colours. Each cell uses `backgroundColor` (derived per-row from the current grade) and `fillCell: true` so the colour spans the cell edge-to-edge, plus `cellStyle: { padding: 0 }` to strip ag-grid\'s default cell padding. `iconClickOnly: true` is set so cell selection works — click anywhere in a cell to select it (or shift/drag for a range), and only the chevron icon opens the grade picker. Text colour auto-switches between dark and white for legibility against each background.',
 );
+
+export const CustomCloseFocus: Story = withDescription(
+  {
+    parameters: {
+      controls: { disable: true },
+      docs: {
+        source: {
+          language: 'tsx',
+          code: `
+import { Table } from '@arbor-education/design-system.components';
+
+const columnDefs = [
+  { field: 'name', headerName: 'Name', flex: 2 },
+  {
+    field: 'status',
+    headerName: 'Status',
+    cellRenderer: 'dsSelectDropdownCellRenderer',
+    cellRendererParams: {
+      options: statusOptions,
+      onCloseAutoFocus: (event) => {
+        event.preventDefault();
+        window.alert('Dropdown closed — running custom focus handler');
+      },
+    },
+  },
+];
+
+<Table rowData={rowData} columnDefs={columnDefs} domLayout="autoHeight" />
+`.trim(),
+        },
+      },
+    },
+    render: () => (
+      <Table
+        rowData={SELECT_IN_TABLE_DATA}
+        columnDefs={[
+          { field: 'name', headerName: 'Name', flex: 2 },
+          {
+            field: 'status',
+            headerName: 'Status',
+            flex: 1,
+            editable: false,
+            cellRenderer: 'dsSelectDropdownCellRenderer',
+            cellRendererParams: {
+              options: STATUS_OPTIONS,
+              onCloseAutoFocus: (event: Event) => {
+                event.preventDefault();
+                window.alert('Dropdown closed — running custom focus handler');
+              },
+            },
+          },
+        ]}
+        defaultColDef={{ flex: 1, minWidth: 120 }}
+        domLayout="autoHeight"
+      />
+    ),
+  },
+  'Passes `onCloseAutoFocus` via `cellRendererParams` to override what happens to focus when the dropdown closes. Open a Status dropdown and pick an option (or press Escape) — instead of radix restoring focus to the cell, the handler calls `event.preventDefault()` and fires a `window.alert`. In a real app you would move focus to a specific element here rather than alert.',
+);

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

@@ -52,6 +52,7 @@ export const SelectDropdownCellRenderer = (
     backgroundColor,
     fillCell = false,
     iconClickOnly = false,
+    onCloseAutoFocus,
   } = props;
 
   const textContrast = backgroundColor ? getTextContrast(backgroundColor) : null;
@@ -113,6 +114,7 @@ export const SelectDropdownCellRenderer = (
         onOpenChange={setIsOpen}
         multiple={false}
         iconClickOnly={iconClickOnly}
+        onCloseAutoFocus={onCloseAutoFocus}
         onSelectionChange={(newValue) => {
           if (column && newValue[0] != null) {
             const selectedOption = rawOptions.find(