@lensui/lens-table 0.1.73 → 0.1.75

package/dist/index.cjs

@@ -1997,6 +1997,7 @@ function TableInner({
   const rootRef = (0, import_react8.useRef)(null);
   const frameRef = (0, import_react8.useRef)(null);
   const textFrameRef = (0, import_react8.useRef)(null);
+  const textLayoutScrollTopRef = (0, import_react8.useRef)(0);
   const toastTimerRef = (0, import_react8.useRef)(null);
   const headerTooltipTimerRef = (0, import_react8.useRef)(null);
   const cellTooltipTimerRef = (0, import_react8.useRef)(null);
@@ -3034,6 +3035,13 @@ function TableInner({
     horizontalScrollbarDragRef.current = null;
     showCustomScrollbar("horizontal");
   }, [showCustomScrollbar]);
+  (0, import_react8.useLayoutEffect)(() => {
+    textLayoutScrollTopRef.current = scrollPosition.top;
+    const clips = rootRef.current?.querySelectorAll(".rvg-body-text-clip");
+    clips?.forEach((clip) => {
+      clip.style.transform = "";
+    });
+  }, [scrollPosition.top]);
   const handleScroll = (0, import_react8.useCallback)(() => {
     const element = scrollerRef.current;
     if (!element) return;
@@ -3041,6 +3049,13 @@ function TableInner({
     const scrollDeltaX = element.scrollLeft - previousScroll.left;
     const scrollDeltaY = element.scrollTop - previousScroll.top;
     scrollRef.current = { left: element.scrollLeft, top: element.scrollTop };
+    const textDeltaY = element.scrollTop - textLayoutScrollTopRef.current;
+    if (textDeltaY !== 0) {
+      const clips = rootRef.current?.querySelectorAll(".rvg-body-text-clip");
+      clips?.forEach((clip) => {
+        clip.style.transform = `translate3d(0, ${-textDeltaY}px, 0)`;
+      });
+    }
     syncSelectionEdgeTarget(element.scrollLeft, element.scrollTop);
     const focus = selectionFocusRef.current;
     if (focus && selection && !selectionRange) {
@@ -5303,7 +5318,6 @@ function TableInner({
         },
         onClick: (event) => {
           event.stopPropagation();
-          scrollerRef.current?.focus({ preventScroll: true });
           revealCell(selection);
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "rvg-selection-edge-halo", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M 0 100 L 0 0 L 100 0" }) }) })

package/dist/index.css

@@ -183,6 +183,7 @@
   bottom: 0;
   overflow: hidden;
   pointer-events: none;
+  will-change: transform;
 }
 .rvg-text-scroll-clip {
   position: absolute;

package/dist/index.js

@@ -1967,6 +1967,7 @@ function TableInner({
   const rootRef = useRef4(null);
   const frameRef = useRef4(null);
   const textFrameRef = useRef4(null);
+  const textLayoutScrollTopRef = useRef4(0);
   const toastTimerRef = useRef4(null);
   const headerTooltipTimerRef = useRef4(null);
   const cellTooltipTimerRef = useRef4(null);
@@ -3004,6 +3005,13 @@ function TableInner({
     horizontalScrollbarDragRef.current = null;
     showCustomScrollbar("horizontal");
   }, [showCustomScrollbar]);
+  useLayoutEffect3(() => {
+    textLayoutScrollTopRef.current = scrollPosition.top;
+    const clips = rootRef.current?.querySelectorAll(".rvg-body-text-clip");
+    clips?.forEach((clip) => {
+      clip.style.transform = "";
+    });
+  }, [scrollPosition.top]);
   const handleScroll = useCallback2(() => {
     const element = scrollerRef.current;
     if (!element) return;
@@ -3011,6 +3019,13 @@ function TableInner({
     const scrollDeltaX = element.scrollLeft - previousScroll.left;
     const scrollDeltaY = element.scrollTop - previousScroll.top;
     scrollRef.current = { left: element.scrollLeft, top: element.scrollTop };
+    const textDeltaY = element.scrollTop - textLayoutScrollTopRef.current;
+    if (textDeltaY !== 0) {
+      const clips = rootRef.current?.querySelectorAll(".rvg-body-text-clip");
+      clips?.forEach((clip) => {
+        clip.style.transform = `translate3d(0, ${-textDeltaY}px, 0)`;
+      });
+    }
     syncSelectionEdgeTarget(element.scrollLeft, element.scrollTop);
     const focus = selectionFocusRef.current;
     if (focus && selection && !selectionRange) {
@@ -5273,7 +5288,6 @@ function TableInner({
         },
         onClick: (event) => {
           event.stopPropagation();
-          scrollerRef.current?.focus({ preventScroll: true });
           revealCell(selection);
         },
         children: /* @__PURE__ */ jsx8("span", { className: "rvg-selection-edge-halo", "aria-hidden": "true", children: /* @__PURE__ */ jsx8("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", children: /* @__PURE__ */ jsx8("path", { d: "M 0 100 L 0 0 L 100 0" }) }) })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lensui/lens-table",
-  "version": "0.1.73",
+  "version": "0.1.75",
   "description": "A lightweight, canvas-rendered React table component for LensUI.",
   "type": "module",
   "main": "./dist/index.cjs",