@box-kite/react 2.0.0 → 2.1.0

package/components/dashboard.mjs

@@ -0,0 +1,690 @@
+"use client";
+import { u as e } from "../platform.mjs";
+import t from "../box.mjs";
+import { a as n, i as r, o as i } from "../behavior.mjs";
+import { t as a } from "../dashboardSchema.mjs";
+import { Circle as o, Path as s, Svg as c } from "./svg.mjs";
+import l from "./visuallyHidden.mjs";
+import { createContext as u, useContext as d, useId as f, useMemo as p, useRef as m, useState as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/utils/dashboard/dashboardUtils.ts
+var v;
+(function(e) {
+	let t = e.VERSION = 1, n = e.MIN_COLUMNS = 1, r = e.MAX_COLUMNS = 24;
+	function i(e, t, n) {
+		return Math.min(Math.max(e, t), n);
+	}
+	function o(e, t) {
+		return typeof e == "number" && Number.isFinite(e) ? Math.round(e) : t;
+	}
+	function s(e, t) {
+		return e.x < t.x + t.w && e.x + e.w > t.x && e.y < t.y + t.h && e.y + e.h > t.y;
+	}
+	e.overlaps = s;
+	function c(e, t) {
+		return e.find((e) => e.id !== t.id && s(e, t));
+	}
+	function l(e, t) {
+		let n = Math.min(e.maxW ?? t, t), r = i(o(e.w, 1), Math.max(1, Math.min(e.minW ?? 1, n)), Math.max(1, n)), a = i(o(e.h, 1), Math.max(1, e.minH ?? 1), Math.max(1, e.maxH ?? 2 ** 53 - 1));
+		return {
+			...e,
+			w: r,
+			h: a,
+			x: i(o(e.x, 0), 0, t - r),
+			y: Math.max(o(e.y, 0), 0)
+		};
+	}
+	function u(e, t) {
+		return e.y - t.y || e.x - t.x;
+	}
+	function d(e, t) {
+		let a = i(o(t, 12), n, r), s = e.map((e) => l(e, a)), d = (e) => +!e.fixed, f = [...s].sort((e, t) => d(e) - d(t) || u(e, t)), p = [];
+		for (let e of f) {
+			if (e.fixed) {
+				p.push(e);
+				continue;
+			}
+			let t = { ...e };
+			for (; t.y > 0 && !c(p, {
+				...t,
+				y: t.y - 1
+			});) t.y--;
+			let n = c(p, t);
+			for (; n;) t.y = n.y + n.h, n = c(p, t);
+			p.push(t);
+		}
+		return p.sort(u);
+	}
+	e.resolve = d;
+	function f(e) {
+		let a = i(o(e.columns, 12), n, r);
+		return {
+			version: t,
+			columns: a,
+			items: d(e.items, a)
+		};
+	}
+	e.normalize = f;
+	function p(e, t) {
+		return e.items.find((e) => e.id === t);
+	}
+	e.itemOf = p;
+	function m(e) {
+		return new Map(e.items.map((e, t) => [e.id, t]));
+	}
+	e.ranks = m;
+	function h(e, t) {
+		let n = (n) => !s(t, n) && !e.some((e) => e.id !== n.id && e.id !== t.id && s(e, n));
+		return e.map((e) => {
+			if (e.id === t.id) return t;
+			if (e.fixed === !0 || !s(e, t)) return e;
+			let r = {
+				...e,
+				y: Math.max(t.y - e.h, 0)
+			};
+			return n(r) ? r : {
+				...e,
+				y: t.y + t.h
+			};
+		});
+	}
+	function g(e, t, a, s) {
+		let c = p(e, t);
+		if (!c || c.fixed) return e;
+		let u = l({
+			...c,
+			x: a,
+			y: s
+		}, i(o(e.columns, 12), n, r));
+		return f({
+			...e,
+			items: h(e.items, u)
+		});
+	}
+	e.moveTo = g;
+	function _(e, t, n, r) {
+		let i = p(e, t);
+		if (!i || i.fixed) return e;
+		let a = e.items.map((e) => e.id === t ? {
+			...e,
+			w: n,
+			h: r
+		} : e);
+		return f({
+			...e,
+			items: a
+		});
+	}
+	e.resizeTo = _;
+	function v(e, t) {
+		let n = e.items.reduce((e, t) => Math.max(e, t.y + t.h), 0);
+		return f({
+			...e,
+			items: [...e.items, {
+				x: 0,
+				y: n,
+				...t
+			}]
+		});
+	}
+	e.add = v;
+	function y(e, t) {
+		return f({
+			...e,
+			items: e.items.filter((e) => e.id !== t)
+		});
+	}
+	e.remove = y;
+	function b(e, a) {
+		let s = i(o(a, 12), n, r);
+		if (s === e.columns) return f(e);
+		let c = s / e.columns, l = (e) => e === void 0 ? void 0 : i(Math.max(1, Math.round(e * c)), 1, s), u = e.items.map((e) => {
+			let t = i(Math.max(1, Math.round(e.w * c)), 1, s);
+			return {
+				...e,
+				w: t,
+				x: i(Math.floor(e.x * c), 0, s - t),
+				minW: l(e.minW),
+				maxW: l(e.maxW)
+			};
+		});
+		return f({
+			version: t,
+			columns: s,
+			items: u
+		});
+	}
+	e.project = b;
+	function x(e, t) {
+		return e === t ? !0 : e.columns !== t.columns || e.items.length !== t.items.length ? !1 : e.items.every((e, n) => {
+			let r = t.items[n];
+			return e.id === r.id && e.x === r.x && e.y === r.y && e.w === r.w && e.h === r.h;
+		});
+	}
+	e.same = x;
+	function S(e, t, n) {
+		return {
+			columns: n.x > 0 ? Math.round(e / n.x) : 0,
+			rows: n.y > 0 ? Math.round(t / n.y) : 0
+		};
+	}
+	e.cellsMoved = S;
+	function C(e) {
+		return typeof e == "string" && e.length > 0;
+	}
+	function w(e) {
+		return typeof e == "number" && Number.isFinite(e);
+	}
+	function T(e, t, n) {
+		if (typeof e != "object" || !e || Array.isArray(e)) {
+			n.push({
+				code: "invalid-item",
+				path: t,
+				message: "A layout item has to be an object."
+			});
+			return;
+		}
+		let r = e;
+		if (!C(r.id)) {
+			n.push({
+				code: "invalid-item",
+				path: `${t}.id`,
+				message: "A layout item needs an id naming the widget it places."
+			});
+			return;
+		}
+		if (!w(r.x) || !w(r.y) || !w(r.w) || !w(r.h)) {
+			n.push({
+				code: "invalid-item",
+				path: t,
+				message: `Item "${r.id}" needs numeric x, y, w and h.`
+			});
+			return;
+		}
+		let i = [
+			"minW",
+			"minH",
+			"maxW",
+			"maxH"
+		].reduce((e, t) => (w(r[t]) && (e[t] = Math.round(r[t])), e), {});
+		return {
+			id: r.id,
+			x: Math.round(r.x),
+			y: Math.round(r.y),
+			w: Math.round(r.w),
+			h: Math.round(r.h),
+			...i,
+			...r.fixed === !0 ? { fixed: !0 } : {}
+		};
+	}
+	function E(e, a = 12) {
+		let o = [], s = {
+			version: t,
+			columns: a,
+			items: []
+		};
+		if (typeof e != "object" || !e || Array.isArray(e)) return o.push({
+			code: "not-an-object",
+			path: "",
+			message: "A layout has to be an object."
+		}), {
+			layout: f(s),
+			issues: o
+		};
+		let c = e;
+		c.version !== t && o.push({
+			code: "version",
+			path: "version",
+			message: `Layout version ${String(c.version)} was read as version ${t}.`
+		});
+		let l = w(c.columns) ? i(Math.round(c.columns), n, r) : a;
+		if (w(c.columns) || o.push({
+			code: "columns",
+			path: "columns",
+			message: `No column count, so the layout was read in ${a}.`
+		}), !Array.isArray(c.items)) return o.push({
+			code: "items",
+			path: "items",
+			message: "A layout needs an items array."
+		}), {
+			layout: f({
+				...s,
+				columns: l
+			}),
+			issues: o
+		};
+		let u = /* @__PURE__ */ new Set(), d = c.items.reduce((e, t, n) => {
+			let r = T(t, `items.${n}`, o);
+			return r ? u.has(r.id) ? (o.push({
+				code: "duplicate-id",
+				path: `items.${n}.id`,
+				message: `Two items are called "${r.id}"; the second was dropped.`
+			}), e) : (u.add(r.id), e.push(r), e) : e;
+		}, []);
+		return {
+			layout: f({
+				version: t,
+				columns: l,
+				items: d
+			}),
+			issues: o
+		};
+	}
+	e.parse = E, e.SCHEMA = a;
+})(v ||= {});
+var y = v, b = [
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"xxl"
+], x = [
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6"
+], S = u(null);
+function C(e, t, n) {
+	return Math.min(Math.max(e, t), n);
+}
+function w(e) {
+	if (typeof e == "number") return [{ count: C(Math.round(e), y.MIN_COLUMNS, y.MAX_COLUMNS) }];
+	let t = b.filter((t) => typeof e[t] == "number").map((t) => ({
+		size: t,
+		count: C(Math.round(e[t]), y.MIN_COLUMNS, y.MAX_COLUMNS)
+	}));
+	return t.length > 0 ? t : [{ count: 12 }];
+}
+function T(e) {
+	return {
+		gridColumnStart: e.x + 1,
+		gridColumnEnd: e.x + 1 + e.w,
+		gridRowStart: e.y + 1,
+		gridRowEnd: e.y + 1 + e.h
+	};
+}
+function E(e) {
+	return `max${e[0].toUpperCase()}${e.slice(1)}`;
+}
+function D(e, t) {
+	let n = t ? -1 : 1;
+	if (e === "ArrowLeft") return {
+		x: -n,
+		y: 0
+	};
+	if (e === "ArrowRight") return {
+		x: n,
+		y: 0
+	};
+	if (e === "ArrowUp") return {
+		x: 0,
+		y: -1
+	};
+	if (e === "ArrowDown") return {
+		x: 0,
+		y: 1
+	};
+}
+function O(e) {
+	return `column ${e.x + 1}, row ${e.y + 1}`;
+}
+function k(e) {
+	return `${e.w} ${e.w === 1 ? "column" : "columns"} by ${e.h} ${e.h === 1 ? "row" : "rows"}`;
+}
+function A(a) {
+	let { children: o, layout: s, defaultLayout: c, onLayoutChange: u, onLayoutCommit: d, columns: v = {
+		xs: 1,
+		md: 6,
+		xxl: 12
+	}, rowHeight: x = 24, editable: C = !1, label: A, labelledBy: j, props: M, ...N } = a, P = m(null), [F, I] = h(null), [L, R] = h(null), [ee, z] = h(""), B = `${f()}-dashboard`, [V, te] = r({
+		value: s,
+		defaultValue: c ?? {
+			version: y.VERSION,
+			columns: 12,
+			items: []
+		},
+		onChange: u
+	}), H = p(() => y.normalize(V), [V]), U = i(H), W = n(d), ne = typeof v == "number" ? String(v) : b.map((e) => v[e] ?? "").join(), G = p(() => w(v), [ne]), K = G[G.length - 1], q = p(() => {
+		let e = y.ranks(H), t = /* @__PURE__ */ new Map();
+		for (let n of G) {
+			let r = n.count === K.count ? H : y.project(H, n.count), i = K.count / n.count;
+			for (let a of r.items) {
+				let r = t.get(a.id) ?? {
+					order: e.get(a.id) ?? 0,
+					fixed: a.fixed === !0
+				}, o = T({
+					...a,
+					x: Math.round(a.x * i),
+					w: Math.round((a.x + a.w) * i) - Math.round(a.x * i)
+				});
+				n === G[0] ? r.placement = o : r.query = {
+					...r.query,
+					[n.size]: o
+				}, t.set(a.id, r);
+			}
+		}
+		return t;
+	}, [
+		H,
+		G,
+		K.count
+	]), J = n((e, t) => {
+		y.same(e, U.current) || te(e, t);
+	}), re = (e, t) => {
+		let n = e.getBoundingClientRect(), r = P.current, i = r && typeof getComputedStyle == "function" ? getComputedStyle(r) : void 0, a = Number.parseFloat(i?.columnGap ?? "") || 0, o = Number.parseFloat(i?.rowGap ?? "") || 0;
+		return {
+			x: (n.width + a) / t.w,
+			y: (n.height + o) / t.h
+		};
+	}, ie = (e) => e instanceof Element ? e.closest("[data-widget-id]") : null, Y = (e, t, n, r) => {
+		let i = e.kind === "move" ? y.moveTo(U.current, e.id, t, n) : y.resizeTo(U.current, e.id, t, n);
+		return J(i, {
+			reason: e.kind,
+			event: r
+		}), i;
+	}, X = n((t, n, r, i) => {
+		let a = y.itemOf(U.current, n), o = ie(t.currentTarget);
+		!C || t.button !== 0 || t.defaultPrevented || !a || a.fixed || !o || (t.preventDefault(), t.currentTarget.setPointerCapture?.(t.pointerId), t.currentTarget.focus(), I({
+			id: n,
+			kind: i,
+			name: r,
+			origin: a,
+			before: U.current,
+			pointer: {
+				id: t.pointerId,
+				x: t.clientX,
+				y: t.clientY,
+				step: re(o, a),
+				rtl: e(o)
+			}
+		}));
+	}), Z = n((e, t) => {
+		if (!F?.pointer || F.id !== t) return;
+		let { x: n, y: r, step: i, rtl: a } = F.pointer, o = {
+			x: e.clientX - n,
+			y: e.clientY - r
+		}, s = y.cellsMoved(a ? -o.x : o.x, o.y, i), c = F.origin, l = F.kind === "move" ? Y(F, c.x + s.columns, c.y + s.rows, e) : Y(F, c.w + s.columns, c.h + s.rows, e), u = y.itemOf(l, t);
+		if (F.kind !== "move" || !u) return;
+		let d = {
+			x: (u.x - c.x) * i.x * (a ? -1 : 1),
+			y: (u.y - c.y) * i.y
+		};
+		R({ translate: `${Math.round(o.x - d.x)}px ${Math.round(o.y - d.y)}px` });
+	}), Q = n((e, t) => {
+		if (!F?.pointer || F.id !== t) return;
+		let n = y.itemOf(U.current, t);
+		e.currentTarget.releasePointerCapture?.(F.pointer.id), I(null), R(null), W(U.current, {
+			reason: F.kind,
+			event: e
+		}), n && z(F.kind === "move" ? `${F.name} moved to ${O(n)}.` : `${F.name} resized to ${k(n)}.`);
+	}), ae = n((e, t) => {
+		J(e.before, {
+			reason: e.kind,
+			event: t
+		}), I(null), z(`${e.name} put back at ${O(e.origin)}.`);
+	}), oe = n((t, n, r, i) => {
+		if (!C || t.defaultPrevented) return;
+		let a = F && F.id === n && F.kind === i && !F.pointer ? F : void 0, o = y.itemOf(U.current, n);
+		if (!o) return;
+		if (!a) {
+			if (t.key !== "Enter" && t.key !== " " || o.fixed) return;
+			t.preventDefault(), I({
+				id: n,
+				kind: i,
+				name: r,
+				origin: o,
+				before: U.current
+			}), z(i === "move" ? `${r} picked up at ${O(o)}. Use the arrow keys to move it.` : `${r} held for resizing at ${k(o)}. Use the arrow keys to resize it.`);
+			return;
+		}
+		if (t.key === "Escape") {
+			t.preventDefault(), ae(a, t);
+			return;
+		}
+		if (t.key === "Enter" || t.key === " ") {
+			t.preventDefault(), I(null), W(U.current, {
+				reason: i,
+				event: t
+			}), z(i === "move" ? `${r} dropped at ${O(o)}.` : `${r} resized to ${k(o)}.`);
+			return;
+		}
+		let s = D(t.key, e(t.currentTarget));
+		if (!s) return;
+		t.preventDefault();
+		let c = i === "move" ? Y(a, o.x + s.x, o.y + s.y, t) : Y(a, o.w + s.x, o.h + s.y, t), l = y.itemOf(c, n);
+		l && z(i === "move" ? `${r}, ${O(l)}.` : `${r}, ${k(l)}.`);
+	}), se = n((e, t, n) => {
+		F && F.id === t && F.kind === n && !F.pointer && ae(F, e);
+	}), ce = p(() => ({
+		editable: C,
+		placementOf: (e) => q.get(e),
+		heldOf: (e) => F && F.id === e ? F : void 0,
+		offsetOf: (e) => F && F.id === e && L ? L : void 0,
+		outsideAuthoring: K.size ? { [E(K.size)]: { display: "none" } } : void 0,
+		instructionsId: B,
+		handleProps: (e, t, n) => ({
+			type: "button",
+			"aria-label": n === "move" ? `Move ${t}` : `Resize ${t}`,
+			"aria-pressed": !!(F && F.id === e && F.kind === n),
+			"aria-describedby": B,
+			onPointerDown: (r) => X(r, e, t, n),
+			onPointerMove: (t) => Z(t, e),
+			onPointerUp: (t) => Q(t, e),
+			onPointerCancel: (t) => Q(t, e),
+			onKeyDown: (r) => oe(r, e, t, n),
+			onBlur: (t) => se(t, e, n)
+		})
+	}), [
+		C,
+		q,
+		F,
+		L,
+		K.size,
+		B,
+		X,
+		Z,
+		Q,
+		oe,
+		se
+	]), $ = F ? q.get(F.id) : void 0;
+	return /* @__PURE__ */ _(S.Provider, {
+		value: ce,
+		children: [
+			/* @__PURE__ */ _(t, {
+				ref: P,
+				component: "dashboard",
+				...N,
+				variant: [N.variant, { dragging: F !== null }],
+				vars: { "dashboard-row": `${x / 4}rem` },
+				gridTemplateColumns: K.count,
+				props: {
+					role: "list",
+					"aria-label": A,
+					"aria-labelledby": j,
+					...M
+				},
+				children: [o, $ && /* @__PURE__ */ g(t, {
+					component: "dashboard.placeholder",
+					order: $.order,
+					cq: $.query,
+					...$.placement,
+					props: {
+						role: "presentation",
+						"aria-hidden": !0
+					}
+				})]
+			}),
+			/* @__PURE__ */ g(l, {
+				props: { role: "status" },
+				children: ee
+			}),
+			/* @__PURE__ */ g(l, {
+				id: B,
+				children: "Press Enter or Space to pick the widget up, the arrow keys to move or resize it, Enter to drop it and Escape to put it back."
+			})
+		]
+	});
+}
+function j({ kind: e }) {
+	return e === "resize" ? /* @__PURE__ */ g(c, {
+		viewBox: "0 0 24 24",
+		width: "1rem",
+		height: "1rem",
+		rtl: { flip: "xAxis" },
+		props: { fill: "none" },
+		children: /* @__PURE__ */ g(s, {
+			d: "M20 10 10 20M20 16l-4 4",
+			stroke: "currentColor",
+			strokeWidth: 2,
+			strokeLinecap: "round"
+		})
+	}) : /* @__PURE__ */ _(c, {
+		viewBox: "0 0 24 24",
+		width: "1rem",
+		height: "1rem",
+		children: [[
+			8,
+			12,
+			16
+		].map((e) => /* @__PURE__ */ g(o, {
+			cx: 9,
+			cy: e,
+			r: 1.4,
+			fill: "currentColor"
+		}, e)), [
+			8,
+			12,
+			16
+		].map((e) => /* @__PURE__ */ g(o, {
+			cx: 15,
+			cy: e,
+			r: 1.4,
+			fill: "currentColor"
+		}, e))]
+	});
+}
+function M() {
+	return /* @__PURE__ */ g(c, {
+		viewBox: "0 0 24 24",
+		width: "1rem",
+		height: "1rem",
+		props: { fill: "none" },
+		children: /* @__PURE__ */ g(s, {
+			d: "M20 12a8 8 0 1 1-2.6-5.9M20 4v4h-4",
+			stroke: "currentColor",
+			strokeWidth: 2,
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+function N(e) {
+	let { id: n, children: r, title: i, name: a, description: o, actions: s, level: c = 3, loading: l = !1, error: u, empty: f, onRefresh: p, refreshLabel: m, props: h, ...v } = e, y = d(S), b = n === void 0 ? void 0 : y?.placementOf(n), C = n === void 0 ? void 0 : y?.heldOf(n), w = a ?? (typeof i == "string" ? i : void 0) ?? n ?? "Widget", T = y?.editable === !0 && b !== void 0 && !b.fixed, E = (e) => T && n !== void 0 ? /* @__PURE__ */ g(t, {
+		component: "widget.handle",
+		tag: "button",
+		variant: {
+			editable: !0,
+			grabbed: C?.kind === e,
+			corner: e === "resize"
+		},
+		cq: y?.outsideAuthoring,
+		props: y?.handleProps(n, w, e),
+		children: /* @__PURE__ */ g(j, { kind: e })
+	}) : null, D = () => l ? /* @__PURE__ */ g(t, {
+		component: "widget.skeleton",
+		props: { "aria-hidden": !0 },
+		children: [
+			80,
+			100,
+			60
+		].map((e) => /* @__PURE__ */ g(t, {
+			component: "widget.skeleton.bar",
+			width: `${e}%`
+		}, e))
+	}) : u ? /* @__PURE__ */ _(t, {
+		component: "widget.message",
+		variant: { error: !0 },
+		props: { role: "status" },
+		children: [u, p && /* @__PURE__ */ g(t, {
+			tag: "button",
+			component: "widget.retry",
+			props: {
+				type: "button",
+				onClick: p
+			},
+			children: "Try again"
+		})]
+	}) : f ? /* @__PURE__ */ g(t, {
+		component: "widget.message",
+		children: f === !0 ? "Nothing to show yet." : f
+	}) : r, O = i !== void 0 || o !== void 0 || s !== void 0 || p !== void 0 || T;
+	return /* @__PURE__ */ _(t, {
+		component: "widget",
+		...v,
+		variant: [v.variant, {
+			dragging: C?.pointer !== void 0,
+			grabbed: C !== void 0 && C.pointer === void 0
+		}],
+		order: b?.order,
+		cq: b?.query,
+		...b?.placement,
+		style: {
+			...n === void 0 ? void 0 : y?.offsetOf(n),
+			...v.style
+		},
+		props: {
+			role: b ? "listitem" : void 0,
+			"aria-busy": l || void 0,
+			"data-widget-id": n,
+			...h
+		},
+		children: [
+			O && /* @__PURE__ */ _(t, {
+				component: "widget.header",
+				children: [
+					E("move"),
+					/* @__PURE__ */ _(t, {
+						component: "widget.label",
+						children: [i !== void 0 && /* @__PURE__ */ g(t, {
+							component: "widget.title",
+							tag: x[c - 1],
+							children: i
+						}), o !== void 0 && /* @__PURE__ */ g(t, {
+							component: "widget.description",
+							children: o
+						})]
+					}),
+					p && /* @__PURE__ */ g(t, {
+						component: "widget.handle",
+						tag: "button",
+						variant: { editable: !0 },
+						props: {
+							type: "button",
+							"aria-label": m ?? `Refresh ${w}`,
+							onClick: p
+						},
+						children: /* @__PURE__ */ g(M, {})
+					}),
+					s !== void 0 && /* @__PURE__ */ g(t, {
+						component: "widget.actions",
+						children: s
+					})
+				]
+			}),
+			/* @__PURE__ */ g(t, {
+				component: "widget.body",
+				children: D()
+			}),
+			E("resize")
+		]
+	});
+}
+var P = A;
+P.displayName = "DashboardGrid";
+var F = N;
+F.displayName = "Widget";
+//#endregion
+export { y as DashboardUtils, F as Widget, P as default };

package/components/dataGrid/components/dataGridBody.d.ts

@@ -1,7 +1,8 @@
 import { default as GridModel } from '../models/gridModel';
+import { ScrollPosition } from '../models/viewportModel';
 interface Props<TRow> {
     grid: GridModel<TRow>;
-    scrollTop: number;
+    scroll: ScrollPosition;
 }
 export default function DataGridBody<TRow>(props: Props<TRow>): import("react").JSX.Element;
 export {};

package/components/dataGrid/components/dataGridDetailRow.d.ts

@@ -3,6 +3,17 @@ interface Props<TRow> {
     row: DetailRowModel<TRow>;
     /** Position in the whole row list, not in the rendered window. */
     index: number;
+    /**
+     * The grid's store version. Not read: it is what tells the memo below that something the row draws
+     * from the model has moved, since every other prop it takes holds still while the window slides.
+     */
+    version: number;
 }
-export default function DataGridDetailRow<TRow>(props: Props<TRow>): import("react").JSX.Element;
-export {};
+declare function DataGridDetailRowImpl<TRow>(props: Props<TRow>): import("react").JSX.Element;
+/**
+ * Memoized on its props, which is what makes a scroll cost one row rather than a window of them: the
+ * rows either side of the new one are handed the same model and the same index, so they bail out.
+ * `memo` loses the type parameter, and the cast is what hands it back.
+ */
+declare const DataGridDetailRow: typeof DataGridDetailRowImpl;
+export default DataGridDetailRow;