@skyscanner/backpack-web 37.8.0 → 37.9.1

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

@@ -15,21 +15,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import { useState, useEffect } from 'react';
 import BpkBreakpoint, { BREAKPOINTS } from "../../bpk-component-breakpoint";
 import { BpkButtonV2 } from "../../bpk-component-button";
 import BpkSectionHeader from "../../bpk-component-section-header";
 import { cssModules } from "../../bpk-react-utils";
 import BpkCardListGridStack from "./BpkCardListGridStack";
-// import BpkCardListRowRailContainer from './BpkCardListRowRail';
+import BpkCardListRowRailContainer from "./BpkCardListRowRail";
 import { ACCESSORY_DESKTOP_TYPES, ACCESSORY_MOBILE_TYPES, LAYOUTS } from "./common-types";
 import STYLES from "./BpkCardList.module.css";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const DEFAULT_ITEMS = 3;
 const BpkCardList = props => {
   const {
+    accessibilityLabels,
     accessoryDesktop,
     accessoryMobile,
     buttonContent,
@@ -38,92 +37,68 @@ const BpkCardList = props => {
     chipGroup,
     description,
     expandText,
-    initiallyShownCards = DEFAULT_ITEMS,
+    initiallyShownCardsDesktop = DEFAULT_ITEMS,
+    initiallyShownCardsMobile = DEFAULT_ITEMS,
     layoutDesktop,
     layoutMobile,
     onButtonClick,
     onExpandClick,
     title
   } = props;
-  const [showHeaderButton, setShowHeaderButton] = useState(false);
-  const [isMobileActive, setIsMobileActive] = useState(false);
-  useEffect(() => {
-    if (isMobileActive) {
-      setShowHeaderButton(!!buttonContent && accessoryMobile !== ACCESSORY_MOBILE_TYPES.button);
-    } else {
-      setShowHeaderButton(!!buttonContent && accessoryDesktop !== ACCESSORY_DESKTOP_TYPES.button);
+  const shouldShowHeaderButton = isMobile => {
+    if (!buttonContent) return false;
+    if (isMobile) {
+      return accessoryMobile !== ACCESSORY_MOBILE_TYPES.button;
     }
-  }, [isMobileActive, buttonContent, accessoryMobile, accessoryDesktop]);
+    return accessoryDesktop !== ACCESSORY_DESKTOP_TYPES.button;
+  };
   const headerButton = buttonContent && /*#__PURE__*/_jsx(BpkButtonV2, {
     onClick: onButtonClick,
     href: buttonHref,
     "data-testid": "bpk-card-list-header-button",
     children: buttonContent
   });
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: getClassName('bpk-card-list'),
     "data-testid": "bpk-card-list",
-    children: [/*#__PURE__*/_jsx(BpkSectionHeader, {
-      title: title,
-      description: description,
-      button: showHeaderButton ? headerButton : null
-    }), chipGroup, /*#__PURE__*/_jsx("div", {
-      className: getClassName('bpk-card-list--card-list'),
-      "data-testid": "bpk-card-list--card-list",
-      children: /*#__PURE__*/_jsx(BpkBreakpoint, {
-        query: BREAKPOINTS.MOBILE,
-        children: isActive => {
-          if (isActive) {
-            setIsMobileActive(isActive);
-
-            // if (layoutMobile === LAYOUTS.rail) {
-            //   return (
-            //     <BpkCardListRowRailContainer
-            //       initiallyShownCards={initiallyShownCards}
-            //       layout={layoutMobile}
-            //     >
-            //       {cardList}
-            //     </BpkCardListRowRailContainer>
-            //   );
-            // }
-
-            if (layoutMobile === LAYOUTS.stack) {
-              return /*#__PURE__*/_jsx(BpkCardListGridStack, {
-                accessory: accessoryMobile,
-                initiallyShownCards: initiallyShownCards,
-                buttonContent: buttonContent,
-                expandText: expandText,
-                onButtonClick: onButtonClick,
-                onExpandClick: onExpandClick,
-                layout: layoutMobile,
-                buttonHref: buttonHref,
-                children: cardList
-              });
-            }
-          }
-
-          /// ///// Desktop Cases ////////
-
-          // if (
-          //   layoutDesktop === LAYOUTS.row &&
-          //   accessoryDesktop !== ACCESSORY_DESKTOP_TYPES.expand &&
-          //   accessoryDesktop !== ACCESSORY_DESKTOP_TYPES.button
-          // ) {
-          //   return (
-          //     <BpkCardListRowRailContainer
-          //       accessory={accessoryDesktop}
-          //       initiallyShownCards={initiallyShownCards}
-          //       layout={layoutDesktop}
-          //     >
-          //       {cardList}
-          //     </BpkCardListRowRailContainer>
-          //   );
-          // }
-
-          if (layoutDesktop === LAYOUTS.grid && accessoryDesktop !== ACCESSORY_DESKTOP_TYPES.pagination) {
-            return /*#__PURE__*/_jsx(BpkCardListGridStack, {
+    children: /*#__PURE__*/_jsx(BpkBreakpoint, {
+      query: BREAKPOINTS.MOBILE,
+      children: isMobile => /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(BpkSectionHeader, {
+          title: title,
+          description: description,
+          button: shouldShowHeaderButton(isMobile) ? headerButton : null
+        }), chipGroup, /*#__PURE__*/_jsx("div", {
+          className: getClassName('bpk-card-list--card-list'),
+          "data-testid": "bpk-card-list--card-list",
+          children: isMobile ? /*#__PURE__*/_jsxs(_Fragment, {
+            children: [layoutMobile === LAYOUTS.rail && /*#__PURE__*/_jsx(BpkCardListRowRailContainer, {
+              initiallyShownCards: initiallyShownCardsMobile,
+              layout: layoutMobile,
+              accessibilityLabels: accessibilityLabels,
+              isMobile: true,
+              children: cardList
+            }), layoutMobile === LAYOUTS.stack && /*#__PURE__*/_jsx(BpkCardListGridStack, {
+              accessory: accessoryMobile,
+              initiallyShownCards: initiallyShownCardsMobile,
+              buttonContent: buttonContent,
+              expandText: expandText,
+              onButtonClick: onButtonClick,
+              onExpandClick: onExpandClick,
+              layout: layoutMobile,
+              buttonHref: buttonHref,
+              children: cardList
+            })]
+          }) : /*#__PURE__*/_jsxs(_Fragment, {
+            children: [layoutDesktop === LAYOUTS.row && accessoryDesktop !== ACCESSORY_DESKTOP_TYPES.expand && accessoryDesktop !== ACCESSORY_DESKTOP_TYPES.button && /*#__PURE__*/_jsx(BpkCardListRowRailContainer, {
+              accessory: accessoryDesktop,
+              initiallyShownCards: initiallyShownCardsDesktop,
+              layout: layoutDesktop,
+              accessibilityLabels: accessibilityLabels,
+              children: cardList
+            }), layoutDesktop === LAYOUTS.grid && accessoryDesktop !== ACCESSORY_DESKTOP_TYPES.pagination && /*#__PURE__*/_jsx(BpkCardListGridStack, {
               accessory: accessoryDesktop,
-              initiallyShownCards: initiallyShownCards,
+              initiallyShownCards: initiallyShownCardsDesktop,
               buttonContent: buttonContent,
               expandText: expandText,
               onButtonClick: onButtonClick,
@@ -131,12 +106,11 @@ const BpkCardList = props => {
               layout: layoutDesktop,
               buttonHref: buttonHref,
               children: cardList
-            });
-          }
-          return null;
-        }
+            })]
+          })
+        })]
       })
-    })]
+    })
   });
 };
 export default BpkCardList;

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

