Merge branch 'main' into CAPY-2410/bpk-sheet-drawer

Author: guillewu

packages/backpack-web/src/bpk-component-card-list/src/BpkCardList.stories.tsx

@@ -286,6 +286,32 @@ const GridToStackExample = () => (
   </PageContainer>
 );
 
+const RowToRailShortFinalPageExample = () => (
+  <PageContainer>
+    <BpkCardList
+      {...commonProps}
+      cardList={makeList(DestinationCard, 3)}
+      initiallyShownCardsDesktop={2}
+      layoutDesktop={LAYOUTS.row}
+      layoutMobile={LAYOUTS.rail}
+      accessoryDesktop={ACCESSORY_DESKTOP_TYPES.pagination}
+    />
+  </PageContainer>
+);
+
+const RowToRailShortFinalPageWiderExample = () => (
+  <PageContainer>
+    <BpkCardList
+      {...commonProps}
+      cardList={makeList(DestinationCard, 10)}
+      initiallyShownCardsDesktop={4}
+      layoutDesktop={LAYOUTS.row}
+      layoutMobile={LAYOUTS.rail}
+      accessoryDesktop={ACCESSORY_DESKTOP_TYPES.pagination}
+    />
+  </PageContainer>
+);
+
 const RowToStackWithExpandExample = () => {
   const [expandText, setExpandText] = useState('Show more');
 
@@ -433,6 +459,8 @@ export const RowToStackWithExpand = { render: () => <RowToStackWithExpandExample
 export const GridToStackWithExpand = { render: () => <GridToStackWithExpandExample /> };
 export const RowToRailForSnippets = { render: () => <RowToRailForSnippetsExample /> };
 export const RowToRailWithoutTitle = { render: () => <RowToRailWithoutTitleExample /> };
+export const RowToRailShortFinalPage = { render: () => <RowToRailShortFinalPageExample /> };
+export const RowToRailShortFinalPageWider = { render: () => <RowToRailShortFinalPageWiderExample /> };
 
 export const MultiComponentsScrollingTest = { render: () => <MultiComponentsScrollingTestExample /> };
 export const VisualTest = { render: () => <BasicExample /> };

packages/backpack-web/src/bpk-component-card-list/src/BpkCardListRowRail/utils-test.tsx

@@ -584,6 +584,78 @@ describe('usePageScrollSync', () => {
       expect(mockSetCurrentIndex).not.toHaveBeenCalled();
     });
 
+    it('should snap to the last page when the final (short) page cannot scroll its first card to the start', () => {
+      // 3 cards, 2 shown per page => page 0 = [0,1], page 1 = [2].
+      // The final page holds fewer cards than initiallyShownCards, so scrolling to
+      // the end leaves card 2 alongside card 1 (firstVisibleIndex stays at 1).
+      // Because the last card is visible, we should still land on page 1.
+      const shortCardRefs = { current: [] as Array<HTMLDivElement | null> };
+      Array.from({ length: 3 }).forEach((_, index) => {
+        const { mockDiv } = makeMockDiv(index);
+        mockDiv.scrollIntoView = jest.fn();
+        shortCardRefs.current.push(mockDiv);
+      });
+
+      const { rerender } = renderHook(
+        ({ visibilityList }) =>
+          usePageScrollSync({
+            cardRefs: shortCardRefs,
+            container: mockContainer,
+            currentIndex: 0,
+            enabled: true,
+            initiallyShownCards: 2,
+            setCurrentIndex: mockSetCurrentIndex,
+            visibilityList,
+          }),
+        {
+          initialProps: {
+            visibilityList: [1, 1, 0],
+          },
+        },
+      );
+
+      // User initiates scroll via wheel
+      act(() => {
+        mockContainer.dispatchEvent(new Event('wheel'));
+      });
+
+      // Scrolled to the end: cards 1 and 2 visible, card 0 out of view
+      rerender({ visibilityList: [0, 1, 1] });
+
+      expect(mockSetCurrentIndex).toHaveBeenCalledWith(1);
+    });
+
+    it('should NOT snap to the last page when all cards are visible in a wide viewport', () => {
+      // 4 cards, 2 per page => page 0 = [0,1], page 1 = [2,3].
+      // The final page is NOT short (4 % 2 === 0), so all cards fitting in the
+      // viewport at once should not falsely advance the indicator to page 1.
+      const { rerender } = renderHook(
+        ({ visibilityList }) =>
+          usePageScrollSync({
+            cardRefs: mockCardRefs,
+            container: mockContainer,
+            currentIndex: 0,
+            enabled: true,
+            initiallyShownCards: 2,
+            setCurrentIndex: mockSetCurrentIndex,
+            visibilityList,
+          }),
+        {
+          initialProps: {
+            visibilityList: [1, 1, 1, 1],
+          },
+        },
+      );
+
+      act(() => {
+        mockContainer.dispatchEvent(new Event('wheel'));
+      });
+
+      rerender({ visibilityList: [1, 1, 1, 1] });
+
+      expect(mockSetCurrentIndex).not.toHaveBeenCalled();
+    });
+
     it('should handle partial visibility at page boundaries by using first visible card', () => {
       // When scrolling between pages, the first visible index determines the page.
       // With firstVisibleIndex=2 and initiallyShownCards=3: Math.floor(2/3) = 0

packages/backpack-web/src/bpk-component-card-list/src/BpkCardListRowRail/utils.tsx

@@ -209,7 +209,16 @@ export const usePageScrollSync = ({
     const firstVisibleIndex = visibilityList.indexOf(1);
     if (firstVisibleIndex === -1) return;
 
-    const newPageIndex = Math.floor(firstVisibleIndex / initiallyShownCards);
+    // A short final page can't scroll its first card to the viewport start, so
+    // firstVisibleIndex stays on the previous page. Only treat a visible last
+    // card as the final page when the final page is genuinely short; otherwise
+    // (e.g. wide viewport where all cards fit) use the normal calculation to
+    // avoid falsely snapping to the last page.
+    const lastPageIsShort = visibilityList.length % initiallyShownCards !== 0;
+    const newPageIndex =
+      lastPageIsShort && visibilityList[visibilityList.length - 1] === 1
+        ? Math.ceil(visibilityList.length / initiallyShownCards) - 1
+        : Math.floor(firstVisibleIndex / initiallyShownCards);
     if (newPageIndex !== currentIndex) {
       setCurrentIndex(newPageIndex);
       lastCurrentIndexRef.current = newPageIndex;