@skyscanner/backpack-web 42.23.0-dev-v26810456218.1 → 42.24.0

package/bpk-component-card-list/src/BpkCardList.js

@@ -38,6 +38,7 @@ const BpkCardList = props => {
     chipGroup,
     description,
     expandText,
+    initiallyInViewCardIndex = 0,
     initiallyShownCardsDesktop = DEFAULT_ITEMS_DESKTOP,
     initiallyShownCardsMobile = DEFAULT_ITEMS_MOBILE,
     layoutDesktop,
@@ -78,6 +79,7 @@ const BpkCardList = props => {
               initiallyShownCards: initiallyShownCardsMobile,
               layout: layoutMobile,
               accessibilityLabels: accessibilityLabels,
+              initiallyInViewCardIndex: initiallyInViewCardIndex,
               isMobile: true,
               children: cardList
             }), layoutMobile === LAYOUTS.stack && /*#__PURE__*/_jsx(BpkCardListGridStack, {
@@ -97,6 +99,7 @@ const BpkCardList = props => {
               initiallyShownCards: initiallyShownCardsDesktop,
               layout: layoutDesktop,
               accessibilityLabels: accessibilityLabels,
+              initiallyInViewCardIndex: initiallyInViewCardIndex,
               children: cardList
             }), layoutDesktop === LAYOUTS.grid && accessoryDesktop !== ACCESSORY_DESKTOP_TYPES.pagination && /*#__PURE__*/_jsx(BpkCardListGridStack, {
               accessory: accessoryDesktop,

package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.js

@@ -30,6 +30,7 @@ const BpkCardListCarousel = props => {
     carouselLabel = (initiallyShownCards, childrenLength) => `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,
@@ -58,7 +59,8 @@ const BpkCardListCarousel = props => {
     cardRefs,
     visibilityList,
     container: root,
-    enabled: !isMobile
+    enabled: !isMobile,
+    initialPageIndex
   });
 
   // Similar to Virtual Scrolling to improve performance

package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListRowRailContainer.js

@@ -28,6 +28,7 @@ const BpkCardListRowRailContainer = props => {
     accessibilityLabels,
     accessory,
     children,
+    initiallyInViewCardIndex,
     initiallyShownCards,
     isMobile = false,
     layout
@@ -35,7 +36,18 @@ const BpkCardListRowRailContainer = props => {
   const childrenCount = Children.count(children);
   const totalIndicators = Math.ceil(childrenCount / initiallyShownCards);
   const showAccessory = childrenCount > initiallyShownCards;
-  const [currentIndex, setCurrentIndex] = useState(0);
+
+  // 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 accessoryContent = layout === LAYOUTS.row && accessory === ACCESSORY_DESKTOP_TYPES.pagination ? /*#__PURE__*/_jsx(BpkPageIndicator, {
     currentIndex: currentIndex,
     totalIndicators: totalIndicators,
@@ -57,6 +69,7 @@ const BpkCardListRowRailContainer = props => {
       isMobile: isMobile,
       carouselLabel: accessibilityLabels?.carouselLabel,
       slideLabel: accessibilityLabels?.slideLabel,
+      initialPageIndex: initialPageIndex,
       children: children
     }), accessoryContent && showAccessory && /*#__PURE__*/_jsx("div", {
       role: "region",

package/bpk-component-card-list/src/BpkCardListRowRail/utils.d.ts

@@ -15,6 +15,7 @@ type UsePageScrollSyncOptions = {
     visibilityList: number[];
     container: HTMLElement | null;
     enabled: boolean;
+    initialPageIndex: number;
 };
 /**
  * Provides bidirectional synchronisation between page index state and scroll position.
@@ -27,5 +28,5 @@ type UsePageScrollSyncOptions = {
  * The hook uses a lock mechanism to prevent conflicts between programmatic and
  * user-initiated scrolling.
  */
-export declare const usePageScrollSync: ({ cardRefs, container, currentIndex, enabled, initiallyShownCards, setCurrentIndex, visibilityList, }: UsePageScrollSyncOptions) => void;
+export declare const usePageScrollSync: ({ cardRefs, container, currentIndex, enabled, initialPageIndex, initiallyShownCards, setCurrentIndex, visibilityList, }: UsePageScrollSyncOptions) => void;
 export {};

package/bpk-component-card-list/src/BpkCardListRowRail/utils.js

@@ -98,6 +98,7 @@ export const usePageScrollSync = ({
   container,
   currentIndex,
   enabled,
+  initialPageIndex,
   initiallyShownCards,
   setCurrentIndex,
   visibilityList
@@ -105,6 +106,26 @@ export const usePageScrollSync = ({
   const isUserScrollingRef = useRef(false);
   const scrollEndTimeoutRef = useRef(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(() => {

package/bpk-component-card-list/src/common-types.d.ts

@@ -36,6 +36,7 @@ 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;
@@ -69,6 +70,7 @@ type CardListRowRailProps = {
     accessory?: typeof ACCESSORY_DESKTOP_TYPES.pagination;
     isMobile?: boolean;
     accessibilityLabels?: AccessibilityLabels;
+    initiallyInViewCardIndex: number;
 };
 type CardListCarouselProps = {
     children: Array<ReactElement<HTMLDivElement | HTMLAnchorElement>>;
@@ -79,6 +81,7 @@ type CardListCarouselProps = {
     isMobile?: boolean;
     carouselLabel?: (initiallyShownCards: number, childrenLength: number) => string;
     slideLabel?: (index: number, childrenLength: number) => string;
+    initialPageIndex: number;
 };
 type CardListProps = CardListBaseProps;
 export default CardListProps;

package/bpk-component-page-indicator/src/BpkPageIndicator.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-page-indicator-fullWidth__container{width:100%}.bpk-page-indicator{display:flex;width:100%;justify-content:center;align-items:center}.bpk-page-indicator__showNav{justify-content:space-between}.bpk-page-indicator__container{max-width:5rem;min-height:.5rem;overflow:hidden}.bpk-page-indicator__indicators-container{--direction: -1;transform:translateX(calc(var(--direction) * var(--scroll-index, 0) * 1rem));transition:transform 200ms ease-in-out;white-space:nowrap}html[dir=rtl] .bpk-page-indicator__indicators-container{--direction: 1}.bpk-page-indicator__indicator{display:inline-block;width:.5rem;height:.5rem;padding:0;border:none;border-radius:50%;margin-inline:.25rem}.bpk-page-indicator__indicator:hover{cursor:pointer}.bpk-page-indicator__indicator--default{background-color:#c1c7cf}.bpk-page-indicator__indicator--overImage,.bpk-page-indicator__indicator--overImageSpaced,.bpk-page-indicator__indicator--carousel{background-color:hsla(0,0%,100%,.5)}.bpk-page-indicator__indicator--active-default{background-color:#626971;pointer-events:none}.bpk-page-indicator__indicator--active-overImage,.bpk-page-indicator__indicator--active-overImageSpaced,.bpk-page-indicator__indicator--active-carousel{background-color:#fff;pointer-events:none}.bpk-page-indicator__nav-carousel{--bpk-button-border-radius: 50%;--bpk-button-secondary-on-dark-background-color: rgba(255, 255, 255, 0.5);--bpk-button-secondary-on-dark-hover-background-color: rgba(255, 255, 255, 0.8);--bpk-button-secondary-on-dark-active-background-color: rgba(255, 255, 255, 0.8);--bpk-button-secondary-on-dark-text-color: rgb(22, 22, 22);--bpk-button-secondary-on-dark-hover-text-color: rgb(22, 22, 22);--bpk-button-secondary-on-dark-active-text-color: rgb(22, 22, 22)}.bpk-page-indicator__nav-carousel-button{display:inline-flex;width:2rem;height:2rem;min-height:2rem;padding:0;justify-content:center;align-items:center}
+.bpk-page-indicator-fullWidth__container{width:100%}.bpk-page-indicator{display:flex;width:100%;justify-content:center;align-items:center}.bpk-page-indicator__showNav{justify-content:space-between}.bpk-page-indicator__container{max-width:5rem;min-height:.5rem;overflow:hidden}.bpk-page-indicator__indicators-container{--direction: -1;transform:translateX(calc(var(--direction) * var(--scroll-index, 0) * 1rem));transition:transform 200ms ease-in-out;white-space:nowrap}html[dir=rtl] .bpk-page-indicator__indicators-container{--direction: 1}.bpk-page-indicator__indicator{display:inline-block;width:.5rem;height:.5rem;padding:0;border:none;border-radius:50%;margin-inline:.25rem}.bpk-page-indicator__indicator:hover{cursor:pointer}.bpk-page-indicator__indicator--default{background-color:#c1c7cf}.bpk-page-indicator__indicator--overImage,.bpk-page-indicator__indicator--overImageSpaced,.bpk-page-indicator__indicator--carousel{background-color:hsla(0,0%,100%,.5)}.bpk-page-indicator__indicator--active-default{background-color:#626971;pointer-events:none}.bpk-page-indicator__indicator--active-overImage,.bpk-page-indicator__indicator--active-overImageSpaced,.bpk-page-indicator__indicator--active-carousel{background-color:#fff;pointer-events:none}.bpk-page-indicator__nav-carousel{--bpk-button-border-radius: 50%;--bpk-button-secondary-on-dark-background-color: rgba(255, 255, 255, 0.5);--bpk-button-secondary-on-dark-hover-background-color: rgba(255, 255, 255, 0.8);--bpk-button-secondary-on-dark-active-background-color: rgba(255, 255, 255, 0.8);--bpk-button-secondary-on-dark-text-color: rgb(22, 22, 22);--bpk-button-secondary-on-dark-hover-text-color: rgb(22, 22, 22);--bpk-button-secondary-on-dark-active-text-color: rgb(22, 22, 22)}.bpk-page-indicator__nav-carousel .bpk-page-indicator__nav-carousel-button{display:inline-flex;width:2rem;height:2rem;min-height:2rem;padding:0;justify-content:center;align-items:center}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "42.23.0-dev-v26810456218.1",
+  "version": "42.24.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",