@skyscanner/backpack-web 34.6.0 → 34.7.1

package/bpk-component-aria-live/src/BpkAriaLive.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-aria-live--invisible{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}
+.bpk-aria-live--invisible{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}

package/bpk-component-barchart/src/BpkChartDataTable.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-chart-data-table{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.bpk-chart-data-table thead,.bpk-chart-data-table tbody{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}
+.bpk-chart-data-table{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}.bpk-chart-data-table thead,.bpk-chart-data-table tbody{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}

package/bpk-component-calendar/src/BpkCalendarGrid.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-calendar-grid{border-collapse:separate;border-spacing:0}.bpk-calendar-grid--animating{z-index:1;transition:transform .2s ease-in-out}.bpk-calendar-grid__caption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}
+.bpk-calendar-grid{border-collapse:separate;border-spacing:0}.bpk-calendar-grid--animating{z-index:1;transition:transform .2s ease-in-out}.bpk-calendar-grid__caption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}

package/bpk-component-calendar/src/BpkCalendarNav.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-calendar-nav{display:table}.bpk-calendar-nav__month{display:table-cell;text-align:center}.bpk-calendar-nav__nudger{display:table-cell;padding:0 .5rem;text-align:center;vertical-align:middle;box-sizing:border-box}.bpk-calendar-nav__button{width:100%;height:2.25rem;padding:.375rem 0;border:none;background:none;cursor:pointer;appearance:none;color:#161616;color:var(--bpk-calendar-nudger-icon-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-calendar-nav__button:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-calendar-nudger-icon-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-calendar-nav__button:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-calendar-nudger-icon-hover-color, rgb(22, 22, 22))}.bpk-calendar-nav__button:active{color:#161616;color:var(--bpk-calendar-nudger-icon-active-color, rgb(22, 22, 22))}html[dir=rtl] .bpk-calendar-nav__button .bpk-calendar-nav__icon{transform:scaleX(-1)}.bpk-calendar-nav__button:disabled{cursor:not-allowed}.bpk-calendar-nav__text--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}
+.bpk-calendar-nav{display:table}.bpk-calendar-nav__month{display:table-cell;text-align:center}.bpk-calendar-nav__nudger{display:table-cell;padding:0 .5rem;text-align:center;vertical-align:middle;box-sizing:border-box}.bpk-calendar-nav__button{width:100%;height:2.25rem;padding:.375rem 0;border:none;background:none;cursor:pointer;appearance:none;color:#161616;color:var(--bpk-calendar-nudger-icon-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-calendar-nav__button:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-calendar-nudger-icon-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-calendar-nav__button:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-calendar-nudger-icon-hover-color, rgb(22, 22, 22))}.bpk-calendar-nav__button:active{color:#161616;color:var(--bpk-calendar-nudger-icon-active-color, rgb(22, 22, 22))}html[dir=rtl] .bpk-calendar-nav__button .bpk-calendar-nav__icon{transform:scaleX(-1)}.bpk-calendar-nav__button:disabled{cursor:not-allowed}.bpk-calendar-nav__text--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}

package/bpk-component-carousel/index.d.ts

@@ -0,0 +1,2 @@
+import BpkCarousel from "./src/BpkCarousel";
+export default BpkCarousel;

package/bpk-component-carousel/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 BpkCarousel from "./src/BpkCarousel";
+export default BpkCarousel;

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

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

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

@@ -0,0 +1,62 @@
+/*
+ * 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 { useRef, useState } from 'react';
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import BpkPageIndicator, { VARIANT } from "../../bpk-component-page-indicator";
+import { cssModules } from "../../bpk-react-utils";
+import BpkCarouselContainer from "./BpkCarouselContainer";
+import { 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 = ({
+  bottom,
+  images,
+  initialImageIndex = 0,
+  onImageChanged = null
+}) => {
+  const [shownImageIndex, updateShownImageIndex] = useState(initialImageIndex);
+  const imagesRef = useRef([]);
+  useScrollToInitialImage(initialImageIndex, imagesRef);
+  return /*#__PURE__*/_jsxs("div", {
+    className: getClassName('bpk-carousel'),
+    children: [/*#__PURE__*/_jsx(BpkCarouselContainer, {
+      images: images,
+      onVisible: updateShownImageIndex,
+      imagesRef: imagesRef,
+      onImageChanged: onImageChanged
+    }), /*#__PURE__*/_jsx("div", {
+      className: getClassName('bpk-carousel__page-indicator-over-image'),
+      style: bottom ? {
+        bottom
+      } : undefined,
+      "data-testid": "carousel-page-indicator-container",
+      children: /*#__PURE__*/_jsx(BpkPageIndicator, {
+        currentIndex: shownImageIndex,
+        totalIndicators: images.length,
+        variant: VARIANT.overImage,
+        indicatorLabel: "Go to slide",
+        prevNavLabel: "Previous slide",
+        nextNavLabel: "Next slide"
+      })
+    })]
+  });
+};
+export default BpkCarousel;

package/bpk-component-carousel/src/BpkCarousel.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-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}

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

