@rozie-ui/data-table-lit 0.1.0 → 0.1.1

package/README.md

@@ -494,5 +494,5 @@ The `detail` (expandable rows), `groupBar` (grouping) and `filter` (faceted filt
 | filter | columnId, value, uniqueValues, minMax, setFilter |
 | selectCell | row, checked, toggle |
 | cell | columnId, column, row, value |
-| editor | columnId, column, row, value, commit, cancel |
+| editor | columnId, column, row, value, commit, cancel, autofocus |
 | detail | row |

package/dist/index.cjs

@@ -175,6 +175,7 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 		this._draftValue = (0, _lit_labs_preact_signals.signal)(null);
 		this._invalidMsg = (0, _lit_labs_preact_signals.signal)("");
 		this._editVer = (0, _lit_labs_preact_signals.signal)(0);
+		this._editFocusColId = (0, _lit_labs_preact_signals.signal)(null);
 		this._editingRowIndex = (0, _lit_labs_preact_signals.signal)(null);
 		this._rowDraft = (0, _lit_labs_preact_signals.signal)({});
 		this._rangeAnchor = (0, _lit_labs_preact_signals.signal)(null);
@@ -2476,6 +2477,7 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 		};
 		this.focusEditorWhenReady = (selectAll = true) => {
 			if (!this.gridRoot) return;
+			if (this._editFocusColId.value != null && this.hasEditorSlot(this._editFocusColId.value)) return;
 			let attempts = 0;
 			const tryFocus = () => {
 				const el = this.gridRoot ? this.gridRoot.querySelector("[data-editing-cell]") : null;
@@ -2526,6 +2528,7 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 			this._draftValue.value = seed != null ? seed : this.cellValueAt(rowIndex, colIndex);
 			this._activeInControl.value = true;
 			this._editVer.value = this._editVer.value + 1;
+			this._editFocusColId.value = colId;
 			this.focusEditorWhenReady(seed == null);
 		};
 		this.focusCellWhenReady = (row, col) => {
@@ -2562,6 +2565,7 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 			this._invalidMsg.value = "";
 			this._activeInControl.value = false;
 			this._editVer.value = this._editVer.value + 1;
+			this._editFocusColId.value = null;
 		};
 		this.endRowEdit = () => {
 			this._editingRowIndex.value = null;
@@ -2569,6 +2573,14 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 			this._invalidMsg.value = "";
 			this._activeInControl.value = false;
 			this._editVer.value = this._editVer.value + 1;
+			this._editFocusColId.value = null;
+		};
+		this.editorAutofocusFor = (colId, rowIndex) => {
+			if (this._editVer.value < 0) return false;
+			if (this._editingRowIndex.value != null) {
+				if (this._editingRowIndex.value !== rowIndex) return false;
+			} else if (this._editingRow.value !== rowIndex) return false;
+			return this._editFocusColId.value != null && this._editFocusColId.value === colId;
 		};
 		this.coerceCellValue = (colId, raw) => {
 			if (this.editorTypeOf(colId) !== "number") return raw;
@@ -2697,6 +2709,8 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 		};
 		this.focusRowEditorAt = (rowIndex, colIndex) => {
 			if (!this.gridRoot) return;
+			const colId = this.columnIdAt(rowIndex, colIndex);
+			if (colId != null && this.hasEditorSlot(colId)) return;
 			let attempts = 0;
 			const tryFocus = () => {
 				const cellEl = this.resolveCellEl(String(rowIndex), colIndex);
@@ -2737,6 +2751,7 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 			this._editingRowIndex.value = rowIndex;
 			this._activeInControl.value = true;
 			this._editVer.value = this._editVer.value + 1;
+			this._editFocusColId.value = editable[0].colId;
 			this.focusEditorWhenReady();
 		};
 		this.commitRow = () => {
@@ -2756,6 +2771,8 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 				const err = this.runValidator(ec.colId, this.coerceCellValue(ec.colId, draft[ec.colId]), rowOriginal);
 				if (err !== true) {
 					this.setInvalid(err);
+					this._editFocusColId.value = ec.colId;
+					this._editVer.value = this._editVer.value + 1;
 					this.focusRowEditorAt(rowIndex, ec.colIndex);
 					return false;
 				}
@@ -2925,6 +2942,8 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 			if (pos < 0) pos = 0;
 			const len = cols.length;
 			const nextPos = backward ? (pos - 1 + len) % len : (pos + 1) % len;
+			this._editFocusColId.value = editable[nextPos].colId;
+			this._editVer.value = this._editVer.value + 1;
 			this.focusRowEditorAt(rowIndex, cols[nextPos]);
 		};
 		this.onEditorKeyDown = (e) => {
@@ -4023,7 +4042,8 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
 			row: wr.row.original,
 			value: this.editorValueFor(cell.column.id),
 			commit: this.editorCommitFor(cell.column.id),
-			cancel: this.editorCancelFor()
+			cancel: this.editorCancelFor(),
+			autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)
 		}) : lit.html`<slot name="editor" data-rozie-params=${(() => {
 			try {
 				return JSON.stringify({
@@ -4032,7 +4052,8 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
 					row: wr.row.original,
 					value: this.editorValueFor(cell.column.id),
 					commit: this.editorCommitFor(cell.column.id),
-					cancel: this.editorCancelFor()
+					cancel: this.editorCancelFor(),
+					autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)
 				});
 			} catch {
 				return "{}";
@@ -4314,7 +4335,8 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
 			row: row.original,
 			value: this.editorValueFor(cell.column.id),
 			commit: this.editorCommitFor(cell.column.id),
-			cancel: this.editorCancelFor()
+			cancel: this.editorCancelFor(),
+			autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))
 		}) : lit.html`<slot name="editor" data-rozie-params=${(() => {
 			try {
 				return JSON.stringify({
@@ -4323,7 +4345,8 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
 					row: row.original,
 					value: this.editorValueFor(cell.column.id),
 					commit: this.editorCommitFor(cell.column.id),
-					cancel: this.editorCancelFor()
+					cancel: this.editorCancelFor(),
+					autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))
 				});
 			} catch {
 				return "{}";
@@ -4796,7 +4819,9 @@ let EditorText = class EditorText extends (0, _lit_labs_preact_signals.SignalWat
 		this.value = null;
 		this.commit = null;
 		this.cancel = null;
+		this.autofocus = false;
 		this._draft = (0, _lit_labs_preact_signals.signal)("");
+		this.__rozieFirstUpdateDone = false;
 		this._disconnectCleanups = [];
 		this._rozieTornDown = false;
 		this.onInput = (e) => {
@@ -4828,6 +4853,13 @@ let EditorText = class EditorText extends (0, _lit_labs_preact_signals.SignalWat
 	}
 	firstUpdated() {
 		this._draft.value = this.value != null ? String(this.value) : "";
+		if (this.autofocus) this._refInputEl?.focus();
+	}
+	updated(changedProperties) {
+		if (this.__rozieFirstUpdateDone && changedProperties.has("autofocus")) ((v) => {
+			if (v) this._refInputEl?.focus();
+		})(this.autofocus);
+		this.__rozieFirstUpdateDone = true;
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
@@ -4846,7 +4878,7 @@ let EditorText = class EditorText extends (0, _lit_labs_preact_signals.SignalWat
 			this.onKeydown($event);
 		}} @blur=${($event) => {
 			this.onBlur();
-		}} data-rozie-s-0d17f43a />
+		}} data-rozie-ref="inputEl" data-rozie-s-0d17f43a />
 `;
 	}
 };
@@ -4859,6 +4891,11 @@ __decorate([(0, lit_decorators_js.property)({ type: Object })], EditorText.proto
 __decorate([(0, lit_decorators_js.property)({ type: Object })], EditorText.prototype, "value", void 0);
 __decorate([(0, lit_decorators_js.property)({ type: Function })], EditorText.prototype, "commit", void 0);
 __decorate([(0, lit_decorators_js.property)({ type: Function })], EditorText.prototype, "cancel", void 0);
+__decorate([(0, lit_decorators_js.property)({
+	type: Boolean,
+	reflect: true
+})], EditorText.prototype, "autofocus", void 0);
+__decorate([(0, lit_decorators_js.query)("[data-rozie-ref=\"inputEl\"]")], EditorText.prototype, "_refInputEl", void 0);
 EditorText = __decorate([(0, lit_decorators_js.customElement)("rozie-editor-text")], EditorText);
 var EditorText_default = EditorText;
 //#endregion

package/dist/index.d.cts

@@ -159,6 +159,7 @@ declare class DataTable extends DataTable_base {
   private _draftValue;
   private _invalidMsg;
   private _editVer;
+  private _editFocusColId;
   private _editingRowIndex;
   private _rowDraft;
   private _rangeAnchor;
@@ -226,6 +227,7 @@ declare class DataTable extends DataTable_base {
     value: unknown;
     commit: unknown;
     cancel: unknown;
+    autofocus: unknown;
   }) => unknown;
   private _hasSlotDetail;
   private _slotDetailElements;
@@ -581,6 +583,7 @@ declare class DataTable extends DataTable_base {
   indexOfRowIn: (rows: any, rowOriginal: any, rowId: any) => number;
   endEdit: () => void;
   endRowEdit: () => void;
+  editorAutofocusFor: (colId: any, rowIndex: any) => boolean;
   coerceCellValue: (colId: any, raw: any) => any;
   commitEdit: (overrideValue?: any, skipFocusReturn?: boolean) => boolean;
   toggleActiveBooleanCell: () => void;
@@ -778,10 +781,17 @@ declare class EditorText extends EditorText_base {
    * `() => 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;
   private _draft;
+  private _refInputEl;
+  private __rozieFirstUpdateDone;
   private _disconnectCleanups;
   private _rozieTornDown;
   firstUpdated(): void;
+  updated(changedProperties: Map<string, unknown>): void;
   disconnectedCallback(): void;
   render(): _$lit.TemplateResult<1>;
   onInput: (e: any) => void;

package/dist/index.d.mts

@@ -159,6 +159,7 @@ declare class DataTable extends DataTable_base {
   private _draftValue;
   private _invalidMsg;
   private _editVer;
+  private _editFocusColId;
   private _editingRowIndex;
   private _rowDraft;
   private _rangeAnchor;
@@ -226,6 +227,7 @@ declare class DataTable extends DataTable_base {
     value: unknown;
     commit: unknown;
     cancel: unknown;
+    autofocus: unknown;
   }) => unknown;
   private _hasSlotDetail;
   private _slotDetailElements;
@@ -581,6 +583,7 @@ declare class DataTable extends DataTable_base {
   indexOfRowIn: (rows: any, rowOriginal: any, rowId: any) => number;
   endEdit: () => void;
   endRowEdit: () => void;
+  editorAutofocusFor: (colId: any, rowIndex: any) => boolean;
   coerceCellValue: (colId: any, raw: any) => any;
   commitEdit: (overrideValue?: any, skipFocusReturn?: boolean) => boolean;
   toggleActiveBooleanCell: () => void;
@@ -778,10 +781,17 @@ declare class EditorText extends EditorText_base {
    * `() => 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;
   private _draft;
+  private _refInputEl;
+  private __rozieFirstUpdateDone;
   private _disconnectCleanups;
   private _rozieTornDown;
   firstUpdated(): void;
+  updated(changedProperties: Map<string, unknown>): void;
   disconnectedCallback(): void;
   render(): _$lit.TemplateResult<1>;
   onInput: (e: any) => void;

package/dist/index.mjs

@@ -171,6 +171,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		this._draftValue = signal(null);
 		this._invalidMsg = signal("");
 		this._editVer = signal(0);
+		this._editFocusColId = signal(null);
 		this._editingRowIndex = signal(null);
 		this._rowDraft = signal({});
 		this._rangeAnchor = signal(null);
@@ -2472,6 +2473,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		};
 		this.focusEditorWhenReady = (selectAll = true) => {
 			if (!this.gridRoot) return;
+			if (this._editFocusColId.value != null && this.hasEditorSlot(this._editFocusColId.value)) return;
 			let attempts = 0;
 			const tryFocus = () => {
 				const el = this.gridRoot ? this.gridRoot.querySelector("[data-editing-cell]") : null;
@@ -2522,6 +2524,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			this._draftValue.value = seed != null ? seed : this.cellValueAt(rowIndex, colIndex);
 			this._activeInControl.value = true;
 			this._editVer.value = this._editVer.value + 1;
+			this._editFocusColId.value = colId;
 			this.focusEditorWhenReady(seed == null);
 		};
 		this.focusCellWhenReady = (row, col) => {
@@ -2558,6 +2561,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			this._invalidMsg.value = "";
 			this._activeInControl.value = false;
 			this._editVer.value = this._editVer.value + 1;
+			this._editFocusColId.value = null;
 		};
 		this.endRowEdit = () => {
 			this._editingRowIndex.value = null;
@@ -2565,6 +2569,14 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			this._invalidMsg.value = "";
 			this._activeInControl.value = false;
 			this._editVer.value = this._editVer.value + 1;
+			this._editFocusColId.value = null;
+		};
+		this.editorAutofocusFor = (colId, rowIndex) => {
+			if (this._editVer.value < 0) return false;
+			if (this._editingRowIndex.value != null) {
+				if (this._editingRowIndex.value !== rowIndex) return false;
+			} else if (this._editingRow.value !== rowIndex) return false;
+			return this._editFocusColId.value != null && this._editFocusColId.value === colId;
 		};
 		this.coerceCellValue = (colId, raw) => {
 			if (this.editorTypeOf(colId) !== "number") return raw;
@@ -2693,6 +2705,8 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		};
 		this.focusRowEditorAt = (rowIndex, colIndex) => {
 			if (!this.gridRoot) return;
+			const colId = this.columnIdAt(rowIndex, colIndex);
+			if (colId != null && this.hasEditorSlot(colId)) return;
 			let attempts = 0;
 			const tryFocus = () => {
 				const cellEl = this.resolveCellEl(String(rowIndex), colIndex);
@@ -2733,6 +2747,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			this._editingRowIndex.value = rowIndex;
 			this._activeInControl.value = true;
 			this._editVer.value = this._editVer.value + 1;
+			this._editFocusColId.value = editable[0].colId;
 			this.focusEditorWhenReady();
 		};
 		this.commitRow = () => {
@@ -2752,6 +2767,8 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				const err = this.runValidator(ec.colId, this.coerceCellValue(ec.colId, draft[ec.colId]), rowOriginal);
 				if (err !== true) {
 					this.setInvalid(err);
+					this._editFocusColId.value = ec.colId;
+					this._editVer.value = this._editVer.value + 1;
 					this.focusRowEditorAt(rowIndex, ec.colIndex);
 					return false;
 				}
@@ -2921,6 +2938,8 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			if (pos < 0) pos = 0;
 			const len = cols.length;
 			const nextPos = backward ? (pos - 1 + len) % len : (pos + 1) % len;
+			this._editFocusColId.value = editable[nextPos].colId;
+			this._editVer.value = this._editVer.value + 1;
 			this.focusRowEditorAt(rowIndex, cols[nextPos]);
 		};
 		this.onEditorKeyDown = (e) => {
@@ -4019,7 +4038,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 			row: wr.row.original,
 			value: this.editorValueFor(cell.column.id),
 			commit: this.editorCommitFor(cell.column.id),
-			cancel: this.editorCancelFor()
+			cancel: this.editorCancelFor(),
+			autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)
 		}) : html`<slot name="editor" data-rozie-params=${(() => {
 			try {
 				return JSON.stringify({
@@ -4028,7 +4048,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 					row: wr.row.original,
 					value: this.editorValueFor(cell.column.id),
 					commit: this.editorCommitFor(cell.column.id),
-					cancel: this.editorCancelFor()
+					cancel: this.editorCancelFor(),
+					autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)
 				});
 			} catch {
 				return "{}";
@@ -4310,7 +4331,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 			row: row.original,
 			value: this.editorValueFor(cell.column.id),
 			commit: this.editorCommitFor(cell.column.id),
-			cancel: this.editorCancelFor()
+			cancel: this.editorCancelFor(),
+			autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))
 		}) : html`<slot name="editor" data-rozie-params=${(() => {
 			try {
 				return JSON.stringify({
@@ -4319,7 +4341,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 					row: row.original,
 					value: this.editorValueFor(cell.column.id),
 					commit: this.editorCommitFor(cell.column.id),
-					cancel: this.editorCancelFor()
+					cancel: this.editorCancelFor(),
+					autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))
 				});
 			} catch {
 				return "{}";
@@ -4792,7 +4815,9 @@ let EditorText = class EditorText extends SignalWatcher(LitElement) {
 		this.value = null;
 		this.commit = null;
 		this.cancel = null;
+		this.autofocus = false;
 		this._draft = signal("");
+		this.__rozieFirstUpdateDone = false;
 		this._disconnectCleanups = [];
 		this._rozieTornDown = false;
 		this.onInput = (e) => {
@@ -4824,6 +4849,13 @@ let EditorText = class EditorText extends SignalWatcher(LitElement) {
 	}
 	firstUpdated() {
 		this._draft.value = this.value != null ? String(this.value) : "";
+		if (this.autofocus) this._refInputEl?.focus();
+	}
+	updated(changedProperties) {
+		if (this.__rozieFirstUpdateDone && changedProperties.has("autofocus")) ((v) => {
+			if (v) this._refInputEl?.focus();
+		})(this.autofocus);
+		this.__rozieFirstUpdateDone = true;
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
@@ -4842,7 +4874,7 @@ let EditorText = class EditorText extends SignalWatcher(LitElement) {
 			this.onKeydown($event);
 		}} @blur=${($event) => {
 			this.onBlur();
-		}} data-rozie-s-0d17f43a />
+		}} data-rozie-ref="inputEl" data-rozie-s-0d17f43a />
 `;
 	}
 };
@@ -4855,6 +4887,11 @@ __decorate([property({ type: Object })], EditorText.prototype, "row", void 0);
 __decorate([property({ type: Object })], EditorText.prototype, "value", void 0);
 __decorate([property({ type: Function })], EditorText.prototype, "commit", void 0);
 __decorate([property({ type: Function })], EditorText.prototype, "cancel", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], EditorText.prototype, "autofocus", void 0);
