@svgrid/grid-wc 2.6.2 → 2.7.0

package/dist/column-resize-DvCRUrN3.js

@@ -0,0 +1,101 @@
+//#region ../grid/dist/column-resize.js
+var e = "sv-grid-resize-handle";
+function t(t, n) {
+	let r = n, i = null, a = null, o = 0, s = () => r.min ?? 40;
+	function c(e) {
+		return e.closest("[data-svgrid-header-col]")?.dataset.svgridHeaderCol ?? null;
+	}
+	function l() {
+		i && r.onResize(i.columnId, o);
+	}
+	function u(e) {
+		i && (o = Math.max(s(), i.startWidth + (e.clientX - i.startX)), a === null && (a = requestAnimationFrame(() => {
+			a = null, l();
+		})));
+	}
+	function d(e) {
+		if (i) {
+			a !== null && (cancelAnimationFrame(a), a = null), o = Math.max(s(), i.startWidth + (e.clientX - i.startX)), l(), i.handle.classList.remove("is-resizing"), m(i.handle, i.columnId);
+			try {
+				i.handle.releasePointerCapture(e.pointerId);
+			} catch {}
+			i = null, window.removeEventListener("pointermove", u), window.removeEventListener("pointerup", d), window.removeEventListener("pointercancel", d), document.body.style.cursor = "";
+		}
+	}
+	function f(t) {
+		if (r.disabled) return;
+		let n = t.target;
+		if (!n?.classList.contains(e)) return;
+		let a = c(n);
+		if (!(!a || r.canResize?.(a) === !1)) {
+			t.preventDefault(), t.stopPropagation(), n.classList.add("is-resizing"), o = r.getWidth(a), i = {
+				columnId: a,
+				startX: t.clientX,
+				startWidth: o,
+				handle: n
+			};
+			try {
+				n.setPointerCapture(t.pointerId);
+			} catch {}
+			document.body.style.cursor = "col-resize", window.addEventListener("pointermove", u), window.addEventListener("pointerup", d), window.addEventListener("pointercancel", d);
+		}
+	}
+	function p(t) {
+		if (r.disabled) return;
+		let n = t.target;
+		if (!n?.classList.contains(e)) return;
+		let i = t.shiftKey ? 1 : 10, a = 0;
+		if (t.key === "ArrowLeft") a = -i;
+		else if (t.key === "ArrowRight") a = i;
+		else return;
+		let o = c(n);
+		if (!o || r.canResize?.(o) === !1) return;
+		t.preventDefault(), t.stopPropagation();
+		let l = Math.max(s(), Math.round(r.getWidth(o) + a));
+		r.onResize(o, l), m(n, o);
+	}
+	function m(e, t) {
+		let n = Math.round(r.getWidth(t));
+		e.setAttribute("aria-valuenow", String(n)), e.setAttribute("aria-valuemin", String(s())), e.setAttribute("aria-valuetext", `${n} pixels`);
+	}
+	function h() {
+		if (r.disabled) {
+			g();
+			return;
+		}
+		let n = t.querySelectorAll("th.sv-grid-column[data-svgrid-header-col]");
+		for (let t of n) {
+			if (t.classList.contains("sv-grid-column-spacer")) continue;
+			let n = t.dataset.svgridHeaderCol;
+			if (!n) continue;
+			if (r.canResize?.(n) === !1) {
+				t.querySelector(`:scope > .${e}`)?.remove();
+				continue;
+			}
+			if (t.querySelector(`:scope > .${e}`)) continue;
+			let i = document.createElement("div");
+			i.className = e, i.setAttribute("role", "separator"), i.setAttribute("aria-orientation", "vertical"), i.setAttribute("aria-label", `Resize ${r.label?.(n) ?? n}`), i.tabIndex = 0, m(i, n), i.addEventListener("dblclick", (e) => {
+				e.stopPropagation(), e.preventDefault(), !r.disabled && (r.onAutosize?.(n), m(i, n));
+			}), t.appendChild(i);
+		}
+	}
+	function g() {
+		t.querySelectorAll(`.${e}`).forEach((e) => e.remove());
+	}
+	t.addEventListener("pointerdown", f, { capture: !0 }), t.addEventListener("keydown", p, { capture: !0 });
+	let _ = new MutationObserver(() => h());
+	return _.observe(t, {
+		childList: !0,
+		subtree: !0
+	}), h(), {
+		update(e) {
+			let t = r.disabled;
+			r = e, t !== r.disabled && h();
+		},
+		destroy() {
+			t.removeEventListener("pointerdown", f, { capture: !0 }), t.removeEventListener("keydown", p, { capture: !0 }), window.removeEventListener("pointermove", u), window.removeEventListener("pointerup", d), window.removeEventListener("pointercancel", d), a !== null && cancelAnimationFrame(a), _.disconnect(), g();
+		}
+	};
+}
+//#endregion
+export { t as columnResize };

