Run 4: Cell Editor Upgrade — Byproducts

Discovered Issues

Issue 1: item-grid.tsx had quote style lint errors

src/components/canary/organisms/item-grid/item-grid.tsx had two double-quoted string literals where single quotes were required (lines 114 and 384). These were pre-existing lint failures that surface now because npm run lint --max-warnings 0 is strict. Fixed by eslint --fix during the lint pass for the select atom files. The items were unrelated to Run 4 but were in the same lint run, so they were corrected opportunistically.

Impact: None on functionality. The fix was safe and minimal (string quote style only).

Issue 2: EnumCellDisplay generic type parameter in data-grid stories

EnumCellDisplay<StatusEnum> used TypeScript generics to constrain the value to known enum keys. SelectCellDisplay doesn’t carry this generic — it accepts string | null. The AllCellTypes story’s statusField column renderer was updated to use the unparameterized SelectCellDisplay. Run-time behavior is identical; the TypeScript constraint was cosmetic at the story level.

Impact: Marginally reduced type safety at the story layer. Not a concern for production column definitions, which should be authored with explicit value type constraints in ColDef<T>.

Issue 3: cellEditorPopup missing from existing enum column in data-grid stories

createEnumCellEditor used a native <select> element that edited inline (no popup). The migration to createSelectCellEditor required adding cellEditorPopup: true to the column definition. This is a behavioral change: the editor now opens as a floating popup rather than an inline control, matching the intended UX described in the plan.

Impact: Visual change in existing AllCellTypes story. The popup is positioned by AG Grid’s built-in popup mechanism. Anyone who had screenshots of the AllCellTypes story showing the native select will see a different appearance. VRT baselines for this story should be regenerated if they exist.

TODOs for Subsequent Runs

TODO-1: VRT baselines for SelectCellEditor popup (Task 4.13)

The plan calls for capturing VRT baselines for the SelectCellEditor popup story. This was deferred because it requires a running Storybook instance and Playwright. Should be done as part of Run 4.12/4.13 or at the start of Run 5.

Command: npx playwright test --project=vrt --grep "SelectCellEditor"

TODO-2: VRT baselines for data-grid AllCellTypes story regression

The AllCellTypes story now shows a custom popup instead of a native select when the Status column is edited. If VRT baselines exist for this story, they are now stale. Run ./tools/generate-vrt-baselines.sh or regenerate the specific baseline for DataGrid/AllCellTypes.

TODO-3: normalizeOptions export from barrel

normalizeOptions was promoted to a barrel export from index.ts. If future runs add more cell editor components that need to normalize options, the shared helper is available. Consider whether it belongs in a src/utils/ location or remains co-located with SelectCellEditor. Low priority — current placement is acceptable.

TODO-4: molecules/item-grid/select-cell-editor.tsx is now a duplicate

The source molecule at src/components/canary/molecules/item-grid/select-cell-editor.tsx (the Run 3 deliverable) still exists and is no longer the canonical location. It is not imported by anything — the canonical atom is now at atoms/grid/select/. This file should be removed or updated to re-export from the atom when the item-grid organism integration work (Run 6) is done.

Observations

• The SelectCellEditor from callil is a significant UX improvement over the old EnumCellEditor. The native <select> had OS-native styling and no keyboard-cycling wrap-around. The new component has consistent styling with the design system (bg-popover, bg-accent for highlights) and full keyboard wrapping.
• The useGridCellEditor hook (ag-grid-react) needs to be mocked in vitest. The current approach (vi.mock('ag-grid-react', ...)) in the test file is consistent with how other AG Grid components could be tested if they used useGridCellEditor.
• The onValueChange prop in SelectCellEditorProps is typed as (value: string | null) => void. The factory’s createSelectCellEditor result type is React.ComponentType<Omit<SelectCellEditorProps, keyof SelectCellEditorStaticConfig>>, which means consumers must pass value, onValueChange, and stopEditing at runtime. AG Grid injects these via ICellEditorParams when cellEditorPopup: true is set and the component is registered as a cellEditor.