@@ -47,13 +47,13 @@ const BpkCardListGridStack = props => {
   const childrenArray = Children.toArray(children);
   const initialCards = childrenArray.slice(0, defaultInitiallyShownCards);
   const restCards = childrenArray.slice(defaultInitiallyShownCards, childrenArray.length);
-  const onExpandTogle = () => {
+  const onExpandToggle = () => {
     setCollapsed(prev => !prev);
     onExpandClick?.();
   };
   const expandAccessoryContent = /*#__PURE__*/_jsx(ExpandAccessoryContent, {
     collapsed: collapsed,
-    onExpandTogle: onExpandTogle,
+    onExpandToggle: onExpandToggle,
     children: expandText || ''
   });
   const buttonAccessoryContent = /*#__PURE__*/_jsx("div", {

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

@@ -0,0 +1,3 @@
+import type { CardListCarouselProps } from '../common-types';
+declare const BpkCardListCarousel: (props: CardListCarouselProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkCardListCarousel;

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

@@ -0,0 +1,106 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useRef, useState, useEffect, isValidElement, Children } from 'react';
+import { cssModules } from "../../../bpk-react-utils";
+import { RENDER_BUFFER_SIZE } from "./constants";
+import { lockScroll, setA11yTabIndex, useUpdateCurrentIndexByVisibility, useScrollToCard, useIntersectionObserver } from "./utils";
+import STYLES from "./BpkCardListCarousel.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkCardListCarousel = props => {
+  const {
+    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,
+    initiallyShownCards,
+    isMobile = false,
+    layout,
+    setCurrentIndex,
+    slideLabel = (index, childrenLength) => `slide ${index + 1} of ${childrenLength}`
+  } = props;
+  const shownNumberStyle = {
+    '--initially-shown-cards': initiallyShownCards
+  };
+  const childrenLength = Children.count(children);
+  const [root, setRoot] = useState(null);
+  const cardRefs = useRef([]);
+  const [visibilityList, setVisibilityList] = useState(Array(childrenLength).fill(0));
+  const stateScrollingLockRef = useRef(false);
+  const openSetStateLockTimeoutRef = useRef(null);
+  const observerVisibility = useIntersectionObserver({
+    root,
+    threshold: 0.5
+  }, setVisibilityList);
+  useEffect(() => {
+    const container = root;
+    if (isMobile || !container) return undefined;
+    const lockScrollDuringInteraction = () => {
+      lockScroll(stateScrollingLockRef, openSetStateLockTimeoutRef);
+    };
+    container.addEventListener('wheel', lockScrollDuringInteraction);
+    container.addEventListener('touchmove', lockScrollDuringInteraction);
+    return () => {
+      container.removeEventListener('touchmove', lockScrollDuringInteraction);
+      container.removeEventListener('wheel', lockScrollDuringInteraction);
+      if (openSetStateLockTimeoutRef.current) {
+        clearTimeout(openSetStateLockTimeoutRef.current);
+      }
+    };
+  }, [root]);
+  useUpdateCurrentIndexByVisibility(isMobile, visibilityList, setCurrentIndex, stateScrollingLockRef, openSetStateLockTimeoutRef);
+  useScrollToCard(currentIndex, root, cardRefs, stateScrollingLockRef);
+
+  // Similar to Virtual Scrolling to improve performance
+  const firstVisibleIndex = Math.max(0, visibilityList.indexOf(1));
+  const lastVisibleIndex = firstVisibleIndex + initiallyShownCards - 1;
+  const renderList = visibilityList.map((_, index) => index >= firstVisibleIndex - RENDER_BUFFER_SIZE && index <= lastVisibleIndex + RENDER_BUFFER_SIZE ? 1 : 0);
+  return /*#__PURE__*/_jsx("div", {
+    className: getClassName(`bpk-card-list-row-rail__${layout}`),
+    "data-testid": "bpk-card-list-row-rail__carousel",
+    "aria-label": carouselLabel(initiallyShownCards, childrenLength),
+    "aria-roledescription": "carousel"
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: 0,
+    role: "region",
+    ref: setRoot,
+    children: children.map((card, index) => {
+      if (! /*#__PURE__*/isValidElement(card)) return null;
+      const cardRefCallback = el => {
+        cardRefs.current[index] = el;
+        observerVisibility(el, index);
+        setA11yTabIndex(el, index, visibilityList);
+      };
+      const cardStyle = isMobile ? {
+        ...shownNumberStyle,
+        visibility: renderList[index] === 1 ? 'visible' : 'hidden' // for mobile, {renderList[index] === 1 && card} will cause reflowing and bugs, implementing visibility improvement instead
+      } : shownNumberStyle;
+      return /*#__PURE__*/_jsx("div", {
+        className: getClassName(`bpk-card-list-row-rail__${layout}__card`),
+        ref: cardRefCallback,
+        style: cardStyle,
+        role: "group",
+        "aria-label": slideLabel(index, childrenLength),
+        "aria-current": index === currentIndex ? 'true' : 'false',
+        children: isMobile ? card : renderList[index] === 1 && card
+      }, `carousel-card-${index.toString()}`);
+    })
+  });
+};
+export default BpkCardListCarousel;

package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.css

@@ -0,0 +1,18 @@
+/*
+ * Backpack - Skyscanner's Design System
+ * 
+ * Copyright 2016 Skyscanner Ltd
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.bpk-card-list-row-rail__row,.bpk-card-list-row-rail__rail{display:flex;padding-top:.25rem;padding-bottom:.25rem;overflow-x:scroll;box-sizing:border-box;gap:.25rem;scroll-snap-stop:always;scroll-snap-type:x mandatory;scrollbar-width:none}.bpk-card-list-row-rail__row::-webkit-scrollbar,.bpk-card-list-row-rail__rail::-webkit-scrollbar{display:none}.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{position:relative;padding:.5rem;flex:0 0 calc((100% - .5rem*(var(--initially-shown-cards, 3) - 1))/var(--initially-shown-cards, 3));overflow:visible;box-sizing:border-box;scroll-snap-align:start}.bpk-card-list-row-rail__rail{-webkit-overflow-scrolling:touch}

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

@@ -0,0 +1,3 @@
+import type { CardListRowRailProps } from '../common-types';
+declare const BpkCardListRowRailContainer: (props: CardListRowRailProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkCardListRowRailContainer;

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

@@ -0,0 +1,68 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useState, Children } from 'react';
+import BpkPageIndicator from "../../../bpk-component-page-indicator";
+import { cssModules } from "../../../bpk-react-utils";
+import { ACCESSORY_DESKTOP_TYPES, LAYOUTS } from "../common-types";
+import BpkCardListCarousel from "./BpkCardListCarousel";
+import STYLES from "./BpkCardListRowRailContainer.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkCardListRowRailContainer = props => {
+  const {
+    accessibilityLabels,
+    accessory,
+    children,
+    initiallyShownCards,
+    isMobile = false,
+    layout
+  } = props;
+  const totalIndicators = Children.count(children);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const showAccessory = totalIndicators > initiallyShownCards;
+  const accessoryContent = layout === LAYOUTS.row && accessory === ACCESSORY_DESKTOP_TYPES.pagination ? /*#__PURE__*/_jsx(BpkPageIndicator, {
+    currentIndex: currentIndex,
+    totalIndicators: totalIndicators,
+    onClick: (_e, index) => setCurrentIndex(index),
+    showNav: true,
+    indicatorLabel: accessibilityLabels?.indicatorLabel ?? 'Go to slide',
+    prevNavLabel: accessibilityLabels?.prevNavLabel ?? 'Previous slide',
+    nextNavLabel: accessibilityLabels?.nextNavLabel ?? 'Next slide'
+  }) : null;
+  return /*#__PURE__*/_jsxs("div", {
+    className: getClassName('bpk-card-list-row-rail'),
+    "data-testid": "bpk-card-list-row-rail",
+    children: [/*#__PURE__*/_jsx(BpkCardListCarousel, {
+      initiallyShownCards: initiallyShownCards,
+      layout: layout,
+      currentIndex: currentIndex,
+      setCurrentIndex: setCurrentIndex,
+      isMobile: isMobile,
+      carouselLabel: accessibilityLabels?.carouselLabel,
+      slideLabel: accessibilityLabels?.slideLabel,
+      children: children
+    }), accessoryContent && showAccessory && /*#__PURE__*/_jsx("div", {
+      role: "region",
+      "aria-label": "pagination",
+      className: getClassName(`bpk-card-list-row-rail__accessory`),
+      "data-testid": "bpk-card-list-row-rail__accessory",
+      children: accessoryContent
+    })]
+  });
+};
+export default BpkCardListRowRailContainer;

package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListRowRailContainer.module.css

@@ -0,0 +1,18 @@
+/*
+ * Backpack - Skyscanner's Design System
+ * 
+ * Copyright 2016 Skyscanner Ltd
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.bpk-card-list-row-rail{display:flex;flex-direction:column}.bpk-card-list-row-rail__accessory{width:100%}

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

@@ -0,0 +1,2 @@
+export declare const RELEASE_LOCK_DELAY = 20;
+export declare const RENDER_BUFFER_SIZE = 3;

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

@@ -0,0 +1,20 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const RELEASE_LOCK_DELAY = 20;
+export const RENDER_BUFFER_SIZE = 3;

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

@@ -0,0 +1,2 @@
+import BpkCardListRowRailContainer from './BpkCardListRowRailContainer';
+export default BpkCardListRowRailContainer;

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

@@ -0,0 +1,20 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import BpkCardListRowRailContainer from "./BpkCardListRowRailContainer";
+export default BpkCardListRowRailContainer;

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

@@ -0,0 +1,16 @@
+/**
+ * Typically used to prevent useScrollToCard() from being called, to prevent scrollings caused by state changes, so as to avoid cyclic dependencies.
+ * @param stateScrollingLockRef - Ref to the state that indicates if scrollIntoView should be locked
+ * @param openSetStateLockTimeoutRef - Ref to the timeout that releases the lock after a delay. Should be renewed every time another scroll action is triggered, with a new lock is added.
+ */
+export declare const lockScroll: (stateScrollingLockRef: React.MutableRefObject<boolean>, openSetStateLockTimeoutRef: React.MutableRefObject<NodeJS.Timeout | null>) => void;
+/**
+ * Only sets the tabIndex of focusable elements as 0 if the card is visible, otherwise sets it to -1, including all its children.
+ * For example, if there is a button inside a card which is not shown, it cannot be focused as well.
+ * @param el - Card container element, typically a div used to wrap the card content.
+ * @param index - Current container index
+ */
+export declare const setA11yTabIndex: (el: HTMLDivElement | null, index: number, visibilityList: number[]) => void;
+export declare const useUpdateCurrentIndexByVisibility: (isMobile: boolean, visibilityList: number[], setCurrentIndex: (index: number) => void, stateScrollingLockRef: React.MutableRefObject<boolean>, openSetStateLockTimeoutRef: React.MutableRefObject<NodeJS.Timeout | null>) => void;
+export declare const useScrollToCard: (currentIndex: number, container: HTMLElement | null, cardRefs: React.MutableRefObject<Array<HTMLDivElement | null>>, stateScrollingLockRef: React.MutableRefObject<boolean>) => void;
+export declare const useIntersectionObserver: ({ root, threshold }: IntersectionObserverInit, setVisibilityList: React.Dispatch<React.SetStateAction<number[]>>) => (element: HTMLElement | null, index: number) => void;

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

@@ -0,0 +1,127 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2022 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useEffect, useRef, useMemo } from 'react';
+import { RELEASE_LOCK_DELAY } from "./constants";
+
+/**
+ * Typically used to prevent useScrollToCard() from being called, to prevent scrollings caused by state changes, so as to avoid cyclic dependencies.
+ * @param stateScrollingLockRef - Ref to the state that indicates if scrollIntoView should be locked
+ * @param openSetStateLockTimeoutRef - Ref to the timeout that releases the lock after a delay. Should be renewed every time another scroll action is triggered, with a new lock is added.
+ */
+
+export const lockScroll = (stateScrollingLockRef, openSetStateLockTimeoutRef) => {
+  // eslint-disable-next-line no-param-reassign
+  stateScrollingLockRef.current = true;
+  if (openSetStateLockTimeoutRef.current) {
+    clearTimeout(openSetStateLockTimeoutRef.current);
+  }
+  // eslint-disable-next-line no-param-reassign
+  openSetStateLockTimeoutRef.current = setTimeout(() => {
+    // eslint-disable-next-line no-param-reassign
+    stateScrollingLockRef.current = false;
+  }, RELEASE_LOCK_DELAY);
+};
+
+/**
+ * Only sets the tabIndex of focusable elements as 0 if the card is visible, otherwise sets it to -1, including all its children.
+ * For example, if there is a button inside a card which is not shown, it cannot be focused as well.
+ * @param el - Card container element, typically a div used to wrap the card content.
+ * @param index - Current container index
+ */
+
+export const setA11yTabIndex = (el, index, visibilityList) => {
+  if (!el) return;
+  const focusableElements = el.querySelectorAll('a, button, input, textarea, select, [tabindex]:not([tabindex="-1"])');
+  focusableElements.forEach(element => {
+    const targetElement = element;
+    targetElement.tabIndex = visibilityList[index] === 1 ? 0 : -1;
+  });
+};
+export const useUpdateCurrentIndexByVisibility = (isMobile, visibilityList, setCurrentIndex, stateScrollingLockRef, openSetStateLockTimeoutRef) => {
+  useEffect(() => {
+    if (isMobile) return; // No pagination on mobile, so no need to update the current index
+    if (!visibilityList || visibilityList.length === 0) return;
+    const firstVisibleIndex = visibilityList.findIndex(visibility => visibility === 1);
+    if (firstVisibleIndex !== -1) {
+      setCurrentIndex(firstVisibleIndex);
+      lockScroll(stateScrollingLockRef, openSetStateLockTimeoutRef); // prevent scrollIntoView from being called immediately after the current index is set
+    }
+  }, [visibilityList]);
+};
+export const useScrollToCard = (currentIndex, container, cardRefs, stateScrollingLockRef) => {
+  useEffect(() => {
+    const isVisible = container && container.getBoundingClientRect().bottom > 0 && container.getBoundingClientRect().bottom <= window.innerHeight;
+    if (!isVisible) return; // Escape from scrollIntoView if the container is not visible, otherwise the webpage will scroll down to the last rendered & non-visible container
+
+    if (stateScrollingLockRef.current && stateScrollingLockRef.current === true) return;
+    const targetCard = cardRefs.current[currentIndex];
+    if (targetCard) {
+      targetCard.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'start'
+      });
+    }
+  }, [currentIndex]);
+};
+export const useIntersectionObserver = ({
+  root,
+  threshold
+}, setVisibilityList) => {
+  const callbackRef = useRef(setVisibilityList);
+  useEffect(() => {
+    callbackRef.current = setVisibilityList;
+  });
+  const observeAll = useMemo(() => {
+    if (!root) return () => {};
+    const observer = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        const {
+          index
+        } = entry.target.dataset;
+        if (!index) return;
+        const currentIndex = parseInt(index, 10);
+        if (entry.isIntersecting) {
+          setVisibilityList(prevList => {
+            const newList = [...prevList];
+            newList[currentIndex] = 1;
+            return newList;
+          });
+        } else {
+          setVisibilityList(prevList => {
+            const newList = [...prevList];
+            newList[currentIndex] = 0;
+            return newList;
+          });
+        }
+      });
+    }, {
+      root,
+      threshold
+    });
+    const observeElement = (element, index) => {
+      if (element && observer) {
+        element.setAttribute('data-index', index.toString());
+        observer.observe(element);
+      }
+    };
+    return observeElement;
+  }, [root, threshold]);
+  return observeAll;
+};