package/dist/{dismissable-xj_k_fnZ.js → dismissable-Nx79OIVg.js}

@@ -1,9 +1,9 @@
-import { $ as e, A as t, D as n, E as r, F as i, I as a, J as o, K as s, O as c, R as l, V as u, f as d, it as f, j as p, k as m, n as h, nt as g, q as _, tt as v, v as ee, w as te, y } from "./client-DoXxrq8q.js";
+import { $ as e, A as t, D as n, E as r, F as i, I as a, J as o, K as s, O as c, R as l, V as u, et as d, f, j as p, k as m, n as h, q as g, rt as _, tt as v, v as ee, w as te, y } from "./client-DjwUji8D.js";
 import { n as b, r as x } from "./editor-contract-peBDxir_.js";
 //#region ../grid/dist/SvField.svelte
 var S = p("<span class=\"sv-field__req svelte-xtfnp5\" aria-hidden=\"true\">*</span>"), C = p("<label class=\"sv-field__label svelte-xtfnp5\"> <!></label>"), w = p("<span class=\"sv-field__spinner svelte-xtfnp5\" role=\"status\" aria-label=\"Loading\"></span>"), T = p("<span class=\"sv-field__labelrow svelte-xtfnp5\"><!> <!></span>"), ne = p("<span class=\"sv-field__req svelte-xtfnp5\" aria-hidden=\"true\">*</span>"), re = p("<label class=\"sv-field__float-label svelte-xtfnp5\"> <!></label>"), ie = p("<span class=\"sv-field__adorn sv-field__adorn--lead svelte-xtfnp5\"><!></span>"), ae = p("<span class=\"sv-field__affix sv-field__affix--pre svelte-xtfnp5\"> </span>"), oe = p("<span class=\"sv-field__affix sv-field__affix--suf svelte-xtfnp5\"> </span>"), E = p("<span class=\"sv-field__adorn sv-field__adorn--trail svelte-xtfnp5\"><!></span>"), D = p("<span class=\"sv-field__action-txt svelte-xtfnp5\"> </span>"), O = p("<button class=\"sv-field__action svelte-xtfnp5\" type=\"button\" tabindex=\"-1\"><!></button>"), k = p("<button class=\"sv-field__clear svelte-xtfnp5\" type=\"button\" tabindex=\"-1\">&times;</button>"), A = p("<div><!> <!> <!> <span class=\"sv-field__slot svelte-xtfnp5\"><!></span> <!> <!> <!> <!></div>"), j = p("<span class=\"sv-field__error svelte-xtfnp5\" role=\"alert\"> </span>"), M = p("<span class=\"sv-field__hint svelte-xtfnp5\"> </span>"), N = p("<div><!> <!> <!></div>");
 function P(i, p) {
-	g(p, !0);
+	v(p, !0);
 	let P = h(p, "required", 3, !1), F = h(p, "block", 3, !1), I = h(p, "loading", 3, !1), L = h(p, "frame", 3, !1), R = h(p, "invalid", 3, !1), z = h(p, "size", 3, "md"), B = h(p, "disabled", 3, !1), V = h(p, "readonly", 3, !1), H = h(p, "clearable", 3, !1), U = h(p, "showClear", 3, !1), W = h(p, "clearLabel", 3, "Clear"), G = h(p, "labelMode", 3, "static"), K = h(p, "filled", 3, !1), se = e(() => p.width == null ? void 0 : typeof p.width == "number" ? `${p.width}px` : p.width), q = e(() => G() === "floating" && L() && !!p.label), J = e(() => p.dir === "ltr" || p.dir === "rtl" ? p.dir : void 0);
 	var Y = N();
 	let X;
@@ -15,27 +15,27 @@ function P(i, p) {
 			};
 			r(i, (e) => {
 				P() && e(a);
-			}), f(t), u(() => {
-				d(t, "for", p.id), c(n, p.label);
+			}), _(t), u(() => {
+				f(t, "for", p.id), c(n, p.label);
 			}), m(e, t);
 		};
 		r(n, (e) => {
 			p.label && !l(q) && e(i);
 		});
