@sheetxl/grid-react 0.8.0-beta.2 → 0.8.0-beta.4

package/node/esm/index.mjs

@@ -1,5 +1,5 @@
 /**
-* @license @sheetxl/grid-react - Grid React - Advanced grid component for React - v0.8.0-beta.2
+* @license @sheetxl/grid-react - Grid React - Advanced grid component for React - v0.8.0-beta.4
 *
 * (C) 2026-present SheetXL Inc. & Michael T. Ford
 * License: The license can be found at https://www.sheetxl.com/license.
@@ -1657,7 +1657,7 @@ var at = !1, ct = (e, t, n, o) => ({
 	if (!e) throw new Error("useSticky must be used within a <StickyAnchor>");
 	return e;
 }, It = () => a(St), Ct = (e) => {
-	const { anchor: t, placement: n = ht, boundary: o = "data", whenOff: r = "hide", minVisible: l = 0, children: i } = e, { reference: a, getBoundaryRect: c, anchorPoint: d, owner: h, clipped: p, slid: m, outOfView: w, pane: v } = ((e, t) => {
+	const { anchor: t, placement: n = ht, boundary: o = "data", whenOff: r = "hide", minVisible: l = 0, children: i } = e, { reference: a, getBoundaryRect: c, getAnchorPoint: d, anchorPoint: h, owner: p, clipped: m, slid: w, outOfView: v, pane: y } = ((e, t) => {
 		const n = Qe(), o = t?.pane ?? n, r = t?.boundary ?? "data", l = t?.minVisible ?? 0, i = t?.placement ?? ht, s = t?.whenOff ?? "hide", a = f({
 			pane: o,
 			anchor: e,
@@ -1687,11 +1687,16 @@ var at = !1, ct = (e, t, n, o) => ({
 			getBoundaryRect: () => {
 				const e = a.current;
 				return bt(e.pane, e.anchor, e.boundary, e.minVisible, e.placement, e.whenOff).boundaryRect;
+			},
+			getAnchorPoint: () => {
+				const e = a.current;
+				return bt(e.pane, e.anchor, e.boundary, e.minVisible, e.placement, e.whenOff).anchorPoint;
 			}
 		}), []), d = bt(o, e, r, l, i, s);
 		return {
 			reference: c.reference,
 			getBoundaryRect: c.getBoundaryRect,
+			getAnchorPoint: c.getAnchorPoint,
 			clipped: d.clipped,
 			clampedTo: d.clampedTo,
 			anchorPoint: d.anchorPoint,
@@ -1705,83 +1710,85 @@ var at = !1, ct = (e, t, n, o) => ({
 		whenOff: r,
 		minVisible: l,
 		placement: n
-	}), y = null != v && (null != h ? v.getAnchor() === h : v.getAnchor() === _.Center);
-	let b = null;
-	y && v && ("range" in t ? b = v.getBoundsFromRange(t.range) : "cell" in t ? b = v.getBoundsFromRange({
+	}), b = null != y && (null != p ? y.getAnchor() === p : y.getAnchor() === _.Center);
+	let S = null;
+	b && y && ("range" in t ? S = y.getBoundsFromRange(t.range) : "cell" in t ? S = y.getBoundsFromRange({
 		rowStart: t.cell.rowIndex,
 		colStart: t.cell.colIndex,
 		rowEnd: t.cell.rowIndex,
 		colEnd: t.cell.colIndex
-	}) : "bounds" in t && (b = t.bounds));
-	const S = f(t);
-	S.current = t;
-	const E = f(v);
-	E.current = v;
-	const I = s((e) => {
-		const t = Rt(S.current), n = E.current;
+	}) : "bounds" in t && (S = t.bounds));
+	const E = f(t);
+	E.current = t;
+	const I = f(y);
+	I.current = y;
+	const C = s((e) => {
+		const t = Rt(E.current), n = I.current;
 		return n && t ? n.scrollCellCoordsIntoView(t, e) : Promise.resolve(void 0);
-	}, []), C = g(() => ({
+	}, []), R = g(() => ({
 		reference: a,
 		getBoundaryRect: c,
-		anchorPoint: d,
-		bounds: b,
-		owner: h,
-		isOwner: y,
-		clipped: p,
-		slid: m,
-		outOfView: w,
+		getAnchorPoint: d,
+		anchorPoint: h,
+		bounds: S,
+		owner: p,
+		isOwner: b,
+		clipped: m,
+		slid: w,
+		outOfView: v,
 		placement: n,
-		pane: v,
-		scrollIntoView: I
+		pane: y,
+		scrollIntoView: C
 	}), [
 		a,
 		c,
-		d.x,
-		d.y,
-		b?.x,
-		b?.y,
-		b?.width,
-		b?.height,
-		h,
-		y,
+		d,
+		h.x,
+		h.y,
+		S?.x,
+		S?.y,
+		S?.width,
+		S?.height,
 		p,
+		b,
 		m,
 		w,
+		v,
 		n.side,
 		n.align,
-		v,
-		I
-	]), R = y && !p && null != v, M = "function" != typeof i, P = f(null), k = f(null);
-	let D = null;
-	if (R && !M) D = i(C);
-	else if (R) {
-		const e = v.getElement()?.getBoundingClientRect();
-		D = x("div", {
-			ref: P,
+		y,
+		C
+	]), M = b && !m && null != y, P = "function" != typeof i, k = f(null), D = f(null);
+	let T = null;
+	if (M && !P) T = i(R);
+	else if (M) {
+		const e = y.getElement()?.getBoundingClientRect();
+		T = x("div", {
+			ref: k,
 			className: "sticky-layer",
 			style: {
 				position: "absolute",
 				left: 0,
 				top: 0,
-				transform: `translate3d(${d.x - (e?.left ?? 0)}px, ${d.y - (e?.top ?? 0)}px, 0) ${Mt(n)}`,
+				transform: `translate3d(${h.x - (e?.left ?? 0)}px, ${h.y - (e?.top ?? 0)}px, 0) ${Mt(n)}`,
 				willChange: "transform"
 			},
 			children: x("div", {
-				ref: k,
+				ref: D,
 				children: i
 			})
 		});
 	}
 	return u(() => {
-		const e = P.current, t = k.current;
-		if (!(e && t && R && v)) return;
-		const n = e.getBoundingClientRect(), o = v.getElement()?.getBoundingClientRect();
+		const e = k.current, t = D.current;
+		if (!(e && t && M && y)) return;
+		const n = e.getBoundingClientRect(), o = y.getElement()?.getBoundingClientRect();
 		if (!o) return;
 		let r = 0, l = 0;
 		n.left < o.left ? r = o.left - n.left : n.right > o.right && (r = Math.min(0, o.right - n.right)), n.top < o.top ? l = o.top - n.top : n.bottom > o.bottom && (l = Math.min(0, o.bottom - n.bottom)), t.style.transform = r || l ? `translate(${r}px, ${l}px)` : "";
 	}), x(St.Provider, {
-		value: C,
-		children: D
+		value: R,
+		children: T
 	});
 }, Rt = (e) => "range" in e ? {
 	rowIndex: e.range.rowStart,
@@ -3753,22 +3760,53 @@ var bo = (e) => {
 		})
 	});
 }, So = (e) => {
-	const { state: t, size: n, color: o, dragging: r, pin: l, onBeginDrag: i } = e, { getPortalContainer: s } = L(), { className: a, attrs: c } = Pt(t.pane);
-	let { x: d, y: u } = t.anchorPoint;
-	if (l) {
-		const e = t.pane?.getElement()?.getBoundingClientRect();
-		e && ("v" === l ? u = e.top + e.height / 2 : d = e.left + e.width / 2);
-	}
-	return q(x("div", {
+	const { state: t, size: n, color: o, dragging: r, pin: l, onBeginDrag: i } = e, { getPortalContainer: s } = L(), { className: a, attrs: c } = Pt(t.pane), d = f({
+		state: t,
+		pin: l
+	});
+	d.current = {
+		state: t,
+		pin: l
+	};
+	const h = g(() => ({
+		get contextElement() {
+			return d.current.state.reference.contextElement;
+		},
+		getBoundingClientRect: () => {
+			const { state: e, pin: t } = d.current;
+			let { x: n, y: o } = e.getAnchorPoint();
+			if (t) {
+				const r = e.pane?.getElement()?.getBoundingClientRect();
+				r && ("v" === t ? o = r.top + r.height / 2 : n = r.left + r.width / 2);
+			}
+			return {
+				x: n,
+				y: o,
+				width: 0,
+				height: 0,
+				top: o,
+				left: n,
+				right: n,
+				bottom: o
+			};
+		}
+	}), []), p = g(() => [Q(({ rects: e }) => -e.floating.height / 2)], []), { refs: m, floatingStyles: w, update: v } = te({
+		placement: "bottom",
+		strategy: "fixed",
+		elements: { reference: h },
+		whileElementsMounted: Z,
+		middleware: p
+	});
+	return u(() => {
+		v();
+	}, [t, v]), q(x("div", {
+		ref: m.setFloating,
 		className: ["touch-select-grip", a].filter(Boolean).join(" "),
 		...c,
 		style: {
-			position: "fixed",
-			left: d,
-			top: u,
+			...w,
 			width: n,
 			height: n,
-			transform: "translate(-50%, -50%)",
 			background: "var(--sxl-color-base-100, white)",
 			border: `3px solid ${o}`,
 			borderRadius: "50%",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sheetxl/grid-react",
   "description": "Grid React - Advanced grid component for React",
-  "version": "0.8.0-beta.2",
+  "version": "0.8.0-beta.4",
   "license": "SEE LICENSE IN <LICENSE>",
   "type": "module",
   "exports": {
@@ -42,8 +42,8 @@
   ],
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.9",
-    "@sheetxl/utils": "^0.8.0-beta.2",
-    "@sheetxl/utils-react": "^0.8.0-beta.2",
+    "@sheetxl/utils": "^0.8.0-beta.4",
+    "@sheetxl/utils-react": "^0.8.0-beta.4",
     "clsx": "^2.1.1",
     "react-merge-refs": "^3.0.2",
     "react-use": "^17.6.1",

package/types/src/layer/StickyAnchor.d.ts

@@ -17,8 +17,10 @@ export interface StickyState {
     reference: GridAnchorReference;
     /** Client-space boundary rect (for `flip`/`shift`/`hide` limiters). */
     getBoundaryRect: () => DOMRect;
-    /** The placement's anchor pixel (client px). */
+    /** The placement's anchor pixel (client px) — a render-time snapshot. */
     anchorPoint: Point;
+    /** Live accessor for the anchor pixel (client px); stable identity, reads between renders. */
+    getAnchorPoint: () => Point;
     /** Pane-relative range bounds (for an in-grid child) — only meaningful on the owner pane, else null. */
     bounds: Bounds | null;
     /** The pane that owns the anchor pixel (null when clipped off every pane). */

package/types/src/layer/useGridAnchor.d.ts

@@ -134,6 +134,11 @@ export interface UseGridAnchorResult {
     reference: GridAnchorReference;
     /** Live accessor for the boundary rect (for `shift`/`flip`/`hide` limiters). */
     getBoundaryRect: () => DOMRect;
+    /**
+     * Live accessor for the placement's anchor pixel (client px) — the live counterpart of
+     * {@link anchorPoint}, for a child that positions itself on the point between React renders.
+     */
+    getAnchorPoint: () => Point;
     /** Render-time snapshot: anchor outside the boundary. Updates each scroll frame (pane re-render). */
     clipped: boolean;
     /** Render-time snapshot: which side the anchor is off, when clipped. */