+__decorate([query("[data-rozie-ref=\"inputEl\"]")], EditorText.prototype, "_refInputEl", void 0);
 EditorText = __decorate([customElement("rozie-editor-text")], EditorText);
 var EditorText_default = EditorText;
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rozie-ui/data-table-lit",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "private": false,
   "license": "MIT",
@@ -45,7 +45,7 @@
     "src"
   ],
   "dependencies": {
-    "@rozie/runtime-lit": "0.1.3"
+    "@rozie/runtime-lit": "0.1.4"
   },
   "peerDependencies": {
     "lit": "^3.2",

package/src/DataTable.ts

@@ -87,6 +87,7 @@ interface RozieEditorSlotCtx {
   value: unknown;
   commit: unknown;
   cancel: unknown;
+  autofocus: unknown;
 }
 
 interface RozieDetailSlotCtx {
@@ -605,6 +606,7 @@ export default class DataTable extends SignalWatcher(LitElement) {
   private _draftValue = signal<any>(null);
   private _invalidMsg = signal('');
   private _editVer = signal(0);
+  private _editFocusColId = signal<any>(null);
   private _editingRowIndex = signal<any>(null);
   private _rowDraft = signal<any>({});
   private _rangeAnchor = signal<any>(null);
@@ -656,7 +658,7 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
   @property({ attribute: false }) cell?: (scope: { columnId: unknown; column: unknown; row: unknown; value: unknown }) => unknown;
   @state() private _hasSlotEditor = false;
   @queryAssignedElements({ slot: 'editor', flatten: true }) private _slotEditorElements!: Element[];
-  @property({ attribute: false }) editor?: (scope: { columnId: unknown; column: unknown; row: unknown; value: unknown; commit: unknown; cancel: unknown }) => unknown;
+  @property({ attribute: false }) editor?: (scope: { columnId: unknown; column: unknown; row: unknown; value: unknown; commit: unknown; cancel: unknown; autofocus: unknown }) => unknown;
   @state() private _hasSlotDetail = false;
   @queryAssignedElements({ slot: 'detail', flatten: true }) private _slotDetailElements!: Element[];
   @property({ attribute: false }) detail?: (scope: { row: unknown }) => unknown;
@@ -1229,7 +1231,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
           <span class="rdt-group-count" data-rozie-s-d5dcab4c>${rozieDisplay('(' + this.groupSubRowCount(wr.row) + ')')}</span>
         </span>` : this.isEditing(wr.vi.index, this.colIndexOf(wr.row, cell)) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.hasEditorSlot(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
-            ${this.editor !== undefined ? this.editor({columnId: cell.column.id, column: cell.column, row: wr.row.original, value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor()}) : html`<slot name="editor" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: wr.row.original, value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor()}); } catch { return '{}'; } })()}></slot>`}
+            ${this.editor !== undefined ? this.editor({columnId: cell.column.id, column: cell.column, row: wr.row.original, value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)}) : html`<slot name="editor" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: wr.row.original, value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)}); } catch { return '{}'; } })()}></slot>`}
           </span>` : this.editorTypeOf(cell.column.id) === 'number' ? html`<input class="rdt-cell-editor" type="number" data-editing-cell="" .value=${this.editorValueFor(cell.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />` : this.editorTypeOf(cell.column.id) === 'select' ? html`<select class="rdt-cell-editor" data-editing-cell="" .value=${this.editorValueFor(cell.column.id)} @change=${($event: Event & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c>
             ${repeat<any>(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => html`<option key=${rozieAttr(opt.value)} value=${rozieAttr(opt.value)} data-rozie-s-d5dcab4c>${rozieDisplay(opt.label)}</option>`)}
           </select>` : this.editorTypeOf(cell.column.id) === 'checkbox' ? html`<input class="rdt-cell-editor" type="checkbox" data-editing-cell="" ?checked=${this.editorCheckedFor(cell.column.id)} @change=${($event: Event & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorCheckbox(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />` : html`<input class="rdt-cell-editor" type="text" data-editing-cell="" .value=${this.editorValueFor(cell.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />`}</span>` : this.cellIsPlaceholder(cell) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : html`<span class="rdt-cell-value" data-rozie-s-d5dcab4c>