package/bpk-component-card-list/src/BpkExpand/ExpandAccessoryContent.d.ts

@@ -1,3 +1,3 @@
 import type { ExpandProps } from '../common-types';
-declare const ExpandAccessoryContent: ({ children, collapsed, onExpandTogle, }: ExpandProps) => import("react/jsx-runtime").JSX.Element;
+declare const ExpandAccessoryContent: ({ children, collapsed, onExpandToggle, }: ExpandProps) => import("react/jsx-runtime").JSX.Element;
 export default ExpandAccessoryContent;

package/bpk-component-card-list/src/BpkExpand/ExpandAccessoryContent.js

@@ -26,11 +26,11 @@ const AlignedChevronUpIcon = withButtonAlignment(withRtlSupport(ChevronUp));
 const ExpandAccessoryContent = ({
   children,
   collapsed,
-  onExpandTogle
+  onExpandToggle
 }) => /*#__PURE__*/_jsxs(BpkButtonV2, {
   "data-testid": "bpk-card-list__accessory-expand-button",
   type: BUTTON_TYPES.link,
-  onClick: () => onExpandTogle(),
+  onClick: onExpandToggle,
   "aria-expanded": !collapsed,
   children: [children, collapsed ? /*#__PURE__*/_jsx(AlignedChevronDownIcon, {}) : /*#__PURE__*/_jsx(AlignedChevronUpIcon, {})]
 });

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