-		var a = o(n, 2), h = (e) => {
+		var a = o(n, 2), d = (e) => {
 			var t = w();
 			m(e, t);
 		};
 		r(a, (e) => {
-			I() && e(h);
-		}), f(t), m(e, t);
+			I() && e(d);
+		}), _(t), m(e, t);
 	};
 	r(Z, (e) => {
 		(p.label && !l(q) || I()) && e(ce);
 	});
 	var Q = o(Z, 2), le = (e) => {
 		var i = A();
-		let h, g;
+		let d, h;
 		var v = s(i), b = (e) => {
 			var t = re(), n = s(t, !0), i = o(n), a = (e) => {
 				var t = ne();
@@ -43,8 +43,8 @@ function P(i, p) {
 			};
 			r(i, (e) => {
 				P() && e(a);
-			}), f(t), u(() => {
-				d(t, "for", p.id), c(n, p.label);
+			}), _(t), u(() => {
+				f(t, "for", p.id), c(n, p.label);
 			}), m(e, t);
 		};
 		r(v, (e) => {
@@ -52,48 +52,48 @@ function P(i, p) {
 		});
 		var x = o(v, 2), S = (e) => {
 			var t = ie(), r = s(t);
-			n(r, () => p.leading), f(t), m(e, t);
+			n(r, () => p.leading), _(t), m(e, t);
 		};
 		r(x, (e) => {
 			p.leading && e(S);
 		});
 		var C = o(x, 2), w = (e) => {
 			var t = ae(), n = s(t, !0);
-			f(t), u(() => c(n, p.prefix)), m(e, t);
+			_(t), u(() => c(n, p.prefix)), m(e, t);
 		};
 		r(C, (e) => {
 			p.prefix && e(w);
 		});
 		var T = o(C, 2), j = s(T);
-		n(j, () => p.children), f(T);
+		n(j, () => p.children), _(T);
 		var M = o(T, 2), N = (e) => {
 			var t = oe(), n = s(t, !0);
-			f(t), u(() => c(n, p.suffix)), m(e, t);
+			_(t), u(() => c(n, p.suffix)), m(e, t);
 		};
 		r(M, (e) => {
 			p.suffix && e(N);
 		});
 		var I = o(M, 2), L = (e) => {
 			var t = E(), r = s(t);
-			n(r, () => p.trailing), f(t), m(e, t);
+			n(r, () => p.trailing), _(t), m(e, t);
 		};
 		r(I, (e) => {
 			p.trailing && e(L);
 		});
 		var G = o(I, 2), J = (e) => {
-			var i = t(), o = _(i);
+			var i = t(), o = g(i);
 			te(o, 17, () => p.actions, (e) => e.label, (e, i) => {
-				var o = O(), p = s(o), h = (e) => {
-					var r = t(), a = _(r);
+				var o = O(), d = s(o), p = (e) => {
+					var r = t(), a = g(r);
 					n(a, () => l(i).icon), m(e, r);
-				}, g = (e) => {
+				}, h = (e) => {
 					var t = D(), n = s(t, !0);
-					f(t), u(() => c(n, l(i).label)), m(e, t);
+					_(t), u(() => c(n, l(i).label)), m(e, t);
 				};
-				r(p, (e) => {
-					l(i).icon ? e(h) : e(g, -1);
-				}), f(o), u(() => {
-					d(o, "aria-label", l(i).label), d(o, "title", l(i).label), o.disabled = B() || l(i).disabled;
+				r(d, (e) => {
+					l(i).icon ? e(p) : e(h, -1);
+				}), _(o), u(() => {
+					f(o, "aria-label", l(i).label), f(o, "title", l(i).label), o.disabled = B() || l(i).disabled;
 				}), a("click", o, () => l(i).onClick()), m(e, o);
 			}), m(e, i);
 		};
@@ -102,20 +102,20 @@ function P(i, p) {
 		});
 		var Y = o(G, 2), X = (e) => {
 			var t = k();
-			u(() => d(t, "aria-label", W())), a("click", t, () => p.onclear?.()), m(e, t);
+			u(() => f(t, "aria-label", W())), a("click", t, () => p.onclear?.()), m(e, t);
 		};
 		r(Y, (e) => {
 			H() && U() && !B() && !V() && e(X);
-		}), f(i), u(() => {
-			h = y(i, 1, `sv-field__control sv-field--${z() ?? ""}`, "svelte-xtfnp5", h, {
+		}), _(i), u(() => {
+			d = y(i, 1, `sv-field__control sv-field--${z() ?? ""}`, "svelte-xtfnp5", d, {
 				"is-invalid": R(),
 				"is-disabled": B(),
 				"is-readonly": V(),
 				"is-filled": K()
-			}), g = ee(i, "", g, { width: F() ? void 0 : l(se) });
+			}), h = ee(i, "", h, { width: F() ? void 0 : l(se) });
 		}), m(e, i);
 	}, $ = (e) => {
-		var r = t(), i = _(r);
+		var r = t(), i = g(r);
 		n(i, () => p.children), m(e, r);
 	};
 	r(Q, (e) => {
@@ -123,23 +123,23 @@ function P(i, p) {
 	});
 	var ue = o(Q, 2), de = (e) => {
 		var t = j(), n = s(t, !0);
-		f(t), u((e) => {
-			d(t, "id", e), c(n, p.error);
+		_(t), u((e) => {
+			f(t, "id", e), c(n, p.error);
 		}, [() => b(p.id)]), m(e, t);
 	}, fe = (e) => {
 		var t = M(), n = s(t, !0);
-		f(t), u((e) => {
-			d(t, "id", e), c(n, p.hint);
+		_(t), u((e) => {
+			f(t, "id", e), c(n, p.hint);
 		}, [() => x(p.id)]), m(e, t);
 	};
 	r(ue, (e) => {
 		p.error ? e(de) : p.hint && e(fe, 1);
-	}), f(Y), u(() => {
+	}), _(Y), u(() => {
 		X = y(Y, 1, "sv-field svelte-xtfnp5", null, X, {
 			"sv-field--block": F(),
 			"sv-field--floating": l(q)
-		}), d(Y, "dir", l(J)), Y.dir = Y.dir;
-	}), m(i, Y), v();
+		}), f(Y, "dir", l(J)), Y.dir = Y.dir;
+	}), m(i, Y), d();
 }
 i(["click"]);
 //#endregion

package/dist/react/index.d.ts

@@ -0,0 +1,313 @@
+import '@svgrid/grid-wc';
+export interface SvGridProps {
+    /** `property only` - ReadonlyArray<TData> */
+    data?: readonly unknown[];
+    /** `property only` - Array<ColumnDef<TFeatures, TData>> */
+    columns?: readonly unknown[];
+    /** `property only` - BoardConfig<TFeatures, TData> */
+    board?: unknown;
+    /** `property only` - SchedulerConfig<TFeatures, TData> */
+    scheduler?: unknown;
+    /** `property only` - ChartViewConfig<TFeatures, TData> */
+    chart?: unknown;
+    /** `property only` - GridPivotConfig<TData> */
+    pivot?: unknown;
+    /** `pivot-mode` - boolean */
+    pivotMode?: boolean;
+    /** `context-menu` - boolean | ReadonlyArray<ContextMenuItem<TData>> */
+    contextMenu?: boolean;
+    /** `selection-bar` - | boolean | ReadonlyArray<SelectionBarAction<TData> | SelectionBarBuiltin> | SelectionBarC */
+    selectionBar?: boolean;
+    /** `property only` - TFeatures */
+    features?: unknown;
+    /** `sortable` - boolean */
+    sortable?: boolean;
+    /** `filterable` - boolean */
+    filterable?: boolean;
+    /** `editable` - boolean */
+    editable?: boolean;
+    /** `property only` - { parentField: string; idField?: string; column?: string; indentPx?: number; } */
+    treeData?: unknown;
+    /** `groupable` - boolean */
+    groupable?: boolean;
+    /** `property only` - ReadonlyArray<string> */
+    groupBy?: readonly unknown[];
+    /** `property only` - Record<string, boolean> */
+    expanded?: unknown;
+    /** `group-footers` - boolean */
+    groupFooters?: boolean;
+    /** `grand-total-row` - boolean */
+    grandTotalRow?: boolean;
+    /** `group-display-mode` - GroupDisplayType */
+    groupDisplayMode?: string;
+    /** `auto-group-column-header` - string */
+    autoGroupColumnHeader?: string;
+    /** `auto-group-column-width` - number */
+    autoGroupColumnWidth?: number;
+    /** `pageable` - boolean */
+    pageable?: boolean;
+    /** `loading` - boolean */
+    loading?: boolean;
+    /** `loading-overlay` - boolean */
+    loadingOverlay?: boolean;
+    /** `loading-skeleton-rows` - number */
+    loadingSkeletonRows?: number;
+    /** `error` - string | null */
+    error?: string | null;
+    /** `empty-message` - string */
+    emptyMessage?: string;
+    /** `property only` - GridLocalization */
+    localization?: unknown;
+    /** `show-global-filter` - boolean */
+    showGlobalFilter?: boolean;
+    /** `show-column-filters` - boolean */
+    showColumnFilters?: boolean;
+    /** `filter-mode` - "row" | "menu" | "global" | "none" */
+    filterMode?: "row" | "menu" | "global" | "none";
+    /** `show-grouping-controls` - boolean */
+    showGroupingControls?: boolean;
+    /** `show-row-selection` - boolean */
+    showRowSelection?: boolean;
+    /** `show-pagination` - boolean */
+    showPagination?: boolean;
+    /** `page-size` - number */
+    pageSize?: number;
+    /** `property only` - number[] */
+    pageSizeOptions?: readonly unknown[];
+    /** `pagination-position` - 'top' | 'bottom' | 'both' */
+    paginationPosition?: "top" | "bottom" | "both";
+    /** `external-pagination` - boolean */
+    externalPagination?: boolean;
+    /** `row-count` - number */
+    rowCount?: number;
+    /** `page-index` - number */
+    pageIndex?: number;
+    /** `virtualization` - boolean */
+    virtualization?: boolean;
+    /** `row-height` - number | ((rowIndex: number) => number) */
+    rowHeight?: number;
+    /** `auto-row-height` - boolean */
+    autoRowHeight?: boolean;
+    /** `row-resize` - boolean */
+    rowResize?: boolean;
+    /** `header-height` - number */
+    headerHeight?: number;
+    /** `overscan` - number */
+    overscan?: number;
+    /** `container-height` - number | string */
+    containerHeight?: string;
+    /** `column-virtualization` - boolean */
+    columnVirtualization?: boolean;
+    /** `column-overscan` - number */
+    columnOverscan?: number;
+    /** `column-width` - number */
+    columnWidth?: number;
+    /** `property only` - { left?: ReadonlyArray<string>; right?: ReadonlyArray<string>; } */
+    initialColumnPinning?: unknown;
+    /** `fit-columns` - boolean */
+    fitColumns?: boolean;
+    /** `column-resize` - boolean */
+    columnResize?: boolean;
+    /** `responsive` - boolean | { breakpoint?: number } */
+    responsive?: boolean;
+    /** `show-filter-menu` - boolean */
+    showFilterMenu?: boolean;
+    /** `show-filter-row` - boolean */
+    showFilterRow?: boolean;
+    /** `enable-cell-selection` - boolean */
+    enableCellSelection?: boolean;
+    /** `move-cells` - boolean */
+    moveCells?: boolean;
+    /** `enable-row-hover` - boolean */
+    enableRowHover?: boolean;
+    /** `copy-headers-to-clipboard` - boolean */
+    copyHeadersToClipboard?: boolean;
+    /** `property only` - (params: { value: unknown; column: unknown; row: TData; rowIndex: number; columnId: string */
+    processCellForClipboard?: unknown;
+    /** `enable-inline-editing` - boolean */
+    enableInlineEditing?: boolean;
+    /** `full-row-editing` - boolean */
+    fullRowEditing?: boolean;
+    /** `enable-row-summaries` - boolean */
+    enableRowSummaries?: boolean;
+    /** `summary` - boolean */
+    summary?: boolean;
+    /** `status-bar` - | boolean | { aggregates?: ReadonlyArray< "count" | "numericCount" | "sum" | "avg" | "min" */
+    statusBar?: boolean;
+    /** `tool-panel` - boolean */
+    toolPanel?: boolean;
+    /** `charting` - boolean | ChartingConfig<TData> */
+    charting?: boolean;
+    /** `column-menu-tabs` - boolean */
+    columnMenuTabs?: boolean;
+    /** `tool-panel-default-open` - boolean */
+    toolPanelDefaultOpen?: boolean;
+    /** `tool-panel-default-tab` - "columns" | "filters" */
+    toolPanelDefaultTab?: "columns" | "filters";
+    /** `selection-mode` - "row" | "cell" | "both" | "none" */
+    selectionMode?: "row" | "cell" | "both" | "none";
+    /** `show-row-numbers` - boolean */
+    showRowNumbers?: boolean;
+    /** `zebra-rows` - boolean */
+    zebraRows?: boolean;
+    /** `row-number-width` - number */
+    rowNumberWidth?: number;
+    /** `external-sort` - boolean */
+    externalSort?: boolean;
+    /** `property only` - Array<{ id: string; desc: boolean }> */
+    initialSorting?: readonly unknown[];
+    /** `property only` - GridPredicateExpr | null */
+    initialAdvancedFilter?: unknown;
+    /** `external-filter` - boolean */
+    externalFilter?: boolean;
+    /** `property only` - (row: TData, index: number) => string */
+    getRowId?: unknown;
+    /** `property only` - (ctx: { row: TData; rowIndex: number; }) => string | ReadonlyArray<string> | Record<string */
+    rowClass?: unknown;
+    /** `property only` - Record<string, Record<string, string>> */
+    notes?: unknown;
+    /** `editable-comments` - boolean */
+    editableComments?: boolean;
+    /** `property only` - ReadonlyArray<ConditionalFormat<TData>> */
+    conditionalFormats?: readonly unknown[];
+    /** `conditional-stat-scope` - "filtered" | "visible" | "all" */
+    conditionalStatScope?: "filtered" | "visible" | "all";
+    /** `property only` - (row: TData, rowIndex: number) => boolean */
+    isDetailRow?: unknown;
+    /** `property only` - { isGroup: (row: TData) => boolean; level: (row: TData) => number; expanded?: (row: TData) */
+    serverGroup?: unknown;
+    /** `property only` - (columnId: string) => Promise<string[]> */
+    serverFilterValues?: unknown;
+    /** `property only` - ReadonlyArray<TData> */
+    pinnedTopRows?: readonly unknown[];
+    /** `property only` - ReadonlyArray<TData> */
+    pinnedBottomRows?: readonly unknown[];
+    /** `enable-column-reorder` - boolean */
+    enableColumnReorder?: boolean;
+    /** `property only` - ReadonlyArray<string> */
+    columnOrder?: readonly unknown[];
+    /** `infer-column-types` - boolean */
+    inferColumnTypes?: boolean;
+    /** `row-drag-managed` - boolean */
+    rowDragManaged?: boolean;
+    /** `row-drag-group` - string */
+    rowDragGroup?: string;
+    /** `aligned-grid-group` - string */
+    alignedGridGroup?: string;
+    /** `filter-locale` - string | ReadonlyArray<string> */
+    filterLocale?: string;
+    /** `pivotmodechange` */
+    onPivotModeChange?: (detail: boolean) => void;
+    /** `expandedchange` */
+    onExpandedChange?: (detail: Record<string, boolean>) => void;
+    /** `paginationchange` */
+    onPaginationChange?: (detail: {
+        pageIndex: number;
+        pageSize: number;
+    }) => void;
+    /** `apiready` */
+    onApiReady?: (detail: unknown) => void;
+    /** `rowselectionchange` */
+    onRowSelectionChange?: (detail: {
+        selection: Record<string, boolean>;
+        rows: Record<string, unknown>[];
+    }) => void;
+    /** `cellselectionchange` */
+    onCellSelectionChange?: (detail: Array<[number, number, number, number]>) => void;
+    /** `sortingchange` */
+    onSortingChange?: (detail: Array<{
+        id: string;
+        desc: boolean;
+    }>) => void;
+    /** `advancedfilterchange` */
+    onAdvancedFilterChange?: (detail: unknown) => void;
+    /** `filterschange` */
+    onFiltersChange?: (detail: unknown) => void;
+    /** `notechange` */
+    onNoteChange?: (detail: {
+        rowId: string;
+        columnId: string;
+        note: string;
+    }) => void;
+    /** `cellvaluechange` */
+    onCellValueChange?: (detail: {
+        rowIndex: number;
+        columnId: string;
+        oldValue: unknown;
+        newValue: unknown;
+        row: Record<string, unknown>;
+    }) => void;
+    /** `activecellchange` */
+    onActiveCellChange?: (detail: {
+        rowIndex: number;
+        colIndex: number;
+        columnId: string;
+    }) => void;
+    /** `cellclick` */
+    onCellClick?: (detail: {
+        rowIndex: number;
+        colIndex: number;
+        columnId: string;
+        value: unknown;
+        row: Record<string, unknown>;
+    }) => void;
+    /** `rowclick` */
+    onRowClick?: (detail: {
+        rowIndex: number;
+        columnId: string;
+        row: Record<string, unknown>;
+    }) => void;
+    /** `celldoubleclick` */
+    onCellDoubleClick?: (detail: {
+        rowIndex: number;
+        colIndex: number;
+        columnId: string;
+        value: unknown;
+        row: Record<string, unknown>;
+    }) => void;
+    /** `rowdoubleclick` */
+    onRowDoubleClick?: (detail: {
+        rowIndex: number;
+        columnId: string;
+        row: Record<string, unknown>;
+    }) => void;
+    /** `scrollbottomreached` */
+    onScrollBottomReached?: (detail: {
+        scrollTop: number;
+        scrollHeight: number;
+        clientHeight: number;
+    }) => void;
+    /** `columnorderchange` */
+    onColumnOrderChange?: (detail: ReadonlyArray<string>) => void;
+    /** `rowdragend` */
+    onRowDragEnd?: (detail: {
+        row: Record<string, unknown>;
+        toIndex: number;
+        sameGrid: boolean;
+        fromGridId: number;
+        toGridId: number;
+    }) => void;
+    /** `selectionchange` - published alias of rowselectionchange, detail is the selected rows */
+    onSelectionchange?: (detail: unknown) => void;
+    /** Render inside an open shadow root, so page CSS cannot reach the grid. */
+    shadow?: boolean;
+    /** Forwarded to the host element. */
+    className?: string;
+    style?: Record<string, string | number>;
+}
+/** The grid's imperative api, reachable through a ref. */
+export interface SvGridHandle {
+    /** The host custom element. */
+    element: HTMLElement | null;
+    /** The grid api, once `apiready` has fired. */
+    api: unknown;
+}
+/**
+ * SvGrid as a React component.
+ *
+ * Every non-primitive prop is assigned as a DOM property in an effect rather
+ * than passed through JSX, because React 18 and earlier stringify them onto
+ * attributes and an attribute cannot hold an array.
+ */
+export declare const SvGrid: import("react").ForwardRefExoticComponent<SvGridProps & import("react").RefAttributes<SvGridHandle>>;
+export default SvGrid;

package/dist/react/index.js

@@ -0,0 +1,72 @@
+import { createElement as e, forwardRef as t, useEffect as n, useImperativeHandle as r, useRef as i } from "react";
+import "@svgrid/grid-wc";
+//#region src/react/index.tsx
+var a = /* @__PURE__ */ "data.columns.board.scheduler.chart.pivot.pivotMode.contextMenu.selectionBar.features.sortable.filterable.editable.treeData.groupable.groupBy.expanded.groupFooters.grandTotalRow.groupDisplayMode.autoGroupColumnHeader.autoGroupColumnWidth.pageable.loading.loadingOverlay.loadingSkeletonRows.error.emptyMessage.localization.showGlobalFilter.showColumnFilters.filterMode.showGroupingControls.showRowSelection.showPagination.pageSize.pageSizeOptions.paginationPosition.externalPagination.rowCount.pageIndex.virtualization.rowHeight.autoRowHeight.rowResize.headerHeight.overscan.containerHeight.columnVirtualization.columnOverscan.columnWidth.initialColumnPinning.fitColumns.columnResize.responsive.showFilterMenu.showFilterRow.enableCellSelection.moveCells.enableRowHover.copyHeadersToClipboard.processCellForClipboard.enableInlineEditing.fullRowEditing.enableRowSummaries.summary.statusBar.toolPanel.charting.columnMenuTabs.toolPanelDefaultOpen.toolPanelDefaultTab.selectionMode.showRowNumbers.zebraRows.rowNumberWidth.externalSort.initialSorting.initialAdvancedFilter.externalFilter.getRowId.rowClass.notes.editableComments.conditionalFormats.conditionalStatScope.isDetailRow.serverGroup.serverFilterValues.pinnedTopRows.pinnedBottomRows.enableColumnReorder.columnOrder.inferColumnTypes.rowDragManaged.rowDragGroup.alignedGridGroup.filterLocale".split("."), o = [
+	["onPivotModeChange", "pivotmodechange"],
+	["onExpandedChange", "expandedchange"],
+	["onPaginationChange", "paginationchange"],
+	["onApiReady", "apiready"],
+	["onRowSelectionChange", "rowselectionchange"],
+	["onCellSelectionChange", "cellselectionchange"],
+	["onSortingChange", "sortingchange"],
+	["onAdvancedFilterChange", "advancedfilterchange"],
+	["onFiltersChange", "filterschange"],
+	["onNoteChange", "notechange"],
+	["onCellValueChange", "cellvaluechange"],
+	["onActiveCellChange", "activecellchange"],
+	["onCellClick", "cellclick"],
+	["onRowClick", "rowclick"],
+	["onCellDoubleClick", "celldoubleclick"],
+	["onRowDoubleClick", "rowdoubleclick"],
+	["onScrollBottomReached", "scrollbottomreached"],
+	["onColumnOrderChange", "columnorderchange"],
+	["onRowDragEnd", "rowdragend"],
+	["onSelectionchange", "selectionchange"]
+], s = t(function(t, s) {
+	let c = i(null), { shadow: l, className: u, style: d, ...f } = t;
+	n(() => {
+		l && import("@svgrid/grid-wc/shadow");
+	}, [l]);
+	let p = i({});
+	n(() => {
+		let e = c.current;
+		if (e) for (let t of a) {
+			let n = f[t];
+			n === void 0 || Object.is(p.current[t], n) || (p.current[t] = n, e[t] = n);
+		}
+	});
+	let m = i(f);
+	return m.current = f, n(() => {
+		let e = c.current;
+		if (!e) return;
+		let t = [];
+		for (let [n, r] of o) {
+			let i = (e) => {
+				let t = m.current[n];
+				t?.(e.detail);
+			};
+			e.addEventListener(r, i), t.push([r, i]);
+		}
+		let n = m.current.onApiReady, r = e.api;
+		return n && r != null && n(r), () => {
+			for (let [n, r] of t) e.removeEventListener(n, r);
+		};
+	}, []), r(s, () => ({
+		get element() {
+			return c.current;
+		},
+		get api() {
+			return c.current?.api ?? null;
+		}
+	}), []), e(l ? "sv-grid-shadow" : "sv-grid", {
+		ref: c,
+		class: u,
+		style: {
+			display: "block",
+			height: "100%",
+			...d
+		}
+	});
+});
+//#endregion
+export { s as SvGrid, s as default };