@rozie-ui/data-table-solid 0.1.0 → 0.2.0

package/src/DataTable.tsx

@@ -2,7 +2,7 @@ import type { JSX } from 'solid-js';
 import { Show, createEffect, createSignal, mergeProps, on, onCleanup, onMount, splitProps, untrack } from 'solid-js';
 import { Key } from '@solid-primitives/keyed';
 import { __rozieInjectStyle, createControllableSignal, parseInlineStyle, rozieAttr, rozieClass, rozieContext, rozieDisplay } from '@rozie/runtime-solid';
-import Popover from './Popover';
+import Popover from '@rozie-ui/popover-solid';
 import { createTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, getPaginationRowModel, getExpandedRowModel, getGroupedRowModel,
 // Faceted filtering (phase 50 reqs 8-9, D-03). All three are supplied UNCONDITIONALLY
 // (mirrors the expand/group models) — inert until a consumer READS a column facet via the
@@ -355,7 +355,7 @@ interface SelectCellSlotCtx { row: any; checked: any; toggle: any; }
 
 interface CellSlotCtx { columnId: any; column: any; row: any; value: any; }
 
-interface EditorSlotCtx { columnId: any; column: any; row: any; value: any; commit: any; cancel: any; }
+interface EditorSlotCtx { columnId: any; column: any; row: any; value: any; commit: any; cancel: any; autofocus: any; }
 
 interface DetailSlotCtx { row: any; }
 
@@ -565,7 +565,7 @@ export interface DataTableHandle {
 }
 
 export default function DataTable(_props: DataTableProps): JSX.Element {
-  const _merged = mergeProps({ columns: (() => [])(), selectionMode: 'none', manual: false, rowCount: null, pageCount: null, expandable: false, getSubRows: null, groupable: false, stickyHeader: false, interactionMode: 'table', singleClickEdit: false, undoable: false, undoLimit: 100, virtual: false, estimateRowHeight: 40, maxHeight: '' }, _props);
+  const _merged = mergeProps({ columns: (() => [])() as any[], selectionMode: 'none', manual: false, rowCount: null, pageCount: null, expandable: false, getSubRows: null, groupable: false, stickyHeader: false, interactionMode: 'table', singleClickEdit: false, undoable: false, undoLimit: 100, virtual: false, estimateRowHeight: 40, maxHeight: '' }, _props);
   const [local, attrs] = splitProps(_merged, ['data', 'columns', 'selectionMode', 'sorting', 'globalFilter', 'columnFilters', 'pagination', 'manual', 'rowCount', 'pageCount', 'expandable', 'expanded', 'getSubRows', 'groupable', 'grouping', 'rowSelection', 'columnVisibility', 'columnSizing', 'columnOrder', 'columnPinning', 'stickyHeader', 'interactionMode', 'singleClickEdit', 'undoable', 'undoLimit', 'virtual', 'estimateRowHeight', 'maxHeight', 'children', 'ref']);
   const resolved = () => local.children;
   onMount(() => { local.ref?.({ sortColumn, clearSorting, toggleRowExpanded, expandAll, collapseAll, getExpandedRows, applyGrouping, clearGrouping, getFacetedUniqueValues, getFacetedMinMaxValues, getColumnDefs, toggleAllRows, clearSelection, getSelectedRows, setPage, setRowsPerPage, toggleColumnVisibility, applyColumnOrder, resetColumnSizing, pinColumn, focusCell, getActiveCell, clearActiveCell, getRowIndexRelativeToPage, editCell, commitEditing, editRow, getSelectedRange, cut, undo, redo, canUndo, canRedo, clearHistory }); });
@@ -579,8 +579,8 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     pageIndex: 0,
     pageSize: 10
   }))());
-  const [expanded, setExpanded] = createControllableSignal<Record<string, any> | boolean>(_props as unknown as Record<string, unknown>, 'expanded', null);
-  const [grouping, setGrouping] = createControllableSignal<any[]>(_props as unknown as Record<string, unknown>, 'grouping', null);
+  const [expanded, setExpanded] = createControllableSignal<Record<string, any> | boolean | null>(_props as unknown as Record<string, unknown>, 'expanded', null);
+  const [grouping, setGrouping] = createControllableSignal<any[] | null>(_props as unknown as Record<string, unknown>, 'grouping', null);
   const [rowSelection, setRowSelection] = createControllableSignal<Record<string, any>>(_props as unknown as Record<string, unknown>, 'rowSelection', (() => ({}))());
   const [columnVisibility, setColumnVisibility] = createControllableSignal<Record<string, any>>(_props as unknown as Record<string, unknown>, 'columnVisibility', (() => ({}))());
   const [columnSizing, setColumnSizing] = createControllableSignal<Record<string, any>>(_props as unknown as Record<string, unknown>, 'columnSizing', (() => ({}))());