@@ -1,4 +1,4 @@
-import type { ReactElement } from 'react';
+import type { ReactElement, Dispatch, SetStateAction } from 'react';
 declare const LAYOUTS: {
     readonly grid: "grid";
     readonly stack: "stack";
@@ -19,7 +19,14 @@ declare const ACCESSORY_MOBILE_TYPES: {
 type ExpandProps = {
     children: string | ReactElement;
     collapsed: boolean;
-    onExpandTogle: () => void;
+    onExpandToggle: () => void;
+};
+type AccessibilityLabels = {
+    indicatorLabel?: string;
+    prevNavLabel?: string;
+    nextNavLabel?: string;
+    carouselLabel?: (initiallyShownCards: number, childrenLength: number) => string;
+    slideLabel?: (index: number, childrenLength: number) => string;
 };
 type CardListBaseProps = {
     title: string;
@@ -29,13 +36,15 @@ type CardListBaseProps = {
     layoutDesktop: LayoutDesktop;
     accessoryDesktop?: (typeof ACCESSORY_DESKTOP_TYPES)[keyof typeof ACCESSORY_DESKTOP_TYPES];
     accessoryMobile?: (typeof ACCESSORY_MOBILE_TYPES)[keyof typeof ACCESSORY_MOBILE_TYPES];
-    initiallyShownCards?: number;
+    initiallyShownCardsDesktop?: number;
+    initiallyShownCardsMobile?: number;
     chipGroup?: ReactElement;
     buttonContent?: React.ReactNode;
     onButtonClick?: () => void;
     onExpandClick?: () => void;
     buttonHref?: string;
     expandText?: string;
+    accessibilityLabels?: AccessibilityLabels;
 };
 type CardListGridStackProps = {
     children: ReactElement[];
@@ -48,7 +57,25 @@ type CardListGridStackProps = {
     onExpandClick?: () => void;
     buttonHref?: string;
 };
+type CardListRowRailProps = {
+    children: Array<ReactElement<HTMLDivElement | HTMLAnchorElement>>;
+    initiallyShownCards: number;
+    layout: typeof LAYOUTS.row | typeof LAYOUTS.rail;
+    accessory?: typeof ACCESSORY_DESKTOP_TYPES.pagination;
+    isMobile?: boolean;
+    accessibilityLabels?: AccessibilityLabels;
+};
+type CardListCarouselProps = {
+    children: Array<ReactElement<HTMLDivElement | HTMLAnchorElement>>;
+    initiallyShownCards: number;
+    layout: typeof LAYOUTS.row | typeof LAYOUTS.rail;
+    currentIndex: number;
+    setCurrentIndex: Dispatch<SetStateAction<number>>;
+    isMobile?: boolean;
+    carouselLabel?: (initiallyShownCards: number, childrenLength: number) => string;
+    slideLabel?: (index: number, childrenLength: number) => string;
+};
 type CardListProps = CardListBaseProps;
 export default CardListProps;
 export { LAYOUTS, ACCESSORY_DESKTOP_TYPES, ACCESSORY_MOBILE_TYPES };
-export type { LayoutDesktop, LayoutMobile, CardListGridStackProps, ExpandProps, };
+export type { LayoutDesktop, LayoutMobile, CardListGridStackProps, CardListRowRailProps, CardListCarouselProps, ExpandProps, };

package/bpk-component-card-list/src/common-types.js

@@ -31,20 +31,4 @@ const ACCESSORY_MOBILE_TYPES = {
   expand: 'expand',
   button: 'button'
 };
-
-// type CardListRowRailProps = {
-//   children: Array<ReactElement<HTMLDivElement | HTMLAnchorElement>>;
-//   initiallyShownCards: number;
-//   layout: typeof LAYOUTS.row | typeof LAYOUTS.rail;
-//   accessory?: typeof ACCESSORY_DESKTOP_TYPES.Pagination;
-// };
-
-// type CardListCarouselProps = {
-//   children: Array<ReactElement<HTMLDivElement | HTMLAnchorElement>>;
-//   initiallyShownCards: number;
-//   layout: typeof LAYOUTS.row | typeof LAYOUTS.rail;
-//   currentIndex: number;
-//   setCurrentIndex: Dispatch<SetStateAction<number>>;
-// }
-
 export { LAYOUTS, ACCESSORY_DESKTOP_TYPES, ACCESSORY_MOBILE_TYPES };

package/bpk-component-icon/lg/flame.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const FlameIcon = props => /*#__PURE__*/_jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  "aria-hidden": "true",
+  width: "1.5rem",
+  height: "1.5rem",
+  ...props,
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M13.473 6.517C11.313 4.604 12.485.5 12.485.5S6.315 4.357 7.44 12.827c-1.897-.756-1.897-3.07-1.126-4.613C4.771 9.757 4 12.41 4 14.478c0 4.427 3.487 8.022 7.791 8.022s7.776-3.595 7.776-8.022c0-4.428-3.456-5.616-6.094-7.946zm-1.682 13.5c-1.543 0-2.947-.695-3.919-1.76 0 0 3.75-.123 4.845-4.582.586.448.956 1.805.57 2.978.942.092 3.024-2.67 1.374-6.68 1.234.756 2.607 2.252 2.607 4.535 0 3.055-2.515 5.508-5.477 5.508"
+  })
+});
+export default FlameIcon;

