@skyscanner/backpack-web 38.16.0 → 38.18.0

package/bpk-component-banner-alert/src/AnimateAndFade.d.ts

@@ -22,8 +22,7 @@ declare class AnimateAndFade extends Component<Props, State> {
     };
     constructor(props: Props);
     componentDidMount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
-    componentDidUpdate(): void;
+    componentDidUpdate(prevProps: Props): void;
     onAnimateHeightComplete: () => void;
     onFadeComplete: () => void;
     toggle: () => void;

package/bpk-component-banner-alert/src/AnimateAndFade.js

@@ -49,13 +49,10 @@ class AnimateAndFade extends Component {
       this.toggle();
     }
   }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.show === this.props.show) {
-      return;
+  componentDidUpdate(prevProps) {
+    if (this.props.show !== prevProps.show) {
+      this.toggle();
     }
-    this.toggle();
-  }
-  componentDidUpdate() {
     if (this.state.initiateShow) {
       // React doesn't like us calling setState from componentDidUpdate as it can lead to an infinite re-renders.
       // I think it is ok here, however, as this will only happen conditionally (ie once)

package/bpk-component-bottom-sheet/src/BpkBottomSheet.d.ts

@@ -1,4 +1,4 @@
-import type { SyntheticEvent, ReactNode } from "react";
+import type { SyntheticEvent, ReactNode } from 'react';
 interface CommonProps {
     actionText?: string;
     children: ReactNode;
@@ -19,5 +19,5 @@ export type Props = CommonProps & ({
 } | {
     ariaLabel: string;
 });
-declare const BpkBottomSheet: ({ actionText, children, closeLabel, closeOnEscPressed, closeOnScrimClick, id, isOpen, onAction, onClose, title, wide, ...ariaProps }: Props) => import("react/jsx-runtime").JSX.Element;
-export default BpkBottomSheet;
+declare const BpkBottomSheetWithBreakpoint: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkBottomSheetWithBreakpoint;

package/bpk-component-bottom-sheet/src/BpkBottomSheet.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { useState } from "react";
+import { useCallback, useState } from 'react';
 import BpkBreakpoint, { BREAKPOINTS } from "../../bpk-component-breakpoint";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkCloseButton from "../../bpk-component-close-button";
@@ -35,6 +35,7 @@ const BpkBottomSheet = ({
   closeOnEscPressed = false,
   closeOnScrimClick = false,
   id,
+  isAboveMobile,
   isOpen,
   onAction = () => null,
   onClose,
@@ -44,58 +45,63 @@ const BpkBottomSheet = ({
 }) => {
   const [exiting, setExiting] = useState(false);
   const animationTimeout = 240;
-  const handleClose = (timeout, arg0, arg1) => {
+  const handleClose = useCallback((arg0, arg1) => {
+    const timeoutDuration = isAboveMobile ? 0 : animationTimeout;
     setExiting(true);
     setTimeout(() => {
       onClose(arg0, arg1);
       setExiting(false);
-    }, timeout);
-  };
+    }, timeoutDuration);
+  }, [isAboveMobile, onClose]);
   const headingId = `bpk-bottom-sheet-heading-${id}`;
   const dialogClassName = getClassName('bpk-bottom-sheet', wide && 'bpk-bottom-sheet--wide');
-  return /*#__PURE__*/_jsx(BpkBreakpoint, {
-    query: BREAKPOINTS.ABOVE_MOBILE,
-    children: isAboveMobile => /*#__PURE__*/_jsx(BpkDialogWrapper, {
-      ...ariaProps,
-      dialogClassName: dialogClassName,
-      id: id,
-      isOpen: isOpen,
-      onClose: (arg0, arg1) => handleClose(isAboveMobile ? 0 : animationTimeout, arg0, arg1),
-      exiting: exiting,
-      transitionClassNames: {
-        appear: getClassName('bpk-bottom-sheet--appear'),
-        appearActive: getClassName('bpk-bottom-sheet--appear-active'),
-        exit: getClassName('bpk-bottom-sheet--exit')
-      },
-      closeOnEscPressed: closeOnEscPressed,
-      closeOnScrimClick: closeOnScrimClick,
-      timeout: {
-        appear: animationTimeout,
-        exit: isAboveMobile ? 0 : animationTimeout
-      },
-      children: /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx("header", {
-          className: getClassName('bpk-bottom-sheet--header'),
-          children: /*#__PURE__*/_jsx(BpkNavigationBar, {
-            id: headingId,
-            title: title,
-            titleTextStyle: TEXT_STYLES.label1,
-            titleTagName: title ? "h2" : "span",
-            leadingButton: /*#__PURE__*/_jsx(BpkCloseButton, {
-              label: closeLabel,
-              onClick: (arg0, arg1) => handleClose(isAboveMobile ? 0 : animationTimeout, arg0, arg1)
-            }),
-            trailingButton: actionText && onAction ? /*#__PURE__*/_jsx(BpkButtonLink, {
-              onClick: onAction,
-              children: actionText
-            }) : null
-          })
-        }), /*#__PURE__*/_jsx("div", {
-          className: getClassName('bpk-bottom-sheet--content'),
-          children: children
-        })]
-      })
+  return /*#__PURE__*/_jsx(BpkDialogWrapper, {
+    ...ariaProps,
+    dialogClassName: dialogClassName,
+    id: id,
+    isOpen: isOpen,
+    onClose: handleClose,
+    exiting: exiting,
+    transitionClassNames: {
+      appear: getClassName('bpk-bottom-sheet--appear'),
+      appearActive: getClassName('bpk-bottom-sheet--appear-active'),
+      exit: getClassName('bpk-bottom-sheet--exit')
+    },
+    closeOnEscPressed: closeOnEscPressed,
+    closeOnScrimClick: closeOnScrimClick,
+    timeout: {
+      appear: animationTimeout,
+      exit: isAboveMobile ? 0 : animationTimeout
+    },
+    children: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("header", {
+        className: getClassName('bpk-bottom-sheet--header'),
+        children: /*#__PURE__*/_jsx(BpkNavigationBar, {
+          id: headingId,
+          title: title,
+          titleTextStyle: TEXT_STYLES.label1,
+          titleTagName: title ? 'h2' : 'span',
+          leadingButton: /*#__PURE__*/_jsx(BpkCloseButton, {
+            label: closeLabel,
+            onClick: handleClose
+          }),
+          trailingButton: actionText && onAction ? /*#__PURE__*/_jsx(BpkButtonLink, {
+            onClick: onAction,
+            children: actionText
+          }) : null
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: getClassName('bpk-bottom-sheet--content'),
+        children: children
+      })]
     })
   });
 };
-export default BpkBottomSheet;
+const BpkBottomSheetWithBreakpoint = props => /*#__PURE__*/_jsx(BpkBreakpoint, {
+  query: BREAKPOINTS.ABOVE_MOBILE,
+  children: isAboveMobile => /*#__PURE__*/_jsx(BpkBottomSheet, {
+    ...props,
+    isAboveMobile: isAboveMobile
+  })
+});
+export default BpkBottomSheetWithBreakpoint;

package/bpk-component-calendar/src/BpkCalendarContainer.d.ts

@@ -44,7 +44,7 @@ type State = {
 };
 declare const withCalendarState: <P extends object>(Calendar: ComponentType<P>) => {
     new (props: CalendarProps<P>): {
-        UNSAFE_componentWillReceiveProps(nextProps: CalendarProps<P>): void;
+        componentDidUpdate(prevProps: CalendarProps<P>): void;
         handleDateFocus: (event: UIEvent, { date, source }: {
             date: Date;
             source: string;
@@ -69,10 +69,10 @@ declare const withCalendarState: <P extends object>(Calendar: ComponentType<P>)
         componentWillUnmount?(): void;
         componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
         getSnapshotBeforeUpdate?(prevProps: Readonly<CalendarProps<P>>, prevState: Readonly<State>): any;
-        componentDidUpdate?(prevProps: Readonly<CalendarProps<P>>, prevState: Readonly<State>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
         componentWillReceiveProps?(nextProps: Readonly<CalendarProps<P>>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<CalendarProps<P>>, nextContext: any): void;
         componentWillUpdate?(nextProps: Readonly<CalendarProps<P>>, nextState: Readonly<State>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<CalendarProps<P>>, nextState: Readonly<State>, nextContext: any): void;
     };
@@ -94,7 +94,7 @@ declare const withCalendarState: <P extends object>(Calendar: ComponentType<P>)
 };
 declare const _default: {
     new (props: CalendarProps<import("./composeCalendar").Props>): {
-        UNSAFE_componentWillReceiveProps(nextProps: CalendarProps<import("./composeCalendar").Props>): void;
+        componentDidUpdate(prevProps: CalendarProps<import("./composeCalendar").Props>): void;
         handleDateFocus: (event: UIEvent, { date, source }: {
             date: Date;
             source: string;
@@ -119,10 +119,10 @@ declare const _default: {
         componentWillUnmount?(): void;
         componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
         getSnapshotBeforeUpdate?(prevProps: Readonly<CalendarProps<import("./composeCalendar").Props>>, prevState: Readonly<State>): any;
-        componentDidUpdate?(prevProps: Readonly<CalendarProps<import("./composeCalendar").Props>>, prevState: Readonly<State>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
         componentWillReceiveProps?(nextProps: Readonly<CalendarProps<import("./composeCalendar").Props>>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<CalendarProps<import("./composeCalendar").Props>>, nextContext: any): void;
         componentWillUpdate?(nextProps: Readonly<CalendarProps<import("./composeCalendar").Props>>, nextState: Readonly<State>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<CalendarProps<import("./composeCalendar").Props>>, nextState: Readonly<State>, nextContext: any): void;
     };

package/bpk-component-calendar/src/BpkCalendarContainer.js

@@ -28,24 +28,24 @@ import { addDays, addMonths, dateToBoundaries, isAfter, isSameMonth, isSameDay,
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Updates the current focused date
- * @param {Object} currentProps current input properties
- * @param {Object} nextProps next input properties when component changes
+ * @param {Object} prevProps previous input properties
+ * @param {Object} currentProps current input properties when component changes
  * @returns {Boolean} if the selected date has changed
  */
-const focusedDateHasChanged = (currentProps, nextProps) => {
+const focusedDateHasChanged = (prevProps, currentProps) => {
+  const prevSelectConfig = prevProps.selectionConfiguration;
   const currentSelectConfig = currentProps.selectionConfiguration;
-  const nextSelectConfig = nextProps.selectionConfiguration;
-  const rawNextSelectedDate = nextSelectConfig.type === CALENDAR_SELECTION_TYPE.single ? nextSelectConfig.date : nextSelectConfig.startDate;
-  const rawSelectedDate = currentSelectConfig.type === CALENDAR_SELECTION_TYPE.single ? currentSelectConfig.date : currentSelectConfig.startDate;
-  if (!rawSelectedDate && !rawNextSelectedDate) {
+  const rawCurrentSelectedDate = currentSelectConfig.type === CALENDAR_SELECTION_TYPE.single ? currentSelectConfig.date : currentSelectConfig.startDate;
+  const rawPrevSelectedDate = prevSelectConfig.type === CALENDAR_SELECTION_TYPE.single ? prevSelectConfig.date : prevSelectConfig.startDate;
+  if (!rawPrevSelectedDate && !rawCurrentSelectedDate) {
     return false;
   }
-  if (rawSelectedDate && !rawNextSelectedDate || !rawSelectedDate && rawNextSelectedDate) {
+  if (rawPrevSelectedDate && !rawCurrentSelectedDate || !rawPrevSelectedDate && rawCurrentSelectedDate) {
     return true;
   }
 
   // @ts-expect-error TS reporting incorrectly as we are already checking above that the dates are not null
-  return !isSameDay(rawNextSelectedDate, rawSelectedDate);
+  return !isSameDay(rawCurrentSelectedDate, rawPrevSelectedDate);
 };
 
 /**
@@ -115,11 +115,11 @@ const withCalendarState = Calendar => {
         focusedDate: determineFocusedDate(rawSelectedDate[0], initiallyFocusedDate, minDate, maxDate)
       };
     }
-    UNSAFE_componentWillReceiveProps(nextProps) {
-      const rawNextSelectedDate = getRawSelectedDate(nextProps.selectionConfiguration);
-      const minDate = startOfDay(nextProps.minDate);
-      const maxDate = startOfDay(nextProps.maxDate);
-      if (focusedDateHasChanged(this.props, nextProps)) {
+    componentDidUpdate(prevProps) {
+      const rawNextSelectedDate = getRawSelectedDate(this.props.selectionConfiguration);
+      const minDate = startOfDay(this.props.minDate);
+      const maxDate = startOfDay(this.props.maxDate);
+      if (focusedDateHasChanged(prevProps, this.props)) {
         this.setState({
           focusedDate: dateToBoundaries(rawNextSelectedDate[0], minDate, maxDate)
         });

package/bpk-component-calendar/src/BpkCalendarGrid.d.ts

@@ -50,7 +50,7 @@ declare class BpkCalendarGrid extends Component<Props, State> {
     static defaultProps: DefaultProps;
     constructor(props: Props);
     componentDidMount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
+    componentDidUpdate(prevProps: Props): void;
     render(): import("react/jsx-runtime").JSX.Element;
 }
 declare const BpkCalendarGridWithTransition: typeof BpkCalendarGrid | ((props: Omit<DefaultProps & {

package/bpk-component-calendar/src/BpkCalendarGrid.js

@@ -69,11 +69,11 @@ class BpkCalendarGrid extends Component {
       calendarMonthWeeks: getCalendar(this.props.month, this.props.weekStartsOn, this.props.formatDateFull)
     });
   }
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  componentDidUpdate(prevProps) {
     // We cache expensive calculations (and identities) in state
-    if (!isSameMonth(nextProps.month, this.props.month) || nextProps.weekStartsOn !== this.props.weekStartsOn) {
+    if (!isSameMonth(this.props.month, prevProps.month) || this.props.weekStartsOn !== prevProps.weekStartsOn) {
       this.setState({
-        calendarMonthWeeks: getCalendar(nextProps.month, nextProps.weekStartsOn, nextProps.formatDateFull)
+        calendarMonthWeeks: getCalendar(this.props.month, this.props.weekStartsOn, this.props.formatDateFull)
       });
     }
   }

package/bpk-component-calendar/src/BpkCalendarGridTransition.d.ts

@@ -23,8 +23,7 @@ declare class BpkCalendarGridTransition extends Component<Props, State> {
         focusedDate: null;
     };
     constructor(props: Props);
-    UNSAFE_componentWillReceiveProps({ month: nextMonth }: Props): void;
-    componentDidUpdate(): void;
+    componentDidUpdate(prevProps: Props): void;
     onMonthTransitionEnd(): void;
     render(): import("react/jsx-runtime").JSX.Element;
 }

package/bpk-component-calendar/src/BpkCalendarGridTransition.js

@@ -51,16 +51,18 @@ class BpkCalendarGridTransition extends Component {
     };
     this.isTransitionEndSupported = isTransitionEndSupported();
   }
-  UNSAFE_componentWillReceiveProps({
-    month: nextMonth = new Date()
-  }) {
+  componentDidUpdate(prevProps) {
     const {
-      month = new Date()
+      month: currentMonth = new Date()
     } = this.props;
-    const hasMonthChanged = !isSameMonth(month, nextMonth);
+    const {
+      month: previousMonth = new Date()
+    } = prevProps;
+    const hasMonthChanged = !isSameMonth(previousMonth, currentMonth);
     if (hasMonthChanged) {
       const reverse = isRTL();
-      if (differenceInCalendarMonths(nextMonth, month) === 1) {
+      const monthDifference = differenceInCalendarMonths(currentMonth, previousMonth);
+      if (monthDifference === 1) {
         // Transition to next month
         this.setState({
           transitionValue: reverse ? transitionValues.previous : transitionValues.next,
@@ -68,7 +70,7 @@ class BpkCalendarGridTransition extends Component {
         });
         return;
       }
-      if (differenceInCalendarMonths(nextMonth, month) === -1) {
+      if (monthDifference === -1) {
         // Transition to previous month
         this.setState({
           transitionValue: reverse ? transitionValues.next : transitionValues.previous,
@@ -79,12 +81,11 @@ class BpkCalendarGridTransition extends Component {
       this.setState({
         // Used in a test so this is valid usage.
         // eslint-disable-next-line react/no-unused-state
-        currentMonth: nextMonth,
-        months: [addMonths(nextMonth, -1), nextMonth, addMonths(nextMonth, 1)]
+        currentMonth,
+        months: [addMonths(currentMonth, -1), currentMonth, addMonths(currentMonth, 1)]
       });
     }
-  }
-  componentDidUpdate() {
+
     // For IE9, immediately call onMonthTransitionEnd instead of
     // waiting for the animation to complete
     // Thx to Airbnb's react-dates <3

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

@@ -65,7 +65,7 @@ const BpkCardList = props => {
     children: /*#__PURE__*/_jsx(BpkBreakpoint, {
       query: BREAKPOINTS.MOBILE,
       children: isMobile => /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(BpkSectionHeader, {
+        children: [title !== undefined && /*#__PURE__*/_jsx(BpkSectionHeader, {
           title: title,
           description: description,
           button: shouldShowHeaderButton(isMobile) ? headerButton : null

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

@@ -29,8 +29,6 @@ type AccessibilityLabels = {
     slideLabel?: (index: number, childrenLength: number) => string;
 };
 type CardListBaseProps = {
-    title: string;
-    description?: string;
     cardList: ReactElement[];
     layoutMobile: LayoutMobile;
     layoutDesktop: LayoutDesktop;
@@ -45,6 +43,13 @@ type CardListBaseProps = {
     buttonHref?: string;
     expandText?: string;
     accessibilityLabels?: AccessibilityLabels;
+} & TitleProps;
+type TitleProps = {
+    title: string;
+    description?: string;
+} | {
+    title?: never;
+    description?: never;
 };
 type CardListGridStackProps = {
     children: ReactElement[];

package/bpk-component-datepicker/src/BpkDatepicker.d.ts

@@ -63,7 +63,7 @@ declare class BpkDatepicker extends Component<Props, State> {
             }> & {
                 [rest: string]: any;
             }): {
-                UNSAFE_componentWillReceiveProps(nextProps: Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
+                componentDidUpdate(prevProps: Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
                     onDateClick: ((date: Date) => void) | null;
                     onDateKeyDown: ((event: KeyboardEvent) => void) | null;
                     month: Date;
@@ -155,7 +155,9 @@ declare class BpkDatepicker extends Component<Props, State> {
                     preventKeyboardFocus: boolean;
                     focusedDate: Date;
                 }>): any;
-                componentDidUpdate?(prevProps: Readonly<Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
+                componentWillMount?(): void;
+                UNSAFE_componentWillMount?(): void;
+                componentWillReceiveProps?(nextProps: Readonly<Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
                     onDateClick: ((date: Date) => void) | null;
                     onDateKeyDown: ((event: KeyboardEvent) => void) | null;
                     month: Date;
@@ -163,13 +165,8 @@ declare class BpkDatepicker extends Component<Props, State> {
                     maxDate: Date;
                 }> & {
                     [rest: string]: any;
-                }>, prevState: Readonly<{
-                    preventKeyboardFocus: boolean;
-                    focusedDate: Date;
-                }>, snapshot?: any): void;
-                componentWillMount?(): void;
-                UNSAFE_componentWillMount?(): void;
-                componentWillReceiveProps?(nextProps: Readonly<Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
+                }>, nextContext: any): void;
+                UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
                     onDateClick: ((date: Date) => void) | null;
                     onDateKeyDown: ((event: KeyboardEvent) => void) | null;
                     month: Date;

package/bpk-component-info-banner/src/AnimateAndFade.d.ts

@@ -22,8 +22,7 @@ declare class AnimateAndFade extends Component<Props, State> {
     };
     constructor(props: Props);
     componentDidMount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
-    componentDidUpdate(): void;
+    componentDidUpdate(prevProps: Props): void;
     onAnimateHeightComplete: () => void;
     onFadeComplete: () => void;
     toggle: () => void;

package/bpk-component-info-banner/src/AnimateAndFade.js

@@ -49,13 +49,10 @@ class AnimateAndFade extends Component {
       this.toggle();
     }
   }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.show === this.props.show) {
-      return;
+  componentDidUpdate(prevProps) {
+    if (this.props.show !== prevProps.show) {
+      this.toggle();
     }
-    this.toggle();
-  }
-  componentDidUpdate() {
     if (this.state.initiateShow) {
       // React doesn't like us calling setState from componentDidUpdate as it can lead to an infinite re-renders.
       // I think it is ok here, however, as this will only happen conditionally (ie once)

package/bpk-component-page-indicator/src/BpkPageIndicator.d.ts

@@ -3,6 +3,7 @@ import { DIRECTIONS } from './NavButton';
 export declare const VARIANT: {
     readonly default: "default";
     readonly overImage: "overImage";
+    readonly overImageSpaced: "overImageSpaced";
 };
 type Variant = (typeof VARIANT)[keyof typeof VARIANT];
 type Direction = (typeof DIRECTIONS)[keyof typeof DIRECTIONS];
@@ -17,5 +18,5 @@ export type Props = {
     className?: string;
     showNav?: boolean;
 };
-declare const BpkPageIndicator: ({ className, currentIndex, indicatorLabel, nextNavLabel, onClick, prevNavLabel, showNav, totalIndicators, variant, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const BpkPageIndicator: ({ className, currentIndex, indicatorLabel, nextNavLabel, onClick, prevNavLabel, showNav, totalIndicators, variant }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkPageIndicator;

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

@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+import { BUTTON_TYPES } from "../../bpk-component-button";
 import { cssModules } from "../../bpk-react-utils";
 import NavButton, { DIRECTIONS } from "./NavButton";
 import STYLES from "./BpkPageIndicator.module.css";
@@ -25,7 +26,8 @@ const DISPLAYED_TOTAL = 5;
 const START_SCROLL_INDEX = Math.floor(DISPLAYED_TOTAL / 2);
 export const VARIANT = {
   default: 'default',
-  overImage: 'overImage'
+  overImage: 'overImage',
+  overImageSpaced: 'overImageSpaced'
 };
 const BpkPageIndicator = ({
   className = undefined,
@@ -48,7 +50,7 @@ const BpkPageIndicator = ({
     '--scroll-index': totalIndicators > DISPLAYED_TOTAL ? Math.min(currentIndex - START_SCROLL_INDEX, totalIndicators - DISPLAYED_TOTAL) : 0
   };
   return /*#__PURE__*/_jsx("div", {
-    className: className,
+    className: variant === VARIANT.overImageSpaced ? getClassName('bpk-page-indicator-fullWidth__container') : className,
     "aria-hidden": isInteractive ? 'false' : 'true',
     "data-testid": "indicator-container",
     children: /*#__PURE__*/_jsxs("div", {
@@ -56,9 +58,10 @@ const BpkPageIndicator = ({
       children: [showNav && /*#__PURE__*/_jsx(NavButton, {
         currentIndex: currentIndex,
         onClick: onClick,
-        disabled: currentIndex === 0,
+        disabled: variant === VARIANT.overImageSpaced ? totalIndicators <= 1 : currentIndex === 0 || totalIndicators <= 1,
         direction: DIRECTIONS.PREV,
-        ariaLabel: prevNavLabel
+        ariaLabel: prevNavLabel,
+        type: variant === VARIANT.overImageSpaced ? BUTTON_TYPES.secondaryOnDark : BUTTON_TYPES.link
       }), /*#__PURE__*/_jsx("div", {
         className: getClassName('bpk-page-indicator__container'),
         children: /*#__PURE__*/_jsx("div", {
@@ -81,9 +84,10 @@ const BpkPageIndicator = ({
       }), showNav && /*#__PURE__*/_jsx(NavButton, {
         currentIndex: currentIndex,
         onClick: onClick,
-        disabled: currentIndex === totalIndicators - 1,
+        disabled: variant === VARIANT.overImageSpaced ? totalIndicators <= 1 : currentIndex === totalIndicators - 1 || totalIndicators <= 1,
         ariaLabel: nextNavLabel,
-        direction: DIRECTIONS.NEXT
+        direction: DIRECTIONS.NEXT,
+        type: variant === VARIANT.overImageSpaced ? BUTTON_TYPES.secondaryOnDark : BUTTON_TYPES.link
       })]
     })
   });

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{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{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{background-color:#fff;pointer-events:none}
+.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{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{background-color:#fff;pointer-events:none}

package/bpk-component-page-indicator/src/NavButton.d.ts

@@ -1,15 +1,18 @@
+import { BUTTON_TYPES } from '../../bpk-component-button';
 export declare const DIRECTIONS: {
     readonly PREV: "PREV";
     readonly INDICATORS: "INDICATORS";
     readonly NEXT: "NEXT";
 };
 type Direction = (typeof DIRECTIONS)[keyof typeof DIRECTIONS];
+type ButtonType = (typeof BUTTON_TYPES)[keyof typeof BUTTON_TYPES];
 type Props = {
     ariaLabel: string | undefined;
     currentIndex: number;
     direction: Direction;
     disabled?: boolean;
     onClick?: (event: React.MouseEvent<HTMLButtonElement>, newIndex: number, direction: Direction) => void;
+    type?: ButtonType;
 };
-declare const NavButton: ({ ariaLabel, currentIndex, direction, disabled, onClick, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const NavButton: ({ ariaLabel, currentIndex, direction, disabled, onClick, type, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default NavButton;

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

@@ -33,10 +33,11 @@ const NavButton = ({
   currentIndex,
   direction,
   disabled = false,
-  onClick = () => {}
+  onClick = () => {},
+  type = BUTTON_TYPES.link
 }) => /*#__PURE__*/_jsx(BpkButtonV2, {
   iconOnly: true,
-  type: BUTTON_TYPES.link,
+  type: type,
   onClick: e => {
     if (direction === DIRECTIONS.PREV) {
       onClick(e, currentIndex - 1, direction);

package/bpk-component-price-range/src/BpkPriceMarker.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-price-marker{position:relative;display:flex;z-index:1;flex-direction:column;align-items:center;flex:none;border:none;border-radius:.25rem;background:none;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3);margin-block-end:.375rem}.bpk-price-marker span{display:inline-flex;z-index:1;padding:.125rem .5rem;border-radius:.25rem;color:#fff}.bpk-price-marker__arrow{position:absolute;top:50%;z-index:0;width:1rem;height:1rem;transform:rotate(45deg);border-radius:25%;background-color:inherit}.bpk-price-marker--low{background-color:#0c838a}.bpk-price-marker--medium{background-color:#05203c}.bpk-price-marker--high{background-color:#e70866}
+.bpk-price-marker{position:relative;display:flex;z-index:1;flex-direction:column;align-items:center;flex:none;border:none;border-radius:.25rem;background:none;white-space:nowrap;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3);margin-block-end:.375rem}.bpk-price-marker span{display:inline-flex;z-index:1;padding:.125rem .5rem;border-radius:.25rem;color:#fff}.bpk-price-marker__arrow{position:absolute;top:50%;z-index:0;width:1rem;height:1rem;transform:rotate(45deg);border-radius:25%;background-color:inherit}.bpk-price-marker--low{background-color:#0c838a}.bpk-price-marker--medium{background-color:#05203c}.bpk-price-marker--high{background-color:#e70866}

package/bpk-component-price-range/src/BpkPriceRange.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-price-range{display:flex;width:100%;flex-direction:column;padding-block:.25rem;row-gap:.25rem}.bpk-price-range--large{padding-block:0}.bpk-price-range__lines{position:relative;display:flex;height:.25rem;flex:none;gap:.125rem}.bpk-price-range__lines--large{height:.5rem}.bpk-price-range__line--low{width:calc(100%*var(--low));height:100%;background-color:#0c838a;border-end-start-radius:.5rem;border-start-start-radius:.5rem}.bpk-price-range__line--lowLarge{border-end-start-radius:.75rem;border-start-start-radius:.75rem}.bpk-price-range__line--medium{width:calc(100%*(var(--high) - var(--low)));height:100%;background-color:#05203c}.bpk-price-range__line--high{width:calc(100%*(1 - var(--high)));height:100%;background-color:#e70866;border-end-end-radius:.5rem;border-start-end-radius:.5rem}.bpk-price-range__line--highLarge{border-end-end-radius:.75rem;border-start-end-radius:.75rem}.bpk-price-range__line--dot{position:absolute;top:50%;display:flex;width:.75rem;height:.75rem;justify-content:center;align-items:center;transform:translate(0, -50%);border-radius:50%;margin-inline-start:var(--prefilled-width)}.bpk-price-range__line--dot::after{content:"";display:block;width:.25rem;height:.25rem;border-radius:50%;background-color:#fff}.bpk-price-range__marker{width:fit-content;margin-inline-start:var(--prefilled-width)}.bpk-price-range__ranges{position:relative;display:flex;width:100%;height:1.25rem}.bpk-price-range__ranges span{position:absolute;display:inline-block;transform:translate(-50%, 0)}html[dir=rtl] .bpk-price-range__ranges span{transform:translate(50%, 0)}.bpk-price-range__ranges span:first-child{inset-inline-start:calc(100%*var(--low))}.bpk-price-range__ranges span:last-child{inset-inline-start:calc(100%*var(--high))}
+.bpk-price-range{display:flex;width:100%;flex-direction:column;padding-block:.25rem;row-gap:.25rem}.bpk-price-range--large{padding-block:0}.bpk-price-range__lines{position:relative;display:flex;height:.25rem;flex:none;gap:.125rem}.bpk-price-range__lines--large{height:.5rem}.bpk-price-range__line--low{width:calc(100%*var(--low));height:100%;background-color:#0c838a;border-end-start-radius:.5rem;border-start-start-radius:.5rem}.bpk-price-range__line--lowLarge{border-end-start-radius:.75rem;border-start-start-radius:.75rem}.bpk-price-range__line--medium{width:calc(100%*(var(--high) - var(--low)));height:100%;background-color:#05203c}.bpk-price-range__line--high{width:calc(100%*(1 - var(--high)));height:100%;background-color:#e70866;border-end-end-radius:.5rem;border-start-end-radius:.5rem}.bpk-price-range__line--highLarge{border-end-end-radius:.75rem;border-start-end-radius:.75rem}.bpk-price-range__line--dot{position:absolute;top:50%;display:flex;width:.75rem;height:.75rem;justify-content:center;align-items:center;transform:translate(0, -50%);border-radius:50%;margin-inline-start:var(--prefilled-width)}.bpk-price-range__line--dot::after{content:"";display:block;width:.25rem;height:.25rem;border-radius:50%;background-color:#fff}.bpk-price-range__marker{width:fit-content;margin-inline-start:var(--prefilled-width)}.bpk-price-range__ranges{position:relative;display:flex;width:100%;height:1.25rem;white-space:nowrap}.bpk-price-range__ranges span{position:absolute;display:inline-block;transform:translate(-50%, 0)}html[dir=rtl] .bpk-price-range__ranges span{transform:translate(50%, 0)}.bpk-price-range__ranges span:first-child{inset-inline-start:calc(100%*var(--low))}.bpk-price-range__ranges span:last-child{inset-inline-start:calc(100%*var(--high))}

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendar.d.ts

@@ -8,7 +8,7 @@ declare const _default: {
     }> & {
         [rest: string]: any;
     }): {
-        UNSAFE_componentWillReceiveProps(nextProps: Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
+        componentDidUpdate(prevProps: Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
             onDateClick: ((date: Date) => void) | null;
             onDateKeyDown: ((event: KeyboardEvent) => void) | null;
             month: Date;
@@ -100,7 +100,9 @@ declare const _default: {
             preventKeyboardFocus: boolean;
             focusedDate: Date;
         }>): any;
-        componentDidUpdate?(prevProps: Readonly<Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
             onDateClick: ((date: Date) => void) | null;
             onDateKeyDown: ((event: KeyboardEvent) => void) | null;
             month: Date;
@@ -108,13 +110,8 @@ declare const _default: {
             maxDate: Date;
         }> & {
             [rest: string]: any;
-        }>, prevState: Readonly<{
-            preventKeyboardFocus: boolean;
-            focusedDate: Date;
-        }>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
+        }>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
             onDateClick: ((date: Date) => void) | null;
             onDateKeyDown: ((event: KeyboardEvent) => void) | null;
             month: Date;

package/bpk-react-utils/src/BpkDialogWrapper/BpkDialogWrapper.d.ts

@@ -1,4 +1,4 @@
-import type { SyntheticEvent, ReactNode } from "react";
+import type { SyntheticEvent, ReactNode } from 'react';
 interface CommonProps {
     children: ReactNode;
     closeOnEscPressed?: boolean;

package/bpk-react-utils/src/BpkDialogWrapper/BpkDialogWrapper.js

@@ -16,23 +16,20 @@
  * limitations under the License.
  */
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from 'react';
 import CSSTransition from 'react-transition-group/CSSTransition';
 import cssModules from "../cssModules";
 import STYLES from "./BpkDialogWrapper.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-;
 // TODO: this check if the browser support the HTML dialog element. We can remove it once we drop support as a business for Safari 14
 const dialogSupported = typeof HTMLDialogElement === 'function';
 const setPageProperties = ({
   isDialogOpen
 }) => {
   document.body.style.overflowY = isDialogOpen ? 'hidden' : 'visible';
-  if (!dialogSupported) {
-    document.body.style.position = isDialogOpen ? 'fixed' : 'relative';
-    document.body.style.width = isDialogOpen ? '100%' : 'auto';
-  }
+  document.body.style.position = isDialogOpen ? 'fixed' : 'relative';
+  document.body.style.width = isDialogOpen ? '100%' : 'auto';
 };
 export const BpkDialogWrapper = ({
   children,
@@ -52,6 +49,8 @@ export const BpkDialogWrapper = ({
 }) => {
   const ref = useRef(null);
   const [dialogTarget, setDialogTarget] = useState(null);
+
+  // Handle the opening and closing of the dialog
   useEffect(() => {
     const dialog = document.getElementById(`${id}`);
     const dialogWithPolyfill = document.getElementById(`${id}-polyfill`);
@@ -63,7 +62,7 @@ export const BpkDialogWrapper = ({
           } = event;
           if (target === modal) {
             onClose(event, {
-              source: "DOCUMENT_CLICK"
+              source: 'DOCUMENT_CLICK'
             });
             event.stopPropagation();
           }
@@ -73,7 +72,7 @@ export const BpkDialogWrapper = ({
     const handleKeyDown = event => {
       if (closeOnEscPressed && event.key === 'Escape' && (!dialogWithPolyfill || event.target === dialogWithPolyfill)) {
         onClose(event, {
-          source: "ESCAPE"
+          source: 'ESCAPE'
         });
       }
       event.stopPropagation();
@@ -94,6 +93,13 @@ export const BpkDialogWrapper = ({
     } else {
       ref.current?.close?.();
     }
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [id, isOpen, onClose, closeOnEscPressed, closeOnScrimClick]);
+
+  // Lock the scroll of the page when the dialog is open
+  useEffect(() => {
     setPageProperties({
       isDialogOpen: isOpen
     });
@@ -101,15 +107,14 @@ export const BpkDialogWrapper = ({
       setPageProperties({
         isDialogOpen: false
       });
-      window.removeEventListener('keydown', handleKeyDown);
     };
-  }, [id, isOpen, onClose, closeOnEscPressed, closeOnScrimClick]);
+  }, [isOpen]);
   const aria = {
-    ...("ariaLabelledby" in ariaProps ? {
-      "aria-labelledby": ariaProps.ariaLabelledby
+    ...('ariaLabelledby' in ariaProps ? {
+      'aria-labelledby': ariaProps.ariaLabelledby
     } : undefined),
-    ...("ariaLabel" in ariaProps ? {
-      "aria-label": ariaProps.ariaLabel
+    ...('ariaLabel' in ariaProps ? {
+      'aria-label': ariaProps.ariaLabel
     } : undefined)
   };
   return isOpen ? /*#__PURE__*/_jsxs("div", {

package/package.json

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