@@ -0,0 +1,10 @@
+import type { MutableRefObject, ReactNode } from 'react';
+import type { OnImageChangedHandler } from './types';
+type Props = {
+    images: ReactNode[];
+    onVisible: (visibleIndex: number) => void;
+    imagesRef: MutableRefObject<Array<HTMLElement | null>>;
+    onImageChanged: OnImageChangedHandler;
+};
+declare const BpkScrollContainer: import("react").MemoExoticComponent<({ images, imagesRef, onImageChanged, onVisible }: Props) => JSX.Element>;
+export default BpkScrollContainer;

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

@@ -0,0 +1,92 @@
+/*
+ * 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 { memo, useState } from 'react';
+import { cssModules } from "../../bpk-react-utils";
+import BpkCarouselImage from "./BpkCarouselImage";
+import { useIntersectionObserver } from "./utils";
+import STYLES from "./BpkCarouselContainer.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkScrollContainer = /*#__PURE__*/memo(({
+  images,
+  imagesRef,
+  onImageChanged,
+  onVisible
+}) => {
+  const [root, setRoot] = useState(null);
+  const observeImageChange = useIntersectionObserver(onVisible, {
+    root,
+    threshold: 0.5
+  }, onImageChanged);
+  const observeCycleScroll = useIntersectionObserver(index => {
+    const imageElement = imagesRef.current && imagesRef.current[index];
+    if (imageElement) {
+      imageElement.scrollIntoView({
+        block: 'nearest',
+        inline: 'start'
+      });
+    }
+  }, {
+    root,
+    threshold: 1
+  });
+  if (images.length === 1) {
+    return /*#__PURE__*/_jsx("div", {
+      className: getClassName('bpk-carousel-container'),
+      role: "list",
+      "data-testid": "image-gallery-scroll-container",
+      children: /*#__PURE__*/_jsx(BpkCarouselImage, {
+        image: images[0],
+        index: 0
+      })
+    });
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    className: getClassName('bpk-carousel-container'),
+    ref: setRoot,
+    "data-testid": "image-gallery-scroll-container",
+    role: "list",
+    children: [/*#__PURE__*/_jsx(BpkCarouselImage, {
+      image: images[images.length - 1],
+      index: images.length - 1,
+      ref: el => {
+        observeCycleScroll(el);
+        observeImageChange(el);
+      }
+    }), images.map((image, index) => /*#__PURE__*/_jsx(BpkCarouselImage
+    // eslint-disable-next-line react/no-array-index-key
+    , {
+      image: image,
+      index: index,
+      ref: el => {
+        // eslint-disable-next-line no-param-reassign
+        imagesRef.current[index] = el;
+        observeImageChange(el);
+      }
+    }, index)), /*#__PURE__*/_jsx(BpkCarouselImage, {
+      image: images[0],
+      index: 0,
+      ref: el => {
+        observeCycleScroll(el);
+        observeImageChange(el);
+      }
+    })]
+  });
+});
+export default BpkScrollContainer;

package/bpk-component-carousel/src/BpkCarouselContainer.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-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}

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

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+type ImageProps = {
+    image: ReactNode;
+    index: number;
+};
+declare const BpkCarouselImage: import("react").ForwardRefExoticComponent<ImageProps & import("react").RefAttributes<HTMLDivElement>>;
+export default BpkCarouselImage;

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

@@ -0,0 +1,34 @@
+/*
+ * 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 { forwardRef } from "react";
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkCarouselImage.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkCarouselImage = /*#__PURE__*/forwardRef(({
+  image,
+  index
+}, ref) => /*#__PURE__*/_jsx("div", {
+  className: getClassName('bpk-carousel-image'),
+  "data-index": index,
+  ref: ref,
+  role: "listitem",
+  children: image
+}, index));
+export default BpkCarouselImage;