@@ -1309,7 +1311,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
           <span class="rdt-group-count" data-rozie-s-d5dcab4c>${rozieDisplay('(' + this.groupSubRowCount(row) + ')')}</span>
         </span>` : this.isEditing(this.rowIndexOf(row), this.colIndexOf(row, cell)) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.hasEditorSlot(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
-            ${this.editor !== undefined ? this.editor({columnId: cell.column.id, column: cell.column, row: row.original, value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor()}) : html`<slot name="editor" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: row.original, value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor()}); } catch { return '{}'; } })()}></slot>`}
+            ${this.editor !== undefined ? this.editor({columnId: cell.column.id, column: cell.column, row: row.original, value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))}) : html`<slot name="editor" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: row.original, value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))}); } catch { return '{}'; } })()}></slot>`}
           </span>` : this.editorTypeOf(cell.column.id) === 'number' ? html`<input class="rdt-cell-editor" type="number" data-editing-cell="" .value=${this.editorValueFor(cell.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />` : this.editorTypeOf(cell.column.id) === 'select' ? html`<select class="rdt-cell-editor" data-editing-cell="" .value=${this.editorValueFor(cell.column.id)} @change=${($event: Event & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c>
             ${repeat<any>(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => html`<option key=${rozieAttr(opt.value)} value=${rozieAttr(opt.value)} data-rozie-s-d5dcab4c>${rozieDisplay(opt.label)}</option>`)}
           </select>` : this.editorTypeOf(cell.column.id) === 'checkbox' ? html`<input class="rdt-cell-editor" type="checkbox" data-editing-cell="" ?checked=${this.editorCheckedFor(cell.column.id)} @change=${($event: Event & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorCheckbox(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />` : html`<input class="rdt-cell-editor" type="text" data-editing-cell="" .value=${this.editorValueFor(cell.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />`}</span>` : this.cellIsPlaceholder(cell) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : html`<span class="rdt-cell-value" data-rozie-s-d5dcab4c>
