Run 4: Cell Editor Upgrade — Implementation Summary

Date: 2026-03-19 Status: Complete Branch: jmpicnic/component-consolidation

What Was Done

Tasks Completed

All 11 implementation tasks (4.1 – 4.11) completed. Tasks 4.12 (Playwright MCP visual verification) and 4.13 (VRT baseline) deferred — Storybook was not started during this session.

Task	Status	Notes
4.1	Done	`atoms/grid/select/select-cell-editor.tsx` created
4.2	Done	`SelectOptions = SelectOption[] \| Record<string,string>` with `normalizeOptions()` helper
4.3	Done	`SelectCellEditorStaticConfig`, `SelectCellEditorProps`, `SelectCellEditorHandle`, `createSelectCellEditor` factory
4.4	Done	`atoms/grid/select/select-cell-display.tsx` created
4.5	Done	`select.stories.tsx`: Default, WithManyOptions, KeyboardNavigation, BothFormats
4.6	Done	`select.test.tsx`: 23 tests covering all required scenarios
4.7	Done	KeyboardNavigation story has step DSL play function
4.8	Done	All 4 consumer files updated
4.9	Done	`atoms/grid/enum/` deleted
4.10	Done	`canary.ts` updated to export SelectCellEditor/SelectCellDisplay/factory/types
4.11	Done	All checks pass: lint, tsc, tests, zero enum refs

Files Created

src/components/canary/atoms/grid/select/select-cell-editor.tsx
src/components/canary/atoms/grid/select/select-cell-display.tsx
src/components/canary/atoms/grid/select/index.ts
src/components/canary/atoms/grid/select/select.stories.tsx
src/components/canary/atoms/grid/select/select.test.tsx

Files Modified

src/components/canary/molecules/data-grid/data-grid.stories.tsx — replaced EnumCellDisplay/createEnumCellEditor with SelectCellDisplay/createSelectCellEditor; added cellEditorPopup: true to the status column
src/canary-refactor/components/columnPresets.tsx — replaced EnumCellDisplay import/usages with SelectCellDisplay
src/docs/workflows/using-the-design-system.mdx — updated component list in HTML table
src/canary.ts — replaced enum cell exports with select cell exports

Files Deleted

src/components/canary/atoms/grid/enum/enum-cell-editor.tsx
src/components/canary/atoms/grid/enum/enum-cell-display.tsx
src/components/canary/atoms/grid/enum/enum.stories.tsx
src/components/canary/atoms/grid/enum/enum.test.tsx
src/components/canary/atoms/grid/enum/index.ts

Decisions Made During Implementation

1. `normalizeOptions` exported from barrel

The plan specified normalizeOptions as an internal helper. During implementation it was added to the barrel exports (index.ts) to allow consumer code to normalize options for display lookups without duplicating the logic. This is a minor addendum — the function is useful for any code that builds column definitions with SelectCellDisplay.

2. `cellEditorPopup: true` added to data-grid stories

When migrating the data-grid stories AllCellTypes story from createEnumCellEditor to createSelectCellEditor, I added cellEditorPopup: true to the status column definition. The old EnumCellEditor used a native <select> element that renders inline; the new SelectCellEditor renders a custom popup that requires popup positioning. Without cellEditorPopup: true, the popup would clip inside the cell.

3. `beforeAll` scrollIntoView mock in test file

jsdom does not implement Element.prototype.scrollIntoView. The component calls it in a useEffect after the highlighted index changes. Added window.HTMLElement.prototype.scrollIntoView = vi.fn() in a beforeAll block in the test file (not in the shared vitest setup) to keep the mock scoped to this component’s test.

4. Generic type parameter dropped from display component

EnumCellDisplay had a generic <V extends string> parameter, which provided type-safe constrained values. SelectCellDisplay uses string | null for the value type — no generic needed since the options format is already flexible (SelectOptions). The data-grid stories used EnumCellDisplay<StatusEnum> which was updated to plain SelectCellDisplay (the type constraint was a TypeScript nicety, not a runtime safety feature).

Verification Gate Results

Check	Result
`npm run lint`	Pass (0 errors, 0 warnings)
`npx tsc --noEmit`	Pass
`npm run test`	Pass (1031/1031 tests pass, 82 test files)
No `EnumCellEditor` refs in canary code	0 matches
`canary.ts` exports `SelectCellEditor`	Confirmed
`atoms/grid/enum/` directory deleted	Confirmed DELETED
`extras/atoms/grid/enum/` untouched	Confirmed EXISTS