@skyscanner/backpack-web 38.19.1 → 38.20.0

package/bpk-component-carousel/src/BpkCarousel.d.ts

@@ -1,3 +1,3 @@
 import type { Props } from './types';
-declare const BpkCarousel: ({ bottom, images, initialImageIndex, onImageChanged, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const BpkCarousel: ({ accessibilityLabels, bottom, images, initialImageIndex, onImageChanged, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkCarousel;

package/bpk-component-carousel/src/BpkCarousel.js

@@ -17,14 +17,16 @@
  */
 
 import { useRef, useState } from 'react';
+import { BREAKPOINTS, useMediaQuery } from "../../bpk-component-breakpoint";
 import BpkPageIndicator, { VARIANT } from "../../bpk-component-page-indicator";
 import { cssModules } from "../../bpk-react-utils";
 import BpkCarouselContainer from "./BpkCarouselContainer";
-import { useScrollToInitialImage } from "./utils";
+import { scrollToIndex, useScrollToInitialImage } from "./utils";
 import STYLES from "./BpkCarousel.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkCarousel = ({
+  accessibilityLabels = {},
   bottom,
   images,
   initialImageIndex = 0,
@@ -32,6 +34,13 @@ const BpkCarousel = ({
 }) => {
   const [shownImageIndex, updateShownImageIndex] = useState(initialImageIndex);
   const imagesRef = useRef([]);
+  const isDesktop = useMediaQuery(BREAKPOINTS.ABOVE_TABLET);
+  const handleIndicatorClick = (e, newIndex) => {
+    e.stopPropagation();
+    let target = newIndex;
+    if (newIndex === -1) target = images.length - 1;else if (newIndex === images.length) target = 0;
+    if (target !== shownImageIndex) scrollToIndex(target, imagesRef);
+  };
   useScrollToInitialImage(initialImageIndex, imagesRef);
   return /*#__PURE__*/_jsxs("div", {
     className: getClassName('bpk-carousel'),
@@ -49,10 +58,12 @@ const BpkCarousel = ({
       children: /*#__PURE__*/_jsx(BpkPageIndicator, {
         currentIndex: shownImageIndex,
         totalIndicators: images.length,
-        variant: VARIANT.overImage,
-        indicatorLabel: "Go to slide",
-        prevNavLabel: "Previous slide",
-        nextNavLabel: "Next slide"
+        variant: VARIANT.overImageSpaced,
+        indicatorLabel: accessibilityLabels.indicatorLabel ?? "Go to slide",
+        prevNavLabel: accessibilityLabels.prevNavLabel ?? "Previous slide",
+        nextNavLabel: accessibilityLabels.nextNavLabel ?? "Next slide",
+        showNav: isDesktop,
+        onClick: isDesktop ? handleIndicatorClick : () => {}
       })
     })]
   });

package/bpk-component-carousel/src/BpkCarousel.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-carousel{position:relative}.bpk-carousel__page-indicator-over-image{position:absolute;right:0;bottom:.25rem;left:0;display:flex;margin:auto 1rem;justify-content:center;overflow:clip}
+.bpk-carousel{position:relative;width:100%;height:100%}.bpk-carousel__page-indicator-over-image{position:absolute;right:0;bottom:.25rem;left:0;display:flex;margin:auto 1rem;justify-content:center;overflow:clip}

package/bpk-component-carousel/src/BpkCarouselContainer.js

@@ -35,16 +35,25 @@ const BpkScrollContainer = /*#__PURE__*/memo(({
     threshold: 0.5
   }, onImageChanged);
   const observeCycleScroll = useIntersectionObserver(index => {
+    const container = root;
     const imageElement = imagesRef.current && imagesRef.current[index];
-    if (imageElement) {
-      imageElement.scrollIntoView({
-        block: 'nearest',
-        inline: 'start'
-      });
+    if (container && imageElement) {
+      // Some browsers and test environments don't support smooth scrolling,
+      // so we must fall back to simply setting scrollLeft
+      if (container.scroll && typeof container.scroll === 'function') {
+        container.scroll({
+          left: imageElement.offsetLeft,
+          behavior: 'auto'
+        });
+      } else {
+        container.scrollLeft = imageElement.offsetLeft;
+      }
     }
-  }, {
+  },
+  // when threshold was 1, the loop behaviour (mobile) was not working as expected. This seems to fix it.
+  {
     root,
-    threshold: 1
+    threshold: 0.98
   });
   if (images.length === 1) {
     return /*#__PURE__*/_jsx("div", {

package/bpk-component-carousel/src/BpkCarouselContainer.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-carousel-container{display:grid;width:100%;height:100%;grid:1fr/auto-flow 100%;overflow-x:auto;overflow-y:hidden;backface-visibility:hidden;overscroll-behavior:contain;scroll-snap-type:x mandatory;scrollbar-width:none;user-select:none}.bpk-carousel-container::-webkit-scrollbar{display:none}
+.bpk-carousel-container{display:grid;width:100%;height:100%;grid:1fr/auto-flow 100%;overflow-x:auto;overflow-y:hidden;backface-visibility:hidden;overscroll-behavior:auto;scroll-snap-type:x mandatory;scrollbar-width:none;user-select:none}.bpk-carousel-container::-webkit-scrollbar{display:none}

package/bpk-component-carousel/src/types.d.ts

@@ -1,5 +1,10 @@
 import type { ReactNode } from "react";
 export type OnImageChangedHandler = ((shownImageIndex: number) => void) | null | undefined;
+export type AccessibilityLabels = {
+    indicatorLabel?: string;
+    prevNavLabel?: string;
+    nextNavLabel?: string;
+};
 export type Props = {
     images: ReactNode[];
     initialImageIndex?: number;
@@ -8,4 +13,5 @@ export type Props = {
      * This prop is used to let the consumer adjust the spacing between the page indicator and the bottom of the image when variant is VARIANT.overImage
     */
     bottom?: number;
+    accessibilityLabels?: AccessibilityLabels;
 };

package/bpk-component-carousel/src/utils.d.ts

@@ -1,4 +1,5 @@
 import type { MutableRefObject } from 'react';
 import type { OnImageChangedHandler } from './types';
 export declare function useScrollToInitialImage(initialImageIndex: number, imagesRef: MutableRefObject<Array<HTMLElement | null>>): void;
+export declare function scrollToIndex(index: number, imagesRef?: MutableRefObject<Array<HTMLElement | null>>): void;
 export declare function useIntersectionObserver(onIntersecting: (index: number) => void, { root, threshold }: IntersectionObserverInit, onImageChanged?: OnImageChangedHandler): (element: HTMLElement | null) => void;

package/bpk-component-carousel/src/utils.js

@@ -17,17 +17,52 @@
  */
 
 import { useEffect, useMemo, useRef } from 'react';
+// Scrolls to a specific image in the carousel by index.
+//
+// This function provides programmatic scrolling control for the carousel component.
+// It locates the target image element and scrolls its parent container to bring
+// the image into view.
+//
+// The scrolling behavior uses the native browser scroll API with the 'left' position
+// set to the target element's offsetLeft, ensuring the image aligns properly within
+// the visible viewport of the carousel container.
+function scrollImageToView(index, imagesRef, behavior = 'smooth') {
+  const element = imagesRef.current[index];
+  if (!element) return;
+  const parent = element.parentElement;
+  if (!parent) return;
+
+  // Some browsers and test environments don't support smooth scrolling,
+  // so we must fall back to simply setting scrollLeft
+  if (parent.scroll && typeof parent.scroll === 'function') {
+    parent.scroll({
+      left: element.offsetLeft,
+      behavior
+    });
+  } else {
+    parent.scrollLeft = element.offsetLeft;
+  }
+}
+
+// Hook that scrolls to the initial image when the carousel mounts.
+//
+// This ensures that when a carousel is rendered with a non-zero initialImageIndex,
+// it immediately displays that image without animation. Uses 'auto' behavior to
+// prevent unwanted animation on initial render.
 export function useScrollToInitialImage(initialImageIndex, imagesRef) {
   useEffect(() => {
-    const element = imagesRef.current[initialImageIndex];
-    if (element) {
-      element.scrollIntoView({
-        block: 'nearest',
-        inline: 'start'
-      });
-    }
+    scrollImageToView(initialImageIndex, imagesRef, 'auto');
   }, [initialImageIndex, imagesRef]);
 }
+
+// Scrolls to a specific image in the carousel with smooth animation.
+//
+// This function is typically used for user-initiated navigation (clicking indicators,
+// navigation buttons, etc.) where a smooth animated scroll provides better UX.
+export function scrollToIndex(index, imagesRef) {
+  if (!imagesRef) return;
+  scrollImageToView(index, imagesRef, 'smooth');
+}
 export function useIntersectionObserver(onIntersecting, {
   root,
   threshold

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "38.19.1",
+  "version": "38.20.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",