package/bpk-component-carousel/src/BpkCarouselImage.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-carousel-image{display:inline-flex;width:100%;min-width:0;height:100%;min-height:0;justify-content:center;scroll-snap-align:start;scroll-snap-stop:always;isolation:isolate}.bpk-carousel-image img{max-width:100%;max-height:100%;object-fit:initial}

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

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+export type OnImageChangedHandler = ((shownImageIndex: number) => void) | null | undefined;
+export type Props = {
+    images: ReactNode[];
+    initialImageIndex?: number;
+    onImageChanged?: OnImageChangedHandler;
+    /**
+     * 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;
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,4 @@
+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 useIntersectionObserver(onIntersecting: (index: number) => void, { root, threshold }: IntersectionObserverInit, onImageChanged?: OnImageChangedHandler): (element: HTMLElement | null) => void;

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

@@ -0,0 +1,68 @@
+/*
+ * 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, useMemo, useRef } from 'react';
+export function useScrollToInitialImage(initialImageIndex, imagesRef) {
+  useEffect(() => {
+    const element = imagesRef.current[initialImageIndex];
+    if (element) {
+      element.scrollIntoView({
+        block: 'nearest',
+        inline: 'start'
+      });
+    }
+  }, [initialImageIndex, imagesRef]);
+}
+export function useIntersectionObserver(onIntersecting, {
+  root,
+  threshold
+}, onImageChanged) {
+  const callbackRef = useRef(onIntersecting);
+  useEffect(() => {
+    callbackRef.current = onIntersecting;
+  });
+  const observe = useMemo(() => {
+    if (!root) return () => {};
+    const observer = new IntersectionObserver(entries => {
+      const shownEntry = entries.find(entry => entry.isIntersecting);
+      if (!shownEntry) {
+        return;
+      }
+      const {
+        index
+      } = shownEntry.target.dataset;
+      if (index) {
+        const currentIndex = parseInt(index, 10);
+        callbackRef.current(currentIndex);
+        if (onImageChanged) {
+          onImageChanged(currentIndex);
+        }
+      }
+    }, {
+      root,
+      threshold
+    });
+    const observeElement = element => {
+      if (element && observer) {
+        observer.observe(element);
+      }
+    };
+    return observeElement;
+  }, [onImageChanged, root, threshold]);
+  return observe;
+}

package/bpk-component-drawer/src/BpkDrawerContent.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-drawer{position:fixed;right:0;display:flex;z-index:1100;width:90%;max-width:25rem;height:100%;flex-direction:column;transform:translate(100%);transition:transform 200ms ease;outline:0;background:#fff;overflow-y:scroll;box-shadow:0px 12px 50px 0px rgba(37,32,31,.25)}html[dir=rtl] .bpk-drawer{right:auto;left:0;transform:translate(-100%)}@media(max-width: 32rem){.bpk-drawer{width:100%;max-width:100%}}.bpk-drawer--entering,.bpk-drawer--entered{transform:translate(0)}html[dir=rtl] .bpk-drawer--entering,html[dir=rtl] .bpk-drawer--entered{transform:translate(0)}.bpk-drawer--exiting{transition:transform 50ms ease}.bpk-drawer--exiting,.bpk-drawer--exited{transform:translate(100%)}html[dir=rtl] .bpk-drawer--exiting,html[dir=rtl] .bpk-drawer--exited{transform:translate(-100%)}.bpk-drawer__header{display:flex;min-height:3rem;padding:1rem;justify-content:space-between;align-items:center;flex:0 0;box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-drawer__heading{margin:0;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-drawer__heading--visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.bpk-drawer__close-button{float:right}html[dir=rtl] .bpk-drawer__close-button{float:left}.bpk-drawer__content{height:100%;padding:1rem;flex:1 1 100%;overflow-y:auto}
+.bpk-drawer{position:fixed;right:0;display:flex;z-index:1100;width:90%;max-width:25rem;height:100%;flex-direction:column;transform:translate(100%);transition:transform 200ms ease;outline:0;background:#fff;overflow-y:scroll;box-shadow:0px 12px 50px 0px rgba(37,32,31,.25)}html[dir=rtl] .bpk-drawer{right:auto;left:0;transform:translate(-100%)}@media(max-width: 32rem){.bpk-drawer{width:100%;max-width:100%}}.bpk-drawer--entering,.bpk-drawer--entered{transform:translate(0)}html[dir=rtl] .bpk-drawer--entering,html[dir=rtl] .bpk-drawer--entered{transform:translate(0)}.bpk-drawer--exiting{transition:transform 50ms ease}.bpk-drawer--exiting,.bpk-drawer--exited{transform:translate(100%)}html[dir=rtl] .bpk-drawer--exiting,html[dir=rtl] .bpk-drawer--exited{transform:translate(-100%)}.bpk-drawer__header{display:flex;min-height:3rem;padding:1rem;justify-content:space-between;align-items:center;flex:0 0;box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-drawer__heading{margin:0;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-drawer__heading--visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}.bpk-drawer__close-button{float:right}html[dir=rtl] .bpk-drawer__close-button{float:left}.bpk-drawer__content{height:100%;padding:1rem;flex:1 1 100%;overflow-y:auto}

package/bpk-component-icon/src/withDescription.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-icon-description{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}
+.bpk-icon-description{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}

package/bpk-component-page-indicator/src/BpkPageIndicator.js

@@ -36,50 +36,64 @@ const BpkPageIndicator = ({
   showNav,
   totalIndicators,
   variant
-}) =>
-/*#__PURE__*/
-// $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-_jsx("div", {
-  className: className,
-  children: /*#__PURE__*/_jsxs("div", {
-    className: getClassName('bpk-page-indicator', showNav && 'bpk-page-indicator__showNav'),
-    children: [showNav && /*#__PURE__*/_jsx(NavButton, {
-      currentIndex: currentIndex,
-      onClick: onClick,
-      disabled: currentIndex === 0,
-      direction: DIRECTIONS.PREV,
-      ariaLabel: prevNavLabel
-    }), /*#__PURE__*/_jsx("div", {
-      className: getClassName('bpk-page-indicator__container'),
-      children: /*#__PURE__*/_jsx("div", {
-        className: getClassName('bpk-page-indicator__indicators-container'),
-        style: currentIndex > START_SCROLL_INDEX ? {
-          '--scroll-index': totalIndicators > DISPLAYED_TOTAL ? Math.min(currentIndex - START_SCROLL_INDEX, totalIndicators - DISPLAYED_TOTAL) : 0
-        } : undefined,
-        children: [...Array(totalIndicators)].map((val, index) => /*#__PURE__*/_jsx("button", {
-          type: "button",
-          onClick: e => {
-            onClick(e, index, DIRECTIONS.INDICATORS);
-          },
-          className: getClassName('bpk-page-indicator__indicator', `bpk-page-indicator__indicator--${variant}`, index === currentIndex && `bpk-page-indicator__indicator--active-${variant}`),
-          "aria-label": `${indicatorLabel} ${index + 1}`,
-          "aria-current": currentIndex === index ? 'true' : 'false'
-          // eslint-disable-next-line react/no-array-index-key
-        }, `indicator-${index}`))
+}) => {
+  /**
+   * This validation is used to avoid an a11y issue when onClick isn't available.
+   * In this case, we can set aria-hidden = true to let screen reader skip reading page indicator dots.
+   * and render the dot as div rather than button to align with aria-hidden = true.
+  */
+  const isInteractive = !!onClick;
+  return (
+    /*#__PURE__*/
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+    _jsx("div", {
+      className: className,
+      "aria-hidden": isInteractive ? 'false' : 'true',
+      "data-testid": "indicator-container",
+      children: /*#__PURE__*/_jsxs("div", {
+        className: getClassName('bpk-page-indicator', showNav && 'bpk-page-indicator__showNav'),
+        children: [showNav && /*#__PURE__*/_jsx(NavButton, {
+          currentIndex: currentIndex,
+          onClick: onClick,
+          disabled: currentIndex === 0,
+          direction: DIRECTIONS.PREV,
+          ariaLabel: prevNavLabel
+        }), /*#__PURE__*/_jsx("div", {
+          className: getClassName('bpk-page-indicator__container'),
+          children: /*#__PURE__*/_jsx("div", {
+            className: getClassName('bpk-page-indicator__indicators-container'),
+            style: currentIndex > START_SCROLL_INDEX ? {
+              '--scroll-index': totalIndicators > DISPLAYED_TOTAL ? Math.min(currentIndex - START_SCROLL_INDEX, totalIndicators - DISPLAYED_TOTAL) : 0
+            } : undefined,
+            children: [...Array(totalIndicators)].map((val, index) => isInteractive ? /*#__PURE__*/_jsx("button", {
+              type: "button",
+              onClick: e => {
+                onClick(e, index, DIRECTIONS.INDICATORS);
+              },
+              className: getClassName('bpk-page-indicator__indicator', `bpk-page-indicator__indicator--${variant}`, index === currentIndex && `bpk-page-indicator__indicator--active-${variant}`),
+              "aria-label": `${indicatorLabel} ${index + 1}`,
+              "aria-current": currentIndex === index ? 'true' : 'false'
+              // eslint-disable-next-line react/no-array-index-key
+            }, `indicator-${index}`) : /*#__PURE__*/_jsx("div", {
+              className: getClassName('bpk-page-indicator__indicator', `bpk-page-indicator__indicator--${variant}`, index === currentIndex && `bpk-page-indicator__indicator--active-${variant}`)
+              // eslint-disable-next-line react/no-array-index-key
+            }, `indicator-${index}`))
+          })
+        }), showNav && /*#__PURE__*/_jsx(NavButton, {
+          currentIndex: currentIndex,
+          onClick: onClick,
+          disabled: currentIndex === totalIndicators - 1,
+          ariaLabel: nextNavLabel,
+          direction: DIRECTIONS.NEXT
+        })]
       })
-    }), showNav && /*#__PURE__*/_jsx(NavButton, {
-      currentIndex: currentIndex,
-      onClick: onClick,
-      disabled: currentIndex === totalIndicators - 1,
-      ariaLabel: nextNavLabel,
-      direction: DIRECTIONS.NEXT
-    })]
-  })
-});
+    })
+  );
+};
 BpkPageIndicator.propTypes = {
-  indicatorLabel: PropTypes.string.isRequired,
-  prevNavLabel: PropTypes.string.isRequired,
-  nextNavLabel: PropTypes.string.isRequired,
+  indicatorLabel: PropTypes.string,
+  prevNavLabel: PropTypes.string,
+  nextNavLabel: PropTypes.string,
   currentIndex: PropTypes.number.isRequired,
   totalIndicators: PropTypes.number.isRequired,
   variant: PropTypes.oneOf(Object.keys(VARIANT)),

package/bpk-component-pagination/src/BpkPaginationNudger.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-pagination-nudger{display:flex;width:2.25rem;height:2.25rem;justify-content:center;align-content:center}.bpk-pagination-nudger__text--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}
+.bpk-pagination-nudger{display:flex;width:2.25rem;height:2.25rem;justify-content:center;align-content:center}.bpk-pagination-nudger__text--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}