@@ -630,6 +630,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   const [draftValue, setDraftValue] = createSignal<any>(null);
   const [invalidMsg, setInvalidMsg] = createSignal('');
   const [editVer, setEditVer] = createSignal(0);
+  const [editFocusColId, setEditFocusColId] = createSignal<any>(null);
   const [editingRowIndex, setEditingRowIndex] = createSignal<any>(null);
   const [rowDraft, setRowDraft] = createSignal<Record<string, any>>({});
   const [rangeAnchor, setRangeAnchor] = createSignal<any>(null);
@@ -2605,15 +2606,9 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   function bodyCellStyle(row: any, colId: any) {
     const base = pinStyle(colId);
     if (isExpanderColumn(colId) && row && row.depth) {
+      // Only the expander column indents (the tree affordance lives here).
       const pad = 'padding-left:' + (0.5 + row.depth * 1.25) + 'rem';
-      // pinStyle() already ends with ';', so append `pad` directly — inserting a
-      // second ';' produces a `;;` empty declaration. Browsers tolerate that in a
-      // raw style attribute (React/Vue/Svelte/Lit) and Solid's cssText path does
-      // too, but Angular's [style] binding parses the string via ɵɵstyleMap and
-      // DROPS the declaration following the empty one — so the depth padding-left
-      // silently vanished on Angular only. Emit a single, well-formed separator.
-      const sep = base.endsWith(';') ? '' : ';';
-      return base ? base + sep + pad : pad;
+      return base ? base + pad : pad;
     }
     return base;
   }
@@ -5169,8 +5164,18 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // draft (selecting the seeded char makes the next keystroke replace it: Zeta → eta).
   // beginEdit threads `seed == null` so a seeded entry skips the select and the caret sits
   // AFTER the seeded char; every other caller keeps the default select-all.
+  // Editor-owns-focus contract (quick 260711-i5m): REVERTS the g52 shadow-piercing helper
+  // (commit 5fa30045) that recursed into descendant shadow roots. Built-in editors are
+  // host-DOM — the plain direct query resolves them on all 6 targets (no shadow to cross). A
+  // #editor DROP-IN now owns its OWN focus via the reactive `autofocus` prop (EditorText's
+  // $onMount + lazy $watch), so the host never needs to reach across a Lit drop-in's nested
+  // shadow root at all — see the !hasEditorSlot gate below, which skips the host focus call
+  // entirely for a drop-in target.
   function focusEditorWhenReady(selectAll = true) {
     if (!gridRoot) return;
+    // Editor-owns-focus contract: when the CURRENT focus target is a #editor drop-in, the host
+    // does NOT reach into its DOM — the drop-in self-focuses via its own autofocus prop.
+    if (editFocusColId() != null && hasEditorSlot(editFocusColId())) return;
     let attempts = 0;
     const tryFocus = () => {
       const el = gridRoot ? gridRoot.querySelector('[data-editing-cell]') : null;
@@ -5246,6 +5251,10 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     setDraftValue(seed != null ? seed : cellValueAt(rowIndex, colIndex));
     setActiveInControl(true);
     setEditVer(editVer() + 1);
+    // Editor-owns-focus contract (quick 260711-i5m): THIS cell's column is the current
+    // focus target — editorAutofocusFor derives the reactive `autofocus` #editor scope prop
+    // from it. Cleared on endEdit.
+    setEditFocusColId(colId);
     // B2: a seeded (type-to-edit) entry must NOT select-all — keep the caret after the
     // seeded char so subsequent typing appends instead of replacing it.
     focusEditorWhenReady(seed == null);
@@ -5300,6 +5309,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     setInvalidMsg('');
     setActiveInControl(false);
     setEditVer(editVer() + 1);
+    setEditFocusColId(null);
   }
 
   // endRowEdit: tear down full-row edit (shared by commitRow/cancelRow). Clears the row
@@ -5311,6 +5321,23 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     setInvalidMsg('');
     setActiveInControl(false);
     setEditVer(editVer() + 1);
+    setEditFocusColId(null);
+  }
+
+  // editorAutofocusFor (quick 260711-i5m, editor-owns-focus contract): the reactive `autofocus`
+  // #editor scope prop for a given (colId, rowIndex) — true for EXACTLY the current focus-
+  // target cell, re-deriving on every editVer bump (mirrors isEditing's reactive gate so
+  // Svelte/Solid re-run this per-cell on a foreign-slot-callback state mutation). Works for
+  // BOTH single-cell ($data.editingRow) and row mode ($data.editingRowIndex) since
+  // $data.editFocusColId is set by both beginEdit and beginRowEdit/commitRow/rowEditTab.
+  function editorAutofocusFor(colId: any, rowIndex: any) {
+    if (editVer() < 0) return false;
+    if (editingRowIndex() != null) {
+      if (editingRowIndex() !== rowIndex) return false;
+    } else {
+      if (editingRow() !== rowIndex) return false;
+    }
+    return editFocusColId() != null && editFocusColId() === colId;
   }
 
   // B3: coerce the committed value by the column's built-in editor type at the single