package/bpk-component-icon/lg/incompatible.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const IncompatibleIcon = props => /*#__PURE__*/_jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  "aria-hidden": "true",
+  width: "1.5rem",
+  height: "1.5rem",
+  ...props,
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M21.364 10.293a1 1 0 1 1 1.414 1.414l-6.364 6.363h4.657a1 1 0 0 1 0 2h-7.07a1 1 0 0 1-1-1V12a1 1 0 1 1 2 0v4.656zM10.071 4a1 1 0 0 1 1 1v7.07a1 1 0 0 1-2 0V7.414l-6.364 6.363a1 1 0 1 1-1.414-1.414L7.657 6H3a1 1 0 0 1 0-2z"
+  })
+});
+export default IncompatibleIcon;

package/bpk-component-icon/sm/flame.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const FlameIcon = props => /*#__PURE__*/_jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  "aria-hidden": "true",
+  width: "1rem",
+  height: "1rem",
+  ...props,
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M13.71 6.6c-2.1-1.86-.96-5.85-.96-5.85s-6 3.75-4.905 11.985C6 12 6 9.75 6.75 8.25c-1.5 1.5-2.25 4.08-2.25 6.09 0 4.305 3.39 7.8 7.575 7.8s7.56-3.495 7.56-7.8-3.36-5.46-5.925-7.725zm-1.635 13.125c-1.5 0-2.865-.675-3.81-1.71 0 0 3.645-.12 4.71-4.455.57.435.93 1.755.555 2.895.915.09 2.94-2.595 1.335-6.495 1.2.735 2.535 2.19 2.535 4.41 0 2.97-2.445 5.355-5.325 5.355"
+  })
+});
+export default FlameIcon;

package/bpk-component-icon/sm/incompatible.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const IncompatibleIcon = props => /*#__PURE__*/_jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  "aria-hidden": "true",
+  width: "1rem",
+  height: "1rem",
+  ...props,
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M21.364 10.292a1.001 1.001 0 0 1 1.415 1.415l-6.365 6.363h4.657a1 1 0 0 1 0 2.001H14a1 1 0 0 1-1.001-1V12a1 1 0 0 1 2 0v4.657zM10.071 3.999a1 1 0 0 1 1 1v7.071a1.001 1.001 0 0 1-2 0V7.414l-6.363 6.364a1.001 1.001 0 0 1-1.415-1.415L7.657 6H3.001a1 1 0 0 1 0-2.001z"
+  })
+});
+export default IncompatibleIcon;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "37.8.0",
+  "version": "37.9.1",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -28,7 +28,7 @@
     "@radix-ui/react-slider": "1.1.2",
     "@react-google-maps/api": "^2.19.3",
     "@skyscanner/bpk-foundations-web": "^19.5.0",
-    "@skyscanner/bpk-svgs": "^20.5.0",
+    "@skyscanner/bpk-svgs": "^20.6.0",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
     "d3-path": "^2.0.0",