package/bpk-component-popover/src/BpkPopover.js

@@ -17,7 +17,7 @@
  */
 
 import { useState, useEffect, useRef, cloneElement, isValidElement } from 'react';
-import { useFloating, autoUpdate, offset, useClick, useDismiss, useInteractions, FloatingFocusManager, arrow, FloatingArrow, flip, shift } from '@floating-ui/react';
+import { useFloating, autoUpdate, offset, useClick, useDismiss, useInteractions, FloatingFocusManager, arrow, FloatingArrow, shift } from '@floating-ui/react';
 import { surfaceHighlightDay } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
@@ -80,9 +80,7 @@ const BpkPopover = ({
     open: isOpenState,
     onOpenChange: setIsOpenState,
     placement,
-    middleware: [showArrow && offset(17), flip({
-      crossAxis: true
-    }), shift(), showArrow && arrow({
+    middleware: [showArrow && offset(17), shift(), showArrow && arrow({
       element: arrowRef
     })],
     whileElementsMounted: autoUpdate
@@ -95,13 +93,22 @@ const BpkPopover = ({
     getFloatingProps,
     getReferenceProps
   } = useInteractions([click, dismiss]);
+  const targetClick = target.props.onClick;
+  const referenceProps = getReferenceProps({
+    onClick: event => {
+      if (targetClick) {
+        event.stopPropagation();
+        targetClick(event);
+      }
+    }
+  });
   const targetElement = /*#__PURE__*/isValidElement(target) ? ( /*#__PURE__*/cloneElement(target, {
-    ...getReferenceProps(),
+    ...referenceProps,
     // @ts-ignore - we're adding a popover ref to the target element so we can position the popover relative to it
     ref: refs.setReference
   })) : /*#__PURE__*/_jsx("div", {
     ref: refs.setReference,
-    ...getReferenceProps(),
+    ...referenceProps,
     children: target
   });
   const classNames = getClassName('bpk-popover', className);

package/bpk-component-popover/src/BpkPopover.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-popover--container{z-index:900}.bpk-popover{transition:opacity 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}@media(min-width: 32.0625rem){.bpk-popover{max-width:32rem;transition:opacity 50ms ease-in-out}}.bpk-popover--appear{opacity:0}.bpk-popover--appear-active{opacity:1}.bpk-popover__arrow{width:1.5rem;height:1.5rem;fill:#fff}.bpk-popover__arrow[data-hide]{visibility:hidden}.bpk-popover__body--padded{padding:1rem}.bpk-popover__body--padded:not(:last-of-type){padding-bottom:0}.bpk-popover__header{display:flex;padding:1rem 1rem 0;justify-content:space-between}.bpk-popover__header~.bpk-popover__body--padded{padding-top:.5rem}.bpk-popover__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.bpk-popover__footer{padding:.5rem 1rem;text-align:right}html[dir=rtl] .bpk-popover__footer{text-align:left}.bpk-popover__action{padding:0 1rem 1rem 1rem}
+.bpk-popover--container{z-index:900}.bpk-popover{transition:opacity 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}@media(min-width: 32.0625rem){.bpk-popover{max-width:32rem;transition:opacity 50ms ease-in-out}}.bpk-popover--appear{opacity:0}.bpk-popover--appear-active{opacity:1}.bpk-popover__arrow{width:1.5rem;height:1.5rem;fill:#fff}.bpk-popover__arrow[data-hide]{visibility:hidden}.bpk-popover__body--padded{padding:1rem}.bpk-popover__body--padded:not(:last-of-type){padding-bottom:0}.bpk-popover__header{display:flex;padding:1rem 1rem 0;justify-content:space-between}.bpk-popover__header~.bpk-popover__body--padded{padding-top:.5rem}.bpk-popover__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}.bpk-popover__footer{padding:.5rem 1rem;text-align:right}html[dir=rtl] .bpk-popover__footer{text-align:left}.bpk-popover__action{padding:0 1rem 1rem 1rem}

package/bpk-component-theme-toggle/src/BpkThemeToggle.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-theme-toggle__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}
+.bpk-theme-toggle__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}

package/bpk-mixins/_utils.scss

@@ -63,6 +63,7 @@
   margin: -1px; /* stylelint-disable-line unit-disallowed-list */
   padding: 0;
   border: 0;
+  white-space: nowrap;
   overflow: hidden;
   clip: rect(0 0 0 0);
 }

package/bpk-stylesheets/base.css

@@ -16,4 +16,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  * 
- *//*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}html{font-size:100%;box-sizing:border-box}*{box-sizing:inherit}*::before,*::after{box-sizing:inherit}body{color:#161616;font-family:"Skyscanner Relative",-apple-system,BlinkMacSystemFont,"Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-size:1rem;line-height:1.3rem}body.scaffold-font-size{font-size:13px}body.enable-font-smoothing{-webkit-font-smoothing:antialiased}:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.hidden,.hide{display:none !important}.visuallyhidden,.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus,.visually-hidden.focusable:active,.visually-hidden.focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.invisible{visibility:hidden}.clearfix::before,.clearfix::after{content:"";display:table}.clearfix::after{clear:both}
+ *//*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}html{font-size:100%;box-sizing:border-box}*{box-sizing:inherit}*::before,*::after{box-sizing:inherit}body{color:#161616;font-family:"Skyscanner Relative",-apple-system,BlinkMacSystemFont,"Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-size:1rem;line-height:1.3rem}body.scaffold-font-size{font-size:13px}body.enable-font-smoothing{-webkit-font-smoothing:antialiased}:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.hidden,.hide{display:none !important}.visuallyhidden,.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus,.visually-hidden.focusable:active,.visually-hidden.focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.invisible{visibility:hidden}.clearfix::before,.clearfix::after{content:"";display:table}.clearfix::after{clear:both}

package/package.json

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

package/unstable__bpk-mixins/_utils.scss

@@ -64,6 +64,7 @@
   margin: -1px; /* stylelint-disable-line unit-disallowed-list */
   padding: 0;
   border: 0;
+  white-space: nowrap;
   overflow: hidden;
   clip: rect(0 0 0 0);
 }