@@ -5528,8 +5555,15 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // focuses its [data-editing-cell] control. Bounded rAF-poll (mirrors focusEditorWhenReady)
   // so a React re-render that recreates the input across the focus call still lands it. select-
   // all on text/number editors (a no-op try/catch on select/checkbox).
+  // Editor-owns-focus contract (quick 260711-i5m): when the TARGET column is a #editor
+  // drop-in, the host does NOT reach into its DOM (early return, before starting the rAF poll
+  // at all) — the drop-in self-focuses via its own reactive `autofocus` prop, which the caller
+  // (commitRow's B22 reject path / rowEditTab) already flips via $data.editFocusColId. Built-in
+  // columns are unaffected (hasEditorSlot is false for them) — unchanged host direct-focus.
   function focusRowEditorAt(rowIndex: any, colIndex: any) {
     if (!gridRoot) return;
+    const colId = columnIdAt(rowIndex, colIndex);
+    if (colId != null && hasEditorSlot(colId)) return;
     let attempts = 0;
     const tryFocus = () => {
       const cellEl = resolveCellEl(String(rowIndex), colIndex);
@@ -5581,6 +5615,11 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     setEditingRowIndex(rowIndex);
     setActiveInControl(true);
     setEditVer(editVer() + 1);
+    // Editor-owns-focus contract (quick 260711-i5m): the row's FIRST editable column is the
+    // initial focus target — editorAutofocusFor derives the reactive `autofocus` #editor scope
+    // prop from it (a built-in column is also host-focused below via focusEditorWhenReady; a
+    // drop-in column self-focuses via its own $onMount, gated off the host reach-in in Task 3).
+    setEditFocusColId(editable[0].colId);
     focusEditorWhenReady();
   }
 
@@ -5613,9 +5652,18 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       const err = runValidator(ec.colId, coerceCellValue(ec.colId, draft[ec.colId]), rowOriginal);
       if (err !== true) {
         setInvalid(err);
+        // Editor-owns-focus contract (quick 260711-i5m): the OFFENDING column becomes the new
+        // reactive focus target BEFORE the host-focus call below — a #editor drop-in already
+        // mounted (full-row edit opens every editable cell at once) picks this up via its own
+        // lazy $watch on the `autofocus` scope prop flipping false→true. Bump editVer so the
+        // coarse-render targets (React/Vue/Angular/Svelte) re-derive the slot binding (Solid's
+        // fine-grained accessor re-runs without the bump, but the bump keeps all 6 in lockstep).
+        setEditFocusColId(ec.colId);
+        setEditVer(editVer() + 1);
         // B22: focus the OFFENDING column's editor (the one whose validator rejected), NOT
         // unconditionally the first editor (focusEditorWhenReady resolves the first
         // [data-editing-cell] in DOM order). ec.colIndex is the offending cell's visible col.
+        // Gated (Task 3) so a #editor drop-in self-focuses instead of a host DOM reach-in.
         focusRowEditorAt(rowIndex, ec.colIndex);
         return false;
       }
@@ -5894,6 +5942,11 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     if (pos < 0) pos = 0;
     const len = cols.length;
     const nextPos = backward ? (pos - 1 + len) % len : (pos + 1) % len;
+    // Editor-owns-focus contract (quick 260711-i5m): the Tab target becomes the new reactive
+    // focus target BEFORE the host-focus call below, so Tab onto an already-mounted #editor
+    // drop-in (row mode) also refocuses it via its own lazy $watch.
+    setEditFocusColId(editable[nextPos].colId);
+    setEditVer(editVer() + 1);
     focusRowEditorAt(rowIndex, cols[nextPos]);
   }
 
