@pdanpdan/virtual-scroll 0.5.0 → 0.6.0

package/src/utils/virtual-scroll-logic.test.ts

@@ -13,7 +13,7 @@ import {
 } from './virtual-scroll-logic';
 
 describe('virtual-scroll-logic', () => {
-  describe('calculatetotalsize', () => {
+  describe('calculate total size', () => {
     it('calculates vertical total size with fixed size', () => {
       const result = calculateTotalSize({
         columnCount: 0,
@@ -407,7 +407,7 @@ describe('virtual-scroll-logic', () => {
     });
   });
 
-  describe('calculaterange', () => {
+  describe('calculate range', () => {
     it('calculates vertical range with dynamic size', () => {
       const result = calculateRange({
         bufferAfter: 0,
@@ -519,7 +519,7 @@ describe('virtual-scroll-logic', () => {
     });
   });
 
-  describe('calculatescrolltarget', () => {
+  describe('calculate scroll target', () => {
     it('calculates target for horizontal end alignment', () => {
       const result = calculateScrollTarget({
         scaleX: 1,
@@ -1465,30 +1465,30 @@ describe('virtual-scroll-logic', () => {
       expect(result.effectiveAlignY).toBe('start');
     });
 
-    it('aligns to end if partially visible at bottom (forward scroll effect)', () => {
+    it('does not account for non-sticky header (flowpaddingstarty) in scroll target calculation', () => {
       const params = {
         scaleX: 1,
         scaleY: 1,
         hostOffsetX: 0,
         hostOffsetY: 0,
-        rowIndex: 150,
+        rowIndex: 10,
         viewportWidth: 500,
         viewportHeight: 500,
         colIndex: null,
-        options: 'auto' as const,
-        itemsLength: 1000,
+        options: 'end' as const,
+        itemsLength: 100,
         columnCount: 0,
         direction: 'vertical' as const,
         usableWidth: 1000,
-        usableHeight: 800,
+        usableHeight: 1000,
         totalWidth: 1000,
-        totalHeight: 100000,
+        totalHeight: 10000,
         gap: 0,
         columnGap: 0,
         fixedSize: 100,
         fixedWidth: null,
         relativeScrollX: 0,
-        relativeScrollY: 14250,
+        relativeScrollY: 0,
         getItemSizeY: () => 100,
         getItemSizeX: () => 1000,
         getItemQueryY: (idx: number) => idx * 100,
@@ -1496,37 +1496,37 @@ describe('virtual-scroll-logic', () => {
         getColumnSize: () => 0,
         getColumnQuery: () => 0,
         stickyIndices: [],
+        flowPaddingStartY: 150,
       };
 
       const result = calculateScrollTarget(params);
-      expect(result.targetY).toBe(14600);
-      expect(result.effectiveAlignY).toBe('end');
+      expect(result.targetY).toBe(750);
     });
 
-    it('does not account for non-sticky footer (flowpaddingendy) in scroll target calculation', () => {
+    it('aligns to end if partially visible at bottom (forward scroll effect)', () => {
       const params = {
         scaleX: 1,
         scaleY: 1,
         hostOffsetX: 0,
         hostOffsetY: 0,
-        rowIndex: 10,
+        rowIndex: 150,
         viewportWidth: 500,
         viewportHeight: 500,
         colIndex: null,
-        options: 'end' as const,
-        itemsLength: 100,
+        options: 'auto' as const,
+        itemsLength: 1000,
         columnCount: 0,
         direction: 'vertical' as const,
         usableWidth: 1000,
-        usableHeight: 1000,
+        usableHeight: 800,
         totalWidth: 1000,
-        totalHeight: 10000,
+        totalHeight: 100000,
         gap: 0,
         columnGap: 0,
         fixedSize: 100,
         fixedWidth: null,
         relativeScrollX: 0,
-        relativeScrollY: 0,
+        relativeScrollY: 14250,
         getItemSizeY: () => 100,
         getItemSizeX: () => 1000,
         getItemQueryY: (idx: number) => idx * 100,
@@ -1534,12 +1534,11 @@ describe('virtual-scroll-logic', () => {
         getColumnSize: () => 0,
         getColumnQuery: () => 0,
         stickyIndices: [],
-        flowPaddingStartY: 150,
-        flowPaddingEndY: 200,
       };
 
       const result = calculateScrollTarget(params);
-      expect(result.targetY).toBe(750);
+      expect(result.targetY).toBe(14600);
+      expect(result.effectiveAlignY).toBe('end');
     });
 
     it('aligns large item correctly when scrolling forward (minimal movement)', () => {
@@ -1991,7 +1990,7 @@ describe('virtual-scroll-logic', () => {
     });
   });
 
-  describe('calculatecolumnrange', () => {
+  describe('calculate column range', () => {
     it('calculates column range with dynamic width and 0 columns', () => {
       const result = calculateColumnRange({
         colBuffer: 0,
@@ -2176,7 +2175,7 @@ describe('virtual-scroll-logic', () => {
     });
   });
 
-  describe('calculateitemposition', () => {
+  describe('calculate item position', () => {
     it('calculates position for vertical item with fixed size', () => {
       const result = calculateItemPosition({
         columnGap: 0,
@@ -2278,7 +2277,7 @@ describe('virtual-scroll-logic', () => {
     });
   });
 
-  describe('calculatestickyitem', () => {
+  describe('calculate sticky item', () => {
     it('calculates sticky offset when pushing (vertical, dynamic size)', () => {
       const result = calculateStickyItem({
         columnGap: 0,
@@ -2374,7 +2373,7 @@ describe('virtual-scroll-logic', () => {
     it('calculates sticky active state for both directions (horizontal first)', () => {
       const result = calculateStickyItem({
         columnGap: 0,
-        direction: 'both',
+        direction: 'horizontal',
         fixedSize: 50,
         fixedWidth: 100,
         gap: 0,
@@ -2391,6 +2390,7 @@ describe('virtual-scroll-logic', () => {
         width: 100,
       });
       expect(result.isStickyActive).toBe(true);
+      expect(result.isStickyActiveX).toBe(true);
       expect(result.stickyOffset.x).toBe(0);
       expect(result.stickyOffset.y).toBe(0);
     });
@@ -2579,7 +2579,7 @@ describe('virtual-scroll-logic', () => {
     });
   });
 
-  describe('calculateitemstyle', () => {
+  describe('calculate item style', () => {
     it('calculates style for table container', () => {
       const result = calculateItemStyle({
         containerTag: 'table',
@@ -2660,7 +2660,7 @@ describe('virtual-scroll-logic', () => {
         paddingStartY: 10,
       });
       expect(result.insetBlockStart).toBe('10px');
-      expect(result.insetInlineStart).toBeUndefined();
+      expect(result.insetInlineStart).toBe('auto');
     });
 
     it('calculates style for sticky item (grid both directions)', () => {
@@ -2672,6 +2672,8 @@ describe('virtual-scroll-logic', () => {
         item: {
           index: 10,
           isStickyActive: true,
+          isStickyActiveX: true,
+          isStickyActiveY: true,
           offset: { x: 600, y: 600 },
           size: { height: 50, width: 50 },
           stickyOffset: { x: -10, y: -10 },
@@ -2693,6 +2695,8 @@ describe('virtual-scroll-logic', () => {
         item: {
           index: 10,
           isStickyActive: true,
+          isStickyActiveX: true,
+          isStickyActiveY: true,
           offset: { x: 600, y: 600 },
           size: { height: 50, width: 50 },
           stickyOffset: { x: -10, y: -10 },
@@ -2705,7 +2709,6 @@ describe('virtual-scroll-logic', () => {
       expect(result.insetInlineStart).toBe('10px');
       expect(result.transform).toBe('translate(-10px, -10px)');
     });
-
     it('calculates style for non-hydrated item', () => {
       const result = calculateItemStyle({
         containerTag: 'div',
@@ -2756,6 +2759,8 @@ describe('virtual-scroll-logic', () => {
         item: {
           index: 10,
           isStickyActive: true,
+          isStickyActiveX: true,
+          isStickyActiveY: true,
           offset: { x: 600, y: 600 },
           size: { height: 50, width: 50 },
           stickyOffset: { x: -10, y: -20 },
@@ -2768,7 +2773,6 @@ describe('virtual-scroll-logic', () => {
       expect(result.insetInlineStart).toBe('10px');
       expect(result.transform).toBe('translate(-10px, -20px)');
     });
-
     it('correctly inverts transform in rtl mode', () => {
       const item: RenderedItem = {
         index: 0,
@@ -2817,7 +2821,20 @@ describe('virtual-scroll-logic', () => {
         paddingStartX: 0,
         paddingStartY: 0,
       });
-      expect(result.transform).toBe('translate(-10px, 20px)');
+      expect(result.transform).toBe('translate(-100px, 20px)');
+
+      result = calculateItemStyle({
+        containerTag: 'div',
+        direction: 'horizontal',
+        isHydrated: true,
+        isRtl: true,
+        item: { ...item, isStickyActive: true },
+        itemSize: 50,
+        paddingStartX: 0,
+        paddingStartY: 0,
+      });
+
+      expect(result.transform).toBe('translate(-10px, 200px)');
     });
 
     it('maintains 1:1 movement even when scale is high', () => {

package/src/utils/virtual-scroll-logic.ts

@@ -293,6 +293,45 @@ function calculateAxisTarget({
   return { target, itemSize, effectiveAlign };
 }
 
+/**
+ * Helper to calculate sticky state for a single axis.
+ *
+ * @param scrollPos - Virtual scroll position.
+ * @param originalPos - Original virtual item position.
+ * @param size - Virtual item size.
+ * @param index - Item index.
+ * @param stickyIndices - All sticky indices.
+ * @param getNextStickyPos - Resolver for the next sticky item's position.
+ * @returns Sticky state for this axis.
+ */
+function calculateAxisSticky(
+  scrollPos: number,
+  originalPos: number,
+  size: number,
+  index: number,
+  stickyIndices: number[],
+  getNextStickyPos: (idx: number) => number,
+) {
+  if (scrollPos <= originalPos) {
+    return { isActive: false, offset: 0 };
+  }
+
+  const nextStickyIdx = findNextStickyIndex(stickyIndices, index);
+  if (nextStickyIdx === undefined) {
+    return { isActive: true, offset: 0 };
+  }
+
+  const nextStickyPos = getNextStickyPos(nextStickyIdx);
+  if (scrollPos >= nextStickyPos) {
+    return { isActive: false, offset: 0 };
+  }
+
+  return {
+    isActive: true,
+    offset: Math.max(0, Math.min(size, nextStickyPos - scrollPos)) - size,
+  };
+}
+
 // --- Exported Functions ---
 
 /**
@@ -639,7 +678,6 @@ export function calculateColumnRange({
  * @param params.height - Virtual item height (VU).
  * @param params.stickyIndices - All sticky indices.
  * @param params.fixedSize - Fixed item size (VU).
- * @param params.fixedWidth - Fixed column width (VU).
  * @param params.gap - Item gap (VU).
  * @param params.columnGap - Column gap (VU).
  * @param params.getItemQueryY - Resolver for vertical offset (VU).
@@ -659,61 +697,56 @@ export function calculateStickyItem({
   height,
   stickyIndices,
   fixedSize,
-  fixedWidth,
   gap,
   columnGap,
   getItemQueryY,
   getItemQueryX,
 }: StickyParams) {
-  let isStickyActive = false;
+  let isStickyActiveX = false;
+  let isStickyActiveY = false;
   const stickyOffset = { x: 0, y: 0 };
 
   if (!isSticky) {
-    return { isStickyActive, stickyOffset };
+    return { isStickyActiveX, isStickyActiveY, isStickyActive: false, stickyOffset };
   }
 
   // Y Axis (Sticky Rows)
   if (direction === 'vertical' || direction === 'both') {
-    if (relativeScrollY > originalY) {
-      const nextStickyIdx = findNextStickyIndex(stickyIndices, index);
-
-      if (nextStickyIdx !== undefined) {
-        const nextStickyY = fixedSize !== null ? nextStickyIdx * (fixedSize + gap) : getItemQueryY(nextStickyIdx);
-        if (relativeScrollY >= nextStickyY) {
-          isStickyActive = false;
-        } else {
-          isStickyActive = true;
-          stickyOffset.y = Math.max(0, Math.min(height, nextStickyY - relativeScrollY)) - height;
-        }
-      } else {
-        isStickyActive = true;
-      }
-    }
+    const res = calculateAxisSticky(
+      relativeScrollY,
+      originalY,
+      height,
+      index,
+      stickyIndices,
+      (nextIdx) => (fixedSize !== null ? nextIdx * (fixedSize + gap) : getItemQueryY(nextIdx)),
+    );
+    isStickyActiveY = res.isActive;
+    stickyOffset.y = res.offset;
   }
 
   // X Axis (Sticky Columns / Items)
-  if (direction === 'horizontal' || (direction === 'both' && !isStickyActive)) {
-    if (relativeScrollX > originalX) {
-      const nextStickyIdx = findNextStickyIndex(stickyIndices, index);
-
-      if (nextStickyIdx !== undefined) {
-        const nextStickyX = direction === 'horizontal'
-          ? (fixedSize !== null ? nextStickyIdx * (fixedSize + columnGap) : getItemQueryX(nextStickyIdx))
-          : (fixedWidth !== null ? nextStickyIdx * (fixedWidth + columnGap) : getItemQueryX(nextStickyIdx));
-
-        if (relativeScrollX >= nextStickyX) {
-          isStickyActive = false;
-        } else {
-          isStickyActive = true;
-          stickyOffset.x = Math.max(0, Math.min(width, nextStickyX - relativeScrollX)) - width;
-        }
-      } else {
-        isStickyActive = true;
-      }
+  if (direction === 'horizontal') {
+    const res = calculateAxisSticky(
+      relativeScrollX,
+      originalX,
+      width,
+      index,
+      stickyIndices,
+      (nextIdx) => (fixedSize !== null ? nextIdx * (fixedSize + columnGap) : getItemQueryX(nextIdx)),
+    );
+
+    if (res.isActive) {
+      isStickyActiveX = true;
+      stickyOffset.x = res.offset;
     }
   }
 
-  return { isStickyActive, stickyOffset };
+  return {
+    isStickyActiveX,
+    isStickyActiveY,
+    isStickyActive: isStickyActiveX || isStickyActiveY,
+    stickyOffset,
+  };
 }
 
 /**
@@ -824,18 +857,18 @@ export function calculateItemStyle<T = unknown>({
   }
 
   if (isHydrated) {
-    const tx = isRtl
-      ? -(item.isStickyActive ? item.stickyOffset.x : item.offset.x)
-      : (item.isStickyActive ? item.stickyOffset.x : item.offset.x);
+    const isStickingVertically = item.isStickyActiveY ?? (item.isStickyActive && (isVertical || isBoth));
+    const isStickingHorizontally = item.isStickyActiveX ?? (item.isStickyActive && isHorizontal);
 
-    if (item.isStickyActive) {
-      if (isVertical || isBoth) {
-        style.insetBlockStart = `${ paddingStartY }px`;
-      }
-      if (isHorizontal || isBoth) {
-        style.insetInlineStart = `${ paddingStartX }px`;
-      }
-      style.transform = `translate(${ tx }px, ${ item.stickyOffset.y }px)`;
+    const tx = isRtl
+      ? -(isStickingHorizontally ? item.stickyOffset.x : item.offset.x)
+      : (isStickingHorizontally ? item.stickyOffset.x : item.offset.x);
+    const ty = isStickingVertically ? item.stickyOffset.y : item.offset.y;
+
+    if (item.isStickyActive || item.isStickyActiveX || item.isStickyActiveY) {
+      style.insetBlockStart = isStickingVertically ? `${ paddingStartY }px` : 'auto';
+      style.insetInlineStart = isStickingHorizontally ? `${ paddingStartX }px` : 'auto';
+      style.transform = `translate(${ tx }px, ${ ty }px)`;
     } else {
       style.transform = `translate(${ tx }px, ${ item.offset.y }px)`;
     }