diff --git a/packages/backpack-web/src/bpk-component-card-list/src/BpkCardList.stories.tsx b/packages/backpack-web/src/bpk-component-card-list/src/BpkCardList.stories.tsx
index c4ad250d85..3e42eb5ecd 100644
--- a/packages/backpack-web/src/bpk-component-card-list/src/BpkCardList.stories.tsx
+++ b/packages/backpack-web/src/bpk-component-card-list/src/BpkCardList.stories.tsx
@@ -379,19 +379,6 @@ const RowToRailWithoutTitleExample = () => (
);
-const RowToRailWithInitiallyInViewCardIndexExample = () => (
-
-
-
-);
-
const MultiComponentsScrollingTestExample = () => (
@@ -434,7 +421,6 @@ export const RowToStackWithExpand = { render: () => };
export const RowToRailForSnippets = { render: () => };
export const RowToRailWithoutTitle = { render: () => };
-export const RowToRailWithInitiallyInViewCardIndex = { render: () => };
export const MultiComponentsScrollingTest = { render: () => };
export const VisualTest = { render: () => };
diff --git a/packages/backpack-web/src/bpk-component-card-list/src/BpkCardList.tsx b/packages/backpack-web/src/bpk-component-card-list/src/BpkCardList.tsx
index 0a07f9c46a..c10664a759 100644
--- a/packages/backpack-web/src/bpk-component-card-list/src/BpkCardList.tsx
+++ b/packages/backpack-web/src/bpk-component-card-list/src/BpkCardList.tsx
@@ -48,7 +48,6 @@ const BpkCardList = (props: CardListProps) => {
chipGroup,
description,
expandText,
- initiallyInViewCardIndex = 0,
initiallyShownCardsDesktop = DEFAULT_ITEMS_DESKTOP,
initiallyShownCardsMobile = DEFAULT_ITEMS_MOBILE,
layoutDesktop,
@@ -106,7 +105,6 @@ const BpkCardList = (props: CardListProps) => {
initiallyShownCards={initiallyShownCardsMobile}
layout={layoutMobile}
accessibilityLabels={accessibilityLabels}
- initiallyInViewCardIndex={initiallyInViewCardIndex}
isMobile
>
{cardList}
@@ -137,7 +135,6 @@ const BpkCardList = (props: CardListProps) => {
initiallyShownCards={initiallyShownCardsDesktop}
layout={layoutDesktop}
accessibilityLabels={accessibilityLabels}
- initiallyInViewCardIndex={initiallyInViewCardIndex}
>
{cardList}
diff --git a/packages/backpack-web/src/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel-test.tsx b/packages/backpack-web/src/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel-test.tsx
index cfd660a240..daa76d0785 100644
--- a/packages/backpack-web/src/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel-test.tsx
+++ b/packages/backpack-web/src/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel-test.tsx
@@ -64,7 +64,6 @@ describe('BpkCardListCarousel', () => {
initiallyShownCards: 3,
layout: LAYOUTS.row,
setCurrentIndex: mockSetCurrentIndex,
- initialPageIndex: 0,
};
afterEach(() => {
diff --git a/packages/backpack-web/src/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.tsx b/packages/backpack-web/src/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.tsx
index 6f6dc4ffb5..7d48715ffd 100644
--- a/packages/backpack-web/src/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.tsx
+++ b/packages/backpack-web/src/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.tsx
@@ -53,7 +53,6 @@ const BpkCardListCarousel = (props: CardListCarouselProps) => {
`Entering Carousel with ${initiallyShownCards} slides shown at a time, ${childrenLength} slides in total. Please use Pagination below with the Previous and Next buttons to navigate, or the slide dot buttons at the end to jump to slides.`,
children,
currentIndex,
- initialPageIndex,
initiallyShownCards,
isMobile = false,
layout,
@@ -95,7 +94,6 @@ const BpkCardListCarousel = (props: CardListCarouselProps) => {
visibilityList,
container: root,
enabled: !isMobile,
- initialPageIndex,
});
// Similar to Virtual Scrolling to improve performance
diff --git a/packages/backpack-web/src/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListRowRailContainer-test.tsx b/packages/backpack-web/src/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListRowRailContainer-test.tsx
index 0e45c9cf4e..fc74eb13a3 100644
--- a/packages/backpack-web/src/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListRowRailContainer-test.tsx
+++ b/packages/backpack-web/src/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListRowRailContainer-test.tsx
@@ -46,7 +46,7 @@ describe('BpkCardListRowRailContainer', () => {
it('should render correctly with row layout and no accessory', () => {
render(
-
+
{mockCards(3)}
,
);
@@ -68,7 +68,6 @@ describe('BpkCardListRowRailContainer', () => {
layout={LAYOUTS.row}
initiallyShownCards={3}
accessory={ACCESSORY_DESKTOP_TYPES.pagination}
- initiallyInViewCardIndex={0}
>
{mockCards(5)}
,
@@ -84,116 +83,4 @@ describe('BpkCardListRowRailContainer', () => {
expect(container).toBeInTheDocument();
expect(carousel).toBeInTheDocument();
});
-
- describe('initiallyInViewCardIndex', () => {
- const mockScrollIntoView = jest.fn();
- const originalScrollIntoView = Element.prototype.scrollIntoView;
-
- beforeAll(() => {
- Element.prototype.scrollIntoView = mockScrollIntoView;
- });
-
- afterAll(() => {
- Element.prototype.scrollIntoView = originalScrollIntoView;
- });
-
- beforeEach(() => {
- mockScrollIntoView.mockClear();
- });
-
- it('should scroll to the first card of the target page on mount', () => {
- render(
-
- {mockCards(9)}
- ,
- );
-
- const cards = screen.getAllByRole('group');
-
- // Card index 4 → page 1 → scrolls to card at index 3 (page 1 start)
- expect(mockScrollIntoView).toHaveBeenCalledTimes(1);
- expect(mockScrollIntoView.mock.instances[0]).toBe(cards[3]);
- });
-
- it('should not trigger initial scroll when initiallyInViewCardIndex is 0', () => {
- render(
-
- {mockCards(6)}
- ,
- );
-
- expect(mockScrollIntoView).not.toHaveBeenCalled();
- });
-
- it('should not trigger initial scroll when initiallyInViewCardIndex is negative', () => {
- render(
-
- {mockCards(6)}
- ,
- );
-
- expect(mockScrollIntoView).not.toHaveBeenCalled();
- });
-
- it('should scroll to the last page start when initiallyInViewCardIndex exceeds total cards', () => {
- render(
-
- {mockCards(6)}
- ,
- );
-
- const cards = screen.getAllByRole('group');
-
- // Clamped to last page (page 1) → scrolls to card at index 3
- expect(mockScrollIntoView).toHaveBeenCalledTimes(1);
- expect(mockScrollIntoView.mock.instances[0]).toBe(cards[3]);
- });
-
- it.each([
- { cardIndex: 3, shownCards: 3, totalCards: 12, expectedPage: 1 },
- { cardIndex: 5, shownCards: 3, totalCards: 12, expectedPage: 1 },
- { cardIndex: 11, shownCards: 3, totalCards: 12, expectedPage: 3 },
- { cardIndex: 8, shownCards: 4, totalCards: 12, expectedPage: 2 },
- ])(
- 'should scroll to card at page start for cardIndex=$cardIndex with shownCards=$shownCards (page $expectedPage)',
- ({ cardIndex, expectedPage, shownCards, totalCards }) => {
- render(
-
- {mockCards(totalCards)}
- ,
- );
-
- const cards = screen.getAllByRole('group');
- const expectedCardIndex = expectedPage * shownCards;
-
- expect(mockScrollIntoView).toHaveBeenCalledTimes(1);
- expect(mockScrollIntoView.mock.instances[0]).toBe(
- cards[expectedCardIndex],
- );
- },
- );
- });
});
diff --git a/packages/backpack-web/src/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListRowRailContainer.tsx b/packages/backpack-web/src/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListRowRailContainer.tsx
index fc47b9875f..598986e41b 100644
--- a/packages/backpack-web/src/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListRowRailContainer.tsx
+++ b/packages/backpack-web/src/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListRowRailContainer.tsx
@@ -34,7 +34,6 @@ const BpkCardListRowRailContainer = (props: CardListRowRailProps) => {
accessibilityLabels,
accessory,
children,
- initiallyInViewCardIndex,
initiallyShownCards,
isMobile = false,
layout,
@@ -44,18 +43,7 @@ const BpkCardListRowRailContainer = (props: CardListRowRailProps) => {
const totalIndicators = Math.ceil(childrenCount / initiallyShownCards);
const showAccessory = childrenCount > initiallyShownCards;
- // Calculate initial page from card index
- const [initialPageIndex] = useState(() => {
- if (initiallyInViewCardIndex < 0) {
- return 0;
- }
- if (initiallyInViewCardIndex >= childrenCount) {
- return Math.max(0, totalIndicators - 1);
- }
- return Math.floor(initiallyInViewCardIndex / initiallyShownCards);
- });
-
- const [currentIndex, setCurrentIndex] = useState(initialPageIndex);
+ const [currentIndex, setCurrentIndex] = useState(0);
const accessoryContent =
layout === LAYOUTS.row &&
@@ -85,7 +73,6 @@ const BpkCardListRowRailContainer = (props: CardListRowRailProps) => {
isMobile={isMobile}
carouselLabel={accessibilityLabels?.carouselLabel}
slideLabel={accessibilityLabels?.slideLabel}
- initialPageIndex={initialPageIndex}
>
{children}
diff --git a/packages/backpack-web/src/bpk-component-card-list/src/BpkCardListRowRail/accessibility-test.tsx b/packages/backpack-web/src/bpk-component-card-list/src/BpkCardListRowRail/accessibility-test.tsx
index a38573250f..86fba87f74 100644
--- a/packages/backpack-web/src/bpk-component-card-list/src/BpkCardListRowRail/accessibility-test.tsx
+++ b/packages/backpack-web/src/bpk-component-card-list/src/BpkCardListRowRail/accessibility-test.tsx
@@ -47,7 +47,7 @@ describe('BpkCardListRowRailContainer', () => {
it('should have no accessibility issues for row and no accessory', async () => {
const { container } = render(
-
+
{mockCards(3)}
,
);
@@ -62,7 +62,6 @@ describe('BpkCardListRowRailContainer', () => {
layout={LAYOUTS.row}
initiallyShownCards={3}
accessory="pagination"
- initiallyInViewCardIndex={0}
>
{mockCards(5)}
,
diff --git a/packages/backpack-web/src/bpk-component-card-list/src/BpkCardListRowRail/utils-test.tsx b/packages/backpack-web/src/bpk-component-card-list/src/BpkCardListRowRail/utils-test.tsx
index 6c812d5c74..dba25ef0eb 100644
--- a/packages/backpack-web/src/bpk-component-card-list/src/BpkCardListRowRail/utils-test.tsx
+++ b/packages/backpack-web/src/bpk-component-card-list/src/BpkCardListRowRail/utils-test.tsx
@@ -87,111 +87,6 @@ describe('usePageScrollSync', () => {
jest.useRealTimers();
});
- describe('Effect 0: Initial scroll on mount', () => {
- it('should scroll to the correct card on mount with behaviour = instant when initialPageIndex is provided', () => {
- renderHook(() =>
- usePageScrollSync({
- cardRefs: mockCardRefs,
- container: mockContainer,
- currentIndex: 2,
- enabled: true,
- initialPageIndex: 2,
- initiallyShownCards: 3,
- setCurrentIndex: mockSetCurrentIndex,
- visibilityList: [1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
- }),
- );
-
- expect(mockCardRefs.current[6]?.scrollIntoView).toHaveBeenCalledWith({
- behavior: 'instant',
- block: 'nearest',
- inline: 'start',
- });
- });
-
- it('should not scroll when initialPageIndex is 0', () => {
- renderHook(() =>
- usePageScrollSync({
- cardRefs: mockCardRefs,
- container: mockContainer,
- currentIndex: 0,
- enabled: true,
- initialPageIndex: 0,
- initiallyShownCards: 3,
- setCurrentIndex: mockSetCurrentIndex,
- visibilityList: [1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
- }),
- );
-
- mockCardRefs.current.forEach((card) => {
- expect(card!.scrollIntoView).not.toHaveBeenCalled();
- });
- });
-
- it('should not scroll when disabled', () => {
- renderHook(() =>
- usePageScrollSync({
- cardRefs: mockCardRefs,
- container: mockContainer,
- currentIndex: 2,
- enabled: false,
- initialPageIndex: 2,
- initiallyShownCards: 3,
- setCurrentIndex: mockSetCurrentIndex,
- visibilityList: [1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
- }),
- );
-
- mockCardRefs.current.forEach((card) => {
- expect(card?.scrollIntoView).not.toHaveBeenCalled();
- });
- });
-
- it('should only scroll once and not on re-render', () => {
- const { rerender } = renderHook(
- ({ currentIndex }) =>
- usePageScrollSync({
- cardRefs: mockCardRefs,
- container: mockContainer,
- currentIndex,
- enabled: true,
- initialPageIndex: 1,
- initiallyShownCards: 3,
- setCurrentIndex: mockSetCurrentIndex,
- visibilityList: [1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
- }),
- { initialProps: { currentIndex: 1 } },
- );
-
- expect(mockCardRefs.current[3]?.scrollIntoView).toHaveBeenCalledTimes(1);
-
- rerender({ currentIndex: 1 });
-
- expect(mockCardRefs.current[3]?.scrollIntoView).toHaveBeenCalledTimes(1);
- });
-
- it('should scroll to correct card based on initiallyShownCards multiplier', () => {
- renderHook(() =>
- usePageScrollSync({
- cardRefs: mockCardRefs,
- container: mockContainer,
- currentIndex: 1,
- enabled: true,
- initialPageIndex: 1,
- initiallyShownCards: 4,
- setCurrentIndex: mockSetCurrentIndex,
- visibilityList: [1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
- }),
- );
-
- expect(mockCardRefs.current[4]?.scrollIntoView).toHaveBeenCalledWith({
- behavior: 'instant',
- block: 'nearest',
- inline: 'start',
- });
- });
- });
-
describe('Effect 1: Programmatic scroll when currentIndex changes', () => {
it('should scroll to the target card when currentIndex changes and container is visible', () => {
const { rerender } = renderHook(
@@ -201,7 +96,6 @@ describe('usePageScrollSync', () => {
container: mockContainer,
currentIndex,
enabled: true,
- initialPageIndex: 0,
initiallyShownCards: 3,
setCurrentIndex: mockSetCurrentIndex,
visibilityList: [1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
@@ -226,7 +120,6 @@ describe('usePageScrollSync', () => {
container: mockContainer,
currentIndex,
enabled: false,
- initialPageIndex: 0,
initiallyShownCards: 3,
setCurrentIndex: mockSetCurrentIndex,
visibilityList: [1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
@@ -254,7 +147,6 @@ describe('usePageScrollSync', () => {
container: mockContainer,
currentIndex,
enabled: true,
- initialPageIndex: 0,
initiallyShownCards: 3,
setCurrentIndex: mockSetCurrentIndex,
visibilityList: [1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
@@ -282,7 +174,6 @@ describe('usePageScrollSync', () => {
container: mockContainer,
currentIndex,
enabled: true,
- initialPageIndex: 0,
initiallyShownCards: 3,
setCurrentIndex: mockSetCurrentIndex,
visibilityList: [1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
@@ -303,7 +194,6 @@ describe('usePageScrollSync', () => {
container: null,
currentIndex,
enabled: true,
- initialPageIndex: 0,
initiallyShownCards: 3,
setCurrentIndex: mockSetCurrentIndex,
visibilityList: [1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
@@ -326,7 +216,6 @@ describe('usePageScrollSync', () => {
container: mockContainer,
currentIndex,
enabled: true,
- initialPageIndex: 0,
initiallyShownCards: 3,
setCurrentIndex: mockSetCurrentIndex,
visibilityList: [1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
@@ -347,7 +236,6 @@ describe('usePageScrollSync', () => {
container: mockContainer,
currentIndex,
enabled: true,
- initialPageIndex: 0,
initiallyShownCards: 4,
setCurrentIndex: mockSetCurrentIndex,
visibilityList: [1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
@@ -368,7 +256,6 @@ describe('usePageScrollSync', () => {
container: mockContainer,
currentIndex,
enabled: true,
- initialPageIndex: 0,
initiallyShownCards: 3,
setCurrentIndex: mockSetCurrentIndex,
visibilityList: [1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
@@ -392,7 +279,6 @@ describe('usePageScrollSync', () => {
container: mockContainer,
currentIndex: 0,
enabled: true,
- initialPageIndex: 0,
initiallyShownCards: 3,
setCurrentIndex: mockSetCurrentIndex,
visibilityList: [1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
@@ -415,7 +301,6 @@ describe('usePageScrollSync', () => {
container: mockContainer,
currentIndex: 0,
enabled: false,
- initialPageIndex: 0,
initiallyShownCards: 3,
setCurrentIndex: mockSetCurrentIndex,
visibilityList: [1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
@@ -438,7 +323,6 @@ describe('usePageScrollSync', () => {
container: null,
currentIndex: 0,
enabled: true,
- initialPageIndex: 0,
initiallyShownCards: 3,
setCurrentIndex: mockSetCurrentIndex,
visibilityList: [1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
@@ -460,7 +344,6 @@ describe('usePageScrollSync', () => {
container: mockContainer,
currentIndex: 0,
enabled: true,
- initialPageIndex: 0,
initiallyShownCards: 3,
setCurrentIndex: mockSetCurrentIndex,
visibilityList: [1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
@@ -483,7 +366,6 @@ describe('usePageScrollSync', () => {
container: mockContainer,
currentIndex: 0,
enabled: true,
- initialPageIndex: 0,
initiallyShownCards: 3,
setCurrentIndex: mockSetCurrentIndex,
visibilityList,
@@ -523,7 +405,6 @@ describe('usePageScrollSync', () => {
container: mockContainer,
currentIndex: 0,
enabled: true,
- initialPageIndex: 0,
initiallyShownCards: 3,
setCurrentIndex: mockSetCurrentIndex,
visibilityList,
@@ -569,7 +450,6 @@ describe('usePageScrollSync', () => {
container: mockContainer,
currentIndex: 0,
enabled: true,
- initialPageIndex: 0,
initiallyShownCards: 3,
setCurrentIndex: mockSetCurrentIndex,
visibilityList,
@@ -599,7 +479,6 @@ describe('usePageScrollSync', () => {
container: mockContainer,
currentIndex: 0,
enabled: true,
- initialPageIndex: 0,
initiallyShownCards: 4,
setCurrentIndex: mockSetCurrentIndex,
visibilityList,
@@ -629,7 +508,6 @@ describe('usePageScrollSync', () => {
container: mockContainer,
currentIndex: 0,
enabled: false,
- initialPageIndex: 0,
initiallyShownCards: 3,
setCurrentIndex: mockSetCurrentIndex,
visibilityList,
@@ -658,7 +536,6 @@ describe('usePageScrollSync', () => {
container: mockContainer,
currentIndex: 0,
enabled: true,
- initialPageIndex: 0,
initiallyShownCards: 3,
setCurrentIndex: mockSetCurrentIndex,
visibilityList,
@@ -687,7 +564,6 @@ describe('usePageScrollSync', () => {
container: mockContainer,
currentIndex: 1,
enabled: true,
- initialPageIndex: 0,
initiallyShownCards: 3,
setCurrentIndex: mockSetCurrentIndex,
visibilityList,
@@ -720,7 +596,6 @@ describe('usePageScrollSync', () => {
container: mockContainer,
currentIndex: 1,
enabled: true,
- initialPageIndex: 0,
initiallyShownCards: 3,
setCurrentIndex: mockSetCurrentIndex,
visibilityList,
@@ -754,7 +629,6 @@ describe('usePageScrollSync', () => {
container: mockContainer,
currentIndex,
enabled: true,
- initialPageIndex: 0,
initiallyShownCards: 3,
setCurrentIndex: mockSetCurrentIndex,
visibilityList,
@@ -788,7 +662,6 @@ describe('usePageScrollSync', () => {
container: mockContainer,
currentIndex,
enabled: true,
- initialPageIndex: 0,
initiallyShownCards: 3,
setCurrentIndex: mockSetCurrentIndex,
visibilityList,
@@ -829,7 +702,6 @@ describe('usePageScrollSync', () => {
container: mockContainer,
currentIndex,
enabled: true,
- initialPageIndex: 0,
initiallyShownCards: 3,
setCurrentIndex: mockSetCurrentIndex,
visibilityList,
@@ -863,7 +735,6 @@ describe('usePageScrollSync', () => {
container: mockContainer,
currentIndex,
enabled: true,
- initialPageIndex: 0,
initiallyShownCards: 3,
setCurrentIndex: mockSetCurrentIndex,
visibilityList,
@@ -905,7 +776,6 @@ describe('usePageScrollSync', () => {
container: mockContainer,
currentIndex,
enabled: true,
- initialPageIndex: 0,
initiallyShownCards: 3,
setCurrentIndex: mockSetCurrentIndex,
visibilityList,
@@ -948,7 +818,6 @@ describe('usePageScrollSync', () => {
container: mockContainer,
currentIndex: 0,
enabled: true,
- initialPageIndex: 0,
initiallyShownCards: 3,
setCurrentIndex: mockSetCurrentIndex,
visibilityList: [1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
@@ -979,7 +848,6 @@ describe('usePageScrollSync', () => {
container: mockContainer,
currentIndex: 0,
enabled: true,
- initialPageIndex: 0,
initiallyShownCards: 3,
setCurrentIndex: mockSetCurrentIndex,
visibilityList: [1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
diff --git a/packages/backpack-web/src/bpk-component-card-list/src/BpkCardListRowRail/utils.tsx b/packages/backpack-web/src/bpk-component-card-list/src/BpkCardListRowRail/utils.tsx
index babae73ff3..cd4f5639dc 100644
--- a/packages/backpack-web/src/bpk-component-card-list/src/BpkCardListRowRail/utils.tsx
+++ b/packages/backpack-web/src/bpk-component-card-list/src/BpkCardListRowRail/utils.tsx
@@ -100,7 +100,6 @@ type UsePageScrollSyncOptions = {
visibilityList: number[];
container: HTMLElement | null;
enabled: boolean;
- initialPageIndex: number;
};
/**
@@ -120,7 +119,6 @@ export const usePageScrollSync = ({
container,
currentIndex,
enabled,
- initialPageIndex,
initiallyShownCards,
setCurrentIndex,
visibilityList,
@@ -130,28 +128,6 @@ export const usePageScrollSync = ({
null,
);
const lastCurrentIndexRef = useRef(currentIndex);
- const hasInitialScrolled = useRef(false);
-
- // Effect 0: Initial scroll (instant, runs once on mount)
- useEffect(() => {
- if (hasInitialScrolled.current) {
- return;
- }
- hasInitialScrolled.current = true;
-
- if (!enabled || initialPageIndex === 0) {
- return;
- }
-
- const targetCard = cardRefs.current?.[initialPageIndex * initiallyShownCards];
- if (targetCard) {
- targetCard.scrollIntoView({
- behavior: 'instant',
- block: 'nearest',
- inline: 'start',
- });
- }
- }, [cardRefs, enabled, initialPageIndex, initiallyShownCards]); // Run once on mount only
// Effect 1: Programmatic scroll when currentIndex changes
useEffect(() => {
diff --git a/packages/backpack-web/src/bpk-component-card-list/src/common-types.ts b/packages/backpack-web/src/bpk-component-card-list/src/common-types.ts
index 09aad37575..1a2284c02f 100644
--- a/packages/backpack-web/src/bpk-component-card-list/src/common-types.ts
+++ b/packages/backpack-web/src/bpk-component-card-list/src/common-types.ts
@@ -61,7 +61,6 @@ type CardListBaseProps = {
accessoryMobile?: (typeof ACCESSORY_MOBILE_TYPES)[keyof typeof ACCESSORY_MOBILE_TYPES];
initiallyShownCardsDesktop?: number;
initiallyShownCardsMobile?: number;
- initiallyInViewCardIndex?: number;
chipGroup?: ReactElement;
buttonContent?: React.ReactNode;
onButtonClick?: () => void;
@@ -102,7 +101,6 @@ type CardListRowRailProps = {
accessory?: typeof ACCESSORY_DESKTOP_TYPES.pagination;
isMobile?: boolean;
accessibilityLabels?: AccessibilityLabels;
- initiallyInViewCardIndex: number;
};
type CardListCarouselProps = {
@@ -114,7 +112,6 @@ type CardListCarouselProps = {
isMobile?: boolean;
carouselLabel?: (initiallyShownCards: number, childrenLength: number) => string;
slideLabel?: (index: number, childrenLength: number) => string;
- initialPageIndex: number;
};
type CardListProps = CardListBaseProps;