@@ -6426,7 +6479,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
               {<Show when={hasEditorSlot(cell().column.id)} fallback={<Show when={editorTypeOf(cell().column.id) === 'number'} fallback={<Show when={editorTypeOf(cell().column.id) === 'select'} fallback={<Show when={editorTypeOf(cell().column.id) === 'checkbox'} fallback={<input type="text" data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" />}><input type="checkbox" data-editing-cell="" class={"rdt-cell-editor"} checked={editorCheckedFor(cell().column.id)} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorCheckbox(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event: Event & { currentTarget: HTMLSelectElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="">
                 <Key each={editorOptionsOf(cell().column.id) as readonly any[]} by={(opt) => opt.value}>{(opt) => <option value={rozieAttr(opt().value)} data-rozie-s-d5dcab4c="">{rozieDisplay(opt().label)}</option>}</Key>
               </select></Show>}><input type="number" data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-                {(_props.editorSlot ?? _props.slots?.['editor'])?.({ columnId: cell().column.id, column: cell().column, row: row().original, value: editorValueFor(cell().column.id), commit: editorCommitFor(cell().column.id), cancel: editorCancelFor() })}
+                {(_props.editorSlot ?? _props.slots?.['editor'])?.({ columnId: cell().column.id, column: cell().column, row: row().original, value: editorValueFor(cell().column.id), commit: editorCommitFor(cell().column.id), cancel: editorCancelFor(), autofocus: editorAutofocusFor(cell().column.id, rowIndexOf(row())) })}
               </span></Show>}</span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               <button type="button" data-expander="" aria-expanded={!!rowIsExpanded(row())} aria-label={rozieAttr(rowIsExpanded(row()) ? 'Collapse group' : 'Expand group')} class={"rdt-expander rdt-group-toggle"} onClick={($event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onToggleExpand(row(), $event); }} data-rozie-s-d5dcab4c="">{rozieDisplay(rowIsExpanded(row()) ? '▾' : '▸')}</button>
               <span class={"rdt-group-value"} data-rozie-s-d5dcab4c="">
@@ -6499,7 +6552,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
               {<Show when={hasEditorSlot(cell().column.id)} fallback={<Show when={editorTypeOf(cell().column.id) === 'number'} fallback={<Show when={editorTypeOf(cell().column.id) === 'select'} fallback={<Show when={editorTypeOf(cell().column.id) === 'checkbox'} fallback={<input type="text" data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" />}><input type="checkbox" data-editing-cell="" class={"rdt-cell-editor"} checked={editorCheckedFor(cell().column.id)} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorCheckbox(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event: Event & { currentTarget: HTMLSelectElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="">
                 <Key each={editorOptionsOf(cell().column.id) as readonly any[]} by={(opt) => opt.value}>{(opt) => <option value={rozieAttr(opt().value)} data-rozie-s-d5dcab4c="">{rozieDisplay(opt().label)}</option>}</Key>
               </select></Show>}><input type="number" data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-                {(_props.editorSlot ?? _props.slots?.['editor'])?.({ columnId: cell().column.id, column: cell().column, row: wr().row.original, value: editorValueFor(cell().column.id), commit: editorCommitFor(cell().column.id), cancel: editorCancelFor() })}
+                {(_props.editorSlot ?? _props.slots?.['editor'])?.({ columnId: cell().column.id, column: cell().column, row: wr().row.original, value: editorValueFor(cell().column.id), commit: editorCommitFor(cell().column.id), cancel: editorCancelFor(), autofocus: editorAutofocusFor(cell().column.id, wr().vi.index) })}
               </span></Show>}</span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               <button type="button" data-expander="" aria-expanded={!!rowIsExpanded(wr().row)} aria-label={rozieAttr(rowIsExpanded(wr().row) ? 'Collapse group' : 'Expand group')} class={"rdt-expander rdt-group-toggle"} onClick={($event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onToggleExpand(wr().row, $event); }} data-rozie-s-d5dcab4c="">{rozieDisplay(rowIsExpanded(wr().row) ? '▾' : '▸')}</button>
               <span class={"rdt-group-value"} data-rozie-s-d5dcab4c="">

package/src/EditorSelect.tsx

@@ -35,7 +35,7 @@ interface EditorSelectProps {
 }
 
 export default function EditorSelect(_props: EditorSelectProps): JSX.Element {
-  const _merged = mergeProps({ columnId: '', column: null, row: null, value: null, commit: null, cancel: null, options: (() => [])() }, _props);
+  const _merged = mergeProps({ columnId: '', column: null, row: null, value: null, commit: null, cancel: null, options: (() => [])() as any[] }, _props);
   const [local, attrs] = splitProps(_merged, ['columnId', 'column', 'row', 'value', 'commit', 'cancel', 'options']);
 
   const [draft, setDraft] = createSignal('');

package/src/EditorText.tsx

@@ -1,5 +1,5 @@
 import type { JSX } from 'solid-js';
-import { createSignal, mergeProps, splitProps } from 'solid-js';
+import { createEffect, createSignal, mergeProps, on, onMount, splitProps, untrack } from 'solid-js';
 
 interface EditorTextProps {
   /**
@@ -26,13 +26,24 @@ interface EditorTextProps {
    * `() => void` — revert the edit and close the editor (from the `#editor` slot scope). Null-guarded at call sites.
    */
   cancel?: ((...args: unknown[]) => unknown) | null;
+  /**
+   * Focus this editor's primary input when true — the host sets it for the one editor that should hold focus; reactive.
+   */
+  autofocus?: boolean;
 }
 
 export default function EditorText(_props: EditorTextProps): JSX.Element {
-  const _merged = mergeProps({ columnId: '', column: null, row: null, value: null, commit: null, cancel: null }, _props);
-  const [local, attrs] = splitProps(_merged, ['columnId', 'column', 'row', 'value', 'commit', 'cancel']);
+  const _merged = mergeProps({ columnId: '', column: null, row: null, value: null, commit: null, cancel: null, autofocus: false }, _props);
+  const [local, attrs] = splitProps(_merged, ['columnId', 'column', 'row', 'value', 'commit', 'cancel', 'autofocus']);
 
   const [draft, setDraft] = createSignal('');
+  onMount(() => {
+    if (local.autofocus) inputElRef?.focus();
+  });
+  createEffect(on(() => (() => local.autofocus)(), (v) => untrack(() => ((v: any) => {
+    if (v) inputElRef?.focus();
+  })(v)), { defer: true }));
+  let inputElRef: HTMLElement | null = null;
 
   // Seed the draft once at setup from the incoming value (setup-once, NOT in the
   // template). Normalize null/undefined to '' so the input value binds to a string.
@@ -64,9 +75,15 @@ export default function EditorText(_props: EditorTextProps): JSX.Element {
     doCommit();
   }
 
+  // Editor-owns-focus contract: focus OUR OWN input when the host says we should hold focus.
+  // $onMount covers the initial open (autofocus already true on first render); the LAZY $watch
+  // (NOT { immediate: true } — an immediate watch fires PRE-mount, null ref on Lit/Solid) covers
+  // a REACTIVE refocus while already mounted (e.g. a row-mode validation failure that flips
+  // autofocus back onto this already-open drop-in).
+
   return (
     <>
-    <input type="text" data-editing-cell="" aria-label={local.columnId} class={"rdt-cell-editor"} value={draft()} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onInput($event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onKeydown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onBlur(); }} data-rozie-s-0d17f43a="" />
+    <input type="text" data-editing-cell="" aria-label={local.columnId} ref={(el) => { inputElRef = el as HTMLElement; }} class={"rdt-cell-editor"} value={draft()} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onInput($event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onKeydown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onBlur(); }} data-rozie-s-0d17f43a="" />
     </>
   );
 }

package/src/FilterSelect.tsx

@@ -27,7 +27,7 @@ interface FilterSelectProps {
 }
 
 export default function FilterSelect(_props: FilterSelectProps): JSX.Element {
-  const _merged = mergeProps({ columnId: '', column: null, value: null, setFilter: null, uniqueValues: (() => [])() }, _props);
+  const _merged = mergeProps({ columnId: '', column: null, value: null, setFilter: null, uniqueValues: (() => [])() as any[] }, _props);
   const [local, attrs] = splitProps(_merged, ['columnId', 'column', 'value', 'setFilter', 'uniqueValues']);
 
   // The <select> value binding coerced to a string. $props.value is typed `unknown`

package/src/GroupBar.tsx

@@ -81,7 +81,7 @@ interface GroupBarProps {
 }
 
 export default function GroupBar(_props: GroupBarProps): JSX.Element {
-  const _merged = mergeProps({ grouping: (() => [])(), groupableColumns: (() => [])(), applyGrouping: null, clearGrouping: null }, _props);
+  const _merged = mergeProps({ grouping: (() => [])() as any[], groupableColumns: (() => [])() as any[], applyGrouping: null, clearGrouping: null }, _props);
   const [local, attrs] = splitProps(_merged, ['grouping', 'groupableColumns', 'applyGrouping', 'clearGrouping']);
 
   const [draggingId, setDraggingId] = createSignal('');