@@ -4507,6 +4509,9 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 
   focusEditorWhenReady = (selectAll = true) => {
   if (!this.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 (this._editFocusColId.value != null && this.hasEditorSlot(this._editFocusColId.value)) return;
   let attempts = 0;
   const tryFocus = () => {
     const el = this.gridRoot ? this.gridRoot.querySelector('[data-editing-cell]') : null;
@@ -4575,6 +4580,10 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   this._draftValue.value = seed != null ? seed : this.cellValueAt(rowIndex, colIndex);
   this._activeInControl.value = true;
   this._editVer.value = this._editVer.value + 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.
+  this._editFocusColId.value = 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.
   this.focusEditorWhenReady(seed == null);
@@ -4614,6 +4623,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   this._invalidMsg.value = '';
   this._activeInControl.value = false;
   this._editVer.value = this._editVer.value + 1;
+  this._editFocusColId.value = null;
 };
 
   endRowEdit = () => {
@@ -4622,6 +4632,17 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   this._invalidMsg.value = '';
   this._activeInControl.value = false;
   this._editVer.value = this._editVer.value + 1;
+  this._editFocusColId.value = null;
+};
+
+  editorAutofocusFor = (colId: any, rowIndex: any) => {
+  if (this._editVer.value < 0) return false;
+  if (this._editingRowIndex.value != null) {
+    if (this._editingRowIndex.value !== rowIndex) return false;
+  } else {
+    if (this._editingRow.value !== rowIndex) return false;
+  }
+  return this._editFocusColId.value != null && this._editFocusColId.value === colId;
 };
 
   coerceCellValue = (colId: any, raw: any) => {
@@ -4811,6 +4832,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 
   focusRowEditorAt = (rowIndex: any, colIndex: any) => {
   if (!this.gridRoot) return;
+  const colId = this.columnIdAt(rowIndex, colIndex);
+  if (colId != null && this.hasEditorSlot(colId)) return;
   let attempts = 0;
   const tryFocus = () => {
     const cellEl = this.resolveCellEl(String(rowIndex), colIndex);
@@ -4856,6 +4879,11 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   this._editingRowIndex.value = rowIndex;
   this._activeInControl.value = true;
   this._editVer.value = this._editVer.value + 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).
+  this._editFocusColId.value = editable[0].colId;
   this.focusEditorWhenReady();
 };
 
@@ -4883,9 +4911,18 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     const err = this.runValidator(ec.colId, this.coerceCellValue(ec.colId, draft[ec.colId]), rowOriginal);
     if (err !== true) {
       this.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).
+      this._editFocusColId.value = ec.colId;
+      this._editVer.value = this._editVer.value + 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.
       this.focusRowEditorAt(rowIndex, ec.colIndex);
       return false;
     }
@@ -5108,6 +5145,11 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   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.
+  this._editFocusColId.value = editable[nextPos].colId;
+  this._editVer.value = this._editVer.value + 1;
   this.focusRowEditorAt(rowIndex, cols[nextPos]);
 };
 

package/src/EditorText.ts

@@ -1,5 +1,5 @@
 import { LitElement, css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, query } from 'lit/decorators.js';
 import { SignalWatcher, signal } from '@lit-labs/preact-signals';
 
 @customElement('rozie-editor-text')
@@ -32,7 +32,13 @@ export default class EditorText extends SignalWatcher(LitElement) {
    * `() => void` — revert the edit and close the editor (from the `#editor` slot scope). Null-guarded at call sites.
    */
   @property({ type: Function }) cancel: ((...args: unknown[]) => unknown) | null = null;
+  /**
+   * Focus this editor's primary input when true — the host sets it for the one editor that should hold focus; reactive.
+   */
+  @property({ type: Boolean, reflect: true }) autofocus: boolean = false;
   private _draft = signal('');
+  @query('[data-rozie-ref="inputEl"]') private _refInputEl!: HTMLElement;
+private __rozieFirstUpdateDone = false;
 
   private _disconnectCleanups: Array<() => void> = [];
   // Re-parenting guard: set true once the deferred teardown has actually
@@ -46,6 +52,15 @@ export default class EditorText extends SignalWatcher(LitElement) {
 
     // Untyped handler param neutralizes to `any`, so reading e.target.value typechecks
     // ×6 (the global-filter idiom). Never inline `$data.x = $event.target.value`.
+
+    if (this.autofocus) this._refInputEl?.focus();
+  }
+
+  updated(changedProperties: Map<string, unknown>): void {
+    if (this.__rozieFirstUpdateDone && (changedProperties.has('autofocus'))) { const __watchVal = (() => this.autofocus)(); ((v: any) => {
+      if (v) this._refInputEl?.focus();
+    })(__watchVal); }
+    this.__rozieFirstUpdateDone = true;
   }
 
   disconnectedCallback(): void {
@@ -60,7 +75,7 @@ export default class EditorText extends SignalWatcher(LitElement) {
 
   render() {
     return html`
-<input class="rdt-cell-editor" type="text" data-editing-cell="" aria-label=${this.columnId} .value=${this._draft.value} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onInput($event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onKeydown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onBlur(); }} data-rozie-s-0d17f43a />
+<input class="rdt-cell-editor" type="text" data-editing-cell="" aria-label=${this.columnId} .value=${this._draft.value} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onInput($event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onKeydown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onBlur(); }} data-rozie-ref="inputEl" data-rozie-s-0d17f43a />
 `;
   }