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

package/dist/index.mjs

@@ -1,283 +1,9 @@
-import { Show, children, createEffect, createSignal, mergeProps, on, onCleanup, onMount, splitProps, untrack, useContext } from "solid-js";
+import { Show, createEffect, createSignal, mergeProps, on, onCleanup, onMount, splitProps, untrack, useContext } from "solid-js";
 import { Key } from "@solid-primitives/keyed";
-import { __rozieInjectStyle, createControllableSignal, createOutsideClick, parseInlineStyle, rozieAttr, rozieClass, rozieContext, rozieDisplay } from "@rozie/runtime-solid";
-import { arrow, autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { __rozieInjectStyle, createControllableSignal, parseInlineStyle, rozieAttr, rozieClass, rozieContext, rozieDisplay } from "@rozie/runtime-solid";
+import Popover from "@rozie-ui/popover-solid";
 import { createTable, getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from "@tanstack/table-core";
 import { Virtualizer, elementScroll, measureElement, observeElementOffset, observeElementRect } from "@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
-__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] = splitProps(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 = children(() => local.children);
-	onMount(() => {
-		local.ref?.({
-			show,
-			hide,
-			toggle,
-			reposition
-		});
-	});
-	const [open, setOpen] = createControllableSignal(_props, "open", false);
-	onMount(() => {
-		const _cleanup = (() => {
-			anchorNode = anchorElRef;
-			if (open() && !local.disabled) {
-				floatingNode = floatingElRef;
-				arrowNode = arrowElRef;
-				startTracking();
-			}
-		})();
-		if (_cleanup) onCleanup(_cleanup);
-		onCleanup(() => {
-			stopTracking();
-		});
-	});
-	createEffect(on(() => open(), (v) => untrack(() => ((isOpen) => {
-		if (isOpen && !local.disabled) queueMicrotask(() => {
-			if (!open() || local.disabled) return;
-			floatingNode = floatingElRef;
-			arrowNode = arrowElRef;
-			startTracking();
-		});
-		else stopTracking();
-	})(v)), { defer: true }));
-	createEffect(on(() => local.placement, (v) => untrack(() => (() => {
-		if (open()) position();
-	})()), { defer: true }));
-	createEffect(on(() => local.offset, (v) => untrack(() => (() => {
-		if (open()) position();
-	})()), { defer: true }));
-	createEffect(on(() => local.disableFlip, (v) => untrack(() => (() => {
-		if (open()) position();
-	})()), { defer: true }));
-	createEffect(on(() => local.disableShift, (v) => untrack(() => (() => {
-		if (open()) position();
-	})()), { defer: true }));
-	createEffect(on(() => local.strategy, (v) => 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,
-			flip,
-			shift,
-			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
-		};
-		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 = 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();
-	}
-	createEffect(() => {
-		if (!open()) return;
-		const _rozieHandler = ($event) => {
-			if ($event.key !== "Escape") return;
-			dismiss();
-		};
-		document.addEventListener("keydown", _rozieHandler);
-		onCleanup(() => document.removeEventListener("keydown", _rozieHandler));
-	});
-	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={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>
-
-      
-      {<Show when={open() && !local.disabled}><div class={"rozie-popover-floating"} ref={(el) => {
-		floatingElRef = el;
-	}} id="rozie-popover-floating" role={rozieAttr(floatingRole())} aria-modal={!!(floatingRole() === "dialog")} data-rozie-s-c6cf02ea="">
-        {<Show when={local.arrow}><div class={"rozie-popover-arrow"} ref={(el) => {
-		arrowElRef = el;
-	}} data-rozie-s-c6cf02ea="" /></Show>}{resolved()}
-      </div></Show>}</div>
-    </>;
-}
-//#endregion
 //#region src/DataTable.tsx
 __rozieInjectStyle("DataTable-d5dcab4c", `.rozie-data-table[data-rozie-s-d5dcab4c] {
   border-collapse: collapse;
@@ -734,6 +460,7 @@ function DataTable(_props) {
 	const [draftValue, setDraftValue] = createSignal(null);
 	const [invalidMsg, setInvalidMsg] = createSignal("");
 	const [editVer, setEditVer] = createSignal(0);
+	const [editFocusColId, setEditFocusColId] = createSignal(null);
 	const [editingRowIndex, setEditingRowIndex] = createSignal(null);
 	const [rowDraft, setRowDraft] = createSignal({});
 	const [rangeAnchor, setRangeAnchor] = createSignal(null);
@@ -1718,8 +1445,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;
 	}
@@ -3176,6 +2902,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;
@@ -3226,6 +2953,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) {
@@ -3262,6 +2990,7 @@ function DataTable(_props) {
 		setInvalidMsg("");
 		setActiveInControl(false);
 		setEditVer(editVer() + 1);
+		setEditFocusColId(null);
 	}
 	function endRowEdit() {
 		setEditingRowIndex(null);
@@ -3269,6 +2998,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;
@@ -3387,6 +3124,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);
@@ -3427,6 +3166,7 @@ function DataTable(_props) {
 		setEditingRowIndex(rowIndex);
 		setActiveInControl(true);
 		setEditVer(editVer() + 1);
+		setEditFocusColId(editable[0].colId);
 		focusEditorWhenReady();
 	}
 	function commitRow() {
@@ -3446,6 +3186,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;
 			}
@@ -3619,7 +3361,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;
@@ -4038,7 +3783,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></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) => {
@@ -4227,7 +3973,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></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) => {
@@ -4402,16 +4149,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] = createSignal("");
+	onMount(() => {
+		if (local.autofocus) inputElRef?.focus();
+	});
+	createEffect(on(() => local.autofocus, (v) => 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 : "");
@@ -4435,7 +4191,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rozie-ui/data-table-solid",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "private": false,
   "license": "MIT",
@@ -46,13 +46,13 @@
   ],
   "dependencies": {
     "@solid-primitives/keyed": "^1.5.3",
-    "@rozie/runtime-solid": "0.1.3"
+    "@rozie/runtime-solid": "0.1.4"
   },
   "peerDependencies": {
     "solid-js": "^1.8",
     "@tanstack/table-core": "^8.21",
     "@tanstack/virtual-core": "^3",
-    "@floating-ui/dom": "^1.7.2"
+    "@rozie-ui/popover-solid": "^0.1.0"
   },
   "peerDependenciesMeta": {
     "solid-js": {
@@ -64,13 +64,11 @@
     "@tanstack/virtual-core": {
       "optional": false
     },
-    "@floating-ui/dom": {
+    "@rozie-ui/popover-solid": {
       "optional": false
     }
   },
-  "devDependencies": {
-    "@floating-ui/dom": "^1.7.2"
-  },
+  "devDependencies": {},
   "publishConfig": {
     "access": "public"
   },

package/src/Column.tsx

@@ -64,7 +64,7 @@ interface ColumnProps {
 }
 
 export default function Column(_props: ColumnProps): JSX.Element {
-  const _merged = mergeProps({ id: '', field: '', header: '', sortable: false, filterable: false, pinned: '', width: '', expandable: false, groupable: true, aggregationFn: null, editable: false, editor: 'text', editorOptions: (() => [])(), validate: null }, _props);
+  const _merged = mergeProps({ id: '', field: '', header: '', sortable: false, filterable: false, pinned: '', width: '', expandable: false, groupable: true, aggregationFn: null, editable: false, editor: 'text', editorOptions: (() => [])() as any[], validate: null }, _props);
   const [local, attrs] = splitProps(_merged, ['id', 'field', 'header', 'sortable', 'filterable', 'pinned', 'width', 'expandable', 'groupable', 'aggregationFn', 'editable', 'editor', 'editorOptions', 'validate']);
 
   const registry = useContext(rozieContext("data-table:columns"));