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

package/README.md

@@ -8,7 +8,7 @@ Idiomatic **solid** `DataTable` — a headless, fully-accessible (WAI-ARIA) data
 npm i @rozie-ui/data-table-solid
 ```
 
-Peer dependencies: `solid-js + @tanstack/table-core + @tanstack/virtual-core + @floating-ui/dom`. Install them alongside this package.
+Peer dependencies: `solid-js + @tanstack/table-core + @tanstack/virtual-core + @rozie-ui/popover-solid`. Install them alongside this package.
 
 ## Usage
 
@@ -529,5 +529,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

@@ -2,286 +2,35 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
 let Solid_js = require("solid-js");
 let _solid_primitives_keyed = require("@solid-primitives/keyed");
 let _rozie_runtime_solid = require("@rozie/runtime-solid");
-let _floating_ui_dom = require("@floating-ui/dom");
+let _rozie_ui_popover_solid = require("@rozie-ui/popover-solid");
+_rozie_ui_popover_solid = __toESM(_rozie_ui_popover_solid);
 let _tanstack_table_core = require("@tanstack/table-core");
 let _tanstack_virtual_core = require("@tanstack/virtual-core");
-//#region src/internal/middleware.ts
-/**
-* Build the ordered middleware array for `computePosition`. Pure — no engine
-* import, no DOM read beyond the passed-in arrow element.
-*/
-function buildMiddleware(factories, config) {
-	const mw = [factories.offset(config.offset)];
-	if (!config.disableFlip) mw.push(factories.flip());
-	if (!config.disableShift) mw.push(factories.shift());
-	if (config.arrow && config.arrowEl) mw.push(factories.arrow({ element: config.arrowEl }));
-	return mw;
-}
-//#endregion
-//#region src/Popover.tsx
-(0, _rozie_runtime_solid.__rozieInjectStyle)("Popover-c6cf02ea", `.rozie-popover[data-rozie-s-c6cf02ea] {
-  display: contents;
-}
-.rozie-popover-anchor[data-rozie-s-c6cf02ea] {
-  display: inline-block;
-}
-.rozie-popover-floating[data-rozie-s-c6cf02ea] {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: var(--rozie-popover-z, 1000);
-  width: max-content;
-  max-width: var(--rozie-popover-max-width, calc(100vw - 16px));
-  background: var(--rozie-popover-bg, #fff);
-  color: var(--rozie-popover-color, inherit);
-  border: var(--rozie-popover-border, 1px solid rgba(0, 0, 0, 0.12));
-  border-radius: var(--rozie-popover-radius, 8px);
-  box-shadow: var(--rozie-popover-shadow, 0 8px 24px rgba(0, 0, 0, 0.12));
-  padding: var(--rozie-popover-padding, 8px 12px);
-}
-.rozie-popover-arrow[data-rozie-s-c6cf02ea] {
-  position: absolute;
-  width: var(--rozie-popover-arrow-size, 8px);
-  height: var(--rozie-popover-arrow-size, 8px);
-  background: var(--rozie-popover-bg, #fff);
-  border: var(--rozie-popover-border, 1px solid rgba(0, 0, 0, 0.12));
-  transform: rotate(45deg);
-}`);
-function Popover(_props) {
-	const [local, attrs] = (0, Solid_js.splitProps)((0, Solid_js.mergeProps)({
-		placement: "bottom",
-		trigger: "click",
-		offset: 8,
-		disableFlip: false,
-		disableShift: false,
-		arrow: false,
-		disabled: false,
-		modal: false,
-		strategy: "absolute"
-	}, _props), [
-		"open",
-		"placement",
-		"trigger",
-		"offset",
-		"disableFlip",
-		"disableShift",
-		"arrow",
-		"disabled",
-		"modal",
-		"strategy",
-		"children",
-		"ref"
-	]);
-	const resolved = (0, Solid_js.children)(() => local.children);
-	(0, Solid_js.onMount)(() => {
-		local.ref?.({
-			show,
-			hide,
-			toggle,
-			reposition
-		});
-	});
-	const [open, setOpen] = (0, _rozie_runtime_solid.createControllableSignal)(_props, "open", false);
-	(0, Solid_js.onMount)(() => {
-		const _cleanup = (() => {
-			anchorNode = anchorElRef;
-			if (open() && !local.disabled) {
-				floatingNode = floatingElRef;
-				arrowNode = arrowElRef;
-				startTracking();
-			}
-		})();
-		if (_cleanup) (0, Solid_js.onCleanup)(_cleanup);
-		(0, Solid_js.onCleanup)(() => {
-			stopTracking();
-		});
-	});
-	(0, Solid_js.createEffect)((0, Solid_js.on)(() => open(), (v) => (0, Solid_js.untrack)(() => ((isOpen) => {
-		if (isOpen && !local.disabled) queueMicrotask(() => {
-			if (!open() || local.disabled) return;
-			floatingNode = floatingElRef;
-			arrowNode = arrowElRef;
-			startTracking();
-		});
-		else stopTracking();
-	})(v)), { defer: true }));
-	(0, Solid_js.createEffect)((0, Solid_js.on)(() => local.placement, (v) => (0, Solid_js.untrack)(() => (() => {
-		if (open()) position();
-	})()), { defer: true }));
-	(0, Solid_js.createEffect)((0, Solid_js.on)(() => local.offset, (v) => (0, Solid_js.untrack)(() => (() => {
-		if (open()) position();
-	})()), { defer: true }));
-	(0, Solid_js.createEffect)((0, Solid_js.on)(() => local.disableFlip, (v) => (0, Solid_js.untrack)(() => (() => {
-		if (open()) position();
-	})()), { defer: true }));
-	(0, Solid_js.createEffect)((0, Solid_js.on)(() => local.disableShift, (v) => (0, Solid_js.untrack)(() => (() => {
-		if (open()) position();
-	})()), { defer: true }));
-	(0, Solid_js.createEffect)((0, Solid_js.on)(() => local.strategy, (v) => (0, Solid_js.untrack)(() => (() => {
-		if (open()) position();
-	})()), { defer: true }));
-	let anchorElRef = null;
-	let floatingElRef = null;
-	let arrowElRef = null;
-	let anchorNode = null;
-	let floatingNode = null;
-	let arrowNode = null;
-	let stopAutoUpdate = null;
-	let lastFocusedEl = null;
-	function deepActiveElement() {
-		let el = document.activeElement;
-		while (el && el.shadowRoot && el.shadowRoot.activeElement) el = el.shadowRoot.activeElement;
-		return el;
-	}
-	function requestOpen(next) {
-		if (open() === next) return;
-		if (next && local.trigger === "click") lastFocusedEl = deepActiveElement();
-		setOpen(next);
-		_props.onChange?.(next);
-		if (!next && local.trigger === "click" && lastFocusedEl && lastFocusedEl.isConnected && typeof lastFocusedEl.focus === "function") lastFocusedEl.focus();
-		if (!next) lastFocusedEl = null;
-	}
-	function applyPosition(x, y, middlewareData) {
-		if (!floatingNode) return;
-		floatingNode.style.left = x + "px";
-		floatingNode.style.top = y + "px";
-		if (arrowNode && middlewareData && middlewareData.arrow) {
-			const ax = middlewareData.arrow.x;
-			const ay = middlewareData.arrow.y;
-			arrowNode.style.left = ax == null ? "" : ax + "px";
-			arrowNode.style.top = ay == null ? "" : ay + "px";
-		}
-	}
-	function position() {
-		if (!anchorNode || !floatingNode) return;
-		const middleware = buildMiddleware({
-			offset: _floating_ui_dom.offset,
-			flip: _floating_ui_dom.flip,
-			shift: _floating_ui_dom.shift,
-			arrow: _floating_ui_dom.arrow
-		}, {
-			offset: local.offset,
-			disableFlip: local.disableFlip,
-			disableShift: local.disableShift,
-			arrow: local.arrow,
-			arrowEl: arrowNode
-		});
-		if (local.strategy === "fixed") floatingNode.style.position = "fixed";
-		else floatingNode.style.position = "";
-		let opts = null;
-		opts = {
-			placement: local.placement,
-			strategy: local.strategy,
-			middleware
-		};
-		(0, _floating_ui_dom.computePosition)(anchorNode, floatingNode, opts).then((result) => {
-			applyPosition(result.x, result.y, result.middlewareData);
-		});
-	}
-	function startTracking() {
-		if (!anchorNode || !floatingNode) return;
-		if (stopAutoUpdate) {
-			stopAutoUpdate();
-			stopAutoUpdate = null;
-		}
-		stopAutoUpdate = (0, _floating_ui_dom.autoUpdate)(anchorNode, floatingNode, position);
-	}
-	function stopTracking() {
-		if (stopAutoUpdate) {
-			stopAutoUpdate();
-			stopAutoUpdate = null;
-		}
-	}
-	function onAnchorClick() {
-		if (local.disabled) return;
-		requestOpen(!open());
-	}
-	function onAnchorPointerEnter() {
-		if (local.disabled) return;
-		requestOpen(true);
-	}
-	function onAnchorPointerLeave() {
-		if (local.disabled) return;
-		requestOpen(false);
-	}
-	function onAnchorFocus() {
-		if (local.disabled) return;
-		requestOpen(true);
-	}
-	function onAnchorBlur() {
-		if (local.disabled) return;
-		requestOpen(false);
-	}
-	function dismiss() {
-		requestOpen(false);
-	}
-	function isTooltip() {
-		return local.trigger === "hover" || local.trigger === "focus";
-	}
-	function floatingRole() {
-		return isTooltip() ? "tooltip" : local.modal ? "dialog" : void 0;
-	}
-	function show() {
-		if (!local.disabled) requestOpen(true);
-	}
-	function hide() {
-		requestOpen(false);
-	}
-	function toggle() {
-		if (!local.disabled) requestOpen(!open());
-	}
-	function reposition() {
-		position();
-	}
-	(0, Solid_js.createEffect)(() => {
-		if (!open()) return;
-		const _rozieHandler = ($event) => {
-			if ($event.key !== "Escape") return;
-			dismiss();
-		};
-		document.addEventListener("keydown", _rozieHandler);
-		(0, Solid_js.onCleanup)(() => document.removeEventListener("keydown", _rozieHandler));
-	});
-	(0, _rozie_runtime_solid.createOutsideClick)([() => anchorElRef, () => floatingElRef], dismiss, () => open());
-	return <>
-    <div {...attrs} class={"rozie-popover" + (attrs.class ? " " + attrs.class : "")} data-rozie-s-c6cf02ea="">
-
-      
-      <div aria-haspopup="dialog" aria-expanded={!!open()} aria-describedby={(0, _rozie_runtime_solid.rozieAttr)(isTooltip() && open() ? "rozie-popover-floating" : null)} class={"rozie-popover-anchor"} ref={(el) => {
-		anchorElRef = el;
-	}} onClick={($event) => {
-		local.trigger === "click" && onAnchorClick();
-	}} onPointerEnter={($event) => {
-		local.trigger === "hover" && onAnchorPointerEnter();
-	}} onPointerLeave={($event) => {
-		local.trigger === "hover" && onAnchorPointerLeave();
-	}} onFocusIn={($event) => {
-		local.trigger === "focus" && onAnchorFocus();
-	}} onFocusOut={($event) => {
-		local.trigger === "focus" && onAnchorBlur();
-	}} data-rozie-s-c6cf02ea="">
-        {(_props.anchorSlot ?? _props.slots?.["anchor"])?.({
-		open: open(),
-		toggle,
-		show,
-		hide
-	})}
-      </div>
-
-      
-      {<Solid_js.Show when={open() && !local.disabled}><div class={"rozie-popover-floating"} ref={(el) => {
-		floatingElRef = el;
-	}} id="rozie-popover-floating" role={(0, _rozie_runtime_solid.rozieAttr)(floatingRole())} aria-modal={!!(floatingRole() === "dialog")} data-rozie-s-c6cf02ea="">
-        {<Solid_js.Show when={local.arrow}><div class={"rozie-popover-arrow"} ref={(el) => {
-		arrowElRef = el;
-	}} data-rozie-s-c6cf02ea="" /></Solid_js.Show>}{resolved()}
-      </div></Solid_js.Show>}</div>
-    </>;
-}
-//#endregion
 //#region src/DataTable.tsx
 (0, _rozie_runtime_solid.__rozieInjectStyle)("DataTable-d5dcab4c", `.rozie-data-table[data-rozie-s-d5dcab4c] {
   border-collapse: collapse;
@@ -738,6 +487,7 @@ function DataTable(_props) {
 	const [draftValue, setDraftValue] = (0, Solid_js.createSignal)(null);
 	const [invalidMsg, setInvalidMsg] = (0, Solid_js.createSignal)("");
 	const [editVer, setEditVer] = (0, Solid_js.createSignal)(0);
+	const [editFocusColId, setEditFocusColId] = (0, Solid_js.createSignal)(null);
 	const [editingRowIndex, setEditingRowIndex] = (0, Solid_js.createSignal)(null);
 	const [rowDraft, setRowDraft] = (0, Solid_js.createSignal)({});
 	const [rangeAnchor, setRangeAnchor] = (0, Solid_js.createSignal)(null);
@@ -1722,8 +1472,7 @@ function DataTable(_props) {
 		const base = pinStyle(colId);
 		if (isExpanderColumn(colId) && row && row.depth) {
 			const pad = "padding-left:" + (.5 + row.depth * 1.25) + "rem";
-			const sep = base.endsWith(";") ? "" : ";";
-			return base ? base + sep + pad : pad;
+			return base ? base + pad : pad;
 		}
 		return base;
 	}
@@ -3180,6 +2929,7 @@ function DataTable(_props) {
 	}
 	function focusEditorWhenReady(selectAll = true) {
 		if (!gridRoot) return;
+		if (editFocusColId() != null && hasEditorSlot(editFocusColId())) return;
 		let attempts = 0;
 		const tryFocus = () => {
 			const el = gridRoot ? gridRoot.querySelector("[data-editing-cell]") : null;
@@ -3230,6 +2980,7 @@ function DataTable(_props) {
 		setDraftValue(seed != null ? seed : cellValueAt(rowIndex, colIndex));
 		setActiveInControl(true);
 		setEditVer(editVer() + 1);
+		setEditFocusColId(colId);
 		focusEditorWhenReady(seed == null);
 	}
 	function focusCellWhenReady(row, col) {
@@ -3266,6 +3017,7 @@ function DataTable(_props) {
 		setInvalidMsg("");
 		setActiveInControl(false);
 		setEditVer(editVer() + 1);
+		setEditFocusColId(null);
 	}
 	function endRowEdit() {
 		setEditingRowIndex(null);
@@ -3273,6 +3025,14 @@ function DataTable(_props) {
 		setInvalidMsg("");
 		setActiveInControl(false);
 		setEditVer(editVer() + 1);
+		setEditFocusColId(null);
+	}
+	function editorAutofocusFor(colId, rowIndex) {
+		if (editVer() < 0) return false;
+		if (editingRowIndex() != null) {
+			if (editingRowIndex() !== rowIndex) return false;
+		} else if (editingRow() !== rowIndex) return false;
+		return editFocusColId() != null && editFocusColId() === colId;
 	}
 	function coerceCellValue(colId, raw) {
 		if (editorTypeOf(colId) !== "number") return raw;
@@ -3391,6 +3151,8 @@ function DataTable(_props) {
 	}
 	function focusRowEditorAt(rowIndex, colIndex) {
 		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);
@@ -3431,6 +3193,7 @@ function DataTable(_props) {
 		setEditingRowIndex(rowIndex);
 		setActiveInControl(true);
 		setEditVer(editVer() + 1);
+		setEditFocusColId(editable[0].colId);
 		focusEditorWhenReady();
 	}
 	function commitRow() {
@@ -3450,6 +3213,8 @@ function DataTable(_props) {
 			const err = runValidator(ec.colId, coerceCellValue(ec.colId, draft[ec.colId]), rowOriginal);
 			if (err !== true) {
 				setInvalid(err);
+				setEditFocusColId(ec.colId);
+				setEditVer(editVer() + 1);
 				focusRowEditorAt(rowIndex, ec.colIndex);
 				return false;
 			}
@@ -3623,7 +3388,10 @@ function DataTable(_props) {
 		let pos = cols.indexOf(cur);
 		if (pos < 0) pos = 0;
 		const len = cols.length;
-		focusRowEditorAt(rowIndex, cols[backward ? (pos - 1 + len) % len : (pos + 1) % len]);
+		const nextPos = backward ? (pos - 1 + len) % len : (pos + 1) % len;
+		setEditFocusColId(editable[nextPos].colId);
+		setEditVer(editVer() + 1);
+		focusRowEditorAt(rowIndex, cols[nextPos]);
 	}
 	function onEditorKeyDown(e) {
 		if (!e) return;
@@ -3938,7 +3706,7 @@ function DataTable(_props) {
 	}) ?? (0, _rozie_runtime_solid.rozieDisplay)(headerLabel(header().column.id))}
                 </span>
                 <span class={"rdt-sort-ind"} aria-hidden="true" data-rozie-s-d5dcab4c="">{(0, _rozie_runtime_solid.rozieDisplay)(sortIndicator(header().column.id))}</span>
-              </button></Solid_js.Show>}<Popover trigger="click" placement="bottom-end" strategy="fixed" offset={4} data-rozie-s-d5dcab4c="" anchorSlot={() => <>
+              </button></Solid_js.Show>}<_rozie_ui_popover_solid.default trigger="click" placement="bottom-end" strategy="fixed" offset={4} data-rozie-s-d5dcab4c="" anchorSlot={() => <>
                   <button type="button" class={"rdt-col-menu-trigger"} aria-label={(0, _rozie_runtime_solid.rozieAttr)("Column options for " + headerLabel(header().column.id))} data-rozie-s-d5dcab4c="">⋯</button>
                 </>}><div class={"rdt-col-menu"} role="menu" data-rozie-s-d5dcab4c="">
                   <button type="button" role="menuitem" aria-pressed={columnPinSide(header().column.id) === "left"} class={"rdt-col-menu-item"} onClick={($event) => {
@@ -3954,7 +3722,7 @@ function DataTable(_props) {
                   <button type="button" role="menuitem" class={"rdt-col-menu-item"} onClick={($event) => {
 		onHideColumn(header().column.id, $event);
 	}} data-rozie-s-d5dcab4c="">Hide column</button>
-                </div></Popover>
+                </div></_rozie_ui_popover_solid.default>
               
               <button type="button" aria-label={(0, _rozie_runtime_solid.rozieAttr)("Resize " + headerLabel(header().column.id))} class={"rdt-resize-handle"} onPointerDown={($event) => {
 		onResizeStart(header().column.id, $event);
@@ -4042,7 +3810,8 @@ function DataTable(_props) {
 		row: row().original,
 		value: editorValueFor(cell().column.id),
 		commit: editorCommitFor(cell().column.id),
-		cancel: editorCancelFor()
+		cancel: editorCancelFor(),
+		autofocus: editorAutofocusFor(cell().column.id, rowIndexOf(row()))
 	})}
               </span></Solid_js.Show>}</span></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               <button type="button" data-expander="" aria-expanded={!!rowIsExpanded(row())} aria-label={(0, _rozie_runtime_solid.rozieAttr)(rowIsExpanded(row()) ? "Collapse group" : "Expand group")} class={"rdt-expander rdt-group-toggle"} onClick={($event) => {
@@ -4121,7 +3890,7 @@ function DataTable(_props) {
 	}) ?? (0, _rozie_runtime_solid.rozieDisplay)(headerLabel(header().column.id))}
                 </span>
                 <span class={"rdt-sort-ind"} aria-hidden="true" data-rozie-s-d5dcab4c="">{(0, _rozie_runtime_solid.rozieDisplay)(sortIndicator(header().column.id))}</span>
-              </button></Solid_js.Show>}<Popover trigger="click" placement="bottom-end" strategy="fixed" offset={4} data-rozie-s-d5dcab4c="" anchorSlot={() => <>
+              </button></Solid_js.Show>}<_rozie_ui_popover_solid.default trigger="click" placement="bottom-end" strategy="fixed" offset={4} data-rozie-s-d5dcab4c="" anchorSlot={() => <>
                   <button type="button" class={"rdt-col-menu-trigger"} aria-label={(0, _rozie_runtime_solid.rozieAttr)("Column options for " + headerLabel(header().column.id))} data-rozie-s-d5dcab4c="">⋯</button>
                 </>}><div class={"rdt-col-menu"} role="menu" data-rozie-s-d5dcab4c="">
                   <button type="button" role="menuitem" aria-pressed={columnPinSide(header().column.id) === "left"} class={"rdt-col-menu-item"} onClick={($event) => {
@@ -4137,7 +3906,7 @@ function DataTable(_props) {
                   <button type="button" role="menuitem" class={"rdt-col-menu-item"} onClick={($event) => {
 		onHideColumn(header().column.id, $event);
 	}} data-rozie-s-d5dcab4c="">Hide column</button>
-                </div></Popover>
+                </div></_rozie_ui_popover_solid.default>
               <button type="button" aria-label={(0, _rozie_runtime_solid.rozieAttr)("Resize " + headerLabel(header().column.id))} class={"rdt-resize-handle"} onPointerDown={($event) => {
 		onResizeStart(header().column.id, $event);
 	}} onTouchStart={($event) => {
@@ -4231,7 +4000,8 @@ function DataTable(_props) {
 		row: wr().row.original,
 		value: editorValueFor(cell().column.id),
 		commit: editorCommitFor(cell().column.id),
-		cancel: editorCancelFor()
+		cancel: editorCancelFor(),
+		autofocus: editorAutofocusFor(cell().column.id, wr().vi.index)
 	})}
               </span></Solid_js.Show>}</span></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               <button type="button" data-expander="" aria-expanded={!!rowIsExpanded(wr().row)} aria-label={(0, _rozie_runtime_solid.rozieAttr)(rowIsExpanded(wr().row) ? "Collapse group" : "Expand group")} class={"rdt-expander rdt-group-toggle"} onClick={($event) => {
@@ -4406,16 +4176,25 @@ function EditorText(_props) {
 		row: null,
 		value: null,
 		commit: null,
-		cancel: null
+		cancel: null,
+		autofocus: false
 	}, _props), [
 		"columnId",
 		"column",
 		"row",
 		"value",
 		"commit",
-		"cancel"
+		"cancel",
+		"autofocus"
 	]);
 	const [draft, setDraft] = (0, Solid_js.createSignal)("");
+	(0, Solid_js.onMount)(() => {
+		if (local.autofocus) inputElRef?.focus();
+	});
+	(0, Solid_js.createEffect)((0, Solid_js.on)(() => local.autofocus, (v) => (0, Solid_js.untrack)(() => ((v) => {
+		if (v) inputElRef?.focus();
+	})(v)), { defer: true }));
+	let inputElRef = null;
 	setDraft(local.value != null ? String(local.value) : "");
 	function onInput(e) {
 		setDraft(e && e.target ? e.target.value : "");
@@ -4439,7 +4218,9 @@ function EditorText(_props) {
 		doCommit();
 	}
 	return <>
-    <input type="text" data-editing-cell="" aria-label={local.columnId} class={"rdt-cell-editor"} value={draft()} onInput={($event) => {
+    <input type="text" data-editing-cell="" aria-label={local.columnId} ref={(el) => {
+		inputElRef = el;
+	}} class={"rdt-cell-editor"} value={draft()} onInput={($event) => {
 		onInput($event);
 	}} onKeyDown={($event) => {
 		onKeydown($event);

package/dist/index.d.cts

@@ -42,6 +42,7 @@ interface EditorSlotCtx {
   value: any;
   commit: any;
   cancel: any;
+  autofocus: any;
 }
 interface DetailSlotCtx {
   row: any;
@@ -339,6 +340,10 @@ 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;
 }
 declare function EditorText(_props: EditorTextProps): JSX.Element;
 //#endregion

package/dist/index.d.mts

@@ -42,6 +42,7 @@ interface EditorSlotCtx {
   value: any;
   commit: any;
   cancel: any;
+  autofocus: any;
 }
 interface DetailSlotCtx {
   row: any;
@@ -339,6 +340,10 @@ 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;
 }
 declare function EditorText(_props: EditorTextProps): JSX.Element;
 //#endregion