[IRN-6178] [BpkCardList] Enable Physical Scroll For Row

packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.scss

@@ -26,16 +26,16 @@
     display: flex;
     padding-top: tokens.bpk-spacing-sm();
     padding-bottom: tokens.bpk-spacing-lg();
-    overflow-x: hidden;
+    overflow-x: scroll;
     box-sizing: border-box;
     gap: tokens.bpk-spacing-sm();
+    -webkit-overflow-scrolling: touch;
     scroll-snap-stop: always;
     scroll-snap-type: x mandatory;
     scrollbar-width: none;
 
     @include breakpoints.bpk-breakpoint-mobile {
       padding-bottom: tokens.bpk-spacing-base();
-      overflow-x: scroll;
     }
 
     &::-webkit-scrollbar {
@@ -85,8 +85,4 @@
       }
     }
   }
-
-  &__rail {
-    -webkit-overflow-scrolling: touch;
-  }
 }

packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.tsx

@@ -74,6 +74,7 @@ const BpkCardListCarousel = (props: CardListCarouselProps) => {
   const hasBeenVisibleRef = useRef<Set<number>>(new Set());
   const firstCardWidthRef = useRef<number | null>(null);
   const firstCardHeightRef = useRef<number | null>(null);
+  const prevInitiallyShownCardsRef = useRef(initiallyShownCards);
 
   const [visibilityList, setVisibilityList] = useState<number[]>(
     Array(childrenLength).fill(0),
@@ -99,11 +100,15 @@ const BpkCardListCarousel = (props: CardListCarouselProps) => {
   const lastVisibleIndex = firstVisibleIndex + initiallyShownCards - 1;
 
   const dynamicRenderBufferSize = useMemo(() => {
-    if (childrenLength === 0 || initiallyShownCards === 0 || isMobile) return RENDER_BUFFER_SIZE;
+    if (childrenLength === 0 || initiallyShownCards === 0 || isMobile)
+      return RENDER_BUFFER_SIZE;
 
     // Calculate how many cards to render based on the number of initially shown cards and total children
     const totalPages = Math.ceil(childrenLength / initiallyShownCards);
-    const shownIndicatorCount = Math.min(totalPages, PAGINATION_INDICATOR_MAX_SHOWN_COUNT);
+    const shownIndicatorCount = Math.min(
+      totalPages,
+      PAGINATION_INDICATOR_MAX_SHOWN_COUNT,
+    );
     return Math.max(
       RENDER_BUFFER_SIZE,
       (shownIndicatorCount - 1) * initiallyShownCards,
@@ -173,7 +178,7 @@ const BpkCardListCarousel = (props: CardListCarouselProps) => {
         clearTimeout(openSetStateLockTimeoutRef.current);
       }
     };
-  }, [root]);
+  }, [root, isMobile]);
 
   useEffect(() => {
     // update hasBeenVisibleRef to include the range of cards that should be visible
@@ -193,11 +198,19 @@ const BpkCardListCarousel = (props: CardListCarouselProps) => {
     const firstVisible = visibilityList.indexOf(1);
     if (firstVisible >= 0) {
       const newIndex = Math.floor(firstVisible / initiallyShownCards);
-      if (newIndex !== currentIndex) {
+
+      if (newIndex === currentIndex) return;
+
+      if (stateScrollingLockRef.current) {
+         setCurrentIndex(newIndex);
+      }
+
+      if (prevInitiallyShownCardsRef.current !== initiallyShownCards) {
         setCurrentIndex(newIndex);
+        prevInitiallyShownCardsRef.current = initiallyShownCards;
       }
     }
-  }, [initiallyShownCards]);
+  }, [currentIndex, initiallyShownCards, setCurrentIndex, visibilityList]);
 
   useEffect(() => {
     const handleResize = throttle(() => {

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

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { useEffect, useRef, useCallback } from 'react';
+import { useEffect, useRef } from 'react';
 
 import { RELEASE_LOCK_DELAY } from './constants';